@source "../../**/*.razor";
@source "../../**/*.cs";
@source "../../../../../../features/flexform/FlexForm.Client.Ux.Web/**/*.razor";
@source "../../../../../../features/flexform/FlexForm.Client.Ux.Web/**/*.cs";
@source "../../../../../../features/flexform/FlexForm.Core/**/*.razor";
@source "../../../../../../features/flexform/FlexForm.Core/**/*.cs";
@source "../../../../../../core/domain/identity/Identity.Contracts/**/*.razor";
@source "../../../../../../core/domain/identity/Identity.Contracts/**/*.cs";
@source "../../../../../../core/infrastructure/identity/Identity.Contracts/**/*.razor";
@source "../../../../../../core/infrastructure/identity/Identity.Contracts/**/*.cs";
@source "../../../../../../core/libraries/common/**/*.razor";
@source "../../../../../../core/libraries/common/**/*.cs";
@source "../../../../../../core/ui/contracts/**/*.razor";
@source "../../../../../../core/ui/contracts/**/*.cs";
@source "../../../../../../core/ui/web/**/*.razor";
@source "../../../../../../core/ui/web/**/*.cs";
@source "../../../../../../features/flexform/FlexForm.Client.Ux.Web/**/*.razor";
@source "../../../../../../features/flexform/FlexForm.Client.Ux.Web/**/*.cs";
@source "../../../../../../features/flexform/FlexForm.Core/**/*.razor";
@source "../../../../../../features/flexform/FlexForm.Core/**/*.cs";
@source "../../../../../../core/domain/identity/Identity.Contracts/**/*.razor";
@source "../../../../../../core/domain/identity/Identity.Contracts/**/*.cs";
@source "../../../../../../core/infrastructure/identity/Identity.Contracts/**/*.razor";
@source "../../../../../../core/infrastructure/identity/Identity.Contracts/**/*.cs";
@source "../../../../../../core/libraries/common/**/*.razor";
@source "../../../../../../core/libraries/common/**/*.cs";
@source "../../../../../../core/ui/contracts/**/*.razor";
@source "../../../../../../core/ui/contracts/**/*.cs";
@source "../../../../../../core/ui/web/**/*.razor";
@source "../../../../../../core/ui/web/**/*.cs";

.flex-widget-item {
  padding: 12px 16px;
  margin-bottom: 10px;
  background: var(--flex-bg-flex-widget);
  border: 2px solid var(--flex-border-flex-widget);
  border-radius: 6px;
  cursor: move;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.2s;
  user-select: none;
  max-height: 35px;
  color: var(--flex-icon-color);
}

  .flex-widget-item svg {
    display: block;
  }

.flex-widget-item-disabled {
  color: #CBD5E1;
  /*    background: #f9fafb;*/
  cursor: not-allowed;
  opacity: 0.5;
}

.flex-widget-item:hover:not(.flex-widget-item-disabled) {
  background: #f3f4f6;
  border-color: #2563eb;
  color: #2563eb;
}

.dark .flex-widget-item:hover:not(.flex-widget-item-disabled) {
  background: #1e2939;
}

.flex-widget-item:active {
  opacity: 0.7;
}

.flex-widget-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Widgets Panel */
.flex-widgets-panel {
  width: 250px;
  background: var(--flex-bg-raised-panel);
  border-right: 1px solid var(--flex-border-color);
  padding: 20px;
  overflow-y: auto;
  flex-shrink: 0;
}

  .flex-widgets-panel.hidden {
    display: none;
  }

  .flex-widgets-panel h2 {
    font-size: 16px;
    margin-bottom: 15px;
    color: var(--flex-text-header);
  }

.flex-widgets-panel-header {
  margin-bottom: 16px;
}

.flex-edit-defaults-btn {
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: 1px solid var(--flex-border-color);
  border-radius: 4px;
  color: var(--flex-text-header);
  cursor: pointer;
  font-size: 13px;
  transition: all 0.15s;
}

  .flex-edit-defaults-btn:hover {
    background: #2563eb;
    border-color: #2563eb;
    color: white;
  }

.flex-rules-panel {
  width: 300px;
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--flex-bg-raised-panel);
  border-left: 1px solid #e5e7eb;
  padding: 20px;
  overflow-y: auto;
}

.flex-rules-panel-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 15px;
  color: var(--flex-text-header);
}

.flex-rules-panel-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.flex-rules-panel-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #9ca3af;
  padding: 40px 20px;
  gap: 16px;
}

.flex-rules-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: #2563eb;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: background 0.15s;
}

  .flex-rules-add-btn:hover {
    background: #1d4ed8;
  }

.flex-rules-editor {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.flex-rules-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.flex-rules-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--flex-text-header);
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.flex-rules-select,
.flex-rules-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 13px;
  color: var(--flex-text-header);
  background: var(--flex-input-background, white);
  transition: border-color 0.15s;
}

  .flex-rules-select:focus,
  .flex-rules-input:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
  }

.flex-rules-hint {
  font-size: 12px;
  color: #9ca3af;
  margin: 0;
  line-height: 1.4;
}

.flex-rules-summary {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 12px;
}

.flex-rules-summary-label {
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.flex-rules-summary-text {
  font-size: 13px;
  color: var(--flex-text-header);
  margin: 4px 0 0;
  line-height: 1.5;
}

.flex-rules-remove-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: transparent;
  color: #ef4444;
  border: 1px solid #fecaca;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: background 0.15s, border-color 0.15s;
  align-self: flex-start;
}

  .flex-rules-remove-btn:hover {
    background: #fef2f2;
    border-color: #ef4444;
  }

/* Overlay */
.flex-style-defaults-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

/* Modal */
.flex-style-defaults-modal {
  background: var(--flex-bg-raised-panel);
  border: 1px solid var(--flex-border-color);
  border-radius: 8px;
  width: 800px;
  max-width: 90vw;
  height: 600px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

/* Header */
.flex-style-defaults-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--flex-border-color);
  flex-shrink: 0;
}

  .flex-style-defaults-header h2 {
    margin: 0;
    font-size: 16px;
    color: var(--flex-text-header);
  }

.flex-style-defaults-close-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--flex-text-header);
  padding: 0 4px;
  line-height: 1;
}

  .flex-style-defaults-close-btn:hover {
    opacity: 0.7;
  }

/* Body */
.flex-style-defaults-body {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* Widget List (Left Panel) */
.flex-style-defaults-widget-list {
  width: 220px;
  border-right: 1px solid var(--flex-border-color);
  padding: 12px;
  overflow-y: auto;
  flex-shrink: 0;
}

  .flex-style-defaults-widget-list h3 {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--flex-text-header);
    margin: 12px 0 6px 0;
    opacity: 0.7;
  }

    .flex-style-defaults-widget-list h3:first-child {
      margin-top: 0;
    }

.flex-style-defaults-widget-item {
  padding: 8px 10px;
  margin-bottom: 4px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--flex-icon-color);
  transition: background 0.15s;
}

  .flex-style-defaults-widget-item:hover {
    background: var(--flex-bg-flex-widget);
  }

  .flex-style-defaults-widget-item.selected {
    background: #2563eb;
    color: white;
  }

.flex-style-defaults-widget-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

::deep .flex-style-defaults-widget-icon svg {
  display: block;
}

/* Properties Panel (Right Panel) */
.flex-style-defaults-properties {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
}

/* Preview Section */
.flex-style-defaults-preview {
  margin-bottom: 16px;
}

.flex-style-defaults-preview-box {
  background: white;
  border: 1px solid var(--flex-border-color);
  border-radius: 6px;
  padding: 16px;
  margin-top: 6px;
}

.flex-style-defaults-preview-unavailable {
  color: var(--flex-text-header);
  opacity: 0.5;
  font-style: italic;
  font-size: 13px;
  margin: 0;
  text-align: center;
}

.flex-style-defaults-properties-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

::deep .flex-group-header {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--flex-text-header);
  margin-top: 8px;
  opacity: 0.7;
}

.flex-style-defaults-empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--flex-text-header);
  opacity: 0.5;
  font-style: italic;
}

/* Scrollbar styling */
.flex-style-defaults-widget-list::-webkit-scrollbar,
.flex-style-defaults-properties::-webkit-scrollbar {
  width: 6px;
}

.flex-style-defaults-widget-list::-webkit-scrollbar-track,
.flex-style-defaults-properties::-webkit-scrollbar-track {
  background: transparent;
}

.flex-style-defaults-widget-list::-webkit-scrollbar-thumb,
.flex-style-defaults-properties::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

  .flex-style-defaults-widget-list::-webkit-scrollbar-thumb:hover,
  .flex-style-defaults-properties::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
  }

/* Text Alignment Editor */
.flex-alignment-editor {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.flex-alignment-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.flex-alignment-label {
  font-size: 12px;
  color: var(--flex-text-header);
  min-width: 60px;
}

.flex-alignment-button-group {
  display: flex;
  gap: 2px;
  background-color: #e5e7eb;
  border-radius: 6px;
  padding: 2px;
}

.flex-alignment-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 28px;
  padding: 4px;
  border: none;
  background-color: transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

  .flex-alignment-button:hover {
    background-color: #d1d5db;
  }

  .flex-alignment-button:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
  }

  .flex-alignment-button.active {
    background-color: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }

    .flex-alignment-button.active:hover {
      background-color: #ffffff;
    }

.flex-alignment-icon {
  width: 18px;
  height: 18px;
  fill: #374151;
}

.flex-alignment-button.active .flex-alignment-icon {
  fill: #1d4ed8;
}

.flex-property-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 6px;
}

  .flex-property-group input[type="text"],
  .flex-property-group input[type="number"],
  .flex-property-group textarea,
  .flex-property-group select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 14px;
    font-family: inherit;
    transition: all 0.2s;
  }

    .flex-property-group input[type="text"]:focus,
    .flex-property-group input[type="number"]:focus,
    .flex-property-group textarea:focus,
    .flex-property-group select:focus {
      outline: none;
      border-color: #2563eb;
      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
    }

    .flex-property-group input[type="text"]:disabled {
      background: #f3f4f6;
      color: #9ca3af;
      cursor: not-allowed;
    }

  .flex-property-group input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
  }

  .flex-property-group textarea {
    resize: vertical;
    min-height: 60px;
  }

/* Text Alignment Editor */
.flex-alignment-editor {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.flex-alignment-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.flex-alignment-label {
  font-size: 12px;
  color: #666;
  min-width: 60px;
}

.flex-alignment-button-group {
  display: flex;
  gap: 2px;
  background-color: #e5e7eb;
  border-radius: 6px;
  padding: 2px;
}

.flex-alignment-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 28px;
  padding: 4px;
  border: none;
  background-color: transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

  .flex-alignment-button:hover {
    background-color: #d1d5db;
  }

  .flex-alignment-button:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
  }

  .flex-alignment-button.active {
    background-color: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }

    .flex-alignment-button.active:hover {
      background-color: #ffffff;
    }

.flex-alignment-icon {
  width: 18px;
  height: 18px;
  fill: #374151;
}

.flex-alignment-button.active .flex-alignment-icon {
  fill: #1d4ed8;
}

.flex-editable-property-label {
  font-size: 14px;
  font-weight: 400;
  color: var(--flex-text-header);
}

.flex-editable-property-description {
  color: var(--flex-text-header);
}


.flex-property-input-field {
  flex-grow: 1;
  width: 100%;
  min-width: 0;
  padding: var(--flex-spacing-2);
  border: 1px solid var(--flex-color-gray-600);
  border-radius: var(--flex-radius-default);
  box-shadow: var(--flex-shadow-sm);
  line-height: var(--flex-line-height-tight);
  color: var(--flex-input-text);
  background-color: var(--flex-input-background);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  transition: border-color var(--flex-transition-fast), box-shadow var(--flex-transition-fast);
}

.flex-modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 1rem;
}

.flex-modal-container {
  background-color: #ffffff;
  border-radius: 0.5rem;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  max-width: 56rem;
  width: 100%;
  max-height: 90vh;
  overflow: hidden;
}

.dark .flex-modal-container {
  background-color: #1f2937;
}

.flex-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem;
  border-bottom: 1px solid #e5e7eb;
}

.dark .flex-modal-header {
  border-bottom-color: #374151;
}

.flex-modal-title {
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 600;
  color: #111827;
}

.dark .flex-modal-title {
  color: #f3f4f6;
}

.flex-modal-close {
  position: relative;
  color: #9ca3af;
  transition: color 150ms ease-in-out;
}

  .flex-modal-close:hover {
    color: #4b5563;
  }

.dark .flex-modal-close:hover {
  color: #d1d5db;
}

.flex-modal-body {
  padding: 1.5rem;
  overflow-y: auto;
  max-height: calc(90vh - 180px);
}

.flex-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1.5rem;
  border-top: 1px solid #e5e7eb;
}

.dark .flex-modal-footer {
  border-top-color: #374151;
}

.flex-modal-form-preview {
  background-color: #f9fafb;
  border-radius: 0.5rem;
  padding: 1rem;
  border: 1px solid #e5e7eb;
}

.dark .flex-modal-form-preview {
  background-color: #111827;
  border-color: #374151;
}

.flex-modal-instructions {
  margin: 0 0 12px 0;
  color: #6b7280;
  font-size: 14px;
}

.flex-choice-textarea {
  width: 100%;
  min-height: 300px;
  padding: 12px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  resize: vertical;
  box-sizing: border-box;
}

  .flex-choice-textarea:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  }

  .flex-choice-textarea::placeholder {
    color: #9ca3af;
  }

.flex-validation-error {
  margin-top: 8px;
  padding: 8px 12px;
  background-color: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 4px;
  color: #dc2626;
  font-size: 14px;
}

/* Enum Choice List Editor Styles */
.flex-enum-choice-list-editor {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 0;
}

.flex-enum-choice-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px;
}

.flex-enum-header-button-group {
  display: flex;
  flex-direction: row;
  gap: 3px;
}

.flex-enum-choice-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--flex-text-header);
}

.flex-enum-choice-header-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  background: var(--flex-property-edit-button-color);
  cursor: pointer;
  transition: all 0.15s ease;
}

  .flex-enum-choice-header-btn:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
  }

.dark .flex-enum-choice-header-btn:hover {
  background: #e5e7eb;
}

.flex-enum-choice-open-csv-edit-modal-btn {
  padding: 3px;
}

.flex-enum-choice-icon {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.flex-enum-choice-table-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 500;
  color: #6b7280;
  border-bottom: 1px solid #e5e7eb;
}

.flex-enum-choice-drag-col {
  width: 24px;
  flex-shrink: 0;
}

.flex-enum-choice-value-col {
  flex: 1;
  min-width: 0;
}

.flex-enum-choice-text-col {
  flex: 1;
  min-width: 0;
}

.flex-enum-choice-actions-col {
  width: 32px;
  flex-shrink: 0;
}

.flex-enum-choice-list {
  display: flex;
  flex-direction: column;
}

.flex-enum-choice-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 4px;
  transition: background-color 0.15s ease;
}

  .flex-enum-choice-row:hover {
    background: #f9fafb;
  }

.dark .flex-enum-choice-row:hover {
  background: #4b5563;
}

.flex-enum-choice-row.flex-dragging {
  opacity: 0.5;
  background: #e5e7eb;
}

.flex-enum-choice-row.flex-drag-over-top {
  box-shadow: inset 0 2px 0 0 #3b82f6;
}

.flex-enum-choice-row.flex-drag-over-bottom {
  box-shadow: inset 0 -2px 0 0 #3b82f6;
}

.flex-enum-choice-row.flex-has-error {
  background: #fef2f2;
}

.flex-enum-choice-drag-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  cursor: grab;
  color: #9ca3af;
}

  .flex-enum-choice-drag-handle:hover {
    color: #6b7280;
  }

  .flex-enum-choice-drag-handle:active {
    cursor: grabbing;
  }

.flex-drag-icon {
  width: 14px;
  height: 14px;
}

.flex-enum-choice-row .flex-input-field {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 13px;
  transition: border-color 0.15s ease;
  color: var(--flex-text-header);
}

  .flex-enum-choice-row .flex-input-field:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
  }

  .flex-enum-choice-row .flex-input-field.flex-input-error {
    border-color: #ef4444;
    background: #fef2f2;
  }

  .flex-enum-choice-row .flex-input-field::placeholder {
    color: #9ca3af;
    font-style: italic;
  }

.flex-enum-choice-delete-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  color: var(--flex-property-edit-button-color);
  transition: all 0.15s ease;
}

  .flex-enum-choice-delete-btn:hover:not(:disabled) {
    background: #fee2e2;
    color: #ef4444;
  }

  .flex-enum-choice-delete-btn:disabled {
    cursor: not-allowed;
    opacity: 0.4;
  }

.flex-delete-icon {
  width: 16px;
  height: 16px;
}

.flex-enum-choice-error {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 40px;
  font-size: 12px;
  color: #dc2626;
}

.flex-error-icon {
  width: 14px;
  height: 14px;
  fill: #dc2626;
}

.flex-flex-grid-definitions-editor {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.flex-flex-grid-definitions-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.flex-grid-definition-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background-color: var(--flex-color-gray-100, #f3f4f6);
  border: 1px solid var(--flex-color-gray-300, #d1d5db);
  border-radius: var(--flex-radius-default, 4px);
  transition: background-color 0.15s ease;
  min-width: 0;
}

  .flex-grid-definition-item:hover {
    background-color: var(--flex-color-gray-200, #e5e7eb);
  }

  /* Drag and drop states */
  .flex-grid-definition-item.flex-grid-definition-dragging {
    opacity: 0.5;
    background-color: var(--flex-color-gray-300, #d1d5db);
  }

  .flex-grid-definition-item.flex-grid-definition-drag-over-top {
    box-shadow: inset 0 2px 0 0 var(--flex-color-blue-500, #3b82f6);
  }

  .flex-grid-definition-item.flex-grid-definition-drag-over-bottom {
    box-shadow: inset 0 -2px 0 0 var(--flex-color-blue-500, #3b82f6);
  }

/* Drag handle */
.flex-grid-definition-drag-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  flex-shrink: 0;
  cursor: grab;
  color: var(--flex-color-gray-400, #9ca3af);
  transition: color 0.15s ease;
}

  .flex-grid-definition-drag-handle:hover {
    color: var(--flex-color-gray-600, #4b5563);
  }

  .flex-grid-definition-drag-handle:active {
    cursor: grabbing;
  }

.flex-grid-definition-drag-icon {
  width: 14px;
  height: 14px;
}

.flex-grid-definition-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--flex-text-header, #374151);
  min-width: 55px;
  flex-shrink: 0;
}

.flex-grid-column-width-adjustment-section {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.flex-grid-definition-type-select {
  flex: 1;
  min-width: 0;
  max-width: 100px;
  padding: 4px 6px !important;
  font-size: 12px !important;
}

.flex-grid-definition-value-container {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.flex-grid-definition-value-input {
  width: 50px !important;
  min-width: 50px !important;
  padding: 4px 6px !important;
  font-size: 12px !important;
  text-align: right;
}

  .flex-grid-definition-value-input:disabled {
    background-color: var(--flex-color-gray-200, #e5e7eb);
    color: var(--flex-color-gray-500, #6b7280);
    cursor: not-allowed;
  }

.flex-grid-definition-value-unit {
  font-size: 11px;
  color: var(--flex-color-gray-500, #6b7280);
  flex-shrink: 0;
}

.flex-grid-definition-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  flex-shrink: 0;
}

.flex-grid-definition-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 2px;
  border: 1px solid var(--flex-color-gray-300, #d1d5db);
  background-color: var(--flex-color-white, #ffffff);
  border-radius: var(--flex-radius-default, 4px);
  cursor: pointer;
  transition: all 0.15s ease;
  color: var(--flex-color-gray-600, #4b5563);
}

  .flex-grid-definition-action-btn:hover:not(:disabled) {
    background-color: var(--flex-color-gray-100, #f3f4f6);
    border-color: var(--flex-color-gray-400, #9ca3af);
  }

  .flex-grid-definition-action-btn:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
  }

  .flex-grid-definition-action-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }

.flex-grid-definition-remove-btn:hover:not(:disabled) {
  background-color: var(--flex-color-red-50, #fef2f2);
  border-color: var(--flex-color-red-300, #fca5a5);
  color: var(--flex-color-red-600, #dc2626);
}

.flex-grid-definition-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.flex-grid-definition-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 8px 12px;
  margin-top: 2px;
  font-size: 13px;
  font-weight: 500;
  color: var(--flex-color-blue-600, #2563eb);
  background-color: var(--flex-color-blue-50, #eff6ff);
  border: 1px dashed var(--flex-color-blue-300, #93c5fd);
  border-radius: var(--flex-radius-default, 4px);
  cursor: pointer;
  transition: all 0.15s ease;
}

  .flex-grid-definition-add-btn:hover {
    background-color: var(--flex-color-blue-100, #dbeafe);
    border-color: var(--flex-color-blue-400, #60a5fa);
  }

  .flex-grid-definition-add-btn:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
  }

.flex-grid-definition-icon-add {
  width: 14px;
  height: 14px;
}

.flex-grid-definition-max-reached {
  font-size: 11px;
  font-style: italic;
  color: var(--flex-color-gray-500, #6b7280);
  text-align: center;
  padding: 6px;
}

/* Highlight animation for moved/added items */
@keyframes flex-grid-definition-highlight {
  0% {
    background-color: var(--flex-color-blue-200, #bfdbfe);
    border-color: var(--flex-color-blue-400, #60a5fa);
  }

  100% {
    background-color: var(--flex-color-gray-100, #f3f4f6);
    border-color: var(--flex-color-gray-300, #d1d5db);
  }
}

.flex-grid-definition-item-highlighted {
  animation: flex-grid-definition-highlight 0.6s ease-out forwards;
}

.flex-grid-column-width-adjustment-section {
  display: flex;
  flex-direction: column;
}

/* EditablePropertyGroup.razor.css */

.flex-property-group {
  margin-bottom: 1rem;
}

.flex-property-group-summary {
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.75rem;
  color: var(--flex-text-header);
  cursor: pointer;
  user-select: none;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

  .flex-property-group-summary:hover {
    color: rgb(31, 41, 55);
  }


  .flex-property-group-summary:hover {
    color: rgb(31, 41, 55);
  }

.flex-group-header {
  color: var(--flex-text-header);
}

.flex-orientation-editor {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.flex-orientation-button-group {
  display: flex;
  gap: 2px;
  background-color: #e5e7eb;
  border-radius: 6px;
  padding: 2px;
}

.flex-orientation-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 1;
  height: 32px;
  padding: 4px 12px;
  border: none;
  background-color: transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

  .flex-orientation-button:hover {
    background-color: #d1d5db;
  }

  .flex-orientation-button:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
  }

  .flex-orientation-button.active {
    background-color: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }

    .flex-orientation-button.active:hover {
      background-color: #ffffff;
    }

.flex-orientation-icon {
  width: 16px;
  height: 16px;
  fill: #374151;
  flex-shrink: 0;
}

.flex-orientation-button.active .flex-orientation-icon {
  fill: #1d4ed8;
}

.flex-orientation-label {
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  white-space: nowrap;
}

.flex-orientation-button.active .flex-orientation-label {
  color: #1d4ed8;
}

/* Properties Panel */
.flex-properties-panel {
  width: 300px;
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--flex-bg-raised-panel);
  border-left: 1px solid #e5e7eb;
  padding: 20px;
  overflow-y: auto;
}

.flex-properties-panel-title {
  color: var(--flex-text-header);
}

.flex-properties-panel-type {
  color: var(--flex-text-header);
}

.flex-properties-panel.flex-hidden {
  display: none;
}

.flex-properties-panel h2 {
  font-size: 16px;
  margin-bottom: 15px;
  color: var(--flex-text-header);
}

/* Scrollbar styling */
.flex-properties-panel::-webkit-scrollbar {
  width: 8px;
}

.flex-properties-panel::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.flex-properties-panel::-webkit-scrollbar-thumb {
  background: #cbd5e1;
}

  .flex-properties-panel::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
  }

.flex-properties-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.flex-widget-icon {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  margin-right: 0.25em;
  color: var(--flex-text-header);
}

  .flex-widget-icon svg {
    display: block;
  }

/* Responsive adjustments */
@media (max-width: 1024px) {
  .flex-properties-panel {
    width: 250px;
  }
}

@media (max-width: 768px) {
  .flex-properties-panel {
    width: 100%;
    max-height: 200px;
  }
}

/* EditablePropertySection.razor.css */

.flex-property-section-summary {
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.75rem;
  color: var(--flex-text-header);
  cursor: pointer;
  user-select: none;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

  .flex-property-section-summary:hover {
    color: rgb(31, 41, 55);
  }

.flex-details-content {
  /* Add padding/margin as needed */
}

.flex-details-content-inner {
  /* Add padding/margin as needed */
}

.flex-string-list-editor {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.flex-string-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-string-list-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: rgb(55, 65, 81);
}

.flex-string-list-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  color: rgb(107, 114, 128);
}

  .flex-string-list-add-btn:hover {
    color: rgb(37, 99, 235);
  }

.flex-string-list-icon {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}

.flex-string-list-items {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.flex-string-list-row {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.flex-string-list-input {
  flex: 1;
  min-width: 0;
}

.flex-string-list-delete-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  color: rgb(156, 163, 175);
  flex-shrink: 0;
}

  .flex-string-list-delete-btn:hover:not(:disabled) {
    color: rgb(239, 68, 68);
  }

  .flex-string-list-delete-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
  }

.flex-string-list-delete-icon {
  width: 0.875rem;
  height: 0.875rem;
}

.flex-toggle-switch-container {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
  padding-left: 2px;
}

.flex-toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
  color: var(--flex-text-header);
}

  .flex-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }

.flex-toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #d1d5db;
  transition: background-color 0.2s ease;
  border-radius: 24px;
}

  .flex-toggle-slider::before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: transform 0.2s ease;
    border-radius: 50%;
  }

.flex-toggle-switch input:checked + .flex-toggle-slider {
  background-color: #2563eb;
}

  .flex-toggle-switch input:checked + .flex-toggle-slider::before {
    transform: translateX(20px);
  }

.flex-toggle-state-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--flex-text-header);
  user-select: none;
}

/* ============================================
   JSON Drawer Panel Styles
   ============================================ */

.flex-json-drawer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #1e1e2e;
  border-top: 1px solid #313244;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
  z-index: 100;
  display: flex;
  flex-direction: column;
  font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
  transition: height 0.05s ease-out;
}

  .flex-json-drawer.flex-collapsed {
    height: auto !important;
  }

/* Drag Handle */
.flex-json-drawer-handle {
  height: 6px;
  background: transparent;
  cursor: ns-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.flex-json-drawer.flex-collapsed .flex-json-drawer-handle {
  display: none;
}

.flex-handle-grip {
  width: 40px;
  height: 4px;
  background: #45475a;
  border-radius: 2px;
  transition: background 0.2s;
}

.flex-json-drawer-handle:hover .flex-handle-grip {
  background: #585b70;
}

/* Header */
.flex-json-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  height: 36px;
  background: #181825;
  border-bottom: 1px solid #313244;
  flex-shrink: 0;
}

.flex-json-drawer-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: transparent;
  border: none;
  color: #cdd6f4;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.2s;
}

  .flex-json-drawer-tab:hover {
    background: #313244;
  }

.flex-tab-icon {
  font-size: 10px;
  transition: transform 0.2s ease;
  color: #6c7086;
}

  .flex-tab-icon.flex-expanded {
    transform: rotate(180deg);
  }

.flex-tab-label {
  letter-spacing: 0.5px;
}

/* Action Buttons */
.flex-json-drawer-actions {
  display: flex;
  gap: 4px;
}

.flex-drawer-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: #6c7086;
  cursor: pointer;
  transition: all 0.2s;
}

  .flex-drawer-action-btn:hover {
    background: #313244;
    color: #cdd6f4;
  }

/* Content Area */
.flex-json-drawer-content {
  flex: 1;
  overflow: auto;
  padding: 12px 16px;
  min-height: 0;
}

/* Resize Overlay */
.flex-resize-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  cursor: ns-resize;
}

/* ============================================
   JSON Tree View Styles (::deep for child component)
   ============================================ */

::deep .flex-json-tree {
  font-size: 13px;
  line-height: 1.6;
  color: #cdd6f4;
}

::deep .flex-json-node {
  padding-left: calc(var(--depth, 0) * 6px);
}

::deep .flex-json-line {
  display: flex;
  align-items: center;
  min-height: 22px;
  padding: 1px 0;
  border-radius: 3px;
  transition: background 0.15s;
}

  ::deep .flex-json-line:hover {
    background: rgba(69, 71, 90, 0.3);
  }

/* Toggle Button */
::deep .flex-json-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-right: 4px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}

::deep .flex-toggle-icon {
  font-size: 8px;
  color: #6c7086;
  transition: transform 0.15s ease;
}

::deep .flex-json-toggle.flex-expanded .flex-toggle-icon {
  transform: rotate(90deg);
}

::deep .flex-json-toggle:hover .flex-toggle-icon {
  color: #cdd6f4;
}

::deep .flex-json-toggle-spacer {
  width: 20px;
  flex-shrink: 0;
}

/* Syntax Highlighting */
::deep .flex-json-key {
  color: #89b4fa;
}

::deep .flex-json-string {
  color: #a6e3a1;
}

::deep .flex-json-number {
  color: #fab387;
}

::deep .flex-json-boolean {
  color: #cba6f7;
}

::deep .flex-json-null {
  color: #f38ba8;
  font-style: italic;
}

::deep .flex-json-punctuation {
  color: #6c7086;
}

::deep .flex-json-bracket {
  color: #f9e2af;
}

::deep .flex-json-comma {
  color: #6c7086;
}

::deep .flex-json-collapsed-indicator {
  color: #6c7086;
  font-style: italic;
  margin: 0 4px;
}

/* Children Container */
::deep .flex-json-children {
  display: flex;
  flex-direction: column;
}

/* Highlighting */
::deep .flex-json-node.flex-highlighted > .flex-json-line {
  background: rgba(250, 179, 135, 0.15);
  box-shadow: inset 3px 0 0 #fab387;
}

::deep .flex-json-node.flex-contains-highlighted > .flex-json-line {
  background: rgba(137, 180, 250, 0.08);
}

/* Error State */
::deep .flex-json-error {
  color: #f38ba8;
  padding: 12px;
  background: rgba(243, 139, 168, 0.1);
  border-radius: 6px;
  border: 1px solid rgba(243, 139, 168, 0.3);
}

/* Scrollbar Styling */
.flex-json-drawer-content::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.flex-json-drawer-content::-webkit-scrollbar-track {
  background: #181825;
}

.flex-json-drawer-content::-webkit-scrollbar-thumb {
  background: #45475a;
  border-radius: 4px;
}

  .flex-json-drawer-content::-webkit-scrollbar-thumb:hover {
    background: #585b70;
  }

/* Animation for smooth expand/collapse */
@keyframes flex-slideUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.flex-json-drawer.flex-expanded .flex-json-drawer-content {
  animation: flex-slideUp 0.2s ease-out;
}

array-flex-editor-control {
  display: block;
  padding: 0.5rem;
}

.flex-array-editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.flex-array-editor-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  border: 1px solid rgb(156, 163, 175);
  background: white;
  cursor: pointer;
  font-size: 0.75rem;
  color: rgb(75, 85, 99);
  transition: background-color 0.15s;
}

  .flex-array-editor-add-btn:hover {
    background: rgb(243, 244, 246);
  }

.flex-array-editor-grid {
  display: grid;
  gap: 0;
  border: 1px solid rgb(209, 213, 219);
  border-radius: 0.375rem;
  overflow: hidden;
}

.flex-array-editor-column-header {
  padding: 0.375rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: rgb(55, 65, 81);
  background: rgb(243, 244, 246);
  border-bottom: 1px solid rgb(209, 213, 219);
  border-right: 1px solid rgb(229, 231, 235);
}

  .flex-array-editor-column-header:last-child {
    border-right: none;
  }

.flex-array-editor-actions-header {
  width: 2.5rem;
}

.flex-array-editor-cell {
  padding: 0.25rem;
  border-bottom: 1px solid rgb(229, 231, 235);
  border-right: 1px solid rgb(229, 231, 235);
  min-height: 3rem;
  display: flex;
  align-items: center;
}

  .flex-array-editor-cell:last-child {
    border-right: none;
  }

.flex-array-editor-actions-cell {
  justify-content: center;
  width: 2.5rem;
}

.flex-array-editor-delete-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border: none;
  background: transparent;
  cursor: pointer;
  color: rgb(156, 163, 175);
  font-size: 0.7rem;
  border-radius: 0.25rem;
  transition: color 0.15s, background-color 0.15s;
}

  .flex-array-editor-delete-btn:hover {
    color: rgb(239, 68, 68);
    background: rgb(254, 226, 226);
  }

/* Drop Indicator Wrapper */
.flex-form-element-wrapper {
  position: relative;
}
  /* Drop Indicators - Bright Lines */
  .flex-form-element-wrapper.flex-drag-over-top::before {
    content: '';
    position: absolute;
    top: -2px;
    left: 0;
    right: 0;
    height: 4px;
    background: #3b82f6;
    border-radius: 2px;
    z-index: 100;
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.6);
    animation: flex-dropIndicatorPulse 1s ease-in-out infinite;
  }

  .flex-form-element-wrapper.flex-drag-over-bottom::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 4px;
    background: #3b82f6;
    border-radius: 2px;
    z-index: 100;
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.6);
    animation: flex-dropIndicatorPulse 1s ease-in-out infinite;
  }

  .flex-form-element-wrapper.flex-drag-over-left::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -2px;
    width: 4px;
    background: #10b981;
    border-radius: 2px;
    z-index: 100;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
    animation: flex-dropIndicatorPulse 1s ease-in-out infinite;
  }

  .flex-form-element-wrapper.flex-drag-over-right::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: -2px;
    width: 4px;
    background: #10b981;
    border-radius: 2px;
    z-index: 100;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
    animation: flex-dropIndicatorPulse 1s ease-in-out infinite;
  }

@keyframes flex-dropIndicatorPulse {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: 0.7;
  }
}

.flex-form-element {
  padding: 15px;
  background: var(--flex-bg-form-element);
  border-radius: 6px;
  cursor: move;
  position: relative;
  flex: 1;
}

  .flex-form-element.flex-in-row {
    margin-bottom: 0;
  }

  .flex-form-element.flex-preview-mode {
    background: white;
    border: none;
    cursor: default;
    padding: 12px 0;
  }

  .flex-form-element .flex-element-controls {
    visibility: hidden;
  }

  .flex-form-element:hover:not(:has(.flex-form-element:hover)):not(.flex-preview-mode) > .flex-element-controls {
    visibility: visible;
  }

  .flex-form-element:not(.flex-preview-mode) {
    border: 1px solid var(--flex-border-flex-widget);
  }

  .flex-form-element:hover:not(:has(.flex-form-element:hover)):not(.flex-preview-mode):not(.flex-selected) {
    border-color: transparent;
    outline: 3px solid #8c8c8c;
  }

  .flex-form-element.flex-selected {
    border-color: transparent;
    outline: 3px solid #62e3a4;
  }

    .flex-form-element.flex-selected > .flex-element-controls {
      visibility: visible;
    }

.flex-form-element-outer.flex-dragging {
  opacity: 0.5;
}
/* Dragging Placeholder */
.flex-form-element.flex-dragging-placeholder {
  background: #f3f4f6;
  border: 2px dashed #9ca3af;
  opacity: 0.5;
  min-height: 60px;
}

.flex-editor-drop-zone-table {
  min-height: 6rem;
  width: 100%;
  border: 2px dashed rgb(107, 114, 128);
  border-radius: 0.375rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

  .flex-editor-drop-zone-table label {
    color: var(--flex-input-text);
  }

  .flex-editor-drop-zone-table.flex-drag-over-table-cell {
    background: #e4f2ff;
  }

.flex-stub-panel {
  width: 300px;
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--flex-bg-raised-panel);
  border-left: 1px solid #e5e7eb;
  padding: 20px;
  overflow-y: auto;
}

.flex-stub-panel-title {
  font-size: 16px;
  margin-bottom: 15px;
  color: var(--flex-text-header);
}

.flex-stub-panel-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.flex-stub-panel-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #9ca3af;
  padding: 40px 20px;
}

.flex-stub-panel-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40px 20px;
  gap: 8px;
}

.flex-stub-panel-placeholder-icon {
  width: 40px;
  height: 40px;
  color: #cbd5e1;
  margin-bottom: 8px;
}

.flex-stub-panel-placeholder-title {
  font-size: 14px;
  font-weight: 600;
  color: #94a3b8;
  margin: 0;
}

.flex-stub-panel-placeholder-desc {
  font-size: 13px;
  color: #9ca3af;
  line-height: 1.5;
  margin: 0;
}

.flex-stub-panel {
  width: 300px;
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--flex-bg-raised-panel);
  border-left: 1px solid #e5e7eb;
  padding: 20px;
  overflow-y: auto;
}

.flex-stub-panel-title {
  font-size: 16px;
  margin-bottom: 15px;
  color: var(--flex-text-header);
}

.flex-stub-panel-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.flex-stub-panel-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #9ca3af;
  padding: 40px 20px;
}

.flex-stub-panel-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40px 20px;
  gap: 8px;
}

.flex-stub-panel-placeholder-icon {
  width: 40px;
  height: 40px;
  color: #cbd5e1;
  margin-bottom: 8px;
}

.flex-stub-panel-placeholder-title {
  font-size: 14px;
  font-weight: 600;
  color: #94a3b8;
  margin: 0;
}

.flex-stub-panel-placeholder-desc {
  font-size: 13px;
  color: #9ca3af;
  line-height: 1.5;
  margin: 0;
}

.flex-panel-sidebar {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 4px;
  background: var(--flex-bg-recessed, #f1f5f9);
  border-left: 1px solid #e5e7eb;
  flex-shrink: 0;
  align-self: stretch;
}

.flex-panel-sidebar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 6px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--flex-text-muted, #94a3b8);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

  .flex-panel-sidebar-btn svg {
    width: 20px;
    height: 20px;
  }

  .flex-panel-sidebar-btn:hover {
    background: var(--flex-bg-hover, #e2e8f0);
    color: var(--flex-text-header, #1e293b);
  }

.flex-panel-sidebar-btn--active {
  background: var(--flex-bg-raised-panel, #ffffff);
  color: #2563eb;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

  .flex-panel-sidebar-btn--active:hover {
    color: #2563eb;
  }

.flex-editor-toolbar {
  height: 40px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  padding: 0 20px;
  flex-shrink: 0;
  gap: 8px;
}

.flex-toolbar-group {
  display: flex;
  align-items: center;
  gap: 4px;
}

.flex-toolbar-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  background: white;
  color: #334155;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

  .flex-toolbar-btn:hover:not(:disabled) {
    background: #e2e8f0;
    border-color: #cbd5e1;
  }

  .flex-toolbar-btn:disabled {
    opacity: 0.4;
    cursor: default;
  }

.flex-toolbar-action-text {
  font-size: 12px;
  color: #64748b;
  margin-left: 8px;
  opacity: 1;
  transition: opacity 0.5s ease;
}

  .flex-toolbar-action-text.fading {
    opacity: 0;
  }

.flex-form-editor {
  display: flex;
  flex-direction: column;
  height: stretch;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  background: var(--flex-bg-primary);
  margin: 0;
  padding: 0;
  width: 100%;
  flex: 1;
  min-width: 0;
  transition: padding-bottom 0.2s ease;
  position: relative;
}

/* Skeleton loader */
.flex-skeleton-loader {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  padding: 8px 0;
}

.flex-skeleton-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.flex-skeleton-label {
  height: 14px;
  width: 30%;
  background: #e2e8f0;
  border-radius: 4px;
  animation: flex-skeletonPulse 1.5s ease-in-out infinite;
}

.flex-skeleton-label--short {
  width: 20%;
}

.flex-skeleton-input {
  height: 38px;
  width: 100%;
  background: #e2e8f0;
  border-radius: 6px;
  animation: flex-skeletonPulse 1.5s ease-in-out infinite;
  animation-delay: 0.1s;
}

.flex-skeleton-input--tall {
  height: 80px;
}

@keyframes flex-skeletonPulse {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: 0.4;
  }
}

.dark .flex-form-editor {
  background: #D1D5DB;
}

.flex-form-editor.flex-drawer-open {
  padding-bottom: var(--drawer-height, 250px);
}

.flex-header {
  height: 60px;
  background: #2563eb;
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  flex-shrink: 0;
}

  .flex-header h1 {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
  }

.flex-back-to-company-forms-button {
  max-height: 20px;
  display: inline-flex;
  flex-direction: row;
  max-width: 70px;
}

.flex-form-selector {
  display: flex;
  align-items: center;
}

  .flex-form-selector select {
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    min-width: 180px;
    transition: all 0.2s;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='white' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
  }

    .flex-form-selector select:hover {
      background-color: rgba(255, 255, 255, 0.3);
    }

    .flex-form-selector select:focus {
      outline: none;
      background-color: rgba(255, 255, 255, 0.3);
      box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4);
    }

    .flex-form-selector select option {
      background: #2563eb;
      color: white;
      padding: 8px;
    }

.flex-mode-toggle {
  display: flex;
  gap: 8px;
  background: rgba(255, 255, 255, 0.2);
  padding: 4px;
  border-radius: 6px;
}

.flex-mode-btn {
  padding: 8px 16px;
  background: transparent;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s;
}

  .flex-mode-btn.flex-active {
    background: white;
    color: #2563eb;
  }

  .flex-mode-btn:hover:not(.flex-active) {
    background: rgba(255, 255, 255, 0.1);
  }

.flex-form-editor-container {
  display: flex;
  flex: 1;
  overflow: hidden;
  padding: 0px;
  width: 100%;
  margin: 0;
  box-sizing: border-box;
}

.flex-nested-component-container {
}



/* Right Panel */
.flex-editor-right-panel {
  display: flex;
  flex-direction: row;
  flex-shrink: 0;
  align-self: stretch;
  overflow: hidden;
}

  .flex-editor-right-panel.flex-hidden {
    display: none;
  }

.flex-editor-right-panel-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

/* Panel Sidebar */
.flex-panel-sidebar {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 4px;
  background: var(--flex-bg-recessed, #f1f5f9);
  border-left: 1px solid #e5e7eb;
  flex-shrink: 0;
  align-self: stretch;
}

.flex-panel-sidebar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 6px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--flex-text-muted, #94a3b8);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

  .flex-panel-sidebar-btn svg {
    width: 20px;
    height: 20px;
  }

  .flex-panel-sidebar-btn:hover {
    background: var(--flex-bg-hover, #e2e8f0);
    color: var(--flex-text-header, #1e293b);
  }

.flex-panel-sidebar-btn--active {
  background: var(--flex-bg-raised-panel, #ffffff);
  color: #2563eb;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

  .flex-panel-sidebar-btn--active:hover {
    color: #2563eb;
  }

/* Canvas */
.flex-editor-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 40px;
  overflow-y: auto;
  background: var(--flex-bg-primary);
}

.flex-canvas {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 40px;
  width: 100%;
}

.flex-form-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0 auto;
  background: var(--flex-bg-primary);
  padding: 0;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  min-height: 400px;
}

.flex-form-title {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 30px;
  color: var(--flex-text-header);
}

.flex-drop-zone {
  min-height: 200px;
  border: 2px dashed #d1d5db;
  border-radius: 8px;
  padding: 20px;
}

  .flex-drop-zone.flex-drag-over {
    background: #eff6ff;
    border-color: #2563eb;
  }

  .flex-drop-zone.flex-preview-mode {
    border: none;
    padding: 0;
  }

.flex-drag-over-container .flex-drop-zone {
  /*    outline: 2px dashed #3b82f6;
    outline-offset: 4px;*/
  background-color: rgba(59, 130, 246, 0.05);
}

.flex-empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  color: #9ca3af;
}

/* Empty canvas drag-over highlight */
.flex-canvas.flex-drag-over-container {
  outline: 3px dashed #3b82f6;
  outline-offset: -4px;
  background-color: rgba(59, 130, 246, 0.06);
  animation: flex-emptyCanvasPulse 1.5s ease-in-out infinite;
}

@keyframes flex-emptyCanvasPulse {
  0%, 100% {
    background-color: rgba(59, 130, 246, 0.06);
  }

  50% {
    background-color: rgba(59, 130, 246, 0.12);
  }
}

.flex-empty-state p {
  font-size: 16px;
  margin-bottom: 8px;
}

.flex-empty-state small {
  font-size: 14px;
  color: #d1d5db;
}

/* Form Elements */
.flex-form-row {
  display: flex;
  gap: 15px;
  margin-bottom: 15px;
}


.flex-element-controls {
  place-self: flex-end;
}


.flex-control-btn {
  position: relative;
  top: -15px;
  left: 15px;
  padding: 2px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.2s;
}

  .flex-control-btn:hover {
    background: #F9FAFB;
  }

    .flex-control-btn:hover svg path {
      stroke: #c31e1e;
      fill: #c31e1e;
    }

.flex-element-label {
  font-size: 11px;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  font-weight: 600;
}

.flex-element-preview {
  font-size: 14px;
  color: #374151;
  font-weight: 500;
}

.flex-option-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

  .flex-option-row input {
    flex: 1;
  }

.flex-remove-option-btn {
  width: 30px;
  height: 30px;
  background: #ef4444;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s;
}

  .flex-remove-option-btn:hover {
    background: #dc2626;
  }

.flex-add-option-btn {
  width: 100%;
  padding: 8px 12px;
  background: #2563eb;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s;
  margin-top: 8px;
}

  .flex-add-option-btn:hover {
    background: #1d4ed8;
  }

/* Scrollbar styling */
.flex-widgets-panel::-webkit-scrollbar,
.flex-canvas::-webkit-scrollbar {
  width: 8px;
}

.flex-widgets-panel::-webkit-scrollbar-track,
.flex-canvas::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.flex-widgets-panel::-webkit-scrollbar-thumb,
.flex-canvas::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

  .flex-widgets-panel::-webkit-scrollbar-thumb:hover,
  .flex-canvas::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
  }



horizontal-layout-flex-editor-control {
  min-height: 60px;
  position: relative;
}

  horizontal-layout-flex-editor-control.flex-drag-over-container {
    background-color: rgba(59, 130, 246, 0.1);
  }


details .flex-details-summary {
  list-style: none;
}

  details .flex-details-summary::-webkit-details-marker {
    display: none;
  }

  details .flex-details-summary::before {
    content: "▶";
    display: inline-block;
    margin-right: 0.5rem;
    transition: transform 0.3s ease;
  }

details[open] .flex-details-summary::before {
  transform: rotate(90deg);
}

details .flex-details-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}

.flex-details-content .flex-details-content-inner {
  display: flex;
  flex-direction: column;
}

.flex-details-content .flex-group-header {
  font-weight: 500;
  border-bottom: solid gray;
  width: 100%;
  border-bottom-width: 1px;
  border-bottom-color: lightgray;
  color: #282828;
  margin-top: 4px;
}

details[open] .flex-details-content {
  grid-template-rows: 1fr;
}

/* More specific: targets open details that are in the process of closing */
details[open].flex-closing .flex-details-content {
  grid-template-rows: 0fr;
}

details[open].flex-closing .flex-details-summary::before {
  transform: rotate(0deg);
}

details .flex-details-content > div {
  overflow: hidden;
}

#flex-select-parent-button {
  font-size: 12px;
  padding: 5px;
  border-radius: 5px;
  background: rgba(21,93,252, 0.15);
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .flex-widgets-panel {
    width: 200px;
  }
}

@media (max-width: 768px) {
  .flex-container {
    flex-direction: column;
  }

  .flex-widgets-panel {
    width: 100%;
    max-height: 200px;
  }

  .flex-canvas {
    padding: 20px;
    cursor: pointer;
  }

  .flex-form-container {
    padding: 0;
  }

  .flex-drag-ghost {
    position: fixed;
    pointer-events: none;
    z-index: 10000;
    transform: translate(-50%, -50%);
    animation: flex-dragGhostAppear 0.15s ease-out;
  }

  @keyframes flex-dragGhostAppear {
    from {
      opacity: 0;
      transform: translate(-50%, -50%) scale(0.95);
    }

    to {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
    }
  }

  .flex-drag-ghost-content {
    background: white;
    border: 2px solid #2563eb;
    border-radius: 6px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2), 0 6px 12px rgba(37, 99, 235, 0.3);
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    white-space: nowrap;
  }


  .flex-dragging-placeholder-content {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    color: #9ca3af;
    font-size: 14px;
    font-style: italic;
  }

  .flex-dragging-overlay {
    background-color: rgba(0,0,0,0.5); /* Black background with opacity */
  }




  /* Container Drop Zone Enhancement */
  .flex-drag-over-container {
    outline: 3px solid #3b82f6;
    outline-offset: 4px;
    background-color: rgba(59, 130, 246, 0.08);
    animation: flex-containerPulse 1.5s ease-in-out infinite;
  }

  @keyframes flex-containerPulse {
    0%, 100% {
      background-color: rgba(59, 130, 246, 0.08);
    }

    50% {
      background-color: rgba(59, 130, 246, 0.15);
    }
  }
}

.flex-array-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.flex-array-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--flex-border-color);
  border-radius: var(--flex-radius-default, 4px);
  background: var(--flex-input-background);
  color: var(--flex-color-primary);
  cursor: pointer;
  font-size: 14px;
  transition: background 0.15s, color 0.15s;
}

  .flex-array-add-btn:hover {
    background: var(--flex-color-primary);
    color: white;
  }

.flex-array-grid {
  display: grid;
  gap: 1px;
  border: 1px solid var(--flex-border-color);
  border-radius: var(--flex-radius-default, 4px);
  overflow: hidden;
  background: var(--flex-border-color);
}

.flex-array-column-header {
  background: var(--flex-header-background);
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--flex-label-text);
}

.flex-array-actions-header {
  width: 48px;
  min-width: 48px;
  max-width: 48px;
}

.flex-array-cell {
  background: var(--flex-input-background);
  padding: 6px 12px;
  display: flex;
  align-items: center;
  min-height: 40px;
}

.flex-array-actions-cell {
  width: 48px;
  min-width: 48px;
  max-width: 48px;
  justify-content: center;
  padding: 6px;
}

.flex-array-delete-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: var(--flex-radius-default, 4px);
  background: transparent;
  color: var(--flex-label-text);
  cursor: pointer;
  font-size: 12px;
  transition: background 0.15s, color 0.15s;
}

  .flex-array-delete-btn:hover {
    background: #fee2e2;
    color: #ef4444;
  }

.flex-array-empty {
  text-align: center;
  padding: 16px;
  color: var(--flex-label-text);
  font-size: 13px;
  border: 1px dashed var(--flex-border-color);
  border-radius: var(--flex-radius-default, 4px);
}

::deep .flex-array-cell > * {
  width: 100%;
}

:global(.dark) .flex-array-grid {
  background: var(--flex-border-color);
}

:global(.dark) .flex-array-column-header {
  background: var(--flex-header-background);
  color: var(--flex-label-text);
}

:global(.dark) .flex-array-cell {
  background: var(--flex-input-background);
}

:global(.dark) .flex-array-add-btn {
  border-color: var(--flex-border-color);
  background: var(--flex-input-background);
  color: var(--flex-color-primary);
}

:global(.dark) .flex-array-delete-btn:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
}

:global(.dark) .flex-array-empty {
  border-color: var(--flex-border-color);
  color: var(--flex-label-text);
}

/* ========================================
   Overlay
   ======================================== */
.flex-uom-numpad-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: var(--flex-z-modal);
}

/* ========================================
   Container
   ======================================== */
.flex-uom-numpad-container {
  background-color: var(--flex-bg-raised-panel);
  border: 1px solid var(--flex-border-color);
  border-radius: var(--flex-radius-lg);
  box-shadow: var(--flex-shadow-lg);
  padding: var(--flex-spacing-2);
  min-width: 380px;
  max-width: calc(100vw - 2rem);
}

/* ========================================
   Display area
   ======================================== */
.flex-uom-numpad-display {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: var(--flex-spacing-2);
  padding: var(--flex-spacing-2) var(--flex-spacing-4);
  margin-bottom: var(--flex-spacing-2);
  font-size: 1.25rem;
  color: var(--flex-text-header);
  border-bottom: 1px solid var(--flex-border-color);
}

.flex-uom-numpad-unit {
  color: var(--flex-color-gray-500);
  font-size: var(--flex-font-size-base);
}

:global(.dark) .flex-uom-numpad-unit {
  color: #9ca3af;
}

/* ========================================
   Body: fraction column + keypad side by side
   ======================================== */
.flex-uom-numpad-body {
  display: flex;
  gap: var(--flex-spacing-2);
}

/* ========================================
   Fraction column
   ======================================== */
.flex-uom-numpad-fractions {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* ========================================
   Keypad grid: 4 cols x 5 rows
   Cols 1-3: digits   Col 4: actions
   ======================================== */
.flex-uom-numpad-keypad {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(5, 1fr);
  gap: 2px;
}

/* ========================================
   Base button style
   ======================================== */
.flex-uom-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--flex-spacing-1) var(--flex-spacing-2);
  border: 1px solid var(--flex-border-color);
  border-radius: var(--flex-radius-default);
  background-color: var(--flex-input-background);
  color: var(--flex-input-text);
  cursor: pointer;
  font-size: var(--flex-font-size-sm);
  min-height: 2.5rem;
  transition: background-color var(--flex-transition-fast);
  user-select: none;
}

  .flex-uom-btn:hover {
    background-color: #e5e7eb;
  }

  .flex-uom-btn:active {
    background-color: #d1d5db;
  }

:global(.dark) .flex-uom-btn:hover {
  background-color: #3a4150;
}

:global(.dark) .flex-uom-btn:active {
  background-color: #454c5c;
}

/* ========================================
   +/- mode toggle
   ======================================== */
.flex-uom-btn-mode {
  font-weight: 600;
  font-size: var(--flex-font-size-lg);
  background-color: var(--flex-color-primary);
  color: var(--flex-color-white);
  border-color: var(--flex-color-primary);
}

  .flex-uom-btn-mode:hover {
    background-color: var(--flex-color-primary-hover);
  }

:global(.dark) .flex-uom-btn-mode:hover {
  background-color: var(--flex-color-primary-hover);
}

/* ========================================
   Keypad button placement
   ======================================== */

/* Zero spans cols 1-2 */
.flex-uom-btn-zero {
  grid-column: 1 / 3;
}

/* Space spans cols 1-2 */
.flex-uom-btn-space {
  grid-column: 1 / 3;
}

/* OK spans rows 3-5 in col 4 */
.flex-uom-btn-ok {
  grid-column: 4;
  grid-row: 3 / 6;
  background-color: var(--flex-color-primary);
  color: var(--flex-color-white);
  border-color: var(--flex-color-primary);
  font-weight: 600;
}

  .flex-uom-btn-ok:hover {
    background-color: var(--flex-color-primary-hover);
  }

:global(.dark) .flex-uom-btn-ok:hover {
  background-color: var(--flex-color-primary-hover);
}

.flex-uom-unit-selector {
  border: 1px solid var(--flex-border-color, #e2e8f0);
  border-radius: var(--flex-radius-default, 4px);
  padding: 2px 4px;
  font-size: inherit;
  background: var(--flex-input-background, white);
  color: var(--flex-input-text, inherit);
  cursor: pointer;
  min-width: 60px;
}

  .flex-uom-unit-selector:focus {
    outline: 2px solid var(--flex-color-primary);
    outline-offset: -1px;
  }

:global(.dark) .flex-uom-unit-selector {
  border-color: var(--flex-border-color);
  background: var(--flex-input-background);
  color: var(--flex-input-text);
}

.flex-description {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: rgb(156, 163, 175);
  margin-top: 0.25rem;
  display: block;
}

.flex-field-label {
  display: flex;
  width: 100%;
  font-size: 0.875rem;
  line-height: 1.25rem;
  margin-bottom: 0.25rem;
  min-height: 20px;
  color: var(--flex-label-text);
}

  /* Disabled state */
  .flex-field-label:disabled, .flex-field-label[disabled] {
    opacity: 1;
    color: var(--flex-color-slate-300);
  }

flex-label {
}

.loading-spinner-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.loading-spinner-spinner {
  width: 56px;
  height: 56px;
  display: grid;
  border: 4px solid #0000;
  border-radius: 50%;
  border-right-color: #299fff;
  animation: loading-spinner-tri 1s infinite linear;
}

  .loading-spinner-spinner::before,
  .loading-spinner-spinner::after {
    content: "";
    grid-area: 1/1;
    margin: 2px;
    border: inherit;
    border-radius: 50%;
    animation: loading-spinner-tri 2s infinite;
  }

  .loading-spinner-spinner::after {
    margin: 8px;
    animation-duration: 3s;
  }

@keyframes loading-spinner-tri {
  100% {
    transform: rotate(1turn);
  }
}

.loading-spinner-loader {
  color: #4a4a4a;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: 25px;
  box-sizing: content-box;
  height: 40px;
  padding: 10px 10px;
  display: flex;
  border-radius: 8px;
}

.loading-spinner-words {
  overflow: hidden;
}

.loading-spinner-word {
  display: block;
  height: 100%;
  padding-left: 6px;
  color: #299fff;
  animation: loading-spinner-cycle-words 5s infinite;
}

  .loading-spinner-word.single-word {
    animation: none;
  }

@keyframes loading-spinner-cycle-words {
  10% {
    transform: translateY(-105%);
  }

  25% {
    transform: translateY(-100%);
  }

  35% {
    transform: translateY(-205%);
  }

  50% {
    transform: translateY(-200%);
  }

  60% {
    transform: translateY(-305%);
  }

  75% {
    transform: translateY(-300%);
  }

  85% {
    transform: translateY(-405%);
  }

  100% {
    transform: translateY(-400%);
  }
}

.flex-validation-message {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #f87171;
  margin-top: 0.25rem;
  display: block;
}


.flex-inline-svg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0; /* Prevents extra space below SVG */
}

@keyframes flex-toast-slide-in {
  from {
    opacity: 0;
    transform: translateX(100%);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes flex-toast-shrink {
  from {
    width: 100%;
  }

  to {
    width: 0%;
  }
}

.flex-toast-animate-slide-in {
  animation: flex-toast-slide-in 0.3s ease-out;
}

.flex-toast-animate-shrink {
  animation: flex-toast-shrink 5s linear forwards;
}

.flex-form {
  width: 100%;
  margin: 0.25rem;
  margin-right: 1rem;
  padding: 10px;
  overflow: auto;
}

/* FormDataGrid.razor.css */

/* ===== Container ===== */
.flex-container {
  width: 100%;
  margin-right: 1rem;
}

@media (min-width: 1024px) {
  .flex-container {
    margin-right: 0;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ===== Desktop Table ===== */
.flex-data-grid-container {
  display: none;
  width: 100%;
}

@media (min-width: 1024px) {
  .flex-data-grid-container {
    display: block;
  }
}

.flex-data-grid-table {
  width: 100%;
}

.flex-table-head {
  position: sticky;
}

.flex-th {
  border-bottom: 1px solid rgb(226, 232, 240);
  font-weight: 700;
  padding: 1rem;
  color: rgb(148, 163, 184);
  text-align: left;
}

.flex-th-empty {
  border-bottom: 1px solid rgb(226, 232, 240);
}

.flex-tr {
  cursor: pointer;
}

  .flex-tr:hover {
    background-color: rgb(243, 244, 246);
  }

.flex-td {
  border-bottom: 1px solid rgb(226, 232, 240);
  padding: 1rem;
  color: rgb(148, 163, 184);
  text-align: left;
}

.flex-td-name {
  font-weight: 600;
}

.flex-td-text {
  font-weight: 500;
}

.flex-td-actions {
  border-bottom: 1px solid rgb(226, 232, 240);
}

.flex-icon {
  opacity: 0.6;
}

.flex-icon-delete {
  margin-right: 2rem;
}

/* ===== Mobile Layout ===== */
.flex-mobile-container {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  background-color: rgb(243, 244, 246);
}

@media (min-width: 1024px) {
  .flex-mobile-container {
    display: none;
  }
}

.flex-mobile-card {
  padding-right: 0.125rem;
  display: flex;
  cursor: pointer;
}

.flex-mobile-content {
  flex: 1 1 0%;
}

.flex-mobile-row {
  display: flex;
  gap: 0.5rem;
  justify-content: space-between;
}

.flex-mobile-row-spacing {
  margin-top: 0.5rem;
}

.flex-mobile-col-quarter {
  width: 25%;
}

.flex-data-item-label {
  font-size: 0.75rem;
  color: rgb(148, 163, 184);
}

.flex-data-item-value {
  font-size: 0.875rem;
  color: rgb(51, 65, 85);
}

.flex-mobile-arrow {
  display: flex;
  align-items: center;
  margin-left: 1rem;
}

  .flex-mobile-arrow img {
    margin-left: 0.5rem;
  }

/* Dark mode arrow visibility */
.flex-arrow-light {
  display: block;
}

.flex-arrow-dark {
  display: none;
}

/* ===== Dark Mode ===== */
@media (prefers-color-scheme: dark) {
  .flex-th,
  .flex-th-empty,
  .flex-td,
  .flex-td-actions {
    border-color: rgb(71, 85, 105);
  }

  .flex-th,
  .flex-td {
    color: rgb(226, 232, 240);
  }

  .flex-arrow-light {
    display: none;
  }

  .flex-arrow-dark {
    display: block;
  }
}



@keyframes savebar-slide-up {
  from {
    transform: translateY(100%);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.savebar-animate-slide-up {
  animation: savebar-slide-up 0.2s ease-out;
}

.loader-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.spinner {
  width: 80px;
  height: 80px;
  --clr: rgb(0, 113, 226);
  --clr-alpha: rgba(0, 113, 226, 0.1);
  animation: spinner 2s infinite linear;
  transform-style: preserve-3d;
}

  .spinner > div {
    background-color: var(--clr-alpha);
    height: 100%;
    position: absolute;
    width: 100%;
    border: 5px solid var(--clr);
  }

  .spinner div:nth-of-type(1) {
    transform: translateZ(-40px) rotateY(180deg);
  }

  .spinner div:nth-of-type(2) {
    transform: rotateY(-270deg) translateX(50%);
    transform-origin: top right;
  }

  .spinner div:nth-of-type(3) {
    transform: rotateY(270deg) translateX(-50%);
    transform-origin: center left;
  }

  .spinner div:nth-of-type(4) {
    transform: rotateX(90deg) translateY(-50%);
    transform-origin: top center;
  }

  .spinner div:nth-of-type(5) {
    transform: rotateX(-90deg) translateY(50%);
    transform-origin: bottom center;
  }

  .spinner div:nth-of-type(6) {
    transform: translateZ(40px);
  }

@keyframes spinner {
  0% {
    transform: rotate(0deg) rotateX(0deg) rotateY(0deg);
  }

  50% {
    transform: rotate(180deg) rotateX(180deg) rotateY(180deg);
  }

  100% {
    transform: rotate(360deg) rotateX(360deg) rotateY(360deg);
  }
}

.pixel-loader-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.pixel-loader {
  --zoom: 0.6;
  position: relative;
  --wh: calc(var(--wh-number) * 1px);
  --wh-n: calc(var(--wh-number) * -1px);
  width: calc(var(--wh-number) * var(--wh));
  height: calc(var(--wh-number) * var(--wh));
  --color: #fff;
  --pixel-color: #535353;
  --blur: 0;
  filter: drop-shadow(var(--wh-n) 0 var(--blur) var(--color)) drop-shadow(0 var(--wh-n) var(--blur) var(--color)) drop-shadow(var(--wh) 0 var(--blur) var(--color)) drop-shadow(0 var(--wh) var(--blur) var(--color));
  image-rendering: pixelated;
  zoom: var(--zoom);
  animation: mover 0.3s linear infinite;
}

  .pixel-loader .pixel {
    width: var(--wh);
    height: var(--wh);
    box-shadow: var(--shadow);
  }

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .pixel-loader {
    --color: #1a1a1a;
    --pixel-color: #a0a0a0;
  }

  .pixel-loader-text {
    color: #e0e0e0;
  }

  .pixel-loader-word {
    color: #60b8ff;
  }
}

/* Text styling */
.pixel-loader-text {
  color: #4a4a4a;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: 25px;
  box-sizing: content-box;
  height: 40px;
  padding: 10px 10px;
  display: flex;
  border-radius: 8px;
}

.pixel-loader-prefix {
  display: block;
}

.pixel-loader-words {
  overflow: hidden;
  height: 100%;
}

.pixel-loader-word {
  display: block;
  height: 100%;
  padding-left: 6px;
  color: #299fff;
  animation: pixel-loader-cycle-words 5s infinite;
}

@keyframes pixel-loader-cycle-words {
  10% {
    transform: translateY(-105%);
  }

  25% {
    transform: translateY(-100%);
  }

  35% {
    transform: translateY(-205%);
  }

  50% {
    transform: translateY(-200%);
  }

  60% {
    transform: translateY(-305%);
  }

  75% {
    transform: translateY(-300%);
  }

  85% {
    transform: translateY(-405%);
  }

  100% {
    transform: translateY(-400%);
  }
}

@keyframes mover {
  0%, 100% {
    --shadow: 0px 0px transparent, 24px 0px transparent, 48px 0px transparent, 72px 0px transparent, 96px 0px transparent, 120px 0px transparent, 144px 0px transparent, 168px 0px transparent, 192px 0px transparent, 216px 0px transparent, 240px 0px transparent, 264px 0px transparent, 288px 0px transparent, 312px 0px var(--pixel-color), 336px 0px var(--pixel-color), 360px 0px var(--pixel-color), 384px 0px var(--pixel-color), 408px 0px var(--pixel-color), 432px 0px var(--pixel-color), 456px 0px var(--pixel-color), 480px 0px var(--pixel-color), 504px 0px var(--pixel-color), 528px 0px var(--pixel-color), 552px 0px transparent, 0px 24px transparent, 24px 24px transparent, 48px 24px transparent, 72px 24px transparent, 96px 24px transparent, 120px 24px transparent, 144px 24px transparent, 168px 24px transparent, 192px 24px transparent, 216px 24px transparent, 240px 24px transparent, 264px 24px transparent, 288px 24px var(--pixel-color), 312px 24px var(--pixel-color), 336px 24px var(--pixel-color), 360px 24px var(--pixel-color), 384px 24px var(--pixel-color), 408px 24px var(--pixel-color), 432px 24px var(--pixel-color), 456px 24px var(--pixel-color), 480px 24px var(--pixel-color), 504px 24px var(--pixel-color), 528px 24px var(--pixel-color), 552px 24px var(--pixel-color), 0px 48px transparent, 24px 48px transparent, 48px 48px transparent, 72px 48px transparent, 96px 48px transparent, 120px 48px transparent, 144px 48px transparent, 168px 48px transparent, 192px 48px transparent, 216px 48px transparent, 240px 48px transparent, 264px 48px transparent, 288px 48px var(--pixel-color), 312px 48px var(--pixel-color), 336px 48px transparent, 360px 48px transparent, 384px 48px var(--pixel-color), 408px 48px var(--pixel-color), 432px 48px var(--pixel-color), 456px 48px var(--pixel-color), 480px 48px var(--pixel-color), 504px 48px var(--pixel-color), 528px 48px var(--pixel-color), 552px 48px var(--pixel-color), 0px 72px transparent, 24px 72px transparent, 48px 72px transparent, 72px 72px transparent, 96px 72px transparent, 120px 72px transparent, 144px 72px transparent, 168px 72px transparent, 192px 72px transparent, 216px 72px transparent, 240px 72px transparent, 264px 72px transparent, 288px 72px var(--pixel-color), 312px 72px var(--pixel-color), 336px 72px transparent, 360px 72px transparent, 384px 72px var(--pixel-color), 408px 72px var(--pixel-color), 432px 72px var(--pixel-color), 456px 72px var(--pixel-color), 480px 72px var(--pixel-color), 504px 72px var(--pixel-color), 528px 72px var(--pixel-color), 552px 72px var(--pixel-color), 0px 96px transparent, 24px 96px transparent, 48px 96px transparent, 72px 96px transparent, 96px 96px transparent, 120px 96px transparent, 144px 96px transparent, 168px 96px transparent, 192px 96px transparent, 216px 96px transparent, 240px 96px transparent, 264px 96px transparent, 288px 96px var(--pixel-color), 312px 96px var(--pixel-color), 336px 96px var(--pixel-color), 360px 96px var(--pixel-color), 384px 96px var(--pixel-color), 408px 96px var(--pixel-color), 432px 96px var(--pixel-color), 456px 96px var(--pixel-color), 480px 96px var(--pixel-color), 504px 96px var(--pixel-color), 528px 96px var(--pixel-color), 552px 96px var(--pixel-color), 0px 120px transparent, 24px 120px transparent, 48px 120px transparent, 72px 120px transparent, 96px 120px transparent, 120px 120px transparent, 144px 120px transparent, 168px 120px transparent, 192px 120px transparent, 216px 120px transparent, 240px 120px transparent, 264px 120px transparent, 288px 120px var(--pixel-color), 312px 120px var(--pixel-color), 336px 120px var(--pixel-color), 360px 120px var(--pixel-color), 384px 120px var(--pixel-color), 408px 120px var(--pixel-color), 432px 120px var(--pixel-color), 456px 120px var(--pixel-color), 480px 120px var(--pixel-color), 504px 120px var(--pixel-color), 528px 120px var(--pixel-color), 552px 120px var(--pixel-color), 0px 144px transparent, 24px 144px transparent, 48px 144px transparent, 72px 144px transparent, 96px 144px transparent, 120px 144px transparent, 144px 144px transparent, 168px 144px transparent, 192px 144px transparent, 216px 144px transparent, 240px 144px transparent, 264px 144px transparent, 288px 144px var(--pixel-color), 312px 144px var(--pixel-color), 336px 144px var(--pixel-color), 360px 144px var(--pixel-color), 384px 144px var(--pixel-color), 408px 144px var(--pixel-color), 432px 144px transparent, 456px 144px transparent, 480px 144px transparent, 504px 144px transparent, 528px 144px transparent, 552px 144px transparent, 0px 168px transparent, 24px 168px transparent, 48px 168px transparent, 72px 168px transparent, 96px 168px transparent, 120px 168px transparent, 144px 168px transparent, 168px 168px transparent, 192px 168px transparent, 216px 168px transparent, 240px 168px transparent, 264px 168px transparent, 288px 168px var(--pixel-color), 312px 168px var(--pixel-color), 336px 168px var(--pixel-color), 360px 168px var(--pixel-color), 384px 168px var(--pixel-color), 408px 168px var(--pixel-color), 432px 168px transparent, 456px 168px transparent, 480px 168px transparent, 504px 168px transparent, 528px 168px transparent, 552px 168px transparent, 0px 192px transparent, 24px 192px transparent, 48px 192px transparent, 72px 192px transparent, 96px 192px transparent, 120px 192px transparent, 144px 192px transparent, 168px 192px transparent, 192px 192px transparent, 216px 192px transparent, 240px 192px transparent, 264px 192px transparent, 288px 192px var(--pixel-color), 312px 192px var(--pixel-color), 336px 192px var(--pixel-color), 360px 192px var(--pixel-color), 384px 192px var(--pixel-color), 408px 192px var(--pixel-color), 432px 192px var(--pixel-color), 456px 192px var(--pixel-color), 480px 192px var(--pixel-color), 504px 192px var(--pixel-color), 528px 192px transparent, 552px 192px transparent, 0px 216px var(--pixel-color), 24px 216px transparent, 48px 216px transparent, 72px 216px transparent, 96px 216px transparent, 120px 216px transparent, 144px 216px transparent, 168px 216px transparent, 192px 216px transparent, 216px 216px transparent, 240px 216px var(--pixel-color), 264px 216px var(--pixel-color), 288px 216px var(--pixel-color), 312px 216px var(--pixel-color), 336px 216px var(--pixel-color), 360px 216px var(--pixel-color), 384px 216px var(--pixel-color), 408px 216px transparent, 432px 216px transparent, 456px 216px transparent, 480px 216px transparent, 504px 216px transparent, 528px 216px transparent, 552px 216px transparent, 0px 240px var(--pixel-color), 24px 240px transparent, 48px 240px transparent, 72px 240px transparent, 96px 240px transparent, 120px 240px transparent, 144px 240px transparent, 168px 240px transparent, 192px 240px var(--pixel-color), 216px 240px var(--pixel-color), 240px 240px var(--pixel-color), 264px 240px var(--pixel-color), 288px 240px var(--pixel-color), 312px 240px var(--pixel-color), 336px 240px var(--pixel-color), 360px 240px var(--pixel-color), 384px 240px var(--pixel-color), 408px 240px transparent, 432px 240px transparent, 456px 240px transparent, 480px 240px transparent, 504px 240px transparent, 528px 240px transparent, 552px 240px transparent, 0px 264px var(--pixel-color), 24px 264px var(--pixel-color), 48px 264px transparent, 72px 264px transparent, 96px 264px transparent, 120px 264px transparent, 144px 264px transparent, 168px 264px var(--pixel-color), 192px 264px var(--pixel-color), 216px 264px var(--pixel-color), 240px 264px var(--pixel-color), 264px 264px var(--pixel-color), 288px 264px var(--pixel-color), 312px 264px var(--pixel-color), 336px 264px var(--pixel-color), 360px 264px var(--pixel-color), 384px 264px var(--pixel-color), 408px 264px var(--pixel-color), 432px 264px var(--pixel-color), 456px 264px transparent, 480px 264px transparent, 504px 264px transparent, 528px 264px transparent, 552px 264px transparent, 0px 288px var(--pixel-color), 24px 288px var(--pixel-color), 48px 288px var(--pixel-color), 72px 288px transparent, 96px 288px transparent, 120px 288px transparent, 144px 288px var(--pixel-color), 168px 288px var(--pixel-color), 192px 288px var(--pixel-color), 216px 288px var(--pixel-color), 240px 288px var(--pixel-color), 264px 288px var(--pixel-color), 288px 288px var(--pixel-color), 312px 288px var(--pixel-color), 336px 288px var(--pixel-color), 360px 288px var(--pixel-color), 384px 288px var(--pixel-color), 408px 288px transparent, 432px 288px var(--pixel-color), 456px 288px transparent, 480px 288px transparent, 504px 288px transparent, 528px 288px transparent, 552px 288px transparent, 0px 312px var(--pixel-color), 24px 312px var(--pixel-color), 48px 312px var(--pixel-color), 72px 312px var(--pixel-color), 96px 312px var(--pixel-color), 120px 312px var(--pixel-color), 144px 312px var(--pixel-color), 168px 312px var(--pixel-color), 192px 312px var(--pixel-color), 216px 312px var(--pixel-color), 240px 312px var(--pixel-color), 264px 312px var(--pixel-color), 288px 312px var(--pixel-color), 312px 312px var(--pixel-color), 336px 312px var(--pixel-color), 360px 312px var(--pixel-color), 384px 312px var(--pixel-color), 408px 312px transparent, 432px 312px transparent, 456px 312px transparent, 480px 312px transparent, 504px 312px transparent, 528px 312px transparent, 552px 312px transparent, 0px 336px var(--pixel-color), 24px 336px var(--pixel-color), 48px 336px var(--pixel-color), 72px 336px var(--pixel-color), 96px 336px var(--pixel-color), 120px 336px var(--pixel-color), 144px 336px var(--pixel-color), 168px 336px var(--pixel-color), 192px 336px var(--pixel-color), 216px 336px var(--pixel-color), 240px 336px var(--pixel-color), 264px 336px var(--pixel-color), 288px 336px var(--pixel-color), 312px 336px var(--pixel-color), 336px 336px var(--pixel-color), 360px 336px var(--pixel-color), 384px 336px var(--pixel-color), 408px 336px transparent, 432px 336px transparent, 456px 336px transparent, 480px 336px transparent, 504px 336px transparent, 528px 336px transparent, 552px 336px transparent, 0px 360px transparent, 24px 360px var(--pixel-color), 48px 360px var(--pixel-color), 72px 360px var(--pixel-color), 96px 360px var(--pixel-color), 120px 360px var(--pixel-color), 144px 360px var(--pixel-color), 168px 360px var(--pixel-color), 192px 360px var(--pixel-color), 216px 360px var(--pixel-color), 240px 360px var(--pixel-color), 264px 360px var(--pixel-color), 288px 360px var(--pixel-color), 312px 360px var(--pixel-color), 336px 360px var(--pixel-color), 360px 360px var(--pixel-color), 384px 360px var(--pixel-color), 408px 360px transparent, 432px 360px transparent, 456px 360px transparent, 480px 360px transparent, 504px 360px transparent, 528px 360px transparent, 552px 360px transparent, 0px 384px transparent, 24px 384px transparent, 48px 384px var(--pixel-color), 72px 384px var(--pixel-color), 96px 384px var(--pixel-color), 120px 384px var(--pixel-color), 144px 384px var(--pixel-color), 168px 384px var(--pixel-color), 192px 384px var(--pixel-color), 216px 384px var(--pixel-color), 240px 384px var(--pixel-color), 264px 384px var(--pixel-color), 288px 384px var(--pixel-color), 312px 384px var(--pixel-color), 336px 384px var(--pixel-color), 360px 384px var(--pixel-color), 384px 384px transparent, 408px 384px transparent, 432px 384px transparent, 456px 384px transparent, 480px 384px transparent, 504px 384px transparent, 528px 384px transparent, 552px 384px transparent, 0px 408px transparent, 24px 408px transparent, 48px 408px transparent, 72px 408px var(--pixel-color), 96px 408px var(--pixel-color), 120px 408px var(--pixel-color), 144px 408px var(--pixel-color), 168px 408px var(--pixel-color), 192px 408px var(--pixel-color), 216px 408px var(--pixel-color), 240px 408px var(--pixel-color), 264px 408px var(--pixel-color), 288px 408px var(--pixel-color), 312px 408px var(--pixel-color), 336px 408px var(--pixel-color), 360px 408px transparent, 384px 408px transparent, 408px 408px transparent, 432px 408px transparent, 456px 408px transparent, 480px 408px transparent, 504px 408px transparent, 528px 408px transparent, 552px 408px transparent, 0px 432px transparent, 24px 432px transparent, 48px 432px transparent, 72px 432px transparent, 96px 432px var(--pixel-color), 120px 432px var(--pixel-color), 144px 432px var(--pixel-color), 168px 432px var(--pixel-color), 192px 432px var(--pixel-color), 216px 432px var(--pixel-color), 240px 432px var(--pixel-color), 264px 432px var(--pixel-color), 288px 432px var(--pixel-color), 312px 432px var(--pixel-color), 336px 432px transparent, 360px 432px transparent, 384px 432px transparent, 408px 432px transparent, 432px 432px transparent, 456px 432px transparent, 480px 432px transparent, 504px 432px transparent, 528px 432px transparent, 552px 432px transparent, 0px 456px transparent, 24px 456px transparent, 48px 456px transparent, 72px 456px transparent, 96px 456px transparent, 120px 456px var(--pixel-color), 144px 456px var(--pixel-color), 168px 456px var(--pixel-color), 192px 456px var(--pixel-color), 216px 456px var(--pixel-color), 240px 456px var(--pixel-color), 264px 456px var(--pixel-color), 288px 456px var(--pixel-color), 312px 456px transparent, 336px 456px transparent, 360px 456px transparent, 384px 456px transparent, 408px 456px transparent, 432px 456px transparent, 456px 456px transparent, 480px 456px transparent, 504px 456px transparent, 528px 456px transparent, 552px 456px transparent, 0px 480px transparent, 24px 480px transparent, 48px 480px transparent, 72px 480px transparent, 96px 480px transparent, 120px 480px transparent, 144px 480px var(--pixel-color), 168px 480px var(--pixel-color), 192px 480px var(--pixel-color), 216px 480px transparent, 240px 480px transparent, 264px 480px var(--pixel-color), 288px 480px var(--pixel-color), 312px 480px transparent, 336px 480px transparent, 360px 480px transparent, 384px 480px transparent, 408px 480px transparent, 432px 480px transparent, 456px 480px transparent, 480px 480px transparent, 504px 480px transparent, 528px 480px transparent, 552px 480px transparent, 0px 504px transparent, 24px 504px transparent, 48px 504px transparent, 72px 504px transparent, 96px 504px transparent, 120px 504px transparent, 144px 504px var(--pixel-color), 168px 504px var(--pixel-color), 192px 504px transparent, 216px 504px transparent, 240px 504px transparent, 264px 504px transparent, 288px 504px var(--pixel-color), 312px 504px transparent, 336px 504px transparent, 360px 504px transparent, 384px 504px transparent, 408px 504px transparent, 432px 504px transparent, 456px 504px transparent, 480px 504px transparent, 504px 504px transparent, 528px 504px transparent, 552px 504px transparent, 0px 528px transparent, 24px 528px transparent, 48px 528px transparent, 72px 528px transparent, 96px 528px transparent, 120px 528px transparent, 144px 528px var(--pixel-color), 168px 528px transparent, 192px 528px transparent, 216px 528px transparent, 240px 528px transparent, 264px 528px transparent, 288px 528px var(--pixel-color), 312px 528px transparent, 336px 528px transparent, 360px 528px transparent, 384px 528px transparent, 408px 528px transparent, 432px 528px transparent, 456px 528px transparent, 480px 528px transparent, 504px 528px transparent, 528px 528px transparent, 552px 528px transparent, 0px 552px transparent, 24px 552px transparent, 48px 552px transparent, 72px 552px transparent, 96px 552px transparent, 120px 552px transparent, 144px 552px var(--pixel-color), 168px 552px var(--pixel-color), 192px 552px transparent, 216px 552px transparent, 240px 552px transparent, 264px 552px transparent, 288px 552px var(--pixel-color), 312px 552px var(--pixel-color), 336px 552px transparent, 360px 552px transparent, 384px 552px transparent, 408px 552px transparent, 432px 552px transparent, 456px 552px transparent, 480px 552px transparent, 504px 552px transparent, 528px 552px transparent, 552px 552px transparent;
  }

  33% {
    --shadow: 0px 0px transparent, 24px 0px transparent, 48px 0px transparent, 72px 0px transparent, 96px 0px transparent, 120px 0px transparent, 144px 0px transparent, 168px 0px transparent, 192px 0px transparent, 216px 0px transparent, 240px 0px transparent, 264px 0px transparent, 288px 0px transparent, 312px 0px var(--pixel-color), 336px 0px var(--pixel-color), 360px 0px var(--pixel-color), 384px 0px var(--pixel-color), 408px 0px var(--pixel-color), 432px 0px var(--pixel-color), 456px 0px var(--pixel-color), 480px 0px var(--pixel-color), 504px 0px var(--pixel-color), 528px 0px var(--pixel-color), 552px 0px transparent, 0px 24px transparent, 24px 24px transparent, 48px 24px transparent, 72px 24px transparent, 96px 24px transparent, 120px 24px transparent, 144px 24px transparent, 168px 24px transparent, 192px 24px transparent, 216px 24px transparent, 240px 24px transparent, 264px 24px transparent, 288px 24px var(--pixel-color), 312px 24px var(--pixel-color), 336px 24px var(--pixel-color), 360px 24px var(--pixel-color), 384px 24px var(--pixel-color), 408px 24px var(--pixel-color), 432px 24px var(--pixel-color), 456px 24px var(--pixel-color), 480px 24px var(--pixel-color), 504px 24px var(--pixel-color), 528px 24px var(--pixel-color), 552px 24px var(--pixel-color), 0px 48px transparent, 24px 48px transparent, 48px 48px transparent, 72px 48px transparent, 96px 48px transparent, 120px 48px transparent, 144px 48px transparent, 168px 48px transparent, 192px 48px transparent, 216px 48px transparent, 240px 48px transparent, 264px 48px transparent, 288px 48px var(--pixel-color), 312px 48px var(--pixel-color), 336px 48px transparent, 360px 48px transparent, 384px 48px var(--pixel-color), 408px 48px var(--pixel-color), 432px 48px var(--pixel-color), 456px 48px var(--pixel-color), 480px 48px var(--pixel-color), 504px 48px var(--pixel-color), 528px 48px var(--pixel-color), 552px 48px var(--pixel-color), 0px 72px transparent, 24px 72px transparent, 48px 72px transparent, 72px 72px transparent, 96px 72px transparent, 120px 72px transparent, 144px 72px transparent, 168px 72px transparent, 192px 72px transparent, 216px 72px transparent, 240px 72px transparent, 264px 72px transparent, 288px 72px var(--pixel-color), 312px 72px var(--pixel-color), 336px 72px transparent, 360px 72px transparent, 384px 72px var(--pixel-color), 408px 72px var(--pixel-color), 432px 72px var(--pixel-color), 456px 72px var(--pixel-color), 480px 72px var(--pixel-color), 504px 72px var(--pixel-color), 528px 72px var(--pixel-color), 552px 72px var(--pixel-color), 0px 96px transparent, 24px 96px transparent, 48px 96px transparent, 72px 96px transparent, 96px 96px transparent, 120px 96px transparent, 144px 96px transparent, 168px 96px transparent, 192px 96px transparent, 216px 96px transparent, 240px 96px transparent, 264px 96px transparent, 288px 96px var(--pixel-color), 312px 96px var(--pixel-color), 336px 96px var(--pixel-color), 360px 96px var(--pixel-color), 384px 96px var(--pixel-color), 408px 96px var(--pixel-color), 432px 96px var(--pixel-color), 456px 96px var(--pixel-color), 480px 96px var(--pixel-color), 504px 96px var(--pixel-color), 528px 96px var(--pixel-color), 552px 96px var(--pixel-color), 0px 120px transparent, 24px 120px transparent, 48px 120px transparent, 72px 120px transparent, 96px 120px transparent, 120px 120px transparent, 144px 120px transparent, 168px 120px transparent, 192px 120px transparent, 216px 120px transparent, 240px 120px transparent, 264px 120px transparent, 288px 120px var(--pixel-color), 312px 120px var(--pixel-color), 336px 120px var(--pixel-color), 360px 120px var(--pixel-color), 384px 120px var(--pixel-color), 408px 120px var(--pixel-color), 432px 120px var(--pixel-color), 456px 120px var(--pixel-color), 480px 120px var(--pixel-color), 504px 120px var(--pixel-color), 528px 120px var(--pixel-color), 552px 120px var(--pixel-color), 0px 144px transparent, 24px 144px transparent, 48px 144px transparent, 72px 144px transparent, 96px 144px transparent, 120px 144px transparent, 144px 144px transparent, 168px 144px transparent, 192px 144px transparent, 216px 144px transparent, 240px 144px transparent, 264px 144px transparent, 288px 144px var(--pixel-color), 312px 144px var(--pixel-color), 336px 144px var(--pixel-color), 360px 144px var(--pixel-color), 384px 144px var(--pixel-color), 408px 144px var(--pixel-color), 432px 144px transparent, 456px 144px transparent, 480px 144px transparent, 504px 144px transparent, 528px 144px transparent, 552px 144px transparent, 0px 168px transparent, 24px 168px transparent, 48px 168px transparent, 72px 168px transparent, 96px 168px transparent, 120px 168px transparent, 144px 168px transparent, 168px 168px transparent, 192px 168px transparent, 216px 168px transparent, 240px 168px transparent, 264px 168px transparent, 288px 168px var(--pixel-color), 312px 168px var(--pixel-color), 336px 168px var(--pixel-color), 360px 168px var(--pixel-color), 384px 168px var(--pixel-color), 408px 168px var(--pixel-color), 432px 168px transparent, 456px 168px transparent, 480px 168px transparent, 504px 168px transparent, 528px 168px transparent, 552px 168px transparent, 0px 192px transparent, 24px 192px transparent, 48px 192px transparent, 72px 192px transparent, 96px 192px transparent, 120px 192px transparent, 144px 192px transparent, 168px 192px transparent, 192px 192px transparent, 216px 192px transparent, 240px 192px transparent, 264px 192px transparent, 288px 192px var(--pixel-color), 312px 192px var(--pixel-color), 336px 192px var(--pixel-color), 360px 192px var(--pixel-color), 384px 192px var(--pixel-color), 408px 192px var(--pixel-color), 432px 192px var(--pixel-color), 456px 192px var(--pixel-color), 480px 192px var(--pixel-color), 504px 192px var(--pixel-color), 528px 192px transparent, 552px 192px transparent, 0px 216px var(--pixel-color), 24px 216px transparent, 48px 216px transparent, 72px 216px transparent, 96px 216px transparent, 120px 216px transparent, 144px 216px transparent, 168px 216px transparent, 192px 216px transparent, 216px 216px transparent, 240px 216px var(--pixel-color), 264px 216px var(--pixel-color), 288px 216px var(--pixel-color), 312px 216px var(--pixel-color), 336px 216px var(--pixel-color), 360px 216px var(--pixel-color), 384px 216px var(--pixel-color), 408px 216px transparent, 432px 216px transparent, 456px 216px transparent, 480px 216px transparent, 504px 216px transparent, 528px 216px transparent, 552px 216px transparent, 0px 240px var(--pixel-color), 24px 240px transparent, 48px 240px transparent, 72px 240px transparent, 96px 240px transparent, 120px 240px transparent, 144px 240px transparent, 168px 240px transparent, 192px 240px var(--pixel-color), 216px 240px var(--pixel-color), 240px 240px var(--pixel-color), 264px 240px var(--pixel-color), 288px 240px var(--pixel-color), 312px 240px var(--pixel-color), 336px 240px var(--pixel-color), 360px 240px var(--pixel-color), 384px 240px var(--pixel-color), 408px 240px transparent, 432px 240px transparent, 456px 240px transparent, 480px 240px transparent, 504px 240px transparent, 528px 240px transparent, 552px 240px transparent, 0px 264px var(--pixel-color), 24px 264px var(--pixel-color), 48px 264px transparent, 72px 264px transparent, 96px 264px transparent, 120px 264px transparent, 144px 264px transparent, 168px 264px var(--pixel-color), 192px 264px var(--pixel-color), 216px 264px var(--pixel-color), 240px 264px var(--pixel-color), 264px 264px var(--pixel-color), 288px 264px var(--pixel-color), 312px 264px var(--pixel-color), 336px 264px var(--pixel-color), 360px 264px var(--pixel-color), 384px 264px var(--pixel-color), 408px 264px var(--pixel-color), 432px 264px var(--pixel-color), 456px 264px transparent, 480px 264px transparent, 504px 264px transparent, 528px 264px transparent, 552px 264px transparent, 0px 288px var(--pixel-color), 24px 288px var(--pixel-color), 48px 288px var(--pixel-color), 72px 288px transparent, 96px 288px transparent, 120px 288px transparent, 144px 288px var(--pixel-color), 168px 288px var(--pixel-color), 192px 288px var(--pixel-color), 216px 288px var(--pixel-color), 240px 288px var(--pixel-color), 264px 288px var(--pixel-color), 288px 288px var(--pixel-color), 312px 288px var(--pixel-color), 336px 288px var(--pixel-color), 360px 288px var(--pixel-color), 384px 288px var(--pixel-color), 408px 288px transparent, 432px 288px var(--pixel-color), 456px 288px transparent, 480px 288px transparent, 504px 288px transparent, 528px 288px transparent, 552px 288px transparent, 0px 312px var(--pixel-color), 24px 312px var(--pixel-color), 48px 312px var(--pixel-color), 72px 312px var(--pixel-color), 96px 312px var(--pixel-color), 120px 312px var(--pixel-color), 144px 312px var(--pixel-color), 168px 312px var(--pixel-color), 192px 312px var(--pixel-color), 216px 312px var(--pixel-color), 240px 312px var(--pixel-color), 264px 312px var(--pixel-color), 288px 312px var(--pixel-color), 312px 312px var(--pixel-color), 336px 312px var(--pixel-color), 360px 312px var(--pixel-color), 384px 312px var(--pixel-color), 408px 312px transparent, 432px 312px transparent, 456px 312px transparent, 480px 312px transparent, 504px 312px transparent, 528px 312px transparent, 552px 312px transparent, 0px 336px var(--pixel-color), 24px 336px var(--pixel-color), 48px 336px var(--pixel-color), 72px 336px var(--pixel-color), 96px 336px var(--pixel-color), 120px 336px var(--pixel-color), 144px 336px var(--pixel-color), 168px 336px var(--pixel-color), 192px 336px var(--pixel-color), 216px 336px var(--pixel-color), 240px 336px var(--pixel-color), 264px 336px var(--pixel-color), 288px 336px var(--pixel-color), 312px 336px var(--pixel-color), 336px 336px var(--pixel-color), 360px 336px var(--pixel-color), 384px 336px var(--pixel-color), 408px 336px transparent, 432px 336px transparent, 456px 336px transparent, 480px 336px transparent, 504px 336px transparent, 528px 336px transparent, 552px 336px transparent, 0px 360px transparent, 24px 360px var(--pixel-color), 48px 360px var(--pixel-color), 72px 360px var(--pixel-color), 96px 360px var(--pixel-color), 120px 360px var(--pixel-color), 144px 360px var(--pixel-color), 168px 360px var(--pixel-color), 192px 360px var(--pixel-color), 216px 360px var(--pixel-color), 240px 360px var(--pixel-color), 264px 360px var(--pixel-color), 288px 360px var(--pixel-color), 312px 360px var(--pixel-color), 336px 360px var(--pixel-color), 360px 360px var(--pixel-color), 384px 360px var(--pixel-color), 408px 360px transparent, 432px 360px transparent, 456px 360px transparent, 480px 360px transparent, 504px 360px transparent, 528px 360px transparent, 552px 360px transparent, 0px 384px transparent, 24px 384px transparent, 48px 384px var(--pixel-color), 72px 384px var(--pixel-color), 96px 384px var(--pixel-color), 120px 384px var(--pixel-color), 144px 384px var(--pixel-color), 168px 384px var(--pixel-color), 192px 384px var(--pixel-color), 216px 384px var(--pixel-color), 240px 384px var(--pixel-color), 264px 384px var(--pixel-color), 288px 384px var(--pixel-color), 312px 384px var(--pixel-color), 336px 384px var(--pixel-color), 360px 384px var(--pixel-color), 384px 384px transparent, 408px 384px transparent, 432px 384px transparent, 456px 384px transparent, 480px 384px transparent, 504px 384px transparent, 528px 384px transparent, 552px 384px transparent, 0px 408px transparent, 24px 408px transparent, 48px 408px transparent, 72px 408px var(--pixel-color), 96px 408px var(--pixel-color), 120px 408px var(--pixel-color), 144px 408px var(--pixel-color), 168px 408px var(--pixel-color), 192px 408px var(--pixel-color), 216px 408px var(--pixel-color), 240px 408px var(--pixel-color), 264px 408px var(--pixel-color), 288px 408px var(--pixel-color), 312px 408px var(--pixel-color), 336px 408px var(--pixel-color), 360px 408px transparent, 384px 408px transparent, 408px 408px transparent, 432px 408px transparent, 456px 408px transparent, 480px 408px transparent, 504px 408px transparent, 528px 408px transparent, 552px 408px transparent, 0px 432px transparent, 24px 432px transparent, 48px 432px transparent, 72px 432px transparent, 96px 432px var(--pixel-color), 120px 432px var(--pixel-color), 144px 432px var(--pixel-color), 168px 432px var(--pixel-color), 192px 432px var(--pixel-color), 216px 432px var(--pixel-color), 240px 432px var(--pixel-color), 264px 432px var(--pixel-color), 288px 432px var(--pixel-color), 312px 432px var(--pixel-color), 336px 432px transparent, 360px 432px transparent, 384px 432px transparent, 408px 432px transparent, 432px 432px transparent, 456px 432px transparent, 480px 432px transparent, 504px 432px transparent, 528px 432px transparent, 552px 432px transparent, 0px 456px transparent, 24px 456px transparent, 48px 456px transparent, 72px 456px transparent, 96px 456px transparent, 120px 456px var(--pixel-color), 144px 456px var(--pixel-color), 168px 456px var(--pixel-color), 192px 456px var(--pixel-color), 216px 456px var(--pixel-color), 240px 456px var(--pixel-color), 264px 456px var(--pixel-color), 288px 456px var(--pixel-color), 312px 456px transparent, 336px 456px transparent, 360px 456px transparent, 384px 456px transparent, 408px 456px transparent, 432px 456px transparent, 456px 456px transparent, 480px 456px transparent, 504px 456px transparent, 528px 456px transparent, 552px 456px transparent, 0px 480px transparent, 24px 480px transparent, 48px 480px transparent, 72px 480px transparent, 96px 480px transparent, 120px 480px transparent, 144px 480px var(--pixel-color), 168px 480px var(--pixel-color), 192px 480px var(--pixel-color), 216px 480px transparent, 240px 480px transparent, 264px 480px var(--pixel-color), 288px 480px var(--pixel-color), 312px 480px var(--pixel-color), 336px 480px transparent, 360px 480px transparent, 384px 480px transparent, 408px 480px transparent, 432px 480px transparent, 456px 480px transparent, 480px 480px transparent, 504px 480px transparent, 528px 480px transparent, 552px 480px transparent, 0px 504px transparent, 24px 504px transparent, 48px 504px transparent, 72px 504px transparent, 96px 504px transparent, 120px 504px transparent, 144px 504px var(--pixel-color), 168px 504px var(--pixel-color), 192px 504px transparent, 216px 504px transparent, 240px 504px transparent, 264px 504px transparent, 288px 504px transparent, 312px 504px transparent, 336px 504px transparent, 360px 504px transparent, 384px 504px transparent, 408px 504px transparent, 432px 504px transparent, 456px 504px transparent, 480px 504px transparent, 504px 504px transparent, 528px 504px transparent, 552px 504px transparent, 0px 528px transparent, 24px 528px transparent, 48px 528px transparent, 72px 528px transparent, 96px 528px transparent, 120px 528px transparent, 144px 528px var(--pixel-color), 168px 528px transparent, 192px 528px transparent, 216px 528px transparent, 240px 528px transparent, 264px 528px transparent, 288px 528px transparent, 312px 528px transparent, 336px 528px transparent, 360px 528px transparent, 384px 528px transparent, 408px 528px transparent, 432px 528px transparent, 456px 528px transparent, 480px 528px transparent, 504px 528px transparent, 528px 528px transparent, 552px 528px transparent, 0px 552px transparent, 24px 552px transparent, 48px 552px transparent, 72px 552px transparent, 96px 552px transparent, 120px 552px transparent, 144px 552px var(--pixel-color), 168px 552px var(--pixel-color), 192px 552px transparent, 216px 552px transparent, 240px 552px transparent, 264px 552px transparent, 288px 552px transparent, 312px 552px transparent, 336px 552px transparent, 360px 552px transparent, 384px 552px transparent, 408px 552px transparent, 432px 552px transparent, 456px 552px transparent, 480px 552px transparent, 504px 552px transparent, 528px 552px transparent, 552px 552px transparent;
  }

  66% {
    --shadow: 0px 0px transparent, 24px 0px transparent, 48px 0px transparent, 72px 0px transparent, 96px 0px transparent, 120px 0px transparent, 144px 0px transparent, 168px 0px transparent, 192px 0px transparent, 216px 0px transparent, 240px 0px transparent, 264px 0px transparent, 288px 0px transparent, 312px 0px var(--pixel-color), 336px 0px var(--pixel-color), 360px 0px var(--pixel-color), 384px 0px var(--pixel-color), 408px 0px var(--pixel-color), 432px 0px var(--pixel-color), 456px 0px var(--pixel-color), 480px 0px var(--pixel-color), 504px 0px var(--pixel-color), 528px 0px var(--pixel-color), 552px 0px transparent, 0px 24px transparent, 24px 24px transparent, 48px 24px transparent, 72px 24px transparent, 96px 24px transparent, 120px 24px transparent, 144px 24px transparent, 168px 24px transparent, 192px 24px transparent, 216px 24px transparent, 240px 24px transparent, 264px 24px transparent, 288px 24px var(--pixel-color), 312px 24px var(--pixel-color), 336px 24px var(--pixel-color), 360px 24px var(--pixel-color), 384px 24px var(--pixel-color), 408px 24px var(--pixel-color), 432px 24px var(--pixel-color), 456px 24px var(--pixel-color), 480px 24px var(--pixel-color), 504px 24px var(--pixel-color), 528px 24px var(--pixel-color), 552px 24px var(--pixel-color), 0px 48px transparent, 24px 48px transparent, 48px 48px transparent, 72px 48px transparent, 96px 48px transparent, 120px 48px transparent, 144px 48px transparent, 168px 48px transparent, 192px 48px transparent, 216px 48px transparent, 240px 48px transparent, 264px 48px transparent, 288px 48px var(--pixel-color), 312px 48px var(--pixel-color), 336px 48px transparent, 360px 48px transparent, 384px 48px var(--pixel-color), 408px 48px var(--pixel-color), 432px 48px var(--pixel-color), 456px 48px var(--pixel-color), 480px 48px var(--pixel-color), 504px 48px var(--pixel-color), 528px 48px var(--pixel-color), 552px 48px var(--pixel-color), 0px 72px transparent, 24px 72px transparent, 48px 72px transparent, 72px 72px transparent, 96px 72px transparent, 120px 72px transparent, 144px 72px transparent, 168px 72px transparent, 192px 72px transparent, 216px 72px transparent, 240px 72px transparent, 264px 72px transparent, 288px 72px var(--pixel-color), 312px 72px var(--pixel-color), 336px 72px transparent, 360px 72px transparent, 384px 72px var(--pixel-color), 408px 72px var(--pixel-color), 432px 72px var(--pixel-color), 456px 72px var(--pixel-color), 480px 72px var(--pixel-color), 504px 72px var(--pixel-color), 528px 72px var(--pixel-color), 552px 72px var(--pixel-color), 0px 96px transparent, 24px 96px transparent, 48px 96px transparent, 72px 96px transparent, 96px 96px transparent, 120px 96px transparent, 144px 96px transparent, 168px 96px transparent, 192px 96px transparent, 216px 96px transparent, 240px 96px transparent, 264px 96px transparent, 288px 96px var(--pixel-color), 312px 96px var(--pixel-color), 336px 96px var(--pixel-color), 360px 96px var(--pixel-color), 384px 96px var(--pixel-color), 408px 96px var(--pixel-color), 432px 96px var(--pixel-color), 456px 96px var(--pixel-color), 480px 96px var(--pixel-color), 504px 96px var(--pixel-color), 528px 96px var(--pixel-color), 552px 96px var(--pixel-color), 0px 120px transparent, 24px 120px transparent, 48px 120px transparent, 72px 120px transparent, 96px 120px transparent, 120px 120px transparent, 144px 120px transparent, 168px 120px transparent, 192px 120px transparent, 216px 120px transparent, 240px 120px transparent, 264px 120px transparent, 288px 120px var(--pixel-color), 312px 120px var(--pixel-color), 336px 120px var(--pixel-color), 360px 120px var(--pixel-color), 384px 120px var(--pixel-color), 408px 120px var(--pixel-color), 432px 120px var(--pixel-color), 456px 120px var(--pixel-color), 480px 120px var(--pixel-color), 504px 120px var(--pixel-color), 528px 120px var(--pixel-color), 552px 120px var(--pixel-color), 0px 144px transparent, 24px 144px transparent, 48px 144px transparent, 72px 144px transparent, 96px 144px transparent, 120px 144px transparent, 144px 144px transparent, 168px 144px transparent, 192px 144px transparent, 216px 144px transparent, 240px 144px transparent, 264px 144px transparent, 288px 144px var(--pixel-color), 312px 144px var(--pixel-color), 336px 144px var(--pixel-color), 360px 144px var(--pixel-color), 384px 144px var(--pixel-color), 408px 144px var(--pixel-color), 432px 144px transparent, 456px 144px transparent, 480px 144px transparent, 504px 144px transparent, 528px 144px transparent, 552px 144px transparent, 0px 168px transparent, 24px 168px transparent, 48px 168px transparent, 72px 168px transparent, 96px 168px transparent, 120px 168px transparent, 144px 168px transparent, 168px 168px transparent, 192px 168px transparent, 216px 168px transparent, 240px 168px transparent, 264px 168px transparent, 288px 168px var(--pixel-color), 312px 168px var(--pixel-color), 336px 168px var(--pixel-color), 360px 168px var(--pixel-color), 384px 168px var(--pixel-color), 408px 168px var(--pixel-color), 432px 168px transparent, 456px 168px transparent, 480px 168px transparent, 504px 168px transparent, 528px 168px transparent, 552px 168px transparent, 0px 192px transparent, 24px 192px transparent, 48px 192px transparent, 72px 192px transparent, 96px 192px transparent, 120px 192px transparent, 144px 192px transparent, 168px 192px transparent, 192px 192px transparent, 216px 192px transparent, 240px 192px transparent, 264px 192px transparent, 288px 192px var(--pixel-color), 312px 192px var(--pixel-color), 336px 192px var(--pixel-color), 360px 192px var(--pixel-color), 384px 192px var(--pixel-color), 408px 192px var(--pixel-color), 432px 192px var(--pixel-color), 456px 192px var(--pixel-color), 480px 192px var(--pixel-color), 504px 192px var(--pixel-color), 528px 192px transparent, 552px 192px transparent, 0px 216px var(--pixel-color), 24px 216px transparent, 48px 216px transparent, 72px 216px transparent, 96px 216px transparent, 120px 216px transparent, 144px 216px transparent, 168px 216px transparent, 192px 216px transparent, 216px 216px transparent, 240px 216px var(--pixel-color), 264px 216px var(--pixel-color), 288px 216px var(--pixel-color), 312px 216px var(--pixel-color), 336px 216px var(--pixel-color), 360px 216px var(--pixel-color), 384px 216px var(--pixel-color), 408px 216px transparent, 432px 216px transparent, 456px 216px transparent, 480px 216px transparent, 504px 216px transparent, 528px 216px transparent, 552px 216px transparent, 0px 240px var(--pixel-color), 24px 240px transparent, 48px 240px transparent, 72px 240px transparent, 96px 240px transparent, 120px 240px transparent, 144px 240px transparent, 168px 240px transparent, 192px 240px var(--pixel-color), 216px 240px var(--pixel-color), 240px 240px var(--pixel-color), 264px 240px var(--pixel-color), 288px 240px var(--pixel-color), 312px 240px var(--pixel-color), 336px 240px var(--pixel-color), 360px 240px var(--pixel-color), 384px 240px var(--pixel-color), 408px 240px transparent, 432px 240px transparent, 456px 240px transparent, 480px 240px transparent, 504px 240px transparent, 528px 240px transparent, 552px 240px transparent, 0px 264px var(--pixel-color), 24px 264px var(--pixel-color), 48px 264px transparent, 72px 264px transparent, 96px 264px transparent, 120px 264px transparent, 144px 264px transparent, 168px 264px var(--pixel-color), 192px 264px var(--pixel-color), 216px 264px var(--pixel-color), 240px 264px var(--pixel-color), 264px 264px var(--pixel-color), 288px 264px var(--pixel-color), 312px 264px var(--pixel-color), 336px 264px var(--pixel-color), 360px 264px var(--pixel-color), 384px 264px var(--pixel-color), 408px 264px var(--pixel-color), 432px 264px var(--pixel-color), 456px 264px transparent, 480px 264px transparent, 504px 264px transparent, 528px 264px transparent, 552px 264px transparent, 0px 288px var(--pixel-color), 24px 288px var(--pixel-color), 48px 288px var(--pixel-color), 72px 288px transparent, 96px 288px transparent, 120px 288px transparent, 144px 288px var(--pixel-color), 168px 288px var(--pixel-color), 192px 288px var(--pixel-color), 216px 288px var(--pixel-color), 240px 288px var(--pixel-color), 264px 288px var(--pixel-color), 288px 288px var(--pixel-color), 312px 288px var(--pixel-color), 336px 288px var(--pixel-color), 360px 288px var(--pixel-color), 384px 288px var(--pixel-color), 408px 288px transparent, 432px 288px var(--pixel-color), 456px 288px transparent, 480px 288px transparent, 504px 288px transparent, 528px 288px transparent, 552px 288px transparent, 0px 312px var(--pixel-color), 24px 312px var(--pixel-color), 48px 312px var(--pixel-color), 72px 312px var(--pixel-color), 96px 312px var(--pixel-color), 120px 312px var(--pixel-color), 144px 312px var(--pixel-color), 168px 312px var(--pixel-color), 192px 312px var(--pixel-color), 216px 312px var(--pixel-color), 240px 312px var(--pixel-color), 264px 312px var(--pixel-color), 288px 312px var(--pixel-color), 312px 312px var(--pixel-color), 336px 312px var(--pixel-color), 360px 312px var(--pixel-color), 384px 312px var(--pixel-color), 408px 312px transparent, 432px 312px transparent, 456px 312px transparent, 480px 312px transparent, 504px 312px transparent, 528px 312px transparent, 552px 312px transparent, 0px 336px var(--pixel-color), 24px 336px var(--pixel-color), 48px 336px var(--pixel-color), 72px 336px var(--pixel-color), 96px 336px var(--pixel-color), 120px 336px var(--pixel-color), 144px 336px var(--pixel-color), 168px 336px var(--pixel-color), 192px 336px var(--pixel-color), 216px 336px var(--pixel-color), 240px 336px var(--pixel-color), 264px 336px var(--pixel-color), 288px 336px var(--pixel-color), 312px 336px var(--pixel-color), 336px 336px var(--pixel-color), 360px 336px var(--pixel-color), 384px 336px var(--pixel-color), 408px 336px transparent, 432px 336px transparent, 456px 336px transparent, 480px 336px transparent, 504px 336px transparent, 528px 336px transparent, 552px 336px transparent, 0px 360px transparent, 24px 360px var(--pixel-color), 48px 360px var(--pixel-color), 72px 360px var(--pixel-color), 96px 360px var(--pixel-color), 120px 360px var(--pixel-color), 144px 360px var(--pixel-color), 168px 360px var(--pixel-color), 192px 360px var(--pixel-color), 216px 360px var(--pixel-color), 240px 360px var(--pixel-color), 264px 360px var(--pixel-color), 288px 360px var(--pixel-color), 312px 360px var(--pixel-color), 336px 360px var(--pixel-color), 360px 360px var(--pixel-color), 384px 360px var(--pixel-color), 408px 360px transparent, 432px 360px transparent, 456px 360px transparent, 480px 360px transparent, 504px 360px transparent, 528px 360px transparent, 552px 360px transparent, 0px 384px transparent, 24px 384px transparent, 48px 384px var(--pixel-color), 72px 384px var(--pixel-color), 96px 384px var(--pixel-color), 120px 384px var(--pixel-color), 144px 384px var(--pixel-color), 168px 384px var(--pixel-color), 192px 384px var(--pixel-color), 216px 384px var(--pixel-color), 240px 384px var(--pixel-color), 264px 384px var(--pixel-color), 288px 384px var(--pixel-color), 312px 384px var(--pixel-color), 336px 384px var(--pixel-color), 360px 384px var(--pixel-color), 384px 384px transparent, 408px 384px transparent, 432px 384px transparent, 456px 384px transparent, 480px 384px transparent, 504px 384px transparent, 528px 384px transparent, 552px 384px transparent, 0px 408px transparent, 24px 408px transparent, 48px 408px transparent, 72px 408px var(--pixel-color), 96px 408px var(--pixel-color), 120px 408px var(--pixel-color), 144px 408px var(--pixel-color), 168px 408px var(--pixel-color), 192px 408px var(--pixel-color), 216px 408px var(--pixel-color), 240px 408px var(--pixel-color), 264px 408px var(--pixel-color), 288px 408px var(--pixel-color), 312px 408px var(--pixel-color), 336px 408px var(--pixel-color), 360px 408px transparent, 384px 408px transparent, 408px 408px transparent, 432px 408px transparent, 456px 408px transparent, 480px 408px transparent, 504px 408px transparent, 528px 408px transparent, 552px 408px transparent, 0px 432px transparent, 24px 432px transparent, 48px 432px transparent, 72px 432px transparent, 96px 432px var(--pixel-color), 120px 432px var(--pixel-color), 144px 432px var(--pixel-color), 168px 432px var(--pixel-color), 192px 432px var(--pixel-color), 216px 432px var(--pixel-color), 240px 432px var(--pixel-color), 264px 432px var(--pixel-color), 288px 432px var(--pixel-color), 312px 432px var(--pixel-color), 336px 432px transparent, 360px 432px transparent, 384px 432px transparent, 408px 432px transparent, 432px 432px transparent, 456px 432px transparent, 480px 432px transparent, 504px 432px transparent, 528px 432px transparent, 552px 432px transparent, 0px 456px transparent, 24px 456px transparent, 48px 456px transparent, 72px 456px transparent, 96px 456px transparent, 120px 456px var(--pixel-color), 144px 456px var(--pixel-color), 168px 456px var(--pixel-color), 192px 456px var(--pixel-color), 216px 456px var(--pixel-color), 240px 456px var(--pixel-color), 264px 456px var(--pixel-color), 288px 456px var(--pixel-color), 312px 456px transparent, 336px 456px transparent, 360px 456px transparent, 384px 456px transparent, 408px 456px transparent, 432px 456px transparent, 456px 456px transparent, 480px 456px transparent, 504px 456px transparent, 528px 456px transparent, 552px 456px transparent, 0px 480px transparent, 24px 480px transparent, 48px 480px transparent, 72px 480px transparent, 96px 480px transparent, 120px 480px transparent, 144px 480px var(--pixel-color), 168px 480px var(--pixel-color), 192px 480px var(--pixel-color), 216px 480px transparent, 240px 480px transparent, 264px 480px var(--pixel-color), 288px 480px var(--pixel-color), 312px 480px transparent, 336px 480px transparent, 360px 480px transparent, 384px 480px transparent, 408px 480px transparent, 432px 480px transparent, 456px 480px transparent, 480px 480px transparent, 504px 480px transparent, 528px 480px transparent, 552px 480px transparent, 0px 504px transparent, 24px 504px transparent, 48px 504px transparent, 72px 504px transparent, 96px 504px transparent, 120px 504px transparent, 144px 504px transparent, 168px 504px var(--pixel-color), 192px 504px var(--pixel-color), 216px 504px var(--pixel-color), 240px 504px transparent, 264px 504px transparent, 288px 504px var(--pixel-color), 312px 504px transparent, 336px 504px transparent, 360px 504px transparent, 384px 504px transparent, 408px 504px transparent, 432px 504px transparent, 456px 504px transparent, 480px 504px transparent, 504px 504px transparent, 528px 504px transparent, 552px 504px transparent, 0px 528px transparent, 24px 528px transparent, 48px 528px transparent, 72px 528px transparent, 96px 528px transparent, 120px 528px transparent, 144px 528px transparent, 168px 528px transparent, 192px 528px transparent, 216px 528px transparent, 240px 528px transparent, 264px 528px transparent, 288px 528px var(--pixel-color), 312px 528px transparent, 336px 528px transparent, 360px 528px transparent, 384px 528px transparent, 408px 528px transparent, 432px 528px transparent, 456px 528px transparent, 480px 528px transparent, 504px 528px transparent, 528px 528px transparent, 552px 528px transparent, 0px 552px transparent, 24px 552px transparent, 48px 552px transparent, 72px 552px transparent, 96px 552px transparent, 120px 552px transparent, 144px 552px transparent, 168px 552px transparent, 192px 552px transparent, 216px 552px transparent, 240px 552px transparent, 264px 552px transparent, 288px 552px var(--pixel-color), 312px 552px var(--pixel-color), 336px 552px transparent, 360px 552px transparent, 384px 552px transparent, 408px 552px transparent, 432px 552px transparent, 456px 552px transparent, 480px 552px transparent, 504px 552px transparent, 528px 552px transparent, 552px 552px transparent;
  }
}

.lpi-horizontal-loader-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.lpi-horizontal-loader {
  display: block;
  --height-of-loader: 8px;
  --loader-color: #0071e2;
  width: 200px;
  height: var(--height-of-loader);
  border-radius: 30px;
  background-color: rgba(0,0,0,0.2);
  position: relative;
}

  .lpi-horizontal-loader::before {
    content: "";
    position: absolute;
    background: var(--loader-color);
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    border-radius: 30px;
    animation: lpi-horizontal-moving 1s ease-in-out infinite;
  }

@keyframes lpi-horizontal-moving {
  50% {
    width: 100%;
  }

  100% {
    width: 0;
    right: 0;
    left: unset;
  }
}

.loading-spinner-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.loading-spinner-spinner {
  width: 56px;
  height: 56px;
  display: grid;
  border: 4px solid #0000;
  border-radius: 50%;
  border-right-color: #299fff;
  animation: loading-spinner-tri 1s infinite linear;
}

  .loading-spinner-spinner::before,
  .loading-spinner-spinner::after {
    content: "";
    grid-area: 1/1;
    margin: 2px;
    border: inherit;
    border-radius: 50%;
    animation: loading-spinner-tri 2s infinite;
  }

  .loading-spinner-spinner::after {
    margin: 8px;
    animation-duration: 3s;
  }

@keyframes loading-spinner-tri {
  100% {
    transform: rotate(1turn);
  }
}

.loading-spinner-loader {
  color: #4a4a4a;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: 25px;
  box-sizing: content-box;
  height: 40px;
  padding: 10px 10px;
  display: flex;
  border-radius: 8px;
}

.loading-spinner-words {
  overflow: hidden;
}

.loading-spinner-word {
  display: block;
  height: 100%;
  padding-left: 6px;
  color: #299fff;
  animation: loading-spinner-cycle-words 5s infinite;
}

  .loading-spinner-word.single-word {
    animation: none;
  }

@keyframes loading-spinner-cycle-words {
  10% {
    transform: translateY(-105%);
  }

  25% {
    transform: translateY(-100%);
  }

  35% {
    transform: translateY(-205%);
  }

  50% {
    transform: translateY(-200%);
  }

  60% {
    transform: translateY(-305%);
  }

  75% {
    transform: translateY(-300%);
  }

  85% {
    transform: translateY(-405%);
  }

  100% {
    transform: translateY(-400%);
  }
}

@keyframes unsaved-modal-in {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-10px);
  }

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

.animate-unsaved-modal-in {
  animation: unsaved-modal-in 0.2s ease-out forwards;
}

@keyframes grid-loading {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(400%);
  }
}

/* Container query setup */
.cell-container {
  container-type: inline-size;
  width: 100%;
  min-width: 0;
}

.cell-full {
  display: none;
  min-width: 0;
}

.cell-compact {
  display: block;
  min-width: 0;
}

/* Thresholds - add more as needed */
@container (min-width: 100px) {
  .cell-full-100 {
    display: block;
  }

  .cell-compact-100 {
    display: none;
  }
}

@container (min-width: 120px) {
  .cell-full-120 {
    display: block;
  }

  .cell-compact-120 {
    display: none;
  }
}

@container (min-width: 140px) {
  .cell-full-140 {
    display: block;
  }

  .cell-compact-140 {
    display: none;
  }
}

@container (min-width: 180px) {
  .cell-full-180 {
    display: block;
  }

  .cell-compact-180 {
    display: none;
  }
}

@container (min-width: 200px) {
  .cell-full-200 {
    display: block;
  }

  .cell-compact-200 {
    display: none;
  }
}

@container (min-width: 220px) {
  .cell-full-220 {
    display: block;
  }

  .cell-compact-220 {
    display: none;
  }
}


@container (min-width: 240px) {
  .cell-full-240 {
    display: block;
  }

  .cell-compact-240 {
    display: none;
  }
}


@container (min-width: 260px) {
  .cell-full-260 {
    display: block;
  }

  .cell-compact-260 {
    display: none;
  }
}

@container (min-width: 280px) {
  .cell-full-280 {
    display: block;
  }

  .cell-compact-280 {
    display: none;
  }
}

@container (min-width: 300px) {
  .cell-full-300 {
    display: block;
  }

  .cell-compact-300 {
    display: none;
  }
}

@keyframes dialog-fade-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }

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

@keyframes dialog-fade-out {
  from {
    opacity: 1;
    transform: scale(1);
  }

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

@keyframes backdrop-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes backdrop-fade-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.dialog-animate-in {
  animation: dialog-fade-in 0.2s ease-out forwards;
}

.dialog-animate-out {
  animation: dialog-fade-out 0.15s ease-in forwards;
}

.backdrop-animate-in {
  animation: backdrop-fade-in 0.2s ease-out forwards;
}

.backdrop-animate-out {
  animation: backdrop-fade-out 0.15s ease-in forwards;
}

@keyframes dialog-fade-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }

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

@keyframes dialog-fade-out {
  from {
    opacity: 1;
    transform: scale(1);
  }

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

@keyframes backdrop-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes backdrop-fade-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.dialog-animate-in {
  animation: dialog-fade-in 0.2s ease-out forwards;
}

.dialog-animate-out {
  animation: dialog-fade-out 0.15s ease-in forwards;
}

.backdrop-animate-in {
  animation: backdrop-fade-in 0.2s ease-out forwards;
}

.backdrop-animate-out {
  animation: backdrop-fade-out 0.15s ease-in forwards;
}

@keyframes toast-slide-in {
  from {
    opacity: 0;
    transform: translateX(100%);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes toast-shrink {
  from {
    width: 100%;
  }

  to {
    width: 0%;
  }
}

.toast-animate-slide-in {
  animation: toast-slide-in 0.3s ease-out;
}

.toast-animate-shrink {
  animation: toast-shrink 5s linear forwards;
}


.tour-overlay {
  background-color: rgb(0 0 0 / 0.4);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  transition: clip-path 0.3s ease-out;
}

:global(.dark) .tour-overlay {
  background-color: rgb(0 0 0 / 0.6);
}


.tour-arrow {
  --tour-arrow-color: var(--arrow-color);
}

:global(.dark) .tour-arrow {
  --tour-arrow-color: var(--arrow-color-dark);
}


.tour-svg-arrow {
  stroke: var(--svg-arrow-color);
  transition: stroke 0.2s ease;
}

.tour-svg-arrow-fill {
  fill: var(--svg-arrow-color);
  transition: fill 0.2s ease;
}

:global(.dark) .tour-svg-arrow {
  stroke: var(--svg-arrow-color-dark);
}

:global(.dark) .tour-svg-arrow-fill {
  fill: var(--svg-arrow-color-dark);
}

/* Arrow label box - bordered container */
.tour-arrow-label-box {
  text-align: center;
  padding: 1rem 1.25rem;
  border: 2.5px solid var(--svg-arrow-color);
  border-radius: 0.75rem;
  background: transparent;
  color: var(--svg-arrow-color);
  max-width: 300px;
  min-width: 200px;
}

:global(.dark) .tour-arrow-label-box {
  border-color: var(--svg-arrow-color-dark);
  background: transparent;
  color: var(--svg-arrow-color-dark);
}

/* Button inside arrow label */
.tour-arrow-button {
  padding: 0.375rem 0.875rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 0.5rem;
  border: 2px solid var(--svg-arrow-color);
  background: rgb(from var(--svg-arrow-color) r g b / 50%);
  color: white;
  transition: opacity 0.15s ease;
}

  .tour-arrow-button:hover {
    opacity: 0.85;
  }

:global(.dark) .tour-arrow-button {
  background: var(--svg-arrow-color-dark);
}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes tour-fade-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }

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

@keyframes tour-slide-in {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes tour-draw-arrow {
  from {
    stroke-dashoffset: 1000;
  }

  to {
    stroke-dashoffset: 0;
  }
}

.animate-fade-in {
  animation: tour-fade-in 0.2s ease-out forwards;
}

.animate-slide-in {
  animation: tour-slide-in 0.2s ease-out forwards;
}

/* Animated arrow drawing effect (optional - add class to svg path) */
.animate-draw {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: tour-draw-arrow 0.6s ease-out forwards;
}

@keyframes flex-toast-slide-in-b-2b5vgn6xwk {
  from {
    opacity: 0;
    transform: translateX(100%);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes flex-toast-shrink-b-2b5vgn6xwk {
  from {
    width: 100%;
  }

  to {
    width: 0%;
  }
}

.flex-toast-animate-slide-in[b-2b5vgn6xwk] {
  animation: flex-toast-slide-in-b-2b5vgn6xwk 0.3s ease-out;
}

.flex-toast-animate-shrink[b-2b5vgn6xwk] {
  animation: flex-toast-shrink-b-2b5vgn6xwk 5s linear forwards;
}

/* _content/LPI.Features.FlexForm.Client.Ux.Web/Components/Common/FlexDescription.razor.rz.scp.css */
.flex-description[b-kewkgoqsqh] {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: rgb(156, 163, 175);
  margin-top: 0.25rem;
  display: block;
}
/* _content/LPI.Features.FlexForm.Client.Ux.Web/Components/Common/FlexFieldLabel.razor.rz.scp.css */
.flex-field-label[b-xaid50imbk] {
  display: flex;
  width: 100%;
  font-size: 0.875rem;
  line-height: 1.25rem;
  margin-bottom: 0.25rem;
  min-height: 20px;
  color: var(--flex-label-text);
}

/* Disabled state */
.flex-field-label:disabled[b-xaid50imbk], .flex-field-label[disabled][b-xaid50imbk] {
  opacity: 1;
  color: var(--flex-color-slate-300);
}
/* _content/LPI.Features.FlexForm.Client.Ux.Web/Components/Common/FlexLabel.razor.rz.scp.css */
flex-label[b-unvy6psfi8] {
}
/* _content/LPI.Features.FlexForm.Client.Ux.Web/Components/Common/FlexLoadingSpinner.razor.rz.scp.css */
.loading-spinner-container[b-em8hl8ssij] {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.loading-spinner-spinner[b-em8hl8ssij] {
  width: 56px;
  height: 56px;
  display: grid;
  border: 4px solid #0000;
  border-radius: 50%;
  border-right-color: #299fff;
  animation: loading-spinner-tri-b-em8hl8ssij 1s infinite linear;
}

  .loading-spinner-spinner[b-em8hl8ssij]::before,
  .loading-spinner-spinner[b-em8hl8ssij]::after {
    content: "";
    grid-area: 1/1;
    margin: 2px;
    border: inherit;
    border-radius: 50%;
    animation: loading-spinner-tri-b-em8hl8ssij 2s infinite;
  }

  .loading-spinner-spinner[b-em8hl8ssij]::after {
    margin: 8px;
    animation-duration: 3s;
  }

@keyframes loading-spinner-tri-b-em8hl8ssij {
  100% {
    transform: rotate(1turn);
  }
}

.loading-spinner-loader[b-em8hl8ssij] {
  color: #4a4a4a;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: 25px;
  box-sizing: content-box;
  height: 40px;
  padding: 10px 10px;
  display: flex;
  border-radius: 8px;
}

.loading-spinner-words[b-em8hl8ssij] {
  overflow: hidden;
}

.loading-spinner-word[b-em8hl8ssij] {
  display: block;
  height: 100%;
  padding-left: 6px;
  color: #299fff;
  animation: loading-spinner-cycle-words-b-em8hl8ssij 5s infinite;
}

.loading-spinner-word.single-word[b-em8hl8ssij] {
  animation: none;
}

@keyframes loading-spinner-cycle-words-b-em8hl8ssij {
  10% {
    transform: translateY(-105%);
  }

  25% {
    transform: translateY(-100%);
  }

  35% {
    transform: translateY(-205%);
  }

  50% {
    transform: translateY(-200%);
  }

  60% {
    transform: translateY(-305%);
  }

  75% {
    transform: translateY(-300%);
  }

  85% {
    transform: translateY(-405%);
  }

  100% {
    transform: translateY(-400%);
  }
}
/* _content/LPI.Features.FlexForm.Client.Ux.Web/Components/Common/FlexValidationMessage.razor.rz.scp.css */
.flex-validation-message[b-8xumci4gyc] {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #f87171;
  margin-top: 0.25rem;
  display: block;
}

/* _content/LPI.Features.FlexForm.Client.Ux.Web/Components/Common/InlineSvg.razor.rz.scp.css */
.flex-inline-svg[b-4u3tlarepe] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0; /* Prevents extra space below SVG */
}
/* _content/LPI.Features.FlexForm.Client.Ux.Web/Components/Controls/Input/UoMControl/UoMNumpadPopup.razor.rz.scp.css */
/* ========================================
   Overlay
   ======================================== */
.flex-uom-numpad-overlay[b-h9m2joyb1o] {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: var(--flex-z-modal);
}

/* ========================================
   Container
   ======================================== */
.flex-uom-numpad-container[b-h9m2joyb1o] {
  background-color: var(--flex-bg-raised-panel);
  border: 1px solid var(--flex-border-color);
  border-radius: var(--flex-radius-lg);
  box-shadow: var(--flex-shadow-lg);
  padding: var(--flex-spacing-2);
  min-width: 380px;
  max-width: calc(100vw - 2rem);
}

/* ========================================
   Display area
   ======================================== */
.flex-uom-numpad-display[b-h9m2joyb1o] {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: var(--flex-spacing-2);
  padding: var(--flex-spacing-2) var(--flex-spacing-4);
  margin-bottom: var(--flex-spacing-2);
  font-size: 1.25rem;
  color: var(--flex-text-header);
  border-bottom: 1px solid var(--flex-border-color);
}

.flex-uom-numpad-unit[b-h9m2joyb1o] {
  color: var(--flex-color-gray-500);
  font-size: var(--flex-font-size-base);
}

:global(.dark) .flex-uom-numpad-unit[b-h9m2joyb1o] {
  color: #9ca3af;
}

/* ========================================
   Body: fraction column + keypad side by side
   ======================================== */
.flex-uom-numpad-body[b-h9m2joyb1o] {
  display: flex;
  gap: var(--flex-spacing-2);
}

/* ========================================
   Fraction column
   ======================================== */
.flex-uom-numpad-fractions[b-h9m2joyb1o] {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* ========================================
   Keypad grid: 4 cols x 5 rows
   Cols 1-3: digits   Col 4: actions
   ======================================== */
.flex-uom-numpad-keypad[b-h9m2joyb1o] {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(5, 1fr);
  gap: 2px;
}

/* ========================================
   Base button style
   ======================================== */
.flex-uom-btn[b-h9m2joyb1o] {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--flex-spacing-1) var(--flex-spacing-2);
  border: 1px solid var(--flex-border-color);
  border-radius: var(--flex-radius-default);
  background-color: var(--flex-input-background);
  color: var(--flex-input-text);
  cursor: pointer;
  font-size: var(--flex-font-size-sm);
  min-height: 2.5rem;
  transition: background-color var(--flex-transition-fast);
  user-select: none;
}

.flex-uom-btn:hover[b-h9m2joyb1o] {
  background-color: #e5e7eb;
}

.flex-uom-btn:active[b-h9m2joyb1o] {
  background-color: #d1d5db;
}

:global(.dark) .flex-uom-btn:hover[b-h9m2joyb1o] {
  background-color: #3a4150;
}

:global(.dark) .flex-uom-btn:active[b-h9m2joyb1o] {
  background-color: #454c5c;
}

/* ========================================
   +/- mode toggle
   ======================================== */
.flex-uom-btn-mode[b-h9m2joyb1o] {
  font-weight: 600;
  font-size: var(--flex-font-size-lg);
  background-color: var(--flex-color-primary);
  color: var(--flex-color-white);
  border-color: var(--flex-color-primary);
}

.flex-uom-btn-mode:hover[b-h9m2joyb1o] {
  background-color: var(--flex-color-primary-hover);
}

:global(.dark) .flex-uom-btn-mode:hover[b-h9m2joyb1o] {
  background-color: var(--flex-color-primary-hover);
}

/* ========================================
   Keypad button placement
   ======================================== */

/* Zero spans cols 1-2 */
.flex-uom-btn-zero[b-h9m2joyb1o] {
  grid-column: 1 / 3;
}

/* Space spans cols 1-2 */
.flex-uom-btn-space[b-h9m2joyb1o] {
  grid-column: 1 / 3;
}

/* OK spans rows 3-5 in col 4 */
.flex-uom-btn-ok[b-h9m2joyb1o] {
  grid-column: 4;
  grid-row: 3 / 6;
  background-color: var(--flex-color-primary);
  color: var(--flex-color-white);
  border-color: var(--flex-color-primary);
  font-weight: 600;
}

.flex-uom-btn-ok:hover[b-h9m2joyb1o] {
  background-color: var(--flex-color-primary-hover);
}

:global(.dark) .flex-uom-btn-ok:hover[b-h9m2joyb1o] {
  background-color: var(--flex-color-primary-hover);
}
/* _content/LPI.Features.FlexForm.Client.Ux.Web/Components/Controls/Input/UoMFlexControlComponent.razor.rz.scp.css */
.flex-uom-unit-selector[b-55m3vk0jum] {
  border: 1px solid var(--flex-border-color, #e2e8f0);
  border-radius: var(--flex-radius-default, 4px);
  padding: 2px 4px;
  font-size: inherit;
  background: var(--flex-input-background, white);
  color: var(--flex-input-text, inherit);
  cursor: pointer;
  min-width: 60px;
}

.flex-uom-unit-selector:focus[b-55m3vk0jum] {
  outline: 2px solid var(--flex-color-primary);
  outline-offset: -1px;
}

:global(.dark) .flex-uom-unit-selector[b-55m3vk0jum] {
  border-color: var(--flex-border-color);
  background: var(--flex-input-background);
  color: var(--flex-input-text);
}
/* _content/LPI.Features.FlexForm.Client.Ux.Web/Components/Controls/Layout/ArrayFlexControlComponent.razor.rz.scp.css */
.flex-array-header[b-k35whnsqol] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.flex-array-add-btn[b-k35whnsqol] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--flex-border-color);
  border-radius: var(--flex-radius-default, 4px);
  background: var(--flex-input-background);
  color: var(--flex-color-primary);
  cursor: pointer;
  font-size: 14px;
  transition: background 0.15s, color 0.15s;
}

.flex-array-add-btn:hover[b-k35whnsqol] {
  background: var(--flex-color-primary);
  color: white;
}

.flex-array-grid[b-k35whnsqol] {
  display: grid;
  gap: 1px;
  border: 1px solid var(--flex-border-color);
  border-radius: var(--flex-radius-default, 4px);
  overflow: hidden;
  background: var(--flex-border-color);
}

.flex-array-column-header[b-k35whnsqol] {
  background: var(--flex-header-background);
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--flex-label-text);
}

.flex-array-actions-header[b-k35whnsqol] {
  width: 48px;
  min-width: 48px;
  max-width: 48px;
}

.flex-array-cell[b-k35whnsqol] {
  background: var(--flex-input-background);
  padding: 6px 12px;
  display: flex;
  align-items: center;
  min-height: 40px;
}

.flex-array-actions-cell[b-k35whnsqol] {
  width: 48px;
  min-width: 48px;
  max-width: 48px;
  justify-content: center;
  padding: 6px;
}

.flex-array-delete-btn[b-k35whnsqol] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: var(--flex-radius-default, 4px);
  background: transparent;
  color: var(--flex-label-text);
  cursor: pointer;
  font-size: 12px;
  transition: background 0.15s, color 0.15s;
}

.flex-array-delete-btn:hover[b-k35whnsqol] {
  background: #fee2e2;
  color: #ef4444;
}

.flex-array-empty[b-k35whnsqol] {
  text-align: center;
  padding: 16px;
  color: var(--flex-label-text);
  font-size: 13px;
  border: 1px dashed var(--flex-border-color);
  border-radius: var(--flex-radius-default, 4px);
}

[b-k35whnsqol] .flex-array-cell > * {
  width: 100%;
}

:global(.dark) .flex-array-grid[b-k35whnsqol] {
  background: var(--flex-border-color);
}

:global(.dark) .flex-array-column-header[b-k35whnsqol] {
  background: var(--flex-header-background);
  color: var(--flex-label-text);
}

:global(.dark) .flex-array-cell[b-k35whnsqol] {
  background: var(--flex-input-background);
}

:global(.dark) .flex-array-add-btn[b-k35whnsqol] {
  border-color: var(--flex-border-color);
  background: var(--flex-input-background);
  color: var(--flex-color-primary);
}

:global(.dark) .flex-array-delete-btn:hover[b-k35whnsqol] {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
}

:global(.dark) .flex-array-empty[b-k35whnsqol] {
  border-color: var(--flex-border-color);
  color: var(--flex-label-text);
}
/* _content/LPI.Features.FlexForm.Client.Ux.Web/Components/Editor/Components/ConditionPanel/ConditionPanel.razor.rz.scp.css */
.flex-stub-panel[b-jjb98mjkgl] {
  width: 300px;
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--flex-bg-raised-panel);
  border-left: 1px solid #e5e7eb;
  padding: 20px;
  overflow-y: auto;
}

.flex-stub-panel-title[b-jjb98mjkgl] {
  font-size: 16px;
  margin-bottom: 15px;
  color: var(--flex-text-header);
}

.flex-stub-panel-content[b-jjb98mjkgl] {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.flex-stub-panel-empty[b-jjb98mjkgl] {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #9ca3af;
  padding: 40px 20px;
}

.flex-stub-panel-placeholder[b-jjb98mjkgl] {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40px 20px;
  gap: 8px;
}

.flex-stub-panel-placeholder-icon[b-jjb98mjkgl] {
  width: 40px;
  height: 40px;
  color: #cbd5e1;
  margin-bottom: 8px;
}

.flex-stub-panel-placeholder-title[b-jjb98mjkgl] {
  font-size: 14px;
  font-weight: 600;
  color: #94a3b8;
  margin: 0;
}

.flex-stub-panel-placeholder-desc[b-jjb98mjkgl] {
  font-size: 13px;
  color: #9ca3af;
  line-height: 1.5;
  margin: 0;
}
/* _content/LPI.Features.FlexForm.Client.Ux.Web/Components/Editor/Components/ContextPanel/ContextBindingPanel.razor.rz.scp.css */
.flex-stub-panel[b-fsxw1kia73] {
  width: 300px;
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--flex-bg-raised-panel);
  border-left: 1px solid #e5e7eb;
  padding: 20px;
  overflow-y: auto;
}

.flex-stub-panel-title[b-fsxw1kia73] {
  font-size: 16px;
  margin-bottom: 15px;
  color: var(--flex-text-header);
}

.flex-stub-panel-content[b-fsxw1kia73] {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.flex-stub-panel-empty[b-fsxw1kia73] {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #9ca3af;
  padding: 40px 20px;
}

.flex-stub-panel-placeholder[b-fsxw1kia73] {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40px 20px;
  gap: 8px;
}

.flex-stub-panel-placeholder-icon[b-fsxw1kia73] {
  width: 40px;
  height: 40px;
  color: #cbd5e1;
  margin-bottom: 8px;
}

.flex-stub-panel-placeholder-title[b-fsxw1kia73] {
  font-size: 14px;
  font-weight: 600;
  color: #94a3b8;
  margin: 0;
}

.flex-stub-panel-placeholder-desc[b-fsxw1kia73] {
  font-size: 13px;
  color: #9ca3af;
  line-height: 1.5;
  margin: 0;
}
/* _content/LPI.Features.FlexForm.Client.Ux.Web/Components/Editor/Components/EditorFlexControls/ArrayFlexControlEditorComponent.razor.rz.scp.css */
array-flex-editor-control[b-d1rd76nrw2] {
  display: block;
  padding: 0.5rem;
}

.flex-array-editor-header[b-d1rd76nrw2] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.flex-array-editor-add-btn[b-d1rd76nrw2] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  border: 1px solid rgb(156, 163, 175);
  background: white;
  cursor: pointer;
  font-size: 0.75rem;
  color: rgb(75, 85, 99);
  transition: background-color 0.15s;
}

.flex-array-editor-add-btn:hover[b-d1rd76nrw2] {
  background: rgb(243, 244, 246);
}

.flex-array-editor-grid[b-d1rd76nrw2] {
  display: grid;
  gap: 0;
  border: 1px solid rgb(209, 213, 219);
  border-radius: 0.375rem;
  overflow: hidden;
}

.flex-array-editor-column-header[b-d1rd76nrw2] {
  padding: 0.375rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: rgb(55, 65, 81);
  background: rgb(243, 244, 246);
  border-bottom: 1px solid rgb(209, 213, 219);
  border-right: 1px solid rgb(229, 231, 235);
}

.flex-array-editor-column-header:last-child[b-d1rd76nrw2] {
  border-right: none;
}

.flex-array-editor-actions-header[b-d1rd76nrw2] {
  width: 2.5rem;
}

.flex-array-editor-cell[b-d1rd76nrw2] {
  padding: 0.25rem;
  border-bottom: 1px solid rgb(229, 231, 235);
  border-right: 1px solid rgb(229, 231, 235);
  min-height: 3rem;
  display: flex;
  align-items: center;
}

.flex-array-editor-cell:last-child[b-d1rd76nrw2] {
  border-right: none;
}

.flex-array-editor-actions-cell[b-d1rd76nrw2] {
  justify-content: center;
  width: 2.5rem;
}

.flex-array-editor-delete-btn[b-d1rd76nrw2] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border: none;
  background: transparent;
  cursor: pointer;
  color: rgb(156, 163, 175);
  font-size: 0.7rem;
  border-radius: 0.25rem;
  transition: color 0.15s, background-color 0.15s;
}

.flex-array-editor-delete-btn:hover[b-d1rd76nrw2] {
  color: rgb(239, 68, 68);
  background: rgb(254, 226, 226);
}
/* _content/LPI.Features.FlexForm.Client.Ux.Web/Components/Editor/Components/EditorFlexControls/EditorFormElement.razor.rz.scp.css */
/* Drop Indicator Wrapper */
.flex-form-element-wrapper[b-7jiu5fgz14] {
  position: relative;
}
/* Drop Indicators - Bright Lines */
.flex-form-element-wrapper.flex-drag-over-top[b-7jiu5fgz14]::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 0;
  right: 0;
  height: 4px;
  background: #3b82f6;
  border-radius: 2px;
  z-index: 100;
  box-shadow: 0 0 8px rgba(59, 130, 246, 0.6);
  animation: flex-dropIndicatorPulse-b-7jiu5fgz14 1s ease-in-out infinite;
}

.flex-form-element-wrapper.flex-drag-over-bottom[b-7jiu5fgz14]::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 4px;
  background: #3b82f6;
  border-radius: 2px;
  z-index: 100;
  box-shadow: 0 0 8px rgba(59, 130, 246, 0.6);
  animation: flex-dropIndicatorPulse-b-7jiu5fgz14 1s ease-in-out infinite;
}

.flex-form-element-wrapper.flex-drag-over-left[b-7jiu5fgz14]::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -2px;
  width: 4px;
  background: #10b981;
  border-radius: 2px;
  z-index: 100;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
  animation: flex-dropIndicatorPulse-b-7jiu5fgz14 1s ease-in-out infinite;
}

.flex-form-element-wrapper.flex-drag-over-right[b-7jiu5fgz14]::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: -2px;
  width: 4px;
  background: #10b981;
  border-radius: 2px;
  z-index: 100;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
  animation: flex-dropIndicatorPulse-b-7jiu5fgz14 1s ease-in-out infinite;
}

@keyframes flex-dropIndicatorPulse-b-7jiu5fgz14 {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: 0.7;
  }
}

.flex-form-element[b-7jiu5fgz14] {
  padding: 15px;
  background: var(--flex-bg-form-element);
  border-radius: 6px;
  cursor: move;
  position: relative;
  flex: 1;
}

.flex-form-element.flex-in-row[b-7jiu5fgz14] {
  margin-bottom: 0;
}

.flex-form-element.flex-preview-mode[b-7jiu5fgz14] {
  background: white;
  border: none;
  cursor: default;
  padding: 12px 0;
}

.flex-form-element .flex-element-controls[b-7jiu5fgz14] {
  visibility: hidden;
}

.flex-form-element:hover:not(:has(.flex-form-element:hover)):not(.flex-preview-mode) > .flex-element-controls[b-7jiu5fgz14] {
  visibility: visible;
}

.flex-form-element:not(.flex-preview-mode)[b-7jiu5fgz14] {
  border: 1px solid var(--flex-border-flex-widget);
}

.flex-form-element:hover:not(:has(.flex-form-element:hover)):not(.flex-preview-mode):not(.flex-selected)[b-7jiu5fgz14] {
  border-color: transparent;
  outline: 3px solid #8c8c8c;
}

.flex-form-element.flex-selected[b-7jiu5fgz14] {
  border-color: transparent;
  outline: 3px solid #62e3a4;
}

.flex-form-element.flex-selected > .flex-element-controls[b-7jiu5fgz14] {
  visibility: visible;
}

.flex-form-element-outer.flex-dragging[b-7jiu5fgz14] {
  opacity: 0.5;
}
/* Dragging Placeholder */
.flex-form-element.flex-dragging-placeholder[b-7jiu5fgz14] {
  background: #f3f4f6;
  border: 2px dashed #9ca3af;
  opacity: 0.5;
  min-height: 60px;
}
/* _content/LPI.Features.FlexForm.Client.Ux.Web/Components/Editor/Components/EditorFlexControls/TableLayoutFlexControlEditorComponent.razor.rz.scp.css */
.flex-editor-drop-zone-table[b-qjl0zkh102] {
  min-height: 6rem;
  width: 100%;
  border: 2px dashed rgb(107, 114, 128);
  border-radius: 0.375rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-editor-drop-zone-table label[b-qjl0zkh102] {
  color: var(--flex-input-text);
}

.flex-editor-drop-zone-table.flex-drag-over-table-cell[b-qjl0zkh102] {
  background: #e4f2ff;
}
/* _content/LPI.Features.FlexForm.Client.Ux.Web/Components/Editor/Components/EditorPanelSwitcher.razor.rz.scp.css */
.flex-panel-sidebar[b-ghzz6zbgfk] {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 4px;
  background: var(--flex-bg-recessed, #f1f5f9);
  border-left: 1px solid #e5e7eb;
  flex-shrink: 0;
  align-self: stretch;
}

.flex-panel-sidebar-btn[b-ghzz6zbgfk] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 6px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--flex-text-muted, #94a3b8);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.flex-panel-sidebar-btn svg[b-ghzz6zbgfk] {
  width: 20px;
  height: 20px;
}

.flex-panel-sidebar-btn:hover[b-ghzz6zbgfk] {
  background: var(--flex-bg-hover, #e2e8f0);
  color: var(--flex-text-header, #1e293b);
}

.flex-panel-sidebar-btn--active[b-ghzz6zbgfk] {
  background: var(--flex-bg-raised-panel, #ffffff);
  color: #2563eb;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.flex-panel-sidebar-btn--active:hover[b-ghzz6zbgfk] {
  color: #2563eb;
}
/* _content/LPI.Features.FlexForm.Client.Ux.Web/Components/Editor/Components/EditorToolbar.razor.rz.scp.css */
.flex-editor-toolbar[b-sb35kq7eco] {
  height: 40px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  padding: 0 20px;
  flex-shrink: 0;
  gap: 8px;
}

.flex-toolbar-group[b-sb35kq7eco] {
  display: flex;
  align-items: center;
  gap: 4px;
}

.flex-toolbar-btn[b-sb35kq7eco] {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  background: white;
  color: #334155;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.flex-toolbar-btn:hover:not(:disabled)[b-sb35kq7eco] {
  background: #e2e8f0;
  border-color: #cbd5e1;
}

.flex-toolbar-btn:disabled[b-sb35kq7eco] {
  opacity: 0.4;
  cursor: default;
}

.flex-toolbar-action-text[b-sb35kq7eco] {
  font-size: 12px;
  color: #64748b;
  margin-left: 8px;
  opacity: 1;
  transition: opacity 0.5s ease;
}

.flex-toolbar-action-text.fading[b-sb35kq7eco] {
  opacity: 0;
}
/* _content/LPI.Features.FlexForm.Client.Ux.Web/Components/Editor/Components/JsonPanel/JsonDrawerPanel.razor.rz.scp.css */
/* ============================================
   JSON Drawer Panel Styles
   ============================================ */

.flex-json-drawer[b-c5y34fdv8t] {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #1e1e2e;
  border-top: 1px solid #313244;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
  z-index: 100;
  display: flex;
  flex-direction: column;
  font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
  transition: height 0.05s ease-out;
}

.flex-json-drawer.flex-collapsed[b-c5y34fdv8t] {
  height: auto !important;
}

/* Drag Handle */
.flex-json-drawer-handle[b-c5y34fdv8t] {
  height: 6px;
  background: transparent;
  cursor: ns-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.flex-json-drawer.flex-collapsed .flex-json-drawer-handle[b-c5y34fdv8t] {
  display: none;
}

.flex-handle-grip[b-c5y34fdv8t] {
  width: 40px;
  height: 4px;
  background: #45475a;
  border-radius: 2px;
  transition: background 0.2s;
}

.flex-json-drawer-handle:hover .flex-handle-grip[b-c5y34fdv8t] {
  background: #585b70;
}

/* Header */
.flex-json-drawer-header[b-c5y34fdv8t] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  height: 36px;
  background: #181825;
  border-bottom: 1px solid #313244;
  flex-shrink: 0;
}

.flex-json-drawer-tab[b-c5y34fdv8t] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: transparent;
  border: none;
  color: #cdd6f4;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.2s;
}

.flex-json-drawer-tab:hover[b-c5y34fdv8t] {
  background: #313244;
}

.flex-tab-icon[b-c5y34fdv8t] {
  font-size: 10px;
  transition: transform 0.2s ease;
  color: #6c7086;
}

.flex-tab-icon.flex-expanded[b-c5y34fdv8t] {
  transform: rotate(180deg);
}

.flex-tab-label[b-c5y34fdv8t] {
  letter-spacing: 0.5px;
}

/* Action Buttons */
.flex-json-drawer-actions[b-c5y34fdv8t] {
  display: flex;
  gap: 4px;
}

.flex-drawer-action-btn[b-c5y34fdv8t] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: #6c7086;
  cursor: pointer;
  transition: all 0.2s;
}

.flex-drawer-action-btn:hover[b-c5y34fdv8t] {
  background: #313244;
  color: #cdd6f4;
}

/* Content Area */
.flex-json-drawer-content[b-c5y34fdv8t] {
  flex: 1;
  overflow: auto;
  padding: 12px 16px;
  min-height: 0;
}

/* Resize Overlay */
.flex-resize-overlay[b-c5y34fdv8t] {
  position: fixed;
  inset: 0;
  z-index: 9999;
  cursor: ns-resize;
}

/* ============================================
   JSON Tree View Styles (::deep for child component)
   ============================================ */

[b-c5y34fdv8t] .flex-json-tree {
  font-size: 13px;
  line-height: 1.6;
  color: #cdd6f4;
}

[b-c5y34fdv8t] .flex-json-node {
  padding-left: calc(var(--depth, 0) * 6px);
}

[b-c5y34fdv8t] .flex-json-line {
  display: flex;
  align-items: center;
  min-height: 22px;
  padding: 1px 0;
  border-radius: 3px;
  transition: background 0.15s;
}

  [b-c5y34fdv8t] .flex-json-line:hover {
    background: rgba(69, 71, 90, 0.3);
  }

/* Toggle Button */
[b-c5y34fdv8t] .flex-json-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-right: 4px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}

[b-c5y34fdv8t] .flex-toggle-icon {
  font-size: 8px;
  color: #6c7086;
  transition: transform 0.15s ease;
}

[b-c5y34fdv8t] .flex-json-toggle.flex-expanded .flex-toggle-icon {
  transform: rotate(90deg);
}

[b-c5y34fdv8t] .flex-json-toggle:hover .flex-toggle-icon {
  color: #cdd6f4;
}

[b-c5y34fdv8t] .flex-json-toggle-spacer {
  width: 20px;
  flex-shrink: 0;
}

/* Syntax Highlighting */
[b-c5y34fdv8t] .flex-json-key {
  color: #89b4fa;
}

[b-c5y34fdv8t] .flex-json-string {
  color: #a6e3a1;
}

[b-c5y34fdv8t] .flex-json-number {
  color: #fab387;
}

[b-c5y34fdv8t] .flex-json-boolean {
  color: #cba6f7;
}

[b-c5y34fdv8t] .flex-json-null {
  color: #f38ba8;
  font-style: italic;
}

[b-c5y34fdv8t] .flex-json-punctuation {
  color: #6c7086;
}

[b-c5y34fdv8t] .flex-json-bracket {
  color: #f9e2af;
}

[b-c5y34fdv8t] .flex-json-comma {
  color: #6c7086;
}

[b-c5y34fdv8t] .flex-json-collapsed-indicator {
  color: #6c7086;
  font-style: italic;
  margin: 0 4px;
}

/* Children Container */
[b-c5y34fdv8t] .flex-json-children {
  display: flex;
  flex-direction: column;
}

/* Highlighting */
[b-c5y34fdv8t] .flex-json-node.flex-highlighted > .flex-json-line {
  background: rgba(250, 179, 135, 0.15);
  box-shadow: inset 3px 0 0 #fab387;
}

[b-c5y34fdv8t] .flex-json-node.flex-contains-highlighted > .flex-json-line {
  background: rgba(137, 180, 250, 0.08);
}

/* Error State */
[b-c5y34fdv8t] .flex-json-error {
  color: #f38ba8;
  padding: 12px;
  background: rgba(243, 139, 168, 0.1);
  border-radius: 6px;
  border: 1px solid rgba(243, 139, 168, 0.3);
}

/* Scrollbar Styling */
.flex-json-drawer-content[b-c5y34fdv8t]::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.flex-json-drawer-content[b-c5y34fdv8t]::-webkit-scrollbar-track {
  background: #181825;
}

.flex-json-drawer-content[b-c5y34fdv8t]::-webkit-scrollbar-thumb {
  background: #45475a;
  border-radius: 4px;
}

  .flex-json-drawer-content[b-c5y34fdv8t]::-webkit-scrollbar-thumb:hover {
    background: #585b70;
  }

/* Animation for smooth expand/collapse */
@keyframes flex-slideUp-b-c5y34fdv8t {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.flex-json-drawer.flex-expanded .flex-json-drawer-content[b-c5y34fdv8t] {
  animation: flex-slideUp-b-c5y34fdv8t 0.2s ease-out;
}
/* _content/LPI.Features.FlexForm.Client.Ux.Web/Components/Editor/Components/PropertiesPanel/AlignmentEditor.razor.rz.scp.css */
/* Text Alignment Editor */
.flex-alignment-editor[b-rh1udhr5z1] {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.flex-alignment-row[b-rh1udhr5z1] {
  display: flex;
  align-items: center;
  gap: 8px;
}

.flex-alignment-label[b-rh1udhr5z1] {
  font-size: 12px;
  color: var(--flex-text-header);
  min-width: 60px;
}

.flex-alignment-button-group[b-rh1udhr5z1] {
  display: flex;
  gap: 2px;
  background-color: #e5e7eb;
  border-radius: 6px;
  padding: 2px;
}

.flex-alignment-button[b-rh1udhr5z1] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 28px;
  padding: 4px;
  border: none;
  background-color: transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.flex-alignment-button:hover[b-rh1udhr5z1] {
  background-color: #d1d5db;
}

.flex-alignment-button:focus[b-rh1udhr5z1] {
  outline: none;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
}

.flex-alignment-button.active[b-rh1udhr5z1] {
  background-color: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.flex-alignment-button.active:hover[b-rh1udhr5z1] {
  background-color: #ffffff;
}

.flex-alignment-icon[b-rh1udhr5z1] {
  width: 18px;
  height: 18px;
  fill: #374151;
}

.flex-alignment-button.active .flex-alignment-icon[b-rh1udhr5z1] {
  fill: #1d4ed8;
}
/* _content/LPI.Features.FlexForm.Client.Ux.Web/Components/Editor/Components/PropertiesPanel/EditablePropertyInput.razor.rz.scp.css */
.flex-property-group[b-dp47qv5nb7] {
  display: flex;
  flex-direction: column;
  margin-bottom: 6px;
}

.flex-property-group input[type="text"][b-dp47qv5nb7],
.flex-property-group input[type="number"][b-dp47qv5nb7],
.flex-property-group textarea[b-dp47qv5nb7],
.flex-property-group select[b-dp47qv5nb7] {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 14px;
  font-family: inherit;
  transition: all 0.2s;
}

.flex-property-group input[type="text"]:focus[b-dp47qv5nb7],
.flex-property-group input[type="number"]:focus[b-dp47qv5nb7],
.flex-property-group textarea:focus[b-dp47qv5nb7],
.flex-property-group select:focus[b-dp47qv5nb7] {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.flex-property-group input[type="text"]:disabled[b-dp47qv5nb7] {
  background: #f3f4f6;
  color: #9ca3af;
  cursor: not-allowed;
}

.flex-property-group input[type="checkbox"][b-dp47qv5nb7] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.flex-property-group textarea[b-dp47qv5nb7] {
  resize: vertical;
  min-height: 60px;
}

/* Text Alignment Editor */
.flex-alignment-editor[b-dp47qv5nb7] {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.flex-alignment-row[b-dp47qv5nb7] {
  display: flex;
  align-items: center;
  gap: 8px;
}

.flex-alignment-label[b-dp47qv5nb7] {
  font-size: 12px;
  color: #666;
  min-width: 60px;
}

.flex-alignment-button-group[b-dp47qv5nb7] {
  display: flex;
  gap: 2px;
  background-color: #e5e7eb;
  border-radius: 6px;
  padding: 2px;
}

.flex-alignment-button[b-dp47qv5nb7] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 28px;
  padding: 4px;
  border: none;
  background-color: transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.flex-alignment-button:hover[b-dp47qv5nb7] {
  background-color: #d1d5db;
}

.flex-alignment-button:focus[b-dp47qv5nb7] {
  outline: none;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
}

.flex-alignment-button.active[b-dp47qv5nb7] {
  background-color: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.flex-alignment-button.active:hover[b-dp47qv5nb7] {
  background-color: #ffffff;
}

.flex-alignment-icon[b-dp47qv5nb7] {
  width: 18px;
  height: 18px;
  fill: #374151;
}

.flex-alignment-button.active .flex-alignment-icon[b-dp47qv5nb7] {
  fill: #1d4ed8;
}

.flex-editable-property-label[b-dp47qv5nb7] {
  font-size: 14px;
  font-weight: 400;
  color: var(--flex-text-header);
}

.flex-editable-property-description[b-dp47qv5nb7] {
  color: var(--flex-text-header);
}


.flex-property-input-field[b-dp47qv5nb7] {
  flex-grow: 1;
  width: 100%;
  min-width: 0;
  padding: var(--flex-spacing-2);
  border: 1px solid var(--flex-color-gray-600);
  border-radius: var(--flex-radius-default);
  box-shadow: var(--flex-shadow-sm);
  line-height: var(--flex-line-height-tight);
  color: var(--flex-input-text);
  background-color: var(--flex-input-background);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  transition: border-color var(--flex-transition-fast), box-shadow var(--flex-transition-fast);
}
/* _content/LPI.Features.FlexForm.Client.Ux.Web/Components/Editor/Components/PropertiesPanel/EnumChoiceListCsvEditor.razor.rz.scp.css */
.flex-modal-overlay[b-hv4c9w067v] {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 1rem;
}

.flex-modal-container[b-hv4c9w067v] {
  background-color: #ffffff;
  border-radius: 0.5rem;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  max-width: 56rem;
  width: 100%;
  max-height: 90vh;
  overflow: hidden;
}

.dark .flex-modal-container[b-hv4c9w067v] {
  background-color: #1f2937;
}

.flex-modal-header[b-hv4c9w067v] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem;
  border-bottom: 1px solid #e5e7eb;
}

.dark .flex-modal-header[b-hv4c9w067v] {
  border-bottom-color: #374151;
}

.flex-modal-title[b-hv4c9w067v] {
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 600;
  color: #111827;
}

.dark .flex-modal-title[b-hv4c9w067v] {
  color: #f3f4f6;
}

.flex-modal-close[b-hv4c9w067v] {
  position: relative;
  color: #9ca3af;
  transition: color 150ms ease-in-out;
}

.flex-modal-close:hover[b-hv4c9w067v] {
  color: #4b5563;
}

.dark .flex-modal-close:hover[b-hv4c9w067v] {
  color: #d1d5db;
}

.flex-modal-body[b-hv4c9w067v] {
  padding: 1.5rem;
  overflow-y: auto;
  max-height: calc(90vh - 180px);
}

.flex-modal-footer[b-hv4c9w067v] {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1.5rem;
  border-top: 1px solid #e5e7eb;
}

.dark .flex-modal-footer[b-hv4c9w067v] {
  border-top-color: #374151;
}

.flex-modal-form-preview[b-hv4c9w067v] {
  background-color: #f9fafb;
  border-radius: 0.5rem;
  padding: 1rem;
  border: 1px solid #e5e7eb;
}

.dark .flex-modal-form-preview[b-hv4c9w067v] {
  background-color: #111827;
  border-color: #374151;
}

.flex-modal-instructions[b-hv4c9w067v] {
  margin: 0 0 12px 0;
  color: #6b7280;
  font-size: 14px;
}

.flex-choice-textarea[b-hv4c9w067v] {
  width: 100%;
  min-height: 300px;
  padding: 12px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  resize: vertical;
  box-sizing: border-box;
}

.flex-choice-textarea:focus[b-hv4c9w067v] {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.flex-choice-textarea[b-hv4c9w067v]::placeholder {
  color: #9ca3af;
}

.flex-validation-error[b-hv4c9w067v] {
  margin-top: 8px;
  padding: 8px 12px;
  background-color: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 4px;
  color: #dc2626;
  font-size: 14px;
}
/* _content/LPI.Features.FlexForm.Client.Ux.Web/Components/Editor/Components/PropertiesPanel/EnumChoiceListEditor.razor.rz.scp.css */
/* Enum Choice List Editor Styles */
.flex-enum-choice-list-editor[b-av07xh66kw] {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 0;
}

.flex-enum-choice-header[b-av07xh66kw] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px;
}

.flex-enum-header-button-group[b-av07xh66kw] {
  display: flex;
  flex-direction: row;
  gap: 3px;
}

.flex-enum-choice-title[b-av07xh66kw] {
  font-weight: 600;
  font-size: 14px;
  color: var(--flex-text-header);
}

.flex-enum-choice-header-btn[b-av07xh66kw] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  background: var(--flex-property-edit-button-color);
  cursor: pointer;
  transition: all 0.15s ease;
}

.flex-enum-choice-header-btn:hover[b-av07xh66kw] {
  background: #f3f4f6;
  border-color: #9ca3af;
}

.dark .flex-enum-choice-header-btn:hover[b-av07xh66kw] {
  background: #e5e7eb;
}

.flex-enum-choice-open-csv-edit-modal-btn[b-av07xh66kw] {
  padding: 3px;
}

.flex-enum-choice-icon[b-av07xh66kw] {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.flex-enum-choice-table-header[b-av07xh66kw] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 500;
  color: #6b7280;
  border-bottom: 1px solid #e5e7eb;
}

.flex-enum-choice-drag-col[b-av07xh66kw] {
  width: 24px;
  flex-shrink: 0;
}

.flex-enum-choice-value-col[b-av07xh66kw] {
  flex: 1;
  min-width: 0;
}

.flex-enum-choice-text-col[b-av07xh66kw] {
  flex: 1;
  min-width: 0;
}

.flex-enum-choice-actions-col[b-av07xh66kw] {
  width: 32px;
  flex-shrink: 0;
}

.flex-enum-choice-list[b-av07xh66kw] {
  display: flex;
  flex-direction: column;
}

.flex-enum-choice-row[b-av07xh66kw] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 4px;
  transition: background-color 0.15s ease;
}

.flex-enum-choice-row:hover[b-av07xh66kw] {
  background: #f9fafb;
}

.dark .flex-enum-choice-row:hover[b-av07xh66kw] {
  background: #4b5563;
}

.flex-enum-choice-row.flex-dragging[b-av07xh66kw] {
  opacity: 0.5;
  background: #e5e7eb;
}

.flex-enum-choice-row.flex-drag-over-top[b-av07xh66kw] {
  box-shadow: inset 0 2px 0 0 #3b82f6;
}

.flex-enum-choice-row.flex-drag-over-bottom[b-av07xh66kw] {
  box-shadow: inset 0 -2px 0 0 #3b82f6;
}

.flex-enum-choice-row.flex-has-error[b-av07xh66kw] {
  background: #fef2f2;
}

.flex-enum-choice-drag-handle[b-av07xh66kw] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  cursor: grab;
  color: #9ca3af;
}

.flex-enum-choice-drag-handle:hover[b-av07xh66kw] {
  color: #6b7280;
}

.flex-enum-choice-drag-handle:active[b-av07xh66kw] {
  cursor: grabbing;
}

.flex-drag-icon[b-av07xh66kw] {
  width: 14px;
  height: 14px;
}

.flex-enum-choice-row .flex-input-field[b-av07xh66kw] {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 13px;
  transition: border-color 0.15s ease;
  color: var(--flex-text-header);
}

.flex-enum-choice-row .flex-input-field:focus[b-av07xh66kw] {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.flex-enum-choice-row .flex-input-field.flex-input-error[b-av07xh66kw] {
  border-color: #ef4444;
  background: #fef2f2;
}

.flex-enum-choice-row .flex-input-field[b-av07xh66kw]::placeholder {
  color: #9ca3af;
  font-style: italic;
}

.flex-enum-choice-delete-btn[b-av07xh66kw] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  color: var(--flex-property-edit-button-color);
  transition: all 0.15s ease;
}

.flex-enum-choice-delete-btn:hover:not(:disabled)[b-av07xh66kw] {
  background: #fee2e2;
  color: #ef4444;
}

.flex-enum-choice-delete-btn:disabled[b-av07xh66kw] {
  cursor: not-allowed;
  opacity: 0.4;
}

.flex-delete-icon[b-av07xh66kw] {
  width: 16px;
  height: 16px;
}

.flex-enum-choice-error[b-av07xh66kw] {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 40px;
  font-size: 12px;
  color: #dc2626;
}

.flex-error-icon[b-av07xh66kw] {
  width: 14px;
  height: 14px;
  fill: #dc2626;
}
/* _content/LPI.Features.FlexForm.Client.Ux.Web/Components/Editor/Components/PropertiesPanel/GridDefinitionsEditor.razor.rz.scp.css */
.flex-flex-grid-definitions-editor[b-pd9jf8gqxu] {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.flex-flex-grid-definitions-list[b-pd9jf8gqxu] {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.flex-grid-definition-item[b-pd9jf8gqxu] {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background-color: var(--flex-color-gray-100, #f3f4f6);
  border: 1px solid var(--flex-color-gray-300, #d1d5db);
  border-radius: var(--flex-radius-default, 4px);
  transition: background-color 0.15s ease;
  min-width: 0;
}

.flex-grid-definition-item:hover[b-pd9jf8gqxu] {
  background-color: var(--flex-color-gray-200, #e5e7eb);
}

/* Drag and drop states */
.flex-grid-definition-item.flex-grid-definition-dragging[b-pd9jf8gqxu] {
  opacity: 0.5;
  background-color: var(--flex-color-gray-300, #d1d5db);
}

.flex-grid-definition-item.flex-grid-definition-drag-over-top[b-pd9jf8gqxu] {
  box-shadow: inset 0 2px 0 0 var(--flex-color-blue-500, #3b82f6);
}

.flex-grid-definition-item.flex-grid-definition-drag-over-bottom[b-pd9jf8gqxu] {
  box-shadow: inset 0 -2px 0 0 var(--flex-color-blue-500, #3b82f6);
}

/* Drag handle */
.flex-grid-definition-drag-handle[b-pd9jf8gqxu] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  flex-shrink: 0;
  cursor: grab;
  color: var(--flex-color-gray-400, #9ca3af);
  transition: color 0.15s ease;
}

.flex-grid-definition-drag-handle:hover[b-pd9jf8gqxu] {
  color: var(--flex-color-gray-600, #4b5563);
}

.flex-grid-definition-drag-handle:active[b-pd9jf8gqxu] {
  cursor: grabbing;
}

.flex-grid-definition-drag-icon[b-pd9jf8gqxu] {
  width: 14px;
  height: 14px;
}

.flex-grid-definition-label[b-pd9jf8gqxu] {
  font-size: 12px;
  font-weight: 500;
  color: var(--flex-text-header, #374151);
  min-width: 55px;
  flex-shrink: 0;
}

.flex-grid-column-width-adjustment-section[b-pd9jf8gqxu] {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.flex-grid-definition-type-select[b-pd9jf8gqxu] {
  flex: 1;
  min-width: 0;
  max-width: 100px;
  padding: 4px 6px !important;
  font-size: 12px !important;
}

.flex-grid-definition-value-container[b-pd9jf8gqxu] {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.flex-grid-definition-value-input[b-pd9jf8gqxu] {
  width: 50px !important;
  min-width: 50px !important;
  padding: 4px 6px !important;
  font-size: 12px !important;
  text-align: right;
}

.flex-grid-definition-value-input:disabled[b-pd9jf8gqxu] {
  background-color: var(--flex-color-gray-200, #e5e7eb);
  color: var(--flex-color-gray-500, #6b7280);
  cursor: not-allowed;
}

.flex-grid-definition-value-unit[b-pd9jf8gqxu] {
  font-size: 11px;
  color: var(--flex-color-gray-500, #6b7280);
  flex-shrink: 0;
}

.flex-grid-definition-actions[b-pd9jf8gqxu] {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  flex-shrink: 0;
}

.flex-grid-definition-action-btn[b-pd9jf8gqxu] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 2px;
  border: 1px solid var(--flex-color-gray-300, #d1d5db);
  background-color: var(--flex-color-white, #ffffff);
  border-radius: var(--flex-radius-default, 4px);
  cursor: pointer;
  transition: all 0.15s ease;
  color: var(--flex-color-gray-600, #4b5563);
}

.flex-grid-definition-action-btn:hover:not(:disabled)[b-pd9jf8gqxu] {
  background-color: var(--flex-color-gray-100, #f3f4f6);
  border-color: var(--flex-color-gray-400, #9ca3af);
}

.flex-grid-definition-action-btn:focus[b-pd9jf8gqxu] {
  outline: none;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
}

.flex-grid-definition-action-btn:disabled[b-pd9jf8gqxu] {
  opacity: 0.4;
  cursor: not-allowed;
}

.flex-grid-definition-remove-btn:hover:not(:disabled)[b-pd9jf8gqxu] {
  background-color: var(--flex-color-red-50, #fef2f2);
  border-color: var(--flex-color-red-300, #fca5a5);
  color: var(--flex-color-red-600, #dc2626);
}

.flex-grid-definition-icon[b-pd9jf8gqxu] {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.flex-grid-definition-add-btn[b-pd9jf8gqxu] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 8px 12px;
  margin-top: 2px;
  font-size: 13px;
  font-weight: 500;
  color: var(--flex-color-blue-600, #2563eb);
  background-color: var(--flex-color-blue-50, #eff6ff);
  border: 1px dashed var(--flex-color-blue-300, #93c5fd);
  border-radius: var(--flex-radius-default, 4px);
  cursor: pointer;
  transition: all 0.15s ease;
}

.flex-grid-definition-add-btn:hover[b-pd9jf8gqxu] {
  background-color: var(--flex-color-blue-100, #dbeafe);
  border-color: var(--flex-color-blue-400, #60a5fa);
}

.flex-grid-definition-add-btn:focus[b-pd9jf8gqxu] {
  outline: none;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
}

.flex-grid-definition-icon-add[b-pd9jf8gqxu] {
  width: 14px;
  height: 14px;
}

.flex-grid-definition-max-reached[b-pd9jf8gqxu] {
  font-size: 11px;
  font-style: italic;
  color: var(--flex-color-gray-500, #6b7280);
  text-align: center;
  padding: 6px;
}

/* Highlight animation for moved/added items */
@keyframes flex-grid-definition-highlight-b-pd9jf8gqxu {
  0% {
    background-color: var(--flex-color-blue-200, #bfdbfe);
    border-color: var(--flex-color-blue-400, #60a5fa);
  }

  100% {
    background-color: var(--flex-color-gray-100, #f3f4f6);
    border-color: var(--flex-color-gray-300, #d1d5db);
  }
}

.flex-grid-definition-item-highlighted[b-pd9jf8gqxu] {
  animation: flex-grid-definition-highlight-b-pd9jf8gqxu 0.6s ease-out forwards;
}

.flex-grid-column-width-adjustment-section[b-pd9jf8gqxu] {
  display: flex;
  flex-direction: column;
}
/* _content/LPI.Features.FlexForm.Client.Ux.Web/Components/Editor/Components/PropertiesPanel/GroupedPropertySection.razor.rz.scp.css */
/* EditablePropertyGroup.razor.css */

.flex-property-group[b-n76lje12hr] {
  margin-bottom: 1rem;
}

.flex-property-group-summary[b-n76lje12hr] {
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.75rem;
  color: var(--flex-text-header);
  cursor: pointer;
  user-select: none;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.flex-property-group-summary:hover[b-n76lje12hr] {
  color: rgb(31, 41, 55);
}


.flex-property-group-summary:hover[b-n76lje12hr] {
  color: rgb(31, 41, 55);
}

.flex-group-header[b-n76lje12hr] {
  color: var(--flex-text-header);
}
/* _content/LPI.Features.FlexForm.Client.Ux.Web/Components/Editor/Components/PropertiesPanel/OrientationEditor.razor.rz.scp.css */
.flex-orientation-editor[b-p1sh8dhihg] {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.flex-orientation-button-group[b-p1sh8dhihg] {
  display: flex;
  gap: 2px;
  background-color: #e5e7eb;
  border-radius: 6px;
  padding: 2px;
}

.flex-orientation-button[b-p1sh8dhihg] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 1;
  height: 32px;
  padding: 4px 12px;
  border: none;
  background-color: transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.flex-orientation-button:hover[b-p1sh8dhihg] {
  background-color: #d1d5db;
}

.flex-orientation-button:focus[b-p1sh8dhihg] {
  outline: none;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
}

.flex-orientation-button.active[b-p1sh8dhihg] {
  background-color: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.flex-orientation-button.active:hover[b-p1sh8dhihg] {
  background-color: #ffffff;
}

.flex-orientation-icon[b-p1sh8dhihg] {
  width: 16px;
  height: 16px;
  fill: #374151;
  flex-shrink: 0;
}

.flex-orientation-button.active .flex-orientation-icon[b-p1sh8dhihg] {
  fill: #1d4ed8;
}

.flex-orientation-label[b-p1sh8dhihg] {
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  white-space: nowrap;
}

.flex-orientation-button.active .flex-orientation-label[b-p1sh8dhihg] {
  color: #1d4ed8;
}
/* _content/LPI.Features.FlexForm.Client.Ux.Web/Components/Editor/Components/PropertiesPanel/PropertiesPanel.razor.rz.scp.css */
/* Properties Panel */
.flex-properties-panel[b-qkobdqfr8e] {
  width: 300px;
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--flex-bg-raised-panel);
  border-left: 1px solid #e5e7eb;
  padding: 20px;
  overflow-y: auto;
}

.flex-properties-panel-title[b-qkobdqfr8e] {
  color: var(--flex-text-header);
}

.flex-properties-panel-type[b-qkobdqfr8e] {
  color: var(--flex-text-header);
}

.flex-properties-panel.flex-hidden[b-qkobdqfr8e] {
  display: none;
}

.flex-properties-panel h2[b-qkobdqfr8e] {
  font-size: 16px;
  margin-bottom: 15px;
  color: var(--flex-text-header);
}

/* Scrollbar styling */
.flex-properties-panel[b-qkobdqfr8e]::-webkit-scrollbar {
  width: 8px;
}

.flex-properties-panel[b-qkobdqfr8e]::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.flex-properties-panel[b-qkobdqfr8e]::-webkit-scrollbar-thumb {
  background: #cbd5e1;
}

  .flex-properties-panel[b-qkobdqfr8e]::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
  }

.flex-properties-content[b-qkobdqfr8e] {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.flex-widget-icon[b-qkobdqfr8e] {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  margin-right: 0.25em;
  color: var(--flex-text-header);
}

.flex-widget-icon svg[b-qkobdqfr8e] {
  display: block;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .flex-properties-panel[b-qkobdqfr8e] {
    width: 250px;
  }
}

@media (max-width: 768px) {
  .flex-properties-panel[b-qkobdqfr8e] {
    width: 100%;
    max-height: 200px;
  }
}
/* _content/LPI.Features.FlexForm.Client.Ux.Web/Components/Editor/Components/PropertiesPanel/PropertySection.razor.rz.scp.css */
/* EditablePropertySection.razor.css */

.flex-property-section-summary[b-tnjekj713y] {
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.75rem;
  color: var(--flex-text-header);
  cursor: pointer;
  user-select: none;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.flex-property-section-summary:hover[b-tnjekj713y] {
  color: rgb(31, 41, 55);
}

.flex-details-content[b-tnjekj713y] {
  /* Add padding/margin as needed */
}

.flex-details-content-inner[b-tnjekj713y] {
  /* Add padding/margin as needed */
}
/* _content/LPI.Features.FlexForm.Client.Ux.Web/Components/Editor/Components/PropertiesPanel/StringListEditor.razor.rz.scp.css */
.flex-string-list-editor[b-0z70439f5f] {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.flex-string-list-header[b-0z70439f5f] {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-string-list-title[b-0z70439f5f] {
  font-size: 0.75rem;
  font-weight: 600;
  color: rgb(55, 65, 81);
}

.flex-string-list-add-btn[b-0z70439f5f] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  color: rgb(107, 114, 128);
}

.flex-string-list-add-btn:hover[b-0z70439f5f] {
  color: rgb(37, 99, 235);
}

.flex-string-list-icon[b-0z70439f5f] {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}

.flex-string-list-items[b-0z70439f5f] {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.flex-string-list-row[b-0z70439f5f] {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.flex-string-list-input[b-0z70439f5f] {
  flex: 1;
  min-width: 0;
}

.flex-string-list-delete-btn[b-0z70439f5f] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  color: rgb(156, 163, 175);
  flex-shrink: 0;
}

.flex-string-list-delete-btn:hover:not(:disabled)[b-0z70439f5f] {
  color: rgb(239, 68, 68);
}

.flex-string-list-delete-btn:disabled[b-0z70439f5f] {
  opacity: 0.3;
  cursor: not-allowed;
}

.flex-string-list-delete-icon[b-0z70439f5f] {
  width: 0.875rem;
  height: 0.875rem;
}
/* _content/LPI.Features.FlexForm.Client.Ux.Web/Components/Editor/Components/PropertiesPanel/ToggleSwitch.razor.rz.scp.css */
.flex-toggle-switch-container[b-4uz54jq3nd] {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
  padding-left: 2px;
}

.flex-toggle-switch[b-4uz54jq3nd] {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
  color: var(--flex-text-header);
}

.flex-toggle-switch input[b-4uz54jq3nd] {
  opacity: 0;
  width: 0;
  height: 0;
}

.flex-toggle-slider[b-4uz54jq3nd] {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #d1d5db;
  transition: background-color 0.2s ease;
  border-radius: 24px;
}

  .flex-toggle-slider[b-4uz54jq3nd]::before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: transform 0.2s ease;
    border-radius: 50%;
  }

.flex-toggle-switch input:checked + .flex-toggle-slider[b-4uz54jq3nd] {
  background-color: #2563eb;
}

  .flex-toggle-switch input:checked + .flex-toggle-slider[b-4uz54jq3nd]::before {
    transform: translateX(20px);
  }

.flex-toggle-state-label[b-4uz54jq3nd] {
  font-size: 13px;
  font-weight: 500;
  color: var(--flex-text-header);
  user-select: none;
}
/* _content/LPI.Features.FlexForm.Client.Ux.Web/Components/Editor/Components/StyleDefaultsEditor/FormStyleDefaultsEditor.razor.rz.scp.css */
/* Overlay */
.flex-style-defaults-overlay[b-ipmyfy3xps] {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

/* Modal */
.flex-style-defaults-modal[b-ipmyfy3xps] {
  background: var(--flex-bg-raised-panel);
  border: 1px solid var(--flex-border-color);
  border-radius: 8px;
  width: 800px;
  max-width: 90vw;
  height: 600px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

/* Header */
.flex-style-defaults-header[b-ipmyfy3xps] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--flex-border-color);
  flex-shrink: 0;
}

.flex-style-defaults-header h2[b-ipmyfy3xps] {
  margin: 0;
  font-size: 16px;
  color: var(--flex-text-header);
}

.flex-style-defaults-close-btn[b-ipmyfy3xps] {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--flex-text-header);
  padding: 0 4px;
  line-height: 1;
}

.flex-style-defaults-close-btn:hover[b-ipmyfy3xps] {
  opacity: 0.7;
}

/* Body */
.flex-style-defaults-body[b-ipmyfy3xps] {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* Widget List (Left Panel) */
.flex-style-defaults-widget-list[b-ipmyfy3xps] {
  width: 220px;
  border-right: 1px solid var(--flex-border-color);
  padding: 12px;
  overflow-y: auto;
  flex-shrink: 0;
}

.flex-style-defaults-widget-list h3[b-ipmyfy3xps] {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--flex-text-header);
  margin: 12px 0 6px 0;
  opacity: 0.7;
}

.flex-style-defaults-widget-list h3:first-child[b-ipmyfy3xps] {
  margin-top: 0;
}

.flex-style-defaults-widget-item[b-ipmyfy3xps] {
  padding: 8px 10px;
  margin-bottom: 4px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--flex-icon-color);
  transition: background 0.15s;
}

.flex-style-defaults-widget-item:hover[b-ipmyfy3xps] {
  background: var(--flex-bg-flex-widget);
}

.flex-style-defaults-widget-item.selected[b-ipmyfy3xps] {
  background: #2563eb;
  color: white;
}

.flex-style-defaults-widget-icon[b-ipmyfy3xps] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

[b-ipmyfy3xps] .flex-style-defaults-widget-icon svg {
  display: block;
}

/* Properties Panel (Right Panel) */
.flex-style-defaults-properties[b-ipmyfy3xps] {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
}

/* Preview Section */
.flex-style-defaults-preview[b-ipmyfy3xps] {
  margin-bottom: 16px;
}

.flex-style-defaults-preview-box[b-ipmyfy3xps] {
  background: white;
  border: 1px solid var(--flex-border-color);
  border-radius: 6px;
  padding: 16px;
  margin-top: 6px;
}

.flex-style-defaults-preview-unavailable[b-ipmyfy3xps] {
  color: var(--flex-text-header);
  opacity: 0.5;
  font-style: italic;
  font-size: 13px;
  margin: 0;
  text-align: center;
}

.flex-style-defaults-properties-content[b-ipmyfy3xps] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

[b-ipmyfy3xps] .flex-group-header {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--flex-text-header);
  margin-top: 8px;
  opacity: 0.7;
}

.flex-style-defaults-empty-state[b-ipmyfy3xps] {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--flex-text-header);
  opacity: 0.5;
  font-style: italic;
}

/* Scrollbar styling */
.flex-style-defaults-widget-list[b-ipmyfy3xps]::-webkit-scrollbar,
.flex-style-defaults-properties[b-ipmyfy3xps]::-webkit-scrollbar {
  width: 6px;
}

.flex-style-defaults-widget-list[b-ipmyfy3xps]::-webkit-scrollbar-track,
.flex-style-defaults-properties[b-ipmyfy3xps]::-webkit-scrollbar-track {
  background: transparent;
}

.flex-style-defaults-widget-list[b-ipmyfy3xps]::-webkit-scrollbar-thumb,
.flex-style-defaults-properties[b-ipmyfy3xps]::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

  .flex-style-defaults-widget-list[b-ipmyfy3xps]::-webkit-scrollbar-thumb:hover,
  .flex-style-defaults-properties[b-ipmyfy3xps]::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
  }
/* _content/LPI.Features.FlexForm.Client.Ux.Web/Components/Editor/Components/ValidationPanel/ValidationPanel.razor.rz.scp.css */
.flex-rules-panel[b-a3ivak56za] {
  width: 300px;
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--flex-bg-raised-panel);
  border-left: 1px solid #e5e7eb;
  padding: 20px;
  overflow-y: auto;
}

.flex-rules-panel-title[b-a3ivak56za] {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 15px;
  color: var(--flex-text-header);
}

.flex-rules-panel-content[b-a3ivak56za] {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.flex-rules-panel-empty[b-a3ivak56za] {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #9ca3af;
  padding: 40px 20px;
  gap: 16px;
}

.flex-rules-add-btn[b-a3ivak56za] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: #2563eb;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: background 0.15s;
}

.flex-rules-add-btn:hover[b-a3ivak56za] {
  background: #1d4ed8;
}

.flex-rules-editor[b-a3ivak56za] {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.flex-rules-section[b-a3ivak56za] {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.flex-rules-label[b-a3ivak56za] {
  font-size: 12px;
  font-weight: 600;
  color: var(--flex-text-header);
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.flex-rules-select[b-a3ivak56za],
.flex-rules-input[b-a3ivak56za] {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 13px;
  color: var(--flex-text-header);
  background: var(--flex-input-background, white);
  transition: border-color 0.15s;
}

.flex-rules-select:focus[b-a3ivak56za],
.flex-rules-input:focus[b-a3ivak56za] {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

.flex-rules-hint[b-a3ivak56za] {
  font-size: 12px;
  color: #9ca3af;
  margin: 0;
  line-height: 1.4;
}

.flex-rules-summary[b-a3ivak56za] {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 12px;
}

.flex-rules-summary-label[b-a3ivak56za] {
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.flex-rules-summary-text[b-a3ivak56za] {
  font-size: 13px;
  color: var(--flex-text-header);
  margin: 4px 0 0;
  line-height: 1.5;
}

.flex-rules-remove-btn[b-a3ivak56za] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: transparent;
  color: #ef4444;
  border: 1px solid #fecaca;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: background 0.15s, border-color 0.15s;
  align-self: flex-start;
}

.flex-rules-remove-btn:hover[b-a3ivak56za] {
  background: #fef2f2;
  border-color: #ef4444;
}
/* _content/LPI.Features.FlexForm.Client.Ux.Web/Components/Editor/Components/WidgetPanel/WidgetItem.razor.rz.scp.css */
.flex-widget-item[b-xwqv26h6mh] {
  padding: 12px 16px;
  margin-bottom: 10px;
  background: var(--flex-bg-flex-widget);
  border: 2px solid var(--flex-border-flex-widget);
  border-radius: 6px;
  cursor: move;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.2s;
  user-select: none;
  max-height: 35px;
  color: var(--flex-icon-color);
}

.flex-widget-item svg[b-xwqv26h6mh] {
  display: block;
}

.flex-widget-item-disabled[b-xwqv26h6mh] {
  color: #CBD5E1;
  /*    background: #f9fafb;*/
  cursor: not-allowed;
  opacity: 0.5;
}

.flex-widget-item:hover:not(.flex-widget-item-disabled)[b-xwqv26h6mh] {
  background: #f3f4f6;
  border-color: #2563eb;
  color: #2563eb;
}

.dark .flex-widget-item:hover:not(.flex-widget-item-disabled)[b-xwqv26h6mh] {
  background: #1e2939;
}

.flex-widget-item:active[b-xwqv26h6mh] {
  opacity: 0.7;
}

.flex-widget-icon[b-xwqv26h6mh] {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
/* _content/LPI.Features.FlexForm.Client.Ux.Web/Components/Editor/Components/WidgetPanel/WidgetsPanel.razor.rz.scp.css */
/* Widgets Panel */
.flex-widgets-panel[b-y4xv2ocn36] {
  width: 250px;
  background: var(--flex-bg-raised-panel);
  border-right: 1px solid var(--flex-border-color);
  padding: 20px;
  overflow-y: auto;
  flex-shrink: 0;
}

.flex-widgets-panel.hidden[b-y4xv2ocn36] {
  display: none;
}

.flex-widgets-panel h2[b-y4xv2ocn36] {
  font-size: 16px;
  margin-bottom: 15px;
  color: var(--flex-text-header);
}

.flex-widgets-panel-header[b-y4xv2ocn36] {
  margin-bottom: 16px;
}

.flex-edit-defaults-btn[b-y4xv2ocn36] {
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: 1px solid var(--flex-border-color);
  border-radius: 4px;
  color: var(--flex-text-header);
  cursor: pointer;
  font-size: 13px;
  transition: all 0.15s;
}

.flex-edit-defaults-btn:hover[b-y4xv2ocn36] {
  background: #2563eb;
  border-color: #2563eb;
  color: white;
}
/* _content/LPI.Features.FlexForm.Client.Ux.Web/Components/Editor/FormEditor.razor.rz.scp.css */
.flex-form-editor[b-b083r3f6u1] {
  display: flex;
  flex-direction: column;
  height: stretch;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  background: var(--flex-bg-primary);
  margin: 0;
  padding: 0;
  width: 100%;
  flex: 1;
  min-width: 0;
  transition: padding-bottom 0.2s ease;
  position: relative;
}

/* Skeleton loader */
.flex-skeleton-loader[b-b083r3f6u1] {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  padding: 8px 0;
}

.flex-skeleton-row[b-b083r3f6u1] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.flex-skeleton-label[b-b083r3f6u1] {
  height: 14px;
  width: 30%;
  background: #e2e8f0;
  border-radius: 4px;
  animation: flex-skeletonPulse-b-b083r3f6u1 1.5s ease-in-out infinite;
}

.flex-skeleton-label--short[b-b083r3f6u1] {
  width: 20%;
}

.flex-skeleton-input[b-b083r3f6u1] {
  height: 38px;
  width: 100%;
  background: #e2e8f0;
  border-radius: 6px;
  animation: flex-skeletonPulse-b-b083r3f6u1 1.5s ease-in-out infinite;
  animation-delay: 0.1s;
}

.flex-skeleton-input--tall[b-b083r3f6u1] {
  height: 80px;
}

@keyframes flex-skeletonPulse-b-b083r3f6u1 {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: 0.4;
  }
}

.dark .flex-form-editor[b-b083r3f6u1] {
  background: #D1D5DB;
}

.flex-form-editor.flex-drawer-open[b-b083r3f6u1] {
  padding-bottom: var(--drawer-height, 250px);
}

.flex-header[b-b083r3f6u1] {
  height: 60px;
  background: #2563eb;
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  flex-shrink: 0;
}

.flex-header h1[b-b083r3f6u1] {
  font-size: 20px;
  font-weight: 600;
  margin: 0;
}

.flex-back-to-company-forms-button[b-b083r3f6u1] {
  max-height: 20px;
  display: inline-flex;
  flex-direction: row;
  max-width: 70px;
}

.flex-form-selector[b-b083r3f6u1] {
  display: flex;
  align-items: center;
}

.flex-form-selector select[b-b083r3f6u1] {
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  min-width: 180px;
  transition: all 0.2s;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='white' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

.flex-form-selector select:hover[b-b083r3f6u1] {
  background-color: rgba(255, 255, 255, 0.3);
}

.flex-form-selector select:focus[b-b083r3f6u1] {
  outline: none;
  background-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4);
}

.flex-form-selector select option[b-b083r3f6u1] {
  background: #2563eb;
  color: white;
  padding: 8px;
}

.flex-mode-toggle[b-b083r3f6u1] {
  display: flex;
  gap: 8px;
  background: rgba(255, 255, 255, 0.2);
  padding: 4px;
  border-radius: 6px;
}

.flex-mode-btn[b-b083r3f6u1] {
  padding: 8px 16px;
  background: transparent;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s;
}

.flex-mode-btn.flex-active[b-b083r3f6u1] {
  background: white;
  color: #2563eb;
}

.flex-mode-btn:hover:not(.flex-active)[b-b083r3f6u1] {
  background: rgba(255, 255, 255, 0.1);
}

.flex-form-editor-container[b-b083r3f6u1] {
  display: flex;
  flex: 1;
  overflow: hidden;
  padding: 0px;
  width: 100%;
  margin: 0;
  box-sizing: border-box;
}

.flex-nested-component-container[b-b083r3f6u1] {
}



/* Right Panel */
.flex-editor-right-panel[b-b083r3f6u1] {
  display: flex;
  flex-direction: row;
  flex-shrink: 0;
  align-self: stretch;
  overflow: hidden;
}

.flex-editor-right-panel.flex-hidden[b-b083r3f6u1] {
  display: none;
}

.flex-editor-right-panel-content[b-b083r3f6u1] {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

/* Panel Sidebar */
.flex-panel-sidebar[b-b083r3f6u1] {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 4px;
  background: var(--flex-bg-recessed, #f1f5f9);
  border-left: 1px solid #e5e7eb;
  flex-shrink: 0;
  align-self: stretch;
}

.flex-panel-sidebar-btn[b-b083r3f6u1] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 6px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--flex-text-muted, #94a3b8);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.flex-panel-sidebar-btn svg[b-b083r3f6u1] {
  width: 20px;
  height: 20px;
}

.flex-panel-sidebar-btn:hover[b-b083r3f6u1] {
  background: var(--flex-bg-hover, #e2e8f0);
  color: var(--flex-text-header, #1e293b);
}

.flex-panel-sidebar-btn--active[b-b083r3f6u1] {
  background: var(--flex-bg-raised-panel, #ffffff);
  color: #2563eb;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.flex-panel-sidebar-btn--active:hover[b-b083r3f6u1] {
  color: #2563eb;
}

/* Canvas */
.flex-editor-container[b-b083r3f6u1] {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 40px;
  overflow-y: auto;
  background: var(--flex-bg-primary);
}

.flex-canvas[b-b083r3f6u1] {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 40px;
  width: 100%;
}

.flex-form-container[b-b083r3f6u1] {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0 auto;
  background: var(--flex-bg-primary);
  padding: 0;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  min-height: 400px;
}

.flex-form-title[b-b083r3f6u1] {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 30px;
  color: var(--flex-text-header);
}

.flex-drop-zone[b-b083r3f6u1] {
  min-height: 200px;
  border: 2px dashed #d1d5db;
  border-radius: 8px;
  padding: 20px;
}

.flex-drop-zone.flex-drag-over[b-b083r3f6u1] {
  background: #eff6ff;
  border-color: #2563eb;
}

.flex-drop-zone.flex-preview-mode[b-b083r3f6u1] {
  border: none;
  padding: 0;
}

.flex-drag-over-container .flex-drop-zone[b-b083r3f6u1] {
  /*    outline: 2px dashed #3b82f6;
    outline-offset: 4px;*/
  background-color: rgba(59, 130, 246, 0.05);
}

.flex-empty-state[b-b083r3f6u1] {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  color: #9ca3af;
}

/* Empty canvas drag-over highlight */
.flex-canvas.flex-drag-over-container[b-b083r3f6u1] {
  outline: 3px dashed #3b82f6;
  outline-offset: -4px;
  background-color: rgba(59, 130, 246, 0.06);
  animation: flex-emptyCanvasPulse-b-b083r3f6u1 1.5s ease-in-out infinite;
}

@keyframes flex-emptyCanvasPulse-b-b083r3f6u1 {
  0%, 100% {
    background-color: rgba(59, 130, 246, 0.06);
  }

  50% {
    background-color: rgba(59, 130, 246, 0.12);
  }
}

.flex-empty-state p[b-b083r3f6u1] {
  font-size: 16px;
  margin-bottom: 8px;
}

.flex-empty-state small[b-b083r3f6u1] {
  font-size: 14px;
  color: #d1d5db;
}

/* Form Elements */
.flex-form-row[b-b083r3f6u1] {
  display: flex;
  gap: 15px;
  margin-bottom: 15px;
}


.flex-element-controls[b-b083r3f6u1] {
  place-self: flex-end;
}


.flex-control-btn[b-b083r3f6u1] {
  position: relative;
  top: -15px;
  left: 15px;
  padding: 2px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.2s;
}

.flex-control-btn:hover[b-b083r3f6u1] {
  background: #F9FAFB;
}

.flex-control-btn:hover svg path[b-b083r3f6u1] {
  stroke: #c31e1e;
  fill: #c31e1e;
}

.flex-element-label[b-b083r3f6u1] {
  font-size: 11px;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  font-weight: 600;
}

.flex-element-preview[b-b083r3f6u1] {
  font-size: 14px;
  color: #374151;
  font-weight: 500;
}

.flex-option-row[b-b083r3f6u1] {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.flex-option-row input[b-b083r3f6u1] {
  flex: 1;
}

.flex-remove-option-btn[b-b083r3f6u1] {
  width: 30px;
  height: 30px;
  background: #ef4444;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s;
}

.flex-remove-option-btn:hover[b-b083r3f6u1] {
  background: #dc2626;
}

.flex-add-option-btn[b-b083r3f6u1] {
  width: 100%;
  padding: 8px 12px;
  background: #2563eb;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s;
  margin-top: 8px;
}

.flex-add-option-btn:hover[b-b083r3f6u1] {
  background: #1d4ed8;
}

/* Scrollbar styling */
.flex-widgets-panel[b-b083r3f6u1]::-webkit-scrollbar,
.flex-canvas[b-b083r3f6u1]::-webkit-scrollbar {
  width: 8px;
}

.flex-widgets-panel[b-b083r3f6u1]::-webkit-scrollbar-track,
.flex-canvas[b-b083r3f6u1]::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.flex-widgets-panel[b-b083r3f6u1]::-webkit-scrollbar-thumb,
.flex-canvas[b-b083r3f6u1]::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

  .flex-widgets-panel[b-b083r3f6u1]::-webkit-scrollbar-thumb:hover,
  .flex-canvas[b-b083r3f6u1]::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
  }



horizontal-layout-flex-editor-control[b-b083r3f6u1] {
  min-height: 60px;
  position: relative;
}

horizontal-layout-flex-editor-control.flex-drag-over-container[b-b083r3f6u1] {
  background-color: rgba(59, 130, 246, 0.1);
}


details .flex-details-summary[b-b083r3f6u1] {
  list-style: none;
}

  details .flex-details-summary[b-b083r3f6u1]::-webkit-details-marker {
    display: none;
  }

  details .flex-details-summary[b-b083r3f6u1]::before {
    content: "▶";
    display: inline-block;
    margin-right: 0.5rem;
    transition: transform 0.3s ease;
  }

details[open] .flex-details-summary[b-b083r3f6u1]::before {
  transform: rotate(90deg);
}

details .flex-details-content[b-b083r3f6u1] {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}

.flex-details-content .flex-details-content-inner[b-b083r3f6u1] {
  display: flex;
  flex-direction: column;
}

.flex-details-content .flex-group-header[b-b083r3f6u1] {
  font-weight: 500;
  border-bottom: solid gray;
  width: 100%;
  border-bottom-width: 1px;
  border-bottom-color: lightgray;
  color: #282828;
  margin-top: 4px;
}

details[open] .flex-details-content[b-b083r3f6u1] {
  grid-template-rows: 1fr;
}

/* More specific: targets open details that are in the process of closing */
details[open].flex-closing .flex-details-content[b-b083r3f6u1] {
  grid-template-rows: 0fr;
}

details[open].flex-closing .flex-details-summary[b-b083r3f6u1]::before {
  transform: rotate(0deg);
}

details .flex-details-content > div[b-b083r3f6u1] {
  overflow: hidden;
}

#flex-select-parent-button[b-b083r3f6u1] {
  font-size: 12px;
  padding: 5px;
  border-radius: 5px;
  background: rgba(21,93,252, 0.15);
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .flex-widgets-panel[b-b083r3f6u1] {
    width: 200px;
  }
}

@media (max-width: 768px) {
  .flex-container[b-b083r3f6u1] {
    flex-direction: column;
  }

  .flex-widgets-panel[b-b083r3f6u1] {
    width: 100%;
    max-height: 200px;
  }

  .flex-canvas[b-b083r3f6u1] {
    padding: 20px;
    cursor: pointer;
  }

  .flex-form-container[b-b083r3f6u1] {
    padding: 0;
  }

  .flex-drag-ghost[b-b083r3f6u1] {
    position: fixed;
    pointer-events: none;
    z-index: 10000;
    transform: translate(-50%, -50%);
    animation: flex-dragGhostAppear-b-b083r3f6u1 0.15s ease-out;
  }

  @keyframes flex-dragGhostAppear-b-b083r3f6u1 {
    from {
      opacity: 0;
      transform: translate(-50%, -50%) scale(0.95);
    }

    to {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
    }
  }

  .flex-drag-ghost-content[b-b083r3f6u1] {
    background: white;
    border: 2px solid #2563eb;
    border-radius: 6px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2), 0 6px 12px rgba(37, 99, 235, 0.3);
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    white-space: nowrap;
  }


  .flex-dragging-placeholder-content[b-b083r3f6u1] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    color: #9ca3af;
    font-size: 14px;
    font-style: italic;
  }

  .flex-dragging-overlay[b-b083r3f6u1] {
    background-color: rgba(0,0,0,0.5); /* Black background with opacity */
  }




  /* Container Drop Zone Enhancement */
  .flex-drag-over-container[b-b083r3f6u1] {
    outline: 3px solid #3b82f6;
    outline-offset: 4px;
    background-color: rgba(59, 130, 246, 0.08);
    animation: flex-containerPulse-b-b083r3f6u1 1.5s ease-in-out infinite;
  }

  @keyframes flex-containerPulse-b-b083r3f6u1 {
    0%, 100% {
      background-color: rgba(59, 130, 246, 0.08);
    }

    50% {
      background-color: rgba(59, 130, 246, 0.15);
    }
  }
}
/* _content/LPI.Features.FlexForm.Client.Ux.Web/Components/FlexForm.razor.rz.scp.css */
.flex-form[b-rd9a9a4rfv] {
  width: 100%;
  margin: 0.25rem;
  margin-right: 1rem;
  padding: 10px;
  overflow: auto;
}
/* _content/LPI.Features.FlexForm.Client.Ux.Web/Components/FlexFormOverview.razor.rz.scp.css */
/* FormDataGrid.razor.css */

/* ===== Container ===== */
.flex-container[b-acnxperua1] {
  width: 100%;
  margin-right: 1rem;
}

@media (min-width: 1024px) {
  .flex-container[b-acnxperua1] {
    margin-right: 0;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ===== Desktop Table ===== */
.flex-data-grid-container[b-acnxperua1] {
  display: none;
  width: 100%;
}

@media (min-width: 1024px) {
  .flex-data-grid-container[b-acnxperua1] {
    display: block;
  }
}

.flex-data-grid-table[b-acnxperua1] {
  width: 100%;
}

.flex-table-head[b-acnxperua1] {
  position: sticky;
}

.flex-th[b-acnxperua1] {
  border-bottom: 1px solid rgb(226, 232, 240);
  font-weight: 700;
  padding: 1rem;
  color: rgb(148, 163, 184);
  text-align: left;
}

.flex-th-empty[b-acnxperua1] {
  border-bottom: 1px solid rgb(226, 232, 240);
}

.flex-tr[b-acnxperua1] {
  cursor: pointer;
}

.flex-tr:hover[b-acnxperua1] {
  background-color: rgb(243, 244, 246);
}

.flex-td[b-acnxperua1] {
  border-bottom: 1px solid rgb(226, 232, 240);
  padding: 1rem;
  color: rgb(148, 163, 184);
  text-align: left;
}

.flex-td-name[b-acnxperua1] {
  font-weight: 600;
}

.flex-td-text[b-acnxperua1] {
  font-weight: 500;
}

.flex-td-actions[b-acnxperua1] {
  border-bottom: 1px solid rgb(226, 232, 240);
}

.flex-icon[b-acnxperua1] {
  opacity: 0.6;
}

.flex-icon-delete[b-acnxperua1] {
  margin-right: 2rem;
}

/* ===== Mobile Layout ===== */
.flex-mobile-container[b-acnxperua1] {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  background-color: rgb(243, 244, 246);
}

@media (min-width: 1024px) {
  .flex-mobile-container[b-acnxperua1] {
    display: none;
  }
}

.flex-mobile-card[b-acnxperua1] {
  padding-right: 0.125rem;
  display: flex;
  cursor: pointer;
}

.flex-mobile-content[b-acnxperua1] {
  flex: 1 1 0%;
}

.flex-mobile-row[b-acnxperua1] {
  display: flex;
  gap: 0.5rem;
  justify-content: space-between;
}

.flex-mobile-row-spacing[b-acnxperua1] {
  margin-top: 0.5rem;
}

.flex-mobile-col-quarter[b-acnxperua1] {
  width: 25%;
}

.flex-data-item-label[b-acnxperua1] {
  font-size: 0.75rem;
  color: rgb(148, 163, 184);
}

.flex-data-item-value[b-acnxperua1] {
  font-size: 0.875rem;
  color: rgb(51, 65, 85);
}

.flex-mobile-arrow[b-acnxperua1] {
  display: flex;
  align-items: center;
  margin-left: 1rem;
}

.flex-mobile-arrow img[b-acnxperua1] {
  margin-left: 0.5rem;
}

/* Dark mode arrow visibility */
.flex-arrow-light[b-acnxperua1] {
  display: block;
}

.flex-arrow-dark[b-acnxperua1] {
  display: none;
}

/* ===== Dark Mode ===== */
@media (prefers-color-scheme: dark) {
  .flex-th[b-acnxperua1],
  .flex-th-empty[b-acnxperua1],
  .flex-td[b-acnxperua1],
  .flex-td-actions[b-acnxperua1] {
    border-color: rgb(71, 85, 105);
  }

  .flex-th[b-acnxperua1],
  .flex-td[b-acnxperua1] {
    color: rgb(226, 232, 240);
  }

  .flex-arrow-light[b-acnxperua1] {
    display: none;
  }

  .flex-arrow-dark[b-acnxperua1] {
    display: block;
  }
}
/* _content/LPI.Features.FlexForm.Client.Ux.Web/Toast/ToastProvider.razor.rz.scp.css */
@keyframes flex-toast-slide-in-b-2b5vgn6xwk {
  from {
    opacity: 0;
    transform: translateX(100%);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes flex-toast-shrink-b-2b5vgn6xwk {
  from {
    width: 100%;
  }

  to {
    width: 0%;
  }
}

.flex-toast-animate-slide-in[b-2b5vgn6xwk] {
  animation: flex-toast-slide-in-b-2b5vgn6xwk 0.3s ease-out;
}

.flex-toast-animate-shrink[b-2b5vgn6xwk] {
  animation: flex-toast-shrink-b-2b5vgn6xwk 5s linear forwards;
}

.flex-widget-item[b-xwqv26h6mh] {
  padding: 12px 16px;
  margin-bottom: 10px;
  background: var(--flex-bg-flex-widget);
  border: 2px solid var(--flex-border-flex-widget);
  border-radius: 6px;
  cursor: move;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.2s;
  user-select: none;
  max-height: 35px;
  color: var(--flex-icon-color);
}

.flex-widget-item svg[b-xwqv26h6mh] {
  display: block;
}

.flex-widget-item-disabled[b-xwqv26h6mh] {
  color: #CBD5E1;
  /*    background: #f9fafb;*/
  cursor: not-allowed;
  opacity: 0.5;
}

.flex-widget-item:hover:not(.flex-widget-item-disabled)[b-xwqv26h6mh] {
  background: #f3f4f6;
  border-color: #2563eb;
  color: #2563eb;
}

.dark .flex-widget-item:hover:not(.flex-widget-item-disabled)[b-xwqv26h6mh] {
  background: #1e2939;
}

.flex-widget-item:active[b-xwqv26h6mh] {
  opacity: 0.7;
}

.flex-widget-icon[b-xwqv26h6mh] {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Widgets Panel */
.flex-widgets-panel[b-y4xv2ocn36] {
  width: 250px;
  background: var(--flex-bg-raised-panel);
  border-right: 1px solid var(--flex-border-color);
  padding: 20px;
  overflow-y: auto;
  flex-shrink: 0;
}

.flex-widgets-panel.hidden[b-y4xv2ocn36] {
  display: none;
}

.flex-widgets-panel h2[b-y4xv2ocn36] {
  font-size: 16px;
  margin-bottom: 15px;
  color: var(--flex-text-header);
}

.flex-widgets-panel-header[b-y4xv2ocn36] {
  margin-bottom: 16px;
}

.flex-edit-defaults-btn[b-y4xv2ocn36] {
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: 1px solid var(--flex-border-color);
  border-radius: 4px;
  color: var(--flex-text-header);
  cursor: pointer;
  font-size: 13px;
  transition: all 0.15s;
}

.flex-edit-defaults-btn:hover[b-y4xv2ocn36] {
  background: #2563eb;
  border-color: #2563eb;
  color: white;
}

.flex-rules-panel[b-a3ivak56za] {
  width: 300px;
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--flex-bg-raised-panel);
  border-left: 1px solid #e5e7eb;
  padding: 20px;
  overflow-y: auto;
}

.flex-rules-panel-title[b-a3ivak56za] {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 15px;
  color: var(--flex-text-header);
}

.flex-rules-panel-content[b-a3ivak56za] {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.flex-rules-panel-empty[b-a3ivak56za] {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #9ca3af;
  padding: 40px 20px;
  gap: 16px;
}

.flex-rules-add-btn[b-a3ivak56za] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: #2563eb;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: background 0.15s;
}

.flex-rules-add-btn:hover[b-a3ivak56za] {
  background: #1d4ed8;
}

.flex-rules-editor[b-a3ivak56za] {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.flex-rules-section[b-a3ivak56za] {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.flex-rules-label[b-a3ivak56za] {
  font-size: 12px;
  font-weight: 600;
  color: var(--flex-text-header);
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.flex-rules-select[b-a3ivak56za],
.flex-rules-input[b-a3ivak56za] {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 13px;
  color: var(--flex-text-header);
  background: var(--flex-input-background, white);
  transition: border-color 0.15s;
}

.flex-rules-select:focus[b-a3ivak56za],
.flex-rules-input:focus[b-a3ivak56za] {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

.flex-rules-hint[b-a3ivak56za] {
  font-size: 12px;
  color: #9ca3af;
  margin: 0;
  line-height: 1.4;
}

.flex-rules-summary[b-a3ivak56za] {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 12px;
}

.flex-rules-summary-label[b-a3ivak56za] {
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.flex-rules-summary-text[b-a3ivak56za] {
  font-size: 13px;
  color: var(--flex-text-header);
  margin: 4px 0 0;
  line-height: 1.5;
}

.flex-rules-remove-btn[b-a3ivak56za] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: transparent;
  color: #ef4444;
  border: 1px solid #fecaca;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: background 0.15s, border-color 0.15s;
  align-self: flex-start;
}

.flex-rules-remove-btn:hover[b-a3ivak56za] {
  background: #fef2f2;
  border-color: #ef4444;
}

/* Overlay */
.flex-style-defaults-overlay[b-ipmyfy3xps] {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

/* Modal */
.flex-style-defaults-modal[b-ipmyfy3xps] {
  background: var(--flex-bg-raised-panel);
  border: 1px solid var(--flex-border-color);
  border-radius: 8px;
  width: 800px;
  max-width: 90vw;
  height: 600px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

/* Header */
.flex-style-defaults-header[b-ipmyfy3xps] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--flex-border-color);
  flex-shrink: 0;
}

.flex-style-defaults-header h2[b-ipmyfy3xps] {
  margin: 0;
  font-size: 16px;
  color: var(--flex-text-header);
}

.flex-style-defaults-close-btn[b-ipmyfy3xps] {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--flex-text-header);
  padding: 0 4px;
  line-height: 1;
}

.flex-style-defaults-close-btn:hover[b-ipmyfy3xps] {
  opacity: 0.7;
}

/* Body */
.flex-style-defaults-body[b-ipmyfy3xps] {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* Widget List (Left Panel) */
.flex-style-defaults-widget-list[b-ipmyfy3xps] {
  width: 220px;
  border-right: 1px solid var(--flex-border-color);
  padding: 12px;
  overflow-y: auto;
  flex-shrink: 0;
}

.flex-style-defaults-widget-list h3[b-ipmyfy3xps] {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--flex-text-header);
  margin: 12px 0 6px 0;
  opacity: 0.7;
}

.flex-style-defaults-widget-list h3:first-child[b-ipmyfy3xps] {
  margin-top: 0;
}

.flex-style-defaults-widget-item[b-ipmyfy3xps] {
  padding: 8px 10px;
  margin-bottom: 4px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--flex-icon-color);
  transition: background 0.15s;
}

.flex-style-defaults-widget-item:hover[b-ipmyfy3xps] {
  background: var(--flex-bg-flex-widget);
}

.flex-style-defaults-widget-item.selected[b-ipmyfy3xps] {
  background: #2563eb;
  color: white;
}

.flex-style-defaults-widget-icon[b-ipmyfy3xps] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

[b-ipmyfy3xps] .flex-style-defaults-widget-icon svg {
  display: block;
}

/* Properties Panel (Right Panel) */
.flex-style-defaults-properties[b-ipmyfy3xps] {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
}

/* Preview Section */
.flex-style-defaults-preview[b-ipmyfy3xps] {
  margin-bottom: 16px;
}

.flex-style-defaults-preview-box[b-ipmyfy3xps] {
  background: white;
  border: 1px solid var(--flex-border-color);
  border-radius: 6px;
  padding: 16px;
  margin-top: 6px;
}

.flex-style-defaults-preview-unavailable[b-ipmyfy3xps] {
  color: var(--flex-text-header);
  opacity: 0.5;
  font-style: italic;
  font-size: 13px;
  margin: 0;
  text-align: center;
}

.flex-style-defaults-properties-content[b-ipmyfy3xps] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

[b-ipmyfy3xps] .flex-group-header {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--flex-text-header);
  margin-top: 8px;
  opacity: 0.7;
}

.flex-style-defaults-empty-state[b-ipmyfy3xps] {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--flex-text-header);
  opacity: 0.5;
  font-style: italic;
}

/* Scrollbar styling */
.flex-style-defaults-widget-list[b-ipmyfy3xps]::-webkit-scrollbar,
.flex-style-defaults-properties[b-ipmyfy3xps]::-webkit-scrollbar {
  width: 6px;
}

.flex-style-defaults-widget-list[b-ipmyfy3xps]::-webkit-scrollbar-track,
.flex-style-defaults-properties[b-ipmyfy3xps]::-webkit-scrollbar-track {
  background: transparent;
}

.flex-style-defaults-widget-list[b-ipmyfy3xps]::-webkit-scrollbar-thumb,
.flex-style-defaults-properties[b-ipmyfy3xps]::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

  .flex-style-defaults-widget-list[b-ipmyfy3xps]::-webkit-scrollbar-thumb:hover,
  .flex-style-defaults-properties[b-ipmyfy3xps]::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
  }

/* Text Alignment Editor */
.flex-alignment-editor[b-rh1udhr5z1] {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.flex-alignment-row[b-rh1udhr5z1] {
  display: flex;
  align-items: center;
  gap: 8px;
}

.flex-alignment-label[b-rh1udhr5z1] {
  font-size: 12px;
  color: var(--flex-text-header);
  min-width: 60px;
}

.flex-alignment-button-group[b-rh1udhr5z1] {
  display: flex;
  gap: 2px;
  background-color: #e5e7eb;
  border-radius: 6px;
  padding: 2px;
}

.flex-alignment-button[b-rh1udhr5z1] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 28px;
  padding: 4px;
  border: none;
  background-color: transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.flex-alignment-button:hover[b-rh1udhr5z1] {
  background-color: #d1d5db;
}

.flex-alignment-button:focus[b-rh1udhr5z1] {
  outline: none;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
}

.flex-alignment-button.active[b-rh1udhr5z1] {
  background-color: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.flex-alignment-button.active:hover[b-rh1udhr5z1] {
  background-color: #ffffff;
}

.flex-alignment-icon[b-rh1udhr5z1] {
  width: 18px;
  height: 18px;
  fill: #374151;
}

.flex-alignment-button.active .flex-alignment-icon[b-rh1udhr5z1] {
  fill: #1d4ed8;
}

.flex-property-group[b-dp47qv5nb7] {
  display: flex;
  flex-direction: column;
  margin-bottom: 6px;
}

.flex-property-group input[type="text"][b-dp47qv5nb7],
.flex-property-group input[type="number"][b-dp47qv5nb7],
.flex-property-group textarea[b-dp47qv5nb7],
.flex-property-group select[b-dp47qv5nb7] {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 14px;
  font-family: inherit;
  transition: all 0.2s;
}

.flex-property-group input[type="text"]:focus[b-dp47qv5nb7],
.flex-property-group input[type="number"]:focus[b-dp47qv5nb7],
.flex-property-group textarea:focus[b-dp47qv5nb7],
.flex-property-group select:focus[b-dp47qv5nb7] {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.flex-property-group input[type="text"]:disabled[b-dp47qv5nb7] {
  background: #f3f4f6;
  color: #9ca3af;
  cursor: not-allowed;
}

.flex-property-group input[type="checkbox"][b-dp47qv5nb7] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.flex-property-group textarea[b-dp47qv5nb7] {
  resize: vertical;
  min-height: 60px;
}

/* Text Alignment Editor */
.flex-alignment-editor[b-dp47qv5nb7] {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.flex-alignment-row[b-dp47qv5nb7] {
  display: flex;
  align-items: center;
  gap: 8px;
}

.flex-alignment-label[b-dp47qv5nb7] {
  font-size: 12px;
  color: #666;
  min-width: 60px;
}

.flex-alignment-button-group[b-dp47qv5nb7] {
  display: flex;
  gap: 2px;
  background-color: #e5e7eb;
  border-radius: 6px;
  padding: 2px;
}

.flex-alignment-button[b-dp47qv5nb7] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 28px;
  padding: 4px;
  border: none;
  background-color: transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.flex-alignment-button:hover[b-dp47qv5nb7] {
  background-color: #d1d5db;
}

.flex-alignment-button:focus[b-dp47qv5nb7] {
  outline: none;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
}

.flex-alignment-button.active[b-dp47qv5nb7] {
  background-color: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.flex-alignment-button.active:hover[b-dp47qv5nb7] {
  background-color: #ffffff;
}

.flex-alignment-icon[b-dp47qv5nb7] {
  width: 18px;
  height: 18px;
  fill: #374151;
}

.flex-alignment-button.active .flex-alignment-icon[b-dp47qv5nb7] {
  fill: #1d4ed8;
}

.flex-editable-property-label[b-dp47qv5nb7] {
  font-size: 14px;
  font-weight: 400;
  color: var(--flex-text-header);
}

.flex-editable-property-description[b-dp47qv5nb7] {
  color: var(--flex-text-header);
}


.flex-property-input-field[b-dp47qv5nb7] {
  flex-grow: 1;
  width: 100%;
  min-width: 0;
  padding: var(--flex-spacing-2);
  border: 1px solid var(--flex-color-gray-600);
  border-radius: var(--flex-radius-default);
  box-shadow: var(--flex-shadow-sm);
  line-height: var(--flex-line-height-tight);
  color: var(--flex-input-text);
  background-color: var(--flex-input-background);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  transition: border-color var(--flex-transition-fast), box-shadow var(--flex-transition-fast);
}

.flex-modal-overlay[b-hv4c9w067v] {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 1rem;
}

.flex-modal-container[b-hv4c9w067v] {
  background-color: #ffffff;
  border-radius: 0.5rem;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  max-width: 56rem;
  width: 100%;
  max-height: 90vh;
  overflow: hidden;
}

.dark .flex-modal-container[b-hv4c9w067v] {
  background-color: #1f2937;
}

.flex-modal-header[b-hv4c9w067v] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem;
  border-bottom: 1px solid #e5e7eb;
}

.dark .flex-modal-header[b-hv4c9w067v] {
  border-bottom-color: #374151;
}

.flex-modal-title[b-hv4c9w067v] {
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 600;
  color: #111827;
}

.dark .flex-modal-title[b-hv4c9w067v] {
  color: #f3f4f6;
}

.flex-modal-close[b-hv4c9w067v] {
  position: relative;
  color: #9ca3af;
  transition: color 150ms ease-in-out;
}

.flex-modal-close:hover[b-hv4c9w067v] {
  color: #4b5563;
}

.dark .flex-modal-close:hover[b-hv4c9w067v] {
  color: #d1d5db;
}

.flex-modal-body[b-hv4c9w067v] {
  padding: 1.5rem;
  overflow-y: auto;
  max-height: calc(90vh - 180px);
}

.flex-modal-footer[b-hv4c9w067v] {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1.5rem;
  border-top: 1px solid #e5e7eb;
}

.dark .flex-modal-footer[b-hv4c9w067v] {
  border-top-color: #374151;
}

.flex-modal-form-preview[b-hv4c9w067v] {
  background-color: #f9fafb;
  border-radius: 0.5rem;
  padding: 1rem;
  border: 1px solid #e5e7eb;
}

.dark .flex-modal-form-preview[b-hv4c9w067v] {
  background-color: #111827;
  border-color: #374151;
}

.flex-modal-instructions[b-hv4c9w067v] {
  margin: 0 0 12px 0;
  color: #6b7280;
  font-size: 14px;
}

.flex-choice-textarea[b-hv4c9w067v] {
  width: 100%;
  min-height: 300px;
  padding: 12px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  resize: vertical;
  box-sizing: border-box;
}

.flex-choice-textarea:focus[b-hv4c9w067v] {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.flex-choice-textarea[b-hv4c9w067v]::placeholder {
  color: #9ca3af;
}

.flex-validation-error[b-hv4c9w067v] {
  margin-top: 8px;
  padding: 8px 12px;
  background-color: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 4px;
  color: #dc2626;
  font-size: 14px;
}

/* Enum Choice List Editor Styles */
.flex-enum-choice-list-editor[b-av07xh66kw] {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 0;
}

.flex-enum-choice-header[b-av07xh66kw] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px;
}

.flex-enum-header-button-group[b-av07xh66kw] {
  display: flex;
  flex-direction: row;
  gap: 3px;
}

.flex-enum-choice-title[b-av07xh66kw] {
  font-weight: 600;
  font-size: 14px;
  color: var(--flex-text-header);
}

.flex-enum-choice-header-btn[b-av07xh66kw] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  background: var(--flex-property-edit-button-color);
  cursor: pointer;
  transition: all 0.15s ease;
}

.flex-enum-choice-header-btn:hover[b-av07xh66kw] {
  background: #f3f4f6;
  border-color: #9ca3af;
}

.dark .flex-enum-choice-header-btn:hover[b-av07xh66kw] {
  background: #e5e7eb;
}

.flex-enum-choice-open-csv-edit-modal-btn[b-av07xh66kw] {
  padding: 3px;
}

.flex-enum-choice-icon[b-av07xh66kw] {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.flex-enum-choice-table-header[b-av07xh66kw] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 500;
  color: #6b7280;
  border-bottom: 1px solid #e5e7eb;
}

.flex-enum-choice-drag-col[b-av07xh66kw] {
  width: 24px;
  flex-shrink: 0;
}

.flex-enum-choice-value-col[b-av07xh66kw] {
  flex: 1;
  min-width: 0;
}

.flex-enum-choice-text-col[b-av07xh66kw] {
  flex: 1;
  min-width: 0;
}

.flex-enum-choice-actions-col[b-av07xh66kw] {
  width: 32px;
  flex-shrink: 0;
}

.flex-enum-choice-list[b-av07xh66kw] {
  display: flex;
  flex-direction: column;
}

.flex-enum-choice-row[b-av07xh66kw] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 4px;
  transition: background-color 0.15s ease;
}

.flex-enum-choice-row:hover[b-av07xh66kw] {
  background: #f9fafb;
}

.dark .flex-enum-choice-row:hover[b-av07xh66kw] {
  background: #4b5563;
}

.flex-enum-choice-row.flex-dragging[b-av07xh66kw] {
  opacity: 0.5;
  background: #e5e7eb;
}

.flex-enum-choice-row.flex-drag-over-top[b-av07xh66kw] {
  box-shadow: inset 0 2px 0 0 #3b82f6;
}

.flex-enum-choice-row.flex-drag-over-bottom[b-av07xh66kw] {
  box-shadow: inset 0 -2px 0 0 #3b82f6;
}

.flex-enum-choice-row.flex-has-error[b-av07xh66kw] {
  background: #fef2f2;
}

.flex-enum-choice-drag-handle[b-av07xh66kw] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  cursor: grab;
  color: #9ca3af;
}

.flex-enum-choice-drag-handle:hover[b-av07xh66kw] {
  color: #6b7280;
}

.flex-enum-choice-drag-handle:active[b-av07xh66kw] {
  cursor: grabbing;
}

.flex-drag-icon[b-av07xh66kw] {
  width: 14px;
  height: 14px;
}

.flex-enum-choice-row .flex-input-field[b-av07xh66kw] {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 13px;
  transition: border-color 0.15s ease;
  color: var(--flex-text-header);
}

.flex-enum-choice-row .flex-input-field:focus[b-av07xh66kw] {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.flex-enum-choice-row .flex-input-field.flex-input-error[b-av07xh66kw] {
  border-color: #ef4444;
  background: #fef2f2;
}

.flex-enum-choice-row .flex-input-field[b-av07xh66kw]::placeholder {
  color: #9ca3af;
  font-style: italic;
}

.flex-enum-choice-delete-btn[b-av07xh66kw] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  color: var(--flex-property-edit-button-color);
  transition: all 0.15s ease;
}

.flex-enum-choice-delete-btn:hover:not(:disabled)[b-av07xh66kw] {
  background: #fee2e2;
  color: #ef4444;
}

.flex-enum-choice-delete-btn:disabled[b-av07xh66kw] {
  cursor: not-allowed;
  opacity: 0.4;
}

.flex-delete-icon[b-av07xh66kw] {
  width: 16px;
  height: 16px;
}

.flex-enum-choice-error[b-av07xh66kw] {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 40px;
  font-size: 12px;
  color: #dc2626;
}

.flex-error-icon[b-av07xh66kw] {
  width: 14px;
  height: 14px;
  fill: #dc2626;
}

.flex-flex-grid-definitions-editor[b-pd9jf8gqxu] {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.flex-flex-grid-definitions-list[b-pd9jf8gqxu] {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.flex-grid-definition-item[b-pd9jf8gqxu] {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background-color: var(--flex-color-gray-100, #f3f4f6);
  border: 1px solid var(--flex-color-gray-300, #d1d5db);
  border-radius: var(--flex-radius-default, 4px);
  transition: background-color 0.15s ease;
  min-width: 0;
}

.flex-grid-definition-item:hover[b-pd9jf8gqxu] {
  background-color: var(--flex-color-gray-200, #e5e7eb);
}

/* Drag and drop states */
.flex-grid-definition-item.flex-grid-definition-dragging[b-pd9jf8gqxu] {
  opacity: 0.5;
  background-color: var(--flex-color-gray-300, #d1d5db);
}

.flex-grid-definition-item.flex-grid-definition-drag-over-top[b-pd9jf8gqxu] {
  box-shadow: inset 0 2px 0 0 var(--flex-color-blue-500, #3b82f6);
}

.flex-grid-definition-item.flex-grid-definition-drag-over-bottom[b-pd9jf8gqxu] {
  box-shadow: inset 0 -2px 0 0 var(--flex-color-blue-500, #3b82f6);
}

/* Drag handle */
.flex-grid-definition-drag-handle[b-pd9jf8gqxu] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  flex-shrink: 0;
  cursor: grab;
  color: var(--flex-color-gray-400, #9ca3af);
  transition: color 0.15s ease;
}

.flex-grid-definition-drag-handle:hover[b-pd9jf8gqxu] {
  color: var(--flex-color-gray-600, #4b5563);
}

.flex-grid-definition-drag-handle:active[b-pd9jf8gqxu] {
  cursor: grabbing;
}

.flex-grid-definition-drag-icon[b-pd9jf8gqxu] {
  width: 14px;
  height: 14px;
}

.flex-grid-definition-label[b-pd9jf8gqxu] {
  font-size: 12px;
  font-weight: 500;
  color: var(--flex-text-header, #374151);
  min-width: 55px;
  flex-shrink: 0;
}

.flex-grid-column-width-adjustment-section[b-pd9jf8gqxu] {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.flex-grid-definition-type-select[b-pd9jf8gqxu] {
  flex: 1;
  min-width: 0;
  max-width: 100px;
  padding: 4px 6px !important;
  font-size: 12px !important;
}

.flex-grid-definition-value-container[b-pd9jf8gqxu] {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.flex-grid-definition-value-input[b-pd9jf8gqxu] {
  width: 50px !important;
  min-width: 50px !important;
  padding: 4px 6px !important;
  font-size: 12px !important;
  text-align: right;
}

.flex-grid-definition-value-input:disabled[b-pd9jf8gqxu] {
  background-color: var(--flex-color-gray-200, #e5e7eb);
  color: var(--flex-color-gray-500, #6b7280);
  cursor: not-allowed;
}

.flex-grid-definition-value-unit[b-pd9jf8gqxu] {
  font-size: 11px;
  color: var(--flex-color-gray-500, #6b7280);
  flex-shrink: 0;
}

.flex-grid-definition-actions[b-pd9jf8gqxu] {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  flex-shrink: 0;
}

.flex-grid-definition-action-btn[b-pd9jf8gqxu] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 2px;
  border: 1px solid var(--flex-color-gray-300, #d1d5db);
  background-color: var(--flex-color-white, #ffffff);
  border-radius: var(--flex-radius-default, 4px);
  cursor: pointer;
  transition: all 0.15s ease;
  color: var(--flex-color-gray-600, #4b5563);
}

.flex-grid-definition-action-btn:hover:not(:disabled)[b-pd9jf8gqxu] {
  background-color: var(--flex-color-gray-100, #f3f4f6);
  border-color: var(--flex-color-gray-400, #9ca3af);
}

.flex-grid-definition-action-btn:focus[b-pd9jf8gqxu] {
  outline: none;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
}

.flex-grid-definition-action-btn:disabled[b-pd9jf8gqxu] {
  opacity: 0.4;
  cursor: not-allowed;
}

.flex-grid-definition-remove-btn:hover:not(:disabled)[b-pd9jf8gqxu] {
  background-color: var(--flex-color-red-50, #fef2f2);
  border-color: var(--flex-color-red-300, #fca5a5);
  color: var(--flex-color-red-600, #dc2626);
}

.flex-grid-definition-icon[b-pd9jf8gqxu] {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.flex-grid-definition-add-btn[b-pd9jf8gqxu] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 8px 12px;
  margin-top: 2px;
  font-size: 13px;
  font-weight: 500;
  color: var(--flex-color-blue-600, #2563eb);
  background-color: var(--flex-color-blue-50, #eff6ff);
  border: 1px dashed var(--flex-color-blue-300, #93c5fd);
  border-radius: var(--flex-radius-default, 4px);
  cursor: pointer;
  transition: all 0.15s ease;
}

.flex-grid-definition-add-btn:hover[b-pd9jf8gqxu] {
  background-color: var(--flex-color-blue-100, #dbeafe);
  border-color: var(--flex-color-blue-400, #60a5fa);
}

.flex-grid-definition-add-btn:focus[b-pd9jf8gqxu] {
  outline: none;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
}

.flex-grid-definition-icon-add[b-pd9jf8gqxu] {
  width: 14px;
  height: 14px;
}

.flex-grid-definition-max-reached[b-pd9jf8gqxu] {
  font-size: 11px;
  font-style: italic;
  color: var(--flex-color-gray-500, #6b7280);
  text-align: center;
  padding: 6px;
}

/* Highlight animation for moved/added items */
@keyframes flex-grid-definition-highlight-b-pd9jf8gqxu {
  0% {
    background-color: var(--flex-color-blue-200, #bfdbfe);
    border-color: var(--flex-color-blue-400, #60a5fa);
  }

  100% {
    background-color: var(--flex-color-gray-100, #f3f4f6);
    border-color: var(--flex-color-gray-300, #d1d5db);
  }
}

.flex-grid-definition-item-highlighted[b-pd9jf8gqxu] {
  animation: flex-grid-definition-highlight-b-pd9jf8gqxu 0.6s ease-out forwards;
}

.flex-grid-column-width-adjustment-section[b-pd9jf8gqxu] {
  display: flex;
  flex-direction: column;
}

/* EditablePropertyGroup.razor.css */

.flex-property-group[b-n76lje12hr] {
  margin-bottom: 1rem;
}

.flex-property-group-summary[b-n76lje12hr] {
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.75rem;
  color: var(--flex-text-header);
  cursor: pointer;
  user-select: none;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.flex-property-group-summary:hover[b-n76lje12hr] {
  color: rgb(31, 41, 55);
}


.flex-property-group-summary:hover[b-n76lje12hr] {
  color: rgb(31, 41, 55);
}

.flex-group-header[b-n76lje12hr] {
  color: var(--flex-text-header);
}

.flex-orientation-editor[b-p1sh8dhihg] {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.flex-orientation-button-group[b-p1sh8dhihg] {
  display: flex;
  gap: 2px;
  background-color: #e5e7eb;
  border-radius: 6px;
  padding: 2px;
}

.flex-orientation-button[b-p1sh8dhihg] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 1;
  height: 32px;
  padding: 4px 12px;
  border: none;
  background-color: transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.flex-orientation-button:hover[b-p1sh8dhihg] {
  background-color: #d1d5db;
}

.flex-orientation-button:focus[b-p1sh8dhihg] {
  outline: none;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
}

.flex-orientation-button.active[b-p1sh8dhihg] {
  background-color: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.flex-orientation-button.active:hover[b-p1sh8dhihg] {
  background-color: #ffffff;
}

.flex-orientation-icon[b-p1sh8dhihg] {
  width: 16px;
  height: 16px;
  fill: #374151;
  flex-shrink: 0;
}

.flex-orientation-button.active .flex-orientation-icon[b-p1sh8dhihg] {
  fill: #1d4ed8;
}

.flex-orientation-label[b-p1sh8dhihg] {
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  white-space: nowrap;
}

.flex-orientation-button.active .flex-orientation-label[b-p1sh8dhihg] {
  color: #1d4ed8;
}

/* Properties Panel */
.flex-properties-panel[b-qkobdqfr8e] {
  width: 300px;
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--flex-bg-raised-panel);
  border-left: 1px solid #e5e7eb;
  padding: 20px;
  overflow-y: auto;
}

.flex-properties-panel-title[b-qkobdqfr8e] {
  color: var(--flex-text-header);
}

.flex-properties-panel-type[b-qkobdqfr8e] {
  color: var(--flex-text-header);
}

.flex-properties-panel.flex-hidden[b-qkobdqfr8e] {
  display: none;
}

.flex-properties-panel h2[b-qkobdqfr8e] {
  font-size: 16px;
  margin-bottom: 15px;
  color: var(--flex-text-header);
}

/* Scrollbar styling */
.flex-properties-panel[b-qkobdqfr8e]::-webkit-scrollbar {
  width: 8px;
}

.flex-properties-panel[b-qkobdqfr8e]::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.flex-properties-panel[b-qkobdqfr8e]::-webkit-scrollbar-thumb {
  background: #cbd5e1;
}

  .flex-properties-panel[b-qkobdqfr8e]::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
  }

.flex-properties-content[b-qkobdqfr8e] {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.flex-widget-icon[b-qkobdqfr8e] {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  margin-right: 0.25em;
  color: var(--flex-text-header);
}

.flex-widget-icon svg[b-qkobdqfr8e] {
  display: block;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .flex-properties-panel[b-qkobdqfr8e] {
    width: 250px;
  }
}

@media (max-width: 768px) {
  .flex-properties-panel[b-qkobdqfr8e] {
    width: 100%;
    max-height: 200px;
  }
}

/* EditablePropertySection.razor.css */

.flex-property-section-summary[b-tnjekj713y] {
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.75rem;
  color: var(--flex-text-header);
  cursor: pointer;
  user-select: none;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.flex-property-section-summary:hover[b-tnjekj713y] {
  color: rgb(31, 41, 55);
}

.flex-details-content[b-tnjekj713y] {
  /* Add padding/margin as needed */
}

.flex-details-content-inner[b-tnjekj713y] {
  /* Add padding/margin as needed */
}

.flex-string-list-editor[b-0z70439f5f] {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.flex-string-list-header[b-0z70439f5f] {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-string-list-title[b-0z70439f5f] {
  font-size: 0.75rem;
  font-weight: 600;
  color: rgb(55, 65, 81);
}

.flex-string-list-add-btn[b-0z70439f5f] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  color: rgb(107, 114, 128);
}

.flex-string-list-add-btn:hover[b-0z70439f5f] {
  color: rgb(37, 99, 235);
}

.flex-string-list-icon[b-0z70439f5f] {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}

.flex-string-list-items[b-0z70439f5f] {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.flex-string-list-row[b-0z70439f5f] {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.flex-string-list-input[b-0z70439f5f] {
  flex: 1;
  min-width: 0;
}

.flex-string-list-delete-btn[b-0z70439f5f] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  color: rgb(156, 163, 175);
  flex-shrink: 0;
}

.flex-string-list-delete-btn:hover:not(:disabled)[b-0z70439f5f] {
  color: rgb(239, 68, 68);
}

.flex-string-list-delete-btn:disabled[b-0z70439f5f] {
  opacity: 0.3;
  cursor: not-allowed;
}

.flex-string-list-delete-icon[b-0z70439f5f] {
  width: 0.875rem;
  height: 0.875rem;
}

.flex-toggle-switch-container[b-4uz54jq3nd] {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
  padding-left: 2px;
}

.flex-toggle-switch[b-4uz54jq3nd] {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
  color: var(--flex-text-header);
}

.flex-toggle-switch input[b-4uz54jq3nd] {
  opacity: 0;
  width: 0;
  height: 0;
}

.flex-toggle-slider[b-4uz54jq3nd] {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #d1d5db;
  transition: background-color 0.2s ease;
  border-radius: 24px;
}

  .flex-toggle-slider[b-4uz54jq3nd]::before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: transform 0.2s ease;
    border-radius: 50%;
  }

.flex-toggle-switch input:checked + .flex-toggle-slider[b-4uz54jq3nd] {
  background-color: #2563eb;
}

  .flex-toggle-switch input:checked + .flex-toggle-slider[b-4uz54jq3nd]::before {
    transform: translateX(20px);
  }

.flex-toggle-state-label[b-4uz54jq3nd] {
  font-size: 13px;
  font-weight: 500;
  color: var(--flex-text-header);
  user-select: none;
}

.flex-widget-item {
  padding: 12px 16px;
  margin-bottom: 10px;
  background: var(--flex-bg-flex-widget);
  border: 2px solid var(--flex-border-flex-widget);
  border-radius: 6px;
  cursor: move;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.2s;
  user-select: none;
  max-height: 35px;
  color: var(--flex-icon-color);
}

  .flex-widget-item svg {
    display: block;
  }

.flex-widget-item-disabled {
  color: #CBD5E1;
  /*    background: #f9fafb;*/
  cursor: not-allowed;
  opacity: 0.5;
}

.flex-widget-item:hover:not(.flex-widget-item-disabled) {
  background: #f3f4f6;
  border-color: #2563eb;
  color: #2563eb;
}

.dark .flex-widget-item:hover:not(.flex-widget-item-disabled) {
  background: #1e2939;
}

.flex-widget-item:active {
  opacity: 0.7;
}

.flex-widget-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Widgets Panel */
.flex-widgets-panel {
  width: 250px;
  background: var(--flex-bg-raised-panel);
  border-right: 1px solid var(--flex-border-color);
  padding: 20px;
  overflow-y: auto;
  flex-shrink: 0;
}

  .flex-widgets-panel.hidden {
    display: none;
  }

  .flex-widgets-panel h2 {
    font-size: 16px;
    margin-bottom: 15px;
    color: var(--flex-text-header);
  }

.flex-widgets-panel-header {
  margin-bottom: 16px;
}

.flex-edit-defaults-btn {
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: 1px solid var(--flex-border-color);
  border-radius: 4px;
  color: var(--flex-text-header);
  cursor: pointer;
  font-size: 13px;
  transition: all 0.15s;
}

  .flex-edit-defaults-btn:hover {
    background: #2563eb;
    border-color: #2563eb;
    color: white;
  }

/* ============================================
   JSON Drawer Panel Styles
   ============================================ */

.flex-json-drawer[b-c5y34fdv8t] {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #1e1e2e;
  border-top: 1px solid #313244;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
  z-index: 100;
  display: flex;
  flex-direction: column;
  font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
  transition: height 0.05s ease-out;
}

.flex-json-drawer.flex-collapsed[b-c5y34fdv8t] {
  height: auto !important;
}

/* Drag Handle */
.flex-json-drawer-handle[b-c5y34fdv8t] {
  height: 6px;
  background: transparent;
  cursor: ns-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.flex-json-drawer.flex-collapsed .flex-json-drawer-handle[b-c5y34fdv8t] {
  display: none;
}

.flex-handle-grip[b-c5y34fdv8t] {
  width: 40px;
  height: 4px;
  background: #45475a;
  border-radius: 2px;
  transition: background 0.2s;
}

.flex-json-drawer-handle:hover .flex-handle-grip[b-c5y34fdv8t] {
  background: #585b70;
}

/* Header */
.flex-json-drawer-header[b-c5y34fdv8t] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  height: 36px;
  background: #181825;
  border-bottom: 1px solid #313244;
  flex-shrink: 0;
}

.flex-json-drawer-tab[b-c5y34fdv8t] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: transparent;
  border: none;
  color: #cdd6f4;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.2s;
}

.flex-json-drawer-tab:hover[b-c5y34fdv8t] {
  background: #313244;
}

.flex-tab-icon[b-c5y34fdv8t] {
  font-size: 10px;
  transition: transform 0.2s ease;
  color: #6c7086;
}

.flex-tab-icon.flex-expanded[b-c5y34fdv8t] {
  transform: rotate(180deg);
}

.flex-tab-label[b-c5y34fdv8t] {
  letter-spacing: 0.5px;
}

/* Action Buttons */
.flex-json-drawer-actions[b-c5y34fdv8t] {
  display: flex;
  gap: 4px;
}

.flex-drawer-action-btn[b-c5y34fdv8t] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: #6c7086;
  cursor: pointer;
  transition: all 0.2s;
}

.flex-drawer-action-btn:hover[b-c5y34fdv8t] {
  background: #313244;
  color: #cdd6f4;
}

/* Content Area */
.flex-json-drawer-content[b-c5y34fdv8t] {
  flex: 1;
  overflow: auto;
  padding: 12px 16px;
  min-height: 0;
}

/* Resize Overlay */
.flex-resize-overlay[b-c5y34fdv8t] {
  position: fixed;
  inset: 0;
  z-index: 9999;
  cursor: ns-resize;
}

/* ============================================
   JSON Tree View Styles (::deep for child component)
   ============================================ */

[b-c5y34fdv8t] .flex-json-tree {
  font-size: 13px;
  line-height: 1.6;
  color: #cdd6f4;
}

[b-c5y34fdv8t] .flex-json-node {
  padding-left: calc(var(--depth, 0) * 6px);
}

[b-c5y34fdv8t] .flex-json-line {
  display: flex;
  align-items: center;
  min-height: 22px;
  padding: 1px 0;
  border-radius: 3px;
  transition: background 0.15s;
}

  [b-c5y34fdv8t] .flex-json-line:hover {
    background: rgba(69, 71, 90, 0.3);
  }

/* Toggle Button */
[b-c5y34fdv8t] .flex-json-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-right: 4px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}

[b-c5y34fdv8t] .flex-toggle-icon {
  font-size: 8px;
  color: #6c7086;
  transition: transform 0.15s ease;
}

[b-c5y34fdv8t] .flex-json-toggle.flex-expanded .flex-toggle-icon {
  transform: rotate(90deg);
}

[b-c5y34fdv8t] .flex-json-toggle:hover .flex-toggle-icon {
  color: #cdd6f4;
}

[b-c5y34fdv8t] .flex-json-toggle-spacer {
  width: 20px;
  flex-shrink: 0;
}

/* Syntax Highlighting */
[b-c5y34fdv8t] .flex-json-key {
  color: #89b4fa;
}

[b-c5y34fdv8t] .flex-json-string {
  color: #a6e3a1;
}

[b-c5y34fdv8t] .flex-json-number {
  color: #fab387;
}

[b-c5y34fdv8t] .flex-json-boolean {
  color: #cba6f7;
}

[b-c5y34fdv8t] .flex-json-null {
  color: #f38ba8;
  font-style: italic;
}

[b-c5y34fdv8t] .flex-json-punctuation {
  color: #6c7086;
}

[b-c5y34fdv8t] .flex-json-bracket {
  color: #f9e2af;
}

[b-c5y34fdv8t] .flex-json-comma {
  color: #6c7086;
}

[b-c5y34fdv8t] .flex-json-collapsed-indicator {
  color: #6c7086;
  font-style: italic;
  margin: 0 4px;
}

/* Children Container */
[b-c5y34fdv8t] .flex-json-children {
  display: flex;
  flex-direction: column;
}

/* Highlighting */
[b-c5y34fdv8t] .flex-json-node.flex-highlighted > .flex-json-line {
  background: rgba(250, 179, 135, 0.15);
  box-shadow: inset 3px 0 0 #fab387;
}

[b-c5y34fdv8t] .flex-json-node.flex-contains-highlighted > .flex-json-line {
  background: rgba(137, 180, 250, 0.08);
}

/* Error State */
[b-c5y34fdv8t] .flex-json-error {
  color: #f38ba8;
  padding: 12px;
  background: rgba(243, 139, 168, 0.1);
  border-radius: 6px;
  border: 1px solid rgba(243, 139, 168, 0.3);
}

/* Scrollbar Styling */
.flex-json-drawer-content[b-c5y34fdv8t]::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.flex-json-drawer-content[b-c5y34fdv8t]::-webkit-scrollbar-track {
  background: #181825;
}

.flex-json-drawer-content[b-c5y34fdv8t]::-webkit-scrollbar-thumb {
  background: #45475a;
  border-radius: 4px;
}

  .flex-json-drawer-content[b-c5y34fdv8t]::-webkit-scrollbar-thumb:hover {
    background: #585b70;
  }

/* Animation for smooth expand/collapse */
@keyframes flex-slideUp-b-c5y34fdv8t {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.flex-json-drawer.flex-expanded .flex-json-drawer-content[b-c5y34fdv8t] {
  animation: flex-slideUp-b-c5y34fdv8t 0.2s ease-out;
}

.flex-rules-panel {
  width: 300px;
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--flex-bg-raised-panel);
  border-left: 1px solid #e5e7eb;
  padding: 20px;
  overflow-y: auto;
}

.flex-rules-panel-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 15px;
  color: var(--flex-text-header);
}

.flex-rules-panel-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.flex-rules-panel-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #9ca3af;
  padding: 40px 20px;
  gap: 16px;
}

.flex-rules-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: #2563eb;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: background 0.15s;
}

  .flex-rules-add-btn:hover {
    background: #1d4ed8;
  }

.flex-rules-editor {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.flex-rules-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.flex-rules-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--flex-text-header);
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.flex-rules-select,
.flex-rules-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 13px;
  color: var(--flex-text-header);
  background: var(--flex-input-background, white);
  transition: border-color 0.15s;
}

  .flex-rules-select:focus,
  .flex-rules-input:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
  }

.flex-rules-hint {
  font-size: 12px;
  color: #9ca3af;
  margin: 0;
  line-height: 1.4;
}

.flex-rules-summary {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 12px;
}

.flex-rules-summary-label {
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.flex-rules-summary-text {
  font-size: 13px;
  color: var(--flex-text-header);
  margin: 4px 0 0;
  line-height: 1.5;
}

.flex-rules-remove-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: transparent;
  color: #ef4444;
  border: 1px solid #fecaca;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: background 0.15s, border-color 0.15s;
  align-self: flex-start;
}

  .flex-rules-remove-btn:hover {
    background: #fef2f2;
    border-color: #ef4444;
  }

array-flex-editor-control[b-d1rd76nrw2] {
  display: block;
  padding: 0.5rem;
}

.flex-array-editor-header[b-d1rd76nrw2] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.flex-array-editor-add-btn[b-d1rd76nrw2] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  border: 1px solid rgb(156, 163, 175);
  background: white;
  cursor: pointer;
  font-size: 0.75rem;
  color: rgb(75, 85, 99);
  transition: background-color 0.15s;
}

.flex-array-editor-add-btn:hover[b-d1rd76nrw2] {
  background: rgb(243, 244, 246);
}

.flex-array-editor-grid[b-d1rd76nrw2] {
  display: grid;
  gap: 0;
  border: 1px solid rgb(209, 213, 219);
  border-radius: 0.375rem;
  overflow: hidden;
}

.flex-array-editor-column-header[b-d1rd76nrw2] {
  padding: 0.375rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: rgb(55, 65, 81);
  background: rgb(243, 244, 246);
  border-bottom: 1px solid rgb(209, 213, 219);
  border-right: 1px solid rgb(229, 231, 235);
}

.flex-array-editor-column-header:last-child[b-d1rd76nrw2] {
  border-right: none;
}

.flex-array-editor-actions-header[b-d1rd76nrw2] {
  width: 2.5rem;
}

.flex-array-editor-cell[b-d1rd76nrw2] {
  padding: 0.25rem;
  border-bottom: 1px solid rgb(229, 231, 235);
  border-right: 1px solid rgb(229, 231, 235);
  min-height: 3rem;
  display: flex;
  align-items: center;
}

.flex-array-editor-cell:last-child[b-d1rd76nrw2] {
  border-right: none;
}

.flex-array-editor-actions-cell[b-d1rd76nrw2] {
  justify-content: center;
  width: 2.5rem;
}

.flex-array-editor-delete-btn[b-d1rd76nrw2] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border: none;
  background: transparent;
  cursor: pointer;
  color: rgb(156, 163, 175);
  font-size: 0.7rem;
  border-radius: 0.25rem;
  transition: color 0.15s, background-color 0.15s;
}

.flex-array-editor-delete-btn:hover[b-d1rd76nrw2] {
  color: rgb(239, 68, 68);
  background: rgb(254, 226, 226);
}

/* Drop Indicator Wrapper */
.flex-form-element-wrapper[b-7jiu5fgz14] {
  position: relative;
}
/* Drop Indicators - Bright Lines */
.flex-form-element-wrapper.flex-drag-over-top[b-7jiu5fgz14]::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 0;
  right: 0;
  height: 4px;
  background: #3b82f6;
  border-radius: 2px;
  z-index: 100;
  box-shadow: 0 0 8px rgba(59, 130, 246, 0.6);
  animation: flex-dropIndicatorPulse-b-7jiu5fgz14 1s ease-in-out infinite;
}

.flex-form-element-wrapper.flex-drag-over-bottom[b-7jiu5fgz14]::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 4px;
  background: #3b82f6;
  border-radius: 2px;
  z-index: 100;
  box-shadow: 0 0 8px rgba(59, 130, 246, 0.6);
  animation: flex-dropIndicatorPulse-b-7jiu5fgz14 1s ease-in-out infinite;
}

.flex-form-element-wrapper.flex-drag-over-left[b-7jiu5fgz14]::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -2px;
  width: 4px;
  background: #10b981;
  border-radius: 2px;
  z-index: 100;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
  animation: flex-dropIndicatorPulse-b-7jiu5fgz14 1s ease-in-out infinite;
}

.flex-form-element-wrapper.flex-drag-over-right[b-7jiu5fgz14]::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: -2px;
  width: 4px;
  background: #10b981;
  border-radius: 2px;
  z-index: 100;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
  animation: flex-dropIndicatorPulse-b-7jiu5fgz14 1s ease-in-out infinite;
}

@keyframes flex-dropIndicatorPulse-b-7jiu5fgz14 {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: 0.7;
  }
}

.flex-form-element[b-7jiu5fgz14] {
  padding: 15px;
  background: var(--flex-bg-form-element);
  border-radius: 6px;
  cursor: move;
  position: relative;
  flex: 1;
}

.flex-form-element.flex-in-row[b-7jiu5fgz14] {
  margin-bottom: 0;
}

.flex-form-element.flex-preview-mode[b-7jiu5fgz14] {
  background: white;
  border: none;
  cursor: default;
  padding: 12px 0;
}

.flex-form-element .flex-element-controls[b-7jiu5fgz14] {
  visibility: hidden;
}

.flex-form-element:hover:not(:has(.flex-form-element:hover)):not(.flex-preview-mode) > .flex-element-controls[b-7jiu5fgz14] {
  visibility: visible;
}

.flex-form-element:not(.flex-preview-mode)[b-7jiu5fgz14] {
  border: 1px solid var(--flex-border-flex-widget);
}

.flex-form-element:hover:not(:has(.flex-form-element:hover)):not(.flex-preview-mode):not(.flex-selected)[b-7jiu5fgz14] {
  border-color: transparent;
  outline: 3px solid #8c8c8c;
}

.flex-form-element.flex-selected[b-7jiu5fgz14] {
  border-color: transparent;
  outline: 3px solid #62e3a4;
}

.flex-form-element.flex-selected > .flex-element-controls[b-7jiu5fgz14] {
  visibility: visible;
}

.flex-form-element-outer.flex-dragging[b-7jiu5fgz14] {
  opacity: 0.5;
}
/* Dragging Placeholder */
.flex-form-element.flex-dragging-placeholder[b-7jiu5fgz14] {
  background: #f3f4f6;
  border: 2px dashed #9ca3af;
  opacity: 0.5;
  min-height: 60px;
}

.flex-editor-drop-zone-table[b-qjl0zkh102] {
  min-height: 6rem;
  width: 100%;
  border: 2px dashed rgb(107, 114, 128);
  border-radius: 0.375rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-editor-drop-zone-table label[b-qjl0zkh102] {
  color: var(--flex-input-text);
}

.flex-editor-drop-zone-table.flex-drag-over-table-cell[b-qjl0zkh102] {
  background: #e4f2ff;
}

/* Overlay */
.flex-style-defaults-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

/* Modal */
.flex-style-defaults-modal {
  background: var(--flex-bg-raised-panel);
  border: 1px solid var(--flex-border-color);
  border-radius: 8px;
  width: 800px;
  max-width: 90vw;
  height: 600px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

/* Header */
.flex-style-defaults-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--flex-border-color);
  flex-shrink: 0;
}

  .flex-style-defaults-header h2 {
    margin: 0;
    font-size: 16px;
    color: var(--flex-text-header);
  }

.flex-style-defaults-close-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--flex-text-header);
  padding: 0 4px;
  line-height: 1;
}

  .flex-style-defaults-close-btn:hover {
    opacity: 0.7;
  }

/* Body */
.flex-style-defaults-body {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* Widget List (Left Panel) */
.flex-style-defaults-widget-list {
  width: 220px;
  border-right: 1px solid var(--flex-border-color);
  padding: 12px;
  overflow-y: auto;
  flex-shrink: 0;
}

  .flex-style-defaults-widget-list h3 {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--flex-text-header);
    margin: 12px 0 6px 0;
    opacity: 0.7;
  }

    .flex-style-defaults-widget-list h3:first-child {
      margin-top: 0;
    }

.flex-style-defaults-widget-item {
  padding: 8px 10px;
  margin-bottom: 4px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--flex-icon-color);
  transition: background 0.15s;
}

  .flex-style-defaults-widget-item:hover {
    background: var(--flex-bg-flex-widget);
  }

  .flex-style-defaults-widget-item.selected {
    background: #2563eb;
    color: white;
  }

.flex-style-defaults-widget-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

::deep .flex-style-defaults-widget-icon svg {
  display: block;
}

/* Properties Panel (Right Panel) */
.flex-style-defaults-properties {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
}

/* Preview Section */
.flex-style-defaults-preview {
  margin-bottom: 16px;
}

.flex-style-defaults-preview-box {
  background: white;
  border: 1px solid var(--flex-border-color);
  border-radius: 6px;
  padding: 16px;
  margin-top: 6px;
}

.flex-style-defaults-preview-unavailable {
  color: var(--flex-text-header);
  opacity: 0.5;
  font-style: italic;
  font-size: 13px;
  margin: 0;
  text-align: center;
}

.flex-style-defaults-properties-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

::deep .flex-group-header {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--flex-text-header);
  margin-top: 8px;
  opacity: 0.7;
}

.flex-style-defaults-empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--flex-text-header);
  opacity: 0.5;
  font-style: italic;
}

/* Scrollbar styling */
.flex-style-defaults-widget-list::-webkit-scrollbar,
.flex-style-defaults-properties::-webkit-scrollbar {
  width: 6px;
}

.flex-style-defaults-widget-list::-webkit-scrollbar-track,
.flex-style-defaults-properties::-webkit-scrollbar-track {
  background: transparent;
}

.flex-style-defaults-widget-list::-webkit-scrollbar-thumb,
.flex-style-defaults-properties::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

  .flex-style-defaults-widget-list::-webkit-scrollbar-thumb:hover,
  .flex-style-defaults-properties::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
  }

.flex-stub-panel[b-fsxw1kia73] {
  width: 300px;
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--flex-bg-raised-panel);
  border-left: 1px solid #e5e7eb;
  padding: 20px;
  overflow-y: auto;
}

.flex-stub-panel-title[b-fsxw1kia73] {
  font-size: 16px;
  margin-bottom: 15px;
  color: var(--flex-text-header);
}

.flex-stub-panel-content[b-fsxw1kia73] {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.flex-stub-panel-empty[b-fsxw1kia73] {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #9ca3af;
  padding: 40px 20px;
}

.flex-stub-panel-placeholder[b-fsxw1kia73] {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40px 20px;
  gap: 8px;
}

.flex-stub-panel-placeholder-icon[b-fsxw1kia73] {
  width: 40px;
  height: 40px;
  color: #cbd5e1;
  margin-bottom: 8px;
}

.flex-stub-panel-placeholder-title[b-fsxw1kia73] {
  font-size: 14px;
  font-weight: 600;
  color: #94a3b8;
  margin: 0;
}

.flex-stub-panel-placeholder-desc[b-fsxw1kia73] {
  font-size: 13px;
  color: #9ca3af;
  line-height: 1.5;
  margin: 0;
}

.flex-stub-panel[b-jjb98mjkgl] {
  width: 300px;
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--flex-bg-raised-panel);
  border-left: 1px solid #e5e7eb;
  padding: 20px;
  overflow-y: auto;
}

.flex-stub-panel-title[b-jjb98mjkgl] {
  font-size: 16px;
  margin-bottom: 15px;
  color: var(--flex-text-header);
}

.flex-stub-panel-content[b-jjb98mjkgl] {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.flex-stub-panel-empty[b-jjb98mjkgl] {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #9ca3af;
  padding: 40px 20px;
}

.flex-stub-panel-placeholder[b-jjb98mjkgl] {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40px 20px;
  gap: 8px;
}

.flex-stub-panel-placeholder-icon[b-jjb98mjkgl] {
  width: 40px;
  height: 40px;
  color: #cbd5e1;
  margin-bottom: 8px;
}

.flex-stub-panel-placeholder-title[b-jjb98mjkgl] {
  font-size: 14px;
  font-weight: 600;
  color: #94a3b8;
  margin: 0;
}

.flex-stub-panel-placeholder-desc[b-jjb98mjkgl] {
  font-size: 13px;
  color: #9ca3af;
  line-height: 1.5;
  margin: 0;
}

/* Text Alignment Editor */
.flex-alignment-editor {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.flex-alignment-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.flex-alignment-label {
  font-size: 12px;
  color: var(--flex-text-header);
  min-width: 60px;
}

.flex-alignment-button-group {
  display: flex;
  gap: 2px;
  background-color: #e5e7eb;
  border-radius: 6px;
  padding: 2px;
}

.flex-alignment-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 28px;
  padding: 4px;
  border: none;
  background-color: transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

  .flex-alignment-button:hover {
    background-color: #d1d5db;
  }

  .flex-alignment-button:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
  }

  .flex-alignment-button.active {
    background-color: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }

    .flex-alignment-button.active:hover {
      background-color: #ffffff;
    }

.flex-alignment-icon {
  width: 18px;
  height: 18px;
  fill: #374151;
}

.flex-alignment-button.active .flex-alignment-icon {
  fill: #1d4ed8;
}

.flex-property-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 6px;
}

  .flex-property-group input[type="text"],
  .flex-property-group input[type="number"],
  .flex-property-group textarea,
  .flex-property-group select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 14px;
    font-family: inherit;
    transition: all 0.2s;
  }

    .flex-property-group input[type="text"]:focus,
    .flex-property-group input[type="number"]:focus,
    .flex-property-group textarea:focus,
    .flex-property-group select:focus {
      outline: none;
      border-color: #2563eb;
      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
    }

    .flex-property-group input[type="text"]:disabled {
      background: #f3f4f6;
      color: #9ca3af;
      cursor: not-allowed;
    }

  .flex-property-group input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
  }

  .flex-property-group textarea {
    resize: vertical;
    min-height: 60px;
  }

/* Text Alignment Editor */
.flex-alignment-editor {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.flex-alignment-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.flex-alignment-label {
  font-size: 12px;
  color: #666;
  min-width: 60px;
}

.flex-alignment-button-group {
  display: flex;
  gap: 2px;
  background-color: #e5e7eb;
  border-radius: 6px;
  padding: 2px;
}

.flex-alignment-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 28px;
  padding: 4px;
  border: none;
  background-color: transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

  .flex-alignment-button:hover {
    background-color: #d1d5db;
  }

  .flex-alignment-button:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
  }

  .flex-alignment-button.active {
    background-color: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }

    .flex-alignment-button.active:hover {
      background-color: #ffffff;
    }

.flex-alignment-icon {
  width: 18px;
  height: 18px;
  fill: #374151;
}

.flex-alignment-button.active .flex-alignment-icon {
  fill: #1d4ed8;
}

.flex-editable-property-label {
  font-size: 14px;
  font-weight: 400;
  color: var(--flex-text-header);
}

.flex-editable-property-description {
  color: var(--flex-text-header);
}


.flex-property-input-field {
  flex-grow: 1;
  width: 100%;
  min-width: 0;
  padding: var(--flex-spacing-2);
  border: 1px solid var(--flex-color-gray-600);
  border-radius: var(--flex-radius-default);
  box-shadow: var(--flex-shadow-sm);
  line-height: var(--flex-line-height-tight);
  color: var(--flex-input-text);
  background-color: var(--flex-input-background);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  transition: border-color var(--flex-transition-fast), box-shadow var(--flex-transition-fast);
}

.flex-modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 1rem;
}

.flex-modal-container {
  background-color: #ffffff;
  border-radius: 0.5rem;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  max-width: 56rem;
  width: 100%;
  max-height: 90vh;
  overflow: hidden;
}

.dark .flex-modal-container {
  background-color: #1f2937;
}

.flex-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem;
  border-bottom: 1px solid #e5e7eb;
}

.dark .flex-modal-header {
  border-bottom-color: #374151;
}

.flex-modal-title {
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 600;
  color: #111827;
}

.dark .flex-modal-title {
  color: #f3f4f6;
}

.flex-modal-close {
  position: relative;
  color: #9ca3af;
  transition: color 150ms ease-in-out;
}

  .flex-modal-close:hover {
    color: #4b5563;
  }

.dark .flex-modal-close:hover {
  color: #d1d5db;
}

.flex-modal-body {
  padding: 1.5rem;
  overflow-y: auto;
  max-height: calc(90vh - 180px);
}

.flex-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1.5rem;
  border-top: 1px solid #e5e7eb;
}

.dark .flex-modal-footer {
  border-top-color: #374151;
}

.flex-modal-form-preview {
  background-color: #f9fafb;
  border-radius: 0.5rem;
  padding: 1rem;
  border: 1px solid #e5e7eb;
}

.dark .flex-modal-form-preview {
  background-color: #111827;
  border-color: #374151;
}

.flex-modal-instructions {
  margin: 0 0 12px 0;
  color: #6b7280;
  font-size: 14px;
}

.flex-choice-textarea {
  width: 100%;
  min-height: 300px;
  padding: 12px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  resize: vertical;
  box-sizing: border-box;
}

  .flex-choice-textarea:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  }

  .flex-choice-textarea::placeholder {
    color: #9ca3af;
  }

.flex-validation-error {
  margin-top: 8px;
  padding: 8px 12px;
  background-color: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 4px;
  color: #dc2626;
  font-size: 14px;
}

/* Enum Choice List Editor Styles */
.flex-enum-choice-list-editor {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 0;
}

.flex-enum-choice-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px;
}

.flex-enum-header-button-group {
  display: flex;
  flex-direction: row;
  gap: 3px;
}

.flex-enum-choice-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--flex-text-header);
}

.flex-enum-choice-header-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  background: var(--flex-property-edit-button-color);
  cursor: pointer;
  transition: all 0.15s ease;
}

  .flex-enum-choice-header-btn:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
  }

.dark .flex-enum-choice-header-btn:hover {
  background: #e5e7eb;
}

.flex-enum-choice-open-csv-edit-modal-btn {
  padding: 3px;
}

.flex-enum-choice-icon {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.flex-enum-choice-table-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 500;
  color: #6b7280;
  border-bottom: 1px solid #e5e7eb;
}

.flex-enum-choice-drag-col {
  width: 24px;
  flex-shrink: 0;
}

.flex-enum-choice-value-col {
  flex: 1;
  min-width: 0;
}

.flex-enum-choice-text-col {
  flex: 1;
  min-width: 0;
}

.flex-enum-choice-actions-col {
  width: 32px;
  flex-shrink: 0;
}

.flex-enum-choice-list {
  display: flex;
  flex-direction: column;
}

.flex-enum-choice-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 4px;
  transition: background-color 0.15s ease;
}

  .flex-enum-choice-row:hover {
    background: #f9fafb;
  }

.dark .flex-enum-choice-row:hover {
  background: #4b5563;
}

.flex-enum-choice-row.flex-dragging {
  opacity: 0.5;
  background: #e5e7eb;
}

.flex-enum-choice-row.flex-drag-over-top {
  box-shadow: inset 0 2px 0 0 #3b82f6;
}

.flex-enum-choice-row.flex-drag-over-bottom {
  box-shadow: inset 0 -2px 0 0 #3b82f6;
}

.flex-enum-choice-row.flex-has-error {
  background: #fef2f2;
}

.flex-enum-choice-drag-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  cursor: grab;
  color: #9ca3af;
}

  .flex-enum-choice-drag-handle:hover {
    color: #6b7280;
  }

  .flex-enum-choice-drag-handle:active {
    cursor: grabbing;
  }

.flex-drag-icon {
  width: 14px;
  height: 14px;
}

.flex-enum-choice-row .flex-input-field {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 13px;
  transition: border-color 0.15s ease;
  color: var(--flex-text-header);
}

  .flex-enum-choice-row .flex-input-field:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
  }

  .flex-enum-choice-row .flex-input-field.flex-input-error {
    border-color: #ef4444;
    background: #fef2f2;
  }

  .flex-enum-choice-row .flex-input-field::placeholder {
    color: #9ca3af;
    font-style: italic;
  }

.flex-enum-choice-delete-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  color: var(--flex-property-edit-button-color);
  transition: all 0.15s ease;
}

  .flex-enum-choice-delete-btn:hover:not(:disabled) {
    background: #fee2e2;
    color: #ef4444;
  }

  .flex-enum-choice-delete-btn:disabled {
    cursor: not-allowed;
    opacity: 0.4;
  }

.flex-delete-icon {
  width: 16px;
  height: 16px;
}

.flex-enum-choice-error {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 40px;
  font-size: 12px;
  color: #dc2626;
}

.flex-error-icon {
  width: 14px;
  height: 14px;
  fill: #dc2626;
}

.flex-flex-grid-definitions-editor {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.flex-flex-grid-definitions-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.flex-grid-definition-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background-color: var(--flex-color-gray-100, #f3f4f6);
  border: 1px solid var(--flex-color-gray-300, #d1d5db);
  border-radius: var(--flex-radius-default, 4px);
  transition: background-color 0.15s ease;
  min-width: 0;
}

  .flex-grid-definition-item:hover {
    background-color: var(--flex-color-gray-200, #e5e7eb);
  }

  /* Drag and drop states */
  .flex-grid-definition-item.flex-grid-definition-dragging {
    opacity: 0.5;
    background-color: var(--flex-color-gray-300, #d1d5db);
  }

  .flex-grid-definition-item.flex-grid-definition-drag-over-top {
    box-shadow: inset 0 2px 0 0 var(--flex-color-blue-500, #3b82f6);
  }

  .flex-grid-definition-item.flex-grid-definition-drag-over-bottom {
    box-shadow: inset 0 -2px 0 0 var(--flex-color-blue-500, #3b82f6);
  }

/* Drag handle */
.flex-grid-definition-drag-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  flex-shrink: 0;
  cursor: grab;
  color: var(--flex-color-gray-400, #9ca3af);
  transition: color 0.15s ease;
}

  .flex-grid-definition-drag-handle:hover {
    color: var(--flex-color-gray-600, #4b5563);
  }

  .flex-grid-definition-drag-handle:active {
    cursor: grabbing;
  }

.flex-grid-definition-drag-icon {
  width: 14px;
  height: 14px;
}

.flex-grid-definition-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--flex-text-header, #374151);
  min-width: 55px;
  flex-shrink: 0;
}

.flex-grid-column-width-adjustment-section {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.flex-grid-definition-type-select {
  flex: 1;
  min-width: 0;
  max-width: 100px;
  padding: 4px 6px !important;
  font-size: 12px !important;
}

.flex-grid-definition-value-container {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.flex-grid-definition-value-input {
  width: 50px !important;
  min-width: 50px !important;
  padding: 4px 6px !important;
  font-size: 12px !important;
  text-align: right;
}

  .flex-grid-definition-value-input:disabled {
    background-color: var(--flex-color-gray-200, #e5e7eb);
    color: var(--flex-color-gray-500, #6b7280);
    cursor: not-allowed;
  }

.flex-grid-definition-value-unit {
  font-size: 11px;
  color: var(--flex-color-gray-500, #6b7280);
  flex-shrink: 0;
}

.flex-grid-definition-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  flex-shrink: 0;
}

.flex-grid-definition-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 2px;
  border: 1px solid var(--flex-color-gray-300, #d1d5db);
  background-color: var(--flex-color-white, #ffffff);
  border-radius: var(--flex-radius-default, 4px);
  cursor: pointer;
  transition: all 0.15s ease;
  color: var(--flex-color-gray-600, #4b5563);
}

  .flex-grid-definition-action-btn:hover:not(:disabled) {
    background-color: var(--flex-color-gray-100, #f3f4f6);
    border-color: var(--flex-color-gray-400, #9ca3af);
  }

  .flex-grid-definition-action-btn:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
  }

  .flex-grid-definition-action-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }

.flex-grid-definition-remove-btn:hover:not(:disabled) {
  background-color: var(--flex-color-red-50, #fef2f2);
  border-color: var(--flex-color-red-300, #fca5a5);
  color: var(--flex-color-red-600, #dc2626);
}

.flex-grid-definition-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.flex-grid-definition-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 8px 12px;
  margin-top: 2px;
  font-size: 13px;
  font-weight: 500;
  color: var(--flex-color-blue-600, #2563eb);
  background-color: var(--flex-color-blue-50, #eff6ff);
  border: 1px dashed var(--flex-color-blue-300, #93c5fd);
  border-radius: var(--flex-radius-default, 4px);
  cursor: pointer;
  transition: all 0.15s ease;
}

  .flex-grid-definition-add-btn:hover {
    background-color: var(--flex-color-blue-100, #dbeafe);
    border-color: var(--flex-color-blue-400, #60a5fa);
  }

  .flex-grid-definition-add-btn:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
  }

.flex-grid-definition-icon-add {
  width: 14px;
  height: 14px;
}

.flex-grid-definition-max-reached {
  font-size: 11px;
  font-style: italic;
  color: var(--flex-color-gray-500, #6b7280);
  text-align: center;
  padding: 6px;
}

/* Highlight animation for moved/added items */
@keyframes flex-grid-definition-highlight {
  0% {
    background-color: var(--flex-color-blue-200, #bfdbfe);
    border-color: var(--flex-color-blue-400, #60a5fa);
  }

  100% {
    background-color: var(--flex-color-gray-100, #f3f4f6);
    border-color: var(--flex-color-gray-300, #d1d5db);
  }
}

.flex-grid-definition-item-highlighted {
  animation: flex-grid-definition-highlight 0.6s ease-out forwards;
}

.flex-grid-column-width-adjustment-section {
  display: flex;
  flex-direction: column;
}

/* EditablePropertyGroup.razor.css */

.flex-property-group {
  margin-bottom: 1rem;
}

.flex-property-group-summary {
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.75rem;
  color: var(--flex-text-header);
  cursor: pointer;
  user-select: none;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

  .flex-property-group-summary:hover {
    color: rgb(31, 41, 55);
  }


  .flex-property-group-summary:hover {
    color: rgb(31, 41, 55);
  }

.flex-group-header {
  color: var(--flex-text-header);
}

.flex-orientation-editor {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.flex-orientation-button-group {
  display: flex;
  gap: 2px;
  background-color: #e5e7eb;
  border-radius: 6px;
  padding: 2px;
}

.flex-orientation-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 1;
  height: 32px;
  padding: 4px 12px;
  border: none;
  background-color: transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

  .flex-orientation-button:hover {
    background-color: #d1d5db;
  }

  .flex-orientation-button:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
  }

  .flex-orientation-button.active {
    background-color: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }

    .flex-orientation-button.active:hover {
      background-color: #ffffff;
    }

.flex-orientation-icon {
  width: 16px;
  height: 16px;
  fill: #374151;
  flex-shrink: 0;
}

.flex-orientation-button.active .flex-orientation-icon {
  fill: #1d4ed8;
}

.flex-orientation-label {
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  white-space: nowrap;
}

.flex-orientation-button.active .flex-orientation-label {
  color: #1d4ed8;
}

/* Properties Panel */
.flex-properties-panel {
  width: 300px;
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--flex-bg-raised-panel);
  border-left: 1px solid #e5e7eb;
  padding: 20px;
  overflow-y: auto;
}

.flex-properties-panel-title {
  color: var(--flex-text-header);
}

.flex-properties-panel-type {
  color: var(--flex-text-header);
}

.flex-properties-panel.flex-hidden {
  display: none;
}

.flex-properties-panel h2 {
  font-size: 16px;
  margin-bottom: 15px;
  color: var(--flex-text-header);
}

/* Scrollbar styling */
.flex-properties-panel::-webkit-scrollbar {
  width: 8px;
}

.flex-properties-panel::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.flex-properties-panel::-webkit-scrollbar-thumb {
  background: #cbd5e1;
}

  .flex-properties-panel::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
  }

.flex-properties-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.flex-widget-icon {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  margin-right: 0.25em;
  color: var(--flex-text-header);
}

  .flex-widget-icon svg {
    display: block;
  }

/* Responsive adjustments */
@media (max-width: 1024px) {
  .flex-properties-panel {
    width: 250px;
  }
}

@media (max-width: 768px) {
  .flex-properties-panel {
    width: 100%;
    max-height: 200px;
  }
}

/* EditablePropertySection.razor.css */

.flex-property-section-summary {
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.75rem;
  color: var(--flex-text-header);
  cursor: pointer;
  user-select: none;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

  .flex-property-section-summary:hover {
    color: rgb(31, 41, 55);
  }

.flex-details-content {
  /* Add padding/margin as needed */
}

.flex-details-content-inner {
  /* Add padding/margin as needed */
}

.flex-string-list-editor {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.flex-string-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-string-list-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: rgb(55, 65, 81);
}

.flex-string-list-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  color: rgb(107, 114, 128);
}

  .flex-string-list-add-btn:hover {
    color: rgb(37, 99, 235);
  }

.flex-string-list-icon {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}

.flex-string-list-items {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.flex-string-list-row {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.flex-string-list-input {
  flex: 1;
  min-width: 0;
}

.flex-string-list-delete-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  color: rgb(156, 163, 175);
  flex-shrink: 0;
}

  .flex-string-list-delete-btn:hover:not(:disabled) {
    color: rgb(239, 68, 68);
  }

  .flex-string-list-delete-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
  }

.flex-string-list-delete-icon {
  width: 0.875rem;
  height: 0.875rem;
}

.flex-toggle-switch-container {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
  padding-left: 2px;
}

.flex-toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
  color: var(--flex-text-header);
}

  .flex-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }

.flex-toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #d1d5db;
  transition: background-color 0.2s ease;
  border-radius: 24px;
}

  .flex-toggle-slider::before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: transform 0.2s ease;
    border-radius: 50%;
  }

.flex-toggle-switch input:checked + .flex-toggle-slider {
  background-color: #2563eb;
}

  .flex-toggle-switch input:checked + .flex-toggle-slider::before {
    transform: translateX(20px);
  }

.flex-toggle-state-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--flex-text-header);
  user-select: none;
}

.flex-panel-sidebar[b-ghzz6zbgfk] {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 4px;
  background: var(--flex-bg-recessed, #f1f5f9);
  border-left: 1px solid #e5e7eb;
  flex-shrink: 0;
  align-self: stretch;
}

.flex-panel-sidebar-btn[b-ghzz6zbgfk] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 6px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--flex-text-muted, #94a3b8);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.flex-panel-sidebar-btn svg[b-ghzz6zbgfk] {
  width: 20px;
  height: 20px;
}

.flex-panel-sidebar-btn:hover[b-ghzz6zbgfk] {
  background: var(--flex-bg-hover, #e2e8f0);
  color: var(--flex-text-header, #1e293b);
}

.flex-panel-sidebar-btn--active[b-ghzz6zbgfk] {
  background: var(--flex-bg-raised-panel, #ffffff);
  color: #2563eb;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.flex-panel-sidebar-btn--active:hover[b-ghzz6zbgfk] {
  color: #2563eb;
}

.flex-editor-toolbar[b-sb35kq7eco] {
  height: 40px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  padding: 0 20px;
  flex-shrink: 0;
  gap: 8px;
}

.flex-toolbar-group[b-sb35kq7eco] {
  display: flex;
  align-items: center;
  gap: 4px;
}

.flex-toolbar-btn[b-sb35kq7eco] {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  background: white;
  color: #334155;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.flex-toolbar-btn:hover:not(:disabled)[b-sb35kq7eco] {
  background: #e2e8f0;
  border-color: #cbd5e1;
}

.flex-toolbar-btn:disabled[b-sb35kq7eco] {
  opacity: 0.4;
  cursor: default;
}

.flex-toolbar-action-text[b-sb35kq7eco] {
  font-size: 12px;
  color: #64748b;
  margin-left: 8px;
  opacity: 1;
  transition: opacity 0.5s ease;
}

.flex-toolbar-action-text.fading[b-sb35kq7eco] {
  opacity: 0;
}

/* ============================================
   JSON Drawer Panel Styles
   ============================================ */

.flex-json-drawer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #1e1e2e;
  border-top: 1px solid #313244;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
  z-index: 100;
  display: flex;
  flex-direction: column;
  font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
  transition: height 0.05s ease-out;
}

  .flex-json-drawer.flex-collapsed {
    height: auto !important;
  }

/* Drag Handle */
.flex-json-drawer-handle {
  height: 6px;
  background: transparent;
  cursor: ns-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.flex-json-drawer.flex-collapsed .flex-json-drawer-handle {
  display: none;
}

.flex-handle-grip {
  width: 40px;
  height: 4px;
  background: #45475a;
  border-radius: 2px;
  transition: background 0.2s;
}

.flex-json-drawer-handle:hover .flex-handle-grip {
  background: #585b70;
}

/* Header */
.flex-json-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  height: 36px;
  background: #181825;
  border-bottom: 1px solid #313244;
  flex-shrink: 0;
}

.flex-json-drawer-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: transparent;
  border: none;
  color: #cdd6f4;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.2s;
}

  .flex-json-drawer-tab:hover {
    background: #313244;
  }

.flex-tab-icon {
  font-size: 10px;
  transition: transform 0.2s ease;
  color: #6c7086;
}

  .flex-tab-icon.flex-expanded {
    transform: rotate(180deg);
  }

.flex-tab-label {
  letter-spacing: 0.5px;
}

/* Action Buttons */
.flex-json-drawer-actions {
  display: flex;
  gap: 4px;
}

.flex-drawer-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: #6c7086;
  cursor: pointer;
  transition: all 0.2s;
}

  .flex-drawer-action-btn:hover {
    background: #313244;
    color: #cdd6f4;
  }

/* Content Area */
.flex-json-drawer-content {
  flex: 1;
  overflow: auto;
  padding: 12px 16px;
  min-height: 0;
}

/* Resize Overlay */
.flex-resize-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  cursor: ns-resize;
}

/* ============================================
   JSON Tree View Styles (::deep for child component)
   ============================================ */

::deep .flex-json-tree {
  font-size: 13px;
  line-height: 1.6;
  color: #cdd6f4;
}

::deep .flex-json-node {
  padding-left: calc(var(--depth, 0) * 6px);
}

::deep .flex-json-line {
  display: flex;
  align-items: center;
  min-height: 22px;
  padding: 1px 0;
  border-radius: 3px;
  transition: background 0.15s;
}

  ::deep .flex-json-line:hover {
    background: rgba(69, 71, 90, 0.3);
  }

/* Toggle Button */
::deep .flex-json-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-right: 4px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}

::deep .flex-toggle-icon {
  font-size: 8px;
  color: #6c7086;
  transition: transform 0.15s ease;
}

::deep .flex-json-toggle.flex-expanded .flex-toggle-icon {
  transform: rotate(90deg);
}

::deep .flex-json-toggle:hover .flex-toggle-icon {
  color: #cdd6f4;
}

::deep .flex-json-toggle-spacer {
  width: 20px;
  flex-shrink: 0;
}

/* Syntax Highlighting */
::deep .flex-json-key {
  color: #89b4fa;
}

::deep .flex-json-string {
  color: #a6e3a1;
}

::deep .flex-json-number {
  color: #fab387;
}

::deep .flex-json-boolean {
  color: #cba6f7;
}

::deep .flex-json-null {
  color: #f38ba8;
  font-style: italic;
}

::deep .flex-json-punctuation {
  color: #6c7086;
}

::deep .flex-json-bracket {
  color: #f9e2af;
}

::deep .flex-json-comma {
  color: #6c7086;
}

::deep .flex-json-collapsed-indicator {
  color: #6c7086;
  font-style: italic;
  margin: 0 4px;
}

/* Children Container */
::deep .flex-json-children {
  display: flex;
  flex-direction: column;
}

/* Highlighting */
::deep .flex-json-node.flex-highlighted > .flex-json-line {
  background: rgba(250, 179, 135, 0.15);
  box-shadow: inset 3px 0 0 #fab387;
}

::deep .flex-json-node.flex-contains-highlighted > .flex-json-line {
  background: rgba(137, 180, 250, 0.08);
}

/* Error State */
::deep .flex-json-error {
  color: #f38ba8;
  padding: 12px;
  background: rgba(243, 139, 168, 0.1);
  border-radius: 6px;
  border: 1px solid rgba(243, 139, 168, 0.3);
}

/* Scrollbar Styling */
.flex-json-drawer-content::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.flex-json-drawer-content::-webkit-scrollbar-track {
  background: #181825;
}

.flex-json-drawer-content::-webkit-scrollbar-thumb {
  background: #45475a;
  border-radius: 4px;
}

  .flex-json-drawer-content::-webkit-scrollbar-thumb:hover {
    background: #585b70;
  }

/* Animation for smooth expand/collapse */
@keyframes flex-slideUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.flex-json-drawer.flex-expanded .flex-json-drawer-content {
  animation: flex-slideUp 0.2s ease-out;
}

.flex-form-editor[b-b083r3f6u1] {
  display: flex;
  flex-direction: column;
  height: stretch;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  background: var(--flex-bg-primary);
  margin: 0;
  padding: 0;
  width: 100%;
  flex: 1;
  min-width: 0;
  transition: padding-bottom 0.2s ease;
  position: relative;
}

/* Skeleton loader */
.flex-skeleton-loader[b-b083r3f6u1] {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  padding: 8px 0;
}

.flex-skeleton-row[b-b083r3f6u1] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.flex-skeleton-label[b-b083r3f6u1] {
  height: 14px;
  width: 30%;
  background: #e2e8f0;
  border-radius: 4px;
  animation: flex-skeletonPulse-b-b083r3f6u1 1.5s ease-in-out infinite;
}

.flex-skeleton-label--short[b-b083r3f6u1] {
  width: 20%;
}

.flex-skeleton-input[b-b083r3f6u1] {
  height: 38px;
  width: 100%;
  background: #e2e8f0;
  border-radius: 6px;
  animation: flex-skeletonPulse-b-b083r3f6u1 1.5s ease-in-out infinite;
  animation-delay: 0.1s;
}

.flex-skeleton-input--tall[b-b083r3f6u1] {
  height: 80px;
}

@keyframes flex-skeletonPulse-b-b083r3f6u1 {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: 0.4;
  }
}

.dark .flex-form-editor[b-b083r3f6u1] {
  background: #D1D5DB;
}

.flex-form-editor.flex-drawer-open[b-b083r3f6u1] {
  padding-bottom: var(--drawer-height, 250px);
}

.flex-header[b-b083r3f6u1] {
  height: 60px;
  background: #2563eb;
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  flex-shrink: 0;
}

.flex-header h1[b-b083r3f6u1] {
  font-size: 20px;
  font-weight: 600;
  margin: 0;
}

.flex-back-to-company-forms-button[b-b083r3f6u1] {
  max-height: 20px;
  display: inline-flex;
  flex-direction: row;
  max-width: 70px;
}

.flex-form-selector[b-b083r3f6u1] {
  display: flex;
  align-items: center;
}

.flex-form-selector select[b-b083r3f6u1] {
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  min-width: 180px;
  transition: all 0.2s;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='white' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

.flex-form-selector select:hover[b-b083r3f6u1] {
  background-color: rgba(255, 255, 255, 0.3);
}

.flex-form-selector select:focus[b-b083r3f6u1] {
  outline: none;
  background-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4);
}

.flex-form-selector select option[b-b083r3f6u1] {
  background: #2563eb;
  color: white;
  padding: 8px;
}

.flex-mode-toggle[b-b083r3f6u1] {
  display: flex;
  gap: 8px;
  background: rgba(255, 255, 255, 0.2);
  padding: 4px;
  border-radius: 6px;
}

.flex-mode-btn[b-b083r3f6u1] {
  padding: 8px 16px;
  background: transparent;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s;
}

.flex-mode-btn.flex-active[b-b083r3f6u1] {
  background: white;
  color: #2563eb;
}

.flex-mode-btn:hover:not(.flex-active)[b-b083r3f6u1] {
  background: rgba(255, 255, 255, 0.1);
}

.flex-form-editor-container[b-b083r3f6u1] {
  display: flex;
  flex: 1;
  overflow: hidden;
  padding: 0px;
  width: 100%;
  margin: 0;
  box-sizing: border-box;
}

.flex-nested-component-container[b-b083r3f6u1] {
}



/* Right Panel */
.flex-editor-right-panel[b-b083r3f6u1] {
  display: flex;
  flex-direction: row;
  flex-shrink: 0;
  align-self: stretch;
  overflow: hidden;
}

.flex-editor-right-panel.flex-hidden[b-b083r3f6u1] {
  display: none;
}

.flex-editor-right-panel-content[b-b083r3f6u1] {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

/* Panel Sidebar */
.flex-panel-sidebar[b-b083r3f6u1] {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 4px;
  background: var(--flex-bg-recessed, #f1f5f9);
  border-left: 1px solid #e5e7eb;
  flex-shrink: 0;
  align-self: stretch;
}

.flex-panel-sidebar-btn[b-b083r3f6u1] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 6px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--flex-text-muted, #94a3b8);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.flex-panel-sidebar-btn svg[b-b083r3f6u1] {
  width: 20px;
  height: 20px;
}

.flex-panel-sidebar-btn:hover[b-b083r3f6u1] {
  background: var(--flex-bg-hover, #e2e8f0);
  color: var(--flex-text-header, #1e293b);
}

.flex-panel-sidebar-btn--active[b-b083r3f6u1] {
  background: var(--flex-bg-raised-panel, #ffffff);
  color: #2563eb;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.flex-panel-sidebar-btn--active:hover[b-b083r3f6u1] {
  color: #2563eb;
}

/* Canvas */
.flex-editor-container[b-b083r3f6u1] {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 40px;
  overflow-y: auto;
  background: var(--flex-bg-primary);
}

.flex-canvas[b-b083r3f6u1] {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 40px;
  width: 100%;
}

.flex-form-container[b-b083r3f6u1] {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0 auto;
  background: var(--flex-bg-primary);
  padding: 0;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  min-height: 400px;
}

.flex-form-title[b-b083r3f6u1] {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 30px;
  color: var(--flex-text-header);
}

.flex-drop-zone[b-b083r3f6u1] {
  min-height: 200px;
  border: 2px dashed #d1d5db;
  border-radius: 8px;
  padding: 20px;
}

.flex-drop-zone.flex-drag-over[b-b083r3f6u1] {
  background: #eff6ff;
  border-color: #2563eb;
}

.flex-drop-zone.flex-preview-mode[b-b083r3f6u1] {
  border: none;
  padding: 0;
}

.flex-drag-over-container .flex-drop-zone[b-b083r3f6u1] {
  /*    outline: 2px dashed #3b82f6;
    outline-offset: 4px;*/
  background-color: rgba(59, 130, 246, 0.05);
}

.flex-empty-state[b-b083r3f6u1] {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  color: #9ca3af;
}

/* Empty canvas drag-over highlight */
.flex-canvas.flex-drag-over-container[b-b083r3f6u1] {
  outline: 3px dashed #3b82f6;
  outline-offset: -4px;
  background-color: rgba(59, 130, 246, 0.06);
  animation: flex-emptyCanvasPulse-b-b083r3f6u1 1.5s ease-in-out infinite;
}

@keyframes flex-emptyCanvasPulse-b-b083r3f6u1 {
  0%, 100% {
    background-color: rgba(59, 130, 246, 0.06);
  }

  50% {
    background-color: rgba(59, 130, 246, 0.12);
  }
}

.flex-empty-state p[b-b083r3f6u1] {
  font-size: 16px;
  margin-bottom: 8px;
}

.flex-empty-state small[b-b083r3f6u1] {
  font-size: 14px;
  color: #d1d5db;
}

/* Form Elements */
.flex-form-row[b-b083r3f6u1] {
  display: flex;
  gap: 15px;
  margin-bottom: 15px;
}


.flex-element-controls[b-b083r3f6u1] {
  place-self: flex-end;
}


.flex-control-btn[b-b083r3f6u1] {
  position: relative;
  top: -15px;
  left: 15px;
  padding: 2px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.2s;
}

.flex-control-btn:hover[b-b083r3f6u1] {
  background: #F9FAFB;
}

.flex-control-btn:hover svg path[b-b083r3f6u1] {
  stroke: #c31e1e;
  fill: #c31e1e;
}

.flex-element-label[b-b083r3f6u1] {
  font-size: 11px;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  font-weight: 600;
}

.flex-element-preview[b-b083r3f6u1] {
  font-size: 14px;
  color: #374151;
  font-weight: 500;
}

.flex-option-row[b-b083r3f6u1] {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.flex-option-row input[b-b083r3f6u1] {
  flex: 1;
}

.flex-remove-option-btn[b-b083r3f6u1] {
  width: 30px;
  height: 30px;
  background: #ef4444;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s;
}

.flex-remove-option-btn:hover[b-b083r3f6u1] {
  background: #dc2626;
}

.flex-add-option-btn[b-b083r3f6u1] {
  width: 100%;
  padding: 8px 12px;
  background: #2563eb;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s;
  margin-top: 8px;
}

.flex-add-option-btn:hover[b-b083r3f6u1] {
  background: #1d4ed8;
}

/* Scrollbar styling */
.flex-widgets-panel[b-b083r3f6u1]::-webkit-scrollbar,
.flex-canvas[b-b083r3f6u1]::-webkit-scrollbar {
  width: 8px;
}

.flex-widgets-panel[b-b083r3f6u1]::-webkit-scrollbar-track,
.flex-canvas[b-b083r3f6u1]::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.flex-widgets-panel[b-b083r3f6u1]::-webkit-scrollbar-thumb,
.flex-canvas[b-b083r3f6u1]::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

  .flex-widgets-panel[b-b083r3f6u1]::-webkit-scrollbar-thumb:hover,
  .flex-canvas[b-b083r3f6u1]::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
  }



horizontal-layout-flex-editor-control[b-b083r3f6u1] {
  min-height: 60px;
  position: relative;
}

horizontal-layout-flex-editor-control.flex-drag-over-container[b-b083r3f6u1] {
  background-color: rgba(59, 130, 246, 0.1);
}


details .flex-details-summary[b-b083r3f6u1] {
  list-style: none;
}

  details .flex-details-summary[b-b083r3f6u1]::-webkit-details-marker {
    display: none;
  }

  details .flex-details-summary[b-b083r3f6u1]::before {
    content: "▶";
    display: inline-block;
    margin-right: 0.5rem;
    transition: transform 0.3s ease;
  }

details[open] .flex-details-summary[b-b083r3f6u1]::before {
  transform: rotate(90deg);
}

details .flex-details-content[b-b083r3f6u1] {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}

.flex-details-content .flex-details-content-inner[b-b083r3f6u1] {
  display: flex;
  flex-direction: column;
}

.flex-details-content .flex-group-header[b-b083r3f6u1] {
  font-weight: 500;
  border-bottom: solid gray;
  width: 100%;
  border-bottom-width: 1px;
  border-bottom-color: lightgray;
  color: #282828;
  margin-top: 4px;
}

details[open] .flex-details-content[b-b083r3f6u1] {
  grid-template-rows: 1fr;
}

/* More specific: targets open details that are in the process of closing */
details[open].flex-closing .flex-details-content[b-b083r3f6u1] {
  grid-template-rows: 0fr;
}

details[open].flex-closing .flex-details-summary[b-b083r3f6u1]::before {
  transform: rotate(0deg);
}

details .flex-details-content > div[b-b083r3f6u1] {
  overflow: hidden;
}

#flex-select-parent-button[b-b083r3f6u1] {
  font-size: 12px;
  padding: 5px;
  border-radius: 5px;
  background: rgba(21,93,252, 0.15);
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .flex-widgets-panel[b-b083r3f6u1] {
    width: 200px;
  }
}

@media (max-width: 768px) {
  .flex-container[b-b083r3f6u1] {
    flex-direction: column;
  }

  .flex-widgets-panel[b-b083r3f6u1] {
    width: 100%;
    max-height: 200px;
  }

  .flex-canvas[b-b083r3f6u1] {
    padding: 20px;
    cursor: pointer;
  }

  .flex-form-container[b-b083r3f6u1] {
    padding: 0;
  }

  .flex-drag-ghost[b-b083r3f6u1] {
    position: fixed;
    pointer-events: none;
    z-index: 10000;
    transform: translate(-50%, -50%);
    animation: flex-dragGhostAppear-b-b083r3f6u1 0.15s ease-out;
  }

  @keyframes flex-dragGhostAppear-b-b083r3f6u1 {
    from {
      opacity: 0;
      transform: translate(-50%, -50%) scale(0.95);
    }

    to {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
    }
  }

  .flex-drag-ghost-content[b-b083r3f6u1] {
    background: white;
    border: 2px solid #2563eb;
    border-radius: 6px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2), 0 6px 12px rgba(37, 99, 235, 0.3);
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    white-space: nowrap;
  }


  .flex-dragging-placeholder-content[b-b083r3f6u1] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    color: #9ca3af;
    font-size: 14px;
    font-style: italic;
  }

  .flex-dragging-overlay[b-b083r3f6u1] {
    background-color: rgba(0,0,0,0.5); /* Black background with opacity */
  }




  /* Container Drop Zone Enhancement */
  .flex-drag-over-container[b-b083r3f6u1] {
    outline: 3px solid #3b82f6;
    outline-offset: 4px;
    background-color: rgba(59, 130, 246, 0.08);
    animation: flex-containerPulse-b-b083r3f6u1 1.5s ease-in-out infinite;
  }

  @keyframes flex-containerPulse-b-b083r3f6u1 {
    0%, 100% {
      background-color: rgba(59, 130, 246, 0.08);
    }

    50% {
      background-color: rgba(59, 130, 246, 0.15);
    }
  }
}

array-flex-editor-control {
  display: block;
  padding: 0.5rem;
}

.flex-array-editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.flex-array-editor-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  border: 1px solid rgb(156, 163, 175);
  background: white;
  cursor: pointer;
  font-size: 0.75rem;
  color: rgb(75, 85, 99);
  transition: background-color 0.15s;
}

  .flex-array-editor-add-btn:hover {
    background: rgb(243, 244, 246);
  }

.flex-array-editor-grid {
  display: grid;
  gap: 0;
  border: 1px solid rgb(209, 213, 219);
  border-radius: 0.375rem;
  overflow: hidden;
}

.flex-array-editor-column-header {
  padding: 0.375rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: rgb(55, 65, 81);
  background: rgb(243, 244, 246);
  border-bottom: 1px solid rgb(209, 213, 219);
  border-right: 1px solid rgb(229, 231, 235);
}

  .flex-array-editor-column-header:last-child {
    border-right: none;
  }

.flex-array-editor-actions-header {
  width: 2.5rem;
}

.flex-array-editor-cell {
  padding: 0.25rem;
  border-bottom: 1px solid rgb(229, 231, 235);
  border-right: 1px solid rgb(229, 231, 235);
  min-height: 3rem;
  display: flex;
  align-items: center;
}

  .flex-array-editor-cell:last-child {
    border-right: none;
  }

.flex-array-editor-actions-cell {
  justify-content: center;
  width: 2.5rem;
}

.flex-array-editor-delete-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border: none;
  background: transparent;
  cursor: pointer;
  color: rgb(156, 163, 175);
  font-size: 0.7rem;
  border-radius: 0.25rem;
  transition: color 0.15s, background-color 0.15s;
}

  .flex-array-editor-delete-btn:hover {
    color: rgb(239, 68, 68);
    background: rgb(254, 226, 226);
  }

/* Drop Indicator Wrapper */
.flex-form-element-wrapper {
  position: relative;
}
  /* Drop Indicators - Bright Lines */
  .flex-form-element-wrapper.flex-drag-over-top::before {
    content: '';
    position: absolute;
    top: -2px;
    left: 0;
    right: 0;
    height: 4px;
    background: #3b82f6;
    border-radius: 2px;
    z-index: 100;
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.6);
    animation: flex-dropIndicatorPulse 1s ease-in-out infinite;
  }

  .flex-form-element-wrapper.flex-drag-over-bottom::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 4px;
    background: #3b82f6;
    border-radius: 2px;
    z-index: 100;
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.6);
    animation: flex-dropIndicatorPulse 1s ease-in-out infinite;
  }

  .flex-form-element-wrapper.flex-drag-over-left::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -2px;
    width: 4px;
    background: #10b981;
    border-radius: 2px;
    z-index: 100;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
    animation: flex-dropIndicatorPulse 1s ease-in-out infinite;
  }

  .flex-form-element-wrapper.flex-drag-over-right::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: -2px;
    width: 4px;
    background: #10b981;
    border-radius: 2px;
    z-index: 100;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
    animation: flex-dropIndicatorPulse 1s ease-in-out infinite;
  }

@keyframes flex-dropIndicatorPulse {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: 0.7;
  }
}

.flex-form-element {
  padding: 15px;
  background: var(--flex-bg-form-element);
  border-radius: 6px;
  cursor: move;
  position: relative;
  flex: 1;
}

  .flex-form-element.flex-in-row {
    margin-bottom: 0;
  }

  .flex-form-element.flex-preview-mode {
    background: white;
    border: none;
    cursor: default;
    padding: 12px 0;
  }

  .flex-form-element .flex-element-controls {
    visibility: hidden;
  }

  .flex-form-element:hover:not(:has(.flex-form-element:hover)):not(.flex-preview-mode) > .flex-element-controls {
    visibility: visible;
  }

  .flex-form-element:not(.flex-preview-mode) {
    border: 1px solid var(--flex-border-flex-widget);
  }

  .flex-form-element:hover:not(:has(.flex-form-element:hover)):not(.flex-preview-mode):not(.flex-selected) {
    border-color: transparent;
    outline: 3px solid #8c8c8c;
  }

  .flex-form-element.flex-selected {
    border-color: transparent;
    outline: 3px solid #62e3a4;
  }

    .flex-form-element.flex-selected > .flex-element-controls {
      visibility: visible;
    }

.flex-form-element-outer.flex-dragging {
  opacity: 0.5;
}
/* Dragging Placeholder */
.flex-form-element.flex-dragging-placeholder {
  background: #f3f4f6;
  border: 2px dashed #9ca3af;
  opacity: 0.5;
  min-height: 60px;
}

/* LayoutControls.razor.css */

/* ===== Shared Base Styles ===== */
.flex-editor-layout-control {
  display: flex;
  width: 100%;
}

.flex-editor-drop-zone {
  min-height: 6rem;
  width: 100%;
  border: 2px dashed rgb(107, 114, 128);
  border-radius: 0.375rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

  .flex-editor-drop-zone label {
    color: var(--flex-input-text);
  }

.flex-drag-over-container .flex-editor-drop-zone {
  background: #e4f2ff;
}

.dark .flex-drag-over-container .flex-editor-drop-zone label {
  color: black;
}


/* ===== Group Layout ===== */
.flex-editor-group-layout {
  flex-direction: column;
  margin-top: 0.5rem;
  padding: 0.5rem;
  gap: 1.5rem;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  justify-content: flex-start;
}

/* Group layout: hidden on mobile, flex on lg+ */
@media (max-width: 1023px) {
  .flex-editor-group-layout {
    display: none;
  }
}

@media (min-width: 1024px) {
  .flex-editor-group-layout {
    display: flex;
  }
}

/* ===== Horizontal Layout ===== */
.flex-editor-horizontal-layout {
  flex-direction: row;
  gap: 1rem;
  align-items: flex-start;
  justify-content: space-between;
}

/* ===== Vertical Layout ===== */
.flex-editor-vertical-layout {
  flex-direction: column;
  gap: 1.5rem;
}


.flex-nested-component-container {
  /*Required for TS dragover targeting*/
}

.flex-editor-drop-zone-table {
  min-height: 6rem;
  width: 100%;
  border: 2px dashed rgb(107, 114, 128);
  border-radius: 0.375rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

  .flex-editor-drop-zone-table label {
    color: var(--flex-input-text);
  }

  .flex-editor-drop-zone-table.flex-drag-over-table-cell {
    background: #e4f2ff;
  }

.flex-array-header[b-k35whnsqol] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.flex-array-add-btn[b-k35whnsqol] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--flex-border-color);
  border-radius: var(--flex-radius-default, 4px);
  background: var(--flex-input-background);
  color: var(--flex-color-primary);
  cursor: pointer;
  font-size: 14px;
  transition: background 0.15s, color 0.15s;
}

.flex-array-add-btn:hover[b-k35whnsqol] {
  background: var(--flex-color-primary);
  color: white;
}

.flex-array-grid[b-k35whnsqol] {
  display: grid;
  gap: 1px;
  border: 1px solid var(--flex-border-color);
  border-radius: var(--flex-radius-default, 4px);
  overflow: hidden;
  background: var(--flex-border-color);
}

.flex-array-column-header[b-k35whnsqol] {
  background: var(--flex-header-background);
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--flex-label-text);
}

.flex-array-actions-header[b-k35whnsqol] {
  width: 48px;
  min-width: 48px;
  max-width: 48px;
}

.flex-array-cell[b-k35whnsqol] {
  background: var(--flex-input-background);
  padding: 6px 12px;
  display: flex;
  align-items: center;
  min-height: 40px;
}

.flex-array-actions-cell[b-k35whnsqol] {
  width: 48px;
  min-width: 48px;
  max-width: 48px;
  justify-content: center;
  padding: 6px;
}

.flex-array-delete-btn[b-k35whnsqol] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: var(--flex-radius-default, 4px);
  background: transparent;
  color: var(--flex-label-text);
  cursor: pointer;
  font-size: 12px;
  transition: background 0.15s, color 0.15s;
}

.flex-array-delete-btn:hover[b-k35whnsqol] {
  background: #fee2e2;
  color: #ef4444;
}

.flex-array-empty[b-k35whnsqol] {
  text-align: center;
  padding: 16px;
  color: var(--flex-label-text);
  font-size: 13px;
  border: 1px dashed var(--flex-border-color);
  border-radius: var(--flex-radius-default, 4px);
}

[b-k35whnsqol] .flex-array-cell > * {
  width: 100%;
}

:global(.dark) .flex-array-grid[b-k35whnsqol] {
  background: var(--flex-border-color);
}

:global(.dark) .flex-array-column-header[b-k35whnsqol] {
  background: var(--flex-header-background);
  color: var(--flex-label-text);
}

:global(.dark) .flex-array-cell[b-k35whnsqol] {
  background: var(--flex-input-background);
}

:global(.dark) .flex-array-add-btn[b-k35whnsqol] {
  border-color: var(--flex-border-color);
  background: var(--flex-input-background);
  color: var(--flex-color-primary);
}

:global(.dark) .flex-array-delete-btn:hover[b-k35whnsqol] {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
}

:global(.dark) .flex-array-empty[b-k35whnsqol] {
  border-color: var(--flex-border-color);
  color: var(--flex-label-text);
}

.flex-stub-panel {
  width: 300px;
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--flex-bg-raised-panel);
  border-left: 1px solid #e5e7eb;
  padding: 20px;
  overflow-y: auto;
}

.flex-stub-panel-title {
  font-size: 16px;
  margin-bottom: 15px;
  color: var(--flex-text-header);
}

.flex-stub-panel-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.flex-stub-panel-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #9ca3af;
  padding: 40px 20px;
}

.flex-stub-panel-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40px 20px;
  gap: 8px;
}

.flex-stub-panel-placeholder-icon {
  width: 40px;
  height: 40px;
  color: #cbd5e1;
  margin-bottom: 8px;
}

.flex-stub-panel-placeholder-title {
  font-size: 14px;
  font-weight: 600;
  color: #94a3b8;
  margin: 0;
}

.flex-stub-panel-placeholder-desc {
  font-size: 13px;
  color: #9ca3af;
  line-height: 1.5;
  margin: 0;
}

/* ========================================
   Overlay
   ======================================== */
.flex-uom-numpad-overlay[b-h9m2joyb1o] {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: var(--flex-z-modal);
}

/* ========================================
   Container
   ======================================== */
.flex-uom-numpad-container[b-h9m2joyb1o] {
  background-color: var(--flex-bg-raised-panel);
  border: 1px solid var(--flex-border-color);
  border-radius: var(--flex-radius-lg);
  box-shadow: var(--flex-shadow-lg);
  padding: var(--flex-spacing-2);
  min-width: 380px;
  max-width: calc(100vw - 2rem);
}

/* ========================================
   Display area
   ======================================== */
.flex-uom-numpad-display[b-h9m2joyb1o] {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: var(--flex-spacing-2);
  padding: var(--flex-spacing-2) var(--flex-spacing-4);
  margin-bottom: var(--flex-spacing-2);
  font-size: 1.25rem;
  color: var(--flex-text-header);
  border-bottom: 1px solid var(--flex-border-color);
}

.flex-uom-numpad-unit[b-h9m2joyb1o] {
  color: var(--flex-color-gray-500);
  font-size: var(--flex-font-size-base);
}

:global(.dark) .flex-uom-numpad-unit[b-h9m2joyb1o] {
  color: #9ca3af;
}

/* ========================================
   Body: fraction column + keypad side by side
   ======================================== */
.flex-uom-numpad-body[b-h9m2joyb1o] {
  display: flex;
  gap: var(--flex-spacing-2);
}

/* ========================================
   Fraction column
   ======================================== */
.flex-uom-numpad-fractions[b-h9m2joyb1o] {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* ========================================
   Keypad grid: 4 cols x 5 rows
   Cols 1-3: digits   Col 4: actions
   ======================================== */
.flex-uom-numpad-keypad[b-h9m2joyb1o] {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(5, 1fr);
  gap: 2px;
}

/* ========================================
   Base button style
   ======================================== */
.flex-uom-btn[b-h9m2joyb1o] {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--flex-spacing-1) var(--flex-spacing-2);
  border: 1px solid var(--flex-border-color);
  border-radius: var(--flex-radius-default);
  background-color: var(--flex-input-background);
  color: var(--flex-input-text);
  cursor: pointer;
  font-size: var(--flex-font-size-sm);
  min-height: 2.5rem;
  transition: background-color var(--flex-transition-fast);
  user-select: none;
}

.flex-uom-btn:hover[b-h9m2joyb1o] {
  background-color: #e5e7eb;
}

.flex-uom-btn:active[b-h9m2joyb1o] {
  background-color: #d1d5db;
}

:global(.dark) .flex-uom-btn:hover[b-h9m2joyb1o] {
  background-color: #3a4150;
}

:global(.dark) .flex-uom-btn:active[b-h9m2joyb1o] {
  background-color: #454c5c;
}

/* ========================================
   +/- mode toggle
   ======================================== */
.flex-uom-btn-mode[b-h9m2joyb1o] {
  font-weight: 600;
  font-size: var(--flex-font-size-lg);
  background-color: var(--flex-color-primary);
  color: var(--flex-color-white);
  border-color: var(--flex-color-primary);
}

.flex-uom-btn-mode:hover[b-h9m2joyb1o] {
  background-color: var(--flex-color-primary-hover);
}

:global(.dark) .flex-uom-btn-mode:hover[b-h9m2joyb1o] {
  background-color: var(--flex-color-primary-hover);
}

/* ========================================
   Keypad button placement
   ======================================== */

/* Zero spans cols 1-2 */
.flex-uom-btn-zero[b-h9m2joyb1o] {
  grid-column: 1 / 3;
}

/* Space spans cols 1-2 */
.flex-uom-btn-space[b-h9m2joyb1o] {
  grid-column: 1 / 3;
}

/* OK spans rows 3-5 in col 4 */
.flex-uom-btn-ok[b-h9m2joyb1o] {
  grid-column: 4;
  grid-row: 3 / 6;
  background-color: var(--flex-color-primary);
  color: var(--flex-color-white);
  border-color: var(--flex-color-primary);
  font-weight: 600;
}

.flex-uom-btn-ok:hover[b-h9m2joyb1o] {
  background-color: var(--flex-color-primary-hover);
}

:global(.dark) .flex-uom-btn-ok:hover[b-h9m2joyb1o] {
  background-color: var(--flex-color-primary-hover);
}

.flex-stub-panel {
  width: 300px;
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--flex-bg-raised-panel);
  border-left: 1px solid #e5e7eb;
  padding: 20px;
  overflow-y: auto;
}

.flex-stub-panel-title {
  font-size: 16px;
  margin-bottom: 15px;
  color: var(--flex-text-header);
}

.flex-stub-panel-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.flex-stub-panel-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #9ca3af;
  padding: 40px 20px;
}

.flex-stub-panel-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40px 20px;
  gap: 8px;
}

.flex-stub-panel-placeholder-icon {
  width: 40px;
  height: 40px;
  color: #cbd5e1;
  margin-bottom: 8px;
}

.flex-stub-panel-placeholder-title {
  font-size: 14px;
  font-weight: 600;
  color: #94a3b8;
  margin: 0;
}

.flex-stub-panel-placeholder-desc {
  font-size: 13px;
  color: #9ca3af;
  line-height: 1.5;
  margin: 0;
}

.flex-uom-unit-selector[b-55m3vk0jum] {
  border: 1px solid var(--flex-border-color, #e2e8f0);
  border-radius: var(--flex-radius-default, 4px);
  padding: 2px 4px;
  font-size: inherit;
  background: var(--flex-input-background, white);
  color: var(--flex-input-text, inherit);
  cursor: pointer;
  min-width: 60px;
}

.flex-uom-unit-selector:focus[b-55m3vk0jum] {
  outline: 2px solid var(--flex-color-primary);
  outline-offset: -1px;
}

:global(.dark) .flex-uom-unit-selector[b-55m3vk0jum] {
  border-color: var(--flex-border-color);
  background: var(--flex-input-background);
  color: var(--flex-input-text);
}

.flex-panel-sidebar {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 4px;
  background: var(--flex-bg-recessed, #f1f5f9);
  border-left: 1px solid #e5e7eb;
  flex-shrink: 0;
  align-self: stretch;
}

.flex-panel-sidebar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 6px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--flex-text-muted, #94a3b8);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

  .flex-panel-sidebar-btn svg {
    width: 20px;
    height: 20px;
  }

  .flex-panel-sidebar-btn:hover {
    background: var(--flex-bg-hover, #e2e8f0);
    color: var(--flex-text-header, #1e293b);
  }

.flex-panel-sidebar-btn--active {
  background: var(--flex-bg-raised-panel, #ffffff);
  color: #2563eb;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

  .flex-panel-sidebar-btn--active:hover {
    color: #2563eb;
  }

.flex-editor-toolbar {
  height: 40px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  padding: 0 20px;
  flex-shrink: 0;
  gap: 8px;
}

.flex-toolbar-group {
  display: flex;
  align-items: center;
  gap: 4px;
}

.flex-toolbar-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  background: white;
  color: #334155;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

  .flex-toolbar-btn:hover:not(:disabled) {
    background: #e2e8f0;
    border-color: #cbd5e1;
  }

  .flex-toolbar-btn:disabled {
    opacity: 0.4;
    cursor: default;
  }

.flex-toolbar-action-text {
  font-size: 12px;
  color: #64748b;
  margin-left: 8px;
  opacity: 1;
  transition: opacity 0.5s ease;
}

  .flex-toolbar-action-text.fading {
    opacity: 0;
  }

.flex-description[b-kewkgoqsqh] {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: rgb(156, 163, 175);
  margin-top: 0.25rem;
  display: block;
}

.flex-field-label[b-xaid50imbk] {
  display: flex;
  width: 100%;
  font-size: 0.875rem;
  line-height: 1.25rem;
  margin-bottom: 0.25rem;
  min-height: 20px;
  color: var(--flex-label-text);
}

/* Disabled state */
.flex-field-label:disabled[b-xaid50imbk], .flex-field-label[disabled][b-xaid50imbk] {
  opacity: 1;
  color: var(--flex-color-slate-300);
}

flex-label[b-unvy6psfi8] {
}

.loading-spinner-container[b-em8hl8ssij] {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.loading-spinner-spinner[b-em8hl8ssij] {
  width: 56px;
  height: 56px;
  display: grid;
  border: 4px solid #0000;
  border-radius: 50%;
  border-right-color: #299fff;
  animation: loading-spinner-tri-b-em8hl8ssij 1s infinite linear;
}

  .loading-spinner-spinner[b-em8hl8ssij]::before,
  .loading-spinner-spinner[b-em8hl8ssij]::after {
    content: "";
    grid-area: 1/1;
    margin: 2px;
    border: inherit;
    border-radius: 50%;
    animation: loading-spinner-tri-b-em8hl8ssij 2s infinite;
  }

  .loading-spinner-spinner[b-em8hl8ssij]::after {
    margin: 8px;
    animation-duration: 3s;
  }

@keyframes loading-spinner-tri-b-em8hl8ssij {
  100% {
    transform: rotate(1turn);
  }
}

.loading-spinner-loader[b-em8hl8ssij] {
  color: #4a4a4a;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: 25px;
  box-sizing: content-box;
  height: 40px;
  padding: 10px 10px;
  display: flex;
  border-radius: 8px;
}

.loading-spinner-words[b-em8hl8ssij] {
  overflow: hidden;
}

.loading-spinner-word[b-em8hl8ssij] {
  display: block;
  height: 100%;
  padding-left: 6px;
  color: #299fff;
  animation: loading-spinner-cycle-words-b-em8hl8ssij 5s infinite;
}

.loading-spinner-word.single-word[b-em8hl8ssij] {
  animation: none;
}

@keyframes loading-spinner-cycle-words-b-em8hl8ssij {
  10% {
    transform: translateY(-105%);
  }

  25% {
    transform: translateY(-100%);
  }

  35% {
    transform: translateY(-205%);
  }

  50% {
    transform: translateY(-200%);
  }

  60% {
    transform: translateY(-305%);
  }

  75% {
    transform: translateY(-300%);
  }

  85% {
    transform: translateY(-405%);
  }

  100% {
    transform: translateY(-400%);
  }
}

.flex-validation-message[b-8xumci4gyc] {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #f87171;
  margin-top: 0.25rem;
  display: block;
}


.flex-inline-svg[b-4u3tlarepe] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0; /* Prevents extra space below SVG */
}

.flex-form-editor {
  display: flex;
  flex-direction: column;
  height: stretch;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  background: var(--flex-bg-primary);
  margin: 0;
  padding: 0;
  width: 100%;
  flex: 1;
  min-width: 0;
  transition: padding-bottom 0.2s ease;
  position: relative;
}

/* Skeleton loader */
.flex-skeleton-loader {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  padding: 8px 0;
}

.flex-skeleton-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.flex-skeleton-label {
  height: 14px;
  width: 30%;
  background: #e2e8f0;
  border-radius: 4px;
  animation: flex-skeletonPulse 1.5s ease-in-out infinite;
}

.flex-skeleton-label--short {
  width: 20%;
}

.flex-skeleton-input {
  height: 38px;
  width: 100%;
  background: #e2e8f0;
  border-radius: 6px;
  animation: flex-skeletonPulse 1.5s ease-in-out infinite;
  animation-delay: 0.1s;
}

.flex-skeleton-input--tall {
  height: 80px;
}

@keyframes flex-skeletonPulse {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: 0.4;
  }
}

.dark .flex-form-editor {
  background: #D1D5DB;
}

.flex-form-editor.flex-drawer-open {
  padding-bottom: var(--drawer-height, 250px);
}

.flex-header {
  height: 60px;
  background: #2563eb;
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  flex-shrink: 0;
}

  .flex-header h1 {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
  }

.flex-back-to-company-forms-button {
  max-height: 20px;
  display: inline-flex;
  flex-direction: row;
  max-width: 70px;
}

.flex-form-selector {
  display: flex;
  align-items: center;
}

  .flex-form-selector select {
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    min-width: 180px;
    transition: all 0.2s;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='white' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
  }

    .flex-form-selector select:hover {
      background-color: rgba(255, 255, 255, 0.3);
    }

    .flex-form-selector select:focus {
      outline: none;
      background-color: rgba(255, 255, 255, 0.3);
      box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4);
    }

    .flex-form-selector select option {
      background: #2563eb;
      color: white;
      padding: 8px;
    }

.flex-mode-toggle {
  display: flex;
  gap: 8px;
  background: rgba(255, 255, 255, 0.2);
  padding: 4px;
  border-radius: 6px;
}

.flex-mode-btn {
  padding: 8px 16px;
  background: transparent;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s;
}

  .flex-mode-btn.flex-active {
    background: white;
    color: #2563eb;
  }

  .flex-mode-btn:hover:not(.flex-active) {
    background: rgba(255, 255, 255, 0.1);
  }

.flex-form-editor-container {
  display: flex;
  flex: 1;
  overflow: hidden;
  padding: 0px;
  width: 100%;
  margin: 0;
  box-sizing: border-box;
}

.flex-nested-component-container {
}



/* Right Panel */
.flex-editor-right-panel {
  display: flex;
  flex-direction: row;
  flex-shrink: 0;
  align-self: stretch;
  overflow: hidden;
}

  .flex-editor-right-panel.flex-hidden {
    display: none;
  }

.flex-editor-right-panel-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

/* Panel Sidebar */
.flex-panel-sidebar {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 4px;
  background: var(--flex-bg-recessed, #f1f5f9);
  border-left: 1px solid #e5e7eb;
  flex-shrink: 0;
  align-self: stretch;
}

.flex-panel-sidebar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 6px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--flex-text-muted, #94a3b8);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

  .flex-panel-sidebar-btn svg {
    width: 20px;
    height: 20px;
  }

  .flex-panel-sidebar-btn:hover {
    background: var(--flex-bg-hover, #e2e8f0);
    color: var(--flex-text-header, #1e293b);
  }

.flex-panel-sidebar-btn--active {
  background: var(--flex-bg-raised-panel, #ffffff);
  color: #2563eb;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

  .flex-panel-sidebar-btn--active:hover {
    color: #2563eb;
  }

/* Canvas */
.flex-editor-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 40px;
  overflow-y: auto;
  background: var(--flex-bg-primary);
}

.flex-canvas {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 40px;
  width: 100%;
}

.flex-form-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0 auto;
  background: var(--flex-bg-primary);
  padding: 0;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  min-height: 400px;
}

.flex-form-title {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 30px;
  color: var(--flex-text-header);
}

.flex-drop-zone {
  min-height: 200px;
  border: 2px dashed #d1d5db;
  border-radius: 8px;
  padding: 20px;
}

  .flex-drop-zone.flex-drag-over {
    background: #eff6ff;
    border-color: #2563eb;
  }

  .flex-drop-zone.flex-preview-mode {
    border: none;
    padding: 0;
  }

.flex-drag-over-container .flex-drop-zone {
  /*    outline: 2px dashed #3b82f6;
    outline-offset: 4px;*/
  background-color: rgba(59, 130, 246, 0.05);
}

.flex-empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  color: #9ca3af;
}

/* Empty canvas drag-over highlight */
.flex-canvas.flex-drag-over-container {
  outline: 3px dashed #3b82f6;
  outline-offset: -4px;
  background-color: rgba(59, 130, 246, 0.06);
  animation: flex-emptyCanvasPulse 1.5s ease-in-out infinite;
}

@keyframes flex-emptyCanvasPulse {
  0%, 100% {
    background-color: rgba(59, 130, 246, 0.06);
  }

  50% {
    background-color: rgba(59, 130, 246, 0.12);
  }
}

.flex-empty-state p {
  font-size: 16px;
  margin-bottom: 8px;
}

.flex-empty-state small {
  font-size: 14px;
  color: #d1d5db;
}

/* Form Elements */
.flex-form-row {
  display: flex;
  gap: 15px;
  margin-bottom: 15px;
}


.flex-element-controls {
  place-self: flex-end;
}


.flex-control-btn {
  position: relative;
  top: -15px;
  left: 15px;
  padding: 2px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.2s;
}

  .flex-control-btn:hover {
    background: #F9FAFB;
  }

    .flex-control-btn:hover svg path {
      stroke: #c31e1e;
      fill: #c31e1e;
    }

.flex-element-label {
  font-size: 11px;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  font-weight: 600;
}

.flex-element-preview {
  font-size: 14px;
  color: #374151;
  font-weight: 500;
}

.flex-option-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

  .flex-option-row input {
    flex: 1;
  }

.flex-remove-option-btn {
  width: 30px;
  height: 30px;
  background: #ef4444;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s;
}

  .flex-remove-option-btn:hover {
    background: #dc2626;
  }

.flex-add-option-btn {
  width: 100%;
  padding: 8px 12px;
  background: #2563eb;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s;
  margin-top: 8px;
}

  .flex-add-option-btn:hover {
    background: #1d4ed8;
  }

/* Scrollbar styling */
.flex-widgets-panel::-webkit-scrollbar,
.flex-canvas::-webkit-scrollbar {
  width: 8px;
}

.flex-widgets-panel::-webkit-scrollbar-track,
.flex-canvas::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.flex-widgets-panel::-webkit-scrollbar-thumb,
.flex-canvas::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

  .flex-widgets-panel::-webkit-scrollbar-thumb:hover,
  .flex-canvas::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
  }



horizontal-layout-flex-editor-control {
  min-height: 60px;
  position: relative;
}

  horizontal-layout-flex-editor-control.flex-drag-over-container {
    background-color: rgba(59, 130, 246, 0.1);
  }


details .flex-details-summary {
  list-style: none;
}

  details .flex-details-summary::-webkit-details-marker {
    display: none;
  }

  details .flex-details-summary::before {
    content: "▶";
    display: inline-block;
    margin-right: 0.5rem;
    transition: transform 0.3s ease;
  }

details[open] .flex-details-summary::before {
  transform: rotate(90deg);
}

details .flex-details-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}

.flex-details-content .flex-details-content-inner {
  display: flex;
  flex-direction: column;
}

.flex-details-content .flex-group-header {
  font-weight: 500;
  border-bottom: solid gray;
  width: 100%;
  border-bottom-width: 1px;
  border-bottom-color: lightgray;
  color: #282828;
  margin-top: 4px;
}

details[open] .flex-details-content {
  grid-template-rows: 1fr;
}

/* More specific: targets open details that are in the process of closing */
details[open].flex-closing .flex-details-content {
  grid-template-rows: 0fr;
}

details[open].flex-closing .flex-details-summary::before {
  transform: rotate(0deg);
}

details .flex-details-content > div {
  overflow: hidden;
}

#flex-select-parent-button {
  font-size: 12px;
  padding: 5px;
  border-radius: 5px;
  background: rgba(21,93,252, 0.15);
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .flex-widgets-panel {
    width: 200px;
  }
}

@media (max-width: 768px) {
  .flex-container {
    flex-direction: column;
  }

  .flex-widgets-panel {
    width: 100%;
    max-height: 200px;
  }

  .flex-canvas {
    padding: 20px;
    cursor: pointer;
  }

  .flex-form-container {
    padding: 0;
  }

  .flex-drag-ghost {
    position: fixed;
    pointer-events: none;
    z-index: 10000;
    transform: translate(-50%, -50%);
    animation: flex-dragGhostAppear 0.15s ease-out;
  }

  @keyframes flex-dragGhostAppear {
    from {
      opacity: 0;
      transform: translate(-50%, -50%) scale(0.95);
    }

    to {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
    }
  }

  .flex-drag-ghost-content {
    background: white;
    border: 2px solid #2563eb;
    border-radius: 6px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2), 0 6px 12px rgba(37, 99, 235, 0.3);
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    white-space: nowrap;
  }


  .flex-dragging-placeholder-content {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    color: #9ca3af;
    font-size: 14px;
    font-style: italic;
  }

  .flex-dragging-overlay {
    background-color: rgba(0,0,0,0.5); /* Black background with opacity */
  }




  /* Container Drop Zone Enhancement */
  .flex-drag-over-container {
    outline: 3px solid #3b82f6;
    outline-offset: 4px;
    background-color: rgba(59, 130, 246, 0.08);
    animation: flex-containerPulse 1.5s ease-in-out infinite;
  }

  @keyframes flex-containerPulse {
    0%, 100% {
      background-color: rgba(59, 130, 246, 0.08);
    }

    50% {
      background-color: rgba(59, 130, 246, 0.15);
    }
  }
}

.flex-form[b-rd9a9a4rfv] {
  width: 100%;
  margin: 0.25rem;
  margin-right: 1rem;
  padding: 10px;
  overflow: auto;
}

/* FormDataGrid.razor.css */

/* ===== Container ===== */
.flex-container[b-acnxperua1] {
  width: 100%;
  margin-right: 1rem;
}

@media (min-width: 1024px) {
  .flex-container[b-acnxperua1] {
    margin-right: 0;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ===== Desktop Table ===== */
.flex-data-grid-container[b-acnxperua1] {
  display: none;
  width: 100%;
}

@media (min-width: 1024px) {
  .flex-data-grid-container[b-acnxperua1] {
    display: block;
  }
}

.flex-data-grid-table[b-acnxperua1] {
  width: 100%;
}

.flex-table-head[b-acnxperua1] {
  position: sticky;
}

.flex-th[b-acnxperua1] {
  border-bottom: 1px solid rgb(226, 232, 240);
  font-weight: 700;
  padding: 1rem;
  color: rgb(148, 163, 184);
  text-align: left;
}

.flex-th-empty[b-acnxperua1] {
  border-bottom: 1px solid rgb(226, 232, 240);
}

.flex-tr[b-acnxperua1] {
  cursor: pointer;
}

.flex-tr:hover[b-acnxperua1] {
  background-color: rgb(243, 244, 246);
}

.flex-td[b-acnxperua1] {
  border-bottom: 1px solid rgb(226, 232, 240);
  padding: 1rem;
  color: rgb(148, 163, 184);
  text-align: left;
}

.flex-td-name[b-acnxperua1] {
  font-weight: 600;
}

.flex-td-text[b-acnxperua1] {
  font-weight: 500;
}

.flex-td-actions[b-acnxperua1] {
  border-bottom: 1px solid rgb(226, 232, 240);
}

.flex-icon[b-acnxperua1] {
  opacity: 0.6;
}

.flex-icon-delete[b-acnxperua1] {
  margin-right: 2rem;
}

/* ===== Mobile Layout ===== */
.flex-mobile-container[b-acnxperua1] {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  background-color: rgb(243, 244, 246);
}

@media (min-width: 1024px) {
  .flex-mobile-container[b-acnxperua1] {
    display: none;
  }
}

.flex-mobile-card[b-acnxperua1] {
  padding-right: 0.125rem;
  display: flex;
  cursor: pointer;
}

.flex-mobile-content[b-acnxperua1] {
  flex: 1 1 0%;
}

.flex-mobile-row[b-acnxperua1] {
  display: flex;
  gap: 0.5rem;
  justify-content: space-between;
}

.flex-mobile-row-spacing[b-acnxperua1] {
  margin-top: 0.5rem;
}

.flex-mobile-col-quarter[b-acnxperua1] {
  width: 25%;
}

.flex-data-item-label[b-acnxperua1] {
  font-size: 0.75rem;
  color: rgb(148, 163, 184);
}

.flex-data-item-value[b-acnxperua1] {
  font-size: 0.875rem;
  color: rgb(51, 65, 85);
}

.flex-mobile-arrow[b-acnxperua1] {
  display: flex;
  align-items: center;
  margin-left: 1rem;
}

.flex-mobile-arrow img[b-acnxperua1] {
  margin-left: 0.5rem;
}

/* Dark mode arrow visibility */
.flex-arrow-light[b-acnxperua1] {
  display: block;
}

.flex-arrow-dark[b-acnxperua1] {
  display: none;
}

/* ===== Dark Mode ===== */
@media (prefers-color-scheme: dark) {
  .flex-th[b-acnxperua1],
  .flex-th-empty[b-acnxperua1],
  .flex-td[b-acnxperua1],
  .flex-td-actions[b-acnxperua1] {
    border-color: rgb(71, 85, 105);
  }

  .flex-th[b-acnxperua1],
  .flex-td[b-acnxperua1] {
    color: rgb(226, 232, 240);
  }

  .flex-arrow-light[b-acnxperua1] {
    display: none;
  }

  .flex-arrow-dark[b-acnxperua1] {
    display: block;
  }
}

.flex-array-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.flex-array-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--flex-border-color);
  border-radius: var(--flex-radius-default, 4px);
  background: var(--flex-input-background);
  color: var(--flex-color-primary);
  cursor: pointer;
  font-size: 14px;
  transition: background 0.15s, color 0.15s;
}

  .flex-array-add-btn:hover {
    background: var(--flex-color-primary);
    color: white;
  }

.flex-array-grid {
  display: grid;
  gap: 1px;
  border: 1px solid var(--flex-border-color);
  border-radius: var(--flex-radius-default, 4px);
  overflow: hidden;
  background: var(--flex-border-color);
}

.flex-array-column-header {
  background: var(--flex-header-background);
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--flex-label-text);
}

.flex-array-actions-header {
  width: 48px;
  min-width: 48px;
  max-width: 48px;
}

.flex-array-cell {
  background: var(--flex-input-background);
  padding: 6px 12px;
  display: flex;
  align-items: center;
  min-height: 40px;
}

.flex-array-actions-cell {
  width: 48px;
  min-width: 48px;
  max-width: 48px;
  justify-content: center;
  padding: 6px;
}

.flex-array-delete-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: var(--flex-radius-default, 4px);
  background: transparent;
  color: var(--flex-label-text);
  cursor: pointer;
  font-size: 12px;
  transition: background 0.15s, color 0.15s;
}

  .flex-array-delete-btn:hover {
    background: #fee2e2;
    color: #ef4444;
  }

.flex-array-empty {
  text-align: center;
  padding: 16px;
  color: var(--flex-label-text);
  font-size: 13px;
  border: 1px dashed var(--flex-border-color);
  border-radius: var(--flex-radius-default, 4px);
}

::deep .flex-array-cell > * {
  width: 100%;
}

:global(.dark) .flex-array-grid {
  background: var(--flex-border-color);
}

:global(.dark) .flex-array-column-header {
  background: var(--flex-header-background);
  color: var(--flex-label-text);
}

:global(.dark) .flex-array-cell {
  background: var(--flex-input-background);
}

:global(.dark) .flex-array-add-btn {
  border-color: var(--flex-border-color);
  background: var(--flex-input-background);
  color: var(--flex-color-primary);
}

:global(.dark) .flex-array-delete-btn:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
}

:global(.dark) .flex-array-empty {
  border-color: var(--flex-border-color);
  color: var(--flex-label-text);
}


/* _content/LPI.Features.FlexForm.Client.Ux.Web/Components/Common/FlexDescription.razor.rz.scp.css */
.flex-description[b-kewkgoqsqh] {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: rgb(156, 163, 175);
  margin-top: 0.25rem;
  display: block;
}
/* _content/LPI.Features.FlexForm.Client.Ux.Web/Components/Common/FlexFieldLabel.razor.rz.scp.css */
.flex-field-label[b-xaid50imbk] {
  display: flex;
  width: 100%;
  font-size: 0.875rem;
  line-height: 1.25rem;
  margin-bottom: 0.25rem;
  min-height: 20px;
  color: var(--flex-label-text);
}

/* Disabled state */
.flex-field-label:disabled[b-xaid50imbk], .flex-field-label[disabled][b-xaid50imbk] {
  opacity: 1;
  color: var(--flex-color-slate-300);
}
/* _content/LPI.Features.FlexForm.Client.Ux.Web/Components/Common/FlexLabel.razor.rz.scp.css */
flex-label[b-unvy6psfi8] {
}
/* _content/LPI.Features.FlexForm.Client.Ux.Web/Components/Common/FlexLoadingSpinner.razor.rz.scp.css */
.loading-spinner-container[b-em8hl8ssij] {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.loading-spinner-spinner[b-em8hl8ssij] {
  width: 56px;
  height: 56px;
  display: grid;
  border: 4px solid #0000;
  border-radius: 50%;
  border-right-color: #299fff;
  animation: loading-spinner-tri-b-em8hl8ssij 1s infinite linear;
}

  .loading-spinner-spinner[b-em8hl8ssij]::before,
  .loading-spinner-spinner[b-em8hl8ssij]::after {
    content: "";
    grid-area: 1/1;
    margin: 2px;
    border: inherit;
    border-radius: 50%;
    animation: loading-spinner-tri-b-em8hl8ssij 2s infinite;
  }

  .loading-spinner-spinner[b-em8hl8ssij]::after {
    margin: 8px;
    animation-duration: 3s;
  }

@keyframes loading-spinner-tri-b-em8hl8ssij {
  100% {
    transform: rotate(1turn);
  }
}

.loading-spinner-loader[b-em8hl8ssij] {
  color: #4a4a4a;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: 25px;
  box-sizing: content-box;
  height: 40px;
  padding: 10px 10px;
  display: flex;
  border-radius: 8px;
}

.loading-spinner-words[b-em8hl8ssij] {
  overflow: hidden;
}

.loading-spinner-word[b-em8hl8ssij] {
  display: block;
  height: 100%;
  padding-left: 6px;
  color: #299fff;
  animation: loading-spinner-cycle-words-b-em8hl8ssij 5s infinite;
}

.loading-spinner-word.single-word[b-em8hl8ssij] {
  animation: none;
}

@keyframes loading-spinner-cycle-words-b-em8hl8ssij {
  10% {
    transform: translateY(-105%);
  }

  25% {
    transform: translateY(-100%);
  }

  35% {
    transform: translateY(-205%);
  }

  50% {
    transform: translateY(-200%);
  }

  60% {
    transform: translateY(-305%);
  }

  75% {
    transform: translateY(-300%);
  }

  85% {
    transform: translateY(-405%);
  }

  100% {
    transform: translateY(-400%);
  }
}
/* _content/LPI.Features.FlexForm.Client.Ux.Web/Components/Common/FlexValidationMessage.razor.rz.scp.css */
.flex-validation-message[b-8xumci4gyc] {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #f87171;
  margin-top: 0.25rem;
  display: block;
}

/* _content/LPI.Features.FlexForm.Client.Ux.Web/Components/Common/InlineSvg.razor.rz.scp.css */
.flex-inline-svg[b-4u3tlarepe] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0; /* Prevents extra space below SVG */
}
/* _content/LPI.Features.FlexForm.Client.Ux.Web/Components/Controls/Input/UoMControl/UoMNumpadPopup.razor.rz.scp.css */
/* ========================================
   Overlay
   ======================================== */
.flex-uom-numpad-overlay[b-h9m2joyb1o] {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: var(--flex-z-modal);
}

/* ========================================
   Container
   ======================================== */
.flex-uom-numpad-container[b-h9m2joyb1o] {
  background-color: var(--flex-bg-raised-panel);
  border: 1px solid var(--flex-border-color);
  border-radius: var(--flex-radius-lg);
  box-shadow: var(--flex-shadow-lg);
  padding: var(--flex-spacing-2);
  min-width: 380px;
  max-width: calc(100vw - 2rem);
}

/* ========================================
   Display area
   ======================================== */
.flex-uom-numpad-display[b-h9m2joyb1o] {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: var(--flex-spacing-2);
  padding: var(--flex-spacing-2) var(--flex-spacing-4);
  margin-bottom: var(--flex-spacing-2);
  font-size: 1.25rem;
  color: var(--flex-text-header);
  border-bottom: 1px solid var(--flex-border-color);
}

.flex-uom-numpad-unit[b-h9m2joyb1o] {
  color: var(--flex-color-gray-500);
  font-size: var(--flex-font-size-base);
}

:global(.dark) .flex-uom-numpad-unit[b-h9m2joyb1o] {
  color: #9ca3af;
}

/* ========================================
   Body: fraction column + keypad side by side
   ======================================== */
.flex-uom-numpad-body[b-h9m2joyb1o] {
  display: flex;
  gap: var(--flex-spacing-2);
}

/* ========================================
   Fraction column
   ======================================== */
.flex-uom-numpad-fractions[b-h9m2joyb1o] {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* ========================================
   Keypad grid: 4 cols x 5 rows
   Cols 1-3: digits   Col 4: actions
   ======================================== */
.flex-uom-numpad-keypad[b-h9m2joyb1o] {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(5, 1fr);
  gap: 2px;
}

/* ========================================
   Base button style
   ======================================== */
.flex-uom-btn[b-h9m2joyb1o] {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--flex-spacing-1) var(--flex-spacing-2);
  border: 1px solid var(--flex-border-color);
  border-radius: var(--flex-radius-default);
  background-color: var(--flex-input-background);
  color: var(--flex-input-text);
  cursor: pointer;
  font-size: var(--flex-font-size-sm);
  min-height: 2.5rem;
  transition: background-color var(--flex-transition-fast);
  user-select: none;
}

.flex-uom-btn:hover[b-h9m2joyb1o] {
  background-color: #e5e7eb;
}

.flex-uom-btn:active[b-h9m2joyb1o] {
  background-color: #d1d5db;
}

:global(.dark) .flex-uom-btn:hover[b-h9m2joyb1o] {
  background-color: #3a4150;
}

:global(.dark) .flex-uom-btn:active[b-h9m2joyb1o] {
  background-color: #454c5c;
}

/* ========================================
   +/- mode toggle
   ======================================== */
.flex-uom-btn-mode[b-h9m2joyb1o] {
  font-weight: 600;
  font-size: var(--flex-font-size-lg);
  background-color: var(--flex-color-primary);
  color: var(--flex-color-white);
  border-color: var(--flex-color-primary);
}

.flex-uom-btn-mode:hover[b-h9m2joyb1o] {
  background-color: var(--flex-color-primary-hover);
}

:global(.dark) .flex-uom-btn-mode:hover[b-h9m2joyb1o] {
  background-color: var(--flex-color-primary-hover);
}

/* ========================================
   Keypad button placement
   ======================================== */

/* Zero spans cols 1-2 */
.flex-uom-btn-zero[b-h9m2joyb1o] {
  grid-column: 1 / 3;
}

/* Space spans cols 1-2 */
.flex-uom-btn-space[b-h9m2joyb1o] {
  grid-column: 1 / 3;
}

/* OK spans rows 3-5 in col 4 */
.flex-uom-btn-ok[b-h9m2joyb1o] {
  grid-column: 4;
  grid-row: 3 / 6;
  background-color: var(--flex-color-primary);
  color: var(--flex-color-white);
  border-color: var(--flex-color-primary);
  font-weight: 600;
}

.flex-uom-btn-ok:hover[b-h9m2joyb1o] {
  background-color: var(--flex-color-primary-hover);
}

:global(.dark) .flex-uom-btn-ok:hover[b-h9m2joyb1o] {
  background-color: var(--flex-color-primary-hover);
}
/* _content/LPI.Features.FlexForm.Client.Ux.Web/Components/Controls/Input/UoMFlexControlComponent.razor.rz.scp.css */
.flex-uom-unit-selector[b-55m3vk0jum] {
  border: 1px solid var(--flex-border-color, #e2e8f0);
  border-radius: var(--flex-radius-default, 4px);
  padding: 2px 4px;
  font-size: inherit;
  background: var(--flex-input-background, white);
  color: var(--flex-input-text, inherit);
  cursor: pointer;
  min-width: 60px;
}

.flex-uom-unit-selector:focus[b-55m3vk0jum] {
  outline: 2px solid var(--flex-color-primary);
  outline-offset: -1px;
}

:global(.dark) .flex-uom-unit-selector[b-55m3vk0jum] {
  border-color: var(--flex-border-color);
  background: var(--flex-input-background);
  color: var(--flex-input-text);
}
/* _content/LPI.Features.FlexForm.Client.Ux.Web/Components/Controls/Layout/ArrayFlexControlComponent.razor.rz.scp.css */
.flex-array-header[b-k35whnsqol] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.flex-array-add-btn[b-k35whnsqol] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--flex-border-color);
  border-radius: var(--flex-radius-default, 4px);
  background: var(--flex-input-background);
  color: var(--flex-color-primary);
  cursor: pointer;
  font-size: 14px;
  transition: background 0.15s, color 0.15s;
}

.flex-array-add-btn:hover[b-k35whnsqol] {
  background: var(--flex-color-primary);
  color: white;
}

.flex-array-grid[b-k35whnsqol] {
  display: grid;
  gap: 1px;
  border: 1px solid var(--flex-border-color);
  border-radius: var(--flex-radius-default, 4px);
  overflow: hidden;
  background: var(--flex-border-color);
}

.flex-array-column-header[b-k35whnsqol] {
  background: var(--flex-header-background);
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--flex-label-text);
}

.flex-array-actions-header[b-k35whnsqol] {
  width: 48px;
  min-width: 48px;
  max-width: 48px;
}

.flex-array-cell[b-k35whnsqol] {
  background: var(--flex-input-background);
  padding: 6px 12px;
  display: flex;
  align-items: center;
  min-height: 40px;
}

.flex-array-actions-cell[b-k35whnsqol] {
  width: 48px;
  min-width: 48px;
  max-width: 48px;
  justify-content: center;
  padding: 6px;
}

.flex-array-delete-btn[b-k35whnsqol] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: var(--flex-radius-default, 4px);
  background: transparent;
  color: var(--flex-label-text);
  cursor: pointer;
  font-size: 12px;
  transition: background 0.15s, color 0.15s;
}

.flex-array-delete-btn:hover[b-k35whnsqol] {
  background: #fee2e2;
  color: #ef4444;
}

.flex-array-empty[b-k35whnsqol] {
  text-align: center;
  padding: 16px;
  color: var(--flex-label-text);
  font-size: 13px;
  border: 1px dashed var(--flex-border-color);
  border-radius: var(--flex-radius-default, 4px);
}

[b-k35whnsqol] .flex-array-cell > * {
  width: 100%;
}

:global(.dark) .flex-array-grid[b-k35whnsqol] {
  background: var(--flex-border-color);
}

:global(.dark) .flex-array-column-header[b-k35whnsqol] {
  background: var(--flex-header-background);
  color: var(--flex-label-text);
}

:global(.dark) .flex-array-cell[b-k35whnsqol] {
  background: var(--flex-input-background);
}

:global(.dark) .flex-array-add-btn[b-k35whnsqol] {
  border-color: var(--flex-border-color);
  background: var(--flex-input-background);
  color: var(--flex-color-primary);
}

:global(.dark) .flex-array-delete-btn:hover[b-k35whnsqol] {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
}

:global(.dark) .flex-array-empty[b-k35whnsqol] {
  border-color: var(--flex-border-color);
  color: var(--flex-label-text);
}
/* _content/LPI.Features.FlexForm.Client.Ux.Web/Components/Editor/Components/ConditionPanel/ConditionPanel.razor.rz.scp.css */
.flex-stub-panel[b-jjb98mjkgl] {
  width: 300px;
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--flex-bg-raised-panel);
  border-left: 1px solid #e5e7eb;
  padding: 20px;
  overflow-y: auto;
}

.flex-stub-panel-title[b-jjb98mjkgl] {
  font-size: 16px;
  margin-bottom: 15px;
  color: var(--flex-text-header);
}

.flex-stub-panel-content[b-jjb98mjkgl] {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.flex-stub-panel-empty[b-jjb98mjkgl] {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #9ca3af;
  padding: 40px 20px;
}

.flex-stub-panel-placeholder[b-jjb98mjkgl] {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40px 20px;
  gap: 8px;
}

.flex-stub-panel-placeholder-icon[b-jjb98mjkgl] {
  width: 40px;
  height: 40px;
  color: #cbd5e1;
  margin-bottom: 8px;
}

.flex-stub-panel-placeholder-title[b-jjb98mjkgl] {
  font-size: 14px;
  font-weight: 600;
  color: #94a3b8;
  margin: 0;
}

.flex-stub-panel-placeholder-desc[b-jjb98mjkgl] {
  font-size: 13px;
  color: #9ca3af;
  line-height: 1.5;
  margin: 0;
}
/* _content/LPI.Features.FlexForm.Client.Ux.Web/Components/Editor/Components/ContextPanel/ContextBindingPanel.razor.rz.scp.css */
.flex-stub-panel[b-fsxw1kia73] {
  width: 300px;
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--flex-bg-raised-panel);
  border-left: 1px solid #e5e7eb;
  padding: 20px;
  overflow-y: auto;
}

.flex-stub-panel-title[b-fsxw1kia73] {
  font-size: 16px;
  margin-bottom: 15px;
  color: var(--flex-text-header);
}

.flex-stub-panel-content[b-fsxw1kia73] {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.flex-stub-panel-empty[b-fsxw1kia73] {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #9ca3af;
  padding: 40px 20px;
}

.flex-stub-panel-placeholder[b-fsxw1kia73] {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40px 20px;
  gap: 8px;
}

.flex-stub-panel-placeholder-icon[b-fsxw1kia73] {
  width: 40px;
  height: 40px;
  color: #cbd5e1;
  margin-bottom: 8px;
}

.flex-stub-panel-placeholder-title[b-fsxw1kia73] {
  font-size: 14px;
  font-weight: 600;
  color: #94a3b8;
  margin: 0;
}

.flex-stub-panel-placeholder-desc[b-fsxw1kia73] {
  font-size: 13px;
  color: #9ca3af;
  line-height: 1.5;
  margin: 0;
}
/* _content/LPI.Features.FlexForm.Client.Ux.Web/Components/Editor/Components/EditorFlexControls/ArrayFlexControlEditorComponent.razor.rz.scp.css */
array-flex-editor-control[b-d1rd76nrw2] {
  display: block;
  padding: 0.5rem;
}

.flex-array-editor-header[b-d1rd76nrw2] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.flex-array-editor-add-btn[b-d1rd76nrw2] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  border: 1px solid rgb(156, 163, 175);
  background: white;
  cursor: pointer;
  font-size: 0.75rem;
  color: rgb(75, 85, 99);
  transition: background-color 0.15s;
}

.flex-array-editor-add-btn:hover[b-d1rd76nrw2] {
  background: rgb(243, 244, 246);
}

.flex-array-editor-grid[b-d1rd76nrw2] {
  display: grid;
  gap: 0;
  border: 1px solid rgb(209, 213, 219);
  border-radius: 0.375rem;
  overflow: hidden;
}

.flex-array-editor-column-header[b-d1rd76nrw2] {
  padding: 0.375rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: rgb(55, 65, 81);
  background: rgb(243, 244, 246);
  border-bottom: 1px solid rgb(209, 213, 219);
  border-right: 1px solid rgb(229, 231, 235);
}

.flex-array-editor-column-header:last-child[b-d1rd76nrw2] {
  border-right: none;
}

.flex-array-editor-actions-header[b-d1rd76nrw2] {
  width: 2.5rem;
}

.flex-array-editor-cell[b-d1rd76nrw2] {
  padding: 0.25rem;
  border-bottom: 1px solid rgb(229, 231, 235);
  border-right: 1px solid rgb(229, 231, 235);
  min-height: 3rem;
  display: flex;
  align-items: center;
}

.flex-array-editor-cell:last-child[b-d1rd76nrw2] {
  border-right: none;
}

.flex-array-editor-actions-cell[b-d1rd76nrw2] {
  justify-content: center;
  width: 2.5rem;
}

.flex-array-editor-delete-btn[b-d1rd76nrw2] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border: none;
  background: transparent;
  cursor: pointer;
  color: rgb(156, 163, 175);
  font-size: 0.7rem;
  border-radius: 0.25rem;
  transition: color 0.15s, background-color 0.15s;
}

.flex-array-editor-delete-btn:hover[b-d1rd76nrw2] {
  color: rgb(239, 68, 68);
  background: rgb(254, 226, 226);
}
/* _content/LPI.Features.FlexForm.Client.Ux.Web/Components/Editor/Components/EditorFlexControls/EditorFormElement.razor.rz.scp.css */
/* Drop Indicator Wrapper */
.flex-form-element-wrapper[b-7jiu5fgz14] {
  position: relative;
}
/* Drop Indicators - Bright Lines */
.flex-form-element-wrapper.flex-drag-over-top[b-7jiu5fgz14]::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 0;
  right: 0;
  height: 4px;
  background: #3b82f6;
  border-radius: 2px;
  z-index: 100;
  box-shadow: 0 0 8px rgba(59, 130, 246, 0.6);
  animation: flex-dropIndicatorPulse-b-7jiu5fgz14 1s ease-in-out infinite;
}

.flex-form-element-wrapper.flex-drag-over-bottom[b-7jiu5fgz14]::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 4px;
  background: #3b82f6;
  border-radius: 2px;
  z-index: 100;
  box-shadow: 0 0 8px rgba(59, 130, 246, 0.6);
  animation: flex-dropIndicatorPulse-b-7jiu5fgz14 1s ease-in-out infinite;
}

.flex-form-element-wrapper.flex-drag-over-left[b-7jiu5fgz14]::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -2px;
  width: 4px;
  background: #10b981;
  border-radius: 2px;
  z-index: 100;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
  animation: flex-dropIndicatorPulse-b-7jiu5fgz14 1s ease-in-out infinite;
}

.flex-form-element-wrapper.flex-drag-over-right[b-7jiu5fgz14]::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: -2px;
  width: 4px;
  background: #10b981;
  border-radius: 2px;
  z-index: 100;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
  animation: flex-dropIndicatorPulse-b-7jiu5fgz14 1s ease-in-out infinite;
}

@keyframes flex-dropIndicatorPulse-b-7jiu5fgz14 {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: 0.7;
  }
}

.flex-form-element[b-7jiu5fgz14] {
  padding: 15px;
  background: var(--flex-bg-form-element);
  border-radius: 6px;
  cursor: move;
  position: relative;
  flex: 1;
}

.flex-form-element.flex-in-row[b-7jiu5fgz14] {
  margin-bottom: 0;
}

.flex-form-element.flex-preview-mode[b-7jiu5fgz14] {
  background: white;
  border: none;
  cursor: default;
  padding: 12px 0;
}

.flex-form-element .flex-element-controls[b-7jiu5fgz14] {
  visibility: hidden;
}

.flex-form-element:hover:not(:has(.flex-form-element:hover)):not(.flex-preview-mode) > .flex-element-controls[b-7jiu5fgz14] {
  visibility: visible;
}

.flex-form-element:not(.flex-preview-mode)[b-7jiu5fgz14] {
  border: 1px solid var(--flex-border-flex-widget);
}

.flex-form-element:hover:not(:has(.flex-form-element:hover)):not(.flex-preview-mode):not(.flex-selected)[b-7jiu5fgz14] {
  border-color: transparent;
  outline: 3px solid #8c8c8c;
}

.flex-form-element.flex-selected[b-7jiu5fgz14] {
  border-color: transparent;
  outline: 3px solid #62e3a4;
}

.flex-form-element.flex-selected > .flex-element-controls[b-7jiu5fgz14] {
  visibility: visible;
}

.flex-form-element-outer.flex-dragging[b-7jiu5fgz14] {
  opacity: 0.5;
}
/* Dragging Placeholder */
.flex-form-element.flex-dragging-placeholder[b-7jiu5fgz14] {
  background: #f3f4f6;
  border: 2px dashed #9ca3af;
  opacity: 0.5;
  min-height: 60px;
}
/* _content/LPI.Features.FlexForm.Client.Ux.Web/Components/Editor/Components/EditorFlexControls/TableLayoutFlexControlEditorComponent.razor.rz.scp.css */
.flex-editor-drop-zone-table[b-qjl0zkh102] {
  min-height: 6rem;
  width: 100%;
  border: 2px dashed rgb(107, 114, 128);
  border-radius: 0.375rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-editor-drop-zone-table label[b-qjl0zkh102] {
  color: var(--flex-input-text);
}

.flex-editor-drop-zone-table.flex-drag-over-table-cell[b-qjl0zkh102] {
  background: #e4f2ff;
}
/* _content/LPI.Features.FlexForm.Client.Ux.Web/Components/Editor/Components/EditorPanelSwitcher.razor.rz.scp.css */
.flex-panel-sidebar[b-ghzz6zbgfk] {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 4px;
  background: var(--flex-bg-recessed, #f1f5f9);
  border-left: 1px solid #e5e7eb;
  flex-shrink: 0;
  align-self: stretch;
}

.flex-panel-sidebar-btn[b-ghzz6zbgfk] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 6px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--flex-text-muted, #94a3b8);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.flex-panel-sidebar-btn svg[b-ghzz6zbgfk] {
  width: 20px;
  height: 20px;
}

.flex-panel-sidebar-btn:hover[b-ghzz6zbgfk] {
  background: var(--flex-bg-hover, #e2e8f0);
  color: var(--flex-text-header, #1e293b);
}

.flex-panel-sidebar-btn--active[b-ghzz6zbgfk] {
  background: var(--flex-bg-raised-panel, #ffffff);
  color: #2563eb;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.flex-panel-sidebar-btn--active:hover[b-ghzz6zbgfk] {
  color: #2563eb;
}
/* _content/LPI.Features.FlexForm.Client.Ux.Web/Components/Editor/Components/EditorToolbar.razor.rz.scp.css */
.flex-editor-toolbar[b-sb35kq7eco] {
  height: 40px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  padding: 0 20px;
  flex-shrink: 0;
  gap: 8px;
}

.flex-toolbar-group[b-sb35kq7eco] {
  display: flex;
  align-items: center;
  gap: 4px;
}

.flex-toolbar-btn[b-sb35kq7eco] {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  background: white;
  color: #334155;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.flex-toolbar-btn:hover:not(:disabled)[b-sb35kq7eco] {
  background: #e2e8f0;
  border-color: #cbd5e1;
}

.flex-toolbar-btn:disabled[b-sb35kq7eco] {
  opacity: 0.4;
  cursor: default;
}

.flex-toolbar-action-text[b-sb35kq7eco] {
  font-size: 12px;
  color: #64748b;
  margin-left: 8px;
  opacity: 1;
  transition: opacity 0.5s ease;
}

.flex-toolbar-action-text.fading[b-sb35kq7eco] {
  opacity: 0;
}
/* _content/LPI.Features.FlexForm.Client.Ux.Web/Components/Editor/Components/JsonPanel/JsonDrawerPanel.razor.rz.scp.css */
/* ============================================
   JSON Drawer Panel Styles
   ============================================ */

.flex-json-drawer[b-c5y34fdv8t] {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #1e1e2e;
  border-top: 1px solid #313244;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
  z-index: 100;
  display: flex;
  flex-direction: column;
  font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
  transition: height 0.05s ease-out;
}

.flex-json-drawer.flex-collapsed[b-c5y34fdv8t] {
  height: auto !important;
}

/* Drag Handle */
.flex-json-drawer-handle[b-c5y34fdv8t] {
  height: 6px;
  background: transparent;
  cursor: ns-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.flex-json-drawer.flex-collapsed .flex-json-drawer-handle[b-c5y34fdv8t] {
  display: none;
}

.flex-handle-grip[b-c5y34fdv8t] {
  width: 40px;
  height: 4px;
  background: #45475a;
  border-radius: 2px;
  transition: background 0.2s;
}

.flex-json-drawer-handle:hover .flex-handle-grip[b-c5y34fdv8t] {
  background: #585b70;
}

/* Header */
.flex-json-drawer-header[b-c5y34fdv8t] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  height: 36px;
  background: #181825;
  border-bottom: 1px solid #313244;
  flex-shrink: 0;
}

.flex-json-drawer-tab[b-c5y34fdv8t] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: transparent;
  border: none;
  color: #cdd6f4;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.2s;
}

.flex-json-drawer-tab:hover[b-c5y34fdv8t] {
  background: #313244;
}

.flex-tab-icon[b-c5y34fdv8t] {
  font-size: 10px;
  transition: transform 0.2s ease;
  color: #6c7086;
}

.flex-tab-icon.flex-expanded[b-c5y34fdv8t] {
  transform: rotate(180deg);
}

.flex-tab-label[b-c5y34fdv8t] {
  letter-spacing: 0.5px;
}

/* Action Buttons */
.flex-json-drawer-actions[b-c5y34fdv8t] {
  display: flex;
  gap: 4px;
}

.flex-drawer-action-btn[b-c5y34fdv8t] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: #6c7086;
  cursor: pointer;
  transition: all 0.2s;
}

.flex-drawer-action-btn:hover[b-c5y34fdv8t] {
  background: #313244;
  color: #cdd6f4;
}

/* Content Area */
.flex-json-drawer-content[b-c5y34fdv8t] {
  flex: 1;
  overflow: auto;
  padding: 12px 16px;
  min-height: 0;
}

/* Resize Overlay */
.flex-resize-overlay[b-c5y34fdv8t] {
  position: fixed;
  inset: 0;
  z-index: 9999;
  cursor: ns-resize;
}

/* ============================================
   JSON Tree View Styles (::deep for child component)
   ============================================ */

[b-c5y34fdv8t] .flex-json-tree {
  font-size: 13px;
  line-height: 1.6;
  color: #cdd6f4;
}

[b-c5y34fdv8t] .flex-json-node {
  padding-left: calc(var(--depth, 0) * 6px);
}

[b-c5y34fdv8t] .flex-json-line {
  display: flex;
  align-items: center;
  min-height: 22px;
  padding: 1px 0;
  border-radius: 3px;
  transition: background 0.15s;
}

  [b-c5y34fdv8t] .flex-json-line:hover {
    background: rgba(69, 71, 90, 0.3);
  }

/* Toggle Button */
[b-c5y34fdv8t] .flex-json-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-right: 4px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}

[b-c5y34fdv8t] .flex-toggle-icon {
  font-size: 8px;
  color: #6c7086;
  transition: transform 0.15s ease;
}

[b-c5y34fdv8t] .flex-json-toggle.flex-expanded .flex-toggle-icon {
  transform: rotate(90deg);
}

[b-c5y34fdv8t] .flex-json-toggle:hover .flex-toggle-icon {
  color: #cdd6f4;
}

[b-c5y34fdv8t] .flex-json-toggle-spacer {
  width: 20px;
  flex-shrink: 0;
}

/* Syntax Highlighting */
[b-c5y34fdv8t] .flex-json-key {
  color: #89b4fa;
}

[b-c5y34fdv8t] .flex-json-string {
  color: #a6e3a1;
}

[b-c5y34fdv8t] .flex-json-number {
  color: #fab387;
}

[b-c5y34fdv8t] .flex-json-boolean {
  color: #cba6f7;
}

[b-c5y34fdv8t] .flex-json-null {
  color: #f38ba8;
  font-style: italic;
}

[b-c5y34fdv8t] .flex-json-punctuation {
  color: #6c7086;
}

[b-c5y34fdv8t] .flex-json-bracket {
  color: #f9e2af;
}

[b-c5y34fdv8t] .flex-json-comma {
  color: #6c7086;
}

[b-c5y34fdv8t] .flex-json-collapsed-indicator {
  color: #6c7086;
  font-style: italic;
  margin: 0 4px;
}

/* Children Container */
[b-c5y34fdv8t] .flex-json-children {
  display: flex;
  flex-direction: column;
}

/* Highlighting */
[b-c5y34fdv8t] .flex-json-node.flex-highlighted > .flex-json-line {
  background: rgba(250, 179, 135, 0.15);
  box-shadow: inset 3px 0 0 #fab387;
}

[b-c5y34fdv8t] .flex-json-node.flex-contains-highlighted > .flex-json-line {
  background: rgba(137, 180, 250, 0.08);
}

/* Error State */
[b-c5y34fdv8t] .flex-json-error {
  color: #f38ba8;
  padding: 12px;
  background: rgba(243, 139, 168, 0.1);
  border-radius: 6px;
  border: 1px solid rgba(243, 139, 168, 0.3);
}

/* Scrollbar Styling */
.flex-json-drawer-content[b-c5y34fdv8t]::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.flex-json-drawer-content[b-c5y34fdv8t]::-webkit-scrollbar-track {
  background: #181825;
}

.flex-json-drawer-content[b-c5y34fdv8t]::-webkit-scrollbar-thumb {
  background: #45475a;
  border-radius: 4px;
}

  .flex-json-drawer-content[b-c5y34fdv8t]::-webkit-scrollbar-thumb:hover {
    background: #585b70;
  }

/* Animation for smooth expand/collapse */
@keyframes flex-slideUp-b-c5y34fdv8t {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.flex-json-drawer.flex-expanded .flex-json-drawer-content[b-c5y34fdv8t] {
  animation: flex-slideUp-b-c5y34fdv8t 0.2s ease-out;
}
/* _content/LPI.Features.FlexForm.Client.Ux.Web/Components/Editor/Components/PropertiesPanel/AlignmentEditor.razor.rz.scp.css */
/* Text Alignment Editor */
.flex-alignment-editor[b-rh1udhr5z1] {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.flex-alignment-row[b-rh1udhr5z1] {
  display: flex;
  align-items: center;
  gap: 8px;
}

.flex-alignment-label[b-rh1udhr5z1] {
  font-size: 12px;
  color: var(--flex-text-header);
  min-width: 60px;
}

.flex-alignment-button-group[b-rh1udhr5z1] {
  display: flex;
  gap: 2px;
  background-color: #e5e7eb;
  border-radius: 6px;
  padding: 2px;
}

.flex-alignment-button[b-rh1udhr5z1] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 28px;
  padding: 4px;
  border: none;
  background-color: transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.flex-alignment-button:hover[b-rh1udhr5z1] {
  background-color: #d1d5db;
}

.flex-alignment-button:focus[b-rh1udhr5z1] {
  outline: none;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
}

.flex-alignment-button.active[b-rh1udhr5z1] {
  background-color: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.flex-alignment-button.active:hover[b-rh1udhr5z1] {
  background-color: #ffffff;
}

.flex-alignment-icon[b-rh1udhr5z1] {
  width: 18px;
  height: 18px;
  fill: #374151;
}

.flex-alignment-button.active .flex-alignment-icon[b-rh1udhr5z1] {
  fill: #1d4ed8;
}
/* _content/LPI.Features.FlexForm.Client.Ux.Web/Components/Editor/Components/PropertiesPanel/EditablePropertyInput.razor.rz.scp.css */
.flex-property-group[b-dp47qv5nb7] {
  display: flex;
  flex-direction: column;
  margin-bottom: 6px;
}

.flex-property-group input[type="text"][b-dp47qv5nb7],
.flex-property-group input[type="number"][b-dp47qv5nb7],
.flex-property-group textarea[b-dp47qv5nb7],
.flex-property-group select[b-dp47qv5nb7] {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 14px;
  font-family: inherit;
  transition: all 0.2s;
}

.flex-property-group input[type="text"]:focus[b-dp47qv5nb7],
.flex-property-group input[type="number"]:focus[b-dp47qv5nb7],
.flex-property-group textarea:focus[b-dp47qv5nb7],
.flex-property-group select:focus[b-dp47qv5nb7] {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.flex-property-group input[type="text"]:disabled[b-dp47qv5nb7] {
  background: #f3f4f6;
  color: #9ca3af;
  cursor: not-allowed;
}

.flex-property-group input[type="checkbox"][b-dp47qv5nb7] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.flex-property-group textarea[b-dp47qv5nb7] {
  resize: vertical;
  min-height: 60px;
}

/* Text Alignment Editor */
.flex-alignment-editor[b-dp47qv5nb7] {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.flex-alignment-row[b-dp47qv5nb7] {
  display: flex;
  align-items: center;
  gap: 8px;
}

.flex-alignment-label[b-dp47qv5nb7] {
  font-size: 12px;
  color: #666;
  min-width: 60px;
}

.flex-alignment-button-group[b-dp47qv5nb7] {
  display: flex;
  gap: 2px;
  background-color: #e5e7eb;
  border-radius: 6px;
  padding: 2px;
}

.flex-alignment-button[b-dp47qv5nb7] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 28px;
  padding: 4px;
  border: none;
  background-color: transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.flex-alignment-button:hover[b-dp47qv5nb7] {
  background-color: #d1d5db;
}

.flex-alignment-button:focus[b-dp47qv5nb7] {
  outline: none;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
}

.flex-alignment-button.active[b-dp47qv5nb7] {
  background-color: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.flex-alignment-button.active:hover[b-dp47qv5nb7] {
  background-color: #ffffff;
}

.flex-alignment-icon[b-dp47qv5nb7] {
  width: 18px;
  height: 18px;
  fill: #374151;
}

.flex-alignment-button.active .flex-alignment-icon[b-dp47qv5nb7] {
  fill: #1d4ed8;
}

.flex-editable-property-label[b-dp47qv5nb7] {
  font-size: 14px;
  font-weight: 400;
  color: var(--flex-text-header);
}

.flex-editable-property-description[b-dp47qv5nb7] {
  color: var(--flex-text-header);
}


.flex-property-input-field[b-dp47qv5nb7] {
  flex-grow: 1;
  width: 100%;
  min-width: 0;
  padding: var(--flex-spacing-2);
  border: 1px solid var(--flex-color-gray-600);
  border-radius: var(--flex-radius-default);
  box-shadow: var(--flex-shadow-sm);
  line-height: var(--flex-line-height-tight);
  color: var(--flex-input-text);
  background-color: var(--flex-input-background);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  transition: border-color var(--flex-transition-fast), box-shadow var(--flex-transition-fast);
}
/* _content/LPI.Features.FlexForm.Client.Ux.Web/Components/Editor/Components/PropertiesPanel/EnumChoiceListCsvEditor.razor.rz.scp.css */
.flex-modal-overlay[b-hv4c9w067v] {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 1rem;
}

.flex-modal-container[b-hv4c9w067v] {
  background-color: #ffffff;
  border-radius: 0.5rem;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  max-width: 56rem;
  width: 100%;
  max-height: 90vh;
  overflow: hidden;
}

.dark .flex-modal-container[b-hv4c9w067v] {
  background-color: #1f2937;
}

.flex-modal-header[b-hv4c9w067v] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem;
  border-bottom: 1px solid #e5e7eb;
}

.dark .flex-modal-header[b-hv4c9w067v] {
  border-bottom-color: #374151;
}

.flex-modal-title[b-hv4c9w067v] {
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 600;
  color: #111827;
}

.dark .flex-modal-title[b-hv4c9w067v] {
  color: #f3f4f6;
}

.flex-modal-close[b-hv4c9w067v] {
  position: relative;
  color: #9ca3af;
  transition: color 150ms ease-in-out;
}

.flex-modal-close:hover[b-hv4c9w067v] {
  color: #4b5563;
}

.dark .flex-modal-close:hover[b-hv4c9w067v] {
  color: #d1d5db;
}

.flex-modal-body[b-hv4c9w067v] {
  padding: 1.5rem;
  overflow-y: auto;
  max-height: calc(90vh - 180px);
}

.flex-modal-footer[b-hv4c9w067v] {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1.5rem;
  border-top: 1px solid #e5e7eb;
}

.dark .flex-modal-footer[b-hv4c9w067v] {
  border-top-color: #374151;
}

.flex-modal-form-preview[b-hv4c9w067v] {
  background-color: #f9fafb;
  border-radius: 0.5rem;
  padding: 1rem;
  border: 1px solid #e5e7eb;
}

.dark .flex-modal-form-preview[b-hv4c9w067v] {
  background-color: #111827;
  border-color: #374151;
}

.flex-modal-instructions[b-hv4c9w067v] {
  margin: 0 0 12px 0;
  color: #6b7280;
  font-size: 14px;
}

.flex-choice-textarea[b-hv4c9w067v] {
  width: 100%;
  min-height: 300px;
  padding: 12px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  resize: vertical;
  box-sizing: border-box;
}

.flex-choice-textarea:focus[b-hv4c9w067v] {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.flex-choice-textarea[b-hv4c9w067v]::placeholder {
  color: #9ca3af;
}

.flex-validation-error[b-hv4c9w067v] {
  margin-top: 8px;
  padding: 8px 12px;
  background-color: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 4px;
  color: #dc2626;
  font-size: 14px;
}
/* _content/LPI.Features.FlexForm.Client.Ux.Web/Components/Editor/Components/PropertiesPanel/EnumChoiceListEditor.razor.rz.scp.css */
/* Enum Choice List Editor Styles */
.flex-enum-choice-list-editor[b-av07xh66kw] {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 0;
}

.flex-enum-choice-header[b-av07xh66kw] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px;
}

.flex-enum-header-button-group[b-av07xh66kw] {
  display: flex;
  flex-direction: row;
  gap: 3px;
}

.flex-enum-choice-title[b-av07xh66kw] {
  font-weight: 600;
  font-size: 14px;
  color: var(--flex-text-header);
}

.flex-enum-choice-header-btn[b-av07xh66kw] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  background: var(--flex-property-edit-button-color);
  cursor: pointer;
  transition: all 0.15s ease;
}

.flex-enum-choice-header-btn:hover[b-av07xh66kw] {
  background: #f3f4f6;
  border-color: #9ca3af;
}

.dark .flex-enum-choice-header-btn:hover[b-av07xh66kw] {
  background: #e5e7eb;
}

.flex-enum-choice-open-csv-edit-modal-btn[b-av07xh66kw] {
  padding: 3px;
}

.flex-enum-choice-icon[b-av07xh66kw] {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.flex-enum-choice-table-header[b-av07xh66kw] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 500;
  color: #6b7280;
  border-bottom: 1px solid #e5e7eb;
}

.flex-enum-choice-drag-col[b-av07xh66kw] {
  width: 24px;
  flex-shrink: 0;
}

.flex-enum-choice-value-col[b-av07xh66kw] {
  flex: 1;
  min-width: 0;
}

.flex-enum-choice-text-col[b-av07xh66kw] {
  flex: 1;
  min-width: 0;
}

.flex-enum-choice-actions-col[b-av07xh66kw] {
  width: 32px;
  flex-shrink: 0;
}

.flex-enum-choice-list[b-av07xh66kw] {
  display: flex;
  flex-direction: column;
}

.flex-enum-choice-row[b-av07xh66kw] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 4px;
  transition: background-color 0.15s ease;
}

.flex-enum-choice-row:hover[b-av07xh66kw] {
  background: #f9fafb;
}

.dark .flex-enum-choice-row:hover[b-av07xh66kw] {
  background: #4b5563;
}

.flex-enum-choice-row.flex-dragging[b-av07xh66kw] {
  opacity: 0.5;
  background: #e5e7eb;
}

.flex-enum-choice-row.flex-drag-over-top[b-av07xh66kw] {
  box-shadow: inset 0 2px 0 0 #3b82f6;
}

.flex-enum-choice-row.flex-drag-over-bottom[b-av07xh66kw] {
  box-shadow: inset 0 -2px 0 0 #3b82f6;
}

.flex-enum-choice-row.flex-has-error[b-av07xh66kw] {
  background: #fef2f2;
}

.flex-enum-choice-drag-handle[b-av07xh66kw] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  cursor: grab;
  color: #9ca3af;
}

.flex-enum-choice-drag-handle:hover[b-av07xh66kw] {
  color: #6b7280;
}

.flex-enum-choice-drag-handle:active[b-av07xh66kw] {
  cursor: grabbing;
}

.flex-drag-icon[b-av07xh66kw] {
  width: 14px;
  height: 14px;
}

.flex-enum-choice-row .flex-input-field[b-av07xh66kw] {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 13px;
  transition: border-color 0.15s ease;
  color: var(--flex-text-header);
}

.flex-enum-choice-row .flex-input-field:focus[b-av07xh66kw] {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.flex-enum-choice-row .flex-input-field.flex-input-error[b-av07xh66kw] {
  border-color: #ef4444;
  background: #fef2f2;
}

.flex-enum-choice-row .flex-input-field[b-av07xh66kw]::placeholder {
  color: #9ca3af;
  font-style: italic;
}

.flex-enum-choice-delete-btn[b-av07xh66kw] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  color: var(--flex-property-edit-button-color);
  transition: all 0.15s ease;
}

.flex-enum-choice-delete-btn:hover:not(:disabled)[b-av07xh66kw] {
  background: #fee2e2;
  color: #ef4444;
}

.flex-enum-choice-delete-btn:disabled[b-av07xh66kw] {
  cursor: not-allowed;
  opacity: 0.4;
}

.flex-delete-icon[b-av07xh66kw] {
  width: 16px;
  height: 16px;
}

.flex-enum-choice-error[b-av07xh66kw] {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 40px;
  font-size: 12px;
  color: #dc2626;
}

.flex-error-icon[b-av07xh66kw] {
  width: 14px;
  height: 14px;
  fill: #dc2626;
}
/* _content/LPI.Features.FlexForm.Client.Ux.Web/Components/Editor/Components/PropertiesPanel/GridDefinitionsEditor.razor.rz.scp.css */
.flex-flex-grid-definitions-editor[b-pd9jf8gqxu] {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.flex-flex-grid-definitions-list[b-pd9jf8gqxu] {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.flex-grid-definition-item[b-pd9jf8gqxu] {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background-color: var(--flex-color-gray-100, #f3f4f6);
  border: 1px solid var(--flex-color-gray-300, #d1d5db);
  border-radius: var(--flex-radius-default, 4px);
  transition: background-color 0.15s ease;
  min-width: 0;
}

.flex-grid-definition-item:hover[b-pd9jf8gqxu] {
  background-color: var(--flex-color-gray-200, #e5e7eb);
}

/* Drag and drop states */
.flex-grid-definition-item.flex-grid-definition-dragging[b-pd9jf8gqxu] {
  opacity: 0.5;
  background-color: var(--flex-color-gray-300, #d1d5db);
}

.flex-grid-definition-item.flex-grid-definition-drag-over-top[b-pd9jf8gqxu] {
  box-shadow: inset 0 2px 0 0 var(--flex-color-blue-500, #3b82f6);
}

.flex-grid-definition-item.flex-grid-definition-drag-over-bottom[b-pd9jf8gqxu] {
  box-shadow: inset 0 -2px 0 0 var(--flex-color-blue-500, #3b82f6);
}

/* Drag handle */
.flex-grid-definition-drag-handle[b-pd9jf8gqxu] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  flex-shrink: 0;
  cursor: grab;
  color: var(--flex-color-gray-400, #9ca3af);
  transition: color 0.15s ease;
}

.flex-grid-definition-drag-handle:hover[b-pd9jf8gqxu] {
  color: var(--flex-color-gray-600, #4b5563);
}

.flex-grid-definition-drag-handle:active[b-pd9jf8gqxu] {
  cursor: grabbing;
}

.flex-grid-definition-drag-icon[b-pd9jf8gqxu] {
  width: 14px;
  height: 14px;
}

.flex-grid-definition-label[b-pd9jf8gqxu] {
  font-size: 12px;
  font-weight: 500;
  color: var(--flex-text-header, #374151);
  min-width: 55px;
  flex-shrink: 0;
}

.flex-grid-column-width-adjustment-section[b-pd9jf8gqxu] {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.flex-grid-definition-type-select[b-pd9jf8gqxu] {
  flex: 1;
  min-width: 0;
  max-width: 100px;
  padding: 4px 6px !important;
  font-size: 12px !important;
}

.flex-grid-definition-value-container[b-pd9jf8gqxu] {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.flex-grid-definition-value-input[b-pd9jf8gqxu] {
  width: 50px !important;
  min-width: 50px !important;
  padding: 4px 6px !important;
  font-size: 12px !important;
  text-align: right;
}

.flex-grid-definition-value-input:disabled[b-pd9jf8gqxu] {
  background-color: var(--flex-color-gray-200, #e5e7eb);
  color: var(--flex-color-gray-500, #6b7280);
  cursor: not-allowed;
}

.flex-grid-definition-value-unit[b-pd9jf8gqxu] {
  font-size: 11px;
  color: var(--flex-color-gray-500, #6b7280);
  flex-shrink: 0;
}

.flex-grid-definition-actions[b-pd9jf8gqxu] {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  flex-shrink: 0;
}

.flex-grid-definition-action-btn[b-pd9jf8gqxu] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 2px;
  border: 1px solid var(--flex-color-gray-300, #d1d5db);
  background-color: var(--flex-color-white, #ffffff);
  border-radius: var(--flex-radius-default, 4px);
  cursor: pointer;
  transition: all 0.15s ease;
  color: var(--flex-color-gray-600, #4b5563);
}

.flex-grid-definition-action-btn:hover:not(:disabled)[b-pd9jf8gqxu] {
  background-color: var(--flex-color-gray-100, #f3f4f6);
  border-color: var(--flex-color-gray-400, #9ca3af);
}

.flex-grid-definition-action-btn:focus[b-pd9jf8gqxu] {
  outline: none;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
}

.flex-grid-definition-action-btn:disabled[b-pd9jf8gqxu] {
  opacity: 0.4;
  cursor: not-allowed;
}

.flex-grid-definition-remove-btn:hover:not(:disabled)[b-pd9jf8gqxu] {
  background-color: var(--flex-color-red-50, #fef2f2);
  border-color: var(--flex-color-red-300, #fca5a5);
  color: var(--flex-color-red-600, #dc2626);
}

.flex-grid-definition-icon[b-pd9jf8gqxu] {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.flex-grid-definition-add-btn[b-pd9jf8gqxu] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 8px 12px;
  margin-top: 2px;
  font-size: 13px;
  font-weight: 500;
  color: var(--flex-color-blue-600, #2563eb);
  background-color: var(--flex-color-blue-50, #eff6ff);
  border: 1px dashed var(--flex-color-blue-300, #93c5fd);
  border-radius: var(--flex-radius-default, 4px);
  cursor: pointer;
  transition: all 0.15s ease;
}

.flex-grid-definition-add-btn:hover[b-pd9jf8gqxu] {
  background-color: var(--flex-color-blue-100, #dbeafe);
  border-color: var(--flex-color-blue-400, #60a5fa);
}

.flex-grid-definition-add-btn:focus[b-pd9jf8gqxu] {
  outline: none;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
}

.flex-grid-definition-icon-add[b-pd9jf8gqxu] {
  width: 14px;
  height: 14px;
}

.flex-grid-definition-max-reached[b-pd9jf8gqxu] {
  font-size: 11px;
  font-style: italic;
  color: var(--flex-color-gray-500, #6b7280);
  text-align: center;
  padding: 6px;
}

/* Highlight animation for moved/added items */
@keyframes flex-grid-definition-highlight-b-pd9jf8gqxu {
  0% {
    background-color: var(--flex-color-blue-200, #bfdbfe);
    border-color: var(--flex-color-blue-400, #60a5fa);
  }

  100% {
    background-color: var(--flex-color-gray-100, #f3f4f6);
    border-color: var(--flex-color-gray-300, #d1d5db);
  }
}

.flex-grid-definition-item-highlighted[b-pd9jf8gqxu] {
  animation: flex-grid-definition-highlight-b-pd9jf8gqxu 0.6s ease-out forwards;
}

.flex-grid-column-width-adjustment-section[b-pd9jf8gqxu] {
  display: flex;
  flex-direction: column;
}
/* _content/LPI.Features.FlexForm.Client.Ux.Web/Components/Editor/Components/PropertiesPanel/GroupedPropertySection.razor.rz.scp.css */
/* EditablePropertyGroup.razor.css */

.flex-property-group[b-n76lje12hr] {
  margin-bottom: 1rem;
}

.flex-property-group-summary[b-n76lje12hr] {
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.75rem;
  color: var(--flex-text-header);
  cursor: pointer;
  user-select: none;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.flex-property-group-summary:hover[b-n76lje12hr] {
  color: rgb(31, 41, 55);
}


.flex-property-group-summary:hover[b-n76lje12hr] {
  color: rgb(31, 41, 55);
}

.flex-group-header[b-n76lje12hr] {
  color: var(--flex-text-header);
}
/* _content/LPI.Features.FlexForm.Client.Ux.Web/Components/Editor/Components/PropertiesPanel/OrientationEditor.razor.rz.scp.css */
.flex-orientation-editor[b-p1sh8dhihg] {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.flex-orientation-button-group[b-p1sh8dhihg] {
  display: flex;
  gap: 2px;
  background-color: #e5e7eb;
  border-radius: 6px;
  padding: 2px;
}

.flex-orientation-button[b-p1sh8dhihg] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 1;
  height: 32px;
  padding: 4px 12px;
  border: none;
  background-color: transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.flex-orientation-button:hover[b-p1sh8dhihg] {
  background-color: #d1d5db;
}

.flex-orientation-button:focus[b-p1sh8dhihg] {
  outline: none;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
}

.flex-orientation-button.active[b-p1sh8dhihg] {
  background-color: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.flex-orientation-button.active:hover[b-p1sh8dhihg] {
  background-color: #ffffff;
}

.flex-orientation-icon[b-p1sh8dhihg] {
  width: 16px;
  height: 16px;
  fill: #374151;
  flex-shrink: 0;
}

.flex-orientation-button.active .flex-orientation-icon[b-p1sh8dhihg] {
  fill: #1d4ed8;
}

.flex-orientation-label[b-p1sh8dhihg] {
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  white-space: nowrap;
}

.flex-orientation-button.active .flex-orientation-label[b-p1sh8dhihg] {
  color: #1d4ed8;
}
/* _content/LPI.Features.FlexForm.Client.Ux.Web/Components/Editor/Components/PropertiesPanel/PropertiesPanel.razor.rz.scp.css */
/* Properties Panel */
.flex-properties-panel[b-qkobdqfr8e] {
  width: 300px;
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--flex-bg-raised-panel);
  border-left: 1px solid #e5e7eb;
  padding: 20px;
  overflow-y: auto;
}

.flex-properties-panel-title[b-qkobdqfr8e] {
  color: var(--flex-text-header);
}

.flex-properties-panel-type[b-qkobdqfr8e] {
  color: var(--flex-text-header);
}

.flex-properties-panel.flex-hidden[b-qkobdqfr8e] {
  display: none;
}

.flex-properties-panel h2[b-qkobdqfr8e] {
  font-size: 16px;
  margin-bottom: 15px;
  color: var(--flex-text-header);
}

/* Scrollbar styling */
.flex-properties-panel[b-qkobdqfr8e]::-webkit-scrollbar {
  width: 8px;
}

.flex-properties-panel[b-qkobdqfr8e]::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.flex-properties-panel[b-qkobdqfr8e]::-webkit-scrollbar-thumb {
  background: #cbd5e1;
}

  .flex-properties-panel[b-qkobdqfr8e]::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
  }

.flex-properties-content[b-qkobdqfr8e] {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.flex-widget-icon[b-qkobdqfr8e] {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  margin-right: 0.25em;
  color: var(--flex-text-header);
}

.flex-widget-icon svg[b-qkobdqfr8e] {
  display: block;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .flex-properties-panel[b-qkobdqfr8e] {
    width: 250px;
  }
}

@media (max-width: 768px) {
  .flex-properties-panel[b-qkobdqfr8e] {
    width: 100%;
    max-height: 200px;
  }
}
/* _content/LPI.Features.FlexForm.Client.Ux.Web/Components/Editor/Components/PropertiesPanel/PropertySection.razor.rz.scp.css */
/* EditablePropertySection.razor.css */

.flex-property-section-summary[b-tnjekj713y] {
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.75rem;
  color: var(--flex-text-header);
  cursor: pointer;
  user-select: none;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.flex-property-section-summary:hover[b-tnjekj713y] {
  color: rgb(31, 41, 55);
}

.flex-details-content[b-tnjekj713y] {
  /* Add padding/margin as needed */
}

.flex-details-content-inner[b-tnjekj713y] {
  /* Add padding/margin as needed */
}
/* _content/LPI.Features.FlexForm.Client.Ux.Web/Components/Editor/Components/PropertiesPanel/StringListEditor.razor.rz.scp.css */
.flex-string-list-editor[b-0z70439f5f] {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.flex-string-list-header[b-0z70439f5f] {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-string-list-title[b-0z70439f5f] {
  font-size: 0.75rem;
  font-weight: 600;
  color: rgb(55, 65, 81);
}

.flex-string-list-add-btn[b-0z70439f5f] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  color: rgb(107, 114, 128);
}

.flex-string-list-add-btn:hover[b-0z70439f5f] {
  color: rgb(37, 99, 235);
}

.flex-string-list-icon[b-0z70439f5f] {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}

.flex-string-list-items[b-0z70439f5f] {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.flex-string-list-row[b-0z70439f5f] {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.flex-string-list-input[b-0z70439f5f] {
  flex: 1;
  min-width: 0;
}

.flex-string-list-delete-btn[b-0z70439f5f] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  color: rgb(156, 163, 175);
  flex-shrink: 0;
}

.flex-string-list-delete-btn:hover:not(:disabled)[b-0z70439f5f] {
  color: rgb(239, 68, 68);
}

.flex-string-list-delete-btn:disabled[b-0z70439f5f] {
  opacity: 0.3;
  cursor: not-allowed;
}

.flex-string-list-delete-icon[b-0z70439f5f] {
  width: 0.875rem;
  height: 0.875rem;
}
/* _content/LPI.Features.FlexForm.Client.Ux.Web/Components/Editor/Components/PropertiesPanel/ToggleSwitch.razor.rz.scp.css */
.flex-toggle-switch-container[b-4uz54jq3nd] {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
  padding-left: 2px;
}

.flex-toggle-switch[b-4uz54jq3nd] {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
  color: var(--flex-text-header);
}

.flex-toggle-switch input[b-4uz54jq3nd] {
  opacity: 0;
  width: 0;
  height: 0;
}

.flex-toggle-slider[b-4uz54jq3nd] {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #d1d5db;
  transition: background-color 0.2s ease;
  border-radius: 24px;
}

  .flex-toggle-slider[b-4uz54jq3nd]::before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: transform 0.2s ease;
    border-radius: 50%;
  }

.flex-toggle-switch input:checked + .flex-toggle-slider[b-4uz54jq3nd] {
  background-color: #2563eb;
}

  .flex-toggle-switch input:checked + .flex-toggle-slider[b-4uz54jq3nd]::before {
    transform: translateX(20px);
  }

.flex-toggle-state-label[b-4uz54jq3nd] {
  font-size: 13px;
  font-weight: 500;
  color: var(--flex-text-header);
  user-select: none;
}
/* _content/LPI.Features.FlexForm.Client.Ux.Web/Components/Editor/Components/StyleDefaultsEditor/FormStyleDefaultsEditor.razor.rz.scp.css */
/* Overlay */
.flex-style-defaults-overlay[b-ipmyfy3xps] {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

/* Modal */
.flex-style-defaults-modal[b-ipmyfy3xps] {
  background: var(--flex-bg-raised-panel);
  border: 1px solid var(--flex-border-color);
  border-radius: 8px;
  width: 800px;
  max-width: 90vw;
  height: 600px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

/* Header */
.flex-style-defaults-header[b-ipmyfy3xps] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--flex-border-color);
  flex-shrink: 0;
}

.flex-style-defaults-header h2[b-ipmyfy3xps] {
  margin: 0;
  font-size: 16px;
  color: var(--flex-text-header);
}

.flex-style-defaults-close-btn[b-ipmyfy3xps] {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--flex-text-header);
  padding: 0 4px;
  line-height: 1;
}

.flex-style-defaults-close-btn:hover[b-ipmyfy3xps] {
  opacity: 0.7;
}

/* Body */
.flex-style-defaults-body[b-ipmyfy3xps] {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* Widget List (Left Panel) */
.flex-style-defaults-widget-list[b-ipmyfy3xps] {
  width: 220px;
  border-right: 1px solid var(--flex-border-color);
  padding: 12px;
  overflow-y: auto;
  flex-shrink: 0;
}

.flex-style-defaults-widget-list h3[b-ipmyfy3xps] {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--flex-text-header);
  margin: 12px 0 6px 0;
  opacity: 0.7;
}

.flex-style-defaults-widget-list h3:first-child[b-ipmyfy3xps] {
  margin-top: 0;
}

.flex-style-defaults-widget-item[b-ipmyfy3xps] {
  padding: 8px 10px;
  margin-bottom: 4px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--flex-icon-color);
  transition: background 0.15s;
}

.flex-style-defaults-widget-item:hover[b-ipmyfy3xps] {
  background: var(--flex-bg-flex-widget);
}

.flex-style-defaults-widget-item.selected[b-ipmyfy3xps] {
  background: #2563eb;
  color: white;
}

.flex-style-defaults-widget-icon[b-ipmyfy3xps] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

[b-ipmyfy3xps] .flex-style-defaults-widget-icon svg {
  display: block;
}

/* Properties Panel (Right Panel) */
.flex-style-defaults-properties[b-ipmyfy3xps] {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
}

/* Preview Section */
.flex-style-defaults-preview[b-ipmyfy3xps] {
  margin-bottom: 16px;
}

.flex-style-defaults-preview-box[b-ipmyfy3xps] {
  background: white;
  border: 1px solid var(--flex-border-color);
  border-radius: 6px;
  padding: 16px;
  margin-top: 6px;
}

.flex-style-defaults-preview-unavailable[b-ipmyfy3xps] {
  color: var(--flex-text-header);
  opacity: 0.5;
  font-style: italic;
  font-size: 13px;
  margin: 0;
  text-align: center;
}

.flex-style-defaults-properties-content[b-ipmyfy3xps] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

[b-ipmyfy3xps] .flex-group-header {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--flex-text-header);
  margin-top: 8px;
  opacity: 0.7;
}

.flex-style-defaults-empty-state[b-ipmyfy3xps] {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--flex-text-header);
  opacity: 0.5;
  font-style: italic;
}

/* Scrollbar styling */
.flex-style-defaults-widget-list[b-ipmyfy3xps]::-webkit-scrollbar,
.flex-style-defaults-properties[b-ipmyfy3xps]::-webkit-scrollbar {
  width: 6px;
}

.flex-style-defaults-widget-list[b-ipmyfy3xps]::-webkit-scrollbar-track,
.flex-style-defaults-properties[b-ipmyfy3xps]::-webkit-scrollbar-track {
  background: transparent;
}

.flex-style-defaults-widget-list[b-ipmyfy3xps]::-webkit-scrollbar-thumb,
.flex-style-defaults-properties[b-ipmyfy3xps]::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

  .flex-style-defaults-widget-list[b-ipmyfy3xps]::-webkit-scrollbar-thumb:hover,
  .flex-style-defaults-properties[b-ipmyfy3xps]::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
  }
/* _content/LPI.Features.FlexForm.Client.Ux.Web/Components/Editor/Components/ValidationPanel/ValidationPanel.razor.rz.scp.css */
.flex-rules-panel[b-a3ivak56za] {
  width: 300px;
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--flex-bg-raised-panel);
  border-left: 1px solid #e5e7eb;
  padding: 20px;
  overflow-y: auto;
}

.flex-rules-panel-title[b-a3ivak56za] {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 15px;
  color: var(--flex-text-header);
}

.flex-rules-panel-content[b-a3ivak56za] {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.flex-rules-panel-empty[b-a3ivak56za] {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #9ca3af;
  padding: 40px 20px;
  gap: 16px;
}

.flex-rules-add-btn[b-a3ivak56za] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: #2563eb;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: background 0.15s;
}

.flex-rules-add-btn:hover[b-a3ivak56za] {
  background: #1d4ed8;
}

.flex-rules-editor[b-a3ivak56za] {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.flex-rules-section[b-a3ivak56za] {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.flex-rules-label[b-a3ivak56za] {
  font-size: 12px;
  font-weight: 600;
  color: var(--flex-text-header);
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.flex-rules-select[b-a3ivak56za],
.flex-rules-input[b-a3ivak56za] {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 13px;
  color: var(--flex-text-header);
  background: var(--flex-input-background, white);
  transition: border-color 0.15s;
}

.flex-rules-select:focus[b-a3ivak56za],
.flex-rules-input:focus[b-a3ivak56za] {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

.flex-rules-hint[b-a3ivak56za] {
  font-size: 12px;
  color: #9ca3af;
  margin: 0;
  line-height: 1.4;
}

.flex-rules-summary[b-a3ivak56za] {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 12px;
}

.flex-rules-summary-label[b-a3ivak56za] {
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.flex-rules-summary-text[b-a3ivak56za] {
  font-size: 13px;
  color: var(--flex-text-header);
  margin: 4px 0 0;
  line-height: 1.5;
}

.flex-rules-remove-btn[b-a3ivak56za] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: transparent;
  color: #ef4444;
  border: 1px solid #fecaca;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: background 0.15s, border-color 0.15s;
  align-self: flex-start;
}

.flex-rules-remove-btn:hover[b-a3ivak56za] {
  background: #fef2f2;
  border-color: #ef4444;
}
/* _content/LPI.Features.FlexForm.Client.Ux.Web/Components/Editor/Components/WidgetPanel/WidgetItem.razor.rz.scp.css */
.flex-widget-item[b-xwqv26h6mh] {
  padding: 12px 16px;
  margin-bottom: 10px;
  background: var(--flex-bg-flex-widget);
  border: 2px solid var(--flex-border-flex-widget);
  border-radius: 6px;
  cursor: move;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.2s;
  user-select: none;
  max-height: 35px;
  color: var(--flex-icon-color);
}

.flex-widget-item svg[b-xwqv26h6mh] {
  display: block;
}

.flex-widget-item-disabled[b-xwqv26h6mh] {
  color: #CBD5E1;
  /*    background: #f9fafb;*/
  cursor: not-allowed;
  opacity: 0.5;
}

.flex-widget-item:hover:not(.flex-widget-item-disabled)[b-xwqv26h6mh] {
  background: #f3f4f6;
  border-color: #2563eb;
  color: #2563eb;
}

.dark .flex-widget-item:hover:not(.flex-widget-item-disabled)[b-xwqv26h6mh] {
  background: #1e2939;
}

.flex-widget-item:active[b-xwqv26h6mh] {
  opacity: 0.7;
}

.flex-widget-icon[b-xwqv26h6mh] {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
/* _content/LPI.Features.FlexForm.Client.Ux.Web/Components/Editor/Components/WidgetPanel/WidgetsPanel.razor.rz.scp.css */
/* Widgets Panel */
.flex-widgets-panel[b-y4xv2ocn36] {
  width: 250px;
  background: var(--flex-bg-raised-panel);
  border-right: 1px solid var(--flex-border-color);
  padding: 20px;
  overflow-y: auto;
  flex-shrink: 0;
}

.flex-widgets-panel.hidden[b-y4xv2ocn36] {
  display: none;
}

.flex-widgets-panel h2[b-y4xv2ocn36] {
  font-size: 16px;
  margin-bottom: 15px;
  color: var(--flex-text-header);
}

.flex-widgets-panel-header[b-y4xv2ocn36] {
  margin-bottom: 16px;
}

.flex-edit-defaults-btn[b-y4xv2ocn36] {
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: 1px solid var(--flex-border-color);
  border-radius: 4px;
  color: var(--flex-text-header);
  cursor: pointer;
  font-size: 13px;
  transition: all 0.15s;
}

.flex-edit-defaults-btn:hover[b-y4xv2ocn36] {
  background: #2563eb;
  border-color: #2563eb;
  color: white;
}
/* _content/LPI.Features.FlexForm.Client.Ux.Web/Components/Editor/FormEditor.razor.rz.scp.css */
.flex-form-editor[b-b083r3f6u1] {
  display: flex;
  flex-direction: column;
  height: stretch;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  background: var(--flex-bg-primary);
  margin: 0;
  padding: 0;
  width: 100%;
  flex: 1;
  min-width: 0;
  transition: padding-bottom 0.2s ease;
  position: relative;
}

/* Skeleton loader */
.flex-skeleton-loader[b-b083r3f6u1] {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  padding: 8px 0;
}

.flex-skeleton-row[b-b083r3f6u1] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.flex-skeleton-label[b-b083r3f6u1] {
  height: 14px;
  width: 30%;
  background: #e2e8f0;
  border-radius: 4px;
  animation: flex-skeletonPulse-b-b083r3f6u1 1.5s ease-in-out infinite;
}

.flex-skeleton-label--short[b-b083r3f6u1] {
  width: 20%;
}

.flex-skeleton-input[b-b083r3f6u1] {
  height: 38px;
  width: 100%;
  background: #e2e8f0;
  border-radius: 6px;
  animation: flex-skeletonPulse-b-b083r3f6u1 1.5s ease-in-out infinite;
  animation-delay: 0.1s;
}

.flex-skeleton-input--tall[b-b083r3f6u1] {
  height: 80px;
}

@keyframes flex-skeletonPulse-b-b083r3f6u1 {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: 0.4;
  }
}

.dark .flex-form-editor[b-b083r3f6u1] {
  background: #D1D5DB;
}

.flex-form-editor.flex-drawer-open[b-b083r3f6u1] {
  padding-bottom: var(--drawer-height, 250px);
}

.flex-header[b-b083r3f6u1] {
  height: 60px;
  background: #2563eb;
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  flex-shrink: 0;
}

.flex-header h1[b-b083r3f6u1] {
  font-size: 20px;
  font-weight: 600;
  margin: 0;
}

.flex-back-to-company-forms-button[b-b083r3f6u1] {
  max-height: 20px;
  display: inline-flex;
  flex-direction: row;
  max-width: 70px;
}

.flex-form-selector[b-b083r3f6u1] {
  display: flex;
  align-items: center;
}

.flex-form-selector select[b-b083r3f6u1] {
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  min-width: 180px;
  transition: all 0.2s;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='white' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

.flex-form-selector select:hover[b-b083r3f6u1] {
  background-color: rgba(255, 255, 255, 0.3);
}

.flex-form-selector select:focus[b-b083r3f6u1] {
  outline: none;
  background-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4);
}

.flex-form-selector select option[b-b083r3f6u1] {
  background: #2563eb;
  color: white;
  padding: 8px;
}

.flex-mode-toggle[b-b083r3f6u1] {
  display: flex;
  gap: 8px;
  background: rgba(255, 255, 255, 0.2);
  padding: 4px;
  border-radius: 6px;
}

.flex-mode-btn[b-b083r3f6u1] {
  padding: 8px 16px;
  background: transparent;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s;
}

.flex-mode-btn.flex-active[b-b083r3f6u1] {
  background: white;
  color: #2563eb;
}

.flex-mode-btn:hover:not(.flex-active)[b-b083r3f6u1] {
  background: rgba(255, 255, 255, 0.1);
}

.flex-form-editor-container[b-b083r3f6u1] {
  display: flex;
  flex: 1;
  overflow: hidden;
  padding: 0px;
  width: 100%;
  margin: 0;
  box-sizing: border-box;
}

.flex-nested-component-container[b-b083r3f6u1] {
}



/* Right Panel */
.flex-editor-right-panel[b-b083r3f6u1] {
  display: flex;
  flex-direction: row;
  flex-shrink: 0;
  align-self: stretch;
  overflow: hidden;
}

.flex-editor-right-panel.flex-hidden[b-b083r3f6u1] {
  display: none;
}

.flex-editor-right-panel-content[b-b083r3f6u1] {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

/* Panel Sidebar */
.flex-panel-sidebar[b-b083r3f6u1] {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 4px;
  background: var(--flex-bg-recessed, #f1f5f9);
  border-left: 1px solid #e5e7eb;
  flex-shrink: 0;
  align-self: stretch;
}

.flex-panel-sidebar-btn[b-b083r3f6u1] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 6px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--flex-text-muted, #94a3b8);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.flex-panel-sidebar-btn svg[b-b083r3f6u1] {
  width: 20px;
  height: 20px;
}

.flex-panel-sidebar-btn:hover[b-b083r3f6u1] {
  background: var(--flex-bg-hover, #e2e8f0);
  color: var(--flex-text-header, #1e293b);
}

.flex-panel-sidebar-btn--active[b-b083r3f6u1] {
  background: var(--flex-bg-raised-panel, #ffffff);
  color: #2563eb;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.flex-panel-sidebar-btn--active:hover[b-b083r3f6u1] {
  color: #2563eb;
}

/* Canvas */
.flex-editor-container[b-b083r3f6u1] {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 40px;
  overflow-y: auto;
  background: var(--flex-bg-primary);
}

.flex-canvas[b-b083r3f6u1] {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 40px;
  width: 100%;
}

.flex-form-container[b-b083r3f6u1] {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0 auto;
  background: var(--flex-bg-primary);
  padding: 0;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  min-height: 400px;
}

.flex-form-title[b-b083r3f6u1] {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 30px;
  color: var(--flex-text-header);
}

.flex-drop-zone[b-b083r3f6u1] {
  min-height: 200px;
  border: 2px dashed #d1d5db;
  border-radius: 8px;
  padding: 20px;
}

.flex-drop-zone.flex-drag-over[b-b083r3f6u1] {
  background: #eff6ff;
  border-color: #2563eb;
}

.flex-drop-zone.flex-preview-mode[b-b083r3f6u1] {
  border: none;
  padding: 0;
}

.flex-drag-over-container .flex-drop-zone[b-b083r3f6u1] {
  /*    outline: 2px dashed #3b82f6;
    outline-offset: 4px;*/
  background-color: rgba(59, 130, 246, 0.05);
}

.flex-empty-state[b-b083r3f6u1] {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  color: #9ca3af;
}

/* Empty canvas drag-over highlight */
.flex-canvas.flex-drag-over-container[b-b083r3f6u1] {
  outline: 3px dashed #3b82f6;
  outline-offset: -4px;
  background-color: rgba(59, 130, 246, 0.06);
  animation: flex-emptyCanvasPulse-b-b083r3f6u1 1.5s ease-in-out infinite;
}

@keyframes flex-emptyCanvasPulse-b-b083r3f6u1 {
  0%, 100% {
    background-color: rgba(59, 130, 246, 0.06);
  }

  50% {
    background-color: rgba(59, 130, 246, 0.12);
  }
}

.flex-empty-state p[b-b083r3f6u1] {
  font-size: 16px;
  margin-bottom: 8px;
}

.flex-empty-state small[b-b083r3f6u1] {
  font-size: 14px;
  color: #d1d5db;
}

/* Form Elements */
.flex-form-row[b-b083r3f6u1] {
  display: flex;
  gap: 15px;
  margin-bottom: 15px;
}


.flex-element-controls[b-b083r3f6u1] {
  place-self: flex-end;
}


.flex-control-btn[b-b083r3f6u1] {
  position: relative;
  top: -15px;
  left: 15px;
  padding: 2px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.2s;
}

.flex-control-btn:hover[b-b083r3f6u1] {
  background: #F9FAFB;
}

.flex-control-btn:hover svg path[b-b083r3f6u1] {
  stroke: #c31e1e;
  fill: #c31e1e;
}

.flex-element-label[b-b083r3f6u1] {
  font-size: 11px;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  font-weight: 600;
}

.flex-element-preview[b-b083r3f6u1] {
  font-size: 14px;
  color: #374151;
  font-weight: 500;
}

.flex-option-row[b-b083r3f6u1] {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.flex-option-row input[b-b083r3f6u1] {
  flex: 1;
}

.flex-remove-option-btn[b-b083r3f6u1] {
  width: 30px;
  height: 30px;
  background: #ef4444;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s;
}

.flex-remove-option-btn:hover[b-b083r3f6u1] {
  background: #dc2626;
}

.flex-add-option-btn[b-b083r3f6u1] {
  width: 100%;
  padding: 8px 12px;
  background: #2563eb;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s;
  margin-top: 8px;
}

.flex-add-option-btn:hover[b-b083r3f6u1] {
  background: #1d4ed8;
}

/* Scrollbar styling */
.flex-widgets-panel[b-b083r3f6u1]::-webkit-scrollbar,
.flex-canvas[b-b083r3f6u1]::-webkit-scrollbar {
  width: 8px;
}

.flex-widgets-panel[b-b083r3f6u1]::-webkit-scrollbar-track,
.flex-canvas[b-b083r3f6u1]::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.flex-widgets-panel[b-b083r3f6u1]::-webkit-scrollbar-thumb,
.flex-canvas[b-b083r3f6u1]::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

  .flex-widgets-panel[b-b083r3f6u1]::-webkit-scrollbar-thumb:hover,
  .flex-canvas[b-b083r3f6u1]::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
  }



horizontal-layout-flex-editor-control[b-b083r3f6u1] {
  min-height: 60px;
  position: relative;
}

horizontal-layout-flex-editor-control.flex-drag-over-container[b-b083r3f6u1] {
  background-color: rgba(59, 130, 246, 0.1);
}


details .flex-details-summary[b-b083r3f6u1] {
  list-style: none;
}

  details .flex-details-summary[b-b083r3f6u1]::-webkit-details-marker {
    display: none;
  }

  details .flex-details-summary[b-b083r3f6u1]::before {
    content: "▶";
    display: inline-block;
    margin-right: 0.5rem;
    transition: transform 0.3s ease;
  }

details[open] .flex-details-summary[b-b083r3f6u1]::before {
  transform: rotate(90deg);
}

details .flex-details-content[b-b083r3f6u1] {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}

.flex-details-content .flex-details-content-inner[b-b083r3f6u1] {
  display: flex;
  flex-direction: column;
}

.flex-details-content .flex-group-header[b-b083r3f6u1] {
  font-weight: 500;
  border-bottom: solid gray;
  width: 100%;
  border-bottom-width: 1px;
  border-bottom-color: lightgray;
  color: #282828;
  margin-top: 4px;
}

details[open] .flex-details-content[b-b083r3f6u1] {
  grid-template-rows: 1fr;
}

/* More specific: targets open details that are in the process of closing */
details[open].flex-closing .flex-details-content[b-b083r3f6u1] {
  grid-template-rows: 0fr;
}

details[open].flex-closing .flex-details-summary[b-b083r3f6u1]::before {
  transform: rotate(0deg);
}

details .flex-details-content > div[b-b083r3f6u1] {
  overflow: hidden;
}

#flex-select-parent-button[b-b083r3f6u1] {
  font-size: 12px;
  padding: 5px;
  border-radius: 5px;
  background: rgba(21,93,252, 0.15);
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .flex-widgets-panel[b-b083r3f6u1] {
    width: 200px;
  }
}

@media (max-width: 768px) {
  .flex-container[b-b083r3f6u1] {
    flex-direction: column;
  }

  .flex-widgets-panel[b-b083r3f6u1] {
    width: 100%;
    max-height: 200px;
  }

  .flex-canvas[b-b083r3f6u1] {
    padding: 20px;
    cursor: pointer;
  }

  .flex-form-container[b-b083r3f6u1] {
    padding: 0;
  }

  .flex-drag-ghost[b-b083r3f6u1] {
    position: fixed;
    pointer-events: none;
    z-index: 10000;
    transform: translate(-50%, -50%);
    animation: flex-dragGhostAppear-b-b083r3f6u1 0.15s ease-out;
  }

  @keyframes flex-dragGhostAppear-b-b083r3f6u1 {
    from {
      opacity: 0;
      transform: translate(-50%, -50%) scale(0.95);
    }

    to {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
    }
  }

  .flex-drag-ghost-content[b-b083r3f6u1] {
    background: white;
    border: 2px solid #2563eb;
    border-radius: 6px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2), 0 6px 12px rgba(37, 99, 235, 0.3);
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    white-space: nowrap;
  }


  .flex-dragging-placeholder-content[b-b083r3f6u1] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    color: #9ca3af;
    font-size: 14px;
    font-style: italic;
  }

  .flex-dragging-overlay[b-b083r3f6u1] {
    background-color: rgba(0,0,0,0.5); /* Black background with opacity */
  }




  /* Container Drop Zone Enhancement */
  .flex-drag-over-container[b-b083r3f6u1] {
    outline: 3px solid #3b82f6;
    outline-offset: 4px;
    background-color: rgba(59, 130, 246, 0.08);
    animation: flex-containerPulse-b-b083r3f6u1 1.5s ease-in-out infinite;
  }

  @keyframes flex-containerPulse-b-b083r3f6u1 {
    0%, 100% {
      background-color: rgba(59, 130, 246, 0.08);
    }

    50% {
      background-color: rgba(59, 130, 246, 0.15);
    }
  }
}
/* _content/LPI.Features.FlexForm.Client.Ux.Web/Components/FlexForm.razor.rz.scp.css */
.flex-form[b-rd9a9a4rfv] {
  width: 100%;
  margin: 0.25rem;
  margin-right: 1rem;
  padding: 10px;
  overflow: auto;
}
/* _content/LPI.Features.FlexForm.Client.Ux.Web/Components/FlexFormOverview.razor.rz.scp.css */
/* FormDataGrid.razor.css */

/* ===== Container ===== */
.flex-container[b-acnxperua1] {
  width: 100%;
  margin-right: 1rem;
}

@media (min-width: 1024px) {
  .flex-container[b-acnxperua1] {
    margin-right: 0;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ===== Desktop Table ===== */
.flex-data-grid-container[b-acnxperua1] {
  display: none;
  width: 100%;
}

@media (min-width: 1024px) {
  .flex-data-grid-container[b-acnxperua1] {
    display: block;
  }
}

.flex-data-grid-table[b-acnxperua1] {
  width: 100%;
}

.flex-table-head[b-acnxperua1] {
  position: sticky;
}

.flex-th[b-acnxperua1] {
  border-bottom: 1px solid rgb(226, 232, 240);
  font-weight: 700;
  padding: 1rem;
  color: rgb(148, 163, 184);
  text-align: left;
}

.flex-th-empty[b-acnxperua1] {
  border-bottom: 1px solid rgb(226, 232, 240);
}

.flex-tr[b-acnxperua1] {
  cursor: pointer;
}

.flex-tr:hover[b-acnxperua1] {
  background-color: rgb(243, 244, 246);
}

.flex-td[b-acnxperua1] {
  border-bottom: 1px solid rgb(226, 232, 240);
  padding: 1rem;
  color: rgb(148, 163, 184);
  text-align: left;
}

.flex-td-name[b-acnxperua1] {
  font-weight: 600;
}

.flex-td-text[b-acnxperua1] {
  font-weight: 500;
}

.flex-td-actions[b-acnxperua1] {
  border-bottom: 1px solid rgb(226, 232, 240);
}

.flex-icon[b-acnxperua1] {
  opacity: 0.6;
}

.flex-icon-delete[b-acnxperua1] {
  margin-right: 2rem;
}

/* ===== Mobile Layout ===== */
.flex-mobile-container[b-acnxperua1] {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  background-color: rgb(243, 244, 246);
}

@media (min-width: 1024px) {
  .flex-mobile-container[b-acnxperua1] {
    display: none;
  }
}

.flex-mobile-card[b-acnxperua1] {
  padding-right: 0.125rem;
  display: flex;
  cursor: pointer;
}

.flex-mobile-content[b-acnxperua1] {
  flex: 1 1 0%;
}

.flex-mobile-row[b-acnxperua1] {
  display: flex;
  gap: 0.5rem;
  justify-content: space-between;
}

.flex-mobile-row-spacing[b-acnxperua1] {
  margin-top: 0.5rem;
}

.flex-mobile-col-quarter[b-acnxperua1] {
  width: 25%;
}

.flex-data-item-label[b-acnxperua1] {
  font-size: 0.75rem;
  color: rgb(148, 163, 184);
}

.flex-data-item-value[b-acnxperua1] {
  font-size: 0.875rem;
  color: rgb(51, 65, 85);
}

.flex-mobile-arrow[b-acnxperua1] {
  display: flex;
  align-items: center;
  margin-left: 1rem;
}

.flex-mobile-arrow img[b-acnxperua1] {
  margin-left: 0.5rem;
}

/* Dark mode arrow visibility */
.flex-arrow-light[b-acnxperua1] {
  display: block;
}

.flex-arrow-dark[b-acnxperua1] {
  display: none;
}

/* ===== Dark Mode ===== */
@media (prefers-color-scheme: dark) {
  .flex-th[b-acnxperua1],
  .flex-th-empty[b-acnxperua1],
  .flex-td[b-acnxperua1],
  .flex-td-actions[b-acnxperua1] {
    border-color: rgb(71, 85, 105);
  }

  .flex-th[b-acnxperua1],
  .flex-td[b-acnxperua1] {
    color: rgb(226, 232, 240);
  }

  .flex-arrow-light[b-acnxperua1] {
    display: none;
  }

  .flex-arrow-dark[b-acnxperua1] {
    display: block;
  }
}
/* _content/LPI.Features.FlexForm.Client.Ux.Web/Toast/ToastProvider.razor.rz.scp.css */
@keyframes flex-toast-slide-in-b-2b5vgn6xwk {
  from {
    opacity: 0;
    transform: translateX(100%);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes flex-toast-shrink-b-2b5vgn6xwk {
  from {
    width: 100%;
  }

  to {
    width: 0%;
  }
}

.flex-toast-animate-slide-in[b-2b5vgn6xwk] {
  animation: flex-toast-slide-in-b-2b5vgn6xwk 0.3s ease-out;
}

.flex-toast-animate-shrink[b-2b5vgn6xwk] {
  animation: flex-toast-shrink-b-2b5vgn6xwk 5s linear forwards;
}

/* ========================================
   Overlay
   ======================================== */
.flex-uom-numpad-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: var(--flex-z-modal);
}

/* ========================================
   Container
   ======================================== */
.flex-uom-numpad-container {
  background-color: var(--flex-bg-raised-panel);
  border: 1px solid var(--flex-border-color);
  border-radius: var(--flex-radius-lg);
  box-shadow: var(--flex-shadow-lg);
  padding: var(--flex-spacing-2);
  min-width: 380px;
  max-width: calc(100vw - 2rem);
}

/* ========================================
   Display area
   ======================================== */
.flex-uom-numpad-display {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: var(--flex-spacing-2);
  padding: var(--flex-spacing-2) var(--flex-spacing-4);
  margin-bottom: var(--flex-spacing-2);
  font-size: 1.25rem;
  color: var(--flex-text-header);
  border-bottom: 1px solid var(--flex-border-color);
}

.flex-uom-numpad-unit {
  color: var(--flex-color-gray-500);
  font-size: var(--flex-font-size-base);
}

:global(.dark) .flex-uom-numpad-unit {
  color: #9ca3af;
}

/* ========================================
   Body: fraction column + keypad side by side
   ======================================== */
.flex-uom-numpad-body {
  display: flex;
  gap: var(--flex-spacing-2);
}

/* ========================================
   Fraction column
   ======================================== */
.flex-uom-numpad-fractions {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* ========================================
   Keypad grid: 4 cols x 5 rows
   Cols 1-3: digits   Col 4: actions
   ======================================== */
.flex-uom-numpad-keypad {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(5, 1fr);
  gap: 2px;
}

/* ========================================
   Base button style
   ======================================== */
.flex-uom-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--flex-spacing-1) var(--flex-spacing-2);
  border: 1px solid var(--flex-border-color);
  border-radius: var(--flex-radius-default);
  background-color: var(--flex-input-background);
  color: var(--flex-input-text);
  cursor: pointer;
  font-size: var(--flex-font-size-sm);
  min-height: 2.5rem;
  transition: background-color var(--flex-transition-fast);
  user-select: none;
}

  .flex-uom-btn:hover {
    background-color: #e5e7eb;
  }

  .flex-uom-btn:active {
    background-color: #d1d5db;
  }

:global(.dark) .flex-uom-btn:hover {
  background-color: #3a4150;
}

:global(.dark) .flex-uom-btn:active {
  background-color: #454c5c;
}

/* ========================================
   +/- mode toggle
   ======================================== */
.flex-uom-btn-mode {
  font-weight: 600;
  font-size: var(--flex-font-size-lg);
  background-color: var(--flex-color-primary);
  color: var(--flex-color-white);
  border-color: var(--flex-color-primary);
}

  .flex-uom-btn-mode:hover {
    background-color: var(--flex-color-primary-hover);
  }

:global(.dark) .flex-uom-btn-mode:hover {
  background-color: var(--flex-color-primary-hover);
}

/* ========================================
   Keypad button placement
   ======================================== */

/* Zero spans cols 1-2 */
.flex-uom-btn-zero {
  grid-column: 1 / 3;
}

/* Space spans cols 1-2 */
.flex-uom-btn-space {
  grid-column: 1 / 3;
}

/* OK spans rows 3-5 in col 4 */
.flex-uom-btn-ok {
  grid-column: 4;
  grid-row: 3 / 6;
  background-color: var(--flex-color-primary);
  color: var(--flex-color-white);
  border-color: var(--flex-color-primary);
  font-weight: 600;
}

  .flex-uom-btn-ok:hover {
    background-color: var(--flex-color-primary-hover);
  }

:global(.dark) .flex-uom-btn-ok:hover {
  background-color: var(--flex-color-primary-hover);
}

.flex-uom-unit-selector {
  border: 1px solid var(--flex-border-color, #e2e8f0);
  border-radius: var(--flex-radius-default, 4px);
  padding: 2px 4px;
  font-size: inherit;
  background: var(--flex-input-background, white);
  color: var(--flex-input-text, inherit);
  cursor: pointer;
  min-width: 60px;
}

  .flex-uom-unit-selector:focus {
    outline: 2px solid var(--flex-color-primary);
    outline-offset: -1px;
  }

:global(.dark) .flex-uom-unit-selector {
  border-color: var(--flex-border-color);
  background: var(--flex-input-background);
  color: var(--flex-input-text);
}

/* ==========================================================================
   FlexForm Control Styles
   Converted from Tailwind CSS to standard CSS
   All classes prefixed with 'flex-'
   ========================================================================== */

/* ==========================================================================
   CSS Custom Properties (Design Tokens)
   ========================================================================== */
:root {
  /* Colors */
  --flex-color-primary: #2563eb; /* blue-600 */
  --flex-color-primary-hover: #1d4ed8; /* blue-700 */
  --flex-color-danger: #ef4444; /* red-500 */
  --flex-color-danger-hover: #dc2626; /* red-600 */
  --flex-color-success: #22c55e; /* green-500 */

  --flex-color-gray-200: #e5e7eb;
  --flex-color-gray-300: #d1d5db;
  --flex-color-gray-500: #6b7280;
  --flex-color-gray-600: #4b5563;
  --flex-color-gray-700: #374151;
  --flex-color-slate-300: #cbd5e1;
  --flex-color-slate-700: #334155;
  --flex-color-white: #ffffff;
  --flex-color-black: #000000;
  /* Spacing */
  --flex-spacing-1: 0.25rem; /* 4px */
  --flex-spacing-2: 0.5rem; /* 8px */
  --flex-spacing-4: 1rem; /* 16px */
  --flex-spacing-6: 1.5rem; /* 24px */
  /* Border Radius */
  --flex-radius-sm: 0.125rem;
  --flex-radius-default: 0.25rem;
  --flex-radius-lg: 0.5rem;
  --flex-radius-full: 9999px;
  /* Shadows */
  --flex-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --flex-shadow-default: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --flex-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --flex-shadow-outline: 0 0 0 3px rgba(37, 99, 235, 0.3);
  /* Typography */
  --flex-font-size-xs: 0.75rem; /* 12px */
  --flex-font-size-sm: 0.875rem; /* 14px */
  --flex-font-size-base: 1rem; /* 16px */
  --flex-font-size-lg: 1.125rem; /* 18px */

  --flex-font-weight-normal: 400;
  --flex-font-weight-semibold: 600;
  --flex-font-weight-bold: 700;
  --flex-line-height-tight: 1.25;
  /* Z-Index */
  --flex-z-modal: 50;
  --flex-z-modal-close: 100;
  /* Transitions */
  --flex-transition-fast: 150ms ease-in-out;
  --flex-transition-default: 200ms ease-in-out;
  /* Semantic tokens */
  --flex-input-background: white;
  --flex-input-text: var(--flex-color-slate-700);
  --flex-border-color: #e2e8f0;
  --flex-header-background: #f8fafc;
  --flex-label-text: #475569;
}

  :root.dark,
  .dark {
    /* Colors */
    --flex-color-gray-200: #374151;
    --flex-color-gray-300: #4b5563;
    --flex-color-gray-500: #9ca3af;
    --flex-color-gray-600: #6b7280;
    --flex-color-gray-700: #d1d5db;
    --flex-color-slate-300: #94a3b8;
    --flex-color-slate-700: #cbd5e1;
    --flex-color-white: #1f2937;
    --flex-color-black: #f9fafb;
    /* Semantic tokens */
    --flex-input-background: #2E3341;
    --flex-input-text: #FCFFFF;
    --flex-border-color: #4b5563;
    --flex-header-background: #2E3341;
    --flex-label-text: #cbd5e1;
    /* Shadows */
    --flex-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.2);
    --flex-shadow-default: 0 1px 3px 0 rgb(0 0 0 / 0.3), 0 1px 2px -1px rgb(0 0 0 / 0.2);
    --flex-shadow-outline: 0 0 0 3px rgba(59, 130, 246, 0.4);
  }

/* ==========================================================================
   Base Control Styles
   ========================================================================== */

/* Common control container - relative positioning for validation/descriptions */
.flex-control {
  position: relative;
}

.flex-control-full {
  position: relative;
  width: 100%;
}


/* ==========================================================================
   Input Controls - Shared Styles
   ========================================================================== */

/* Base input styling for text, number, date, time, select, textarea */
.flex-input {
  flex-grow: 1;
  width: 100%;
  min-width: 0;
  padding: var(--flex-spacing-2);
  border: 1px solid var(--flex-color-gray-600);
  border-radius: var(--flex-radius-default);
  box-shadow: var(--flex-shadow-sm);
  line-height: var(--flex-line-height-tight);
  color: var(--flex-input-text);
  background-color: var(--flex-input-background);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  transition: border-color var(--flex-transition-fast), box-shadow var(--flex-transition-fast);
}

  .flex-input:focus {
    outline: none;
    box-shadow: var(--flex-shadow-outline);
    border-color: var(--flex-color-primary);
  }

  .flex-input:disabled,
  .flex-input[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
    border-color: var(--flex-color-gray-300);
    color: var(--flex-color-slate-300);
    background-color: var(--flex-color-gray-200);
  }

/* Textarea specific */
.flex-input-textarea {
  resize: vertical;
  min-height: 80px;
}

/* Select specific */
.flex-input-select {
  cursor: pointer;
  padding-right: 2rem; /* Space for dropdown arrow */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
}


/* ==========================================================================
   Checkbox Control (Boolean)
   ========================================================================== */

boolean-flex-control {
  display: block;
  position: relative;
  width: 100%;
}

.flex-checkbox-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--flex-spacing-2);
}

.flex-checkbox {
  width: 1rem;
  height: 1rem;
  color: var(--flex-color-primary);
  border: 1px solid var(--flex-color-gray-600);
  border-radius: var(--flex-radius-sm);
  cursor: pointer;
}

  .flex-checkbox:checked {
    background-color: var(--flex-color-primary);
    border-color: var(--flex-color-primary);
  }

  .flex-checkbox:disabled {
    cursor: not-allowed;
    opacity: 0.6;
  }


/* ==========================================================================
   Radio Group Control
   ========================================================================== */

radio-group-flex-control {
  display: block;
}

.flex-radio-group-horizontal {
  display: flex;
  flex-direction: row;
  gap: var(--flex-spacing-4);
  flex-wrap: wrap;
}

.flex-radio-group-vertical {
  display: flex;
  flex-direction: column;
  gap: var(--flex-spacing-2);
}

.flex-radio-item {
  display: flex;
  align-items: center;
  gap: var(--flex-spacing-1);
}

.flex-radio {
  width: 1rem;
  height: 1rem;
  min-width: 0;
  color: var(--flex-color-primary);
  cursor: pointer;
}

  .flex-radio:disabled {
    cursor: not-allowed;
    opacity: 0.6;
  }


/* ==========================================================================
   Date Control
   ========================================================================== */

date-flex-control {
  display: block;
  position: relative;
  width: 100%;
}


/* ==========================================================================
   Time Control
   ========================================================================== */

time-flex-control {
  display: block;
  position: relative;
  width: 100%;
}


/* ==========================================================================
   Integer Control
   ========================================================================== */

integer-flex-control {
  display: block;
  position: relative;
  width: 100%;
}


/* ==========================================================================
   Number Control
   ========================================================================== */

number-flex-control {
  display: block;
  position: relative;
  width: 100%;
}


/* ==========================================================================
   String Control
   ========================================================================== */

string-flex-control {
  display: block;
  position: relative;
  width: 100%;
}


/* ==========================================================================
   Multiline String Control (Textarea)
   ========================================================================== */

multiline-string-flex-control {
  display: block;
  position: relative;
  width: 100%;
}


/* ==========================================================================
   String Enum Control (Select/Dropdown)
   ========================================================================== */

string-enum-flex-control {
  display: block;
  position: relative;
  width: 100%;
}


/* ==========================================================================
   UOM Control (Unit of Measure)
   ========================================================================== */

uom-flex-control {
  display: block;
  position: relative;
  width: 100%;
}

.flex-uom-wrapper {
  position: relative;
  width: 100%;
}

.flex-uom-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--flex-spacing-2);
  border: 1px solid var(--flex-color-gray-600);
  border-radius: var(--flex-radius-default);
  background-color: var(--flex-input-background);
  color: var(--flex-input-text);
  cursor: pointer;
  min-height: 2.25rem;
}

  .flex-uom-display:hover {
    border-color: var(--flex-color-primary);
  }

.flex-uom-display--disabled {
  opacity: 0.6;
  cursor: not-allowed;
  border-color: var(--flex-color-gray-300);
  color: var(--flex-color-slate-300);
  background-color: var(--flex-color-gray-200);
}

  .flex-uom-display--disabled:hover {
    border-color: var(--flex-color-gray-300);
  }

.flex-uom-display-unit {
  color: var(--flex-color-gray-500);
  margin-left: var(--flex-spacing-2);
}


/* ==========================================================================
   Label Control
   ========================================================================== */

label-flex-control {
  display: block;
  margin-bottom: var(--flex-spacing-2);
  width: 100%;
}

/* Font size utility classes for label */
.flex-text-10 {
  font-size: 10px;
}

.flex-text-12 {
  font-size: 12px;
}

.flex-text-14 {
  font-size: 14px;
}

.flex-text-16 {
  font-size: 16px;
}

.flex-text-18 {
  font-size: 18px;
}

.flex-text-20 {
  font-size: 20px;
}

.flex-text-24 {
  font-size: 24px;
}

/* Font weight utility classes */
.flex-font-normal {
  font-weight: var(--flex-font-weight-normal);
}

.flex-font-semibold {
  font-weight: var(--flex-font-weight-semibold);
}

.flex-font-bold {
  font-weight: var(--flex-font-weight-bold);
}


/* ==========================================================================
   Image Control
   ========================================================================== */

image-flex-control {
  display: block;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
}

.flex-image {
  object-fit: contain;
}


/* ==========================================================================
   QR Code Control
   ========================================================================== */

qr-code-flex-control {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

  qr-code-flex-control svg {
    width: 100%;
  }

/* ==========================================================================
   Signature & Initials Controls
   ========================================================================== */

/* Shared container styles */
initials-flex-control {
  display: block;
}

signature-flex-control {
  display: block;
}

/* Signature/Initials capture box */
.flex-signature-box {
  position: relative;
  width: 100%;
  height: 100%;
  padding: var(--flex-spacing-4);
  border: 1px solid var(--flex-color-gray-300);
  aspect-ratio: 16 / 9;
  cursor: pointer;
}

.flex-signature-clickable {
  cursor: pointer;
}

/* Image wrapper */
.flex-signature-image-wrapper {
  position: relative;
  inset: 0;
}

.flex-signature-image {
  width: 100%;
  height: 100%;
  max-width: 100px;
  max-height: 100px;
  object-fit: contain;
  justify-self: center;
  align-self: center;
}

/* Placeholder text */
.flex-signature-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: var(--flex-spacing-4);
  font-size: var(--flex-font-size-xs);
  text-align: center;
  color: var(--flex-color-gray-500);
}

/* Signature specific - "Sign Here" dashed box */
.flex-signature-placeholder-dashed {
  display: flex;
  align-items: center;
  justify-content: center;
  place-self: center;
  padding: var(--flex-spacing-1);
  margin: var(--flex-spacing-1);
  border: 1px dashed var(--flex-color-gray-500);
  font-size: var(--flex-font-size-xs);
  color: var(--flex-color-gray-500);
}

/* Signature line */
.flex-signature-line {
  border-bottom: 1px solid var(--flex-color-black);
}


/* ==========================================================================
   Modal Styles (Signature/Initials Popup)
   ========================================================================== */

/* Modal container */
initials-flex-modal,
signature-flex-modal {
  display: block;
}

.flex-modal {
  display: block;
}

.flex-modal-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: var(--flex-z-modal);
}

.flex-modal-content {
  position: relative;
  background-color: var(--flex-input-background);
  padding: var(--flex-spacing-6);
  border-radius: var(--flex-radius-lg);
  box-shadow: var(--flex-shadow-lg);
  width: 24rem; /* w-96 = 384px */
  max-width: calc(100vw - 2rem);
  color: var(--flex-input-text);
}

.flex-modal-close {
  position: absolute;
  top: -0.5rem;
  right: -0.5rem;
  width: 1.75rem;
  height: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--flex-color-gray-600);
  color: var(--flex-color-white);
  border: none;
  border-radius: var(--flex-radius-full);
  cursor: pointer;
  z-index: var(--flex-z-modal-close);
  font-size: var(--flex-font-size-sm);
  line-height: 1;
}

  .flex-modal-close:hover {
    background-color: var(--flex-color-gray-700);
  }

.flex-modal-title {
  font-size: var(--flex-font-size-lg);
  font-weight: var(--flex-font-weight-semibold);
  margin-bottom: var(--flex-spacing-2);
}

/* Canvas/Image area in modal */
.flex-modal-canvas {
  width: 325px;
  height: 150px;
  border: 1px solid var(--flex-color-gray-300);
}

.flex-modal-canvas--hidden {
  display: none;
}

/* Button row */
.flex-modal-actions {
  display: flex;
  justify-content: space-between;
  margin-top: var(--flex-spacing-4);
}

/* Modal buttons */
.flex-btn {
  padding: var(--flex-spacing-1) var(--flex-spacing-4);
  border: none;
  border-radius: var(--flex-radius-default);
  cursor: pointer;
  font-size: var(--flex-font-size-sm);
  transition: background-color var(--flex-transition-fast);
}

.flex-btn--danger {
  background-color: var(--flex-color-danger);
  color: var(--flex-color-white);
}

  .flex-btn--danger:hover {
    background-color: var(--flex-color-danger-hover);
  }

.flex-btn--primary {
  background-color: var(--flex-color-primary);
  color: var(--flex-color-white);
}

  .flex-btn--primary:hover {
    background-color: var(--flex-color-primary-hover);
  }

.flex-btn--hidden {
  display: none;
}


/* ==========================================================================
   Layout Controls
   ========================================================================== */

/* Vertical Layout */
vertical-layout-flex-control {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
}

/* Horizontal Layout */
horizontal-layout-flex-control {
  display: flex;
  flex-direction: row;
  gap: var(--flex-spacing-2);
  margin: var(--flex-spacing-2);
  width: 100%;
  align-items: flex-start;
}

/* Array Layout */
array-flex-control {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
}

.flex-array-label {
  color: var(--flex-label-text);
  font-weight: var(--flex-font-weight-semibold);
}


/* ==========================================================================
   Group Control
   ========================================================================== */

group-flex-control {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: var(--flex-spacing-2);
  margin: 0 var(--flex-spacing-2);
  margin-top: var(--flex-spacing-2);
  justify-content: flex-start;
}

.flex-group-label {
  color: var(--flex-label-text);
  font-weight: var(--flex-font-weight-semibold);
}


/* ==========================================================================
   Categorization Control
   ========================================================================== */

categorization-flex-control {
  display: block;
  position: relative;
  width: 100%;
}

/* Desktop tab row */
.flex-categorization-tabs {
  display: none;
  gap: var(--flex-spacing-4);
}

/* Desktop content area */
.flex-categorization-content {
  display: none;
  gap: var(--flex-spacing-4);
  margin-top: var(--flex-spacing-4);
}

/* Mobile accordion */
.flex-categorization-accordion {
  display: flex;
  flex-direction: column;
  width: 100%;
}

@media (min-width: 1024px) {
  .flex-categorization-tabs {
    display: flex;
  }

  .flex-categorization-content {
    display: flex;
  }

  .flex-categorization-accordion {
    display: none;
  }
}


/* ==========================================================================
   Category Button Control
   ========================================================================== */

category-flex-button {
  display: inline-block;
  padding: var(--flex-spacing-1);
  border: 1px solid transparent;
  border-radius: var(--flex-radius-default);
  background-color: var(--flex-color-gray-200);
  color: var(--flex-color-gray-600);
  cursor: pointer;
  transition: background-color var(--flex-transition-fast), color var(--flex-transition-fast);
}

  category-flex-button:hover {
    background-color: var(--flex-color-primary);
    color: var(--flex-color-white);
  }

  category-flex-button:focus {
    outline: none;
  }

.flex-category-btn--selected {
  background-color: var(--flex-color-primary);
  color: var(--flex-color-white);
}


/* ==========================================================================
   Category Control (Content Area)
   ========================================================================== */

category-flex-control {
  display: block;
}

/* Mobile category header */
.flex-category-header {
  display: none;
  font-weight: var(--flex-font-weight-semibold);
  background-color: var(--flex-input-background);
  padding: 0 var(--flex-spacing-2);
  color: var(--flex-color-primary);
  margin-bottom: var(--flex-spacing-2);
  margin-top: var(--flex-spacing-4);
  width: 100%;
}

@media (max-width: 1023px) {
  .flex-category-header {
    display: flex;
  }
}


/* ==========================================================================
   Table Layout Control
   ========================================================================== */

table-flex-control {
  display: block;
}

table-flex {
  display: block;
  width: 100%;
}

table-flex-row {
  display: flex;
  width: 100%;
  margin: var(--flex-spacing-1);
  margin-left: var(--flex-spacing-1);
  margin-right: var(--flex-spacing-1);
}

table-flex-column {
  flex: 1;
  gap: var(--flex-spacing-2);
}

/* Dynamic flex basis classes for table columns */
.flex-col-10 {
  flex: 0 0 10%;
}

.flex-col-20 {
  flex: 0 0 20%;
}

.flex-col-25 {
  flex: 0 0 25%;
}

.flex-col-30 {
  flex: 0 0 30%;
}

.flex-col-33 {
  flex: 0 0 33.333%;
}

.flex-col-40 {
  flex: 0 0 40%;
}

.flex-col-50 {
  flex: 0 0 50%;
}

.flex-col-60 {
  flex: 0 0 60%;
}

.flex-col-70 {
  flex: 0 0 70%;
}

.flex-col-75 {
  flex: 0 0 75%;
}

.flex-col-80 {
  flex: 0 0 80%;
}

.flex-col-90 {
  flex: 0 0 90%;
}

.flex-col-100 {
  flex: 0 0 100%;
}

/* Collapsed mobile view */
table-flex-collapsed-column {
  display: none;
  padding: var(--flex-spacing-2);
}

@media (max-width: 1023px) {
  table-flex {
    display: none;
  }

  table-flex-collapsed-column {
    display: flex;
    flex-direction: column;
  }
}


/* ==========================================================================
   Common Form Elements
   ========================================================================== */

/* Field Label (used via FlexFieldLabel component) */
.flex-field-label {
  display: block;
  margin-bottom: var(--flex-spacing-1);
  color: var(--flex-label-text);
}

.flex-field-label--disabled {
  color: var(--flex-color-slate-300);
}

/* Description text */
.flex-description {
  font-size: var(--flex-font-size-xs);
  color: var(--flex-color-gray-500);
  margin-top: var(--flex-spacing-1);
}

/* Validation message */
.flex-validation {
  font-size: var(--flex-font-size-xs);
  color: var(--flex-color-danger);
  margin-top: var(--flex-spacing-1);
}


/* ==========================================================================
   Utility Classes
   ========================================================================== */

/* Visibility */
.flex-hidden {
  display: none;
}

.flex-visible {
  display: block;
}

/* Width */
.flex-w-full {
  width: 100%;
}

/* Spacing */
.flex-mb-2 {
  margin-bottom: var(--flex-spacing-2);
}

.flex-mt-4 {
  margin-top: var(--flex-spacing-4);
}

.flex-gap-2 {
  gap: var(--flex-spacing-2);
}

/* Alignment utility classes (replacing Tailwind helper methods) */
.flex-justify-start {
  justify-content: flex-start;
}

.flex-justify-center {
  justify-content: center;
}

.flex-justify-end {
  justify-content: flex-end;
}

.flex-justify-between {
  justify-content: space-between;
}

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

.flex-items-center {
  align-items: center;
}

.flex-items-end {
  align-items: flex-end;
}

.flex-text-left {
  text-align: left;
}

.flex-text-center {
  text-align: center;
}

.flex-text-right {
  text-align: right;
}

.flex-text-justify {
  text-align: justify;
}

.flex-description {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: rgb(156, 163, 175);
  margin-top: 0.25rem;
  display: block;
}

.flex-field-label {
  display: flex;
  width: 100%;
  font-size: 0.875rem;
  line-height: 1.25rem;
  margin-bottom: 0.25rem;
  min-height: 20px;
  color: var(--flex-label-text);
}

  /* Disabled state */
  .flex-field-label:disabled, .flex-field-label[disabled] {
    opacity: 1;
    color: var(--flex-color-slate-300);
  }

flex-label {
}

.loading-spinner-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.loading-spinner-spinner {
  width: 56px;
  height: 56px;
  display: grid;
  border: 4px solid #0000;
  border-radius: 50%;
  border-right-color: #299fff;
  animation: loading-spinner-tri 1s infinite linear;
}

  .loading-spinner-spinner::before,
  .loading-spinner-spinner::after {
    content: "";
    grid-area: 1/1;
    margin: 2px;
    border: inherit;
    border-radius: 50%;
    animation: loading-spinner-tri 2s infinite;
  }

  .loading-spinner-spinner::after {
    margin: 8px;
    animation-duration: 3s;
  }

@keyframes loading-spinner-tri {
  100% {
    transform: rotate(1turn);
  }
}

.loading-spinner-loader {
  color: #4a4a4a;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: 25px;
  box-sizing: content-box;
  height: 40px;
  padding: 10px 10px;
  display: flex;
  border-radius: 8px;
}

.loading-spinner-words {
  overflow: hidden;
}

.loading-spinner-word {
  display: block;
  height: 100%;
  padding-left: 6px;
  color: #299fff;
  animation: loading-spinner-cycle-words 5s infinite;
}

  .loading-spinner-word.single-word {
    animation: none;
  }

@keyframes loading-spinner-cycle-words {
  10% {
    transform: translateY(-105%);
  }

  25% {
    transform: translateY(-100%);
  }

  35% {
    transform: translateY(-205%);
  }

  50% {
    transform: translateY(-200%);
  }

  60% {
    transform: translateY(-305%);
  }

  75% {
    transform: translateY(-300%);
  }

  85% {
    transform: translateY(-405%);
  }

  100% {
    transform: translateY(-400%);
  }
}

.flex-validation-message {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #f87171;
  margin-top: 0.25rem;
  display: block;
}


.flex-inline-svg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0; /* Prevents extra space below SVG */
}

@keyframes flex-toast-slide-in {
  from {
    opacity: 0;
    transform: translateX(100%);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes flex-toast-shrink {
  from {
    width: 100%;
  }

  to {
    width: 0%;
  }
}

.flex-toast-animate-slide-in {
  animation: flex-toast-slide-in 0.3s ease-out;
}

.flex-toast-animate-shrink {
  animation: flex-toast-shrink 5s linear forwards;
}

:root {
  --flex-bg-primary: #fafafa;
  --flex-bg-raised-panel: white;
  --flex-bg-flex-control: #272D36;
  --flex-bg-flex-widget: #f9fafb;
  --flex-border-flex-widget: #e5e7eb;
  --flex-icon-color: rgb(55, 65, 81);
  --flex-border-color: #e5e7eb;
  --flex-text-header: #374151;
  --flex-text-header-hover: rgb(31, 41, 55);
  --flex-text-body: rgb(55, 65, 81);
  /*Property Edit Panel*/
  --flex-property-edit-button-color: white;
  --flex-property-edit-button-border-color: #9ca3af;
  --flex-bg-form-element: #f9fafb;
}

  :root.dark,
  .dark {
    --flex-bg-primary: #1D232A;
    --flex-bg-raised-panel: #353B44;
    --flex-bg-flex-control: #272D36;
    --flex-bg-flex-widget: #272D36;
    --flex-border-flex-widget: #4a5565;
    --flex-icon-color: #C0C4CC;
    --flex-border-color: #374151;
    --flex-text-header: oklch(70.7% 0.022 261.325);
    --flex-text-header-hover: #d1d5db;
    --flex-text-body: #9ca3af;
    /*Property Edit Panel*/
    --flex-property-edit-button-color: #C0C4CC;
    --flex-property-edit-button-border-color: #6b7280;
    --flex-bg-form-element: #2E3341;
  }



.flex-form {
  width: 100%;
  margin: 0.25rem;
  margin-right: 1rem;
  padding: 10px;
  overflow: auto;
}

/* FormDataGrid.razor.css */

/* ===== Container ===== */
.flex-container {
  width: 100%;
  margin-right: 1rem;
}

@media (min-width: 1024px) {
  .flex-container {
    margin-right: 0;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ===== Desktop Table ===== */
.flex-data-grid-container {
  display: none;
  width: 100%;
}

@media (min-width: 1024px) {
  .flex-data-grid-container {
    display: block;
  }
}

.flex-data-grid-table {
  width: 100%;
}

.flex-table-head {
  position: sticky;
}

.flex-th {
  border-bottom: 1px solid rgb(226, 232, 240);
  font-weight: 700;
  padding: 1rem;
  color: rgb(148, 163, 184);
  text-align: left;
}

.flex-th-empty {
  border-bottom: 1px solid rgb(226, 232, 240);
}

.flex-tr {
  cursor: pointer;
}

  .flex-tr:hover {
    background-color: rgb(243, 244, 246);
  }

.flex-td {
  border-bottom: 1px solid rgb(226, 232, 240);
  padding: 1rem;
  color: rgb(148, 163, 184);
  text-align: left;
}

.flex-td-name {
  font-weight: 600;
}

.flex-td-text {
  font-weight: 500;
}

.flex-td-actions {
  border-bottom: 1px solid rgb(226, 232, 240);
}

.flex-icon {
  opacity: 0.6;
}

.flex-icon-delete {
  margin-right: 2rem;
}

/* ===== Mobile Layout ===== */
.flex-mobile-container {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  background-color: rgb(243, 244, 246);
}

@media (min-width: 1024px) {
  .flex-mobile-container {
    display: none;
  }
}

.flex-mobile-card {
  padding-right: 0.125rem;
  display: flex;
  cursor: pointer;
}

.flex-mobile-content {
  flex: 1 1 0%;
}

.flex-mobile-row {
  display: flex;
  gap: 0.5rem;
  justify-content: space-between;
}

.flex-mobile-row-spacing {
  margin-top: 0.5rem;
}

.flex-mobile-col-quarter {
  width: 25%;
}

.flex-data-item-label {
  font-size: 0.75rem;
  color: rgb(148, 163, 184);
}

.flex-data-item-value {
  font-size: 0.875rem;
  color: rgb(51, 65, 85);
}

.flex-mobile-arrow {
  display: flex;
  align-items: center;
  margin-left: 1rem;
}

  .flex-mobile-arrow img {
    margin-left: 0.5rem;
  }

/* Dark mode arrow visibility */
.flex-arrow-light {
  display: block;
}

.flex-arrow-dark {
  display: none;
}

/* ===== Dark Mode ===== */
@media (prefers-color-scheme: dark) {
  .flex-th,
  .flex-th-empty,
  .flex-td,
  .flex-td-actions {
    border-color: rgb(71, 85, 105);
  }

  .flex-th,
  .flex-td {
    color: rgb(226, 232, 240);
  }

  .flex-arrow-light {
    display: none;
  }

  .flex-arrow-dark {
    display: block;
  }
}

/* _content/LPI.Core.UI.Web/Components/DialogProvider.razor.rz.scp.css */
@keyframes dialog-fade-in-b-ypjpgif715 {
  from {
    opacity: 0;
    transform: scale(0.95);
  }

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

@keyframes dialog-fade-out-b-ypjpgif715 {
  from {
    opacity: 1;
    transform: scale(1);
  }

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

@keyframes backdrop-fade-in-b-ypjpgif715 {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes backdrop-fade-out-b-ypjpgif715 {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.dialog-animate-in[b-ypjpgif715] {
  animation: dialog-fade-in-b-ypjpgif715 0.2s ease-out forwards;
}

.dialog-animate-out[b-ypjpgif715] {
  animation: dialog-fade-out-b-ypjpgif715 0.15s ease-in forwards;
}

.backdrop-animate-in[b-ypjpgif715] {
  animation: backdrop-fade-in-b-ypjpgif715 0.2s ease-out forwards;
}

.backdrop-animate-out[b-ypjpgif715] {
  animation: backdrop-fade-out-b-ypjpgif715 0.15s ease-in forwards;
}
/* _content/LPI.Core.UI.Web/Components/Grid/DataGrid.razor.rz.scp.css */
@keyframes grid-loading-b-pb1jmy5hti {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(400%);
  }
}

/* Container query setup */
.cell-container[b-pb1jmy5hti] {
  container-type: inline-size;
  width: 100%;
  min-width: 0;
}

.cell-full[b-pb1jmy5hti] {
  display: none;
  min-width: 0;
}

.cell-compact[b-pb1jmy5hti] {
  display: block;
  min-width: 0;
}

/* Thresholds - add more as needed */
@container (min-width: 100px) {
  .cell-full-100[b-pb1jmy5hti] {
    display: block;
  }

  .cell-compact-100[b-pb1jmy5hti] {
    display: none;
  }
}

@container (min-width: 120px) {
  .cell-full-120[b-pb1jmy5hti] {
    display: block;
  }

  .cell-compact-120[b-pb1jmy5hti] {
    display: none;
  }
}

@container (min-width: 140px) {
  .cell-full-140[b-pb1jmy5hti] {
    display: block;
  }

  .cell-compact-140[b-pb1jmy5hti] {
    display: none;
  }
}

@container (min-width: 180px) {
  .cell-full-180[b-pb1jmy5hti] {
    display: block;
  }

  .cell-compact-180[b-pb1jmy5hti] {
    display: none;
  }
}

@container (min-width: 200px) {
  .cell-full-200[b-pb1jmy5hti] {
    display: block;
  }

  .cell-compact-200[b-pb1jmy5hti] {
    display: none;
  }
}

@container (min-width: 220px) {
  .cell-full-220[b-pb1jmy5hti] {
    display: block;
  }

  .cell-compact-220[b-pb1jmy5hti] {
    display: none;
  }
}


@container (min-width: 240px) {
  .cell-full-240[b-pb1jmy5hti] {
    display: block;
  }

  .cell-compact-240[b-pb1jmy5hti] {
    display: none;
  }
}


@container (min-width: 260px) {
  .cell-full-260[b-pb1jmy5hti] {
    display: block;
  }

  .cell-compact-260[b-pb1jmy5hti] {
    display: none;
  }
}

@container (min-width: 280px) {
  .cell-full-280[b-pb1jmy5hti] {
    display: block;
  }

  .cell-compact-280[b-pb1jmy5hti] {
    display: none;
  }
}

@container (min-width: 300px) {
  .cell-full-300[b-pb1jmy5hti] {
    display: block;
  }

  .cell-compact-300[b-pb1jmy5hti] {
    display: none;
  }
}
/* _content/LPI.Core.UI.Web/Components/Icons/UnsavedChangesPopup.razor.rz.scp.css */
@keyframes unsaved-modal-in-b-sprccb0rjc {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-10px);
  }

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

.animate-unsaved-modal-in[b-sprccb0rjc] {
  animation: unsaved-modal-in-b-sprccb0rjc 0.2s ease-out forwards;
}
/* _content/LPI.Core.UI.Web/Components/Loaders/LpiContentLoader.razor.rz.scp.css */
.loader-container[b-fyrpsvou2d] {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.spinner[b-fyrpsvou2d] {
  width: 80px;
  height: 80px;
  --clr: rgb(0, 113, 226);
  --clr-alpha: rgba(0, 113, 226, 0.1);
  animation: spinner-b-fyrpsvou2d 2s infinite linear;
  transform-style: preserve-3d;
}

.spinner > div[b-fyrpsvou2d] {
  background-color: var(--clr-alpha);
  height: 100%;
  position: absolute;
  width: 100%;
  border: 5px solid var(--clr);
}

.spinner div:nth-of-type(1)[b-fyrpsvou2d] {
  transform: translateZ(-40px) rotateY(180deg);
}

.spinner div:nth-of-type(2)[b-fyrpsvou2d] {
  transform: rotateY(-270deg) translateX(50%);
  transform-origin: top right;
}

.spinner div:nth-of-type(3)[b-fyrpsvou2d] {
  transform: rotateY(270deg) translateX(-50%);
  transform-origin: center left;
}

.spinner div:nth-of-type(4)[b-fyrpsvou2d] {
  transform: rotateX(90deg) translateY(-50%);
  transform-origin: top center;
}

.spinner div:nth-of-type(5)[b-fyrpsvou2d] {
  transform: rotateX(-90deg) translateY(50%);
  transform-origin: bottom center;
}

.spinner div:nth-of-type(6)[b-fyrpsvou2d] {
  transform: translateZ(40px);
}

@keyframes spinner-b-fyrpsvou2d {
  0% {
    transform: rotate(0deg) rotateX(0deg) rotateY(0deg);
  }

  50% {
    transform: rotate(180deg) rotateX(180deg) rotateY(180deg);
  }

  100% {
    transform: rotate(360deg) rotateX(360deg) rotateY(360deg);
  }
}
/* _content/LPI.Core.UI.Web/Components/Loaders/LpiDinoLoader.razor.rz.scp.css */
.pixel-loader-container[b-mmegsqixnt] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.pixel-loader[b-mmegsqixnt] {
  --zoom: 0.6;
  position: relative;
  --wh: calc(var(--wh-number) * 1px);
  --wh-n: calc(var(--wh-number) * -1px);
  width: calc(var(--wh-number) * var(--wh));
  height: calc(var(--wh-number) * var(--wh));
  --color: #fff;
  --pixel-color: #535353;
  --blur: 0;
  filter: drop-shadow(var(--wh-n) 0 var(--blur) var(--color)) drop-shadow(0 var(--wh-n) var(--blur) var(--color)) drop-shadow(var(--wh) 0 var(--blur) var(--color)) drop-shadow(0 var(--wh) var(--blur) var(--color));
  image-rendering: pixelated;
  zoom: var(--zoom);
  animation: mover-b-mmegsqixnt 0.3s linear infinite;
}

.pixel-loader .pixel[b-mmegsqixnt] {
  width: var(--wh);
  height: var(--wh);
  box-shadow: var(--shadow);
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .pixel-loader[b-mmegsqixnt] {
    --color: #1a1a1a;
    --pixel-color: #a0a0a0;
  }

  .pixel-loader-text[b-mmegsqixnt] {
    color: #e0e0e0;
  }

  .pixel-loader-word[b-mmegsqixnt] {
    color: #60b8ff;
  }
}

/* Text styling */
.pixel-loader-text[b-mmegsqixnt] {
  color: #4a4a4a;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: 25px;
  box-sizing: content-box;
  height: 40px;
  padding: 10px 10px;
  display: flex;
  border-radius: 8px;
}

.pixel-loader-prefix[b-mmegsqixnt] {
  display: block;
}

.pixel-loader-words[b-mmegsqixnt] {
  overflow: hidden;
  height: 100%;
}

.pixel-loader-word[b-mmegsqixnt] {
  display: block;
  height: 100%;
  padding-left: 6px;
  color: #299fff;
  animation: pixel-loader-cycle-words-b-mmegsqixnt 5s infinite;
}

@keyframes pixel-loader-cycle-words-b-mmegsqixnt {
  10% {
    transform: translateY(-105%);
  }

  25% {
    transform: translateY(-100%);
  }

  35% {
    transform: translateY(-205%);
  }

  50% {
    transform: translateY(-200%);
  }

  60% {
    transform: translateY(-305%);
  }

  75% {
    transform: translateY(-300%);
  }

  85% {
    transform: translateY(-405%);
  }

  100% {
    transform: translateY(-400%);
  }
}

@keyframes mover-b-mmegsqixnt {
  0%, 100% {
    --shadow: 0px 0px transparent, 24px 0px transparent, 48px 0px transparent, 72px 0px transparent, 96px 0px transparent, 120px 0px transparent, 144px 0px transparent, 168px 0px transparent, 192px 0px transparent, 216px 0px transparent, 240px 0px transparent, 264px 0px transparent, 288px 0px transparent, 312px 0px var(--pixel-color), 336px 0px var(--pixel-color), 360px 0px var(--pixel-color), 384px 0px var(--pixel-color), 408px 0px var(--pixel-color), 432px 0px var(--pixel-color), 456px 0px var(--pixel-color), 480px 0px var(--pixel-color), 504px 0px var(--pixel-color), 528px 0px var(--pixel-color), 552px 0px transparent, 0px 24px transparent, 24px 24px transparent, 48px 24px transparent, 72px 24px transparent, 96px 24px transparent, 120px 24px transparent, 144px 24px transparent, 168px 24px transparent, 192px 24px transparent, 216px 24px transparent, 240px 24px transparent, 264px 24px transparent, 288px 24px var(--pixel-color), 312px 24px var(--pixel-color), 336px 24px var(--pixel-color), 360px 24px var(--pixel-color), 384px 24px var(--pixel-color), 408px 24px var(--pixel-color), 432px 24px var(--pixel-color), 456px 24px var(--pixel-color), 480px 24px var(--pixel-color), 504px 24px var(--pixel-color), 528px 24px var(--pixel-color), 552px 24px var(--pixel-color), 0px 48px transparent, 24px 48px transparent, 48px 48px transparent, 72px 48px transparent, 96px 48px transparent, 120px 48px transparent, 144px 48px transparent, 168px 48px transparent, 192px 48px transparent, 216px 48px transparent, 240px 48px transparent, 264px 48px transparent, 288px 48px var(--pixel-color), 312px 48px var(--pixel-color), 336px 48px transparent, 360px 48px transparent, 384px 48px var(--pixel-color), 408px 48px var(--pixel-color), 432px 48px var(--pixel-color), 456px 48px var(--pixel-color), 480px 48px var(--pixel-color), 504px 48px var(--pixel-color), 528px 48px var(--pixel-color), 552px 48px var(--pixel-color), 0px 72px transparent, 24px 72px transparent, 48px 72px transparent, 72px 72px transparent, 96px 72px transparent, 120px 72px transparent, 144px 72px transparent, 168px 72px transparent, 192px 72px transparent, 216px 72px transparent, 240px 72px transparent, 264px 72px transparent, 288px 72px var(--pixel-color), 312px 72px var(--pixel-color), 336px 72px transparent, 360px 72px transparent, 384px 72px var(--pixel-color), 408px 72px var(--pixel-color), 432px 72px var(--pixel-color), 456px 72px var(--pixel-color), 480px 72px var(--pixel-color), 504px 72px var(--pixel-color), 528px 72px var(--pixel-color), 552px 72px var(--pixel-color), 0px 96px transparent, 24px 96px transparent, 48px 96px transparent, 72px 96px transparent, 96px 96px transparent, 120px 96px transparent, 144px 96px transparent, 168px 96px transparent, 192px 96px transparent, 216px 96px transparent, 240px 96px transparent, 264px 96px transparent, 288px 96px var(--pixel-color), 312px 96px var(--pixel-color), 336px 96px var(--pixel-color), 360px 96px var(--pixel-color), 384px 96px var(--pixel-color), 408px 96px var(--pixel-color), 432px 96px var(--pixel-color), 456px 96px var(--pixel-color), 480px 96px var(--pixel-color), 504px 96px var(--pixel-color), 528px 96px var(--pixel-color), 552px 96px var(--pixel-color), 0px 120px transparent, 24px 120px transparent, 48px 120px transparent, 72px 120px transparent, 96px 120px transparent, 120px 120px transparent, 144px 120px transparent, 168px 120px transparent, 192px 120px transparent, 216px 120px transparent, 240px 120px transparent, 264px 120px transparent, 288px 120px var(--pixel-color), 312px 120px var(--pixel-color), 336px 120px var(--pixel-color), 360px 120px var(--pixel-color), 384px 120px var(--pixel-color), 408px 120px var(--pixel-color), 432px 120px var(--pixel-color), 456px 120px var(--pixel-color), 480px 120px var(--pixel-color), 504px 120px var(--pixel-color), 528px 120px var(--pixel-color), 552px 120px var(--pixel-color), 0px 144px transparent, 24px 144px transparent, 48px 144px transparent, 72px 144px transparent, 96px 144px transparent, 120px 144px transparent, 144px 144px transparent, 168px 144px transparent, 192px 144px transparent, 216px 144px transparent, 240px 144px transparent, 264px 144px transparent, 288px 144px var(--pixel-color), 312px 144px var(--pixel-color), 336px 144px var(--pixel-color), 360px 144px var(--pixel-color), 384px 144px var(--pixel-color), 408px 144px var(--pixel-color), 432px 144px transparent, 456px 144px transparent, 480px 144px transparent, 504px 144px transparent, 528px 144px transparent, 552px 144px transparent, 0px 168px transparent, 24px 168px transparent, 48px 168px transparent, 72px 168px transparent, 96px 168px transparent, 120px 168px transparent, 144px 168px transparent, 168px 168px transparent, 192px 168px transparent, 216px 168px transparent, 240px 168px transparent, 264px 168px transparent, 288px 168px var(--pixel-color), 312px 168px var(--pixel-color), 336px 168px var(--pixel-color), 360px 168px var(--pixel-color), 384px 168px var(--pixel-color), 408px 168px var(--pixel-color), 432px 168px transparent, 456px 168px transparent, 480px 168px transparent, 504px 168px transparent, 528px 168px transparent, 552px 168px transparent, 0px 192px transparent, 24px 192px transparent, 48px 192px transparent, 72px 192px transparent, 96px 192px transparent, 120px 192px transparent, 144px 192px transparent, 168px 192px transparent, 192px 192px transparent, 216px 192px transparent, 240px 192px transparent, 264px 192px transparent, 288px 192px var(--pixel-color), 312px 192px var(--pixel-color), 336px 192px var(--pixel-color), 360px 192px var(--pixel-color), 384px 192px var(--pixel-color), 408px 192px var(--pixel-color), 432px 192px var(--pixel-color), 456px 192px var(--pixel-color), 480px 192px var(--pixel-color), 504px 192px var(--pixel-color), 528px 192px transparent, 552px 192px transparent, 0px 216px var(--pixel-color), 24px 216px transparent, 48px 216px transparent, 72px 216px transparent, 96px 216px transparent, 120px 216px transparent, 144px 216px transparent, 168px 216px transparent, 192px 216px transparent, 216px 216px transparent, 240px 216px var(--pixel-color), 264px 216px var(--pixel-color), 288px 216px var(--pixel-color), 312px 216px var(--pixel-color), 336px 216px var(--pixel-color), 360px 216px var(--pixel-color), 384px 216px var(--pixel-color), 408px 216px transparent, 432px 216px transparent, 456px 216px transparent, 480px 216px transparent, 504px 216px transparent, 528px 216px transparent, 552px 216px transparent, 0px 240px var(--pixel-color), 24px 240px transparent, 48px 240px transparent, 72px 240px transparent, 96px 240px transparent, 120px 240px transparent, 144px 240px transparent, 168px 240px transparent, 192px 240px var(--pixel-color), 216px 240px var(--pixel-color), 240px 240px var(--pixel-color), 264px 240px var(--pixel-color), 288px 240px var(--pixel-color), 312px 240px var(--pixel-color), 336px 240px var(--pixel-color), 360px 240px var(--pixel-color), 384px 240px var(--pixel-color), 408px 240px transparent, 432px 240px transparent, 456px 240px transparent, 480px 240px transparent, 504px 240px transparent, 528px 240px transparent, 552px 240px transparent, 0px 264px var(--pixel-color), 24px 264px var(--pixel-color), 48px 264px transparent, 72px 264px transparent, 96px 264px transparent, 120px 264px transparent, 144px 264px transparent, 168px 264px var(--pixel-color), 192px 264px var(--pixel-color), 216px 264px var(--pixel-color), 240px 264px var(--pixel-color), 264px 264px var(--pixel-color), 288px 264px var(--pixel-color), 312px 264px var(--pixel-color), 336px 264px var(--pixel-color), 360px 264px var(--pixel-color), 384px 264px var(--pixel-color), 408px 264px var(--pixel-color), 432px 264px var(--pixel-color), 456px 264px transparent, 480px 264px transparent, 504px 264px transparent, 528px 264px transparent, 552px 264px transparent, 0px 288px var(--pixel-color), 24px 288px var(--pixel-color), 48px 288px var(--pixel-color), 72px 288px transparent, 96px 288px transparent, 120px 288px transparent, 144px 288px var(--pixel-color), 168px 288px var(--pixel-color), 192px 288px var(--pixel-color), 216px 288px var(--pixel-color), 240px 288px var(--pixel-color), 264px 288px var(--pixel-color), 288px 288px var(--pixel-color), 312px 288px var(--pixel-color), 336px 288px var(--pixel-color), 360px 288px var(--pixel-color), 384px 288px var(--pixel-color), 408px 288px transparent, 432px 288px var(--pixel-color), 456px 288px transparent, 480px 288px transparent, 504px 288px transparent, 528px 288px transparent, 552px 288px transparent, 0px 312px var(--pixel-color), 24px 312px var(--pixel-color), 48px 312px var(--pixel-color), 72px 312px var(--pixel-color), 96px 312px var(--pixel-color), 120px 312px var(--pixel-color), 144px 312px var(--pixel-color), 168px 312px var(--pixel-color), 192px 312px var(--pixel-color), 216px 312px var(--pixel-color), 240px 312px var(--pixel-color), 264px 312px var(--pixel-color), 288px 312px var(--pixel-color), 312px 312px var(--pixel-color), 336px 312px var(--pixel-color), 360px 312px var(--pixel-color), 384px 312px var(--pixel-color), 408px 312px transparent, 432px 312px transparent, 456px 312px transparent, 480px 312px transparent, 504px 312px transparent, 528px 312px transparent, 552px 312px transparent, 0px 336px var(--pixel-color), 24px 336px var(--pixel-color), 48px 336px var(--pixel-color), 72px 336px var(--pixel-color), 96px 336px var(--pixel-color), 120px 336px var(--pixel-color), 144px 336px var(--pixel-color), 168px 336px var(--pixel-color), 192px 336px var(--pixel-color), 216px 336px var(--pixel-color), 240px 336px var(--pixel-color), 264px 336px var(--pixel-color), 288px 336px var(--pixel-color), 312px 336px var(--pixel-color), 336px 336px var(--pixel-color), 360px 336px var(--pixel-color), 384px 336px var(--pixel-color), 408px 336px transparent, 432px 336px transparent, 456px 336px transparent, 480px 336px transparent, 504px 336px transparent, 528px 336px transparent, 552px 336px transparent, 0px 360px transparent, 24px 360px var(--pixel-color), 48px 360px var(--pixel-color), 72px 360px var(--pixel-color), 96px 360px var(--pixel-color), 120px 360px var(--pixel-color), 144px 360px var(--pixel-color), 168px 360px var(--pixel-color), 192px 360px var(--pixel-color), 216px 360px var(--pixel-color), 240px 360px var(--pixel-color), 264px 360px var(--pixel-color), 288px 360px var(--pixel-color), 312px 360px var(--pixel-color), 336px 360px var(--pixel-color), 360px 360px var(--pixel-color), 384px 360px var(--pixel-color), 408px 360px transparent, 432px 360px transparent, 456px 360px transparent, 480px 360px transparent, 504px 360px transparent, 528px 360px transparent, 552px 360px transparent, 0px 384px transparent, 24px 384px transparent, 48px 384px var(--pixel-color), 72px 384px var(--pixel-color), 96px 384px var(--pixel-color), 120px 384px var(--pixel-color), 144px 384px var(--pixel-color), 168px 384px var(--pixel-color), 192px 384px var(--pixel-color), 216px 384px var(--pixel-color), 240px 384px var(--pixel-color), 264px 384px var(--pixel-color), 288px 384px var(--pixel-color), 312px 384px var(--pixel-color), 336px 384px var(--pixel-color), 360px 384px var(--pixel-color), 384px 384px transparent, 408px 384px transparent, 432px 384px transparent, 456px 384px transparent, 480px 384px transparent, 504px 384px transparent, 528px 384px transparent, 552px 384px transparent, 0px 408px transparent, 24px 408px transparent, 48px 408px transparent, 72px 408px var(--pixel-color), 96px 408px var(--pixel-color), 120px 408px var(--pixel-color), 144px 408px var(--pixel-color), 168px 408px var(--pixel-color), 192px 408px var(--pixel-color), 216px 408px var(--pixel-color), 240px 408px var(--pixel-color), 264px 408px var(--pixel-color), 288px 408px var(--pixel-color), 312px 408px var(--pixel-color), 336px 408px var(--pixel-color), 360px 408px transparent, 384px 408px transparent, 408px 408px transparent, 432px 408px transparent, 456px 408px transparent, 480px 408px transparent, 504px 408px transparent, 528px 408px transparent, 552px 408px transparent, 0px 432px transparent, 24px 432px transparent, 48px 432px transparent, 72px 432px transparent, 96px 432px var(--pixel-color), 120px 432px var(--pixel-color), 144px 432px var(--pixel-color), 168px 432px var(--pixel-color), 192px 432px var(--pixel-color), 216px 432px var(--pixel-color), 240px 432px var(--pixel-color), 264px 432px var(--pixel-color), 288px 432px var(--pixel-color), 312px 432px var(--pixel-color), 336px 432px transparent, 360px 432px transparent, 384px 432px transparent, 408px 432px transparent, 432px 432px transparent, 456px 432px transparent, 480px 432px transparent, 504px 432px transparent, 528px 432px transparent, 552px 432px transparent, 0px 456px transparent, 24px 456px transparent, 48px 456px transparent, 72px 456px transparent, 96px 456px transparent, 120px 456px var(--pixel-color), 144px 456px var(--pixel-color), 168px 456px var(--pixel-color), 192px 456px var(--pixel-color), 216px 456px var(--pixel-color), 240px 456px var(--pixel-color), 264px 456px var(--pixel-color), 288px 456px var(--pixel-color), 312px 456px transparent, 336px 456px transparent, 360px 456px transparent, 384px 456px transparent, 408px 456px transparent, 432px 456px transparent, 456px 456px transparent, 480px 456px transparent, 504px 456px transparent, 528px 456px transparent, 552px 456px transparent, 0px 480px transparent, 24px 480px transparent, 48px 480px transparent, 72px 480px transparent, 96px 480px transparent, 120px 480px transparent, 144px 480px var(--pixel-color), 168px 480px var(--pixel-color), 192px 480px var(--pixel-color), 216px 480px transparent, 240px 480px transparent, 264px 480px var(--pixel-color), 288px 480px var(--pixel-color), 312px 480px transparent, 336px 480px transparent, 360px 480px transparent, 384px 480px transparent, 408px 480px transparent, 432px 480px transparent, 456px 480px transparent, 480px 480px transparent, 504px 480px transparent, 528px 480px transparent, 552px 480px transparent, 0px 504px transparent, 24px 504px transparent, 48px 504px transparent, 72px 504px transparent, 96px 504px transparent, 120px 504px transparent, 144px 504px var(--pixel-color), 168px 504px var(--pixel-color), 192px 504px transparent, 216px 504px transparent, 240px 504px transparent, 264px 504px transparent, 288px 504px var(--pixel-color), 312px 504px transparent, 336px 504px transparent, 360px 504px transparent, 384px 504px transparent, 408px 504px transparent, 432px 504px transparent, 456px 504px transparent, 480px 504px transparent, 504px 504px transparent, 528px 504px transparent, 552px 504px transparent, 0px 528px transparent, 24px 528px transparent, 48px 528px transparent, 72px 528px transparent, 96px 528px transparent, 120px 528px transparent, 144px 528px var(--pixel-color), 168px 528px transparent, 192px 528px transparent, 216px 528px transparent, 240px 528px transparent, 264px 528px transparent, 288px 528px var(--pixel-color), 312px 528px transparent, 336px 528px transparent, 360px 528px transparent, 384px 528px transparent, 408px 528px transparent, 432px 528px transparent, 456px 528px transparent, 480px 528px transparent, 504px 528px transparent, 528px 528px transparent, 552px 528px transparent, 0px 552px transparent, 24px 552px transparent, 48px 552px transparent, 72px 552px transparent, 96px 552px transparent, 120px 552px transparent, 144px 552px var(--pixel-color), 168px 552px var(--pixel-color), 192px 552px transparent, 216px 552px transparent, 240px 552px transparent, 264px 552px transparent, 288px 552px var(--pixel-color), 312px 552px var(--pixel-color), 336px 552px transparent, 360px 552px transparent, 384px 552px transparent, 408px 552px transparent, 432px 552px transparent, 456px 552px transparent, 480px 552px transparent, 504px 552px transparent, 528px 552px transparent, 552px 552px transparent;
  }

  33% {
    --shadow: 0px 0px transparent, 24px 0px transparent, 48px 0px transparent, 72px 0px transparent, 96px 0px transparent, 120px 0px transparent, 144px 0px transparent, 168px 0px transparent, 192px 0px transparent, 216px 0px transparent, 240px 0px transparent, 264px 0px transparent, 288px 0px transparent, 312px 0px var(--pixel-color), 336px 0px var(--pixel-color), 360px 0px var(--pixel-color), 384px 0px var(--pixel-color), 408px 0px var(--pixel-color), 432px 0px var(--pixel-color), 456px 0px var(--pixel-color), 480px 0px var(--pixel-color), 504px 0px var(--pixel-color), 528px 0px var(--pixel-color), 552px 0px transparent, 0px 24px transparent, 24px 24px transparent, 48px 24px transparent, 72px 24px transparent, 96px 24px transparent, 120px 24px transparent, 144px 24px transparent, 168px 24px transparent, 192px 24px transparent, 216px 24px transparent, 240px 24px transparent, 264px 24px transparent, 288px 24px var(--pixel-color), 312px 24px var(--pixel-color), 336px 24px var(--pixel-color), 360px 24px var(--pixel-color), 384px 24px var(--pixel-color), 408px 24px var(--pixel-color), 432px 24px var(--pixel-color), 456px 24px var(--pixel-color), 480px 24px var(--pixel-color), 504px 24px var(--pixel-color), 528px 24px var(--pixel-color), 552px 24px var(--pixel-color), 0px 48px transparent, 24px 48px transparent, 48px 48px transparent, 72px 48px transparent, 96px 48px transparent, 120px 48px transparent, 144px 48px transparent, 168px 48px transparent, 192px 48px transparent, 216px 48px transparent, 240px 48px transparent, 264px 48px transparent, 288px 48px var(--pixel-color), 312px 48px var(--pixel-color), 336px 48px transparent, 360px 48px transparent, 384px 48px var(--pixel-color), 408px 48px var(--pixel-color), 432px 48px var(--pixel-color), 456px 48px var(--pixel-color), 480px 48px var(--pixel-color), 504px 48px var(--pixel-color), 528px 48px var(--pixel-color), 552px 48px var(--pixel-color), 0px 72px transparent, 24px 72px transparent, 48px 72px transparent, 72px 72px transparent, 96px 72px transparent, 120px 72px transparent, 144px 72px transparent, 168px 72px transparent, 192px 72px transparent, 216px 72px transparent, 240px 72px transparent, 264px 72px transparent, 288px 72px var(--pixel-color), 312px 72px var(--pixel-color), 336px 72px transparent, 360px 72px transparent, 384px 72px var(--pixel-color), 408px 72px var(--pixel-color), 432px 72px var(--pixel-color), 456px 72px var(--pixel-color), 480px 72px var(--pixel-color), 504px 72px var(--pixel-color), 528px 72px var(--pixel-color), 552px 72px var(--pixel-color), 0px 96px transparent, 24px 96px transparent, 48px 96px transparent, 72px 96px transparent, 96px 96px transparent, 120px 96px transparent, 144px 96px transparent, 168px 96px transparent, 192px 96px transparent, 216px 96px transparent, 240px 96px transparent, 264px 96px transparent, 288px 96px var(--pixel-color), 312px 96px var(--pixel-color), 336px 96px var(--pixel-color), 360px 96px var(--pixel-color), 384px 96px var(--pixel-color), 408px 96px var(--pixel-color), 432px 96px var(--pixel-color), 456px 96px var(--pixel-color), 480px 96px var(--pixel-color), 504px 96px var(--pixel-color), 528px 96px var(--pixel-color), 552px 96px var(--pixel-color), 0px 120px transparent, 24px 120px transparent, 48px 120px transparent, 72px 120px transparent, 96px 120px transparent, 120px 120px transparent, 144px 120px transparent, 168px 120px transparent, 192px 120px transparent, 216px 120px transparent, 240px 120px transparent, 264px 120px transparent, 288px 120px var(--pixel-color), 312px 120px var(--pixel-color), 336px 120px var(--pixel-color), 360px 120px var(--pixel-color), 384px 120px var(--pixel-color), 408px 120px var(--pixel-color), 432px 120px var(--pixel-color), 456px 120px var(--pixel-color), 480px 120px var(--pixel-color), 504px 120px var(--pixel-color), 528px 120px var(--pixel-color), 552px 120px var(--pixel-color), 0px 144px transparent, 24px 144px transparent, 48px 144px transparent, 72px 144px transparent, 96px 144px transparent, 120px 144px transparent, 144px 144px transparent, 168px 144px transparent, 192px 144px transparent, 216px 144px transparent, 240px 144px transparent, 264px 144px transparent, 288px 144px var(--pixel-color), 312px 144px var(--pixel-color), 336px 144px var(--pixel-color), 360px 144px var(--pixel-color), 384px 144px var(--pixel-color), 408px 144px var(--pixel-color), 432px 144px transparent, 456px 144px transparent, 480px 144px transparent, 504px 144px transparent, 528px 144px transparent, 552px 144px transparent, 0px 168px transparent, 24px 168px transparent, 48px 168px transparent, 72px 168px transparent, 96px 168px transparent, 120px 168px transparent, 144px 168px transparent, 168px 168px transparent, 192px 168px transparent, 216px 168px transparent, 240px 168px transparent, 264px 168px transparent, 288px 168px var(--pixel-color), 312px 168px var(--pixel-color), 336px 168px var(--pixel-color), 360px 168px var(--pixel-color), 384px 168px var(--pixel-color), 408px 168px var(--pixel-color), 432px 168px transparent, 456px 168px transparent, 480px 168px transparent, 504px 168px transparent, 528px 168px transparent, 552px 168px transparent, 0px 192px transparent, 24px 192px transparent, 48px 192px transparent, 72px 192px transparent, 96px 192px transparent, 120px 192px transparent, 144px 192px transparent, 168px 192px transparent, 192px 192px transparent, 216px 192px transparent, 240px 192px transparent, 264px 192px transparent, 288px 192px var(--pixel-color), 312px 192px var(--pixel-color), 336px 192px var(--pixel-color), 360px 192px var(--pixel-color), 384px 192px var(--pixel-color), 408px 192px var(--pixel-color), 432px 192px var(--pixel-color), 456px 192px var(--pixel-color), 480px 192px var(--pixel-color), 504px 192px var(--pixel-color), 528px 192px transparent, 552px 192px transparent, 0px 216px var(--pixel-color), 24px 216px transparent, 48px 216px transparent, 72px 216px transparent, 96px 216px transparent, 120px 216px transparent, 144px 216px transparent, 168px 216px transparent, 192px 216px transparent, 216px 216px transparent, 240px 216px var(--pixel-color), 264px 216px var(--pixel-color), 288px 216px var(--pixel-color), 312px 216px var(--pixel-color), 336px 216px var(--pixel-color), 360px 216px var(--pixel-color), 384px 216px var(--pixel-color), 408px 216px transparent, 432px 216px transparent, 456px 216px transparent, 480px 216px transparent, 504px 216px transparent, 528px 216px transparent, 552px 216px transparent, 0px 240px var(--pixel-color), 24px 240px transparent, 48px 240px transparent, 72px 240px transparent, 96px 240px transparent, 120px 240px transparent, 144px 240px transparent, 168px 240px transparent, 192px 240px var(--pixel-color), 216px 240px var(--pixel-color), 240px 240px var(--pixel-color), 264px 240px var(--pixel-color), 288px 240px var(--pixel-color), 312px 240px var(--pixel-color), 336px 240px var(--pixel-color), 360px 240px var(--pixel-color), 384px 240px var(--pixel-color), 408px 240px transparent, 432px 240px transparent, 456px 240px transparent, 480px 240px transparent, 504px 240px transparent, 528px 240px transparent, 552px 240px transparent, 0px 264px var(--pixel-color), 24px 264px var(--pixel-color), 48px 264px transparent, 72px 264px transparent, 96px 264px transparent, 120px 264px transparent, 144px 264px transparent, 168px 264px var(--pixel-color), 192px 264px var(--pixel-color), 216px 264px var(--pixel-color), 240px 264px var(--pixel-color), 264px 264px var(--pixel-color), 288px 264px var(--pixel-color), 312px 264px var(--pixel-color), 336px 264px var(--pixel-color), 360px 264px var(--pixel-color), 384px 264px var(--pixel-color), 408px 264px var(--pixel-color), 432px 264px var(--pixel-color), 456px 264px transparent, 480px 264px transparent, 504px 264px transparent, 528px 264px transparent, 552px 264px transparent, 0px 288px var(--pixel-color), 24px 288px var(--pixel-color), 48px 288px var(--pixel-color), 72px 288px transparent, 96px 288px transparent, 120px 288px transparent, 144px 288px var(--pixel-color), 168px 288px var(--pixel-color), 192px 288px var(--pixel-color), 216px 288px var(--pixel-color), 240px 288px var(--pixel-color), 264px 288px var(--pixel-color), 288px 288px var(--pixel-color), 312px 288px var(--pixel-color), 336px 288px var(--pixel-color), 360px 288px var(--pixel-color), 384px 288px var(--pixel-color), 408px 288px transparent, 432px 288px var(--pixel-color), 456px 288px transparent, 480px 288px transparent, 504px 288px transparent, 528px 288px transparent, 552px 288px transparent, 0px 312px var(--pixel-color), 24px 312px var(--pixel-color), 48px 312px var(--pixel-color), 72px 312px var(--pixel-color), 96px 312px var(--pixel-color), 120px 312px var(--pixel-color), 144px 312px var(--pixel-color), 168px 312px var(--pixel-color), 192px 312px var(--pixel-color), 216px 312px var(--pixel-color), 240px 312px var(--pixel-color), 264px 312px var(--pixel-color), 288px 312px var(--pixel-color), 312px 312px var(--pixel-color), 336px 312px var(--pixel-color), 360px 312px var(--pixel-color), 384px 312px var(--pixel-color), 408px 312px transparent, 432px 312px transparent, 456px 312px transparent, 480px 312px transparent, 504px 312px transparent, 528px 312px transparent, 552px 312px transparent, 0px 336px var(--pixel-color), 24px 336px var(--pixel-color), 48px 336px var(--pixel-color), 72px 336px var(--pixel-color), 96px 336px var(--pixel-color), 120px 336px var(--pixel-color), 144px 336px var(--pixel-color), 168px 336px var(--pixel-color), 192px 336px var(--pixel-color), 216px 336px var(--pixel-color), 240px 336px var(--pixel-color), 264px 336px var(--pixel-color), 288px 336px var(--pixel-color), 312px 336px var(--pixel-color), 336px 336px var(--pixel-color), 360px 336px var(--pixel-color), 384px 336px var(--pixel-color), 408px 336px transparent, 432px 336px transparent, 456px 336px transparent, 480px 336px transparent, 504px 336px transparent, 528px 336px transparent, 552px 336px transparent, 0px 360px transparent, 24px 360px var(--pixel-color), 48px 360px var(--pixel-color), 72px 360px var(--pixel-color), 96px 360px var(--pixel-color), 120px 360px var(--pixel-color), 144px 360px var(--pixel-color), 168px 360px var(--pixel-color), 192px 360px var(--pixel-color), 216px 360px var(--pixel-color), 240px 360px var(--pixel-color), 264px 360px var(--pixel-color), 288px 360px var(--pixel-color), 312px 360px var(--pixel-color), 336px 360px var(--pixel-color), 360px 360px var(--pixel-color), 384px 360px var(--pixel-color), 408px 360px transparent, 432px 360px transparent, 456px 360px transparent, 480px 360px transparent, 504px 360px transparent, 528px 360px transparent, 552px 360px transparent, 0px 384px transparent, 24px 384px transparent, 48px 384px var(--pixel-color), 72px 384px var(--pixel-color), 96px 384px var(--pixel-color), 120px 384px var(--pixel-color), 144px 384px var(--pixel-color), 168px 384px var(--pixel-color), 192px 384px var(--pixel-color), 216px 384px var(--pixel-color), 240px 384px var(--pixel-color), 264px 384px var(--pixel-color), 288px 384px var(--pixel-color), 312px 384px var(--pixel-color), 336px 384px var(--pixel-color), 360px 384px var(--pixel-color), 384px 384px transparent, 408px 384px transparent, 432px 384px transparent, 456px 384px transparent, 480px 384px transparent, 504px 384px transparent, 528px 384px transparent, 552px 384px transparent, 0px 408px transparent, 24px 408px transparent, 48px 408px transparent, 72px 408px var(--pixel-color), 96px 408px var(--pixel-color), 120px 408px var(--pixel-color), 144px 408px var(--pixel-color), 168px 408px var(--pixel-color), 192px 408px var(--pixel-color), 216px 408px var(--pixel-color), 240px 408px var(--pixel-color), 264px 408px var(--pixel-color), 288px 408px var(--pixel-color), 312px 408px var(--pixel-color), 336px 408px var(--pixel-color), 360px 408px transparent, 384px 408px transparent, 408px 408px transparent, 432px 408px transparent, 456px 408px transparent, 480px 408px transparent, 504px 408px transparent, 528px 408px transparent, 552px 408px transparent, 0px 432px transparent, 24px 432px transparent, 48px 432px transparent, 72px 432px transparent, 96px 432px var(--pixel-color), 120px 432px var(--pixel-color), 144px 432px var(--pixel-color), 168px 432px var(--pixel-color), 192px 432px var(--pixel-color), 216px 432px var(--pixel-color), 240px 432px var(--pixel-color), 264px 432px var(--pixel-color), 288px 432px var(--pixel-color), 312px 432px var(--pixel-color), 336px 432px transparent, 360px 432px transparent, 384px 432px transparent, 408px 432px transparent, 432px 432px transparent, 456px 432px transparent, 480px 432px transparent, 504px 432px transparent, 528px 432px transparent, 552px 432px transparent, 0px 456px transparent, 24px 456px transparent, 48px 456px transparent, 72px 456px transparent, 96px 456px transparent, 120px 456px var(--pixel-color), 144px 456px var(--pixel-color), 168px 456px var(--pixel-color), 192px 456px var(--pixel-color), 216px 456px var(--pixel-color), 240px 456px var(--pixel-color), 264px 456px var(--pixel-color), 288px 456px var(--pixel-color), 312px 456px transparent, 336px 456px transparent, 360px 456px transparent, 384px 456px transparent, 408px 456px transparent, 432px 456px transparent, 456px 456px transparent, 480px 456px transparent, 504px 456px transparent, 528px 456px transparent, 552px 456px transparent, 0px 480px transparent, 24px 480px transparent, 48px 480px transparent, 72px 480px transparent, 96px 480px transparent, 120px 480px transparent, 144px 480px var(--pixel-color), 168px 480px var(--pixel-color), 192px 480px var(--pixel-color), 216px 480px transparent, 240px 480px transparent, 264px 480px var(--pixel-color), 288px 480px var(--pixel-color), 312px 480px var(--pixel-color), 336px 480px transparent, 360px 480px transparent, 384px 480px transparent, 408px 480px transparent, 432px 480px transparent, 456px 480px transparent, 480px 480px transparent, 504px 480px transparent, 528px 480px transparent, 552px 480px transparent, 0px 504px transparent, 24px 504px transparent, 48px 504px transparent, 72px 504px transparent, 96px 504px transparent, 120px 504px transparent, 144px 504px var(--pixel-color), 168px 504px var(--pixel-color), 192px 504px transparent, 216px 504px transparent, 240px 504px transparent, 264px 504px transparent, 288px 504px transparent, 312px 504px transparent, 336px 504px transparent, 360px 504px transparent, 384px 504px transparent, 408px 504px transparent, 432px 504px transparent, 456px 504px transparent, 480px 504px transparent, 504px 504px transparent, 528px 504px transparent, 552px 504px transparent, 0px 528px transparent, 24px 528px transparent, 48px 528px transparent, 72px 528px transparent, 96px 528px transparent, 120px 528px transparent, 144px 528px var(--pixel-color), 168px 528px transparent, 192px 528px transparent, 216px 528px transparent, 240px 528px transparent, 264px 528px transparent, 288px 528px transparent, 312px 528px transparent, 336px 528px transparent, 360px 528px transparent, 384px 528px transparent, 408px 528px transparent, 432px 528px transparent, 456px 528px transparent, 480px 528px transparent, 504px 528px transparent, 528px 528px transparent, 552px 528px transparent, 0px 552px transparent, 24px 552px transparent, 48px 552px transparent, 72px 552px transparent, 96px 552px transparent, 120px 552px transparent, 144px 552px var(--pixel-color), 168px 552px var(--pixel-color), 192px 552px transparent, 216px 552px transparent, 240px 552px transparent, 264px 552px transparent, 288px 552px transparent, 312px 552px transparent, 336px 552px transparent, 360px 552px transparent, 384px 552px transparent, 408px 552px transparent, 432px 552px transparent, 456px 552px transparent, 480px 552px transparent, 504px 552px transparent, 528px 552px transparent, 552px 552px transparent;
  }

  66% {
    --shadow: 0px 0px transparent, 24px 0px transparent, 48px 0px transparent, 72px 0px transparent, 96px 0px transparent, 120px 0px transparent, 144px 0px transparent, 168px 0px transparent, 192px 0px transparent, 216px 0px transparent, 240px 0px transparent, 264px 0px transparent, 288px 0px transparent, 312px 0px var(--pixel-color), 336px 0px var(--pixel-color), 360px 0px var(--pixel-color), 384px 0px var(--pixel-color), 408px 0px var(--pixel-color), 432px 0px var(--pixel-color), 456px 0px var(--pixel-color), 480px 0px var(--pixel-color), 504px 0px var(--pixel-color), 528px 0px var(--pixel-color), 552px 0px transparent, 0px 24px transparent, 24px 24px transparent, 48px 24px transparent, 72px 24px transparent, 96px 24px transparent, 120px 24px transparent, 144px 24px transparent, 168px 24px transparent, 192px 24px transparent, 216px 24px transparent, 240px 24px transparent, 264px 24px transparent, 288px 24px var(--pixel-color), 312px 24px var(--pixel-color), 336px 24px var(--pixel-color), 360px 24px var(--pixel-color), 384px 24px var(--pixel-color), 408px 24px var(--pixel-color), 432px 24px var(--pixel-color), 456px 24px var(--pixel-color), 480px 24px var(--pixel-color), 504px 24px var(--pixel-color), 528px 24px var(--pixel-color), 552px 24px var(--pixel-color), 0px 48px transparent, 24px 48px transparent, 48px 48px transparent, 72px 48px transparent, 96px 48px transparent, 120px 48px transparent, 144px 48px transparent, 168px 48px transparent, 192px 48px transparent, 216px 48px transparent, 240px 48px transparent, 264px 48px transparent, 288px 48px var(--pixel-color), 312px 48px var(--pixel-color), 336px 48px transparent, 360px 48px transparent, 384px 48px var(--pixel-color), 408px 48px var(--pixel-color), 432px 48px var(--pixel-color), 456px 48px var(--pixel-color), 480px 48px var(--pixel-color), 504px 48px var(--pixel-color), 528px 48px var(--pixel-color), 552px 48px var(--pixel-color), 0px 72px transparent, 24px 72px transparent, 48px 72px transparent, 72px 72px transparent, 96px 72px transparent, 120px 72px transparent, 144px 72px transparent, 168px 72px transparent, 192px 72px transparent, 216px 72px transparent, 240px 72px transparent, 264px 72px transparent, 288px 72px var(--pixel-color), 312px 72px var(--pixel-color), 336px 72px transparent, 360px 72px transparent, 384px 72px var(--pixel-color), 408px 72px var(--pixel-color), 432px 72px var(--pixel-color), 456px 72px var(--pixel-color), 480px 72px var(--pixel-color), 504px 72px var(--pixel-color), 528px 72px var(--pixel-color), 552px 72px var(--pixel-color), 0px 96px transparent, 24px 96px transparent, 48px 96px transparent, 72px 96px transparent, 96px 96px transparent, 120px 96px transparent, 144px 96px transparent, 168px 96px transparent, 192px 96px transparent, 216px 96px transparent, 240px 96px transparent, 264px 96px transparent, 288px 96px var(--pixel-color), 312px 96px var(--pixel-color), 336px 96px var(--pixel-color), 360px 96px var(--pixel-color), 384px 96px var(--pixel-color), 408px 96px var(--pixel-color), 432px 96px var(--pixel-color), 456px 96px var(--pixel-color), 480px 96px var(--pixel-color), 504px 96px var(--pixel-color), 528px 96px var(--pixel-color), 552px 96px var(--pixel-color), 0px 120px transparent, 24px 120px transparent, 48px 120px transparent, 72px 120px transparent, 96px 120px transparent, 120px 120px transparent, 144px 120px transparent, 168px 120px transparent, 192px 120px transparent, 216px 120px transparent, 240px 120px transparent, 264px 120px transparent, 288px 120px var(--pixel-color), 312px 120px var(--pixel-color), 336px 120px var(--pixel-color), 360px 120px var(--pixel-color), 384px 120px var(--pixel-color), 408px 120px var(--pixel-color), 432px 120px var(--pixel-color), 456px 120px var(--pixel-color), 480px 120px var(--pixel-color), 504px 120px var(--pixel-color), 528px 120px var(--pixel-color), 552px 120px var(--pixel-color), 0px 144px transparent, 24px 144px transparent, 48px 144px transparent, 72px 144px transparent, 96px 144px transparent, 120px 144px transparent, 144px 144px transparent, 168px 144px transparent, 192px 144px transparent, 216px 144px transparent, 240px 144px transparent, 264px 144px transparent, 288px 144px var(--pixel-color), 312px 144px var(--pixel-color), 336px 144px var(--pixel-color), 360px 144px var(--pixel-color), 384px 144px var(--pixel-color), 408px 144px var(--pixel-color), 432px 144px transparent, 456px 144px transparent, 480px 144px transparent, 504px 144px transparent, 528px 144px transparent, 552px 144px transparent, 0px 168px transparent, 24px 168px transparent, 48px 168px transparent, 72px 168px transparent, 96px 168px transparent, 120px 168px transparent, 144px 168px transparent, 168px 168px transparent, 192px 168px transparent, 216px 168px transparent, 240px 168px transparent, 264px 168px transparent, 288px 168px var(--pixel-color), 312px 168px var(--pixel-color), 336px 168px var(--pixel-color), 360px 168px var(--pixel-color), 384px 168px var(--pixel-color), 408px 168px var(--pixel-color), 432px 168px transparent, 456px 168px transparent, 480px 168px transparent, 504px 168px transparent, 528px 168px transparent, 552px 168px transparent, 0px 192px transparent, 24px 192px transparent, 48px 192px transparent, 72px 192px transparent, 96px 192px transparent, 120px 192px transparent, 144px 192px transparent, 168px 192px transparent, 192px 192px transparent, 216px 192px transparent, 240px 192px transparent, 264px 192px transparent, 288px 192px var(--pixel-color), 312px 192px var(--pixel-color), 336px 192px var(--pixel-color), 360px 192px var(--pixel-color), 384px 192px var(--pixel-color), 408px 192px var(--pixel-color), 432px 192px var(--pixel-color), 456px 192px var(--pixel-color), 480px 192px var(--pixel-color), 504px 192px var(--pixel-color), 528px 192px transparent, 552px 192px transparent, 0px 216px var(--pixel-color), 24px 216px transparent, 48px 216px transparent, 72px 216px transparent, 96px 216px transparent, 120px 216px transparent, 144px 216px transparent, 168px 216px transparent, 192px 216px transparent, 216px 216px transparent, 240px 216px var(--pixel-color), 264px 216px var(--pixel-color), 288px 216px var(--pixel-color), 312px 216px var(--pixel-color), 336px 216px var(--pixel-color), 360px 216px var(--pixel-color), 384px 216px var(--pixel-color), 408px 216px transparent, 432px 216px transparent, 456px 216px transparent, 480px 216px transparent, 504px 216px transparent, 528px 216px transparent, 552px 216px transparent, 0px 240px var(--pixel-color), 24px 240px transparent, 48px 240px transparent, 72px 240px transparent, 96px 240px transparent, 120px 240px transparent, 144px 240px transparent, 168px 240px transparent, 192px 240px var(--pixel-color), 216px 240px var(--pixel-color), 240px 240px var(--pixel-color), 264px 240px var(--pixel-color), 288px 240px var(--pixel-color), 312px 240px var(--pixel-color), 336px 240px var(--pixel-color), 360px 240px var(--pixel-color), 384px 240px var(--pixel-color), 408px 240px transparent, 432px 240px transparent, 456px 240px transparent, 480px 240px transparent, 504px 240px transparent, 528px 240px transparent, 552px 240px transparent, 0px 264px var(--pixel-color), 24px 264px var(--pixel-color), 48px 264px transparent, 72px 264px transparent, 96px 264px transparent, 120px 264px transparent, 144px 264px transparent, 168px 264px var(--pixel-color), 192px 264px var(--pixel-color), 216px 264px var(--pixel-color), 240px 264px var(--pixel-color), 264px 264px var(--pixel-color), 288px 264px var(--pixel-color), 312px 264px var(--pixel-color), 336px 264px var(--pixel-color), 360px 264px var(--pixel-color), 384px 264px var(--pixel-color), 408px 264px var(--pixel-color), 432px 264px var(--pixel-color), 456px 264px transparent, 480px 264px transparent, 504px 264px transparent, 528px 264px transparent, 552px 264px transparent, 0px 288px var(--pixel-color), 24px 288px var(--pixel-color), 48px 288px var(--pixel-color), 72px 288px transparent, 96px 288px transparent, 120px 288px transparent, 144px 288px var(--pixel-color), 168px 288px var(--pixel-color), 192px 288px var(--pixel-color), 216px 288px var(--pixel-color), 240px 288px var(--pixel-color), 264px 288px var(--pixel-color), 288px 288px var(--pixel-color), 312px 288px var(--pixel-color), 336px 288px var(--pixel-color), 360px 288px var(--pixel-color), 384px 288px var(--pixel-color), 408px 288px transparent, 432px 288px var(--pixel-color), 456px 288px transparent, 480px 288px transparent, 504px 288px transparent, 528px 288px transparent, 552px 288px transparent, 0px 312px var(--pixel-color), 24px 312px var(--pixel-color), 48px 312px var(--pixel-color), 72px 312px var(--pixel-color), 96px 312px var(--pixel-color), 120px 312px var(--pixel-color), 144px 312px var(--pixel-color), 168px 312px var(--pixel-color), 192px 312px var(--pixel-color), 216px 312px var(--pixel-color), 240px 312px var(--pixel-color), 264px 312px var(--pixel-color), 288px 312px var(--pixel-color), 312px 312px var(--pixel-color), 336px 312px var(--pixel-color), 360px 312px var(--pixel-color), 384px 312px var(--pixel-color), 408px 312px transparent, 432px 312px transparent, 456px 312px transparent, 480px 312px transparent, 504px 312px transparent, 528px 312px transparent, 552px 312px transparent, 0px 336px var(--pixel-color), 24px 336px var(--pixel-color), 48px 336px var(--pixel-color), 72px 336px var(--pixel-color), 96px 336px var(--pixel-color), 120px 336px var(--pixel-color), 144px 336px var(--pixel-color), 168px 336px var(--pixel-color), 192px 336px var(--pixel-color), 216px 336px var(--pixel-color), 240px 336px var(--pixel-color), 264px 336px var(--pixel-color), 288px 336px var(--pixel-color), 312px 336px var(--pixel-color), 336px 336px var(--pixel-color), 360px 336px var(--pixel-color), 384px 336px var(--pixel-color), 408px 336px transparent, 432px 336px transparent, 456px 336px transparent, 480px 336px transparent, 504px 336px transparent, 528px 336px transparent, 552px 336px transparent, 0px 360px transparent, 24px 360px var(--pixel-color), 48px 360px var(--pixel-color), 72px 360px var(--pixel-color), 96px 360px var(--pixel-color), 120px 360px var(--pixel-color), 144px 360px var(--pixel-color), 168px 360px var(--pixel-color), 192px 360px var(--pixel-color), 216px 360px var(--pixel-color), 240px 360px var(--pixel-color), 264px 360px var(--pixel-color), 288px 360px var(--pixel-color), 312px 360px var(--pixel-color), 336px 360px var(--pixel-color), 360px 360px var(--pixel-color), 384px 360px var(--pixel-color), 408px 360px transparent, 432px 360px transparent, 456px 360px transparent, 480px 360px transparent, 504px 360px transparent, 528px 360px transparent, 552px 360px transparent, 0px 384px transparent, 24px 384px transparent, 48px 384px var(--pixel-color), 72px 384px var(--pixel-color), 96px 384px var(--pixel-color), 120px 384px var(--pixel-color), 144px 384px var(--pixel-color), 168px 384px var(--pixel-color), 192px 384px var(--pixel-color), 216px 384px var(--pixel-color), 240px 384px var(--pixel-color), 264px 384px var(--pixel-color), 288px 384px var(--pixel-color), 312px 384px var(--pixel-color), 336px 384px var(--pixel-color), 360px 384px var(--pixel-color), 384px 384px transparent, 408px 384px transparent, 432px 384px transparent, 456px 384px transparent, 480px 384px transparent, 504px 384px transparent, 528px 384px transparent, 552px 384px transparent, 0px 408px transparent, 24px 408px transparent, 48px 408px transparent, 72px 408px var(--pixel-color), 96px 408px var(--pixel-color), 120px 408px var(--pixel-color), 144px 408px var(--pixel-color), 168px 408px var(--pixel-color), 192px 408px var(--pixel-color), 216px 408px var(--pixel-color), 240px 408px var(--pixel-color), 264px 408px var(--pixel-color), 288px 408px var(--pixel-color), 312px 408px var(--pixel-color), 336px 408px var(--pixel-color), 360px 408px transparent, 384px 408px transparent, 408px 408px transparent, 432px 408px transparent, 456px 408px transparent, 480px 408px transparent, 504px 408px transparent, 528px 408px transparent, 552px 408px transparent, 0px 432px transparent, 24px 432px transparent, 48px 432px transparent, 72px 432px transparent, 96px 432px var(--pixel-color), 120px 432px var(--pixel-color), 144px 432px var(--pixel-color), 168px 432px var(--pixel-color), 192px 432px var(--pixel-color), 216px 432px var(--pixel-color), 240px 432px var(--pixel-color), 264px 432px var(--pixel-color), 288px 432px var(--pixel-color), 312px 432px var(--pixel-color), 336px 432px transparent, 360px 432px transparent, 384px 432px transparent, 408px 432px transparent, 432px 432px transparent, 456px 432px transparent, 480px 432px transparent, 504px 432px transparent, 528px 432px transparent, 552px 432px transparent, 0px 456px transparent, 24px 456px transparent, 48px 456px transparent, 72px 456px transparent, 96px 456px transparent, 120px 456px var(--pixel-color), 144px 456px var(--pixel-color), 168px 456px var(--pixel-color), 192px 456px var(--pixel-color), 216px 456px var(--pixel-color), 240px 456px var(--pixel-color), 264px 456px var(--pixel-color), 288px 456px var(--pixel-color), 312px 456px transparent, 336px 456px transparent, 360px 456px transparent, 384px 456px transparent, 408px 456px transparent, 432px 456px transparent, 456px 456px transparent, 480px 456px transparent, 504px 456px transparent, 528px 456px transparent, 552px 456px transparent, 0px 480px transparent, 24px 480px transparent, 48px 480px transparent, 72px 480px transparent, 96px 480px transparent, 120px 480px transparent, 144px 480px var(--pixel-color), 168px 480px var(--pixel-color), 192px 480px var(--pixel-color), 216px 480px transparent, 240px 480px transparent, 264px 480px var(--pixel-color), 288px 480px var(--pixel-color), 312px 480px transparent, 336px 480px transparent, 360px 480px transparent, 384px 480px transparent, 408px 480px transparent, 432px 480px transparent, 456px 480px transparent, 480px 480px transparent, 504px 480px transparent, 528px 480px transparent, 552px 480px transparent, 0px 504px transparent, 24px 504px transparent, 48px 504px transparent, 72px 504px transparent, 96px 504px transparent, 120px 504px transparent, 144px 504px transparent, 168px 504px var(--pixel-color), 192px 504px var(--pixel-color), 216px 504px var(--pixel-color), 240px 504px transparent, 264px 504px transparent, 288px 504px var(--pixel-color), 312px 504px transparent, 336px 504px transparent, 360px 504px transparent, 384px 504px transparent, 408px 504px transparent, 432px 504px transparent, 456px 504px transparent, 480px 504px transparent, 504px 504px transparent, 528px 504px transparent, 552px 504px transparent, 0px 528px transparent, 24px 528px transparent, 48px 528px transparent, 72px 528px transparent, 96px 528px transparent, 120px 528px transparent, 144px 528px transparent, 168px 528px transparent, 192px 528px transparent, 216px 528px transparent, 240px 528px transparent, 264px 528px transparent, 288px 528px var(--pixel-color), 312px 528px transparent, 336px 528px transparent, 360px 528px transparent, 384px 528px transparent, 408px 528px transparent, 432px 528px transparent, 456px 528px transparent, 480px 528px transparent, 504px 528px transparent, 528px 528px transparent, 552px 528px transparent, 0px 552px transparent, 24px 552px transparent, 48px 552px transparent, 72px 552px transparent, 96px 552px transparent, 120px 552px transparent, 144px 552px transparent, 168px 552px transparent, 192px 552px transparent, 216px 552px transparent, 240px 552px transparent, 264px 552px transparent, 288px 552px var(--pixel-color), 312px 552px var(--pixel-color), 336px 552px transparent, 360px 552px transparent, 384px 552px transparent, 408px 552px transparent, 432px 552px transparent, 456px 552px transparent, 480px 552px transparent, 504px 552px transparent, 528px 552px transparent, 552px 552px transparent;
  }
}
/* _content/LPI.Core.UI.Web/Components/Loaders/LpiHorizontalLoader.razor.rz.scp.css */
.lpi-horizontal-loader-container[b-gkw335un3q] {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.lpi-horizontal-loader[b-gkw335un3q] {
  display: block;
  --height-of-loader: 8px;
  --loader-color: #0071e2;
  width: 200px;
  height: var(--height-of-loader);
  border-radius: 30px;
  background-color: rgba(0,0,0,0.2);
  position: relative;
}

  .lpi-horizontal-loader[b-gkw335un3q]::before {
    content: "";
    position: absolute;
    background: var(--loader-color);
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    border-radius: 30px;
    animation: lpi-horizontal-moving-b-gkw335un3q 1s ease-in-out infinite;
  }

@keyframes lpi-horizontal-moving-b-gkw335un3q {
  50% {
    width: 100%;
  }

  100% {
    width: 0;
    right: 0;
    left: unset;
  }
}
/* _content/LPI.Core.UI.Web/Components/Loaders/LpiLoadingSpinner.razor.rz.scp.css */
.loading-spinner-container[b-l8e3tnp08n] {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.loading-spinner-spinner[b-l8e3tnp08n] {
  width: 56px;
  height: 56px;
  display: grid;
  border: 4px solid #0000;
  border-radius: 50%;
  border-right-color: #299fff;
  animation: loading-spinner-tri-b-l8e3tnp08n 1s infinite linear;
}

  .loading-spinner-spinner[b-l8e3tnp08n]::before,
  .loading-spinner-spinner[b-l8e3tnp08n]::after {
    content: "";
    grid-area: 1/1;
    margin: 2px;
    border: inherit;
    border-radius: 50%;
    animation: loading-spinner-tri-b-l8e3tnp08n 2s infinite;
  }

  .loading-spinner-spinner[b-l8e3tnp08n]::after {
    margin: 8px;
    animation-duration: 3s;
  }

@keyframes loading-spinner-tri-b-l8e3tnp08n {
  100% {
    transform: rotate(1turn);
  }
}

.loading-spinner-loader[b-l8e3tnp08n] {
  color: #4a4a4a;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: 25px;
  box-sizing: content-box;
  height: 40px;
  padding: 10px 10px;
  display: flex;
  border-radius: 8px;
}

.loading-spinner-words[b-l8e3tnp08n] {
  overflow: hidden;
}

.loading-spinner-word[b-l8e3tnp08n] {
  display: block;
  height: 100%;
  padding-left: 6px;
  color: #299fff;
  animation: loading-spinner-cycle-words-b-l8e3tnp08n 5s infinite;
}

.loading-spinner-word.single-word[b-l8e3tnp08n] {
  animation: none;
}

@keyframes loading-spinner-cycle-words-b-l8e3tnp08n {
  10% {
    transform: translateY(-105%);
  }

  25% {
    transform: translateY(-100%);
  }

  35% {
    transform: translateY(-205%);
  }

  50% {
    transform: translateY(-200%);
  }

  60% {
    transform: translateY(-305%);
  }

  75% {
    transform: translateY(-300%);
  }

  85% {
    transform: translateY(-405%);
  }

  100% {
    transform: translateY(-400%);
  }
}
/* _content/LPI.Core.UI.Web/Components/Page/LpiToolbar.razor.rz.scp.css */
/* _content/LPI.Core.UI.Web/Components/Page/SaveBar.razor.rz.scp.css */
@keyframes savebar-slide-up-b-3hznx0ta46 {
  from {
    transform: translateY(100%);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.savebar-animate-slide-up[b-3hznx0ta46] {
  animation: savebar-slide-up-b-3hznx0ta46 0.2s ease-out;
}
/* _content/LPI.Core.UI.Web/Components/Panels/SlidingPanel.razor.rz.scp.css */
/* _content/LPI.Core.UI.Web/Components/RateExperienceProvider.razor.rz.scp.css */
@keyframes dialog-fade-in-b-23ve7t2hg1 {
  from {
    opacity: 0;
    transform: scale(0.95);
  }

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

@keyframes dialog-fade-out-b-23ve7t2hg1 {
  from {
    opacity: 1;
    transform: scale(1);
  }

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

@keyframes backdrop-fade-in-b-23ve7t2hg1 {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes backdrop-fade-out-b-23ve7t2hg1 {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.dialog-animate-in[b-23ve7t2hg1] {
  animation: dialog-fade-in-b-23ve7t2hg1 0.2s ease-out forwards;
}

.dialog-animate-out[b-23ve7t2hg1] {
  animation: dialog-fade-out-b-23ve7t2hg1 0.15s ease-in forwards;
}

.backdrop-animate-in[b-23ve7t2hg1] {
  animation: backdrop-fade-in-b-23ve7t2hg1 0.2s ease-out forwards;
}

.backdrop-animate-out[b-23ve7t2hg1] {
  animation: backdrop-fade-out-b-23ve7t2hg1 0.15s ease-in forwards;
}
/* _content/LPI.Core.UI.Web/Components/ToastProvider.razor.rz.scp.css */
@keyframes toast-slide-in-b-olw4xb4l0r {
  from {
    opacity: 0;
    transform: translateX(100%);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes toast-shrink-b-olw4xb4l0r {
  from {
    width: 100%;
  }

  to {
    width: 0%;
  }
}

.toast-animate-slide-in[b-olw4xb4l0r] {
  animation: toast-slide-in-b-olw4xb4l0r 0.3s ease-out;
}

.toast-animate-shrink[b-olw4xb4l0r] {
  animation: toast-shrink-b-olw4xb4l0r 5s linear forwards;
}
/* _content/LPI.Core.UI.Web/Components/TourProvider.razor.rz.scp.css */

.tour-overlay[b-iu44ipp2m7] {
  background-color: rgb(0 0 0 / 0.4);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  transition: clip-path 0.3s ease-out;
}

:global(.dark) .tour-overlay[b-iu44ipp2m7] {
  background-color: rgb(0 0 0 / 0.6);
}


.tour-arrow[b-iu44ipp2m7] {
  --tour-arrow-color: var(--arrow-color);
}

:global(.dark) .tour-arrow[b-iu44ipp2m7] {
  --tour-arrow-color: var(--arrow-color-dark);
}


.tour-svg-arrow[b-iu44ipp2m7] {
  stroke: var(--svg-arrow-color);
  transition: stroke 0.2s ease;
}

.tour-svg-arrow-fill[b-iu44ipp2m7] {
  fill: var(--svg-arrow-color);
  transition: fill 0.2s ease;
}

:global(.dark) .tour-svg-arrow[b-iu44ipp2m7] {
  stroke: var(--svg-arrow-color-dark);
}

:global(.dark) .tour-svg-arrow-fill[b-iu44ipp2m7] {
  fill: var(--svg-arrow-color-dark);
}

/* Arrow label box - bordered container */
.tour-arrow-label-box[b-iu44ipp2m7] {
  text-align: center;
  padding: 1rem 1.25rem;
  border: 2.5px solid var(--svg-arrow-color);
  border-radius: 0.75rem;
  background: transparent;
  color: var(--svg-arrow-color);
  max-width: 300px;
  min-width: 200px;
}

:global(.dark) .tour-arrow-label-box[b-iu44ipp2m7] {
  border-color: var(--svg-arrow-color-dark);
  background: transparent;
  color: var(--svg-arrow-color-dark);
}

/* Button inside arrow label */
.tour-arrow-button[b-iu44ipp2m7] {
  padding: 0.375rem 0.875rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 0.5rem;
  border: 2px solid var(--svg-arrow-color);
  background: rgb(from var(--svg-arrow-color) r g b / 50%);
  color: white;
  transition: opacity 0.15s ease;
}

.tour-arrow-button:hover[b-iu44ipp2m7] {
  opacity: 0.85;
}

:global(.dark) .tour-arrow-button[b-iu44ipp2m7] {
  background: var(--svg-arrow-color-dark);
}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes tour-fade-in-b-iu44ipp2m7 {
  from {
    opacity: 0;
    transform: scale(0.95);
  }

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

@keyframes tour-slide-in-b-iu44ipp2m7 {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes tour-draw-arrow-b-iu44ipp2m7 {
  from {
    stroke-dashoffset: 1000;
  }

  to {
    stroke-dashoffset: 0;
  }
}

.animate-fade-in[b-iu44ipp2m7] {
  animation: tour-fade-in-b-iu44ipp2m7 0.2s ease-out forwards;
}

.animate-slide-in[b-iu44ipp2m7] {
  animation: tour-slide-in-b-iu44ipp2m7 0.2s ease-out forwards;
}

/* Animated arrow drawing effect (optional - add class to svg path) */
.animate-draw[b-iu44ipp2m7] {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: tour-draw-arrow-b-iu44ipp2m7 0.6s ease-out forwards;
}



@keyframes savebar-slide-up-b-3hznx0ta46 {
  from {
    transform: translateY(100%);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.savebar-animate-slide-up[b-3hznx0ta46] {
  animation: savebar-slide-up-b-3hznx0ta46 0.2s ease-out;
}

.loader-container[b-fyrpsvou2d] {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.spinner[b-fyrpsvou2d] {
  width: 80px;
  height: 80px;
  --clr: rgb(0, 113, 226);
  --clr-alpha: rgba(0, 113, 226, 0.1);
  animation: spinner-b-fyrpsvou2d 2s infinite linear;
  transform-style: preserve-3d;
}

.spinner > div[b-fyrpsvou2d] {
  background-color: var(--clr-alpha);
  height: 100%;
  position: absolute;
  width: 100%;
  border: 5px solid var(--clr);
}

.spinner div:nth-of-type(1)[b-fyrpsvou2d] {
  transform: translateZ(-40px) rotateY(180deg);
}

.spinner div:nth-of-type(2)[b-fyrpsvou2d] {
  transform: rotateY(-270deg) translateX(50%);
  transform-origin: top right;
}

.spinner div:nth-of-type(3)[b-fyrpsvou2d] {
  transform: rotateY(270deg) translateX(-50%);
  transform-origin: center left;
}

.spinner div:nth-of-type(4)[b-fyrpsvou2d] {
  transform: rotateX(90deg) translateY(-50%);
  transform-origin: top center;
}

.spinner div:nth-of-type(5)[b-fyrpsvou2d] {
  transform: rotateX(-90deg) translateY(50%);
  transform-origin: bottom center;
}

.spinner div:nth-of-type(6)[b-fyrpsvou2d] {
  transform: translateZ(40px);
}

@keyframes spinner-b-fyrpsvou2d {
  0% {
    transform: rotate(0deg) rotateX(0deg) rotateY(0deg);
  }

  50% {
    transform: rotate(180deg) rotateX(180deg) rotateY(180deg);
  }

  100% {
    transform: rotate(360deg) rotateX(360deg) rotateY(360deg);
  }
}

.pixel-loader-container[b-mmegsqixnt] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.pixel-loader[b-mmegsqixnt] {
  --zoom: 0.6;
  position: relative;
  --wh: calc(var(--wh-number) * 1px);
  --wh-n: calc(var(--wh-number) * -1px);
  width: calc(var(--wh-number) * var(--wh));
  height: calc(var(--wh-number) * var(--wh));
  --color: #fff;
  --pixel-color: #535353;
  --blur: 0;
  filter: drop-shadow(var(--wh-n) 0 var(--blur) var(--color)) drop-shadow(0 var(--wh-n) var(--blur) var(--color)) drop-shadow(var(--wh) 0 var(--blur) var(--color)) drop-shadow(0 var(--wh) var(--blur) var(--color));
  image-rendering: pixelated;
  zoom: var(--zoom);
  animation: mover-b-mmegsqixnt 0.3s linear infinite;
}

.pixel-loader .pixel[b-mmegsqixnt] {
  width: var(--wh);
  height: var(--wh);
  box-shadow: var(--shadow);
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .pixel-loader[b-mmegsqixnt] {
    --color: #1a1a1a;
    --pixel-color: #a0a0a0;
  }

  .pixel-loader-text[b-mmegsqixnt] {
    color: #e0e0e0;
  }

  .pixel-loader-word[b-mmegsqixnt] {
    color: #60b8ff;
  }
}

/* Text styling */
.pixel-loader-text[b-mmegsqixnt] {
  color: #4a4a4a;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: 25px;
  box-sizing: content-box;
  height: 40px;
  padding: 10px 10px;
  display: flex;
  border-radius: 8px;
}

.pixel-loader-prefix[b-mmegsqixnt] {
  display: block;
}

.pixel-loader-words[b-mmegsqixnt] {
  overflow: hidden;
  height: 100%;
}

.pixel-loader-word[b-mmegsqixnt] {
  display: block;
  height: 100%;
  padding-left: 6px;
  color: #299fff;
  animation: pixel-loader-cycle-words-b-mmegsqixnt 5s infinite;
}

@keyframes pixel-loader-cycle-words-b-mmegsqixnt {
  10% {
    transform: translateY(-105%);
  }

  25% {
    transform: translateY(-100%);
  }

  35% {
    transform: translateY(-205%);
  }

  50% {
    transform: translateY(-200%);
  }

  60% {
    transform: translateY(-305%);
  }

  75% {
    transform: translateY(-300%);
  }

  85% {
    transform: translateY(-405%);
  }

  100% {
    transform: translateY(-400%);
  }
}

@keyframes mover-b-mmegsqixnt {
  0%, 100% {
    --shadow: 0px 0px transparent, 24px 0px transparent, 48px 0px transparent, 72px 0px transparent, 96px 0px transparent, 120px 0px transparent, 144px 0px transparent, 168px 0px transparent, 192px 0px transparent, 216px 0px transparent, 240px 0px transparent, 264px 0px transparent, 288px 0px transparent, 312px 0px var(--pixel-color), 336px 0px var(--pixel-color), 360px 0px var(--pixel-color), 384px 0px var(--pixel-color), 408px 0px var(--pixel-color), 432px 0px var(--pixel-color), 456px 0px var(--pixel-color), 480px 0px var(--pixel-color), 504px 0px var(--pixel-color), 528px 0px var(--pixel-color), 552px 0px transparent, 0px 24px transparent, 24px 24px transparent, 48px 24px transparent, 72px 24px transparent, 96px 24px transparent, 120px 24px transparent, 144px 24px transparent, 168px 24px transparent, 192px 24px transparent, 216px 24px transparent, 240px 24px transparent, 264px 24px transparent, 288px 24px var(--pixel-color), 312px 24px var(--pixel-color), 336px 24px var(--pixel-color), 360px 24px var(--pixel-color), 384px 24px var(--pixel-color), 408px 24px var(--pixel-color), 432px 24px var(--pixel-color), 456px 24px var(--pixel-color), 480px 24px var(--pixel-color), 504px 24px var(--pixel-color), 528px 24px var(--pixel-color), 552px 24px var(--pixel-color), 0px 48px transparent, 24px 48px transparent, 48px 48px transparent, 72px 48px transparent, 96px 48px transparent, 120px 48px transparent, 144px 48px transparent, 168px 48px transparent, 192px 48px transparent, 216px 48px transparent, 240px 48px transparent, 264px 48px transparent, 288px 48px var(--pixel-color), 312px 48px var(--pixel-color), 336px 48px transparent, 360px 48px transparent, 384px 48px var(--pixel-color), 408px 48px var(--pixel-color), 432px 48px var(--pixel-color), 456px 48px var(--pixel-color), 480px 48px var(--pixel-color), 504px 48px var(--pixel-color), 528px 48px var(--pixel-color), 552px 48px var(--pixel-color), 0px 72px transparent, 24px 72px transparent, 48px 72px transparent, 72px 72px transparent, 96px 72px transparent, 120px 72px transparent, 144px 72px transparent, 168px 72px transparent, 192px 72px transparent, 216px 72px transparent, 240px 72px transparent, 264px 72px transparent, 288px 72px var(--pixel-color), 312px 72px var(--pixel-color), 336px 72px transparent, 360px 72px transparent, 384px 72px var(--pixel-color), 408px 72px var(--pixel-color), 432px 72px var(--pixel-color), 456px 72px var(--pixel-color), 480px 72px var(--pixel-color), 504px 72px var(--pixel-color), 528px 72px var(--pixel-color), 552px 72px var(--pixel-color), 0px 96px transparent, 24px 96px transparent, 48px 96px transparent, 72px 96px transparent, 96px 96px transparent, 120px 96px transparent, 144px 96px transparent, 168px 96px transparent, 192px 96px transparent, 216px 96px transparent, 240px 96px transparent, 264px 96px transparent, 288px 96px var(--pixel-color), 312px 96px var(--pixel-color), 336px 96px var(--pixel-color), 360px 96px var(--pixel-color), 384px 96px var(--pixel-color), 408px 96px var(--pixel-color), 432px 96px var(--pixel-color), 456px 96px var(--pixel-color), 480px 96px var(--pixel-color), 504px 96px var(--pixel-color), 528px 96px var(--pixel-color), 552px 96px var(--pixel-color), 0px 120px transparent, 24px 120px transparent, 48px 120px transparent, 72px 120px transparent, 96px 120px transparent, 120px 120px transparent, 144px 120px transparent, 168px 120px transparent, 192px 120px transparent, 216px 120px transparent, 240px 120px transparent, 264px 120px transparent, 288px 120px var(--pixel-color), 312px 120px var(--pixel-color), 336px 120px var(--pixel-color), 360px 120px var(--pixel-color), 384px 120px var(--pixel-color), 408px 120px var(--pixel-color), 432px 120px var(--pixel-color), 456px 120px var(--pixel-color), 480px 120px var(--pixel-color), 504px 120px var(--pixel-color), 528px 120px var(--pixel-color), 552px 120px var(--pixel-color), 0px 144px transparent, 24px 144px transparent, 48px 144px transparent, 72px 144px transparent, 96px 144px transparent, 120px 144px transparent, 144px 144px transparent, 168px 144px transparent, 192px 144px transparent, 216px 144px transparent, 240px 144px transparent, 264px 144px transparent, 288px 144px var(--pixel-color), 312px 144px var(--pixel-color), 336px 144px var(--pixel-color), 360px 144px var(--pixel-color), 384px 144px var(--pixel-color), 408px 144px var(--pixel-color), 432px 144px transparent, 456px 144px transparent, 480px 144px transparent, 504px 144px transparent, 528px 144px transparent, 552px 144px transparent, 0px 168px transparent, 24px 168px transparent, 48px 168px transparent, 72px 168px transparent, 96px 168px transparent, 120px 168px transparent, 144px 168px transparent, 168px 168px transparent, 192px 168px transparent, 216px 168px transparent, 240px 168px transparent, 264px 168px transparent, 288px 168px var(--pixel-color), 312px 168px var(--pixel-color), 336px 168px var(--pixel-color), 360px 168px var(--pixel-color), 384px 168px var(--pixel-color), 408px 168px var(--pixel-color), 432px 168px transparent, 456px 168px transparent, 480px 168px transparent, 504px 168px transparent, 528px 168px transparent, 552px 168px transparent, 0px 192px transparent, 24px 192px transparent, 48px 192px transparent, 72px 192px transparent, 96px 192px transparent, 120px 192px transparent, 144px 192px transparent, 168px 192px transparent, 192px 192px transparent, 216px 192px transparent, 240px 192px transparent, 264px 192px transparent, 288px 192px var(--pixel-color), 312px 192px var(--pixel-color), 336px 192px var(--pixel-color), 360px 192px var(--pixel-color), 384px 192px var(--pixel-color), 408px 192px var(--pixel-color), 432px 192px var(--pixel-color), 456px 192px var(--pixel-color), 480px 192px var(--pixel-color), 504px 192px var(--pixel-color), 528px 192px transparent, 552px 192px transparent, 0px 216px var(--pixel-color), 24px 216px transparent, 48px 216px transparent, 72px 216px transparent, 96px 216px transparent, 120px 216px transparent, 144px 216px transparent, 168px 216px transparent, 192px 216px transparent, 216px 216px transparent, 240px 216px var(--pixel-color), 264px 216px var(--pixel-color), 288px 216px var(--pixel-color), 312px 216px var(--pixel-color), 336px 216px var(--pixel-color), 360px 216px var(--pixel-color), 384px 216px var(--pixel-color), 408px 216px transparent, 432px 216px transparent, 456px 216px transparent, 480px 216px transparent, 504px 216px transparent, 528px 216px transparent, 552px 216px transparent, 0px 240px var(--pixel-color), 24px 240px transparent, 48px 240px transparent, 72px 240px transparent, 96px 240px transparent, 120px 240px transparent, 144px 240px transparent, 168px 240px transparent, 192px 240px var(--pixel-color), 216px 240px var(--pixel-color), 240px 240px var(--pixel-color), 264px 240px var(--pixel-color), 288px 240px var(--pixel-color), 312px 240px var(--pixel-color), 336px 240px var(--pixel-color), 360px 240px var(--pixel-color), 384px 240px var(--pixel-color), 408px 240px transparent, 432px 240px transparent, 456px 240px transparent, 480px 240px transparent, 504px 240px transparent, 528px 240px transparent, 552px 240px transparent, 0px 264px var(--pixel-color), 24px 264px var(--pixel-color), 48px 264px transparent, 72px 264px transparent, 96px 264px transparent, 120px 264px transparent, 144px 264px transparent, 168px 264px var(--pixel-color), 192px 264px var(--pixel-color), 216px 264px var(--pixel-color), 240px 264px var(--pixel-color), 264px 264px var(--pixel-color), 288px 264px var(--pixel-color), 312px 264px var(--pixel-color), 336px 264px var(--pixel-color), 360px 264px var(--pixel-color), 384px 264px var(--pixel-color), 408px 264px var(--pixel-color), 432px 264px var(--pixel-color), 456px 264px transparent, 480px 264px transparent, 504px 264px transparent, 528px 264px transparent, 552px 264px transparent, 0px 288px var(--pixel-color), 24px 288px var(--pixel-color), 48px 288px var(--pixel-color), 72px 288px transparent, 96px 288px transparent, 120px 288px transparent, 144px 288px var(--pixel-color), 168px 288px var(--pixel-color), 192px 288px var(--pixel-color), 216px 288px var(--pixel-color), 240px 288px var(--pixel-color), 264px 288px var(--pixel-color), 288px 288px var(--pixel-color), 312px 288px var(--pixel-color), 336px 288px var(--pixel-color), 360px 288px var(--pixel-color), 384px 288px var(--pixel-color), 408px 288px transparent, 432px 288px var(--pixel-color), 456px 288px transparent, 480px 288px transparent, 504px 288px transparent, 528px 288px transparent, 552px 288px transparent, 0px 312px var(--pixel-color), 24px 312px var(--pixel-color), 48px 312px var(--pixel-color), 72px 312px var(--pixel-color), 96px 312px var(--pixel-color), 120px 312px var(--pixel-color), 144px 312px var(--pixel-color), 168px 312px var(--pixel-color), 192px 312px var(--pixel-color), 216px 312px var(--pixel-color), 240px 312px var(--pixel-color), 264px 312px var(--pixel-color), 288px 312px var(--pixel-color), 312px 312px var(--pixel-color), 336px 312px var(--pixel-color), 360px 312px var(--pixel-color), 384px 312px var(--pixel-color), 408px 312px transparent, 432px 312px transparent, 456px 312px transparent, 480px 312px transparent, 504px 312px transparent, 528px 312px transparent, 552px 312px transparent, 0px 336px var(--pixel-color), 24px 336px var(--pixel-color), 48px 336px var(--pixel-color), 72px 336px var(--pixel-color), 96px 336px var(--pixel-color), 120px 336px var(--pixel-color), 144px 336px var(--pixel-color), 168px 336px var(--pixel-color), 192px 336px var(--pixel-color), 216px 336px var(--pixel-color), 240px 336px var(--pixel-color), 264px 336px var(--pixel-color), 288px 336px var(--pixel-color), 312px 336px var(--pixel-color), 336px 336px var(--pixel-color), 360px 336px var(--pixel-color), 384px 336px var(--pixel-color), 408px 336px transparent, 432px 336px transparent, 456px 336px transparent, 480px 336px transparent, 504px 336px transparent, 528px 336px transparent, 552px 336px transparent, 0px 360px transparent, 24px 360px var(--pixel-color), 48px 360px var(--pixel-color), 72px 360px var(--pixel-color), 96px 360px var(--pixel-color), 120px 360px var(--pixel-color), 144px 360px var(--pixel-color), 168px 360px var(--pixel-color), 192px 360px var(--pixel-color), 216px 360px var(--pixel-color), 240px 360px var(--pixel-color), 264px 360px var(--pixel-color), 288px 360px var(--pixel-color), 312px 360px var(--pixel-color), 336px 360px var(--pixel-color), 360px 360px var(--pixel-color), 384px 360px var(--pixel-color), 408px 360px transparent, 432px 360px transparent, 456px 360px transparent, 480px 360px transparent, 504px 360px transparent, 528px 360px transparent, 552px 360px transparent, 0px 384px transparent, 24px 384px transparent, 48px 384px var(--pixel-color), 72px 384px var(--pixel-color), 96px 384px var(--pixel-color), 120px 384px var(--pixel-color), 144px 384px var(--pixel-color), 168px 384px var(--pixel-color), 192px 384px var(--pixel-color), 216px 384px var(--pixel-color), 240px 384px var(--pixel-color), 264px 384px var(--pixel-color), 288px 384px var(--pixel-color), 312px 384px var(--pixel-color), 336px 384px var(--pixel-color), 360px 384px var(--pixel-color), 384px 384px transparent, 408px 384px transparent, 432px 384px transparent, 456px 384px transparent, 480px 384px transparent, 504px 384px transparent, 528px 384px transparent, 552px 384px transparent, 0px 408px transparent, 24px 408px transparent, 48px 408px transparent, 72px 408px var(--pixel-color), 96px 408px var(--pixel-color), 120px 408px var(--pixel-color), 144px 408px var(--pixel-color), 168px 408px var(--pixel-color), 192px 408px var(--pixel-color), 216px 408px var(--pixel-color), 240px 408px var(--pixel-color), 264px 408px var(--pixel-color), 288px 408px var(--pixel-color), 312px 408px var(--pixel-color), 336px 408px var(--pixel-color), 360px 408px transparent, 384px 408px transparent, 408px 408px transparent, 432px 408px transparent, 456px 408px transparent, 480px 408px transparent, 504px 408px transparent, 528px 408px transparent, 552px 408px transparent, 0px 432px transparent, 24px 432px transparent, 48px 432px transparent, 72px 432px transparent, 96px 432px var(--pixel-color), 120px 432px var(--pixel-color), 144px 432px var(--pixel-color), 168px 432px var(--pixel-color), 192px 432px var(--pixel-color), 216px 432px var(--pixel-color), 240px 432px var(--pixel-color), 264px 432px var(--pixel-color), 288px 432px var(--pixel-color), 312px 432px var(--pixel-color), 336px 432px transparent, 360px 432px transparent, 384px 432px transparent, 408px 432px transparent, 432px 432px transparent, 456px 432px transparent, 480px 432px transparent, 504px 432px transparent, 528px 432px transparent, 552px 432px transparent, 0px 456px transparent, 24px 456px transparent, 48px 456px transparent, 72px 456px transparent, 96px 456px transparent, 120px 456px var(--pixel-color), 144px 456px var(--pixel-color), 168px 456px var(--pixel-color), 192px 456px var(--pixel-color), 216px 456px var(--pixel-color), 240px 456px var(--pixel-color), 264px 456px var(--pixel-color), 288px 456px var(--pixel-color), 312px 456px transparent, 336px 456px transparent, 360px 456px transparent, 384px 456px transparent, 408px 456px transparent, 432px 456px transparent, 456px 456px transparent, 480px 456px transparent, 504px 456px transparent, 528px 456px transparent, 552px 456px transparent, 0px 480px transparent, 24px 480px transparent, 48px 480px transparent, 72px 480px transparent, 96px 480px transparent, 120px 480px transparent, 144px 480px var(--pixel-color), 168px 480px var(--pixel-color), 192px 480px var(--pixel-color), 216px 480px transparent, 240px 480px transparent, 264px 480px var(--pixel-color), 288px 480px var(--pixel-color), 312px 480px transparent, 336px 480px transparent, 360px 480px transparent, 384px 480px transparent, 408px 480px transparent, 432px 480px transparent, 456px 480px transparent, 480px 480px transparent, 504px 480px transparent, 528px 480px transparent, 552px 480px transparent, 0px 504px transparent, 24px 504px transparent, 48px 504px transparent, 72px 504px transparent, 96px 504px transparent, 120px 504px transparent, 144px 504px var(--pixel-color), 168px 504px var(--pixel-color), 192px 504px transparent, 216px 504px transparent, 240px 504px transparent, 264px 504px transparent, 288px 504px var(--pixel-color), 312px 504px transparent, 336px 504px transparent, 360px 504px transparent, 384px 504px transparent, 408px 504px transparent, 432px 504px transparent, 456px 504px transparent, 480px 504px transparent, 504px 504px transparent, 528px 504px transparent, 552px 504px transparent, 0px 528px transparent, 24px 528px transparent, 48px 528px transparent, 72px 528px transparent, 96px 528px transparent, 120px 528px transparent, 144px 528px var(--pixel-color), 168px 528px transparent, 192px 528px transparent, 216px 528px transparent, 240px 528px transparent, 264px 528px transparent, 288px 528px var(--pixel-color), 312px 528px transparent, 336px 528px transparent, 360px 528px transparent, 384px 528px transparent, 408px 528px transparent, 432px 528px transparent, 456px 528px transparent, 480px 528px transparent, 504px 528px transparent, 528px 528px transparent, 552px 528px transparent, 0px 552px transparent, 24px 552px transparent, 48px 552px transparent, 72px 552px transparent, 96px 552px transparent, 120px 552px transparent, 144px 552px var(--pixel-color), 168px 552px var(--pixel-color), 192px 552px transparent, 216px 552px transparent, 240px 552px transparent, 264px 552px transparent, 288px 552px var(--pixel-color), 312px 552px var(--pixel-color), 336px 552px transparent, 360px 552px transparent, 384px 552px transparent, 408px 552px transparent, 432px 552px transparent, 456px 552px transparent, 480px 552px transparent, 504px 552px transparent, 528px 552px transparent, 552px 552px transparent;
  }

  33% {
    --shadow: 0px 0px transparent, 24px 0px transparent, 48px 0px transparent, 72px 0px transparent, 96px 0px transparent, 120px 0px transparent, 144px 0px transparent, 168px 0px transparent, 192px 0px transparent, 216px 0px transparent, 240px 0px transparent, 264px 0px transparent, 288px 0px transparent, 312px 0px var(--pixel-color), 336px 0px var(--pixel-color), 360px 0px var(--pixel-color), 384px 0px var(--pixel-color), 408px 0px var(--pixel-color), 432px 0px var(--pixel-color), 456px 0px var(--pixel-color), 480px 0px var(--pixel-color), 504px 0px var(--pixel-color), 528px 0px var(--pixel-color), 552px 0px transparent, 0px 24px transparent, 24px 24px transparent, 48px 24px transparent, 72px 24px transparent, 96px 24px transparent, 120px 24px transparent, 144px 24px transparent, 168px 24px transparent, 192px 24px transparent, 216px 24px transparent, 240px 24px transparent, 264px 24px transparent, 288px 24px var(--pixel-color), 312px 24px var(--pixel-color), 336px 24px var(--pixel-color), 360px 24px var(--pixel-color), 384px 24px var(--pixel-color), 408px 24px var(--pixel-color), 432px 24px var(--pixel-color), 456px 24px var(--pixel-color), 480px 24px var(--pixel-color), 504px 24px var(--pixel-color), 528px 24px var(--pixel-color), 552px 24px var(--pixel-color), 0px 48px transparent, 24px 48px transparent, 48px 48px transparent, 72px 48px transparent, 96px 48px transparent, 120px 48px transparent, 144px 48px transparent, 168px 48px transparent, 192px 48px transparent, 216px 48px transparent, 240px 48px transparent, 264px 48px transparent, 288px 48px var(--pixel-color), 312px 48px var(--pixel-color), 336px 48px transparent, 360px 48px transparent, 384px 48px var(--pixel-color), 408px 48px var(--pixel-color), 432px 48px var(--pixel-color), 456px 48px var(--pixel-color), 480px 48px var(--pixel-color), 504px 48px var(--pixel-color), 528px 48px var(--pixel-color), 552px 48px var(--pixel-color), 0px 72px transparent, 24px 72px transparent, 48px 72px transparent, 72px 72px transparent, 96px 72px transparent, 120px 72px transparent, 144px 72px transparent, 168px 72px transparent, 192px 72px transparent, 216px 72px transparent, 240px 72px transparent, 264px 72px transparent, 288px 72px var(--pixel-color), 312px 72px var(--pixel-color), 336px 72px transparent, 360px 72px transparent, 384px 72px var(--pixel-color), 408px 72px var(--pixel-color), 432px 72px var(--pixel-color), 456px 72px var(--pixel-color), 480px 72px var(--pixel-color), 504px 72px var(--pixel-color), 528px 72px var(--pixel-color), 552px 72px var(--pixel-color), 0px 96px transparent, 24px 96px transparent, 48px 96px transparent, 72px 96px transparent, 96px 96px transparent, 120px 96px transparent, 144px 96px transparent, 168px 96px transparent, 192px 96px transparent, 216px 96px transparent, 240px 96px transparent, 264px 96px transparent, 288px 96px var(--pixel-color), 312px 96px var(--pixel-color), 336px 96px var(--pixel-color), 360px 96px var(--pixel-color), 384px 96px var(--pixel-color), 408px 96px var(--pixel-color), 432px 96px var(--pixel-color), 456px 96px var(--pixel-color), 480px 96px var(--pixel-color), 504px 96px var(--pixel-color), 528px 96px var(--pixel-color), 552px 96px var(--pixel-color), 0px 120px transparent, 24px 120px transparent, 48px 120px transparent, 72px 120px transparent, 96px 120px transparent, 120px 120px transparent, 144px 120px transparent, 168px 120px transparent, 192px 120px transparent, 216px 120px transparent, 240px 120px transparent, 264px 120px transparent, 288px 120px var(--pixel-color), 312px 120px var(--pixel-color), 336px 120px var(--pixel-color), 360px 120px var(--pixel-color), 384px 120px var(--pixel-color), 408px 120px var(--pixel-color), 432px 120px var(--pixel-color), 456px 120px var(--pixel-color), 480px 120px var(--pixel-color), 504px 120px var(--pixel-color), 528px 120px var(--pixel-color), 552px 120px var(--pixel-color), 0px 144px transparent, 24px 144px transparent, 48px 144px transparent, 72px 144px transparent, 96px 144px transparent, 120px 144px transparent, 144px 144px transparent, 168px 144px transparent, 192px 144px transparent, 216px 144px transparent, 240px 144px transparent, 264px 144px transparent, 288px 144px var(--pixel-color), 312px 144px var(--pixel-color), 336px 144px var(--pixel-color), 360px 144px var(--pixel-color), 384px 144px var(--pixel-color), 408px 144px var(--pixel-color), 432px 144px transparent, 456px 144px transparent, 480px 144px transparent, 504px 144px transparent, 528px 144px transparent, 552px 144px transparent, 0px 168px transparent, 24px 168px transparent, 48px 168px transparent, 72px 168px transparent, 96px 168px transparent, 120px 168px transparent, 144px 168px transparent, 168px 168px transparent, 192px 168px transparent, 216px 168px transparent, 240px 168px transparent, 264px 168px transparent, 288px 168px var(--pixel-color), 312px 168px var(--pixel-color), 336px 168px var(--pixel-color), 360px 168px var(--pixel-color), 384px 168px var(--pixel-color), 408px 168px var(--pixel-color), 432px 168px transparent, 456px 168px transparent, 480px 168px transparent, 504px 168px transparent, 528px 168px transparent, 552px 168px transparent, 0px 192px transparent, 24px 192px transparent, 48px 192px transparent, 72px 192px transparent, 96px 192px transparent, 120px 192px transparent, 144px 192px transparent, 168px 192px transparent, 192px 192px transparent, 216px 192px transparent, 240px 192px transparent, 264px 192px transparent, 288px 192px var(--pixel-color), 312px 192px var(--pixel-color), 336px 192px var(--pixel-color), 360px 192px var(--pixel-color), 384px 192px var(--pixel-color), 408px 192px var(--pixel-color), 432px 192px var(--pixel-color), 456px 192px var(--pixel-color), 480px 192px var(--pixel-color), 504px 192px var(--pixel-color), 528px 192px transparent, 552px 192px transparent, 0px 216px var(--pixel-color), 24px 216px transparent, 48px 216px transparent, 72px 216px transparent, 96px 216px transparent, 120px 216px transparent, 144px 216px transparent, 168px 216px transparent, 192px 216px transparent, 216px 216px transparent, 240px 216px var(--pixel-color), 264px 216px var(--pixel-color), 288px 216px var(--pixel-color), 312px 216px var(--pixel-color), 336px 216px var(--pixel-color), 360px 216px var(--pixel-color), 384px 216px var(--pixel-color), 408px 216px transparent, 432px 216px transparent, 456px 216px transparent, 480px 216px transparent, 504px 216px transparent, 528px 216px transparent, 552px 216px transparent, 0px 240px var(--pixel-color), 24px 240px transparent, 48px 240px transparent, 72px 240px transparent, 96px 240px transparent, 120px 240px transparent, 144px 240px transparent, 168px 240px transparent, 192px 240px var(--pixel-color), 216px 240px var(--pixel-color), 240px 240px var(--pixel-color), 264px 240px var(--pixel-color), 288px 240px var(--pixel-color), 312px 240px var(--pixel-color), 336px 240px var(--pixel-color), 360px 240px var(--pixel-color), 384px 240px var(--pixel-color), 408px 240px transparent, 432px 240px transparent, 456px 240px transparent, 480px 240px transparent, 504px 240px transparent, 528px 240px transparent, 552px 240px transparent, 0px 264px var(--pixel-color), 24px 264px var(--pixel-color), 48px 264px transparent, 72px 264px transparent, 96px 264px transparent, 120px 264px transparent, 144px 264px transparent, 168px 264px var(--pixel-color), 192px 264px var(--pixel-color), 216px 264px var(--pixel-color), 240px 264px var(--pixel-color), 264px 264px var(--pixel-color), 288px 264px var(--pixel-color), 312px 264px var(--pixel-color), 336px 264px var(--pixel-color), 360px 264px var(--pixel-color), 384px 264px var(--pixel-color), 408px 264px var(--pixel-color), 432px 264px var(--pixel-color), 456px 264px transparent, 480px 264px transparent, 504px 264px transparent, 528px 264px transparent, 552px 264px transparent, 0px 288px var(--pixel-color), 24px 288px var(--pixel-color), 48px 288px var(--pixel-color), 72px 288px transparent, 96px 288px transparent, 120px 288px transparent, 144px 288px var(--pixel-color), 168px 288px var(--pixel-color), 192px 288px var(--pixel-color), 216px 288px var(--pixel-color), 240px 288px var(--pixel-color), 264px 288px var(--pixel-color), 288px 288px var(--pixel-color), 312px 288px var(--pixel-color), 336px 288px var(--pixel-color), 360px 288px var(--pixel-color), 384px 288px var(--pixel-color), 408px 288px transparent, 432px 288px var(--pixel-color), 456px 288px transparent, 480px 288px transparent, 504px 288px transparent, 528px 288px transparent, 552px 288px transparent, 0px 312px var(--pixel-color), 24px 312px var(--pixel-color), 48px 312px var(--pixel-color), 72px 312px var(--pixel-color), 96px 312px var(--pixel-color), 120px 312px var(--pixel-color), 144px 312px var(--pixel-color), 168px 312px var(--pixel-color), 192px 312px var(--pixel-color), 216px 312px var(--pixel-color), 240px 312px var(--pixel-color), 264px 312px var(--pixel-color), 288px 312px var(--pixel-color), 312px 312px var(--pixel-color), 336px 312px var(--pixel-color), 360px 312px var(--pixel-color), 384px 312px var(--pixel-color), 408px 312px transparent, 432px 312px transparent, 456px 312px transparent, 480px 312px transparent, 504px 312px transparent, 528px 312px transparent, 552px 312px transparent, 0px 336px var(--pixel-color), 24px 336px var(--pixel-color), 48px 336px var(--pixel-color), 72px 336px var(--pixel-color), 96px 336px var(--pixel-color), 120px 336px var(--pixel-color), 144px 336px var(--pixel-color), 168px 336px var(--pixel-color), 192px 336px var(--pixel-color), 216px 336px var(--pixel-color), 240px 336px var(--pixel-color), 264px 336px var(--pixel-color), 288px 336px var(--pixel-color), 312px 336px var(--pixel-color), 336px 336px var(--pixel-color), 360px 336px var(--pixel-color), 384px 336px var(--pixel-color), 408px 336px transparent, 432px 336px transparent, 456px 336px transparent, 480px 336px transparent, 504px 336px transparent, 528px 336px transparent, 552px 336px transparent, 0px 360px transparent, 24px 360px var(--pixel-color), 48px 360px var(--pixel-color), 72px 360px var(--pixel-color), 96px 360px var(--pixel-color), 120px 360px var(--pixel-color), 144px 360px var(--pixel-color), 168px 360px var(--pixel-color), 192px 360px var(--pixel-color), 216px 360px var(--pixel-color), 240px 360px var(--pixel-color), 264px 360px var(--pixel-color), 288px 360px var(--pixel-color), 312px 360px var(--pixel-color), 336px 360px var(--pixel-color), 360px 360px var(--pixel-color), 384px 360px var(--pixel-color), 408px 360px transparent, 432px 360px transparent, 456px 360px transparent, 480px 360px transparent, 504px 360px transparent, 528px 360px transparent, 552px 360px transparent, 0px 384px transparent, 24px 384px transparent, 48px 384px var(--pixel-color), 72px 384px var(--pixel-color), 96px 384px var(--pixel-color), 120px 384px var(--pixel-color), 144px 384px var(--pixel-color), 168px 384px var(--pixel-color), 192px 384px var(--pixel-color), 216px 384px var(--pixel-color), 240px 384px var(--pixel-color), 264px 384px var(--pixel-color), 288px 384px var(--pixel-color), 312px 384px var(--pixel-color), 336px 384px var(--pixel-color), 360px 384px var(--pixel-color), 384px 384px transparent, 408px 384px transparent, 432px 384px transparent, 456px 384px transparent, 480px 384px transparent, 504px 384px transparent, 528px 384px transparent, 552px 384px transparent, 0px 408px transparent, 24px 408px transparent, 48px 408px transparent, 72px 408px var(--pixel-color), 96px 408px var(--pixel-color), 120px 408px var(--pixel-color), 144px 408px var(--pixel-color), 168px 408px var(--pixel-color), 192px 408px var(--pixel-color), 216px 408px var(--pixel-color), 240px 408px var(--pixel-color), 264px 408px var(--pixel-color), 288px 408px var(--pixel-color), 312px 408px var(--pixel-color), 336px 408px var(--pixel-color), 360px 408px transparent, 384px 408px transparent, 408px 408px transparent, 432px 408px transparent, 456px 408px transparent, 480px 408px transparent, 504px 408px transparent, 528px 408px transparent, 552px 408px transparent, 0px 432px transparent, 24px 432px transparent, 48px 432px transparent, 72px 432px transparent, 96px 432px var(--pixel-color), 120px 432px var(--pixel-color), 144px 432px var(--pixel-color), 168px 432px var(--pixel-color), 192px 432px var(--pixel-color), 216px 432px var(--pixel-color), 240px 432px var(--pixel-color), 264px 432px var(--pixel-color), 288px 432px var(--pixel-color), 312px 432px var(--pixel-color), 336px 432px transparent, 360px 432px transparent, 384px 432px transparent, 408px 432px transparent, 432px 432px transparent, 456px 432px transparent, 480px 432px transparent, 504px 432px transparent, 528px 432px transparent, 552px 432px transparent, 0px 456px transparent, 24px 456px transparent, 48px 456px transparent, 72px 456px transparent, 96px 456px transparent, 120px 456px var(--pixel-color), 144px 456px var(--pixel-color), 168px 456px var(--pixel-color), 192px 456px var(--pixel-color), 216px 456px var(--pixel-color), 240px 456px var(--pixel-color), 264px 456px var(--pixel-color), 288px 456px var(--pixel-color), 312px 456px transparent, 336px 456px transparent, 360px 456px transparent, 384px 456px transparent, 408px 456px transparent, 432px 456px transparent, 456px 456px transparent, 480px 456px transparent, 504px 456px transparent, 528px 456px transparent, 552px 456px transparent, 0px 480px transparent, 24px 480px transparent, 48px 480px transparent, 72px 480px transparent, 96px 480px transparent, 120px 480px transparent, 144px 480px var(--pixel-color), 168px 480px var(--pixel-color), 192px 480px var(--pixel-color), 216px 480px transparent, 240px 480px transparent, 264px 480px var(--pixel-color), 288px 480px var(--pixel-color), 312px 480px var(--pixel-color), 336px 480px transparent, 360px 480px transparent, 384px 480px transparent, 408px 480px transparent, 432px 480px transparent, 456px 480px transparent, 480px 480px transparent, 504px 480px transparent, 528px 480px transparent, 552px 480px transparent, 0px 504px transparent, 24px 504px transparent, 48px 504px transparent, 72px 504px transparent, 96px 504px transparent, 120px 504px transparent, 144px 504px var(--pixel-color), 168px 504px var(--pixel-color), 192px 504px transparent, 216px 504px transparent, 240px 504px transparent, 264px 504px transparent, 288px 504px transparent, 312px 504px transparent, 336px 504px transparent, 360px 504px transparent, 384px 504px transparent, 408px 504px transparent, 432px 504px transparent, 456px 504px transparent, 480px 504px transparent, 504px 504px transparent, 528px 504px transparent, 552px 504px transparent, 0px 528px transparent, 24px 528px transparent, 48px 528px transparent, 72px 528px transparent, 96px 528px transparent, 120px 528px transparent, 144px 528px var(--pixel-color), 168px 528px transparent, 192px 528px transparent, 216px 528px transparent, 240px 528px transparent, 264px 528px transparent, 288px 528px transparent, 312px 528px transparent, 336px 528px transparent, 360px 528px transparent, 384px 528px transparent, 408px 528px transparent, 432px 528px transparent, 456px 528px transparent, 480px 528px transparent, 504px 528px transparent, 528px 528px transparent, 552px 528px transparent, 0px 552px transparent, 24px 552px transparent, 48px 552px transparent, 72px 552px transparent, 96px 552px transparent, 120px 552px transparent, 144px 552px var(--pixel-color), 168px 552px var(--pixel-color), 192px 552px transparent, 216px 552px transparent, 240px 552px transparent, 264px 552px transparent, 288px 552px transparent, 312px 552px transparent, 336px 552px transparent, 360px 552px transparent, 384px 552px transparent, 408px 552px transparent, 432px 552px transparent, 456px 552px transparent, 480px 552px transparent, 504px 552px transparent, 528px 552px transparent, 552px 552px transparent;
  }

  66% {
    --shadow: 0px 0px transparent, 24px 0px transparent, 48px 0px transparent, 72px 0px transparent, 96px 0px transparent, 120px 0px transparent, 144px 0px transparent, 168px 0px transparent, 192px 0px transparent, 216px 0px transparent, 240px 0px transparent, 264px 0px transparent, 288px 0px transparent, 312px 0px var(--pixel-color), 336px 0px var(--pixel-color), 360px 0px var(--pixel-color), 384px 0px var(--pixel-color), 408px 0px var(--pixel-color), 432px 0px var(--pixel-color), 456px 0px var(--pixel-color), 480px 0px var(--pixel-color), 504px 0px var(--pixel-color), 528px 0px var(--pixel-color), 552px 0px transparent, 0px 24px transparent, 24px 24px transparent, 48px 24px transparent, 72px 24px transparent, 96px 24px transparent, 120px 24px transparent, 144px 24px transparent, 168px 24px transparent, 192px 24px transparent, 216px 24px transparent, 240px 24px transparent, 264px 24px transparent, 288px 24px var(--pixel-color), 312px 24px var(--pixel-color), 336px 24px var(--pixel-color), 360px 24px var(--pixel-color), 384px 24px var(--pixel-color), 408px 24px var(--pixel-color), 432px 24px var(--pixel-color), 456px 24px var(--pixel-color), 480px 24px var(--pixel-color), 504px 24px var(--pixel-color), 528px 24px var(--pixel-color), 552px 24px var(--pixel-color), 0px 48px transparent, 24px 48px transparent, 48px 48px transparent, 72px 48px transparent, 96px 48px transparent, 120px 48px transparent, 144px 48px transparent, 168px 48px transparent, 192px 48px transparent, 216px 48px transparent, 240px 48px transparent, 264px 48px transparent, 288px 48px var(--pixel-color), 312px 48px var(--pixel-color), 336px 48px transparent, 360px 48px transparent, 384px 48px var(--pixel-color), 408px 48px var(--pixel-color), 432px 48px var(--pixel-color), 456px 48px var(--pixel-color), 480px 48px var(--pixel-color), 504px 48px var(--pixel-color), 528px 48px var(--pixel-color), 552px 48px var(--pixel-color), 0px 72px transparent, 24px 72px transparent, 48px 72px transparent, 72px 72px transparent, 96px 72px transparent, 120px 72px transparent, 144px 72px transparent, 168px 72px transparent, 192px 72px transparent, 216px 72px transparent, 240px 72px transparent, 264px 72px transparent, 288px 72px var(--pixel-color), 312px 72px var(--pixel-color), 336px 72px transparent, 360px 72px transparent, 384px 72px var(--pixel-color), 408px 72px var(--pixel-color), 432px 72px var(--pixel-color), 456px 72px var(--pixel-color), 480px 72px var(--pixel-color), 504px 72px var(--pixel-color), 528px 72px var(--pixel-color), 552px 72px var(--pixel-color), 0px 96px transparent, 24px 96px transparent, 48px 96px transparent, 72px 96px transparent, 96px 96px transparent, 120px 96px transparent, 144px 96px transparent, 168px 96px transparent, 192px 96px transparent, 216px 96px transparent, 240px 96px transparent, 264px 96px transparent, 288px 96px var(--pixel-color), 312px 96px var(--pixel-color), 336px 96px var(--pixel-color), 360px 96px var(--pixel-color), 384px 96px var(--pixel-color), 408px 96px var(--pixel-color), 432px 96px var(--pixel-color), 456px 96px var(--pixel-color), 480px 96px var(--pixel-color), 504px 96px var(--pixel-color), 528px 96px var(--pixel-color), 552px 96px var(--pixel-color), 0px 120px transparent, 24px 120px transparent, 48px 120px transparent, 72px 120px transparent, 96px 120px transparent, 120px 120px transparent, 144px 120px transparent, 168px 120px transparent, 192px 120px transparent, 216px 120px transparent, 240px 120px transparent, 264px 120px transparent, 288px 120px var(--pixel-color), 312px 120px var(--pixel-color), 336px 120px var(--pixel-color), 360px 120px var(--pixel-color), 384px 120px var(--pixel-color), 408px 120px var(--pixel-color), 432px 120px var(--pixel-color), 456px 120px var(--pixel-color), 480px 120px var(--pixel-color), 504px 120px var(--pixel-color), 528px 120px var(--pixel-color), 552px 120px var(--pixel-color), 0px 144px transparent, 24px 144px transparent, 48px 144px transparent, 72px 144px transparent, 96px 144px transparent, 120px 144px transparent, 144px 144px transparent, 168px 144px transparent, 192px 144px transparent, 216px 144px transparent, 240px 144px transparent, 264px 144px transparent, 288px 144px var(--pixel-color), 312px 144px var(--pixel-color), 336px 144px var(--pixel-color), 360px 144px var(--pixel-color), 384px 144px var(--pixel-color), 408px 144px var(--pixel-color), 432px 144px transparent, 456px 144px transparent, 480px 144px transparent, 504px 144px transparent, 528px 144px transparent, 552px 144px transparent, 0px 168px transparent, 24px 168px transparent, 48px 168px transparent, 72px 168px transparent, 96px 168px transparent, 120px 168px transparent, 144px 168px transparent, 168px 168px transparent, 192px 168px transparent, 216px 168px transparent, 240px 168px transparent, 264px 168px transparent, 288px 168px var(--pixel-color), 312px 168px var(--pixel-color), 336px 168px var(--pixel-color), 360px 168px var(--pixel-color), 384px 168px var(--pixel-color), 408px 168px var(--pixel-color), 432px 168px transparent, 456px 168px transparent, 480px 168px transparent, 504px 168px transparent, 528px 168px transparent, 552px 168px transparent, 0px 192px transparent, 24px 192px transparent, 48px 192px transparent, 72px 192px transparent, 96px 192px transparent, 120px 192px transparent, 144px 192px transparent, 168px 192px transparent, 192px 192px transparent, 216px 192px transparent, 240px 192px transparent, 264px 192px transparent, 288px 192px var(--pixel-color), 312px 192px var(--pixel-color), 336px 192px var(--pixel-color), 360px 192px var(--pixel-color), 384px 192px var(--pixel-color), 408px 192px var(--pixel-color), 432px 192px var(--pixel-color), 456px 192px var(--pixel-color), 480px 192px var(--pixel-color), 504px 192px var(--pixel-color), 528px 192px transparent, 552px 192px transparent, 0px 216px var(--pixel-color), 24px 216px transparent, 48px 216px transparent, 72px 216px transparent, 96px 216px transparent, 120px 216px transparent, 144px 216px transparent, 168px 216px transparent, 192px 216px transparent, 216px 216px transparent, 240px 216px var(--pixel-color), 264px 216px var(--pixel-color), 288px 216px var(--pixel-color), 312px 216px var(--pixel-color), 336px 216px var(--pixel-color), 360px 216px var(--pixel-color), 384px 216px var(--pixel-color), 408px 216px transparent, 432px 216px transparent, 456px 216px transparent, 480px 216px transparent, 504px 216px transparent, 528px 216px transparent, 552px 216px transparent, 0px 240px var(--pixel-color), 24px 240px transparent, 48px 240px transparent, 72px 240px transparent, 96px 240px transparent, 120px 240px transparent, 144px 240px transparent, 168px 240px transparent, 192px 240px var(--pixel-color), 216px 240px var(--pixel-color), 240px 240px var(--pixel-color), 264px 240px var(--pixel-color), 288px 240px var(--pixel-color), 312px 240px var(--pixel-color), 336px 240px var(--pixel-color), 360px 240px var(--pixel-color), 384px 240px var(--pixel-color), 408px 240px transparent, 432px 240px transparent, 456px 240px transparent, 480px 240px transparent, 504px 240px transparent, 528px 240px transparent, 552px 240px transparent, 0px 264px var(--pixel-color), 24px 264px var(--pixel-color), 48px 264px transparent, 72px 264px transparent, 96px 264px transparent, 120px 264px transparent, 144px 264px transparent, 168px 264px var(--pixel-color), 192px 264px var(--pixel-color), 216px 264px var(--pixel-color), 240px 264px var(--pixel-color), 264px 264px var(--pixel-color), 288px 264px var(--pixel-color), 312px 264px var(--pixel-color), 336px 264px var(--pixel-color), 360px 264px var(--pixel-color), 384px 264px var(--pixel-color), 408px 264px var(--pixel-color), 432px 264px var(--pixel-color), 456px 264px transparent, 480px 264px transparent, 504px 264px transparent, 528px 264px transparent, 552px 264px transparent, 0px 288px var(--pixel-color), 24px 288px var(--pixel-color), 48px 288px var(--pixel-color), 72px 288px transparent, 96px 288px transparent, 120px 288px transparent, 144px 288px var(--pixel-color), 168px 288px var(--pixel-color), 192px 288px var(--pixel-color), 216px 288px var(--pixel-color), 240px 288px var(--pixel-color), 264px 288px var(--pixel-color), 288px 288px var(--pixel-color), 312px 288px var(--pixel-color), 336px 288px var(--pixel-color), 360px 288px var(--pixel-color), 384px 288px var(--pixel-color), 408px 288px transparent, 432px 288px var(--pixel-color), 456px 288px transparent, 480px 288px transparent, 504px 288px transparent, 528px 288px transparent, 552px 288px transparent, 0px 312px var(--pixel-color), 24px 312px var(--pixel-color), 48px 312px var(--pixel-color), 72px 312px var(--pixel-color), 96px 312px var(--pixel-color), 120px 312px var(--pixel-color), 144px 312px var(--pixel-color), 168px 312px var(--pixel-color), 192px 312px var(--pixel-color), 216px 312px var(--pixel-color), 240px 312px var(--pixel-color), 264px 312px var(--pixel-color), 288px 312px var(--pixel-color), 312px 312px var(--pixel-color), 336px 312px var(--pixel-color), 360px 312px var(--pixel-color), 384px 312px var(--pixel-color), 408px 312px transparent, 432px 312px transparent, 456px 312px transparent, 480px 312px transparent, 504px 312px transparent, 528px 312px transparent, 552px 312px transparent, 0px 336px var(--pixel-color), 24px 336px var(--pixel-color), 48px 336px var(--pixel-color), 72px 336px var(--pixel-color), 96px 336px var(--pixel-color), 120px 336px var(--pixel-color), 144px 336px var(--pixel-color), 168px 336px var(--pixel-color), 192px 336px var(--pixel-color), 216px 336px var(--pixel-color), 240px 336px var(--pixel-color), 264px 336px var(--pixel-color), 288px 336px var(--pixel-color), 312px 336px var(--pixel-color), 336px 336px var(--pixel-color), 360px 336px var(--pixel-color), 384px 336px var(--pixel-color), 408px 336px transparent, 432px 336px transparent, 456px 336px transparent, 480px 336px transparent, 504px 336px transparent, 528px 336px transparent, 552px 336px transparent, 0px 360px transparent, 24px 360px var(--pixel-color), 48px 360px var(--pixel-color), 72px 360px var(--pixel-color), 96px 360px var(--pixel-color), 120px 360px var(--pixel-color), 144px 360px var(--pixel-color), 168px 360px var(--pixel-color), 192px 360px var(--pixel-color), 216px 360px var(--pixel-color), 240px 360px var(--pixel-color), 264px 360px var(--pixel-color), 288px 360px var(--pixel-color), 312px 360px var(--pixel-color), 336px 360px var(--pixel-color), 360px 360px var(--pixel-color), 384px 360px var(--pixel-color), 408px 360px transparent, 432px 360px transparent, 456px 360px transparent, 480px 360px transparent, 504px 360px transparent, 528px 360px transparent, 552px 360px transparent, 0px 384px transparent, 24px 384px transparent, 48px 384px var(--pixel-color), 72px 384px var(--pixel-color), 96px 384px var(--pixel-color), 120px 384px var(--pixel-color), 144px 384px var(--pixel-color), 168px 384px var(--pixel-color), 192px 384px var(--pixel-color), 216px 384px var(--pixel-color), 240px 384px var(--pixel-color), 264px 384px var(--pixel-color), 288px 384px var(--pixel-color), 312px 384px var(--pixel-color), 336px 384px var(--pixel-color), 360px 384px var(--pixel-color), 384px 384px transparent, 408px 384px transparent, 432px 384px transparent, 456px 384px transparent, 480px 384px transparent, 504px 384px transparent, 528px 384px transparent, 552px 384px transparent, 0px 408px transparent, 24px 408px transparent, 48px 408px transparent, 72px 408px var(--pixel-color), 96px 408px var(--pixel-color), 120px 408px var(--pixel-color), 144px 408px var(--pixel-color), 168px 408px var(--pixel-color), 192px 408px var(--pixel-color), 216px 408px var(--pixel-color), 240px 408px var(--pixel-color), 264px 408px var(--pixel-color), 288px 408px var(--pixel-color), 312px 408px var(--pixel-color), 336px 408px var(--pixel-color), 360px 408px transparent, 384px 408px transparent, 408px 408px transparent, 432px 408px transparent, 456px 408px transparent, 480px 408px transparent, 504px 408px transparent, 528px 408px transparent, 552px 408px transparent, 0px 432px transparent, 24px 432px transparent, 48px 432px transparent, 72px 432px transparent, 96px 432px var(--pixel-color), 120px 432px var(--pixel-color), 144px 432px var(--pixel-color), 168px 432px var(--pixel-color), 192px 432px var(--pixel-color), 216px 432px var(--pixel-color), 240px 432px var(--pixel-color), 264px 432px var(--pixel-color), 288px 432px var(--pixel-color), 312px 432px var(--pixel-color), 336px 432px transparent, 360px 432px transparent, 384px 432px transparent, 408px 432px transparent, 432px 432px transparent, 456px 432px transparent, 480px 432px transparent, 504px 432px transparent, 528px 432px transparent, 552px 432px transparent, 0px 456px transparent, 24px 456px transparent, 48px 456px transparent, 72px 456px transparent, 96px 456px transparent, 120px 456px var(--pixel-color), 144px 456px var(--pixel-color), 168px 456px var(--pixel-color), 192px 456px var(--pixel-color), 216px 456px var(--pixel-color), 240px 456px var(--pixel-color), 264px 456px var(--pixel-color), 288px 456px var(--pixel-color), 312px 456px transparent, 336px 456px transparent, 360px 456px transparent, 384px 456px transparent, 408px 456px transparent, 432px 456px transparent, 456px 456px transparent, 480px 456px transparent, 504px 456px transparent, 528px 456px transparent, 552px 456px transparent, 0px 480px transparent, 24px 480px transparent, 48px 480px transparent, 72px 480px transparent, 96px 480px transparent, 120px 480px transparent, 144px 480px var(--pixel-color), 168px 480px var(--pixel-color), 192px 480px var(--pixel-color), 216px 480px transparent, 240px 480px transparent, 264px 480px var(--pixel-color), 288px 480px var(--pixel-color), 312px 480px transparent, 336px 480px transparent, 360px 480px transparent, 384px 480px transparent, 408px 480px transparent, 432px 480px transparent, 456px 480px transparent, 480px 480px transparent, 504px 480px transparent, 528px 480px transparent, 552px 480px transparent, 0px 504px transparent, 24px 504px transparent, 48px 504px transparent, 72px 504px transparent, 96px 504px transparent, 120px 504px transparent, 144px 504px transparent, 168px 504px var(--pixel-color), 192px 504px var(--pixel-color), 216px 504px var(--pixel-color), 240px 504px transparent, 264px 504px transparent, 288px 504px var(--pixel-color), 312px 504px transparent, 336px 504px transparent, 360px 504px transparent, 384px 504px transparent, 408px 504px transparent, 432px 504px transparent, 456px 504px transparent, 480px 504px transparent, 504px 504px transparent, 528px 504px transparent, 552px 504px transparent, 0px 528px transparent, 24px 528px transparent, 48px 528px transparent, 72px 528px transparent, 96px 528px transparent, 120px 528px transparent, 144px 528px transparent, 168px 528px transparent, 192px 528px transparent, 216px 528px transparent, 240px 528px transparent, 264px 528px transparent, 288px 528px var(--pixel-color), 312px 528px transparent, 336px 528px transparent, 360px 528px transparent, 384px 528px transparent, 408px 528px transparent, 432px 528px transparent, 456px 528px transparent, 480px 528px transparent, 504px 528px transparent, 528px 528px transparent, 552px 528px transparent, 0px 552px transparent, 24px 552px transparent, 48px 552px transparent, 72px 552px transparent, 96px 552px transparent, 120px 552px transparent, 144px 552px transparent, 168px 552px transparent, 192px 552px transparent, 216px 552px transparent, 240px 552px transparent, 264px 552px transparent, 288px 552px var(--pixel-color), 312px 552px var(--pixel-color), 336px 552px transparent, 360px 552px transparent, 384px 552px transparent, 408px 552px transparent, 432px 552px transparent, 456px 552px transparent, 480px 552px transparent, 504px 552px transparent, 528px 552px transparent, 552px 552px transparent;
  }
}

.lpi-horizontal-loader-container[b-gkw335un3q] {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.lpi-horizontal-loader[b-gkw335un3q] {
  display: block;
  --height-of-loader: 8px;
  --loader-color: #0071e2;
  width: 200px;
  height: var(--height-of-loader);
  border-radius: 30px;
  background-color: rgba(0,0,0,0.2);
  position: relative;
}

  .lpi-horizontal-loader[b-gkw335un3q]::before {
    content: "";
    position: absolute;
    background: var(--loader-color);
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    border-radius: 30px;
    animation: lpi-horizontal-moving-b-gkw335un3q 1s ease-in-out infinite;
  }

@keyframes lpi-horizontal-moving-b-gkw335un3q {
  50% {
    width: 100%;
  }

  100% {
    width: 0;
    right: 0;
    left: unset;
  }
}

.loading-spinner-container[b-l8e3tnp08n] {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.loading-spinner-spinner[b-l8e3tnp08n] {
  width: 56px;
  height: 56px;
  display: grid;
  border: 4px solid #0000;
  border-radius: 50%;
  border-right-color: #299fff;
  animation: loading-spinner-tri-b-l8e3tnp08n 1s infinite linear;
}

  .loading-spinner-spinner[b-l8e3tnp08n]::before,
  .loading-spinner-spinner[b-l8e3tnp08n]::after {
    content: "";
    grid-area: 1/1;
    margin: 2px;
    border: inherit;
    border-radius: 50%;
    animation: loading-spinner-tri-b-l8e3tnp08n 2s infinite;
  }

  .loading-spinner-spinner[b-l8e3tnp08n]::after {
    margin: 8px;
    animation-duration: 3s;
  }

@keyframes loading-spinner-tri-b-l8e3tnp08n {
  100% {
    transform: rotate(1turn);
  }
}

.loading-spinner-loader[b-l8e3tnp08n] {
  color: #4a4a4a;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: 25px;
  box-sizing: content-box;
  height: 40px;
  padding: 10px 10px;
  display: flex;
  border-radius: 8px;
}

.loading-spinner-words[b-l8e3tnp08n] {
  overflow: hidden;
}

.loading-spinner-word[b-l8e3tnp08n] {
  display: block;
  height: 100%;
  padding-left: 6px;
  color: #299fff;
  animation: loading-spinner-cycle-words-b-l8e3tnp08n 5s infinite;
}

.loading-spinner-word.single-word[b-l8e3tnp08n] {
  animation: none;
}

@keyframes loading-spinner-cycle-words-b-l8e3tnp08n {
  10% {
    transform: translateY(-105%);
  }

  25% {
    transform: translateY(-100%);
  }

  35% {
    transform: translateY(-205%);
  }

  50% {
    transform: translateY(-200%);
  }

  60% {
    transform: translateY(-305%);
  }

  75% {
    transform: translateY(-300%);
  }

  85% {
    transform: translateY(-405%);
  }

  100% {
    transform: translateY(-400%);
  }
}

@keyframes unsaved-modal-in-b-sprccb0rjc {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-10px);
  }

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

.animate-unsaved-modal-in[b-sprccb0rjc] {
  animation: unsaved-modal-in-b-sprccb0rjc 0.2s ease-out forwards;
}

@keyframes grid-loading-b-pb1jmy5hti {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(400%);
  }
}

/* Container query setup */
.cell-container[b-pb1jmy5hti] {
  container-type: inline-size;
  width: 100%;
  min-width: 0;
}

.cell-full[b-pb1jmy5hti] {
  display: none;
  min-width: 0;
}

.cell-compact[b-pb1jmy5hti] {
  display: block;
  min-width: 0;
}

/* Thresholds - add more as needed */
@container (min-width: 100px) {
  .cell-full-100[b-pb1jmy5hti] {
    display: block;
  }

  .cell-compact-100[b-pb1jmy5hti] {
    display: none;
  }
}

@container (min-width: 120px) {
  .cell-full-120[b-pb1jmy5hti] {
    display: block;
  }

  .cell-compact-120[b-pb1jmy5hti] {
    display: none;
  }
}

@container (min-width: 140px) {
  .cell-full-140[b-pb1jmy5hti] {
    display: block;
  }

  .cell-compact-140[b-pb1jmy5hti] {
    display: none;
  }
}

@container (min-width: 180px) {
  .cell-full-180[b-pb1jmy5hti] {
    display: block;
  }

  .cell-compact-180[b-pb1jmy5hti] {
    display: none;
  }
}

@container (min-width: 200px) {
  .cell-full-200[b-pb1jmy5hti] {
    display: block;
  }

  .cell-compact-200[b-pb1jmy5hti] {
    display: none;
  }
}

@container (min-width: 220px) {
  .cell-full-220[b-pb1jmy5hti] {
    display: block;
  }

  .cell-compact-220[b-pb1jmy5hti] {
    display: none;
  }
}


@container (min-width: 240px) {
  .cell-full-240[b-pb1jmy5hti] {
    display: block;
  }

  .cell-compact-240[b-pb1jmy5hti] {
    display: none;
  }
}


@container (min-width: 260px) {
  .cell-full-260[b-pb1jmy5hti] {
    display: block;
  }

  .cell-compact-260[b-pb1jmy5hti] {
    display: none;
  }
}

@container (min-width: 280px) {
  .cell-full-280[b-pb1jmy5hti] {
    display: block;
  }

  .cell-compact-280[b-pb1jmy5hti] {
    display: none;
  }
}

@container (min-width: 300px) {
  .cell-full-300[b-pb1jmy5hti] {
    display: block;
  }

  .cell-compact-300[b-pb1jmy5hti] {
    display: none;
  }
}

@keyframes dialog-fade-in-b-ypjpgif715 {
  from {
    opacity: 0;
    transform: scale(0.95);
  }

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

@keyframes dialog-fade-out-b-ypjpgif715 {
  from {
    opacity: 1;
    transform: scale(1);
  }

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

@keyframes backdrop-fade-in-b-ypjpgif715 {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes backdrop-fade-out-b-ypjpgif715 {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.dialog-animate-in[b-ypjpgif715] {
  animation: dialog-fade-in-b-ypjpgif715 0.2s ease-out forwards;
}

.dialog-animate-out[b-ypjpgif715] {
  animation: dialog-fade-out-b-ypjpgif715 0.15s ease-in forwards;
}

.backdrop-animate-in[b-ypjpgif715] {
  animation: backdrop-fade-in-b-ypjpgif715 0.2s ease-out forwards;
}

.backdrop-animate-out[b-ypjpgif715] {
  animation: backdrop-fade-out-b-ypjpgif715 0.15s ease-in forwards;
}

@keyframes dialog-fade-in-b-23ve7t2hg1 {
  from {
    opacity: 0;
    transform: scale(0.95);
  }

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

@keyframes dialog-fade-out-b-23ve7t2hg1 {
  from {
    opacity: 1;
    transform: scale(1);
  }

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

@keyframes backdrop-fade-in-b-23ve7t2hg1 {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes backdrop-fade-out-b-23ve7t2hg1 {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.dialog-animate-in[b-23ve7t2hg1] {
  animation: dialog-fade-in-b-23ve7t2hg1 0.2s ease-out forwards;
}

.dialog-animate-out[b-23ve7t2hg1] {
  animation: dialog-fade-out-b-23ve7t2hg1 0.15s ease-in forwards;
}

.backdrop-animate-in[b-23ve7t2hg1] {
  animation: backdrop-fade-in-b-23ve7t2hg1 0.2s ease-out forwards;
}

.backdrop-animate-out[b-23ve7t2hg1] {
  animation: backdrop-fade-out-b-23ve7t2hg1 0.15s ease-in forwards;
}

@keyframes toast-slide-in-b-olw4xb4l0r {
  from {
    opacity: 0;
    transform: translateX(100%);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes toast-shrink-b-olw4xb4l0r {
  from {
    width: 100%;
  }

  to {
    width: 0%;
  }
}

.toast-animate-slide-in[b-olw4xb4l0r] {
  animation: toast-slide-in-b-olw4xb4l0r 0.3s ease-out;
}

.toast-animate-shrink[b-olw4xb4l0r] {
  animation: toast-shrink-b-olw4xb4l0r 5s linear forwards;
}


.tour-overlay[b-iu44ipp2m7] {
  background-color: rgb(0 0 0 / 0.4);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  transition: clip-path 0.3s ease-out;
}

:global(.dark) .tour-overlay[b-iu44ipp2m7] {
  background-color: rgb(0 0 0 / 0.6);
}


.tour-arrow[b-iu44ipp2m7] {
  --tour-arrow-color: var(--arrow-color);
}

:global(.dark) .tour-arrow[b-iu44ipp2m7] {
  --tour-arrow-color: var(--arrow-color-dark);
}


.tour-svg-arrow[b-iu44ipp2m7] {
  stroke: var(--svg-arrow-color);
  transition: stroke 0.2s ease;
}

.tour-svg-arrow-fill[b-iu44ipp2m7] {
  fill: var(--svg-arrow-color);
  transition: fill 0.2s ease;
}

:global(.dark) .tour-svg-arrow[b-iu44ipp2m7] {
  stroke: var(--svg-arrow-color-dark);
}

:global(.dark) .tour-svg-arrow-fill[b-iu44ipp2m7] {
  fill: var(--svg-arrow-color-dark);
}

/* Arrow label box - bordered container */
.tour-arrow-label-box[b-iu44ipp2m7] {
  text-align: center;
  padding: 1rem 1.25rem;
  border: 2.5px solid var(--svg-arrow-color);
  border-radius: 0.75rem;
  background: transparent;
  color: var(--svg-arrow-color);
  max-width: 300px;
  min-width: 200px;
}

:global(.dark) .tour-arrow-label-box[b-iu44ipp2m7] {
  border-color: var(--svg-arrow-color-dark);
  background: transparent;
  color: var(--svg-arrow-color-dark);
}

/* Button inside arrow label */
.tour-arrow-button[b-iu44ipp2m7] {
  padding: 0.375rem 0.875rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 0.5rem;
  border: 2px solid var(--svg-arrow-color);
  background: rgb(from var(--svg-arrow-color) r g b / 50%);
  color: white;
  transition: opacity 0.15s ease;
}

.tour-arrow-button:hover[b-iu44ipp2m7] {
  opacity: 0.85;
}

:global(.dark) .tour-arrow-button[b-iu44ipp2m7] {
  background: var(--svg-arrow-color-dark);
}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes tour-fade-in-b-iu44ipp2m7 {
  from {
    opacity: 0;
    transform: scale(0.95);
  }

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

@keyframes tour-slide-in-b-iu44ipp2m7 {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes tour-draw-arrow-b-iu44ipp2m7 {
  from {
    stroke-dashoffset: 1000;
  }

  to {
    stroke-dashoffset: 0;
  }
}

.animate-fade-in[b-iu44ipp2m7] {
  animation: tour-fade-in-b-iu44ipp2m7 0.2s ease-out forwards;
}

.animate-slide-in[b-iu44ipp2m7] {
  animation: tour-slide-in-b-iu44ipp2m7 0.2s ease-out forwards;
}

/* Animated arrow drawing effect (optional - add class to svg path) */
.animate-draw[b-iu44ipp2m7] {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: tour-draw-arrow-b-iu44ipp2m7 0.6s ease-out forwards;
}

/* _content/LPI.Core.UI.Web/Components/DialogProvider.razor.rz.scp.css */
@keyframes dialog-fade-in-b-ypjpgif715 {
  from {
    opacity: 0;
    transform: scale(0.95);
  }

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

@keyframes dialog-fade-out-b-ypjpgif715 {
  from {
    opacity: 1;
    transform: scale(1);
  }

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

@keyframes backdrop-fade-in-b-ypjpgif715 {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes backdrop-fade-out-b-ypjpgif715 {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.dialog-animate-in[b-ypjpgif715] {
  animation: dialog-fade-in-b-ypjpgif715 0.2s ease-out forwards;
}

.dialog-animate-out[b-ypjpgif715] {
  animation: dialog-fade-out-b-ypjpgif715 0.15s ease-in forwards;
}

.backdrop-animate-in[b-ypjpgif715] {
  animation: backdrop-fade-in-b-ypjpgif715 0.2s ease-out forwards;
}

.backdrop-animate-out[b-ypjpgif715] {
  animation: backdrop-fade-out-b-ypjpgif715 0.15s ease-in forwards;
}
/* _content/LPI.Core.UI.Web/Components/Grid/DataGrid.razor.rz.scp.css */
@keyframes grid-loading-b-pb1jmy5hti {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(400%);
  }
}

/* Container query setup */
.cell-container[b-pb1jmy5hti] {
  container-type: inline-size;
  width: 100%;
  min-width: 0;
}

.cell-full[b-pb1jmy5hti] {
  display: none;
  min-width: 0;
}

.cell-compact[b-pb1jmy5hti] {
  display: block;
  min-width: 0;
}

/* Thresholds - add more as needed */
@container (min-width: 100px) {
  .cell-full-100[b-pb1jmy5hti] {
    display: block;
  }

  .cell-compact-100[b-pb1jmy5hti] {
    display: none;
  }
}

@container (min-width: 120px) {
  .cell-full-120[b-pb1jmy5hti] {
    display: block;
  }

  .cell-compact-120[b-pb1jmy5hti] {
    display: none;
  }
}

@container (min-width: 140px) {
  .cell-full-140[b-pb1jmy5hti] {
    display: block;
  }

  .cell-compact-140[b-pb1jmy5hti] {
    display: none;
  }
}

@container (min-width: 180px) {
  .cell-full-180[b-pb1jmy5hti] {
    display: block;
  }

  .cell-compact-180[b-pb1jmy5hti] {
    display: none;
  }
}

@container (min-width: 200px) {
  .cell-full-200[b-pb1jmy5hti] {
    display: block;
  }

  .cell-compact-200[b-pb1jmy5hti] {
    display: none;
  }
}

@container (min-width: 220px) {
  .cell-full-220[b-pb1jmy5hti] {
    display: block;
  }

  .cell-compact-220[b-pb1jmy5hti] {
    display: none;
  }
}


@container (min-width: 240px) {
  .cell-full-240[b-pb1jmy5hti] {
    display: block;
  }

  .cell-compact-240[b-pb1jmy5hti] {
    display: none;
  }
}


@container (min-width: 260px) {
  .cell-full-260[b-pb1jmy5hti] {
    display: block;
  }

  .cell-compact-260[b-pb1jmy5hti] {
    display: none;
  }
}

@container (min-width: 280px) {
  .cell-full-280[b-pb1jmy5hti] {
    display: block;
  }

  .cell-compact-280[b-pb1jmy5hti] {
    display: none;
  }
}

@container (min-width: 300px) {
  .cell-full-300[b-pb1jmy5hti] {
    display: block;
  }

  .cell-compact-300[b-pb1jmy5hti] {
    display: none;
  }
}
/* _content/LPI.Core.UI.Web/Components/Icons/UnsavedChangesPopup.razor.rz.scp.css */
@keyframes unsaved-modal-in-b-sprccb0rjc {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-10px);
  }

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

.animate-unsaved-modal-in[b-sprccb0rjc] {
  animation: unsaved-modal-in-b-sprccb0rjc 0.2s ease-out forwards;
}
/* _content/LPI.Core.UI.Web/Components/Loaders/LpiContentLoader.razor.rz.scp.css */
.loader-container[b-fyrpsvou2d] {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.spinner[b-fyrpsvou2d] {
  width: 80px;
  height: 80px;
  --clr: rgb(0, 113, 226);
  --clr-alpha: rgba(0, 113, 226, 0.1);
  animation: spinner-b-fyrpsvou2d 2s infinite linear;
  transform-style: preserve-3d;
}

.spinner > div[b-fyrpsvou2d] {
  background-color: var(--clr-alpha);
  height: 100%;
  position: absolute;
  width: 100%;
  border: 5px solid var(--clr);
}

.spinner div:nth-of-type(1)[b-fyrpsvou2d] {
  transform: translateZ(-40px) rotateY(180deg);
}

.spinner div:nth-of-type(2)[b-fyrpsvou2d] {
  transform: rotateY(-270deg) translateX(50%);
  transform-origin: top right;
}

.spinner div:nth-of-type(3)[b-fyrpsvou2d] {
  transform: rotateY(270deg) translateX(-50%);
  transform-origin: center left;
}

.spinner div:nth-of-type(4)[b-fyrpsvou2d] {
  transform: rotateX(90deg) translateY(-50%);
  transform-origin: top center;
}

.spinner div:nth-of-type(5)[b-fyrpsvou2d] {
  transform: rotateX(-90deg) translateY(50%);
  transform-origin: bottom center;
}

.spinner div:nth-of-type(6)[b-fyrpsvou2d] {
  transform: translateZ(40px);
}

@keyframes spinner-b-fyrpsvou2d {
  0% {
    transform: rotate(0deg) rotateX(0deg) rotateY(0deg);
  }

  50% {
    transform: rotate(180deg) rotateX(180deg) rotateY(180deg);
  }

  100% {
    transform: rotate(360deg) rotateX(360deg) rotateY(360deg);
  }
}
/* _content/LPI.Core.UI.Web/Components/Loaders/LpiDinoLoader.razor.rz.scp.css */
.pixel-loader-container[b-mmegsqixnt] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.pixel-loader[b-mmegsqixnt] {
  --zoom: 0.6;
  position: relative;
  --wh: calc(var(--wh-number) * 1px);
  --wh-n: calc(var(--wh-number) * -1px);
  width: calc(var(--wh-number) * var(--wh));
  height: calc(var(--wh-number) * var(--wh));
  --color: #fff;
  --pixel-color: #535353;
  --blur: 0;
  filter: drop-shadow(var(--wh-n) 0 var(--blur) var(--color)) drop-shadow(0 var(--wh-n) var(--blur) var(--color)) drop-shadow(var(--wh) 0 var(--blur) var(--color)) drop-shadow(0 var(--wh) var(--blur) var(--color));
  image-rendering: pixelated;
  zoom: var(--zoom);
  animation: mover-b-mmegsqixnt 0.3s linear infinite;
}

.pixel-loader .pixel[b-mmegsqixnt] {
  width: var(--wh);
  height: var(--wh);
  box-shadow: var(--shadow);
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .pixel-loader[b-mmegsqixnt] {
    --color: #1a1a1a;
    --pixel-color: #a0a0a0;
  }

  .pixel-loader-text[b-mmegsqixnt] {
    color: #e0e0e0;
  }

  .pixel-loader-word[b-mmegsqixnt] {
    color: #60b8ff;
  }
}

/* Text styling */
.pixel-loader-text[b-mmegsqixnt] {
  color: #4a4a4a;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: 25px;
  box-sizing: content-box;
  height: 40px;
  padding: 10px 10px;
  display: flex;
  border-radius: 8px;
}

.pixel-loader-prefix[b-mmegsqixnt] {
  display: block;
}

.pixel-loader-words[b-mmegsqixnt] {
  overflow: hidden;
  height: 100%;
}

.pixel-loader-word[b-mmegsqixnt] {
  display: block;
  height: 100%;
  padding-left: 6px;
  color: #299fff;
  animation: pixel-loader-cycle-words-b-mmegsqixnt 5s infinite;
}

@keyframes pixel-loader-cycle-words-b-mmegsqixnt {
  10% {
    transform: translateY(-105%);
  }

  25% {
    transform: translateY(-100%);
  }

  35% {
    transform: translateY(-205%);
  }

  50% {
    transform: translateY(-200%);
  }

  60% {
    transform: translateY(-305%);
  }

  75% {
    transform: translateY(-300%);
  }

  85% {
    transform: translateY(-405%);
  }

  100% {
    transform: translateY(-400%);
  }
}

@keyframes mover-b-mmegsqixnt {
  0%, 100% {
    --shadow: 0px 0px transparent, 24px 0px transparent, 48px 0px transparent, 72px 0px transparent, 96px 0px transparent, 120px 0px transparent, 144px 0px transparent, 168px 0px transparent, 192px 0px transparent, 216px 0px transparent, 240px 0px transparent, 264px 0px transparent, 288px 0px transparent, 312px 0px var(--pixel-color), 336px 0px var(--pixel-color), 360px 0px var(--pixel-color), 384px 0px var(--pixel-color), 408px 0px var(--pixel-color), 432px 0px var(--pixel-color), 456px 0px var(--pixel-color), 480px 0px var(--pixel-color), 504px 0px var(--pixel-color), 528px 0px var(--pixel-color), 552px 0px transparent, 0px 24px transparent, 24px 24px transparent, 48px 24px transparent, 72px 24px transparent, 96px 24px transparent, 120px 24px transparent, 144px 24px transparent, 168px 24px transparent, 192px 24px transparent, 216px 24px transparent, 240px 24px transparent, 264px 24px transparent, 288px 24px var(--pixel-color), 312px 24px var(--pixel-color), 336px 24px var(--pixel-color), 360px 24px var(--pixel-color), 384px 24px var(--pixel-color), 408px 24px var(--pixel-color), 432px 24px var(--pixel-color), 456px 24px var(--pixel-color), 480px 24px var(--pixel-color), 504px 24px var(--pixel-color), 528px 24px var(--pixel-color), 552px 24px var(--pixel-color), 0px 48px transparent, 24px 48px transparent, 48px 48px transparent, 72px 48px transparent, 96px 48px transparent, 120px 48px transparent, 144px 48px transparent, 168px 48px transparent, 192px 48px transparent, 216px 48px transparent, 240px 48px transparent, 264px 48px transparent, 288px 48px var(--pixel-color), 312px 48px var(--pixel-color), 336px 48px transparent, 360px 48px transparent, 384px 48px var(--pixel-color), 408px 48px var(--pixel-color), 432px 48px var(--pixel-color), 456px 48px var(--pixel-color), 480px 48px var(--pixel-color), 504px 48px var(--pixel-color), 528px 48px var(--pixel-color), 552px 48px var(--pixel-color), 0px 72px transparent, 24px 72px transparent, 48px 72px transparent, 72px 72px transparent, 96px 72px transparent, 120px 72px transparent, 144px 72px transparent, 168px 72px transparent, 192px 72px transparent, 216px 72px transparent, 240px 72px transparent, 264px 72px transparent, 288px 72px var(--pixel-color), 312px 72px var(--pixel-color), 336px 72px transparent, 360px 72px transparent, 384px 72px var(--pixel-color), 408px 72px var(--pixel-color), 432px 72px var(--pixel-color), 456px 72px var(--pixel-color), 480px 72px var(--pixel-color), 504px 72px var(--pixel-color), 528px 72px var(--pixel-color), 552px 72px var(--pixel-color), 0px 96px transparent, 24px 96px transparent, 48px 96px transparent, 72px 96px transparent, 96px 96px transparent, 120px 96px transparent, 144px 96px transparent, 168px 96px transparent, 192px 96px transparent, 216px 96px transparent, 240px 96px transparent, 264px 96px transparent, 288px 96px var(--pixel-color), 312px 96px var(--pixel-color), 336px 96px var(--pixel-color), 360px 96px var(--pixel-color), 384px 96px var(--pixel-color), 408px 96px var(--pixel-color), 432px 96px var(--pixel-color), 456px 96px var(--pixel-color), 480px 96px var(--pixel-color), 504px 96px var(--pixel-color), 528px 96px var(--pixel-color), 552px 96px var(--pixel-color), 0px 120px transparent, 24px 120px transparent, 48px 120px transparent, 72px 120px transparent, 96px 120px transparent, 120px 120px transparent, 144px 120px transparent, 168px 120px transparent, 192px 120px transparent, 216px 120px transparent, 240px 120px transparent, 264px 120px transparent, 288px 120px var(--pixel-color), 312px 120px var(--pixel-color), 336px 120px var(--pixel-color), 360px 120px var(--pixel-color), 384px 120px var(--pixel-color), 408px 120px var(--pixel-color), 432px 120px var(--pixel-color), 456px 120px var(--pixel-color), 480px 120px var(--pixel-color), 504px 120px var(--pixel-color), 528px 120px var(--pixel-color), 552px 120px var(--pixel-color), 0px 144px transparent, 24px 144px transparent, 48px 144px transparent, 72px 144px transparent, 96px 144px transparent, 120px 144px transparent, 144px 144px transparent, 168px 144px transparent, 192px 144px transparent, 216px 144px transparent, 240px 144px transparent, 264px 144px transparent, 288px 144px var(--pixel-color), 312px 144px var(--pixel-color), 336px 144px var(--pixel-color), 360px 144px var(--pixel-color), 384px 144px var(--pixel-color), 408px 144px var(--pixel-color), 432px 144px transparent, 456px 144px transparent, 480px 144px transparent, 504px 144px transparent, 528px 144px transparent, 552px 144px transparent, 0px 168px transparent, 24px 168px transparent, 48px 168px transparent, 72px 168px transparent, 96px 168px transparent, 120px 168px transparent, 144px 168px transparent, 168px 168px transparent, 192px 168px transparent, 216px 168px transparent, 240px 168px transparent, 264px 168px transparent, 288px 168px var(--pixel-color), 312px 168px var(--pixel-color), 336px 168px var(--pixel-color), 360px 168px var(--pixel-color), 384px 168px var(--pixel-color), 408px 168px var(--pixel-color), 432px 168px transparent, 456px 168px transparent, 480px 168px transparent, 504px 168px transparent, 528px 168px transparent, 552px 168px transparent, 0px 192px transparent, 24px 192px transparent, 48px 192px transparent, 72px 192px transparent, 96px 192px transparent, 120px 192px transparent, 144px 192px transparent, 168px 192px transparent, 192px 192px transparent, 216px 192px transparent, 240px 192px transparent, 264px 192px transparent, 288px 192px var(--pixel-color), 312px 192px var(--pixel-color), 336px 192px var(--pixel-color), 360px 192px var(--pixel-color), 384px 192px var(--pixel-color), 408px 192px var(--pixel-color), 432px 192px var(--pixel-color), 456px 192px var(--pixel-color), 480px 192px var(--pixel-color), 504px 192px var(--pixel-color), 528px 192px transparent, 552px 192px transparent, 0px 216px var(--pixel-color), 24px 216px transparent, 48px 216px transparent, 72px 216px transparent, 96px 216px transparent, 120px 216px transparent, 144px 216px transparent, 168px 216px transparent, 192px 216px transparent, 216px 216px transparent, 240px 216px var(--pixel-color), 264px 216px var(--pixel-color), 288px 216px var(--pixel-color), 312px 216px var(--pixel-color), 336px 216px var(--pixel-color), 360px 216px var(--pixel-color), 384px 216px var(--pixel-color), 408px 216px transparent, 432px 216px transparent, 456px 216px transparent, 480px 216px transparent, 504px 216px transparent, 528px 216px transparent, 552px 216px transparent, 0px 240px var(--pixel-color), 24px 240px transparent, 48px 240px transparent, 72px 240px transparent, 96px 240px transparent, 120px 240px transparent, 144px 240px transparent, 168px 240px transparent, 192px 240px var(--pixel-color), 216px 240px var(--pixel-color), 240px 240px var(--pixel-color), 264px 240px var(--pixel-color), 288px 240px var(--pixel-color), 312px 240px var(--pixel-color), 336px 240px var(--pixel-color), 360px 240px var(--pixel-color), 384px 240px var(--pixel-color), 408px 240px transparent, 432px 240px transparent, 456px 240px transparent, 480px 240px transparent, 504px 240px transparent, 528px 240px transparent, 552px 240px transparent, 0px 264px var(--pixel-color), 24px 264px var(--pixel-color), 48px 264px transparent, 72px 264px transparent, 96px 264px transparent, 120px 264px transparent, 144px 264px transparent, 168px 264px var(--pixel-color), 192px 264px var(--pixel-color), 216px 264px var(--pixel-color), 240px 264px var(--pixel-color), 264px 264px var(--pixel-color), 288px 264px var(--pixel-color), 312px 264px var(--pixel-color), 336px 264px var(--pixel-color), 360px 264px var(--pixel-color), 384px 264px var(--pixel-color), 408px 264px var(--pixel-color), 432px 264px var(--pixel-color), 456px 264px transparent, 480px 264px transparent, 504px 264px transparent, 528px 264px transparent, 552px 264px transparent, 0px 288px var(--pixel-color), 24px 288px var(--pixel-color), 48px 288px var(--pixel-color), 72px 288px transparent, 96px 288px transparent, 120px 288px transparent, 144px 288px var(--pixel-color), 168px 288px var(--pixel-color), 192px 288px var(--pixel-color), 216px 288px var(--pixel-color), 240px 288px var(--pixel-color), 264px 288px var(--pixel-color), 288px 288px var(--pixel-color), 312px 288px var(--pixel-color), 336px 288px var(--pixel-color), 360px 288px var(--pixel-color), 384px 288px var(--pixel-color), 408px 288px transparent, 432px 288px var(--pixel-color), 456px 288px transparent, 480px 288px transparent, 504px 288px transparent, 528px 288px transparent, 552px 288px transparent, 0px 312px var(--pixel-color), 24px 312px var(--pixel-color), 48px 312px var(--pixel-color), 72px 312px var(--pixel-color), 96px 312px var(--pixel-color), 120px 312px var(--pixel-color), 144px 312px var(--pixel-color), 168px 312px var(--pixel-color), 192px 312px var(--pixel-color), 216px 312px var(--pixel-color), 240px 312px var(--pixel-color), 264px 312px var(--pixel-color), 288px 312px var(--pixel-color), 312px 312px var(--pixel-color), 336px 312px var(--pixel-color), 360px 312px var(--pixel-color), 384px 312px var(--pixel-color), 408px 312px transparent, 432px 312px transparent, 456px 312px transparent, 480px 312px transparent, 504px 312px transparent, 528px 312px transparent, 552px 312px transparent, 0px 336px var(--pixel-color), 24px 336px var(--pixel-color), 48px 336px var(--pixel-color), 72px 336px var(--pixel-color), 96px 336px var(--pixel-color), 120px 336px var(--pixel-color), 144px 336px var(--pixel-color), 168px 336px var(--pixel-color), 192px 336px var(--pixel-color), 216px 336px var(--pixel-color), 240px 336px var(--pixel-color), 264px 336px var(--pixel-color), 288px 336px var(--pixel-color), 312px 336px var(--pixel-color), 336px 336px var(--pixel-color), 360px 336px var(--pixel-color), 384px 336px var(--pixel-color), 408px 336px transparent, 432px 336px transparent, 456px 336px transparent, 480px 336px transparent, 504px 336px transparent, 528px 336px transparent, 552px 336px transparent, 0px 360px transparent, 24px 360px var(--pixel-color), 48px 360px var(--pixel-color), 72px 360px var(--pixel-color), 96px 360px var(--pixel-color), 120px 360px var(--pixel-color), 144px 360px var(--pixel-color), 168px 360px var(--pixel-color), 192px 360px var(--pixel-color), 216px 360px var(--pixel-color), 240px 360px var(--pixel-color), 264px 360px var(--pixel-color), 288px 360px var(--pixel-color), 312px 360px var(--pixel-color), 336px 360px var(--pixel-color), 360px 360px var(--pixel-color), 384px 360px var(--pixel-color), 408px 360px transparent, 432px 360px transparent, 456px 360px transparent, 480px 360px transparent, 504px 360px transparent, 528px 360px transparent, 552px 360px transparent, 0px 384px transparent, 24px 384px transparent, 48px 384px var(--pixel-color), 72px 384px var(--pixel-color), 96px 384px var(--pixel-color), 120px 384px var(--pixel-color), 144px 384px var(--pixel-color), 168px 384px var(--pixel-color), 192px 384px var(--pixel-color), 216px 384px var(--pixel-color), 240px 384px var(--pixel-color), 264px 384px var(--pixel-color), 288px 384px var(--pixel-color), 312px 384px var(--pixel-color), 336px 384px var(--pixel-color), 360px 384px var(--pixel-color), 384px 384px transparent, 408px 384px transparent, 432px 384px transparent, 456px 384px transparent, 480px 384px transparent, 504px 384px transparent, 528px 384px transparent, 552px 384px transparent, 0px 408px transparent, 24px 408px transparent, 48px 408px transparent, 72px 408px var(--pixel-color), 96px 408px var(--pixel-color), 120px 408px var(--pixel-color), 144px 408px var(--pixel-color), 168px 408px var(--pixel-color), 192px 408px var(--pixel-color), 216px 408px var(--pixel-color), 240px 408px var(--pixel-color), 264px 408px var(--pixel-color), 288px 408px var(--pixel-color), 312px 408px var(--pixel-color), 336px 408px var(--pixel-color), 360px 408px transparent, 384px 408px transparent, 408px 408px transparent, 432px 408px transparent, 456px 408px transparent, 480px 408px transparent, 504px 408px transparent, 528px 408px transparent, 552px 408px transparent, 0px 432px transparent, 24px 432px transparent, 48px 432px transparent, 72px 432px transparent, 96px 432px var(--pixel-color), 120px 432px var(--pixel-color), 144px 432px var(--pixel-color), 168px 432px var(--pixel-color), 192px 432px var(--pixel-color), 216px 432px var(--pixel-color), 240px 432px var(--pixel-color), 264px 432px var(--pixel-color), 288px 432px var(--pixel-color), 312px 432px var(--pixel-color), 336px 432px transparent, 360px 432px transparent, 384px 432px transparent, 408px 432px transparent, 432px 432px transparent, 456px 432px transparent, 480px 432px transparent, 504px 432px transparent, 528px 432px transparent, 552px 432px transparent, 0px 456px transparent, 24px 456px transparent, 48px 456px transparent, 72px 456px transparent, 96px 456px transparent, 120px 456px var(--pixel-color), 144px 456px var(--pixel-color), 168px 456px var(--pixel-color), 192px 456px var(--pixel-color), 216px 456px var(--pixel-color), 240px 456px var(--pixel-color), 264px 456px var(--pixel-color), 288px 456px var(--pixel-color), 312px 456px transparent, 336px 456px transparent, 360px 456px transparent, 384px 456px transparent, 408px 456px transparent, 432px 456px transparent, 456px 456px transparent, 480px 456px transparent, 504px 456px transparent, 528px 456px transparent, 552px 456px transparent, 0px 480px transparent, 24px 480px transparent, 48px 480px transparent, 72px 480px transparent, 96px 480px transparent, 120px 480px transparent, 144px 480px var(--pixel-color), 168px 480px var(--pixel-color), 192px 480px var(--pixel-color), 216px 480px transparent, 240px 480px transparent, 264px 480px var(--pixel-color), 288px 480px var(--pixel-color), 312px 480px transparent, 336px 480px transparent, 360px 480px transparent, 384px 480px transparent, 408px 480px transparent, 432px 480px transparent, 456px 480px transparent, 480px 480px transparent, 504px 480px transparent, 528px 480px transparent, 552px 480px transparent, 0px 504px transparent, 24px 504px transparent, 48px 504px transparent, 72px 504px transparent, 96px 504px transparent, 120px 504px transparent, 144px 504px var(--pixel-color), 168px 504px var(--pixel-color), 192px 504px transparent, 216px 504px transparent, 240px 504px transparent, 264px 504px transparent, 288px 504px var(--pixel-color), 312px 504px transparent, 336px 504px transparent, 360px 504px transparent, 384px 504px transparent, 408px 504px transparent, 432px 504px transparent, 456px 504px transparent, 480px 504px transparent, 504px 504px transparent, 528px 504px transparent, 552px 504px transparent, 0px 528px transparent, 24px 528px transparent, 48px 528px transparent, 72px 528px transparent, 96px 528px transparent, 120px 528px transparent, 144px 528px var(--pixel-color), 168px 528px transparent, 192px 528px transparent, 216px 528px transparent, 240px 528px transparent, 264px 528px transparent, 288px 528px var(--pixel-color), 312px 528px transparent, 336px 528px transparent, 360px 528px transparent, 384px 528px transparent, 408px 528px transparent, 432px 528px transparent, 456px 528px transparent, 480px 528px transparent, 504px 528px transparent, 528px 528px transparent, 552px 528px transparent, 0px 552px transparent, 24px 552px transparent, 48px 552px transparent, 72px 552px transparent, 96px 552px transparent, 120px 552px transparent, 144px 552px var(--pixel-color), 168px 552px var(--pixel-color), 192px 552px transparent, 216px 552px transparent, 240px 552px transparent, 264px 552px transparent, 288px 552px var(--pixel-color), 312px 552px var(--pixel-color), 336px 552px transparent, 360px 552px transparent, 384px 552px transparent, 408px 552px transparent, 432px 552px transparent, 456px 552px transparent, 480px 552px transparent, 504px 552px transparent, 528px 552px transparent, 552px 552px transparent;
  }

  33% {
    --shadow: 0px 0px transparent, 24px 0px transparent, 48px 0px transparent, 72px 0px transparent, 96px 0px transparent, 120px 0px transparent, 144px 0px transparent, 168px 0px transparent, 192px 0px transparent, 216px 0px transparent, 240px 0px transparent, 264px 0px transparent, 288px 0px transparent, 312px 0px var(--pixel-color), 336px 0px var(--pixel-color), 360px 0px var(--pixel-color), 384px 0px var(--pixel-color), 408px 0px var(--pixel-color), 432px 0px var(--pixel-color), 456px 0px var(--pixel-color), 480px 0px var(--pixel-color), 504px 0px var(--pixel-color), 528px 0px var(--pixel-color), 552px 0px transparent, 0px 24px transparent, 24px 24px transparent, 48px 24px transparent, 72px 24px transparent, 96px 24px transparent, 120px 24px transparent, 144px 24px transparent, 168px 24px transparent, 192px 24px transparent, 216px 24px transparent, 240px 24px transparent, 264px 24px transparent, 288px 24px var(--pixel-color), 312px 24px var(--pixel-color), 336px 24px var(--pixel-color), 360px 24px var(--pixel-color), 384px 24px var(--pixel-color), 408px 24px var(--pixel-color), 432px 24px var(--pixel-color), 456px 24px var(--pixel-color), 480px 24px var(--pixel-color), 504px 24px var(--pixel-color), 528px 24px var(--pixel-color), 552px 24px var(--pixel-color), 0px 48px transparent, 24px 48px transparent, 48px 48px transparent, 72px 48px transparent, 96px 48px transparent, 120px 48px transparent, 144px 48px transparent, 168px 48px transparent, 192px 48px transparent, 216px 48px transparent, 240px 48px transparent, 264px 48px transparent, 288px 48px var(--pixel-color), 312px 48px var(--pixel-color), 336px 48px transparent, 360px 48px transparent, 384px 48px var(--pixel-color), 408px 48px var(--pixel-color), 432px 48px var(--pixel-color), 456px 48px var(--pixel-color), 480px 48px var(--pixel-color), 504px 48px var(--pixel-color), 528px 48px var(--pixel-color), 552px 48px var(--pixel-color), 0px 72px transparent, 24px 72px transparent, 48px 72px transparent, 72px 72px transparent, 96px 72px transparent, 120px 72px transparent, 144px 72px transparent, 168px 72px transparent, 192px 72px transparent, 216px 72px transparent, 240px 72px transparent, 264px 72px transparent, 288px 72px var(--pixel-color), 312px 72px var(--pixel-color), 336px 72px transparent, 360px 72px transparent, 384px 72px var(--pixel-color), 408px 72px var(--pixel-color), 432px 72px var(--pixel-color), 456px 72px var(--pixel-color), 480px 72px var(--pixel-color), 504px 72px var(--pixel-color), 528px 72px var(--pixel-color), 552px 72px var(--pixel-color), 0px 96px transparent, 24px 96px transparent, 48px 96px transparent, 72px 96px transparent, 96px 96px transparent, 120px 96px transparent, 144px 96px transparent, 168px 96px transparent, 192px 96px transparent, 216px 96px transparent, 240px 96px transparent, 264px 96px transparent, 288px 96px var(--pixel-color), 312px 96px var(--pixel-color), 336px 96px var(--pixel-color), 360px 96px var(--pixel-color), 384px 96px var(--pixel-color), 408px 96px var(--pixel-color), 432px 96px var(--pixel-color), 456px 96px var(--pixel-color), 480px 96px var(--pixel-color), 504px 96px var(--pixel-color), 528px 96px var(--pixel-color), 552px 96px var(--pixel-color), 0px 120px transparent, 24px 120px transparent, 48px 120px transparent, 72px 120px transparent, 96px 120px transparent, 120px 120px transparent, 144px 120px transparent, 168px 120px transparent, 192px 120px transparent, 216px 120px transparent, 240px 120px transparent, 264px 120px transparent, 288px 120px var(--pixel-color), 312px 120px var(--pixel-color), 336px 120px var(--pixel-color), 360px 120px var(--pixel-color), 384px 120px var(--pixel-color), 408px 120px var(--pixel-color), 432px 120px var(--pixel-color), 456px 120px var(--pixel-color), 480px 120px var(--pixel-color), 504px 120px var(--pixel-color), 528px 120px var(--pixel-color), 552px 120px var(--pixel-color), 0px 144px transparent, 24px 144px transparent, 48px 144px transparent, 72px 144px transparent, 96px 144px transparent, 120px 144px transparent, 144px 144px transparent, 168px 144px transparent, 192px 144px transparent, 216px 144px transparent, 240px 144px transparent, 264px 144px transparent, 288px 144px var(--pixel-color), 312px 144px var(--pixel-color), 336px 144px var(--pixel-color), 360px 144px var(--pixel-color), 384px 144px var(--pixel-color), 408px 144px var(--pixel-color), 432px 144px transparent, 456px 144px transparent, 480px 144px transparent, 504px 144px transparent, 528px 144px transparent, 552px 144px transparent, 0px 168px transparent, 24px 168px transparent, 48px 168px transparent, 72px 168px transparent, 96px 168px transparent, 120px 168px transparent, 144px 168px transparent, 168px 168px transparent, 192px 168px transparent, 216px 168px transparent, 240px 168px transparent, 264px 168px transparent, 288px 168px var(--pixel-color), 312px 168px var(--pixel-color), 336px 168px var(--pixel-color), 360px 168px var(--pixel-color), 384px 168px var(--pixel-color), 408px 168px var(--pixel-color), 432px 168px transparent, 456px 168px transparent, 480px 168px transparent, 504px 168px transparent, 528px 168px transparent, 552px 168px transparent, 0px 192px transparent, 24px 192px transparent, 48px 192px transparent, 72px 192px transparent, 96px 192px transparent, 120px 192px transparent, 144px 192px transparent, 168px 192px transparent, 192px 192px transparent, 216px 192px transparent, 240px 192px transparent, 264px 192px transparent, 288px 192px var(--pixel-color), 312px 192px var(--pixel-color), 336px 192px var(--pixel-color), 360px 192px var(--pixel-color), 384px 192px var(--pixel-color), 408px 192px var(--pixel-color), 432px 192px var(--pixel-color), 456px 192px var(--pixel-color), 480px 192px var(--pixel-color), 504px 192px var(--pixel-color), 528px 192px transparent, 552px 192px transparent, 0px 216px var(--pixel-color), 24px 216px transparent, 48px 216px transparent, 72px 216px transparent, 96px 216px transparent, 120px 216px transparent, 144px 216px transparent, 168px 216px transparent, 192px 216px transparent, 216px 216px transparent, 240px 216px var(--pixel-color), 264px 216px var(--pixel-color), 288px 216px var(--pixel-color), 312px 216px var(--pixel-color), 336px 216px var(--pixel-color), 360px 216px var(--pixel-color), 384px 216px var(--pixel-color), 408px 216px transparent, 432px 216px transparent, 456px 216px transparent, 480px 216px transparent, 504px 216px transparent, 528px 216px transparent, 552px 216px transparent, 0px 240px var(--pixel-color), 24px 240px transparent, 48px 240px transparent, 72px 240px transparent, 96px 240px transparent, 120px 240px transparent, 144px 240px transparent, 168px 240px transparent, 192px 240px var(--pixel-color), 216px 240px var(--pixel-color), 240px 240px var(--pixel-color), 264px 240px var(--pixel-color), 288px 240px var(--pixel-color), 312px 240px var(--pixel-color), 336px 240px var(--pixel-color), 360px 240px var(--pixel-color), 384px 240px var(--pixel-color), 408px 240px transparent, 432px 240px transparent, 456px 240px transparent, 480px 240px transparent, 504px 240px transparent, 528px 240px transparent, 552px 240px transparent, 0px 264px var(--pixel-color), 24px 264px var(--pixel-color), 48px 264px transparent, 72px 264px transparent, 96px 264px transparent, 120px 264px transparent, 144px 264px transparent, 168px 264px var(--pixel-color), 192px 264px var(--pixel-color), 216px 264px var(--pixel-color), 240px 264px var(--pixel-color), 264px 264px var(--pixel-color), 288px 264px var(--pixel-color), 312px 264px var(--pixel-color), 336px 264px var(--pixel-color), 360px 264px var(--pixel-color), 384px 264px var(--pixel-color), 408px 264px var(--pixel-color), 432px 264px var(--pixel-color), 456px 264px transparent, 480px 264px transparent, 504px 264px transparent, 528px 264px transparent, 552px 264px transparent, 0px 288px var(--pixel-color), 24px 288px var(--pixel-color), 48px 288px var(--pixel-color), 72px 288px transparent, 96px 288px transparent, 120px 288px transparent, 144px 288px var(--pixel-color), 168px 288px var(--pixel-color), 192px 288px var(--pixel-color), 216px 288px var(--pixel-color), 240px 288px var(--pixel-color), 264px 288px var(--pixel-color), 288px 288px var(--pixel-color), 312px 288px var(--pixel-color), 336px 288px var(--pixel-color), 360px 288px var(--pixel-color), 384px 288px var(--pixel-color), 408px 288px transparent, 432px 288px var(--pixel-color), 456px 288px transparent, 480px 288px transparent, 504px 288px transparent, 528px 288px transparent, 552px 288px transparent, 0px 312px var(--pixel-color), 24px 312px var(--pixel-color), 48px 312px var(--pixel-color), 72px 312px var(--pixel-color), 96px 312px var(--pixel-color), 120px 312px var(--pixel-color), 144px 312px var(--pixel-color), 168px 312px var(--pixel-color), 192px 312px var(--pixel-color), 216px 312px var(--pixel-color), 240px 312px var(--pixel-color), 264px 312px var(--pixel-color), 288px 312px var(--pixel-color), 312px 312px var(--pixel-color), 336px 312px var(--pixel-color), 360px 312px var(--pixel-color), 384px 312px var(--pixel-color), 408px 312px transparent, 432px 312px transparent, 456px 312px transparent, 480px 312px transparent, 504px 312px transparent, 528px 312px transparent, 552px 312px transparent, 0px 336px var(--pixel-color), 24px 336px var(--pixel-color), 48px 336px var(--pixel-color), 72px 336px var(--pixel-color), 96px 336px var(--pixel-color), 120px 336px var(--pixel-color), 144px 336px var(--pixel-color), 168px 336px var(--pixel-color), 192px 336px var(--pixel-color), 216px 336px var(--pixel-color), 240px 336px var(--pixel-color), 264px 336px var(--pixel-color), 288px 336px var(--pixel-color), 312px 336px var(--pixel-color), 336px 336px var(--pixel-color), 360px 336px var(--pixel-color), 384px 336px var(--pixel-color), 408px 336px transparent, 432px 336px transparent, 456px 336px transparent, 480px 336px transparent, 504px 336px transparent, 528px 336px transparent, 552px 336px transparent, 0px 360px transparent, 24px 360px var(--pixel-color), 48px 360px var(--pixel-color), 72px 360px var(--pixel-color), 96px 360px var(--pixel-color), 120px 360px var(--pixel-color), 144px 360px var(--pixel-color), 168px 360px var(--pixel-color), 192px 360px var(--pixel-color), 216px 360px var(--pixel-color), 240px 360px var(--pixel-color), 264px 360px var(--pixel-color), 288px 360px var(--pixel-color), 312px 360px var(--pixel-color), 336px 360px var(--pixel-color), 360px 360px var(--pixel-color), 384px 360px var(--pixel-color), 408px 360px transparent, 432px 360px transparent, 456px 360px transparent, 480px 360px transparent, 504px 360px transparent, 528px 360px transparent, 552px 360px transparent, 0px 384px transparent, 24px 384px transparent, 48px 384px var(--pixel-color), 72px 384px var(--pixel-color), 96px 384px var(--pixel-color), 120px 384px var(--pixel-color), 144px 384px var(--pixel-color), 168px 384px var(--pixel-color), 192px 384px var(--pixel-color), 216px 384px var(--pixel-color), 240px 384px var(--pixel-color), 264px 384px var(--pixel-color), 288px 384px var(--pixel-color), 312px 384px var(--pixel-color), 336px 384px var(--pixel-color), 360px 384px var(--pixel-color), 384px 384px transparent, 408px 384px transparent, 432px 384px transparent, 456px 384px transparent, 480px 384px transparent, 504px 384px transparent, 528px 384px transparent, 552px 384px transparent, 0px 408px transparent, 24px 408px transparent, 48px 408px transparent, 72px 408px var(--pixel-color), 96px 408px var(--pixel-color), 120px 408px var(--pixel-color), 144px 408px var(--pixel-color), 168px 408px var(--pixel-color), 192px 408px var(--pixel-color), 216px 408px var(--pixel-color), 240px 408px var(--pixel-color), 264px 408px var(--pixel-color), 288px 408px var(--pixel-color), 312px 408px var(--pixel-color), 336px 408px var(--pixel-color), 360px 408px transparent, 384px 408px transparent, 408px 408px transparent, 432px 408px transparent, 456px 408px transparent, 480px 408px transparent, 504px 408px transparent, 528px 408px transparent, 552px 408px transparent, 0px 432px transparent, 24px 432px transparent, 48px 432px transparent, 72px 432px transparent, 96px 432px var(--pixel-color), 120px 432px var(--pixel-color), 144px 432px var(--pixel-color), 168px 432px var(--pixel-color), 192px 432px var(--pixel-color), 216px 432px var(--pixel-color), 240px 432px var(--pixel-color), 264px 432px var(--pixel-color), 288px 432px var(--pixel-color), 312px 432px var(--pixel-color), 336px 432px transparent, 360px 432px transparent, 384px 432px transparent, 408px 432px transparent, 432px 432px transparent, 456px 432px transparent, 480px 432px transparent, 504px 432px transparent, 528px 432px transparent, 552px 432px transparent, 0px 456px transparent, 24px 456px transparent, 48px 456px transparent, 72px 456px transparent, 96px 456px transparent, 120px 456px var(--pixel-color), 144px 456px var(--pixel-color), 168px 456px var(--pixel-color), 192px 456px var(--pixel-color), 216px 456px var(--pixel-color), 240px 456px var(--pixel-color), 264px 456px var(--pixel-color), 288px 456px var(--pixel-color), 312px 456px transparent, 336px 456px transparent, 360px 456px transparent, 384px 456px transparent, 408px 456px transparent, 432px 456px transparent, 456px 456px transparent, 480px 456px transparent, 504px 456px transparent, 528px 456px transparent, 552px 456px transparent, 0px 480px transparent, 24px 480px transparent, 48px 480px transparent, 72px 480px transparent, 96px 480px transparent, 120px 480px transparent, 144px 480px var(--pixel-color), 168px 480px var(--pixel-color), 192px 480px var(--pixel-color), 216px 480px transparent, 240px 480px transparent, 264px 480px var(--pixel-color), 288px 480px var(--pixel-color), 312px 480px var(--pixel-color), 336px 480px transparent, 360px 480px transparent, 384px 480px transparent, 408px 480px transparent, 432px 480px transparent, 456px 480px transparent, 480px 480px transparent, 504px 480px transparent, 528px 480px transparent, 552px 480px transparent, 0px 504px transparent, 24px 504px transparent, 48px 504px transparent, 72px 504px transparent, 96px 504px transparent, 120px 504px transparent, 144px 504px var(--pixel-color), 168px 504px var(--pixel-color), 192px 504px transparent, 216px 504px transparent, 240px 504px transparent, 264px 504px transparent, 288px 504px transparent, 312px 504px transparent, 336px 504px transparent, 360px 504px transparent, 384px 504px transparent, 408px 504px transparent, 432px 504px transparent, 456px 504px transparent, 480px 504px transparent, 504px 504px transparent, 528px 504px transparent, 552px 504px transparent, 0px 528px transparent, 24px 528px transparent, 48px 528px transparent, 72px 528px transparent, 96px 528px transparent, 120px 528px transparent, 144px 528px var(--pixel-color), 168px 528px transparent, 192px 528px transparent, 216px 528px transparent, 240px 528px transparent, 264px 528px transparent, 288px 528px transparent, 312px 528px transparent, 336px 528px transparent, 360px 528px transparent, 384px 528px transparent, 408px 528px transparent, 432px 528px transparent, 456px 528px transparent, 480px 528px transparent, 504px 528px transparent, 528px 528px transparent, 552px 528px transparent, 0px 552px transparent, 24px 552px transparent, 48px 552px transparent, 72px 552px transparent, 96px 552px transparent, 120px 552px transparent, 144px 552px var(--pixel-color), 168px 552px var(--pixel-color), 192px 552px transparent, 216px 552px transparent, 240px 552px transparent, 264px 552px transparent, 288px 552px transparent, 312px 552px transparent, 336px 552px transparent, 360px 552px transparent, 384px 552px transparent, 408px 552px transparent, 432px 552px transparent, 456px 552px transparent, 480px 552px transparent, 504px 552px transparent, 528px 552px transparent, 552px 552px transparent;
  }

  66% {
    --shadow: 0px 0px transparent, 24px 0px transparent, 48px 0px transparent, 72px 0px transparent, 96px 0px transparent, 120px 0px transparent, 144px 0px transparent, 168px 0px transparent, 192px 0px transparent, 216px 0px transparent, 240px 0px transparent, 264px 0px transparent, 288px 0px transparent, 312px 0px var(--pixel-color), 336px 0px var(--pixel-color), 360px 0px var(--pixel-color), 384px 0px var(--pixel-color), 408px 0px var(--pixel-color), 432px 0px var(--pixel-color), 456px 0px var(--pixel-color), 480px 0px var(--pixel-color), 504px 0px var(--pixel-color), 528px 0px var(--pixel-color), 552px 0px transparent, 0px 24px transparent, 24px 24px transparent, 48px 24px transparent, 72px 24px transparent, 96px 24px transparent, 120px 24px transparent, 144px 24px transparent, 168px 24px transparent, 192px 24px transparent, 216px 24px transparent, 240px 24px transparent, 264px 24px transparent, 288px 24px var(--pixel-color), 312px 24px var(--pixel-color), 336px 24px var(--pixel-color), 360px 24px var(--pixel-color), 384px 24px var(--pixel-color), 408px 24px var(--pixel-color), 432px 24px var(--pixel-color), 456px 24px var(--pixel-color), 480px 24px var(--pixel-color), 504px 24px var(--pixel-color), 528px 24px var(--pixel-color), 552px 24px var(--pixel-color), 0px 48px transparent, 24px 48px transparent, 48px 48px transparent, 72px 48px transparent, 96px 48px transparent, 120px 48px transparent, 144px 48px transparent, 168px 48px transparent, 192px 48px transparent, 216px 48px transparent, 240px 48px transparent, 264px 48px transparent, 288px 48px var(--pixel-color), 312px 48px var(--pixel-color), 336px 48px transparent, 360px 48px transparent, 384px 48px var(--pixel-color), 408px 48px var(--pixel-color), 432px 48px var(--pixel-color), 456px 48px var(--pixel-color), 480px 48px var(--pixel-color), 504px 48px var(--pixel-color), 528px 48px var(--pixel-color), 552px 48px var(--pixel-color), 0px 72px transparent, 24px 72px transparent, 48px 72px transparent, 72px 72px transparent, 96px 72px transparent, 120px 72px transparent, 144px 72px transparent, 168px 72px transparent, 192px 72px transparent, 216px 72px transparent, 240px 72px transparent, 264px 72px transparent, 288px 72px var(--pixel-color), 312px 72px var(--pixel-color), 336px 72px transparent, 360px 72px transparent, 384px 72px var(--pixel-color), 408px 72px var(--pixel-color), 432px 72px var(--pixel-color), 456px 72px var(--pixel-color), 480px 72px var(--pixel-color), 504px 72px var(--pixel-color), 528px 72px var(--pixel-color), 552px 72px var(--pixel-color), 0px 96px transparent, 24px 96px transparent, 48px 96px transparent, 72px 96px transparent, 96px 96px transparent, 120px 96px transparent, 144px 96px transparent, 168px 96px transparent, 192px 96px transparent, 216px 96px transparent, 240px 96px transparent, 264px 96px transparent, 288px 96px var(--pixel-color), 312px 96px var(--pixel-color), 336px 96px var(--pixel-color), 360px 96px var(--pixel-color), 384px 96px var(--pixel-color), 408px 96px var(--pixel-color), 432px 96px var(--pixel-color), 456px 96px var(--pixel-color), 480px 96px var(--pixel-color), 504px 96px var(--pixel-color), 528px 96px var(--pixel-color), 552px 96px var(--pixel-color), 0px 120px transparent, 24px 120px transparent, 48px 120px transparent, 72px 120px transparent, 96px 120px transparent, 120px 120px transparent, 144px 120px transparent, 168px 120px transparent, 192px 120px transparent, 216px 120px transparent, 240px 120px transparent, 264px 120px transparent, 288px 120px var(--pixel-color), 312px 120px var(--pixel-color), 336px 120px var(--pixel-color), 360px 120px var(--pixel-color), 384px 120px var(--pixel-color), 408px 120px var(--pixel-color), 432px 120px var(--pixel-color), 456px 120px var(--pixel-color), 480px 120px var(--pixel-color), 504px 120px var(--pixel-color), 528px 120px var(--pixel-color), 552px 120px var(--pixel-color), 0px 144px transparent, 24px 144px transparent, 48px 144px transparent, 72px 144px transparent, 96px 144px transparent, 120px 144px transparent, 144px 144px transparent, 168px 144px transparent, 192px 144px transparent, 216px 144px transparent, 240px 144px transparent, 264px 144px transparent, 288px 144px var(--pixel-color), 312px 144px var(--pixel-color), 336px 144px var(--pixel-color), 360px 144px var(--pixel-color), 384px 144px var(--pixel-color), 408px 144px var(--pixel-color), 432px 144px transparent, 456px 144px transparent, 480px 144px transparent, 504px 144px transparent, 528px 144px transparent, 552px 144px transparent, 0px 168px transparent, 24px 168px transparent, 48px 168px transparent, 72px 168px transparent, 96px 168px transparent, 120px 168px transparent, 144px 168px transparent, 168px 168px transparent, 192px 168px transparent, 216px 168px transparent, 240px 168px transparent, 264px 168px transparent, 288px 168px var(--pixel-color), 312px 168px var(--pixel-color), 336px 168px var(--pixel-color), 360px 168px var(--pixel-color), 384px 168px var(--pixel-color), 408px 168px var(--pixel-color), 432px 168px transparent, 456px 168px transparent, 480px 168px transparent, 504px 168px transparent, 528px 168px transparent, 552px 168px transparent, 0px 192px transparent, 24px 192px transparent, 48px 192px transparent, 72px 192px transparent, 96px 192px transparent, 120px 192px transparent, 144px 192px transparent, 168px 192px transparent, 192px 192px transparent, 216px 192px transparent, 240px 192px transparent, 264px 192px transparent, 288px 192px var(--pixel-color), 312px 192px var(--pixel-color), 336px 192px var(--pixel-color), 360px 192px var(--pixel-color), 384px 192px var(--pixel-color), 408px 192px var(--pixel-color), 432px 192px var(--pixel-color), 456px 192px var(--pixel-color), 480px 192px var(--pixel-color), 504px 192px var(--pixel-color), 528px 192px transparent, 552px 192px transparent, 0px 216px var(--pixel-color), 24px 216px transparent, 48px 216px transparent, 72px 216px transparent, 96px 216px transparent, 120px 216px transparent, 144px 216px transparent, 168px 216px transparent, 192px 216px transparent, 216px 216px transparent, 240px 216px var(--pixel-color), 264px 216px var(--pixel-color), 288px 216px var(--pixel-color), 312px 216px var(--pixel-color), 336px 216px var(--pixel-color), 360px 216px var(--pixel-color), 384px 216px var(--pixel-color), 408px 216px transparent, 432px 216px transparent, 456px 216px transparent, 480px 216px transparent, 504px 216px transparent, 528px 216px transparent, 552px 216px transparent, 0px 240px var(--pixel-color), 24px 240px transparent, 48px 240px transparent, 72px 240px transparent, 96px 240px transparent, 120px 240px transparent, 144px 240px transparent, 168px 240px transparent, 192px 240px var(--pixel-color), 216px 240px var(--pixel-color), 240px 240px var(--pixel-color), 264px 240px var(--pixel-color), 288px 240px var(--pixel-color), 312px 240px var(--pixel-color), 336px 240px var(--pixel-color), 360px 240px var(--pixel-color), 384px 240px var(--pixel-color), 408px 240px transparent, 432px 240px transparent, 456px 240px transparent, 480px 240px transparent, 504px 240px transparent, 528px 240px transparent, 552px 240px transparent, 0px 264px var(--pixel-color), 24px 264px var(--pixel-color), 48px 264px transparent, 72px 264px transparent, 96px 264px transparent, 120px 264px transparent, 144px 264px transparent, 168px 264px var(--pixel-color), 192px 264px var(--pixel-color), 216px 264px var(--pixel-color), 240px 264px var(--pixel-color), 264px 264px var(--pixel-color), 288px 264px var(--pixel-color), 312px 264px var(--pixel-color), 336px 264px var(--pixel-color), 360px 264px var(--pixel-color), 384px 264px var(--pixel-color), 408px 264px var(--pixel-color), 432px 264px var(--pixel-color), 456px 264px transparent, 480px 264px transparent, 504px 264px transparent, 528px 264px transparent, 552px 264px transparent, 0px 288px var(--pixel-color), 24px 288px var(--pixel-color), 48px 288px var(--pixel-color), 72px 288px transparent, 96px 288px transparent, 120px 288px transparent, 144px 288px var(--pixel-color), 168px 288px var(--pixel-color), 192px 288px var(--pixel-color), 216px 288px var(--pixel-color), 240px 288px var(--pixel-color), 264px 288px var(--pixel-color), 288px 288px var(--pixel-color), 312px 288px var(--pixel-color), 336px 288px var(--pixel-color), 360px 288px var(--pixel-color), 384px 288px var(--pixel-color), 408px 288px transparent, 432px 288px var(--pixel-color), 456px 288px transparent, 480px 288px transparent, 504px 288px transparent, 528px 288px transparent, 552px 288px transparent, 0px 312px var(--pixel-color), 24px 312px var(--pixel-color), 48px 312px var(--pixel-color), 72px 312px var(--pixel-color), 96px 312px var(--pixel-color), 120px 312px var(--pixel-color), 144px 312px var(--pixel-color), 168px 312px var(--pixel-color), 192px 312px var(--pixel-color), 216px 312px var(--pixel-color), 240px 312px var(--pixel-color), 264px 312px var(--pixel-color), 288px 312px var(--pixel-color), 312px 312px var(--pixel-color), 336px 312px var(--pixel-color), 360px 312px var(--pixel-color), 384px 312px var(--pixel-color), 408px 312px transparent, 432px 312px transparent, 456px 312px transparent, 480px 312px transparent, 504px 312px transparent, 528px 312px transparent, 552px 312px transparent, 0px 336px var(--pixel-color), 24px 336px var(--pixel-color), 48px 336px var(--pixel-color), 72px 336px var(--pixel-color), 96px 336px var(--pixel-color), 120px 336px var(--pixel-color), 144px 336px var(--pixel-color), 168px 336px var(--pixel-color), 192px 336px var(--pixel-color), 216px 336px var(--pixel-color), 240px 336px var(--pixel-color), 264px 336px var(--pixel-color), 288px 336px var(--pixel-color), 312px 336px var(--pixel-color), 336px 336px var(--pixel-color), 360px 336px var(--pixel-color), 384px 336px var(--pixel-color), 408px 336px transparent, 432px 336px transparent, 456px 336px transparent, 480px 336px transparent, 504px 336px transparent, 528px 336px transparent, 552px 336px transparent, 0px 360px transparent, 24px 360px var(--pixel-color), 48px 360px var(--pixel-color), 72px 360px var(--pixel-color), 96px 360px var(--pixel-color), 120px 360px var(--pixel-color), 144px 360px var(--pixel-color), 168px 360px var(--pixel-color), 192px 360px var(--pixel-color), 216px 360px var(--pixel-color), 240px 360px var(--pixel-color), 264px 360px var(--pixel-color), 288px 360px var(--pixel-color), 312px 360px var(--pixel-color), 336px 360px var(--pixel-color), 360px 360px var(--pixel-color), 384px 360px var(--pixel-color), 408px 360px transparent, 432px 360px transparent, 456px 360px transparent, 480px 360px transparent, 504px 360px transparent, 528px 360px transparent, 552px 360px transparent, 0px 384px transparent, 24px 384px transparent, 48px 384px var(--pixel-color), 72px 384px var(--pixel-color), 96px 384px var(--pixel-color), 120px 384px var(--pixel-color), 144px 384px var(--pixel-color), 168px 384px var(--pixel-color), 192px 384px var(--pixel-color), 216px 384px var(--pixel-color), 240px 384px var(--pixel-color), 264px 384px var(--pixel-color), 288px 384px var(--pixel-color), 312px 384px var(--pixel-color), 336px 384px var(--pixel-color), 360px 384px var(--pixel-color), 384px 384px transparent, 408px 384px transparent, 432px 384px transparent, 456px 384px transparent, 480px 384px transparent, 504px 384px transparent, 528px 384px transparent, 552px 384px transparent, 0px 408px transparent, 24px 408px transparent, 48px 408px transparent, 72px 408px var(--pixel-color), 96px 408px var(--pixel-color), 120px 408px var(--pixel-color), 144px 408px var(--pixel-color), 168px 408px var(--pixel-color), 192px 408px var(--pixel-color), 216px 408px var(--pixel-color), 240px 408px var(--pixel-color), 264px 408px var(--pixel-color), 288px 408px var(--pixel-color), 312px 408px var(--pixel-color), 336px 408px var(--pixel-color), 360px 408px transparent, 384px 408px transparent, 408px 408px transparent, 432px 408px transparent, 456px 408px transparent, 480px 408px transparent, 504px 408px transparent, 528px 408px transparent, 552px 408px transparent, 0px 432px transparent, 24px 432px transparent, 48px 432px transparent, 72px 432px transparent, 96px 432px var(--pixel-color), 120px 432px var(--pixel-color), 144px 432px var(--pixel-color), 168px 432px var(--pixel-color), 192px 432px var(--pixel-color), 216px 432px var(--pixel-color), 240px 432px var(--pixel-color), 264px 432px var(--pixel-color), 288px 432px var(--pixel-color), 312px 432px var(--pixel-color), 336px 432px transparent, 360px 432px transparent, 384px 432px transparent, 408px 432px transparent, 432px 432px transparent, 456px 432px transparent, 480px 432px transparent, 504px 432px transparent, 528px 432px transparent, 552px 432px transparent, 0px 456px transparent, 24px 456px transparent, 48px 456px transparent, 72px 456px transparent, 96px 456px transparent, 120px 456px var(--pixel-color), 144px 456px var(--pixel-color), 168px 456px var(--pixel-color), 192px 456px var(--pixel-color), 216px 456px var(--pixel-color), 240px 456px var(--pixel-color), 264px 456px var(--pixel-color), 288px 456px var(--pixel-color), 312px 456px transparent, 336px 456px transparent, 360px 456px transparent, 384px 456px transparent, 408px 456px transparent, 432px 456px transparent, 456px 456px transparent, 480px 456px transparent, 504px 456px transparent, 528px 456px transparent, 552px 456px transparent, 0px 480px transparent, 24px 480px transparent, 48px 480px transparent, 72px 480px transparent, 96px 480px transparent, 120px 480px transparent, 144px 480px var(--pixel-color), 168px 480px var(--pixel-color), 192px 480px var(--pixel-color), 216px 480px transparent, 240px 480px transparent, 264px 480px var(--pixel-color), 288px 480px var(--pixel-color), 312px 480px transparent, 336px 480px transparent, 360px 480px transparent, 384px 480px transparent, 408px 480px transparent, 432px 480px transparent, 456px 480px transparent, 480px 480px transparent, 504px 480px transparent, 528px 480px transparent, 552px 480px transparent, 0px 504px transparent, 24px 504px transparent, 48px 504px transparent, 72px 504px transparent, 96px 504px transparent, 120px 504px transparent, 144px 504px transparent, 168px 504px var(--pixel-color), 192px 504px var(--pixel-color), 216px 504px var(--pixel-color), 240px 504px transparent, 264px 504px transparent, 288px 504px var(--pixel-color), 312px 504px transparent, 336px 504px transparent, 360px 504px transparent, 384px 504px transparent, 408px 504px transparent, 432px 504px transparent, 456px 504px transparent, 480px 504px transparent, 504px 504px transparent, 528px 504px transparent, 552px 504px transparent, 0px 528px transparent, 24px 528px transparent, 48px 528px transparent, 72px 528px transparent, 96px 528px transparent, 120px 528px transparent, 144px 528px transparent, 168px 528px transparent, 192px 528px transparent, 216px 528px transparent, 240px 528px transparent, 264px 528px transparent, 288px 528px var(--pixel-color), 312px 528px transparent, 336px 528px transparent, 360px 528px transparent, 384px 528px transparent, 408px 528px transparent, 432px 528px transparent, 456px 528px transparent, 480px 528px transparent, 504px 528px transparent, 528px 528px transparent, 552px 528px transparent, 0px 552px transparent, 24px 552px transparent, 48px 552px transparent, 72px 552px transparent, 96px 552px transparent, 120px 552px transparent, 144px 552px transparent, 168px 552px transparent, 192px 552px transparent, 216px 552px transparent, 240px 552px transparent, 264px 552px transparent, 288px 552px var(--pixel-color), 312px 552px var(--pixel-color), 336px 552px transparent, 360px 552px transparent, 384px 552px transparent, 408px 552px transparent, 432px 552px transparent, 456px 552px transparent, 480px 552px transparent, 504px 552px transparent, 528px 552px transparent, 552px 552px transparent;
  }
}
/* _content/LPI.Core.UI.Web/Components/Loaders/LpiHorizontalLoader.razor.rz.scp.css */
.lpi-horizontal-loader-container[b-gkw335un3q] {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.lpi-horizontal-loader[b-gkw335un3q] {
  display: block;
  --height-of-loader: 8px;
  --loader-color: #0071e2;
  width: 200px;
  height: var(--height-of-loader);
  border-radius: 30px;
  background-color: rgba(0,0,0,0.2);
  position: relative;
}

  .lpi-horizontal-loader[b-gkw335un3q]::before {
    content: "";
    position: absolute;
    background: var(--loader-color);
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    border-radius: 30px;
    animation: lpi-horizontal-moving-b-gkw335un3q 1s ease-in-out infinite;
  }

@keyframes lpi-horizontal-moving-b-gkw335un3q {
  50% {
    width: 100%;
  }

  100% {
    width: 0;
    right: 0;
    left: unset;
  }
}
/* _content/LPI.Core.UI.Web/Components/Loaders/LpiLoadingSpinner.razor.rz.scp.css */
.loading-spinner-container[b-l8e3tnp08n] {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.loading-spinner-spinner[b-l8e3tnp08n] {
  width: 56px;
  height: 56px;
  display: grid;
  border: 4px solid #0000;
  border-radius: 50%;
  border-right-color: #299fff;
  animation: loading-spinner-tri-b-l8e3tnp08n 1s infinite linear;
}

  .loading-spinner-spinner[b-l8e3tnp08n]::before,
  .loading-spinner-spinner[b-l8e3tnp08n]::after {
    content: "";
    grid-area: 1/1;
    margin: 2px;
    border: inherit;
    border-radius: 50%;
    animation: loading-spinner-tri-b-l8e3tnp08n 2s infinite;
  }

  .loading-spinner-spinner[b-l8e3tnp08n]::after {
    margin: 8px;
    animation-duration: 3s;
  }

@keyframes loading-spinner-tri-b-l8e3tnp08n {
  100% {
    transform: rotate(1turn);
  }
}

.loading-spinner-loader[b-l8e3tnp08n] {
  color: #4a4a4a;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: 25px;
  box-sizing: content-box;
  height: 40px;
  padding: 10px 10px;
  display: flex;
  border-radius: 8px;
}

.loading-spinner-words[b-l8e3tnp08n] {
  overflow: hidden;
}

.loading-spinner-word[b-l8e3tnp08n] {
  display: block;
  height: 100%;
  padding-left: 6px;
  color: #299fff;
  animation: loading-spinner-cycle-words-b-l8e3tnp08n 5s infinite;
}

.loading-spinner-word.single-word[b-l8e3tnp08n] {
  animation: none;
}

@keyframes loading-spinner-cycle-words-b-l8e3tnp08n {
  10% {
    transform: translateY(-105%);
  }

  25% {
    transform: translateY(-100%);
  }

  35% {
    transform: translateY(-205%);
  }

  50% {
    transform: translateY(-200%);
  }

  60% {
    transform: translateY(-305%);
  }

  75% {
    transform: translateY(-300%);
  }

  85% {
    transform: translateY(-405%);
  }

  100% {
    transform: translateY(-400%);
  }
}
/* _content/LPI.Core.UI.Web/Components/Page/LpiToolbar.razor.rz.scp.css */
/* _content/LPI.Core.UI.Web/Components/Page/SaveBar.razor.rz.scp.css */
@keyframes savebar-slide-up-b-3hznx0ta46 {
  from {
    transform: translateY(100%);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.savebar-animate-slide-up[b-3hznx0ta46] {
  animation: savebar-slide-up-b-3hznx0ta46 0.2s ease-out;
}
/* _content/LPI.Core.UI.Web/Components/Panels/SlidingPanel.razor.rz.scp.css */
/* _content/LPI.Core.UI.Web/Components/RateExperienceProvider.razor.rz.scp.css */
@keyframes dialog-fade-in-b-23ve7t2hg1 {
  from {
    opacity: 0;
    transform: scale(0.95);
  }

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

@keyframes dialog-fade-out-b-23ve7t2hg1 {
  from {
    opacity: 1;
    transform: scale(1);
  }

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

@keyframes backdrop-fade-in-b-23ve7t2hg1 {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes backdrop-fade-out-b-23ve7t2hg1 {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.dialog-animate-in[b-23ve7t2hg1] {
  animation: dialog-fade-in-b-23ve7t2hg1 0.2s ease-out forwards;
}

.dialog-animate-out[b-23ve7t2hg1] {
  animation: dialog-fade-out-b-23ve7t2hg1 0.15s ease-in forwards;
}

.backdrop-animate-in[b-23ve7t2hg1] {
  animation: backdrop-fade-in-b-23ve7t2hg1 0.2s ease-out forwards;
}

.backdrop-animate-out[b-23ve7t2hg1] {
  animation: backdrop-fade-out-b-23ve7t2hg1 0.15s ease-in forwards;
}
/* _content/LPI.Core.UI.Web/Components/ToastProvider.razor.rz.scp.css */
@keyframes toast-slide-in-b-olw4xb4l0r {
  from {
    opacity: 0;
    transform: translateX(100%);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes toast-shrink-b-olw4xb4l0r {
  from {
    width: 100%;
  }

  to {
    width: 0%;
  }
}

.toast-animate-slide-in[b-olw4xb4l0r] {
  animation: toast-slide-in-b-olw4xb4l0r 0.3s ease-out;
}

.toast-animate-shrink[b-olw4xb4l0r] {
  animation: toast-shrink-b-olw4xb4l0r 5s linear forwards;
}
/* _content/LPI.Core.UI.Web/Components/TourProvider.razor.rz.scp.css */

.tour-overlay[b-iu44ipp2m7] {
  background-color: rgb(0 0 0 / 0.4);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  transition: clip-path 0.3s ease-out;
}

:global(.dark) .tour-overlay[b-iu44ipp2m7] {
  background-color: rgb(0 0 0 / 0.6);
}


.tour-arrow[b-iu44ipp2m7] {
  --tour-arrow-color: var(--arrow-color);
}

:global(.dark) .tour-arrow[b-iu44ipp2m7] {
  --tour-arrow-color: var(--arrow-color-dark);
}


.tour-svg-arrow[b-iu44ipp2m7] {
  stroke: var(--svg-arrow-color);
  transition: stroke 0.2s ease;
}

.tour-svg-arrow-fill[b-iu44ipp2m7] {
  fill: var(--svg-arrow-color);
  transition: fill 0.2s ease;
}

:global(.dark) .tour-svg-arrow[b-iu44ipp2m7] {
  stroke: var(--svg-arrow-color-dark);
}

:global(.dark) .tour-svg-arrow-fill[b-iu44ipp2m7] {
  fill: var(--svg-arrow-color-dark);
}

/* Arrow label box - bordered container */
.tour-arrow-label-box[b-iu44ipp2m7] {
  text-align: center;
  padding: 1rem 1.25rem;
  border: 2.5px solid var(--svg-arrow-color);
  border-radius: 0.75rem;
  background: transparent;
  color: var(--svg-arrow-color);
  max-width: 300px;
  min-width: 200px;
}

:global(.dark) .tour-arrow-label-box[b-iu44ipp2m7] {
  border-color: var(--svg-arrow-color-dark);
  background: transparent;
  color: var(--svg-arrow-color-dark);
}

/* Button inside arrow label */
.tour-arrow-button[b-iu44ipp2m7] {
  padding: 0.375rem 0.875rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 0.5rem;
  border: 2px solid var(--svg-arrow-color);
  background: rgb(from var(--svg-arrow-color) r g b / 50%);
  color: white;
  transition: opacity 0.15s ease;
}

.tour-arrow-button:hover[b-iu44ipp2m7] {
  opacity: 0.85;
}

:global(.dark) .tour-arrow-button[b-iu44ipp2m7] {
  background: var(--svg-arrow-color-dark);
}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes tour-fade-in-b-iu44ipp2m7 {
  from {
    opacity: 0;
    transform: scale(0.95);
  }

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

@keyframes tour-slide-in-b-iu44ipp2m7 {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes tour-draw-arrow-b-iu44ipp2m7 {
  from {
    stroke-dashoffset: 1000;
  }

  to {
    stroke-dashoffset: 0;
  }
}

.animate-fade-in[b-iu44ipp2m7] {
  animation: tour-fade-in-b-iu44ipp2m7 0.2s ease-out forwards;
}

.animate-slide-in[b-iu44ipp2m7] {
  animation: tour-slide-in-b-iu44ipp2m7 0.2s ease-out forwards;
}

/* Animated arrow drawing effect (optional - add class to svg path) */
.animate-draw[b-iu44ipp2m7] {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: tour-draw-arrow-b-iu44ipp2m7 0.6s ease-out forwards;
}



@keyframes savebar-slide-up {
  from {
    transform: translateY(100%);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.savebar-animate-slide-up {
  animation: savebar-slide-up 0.2s ease-out;
}

.loader-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.spinner {
  width: 80px;
  height: 80px;
  --clr: rgb(0, 113, 226);
  --clr-alpha: rgba(0, 113, 226, 0.1);
  animation: spinner 2s infinite linear;
  transform-style: preserve-3d;
}

  .spinner > div {
    background-color: var(--clr-alpha);
    height: 100%;
    position: absolute;
    width: 100%;
    border: 5px solid var(--clr);
  }

  .spinner div:nth-of-type(1) {
    transform: translateZ(-40px) rotateY(180deg);
  }

  .spinner div:nth-of-type(2) {
    transform: rotateY(-270deg) translateX(50%);
    transform-origin: top right;
  }

  .spinner div:nth-of-type(3) {
    transform: rotateY(270deg) translateX(-50%);
    transform-origin: center left;
  }

  .spinner div:nth-of-type(4) {
    transform: rotateX(90deg) translateY(-50%);
    transform-origin: top center;
  }

  .spinner div:nth-of-type(5) {
    transform: rotateX(-90deg) translateY(50%);
    transform-origin: bottom center;
  }

  .spinner div:nth-of-type(6) {
    transform: translateZ(40px);
  }

@keyframes spinner {
  0% {
    transform: rotate(0deg) rotateX(0deg) rotateY(0deg);
  }

  50% {
    transform: rotate(180deg) rotateX(180deg) rotateY(180deg);
  }

  100% {
    transform: rotate(360deg) rotateX(360deg) rotateY(360deg);
  }
}

.pixel-loader-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.pixel-loader {
  --zoom: 0.6;
  position: relative;
  --wh: calc(var(--wh-number) * 1px);
  --wh-n: calc(var(--wh-number) * -1px);
  width: calc(var(--wh-number) * var(--wh));
  height: calc(var(--wh-number) * var(--wh));
  --color: #fff;
  --pixel-color: #535353;
  --blur: 0;
  filter: drop-shadow(var(--wh-n) 0 var(--blur) var(--color)) drop-shadow(0 var(--wh-n) var(--blur) var(--color)) drop-shadow(var(--wh) 0 var(--blur) var(--color)) drop-shadow(0 var(--wh) var(--blur) var(--color));
  image-rendering: pixelated;
  zoom: var(--zoom);
  animation: mover 0.3s linear infinite;
}

  .pixel-loader .pixel {
    width: var(--wh);
    height: var(--wh);
    box-shadow: var(--shadow);
  }

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .pixel-loader {
    --color: #1a1a1a;
    --pixel-color: #a0a0a0;
  }

  .pixel-loader-text {
    color: #e0e0e0;
  }

  .pixel-loader-word {
    color: #60b8ff;
  }
}

/* Text styling */
.pixel-loader-text {
  color: #4a4a4a;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: 25px;
  box-sizing: content-box;
  height: 40px;
  padding: 10px 10px;
  display: flex;
  border-radius: 8px;
}

.pixel-loader-prefix {
  display: block;
}

.pixel-loader-words {
  overflow: hidden;
  height: 100%;
}

.pixel-loader-word {
  display: block;
  height: 100%;
  padding-left: 6px;
  color: #299fff;
  animation: pixel-loader-cycle-words 5s infinite;
}

@keyframes pixel-loader-cycle-words {
  10% {
    transform: translateY(-105%);
  }

  25% {
    transform: translateY(-100%);
  }

  35% {
    transform: translateY(-205%);
  }

  50% {
    transform: translateY(-200%);
  }

  60% {
    transform: translateY(-305%);
  }

  75% {
    transform: translateY(-300%);
  }

  85% {
    transform: translateY(-405%);
  }

  100% {
    transform: translateY(-400%);
  }
}

@keyframes mover {
  0%, 100% {
    --shadow: 0px 0px transparent, 24px 0px transparent, 48px 0px transparent, 72px 0px transparent, 96px 0px transparent, 120px 0px transparent, 144px 0px transparent, 168px 0px transparent, 192px 0px transparent, 216px 0px transparent, 240px 0px transparent, 264px 0px transparent, 288px 0px transparent, 312px 0px var(--pixel-color), 336px 0px var(--pixel-color), 360px 0px var(--pixel-color), 384px 0px var(--pixel-color), 408px 0px var(--pixel-color), 432px 0px var(--pixel-color), 456px 0px var(--pixel-color), 480px 0px var(--pixel-color), 504px 0px var(--pixel-color), 528px 0px var(--pixel-color), 552px 0px transparent, 0px 24px transparent, 24px 24px transparent, 48px 24px transparent, 72px 24px transparent, 96px 24px transparent, 120px 24px transparent, 144px 24px transparent, 168px 24px transparent, 192px 24px transparent, 216px 24px transparent, 240px 24px transparent, 264px 24px transparent, 288px 24px var(--pixel-color), 312px 24px var(--pixel-color), 336px 24px var(--pixel-color), 360px 24px var(--pixel-color), 384px 24px var(--pixel-color), 408px 24px var(--pixel-color), 432px 24px var(--pixel-color), 456px 24px var(--pixel-color), 480px 24px var(--pixel-color), 504px 24px var(--pixel-color), 528px 24px var(--pixel-color), 552px 24px var(--pixel-color), 0px 48px transparent, 24px 48px transparent, 48px 48px transparent, 72px 48px transparent, 96px 48px transparent, 120px 48px transparent, 144px 48px transparent, 168px 48px transparent, 192px 48px transparent, 216px 48px transparent, 240px 48px transparent, 264px 48px transparent, 288px 48px var(--pixel-color), 312px 48px var(--pixel-color), 336px 48px transparent, 360px 48px transparent, 384px 48px var(--pixel-color), 408px 48px var(--pixel-color), 432px 48px var(--pixel-color), 456px 48px var(--pixel-color), 480px 48px var(--pixel-color), 504px 48px var(--pixel-color), 528px 48px var(--pixel-color), 552px 48px var(--pixel-color), 0px 72px transparent, 24px 72px transparent, 48px 72px transparent, 72px 72px transparent, 96px 72px transparent, 120px 72px transparent, 144px 72px transparent, 168px 72px transparent, 192px 72px transparent, 216px 72px transparent, 240px 72px transparent, 264px 72px transparent, 288px 72px var(--pixel-color), 312px 72px var(--pixel-color), 336px 72px transparent, 360px 72px transparent, 384px 72px var(--pixel-color), 408px 72px var(--pixel-color), 432px 72px var(--pixel-color), 456px 72px var(--pixel-color), 480px 72px var(--pixel-color), 504px 72px var(--pixel-color), 528px 72px var(--pixel-color), 552px 72px var(--pixel-color), 0px 96px transparent, 24px 96px transparent, 48px 96px transparent, 72px 96px transparent, 96px 96px transparent, 120px 96px transparent, 144px 96px transparent, 168px 96px transparent, 192px 96px transparent, 216px 96px transparent, 240px 96px transparent, 264px 96px transparent, 288px 96px var(--pixel-color), 312px 96px var(--pixel-color), 336px 96px var(--pixel-color), 360px 96px var(--pixel-color), 384px 96px var(--pixel-color), 408px 96px var(--pixel-color), 432px 96px var(--pixel-color), 456px 96px var(--pixel-color), 480px 96px var(--pixel-color), 504px 96px var(--pixel-color), 528px 96px var(--pixel-color), 552px 96px var(--pixel-color), 0px 120px transparent, 24px 120px transparent, 48px 120px transparent, 72px 120px transparent, 96px 120px transparent, 120px 120px transparent, 144px 120px transparent, 168px 120px transparent, 192px 120px transparent, 216px 120px transparent, 240px 120px transparent, 264px 120px transparent, 288px 120px var(--pixel-color), 312px 120px var(--pixel-color), 336px 120px var(--pixel-color), 360px 120px var(--pixel-color), 384px 120px var(--pixel-color), 408px 120px var(--pixel-color), 432px 120px var(--pixel-color), 456px 120px var(--pixel-color), 480px 120px var(--pixel-color), 504px 120px var(--pixel-color), 528px 120px var(--pixel-color), 552px 120px var(--pixel-color), 0px 144px transparent, 24px 144px transparent, 48px 144px transparent, 72px 144px transparent, 96px 144px transparent, 120px 144px transparent, 144px 144px transparent, 168px 144px transparent, 192px 144px transparent, 216px 144px transparent, 240px 144px transparent, 264px 144px transparent, 288px 144px var(--pixel-color), 312px 144px var(--pixel-color), 336px 144px var(--pixel-color), 360px 144px var(--pixel-color), 384px 144px var(--pixel-color), 408px 144px var(--pixel-color), 432px 144px transparent, 456px 144px transparent, 480px 144px transparent, 504px 144px transparent, 528px 144px transparent, 552px 144px transparent, 0px 168px transparent, 24px 168px transparent, 48px 168px transparent, 72px 168px transparent, 96px 168px transparent, 120px 168px transparent, 144px 168px transparent, 168px 168px transparent, 192px 168px transparent, 216px 168px transparent, 240px 168px transparent, 264px 168px transparent, 288px 168px var(--pixel-color), 312px 168px var(--pixel-color), 336px 168px var(--pixel-color), 360px 168px var(--pixel-color), 384px 168px var(--pixel-color), 408px 168px var(--pixel-color), 432px 168px transparent, 456px 168px transparent, 480px 168px transparent, 504px 168px transparent, 528px 168px transparent, 552px 168px transparent, 0px 192px transparent, 24px 192px transparent, 48px 192px transparent, 72px 192px transparent, 96px 192px transparent, 120px 192px transparent, 144px 192px transparent, 168px 192px transparent, 192px 192px transparent, 216px 192px transparent, 240px 192px transparent, 264px 192px transparent, 288px 192px var(--pixel-color), 312px 192px var(--pixel-color), 336px 192px var(--pixel-color), 360px 192px var(--pixel-color), 384px 192px var(--pixel-color), 408px 192px var(--pixel-color), 432px 192px var(--pixel-color), 456px 192px var(--pixel-color), 480px 192px var(--pixel-color), 504px 192px var(--pixel-color), 528px 192px transparent, 552px 192px transparent, 0px 216px var(--pixel-color), 24px 216px transparent, 48px 216px transparent, 72px 216px transparent, 96px 216px transparent, 120px 216px transparent, 144px 216px transparent, 168px 216px transparent, 192px 216px transparent, 216px 216px transparent, 240px 216px var(--pixel-color), 264px 216px var(--pixel-color), 288px 216px var(--pixel-color), 312px 216px var(--pixel-color), 336px 216px var(--pixel-color), 360px 216px var(--pixel-color), 384px 216px var(--pixel-color), 408px 216px transparent, 432px 216px transparent, 456px 216px transparent, 480px 216px transparent, 504px 216px transparent, 528px 216px transparent, 552px 216px transparent, 0px 240px var(--pixel-color), 24px 240px transparent, 48px 240px transparent, 72px 240px transparent, 96px 240px transparent, 120px 240px transparent, 144px 240px transparent, 168px 240px transparent, 192px 240px var(--pixel-color), 216px 240px var(--pixel-color), 240px 240px var(--pixel-color), 264px 240px var(--pixel-color), 288px 240px var(--pixel-color), 312px 240px var(--pixel-color), 336px 240px var(--pixel-color), 360px 240px var(--pixel-color), 384px 240px var(--pixel-color), 408px 240px transparent, 432px 240px transparent, 456px 240px transparent, 480px 240px transparent, 504px 240px transparent, 528px 240px transparent, 552px 240px transparent, 0px 264px var(--pixel-color), 24px 264px var(--pixel-color), 48px 264px transparent, 72px 264px transparent, 96px 264px transparent, 120px 264px transparent, 144px 264px transparent, 168px 264px var(--pixel-color), 192px 264px var(--pixel-color), 216px 264px var(--pixel-color), 240px 264px var(--pixel-color), 264px 264px var(--pixel-color), 288px 264px var(--pixel-color), 312px 264px var(--pixel-color), 336px 264px var(--pixel-color), 360px 264px var(--pixel-color), 384px 264px var(--pixel-color), 408px 264px var(--pixel-color), 432px 264px var(--pixel-color), 456px 264px transparent, 480px 264px transparent, 504px 264px transparent, 528px 264px transparent, 552px 264px transparent, 0px 288px var(--pixel-color), 24px 288px var(--pixel-color), 48px 288px var(--pixel-color), 72px 288px transparent, 96px 288px transparent, 120px 288px transparent, 144px 288px var(--pixel-color), 168px 288px var(--pixel-color), 192px 288px var(--pixel-color), 216px 288px var(--pixel-color), 240px 288px var(--pixel-color), 264px 288px var(--pixel-color), 288px 288px var(--pixel-color), 312px 288px var(--pixel-color), 336px 288px var(--pixel-color), 360px 288px var(--pixel-color), 384px 288px var(--pixel-color), 408px 288px transparent, 432px 288px var(--pixel-color), 456px 288px transparent, 480px 288px transparent, 504px 288px transparent, 528px 288px transparent, 552px 288px transparent, 0px 312px var(--pixel-color), 24px 312px var(--pixel-color), 48px 312px var(--pixel-color), 72px 312px var(--pixel-color), 96px 312px var(--pixel-color), 120px 312px var(--pixel-color), 144px 312px var(--pixel-color), 168px 312px var(--pixel-color), 192px 312px var(--pixel-color), 216px 312px var(--pixel-color), 240px 312px var(--pixel-color), 264px 312px var(--pixel-color), 288px 312px var(--pixel-color), 312px 312px var(--pixel-color), 336px 312px var(--pixel-color), 360px 312px var(--pixel-color), 384px 312px var(--pixel-color), 408px 312px transparent, 432px 312px transparent, 456px 312px transparent, 480px 312px transparent, 504px 312px transparent, 528px 312px transparent, 552px 312px transparent, 0px 336px var(--pixel-color), 24px 336px var(--pixel-color), 48px 336px var(--pixel-color), 72px 336px var(--pixel-color), 96px 336px var(--pixel-color), 120px 336px var(--pixel-color), 144px 336px var(--pixel-color), 168px 336px var(--pixel-color), 192px 336px var(--pixel-color), 216px 336px var(--pixel-color), 240px 336px var(--pixel-color), 264px 336px var(--pixel-color), 288px 336px var(--pixel-color), 312px 336px var(--pixel-color), 336px 336px var(--pixel-color), 360px 336px var(--pixel-color), 384px 336px var(--pixel-color), 408px 336px transparent, 432px 336px transparent, 456px 336px transparent, 480px 336px transparent, 504px 336px transparent, 528px 336px transparent, 552px 336px transparent, 0px 360px transparent, 24px 360px var(--pixel-color), 48px 360px var(--pixel-color), 72px 360px var(--pixel-color), 96px 360px var(--pixel-color), 120px 360px var(--pixel-color), 144px 360px var(--pixel-color), 168px 360px var(--pixel-color), 192px 360px var(--pixel-color), 216px 360px var(--pixel-color), 240px 360px var(--pixel-color), 264px 360px var(--pixel-color), 288px 360px var(--pixel-color), 312px 360px var(--pixel-color), 336px 360px var(--pixel-color), 360px 360px var(--pixel-color), 384px 360px var(--pixel-color), 408px 360px transparent, 432px 360px transparent, 456px 360px transparent, 480px 360px transparent, 504px 360px transparent, 528px 360px transparent, 552px 360px transparent, 0px 384px transparent, 24px 384px transparent, 48px 384px var(--pixel-color), 72px 384px var(--pixel-color), 96px 384px var(--pixel-color), 120px 384px var(--pixel-color), 144px 384px var(--pixel-color), 168px 384px var(--pixel-color), 192px 384px var(--pixel-color), 216px 384px var(--pixel-color), 240px 384px var(--pixel-color), 264px 384px var(--pixel-color), 288px 384px var(--pixel-color), 312px 384px var(--pixel-color), 336px 384px var(--pixel-color), 360px 384px var(--pixel-color), 384px 384px transparent, 408px 384px transparent, 432px 384px transparent, 456px 384px transparent, 480px 384px transparent, 504px 384px transparent, 528px 384px transparent, 552px 384px transparent, 0px 408px transparent, 24px 408px transparent, 48px 408px transparent, 72px 408px var(--pixel-color), 96px 408px var(--pixel-color), 120px 408px var(--pixel-color), 144px 408px var(--pixel-color), 168px 408px var(--pixel-color), 192px 408px var(--pixel-color), 216px 408px var(--pixel-color), 240px 408px var(--pixel-color), 264px 408px var(--pixel-color), 288px 408px var(--pixel-color), 312px 408px var(--pixel-color), 336px 408px var(--pixel-color), 360px 408px transparent, 384px 408px transparent, 408px 408px transparent, 432px 408px transparent, 456px 408px transparent, 480px 408px transparent, 504px 408px transparent, 528px 408px transparent, 552px 408px transparent, 0px 432px transparent, 24px 432px transparent, 48px 432px transparent, 72px 432px transparent, 96px 432px var(--pixel-color), 120px 432px var(--pixel-color), 144px 432px var(--pixel-color), 168px 432px var(--pixel-color), 192px 432px var(--pixel-color), 216px 432px var(--pixel-color), 240px 432px var(--pixel-color), 264px 432px var(--pixel-color), 288px 432px var(--pixel-color), 312px 432px var(--pixel-color), 336px 432px transparent, 360px 432px transparent, 384px 432px transparent, 408px 432px transparent, 432px 432px transparent, 456px 432px transparent, 480px 432px transparent, 504px 432px transparent, 528px 432px transparent, 552px 432px transparent, 0px 456px transparent, 24px 456px transparent, 48px 456px transparent, 72px 456px transparent, 96px 456px transparent, 120px 456px var(--pixel-color), 144px 456px var(--pixel-color), 168px 456px var(--pixel-color), 192px 456px var(--pixel-color), 216px 456px var(--pixel-color), 240px 456px var(--pixel-color), 264px 456px var(--pixel-color), 288px 456px var(--pixel-color), 312px 456px transparent, 336px 456px transparent, 360px 456px transparent, 384px 456px transparent, 408px 456px transparent, 432px 456px transparent, 456px 456px transparent, 480px 456px transparent, 504px 456px transparent, 528px 456px transparent, 552px 456px transparent, 0px 480px transparent, 24px 480px transparent, 48px 480px transparent, 72px 480px transparent, 96px 480px transparent, 120px 480px transparent, 144px 480px var(--pixel-color), 168px 480px var(--pixel-color), 192px 480px var(--pixel-color), 216px 480px transparent, 240px 480px transparent, 264px 480px var(--pixel-color), 288px 480px var(--pixel-color), 312px 480px transparent, 336px 480px transparent, 360px 480px transparent, 384px 480px transparent, 408px 480px transparent, 432px 480px transparent, 456px 480px transparent, 480px 480px transparent, 504px 480px transparent, 528px 480px transparent, 552px 480px transparent, 0px 504px transparent, 24px 504px transparent, 48px 504px transparent, 72px 504px transparent, 96px 504px transparent, 120px 504px transparent, 144px 504px var(--pixel-color), 168px 504px var(--pixel-color), 192px 504px transparent, 216px 504px transparent, 240px 504px transparent, 264px 504px transparent, 288px 504px var(--pixel-color), 312px 504px transparent, 336px 504px transparent, 360px 504px transparent, 384px 504px transparent, 408px 504px transparent, 432px 504px transparent, 456px 504px transparent, 480px 504px transparent, 504px 504px transparent, 528px 504px transparent, 552px 504px transparent, 0px 528px transparent, 24px 528px transparent, 48px 528px transparent, 72px 528px transparent, 96px 528px transparent, 120px 528px transparent, 144px 528px var(--pixel-color), 168px 528px transparent, 192px 528px transparent, 216px 528px transparent, 240px 528px transparent, 264px 528px transparent, 288px 528px var(--pixel-color), 312px 528px transparent, 336px 528px transparent, 360px 528px transparent, 384px 528px transparent, 408px 528px transparent, 432px 528px transparent, 456px 528px transparent, 480px 528px transparent, 504px 528px transparent, 528px 528px transparent, 552px 528px transparent, 0px 552px transparent, 24px 552px transparent, 48px 552px transparent, 72px 552px transparent, 96px 552px transparent, 120px 552px transparent, 144px 552px var(--pixel-color), 168px 552px var(--pixel-color), 192px 552px transparent, 216px 552px transparent, 240px 552px transparent, 264px 552px transparent, 288px 552px var(--pixel-color), 312px 552px var(--pixel-color), 336px 552px transparent, 360px 552px transparent, 384px 552px transparent, 408px 552px transparent, 432px 552px transparent, 456px 552px transparent, 480px 552px transparent, 504px 552px transparent, 528px 552px transparent, 552px 552px transparent;
  }

  33% {
    --shadow: 0px 0px transparent, 24px 0px transparent, 48px 0px transparent, 72px 0px transparent, 96px 0px transparent, 120px 0px transparent, 144px 0px transparent, 168px 0px transparent, 192px 0px transparent, 216px 0px transparent, 240px 0px transparent, 264px 0px transparent, 288px 0px transparent, 312px 0px var(--pixel-color), 336px 0px var(--pixel-color), 360px 0px var(--pixel-color), 384px 0px var(--pixel-color), 408px 0px var(--pixel-color), 432px 0px var(--pixel-color), 456px 0px var(--pixel-color), 480px 0px var(--pixel-color), 504px 0px var(--pixel-color), 528px 0px var(--pixel-color), 552px 0px transparent, 0px 24px transparent, 24px 24px transparent, 48px 24px transparent, 72px 24px transparent, 96px 24px transparent, 120px 24px transparent, 144px 24px transparent, 168px 24px transparent, 192px 24px transparent, 216px 24px transparent, 240px 24px transparent, 264px 24px transparent, 288px 24px var(--pixel-color), 312px 24px var(--pixel-color), 336px 24px var(--pixel-color), 360px 24px var(--pixel-color), 384px 24px var(--pixel-color), 408px 24px var(--pixel-color), 432px 24px var(--pixel-color), 456px 24px var(--pixel-color), 480px 24px var(--pixel-color), 504px 24px var(--pixel-color), 528px 24px var(--pixel-color), 552px 24px var(--pixel-color), 0px 48px transparent, 24px 48px transparent, 48px 48px transparent, 72px 48px transparent, 96px 48px transparent, 120px 48px transparent, 144px 48px transparent, 168px 48px transparent, 192px 48px transparent, 216px 48px transparent, 240px 48px transparent, 264px 48px transparent, 288px 48px var(--pixel-color), 312px 48px var(--pixel-color), 336px 48px transparent, 360px 48px transparent, 384px 48px var(--pixel-color), 408px 48px var(--pixel-color), 432px 48px var(--pixel-color), 456px 48px var(--pixel-color), 480px 48px var(--pixel-color), 504px 48px var(--pixel-color), 528px 48px var(--pixel-color), 552px 48px var(--pixel-color), 0px 72px transparent, 24px 72px transparent, 48px 72px transparent, 72px 72px transparent, 96px 72px transparent, 120px 72px transparent, 144px 72px transparent, 168px 72px transparent, 192px 72px transparent, 216px 72px transparent, 240px 72px transparent, 264px 72px transparent, 288px 72px var(--pixel-color), 312px 72px var(--pixel-color), 336px 72px transparent, 360px 72px transparent, 384px 72px var(--pixel-color), 408px 72px var(--pixel-color), 432px 72px var(--pixel-color), 456px 72px var(--pixel-color), 480px 72px var(--pixel-color), 504px 72px var(--pixel-color), 528px 72px var(--pixel-color), 552px 72px var(--pixel-color), 0px 96px transparent, 24px 96px transparent, 48px 96px transparent, 72px 96px transparent, 96px 96px transparent, 120px 96px transparent, 144px 96px transparent, 168px 96px transparent, 192px 96px transparent, 216px 96px transparent, 240px 96px transparent, 264px 96px transparent, 288px 96px var(--pixel-color), 312px 96px var(--pixel-color), 336px 96px var(--pixel-color), 360px 96px var(--pixel-color), 384px 96px var(--pixel-color), 408px 96px var(--pixel-color), 432px 96px var(--pixel-color), 456px 96px var(--pixel-color), 480px 96px var(--pixel-color), 504px 96px var(--pixel-color), 528px 96px var(--pixel-color), 552px 96px var(--pixel-color), 0px 120px transparent, 24px 120px transparent, 48px 120px transparent, 72px 120px transparent, 96px 120px transparent, 120px 120px transparent, 144px 120px transparent, 168px 120px transparent, 192px 120px transparent, 216px 120px transparent, 240px 120px transparent, 264px 120px transparent, 288px 120px var(--pixel-color), 312px 120px var(--pixel-color), 336px 120px var(--pixel-color), 360px 120px var(--pixel-color), 384px 120px var(--pixel-color), 408px 120px var(--pixel-color), 432px 120px var(--pixel-color), 456px 120px var(--pixel-color), 480px 120px var(--pixel-color), 504px 120px var(--pixel-color), 528px 120px var(--pixel-color), 552px 120px var(--pixel-color), 0px 144px transparent, 24px 144px transparent, 48px 144px transparent, 72px 144px transparent, 96px 144px transparent, 120px 144px transparent, 144px 144px transparent, 168px 144px transparent, 192px 144px transparent, 216px 144px transparent, 240px 144px transparent, 264px 144px transparent, 288px 144px var(--pixel-color), 312px 144px var(--pixel-color), 336px 144px var(--pixel-color), 360px 144px var(--pixel-color), 384px 144px var(--pixel-color), 408px 144px var(--pixel-color), 432px 144px transparent, 456px 144px transparent, 480px 144px transparent, 504px 144px transparent, 528px 144px transparent, 552px 144px transparent, 0px 168px transparent, 24px 168px transparent, 48px 168px transparent, 72px 168px transparent, 96px 168px transparent, 120px 168px transparent, 144px 168px transparent, 168px 168px transparent, 192px 168px transparent, 216px 168px transparent, 240px 168px transparent, 264px 168px transparent, 288px 168px var(--pixel-color), 312px 168px var(--pixel-color), 336px 168px var(--pixel-color), 360px 168px var(--pixel-color), 384px 168px var(--pixel-color), 408px 168px var(--pixel-color), 432px 168px transparent, 456px 168px transparent, 480px 168px transparent, 504px 168px transparent, 528px 168px transparent, 552px 168px transparent, 0px 192px transparent, 24px 192px transparent, 48px 192px transparent, 72px 192px transparent, 96px 192px transparent, 120px 192px transparent, 144px 192px transparent, 168px 192px transparent, 192px 192px transparent, 216px 192px transparent, 240px 192px transparent, 264px 192px transparent, 288px 192px var(--pixel-color), 312px 192px var(--pixel-color), 336px 192px var(--pixel-color), 360px 192px var(--pixel-color), 384px 192px var(--pixel-color), 408px 192px var(--pixel-color), 432px 192px var(--pixel-color), 456px 192px var(--pixel-color), 480px 192px var(--pixel-color), 504px 192px var(--pixel-color), 528px 192px transparent, 552px 192px transparent, 0px 216px var(--pixel-color), 24px 216px transparent, 48px 216px transparent, 72px 216px transparent, 96px 216px transparent, 120px 216px transparent, 144px 216px transparent, 168px 216px transparent, 192px 216px transparent, 216px 216px transparent, 240px 216px var(--pixel-color), 264px 216px var(--pixel-color), 288px 216px var(--pixel-color), 312px 216px var(--pixel-color), 336px 216px var(--pixel-color), 360px 216px var(--pixel-color), 384px 216px var(--pixel-color), 408px 216px transparent, 432px 216px transparent, 456px 216px transparent, 480px 216px transparent, 504px 216px transparent, 528px 216px transparent, 552px 216px transparent, 0px 240px var(--pixel-color), 24px 240px transparent, 48px 240px transparent, 72px 240px transparent, 96px 240px transparent, 120px 240px transparent, 144px 240px transparent, 168px 240px transparent, 192px 240px var(--pixel-color), 216px 240px var(--pixel-color), 240px 240px var(--pixel-color), 264px 240px var(--pixel-color), 288px 240px var(--pixel-color), 312px 240px var(--pixel-color), 336px 240px var(--pixel-color), 360px 240px var(--pixel-color), 384px 240px var(--pixel-color), 408px 240px transparent, 432px 240px transparent, 456px 240px transparent, 480px 240px transparent, 504px 240px transparent, 528px 240px transparent, 552px 240px transparent, 0px 264px var(--pixel-color), 24px 264px var(--pixel-color), 48px 264px transparent, 72px 264px transparent, 96px 264px transparent, 120px 264px transparent, 144px 264px transparent, 168px 264px var(--pixel-color), 192px 264px var(--pixel-color), 216px 264px var(--pixel-color), 240px 264px var(--pixel-color), 264px 264px var(--pixel-color), 288px 264px var(--pixel-color), 312px 264px var(--pixel-color), 336px 264px var(--pixel-color), 360px 264px var(--pixel-color), 384px 264px var(--pixel-color), 408px 264px var(--pixel-color), 432px 264px var(--pixel-color), 456px 264px transparent, 480px 264px transparent, 504px 264px transparent, 528px 264px transparent, 552px 264px transparent, 0px 288px var(--pixel-color), 24px 288px var(--pixel-color), 48px 288px var(--pixel-color), 72px 288px transparent, 96px 288px transparent, 120px 288px transparent, 144px 288px var(--pixel-color), 168px 288px var(--pixel-color), 192px 288px var(--pixel-color), 216px 288px var(--pixel-color), 240px 288px var(--pixel-color), 264px 288px var(--pixel-color), 288px 288px var(--pixel-color), 312px 288px var(--pixel-color), 336px 288px var(--pixel-color), 360px 288px var(--pixel-color), 384px 288px var(--pixel-color), 408px 288px transparent, 432px 288px var(--pixel-color), 456px 288px transparent, 480px 288px transparent, 504px 288px transparent, 528px 288px transparent, 552px 288px transparent, 0px 312px var(--pixel-color), 24px 312px var(--pixel-color), 48px 312px var(--pixel-color), 72px 312px var(--pixel-color), 96px 312px var(--pixel-color), 120px 312px var(--pixel-color), 144px 312px var(--pixel-color), 168px 312px var(--pixel-color), 192px 312px var(--pixel-color), 216px 312px var(--pixel-color), 240px 312px var(--pixel-color), 264px 312px var(--pixel-color), 288px 312px var(--pixel-color), 312px 312px var(--pixel-color), 336px 312px var(--pixel-color), 360px 312px var(--pixel-color), 384px 312px var(--pixel-color), 408px 312px transparent, 432px 312px transparent, 456px 312px transparent, 480px 312px transparent, 504px 312px transparent, 528px 312px transparent, 552px 312px transparent, 0px 336px var(--pixel-color), 24px 336px var(--pixel-color), 48px 336px var(--pixel-color), 72px 336px var(--pixel-color), 96px 336px var(--pixel-color), 120px 336px var(--pixel-color), 144px 336px var(--pixel-color), 168px 336px var(--pixel-color), 192px 336px var(--pixel-color), 216px 336px var(--pixel-color), 240px 336px var(--pixel-color), 264px 336px var(--pixel-color), 288px 336px var(--pixel-color), 312px 336px var(--pixel-color), 336px 336px var(--pixel-color), 360px 336px var(--pixel-color), 384px 336px var(--pixel-color), 408px 336px transparent, 432px 336px transparent, 456px 336px transparent, 480px 336px transparent, 504px 336px transparent, 528px 336px transparent, 552px 336px transparent, 0px 360px transparent, 24px 360px var(--pixel-color), 48px 360px var(--pixel-color), 72px 360px var(--pixel-color), 96px 360px var(--pixel-color), 120px 360px var(--pixel-color), 144px 360px var(--pixel-color), 168px 360px var(--pixel-color), 192px 360px var(--pixel-color), 216px 360px var(--pixel-color), 240px 360px var(--pixel-color), 264px 360px var(--pixel-color), 288px 360px var(--pixel-color), 312px 360px var(--pixel-color), 336px 360px var(--pixel-color), 360px 360px var(--pixel-color), 384px 360px var(--pixel-color), 408px 360px transparent, 432px 360px transparent, 456px 360px transparent, 480px 360px transparent, 504px 360px transparent, 528px 360px transparent, 552px 360px transparent, 0px 384px transparent, 24px 384px transparent, 48px 384px var(--pixel-color), 72px 384px var(--pixel-color), 96px 384px var(--pixel-color), 120px 384px var(--pixel-color), 144px 384px var(--pixel-color), 168px 384px var(--pixel-color), 192px 384px var(--pixel-color), 216px 384px var(--pixel-color), 240px 384px var(--pixel-color), 264px 384px var(--pixel-color), 288px 384px var(--pixel-color), 312px 384px var(--pixel-color), 336px 384px var(--pixel-color), 360px 384px var(--pixel-color), 384px 384px transparent, 408px 384px transparent, 432px 384px transparent, 456px 384px transparent, 480px 384px transparent, 504px 384px transparent, 528px 384px transparent, 552px 384px transparent, 0px 408px transparent, 24px 408px transparent, 48px 408px transparent, 72px 408px var(--pixel-color), 96px 408px var(--pixel-color), 120px 408px var(--pixel-color), 144px 408px var(--pixel-color), 168px 408px var(--pixel-color), 192px 408px var(--pixel-color), 216px 408px var(--pixel-color), 240px 408px var(--pixel-color), 264px 408px var(--pixel-color), 288px 408px var(--pixel-color), 312px 408px var(--pixel-color), 336px 408px var(--pixel-color), 360px 408px transparent, 384px 408px transparent, 408px 408px transparent, 432px 408px transparent, 456px 408px transparent, 480px 408px transparent, 504px 408px transparent, 528px 408px transparent, 552px 408px transparent, 0px 432px transparent, 24px 432px transparent, 48px 432px transparent, 72px 432px transparent, 96px 432px var(--pixel-color), 120px 432px var(--pixel-color), 144px 432px var(--pixel-color), 168px 432px var(--pixel-color), 192px 432px var(--pixel-color), 216px 432px var(--pixel-color), 240px 432px var(--pixel-color), 264px 432px var(--pixel-color), 288px 432px var(--pixel-color), 312px 432px var(--pixel-color), 336px 432px transparent, 360px 432px transparent, 384px 432px transparent, 408px 432px transparent, 432px 432px transparent, 456px 432px transparent, 480px 432px transparent, 504px 432px transparent, 528px 432px transparent, 552px 432px transparent, 0px 456px transparent, 24px 456px transparent, 48px 456px transparent, 72px 456px transparent, 96px 456px transparent, 120px 456px var(--pixel-color), 144px 456px var(--pixel-color), 168px 456px var(--pixel-color), 192px 456px var(--pixel-color), 216px 456px var(--pixel-color), 240px 456px var(--pixel-color), 264px 456px var(--pixel-color), 288px 456px var(--pixel-color), 312px 456px transparent, 336px 456px transparent, 360px 456px transparent, 384px 456px transparent, 408px 456px transparent, 432px 456px transparent, 456px 456px transparent, 480px 456px transparent, 504px 456px transparent, 528px 456px transparent, 552px 456px transparent, 0px 480px transparent, 24px 480px transparent, 48px 480px transparent, 72px 480px transparent, 96px 480px transparent, 120px 480px transparent, 144px 480px var(--pixel-color), 168px 480px var(--pixel-color), 192px 480px var(--pixel-color), 216px 480px transparent, 240px 480px transparent, 264px 480px var(--pixel-color), 288px 480px var(--pixel-color), 312px 480px var(--pixel-color), 336px 480px transparent, 360px 480px transparent, 384px 480px transparent, 408px 480px transparent, 432px 480px transparent, 456px 480px transparent, 480px 480px transparent, 504px 480px transparent, 528px 480px transparent, 552px 480px transparent, 0px 504px transparent, 24px 504px transparent, 48px 504px transparent, 72px 504px transparent, 96px 504px transparent, 120px 504px transparent, 144px 504px var(--pixel-color), 168px 504px var(--pixel-color), 192px 504px transparent, 216px 504px transparent, 240px 504px transparent, 264px 504px transparent, 288px 504px transparent, 312px 504px transparent, 336px 504px transparent, 360px 504px transparent, 384px 504px transparent, 408px 504px transparent, 432px 504px transparent, 456px 504px transparent, 480px 504px transparent, 504px 504px transparent, 528px 504px transparent, 552px 504px transparent, 0px 528px transparent, 24px 528px transparent, 48px 528px transparent, 72px 528px transparent, 96px 528px transparent, 120px 528px transparent, 144px 528px var(--pixel-color), 168px 528px transparent, 192px 528px transparent, 216px 528px transparent, 240px 528px transparent, 264px 528px transparent, 288px 528px transparent, 312px 528px transparent, 336px 528px transparent, 360px 528px transparent, 384px 528px transparent, 408px 528px transparent, 432px 528px transparent, 456px 528px transparent, 480px 528px transparent, 504px 528px transparent, 528px 528px transparent, 552px 528px transparent, 0px 552px transparent, 24px 552px transparent, 48px 552px transparent, 72px 552px transparent, 96px 552px transparent, 120px 552px transparent, 144px 552px var(--pixel-color), 168px 552px var(--pixel-color), 192px 552px transparent, 216px 552px transparent, 240px 552px transparent, 264px 552px transparent, 288px 552px transparent, 312px 552px transparent, 336px 552px transparent, 360px 552px transparent, 384px 552px transparent, 408px 552px transparent, 432px 552px transparent, 456px 552px transparent, 480px 552px transparent, 504px 552px transparent, 528px 552px transparent, 552px 552px transparent;
  }

  66% {
    --shadow: 0px 0px transparent, 24px 0px transparent, 48px 0px transparent, 72px 0px transparent, 96px 0px transparent, 120px 0px transparent, 144px 0px transparent, 168px 0px transparent, 192px 0px transparent, 216px 0px transparent, 240px 0px transparent, 264px 0px transparent, 288px 0px transparent, 312px 0px var(--pixel-color), 336px 0px var(--pixel-color), 360px 0px var(--pixel-color), 384px 0px var(--pixel-color), 408px 0px var(--pixel-color), 432px 0px var(--pixel-color), 456px 0px var(--pixel-color), 480px 0px var(--pixel-color), 504px 0px var(--pixel-color), 528px 0px var(--pixel-color), 552px 0px transparent, 0px 24px transparent, 24px 24px transparent, 48px 24px transparent, 72px 24px transparent, 96px 24px transparent, 120px 24px transparent, 144px 24px transparent, 168px 24px transparent, 192px 24px transparent, 216px 24px transparent, 240px 24px transparent, 264px 24px transparent, 288px 24px var(--pixel-color), 312px 24px var(--pixel-color), 336px 24px var(--pixel-color), 360px 24px var(--pixel-color), 384px 24px var(--pixel-color), 408px 24px var(--pixel-color), 432px 24px var(--pixel-color), 456px 24px var(--pixel-color), 480px 24px var(--pixel-color), 504px 24px var(--pixel-color), 528px 24px var(--pixel-color), 552px 24px var(--pixel-color), 0px 48px transparent, 24px 48px transparent, 48px 48px transparent, 72px 48px transparent, 96px 48px transparent, 120px 48px transparent, 144px 48px transparent, 168px 48px transparent, 192px 48px transparent, 216px 48px transparent, 240px 48px transparent, 264px 48px transparent, 288px 48px var(--pixel-color), 312px 48px var(--pixel-color), 336px 48px transparent, 360px 48px transparent, 384px 48px var(--pixel-color), 408px 48px var(--pixel-color), 432px 48px var(--pixel-color), 456px 48px var(--pixel-color), 480px 48px var(--pixel-color), 504px 48px var(--pixel-color), 528px 48px var(--pixel-color), 552px 48px var(--pixel-color), 0px 72px transparent, 24px 72px transparent, 48px 72px transparent, 72px 72px transparent, 96px 72px transparent, 120px 72px transparent, 144px 72px transparent, 168px 72px transparent, 192px 72px transparent, 216px 72px transparent, 240px 72px transparent, 264px 72px transparent, 288px 72px var(--pixel-color), 312px 72px var(--pixel-color), 336px 72px transparent, 360px 72px transparent, 384px 72px var(--pixel-color), 408px 72px var(--pixel-color), 432px 72px var(--pixel-color), 456px 72px var(--pixel-color), 480px 72px var(--pixel-color), 504px 72px var(--pixel-color), 528px 72px var(--pixel-color), 552px 72px var(--pixel-color), 0px 96px transparent, 24px 96px transparent, 48px 96px transparent, 72px 96px transparent, 96px 96px transparent, 120px 96px transparent, 144px 96px transparent, 168px 96px transparent, 192px 96px transparent, 216px 96px transparent, 240px 96px transparent, 264px 96px transparent, 288px 96px var(--pixel-color), 312px 96px var(--pixel-color), 336px 96px var(--pixel-color), 360px 96px var(--pixel-color), 384px 96px var(--pixel-color), 408px 96px var(--pixel-color), 432px 96px var(--pixel-color), 456px 96px var(--pixel-color), 480px 96px var(--pixel-color), 504px 96px var(--pixel-color), 528px 96px var(--pixel-color), 552px 96px var(--pixel-color), 0px 120px transparent, 24px 120px transparent, 48px 120px transparent, 72px 120px transparent, 96px 120px transparent, 120px 120px transparent, 144px 120px transparent, 168px 120px transparent, 192px 120px transparent, 216px 120px transparent, 240px 120px transparent, 264px 120px transparent, 288px 120px var(--pixel-color), 312px 120px var(--pixel-color), 336px 120px var(--pixel-color), 360px 120px var(--pixel-color), 384px 120px var(--pixel-color), 408px 120px var(--pixel-color), 432px 120px var(--pixel-color), 456px 120px var(--pixel-color), 480px 120px var(--pixel-color), 504px 120px var(--pixel-color), 528px 120px var(--pixel-color), 552px 120px var(--pixel-color), 0px 144px transparent, 24px 144px transparent, 48px 144px transparent, 72px 144px transparent, 96px 144px transparent, 120px 144px transparent, 144px 144px transparent, 168px 144px transparent, 192px 144px transparent, 216px 144px transparent, 240px 144px transparent, 264px 144px transparent, 288px 144px var(--pixel-color), 312px 144px var(--pixel-color), 336px 144px var(--pixel-color), 360px 144px var(--pixel-color), 384px 144px var(--pixel-color), 408px 144px var(--pixel-color), 432px 144px transparent, 456px 144px transparent, 480px 144px transparent, 504px 144px transparent, 528px 144px transparent, 552px 144px transparent, 0px 168px transparent, 24px 168px transparent, 48px 168px transparent, 72px 168px transparent, 96px 168px transparent, 120px 168px transparent, 144px 168px transparent, 168px 168px transparent, 192px 168px transparent, 216px 168px transparent, 240px 168px transparent, 264px 168px transparent, 288px 168px var(--pixel-color), 312px 168px var(--pixel-color), 336px 168px var(--pixel-color), 360px 168px var(--pixel-color), 384px 168px var(--pixel-color), 408px 168px var(--pixel-color), 432px 168px transparent, 456px 168px transparent, 480px 168px transparent, 504px 168px transparent, 528px 168px transparent, 552px 168px transparent, 0px 192px transparent, 24px 192px transparent, 48px 192px transparent, 72px 192px transparent, 96px 192px transparent, 120px 192px transparent, 144px 192px transparent, 168px 192px transparent, 192px 192px transparent, 216px 192px transparent, 240px 192px transparent, 264px 192px transparent, 288px 192px var(--pixel-color), 312px 192px var(--pixel-color), 336px 192px var(--pixel-color), 360px 192px var(--pixel-color), 384px 192px var(--pixel-color), 408px 192px var(--pixel-color), 432px 192px var(--pixel-color), 456px 192px var(--pixel-color), 480px 192px var(--pixel-color), 504px 192px var(--pixel-color), 528px 192px transparent, 552px 192px transparent, 0px 216px var(--pixel-color), 24px 216px transparent, 48px 216px transparent, 72px 216px transparent, 96px 216px transparent, 120px 216px transparent, 144px 216px transparent, 168px 216px transparent, 192px 216px transparent, 216px 216px transparent, 240px 216px var(--pixel-color), 264px 216px var(--pixel-color), 288px 216px var(--pixel-color), 312px 216px var(--pixel-color), 336px 216px var(--pixel-color), 360px 216px var(--pixel-color), 384px 216px var(--pixel-color), 408px 216px transparent, 432px 216px transparent, 456px 216px transparent, 480px 216px transparent, 504px 216px transparent, 528px 216px transparent, 552px 216px transparent, 0px 240px var(--pixel-color), 24px 240px transparent, 48px 240px transparent, 72px 240px transparent, 96px 240px transparent, 120px 240px transparent, 144px 240px transparent, 168px 240px transparent, 192px 240px var(--pixel-color), 216px 240px var(--pixel-color), 240px 240px var(--pixel-color), 264px 240px var(--pixel-color), 288px 240px var(--pixel-color), 312px 240px var(--pixel-color), 336px 240px var(--pixel-color), 360px 240px var(--pixel-color), 384px 240px var(--pixel-color), 408px 240px transparent, 432px 240px transparent, 456px 240px transparent, 480px 240px transparent, 504px 240px transparent, 528px 240px transparent, 552px 240px transparent, 0px 264px var(--pixel-color), 24px 264px var(--pixel-color), 48px 264px transparent, 72px 264px transparent, 96px 264px transparent, 120px 264px transparent, 144px 264px transparent, 168px 264px var(--pixel-color), 192px 264px var(--pixel-color), 216px 264px var(--pixel-color), 240px 264px var(--pixel-color), 264px 264px var(--pixel-color), 288px 264px var(--pixel-color), 312px 264px var(--pixel-color), 336px 264px var(--pixel-color), 360px 264px var(--pixel-color), 384px 264px var(--pixel-color), 408px 264px var(--pixel-color), 432px 264px var(--pixel-color), 456px 264px transparent, 480px 264px transparent, 504px 264px transparent, 528px 264px transparent, 552px 264px transparent, 0px 288px var(--pixel-color), 24px 288px var(--pixel-color), 48px 288px var(--pixel-color), 72px 288px transparent, 96px 288px transparent, 120px 288px transparent, 144px 288px var(--pixel-color), 168px 288px var(--pixel-color), 192px 288px var(--pixel-color), 216px 288px var(--pixel-color), 240px 288px var(--pixel-color), 264px 288px var(--pixel-color), 288px 288px var(--pixel-color), 312px 288px var(--pixel-color), 336px 288px var(--pixel-color), 360px 288px var(--pixel-color), 384px 288px var(--pixel-color), 408px 288px transparent, 432px 288px var(--pixel-color), 456px 288px transparent, 480px 288px transparent, 504px 288px transparent, 528px 288px transparent, 552px 288px transparent, 0px 312px var(--pixel-color), 24px 312px var(--pixel-color), 48px 312px var(--pixel-color), 72px 312px var(--pixel-color), 96px 312px var(--pixel-color), 120px 312px var(--pixel-color), 144px 312px var(--pixel-color), 168px 312px var(--pixel-color), 192px 312px var(--pixel-color), 216px 312px var(--pixel-color), 240px 312px var(--pixel-color), 264px 312px var(--pixel-color), 288px 312px var(--pixel-color), 312px 312px var(--pixel-color), 336px 312px var(--pixel-color), 360px 312px var(--pixel-color), 384px 312px var(--pixel-color), 408px 312px transparent, 432px 312px transparent, 456px 312px transparent, 480px 312px transparent, 504px 312px transparent, 528px 312px transparent, 552px 312px transparent, 0px 336px var(--pixel-color), 24px 336px var(--pixel-color), 48px 336px var(--pixel-color), 72px 336px var(--pixel-color), 96px 336px var(--pixel-color), 120px 336px var(--pixel-color), 144px 336px var(--pixel-color), 168px 336px var(--pixel-color), 192px 336px var(--pixel-color), 216px 336px var(--pixel-color), 240px 336px var(--pixel-color), 264px 336px var(--pixel-color), 288px 336px var(--pixel-color), 312px 336px var(--pixel-color), 336px 336px var(--pixel-color), 360px 336px var(--pixel-color), 384px 336px var(--pixel-color), 408px 336px transparent, 432px 336px transparent, 456px 336px transparent, 480px 336px transparent, 504px 336px transparent, 528px 336px transparent, 552px 336px transparent, 0px 360px transparent, 24px 360px var(--pixel-color), 48px 360px var(--pixel-color), 72px 360px var(--pixel-color), 96px 360px var(--pixel-color), 120px 360px var(--pixel-color), 144px 360px var(--pixel-color), 168px 360px var(--pixel-color), 192px 360px var(--pixel-color), 216px 360px var(--pixel-color), 240px 360px var(--pixel-color), 264px 360px var(--pixel-color), 288px 360px var(--pixel-color), 312px 360px var(--pixel-color), 336px 360px var(--pixel-color), 360px 360px var(--pixel-color), 384px 360px var(--pixel-color), 408px 360px transparent, 432px 360px transparent, 456px 360px transparent, 480px 360px transparent, 504px 360px transparent, 528px 360px transparent, 552px 360px transparent, 0px 384px transparent, 24px 384px transparent, 48px 384px var(--pixel-color), 72px 384px var(--pixel-color), 96px 384px var(--pixel-color), 120px 384px var(--pixel-color), 144px 384px var(--pixel-color), 168px 384px var(--pixel-color), 192px 384px var(--pixel-color), 216px 384px var(--pixel-color), 240px 384px var(--pixel-color), 264px 384px var(--pixel-color), 288px 384px var(--pixel-color), 312px 384px var(--pixel-color), 336px 384px var(--pixel-color), 360px 384px var(--pixel-color), 384px 384px transparent, 408px 384px transparent, 432px 384px transparent, 456px 384px transparent, 480px 384px transparent, 504px 384px transparent, 528px 384px transparent, 552px 384px transparent, 0px 408px transparent, 24px 408px transparent, 48px 408px transparent, 72px 408px var(--pixel-color), 96px 408px var(--pixel-color), 120px 408px var(--pixel-color), 144px 408px var(--pixel-color), 168px 408px var(--pixel-color), 192px 408px var(--pixel-color), 216px 408px var(--pixel-color), 240px 408px var(--pixel-color), 264px 408px var(--pixel-color), 288px 408px var(--pixel-color), 312px 408px var(--pixel-color), 336px 408px var(--pixel-color), 360px 408px transparent, 384px 408px transparent, 408px 408px transparent, 432px 408px transparent, 456px 408px transparent, 480px 408px transparent, 504px 408px transparent, 528px 408px transparent, 552px 408px transparent, 0px 432px transparent, 24px 432px transparent, 48px 432px transparent, 72px 432px transparent, 96px 432px var(--pixel-color), 120px 432px var(--pixel-color), 144px 432px var(--pixel-color), 168px 432px var(--pixel-color), 192px 432px var(--pixel-color), 216px 432px var(--pixel-color), 240px 432px var(--pixel-color), 264px 432px var(--pixel-color), 288px 432px var(--pixel-color), 312px 432px var(--pixel-color), 336px 432px transparent, 360px 432px transparent, 384px 432px transparent, 408px 432px transparent, 432px 432px transparent, 456px 432px transparent, 480px 432px transparent, 504px 432px transparent, 528px 432px transparent, 552px 432px transparent, 0px 456px transparent, 24px 456px transparent, 48px 456px transparent, 72px 456px transparent, 96px 456px transparent, 120px 456px var(--pixel-color), 144px 456px var(--pixel-color), 168px 456px var(--pixel-color), 192px 456px var(--pixel-color), 216px 456px var(--pixel-color), 240px 456px var(--pixel-color), 264px 456px var(--pixel-color), 288px 456px var(--pixel-color), 312px 456px transparent, 336px 456px transparent, 360px 456px transparent, 384px 456px transparent, 408px 456px transparent, 432px 456px transparent, 456px 456px transparent, 480px 456px transparent, 504px 456px transparent, 528px 456px transparent, 552px 456px transparent, 0px 480px transparent, 24px 480px transparent, 48px 480px transparent, 72px 480px transparent, 96px 480px transparent, 120px 480px transparent, 144px 480px var(--pixel-color), 168px 480px var(--pixel-color), 192px 480px var(--pixel-color), 216px 480px transparent, 240px 480px transparent, 264px 480px var(--pixel-color), 288px 480px var(--pixel-color), 312px 480px transparent, 336px 480px transparent, 360px 480px transparent, 384px 480px transparent, 408px 480px transparent, 432px 480px transparent, 456px 480px transparent, 480px 480px transparent, 504px 480px transparent, 528px 480px transparent, 552px 480px transparent, 0px 504px transparent, 24px 504px transparent, 48px 504px transparent, 72px 504px transparent, 96px 504px transparent, 120px 504px transparent, 144px 504px transparent, 168px 504px var(--pixel-color), 192px 504px var(--pixel-color), 216px 504px var(--pixel-color), 240px 504px transparent, 264px 504px transparent, 288px 504px var(--pixel-color), 312px 504px transparent, 336px 504px transparent, 360px 504px transparent, 384px 504px transparent, 408px 504px transparent, 432px 504px transparent, 456px 504px transparent, 480px 504px transparent, 504px 504px transparent, 528px 504px transparent, 552px 504px transparent, 0px 528px transparent, 24px 528px transparent, 48px 528px transparent, 72px 528px transparent, 96px 528px transparent, 120px 528px transparent, 144px 528px transparent, 168px 528px transparent, 192px 528px transparent, 216px 528px transparent, 240px 528px transparent, 264px 528px transparent, 288px 528px var(--pixel-color), 312px 528px transparent, 336px 528px transparent, 360px 528px transparent, 384px 528px transparent, 408px 528px transparent, 432px 528px transparent, 456px 528px transparent, 480px 528px transparent, 504px 528px transparent, 528px 528px transparent, 552px 528px transparent, 0px 552px transparent, 24px 552px transparent, 48px 552px transparent, 72px 552px transparent, 96px 552px transparent, 120px 552px transparent, 144px 552px transparent, 168px 552px transparent, 192px 552px transparent, 216px 552px transparent, 240px 552px transparent, 264px 552px transparent, 288px 552px var(--pixel-color), 312px 552px var(--pixel-color), 336px 552px transparent, 360px 552px transparent, 384px 552px transparent, 408px 552px transparent, 432px 552px transparent, 456px 552px transparent, 480px 552px transparent, 504px 552px transparent, 528px 552px transparent, 552px 552px transparent;
  }
}

.lpi-horizontal-loader-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.lpi-horizontal-loader {
  display: block;
  --height-of-loader: 8px;
  --loader-color: #0071e2;
  width: 200px;
  height: var(--height-of-loader);
  border-radius: 30px;
  background-color: rgba(0,0,0,0.2);
  position: relative;
}

  .lpi-horizontal-loader::before {
    content: "";
    position: absolute;
    background: var(--loader-color);
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    border-radius: 30px;
    animation: lpi-horizontal-moving 1s ease-in-out infinite;
  }

@keyframes lpi-horizontal-moving {
  50% {
    width: 100%;
  }

  100% {
    width: 0;
    right: 0;
    left: unset;
  }
}

.loading-spinner-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.loading-spinner-spinner {
  width: 56px;
  height: 56px;
  display: grid;
  border: 4px solid #0000;
  border-radius: 50%;
  border-right-color: #299fff;
  animation: loading-spinner-tri 1s infinite linear;
}

  .loading-spinner-spinner::before,
  .loading-spinner-spinner::after {
    content: "";
    grid-area: 1/1;
    margin: 2px;
    border: inherit;
    border-radius: 50%;
    animation: loading-spinner-tri 2s infinite;
  }

  .loading-spinner-spinner::after {
    margin: 8px;
    animation-duration: 3s;
  }

@keyframes loading-spinner-tri {
  100% {
    transform: rotate(1turn);
  }
}

.loading-spinner-loader {
  color: #4a4a4a;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: 25px;
  box-sizing: content-box;
  height: 40px;
  padding: 10px 10px;
  display: flex;
  border-radius: 8px;
}

.loading-spinner-words {
  overflow: hidden;
}

.loading-spinner-word {
  display: block;
  height: 100%;
  padding-left: 6px;
  color: #299fff;
  animation: loading-spinner-cycle-words 5s infinite;
}

  .loading-spinner-word.single-word {
    animation: none;
  }

@keyframes loading-spinner-cycle-words {
  10% {
    transform: translateY(-105%);
  }

  25% {
    transform: translateY(-100%);
  }

  35% {
    transform: translateY(-205%);
  }

  50% {
    transform: translateY(-200%);
  }

  60% {
    transform: translateY(-305%);
  }

  75% {
    transform: translateY(-300%);
  }

  85% {
    transform: translateY(-405%);
  }

  100% {
    transform: translateY(-400%);
  }
}

@keyframes unsaved-modal-in {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-10px);
  }

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

.animate-unsaved-modal-in {
  animation: unsaved-modal-in 0.2s ease-out forwards;
}

@keyframes grid-loading {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(400%);
  }
}

/* Container query setup */
.cell-container {
  container-type: inline-size;
  width: 100%;
  min-width: 0;
}

.cell-full {
  display: none;
  min-width: 0;
}

.cell-compact {
  display: block;
  min-width: 0;
}

/* Thresholds - add more as needed */
@container (min-width: 100px) {
  .cell-full-100 {
    display: block;
  }

  .cell-compact-100 {
    display: none;
  }
}

@container (min-width: 120px) {
  .cell-full-120 {
    display: block;
  }

  .cell-compact-120 {
    display: none;
  }
}

@container (min-width: 140px) {
  .cell-full-140 {
    display: block;
  }

  .cell-compact-140 {
    display: none;
  }
}

@container (min-width: 180px) {
  .cell-full-180 {
    display: block;
  }

  .cell-compact-180 {
    display: none;
  }
}

@container (min-width: 200px) {
  .cell-full-200 {
    display: block;
  }

  .cell-compact-200 {
    display: none;
  }
}

@container (min-width: 220px) {
  .cell-full-220 {
    display: block;
  }

  .cell-compact-220 {
    display: none;
  }
}


@container (min-width: 240px) {
  .cell-full-240 {
    display: block;
  }

  .cell-compact-240 {
    display: none;
  }
}


@container (min-width: 260px) {
  .cell-full-260 {
    display: block;
  }

  .cell-compact-260 {
    display: none;
  }
}

@container (min-width: 280px) {
  .cell-full-280 {
    display: block;
  }

  .cell-compact-280 {
    display: none;
  }
}

@container (min-width: 300px) {
  .cell-full-300 {
    display: block;
  }

  .cell-compact-300 {
    display: none;
  }
}

@keyframes dialog-fade-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }

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

@keyframes dialog-fade-out {
  from {
    opacity: 1;
    transform: scale(1);
  }

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

@keyframes backdrop-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes backdrop-fade-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.dialog-animate-in {
  animation: dialog-fade-in 0.2s ease-out forwards;
}

.dialog-animate-out {
  animation: dialog-fade-out 0.15s ease-in forwards;
}

.backdrop-animate-in {
  animation: backdrop-fade-in 0.2s ease-out forwards;
}

.backdrop-animate-out {
  animation: backdrop-fade-out 0.15s ease-in forwards;
}

@keyframes dialog-fade-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }

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

@keyframes dialog-fade-out {
  from {
    opacity: 1;
    transform: scale(1);
  }

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

@keyframes backdrop-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes backdrop-fade-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.dialog-animate-in {
  animation: dialog-fade-in 0.2s ease-out forwards;
}

.dialog-animate-out {
  animation: dialog-fade-out 0.15s ease-in forwards;
}

.backdrop-animate-in {
  animation: backdrop-fade-in 0.2s ease-out forwards;
}

.backdrop-animate-out {
  animation: backdrop-fade-out 0.15s ease-in forwards;
}

@keyframes toast-slide-in {
  from {
    opacity: 0;
    transform: translateX(100%);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes toast-shrink {
  from {
    width: 100%;
  }

  to {
    width: 0%;
  }
}

.toast-animate-slide-in {
  animation: toast-slide-in 0.3s ease-out;
}

.toast-animate-shrink {
  animation: toast-shrink 5s linear forwards;
}


.tour-overlay {
  background-color: rgb(0 0 0 / 0.4);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  transition: clip-path 0.3s ease-out;
}

:global(.dark) .tour-overlay {
  background-color: rgb(0 0 0 / 0.6);
}


.tour-arrow {
  --tour-arrow-color: var(--arrow-color);
}

:global(.dark) .tour-arrow {
  --tour-arrow-color: var(--arrow-color-dark);
}


.tour-svg-arrow {
  stroke: var(--svg-arrow-color);
  transition: stroke 0.2s ease;
}

.tour-svg-arrow-fill {
  fill: var(--svg-arrow-color);
  transition: fill 0.2s ease;
}

:global(.dark) .tour-svg-arrow {
  stroke: var(--svg-arrow-color-dark);
}

:global(.dark) .tour-svg-arrow-fill {
  fill: var(--svg-arrow-color-dark);
}

/* Arrow label box - bordered container */
.tour-arrow-label-box {
  text-align: center;
  padding: 1rem 1.25rem;
  border: 2.5px solid var(--svg-arrow-color);
  border-radius: 0.75rem;
  background: transparent;
  color: var(--svg-arrow-color);
  max-width: 300px;
  min-width: 200px;
}

:global(.dark) .tour-arrow-label-box {
  border-color: var(--svg-arrow-color-dark);
  background: transparent;
  color: var(--svg-arrow-color-dark);
}

/* Button inside arrow label */
.tour-arrow-button {
  padding: 0.375rem 0.875rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 0.5rem;
  border: 2px solid var(--svg-arrow-color);
  background: rgb(from var(--svg-arrow-color) r g b / 50%);
  color: white;
  transition: opacity 0.15s ease;
}

  .tour-arrow-button:hover {
    opacity: 0.85;
  }

:global(.dark) .tour-arrow-button {
  background: var(--svg-arrow-color-dark);
}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes tour-fade-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }

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

@keyframes tour-slide-in {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes tour-draw-arrow {
  from {
    stroke-dashoffset: 1000;
  }

  to {
    stroke-dashoffset: 0;
  }
}

.animate-fade-in {
  animation: tour-fade-in 0.2s ease-out forwards;
}

.animate-slide-in {
  animation: tour-slide-in 0.2s ease-out forwards;
}

/* Animated arrow drawing effect (optional - add class to svg path) */
.animate-draw {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: tour-draw-arrow 0.6s ease-out forwards;
}