@layerfi/components 0.1.110 → 0.1.112-alpha

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 (7) hide show
  1. package/dist/cjs/index.cjs +8883 -7568
  2. package/dist/cjs/index.css +66 -0
  3. package/dist/esm/index.css +66 -0
  4. package/dist/esm/index.mjs +8465 -7159
  5. package/dist/index.css +614 -371
  6. package/dist/index.d.ts +6905 -757
  7. package/package.json +2 -1
package/dist/index.css CHANGED
@@ -31,11 +31,11 @@
31
31
  --color-dark-h: 0;
32
32
  --color-dark-s: 0%;
33
33
  --color-dark-l: 7%;
34
- --color-dark: hsl( var(--color-dark-h) var(--color-dark-s) var(--color-dark-l) );
34
+ --color-dark: hsl(var(--color-dark-h) var(--color-dark-s) var(--color-dark-l));
35
35
  --color-light-h: 0;
36
36
  --color-light-s: 0%;
37
37
  --color-light-l: 90%;
38
- --color-light: hsl( var(--color-light-h) var(--color-light-s) var(--color-light-l) );
38
+ --color-light: hsl(var(--color-light-h) var(--color-light-s) var(--color-light-l));
39
39
  --color-base-0: #fff;
40
40
  --color-base-50: hsl(var(--color-dark-h) 1% 98%);
41
41
  --color-base-100: hsl(var(--color-dark-h) 1% 94%);
@@ -51,21 +51,21 @@
51
51
  --max-component-width: 1408px;
52
52
  --base-transparent-1: hsl(220deg 43% 11% / 1%);
53
53
  --base-transparent-2: hsl(220deg 43% 11% / 2%);
54
- --base-transparent-4: hsl( var(--color-dark-h) var(--color-dark-s) var(--color-dark-l) / 4% );
55
- --base-transparent-5: hsl( var(--color-dark-h) var(--color-dark-s) var(--color-dark-l) / 5% );
56
- --base-transparent-6: hsl( var(--color-dark-h) var(--color-dark-s) var(--color-dark-l) / 6% );
57
- --base-transparent-8: hsl( var(--color-dark-h) var(--color-dark-s) var(--color-dark-l) / 8% );
58
- --base-transparent-10: hsl( var(--color-dark-h) var(--color-dark-s) var(--color-dark-l) / 10% );
59
- --base-transparent-12: hsl( var(--color-dark-h) var(--color-dark-s) var(--color-dark-l) / 12% );
60
- --base-transparent-16: hsl( var(--color-dark-h) var(--color-dark-s) var(--color-dark-l) / 16% );
61
- --base-transparent-16-light: hsl( var(--color-light-h) var(--color-light-s) var(--color-light-l) / 16% );
54
+ --base-transparent-4: hsl(var(--color-dark-h) var(--color-dark-s) var(--color-dark-l) / 4%);
55
+ --base-transparent-5: hsl(var(--color-dark-h) var(--color-dark-s) var(--color-dark-l) / 5%);
56
+ --base-transparent-6: hsl(var(--color-dark-h) var(--color-dark-s) var(--color-dark-l) / 6%);
57
+ --base-transparent-8: hsl(var(--color-dark-h) var(--color-dark-s) var(--color-dark-l) / 8%);
58
+ --base-transparent-10: hsl(var(--color-dark-h) var(--color-dark-s) var(--color-dark-l) / 10%);
59
+ --base-transparent-12: hsl(var(--color-dark-h) var(--color-dark-s) var(--color-dark-l) / 12%);
60
+ --base-transparent-16: hsl(var(--color-dark-h) var(--color-dark-s) var(--color-dark-l) / 16%);
61
+ --base-transparent-16-light: hsl(var(--color-light-h) var(--color-light-s) var(--color-light-l) / 16%);
62
62
  --color-primary: var(--color-dark);
63
63
  --color-accent: var(--color-light);
64
64
  --color-secondary: var(--color-base);
65
65
  --color-success: var(--color-info-success);
66
66
  --color-danger: var(--color-info-error);
67
67
  --color-danger-dark: hsl(349deg 30% 30%);
68
- --color-danger-light: hsl( var(--color-info-error-h) var(--color-info-error-s) var(--color-info-error-l) / 40% );
68
+ --color-danger-light: hsl(var(--color-info-error-h) var(--color-info-error-s) var(--color-info-error-l) / 40%);
69
69
  --text-color-primary: var(--color-dark);
70
70
  --text-color-secondary: var(--color-base-600);
71
71
  --bg-element-focus: var(--color-base-50);
@@ -87,9 +87,14 @@
87
87
  --text-heading-secondary: 20px;
88
88
  --text-heading-page: var(--text-heading);
89
89
  --text-heading-view: var(--text-heading-secondary);
90
- --text-heading-sm: 16px;
91
- --text-heading-xs: 14px;
92
90
  --text-heading-2xs: 12px;
91
+ --text-heading-xs: 14px;
92
+ --text-heading-sm: 16px;
93
+ --text-heading-md: var(--text-heading);
94
+ --text-heading-lg: 36px;
95
+ --text-heading-xl: 48px;
96
+ --text-heading-2xl: 56px;
97
+ --text-heading-3xl: 64px;
93
98
  --font-weight-normal: 460;
94
99
  --font-weight-bold: 540;
95
100
  --spacing-4xs: 2px;
@@ -198,16 +203,16 @@
198
203
  --button-border-color-ghost-active: var(--color-base-800);
199
204
  }
200
205
  .Layer__component *::-webkit-scrollbar {
201
- width: 6px;
202
206
  height: 6px;
207
+ width: 6px;
203
208
  }
204
209
  .Layer__component *::-webkit-scrollbar-track {
205
- background: #f1f1f1;
206
210
  border-radius: 4px;
211
+ background: #f1f1f1;
207
212
  }
208
213
  .Layer__component *::-webkit-scrollbar-thumb {
209
- background: #e2e2e2;
210
214
  border-radius: 4px;
215
+ background: #e2e2e2;
211
216
  }
212
217
  .Layer__component *::-webkit-scrollbar-thumb:hover {
213
218
  background: #999;
@@ -223,27 +228,27 @@
223
228
  stroke: var(--color-base-1000);
224
229
  }
225
230
  .Layer__actionable-list {
226
- list-style: none;
227
- margin: 0;
228
231
  padding: 0;
232
+ margin: 0;
233
+ list-style: none;
229
234
  }
230
235
  .Layer__actionable-list li {
231
- padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) var(--spacing-md);
232
- gap: var(--spacing-2xs);
233
- border-radius: var(--spacing-xs);
234
236
  box-sizing: border-box;
235
- font-size: 12px;
236
- cursor: pointer;
237
237
  display: flex;
238
+ gap: var(--spacing-2xs);
238
239
  align-items: center;
239
240
  justify-content: space-between;
241
+ padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) var(--spacing-md);
242
+ border-radius: var(--spacing-xs);
243
+ cursor: pointer;
244
+ font-size: 12px;
240
245
  }
241
246
  .Layer__actionable-list li .Layer__actionable-list__content {
242
247
  display: flex;
243
248
  flex-direction: column;
249
+ gap: var(--spacing-2xs);
244
250
  align-items: flex-start;
245
251
  max-width: 36ch;
246
- gap: var(--spacing-2xs);
247
252
  }
248
253
  .Layer__actionable-list li .Layer__actionable-list__content .Layer__actionable-list__content-description {
249
254
  color: var(--color-base-500);
@@ -258,28 +263,28 @@
258
263
  background-color: var(--color-base-50);
259
264
  }
260
265
  .Layer__actionable-list .Layer__actionable-list__select {
261
- width: 18px;
262
- height: 18px;
263
266
  display: flex;
267
+ height: 18px;
268
+ width: 18px;
264
269
  border-radius: 50%;
265
270
  border: 1px solid var(--color-base-300);
266
271
  }
267
272
  .Layer__actionable-list .Layer__actionable-list__select.Layer__actionable-list__select--selected {
268
- border: 1px solid var(--color-info-success);
269
- color: var(--color-info-success);
270
- background-color: var(--color-info-success-bg);
271
273
  align-items: center;
272
274
  justify-content: center;
275
+ border: 1px solid var(--color-info-success);
276
+ background-color: var(--color-info-success-bg);
277
+ color: var(--color-info-success);
273
278
  }
274
279
  .Layer__actionable_row {
275
280
  display: flex;
276
- padding: var(--spacing-md);
281
+ gap: var(--spacing-md);
277
282
  align-items: center;
278
283
  justify-content: space-between;
279
- gap: var(--spacing-md);
280
- border-radius: var(--XS, 8px);
284
+ padding: var(--spacing-md);
285
+ border-radius: 8px;
286
+ box-shadow: 0 0 0 1px var(--color-base-300);
281
287
  background: var(--color-base-0);
282
- box-shadow: 0px 0px 0px 1px var(--color-base-300);
283
288
  container-type: inline-size;
284
289
  }
285
290
  @container (max-width: 30rem) {
@@ -293,25 +298,25 @@
293
298
  }
294
299
  .Layer__actionable_row__main {
295
300
  display: flex;
296
- align-items: center;
297
301
  gap: var(--spacing-md);
302
+ align-items: center;
298
303
  }
299
304
  .Layer__actionable_row__icon {
300
305
  display: flex;
301
- width: 32px;
302
- height: 32px;
303
- background-color: var(--color-base-100);
304
- border-radius: var(--border-radius-3xs);
305
306
  align-items: center;
306
307
  justify-content: center;
307
- box-shadow: 0px 0px 3px 0px var(--base-transparent-4) inset;
308
+ height: 32px;
309
+ width: 32px;
310
+ border-radius: var(--border-radius-3xs);
311
+ box-shadow: 0 0 3px 0 var(--base-transparent-4) inset;
312
+ background-color: var(--color-base-100);
308
313
  }
309
314
  .Layer__actionable_row__action {
310
315
  display: flex;
311
316
  }
312
317
  .Layer__actionable_row__description {
313
- color: var(--color-base-500);
314
318
  font-size: var(--text-sm);
319
+ color: var(--color-base-500);
315
320
  }
316
321
  @keyframes Layer__rotate {
317
322
  from {
@@ -400,17 +405,17 @@
400
405
  display: flex;
401
406
  align-items: center;
402
407
  justify-content: space-between;
408
+ min-height: 52px;
409
+ padding: var(--spacing-3xs) var(--spacing-sm);
410
+ border-radius: var(--border-radius-xs);
411
+ box-shadow: 0 0 0 3px var(--color-base-300);
403
412
  background-color: var(--color-base-800);
404
413
  color: var(--color-base-50);
405
- border-radius: var(--border-radius-xs);
406
- padding: var(--spacing-3xs) var(--spacing-sm);
407
- min-height: 52px;
408
- box-shadow: 0px 0px 0px 3px var(--color-base-300);
409
414
  }
410
415
  .Layer__bar-banner__left-col {
411
416
  display: flex;
412
- align-items: center;
413
417
  gap: var(--spacing-md);
418
+ align-items: center;
414
419
  }
415
420
  .Layer__bar-banner__text-container__desc {
416
421
  color: var(--color-base-300);
@@ -418,8 +423,8 @@
418
423
  @container (max-width: 560px) {
419
424
  .Layer__bar-banner--bookkeeping {
420
425
  flex-direction: column;
421
- align-items: flex-start;
422
426
  gap: var(--spacing-sm);
427
+ align-items: flex-start;
423
428
  padding: var(--spacing-sm);
424
429
  }
425
430
  .Layer__bar-banner--bookkeeping .Layer__icon-box {
@@ -771,15 +776,15 @@
771
776
  display: flex;
772
777
  flex-direction: column;
773
778
  border-radius: var(--spacing-sm);
774
- background: var(--color-base-0);
775
779
  box-shadow:
776
- 0px 4px 12px 0px var(--base-transparent-8),
777
- 0px 2px 4px 0px var(--base-transparent-6),
778
- 0px 0px 0px 1px var(--base-transparent-4);
780
+ 0 4px 12px 0 var(--base-transparent-8),
781
+ 0 2px 4px 0 var(--base-transparent-6),
782
+ 0 0 0 1px var(--base-transparent-4);
783
+ background: var(--color-base-0);
779
784
  }
780
785
  .Layer__component .recharts-responsive-container {
781
- padding: 4px;
782
786
  box-sizing: border-box;
787
+ padding: 4px;
783
788
  border-radius: var(--border-radius-xs);
784
789
  }
785
790
  .Layer__component .recharts-responsive-container .recharts-cartesian-axis-line {
@@ -798,31 +803,31 @@
798
803
  min-height: 300px;
799
804
  }
800
805
  .Layer__chart-legend-list {
801
- margin: 0;
802
- padding: 0;
803
806
  display: flex;
807
+ gap: var(--spacing-sm);
804
808
  align-items: center;
809
+ justify-content: flex-end;
810
+ padding: 0;
811
+ margin: 0;
805
812
  font-size: 12px;
806
- gap: var(--spacing-sm);
807
813
  list-style: none;
808
- justify-content: flex-end;
809
814
  }
810
815
  .Layer__chart__tooltip {
811
- background-color: var(--color-base-1000);
812
816
  padding: var(--spacing-2xs) var(--spacing-sm);
813
- color: var(--color-base-500);
814
817
  border-radius: var(--border-radius-3xs);
818
+ background-color: var(--color-base-1000);
815
819
  font-size: var(--text-sm);
820
+ color: var(--color-base-500);
816
821
  }
817
822
  .Layer__chart__tooltip-list {
818
- margin: 0;
819
823
  padding: 0;
824
+ margin: 0;
820
825
  }
821
826
  .Layer__chart__tooltip-list li {
822
- list-style: none;
823
827
  display: flex;
824
- justify-content: space-between;
825
828
  column-gap: var(--spacing-sm);
829
+ justify-content: space-between;
830
+ list-style: none;
826
831
  }
827
832
  .Layer__chart__tooltip-list .Layer__chart__tooltip-label {
828
833
  color: var(--color-base-500);
@@ -846,7 +851,7 @@
846
851
  }
847
852
  .Layer__hover-menu.Layer__hover-menu--open .Layer__hover-menu__list-wrapper {
848
853
  top: 100%;
849
- right: 0px;
854
+ right: 0;
850
855
  opacity: 1;
851
856
  touch-action: auto;
852
857
  pointer-events: auto;
@@ -855,67 +860,67 @@
855
860
  display: flex;
856
861
  align-items: center;
857
862
  justify-content: center;
858
- cursor: pointer;
859
863
  width: 100%;
864
+ cursor: pointer;
860
865
  }
861
866
  .Layer__hover-menu .Layer__hover-menu__list-wrapper {
862
867
  position: absolute;
863
868
  z-index: 99;
864
869
  top: 80%;
865
870
  right: -8px;
866
- padding-top: var(--spacing-xs);
871
+ display: flex;
872
+ justify-content: stretch;
867
873
  min-width: 160px;
874
+ padding-top: var(--spacing-xs);
868
875
  touch-action: none;
869
876
  pointer-events: none;
870
877
  opacity: 0;
871
- display: flex;
872
- justify-content: stretch;
873
878
  transition: all 0.15s ease-out;
874
879
  }
875
880
  .Layer__hover-menu .Layer__hover-menu__list-wrapper .Layer__hover-menu__list {
876
- flex: 1;
881
+ box-sizing: border-box;
877
882
  display: flex;
883
+ flex: 1;
878
884
  flex-direction: column;
879
885
  gap: var(--spacing-3xs);
886
+ padding: var(--spacing-3xs);
880
887
  border-radius: var(--spacing-xs);
881
- background: var(--color-base-0);
882
888
  box-shadow:
883
- 0px 0px 0px 1px rgba(25, 25, 25, 0.06),
884
- 0px 4px 12px 0px var(--base-transparent-1, rgba(16, 24, 40, 0.01)),
885
- 0px 2px 4px 0px rgba(25, 25, 25, 0.06);
886
- box-sizing: border-box;
889
+ 0 0 0 1px rgba(25, 25, 25, 0.06),
890
+ 0 4px 12px 0 var(--base-transparent-1, rgba(16, 24, 40, 0.01)),
891
+ 0 2px 4px 0 rgba(25, 25, 25, 0.06);
887
892
  margin: 0;
888
- padding: var(--spacing-3xs);
893
+ background: var(--color-base-0);
889
894
  list-style: none;
890
895
  }
891
896
  .Layer__hover-menu .Layer__hover-menu__list-wrapper .Layer__hover-menu__list .Layer__hover-menu__list-item {
897
+ display: flex;
898
+ align-items: center;
892
899
  padding: var(--spacing-3xs);
893
900
  padding-left: var(--spacing-xs);
894
901
  border-radius: var(--spacing-2xs);
895
902
  color: var(--color-base-500);
896
903
  transition: all 0.2s ease-in-out;
897
- display: flex;
898
- align-items: center;
899
904
  }
900
905
  .Layer__hover-menu .Layer__hover-menu__list-wrapper .Layer__hover-menu__list .Layer__hover-menu__list-item .Layer__hover-menu__list-item-button {
901
- text-align: start;
902
- background: none;
906
+ width: 100%;
903
907
  border: none;
904
908
  outline: none;
905
- color: inherit;
909
+ background: none;
910
+ cursor: pointer;
906
911
  font-size: var(--text-sm);
912
+ line-height: normal;
907
913
  font-family: inherit;
908
- font-feature-settings: inherit;
909
914
  font-weight: 500;
910
- width: 100%;
911
- line-height: normal;
915
+ text-align: start;
916
+ color: inherit;
917
+ font-feature-settings: inherit;
912
918
  letter-spacing: -0.06px;
913
- cursor: pointer;
914
919
  }
915
920
  .Layer__hover-menu .Layer__hover-menu__list-wrapper .Layer__hover-menu__list .Layer__hover-menu__list-item:hover {
916
921
  background: var(--color-base-50);
917
- color: var(--color-base-800);
918
922
  font-weight: 540;
923
+ color: var(--color-base-800);
919
924
  }
920
925
  .Layer__component {
921
926
  max-width: 1406px;
@@ -993,14 +998,14 @@
993
998
  }
994
999
  .Layer__datetime {
995
1000
  display: inline-flex;
996
- align-items: center;
997
1001
  gap: var(--spacing-md);
1002
+ align-items: center;
998
1003
  }
999
1004
  .Layer__DatePickerModeSelector__container {
1000
1005
  display: flex;
1001
1006
  justify-content: flex-end;
1002
- padding-inline: var(--spacing-xs);
1003
1007
  padding-block: var(--spacing-xs);
1008
+ padding-inline: var(--spacing-xs);
1004
1009
  }
1005
1010
  .Layer__datepicker__wrapper,
1006
1011
  #Layer__datepicker__portal {
@@ -2975,13 +2980,13 @@
2975
2980
  padding: var(--spacing-xs) var(--spacing-md);
2976
2981
  }
2977
2982
  .Layer__file-thumb {
2983
+ box-sizing: border-box;
2984
+ position: relative;
2978
2985
  display: flex;
2986
+ gap: var(--spacing-2xs);
2979
2987
  align-items: flex-start;
2980
2988
  justify-content: space-between;
2981
2989
  min-height: 38px;
2982
- gap: var(--spacing-2xs);
2983
- position: relative;
2984
- box-sizing: border-box;
2985
2990
  container-type: normal;
2986
2991
  }
2987
2992
  .Layer__file-thumb:not(.Layer__file-thumb--floating) {
@@ -2994,17 +2999,17 @@
2994
2999
  border-bottom: 1px solid var(--color-base-300);
2995
3000
  }
2996
3001
  .Layer__file-thumb:not(.Layer__file-thumb--floating) .Layer__file-thumb__actions:not(.Layer__file-thumb__actions--floating) {
2997
- padding-left: 0;
2998
3002
  padding-right: 0;
3003
+ padding-left: 0;
2999
3004
  margin-left: -6px;
3000
3005
  }
3001
3006
  .Layer__file-thumb:not(.Layer__file-thumb--floating) .Layer__file-thumb__actions:not(.Layer__file-thumb__actions--floating) .Layer__icon-btn {
3002
- width: 26px;
3003
3007
  height: 26px;
3008
+ width: 26px;
3004
3009
  }
3005
3010
  .Layer__file-thumb:not(.Layer__file-thumb--floating) .Layer__file-thumb__actions:not(.Layer__file-thumb__actions--floating) .Layer__icon-btn svg {
3006
- width: 14px;
3007
3011
  height: 14px;
3012
+ width: 14px;
3008
3013
  }
3009
3014
  }
3010
3015
  .Layer__file-thumb__main {
@@ -3027,55 +3032,55 @@
3027
3032
  color: var(--color-danger);
3028
3033
  }
3029
3034
  .Layer__file-thumb__actions.Layer__file-thumb__actions--floating {
3030
- display: none;
3031
3035
  position: absolute;
3032
3036
  top: -20px;
3033
3037
  right: -10px;
3034
- background-color: var(--color-base-0);
3038
+ display: none;
3035
3039
  border-radius: var(--border-radius-3xs);
3036
- box-shadow: 0px 1px 2px 0px var(--base-transparent-6), 0px 0px 0px 1px var(--color-base-300);
3040
+ box-shadow: 0 1px 2px 0 var(--base-transparent-6), 0 0 0 1px var(--color-base-300);
3041
+ background-color: var(--color-base-0);
3037
3042
  transform: scale(0.8);
3038
3043
  }
3039
3044
  .Layer__file-thumb:hover .Layer__file-thumb__actions--floating {
3040
3045
  display: flex;
3041
3046
  }
3042
3047
  .Layer__file-thumb__img {
3043
- width: 100%;
3044
3048
  height: 100%;
3045
3049
  height: 38px;
3050
+ width: 100%;
3046
3051
  width: 38px;
3047
3052
  border-radius: var(--border-radius-3xs, 4px);
3053
+ box-shadow: 0 1px 2px 0 var(--base-transparent-6), 0 0 0 1px var(--color-base-300);
3048
3054
  background: var(--color-base-300);
3049
- box-shadow: 0px 1px 2px 0px var(--base-transparent-6), 0px 0px 0px 1px var(--color-base-300);
3050
3055
  }
3051
3056
  .Layer__file-thumb__img img {
3052
- width: 100%;
3053
3057
  height: 100%;
3058
+ width: 100%;
3054
3059
  object-fit: cover;
3055
3060
  }
3056
3061
  .Layer__file-thumb__details {
3057
3062
  display: flex;
3058
3063
  flex-direction: column;
3059
- align-items: flex-start;
3060
3064
  gap: var(--spacing-4xs);
3061
- font-size: var(--text-sm);
3065
+ align-items: flex-start;
3062
3066
  justify-content: flex-start;
3063
3067
  padding: var(--spacing-4xs) var(--spacing-2xs);
3068
+ font-size: var(--text-sm);
3064
3069
  }
3065
3070
  .Layer__file-thumb__details__date {
3066
3071
  color: var(--color-base-600);
3067
3072
  }
3068
3073
  .Layer__file-thumb__details__uploading {
3069
3074
  display: flex;
3070
- align-items: center;
3071
3075
  gap: var(--spacing-3xs);
3076
+ align-items: center;
3072
3077
  color: var(--color-info-fg);
3073
3078
  }
3074
3079
  .Layer__file-thumb__details__error {
3075
3080
  color: var(--color-danger);
3076
3081
  }
3077
3082
  .Layer__file-thumb__details__name {
3078
- word-break: break-word;
3083
+ overflow-wrap: break-word;
3079
3084
  }
3080
3085
  .Layer__header {
3081
3086
  display: flex;
@@ -3084,37 +3089,37 @@
3084
3089
  }
3085
3090
  .Layer__header--sticky {
3086
3091
  position: sticky;
3092
+ z-index: 10;
3087
3093
  top: 0;
3088
3094
  background: rgba(255, 255, 255, 0.5);
3089
3095
  backdrop-filter: blur(6px);
3090
- z-index: 10;
3091
3096
  }
3092
3097
  .Layer__header--top-rounded {
3093
3098
  border-top-left-radius: var(--border-radius-sm);
3094
3099
  border-top-right-radius: var(--border-radius-sm);
3095
3100
  }
3096
3101
  .Layer__header__row {
3102
+ box-sizing: border-box;
3097
3103
  display: flex;
3098
- width: 100%;
3104
+ gap: var(--spacing-sm);
3099
3105
  align-items: center;
3100
3106
  justify-content: space-between;
3101
- gap: var(--spacing-sm);
3102
- border-bottom: 1px solid var(--border-color);
3107
+ width: 100%;
3103
3108
  padding: 0 var(--spacing-md);
3104
- box-sizing: border-box;
3109
+ border-bottom: 1px solid var(--border-color);
3105
3110
  }
3106
3111
  .Layer__header__row[data-direction=col] {
3107
3112
  flex-direction: column;
3113
+ gap: var(--spacing-md);
3108
3114
  align-items: flex-start;
3109
3115
  padding-top: var(--spacing-md);
3110
3116
  padding-bottom: var(--spacing-md);
3111
- gap: var(--spacing-md);
3112
3117
  }
3113
3118
  .Layer__header__row[data-direction=col] .Layer__header__col {
3114
- padding-top: 0;
3115
- padding-bottom: 0;
3116
3119
  min-height: 36px;
3117
3120
  width: 100%;
3121
+ padding-top: 0;
3122
+ padding-bottom: 0;
3118
3123
  }
3119
3124
  @container (min-width: 1400px) {
3120
3125
  .Layer__header__row {
@@ -3122,15 +3127,15 @@
3122
3127
  }
3123
3128
  }
3124
3129
  .Layer__header__col {
3130
+ box-sizing: border-box;
3125
3131
  display: flex;
3126
- align-items: center;
3127
3132
  gap: var(--spacing-sm);
3133
+ align-items: center;
3128
3134
  min-height: 68px;
3129
- box-sizing: border-box;
3130
3135
  }
3131
3136
  .Layer__header__col[data-no-padding=true] {
3132
- padding-left: 0;
3133
3137
  padding-right: 0;
3138
+ padding-left: 0;
3134
3139
  }
3135
3140
  ::placeholder {
3136
3141
  color: var(--input-placeholder-color);
@@ -3676,13 +3681,13 @@
3676
3681
  .Layer__Portal .Layer__textarea,
3677
3682
  .Layer__Portal .Layer__select__control,
3678
3683
  .Layer__Portal .Layer__input {
3679
- min-height: 36px;
3684
+ height: 36px;
3680
3685
  font-size: 16px;
3681
3686
  }
3682
3687
  .Layer__view .Layer__bank-transaction-list-item__expanded-row .Layer__select .Layer__select__control,
3683
3688
  .Layer__component .Layer__bank-transaction-list-item__expanded-row .Layer__select .Layer__select__control,
3684
3689
  .Layer__Portal .Layer__bank-transaction-list-item__expanded-row .Layer__select .Layer__select__control {
3685
- min-height: 36px;
3690
+ height: 36px;
3686
3691
  }
3687
3692
  }
3688
3693
  .Layer__form .Layer__form-section {
@@ -3712,15 +3717,15 @@
3712
3717
  transform 500ms ease-out;
3713
3718
  }
3714
3719
  .Layer__onboarding__content {
3720
+ box-sizing: border-box;
3715
3721
  display: flex;
3716
3722
  flex-direction: column;
3717
3723
  align-items: center;
3718
3724
  padding: var(--spacing-lg) var(--spacing-md) var(--spacing-3xl);
3719
- box-sizing: border-box;
3720
3725
  }
3721
3726
  .Layer__onboarding .Layer__actionable_row {
3722
- max-width: 90%;
3723
3727
  width: 640px;
3728
+ max-width: 90%;
3724
3729
  }
3725
3730
  .Layer__table {
3726
3731
  width: 100%;
@@ -4082,34 +4087,34 @@ tbody .Layer__table__empty-row:first-child {
4082
4087
  border-bottom: 1px solid var(--border-color);
4083
4088
  }
4084
4089
  .Layer__heading {
4085
- color: var(--text-color-primary);
4090
+ align-self: center;
4091
+ margin: 0;
4086
4092
  font-size: var(--text-heading);
4093
+ line-height: 140%;
4087
4094
  font-weight: var(--font-weight-bold);
4095
+ color: var(--text-color-primary);
4088
4096
  font-variation-settings: "wght" var(--font-weight-bold);
4089
- line-height: 140%;
4090
4097
  letter-spacing: -0.12px;
4091
- margin: 0;
4092
- align-self: center;
4093
4098
  }
4094
4099
  .Layer__heading--secondary,
4095
4100
  .Layer__heading.Layer__heading--secondary {
4096
- color: var(--text-color-primary);
4097
4101
  font-size: var(--text-heading-sm);
4098
4102
  font-weight: var(--font-weight-bold);
4103
+ color: var(--text-color-primary);
4099
4104
  font-variation-settings: "wght" var(--font-weight-bold);
4100
4105
  }
4101
4106
  .Layer__heading--view,
4102
4107
  .Layer__heading.Layer__heading--view {
4103
- color: var(--text-color-primary);
4104
4108
  font-size: var(--text-heading-view);
4105
4109
  font-weight: var(--font-weight-bold);
4110
+ color: var(--text-color-primary);
4106
4111
  font-variation-settings: "wght" var(--font-weight-bold);
4107
4112
  }
4108
4113
  .Layer__heading--page,
4109
4114
  .Layer__heading.Layer__heading--page {
4110
- color: var(--text-color-primary);
4111
4115
  font-size: var(--text-heading-page);
4112
4116
  font-weight: var(--font-weight-bold);
4117
+ color: var(--text-color-primary);
4113
4118
  font-variation-settings: "wght" var(--font-weight-bold);
4114
4119
  }
4115
4120
  .Layer__heading--left {
@@ -4122,6 +4127,8 @@ tbody .Layer__table__empty-row:first-child {
4122
4127
  align-self: flex-end;
4123
4128
  }
4124
4129
  .Layer__text {
4130
+ margin: 0;
4131
+ line-height: 140%;
4125
4132
  font-family: var(--font-family);
4126
4133
  font-weight: var(--font-weight-normal);
4127
4134
  font-variant-numeric: lining-nums proportional-nums;
@@ -4130,8 +4137,6 @@ tbody .Layer__table__empty-row:first-child {
4130
4137
  "cv05" on,
4131
4138
  "cv08" on,
4132
4139
  "ss03" on;
4133
- line-height: 140%;
4134
- margin: 0;
4135
4140
  }
4136
4141
  .Layer__text--sm {
4137
4142
  font-size: var(--text-sm);
@@ -4183,10 +4188,10 @@ tbody .Layer__table__empty-row:first-child {
4183
4188
  text-overflow: ellipsis;
4184
4189
  }
4185
4190
  .Layer__label {
4186
- color: var(--color-base-500);
4191
+ overflow: hidden;
4187
4192
  font-weight: var(--font-weight-normal);
4193
+ color: var(--color-base-500);
4188
4194
  white-space: nowrap;
4189
- overflow: hidden;
4190
4195
  }
4191
4196
  .Layer__justify--center {
4192
4197
  justify-content: center;
@@ -4335,8 +4340,8 @@ tbody .Layer__table__empty-row:first-child {
4335
4340
  .Layer__view .Layer__view-header__title {
4336
4341
  display: flex;
4337
4342
  align-items: center;
4338
- width: 100%;
4339
4343
  min-height: 44px;
4344
+ width: 100%;
4340
4345
  padding: var(--spacing-md) var(--spacing-sm);
4341
4346
  }
4342
4347
  .Layer__view .Layer__view-header__content {
@@ -4607,7 +4612,7 @@ tbody .Layer__table__empty-row:first-child {
4607
4612
  display: flex;
4608
4613
  align-items: center;
4609
4614
  justify-content: center;
4610
- --size: 1.75rem;
4615
+ --size: 1.25rem;
4611
4616
  block-size: var(--size);
4612
4617
  inline-size: var(--size);
4613
4618
  cursor: pointer;
@@ -4616,7 +4621,7 @@ tbody .Layer__table__empty-row:first-child {
4616
4621
  display: flex;
4617
4622
  align-items: center;
4618
4623
  justify-content: center;
4619
- --size: 1.75rem;
4624
+ --size: 1.25rem;
4620
4625
  block-size: var(--size);
4621
4626
  inline-size: var(--size);
4622
4627
  cursor: default;
@@ -4629,7 +4634,7 @@ tbody .Layer__table__empty-row:first-child {
4629
4634
  inline-size: var(--size);
4630
4635
  cursor: pointer;
4631
4636
  color: var(--color-base-600);
4632
- --size: 1.75rem;
4637
+ --size: 1.25rem;
4633
4638
  }
4634
4639
  .Layer__ComboBoxMenu {
4635
4640
  overflow: hidden;
@@ -4911,23 +4916,23 @@ tbody .Layer__table__empty-row:first-child {
4911
4916
  animation-iteration-count: infinite;
4912
4917
  }
4913
4918
  .Layer__Menu {
4914
- max-block-size: inherit;
4915
- min-inline-size: 9rem;
4916
- overflow: auto;
4917
4919
  display: flex;
4918
4920
  flex-direction: column;
4919
4921
  gap: var(--spacing-3xs);
4922
+ overflow: auto;
4923
+ max-block-size: inherit;
4924
+ min-inline-size: 9rem;
4920
4925
  padding: var(--spacing-3xs);
4921
- border: 1px solid var(--border-color);
4922
4926
  border-radius: var(--spacing-xs);
4923
- background: white;
4927
+ border: 1px solid var(--border-color);
4924
4928
  outline: none;
4929
+ background: white;
4925
4930
  }
4926
4931
  .Layer__MenuItem {
4927
4932
  display: flex;
4928
4933
  align-items: center;
4929
- padding-inline: var(--spacing-xs);
4930
4934
  padding-block: var(--spacing-3xs);
4935
+ padding-inline: var(--spacing-xs);
4931
4936
  border-radius: var(--spacing-2xs);
4932
4937
  outline: none;
4933
4938
  cursor: pointer;
@@ -5090,16 +5095,16 @@ tbody .Layer__table__empty-row:first-child {
5090
5095
  display: inline-flex;
5091
5096
  flex-direction: row;
5092
5097
  align-items: center;
5098
+ padding: var(--spacing-2xs) var(--spacing-sm);
5099
+ border-radius: var(--badge-border-radius);
5093
5100
  border: none;
5094
5101
  outline: none;
5102
+ background-color: var(--badge-bg-color);
5095
5103
  cursor: pointer;
5104
+ user-select: none;
5096
5105
  font-size: var(--text-sm);
5097
- background-color: var(--badge-bg-color);
5098
5106
  color: var(--badge-color);
5099
- border-radius: var(--badge-border-radius);
5100
- padding: var(--spacing-2xs) var(--spacing-sm);
5101
5107
  white-space: nowrap;
5102
- user-select: none;
5103
5108
  }
5104
5109
  .Layer__Pill svg {
5105
5110
  margin-right: 0.25rem;
@@ -5609,12 +5614,21 @@ tbody .Layer__table__empty-row:first-child {
5609
5614
  .Layer__UI__Heading[data-size=sm] {
5610
5615
  font-size: var(--text-heading-sm);
5611
5616
  }
5612
- .Layer__UI__Heading[data-size=lg] {
5617
+ .Layer__UI__Heading[data-size=md] {
5613
5618
  font-size: var(--text-heading-secondary);
5614
5619
  }
5615
- .Layer__UI__Heading[data-size=xl] {
5620
+ .Layer__UI__Heading[data-size=lg] {
5616
5621
  font-size: var(--text-heading);
5617
5622
  }
5623
+ .Layer__UI__Heading[data-size=xl] {
5624
+ font-size: var(--text-heading-xl);
5625
+ }
5626
+ .Layer__UI__Heading[data-size="2xl"] {
5627
+ font-size: var(--text-heading-2xl);
5628
+ }
5629
+ .Layer__UI__Heading[data-size="3xl"] {
5630
+ font-size: var(--text-heading-3xl);
5631
+ }
5618
5632
  .Layer__UI__Heading[data-align=left] {
5619
5633
  text-align: left;
5620
5634
  }
@@ -5635,8 +5649,8 @@ tbody .Layer__table__empty-row:first-child {
5635
5649
  font-weight: var(--font-weight-bold);
5636
5650
  }
5637
5651
  .Layer__MoneyText {
5638
- color: var(--color-base-800);
5639
5652
  overflow-x: hidden;
5653
+ color: var(--color-base-800);
5640
5654
  text-overflow: ellipsis;
5641
5655
  }
5642
5656
  .Layer__MoneyText[data-bold] {
@@ -5682,7 +5696,7 @@ tbody .Layer__table__empty-row:first-child {
5682
5696
  .Layer__Label[data-variant=subtle],
5683
5697
  .Layer__P[data-variant=subtle],
5684
5698
  .Layer__Span[data-variant=subtle] {
5685
- color: var(--color-base-600);
5699
+ color: var(--fg-subtle);
5686
5700
  }
5687
5701
  .Layer__Header[data-status=error],
5688
5702
  .Layer__Label[data-status=error],
@@ -5704,6 +5718,12 @@ tbody .Layer__table__empty-row:first-child {
5704
5718
  overflow: hidden;
5705
5719
  text-overflow: ellipsis;
5706
5720
  }
5721
+ .Layer__Header[data-size="2xs"],
5722
+ .Layer__Label[data-size="2xs"],
5723
+ .Layer__P[data-size="2xs"],
5724
+ .Layer__Span[data-size="2xs"] {
5725
+ font-size: var(--text-2xs);
5726
+ }
5707
5727
  .Layer__Header[data-size=xs],
5708
5728
  .Layer__Label[data-size=xs],
5709
5729
  .Layer__P[data-size=xs],
@@ -5956,6 +5976,24 @@ tbody .Layer__table__empty-row:first-child {
5956
5976
  .Layer__InvisibleDownload {
5957
5977
  display: none;
5958
5978
  }
5979
+ .Layer__call-booking {
5980
+ padding: var(--spacing-lg);
5981
+ }
5982
+ .Layer__call-booking .Layer__call-booking-details {
5983
+ width: 100%;
5984
+ }
5985
+ .Layer__call-booking .Layer__call-booking-actions {
5986
+ width: 100%;
5987
+ margin-top: var(--spacing-md);
5988
+ }
5989
+ .Layer__call-booking .Layer__call-booking-state {
5990
+ text-align: center;
5991
+ }
5992
+ @media (width <= 480px) {
5993
+ .Layer__call-booking {
5994
+ padding: var(--spacing-md);
5995
+ }
5996
+ }
5959
5997
  .Layer__custom-account-form .Layer__custom-account-form__field > .Layer__input-tooltip {
5960
5998
  display: flex;
5961
5999
  flex: 1 1;
@@ -6114,8 +6152,8 @@ tbody .Layer__table__empty-row:first-child {
6114
6152
  }
6115
6153
  .Layer__due-status--sm {
6116
6154
  flex-direction: row;
6117
- align-items: center;
6118
6155
  gap: var(--spacing-3xs);
6156
+ align-items: center;
6119
6157
  }
6120
6158
  .Layer__due-status[data-status=overdue] .Layer__due-status__title {
6121
6159
  color: var(--color-info-error);
@@ -6135,8 +6173,8 @@ tbody .Layer__table__empty-row:first-child {
6135
6173
  .Layer__BasicLinkedAccountContainer {
6136
6174
  display: grid;
6137
6175
  grid-template-columns: minmax(0, 1fr) auto;
6138
- padding-inline: var(--spacing-xs) var(--spacing-md);
6139
6176
  padding-block: var(--spacing-xs);
6177
+ padding-inline: var(--spacing-xs) var(--spacing-md);
6140
6178
  border-radius: var(--border-radius-xs);
6141
6179
  border: 1px solid var(--outline-subtle);
6142
6180
  }
@@ -6147,8 +6185,8 @@ tbody .Layer__table__empty-row:first-child {
6147
6185
  display: flex;
6148
6186
  align-items: center;
6149
6187
  justify-content: center;
6150
- width: 52px;
6151
6188
  height: 28px;
6189
+ width: 52px;
6152
6190
  padding: var(--spacing-3xs) 0;
6153
6191
  border-radius: var(--border-radius-3xs);
6154
6192
  background: var(--color-base-0);
@@ -6753,8 +6791,8 @@ tbody .Layer__table__empty-row:first-child {
6753
6791
  }
6754
6792
  }
6755
6793
  .Layer__bills-list-item__separator {
6756
- width: 1px;
6757
6794
  height: 10px;
6795
+ width: 1px;
6758
6796
  background-color: var(--color-base-400);
6759
6797
  }
6760
6798
  @container (max-width: 499px) {
@@ -6983,17 +7021,17 @@ tbody .Layer__table__empty-row:first-child {
6983
7021
  width: 100%;
6984
7022
  }
6985
7023
  .Layer__caobfb {
6986
- padding-inline: var(--spacing-md);
6987
- padding-block: var(--spacing-sm);
6988
7024
  position: relative;
6989
7025
  display: flex;
6990
7026
  gap: var(--spacing-sm);
7027
+ max-height: 280px;
7028
+ padding-block: var(--spacing-sm);
7029
+ padding-inline: var(--spacing-md);
6991
7030
  border-radius: var(--border-radius-xs);
6992
7031
  border: 1px solid var(--color-base-100);
6993
7032
  container-type: inline-size;
6994
7033
  transition: all 0.25s ease-in-out;
6995
7034
  transition-delay: 0.8s;
6996
- max-height: 280px;
6997
7035
  }
6998
7036
  .Layer__caobfb[data-confirmed=true] {
6999
7037
  background-color: var(--color-base-50);
@@ -7005,10 +7043,10 @@ tbody .Layer__table__empty-row:first-child {
7005
7043
  }
7006
7044
  .Layer__caobfb__details-col {
7007
7045
  display: flex;
7046
+ flex: 1;
7008
7047
  flex-direction: column;
7009
7048
  gap: var(--spacing-2xs);
7010
7049
  color: var(--color-base-700);
7011
- flex: 1;
7012
7050
  }
7013
7051
  .Layer__caobfb__details-col__details {
7014
7052
  padding-bottom: var(--spacing-sm);
@@ -7020,17 +7058,17 @@ tbody .Layer__table__empty-row:first-child {
7020
7058
  max-width: 500px;
7021
7059
  }
7022
7060
  .Layer__caobfb__details-col__name__institution-name {
7023
- color: var(--color-base-500);
7061
+ overflow: hidden;
7024
7062
  max-width: 50%;
7063
+ color: var(--color-base-500);
7025
7064
  text-overflow: ellipsis;
7026
- overflow: hidden;
7027
7065
  white-space: nowrap;
7028
7066
  }
7029
7067
  .Layer__caobfb__details-col__name__account-name {
7030
- color: var(--color-base-1000);
7068
+ overflow: hidden;
7031
7069
  max-width: 50%;
7070
+ color: var(--color-base-1000);
7032
7071
  text-overflow: ellipsis;
7033
- overflow: hidden;
7034
7072
  white-space: nowrap;
7035
7073
  }
7036
7074
  .Layer__caobfb__details-col__inputs {
@@ -7065,23 +7103,23 @@ tbody .Layer__table__empty-row:first-child {
7065
7103
  }
7066
7104
  .Layer__caobfb__success-banner {
7067
7105
  position: absolute;
7068
- inset: 0;
7069
- opacity: 0;
7070
7106
  z-index: -1;
7107
+ inset: 0;
7071
7108
  display: flex;
7072
7109
  flex-direction: column;
7073
7110
  align-items: center;
7074
7111
  justify-content: center;
7075
7112
  padding: var(--spacing-sm);
7076
7113
  background-color: var(--color-base-50);
7077
- transition: opacity 0.12s ease-in-out;
7078
7114
  color: var(--color-info-success-fg);
7115
+ opacity: 0;
7116
+ transition: opacity 0.12s ease-in-out;
7079
7117
  }
7080
7118
  .Layer__caobfb[data-saved] {
7119
+ overflow: hidden;
7081
7120
  max-height: 0;
7082
7121
  padding: 0;
7083
7122
  border-width: 0;
7084
- overflow: hidden;
7085
7123
  }
7086
7124
  .Layer__caobfb[data-saved] .Layer__caobfb__success-banner {
7087
7125
  opacity: 1;
@@ -7490,9 +7528,9 @@ tbody .Layer__table__empty-row:first-child {
7490
7528
  align-items: center;
7491
7529
  }
7492
7530
  .Layer__progress-steps .Layer__progress-steps--step-wrapper {
7531
+ position: relative;
7493
7532
  display: flex;
7494
7533
  align-items: flex-start;
7495
- position: relative;
7496
7534
  min-width: 50px;
7497
7535
  }
7498
7536
  .Layer__progress-steps .Layer__progress-steps--step-wrapper .Layer__progress-steps--step {
@@ -7525,61 +7563,61 @@ tbody .Layer__table__empty-row:first-child {
7525
7563
  position: relative;
7526
7564
  }
7527
7565
  .Layer__progress-steps .Layer__progress-steps--step-wrapper .Layer__progress-steps--step .Layer__progress-steps--label p::after {
7528
- content: "";
7529
- opacity: 0;
7530
- width: 100%;
7531
- height: 100%;
7532
- padding: 2px 8px;
7533
- background-color: var(--color-base-300);
7534
7566
  position: absolute;
7535
- border-radius: 30px;
7567
+ z-index: -1;
7536
7568
  top: -2px;
7537
7569
  left: -8px;
7570
+ height: 100%;
7571
+ width: 100%;
7572
+ padding: 2px 8px;
7573
+ border-radius: 30px;
7574
+ background-color: var(--color-base-300);
7575
+ content: "";
7576
+ opacity: 0;
7538
7577
  transition: all 200ms ease;
7539
- z-index: -1;
7540
7578
  }
7541
7579
  .Layer__progress-steps .Layer__progress-steps--step-wrapper .Layer__progress-steps--step .Layer__progress-steps--circle {
7542
- width: 12px;
7543
- height: 12px;
7544
- background-color: var(--color-base-50);
7545
- border: 1px var(--color-base-500);
7546
- border-style: dashed;
7547
- border-radius: 100%;
7548
7580
  position: relative;
7549
7581
  display: flex;
7550
7582
  align-items: center;
7551
7583
  justify-content: center;
7584
+ height: 12px;
7585
+ width: 12px;
7586
+ border-radius: 100%;
7587
+ border: 1px var(--color-base-500);
7588
+ background-color: var(--color-base-50);
7589
+ border-style: dashed;
7552
7590
  transition: all 200ms ease;
7553
7591
  }
7554
7592
  .Layer__progress-steps .Layer__progress-steps--step-wrapper .Layer__progress-steps--step .Layer__progress-steps--circle::after {
7593
+ position: absolute;
7594
+ top: -1px;
7595
+ left: -1px;
7555
7596
  display: block;
7556
- content: "";
7557
- width: 12px;
7558
7597
  height: 12px;
7598
+ width: 12px;
7599
+ border-radius: 100%;
7559
7600
  border: 1px var(--color-base-500);
7601
+ content: "";
7560
7602
  border-style: dashed;
7561
- border-radius: 100%;
7562
- position: absolute;
7563
- top: -1px;
7564
- left: -1px;
7565
7603
  transition: all 200ms ease;
7566
7604
  }
7567
7605
  .Layer__progress-steps--step-line {
7568
- width: 100%;
7569
- height: 2px;
7570
- background-color: var(--color-base-300);
7571
7606
  position: absolute;
7572
7607
  top: 6px;
7573
7608
  display: flex;
7574
7609
  align-items: center;
7575
7610
  justify-content: flex-start;
7611
+ height: 2px;
7612
+ width: 100%;
7613
+ background-color: var(--color-base-300);
7576
7614
  }
7577
7615
  .Layer__progress-steps--step-line::after {
7578
- content: "";
7579
- width: 0%;
7616
+ position: absolute;
7580
7617
  height: 2px;
7618
+ width: 0%;
7581
7619
  background-color: var(--color-base-800);
7582
- position: absolute;
7620
+ content: "";
7583
7621
  transition: all 200ms ease;
7584
7622
  }
7585
7623
  .Layer__progress-steps--step[data-complete=true] .Layer__progress-steps--step-line::after {
@@ -7622,17 +7660,17 @@ tbody .Layer__table__empty-row:first-child {
7622
7660
  container-type: inline-size;
7623
7661
  }
7624
7662
  .Layer__platform-onboarding-layout {
7625
- position: relative;
7626
7663
  box-sizing: border-box;
7664
+ position: relative;
7627
7665
  padding: var(--spacing-lg);
7628
7666
  }
7629
7667
  .Layer__platform-onboarding__back-button-container {
7630
- max-width: calc(672px + 2 * var(--spacing-xl));
7631
- margin: auto;
7632
- margin-bottom: var(--spacing-lg);
7633
7668
  position: absolute;
7634
7669
  top: var(--spacing-lg);
7635
7670
  left: var(--spacing-lg);
7671
+ max-width: calc(672px + 2 * var(--spacing-xl));
7672
+ margin: auto;
7673
+ margin-bottom: var(--spacing-lg);
7636
7674
  }
7637
7675
  @container (width < 969px) {
7638
7676
  .Layer__platform-onboarding__back-button-container {
@@ -7640,16 +7678,16 @@ tbody .Layer__table__empty-row:first-child {
7640
7678
  }
7641
7679
  }
7642
7680
  .Layer__platfom-onboarding-layout__box {
7643
- padding: var(--spacing-xl);
7644
- max-width: 672px;
7645
- margin: auto;
7646
7681
  display: flex;
7647
7682
  flex-direction: column;
7648
7683
  gap: var(--spacing-lg);
7684
+ max-width: 672px;
7685
+ padding: var(--spacing-xl);
7649
7686
  border-radius: var(--border-radius-xs);
7650
- background: var(--color-base-0);
7651
7687
  box-shadow: 0 0 0 1px var(--base-transparent-4);
7688
+ margin: auto;
7652
7689
  margin-bottom: var(--spacing-md);
7690
+ background: var(--color-base-0);
7653
7691
  }
7654
7692
  @container (width < 500px) {
7655
7693
  .Layer__platfom-onboarding-layout__box {
@@ -7657,8 +7695,8 @@ tbody .Layer__table__empty-row:first-child {
7657
7695
  }
7658
7696
  }
7659
7697
  .Layer__platform-onboarding-layout__footer {
7660
- padding: var(--spacing-lg) 0;
7661
7698
  max-width: 1200px;
7699
+ padding: var(--spacing-lg) 0;
7662
7700
  margin: auto;
7663
7701
  }
7664
7702
  @container (width < 500px) {
@@ -7676,13 +7714,13 @@ tbody .Layer__table__empty-row:first-child {
7676
7714
  margin-bottom: var(--spacing-lg);
7677
7715
  }
7678
7716
  .Layer__platform-onboarding__welcome-footer__content {
7679
- max-width: 672px;
7680
- margin: auto;
7681
7717
  display: flex;
7682
7718
  flex-direction: column;
7683
- align-items: flex-start;
7684
7719
  gap: var(--spacing-lg);
7720
+ align-items: flex-start;
7721
+ max-width: 672px;
7685
7722
  padding: 0 var(--spacing-xl);
7723
+ margin: auto;
7686
7724
  }
7687
7725
  @container (width < 500px) {
7688
7726
  .Layer__platform-onboarding__welcome-footer__content {
@@ -7700,8 +7738,8 @@ tbody .Layer__table__empty-row:first-child {
7700
7738
  gap: var(--spacing-lg);
7701
7739
  align-items: flex-start;
7702
7740
  max-width: 1200px;
7703
- margin: auto;
7704
7741
  padding-top: var(--spacing-5xl);
7742
+ margin: auto;
7705
7743
  }
7706
7744
  @container (width < 640px) {
7707
7745
  .Layer__platform-onboarding__welcome-footer__images {
@@ -7715,16 +7753,16 @@ tbody .Layer__table__empty-row:first-child {
7715
7753
  }
7716
7754
  .Layer__platform-onboarding__welcome-footer__images .Layer__platform-onboarding__welcome-footer__image .Layer__platform__onboarding__welcome-footer__image-wrapper {
7717
7755
  display: flex;
7756
+ flex: 1 0 0;
7718
7757
  flex-direction: column;
7719
- align-items: center;
7720
7758
  gap: var(--spacing-2xl);
7721
- flex: 1 0 0;
7759
+ align-items: center;
7722
7760
  border-radius: 12px;
7723
7761
  box-shadow: 0 0 0 1px var(--base-transparent-4, rgba(16, 24, 40, 0.04));
7724
7762
  }
7725
7763
  .Layer__platform-onboarding__welcome-footer__images .Layer__platform-onboarding__welcome-footer__image .Layer__platform__onboarding__welcome-footer__image-wrapper img {
7726
- width: 100%;
7727
7764
  height: 100%;
7765
+ width: 100%;
7728
7766
  object-fit: contain;
7729
7767
  }
7730
7768
  .Layer__platform-onboarding__welcome-footer__images .Layer__platform-onboarding__welcome-footer__image .Layer__platform__onboarding__welcome-footer__image-text {
@@ -7733,14 +7771,14 @@ tbody .Layer__table__empty-row:first-child {
7733
7771
  gap: var(--spacing-xs);
7734
7772
  align-items: center;
7735
7773
  justify-content: center;
7736
- padding: 36px 0;
7737
7774
  max-width: 27ch;
7775
+ padding: 36px 0;
7738
7776
  margin: auto;
7739
7777
  text-align: center;
7740
7778
  }
7741
7779
  .Layer__separator {
7742
- width: 100%;
7743
7780
  height: 1px;
7781
+ width: 100%;
7744
7782
  background-color: var(--color-base-300);
7745
7783
  }
7746
7784
  .Layer__separator[data-mbe="3xs"] {
@@ -7887,41 +7925,41 @@ tbody .Layer__table__empty-row:first-child {
7887
7925
  @container (width < 460px) {
7888
7926
  .Layer__profit-and-loss-header__bookkeeping-status {
7889
7927
  position: static;
7890
- width: 260px;
7891
7928
  height: 18px;
7929
+ width: 260px;
7892
7930
  }
7893
7931
  .Layer__profit-and-loss-header__bookkeeping-status .Layer__bookkeeping-status {
7894
7932
  white-space: normal;
7895
7933
  }
7896
7934
  }
7897
7935
  .Layer__bookkeeping-status {
7898
- white-space: nowrap;
7899
7936
  display: flex;
7900
- align-items: center;
7901
7937
  gap: var(--spacing-3xs);
7938
+ align-items: center;
7939
+ white-space: nowrap;
7902
7940
  }
7903
7941
  .Layer__bookkeeping-status .Layer__bookkeeping-status__icon-wrapper {
7904
- border-radius: 50%;
7905
- width: 16px;
7906
- height: 16px;
7907
7942
  display: flex;
7908
7943
  align-items: center;
7909
7944
  justify-content: center;
7910
- color: var(--color-info-fg);
7911
- background: var(--color-info-bg);
7945
+ height: 16px;
7946
+ width: 16px;
7947
+ border-radius: 50%;
7912
7948
  margin-top: -1px;
7949
+ background: var(--color-info-bg);
7950
+ color: var(--color-info-fg);
7913
7951
  }
7914
7952
  .Layer__bookkeeping-status[data-status=warning] .Layer__bookkeeping-status__icon-wrapper {
7915
- color: var(--color-info-warning-fg);
7916
7953
  background: var(--color-info-warning-bg);
7954
+ color: var(--color-info-warning-fg);
7917
7955
  }
7918
7956
  .Layer__bookkeeping-status[data-status=success] .Layer__bookkeeping-status__icon-wrapper {
7919
- color: var(--color-info-success-fg);
7920
7957
  background: var(--color-info-success-bg);
7958
+ color: var(--color-info-success-fg);
7921
7959
  }
7922
7960
  .Layer__bookkeeping-status[data-status=error] .Layer__bookkeeping-status__icon-wrapper {
7923
- color: var(--color-info-error-fg);
7924
7961
  background: var(--color-info-error-bg);
7962
+ color: var(--color-info-error-fg);
7925
7963
  }
7926
7964
  .Layer__tabs__container {
7927
7965
  overflow: auto hidden;
@@ -8020,17 +8058,17 @@ tbody .Layer__table__empty-row:first-child {
8020
8058
  }
8021
8059
  .Layer__mobile-panel {
8022
8060
  position: fixed;
8061
+ z-index: -1;
8023
8062
  top: 0;
8024
8063
  left: 0;
8025
- width: 100dvw;
8064
+ display: flex;
8065
+ flex-direction: column;
8026
8066
  height: 100dvh;
8067
+ width: 100dvw;
8068
+ background-color: var(--color-base-50);
8027
8069
  opacity: 0;
8028
8070
  transition: opacity 180ms ease-out;
8029
8071
  filter: blur(6px);
8030
- display: flex;
8031
- flex-direction: column;
8032
- background-color: var(--color-base-50);
8033
- z-index: -1;
8034
8072
  }
8035
8073
  .Layer__mobile-panel[data-open] {
8036
8074
  z-index: var(--z-index-mobile-panel);
@@ -8041,11 +8079,11 @@ tbody .Layer__table__empty-row:first-child {
8041
8079
  .Layer__mobile-panel__header {
8042
8080
  top: 0;
8043
8081
  display: flex;
8082
+ gap: var(--spacing-lg);
8044
8083
  align-items: center;
8045
8084
  padding: var(--spacing-sm) var(--spacing-lg);
8046
- background-color: var(--color-base-0);
8047
- gap: var(--spacing-lg);
8048
8085
  border-bottom: 1px solid var(--color-base-100);
8086
+ background-color: var(--color-base-0);
8049
8087
  }
8050
8088
  .Layer__mobile-panel__content {
8051
8089
  flex: 1;
@@ -8147,6 +8185,69 @@ tbody .Layer__table__empty-row:first-child {
8147
8185
  .Layer__SearchField > [slot=search] {
8148
8186
  grid-area: search;
8149
8187
  }
8188
+ .Layer__JournalEntryForm {
8189
+ padding-top: var(--spacing-xl);
8190
+ }
8191
+ .Layer__JournalEntryForm .Layer__JournalEntryForm__Row {
8192
+ display: flex;
8193
+ gap: var(--spacing-md);
8194
+ padding: 0 var(--spacing-xl);
8195
+ }
8196
+ .Layer__JournalEntryForm .Layer__JournalEntryForm__Row > * {
8197
+ flex: 0 0 clamp(16rem, 100%, 24rem);
8198
+ }
8199
+ @container (max-width: 760px) {
8200
+ .Layer__JournalEntryForm .Layer__JournalEntryForm__Row {
8201
+ flex-direction: column;
8202
+ }
8203
+ .Layer__JournalEntryForm .Layer__JournalEntryForm__Row > * {
8204
+ flex: 1;
8205
+ max-width: clamp(12rem, 100%, 16rem);
8206
+ }
8207
+ }
8208
+ .Layer__JournalEntryForm .Layer__JournalEntryForm__Metadata {
8209
+ border-top: 1px solid var(--color-base-300);
8210
+ background-color: var(--color-base-50);
8211
+ }
8212
+ .Layer__JournalEntryForm .Layer__JournalEntryForm__AdditionalTextFields {
8213
+ flex: 1;
8214
+ min-width: 20rem;
8215
+ max-width: 32rem;
8216
+ }
8217
+ .Layer__JournalEntryForm__LineItem {
8218
+ display: flex;
8219
+ gap: var(--spacing-xs);
8220
+ align-items: flex-end;
8221
+ }
8222
+ .Layer__JournalEntryForm__LineItem .Layer__JournalEntryForm__Field--accountName {
8223
+ flex: 1 1 12rem;
8224
+ max-width: 20rem;
8225
+ }
8226
+ .Layer__JournalEntryForm__LineItem .Layer__JournalEntryForm__Field--amount {
8227
+ flex: 0 1 12rem;
8228
+ max-width: 12rem;
8229
+ }
8230
+ .Layer__JournalEntryForm__LineItem .Layer__JournalEntryForm__Field--tag {
8231
+ flex: 0 0 auto;
8232
+ min-width: 12rem;
8233
+ }
8234
+ .Layer__JournalEntryForm__LineItem .Layer__JournalEntryForm__Field--memo {
8235
+ flex: 2 1 12rem;
8236
+ }
8237
+ .Layer__JournalEntryForm__LineItem--readonly .Layer__JournalEntryForm__Field--removeButton {
8238
+ display: none;
8239
+ }
8240
+ @media (width <= 768px) {
8241
+ .Layer__JournalEntryForm__LineItem {
8242
+ flex-direction: column;
8243
+ gap: var(--spacing-sm);
8244
+ align-items: stretch;
8245
+ }
8246
+ .Layer__JournalEntryForm__LineItem .Layer__JournalEntryForm__Field {
8247
+ flex: 1 1 auto;
8248
+ max-width: 16rem;
8249
+ }
8250
+ }
8150
8251
  .Layer__TagSelectorLayoutGroup {
8151
8252
  display: grid;
8152
8253
  grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -8201,8 +8302,8 @@ tbody .Layer__table__empty-row:first-child {
8201
8302
  box-sizing: border-box;
8202
8303
  }
8203
8304
  .Layer__ledger-account__index {
8204
- background-color: var(--color-base-0);
8205
8305
  width: 100%;
8306
+ background-color: var(--color-base-0);
8206
8307
  }
8207
8308
  .Layer__ledger-account__panel {
8208
8309
  min-height: 800px;
@@ -8220,54 +8321,41 @@ tbody .Layer__table__empty-row:first-child {
8220
8321
  background: var(--color-base-0);
8221
8322
  }
8222
8323
  .Layer__ledger-account__entry-details__header {
8223
- background: var(--color-base-0);
8224
8324
  border-top-left-radius: var(--border-radius-sm);
8225
8325
  border-top-right-radius: var(--border-radius-sm);
8326
+ background: var(--color-base-0);
8226
8327
  }
8227
8328
  .Layer__ledger-account__title-container {
8228
8329
  display: flex;
8229
8330
  flex-direction: column;
8230
- justify-content: flex-start;
8231
8331
  align-items: flex-start;
8332
+ justify-content: flex-start;
8232
8333
  width: 100%;
8233
8334
  }
8234
8335
  .Layer__ledger-account__balance-container {
8235
8336
  display: flex;
8236
- align-items: center;
8237
8337
  gap: var(--spacing-xs);
8338
+ align-items: center;
8238
8339
  }
8239
8340
  .Layer__ledger-account__balance-label {
8240
8341
  color: var(--color-base-600);
8241
8342
  }
8242
- .Layer__ledger-account__entry-details__back-btn {
8243
- display: flex;
8244
- align-items: center;
8245
- gap: var(--spacing-md);
8246
- padding-bottom: var(--spacing-md);
8247
- }
8248
8343
  .Layer__ledger-account__entry-details__title-container > .Layer__text {
8249
8344
  font-size: 24px;
8250
8345
  }
8251
8346
  .Layer__ledger-account__entry-details__line-items {
8252
8347
  padding: var(--spacing-md);
8253
8348
  }
8254
- .Layer__ledger-account__entry-details__back-btn {
8255
- display: none;
8256
- background: var(--color-base-0);
8257
- padding-top: var(--spacing-xl);
8258
- padding-left: var(--spacing-xl);
8259
- padding-right: var(--spacing-xl);
8260
- }
8261
8349
  .Layer__ledger-account-table__tablet-main-col .Layer__table-cell-content {
8262
8350
  display: flex;
8263
8351
  flex-direction: column;
8264
- align-items: flex-start;
8265
8352
  gap: var(--spacing-xs);
8353
+ align-items: flex-start;
8266
8354
  }
8267
8355
  .Layer__ledger-account-table__tablet-main-col .Layer__ledger-account-table__tablet-main-col__date {
8268
8356
  display: flex;
8269
- align-items: center;
8270
8357
  gap: var(--spacing-xs);
8358
+ align-items: center;
8271
8359
  }
8272
8360
  .Layer__ledger_account-table__journal-id {
8273
8361
  color: var(--color-base-800);
@@ -8275,14 +8363,14 @@ tbody .Layer__table__empty-row:first-child {
8275
8363
  .Layer__ledger_account-table__balances-mobile {
8276
8364
  display: flex;
8277
8365
  flex-direction: column;
8278
- width: 100%;
8279
8366
  gap: var(--spacing-xs);
8367
+ width: 100%;
8280
8368
  }
8281
8369
  .Layer__ledger_account-table__balance-item {
8282
8370
  display: flex;
8283
- width: 100%;
8284
8371
  align-items: center;
8285
8372
  justify-content: space-between;
8373
+ width: 100%;
8286
8374
  }
8287
8375
  .Layer__ledger_account-table__balance-item .Layer__ledger_account-table__balances-mobile__value {
8288
8376
  font-weight: var(--font-weight-bold);
@@ -8292,14 +8380,11 @@ tbody .Layer__table__empty-row:first-child {
8292
8380
  .Layer__ledger-account__panel .Layer__panel__sidebar .Layer__panel__sidebar-content {
8293
8381
  width: 100%;
8294
8382
  }
8295
- .Layer__ledger-account__entry-details__back-btn {
8296
- display: flex;
8297
- }
8298
8383
  }
8299
8384
  @container (min-width: 500px) and (max-width: 1024px) {
8300
8385
  .Layer__ledger-account__panel .Layer__details-list .Layer__component-header {
8301
- padding-left: var(--spacing-xl);
8302
8386
  padding-right: var(--spacing-xl);
8387
+ padding-left: var(--spacing-xl);
8303
8388
  }
8304
8389
  }
8305
8390
  @container (max-width: 499px) {
@@ -8311,21 +8396,17 @@ tbody .Layer__table__empty-row:first-child {
8311
8396
  padding: 0 var(--spacing-xs);
8312
8397
  }
8313
8398
  .Layer__ledger-account__entry-details__line-items {
8314
- padding-left: 0;
8315
- padding-right: 0;
8316
8399
  padding-top: 0;
8400
+ padding-right: 0;
8401
+ padding-left: 0;
8317
8402
  }
8318
8403
  .Layer__ledger-account__entry-details__line-items .Layer__card {
8319
- box-shadow: none;
8320
8404
  border-radius: 0;
8405
+ box-shadow: none;
8321
8406
  }
8322
8407
  .Layer__ledger-account__panel .Layer__panel__sidebar {
8323
8408
  background: var(--color-base-0);
8324
8409
  }
8325
- .Layer__ledger-account__entry-details__back-btn {
8326
- padding-left: var(--spacing-md);
8327
- padding-right: var(--spacing-md);
8328
- }
8329
8410
  }
8330
8411
  .Layer__ledger-account__entry-details__table .Layer__table-row.Layer__table-row--variant-default,
8331
8412
  .Layer__ledger-account__entry-details__table .Layer__table-row.Layer__table-row--variant-summation {
@@ -8339,8 +8420,8 @@ tbody .Layer__table__empty-row:first-child {
8339
8420
  .Layer__ledger-account__entry-details__table tr td:last-child .Layer__table-cell-content,
8340
8421
  .Layer__ledger-account__entry-details__table tr th:first-child.Layer__table-header,
8341
8422
  .Layer__ledger-account__entry-details__table tr th:last-child.Layer__table-header {
8342
- padding-left: var(--spacing-lg);
8343
8423
  padding-right: var(--spacing-lg);
8424
+ padding-left: var(--spacing-lg);
8344
8425
  }
8345
8426
  }
8346
8427
  @container (max-width: 1023px) and (min-width: 700px) {
@@ -8594,6 +8675,7 @@ tbody .Layer__table__empty-row:first-child {
8594
8675
  }
8595
8676
  .Layer__bank-transaction-row .Layer__table-cell {
8596
8677
  background-color: var(--table-bg);
8678
+ color: var(--text-color-primary);
8597
8679
  transition: background-color var(--transition-speed) ease-out;
8598
8680
  }
8599
8681
  .Layer__bank-transaction-row .Layer__table-cell-content {
@@ -8682,13 +8764,19 @@ tbody .Layer__table__empty-row:first-child {
8682
8764
  display: flex;
8683
8765
  flex-direction: column;
8684
8766
  gap: var(--spacing-sm);
8685
- max-width: 680px;
8767
+ min-width: 40rem;
8768
+ max-width: 64rem;
8686
8769
  }
8687
8770
  .Layer__expanded-bank-transaction-row__content-panels {
8688
8771
  box-sizing: border-box;
8689
8772
  display: flex;
8690
8773
  flex-direction: row;
8691
- max-width: 680px;
8774
+ }
8775
+ .Layer__bank-transaction-form-fields .Layer__ComboBoxContainer {
8776
+ max-width: 20rem;
8777
+ }
8778
+ .Layer__bank-transaction-form-fields .Layer__bank-transaction-memo-input-group {
8779
+ max-width: 40rem;
8692
8780
  }
8693
8781
  .Layer__expanded-bank-transaction-row__content-panel {
8694
8782
  box-sizing: border-box;
@@ -8697,6 +8785,7 @@ tbody .Layer__table__empty-row:first-child {
8697
8785
  flex-direction: column;
8698
8786
  gap: var(--spacing-sm);
8699
8787
  overflow: hidden;
8788
+ height: 0;
8700
8789
  max-width: 0;
8701
8790
  opacity: 0;
8702
8791
  transition: max-width 150ms ease-out, opacity 300ms ease-out;
@@ -8706,6 +8795,7 @@ tbody .Layer__table__empty-row:first-child {
8706
8795
  padding: 0 var(--spacing-md);
8707
8796
  }
8708
8797
  .Layer__expanded-bank-transaction-row__content-panel.Layer__expanded-bank-transaction-row__content-panel--active {
8798
+ height: auto;
8709
8799
  max-width: 100%;
8710
8800
  opacity: 1;
8711
8801
  }
@@ -8741,9 +8831,6 @@ tbody .Layer__table__empty-row:first-child {
8741
8831
  max-width: 100%;
8742
8832
  opacity: 1;
8743
8833
  }
8744
- .Layer__expanded-bank-transaction-row__content-panel .Layer__expanded-bank-transaction-row__table-cell--split-entry {
8745
- max-height: 38px;
8746
- }
8747
8834
  .Layer__expanded-bank-transaction-row__content-panel .Layer__expanded-bank-transaction-row__splits-buttons {
8748
8835
  max-height: 38px;
8749
8836
  white-space: nowrap;
@@ -8767,7 +8854,7 @@ tbody .Layer__table__empty-row:first-child {
8767
8854
  display: flex;
8768
8855
  flex: 1;
8769
8856
  flex-direction: column;
8770
- gap: var(--spacing-sm);
8857
+ gap: var(--spacing-xs);
8771
8858
  padding-top: 2px;
8772
8859
  }
8773
8860
  .Layer__expanded-bank-transaction-row__splits-total {
@@ -8798,22 +8885,17 @@ tbody .Layer__table__empty-row:first-child {
8798
8885
  .Layer__bank-transaction-row__table-cell--amount-debit,
8799
8886
  .Layer__bank-transaction-list-item__amount-debit {
8800
8887
  justify-content: flex-end;
8801
- color: var(--text-color-primary);
8802
8888
  }
8803
8889
  .Layer__bank-transaction-row__table-cell--amount-debit .Layer__table-cell-content,
8804
8890
  .Layer__bank-transaction-list-item__amount-debit .Layer__table-cell-content {
8805
8891
  justify-content: flex-end;
8806
8892
  }
8807
- .Layer__bank-transaction-list-item__amount-debit {
8808
- color: var(--text-color-primary);
8809
- }
8810
8893
  .Layer__expanded-bank-transaction-row__description {
8811
8894
  padding: 0 var(--spacing-md);
8812
8895
  }
8813
8896
  .Layer__expanded-bank-transaction-row__description textarea {
8814
8897
  height: 100px;
8815
8898
  width: 100%;
8816
- max-width: 680px;
8817
8899
  }
8818
8900
  .Layer__expanded-bank-transaction-row__file-upload {
8819
8901
  display: flex;
@@ -8842,9 +8924,33 @@ tbody .Layer__table__empty-row:first-child {
8842
8924
  justify-content: flex-end;
8843
8925
  }
8844
8926
  .Layer__expanded-bank-transaction-row__table-cell--split-entry {
8927
+ display: grid;
8928
+ grid-template-areas: "amount category category button" "customer tags tags .";
8929
+ grid-template-columns: minmax(8rem, 12rem) minmax(12rem, 16rem) 1fr auto;
8930
+ gap: var(--spacing-xs);
8931
+ align-items: start;
8932
+ max-width: 40rem;
8933
+ }
8934
+ .Layer__expanded-bank-transaction-row__table-cell--split-entry .Layer__category-menu--full {
8935
+ grid-area: category;
8936
+ width: 100%;
8937
+ }
8938
+ .Layer__expanded-bank-transaction-row__table-cell--split-entry__amount {
8939
+ grid-area: amount;
8940
+ }
8941
+ .Layer__expanded-bank-transaction-row__table-cell--split-entry__customer {
8942
+ grid-area: customer;
8943
+ }
8944
+ .Layer__expanded-bank-transaction-row__table-cell--split-entry__button {
8945
+ grid-area: button;
8946
+ }
8947
+ .Layer__expanded-bank-transaction-row__table-cell--split-entry__tags {
8845
8948
  display: flex;
8846
- flex-direction: row;
8847
- gap: var(--spacing-md);
8949
+ grid-area: tags;
8950
+ gap: var(--spacing-sm);
8951
+ }
8952
+ .Layer__expanded-bank-transaction-row__table-cell--split-entry__tags .Layer__JournalEntryForm__Field--tag {
8953
+ width: 12rem;
8848
8954
  }
8849
8955
  .Layer__bank-transactions__list {
8850
8956
  list-style: none;
@@ -9036,9 +9142,6 @@ tbody .Layer__table__empty-row:first-child {
9036
9142
  box-sizing: border-box;
9037
9143
  color: var(--color-base-1000);
9038
9144
  }
9039
- .Layer__bank-transactions__tx-text {
9040
- max-width: 32ch;
9041
- }
9042
9145
  .Layer__bank-transactions__account-col {
9043
9146
  box-sizing: border-box;
9044
9147
  width: 30ch;
@@ -9076,16 +9179,6 @@ tbody .Layer__table__empty-row:first-child {
9076
9179
  .Layer__bank-transaction-row:not(.Layer__bank-transaction-row--expanded) .Layer__bank-transactions__tx-col {
9077
9180
  text-overflow: ellipsis;
9078
9181
  }
9079
- .Layer__bank-transaction-row:not(.Layer__bank-transaction-row--expanded) .Layer__bank-transactions__account-col .Layer__table-cell-content .Layer__bank-transactions__account-text,
9080
- .Layer__bank-transaction-row:not(.Layer__bank-transaction-row--expanded) .Layer__bank-transactions__account-col .Layer__table-cell-content .Layer__bank-transactions__tx-text,
9081
- .Layer__bank-transaction-row:not(.Layer__bank-transaction-row--expanded) .Layer__bank-transactions__tx-col .Layer__table-cell-content .Layer__bank-transactions__account-text,
9082
- .Layer__bank-transaction-row:not(.Layer__bank-transaction-row--expanded) .Layer__bank-transactions__tx-col .Layer__table-cell-content .Layer__bank-transactions__tx-text {
9083
- box-sizing: border-box;
9084
- display: block;
9085
- overflow: hidden;
9086
- text-overflow: ellipsis;
9087
- white-space: nowrap;
9088
- }
9089
9182
  .Layer__bank-transaction-row.Layer__bank-transaction-row--expanded td {
9090
9183
  vertical-align: top;
9091
9184
  }
@@ -9134,9 +9227,6 @@ tbody .Layer__table__empty-row:first-child {
9134
9227
  box-shadow: none;
9135
9228
  }
9136
9229
  }
9137
- .Layer__tooltip.Layer__bank-transactions__tx-tooltip {
9138
- max-width: 250px;
9139
- }
9140
9230
  .Layer__bank-transaction-list-item__match-tooltip,
9141
9231
  .Layer__expanded-bank-transaction-row__match-tooltip,
9142
9232
  .Layer__bank-transaction-row__match-tooltip {
@@ -9216,14 +9306,15 @@ tbody .Layer__table__empty-row:first-child {
9216
9306
  .Layer__expanded-bank-transaction-row__match-table {
9217
9307
  display: grid;
9218
9308
  grid-template-columns: 120px minmax(0, 1fr) 100px max-content;
9219
- gap: 0;
9309
+ gap: var(--spacing-xs) 0;
9310
+ max-width: 40rem;
9220
9311
  margin-bottom: var(--spacing-sm);
9221
9312
  }
9222
9313
  .Layer__expanded-bank-transaction-row__match-table:has(.Layer__expanded-bank-transaction-row__match-table__status) {
9223
9314
  grid-template-columns: 120px minmax(0, 1fr) 100px max-content min-content;
9224
9315
  }
9225
9316
  .Layer__expanded-bank-transaction-row__match-table:not(:has(.Layer__expanded-bank-transaction-row__match-table__link)) {
9226
- grid-template-columns: 120px 1fr 100px;
9317
+ grid-template-columns: 120px minmax(0, 1fr) 100px;
9227
9318
  }
9228
9319
  .Layer__expanded-bank-transaction-row__match-table:not(:has(.Layer__expanded-bank-transaction-row__match-table__link)):has(.Layer__expanded-bank-transaction-row__match-table__status) {
9229
9320
  grid-template-columns: 120px minmax(0, 1fr) 100px min-content;
@@ -9461,15 +9552,12 @@ tbody .Layer__table__empty-row:first-child {
9461
9552
  justify-content: space-between;
9462
9553
  width: 100% !important;
9463
9554
  }
9464
- .Layer__expanded-bank-transaction-row__match-table__amount {
9465
- display: none !important;
9466
- }
9467
9555
  .Layer__expanded-bank-transaction-row__match-table__desc {
9468
9556
  gap: var(--spacing-sm);
9469
9557
  justify-content: space-between;
9470
9558
  }
9471
9559
  .Layer__expanded-bank-transaction-row__match-table__desc > span:first-child {
9472
- width: calc(100% - 120px);
9560
+ width: calc(100% - 220px);
9473
9561
  }
9474
9562
  .Layer__expanded-bank-transaction-row__match-table__desc > span:nth-child(2) {
9475
9563
  flex: 0;
@@ -9483,11 +9571,10 @@ tbody .Layer__table__empty-row:first-child {
9483
9571
  display: flex;
9484
9572
  flex: 1;
9485
9573
  flex-direction: column;
9486
- gap: var(--spacing-sm);
9574
+ gap: var(--spacing-xs);
9487
9575
  width: 100%;
9488
9576
  }
9489
9577
  .Layer__expanded-bank-transaction-row__table-cell--split-entry {
9490
- gap: var(--spacing-sm);
9491
9578
  width: 100%;
9492
9579
  }
9493
9580
  .Layer__expanded-bank-transaction-row__table-cell--split-entry input {
@@ -9670,7 +9757,7 @@ tbody .Layer__table__empty-row:first-child {
9670
9757
  .Layer__expanded-bank-transaction-row__total-and-btns .Layer__input-tooltip,
9671
9758
  .Layer__expanded-bank-transaction-row__table-cell--split-entry .Layer__input-tooltip {
9672
9759
  flex: 1;
9673
- max-width: 200px;
9760
+ max-width: 12rem;
9674
9761
  }
9675
9762
  .Layer__expanded-bank-transaction-row__total-and-btns .Layer__input-tooltip .Layer__input,
9676
9763
  .Layer__expanded-bank-transaction-row__table-cell--split-entry .Layer__input-tooltip .Layer__input {
@@ -10139,9 +10226,9 @@ tbody .Layer__table__empty-row:first-child {
10139
10226
  }
10140
10227
  }
10141
10228
  .Layer__component-container.Layer__journal {
10229
+ position: relative;
10142
10230
  display: flex;
10143
10231
  align-items: stretch;
10144
- position: relative;
10145
10232
  overflow: auto;
10146
10233
  }
10147
10234
  .Layer__component-container.Layer__journal .Layer__table-state-container {
@@ -10163,8 +10250,8 @@ tbody .Layer__table__empty-row:first-child {
10163
10250
  max-width: 100%;
10164
10251
  }
10165
10252
  .Layer__journal__table-container {
10166
- max-width: 100%;
10167
10253
  overflow: auto;
10254
+ max-width: 100%;
10168
10255
  }
10169
10256
  .Layer__journal__arrow .Layer__table-cell-content {
10170
10257
  padding-right: 0 !important;
@@ -10185,8 +10272,8 @@ tbody .Layer__table__empty-row:first-child {
10185
10272
  }
10186
10273
  .Layer__journal__actions {
10187
10274
  display: flex;
10188
- align-items: center;
10189
10275
  gap: var(--spacing-sm);
10276
+ align-items: center;
10190
10277
  }
10191
10278
  .Layer__table-cell.Layer__journal__arrow,
10192
10279
  .Layer__table-cell.Layer__journal__balance {
@@ -10209,19 +10296,19 @@ tbody .Layer__table__empty-row:first-child {
10209
10296
  font-weight: var(--font-weight-bold);
10210
10297
  }
10211
10298
  .Layer__journal__balance {
10212
- text-align: right;
10213
10299
  justify-content: flex-end;
10300
+ text-align: right;
10214
10301
  }
10215
10302
  .Layer__table-cell.Layer__journal__actions {
10216
10303
  width: 160px;
10217
10304
  }
10218
10305
  .Layer__table-cell.Layer__journal__actions .Layer__table-cell-content {
10219
10306
  display: flex;
10220
- justify-content: flex-end;
10307
+ gap: var(--spacing-xs);
10221
10308
  align-items: center;
10309
+ justify-content: flex-end;
10222
10310
  padding-top: var(--spacing-3xs);
10223
10311
  padding-bottom: var(--spacing-3xs);
10224
- gap: var(--spacing-xs);
10225
10312
  }
10226
10313
  .Layer__table-cell.Layer__journal__actions .Layer__table-cell-content > .Layer__btn {
10227
10314
  opacity: 0;
@@ -10230,12 +10317,12 @@ tbody .Layer__table__empty-row:first-child {
10230
10317
  transform: scale(0.92);
10231
10318
  }
10232
10319
  .Layer__table-cell.Layer__journal__actions .Layer__btn--icon-only {
10233
- width: 32px;
10320
+ box-sizing: border-box;
10234
10321
  height: 32px;
10235
10322
  min-height: 32px;
10236
10323
  max-height: 32px;
10324
+ width: 32px;
10237
10325
  padding: 0;
10238
- box-sizing: border-box;
10239
10326
  }
10240
10327
  .Layer__journal-line__table-row {
10241
10328
  background-color: var(--color-base-50);
@@ -10264,11 +10351,11 @@ tbody .Layer__table__empty-row:first-child {
10264
10351
  margin: auto;
10265
10352
  }
10266
10353
  .Layer__journal__form-edit-entry {
10267
- padding: var(--spacing-md) var(--spacing-xl);
10268
10354
  display: flex;
10355
+ gap: var(--spacing-md);
10269
10356
  align-items: center;
10270
10357
  justify-content: space-between;
10271
- gap: var(--spacing-md);
10358
+ padding: var(--spacing-md) var(--spacing-xl);
10272
10359
  }
10273
10360
  .Layer__journal__form-edit-entry .Layer__text {
10274
10361
  margin: 0;
@@ -10309,12 +10396,12 @@ tbody .Layer__table__empty-row:first-child {
10309
10396
  width: 64px;
10310
10397
  }
10311
10398
  .Layer__journal__row---mobile {
10312
- visibility: visible;
10313
10399
  display: table-row;
10400
+ visibility: visible;
10314
10401
  }
10315
10402
  .Layer__journal__row---desktop {
10316
- visibility: hidden;
10317
10403
  display: none;
10404
+ visibility: hidden;
10318
10405
  }
10319
10406
  .Layer__journal__form-row {
10320
10407
  flex-direction: column;
@@ -10327,29 +10414,25 @@ tbody .Layer__table__empty-row:first-child {
10327
10414
  .Layer__journal__entry-details__title .Layer__component-header {
10328
10415
  padding-bottom: var(--spacing-3xs);
10329
10416
  }
10330
- .Layer__journal__entry-details__title .Layer__journal__entry-details__back-btn {
10331
- display: flex;
10332
- background: var(--color-base-0);
10333
- }
10334
10417
  .Layer__journal__form__input-group__line-item {
10335
10418
  display: flex;
10336
10419
  flex-direction: column;
10337
- padding: var(--spacing-md) 0;
10338
10420
  gap: var(--spacing-2xs);
10421
+ padding: var(--spacing-md) 0;
10339
10422
  }
10340
10423
  .Layer__journal__form__input-group__line-item:not(:first-of-type) {
10341
10424
  border-top: 1px solid var(--color-base-300);
10342
10425
  }
10343
10426
  .Layer__remove__button {
10344
- box-shadow: 0 0 0 1px var(--input-border-color), 0 0 0 2px rgba(0, 0, 0, 0);
10345
10427
  padding: 8px;
10428
+ box-shadow: 0 0 0 1px var(--input-border-color), 0 0 0 2px rgba(0, 0, 0, 0);
10346
10429
  margin-left: 8px;
10347
10430
  }
10348
10431
  .Layer__journal__form__input-group {
10349
10432
  display: flex;
10350
10433
  flex-direction: column;
10351
- padding: var(--spacing-xl);
10352
10434
  gap: var(--spacing-3xs);
10435
+ padding: var(--spacing-xl);
10353
10436
  }
10354
10437
  .Layer__journal__form__input-group__textarea {
10355
10438
  background: var(--color-base-50);
@@ -10362,9 +10445,9 @@ tbody .Layer__table__empty-row:first-child {
10362
10445
  }
10363
10446
  .Layer__journal__form__input-group .Layer__input-group .Layer__journal__datepicker__wrapper {
10364
10447
  display: flex;
10448
+ gap: var(--spacing-xs);
10365
10449
  align-items: center;
10366
10450
  justify-content: flex-end;
10367
- gap: var(--spacing-xs);
10368
10451
  }
10369
10452
  .Layer__journal__form__input-group .Layer__input-label {
10370
10453
  padding: 0;
@@ -10376,10 +10459,10 @@ tbody .Layer__table__empty-row:first-child {
10376
10459
  display: flex;
10377
10460
  }
10378
10461
  .Layer__journal__form__error-message {
10379
- padding: var(--spacing-4xs) var(--spacing-xl);
10462
+ box-sizing: border-box;
10380
10463
  width: 100%;
10464
+ padding: var(--spacing-4xs) var(--spacing-xl);
10381
10465
  text-align: right;
10382
- box-sizing: border-box;
10383
10466
  color: var(--color-danger);
10384
10467
  }
10385
10468
  .Layer__journal__add-entry-line {
@@ -10412,15 +10495,15 @@ tbody .Layer__table__empty-row:first-child {
10412
10495
  .Layer__journal__panel .Layer__panel__sidebar .Layer__panel__sidebar-content .Layer__form .Layer__input-group,
10413
10496
  .Layer__journal__panel .Layer__panel__sidebar .Layer__panel__sidebar-content .Layer__form .Layer__journal__form__input-group__title,
10414
10497
  .Layer__journal__panel .Layer__panel__sidebar .Layer__panel__sidebar-content .Layer__form .Layer__journal__add-entry-line {
10415
- max-width: 600px;
10416
10498
  width: 100%;
10499
+ max-width: 600px;
10417
10500
  margin: auto;
10418
10501
  }
10419
10502
  .Layer__journal__panel .Layer__panel__sidebar .Layer__panel__sidebar-content .Layer__form .Layer__header__col {
10420
10503
  width: 100%;
10421
- margin: auto;
10422
- padding: var(--spacing-md) var(--spacing-xl);
10423
10504
  max-width: calc(600px + var(--spacing-xl) * 2);
10505
+ padding: var(--spacing-md) var(--spacing-xl);
10506
+ margin: auto;
10424
10507
  }
10425
10508
  .Layer__journal__panel .Layer__panel__sidebar .Layer__panel__sidebar-content .Layer__journal__bottom-actions {
10426
10509
  max-width: 600px;
@@ -10429,9 +10512,6 @@ tbody .Layer__table__empty-row:first-child {
10429
10512
  .Layer__journal .Layer__journal__sidebar__header .actions {
10430
10513
  display: none;
10431
10514
  }
10432
- .Layer__journal .Layer__journal__sidebar__header .actions {
10433
- display: none;
10434
- }
10435
10515
  .Layer__journal .Layer__journal__bottom-actions {
10436
10516
  display: flex;
10437
10517
  }
@@ -10447,8 +10527,8 @@ tbody .Layer__table__empty-row:first-child {
10447
10527
  }
10448
10528
  @container (min-width: 500px) and (max-width: 1024px) {
10449
10529
  .Layer__journal__panel .Layer__details-list .Layer__component-header {
10450
- padding-left: var(--spacing-xl);
10451
10530
  padding-right: var(--spacing-xl);
10531
+ padding-left: var(--spacing-xl);
10452
10532
  }
10453
10533
  }
10454
10534
  @container (max-width: 499px) {
@@ -10460,21 +10540,17 @@ tbody .Layer__table__empty-row:first-child {
10460
10540
  padding: 0 var(--spacing-xs);
10461
10541
  }
10462
10542
  .Layer__journal__entry-details__line-items {
10463
- padding-left: 0;
10464
- padding-right: 0;
10465
10543
  padding-top: 0;
10544
+ padding-right: 0;
10545
+ padding-left: 0;
10466
10546
  }
10467
10547
  .Layer__journal__entry-details__line-items .Layer__card {
10468
- box-shadow: none;
10469
10548
  border-radius: 0;
10549
+ box-shadow: none;
10470
10550
  }
10471
10551
  .Layer__journal__panel .Layer__panel__sidebar {
10472
10552
  background: var(--color-base-0);
10473
10553
  }
10474
- .Layer__journal__entry-details__back-btn {
10475
- padding-left: var(--spacing-md);
10476
- padding-right: var(--spacing-md);
10477
- }
10478
10554
  .Layer__input-group.Layer__input-group--inline {
10479
10555
  flex-direction: column;
10480
10556
  gap: var(--spacing-2xs);
@@ -10601,14 +10677,14 @@ tbody .Layer__table__empty-row:first-child {
10601
10677
  .Layer__linked-accounts__header {
10602
10678
  position: sticky;
10603
10679
  left: 0;
10604
- padding: var(--spacing-md);
10680
+ padding: var(--spacing-lg);
10605
10681
  }
10606
10682
  .Layer__linked-accounts__list {
10607
10683
  display: flex;
10608
10684
  flex-wrap: wrap;
10609
10685
  gap: var(--spacing-md);
10610
10686
  align-items: stretch;
10611
- padding: var(--spacing-md);
10687
+ padding: var(--spacing-lg);
10612
10688
  }
10613
10689
  @media screen and (width <= 650px) {
10614
10690
  .Layer__linked-accounts__list {
@@ -10623,12 +10699,6 @@ tbody .Layer__table__empty-row:first-child {
10623
10699
  .Layer__linked-accounts__loader-container {
10624
10700
  min-height: 120px;
10625
10701
  }
10626
- .Layer__linked-accounts__header {
10627
- padding: var(--spacing-lg);
10628
- }
10629
- .Layer__linked-accounts__list {
10630
- padding: var(--spacing-lg);
10631
- }
10632
10702
  .Layer__linked-accounts__new-account {
10633
10703
  box-sizing: border-box;
10634
10704
  display: flex;
@@ -10727,8 +10797,8 @@ tbody .Layer__table__empty-row:first-child {
10727
10797
  padding: var(--spacing-xs);
10728
10798
  border-top-left-radius: var(--border-radius-xs);
10729
10799
  border-top-right-radius: var(--border-radius-xs);
10730
- border-bottom-right-radius: 0;
10731
10800
  border-bottom-left-radius: 0;
10801
+ border-bottom-right-radius: 0;
10732
10802
  background: var(--color-base-50);
10733
10803
  color: var(--text-color-primary);
10734
10804
  }
@@ -10779,8 +10849,8 @@ tbody .Layer__table__empty-row:first-child {
10779
10849
  padding: 0 var(--spacing-xs);
10780
10850
  border-top-left-radius: 0;
10781
10851
  border-top-right-radius: 0;
10782
- border-bottom-right-radius: var(--border-radius-xs);
10783
10852
  border-bottom-left-radius: var(--border-radius-xs);
10853
+ border-bottom-right-radius: var(--border-radius-xs);
10784
10854
  background: var(--color-base-50);
10785
10855
  }
10786
10856
  .Layer__linked-account-thumb .middlebar .account-balance-text {
@@ -10793,8 +10863,8 @@ tbody .Layer__table__empty-row:first-child {
10793
10863
  gap: var(--spacing-xs);
10794
10864
  align-items: center;
10795
10865
  padding: var(--spacing-xs);
10796
- border-bottom-right-radius: var(--border-radius-xs);
10797
10866
  border-bottom-left-radius: var(--border-radius-xs);
10867
+ border-bottom-right-radius: var(--border-radius-xs);
10798
10868
  }
10799
10869
  .Layer__linked-account-thumb .loadingbar .loading-text {
10800
10870
  flex: 1;
@@ -10829,8 +10899,8 @@ tbody .Layer__table__empty-row:first-child {
10829
10899
  gap: var(--spacing-2xs);
10830
10900
  }
10831
10901
  .Layer__linked-account-thumb.--as-widget .topbar {
10832
- border-bottom-right-radius: var(--border-radius-xs);
10833
10902
  border-bottom-left-radius: var(--border-radius-xs);
10903
+ border-bottom-right-radius: var(--border-radius-xs);
10834
10904
  }
10835
10905
  .Layer__linked-account-thumb.--as-widget .account-number {
10836
10906
  display: flex;
@@ -11144,13 +11214,13 @@ tbody .Layer__table__empty-row:first-child {
11144
11214
  .Layer__ProfitAndLossSummariesListItem {
11145
11215
  all: unset;
11146
11216
  display: grid;
11147
- background: var(--color-base-0);
11148
- border-radius: var(--border-radius-xs);
11149
- box-shadow: 0px 0px 0px 1px var(--color-base-300);
11150
11217
  padding: var(--spacing-4xs);
11218
+ border-radius: var(--border-radius-xs);
11219
+ box-shadow: 0 0 0 1px var(--color-base-300);
11220
+ background: var(--color-base-0);
11151
11221
  }
11152
11222
  .Layer__ProfitAndLossSummariesListItem[data-active] {
11153
- box-shadow: 0px 0px 0px 1px var(--color-base-200);
11223
+ box-shadow: 0 0 0 1px var(--color-base-200);
11154
11224
  background: var(--color-base-50);
11155
11225
  }
11156
11226
  .Layer__ProfitAndLossSummariesListItem[data-clickable] {
@@ -11162,14 +11232,14 @@ tbody .Layer__table__empty-row:first-child {
11162
11232
  .Layer__ProfitAndLossSummariesList {
11163
11233
  all: unset;
11164
11234
  display: grid;
11165
- gap: var(--spacing-sm);
11166
11235
  grid-auto-rows: minmax(0, 1fr);
11236
+ gap: var(--spacing-sm);
11167
11237
  }
11168
11238
  @container (min-width: 48rem) {
11169
11239
  .Layer__ProfitAndLossSummariesList {
11170
11240
  --column-count: 3;
11171
- gap: var(--spacing-md);
11172
11241
  grid-template-columns: repeat(var(--column-count), minmax(0, 1fr));
11242
+ gap: var(--spacing-md);
11173
11243
  }
11174
11244
  .Layer__ProfitAndLossSummariesList[data-column-count="4"] {
11175
11245
  --column-count: 4;
@@ -11177,14 +11247,14 @@ tbody .Layer__table__empty-row:first-child {
11177
11247
  }
11178
11248
  .Layer__ProfitAndLossSummariesSummary {
11179
11249
  display: grid;
11180
- min-block-size: 3rem;
11250
+ grid-template-areas: "chart heading" "chart amount";
11181
11251
  grid-template-columns: auto minmax(0, 1fr);
11182
11252
  gap: var(--spacing-3xs) var(--spacing-xs);
11183
- grid-template-areas: "chart heading" "chart amount";
11253
+ min-block-size: 3rem;
11184
11254
  }
11185
11255
  .Layer__ProfitAndLossSummariesSummary[data-size=lg] {
11186
- min-block-size: 6rem;
11187
11256
  column-gap: var(--spacing-md);
11257
+ min-block-size: 6rem;
11188
11258
  }
11189
11259
  .Layer__ProfitAndLossSummariesSummary [slot=heading] {
11190
11260
  grid-area: heading;
@@ -11932,28 +12002,201 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
11932
12002
  .Layer__project-view .Layer__select__menu {
11933
12003
  z-index: 2;
11934
12004
  }
12005
+ .Layer__service-offering {
12006
+ box-sizing: border-box;
12007
+ display: flex;
12008
+ flex-direction: column;
12009
+ gap: var(--spacing-md);
12010
+ justify-content: flex-start;
12011
+ height: 100%;
12012
+ width: 100%;
12013
+ border-radius: var(--border-radius-sm);
12014
+ border: none;
12015
+ background: var(--color-white);
12016
+ }
12017
+ .Layer__service-offering__calendly-container {
12018
+ overflow: hidden;
12019
+ max-height: 0;
12020
+ margin: 0;
12021
+ transition: max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
12022
+ }
12023
+ .Layer__service-offering__calendly-container.visible {
12024
+ max-height: 800px;
12025
+ margin: var(--spacing-lg) 0;
12026
+ }
12027
+ .Layer__service-offering__calendly-container .calendly-inline-widget {
12028
+ min-height: 630px;
12029
+ width: 100%;
12030
+ margin-bottom: var(--spacing-lg);
12031
+ transition: opacity 0.3s ease-in-out 0.8s;
12032
+ }
12033
+ .Layer__feature-card {
12034
+ display: flex;
12035
+ flex-direction: column;
12036
+ gap: var(--spacing-md);
12037
+ width: 33%;
12038
+ margin: auto 0;
12039
+ text-align: center;
12040
+ }
12041
+ .Layer__feature-card .img-container {
12042
+ display: flex;
12043
+ align-items: center;
12044
+ justify-content: center;
12045
+ height: 320px;
12046
+ width: auto;
12047
+ }
12048
+ @media (width <= 768px) {
12049
+ .Layer__feature-card .img-container {
12050
+ height: 100%;
12051
+ max-width: max(80%, 240px);
12052
+ margin: var(--spacing-xl) auto;
12053
+ }
12054
+ }
12055
+ @media (width <= 1024px) {
12056
+ .Layer__feature-card .img-container {
12057
+ margin: var(--spacing-md) auto;
12058
+ }
12059
+ }
12060
+ .Layer__feature-card .img-container img {
12061
+ height: 100%;
12062
+ width: auto;
12063
+ max-width: 100%;
12064
+ margin: 0 auto;
12065
+ filter: drop-shadow(0 12px 16px rgba(0, 0, 0, 0.2));
12066
+ }
12067
+ .Layer__service-offering-options {
12068
+ max-width: 1200px;
12069
+ padding: var(--spacing-xl) var(--spacing-lg);
12070
+ margin: 0 auto;
12071
+ }
12072
+ .Layer__service-offering-options__grid {
12073
+ display: grid;
12074
+ grid-template-columns: 1fr 1fr;
12075
+ gap: var(--spacing-md);
12076
+ justify-items: center;
12077
+ width: fit-content;
12078
+ margin: 0 auto;
12079
+ }
12080
+ @media (width <= 720px) {
12081
+ .Layer__service-offering-options__grid {
12082
+ grid-template-columns: 1fr;
12083
+ }
12084
+ }
12085
+ .Layer__service-offering-options__card {
12086
+ position: relative;
12087
+ display: flex;
12088
+ flex-direction: column;
12089
+ gap: var(--spacing-xs);
12090
+ max-width: 420px;
12091
+ padding: var(--spacing-md);
12092
+ border-radius: 16px;
12093
+ border: none;
12094
+ box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
12095
+ margin: 0;
12096
+ background: white;
12097
+ }
12098
+ .Layer__service-offering__content {
12099
+ display: flex;
12100
+ flex-direction: column;
12101
+ gap: var(--spacing-xl);
12102
+ }
12103
+ .Layer__service-offering__offers {
12104
+ flex-shrink: 0;
12105
+ min-width: 0;
12106
+ background-color: transparent;
12107
+ }
12108
+ @media (width <= 1440px) {
12109
+ .Layer__service-offering__offers {
12110
+ padding: 0 var(--spacing-lg);
12111
+ }
12112
+ }
12113
+ .Layer__service-offering__responsive-layout {
12114
+ display: flex;
12115
+ flex-direction: row;
12116
+ justify-content: center;
12117
+ }
12118
+ @media (width <= 1440px) {
12119
+ .Layer__service-offering__responsive-layout {
12120
+ flex-direction: column;
12121
+ gap: var(--spacing-xl);
12122
+ }
12123
+ }
12124
+ .Layer__service-offering__responsive-content {
12125
+ display: flex;
12126
+ flex-direction: column;
12127
+ gap: var(--spacing-2xl);
12128
+ padding: var(--spacing-3xl);
12129
+ padding-bottom: var(--spacing-3xl);
12130
+ }
12131
+ @media (width <= 1440px) {
12132
+ .Layer__service-offering__responsive-content {
12133
+ padding: var(--spacing-xl);
12134
+ }
12135
+ }
12136
+ .Layer__service-offering__responsive-image {
12137
+ display: flex;
12138
+ align-items: center;
12139
+ justify-content: center;
12140
+ }
12141
+ @media (width <= 1440px) {
12142
+ .Layer__service-offering__responsive-image {
12143
+ margin-top: var(--spacing-lg);
12144
+ }
12145
+ }
12146
+ .Layer__service-offering__responsive-image img {
12147
+ height: auto;
12148
+ max-width: 100%;
12149
+ }
12150
+ .Layer__service-offering__value-props-responsive {
12151
+ display: grid;
12152
+ grid-template-columns: repeat(3, 1fr);
12153
+ gap: var(--spacing-5xl);
12154
+ justify-items: center;
12155
+ }
12156
+ @media (width <= 1440px) {
12157
+ .Layer__service-offering__value-props-responsive {
12158
+ grid-template-columns: repeat(2, 1fr);
12159
+ }
12160
+ }
12161
+ @media (width <= 768px) {
12162
+ .Layer__service-offering__value-props-responsive {
12163
+ grid-template-columns: 1fr;
12164
+ gap: var(--spacing-xl);
12165
+ }
12166
+ }
12167
+ .Layer__mobile-feature-section {
12168
+ box-sizing: border-box;
12169
+ gap: var(--spacing-xl);
12170
+ width: 100%;
12171
+ padding: 0 var(--spacing-md);
12172
+ }
12173
+ .Layer__mobile-feature-section .Layer__feature-card {
12174
+ width: 100%;
12175
+ max-width: 100%;
12176
+ margin: 0 auto;
12177
+ }
11935
12178
  .Layer__tooltip {
11936
12179
  box-sizing: border-box;
12180
+ z-index: 100;
11937
12181
  width: max-content;
11938
12182
  max-width: calc(100vw - 10px);
11939
- z-index: 100;
11940
12183
  }
11941
12184
  .Layer__tooltip[data-width=md] {
11942
12185
  max-width: 256px;
11943
12186
  }
11944
12187
  .Layer__tooltip .Layer__tooltip-content {
11945
- background: var(--color-base-1000);
11946
- color: var(--color-base-300);
12188
+ box-sizing: border-box;
11947
12189
  padding: var(--spacing-2xs) var(--spacing-sm);
11948
12190
  border-radius: var(--border-radius-2xs);
11949
- box-sizing: border-box;
12191
+ background: var(--color-base-1000);
11950
12192
  font-size: var(--text-sm);
12193
+ color: var(--color-base-300);
11951
12194
  }
11952
12195
  .Layer__tooltip-trigger {
11953
12196
  display: flex;
11954
12197
  flex: 1;
11955
- padding-top: 2px;
11956
12198
  max-width: 100%;
12199
+ padding-top: 2px;
11957
12200
  }
11958
12201
  .Layer__actionable-list__tooltip-content {
11959
12202
  z-index: 99999;
@@ -11963,36 +12206,36 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
11963
12206
  align-items: flex-start;
11964
12207
  }
11965
12208
  .Layer__actionable-list__tooltip-content .Layer__tooltip-content {
11966
- margin-right: auto;
11967
12209
  max-width: 220px;
11968
- border-radius: var(--border-radius-3xs);
11969
12210
  padding: var(--spacing-2xs) var(--spacing-sm);
12211
+ border-radius: var(--border-radius-3xs);
12212
+ margin-right: auto;
11970
12213
  background-color: var(--color-base-800);
11971
12214
  color: var(--color-base-0);
11972
12215
  }
11973
12216
  .Layer__toasts-container {
11974
12217
  position: fixed;
11975
- bottom: 20px;
12218
+ z-index: 1000;
11976
12219
  right: 20px;
12220
+ bottom: 20px;
11977
12221
  display: flex;
11978
12222
  flex-direction: column-reverse;
11979
12223
  gap: 10px;
11980
- z-index: 1000;
11981
12224
  }
11982
12225
  .Layer__toasts-container .Layer__toast {
11983
- color: var(--color-base-0);
11984
- background: var(--color-base-1000);
11985
- border-radius: var(--spacing-3xs);
11986
12226
  padding: var(--spacing-xs) var(--spacing-md);
11987
- opacity: 0;
11988
- transform: translateY(20px);
11989
- transition: opacity 0.6s linear, transform 0.6s linear;
12227
+ border-radius: var(--spacing-3xs);
11990
12228
  box-shadow:
11991
12229
  0 4px 4px 0 var(--base-transparent-5, rgba(16, 24, 40, 0.05)),
11992
12230
  0 3px 3px 0 var(--base-transparent-6, rgba(16, 24, 40, 0.06)),
11993
12231
  0 2px 2px 0 var(--base-transparent-8, rgba(16, 24, 40, 0.08)),
11994
12232
  0 1px 0 0 var(--base-transparent-12, rgba(16, 24, 40, 0.12)),
11995
12233
  0 0 0 1px var(--base-900, #05132f);
12234
+ background: var(--color-base-1000);
12235
+ color: var(--color-base-0);
12236
+ opacity: 0;
12237
+ transform: translateY(20px);
12238
+ transition: opacity 0.6s linear, transform 0.6s linear;
11996
12239
  }
11997
12240
  .Layer__toasts-container .Layer__toast p {
11998
12241
  margin: 0;
@@ -12000,12 +12243,12 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
12000
12243
  color: var(--color-base-0);
12001
12244
  }
12002
12245
  .Layer__toasts-container .Layer__toast.Layer__toast--success {
12003
- background: var(--color-info-success);
12004
12246
  box-shadow: 0 0 0 1px var(--color-info-success);
12247
+ background: var(--color-info-success);
12005
12248
  }
12006
12249
  .Layer__toasts-container .Layer__toast.Layer__toast--error {
12007
- background: var(--color-info-error);
12008
12250
  box-shadow: 0 0 0 1px var(--color-info-error);
12251
+ background: var(--color-info-error);
12009
12252
  }
12010
12253
  .Layer__toast.enter {
12011
12254
  opacity: 1;
@@ -12024,9 +12267,9 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
12024
12267
  }
12025
12268
  .Layer__TransactionsToReview {
12026
12269
  display: flex;
12270
+ gap: var(--spacing-xs);
12027
12271
  align-items: center;
12028
12272
  justify-content: space-between;
12029
- gap: var(--spacing-xs);
12030
12273
  padding: var(--spacing-2xs) var(--spacing-xs);
12031
12274
  }
12032
12275
  .Layer__accounting-overview-profit-and-loss-charts {
@@ -12057,8 +12300,8 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
12057
12300
  }
12058
12301
  }
12059
12302
  .Layer__accounting-overview-profit-and-loss-chart {
12060
- width: 100%;
12061
12303
  box-sizing: border-box;
12304
+ width: 100%;
12062
12305
  }
12063
12306
  @container (max-width: 460px) {
12064
12307
  .Layer__component.Layer__accounting-overview-profit-and-loss .recharts-responsive-container {
@@ -12128,7 +12371,7 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
12128
12371
  }
12129
12372
  @container (min-width: 1024px) {
12130
12373
  .Layer__reports .Layer__panel__content {
12131
- border-bottom-right-radius: 0;
12132
12374
  border-top-right-radius: 0;
12375
+ border-bottom-right-radius: 0;
12133
12376
  }
12134
12377
  }