formeo 3.1.3 → 4.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (79) hide show
  1. package/dist/demo/assets/css/demo.min.css +2 -2
  2. package/dist/demo/assets/css/demo.min.css.gz +0 -0
  3. package/dist/demo/assets/css/formeo.min.css +2 -2
  4. package/dist/demo/assets/img/formeo-sprite.svg +1 -1
  5. package/dist/demo/assets/js/demo.min.js +2 -2
  6. package/dist/demo/assets/js/demo.min.js.gz +0 -0
  7. package/dist/demo/assets/js/formeo.cjs.js +10775 -0
  8. package/dist/demo/assets/js/formeo.es.js +10776 -0
  9. package/dist/demo/assets/js/formeo.min.cjs.js +14 -0
  10. package/dist/demo/assets/js/formeo.min.es.js +10776 -0
  11. package/dist/demo/assets/js/formeo.min.js +10769 -4
  12. package/dist/demo/assets/js/formeo.min.umd.js +14 -0
  13. package/dist/demo/assets/js/formeo.umd.js +10779 -0
  14. package/dist/demo/assets/js/index.min.js +1 -1
  15. package/dist/demo/assets/js/index.min2.js +2 -2
  16. package/dist/demo/assets/js/index.min3.js +1 -1
  17. package/dist/demo/assets/js/mode-json.min.js +1 -1
  18. package/dist/demo/assets/js/mode-json.min.js.gz +0 -0
  19. package/dist/demo/assets/js/theme-github_light_default.min.js +1 -1
  20. package/dist/demo/assets/lang/af-ZA.json +1 -1
  21. package/dist/demo/assets/lang/af-ZA.lang +9 -0
  22. package/dist/demo/assets/lang/ar-TN.json +1 -1
  23. package/dist/demo/assets/lang/ar-TN.lang +9 -0
  24. package/dist/demo/assets/lang/cs-CZ.json +1 -1
  25. package/dist/demo/assets/lang/cs-CZ.lang +9 -0
  26. package/dist/demo/assets/lang/de-DE.json +1 -1
  27. package/dist/demo/assets/lang/de-DE.lang +9 -0
  28. package/dist/demo/assets/lang/en-US.json +1 -1
  29. package/dist/demo/assets/lang/en-US.lang +6 -1
  30. package/dist/demo/assets/lang/es-ES.json +1 -1
  31. package/dist/demo/assets/lang/es-ES.lang +9 -0
  32. package/dist/demo/assets/lang/fa-IR.json +1 -1
  33. package/dist/demo/assets/lang/fa-IR.lang +9 -0
  34. package/dist/demo/assets/lang/fi-FI.json +1 -1
  35. package/dist/demo/assets/lang/fi-FI.lang +9 -0
  36. package/dist/demo/assets/lang/fr-FR.json +1 -1
  37. package/dist/demo/assets/lang/fr-FR.lang +9 -0
  38. package/dist/demo/assets/lang/he-IL.json +1 -1
  39. package/dist/demo/assets/lang/he-IL.lang +5 -0
  40. package/dist/demo/assets/lang/hi-IN.json +1 -1
  41. package/dist/demo/assets/lang/hi-IN.lang +7 -0
  42. package/dist/demo/assets/lang/hu-HU.json +1 -1
  43. package/dist/demo/assets/lang/hu-HU.lang +9 -0
  44. package/dist/demo/assets/lang/it-IT.json +1 -1
  45. package/dist/demo/assets/lang/it-IT.lang +9 -0
  46. package/dist/demo/assets/lang/ja-JP.json +1 -1
  47. package/dist/demo/assets/lang/ja-JP.lang +9 -0
  48. package/dist/demo/assets/lang/nb-NO.json +1 -1
  49. package/dist/demo/assets/lang/nb-NO.lang +9 -0
  50. package/dist/demo/assets/lang/pl-PL.json +1 -1
  51. package/dist/demo/assets/lang/pl-PL.lang +9 -0
  52. package/dist/demo/assets/lang/pt-BR.json +1 -1
  53. package/dist/demo/assets/lang/pt-BR.lang +9 -0
  54. package/dist/demo/assets/lang/pt-PT.json +1 -1
  55. package/dist/demo/assets/lang/pt-PT.lang +9 -0
  56. package/dist/demo/assets/lang/ro-RO.json +1 -1
  57. package/dist/demo/assets/lang/ro-RO.lang +9 -0
  58. package/dist/demo/assets/lang/ru-RU.json +1 -1
  59. package/dist/demo/assets/lang/ru-RU.lang +9 -0
  60. package/dist/demo/assets/lang/th-TH.json +1 -1
  61. package/dist/demo/assets/lang/th-TH.lang +9 -0
  62. package/dist/demo/assets/lang/tr-TR.json +1 -1
  63. package/dist/demo/assets/lang/tr-TR.lang +9 -0
  64. package/dist/demo/assets/lang/zh-CN.json +1 -1
  65. package/dist/demo/assets/lang/zh-CN.lang +9 -0
  66. package/dist/demo/assets/lang/zh-HK.json +1 -1
  67. package/dist/demo/assets/lang/zh-HK.lang +9 -0
  68. package/dist/demo/index.html +1 -1
  69. package/dist/formeo-sprite.svg +1 -1
  70. package/dist/formeo.cjs.js +10764 -3
  71. package/dist/formeo.css +2273 -0
  72. package/dist/formeo.es.js +6239 -5576
  73. package/dist/formeo.min.cjs.js +14 -0
  74. package/dist/formeo.min.css +2 -2
  75. package/dist/formeo.min.es.js +10776 -0
  76. package/dist/formeo.min.js +10769 -4
  77. package/dist/formeo.min.umd.js +14 -0
  78. package/dist/formeo.umd.js +10769 -4
  79. package/package.json +21 -5
@@ -0,0 +1,2273 @@
1
+
2
+ /**
3
+ formeo - https://formeo.io
4
+ Version: 3.1.4
5
+ Author: Draggable https://draggable.io
6
+ */
7
+
8
+ /*
9
+ Mixins
10
+ */
11
+ .svg-icon {
12
+ display: inline-block;
13
+ width: 24px;
14
+ height: 24px;
15
+ pointer-events: none;
16
+ }
17
+
18
+ .f-i-remove:hover {
19
+ fill: rgb(217, 83, 79);
20
+ }
21
+
22
+ button[class*=-move]:hover {
23
+ background-color: rgb(153, 84, 187) !important;
24
+ }
25
+ button[class*=-move]:hover .svg-icon {
26
+ fill: #fff;
27
+ }
28
+
29
+ button[class*=-remove]:hover {
30
+ background-color: rgb(217, 83, 79) !important;
31
+ }
32
+ button[class*=-remove]:hover .svg-icon {
33
+ fill: #fff;
34
+ }
35
+
36
+ button[class*=-clone]:hover {
37
+ background-color: rgb(147, 197, 75) !important;
38
+ }
39
+ button[class*=-clone]:hover .svg-icon {
40
+ fill: #fff;
41
+ }
42
+
43
+ .edit-toggle:hover {
44
+ background-color: rgb(50, 93, 136) !important;
45
+ }
46
+ .edit-toggle:hover .svg-icon {
47
+ fill: #fff;
48
+ }
49
+
50
+ .f-autocomplete {
51
+ position: relative;
52
+ }
53
+
54
+ .f-autocomplete-display-field {
55
+ width: 100%;
56
+ }
57
+
58
+ .f-autocomplete-list {
59
+ background-color: #fff;
60
+ display: none;
61
+ list-style: none;
62
+ padding: 0;
63
+ position: absolute;
64
+ z-index: 2;
65
+ width: 100%;
66
+ margin: 0 -1px;
67
+ border: 1px solid #999999;
68
+ border-width: 1px 1px 0;
69
+ box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);
70
+ }
71
+ .f-autocomplete-list li {
72
+ position: relative;
73
+ border: 1px solid #999999;
74
+ display: none;
75
+ cursor: default;
76
+ padding: 4px;
77
+ margin: -1px 0 0;
78
+ border-width: 1px 0;
79
+ transition: background-color 133ms ease-in-out;
80
+ will-change: background-color;
81
+ font-size: 0.85em;
82
+ }
83
+ .f-autocomplete-list li.component-type-row {
84
+ padding-left: 4px;
85
+ }
86
+ .f-autocomplete-list li.component-type-column {
87
+ padding-left: 8px;
88
+ }
89
+ .f-autocomplete-list li.component-type-field {
90
+ padding-left: 16px;
91
+ }
92
+ .f-autocomplete-list li.active-option.component-type-stage {
93
+ background-color: #4F46E5;
94
+ color: #f9fafb;
95
+ }
96
+ .f-autocomplete-list li.active-option.component-type-row {
97
+ background-color: rgb(229, 70, 188.2);
98
+ color: #f9fafb;
99
+ }
100
+ .f-autocomplete-list li.active-option.component-type-column {
101
+ background-color: rgb(229, 142.6, 70);
102
+ color: #111827;
103
+ }
104
+ .f-autocomplete-list li.active-option.component-type-field {
105
+ background-color: rgb(124.6, 229, 70);
106
+ color: #111827;
107
+ }
108
+ .f-autocomplete-list li.active-option.component-type-option {
109
+ background-color: rgb(70, 229, 206.2);
110
+ color: #111827;
111
+ }
112
+ .f-autocomplete-list li:hover.component-type-stage {
113
+ background-color: rgb(185.3507109005, 181.7890995261, 244.7109004739);
114
+ color: #111827;
115
+ }
116
+ .f-autocomplete-list li:hover.component-type-row {
117
+ background-color: rgb(244.7109004739, 181.7890995261, 228.56492891);
118
+ color: #111827;
119
+ }
120
+ .f-autocomplete-list li:hover.component-type-column {
121
+ background-color: rgb(244.7109004739, 210.5194312796, 181.7890995261);
122
+ color: #111827;
123
+ }
124
+ .f-autocomplete-list li:hover.component-type-field {
125
+ background-color: rgb(203.3962085308, 244.7109004739, 181.7890995261);
126
+ color: #111827;
127
+ }
128
+ .f-autocomplete-list li:hover.component-type-option {
129
+ background-color: rgb(181.7890995261, 244.7109004739, 235.6881516588);
130
+ color: #111827;
131
+ }
132
+ .f-autocomplete-list li:has(.options-list):hover .options-list {
133
+ display: block;
134
+ }
135
+ .f-autocomplete-list .component-type {
136
+ color: #666666;
137
+ font-style: italic;
138
+ font-size: 0.75em;
139
+ }
140
+ .f-autocomplete-list.options-list {
141
+ left: 100%;
142
+ top: 0;
143
+ width: 75%;
144
+ min-height: 100%;
145
+ }
146
+ .f-autocomplete-list.options-list li {
147
+ display: block;
148
+ }
149
+
150
+ .formeo-panels-wrap h5 {
151
+ margin: 0;
152
+ padding: 0.55em 0;
153
+ color: #666666;
154
+ font-weight: normal;
155
+ display: inline-block;
156
+ width: 100%;
157
+ }
158
+ .formeo-panels-wrap nav {
159
+ position: relative;
160
+ padding: 0;
161
+ overflow: hidden;
162
+ }
163
+ .formeo-panels-wrap nav button {
164
+ position: absolute;
165
+ width: 24px;
166
+ color: #000;
167
+ height: 100%;
168
+ padding: 0;
169
+ line-height: 0;
170
+ z-index: 1;
171
+ }
172
+ .formeo-panels-wrap nav button:focus {
173
+ outline: none;
174
+ border: 1px solid rgb(102, 175, 233);
175
+ box-shadow: none;
176
+ }
177
+ .formeo-panels-wrap nav button .svg-icon {
178
+ width: 20px;
179
+ height: 20px;
180
+ }
181
+ .formeo-panels-wrap nav button.next-group {
182
+ right: 0;
183
+ top: 0;
184
+ border-top-left-radius: 0;
185
+ border-bottom-left-radius: 0;
186
+ }
187
+ .formeo-panels-wrap nav button.prev-group {
188
+ left: 0;
189
+ top: 0;
190
+ border-top-right-radius: 0;
191
+ border-bottom-right-radius: 0;
192
+ }
193
+ .formeo-panels-wrap ul {
194
+ margin: 0;
195
+ padding: 0;
196
+ list-style: none;
197
+ }
198
+ .formeo-panels-wrap .f-panel {
199
+ height: 0;
200
+ vertical-align: top;
201
+ display: inline-block;
202
+ width: 100%;
203
+ flex-direction: column;
204
+ flex: 1 0 100%;
205
+ }
206
+ .formeo-panels-wrap .f-panel > li:last-child {
207
+ border-radius: 0 0 4px 4px;
208
+ }
209
+ .formeo-panels-wrap .panels {
210
+ white-space: nowrap;
211
+ transition-property: height;
212
+ transition-duration: 150ms;
213
+ transition-timing-function: ease-in-out;
214
+ will-change: transform;
215
+ flex-direction: row;
216
+ }
217
+ .formeo-panels-wrap .panel-labels {
218
+ height: 100%;
219
+ background: #fff;
220
+ overflow: hidden;
221
+ text-align: center;
222
+ white-space: nowrap;
223
+ }
224
+ .formeo-panels-wrap .active-panel {
225
+ height: auto;
226
+ }
227
+
228
+ .tabbed-panels .panel-nav {
229
+ height: auto;
230
+ }
231
+ .tabbed-panels .panel-nav button {
232
+ display: none;
233
+ }
234
+ .tabbed-panels .panel-labels div {
235
+ flex-direction: row;
236
+ justify-content: flex-start;
237
+ flex-wrap: nowrap;
238
+ align-content: stretch;
239
+ align-items: stretch;
240
+ display: flex;
241
+ }
242
+ .tabbed-panels .panel-labels h5 {
243
+ flex-direction: column;
244
+ flex: 1;
245
+ cursor: pointer;
246
+ background-color: #cccccc;
247
+ box-shadow: 0 -1px 8px #999999 inset;
248
+ }
249
+ .tabbed-panels .panel-labels h5.active-tab {
250
+ color: #000;
251
+ box-shadow: none;
252
+ background-color: #fff;
253
+ }
254
+
255
+ #formeo-sprite {
256
+ display: none !important;
257
+ visibility: hidden !important;
258
+ }
259
+
260
+ .formeo {
261
+ /*
262
+ Mixins
263
+ */
264
+ }
265
+ .formeo * {
266
+ box-sizing: inherit;
267
+ font-family: inherit;
268
+ }
269
+ .formeo .pill-buttons > button {
270
+ border-radius: 50px;
271
+ }
272
+ .formeo hr {
273
+ margin-top: 1rem;
274
+ margin-bottom: 1rem;
275
+ border: 0;
276
+ border-top: 1px solid #cccccc;
277
+ }
278
+ .formeo .f-field-group {
279
+ flex-wrap: wrap;
280
+ margin-bottom: 12px;
281
+ }
282
+ .formeo .f-field-group:last-child {
283
+ margin-bottom: 0;
284
+ }
285
+ .formeo .f-field-group label + .badge {
286
+ margin-left: 8px;
287
+ }
288
+ .formeo .f-field-group > label {
289
+ display: inline-block;
290
+ margin-bottom: 4px;
291
+ }
292
+ .formeo .f-field-group button {
293
+ margin-right: 4px;
294
+ }
295
+ .formeo select {
296
+ font-size: 100%;
297
+ font-family: inherit;
298
+ height: 2.1em;
299
+ line-height: 1.5;
300
+ margin: 0;
301
+ border: 1px solid #cccccc;
302
+ border-radius: 4px;
303
+ background-color: #fff;
304
+ width: 100%;
305
+ padding: 0.3em 0.6em;
306
+ box-sizing: border-box;
307
+ }
308
+ .formeo select:focus {
309
+ border: 1px solid rgb(102, 175, 233);
310
+ outline: none;
311
+ }
312
+ .formeo select[multiple] {
313
+ height: auto;
314
+ }
315
+ .formeo input {
316
+ font-size: 100%;
317
+ font-family: inherit;
318
+ height: 2.1em;
319
+ line-height: 1.5;
320
+ margin: 0;
321
+ border: 1px solid #cccccc;
322
+ border-radius: 4px;
323
+ background-color: #fff;
324
+ width: 100%;
325
+ padding: 0.3em 0.6em;
326
+ box-sizing: border-box;
327
+ }
328
+ .formeo input:focus {
329
+ border: 1px solid rgb(102, 175, 233);
330
+ outline: none;
331
+ }
332
+ .formeo input[type=checkbox], .formeo input[type=radio] {
333
+ width: auto;
334
+ height: auto;
335
+ margin-right: 4px;
336
+ }
337
+ .formeo input[type=date] {
338
+ max-width: 280px;
339
+ display: block;
340
+ }
341
+ .formeo textarea {
342
+ font-size: 100%;
343
+ font-family: inherit;
344
+ height: 2.1em;
345
+ line-height: 1.5;
346
+ margin: 0;
347
+ border: 1px solid #cccccc;
348
+ border-radius: 4px;
349
+ background-color: #fff;
350
+ width: 100%;
351
+ padding: 0.3em 0.6em;
352
+ box-sizing: border-box;
353
+ height: auto;
354
+ }
355
+ .formeo textarea:focus {
356
+ border: 1px solid rgb(102, 175, 233);
357
+ outline: none;
358
+ }
359
+ .formeo button {
360
+ border-radius: 4px;
361
+ border: 1px solid #666666;
362
+ color: #333333;
363
+ background-color: #fff;
364
+ padding: 4px 8px;
365
+ line-height: 1.5em;
366
+ }
367
+ .formeo button:active {
368
+ transform: scale(0.97);
369
+ }
370
+ .formeo button:hover {
371
+ filter: brightness(0.9);
372
+ }
373
+ .formeo button.primary, .formeo button.success, .formeo button.warning, .formeo button.error {
374
+ color: #fff;
375
+ }
376
+ .formeo button.primary {
377
+ background-color: rgb(50, 93, 136);
378
+ border-color: rgb(36.2903225806, 67.5, 98.7096774194);
379
+ }
380
+ .formeo button.success {
381
+ background-color: rgb(147, 197, 75);
382
+ border-color: rgb(120.7142857143, 167.1428571429, 53.8571428571);
383
+ }
384
+ .formeo button.warning {
385
+ background-color: rgb(244, 124, 60);
386
+ border-color: rgb(239.4902912621, 92.1116504854, 13.5097087379);
387
+ }
388
+ .formeo button.error {
389
+ background-color: rgb(217, 83, 79);
390
+ border-color: rgb(201.4953271028, 48.0841121495, 43.5046728972);
391
+ }
392
+ .formeo button[disabled] {
393
+ background-color: #cccccc;
394
+ color: #fff;
395
+ }
396
+ .formeo button:focus {
397
+ border: 1px solid rgb(102, 175, 233);
398
+ }
399
+ .formeo button:hover, .formeo button:focus {
400
+ outline: 0 none;
401
+ }
402
+ .formeo .f-addon {
403
+ font-size: 100%;
404
+ font-family: inherit;
405
+ height: 2.1em;
406
+ line-height: 1.5;
407
+ margin: 0;
408
+ border: 1px solid #cccccc;
409
+ border-radius: 4px;
410
+ background-color: #fff;
411
+ width: 100%;
412
+ padding: 0.3em 0.6em;
413
+ box-sizing: border-box;
414
+ width: auto;
415
+ }
416
+ .formeo .f-addon:focus {
417
+ border: 1px solid rgb(102, 175, 233);
418
+ outline: none;
419
+ }
420
+ .formeo .f-addon label {
421
+ margin: 1px 0 0 3px;
422
+ }
423
+ .formeo .f-addon:last-child {
424
+ margin-left: -1px;
425
+ }
426
+ .formeo .f-btn-group {
427
+ display: inline-flex;
428
+ vertical-align: middle;
429
+ }
430
+ .formeo .f-btn-group > button {
431
+ flex: 0 1 auto;
432
+ }
433
+ .formeo .f-btn-group > button:not(:first-child):not(:last-child):not(.dropdown-toggle) {
434
+ border-radius: 0;
435
+ }
436
+ .formeo .f-btn-group > button:last-child:not(:first-child):not(.dropdown-toggle) {
437
+ border-bottom-left-radius: 0;
438
+ border-top-left-radius: 0;
439
+ }
440
+ .formeo .f-btn-group > button:first-child {
441
+ margin-left: 0;
442
+ }
443
+ .formeo .f-btn-group > button:first-child:not(:last-child):not(.dropdown-toggle) {
444
+ border-bottom-right-radius: 0;
445
+ border-top-right-radius: 0;
446
+ }
447
+ .formeo .f-btn-group button + button,
448
+ .formeo .f-btn-group button + .f-btn-group,
449
+ .formeo .f-btn-group .f-btn-group + button,
450
+ .formeo .f-btn-group .f-btn-group + .f-btn-group,
451
+ .formeo .f-btn-group .f-btn-group-vertical button + button,
452
+ .formeo .f-btn-group .f-btn-group-vertical button + .f-btn-group,
453
+ .formeo .f-btn-group .f-btn-group-vertical .f-btn-group + button,
454
+ .formeo .f-btn-group .f-btn-group-vertical .f-btn-group + .f-btn-group {
455
+ margin-left: -1px;
456
+ }
457
+ .formeo .f-input-group {
458
+ display: flex;
459
+ flex-direction: row;
460
+ justify-content: flex-start;
461
+ flex-wrap: nowrap;
462
+ align-content: stretch;
463
+ align-items: stretch;
464
+ display: inline-flex;
465
+ vertical-align: bottom;
466
+ }
467
+ .formeo .f-input-group select {
468
+ appearance: none;
469
+ background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0ZWQgYnkgSWNvTW9vbi5pbyAtLT4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSIyNCIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDI0IDMyIj4KPHBhdGggZmlsbD0iIzQ0NCIgZD0iTTAgMTJsMTEuOTkyIDExLjk5MiAxMS45OTItMTEuOTkyaC0yMy45ODR6Ij48L3BhdGg+Cjwvc3ZnPgo=");
470
+ background-position: right 10px top 2px;
471
+ background-repeat: no-repeat;
472
+ background-size: 16px;
473
+ }
474
+ .formeo .f-input-group select::-ms-expand {
475
+ display: none;
476
+ }
477
+ .formeo .f-input-group .f-addon,
478
+ .formeo .f-input-group input,
479
+ .formeo .f-input-group select {
480
+ flex: 0 1 auto;
481
+ border-radius: 0;
482
+ }
483
+ .formeo .f-input-group .f-addon:last-child,
484
+ .formeo .f-input-group input:last-child,
485
+ .formeo .f-input-group select:last-child {
486
+ border-right-width: 1px;
487
+ border-radius: 0 4px 4px 0;
488
+ }
489
+ .formeo .f-input-group .f-addon:first-child,
490
+ .formeo .f-input-group input:first-child,
491
+ .formeo .f-input-group select:first-child {
492
+ border-radius: 4px 0 0 4px;
493
+ border-left-width: 1px;
494
+ }
495
+ .formeo .f-input-group .f-addon:first-child:last-child,
496
+ .formeo .f-input-group input:first-child:last-child,
497
+ .formeo .f-input-group select:first-child:last-child {
498
+ border-radius: 4px;
499
+ }
500
+ .formeo .f-input-group .f-addon:focus + input,
501
+ .formeo .f-input-group .f-addon:focus + select,
502
+ .formeo .f-input-group input:focus + input,
503
+ .formeo .f-input-group input:focus + select,
504
+ .formeo .f-input-group select:focus + input,
505
+ .formeo .f-input-group select:focus + select {
506
+ border-left: 1px solid rgb(102, 175, 233);
507
+ }
508
+ .formeo .text-primary {
509
+ color: rgb(50, 93, 136);
510
+ }
511
+ .formeo .text-success {
512
+ color: rgb(147, 197, 75);
513
+ }
514
+ .formeo .text-warning {
515
+ color: rgb(244, 124, 60);
516
+ }
517
+ .formeo .text-error {
518
+ color: rgb(217, 83, 79);
519
+ }
520
+ .formeo.formeo-editor {
521
+ display: flex;
522
+ flex-direction: row;
523
+ text-align: left;
524
+ gap: 16px;
525
+ /*
526
+ Mixins
527
+ */
528
+ /*
529
+ Animations
530
+ */
531
+ /*
532
+ Mixins
533
+ */
534
+ }
535
+ @keyframes PLACEHOLDER {
536
+ 0% {
537
+ height: 1px;
538
+ }
539
+ 100% {
540
+ height: 15px;
541
+ }
542
+ }
543
+ @keyframes DRAG_GHOST {
544
+ 0% {
545
+ box-shadow: 0 0 0 0 #999999;
546
+ }
547
+ 100% {
548
+ box-shadow: 0 0 30px 0 #999999;
549
+ }
550
+ }
551
+ @keyframes EDIT_PULSE {
552
+ from, to {
553
+ border-color: rgb(102, 175, 233);
554
+ }
555
+ 50% {
556
+ border-color: rgb(191.1771428571, 221.6285714286, 245.8228571429);
557
+ }
558
+ }
559
+ @keyframes COMPONENT_HIGHLIGHT_PULSE {
560
+ 0% {
561
+ box-shadow: 0 0 1px 8px rgb(153, 84, 187);
562
+ }
563
+ 100% {
564
+ box-shadow: 0 0 0 0 rgb(153, 84, 187);
565
+ }
566
+ }
567
+ @keyframes SLIDE_UP {
568
+ 0% {
569
+ transform: translateY(100%);
570
+ clip-path: inset(0 0 100% -20%);
571
+ }
572
+ 100% {
573
+ transform: translateY(0);
574
+ clip-path: inset(0 0 0 -20%);
575
+ }
576
+ }
577
+ .formeo.formeo-editor .component-tag {
578
+ display: none;
579
+ height: 24px;
580
+ flex-direction: row;
581
+ gap: 4px;
582
+ align-items: center;
583
+ position: absolute;
584
+ font-size: 0.8em;
585
+ padding: 0 8px;
586
+ left: 50%;
587
+ top: -24px;
588
+ border-top-left-radius: 8px;
589
+ border-top-right-radius: 8px;
590
+ background-color: #fff;
591
+ border-color: #cccccc;
592
+ border-style: solid;
593
+ border-width: 1px 1px 0 1px;
594
+ }
595
+ .formeo.formeo-editor .component-tag [class*=-handle-] {
596
+ width: 12px;
597
+ height: 12px;
598
+ }
599
+ .formeo.formeo-editor .component-tag .f-i-component-corner {
600
+ position: absolute;
601
+ width: 8px;
602
+ height: 8px;
603
+ }
604
+ .formeo.formeo-editor .component-tag .f-i-component-corner.bottom-right {
605
+ bottom: 0;
606
+ right: -8px;
607
+ }
608
+ .formeo.formeo-editor .component-tag .f-i-component-corner.bottom-left {
609
+ bottom: 0;
610
+ left: -8px;
611
+ transform: scaleX(-1);
612
+ }
613
+ .formeo.formeo-editor .children {
614
+ margin: 0;
615
+ padding: 0;
616
+ list-style: none;
617
+ }
618
+ .formeo.formeo-editor .group-actions {
619
+ display: flex;
620
+ transition: opacity 0.3s ease-in-out allow-discrete;
621
+ position: absolute;
622
+ top: 0;
623
+ line-height: 0;
624
+ z-index: 1;
625
+ align-items: center;
626
+ justify-content: center;
627
+ flex-direction: row;
628
+ border-radius: 8px;
629
+ }
630
+ .formeo.formeo-editor .group-actions .action-btn-wrap {
631
+ display: none;
632
+ align-items: center;
633
+ justify-content: center;
634
+ border-top-right-radius: 8px;
635
+ border-bottom-left-radius: 8px;
636
+ border-bottom-right-radius: 8px;
637
+ transition: opacity 1s ease-in-out allow-discrete;
638
+ }
639
+ .formeo.formeo-editor .group-actions .action-btn-wrap .component-handle {
640
+ opacity: 0.65;
641
+ }
642
+ .formeo.formeo-editor .group-actions .action-btn-wrap button {
643
+ background-color: #fff;
644
+ }
645
+ .formeo.formeo-editor .group-actions button {
646
+ background-color: transparent;
647
+ width: 24px;
648
+ height: 24px;
649
+ padding: 6px;
650
+ border: 0 none;
651
+ line-height: 0;
652
+ }
653
+ .formeo.formeo-editor .group-actions button:focus {
654
+ border: 0 none;
655
+ outline: 0 none;
656
+ box-shadow: none;
657
+ }
658
+ .formeo.formeo-editor .group-actions .svg-icon {
659
+ width: 12px;
660
+ height: 12px;
661
+ }
662
+ .formeo.formeo-editor .last-field .group-actions button:last-child {
663
+ border-radius: 0;
664
+ }
665
+ .formeo.formeo-editor .column-editing-field .column-actions {
666
+ display: none;
667
+ }
668
+ .formeo.formeo-editor .group-config {
669
+ display: none;
670
+ padding: 0.5rem;
671
+ }
672
+ .formeo.formeo-editor .editing-row .column-actions {
673
+ display: none;
674
+ }
675
+ .formeo.formeo-editor .hovering > .children,
676
+ .formeo.formeo-editor .hovering > .field-preview,
677
+ .formeo.formeo-editor .hovering > .prev-label {
678
+ opacity: 0.65;
679
+ }
680
+ .formeo.formeo-editor .hovering .group-actions .f-i-handle {
681
+ display: none;
682
+ }
683
+ .formeo.formeo-editor .formeo-row {
684
+ transition: background-color 125ms ease-in-out;
685
+ position: relative;
686
+ clear: both;
687
+ background-color: #fff;
688
+ box-shadow: 0 0 0 1px #cccccc;
689
+ padding: 16px;
690
+ }
691
+ .formeo.formeo-editor .formeo-row > .children {
692
+ display: flex;
693
+ flex-direction: row;
694
+ justify-content: flex-start;
695
+ flex-wrap: nowrap;
696
+ align-content: stretch;
697
+ align-items: stretch;
698
+ gap: 16px;
699
+ min-height: 32px;
700
+ }
701
+ .formeo.formeo-editor .formeo-row::after {
702
+ clear: both;
703
+ }
704
+ .formeo.formeo-editor .formeo-row.control-ghost {
705
+ padding: 10px;
706
+ }
707
+ .formeo.formeo-editor .formeo-row:first-child {
708
+ border-top-right-radius: 8px;
709
+ }
710
+ .formeo.formeo-editor .formeo-row:first-child:not(.editing-row, .hovering-row) {
711
+ border-top-left-radius: 8px;
712
+ }
713
+ .formeo.formeo-editor .formeo-row:last-child {
714
+ border-bottom-left-radius: 8px;
715
+ border-bottom-right-radius: 8px;
716
+ }
717
+ .formeo.formeo-editor .formeo-row:only-child {
718
+ border-radius: 8px;
719
+ }
720
+ .formeo.formeo-editor .formeo-row.resizing-columns .formeo-column {
721
+ transition: none;
722
+ }
723
+ .formeo.formeo-editor .formeo-row.empty::after {
724
+ left: 0;
725
+ transform: translate(8px, -50%);
726
+ }
727
+ .formeo.formeo-editor .formeo-row .layout-row-control {
728
+ display: none;
729
+ }
730
+ .formeo.formeo-editor .formeo-row .row-tag {
731
+ left: -1px;
732
+ border-color: rgb(229, 70, 188.2);
733
+ }
734
+ .formeo.formeo-editor .formeo-row .row-tag .f-i-component-corner {
735
+ fill: #fff;
736
+ stroke: rgb(229, 70, 188.2);
737
+ }
738
+ .formeo.formeo-editor .formeo-row:has(.hovering-column) .row-actions,
739
+ .formeo.formeo-editor .formeo-row:has(.hovering-column) .field-actions {
740
+ display: none;
741
+ }
742
+ .formeo.formeo-editor .formeo-row.sortable-ghost {
743
+ background-color: rgb(244.7109004739, 181.7890995261, 228.56492891);
744
+ box-shadow: 0 0 0 1px rgb(229, 70, 188.2);
745
+ }
746
+ .formeo.formeo-editor .formeo-row.sortable-ghost * {
747
+ opacity: 0;
748
+ }
749
+ .formeo.formeo-editor .formeo-row:has(.editing-field) .row-actions {
750
+ display: none;
751
+ }
752
+ .formeo.formeo-editor .formeo-row.highlight-component {
753
+ box-shadow: 0 0 4px 2px rgb(229, 70, 188.2);
754
+ }
755
+ .formeo.formeo-editor .row-moving {
756
+ background-color: rgb(244.7109004739, 181.7890995261, 228.56492891) !important;
757
+ }
758
+ .formeo.formeo-editor .row-moving .action-btn-wrap button {
759
+ background-color: rgb(244.7109004739, 181.7890995261, 228.56492891);
760
+ }
761
+ .formeo.formeo-editor .row-moving .row-tag {
762
+ background-color: rgb(244.7109004739, 181.7890995261, 228.56492891);
763
+ }
764
+ .formeo.formeo-editor .row-moving .row-tag .f-i-component-corner {
765
+ fill: rgb(244.7109004739, 181.7890995261, 228.56492891);
766
+ }
767
+ .formeo.formeo-editor .row-actions {
768
+ left: 0;
769
+ }
770
+ .formeo.formeo-editor .hovering-row .column-actions,
771
+ .formeo.formeo-editor .hovering-row .field-actions {
772
+ display: none;
773
+ }
774
+ .formeo.formeo-editor .hovering-row.editing-row::before {
775
+ border-right-width: 0;
776
+ }
777
+ .formeo.formeo-editor .editing-row {
778
+ display: block;
779
+ }
780
+ .formeo.formeo-editor .editing-row .row-edit {
781
+ display: block;
782
+ }
783
+ .formeo.formeo-editor .editing-row.hovering-row .formeo-column {
784
+ opacity: 1;
785
+ }
786
+ .formeo.formeo-editor .hovering-row,
787
+ .formeo.formeo-editor .editing-row {
788
+ box-shadow: 0 0 0 1px rgb(229, 70, 188.2);
789
+ }
790
+ .formeo.formeo-editor .hovering-row:first-child,
791
+ .formeo.formeo-editor .editing-row:first-child {
792
+ border-top-left-radius: 0;
793
+ }
794
+ .formeo.formeo-editor .hovering-row .row-handle,
795
+ .formeo.formeo-editor .editing-row .row-handle {
796
+ display: none;
797
+ }
798
+ .formeo.formeo-editor .hovering-row .row-tag,
799
+ .formeo.formeo-editor .editing-row .row-tag {
800
+ display: flex;
801
+ }
802
+ .formeo.formeo-editor .hovering-row .row-action-btn-wrap,
803
+ .formeo.formeo-editor .editing-row .row-action-btn-wrap {
804
+ display: flex;
805
+ }
806
+ .formeo.formeo-editor .hovering-row .row-action-btn-wrap button:last-child,
807
+ .formeo.formeo-editor .editing-row .row-action-btn-wrap button:last-child {
808
+ border-bottom-right-radius: 8px;
809
+ }
810
+ .formeo.formeo-editor .row-edit {
811
+ padding-top: 2rem;
812
+ }
813
+ .formeo.formeo-editor .input-group-addon label {
814
+ margin-bottom: 0;
815
+ }
816
+ .formeo.formeo-editor .formeo-column {
817
+ margin: 0;
818
+ padding: 0;
819
+ list-style: none;
820
+ transition: width 266ms;
821
+ position: relative;
822
+ flex-direction: column;
823
+ will-change: width;
824
+ max-width: 100%;
825
+ }
826
+ .formeo.formeo-editor .formeo-column > .children {
827
+ display: flex;
828
+ flex-direction: column;
829
+ justify-content: flex-start;
830
+ gap: 16px;
831
+ }
832
+ .formeo.formeo-editor .formeo-column .column-tag {
833
+ border-color: rgb(229, 142.6, 70);
834
+ }
835
+ .formeo.formeo-editor .formeo-column .column-tag .f-i-component-corner {
836
+ fill: #fff;
837
+ stroke: rgb(229, 142.6, 70);
838
+ }
839
+ .formeo.formeo-editor .formeo-column .column-tag,
840
+ .formeo.formeo-editor .formeo-column .column-actions {
841
+ transform: translateX(-50%);
842
+ }
843
+ .formeo.formeo-editor .formeo-column[class*=col-] {
844
+ padding: 0;
845
+ }
846
+ .formeo.formeo-editor .formeo-column:first-child {
847
+ border-bottom-left-radius: 8px;
848
+ }
849
+ .formeo.formeo-editor .formeo-column:last-child {
850
+ border-bottom-right-radius: 8px;
851
+ }
852
+ .formeo.formeo-editor .formeo-column:last-child .resize-x-handle {
853
+ display: none !important;
854
+ }
855
+ .formeo.formeo-editor .formeo-column:only-child {
856
+ border-bottom-right-radius: 8px;
857
+ border-bottom-left-radius: 8px;
858
+ }
859
+ .formeo.formeo-editor .formeo-column:only-child .resize-x-handle {
860
+ display: none !important;
861
+ }
862
+ .formeo.formeo-editor .formeo-column .resize-x-handle {
863
+ display: none;
864
+ position: absolute;
865
+ right: -16px;
866
+ top: 0;
867
+ bottom: 0;
868
+ width: 16px;
869
+ z-index: 2;
870
+ cursor: ew-resize;
871
+ }
872
+ .formeo.formeo-editor .formeo-column .resize-x-handle::before {
873
+ width: 0;
874
+ right: 6px;
875
+ border: 1px dashed rgb(238.4265402844, 183.3516587678, 137.0734597156);
876
+ border-width: 0 2px;
877
+ display: block;
878
+ top: 0;
879
+ position: absolute;
880
+ height: 100%;
881
+ content: "";
882
+ }
883
+ .formeo.formeo-editor .formeo-column .resize-x-handle svg {
884
+ fill: rgb(238.4265402844, 183.3516587678, 137.0734597156);
885
+ position: absolute;
886
+ right: 1px;
887
+ width: 14px;
888
+ }
889
+ .formeo.formeo-editor .formeo-column .resize-x-handle svg.f-i-triangle-down {
890
+ top: -14px;
891
+ }
892
+ .formeo.formeo-editor .formeo-column .resize-x-handle svg.f-i-triangle-up {
893
+ bottom: -14px;
894
+ }
895
+ .formeo.formeo-editor .formeo-column .resize-x-handle:hover::before {
896
+ border-color: rgb(229, 142.6, 70);
897
+ }
898
+ .formeo.formeo-editor .formeo-column .resize-x-handle:hover svg {
899
+ fill: rgb(229, 142.6, 70);
900
+ }
901
+ .formeo.formeo-editor .formeo-column.editing-column {
902
+ overflow: hidden;
903
+ }
904
+ .formeo.formeo-editor .formeo-column.editing-column .column-edit {
905
+ display: block;
906
+ }
907
+ .formeo.formeo-editor .formeo-column:has(.hovering-field) .column-actions {
908
+ display: none;
909
+ }
910
+ .formeo.formeo-editor .formeo-column.sortable-ghost {
911
+ background-color: rgb(244.7109004739, 210.5194312796, 181.7890995261);
912
+ box-shadow: 0 0 0 1px rgb(229, 142.6, 70);
913
+ }
914
+ .formeo.formeo-editor .formeo-column.sortable-ghost * {
915
+ opacity: 0;
916
+ }
917
+ .formeo.formeo-editor .formeo-column:has(.editing-field) .column-actions {
918
+ display: none;
919
+ }
920
+ .formeo.formeo-editor .formeo-column.highlight-component {
921
+ box-shadow: 0 0 4px 2px rgb(229, 142.6, 70);
922
+ }
923
+ .formeo.formeo-editor .editing-row .formeo-column,
924
+ .formeo.formeo-editor .editing-row .empty {
925
+ border-radius: 8px;
926
+ height: 60px;
927
+ background-color: rgb(229.5, 229.5, 229.5);
928
+ }
929
+ .formeo.formeo-editor .editing-row .formeo-column.empty,
930
+ .formeo.formeo-editor .editing-row .empty.empty {
931
+ min-height: 0;
932
+ }
933
+ .formeo.formeo-editor .editing-row .formeo-column .formeo-field,
934
+ .formeo.formeo-editor .editing-row .empty .formeo-field {
935
+ display: none;
936
+ }
937
+ .formeo.formeo-editor .editing-row .formeo-column .resize-x-handle,
938
+ .formeo.formeo-editor .editing-row .empty .resize-x-handle {
939
+ display: block;
940
+ }
941
+ .formeo.formeo-editor .editing-row .formeo-column::after,
942
+ .formeo.formeo-editor .editing-row .empty::after {
943
+ color: #333333 !important;
944
+ line-height: 1em;
945
+ opacity: 1;
946
+ font-size: 1.1em;
947
+ content: attr(data-col-width) !important;
948
+ display: block;
949
+ width: 100%;
950
+ text-align: center;
951
+ position: absolute;
952
+ left: 50%;
953
+ margin-top: 0;
954
+ top: 50%;
955
+ transform: translate(-50%, -50%);
956
+ }
957
+ .formeo.formeo-editor .editing-field-preview .column-actions {
958
+ display: none;
959
+ }
960
+ .formeo.formeo-editor .column-moving {
961
+ background-color: rgb(244.7109004739, 210.5194312796, 181.7890995261);
962
+ }
963
+ .formeo.formeo-editor .column-moving .action-btn-wrap button {
964
+ background-color: rgb(244.7109004739, 210.5194312796, 181.7890995261);
965
+ }
966
+ .formeo.formeo-editor .column-moving .column-tag {
967
+ background-color: rgb(244.7109004739, 210.5194312796, 181.7890995261);
968
+ }
969
+ .formeo.formeo-editor .column-moving .column-tag .f-i-component-corner {
970
+ fill: rgb(244.7109004739, 210.5194312796, 181.7890995261);
971
+ }
972
+ .formeo.formeo-editor button.column-handle {
973
+ background-color: rgba(255, 255, 255, 0.9);
974
+ }
975
+ .formeo.formeo-editor .hovering-column .column-tag {
976
+ display: flex;
977
+ }
978
+ .formeo.formeo-editor .hovering-column .column-handle {
979
+ display: none;
980
+ }
981
+ .formeo.formeo-editor .hovering-column .column-action-btn-wrap {
982
+ display: flex;
983
+ }
984
+ .formeo.formeo-editor .hovering-column:first-child {
985
+ border-top-left-radius: 0;
986
+ }
987
+ .formeo.formeo-editor .hovering-column::after {
988
+ opacity: 0;
989
+ }
990
+ .formeo.formeo-editor .hovering-column,
991
+ .formeo.formeo-editor .editing-column {
992
+ box-shadow: 0 0 0 1px rgb(229, 142.6, 70);
993
+ }
994
+ .formeo.formeo-editor .column-actions {
995
+ padding: 0;
996
+ left: 50%;
997
+ transition: width 0.15s;
998
+ }
999
+ .formeo.formeo-editor .column-actions .f-i-handle {
1000
+ transform: rotate(90deg);
1001
+ }
1002
+ .formeo.formeo-editor .formeo-field {
1003
+ min-height: 26px;
1004
+ position: relative;
1005
+ list-style: none;
1006
+ margin: 0;
1007
+ will-change: box-shadow;
1008
+ }
1009
+ .formeo.formeo-editor .formeo-field.highlight-component {
1010
+ box-shadow: 0 0 4px 2px rgb(124.6, 229, 70);
1011
+ }
1012
+ .formeo.formeo-editor .formeo-field:last-child {
1013
+ border-bottom-right-radius: 4px;
1014
+ border-bottom-left-radius: 4px;
1015
+ }
1016
+ .formeo.formeo-editor .formeo-field.first-field {
1017
+ border-top-right-radius: 4px;
1018
+ }
1019
+ .formeo.formeo-editor .formeo-field.first-field .field-actions {
1020
+ border-top-right-radius: 4px;
1021
+ }
1022
+ .formeo.formeo-editor .formeo-field .prev-label {
1023
+ min-height: 24px;
1024
+ max-width: calc(100% - 24px);
1025
+ display: flex;
1026
+ align-items: flex-end;
1027
+ margin-bottom: 4px;
1028
+ }
1029
+ .formeo.formeo-editor .formeo-field [contenteditable] {
1030
+ padding: 1px 2px;
1031
+ user-select: text;
1032
+ display: inline-block;
1033
+ position: relative;
1034
+ min-width: 24px;
1035
+ }
1036
+ .formeo.formeo-editor .formeo-field [contenteditable]::after {
1037
+ content: "";
1038
+ width: 100%;
1039
+ position: absolute;
1040
+ bottom: 0;
1041
+ left: 0;
1042
+ border-bottom: 1px dashed #cccccc;
1043
+ }
1044
+ .formeo.formeo-editor .formeo-field [contenteditable]:focus {
1045
+ border-radius: 4px;
1046
+ border-bottom-color: transparent;
1047
+ outline: none;
1048
+ box-shadow: 0 0 0 1px rgb(102, 175, 233) inset;
1049
+ }
1050
+ .formeo.formeo-editor .formeo-field [contenteditable]:focus::after {
1051
+ display: none;
1052
+ }
1053
+ .formeo.formeo-editor .formeo-field .form-check {
1054
+ margin-left: 1.25em;
1055
+ }
1056
+ .formeo.formeo-editor .formeo-field .form-check-input:only-child {
1057
+ position: absolute;
1058
+ }
1059
+ .formeo.formeo-editor .formeo-field.field-type-hidden {
1060
+ border: 1px dashed #cccccc;
1061
+ }
1062
+ .formeo.formeo-editor .formeo-field.sortable-ghost {
1063
+ background-color: rgb(203.3962085308, 244.7109004739, 181.7890995261);
1064
+ box-shadow: 0 0 0 1px rgb(124.6, 229, 70);
1065
+ }
1066
+ .formeo.formeo-editor .formeo-field.sortable-ghost * {
1067
+ opacity: 0;
1068
+ }
1069
+ .formeo.formeo-editor .field-tag {
1070
+ right: -1px;
1071
+ left: auto;
1072
+ top: -24px;
1073
+ border-color: rgb(124.6, 229, 70);
1074
+ background-color: #fff;
1075
+ }
1076
+ .formeo.formeo-editor .field-tag .f-i-component-corner {
1077
+ fill: #fff;
1078
+ stroke: rgb(124.6, 229, 70);
1079
+ }
1080
+ .formeo.formeo-editor .editing-field,
1081
+ .formeo.formeo-editor .hovering-field {
1082
+ box-shadow: 0 0 0 1px rgb(124.6, 229, 70);
1083
+ }
1084
+ .formeo.formeo-editor .editing-field .field-tag,
1085
+ .formeo.formeo-editor .hovering-field .field-tag {
1086
+ display: flex;
1087
+ }
1088
+ .formeo.formeo-editor .editing-field .field-action-btn-wrap,
1089
+ .formeo.formeo-editor .hovering-field .field-action-btn-wrap {
1090
+ display: flex;
1091
+ }
1092
+ .formeo.formeo-editor .editing-field .field-handle,
1093
+ .formeo.formeo-editor .hovering-field .field-handle {
1094
+ display: none;
1095
+ }
1096
+ .formeo.formeo-editor .field-actions {
1097
+ border-color: transparent;
1098
+ border-width: 1px 1px 0 0;
1099
+ border-style: solid;
1100
+ right: 0;
1101
+ text-align: right;
1102
+ border-bottom-left-radius: 4px;
1103
+ border-bottom-right-radius: 0;
1104
+ }
1105
+ .formeo.formeo-editor .field-actions .action-btn-wrap {
1106
+ flex-direction: row-reverse;
1107
+ }
1108
+ .formeo.formeo-editor .field-moving {
1109
+ background-color: rgb(203.3962085308, 244.7109004739, 181.7890995261);
1110
+ }
1111
+ .formeo.formeo-editor .field-moving .action-btn-wrap button {
1112
+ background-color: rgb(203.3962085308, 244.7109004739, 181.7890995261);
1113
+ }
1114
+ .formeo.formeo-editor .field-moving .field-tag {
1115
+ background-color: rgb(203.3962085308, 244.7109004739, 181.7890995261);
1116
+ }
1117
+ .formeo.formeo-editor .field-moving .field-tag .f-i-component-corner {
1118
+ fill: rgb(203.3962085308, 244.7109004739, 181.7890995261);
1119
+ }
1120
+ .formeo.formeo-editor .editing-field {
1121
+ z-index: 1;
1122
+ }
1123
+ .formeo.formeo-editor .editing-field-preview .field-actions {
1124
+ display: none;
1125
+ }
1126
+ .formeo.formeo-editor .field-preview p {
1127
+ white-space: normal;
1128
+ }
1129
+ .formeo.formeo-editor .field-preview .f-checkbox.highlight-component,
1130
+ .formeo.formeo-editor .field-preview .f-radio.highlight-component {
1131
+ box-shadow: 0 0 2px 1px rgb(70, 229, 206.2) inset;
1132
+ }
1133
+ .formeo.formeo-editor .component-edit {
1134
+ display: none;
1135
+ overflow: hidden;
1136
+ }
1137
+ .formeo.formeo-editor .component-edit label {
1138
+ font-size: 0.825em;
1139
+ }
1140
+ .formeo.formeo-editor .component-edit .panel-nav {
1141
+ margin-bottom: 0;
1142
+ padding: 0;
1143
+ overflow: hidden;
1144
+ }
1145
+ .formeo.formeo-editor .component-edit .panel-nav button {
1146
+ border-bottom-left-radius: 0;
1147
+ border-bottom-right-radius: 0;
1148
+ }
1149
+ .formeo.formeo-editor .component-edit .component-prop {
1150
+ display: flex;
1151
+ }
1152
+ .formeo.formeo-editor .component-edit .prop-controls {
1153
+ flex-shrink: 0;
1154
+ align-items: center;
1155
+ display: flex;
1156
+ }
1157
+ .formeo.formeo-editor .component-edit .prop-controls .prop-remove {
1158
+ z-index: 3;
1159
+ }
1160
+ .formeo.formeo-editor .component-edit .prop-controls.conditions-prop-controls {
1161
+ display: flex;
1162
+ align-items: flex-start;
1163
+ margin-left: 16px;
1164
+ min-width: 16px;
1165
+ }
1166
+ .formeo.formeo-editor .component-edit .prop-controls.conditions-prop-controls .prop-remove {
1167
+ margin-top: -1px;
1168
+ }
1169
+ .formeo.formeo-editor .component-edit .prop-controls button {
1170
+ position: relative;
1171
+ }
1172
+ .formeo.formeo-editor .component-edit .prop-controls .svg-icon {
1173
+ width: 10px;
1174
+ height: 10px;
1175
+ left: 50%;
1176
+ position: absolute;
1177
+ top: 50%;
1178
+ transform: translate(-50%, -50%);
1179
+ }
1180
+ .formeo.formeo-editor .component-edit .prop-control {
1181
+ width: 16px;
1182
+ height: 16px;
1183
+ right: 0;
1184
+ bottom: 0;
1185
+ position: absolute;
1186
+ padding: 0;
1187
+ }
1188
+ .formeo.formeo-editor .component-edit .prop-control:nth-of-type(1) {
1189
+ right: 0px;
1190
+ }
1191
+ .formeo.formeo-editor .component-edit .prop-control:nth-of-type(2) {
1192
+ right: 24px;
1193
+ }
1194
+ .formeo.formeo-editor .component-edit .prop-control:nth-of-type(3) {
1195
+ right: 48px;
1196
+ }
1197
+ .formeo.formeo-editor .component-edit .prop-control:nth-of-type(4) {
1198
+ right: 72px;
1199
+ }
1200
+ .formeo.formeo-editor .component-edit .prop-control:first-child {
1201
+ right: 0;
1202
+ }
1203
+ .formeo.formeo-editor :not(.control-count-1) .component-edit .prop-control:last-child {
1204
+ border-radius: 4px 0 0 4px;
1205
+ display: none;
1206
+ }
1207
+ .formeo.formeo-editor :not(.control-count-1) .component-edit .prop-control:first-child {
1208
+ border-radius: 4px;
1209
+ }
1210
+ .formeo.formeo-editor .component-edit .prop-control:hover:first-child {
1211
+ border-radius: 0 4px 4px 0;
1212
+ }
1213
+ .formeo.formeo-editor .component-edit .prop-control:hover:first-child:last-child {
1214
+ border-radius: 4px;
1215
+ }
1216
+ .formeo.formeo-editor .component-edit .prop-control:hover:last-child {
1217
+ display: inline-block;
1218
+ }
1219
+ .formeo.formeo-editor .component-edit .prop-control:last-child:first-child {
1220
+ display: inline-block;
1221
+ border-radius: 4px;
1222
+ margin-right: 0;
1223
+ }
1224
+ .formeo.formeo-editor .component-edit .to-remove {
1225
+ position: relative;
1226
+ }
1227
+ .formeo.formeo-editor .component-edit .to-remove::before {
1228
+ content: "";
1229
+ position: absolute;
1230
+ top: 0;
1231
+ left: 0;
1232
+ width: 100%;
1233
+ height: 100%;
1234
+ background-color: rgba(217, 83, 79, 0.1);
1235
+ z-index: 2;
1236
+ }
1237
+ .formeo.formeo-editor .component-edit .prop-wrap {
1238
+ position: relative;
1239
+ margin-bottom: 16px;
1240
+ list-style: none;
1241
+ margin-left: 0;
1242
+ }
1243
+ .formeo.formeo-editor .component-edit .prop-wrap:first-child .conditions-prop-controls .prop-remove {
1244
+ display: none;
1245
+ }
1246
+ .formeo.formeo-editor .component-edit .field-edit-group {
1247
+ padding: 8px 8px 0;
1248
+ }
1249
+ .formeo.formeo-editor .component-edit [contenteditable] {
1250
+ display: flex;
1251
+ flex-direction: row;
1252
+ justify-content: flex-start;
1253
+ flex-wrap: nowrap;
1254
+ align-content: stretch;
1255
+ align-items: stretch;
1256
+ }
1257
+ .formeo.formeo-editor .component-edit .prop-inputs,
1258
+ .formeo.formeo-editor .component-edit .prop-controls {
1259
+ transition: width 150ms, display 150ms;
1260
+ will-change: width;
1261
+ }
1262
+ .formeo.formeo-editor .component-edit .prop-inputs .f-addon,
1263
+ .formeo.formeo-editor .component-edit .prop-inputs input:not([type=checkbox]):not([type=radio]),
1264
+ .formeo.formeo-editor .component-edit .prop-inputs select,
1265
+ .formeo.formeo-editor .component-edit .prop-inputs textarea,
1266
+ .formeo.formeo-editor .component-edit .prop-inputs [contenteditable],
1267
+ .formeo.formeo-editor .component-edit .prop-controls .f-addon,
1268
+ .formeo.formeo-editor .component-edit .prop-controls input:not([type=checkbox]):not([type=radio]),
1269
+ .formeo.formeo-editor .component-edit .prop-controls select,
1270
+ .formeo.formeo-editor .component-edit .prop-controls textarea,
1271
+ .formeo.formeo-editor .component-edit .prop-controls [contenteditable] {
1272
+ font-size: 0.825em;
1273
+ }
1274
+ .formeo.formeo-editor .component-edit .prop-inputs .f-addon:focus,
1275
+ .formeo.formeo-editor .component-edit .prop-inputs input:not([type=checkbox]):not([type=radio]):focus,
1276
+ .formeo.formeo-editor .component-edit .prop-inputs select:focus,
1277
+ .formeo.formeo-editor .component-edit .prop-inputs textarea:focus,
1278
+ .formeo.formeo-editor .component-edit .prop-inputs [contenteditable]:focus,
1279
+ .formeo.formeo-editor .component-edit .prop-controls .f-addon:focus,
1280
+ .formeo.formeo-editor .component-edit .prop-controls input:not([type=checkbox]):not([type=radio]):focus,
1281
+ .formeo.formeo-editor .component-edit .prop-controls select:focus,
1282
+ .formeo.formeo-editor .component-edit .prop-controls textarea:focus,
1283
+ .formeo.formeo-editor .component-edit .prop-controls [contenteditable]:focus {
1284
+ z-index: 1;
1285
+ }
1286
+ .formeo.formeo-editor .component-edit .control-count-2 .prop-controls:hover {
1287
+ width: 48px;
1288
+ }
1289
+ .formeo.formeo-editor .component-edit .control-count-2 .prop-controls:hover + .prop-inputs {
1290
+ width: calc(100% - 24px);
1291
+ }
1292
+ .formeo.formeo-editor .component-edit.panel-count-1 .panel-nav {
1293
+ border-bottom: 1px solid #999999;
1294
+ }
1295
+ .formeo.formeo-editor .component-edit.panel-count-1 .panel-nav button {
1296
+ display: none;
1297
+ }
1298
+ .formeo.formeo-editor .component-edit.panel-count-1 .panel-labels {
1299
+ background-color: transparent;
1300
+ }
1301
+ .formeo.formeo-editor .component-edit[popover] {
1302
+ display: block;
1303
+ width: 66.7%;
1304
+ height: 66.7%;
1305
+ top: 50%;
1306
+ left: 50%;
1307
+ transform: translate(-50%, -50%);
1308
+ box-shadow: 0 0 24px 1px #000;
1309
+ border: 1px solid #000;
1310
+ border-radius: 8px;
1311
+ z-index: 100;
1312
+ }
1313
+ .formeo.formeo-editor .f-condition-row {
1314
+ display: flex;
1315
+ width: 100%;
1316
+ position: relative;
1317
+ border-bottom: 1px solid #cccccc;
1318
+ }
1319
+ .formeo.formeo-editor .f-condition-row > [class^=condition-] {
1320
+ border-left: 1px solid #cccccc;
1321
+ }
1322
+ .formeo.formeo-editor .f-condition-row .manage-condition-type {
1323
+ display: flex;
1324
+ align-items: center;
1325
+ justify-content: center;
1326
+ width: 16px;
1327
+ height: 16px;
1328
+ padding: 0;
1329
+ right: -16px;
1330
+ position: absolute;
1331
+ box-shadow: none;
1332
+ border-top-left-radius: 0;
1333
+ border-bottom-left-radius: 0;
1334
+ z-index: 1;
1335
+ }
1336
+ .formeo.formeo-editor .f-condition-row .remove-condition-type {
1337
+ top: 0;
1338
+ }
1339
+ .formeo.formeo-editor .f-condition-row .add-condition-type {
1340
+ bottom: 0;
1341
+ display: none;
1342
+ }
1343
+ .formeo.formeo-editor .f-condition-row:last-child .remove-condition-type {
1344
+ border-bottom-right-radius: 0;
1345
+ }
1346
+ .formeo.formeo-editor .f-condition-row:last-child .add-condition-type {
1347
+ display: flex;
1348
+ }
1349
+ .formeo.formeo-editor .f-condition-row:last-child:not(:first-child) .add-condition-type {
1350
+ border-top-right-radius: 0;
1351
+ }
1352
+ .formeo.formeo-editor .f-condition-row input,
1353
+ .formeo.formeo-editor .f-condition-row select,
1354
+ .formeo.formeo-editor .f-condition-row [contenteditable] {
1355
+ background-color: #fff;
1356
+ border: 0 none;
1357
+ border-radius: 0;
1358
+ }
1359
+ .formeo.formeo-editor .f-condition-row input:focus,
1360
+ .formeo.formeo-editor .f-condition-row select:focus,
1361
+ .formeo.formeo-editor .f-condition-row [contenteditable]:focus {
1362
+ box-shadow: 0 0 0 1px rgb(102, 175, 233) inset;
1363
+ }
1364
+ .formeo.formeo-editor .f-condition-row div.condition-source,
1365
+ .formeo.formeo-editor .f-condition-row div.condition-target {
1366
+ position: relative;
1367
+ border-left: 1px solid #cccccc;
1368
+ }
1369
+ .formeo.formeo-editor .f-condition-row .condition-logical,
1370
+ .formeo.formeo-editor .f-condition-row .condition-source,
1371
+ .formeo.formeo-editor .f-condition-row .condition-target,
1372
+ .formeo.formeo-editor .f-condition-row .condition-sourceProperty,
1373
+ .formeo.formeo-editor .f-condition-row .condition-targetProperty,
1374
+ .formeo.formeo-editor .f-condition-row .condition-comparison,
1375
+ .formeo.formeo-editor .f-condition-row .condition-assignment,
1376
+ .formeo.formeo-editor .f-condition-row .condition-value {
1377
+ flex: 1 !important;
1378
+ max-width: 100%;
1379
+ transition: max-width 266ms;
1380
+ will-change: max-width;
1381
+ min-height: 31px;
1382
+ }
1383
+ .formeo.formeo-editor .f-condition-row .condition-logical {
1384
+ max-width: 64px;
1385
+ text-transform: uppercase;
1386
+ }
1387
+ .formeo.formeo-editor .f-condition-row .condition-source input[type=text],
1388
+ .formeo.formeo-editor .f-condition-row .condition-target input[type=text] {
1389
+ min-height: 31px;
1390
+ }
1391
+ .formeo.formeo-editor .f-condition-row .hidden-property {
1392
+ max-width: 0% !important;
1393
+ padding: 0;
1394
+ border: 0 none;
1395
+ overflow: hidden;
1396
+ box-shadow: none;
1397
+ margin: 0;
1398
+ }
1399
+ .formeo.formeo-editor .f-condition-row.display-none {
1400
+ display: none;
1401
+ }
1402
+ .formeo.formeo-editor .f-condition-row .hidden-option {
1403
+ display: none;
1404
+ }
1405
+ .formeo.formeo-editor .type-conditions-wrap {
1406
+ width: 100%;
1407
+ }
1408
+ .formeo.formeo-editor .then-condition-row:first-of-type .remove-condition-type {
1409
+ display: none;
1410
+ }
1411
+ .formeo.formeo-editor .if-condition-row:first-of-type .remove-condition-type {
1412
+ display: none;
1413
+ }
1414
+ .formeo.formeo-editor .if-condition-row .condition-target input {
1415
+ border-top-right-radius: 4px;
1416
+ border-bottom-right-radius: 0;
1417
+ }
1418
+ .formeo.formeo-editor .condition-target input.f-autocomplete-display-field:placeholder-shown + span.clear-button,
1419
+ .formeo.formeo-editor .condition-source input.f-autocomplete-display-field:placeholder-shown + span.clear-button {
1420
+ display: none;
1421
+ }
1422
+ .formeo.formeo-editor .condition-target .clear-button,
1423
+ .formeo.formeo-editor .condition-source .clear-button {
1424
+ position: absolute;
1425
+ right: 2px;
1426
+ top: 50%;
1427
+ transform: translateY(-50%);
1428
+ cursor: pointer;
1429
+ padding: 4px;
1430
+ display: flex;
1431
+ justify-content: center;
1432
+ align-items: center;
1433
+ }
1434
+ .formeo.formeo-editor .condition-target .clear-button .svg-icon,
1435
+ .formeo.formeo-editor .condition-source .clear-button .svg-icon {
1436
+ width: 12px;
1437
+ height: 12px;
1438
+ border-radius: 50%;
1439
+ padding: 1px;
1440
+ border: 1px solid #333333;
1441
+ fill: #333333;
1442
+ }
1443
+ .formeo.formeo-editor .condition-target .clear-button:hover .svg-icon,
1444
+ .formeo.formeo-editor .condition-source .clear-button:hover .svg-icon {
1445
+ border: 1px solid rgb(217, 83, 79);
1446
+ fill: rgb(217, 83, 79);
1447
+ }
1448
+ .formeo.formeo-editor .condition-target .clear-button:active .svg-icon,
1449
+ .formeo.formeo-editor .condition-source .clear-button:active .svg-icon {
1450
+ background-color: rgb(217, 83, 79);
1451
+ border: 1px solid rgb(201.4953271028, 48.0841121495, 43.5046728972);
1452
+ fill: #fff;
1453
+ }
1454
+ .formeo.formeo-editor .conditions-prop-inputs {
1455
+ border-top: 1px solid #cccccc;
1456
+ border-right: 1px solid #cccccc;
1457
+ }
1458
+ .formeo.formeo-editor .conditions-prop-inputs label.condition-label {
1459
+ display: inline-flex;
1460
+ flex: 0 0 auto;
1461
+ align-items: center;
1462
+ padding: 4px;
1463
+ border-right: 0;
1464
+ text-transform: uppercase;
1465
+ color: #333333;
1466
+ background-color: #fff;
1467
+ }
1468
+ .formeo.formeo-editor .conditions-prop-inputs label.condition-label.then-condition-label {
1469
+ background-color: #666666;
1470
+ color: #fff;
1471
+ }
1472
+ .formeo.formeo-editor .field-conditions-0 .conditions-prop-inputs {
1473
+ border-top: 0 none;
1474
+ }
1475
+ .formeo.formeo-editor .edit-group {
1476
+ margin: 0;
1477
+ padding: 0;
1478
+ list-style: none;
1479
+ }
1480
+ .formeo.formeo-editor .options-panel .prop-wrap {
1481
+ margin-bottom: 8px;
1482
+ }
1483
+ .formeo.formeo-editor .options-panel .input-group-addon {
1484
+ line-height: 0;
1485
+ }
1486
+ .formeo.formeo-editor .options-panel .prop-labels {
1487
+ padding: 8px 34px 8px 8px;
1488
+ }
1489
+ .formeo.formeo-editor .options-panel .prop-labels .input-group-addon {
1490
+ font-size: 12px;
1491
+ }
1492
+ .formeo.formeo-editor .options-panel .prop-labels label {
1493
+ font-size: 12px;
1494
+ width: 50%;
1495
+ position: relative;
1496
+ display: table-cell;
1497
+ }
1498
+ .formeo.formeo-editor .options-panel .prop-label-selected,
1499
+ .formeo.formeo-editor .options-panel .prop-label-disabled {
1500
+ width: 1% !important;
1501
+ white-space: nowrap;
1502
+ vertical-align: middle;
1503
+ border: 0 none;
1504
+ background-color: transparent;
1505
+ }
1506
+ .formeo.formeo-editor .panel-action-buttons {
1507
+ display: flex;
1508
+ justify-content: end;
1509
+ gap: 8px;
1510
+ padding: 0 8px 8px;
1511
+ }
1512
+ .formeo.formeo-editor .panel-action-buttons button {
1513
+ display: flex;
1514
+ align-items: center;
1515
+ justify-content: center;
1516
+ line-height: 24px;
1517
+ gap: 4px;
1518
+ }
1519
+ .formeo.formeo-editor .panel-action-buttons .svg-icon {
1520
+ height: 16px;
1521
+ }
1522
+ .formeo.formeo-editor .panel-action-buttons [class^=add-] {
1523
+ float: right;
1524
+ }
1525
+ .formeo.formeo-editor .prop-inputs {
1526
+ width: 100%;
1527
+ align-items: center;
1528
+ vertical-align: bottom;
1529
+ display: flex;
1530
+ flex-direction: row;
1531
+ flex-grow: 1;
1532
+ }
1533
+ .formeo.formeo-editor .prop-inputs.conditions-prop-inputs {
1534
+ flex-direction: column;
1535
+ }
1536
+ .formeo.formeo-editor .prop-inputs .f-field-group {
1537
+ width: 100%;
1538
+ margin-bottom: 0;
1539
+ display: inline-flex;
1540
+ align-items: center;
1541
+ }
1542
+ .formeo.formeo-editor .prop-inputs .f-addon {
1543
+ display: flex;
1544
+ align-items: center;
1545
+ flex: 0;
1546
+ }
1547
+ .formeo.formeo-editor .prop-inputs .f-addon input {
1548
+ margin: 0;
1549
+ }
1550
+ .formeo.formeo-editor .prop-inputs label {
1551
+ padding-right: 1em;
1552
+ margin-bottom: 0;
1553
+ }
1554
+ .formeo.formeo-editor .formeo-stage {
1555
+ width: 73%;
1556
+ box-sizing: border-box;
1557
+ transition: width 250ms;
1558
+ margin-right: 4px;
1559
+ flex: 1 1 auto;
1560
+ position: relative;
1561
+ transition-property: background-color, border;
1562
+ transition-duration: 266ms, 266ms;
1563
+ border-width: 1px;
1564
+ border-style: dashed;
1565
+ border-color: transparent;
1566
+ background-color: rgba(255, 255, 255, 0);
1567
+ padding-left: 23px;
1568
+ padding-bottom: 8px;
1569
+ overflow: visible;
1570
+ border-radius: 8px 0 8px 8px;
1571
+ margin: 0;
1572
+ padding: 0;
1573
+ list-style: none;
1574
+ }
1575
+ .formeo.formeo-editor .formeo-stage > .children {
1576
+ display: flex;
1577
+ flex-direction: column;
1578
+ justify-content: flex-start;
1579
+ gap: 16px;
1580
+ }
1581
+ .formeo.formeo-editor .formeo-stage.removing-all-fields .formeo-row {
1582
+ transition: margin-top 250ms ease-in;
1583
+ }
1584
+ .formeo.formeo-editor .formeo-stage > .formeo-field {
1585
+ background-color: #fff;
1586
+ }
1587
+ @media (max-width: 481px) {
1588
+ .formeo.formeo-editor .formeo-stage {
1589
+ width: calc(100% - 50px);
1590
+ }
1591
+ }
1592
+ .formeo.formeo-editor .formeo-stage.highlight-component {
1593
+ box-shadow: 0 0 4px 2px #4F46E5;
1594
+ }
1595
+ .formeo.formeo-editor .formeo-stage .hidden {
1596
+ display: none;
1597
+ }
1598
+ .formeo.formeo-editor .formeo-stage.empty {
1599
+ border-color: #999999;
1600
+ background-color: rgba(255, 255, 255, 0.25);
1601
+ }
1602
+ .formeo.formeo-editor .formeo-stage.editing-stage, .formeo.formeo-editor .formeo-stage.hovering-stage, .formeo.formeo-editor .formeo-stage.hovering-stage.empty {
1603
+ border-color: #4F46E5;
1604
+ border-style: solid;
1605
+ }
1606
+ .formeo.formeo-editor .formeo-stage.editing-stage .stage-tag, .formeo.formeo-editor .formeo-stage.hovering-stage .stage-tag, .formeo.formeo-editor .formeo-stage.hovering-stage.empty .stage-tag {
1607
+ display: flex;
1608
+ }
1609
+ .formeo.formeo-editor .formeo-stage.editing-stage .stage-action-btn-wrap, .formeo.formeo-editor .formeo-stage.hovering-stage .stage-action-btn-wrap, .formeo.formeo-editor .formeo-stage.hovering-stage.empty .stage-action-btn-wrap {
1610
+ display: flex;
1611
+ border-top-right-radius: 8px;
1612
+ }
1613
+ .formeo.formeo-editor .formeo-stage.editing-stage .stage-handle, .formeo.formeo-editor .formeo-stage.hovering-stage .stage-handle, .formeo.formeo-editor .formeo-stage.hovering-stage.empty .stage-handle {
1614
+ display: none;
1615
+ }
1616
+ .formeo.formeo-editor .formeo-stage.editing-stage .formeo-row, .formeo.formeo-editor .formeo-stage.hovering-stage .formeo-row, .formeo.formeo-editor .formeo-stage.hovering-stage.empty .formeo-row {
1617
+ box-shadow: none;
1618
+ }
1619
+ .formeo.formeo-editor .stage-tag {
1620
+ border: 0 none;
1621
+ border: inherit;
1622
+ display: none;
1623
+ left: auto;
1624
+ overflow: hidden;
1625
+ padding: 0 32px 2px 8px;
1626
+ right: -1px;
1627
+ transition: width 266ms ease-in-out;
1628
+ width: auto;
1629
+ border-bottom-width: 0;
1630
+ }
1631
+ .formeo.formeo-editor .stage-edit {
1632
+ padding: 16px;
1633
+ background-color: #fff;
1634
+ margin-top: 0;
1635
+ margin-bottom: 16px;
1636
+ border-top-left-radius: 8px;
1637
+ }
1638
+ .formeo.formeo-editor .stage-edit .panel-nav {
1639
+ border-bottom: 0 none !important;
1640
+ }
1641
+ .formeo.formeo-editor .stage-edit .conditions-prop-inputs {
1642
+ border-top: 1px solid #cccccc;
1643
+ }
1644
+ .formeo.formeo-editor .stage-actions {
1645
+ right: -1px;
1646
+ top: -24px;
1647
+ text-align: right;
1648
+ border-bottom-left-radius: 4px;
1649
+ border-bottom-right-radius: 0;
1650
+ border-width: 0;
1651
+ }
1652
+ .formeo.formeo-editor .stage-actions .edit-toggle,
1653
+ .formeo.formeo-editor .stage-actions .edit-toggle:focus {
1654
+ border-bottom-left-radius: 0;
1655
+ border-bottom-right-radius: 0;
1656
+ border-right: 1px solid #4F46E5;
1657
+ border-top-left-radius: 0;
1658
+ border-top-right-radius: 8px;
1659
+ border-top: 1px solid #4F46E5;
1660
+ }
1661
+ .formeo.formeo-editor .editing-stage .formeo-settings {
1662
+ display: block;
1663
+ }
1664
+ .formeo.formeo-editor .editing-stage .formeo-stage {
1665
+ display: none;
1666
+ }
1667
+ .formeo.formeo-editor .f-field-group {
1668
+ margin-bottom: 0;
1669
+ }
1670
+ .formeo.formeo-editor [class$=empty][class*=editing-]::after {
1671
+ opacity: 0;
1672
+ }
1673
+ .formeo.formeo-editor [class$=empty]::after {
1674
+ opacity: 1;
1675
+ font-size: 24px;
1676
+ position: absolute;
1677
+ top: 50%;
1678
+ left: 50%;
1679
+ color: #999999;
1680
+ transition: opacity 200ms ease-in-out;
1681
+ will-change: opacity;
1682
+ text-align: center;
1683
+ transform: translate(-50%, -50%);
1684
+ content: attr(data-hover-tag);
1685
+ }
1686
+ .formeo.formeo-editor .formeo-settings {
1687
+ display: none;
1688
+ }
1689
+ .formeo.formeo-editor [dir=rtl] {
1690
+ /*
1691
+ Mixins
1692
+ */
1693
+ /*
1694
+ Mixins
1695
+ */
1696
+ }
1697
+ .formeo.formeo-editor [dir=rtl] .f-btn-group {
1698
+ display: inline-flex;
1699
+ vertical-align: middle;
1700
+ }
1701
+ .formeo.formeo-editor [dir=rtl] .f-btn-group > button {
1702
+ flex: 0 1 auto;
1703
+ }
1704
+ .formeo.formeo-editor [dir=rtl] .f-btn-group > button:not(:first-child):not(:last-child):not(.dropdown-toggle) {
1705
+ border-radius: 0;
1706
+ }
1707
+ .formeo.formeo-editor [dir=rtl] .f-btn-group > button:last-child:not(:first-child):not(.dropdown-toggle) {
1708
+ border-bottom-right-radius: 0;
1709
+ border-top-right-radius: 0;
1710
+ border-bottom-left-radius: 4px;
1711
+ border-top-left-radius: 4px;
1712
+ }
1713
+ .formeo.formeo-editor [dir=rtl] .f-btn-group > button:first-child {
1714
+ margin-left: 0;
1715
+ }
1716
+ .formeo.formeo-editor [dir=rtl] .f-btn-group > button:first-child:not(:last-child):not(.dropdown-toggle) {
1717
+ border-bottom-left-radius: 0;
1718
+ border-top-left-radius: 0;
1719
+ border-bottom-right-radius: 4px;
1720
+ border-top-right-radius: 4px;
1721
+ }
1722
+ .formeo.formeo-editor [dir=rtl] .f-btn-group button + button,
1723
+ .formeo.formeo-editor [dir=rtl] .f-btn-group button + .f-btn-group,
1724
+ .formeo.formeo-editor [dir=rtl] .f-btn-group .f-btn-group + button,
1725
+ .formeo.formeo-editor [dir=rtl] .f-btn-group .f-btn-group + .f-btn-group,
1726
+ .formeo.formeo-editor [dir=rtl] .f-btn-group .f-btn-group-vertical button + button,
1727
+ .formeo.formeo-editor [dir=rtl] .f-btn-group .f-btn-group-vertical button + .f-btn-group,
1728
+ .formeo.formeo-editor [dir=rtl] .f-btn-group .f-btn-group-vertical .f-btn-group + button,
1729
+ .formeo.formeo-editor [dir=rtl] .f-btn-group .f-btn-group-vertical .f-btn-group + .f-btn-group {
1730
+ margin-right: -1px;
1731
+ }
1732
+ .formeo.formeo-editor [dir=rtl] .formeo-controls {
1733
+ float: left;
1734
+ }
1735
+ .formeo.formeo-editor [dir=rtl] .formeo-controls .form-actions {
1736
+ float: left;
1737
+ }
1738
+ .formeo.formeo-editor [dir=rtl] .formeo-stage-wrap {
1739
+ float: right;
1740
+ }
1741
+ .formeo.formeo-editor [dir=rtl] .formeo-stage-wrap .formeo-stage {
1742
+ padding-left: 4px;
1743
+ padding-right: 23px;
1744
+ }
1745
+ .formeo.formeo-editor [dir=rtl] .formeo-row::before {
1746
+ border-bottom-left-radius: 8px;
1747
+ border-bottom-right-radius: 0;
1748
+ right: 0;
1749
+ left: auto;
1750
+ }
1751
+ .formeo.formeo-editor [dir=rtl] .formeo-row:first-child {
1752
+ border-top-left-radius: 8px;
1753
+ border-top-right-radius: 0;
1754
+ }
1755
+ .formeo.formeo-editor [dir=rtl] .formeo-row:last-child {
1756
+ border-bottom-left-radius: 8px;
1757
+ border-bottom-right-radius: 8px;
1758
+ }
1759
+ .formeo.formeo-editor [dir=rtl] .formeo-row.hovering-row:first-child {
1760
+ border-top-left-radius: 0;
1761
+ }
1762
+ .formeo.formeo-editor [dir=rtl] .formeo-row.hovering-row::before {
1763
+ border-left-width: 1px;
1764
+ }
1765
+ .formeo.formeo-editor [dir=rtl] .formeo-row.empty::after {
1766
+ left: 0;
1767
+ right: auto;
1768
+ }
1769
+ .formeo.formeo-render {
1770
+ /*
1771
+ Mixins
1772
+ */
1773
+ }
1774
+ .formeo.formeo-render .formeo-row,
1775
+ .formeo.formeo-render .formeo-column,
1776
+ .formeo.formeo-render .formeo-field {
1777
+ position: relative;
1778
+ }
1779
+ .formeo.formeo-render .f-input-group-wrap .formeo-row:first-of-type .remove-input-group {
1780
+ display: none;
1781
+ }
1782
+ .formeo.formeo-render .f-input-group-wrap > fieldset {
1783
+ position: relative;
1784
+ }
1785
+ .formeo.formeo-render .f-input-group-wrap > fieldset .remove-input-group {
1786
+ top: 8px;
1787
+ }
1788
+ .formeo.formeo-render .formeo-row {
1789
+ margin-bottom: 1em;
1790
+ flex-direction: row;
1791
+ justify-content: flex-start;
1792
+ flex-wrap: nowrap;
1793
+ align-content: stretch;
1794
+ align-items: stretch;
1795
+ display: flex;
1796
+ border-radius: 8px;
1797
+ outline: 0 solid rgba(217, 83, 79, 0.25);
1798
+ transition: background-color 133ms, outline 133ms;
1799
+ padding: 4px 0;
1800
+ }
1801
+ .formeo.formeo-render .formeo-row.will-remove {
1802
+ border-radius: 2px;
1803
+ background-color: rgba(217, 83, 79, 0.25);
1804
+ outline: 6px solid rgba(217, 83, 79, 0.25);
1805
+ }
1806
+ .formeo.formeo-render .formeo-row:last-of-type {
1807
+ margin-bottom: 0;
1808
+ }
1809
+ .formeo.formeo-render fieldset.formeo-row-wrap {
1810
+ padding: 16px;
1811
+ }
1812
+ .formeo.formeo-render .formeo-row-wrap {
1813
+ margin-bottom: 1em;
1814
+ border-radius: 8px;
1815
+ }
1816
+ .formeo.formeo-render .formeo-row-wrap legend {
1817
+ padding: 4px 8px;
1818
+ border-style: groove;
1819
+ border-width: 2px;
1820
+ border-color: threedface;
1821
+ border-radius: 8px;
1822
+ font-size: 1.15em;
1823
+ }
1824
+ .formeo.formeo-render .formeo-row-wrap:last-child {
1825
+ margin-bottom: 0;
1826
+ }
1827
+ .formeo.formeo-render .f-input-group {
1828
+ position: relative;
1829
+ }
1830
+ .formeo.formeo-render .f-input-group:first-child .remove-input-group {
1831
+ display: none;
1832
+ }
1833
+ .formeo.formeo-render .add-input-group {
1834
+ float: right;
1835
+ margin-top: 10px;
1836
+ }
1837
+ .formeo.formeo-render .remove-input-group {
1838
+ position: absolute;
1839
+ right: 0;
1840
+ top: 0;
1841
+ width: 24px;
1842
+ height: 24px;
1843
+ border: 0 none;
1844
+ background: transparent;
1845
+ outline: 0 none;
1846
+ line-height: 0;
1847
+ padding: 4px;
1848
+ }
1849
+ .formeo.formeo-render .remove-input-group:hover {
1850
+ background-color: #fff;
1851
+ }
1852
+ .formeo.formeo-render .remove-input-group:hover .svg-icon {
1853
+ fill: rgb(217, 83, 79);
1854
+ }
1855
+ .formeo.formeo-render .remove-input-group .svg-icon {
1856
+ pointer-events: none;
1857
+ }
1858
+ .formeo.formeo-render .form-check-input:only-child {
1859
+ position: absolute;
1860
+ }
1861
+ .formeo.formeo-render .svg-icon {
1862
+ max-width: 100%;
1863
+ max-height: 100%;
1864
+ }
1865
+ .formeo.formeo-render .formeo-column {
1866
+ padding: 0 4px;
1867
+ float: left;
1868
+ max-width: none;
1869
+ flex-direction: column;
1870
+ }
1871
+ .formeo.formeo-render .formeo-column:first-of-type {
1872
+ padding-left: 0;
1873
+ }
1874
+ .formeo.formeo-render .formeo-column:last-of-type {
1875
+ padding-right: 0;
1876
+ }
1877
+ .formeo.formeo-render .f-checkbox {
1878
+ display: flex;
1879
+ align-items: center;
1880
+ gap: 4px;
1881
+ }
1882
+ .formeo button .svg-icon {
1883
+ max-width: 100%;
1884
+ max-height: 100%;
1885
+ }
1886
+
1887
+ /*
1888
+ Mixins
1889
+ */
1890
+ .formeo-controls {
1891
+ width: 26%;
1892
+ max-width: 224px;
1893
+ overflow: hidden;
1894
+ container-type: inline-size;
1895
+ container-name: controls;
1896
+ }
1897
+
1898
+ .formeo-controls.formeo-sticky {
1899
+ position: sticky;
1900
+ top: 0;
1901
+ align-self: flex-start;
1902
+ }
1903
+
1904
+ .formeo-controls.pull-left .form-actions {
1905
+ float: left;
1906
+ }
1907
+
1908
+ .formeo-controls .filtered-term {
1909
+ background-color: #fff;
1910
+ text-align: center;
1911
+ border-radius: 4px 4px 0 0;
1912
+ border: 1px solid #cccccc;
1913
+ border-bottom: 0 none;
1914
+ width: calc(100% - 2px);
1915
+ }
1916
+
1917
+ .formeo-controls .tabbed-panels nav {
1918
+ padding: 0;
1919
+ }
1920
+
1921
+ .formeo-controls nav {
1922
+ position: relative;
1923
+ padding: 0 24px;
1924
+ overflow: hidden;
1925
+ }
1926
+
1927
+ .formeo-controls nav h5 {
1928
+ font-size: 13px;
1929
+ line-height: 22px;
1930
+ }
1931
+
1932
+ .formeo-controls nav button {
1933
+ position: absolute;
1934
+ width: 24px;
1935
+ color: #000;
1936
+ height: calc(100% + 1px);
1937
+ padding: 0;
1938
+ line-height: 0;
1939
+ margin: 0;
1940
+ border-color: #cccccc;
1941
+ }
1942
+
1943
+ .formeo-controls nav button.next-group {
1944
+ right: 0;
1945
+ top: 0;
1946
+ border-top-left-radius: 0;
1947
+ border-top-right-radius: 8px;
1948
+ border-bottom-left-radius: 0;
1949
+ border-bottom-right-radius: 0;
1950
+ }
1951
+
1952
+ .formeo-controls nav button.prev-group {
1953
+ border-top-left-radius: 8px;
1954
+ border-bottom-left-radius: 0;
1955
+ left: 0;
1956
+ }
1957
+
1958
+ .formeo-controls .formeo-panels-wrap {
1959
+ font-size: 0.85em;
1960
+ line-height: 1.8em;
1961
+ }
1962
+
1963
+ .formeo-controls .panel-labels {
1964
+ border-top: 1px solid #cccccc;
1965
+ }
1966
+
1967
+ .formeo-controls .panel-count-1 {
1968
+ border-bottom-left-radius: 0;
1969
+ }
1970
+
1971
+ .formeo-controls .panel-count-1 .panel-nav {
1972
+ display: none;
1973
+ }
1974
+
1975
+ .formeo-controls .panel-count-1 .control-group li:first-child {
1976
+ border-radius: 8px 8px 0 0;
1977
+ }
1978
+
1979
+ .formeo-controls ul {
1980
+ margin: 0;
1981
+ padding: 0;
1982
+ list-style: none;
1983
+ }
1984
+
1985
+ .formeo-controls .control-group {
1986
+ vertical-align: top;
1987
+ display: inline-block;
1988
+ width: 100%;
1989
+ border-top: 1px solid #cccccc;
1990
+ }
1991
+
1992
+ .formeo-controls .control-group > li:first-child {
1993
+ border-top-right-radius: 0;
1994
+ }
1995
+
1996
+ .formeo-controls .control-group > li:last-child {
1997
+ border-radius: 0 0 8px 8px;
1998
+ }
1999
+
2000
+ .formeo-controls.filtered .panel-nav {
2001
+ display: none;
2002
+ }
2003
+
2004
+ .formeo-controls.filtered .control-group {
2005
+ display: block;
2006
+ }
2007
+
2008
+ .formeo-controls.filtered .control-group > li {
2009
+ border-radius: 0;
2010
+ }
2011
+
2012
+ .formeo-controls.filtered .control-group:last-child > li:last-child {
2013
+ border-radius: 0 0 0 4px;
2014
+ }
2015
+
2016
+ .formeo-controls .control-groups {
2017
+ white-space: nowrap;
2018
+ }
2019
+
2020
+ .formeo-controls .control-group-labels {
2021
+ height: 100%;
2022
+ background: #fff;
2023
+ overflow: hidden;
2024
+ }
2025
+
2026
+ .formeo-controls .control-group-labels div {
2027
+ white-space: nowrap;
2028
+ }
2029
+
2030
+ .formeo-controls .control-group-labels h4 {
2031
+ display: inline-block;
2032
+ width: 100%;
2033
+ }
2034
+
2035
+ .formeo-controls .form-actions {
2036
+ float: right;
2037
+ margin-top: 4px;
2038
+ }
2039
+
2040
+ .formeo-controls .form-actions .svg-icon {
2041
+ fill: #666666;
2042
+ display: none;
2043
+ }
2044
+
2045
+ .formeo-controls .form-actions .svg-icon:hover {
2046
+ fill: #000;
2047
+ }
2048
+
2049
+ .formeo-controls .form-actions .save-form:hover,
2050
+ .formeo-controls .form-actions .clear-form:hover {
2051
+ color: #fff;
2052
+ }
2053
+
2054
+ .formeo-controls .form-actions .save-form:hover {
2055
+ background-color: rgb(50, 93, 136);
2056
+ }
2057
+
2058
+ .formeo-controls .form-actions .clear-form:hover {
2059
+ background-color: rgb(217, 83, 79);
2060
+ }
2061
+
2062
+ @media (max-width: 481px) {
2063
+ .formeo-controls {
2064
+ width: 45px;
2065
+ }
2066
+ .formeo-controls .control-group {
2067
+ text-indent: -9999px;
2068
+ }
2069
+ .formeo-controls .form-actions {
2070
+ display: inline-block;
2071
+ width: 100%;
2072
+ position: relative;
2073
+ vertical-align: middle;
2074
+ float: none;
2075
+ margin-top: 10px;
2076
+ }
2077
+ .formeo-controls .form-actions > button + button {
2078
+ margin-top: -1px;
2079
+ margin-left: 0;
2080
+ }
2081
+ .formeo-controls .form-actions > button {
2082
+ max-width: 100%;
2083
+ width: 100%;
2084
+ float: none;
2085
+ position: relative;
2086
+ display: block;
2087
+ }
2088
+ .formeo-controls .form-actions > button:not(:first-child):not(:last-child) {
2089
+ border-radius: 0;
2090
+ }
2091
+ .formeo-controls .form-actions > button:first-child:not(:last-child) {
2092
+ border-top-right-radius: 4px;
2093
+ border-top-left-radius: 4px;
2094
+ border-bottom-right-radius: 0;
2095
+ border-bottom-left-radius: 0;
2096
+ }
2097
+ .formeo-controls .form-actions > button:last-child:not(:first-child) {
2098
+ border-bottom-left-radius: 4px;
2099
+ border-bottom-right-radius: 4px;
2100
+ border-top-right-radius: 0;
2101
+ border-top-left-radius: 0;
2102
+ }
2103
+ .formeo-controls .form-actions .control-icon {
2104
+ display: inline-block;
2105
+ }
2106
+ }
2107
+ .formeo-controls .field-control {
2108
+ cursor: move;
2109
+ list-style: none;
2110
+ margin: -1px 0 0;
2111
+ border: 1px solid #cccccc;
2112
+ text-align: left;
2113
+ background: #fff;
2114
+ user-select: none;
2115
+ overflow: hidden;
2116
+ }
2117
+
2118
+ .formeo-controls .field-control.control-moving {
2119
+ border-radius: 8px;
2120
+ animation: DRAG_GHOST 500ms forwards;
2121
+ }
2122
+
2123
+ .formeo-controls .field-control::before {
2124
+ margin-right: 8px;
2125
+ font-size: 16px;
2126
+ }
2127
+
2128
+ .formeo-controls .field-control:hover {
2129
+ background-color: rgb(242.25, 242.25, 242.25);
2130
+ }
2131
+
2132
+ .formeo-controls .field-control button {
2133
+ box-sizing: border-box;
2134
+ font-size: 1em;
2135
+ line-height: 1.8em;
2136
+ display: flex;
2137
+ height: 100%;
2138
+ width: 100%;
2139
+ background: transparent;
2140
+ border: 0 none;
2141
+ text-align: left;
2142
+ padding: 8px;
2143
+ border-radius: 0;
2144
+ }
2145
+
2146
+ .formeo-controls .field-control button:focus {
2147
+ outline: 0 none;
2148
+ background-color: rgb(242.25, 242.25, 242.25);
2149
+ box-shadow: 0 0 0 1px rgb(102, 175, 233) inset;
2150
+ border-radius: 0 !important;
2151
+ }
2152
+
2153
+ .formeo-controls .field-control button:active {
2154
+ transform: none;
2155
+ }
2156
+
2157
+ .formeo-controls .field-control button:hover {
2158
+ filter: none;
2159
+ }
2160
+
2161
+ .formeo-controls .field-control .control-icon {
2162
+ margin-right: 8px;
2163
+ text-align: center;
2164
+ width: 24px;
2165
+ height: 24px;
2166
+ display: flex;
2167
+ align-items: center;
2168
+ justify-content: center;
2169
+ }
2170
+
2171
+ [dir=rtl] .formeo-controls .field-control button {
2172
+ text-align: right !important;
2173
+ }
2174
+
2175
+ [dir=rtl] .formeo-controls .field-control svg {
2176
+ float: right !important;
2177
+ margin: 0 0 0 8px !important;
2178
+ }
2179
+
2180
+ .formeo-controls .field-control .control-icon {
2181
+ pointer-events: none;
2182
+ }
2183
+
2184
+ .formeo-controls .field-control .control-icon .f-i-hash {
2185
+ padding: 2px;
2186
+ }
2187
+
2188
+ @container controls (max-width: 46px) {
2189
+ .control-label {
2190
+ display: none;
2191
+ }
2192
+ .form-actions button {
2193
+ padding: 2px 0;
2194
+ text-align: center;
2195
+ }
2196
+ .form-actions button:first-child {
2197
+ border-top-right-radius: 4px !important;
2198
+ border-top-left-radius: 4px !important;
2199
+ border-bottom-right-radius: 0 !important;
2200
+ border-bottom-left-radius: 0 !important;
2201
+ }
2202
+ .form-actions button:last-child {
2203
+ border-bottom-left-radius: 4px !important;
2204
+ border-bottom-right-radius: 4px !important;
2205
+ border-top-right-radius: 0 !important;
2206
+ border-top-left-radius: 0 !important;
2207
+ }
2208
+ }
2209
+ .field-control {
2210
+ cursor: move;
2211
+ list-style: none;
2212
+ margin: -1px 0 0;
2213
+ border: 1px solid #cccccc;
2214
+ text-align: left;
2215
+ background: #fff;
2216
+ user-select: none;
2217
+ overflow: hidden;
2218
+ }
2219
+ .field-control.control-moving {
2220
+ border-radius: 8px;
2221
+ animation: DRAG_GHOST 500ms forwards;
2222
+ }
2223
+ .field-control::before {
2224
+ margin-right: 8px;
2225
+ font-size: 16px;
2226
+ }
2227
+ .field-control:hover {
2228
+ background-color: rgb(242.25, 242.25, 242.25);
2229
+ }
2230
+ .field-control button {
2231
+ box-sizing: border-box;
2232
+ font-size: 1em;
2233
+ line-height: 1.8em;
2234
+ display: flex;
2235
+ height: 100%;
2236
+ width: 100%;
2237
+ background: transparent;
2238
+ border: 0 none;
2239
+ text-align: left;
2240
+ padding: 8px;
2241
+ border-radius: 0;
2242
+ }
2243
+ .field-control button:focus {
2244
+ outline: 0 none;
2245
+ background-color: rgb(242.25, 242.25, 242.25);
2246
+ box-shadow: 0 0 0 1px rgb(102, 175, 233) inset;
2247
+ border-radius: 0 !important;
2248
+ }
2249
+ .field-control button:active {
2250
+ transform: none;
2251
+ }
2252
+ .field-control button:hover {
2253
+ filter: none;
2254
+ }
2255
+ .field-control .control-icon {
2256
+ margin-right: 8px;
2257
+ text-align: center;
2258
+ width: 24px;
2259
+ height: 24px;
2260
+ display: flex;
2261
+ align-items: center;
2262
+ justify-content: center;
2263
+ }
2264
+ [dir=rtl] .field-control button {
2265
+ text-align: right !important;
2266
+ }
2267
+ [dir=rtl] .field-control svg {
2268
+ float: right !important;
2269
+ margin: 0 0 0 8px !important;
2270
+ }
2271
+ .field-control .svg-icon {
2272
+ pointer-events: none;
2273
+ }