@layerfi/components 0.1.32 → 0.1.34

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.
@@ -1,5 +1,6 @@
1
1
  @charset "UTF-8";
2
2
  @import "https://rsms.me/inter/inter.css";
3
+ @import "react-datepicker/dist/react-datepicker.css";
3
4
 
4
5
  /* src/styles/index.scss */
5
6
  .Layer__component,
@@ -628,117 +629,6 @@
628
629
  .Layer__chart_y-axis-tick tspan {
629
630
  font-size: var(--text-sm);
630
631
  }
631
- .Layer__date-month-picker__wrapper {
632
- display: flex;
633
- align-items: center;
634
- position: relative;
635
- }
636
- .Layer__date-month-picker__wrapper .Layer__date-month-picker__current-button {
637
- border-top-left-radius: 0;
638
- border-bottom-left-radius: 0;
639
- }
640
- .Layer__date-month-picker__wrapper.Layer__date-month-picker__wrapper--current-date-option .Layer__date-month-picker {
641
- border-top-right-radius: 0;
642
- border-bottom-right-radius: 0;
643
- }
644
- .Layer__date-month-picker__wrapper .Layer__date-month-picker__current-button {
645
- border: 1px solid var(--input-border-color);
646
- border-left: none;
647
- box-shadow: none;
648
- }
649
- .Layer__date-month-picker {
650
- width: 210px;
651
- font-size: 14px;
652
- padding: 0.25rem;
653
- border: 1px solid var(--input-border-color);
654
- border-radius: var(--input-border-radius);
655
- overflow: hidden;
656
- position: relative;
657
- display: flex;
658
- align-items: center;
659
- justify-content: flex-end;
660
- z-index: 1;
661
- }
662
- .Layer__date-month-picker__button {
663
- padding: 0.25rem;
664
- display: flex;
665
- justify-content: center;
666
- align-items: center;
667
- text-align: center;
668
- background-color: var(--color-base-0);
669
- border: 0;
670
- border-radius: var(--input-border-radius);
671
- z-index: 3;
672
- position: relative;
673
- }
674
- .Layer__date-month-picker__button:active {
675
- background-color: var(--color-base-0);
676
- }
677
- .Layer__date-month-picker__button-icon path {
678
- stroke: var(--text-color);
679
- }
680
- .Layer__date-month-picker__button--disabled .Layer__date-month-picker__button-icon path {
681
- stroke: var(--color-base-500);
682
- }
683
- .Layer__date-month-picker__label {
684
- flex: 1;
685
- font-size: 14px;
686
- display: flex;
687
- justify-content: flex-start;
688
- align-items: center;
689
- text-align: center;
690
- padding: 0 var(--spacing-xs);
691
- transition: opacity 0.7s ease-in-out, transform 0.4s ease-in-out;
692
- width: 33%;
693
- position: relative;
694
- padding-left: 20px;
695
- }
696
- .Layer__date-month-picker__labels-container {
697
- display: flex;
698
- width: 660px;
699
- position: absolute;
700
- }
701
- .Layer__date-month-picker__effect-blur {
702
- width: 120px;
703
- height: 100%;
704
- position: absolute;
705
- right: -10px;
706
- bottom: 1px;
707
- background: linear-gradient(-90deg, #fff 50%, rgba(255, 255, 255, 0) 100%);
708
- z-index: 2;
709
- }
710
- @container (max-width: 759px) {
711
- .Layer__date-month-picker--responsive.Layer__date-month-picker__wrapper .Layer__date-month-picker {
712
- border: none;
713
- background: none;
714
- width: 175px;
715
- }
716
- .Layer__date-month-picker--responsive.Layer__date-month-picker__wrapper .Layer__date-month-picker__button {
717
- margin: 0 0.125rem;
718
- box-shadow: 0px 1px 2px 0px var(--base-transparent-6, rgba(16, 24, 40, 0.06)), 0px 0px 0px 1px var(--color-base-300);
719
- border-radius: 4px;
720
- }
721
- .Layer__date-month-picker--responsive.Layer__date-month-picker__wrapper .Layer__date-month-picker__effect-blur {
722
- right: 0;
723
- max-width: 70px;
724
- background: linear-gradient(-90deg, #f7f8fa 75%, rgba(255, 255, 255, 0) 100%);
725
- }
726
- .Layer__date-month-picker--responsive.Layer__date-month-picker__wrapper .Layer__date-month-picker__button--disabled {
727
- background-color: var(--color-base-200);
728
- }
729
- .Layer__date-month-picker--responsive.Layer__date-month-picker__wrapper .Layer__date-month-picker__labels-container {
730
- width: 550px;
731
- }
732
- .Layer__date-month-picker--responsive.Layer__date-month-picker__wrapper .Layer__date-month-picker__label {
733
- padding-left: 0;
734
- padding-right: 75px;
735
- justify-content: flex-end;
736
- font-size: 12px;
737
- }
738
- .Layer__date-month-picker--responsive .Layer__date-month-picker__current-button {
739
- display: none;
740
- }
741
- }
742
632
  .Layer__hover-menu {
743
633
  position: relative;
744
634
  display: flex;
@@ -895,6 +785,12 @@
895
785
  padding-top: var(--spacing-xl);
896
786
  }
897
787
  }
788
+ .Layer__error-boundary {
789
+ padding: var(--spacing-xl);
790
+ }
791
+ .Layer__error-boundary .Layer__data-state__description {
792
+ margin-bottom: 0;
793
+ }
898
794
  .Layer__datetime {
899
795
  display: inline-flex;
900
796
  align-items: center;
@@ -907,64 +803,67 @@
907
803
  .Layer__datetime__time {
908
804
  color: var(--color-base-600);
909
805
  }
910
- .Layer__datepicker input {
806
+ .Layer__datepicker__wrapper {
807
+ display: inline-flex;
808
+ align-items: center;
809
+ max-height: 36px;
810
+ border-radius: var(--input-border-radius);
811
+ box-shadow: 0px 0px 0px 1px var(--input-border-color), 0px 0px 0px 2px rgba(0, 0, 0, 0);
812
+ }
813
+ .Layer__datepicker__wrapper:focus-within {
814
+ box-shadow: 0px 0px 0px 3px rgba(26, 26, 26, 0.08), 0px 0px 0px 1px var(--color-base-700);
815
+ outline: none;
816
+ }
817
+ .Layer__datepicker__wrapper .Layer__datepicker__current-button {
818
+ border-top-left-radius: 0;
819
+ border-bottom-left-radius: 0;
820
+ box-shadow: none;
821
+ border-left: 1px solid var(--input-border-color);
822
+ }
823
+ .Layer__datepicker__wrapper .Layer__datepicker input,
824
+ .Layer__datepicker__wrapper .Layer__datepicker button {
825
+ border-radius: var(--input-border-radius);
911
826
  padding: 8px;
912
827
  box-sizing: border-box;
913
828
  position: relative;
914
- border: 1px solid var(--border-color);
915
- border-radius: var(--input-border-radius);
916
- border-width: 0px;
917
- box-shadow: 0px 0px 0px 1px var(--input-border-color), 0px 0px 0px 2px rgba(0, 0, 0, 0);
829
+ border: none;
918
830
  margin: 1px;
919
831
  max-width: 150px;
920
832
  font-family: var(--font-family);
921
833
  font-size: var(--input-font-size);
922
834
  line-height: 140%;
923
835
  }
924
- .Layer__datepicker input:focus,
925
- .Layer__datepicker input:active,
926
- .Layer__datepicker input:focus-visible {
927
- box-shadow: 0px 0px 0px 3px rgba(26, 26, 26, 0.08), 0px 0px 0px 1px var(--color-base-700);
836
+ .Layer__datepicker__wrapper .Layer__datepicker input:focus,
837
+ .Layer__datepicker__wrapper .Layer__datepicker input:active,
838
+ .Layer__datepicker__wrapper .Layer__datepicker input:focus-visible,
839
+ .Layer__datepicker__wrapper .Layer__datepicker button:focus,
840
+ .Layer__datepicker__wrapper .Layer__datepicker button:active,
841
+ .Layer__datepicker__wrapper .Layer__datepicker button:focus-visible {
842
+ box-shadow: none;
928
843
  outline: none;
929
844
  }
930
- .react-datepicker__tab-loop {
931
- z-index: 99;
932
- }
933
- .Layer__datepicker input {
934
- text-align: center;
935
- }
936
- .Layer__datepicker__time input {
937
- max-width: 100px;
938
- }
939
- .Layer__datepicker__popper * {
940
- outline-color: var(--color-base-800);
941
- }
942
- .Layer__datepicker__popper {
845
+ .Layer__datepicker__wrapper .Layer__datepicker__popper {
846
+ min-width: 275px;
847
+ max-width: 275px;
943
848
  z-index: 99;
944
849
  border-radius: 8px;
945
850
  }
946
- .Layer__datepicker__popper .react-datepicker__day--in-range,
947
- .Layer__datepicker__popper .react-datepicker__day--in-selecting-range {
948
- background-color: var(--color-base-200);
949
- color: var(--color-base-800);
950
- }
951
- .Layer__datepicker__popper .react-datepicker__day--range-end {
952
- background-color: var(--color-base-800);
953
- color: var(--color-base-100);
851
+ .Layer__datepicker__wrapper .Layer__datepicker__popper * {
852
+ outline-color: var(--color-base-800);
954
853
  }
955
- .Layer__datepicker__popper .react-datepicker__triangle {
854
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .react-datepicker__triangle {
956
855
  display: none;
957
856
  }
958
- .Layer__datepicker__popper .Layer__datepicker__calendar {
857
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar {
959
858
  border: none;
960
859
  box-shadow: 0px 0px 0px 1px var(--input-border-color), 0px 0px 0px 2px rgba(0, 0, 0, 0);
961
860
  }
962
- .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__navigation--previous {
861
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__navigation--previous {
963
862
  left: auto;
964
863
  right: 42px;
965
864
  }
966
- .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__navigation--previous .react-datepicker__navigation-icon::before,
967
- .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__navigation--next .react-datepicker__navigation-icon::before {
865
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__navigation--previous .react-datepicker__navigation-icon::before,
866
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__navigation--next .react-datepicker__navigation-icon::before {
968
867
  border-color: var(--color-base-800);
969
868
  border-style: solid;
970
869
  border-width: 1px 1px 0 0;
@@ -972,15 +871,32 @@
972
871
  display: block;
973
872
  height: 6px;
974
873
  position: absolute;
975
- top: 10px;
874
+ top: 11px;
976
875
  width: 6px;
977
876
  }
978
- .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month-container .react-datepicker__header {
877
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month-container {
878
+ min-width: 275px;
879
+ max-width: 275px;
880
+ }
881
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month-container .react-datepicker__header {
979
882
  padding: var(--spacing-sm) 0 0;
980
883
  background: white;
981
884
  border: none;
982
885
  }
983
- .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month-container .react-datepicker__current-month {
886
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month-container .react-datepicker-year-header {
887
+ padding: var(--spacing-sm);
888
+ text-align: left;
889
+ font-weight: 460;
890
+ font-family: var(--font-family);
891
+ font-feature-settings:
892
+ "cv10" on,
893
+ "cv05" on,
894
+ "cv08" on,
895
+ "ss03" on;
896
+ font-size: 14px;
897
+ border-bottom: 1px solid var(--color-base-200);
898
+ }
899
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month-container .react-datepicker__current-month {
984
900
  padding: 0 var(--spacing-md) var(--spacing-sm);
985
901
  text-align: left;
986
902
  font-weight: 460;
@@ -993,76 +909,172 @@
993
909
  font-size: 14px;
994
910
  border-bottom: 1px solid var(--color-base-200);
995
911
  }
996
- .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__day-names {
912
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__day-names {
997
913
  padding: var(--spacing-xs) var(--spacing-xs) 0;
998
914
  }
999
- .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__day-names .react-datepicker__day-name {
915
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__day-names .react-datepicker__day-name {
1000
916
  width: 32px;
1001
917
  height: 32px;
1002
918
  color: var(--color-base-500);
1003
919
  font-size: 12px;
1004
920
  }
1005
- .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week {
921
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week,
922
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper {
1006
923
  display: flex;
1007
924
  align-items: center;
1008
925
  justify-content: center;
1009
926
  }
1010
- .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day {
1011
- width: 32px;
1012
- height: 32px;
927
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day,
928
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__month-text,
929
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__day,
930
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__month-text {
1013
931
  display: flex;
1014
932
  align-items: center;
1015
933
  justify-content: center;
1016
934
  transition: all 0.2s ease-in-out;
1017
935
  }
1018
- .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day:hover {
936
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day:hover,
937
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__month-text:hover,
938
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__day:hover,
939
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__month-text:hover {
1019
940
  background-color: var(--color-base-400);
1020
941
  color: var(--color-base-800);
1021
942
  }
1022
- .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day.react-datepicker__day--selected {
1023
- background-color: var(--color-base-800);
1024
- color: var(--color-base-100);
1025
- font-weight: 460;
1026
- }
1027
- .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day.react-datepicker__day--outside-month {
943
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day.react-datepicker__day--outside-month,
944
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__month-text.react-datepicker__day--outside-month,
945
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__day.react-datepicker__day--outside-month,
946
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__month-text.react-datepicker__day--outside-month {
1028
947
  color: var(--color-base-500);
1029
948
  }
1030
- .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day.react-datepicker__day--disabled {
949
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day.react-datepicker__day--disabled,
950
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day.react-datepicker__month-text--disabled,
951
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__month-text.react-datepicker__day--disabled,
952
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__month-text.react-datepicker__month-text--disabled,
953
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__day.react-datepicker__day--disabled,
954
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__day.react-datepicker__month-text--disabled,
955
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__month-text.react-datepicker__day--disabled,
956
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__month-text.react-datepicker__month-text--disabled {
1031
957
  color: var(--color-base-300);
1032
958
  cursor: not-allowed;
1033
959
  }
1034
- .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day.react-datepicker__day--keyboard-selected {
960
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day.react-datepicker__day--keyboard-selected,
961
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day.react-datepicker__month-text--keyboard-selected,
962
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__month-text.react-datepicker__day--keyboard-selected,
963
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__month-text.react-datepicker__month-text--keyboard-selected,
964
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__day.react-datepicker__day--keyboard-selected,
965
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__day.react-datepicker__month-text--keyboard-selected,
966
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__month-text.react-datepicker__day--keyboard-selected,
967
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__month-text.react-datepicker__month-text--keyboard-selected {
1035
968
  background-color: var(--color-base-400);
1036
969
  color: var(--color-base-800);
1037
970
  border-color: var(--color-base-800);
1038
971
  outline-color: var(--color-base-800);
1039
972
  }
1040
- .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {
973
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day.react-datepicker__day--selected,
974
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day.react-datepicker__month-text--selected,
975
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__month-text.react-datepicker__day--selected,
976
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__month-text.react-datepicker__month-text--selected,
977
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__day.react-datepicker__day--selected,
978
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__day.react-datepicker__month-text--selected,
979
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__month-text.react-datepicker__day--selected,
980
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__month-text.react-datepicker__month-text--selected {
981
+ background-color: var(--color-base-800);
982
+ color: var(--color-base-100);
983
+ font-weight: 460;
984
+ }
985
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day.react-datepicker__day--in-range,
986
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day.react-datepicker__month-text--in-range,
987
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day.react-datepicker__month-text--in-selecting-range,
988
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day.react-datepicker__day--in-selecting-range,
989
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__month-text.react-datepicker__day--in-range,
990
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__month-text.react-datepicker__month-text--in-range,
991
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__month-text.react-datepicker__month-text--in-selecting-range,
992
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__month-text.react-datepicker__day--in-selecting-range,
993
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__day.react-datepicker__day--in-range,
994
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__day.react-datepicker__month-text--in-range,
995
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__day.react-datepicker__month-text--in-selecting-range,
996
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__day.react-datepicker__day--in-selecting-range,
997
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__month-text.react-datepicker__day--in-range,
998
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__month-text.react-datepicker__month-text--in-range,
999
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__month-text.react-datepicker__month-text--in-selecting-range,
1000
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__month-text.react-datepicker__day--in-selecting-range {
1001
+ background-color: var(--color-base-200);
1002
+ color: var(--color-base-800);
1003
+ }
1004
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day.react-datepicker__day--range-start,
1005
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day.react-datepicker__month-text--range-start,
1006
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day.react-datepicker__day--range-end,
1007
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day.react-datepicker__month-text--range-end,
1008
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__month-text.react-datepicker__day--range-start,
1009
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__month-text.react-datepicker__month-text--range-start,
1010
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__month-text.react-datepicker__day--range-end,
1011
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__month-text.react-datepicker__month-text--range-end,
1012
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__day.react-datepicker__day--range-start,
1013
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__day.react-datepicker__month-text--range-start,
1014
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__day.react-datepicker__day--range-end,
1015
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__day.react-datepicker__month-text--range-end,
1016
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__month-text.react-datepicker__day--range-start,
1017
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__month-text.react-datepicker__month-text--range-start,
1018
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__month-text.react-datepicker__day--range-end,
1019
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__month-text.react-datepicker__month-text--range-end {
1020
+ background-color: var(--color-base-800);
1021
+ color: var(--color-base-100);
1022
+ }
1023
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day,
1024
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__day {
1025
+ width: 32px;
1026
+ height: 32px;
1027
+ }
1028
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__month-text,
1029
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper .react-datepicker__month-text {
1030
+ width: 100%;
1031
+ height: 32px;
1032
+ }
1033
+ .Layer__datepicker__wrapper .react-datepicker__children-container {
1034
+ width: 100%;
1035
+ margin: 0;
1036
+ padding: 0;
1037
+ }
1038
+ .Layer__datepicker__wrapper .Layer__datepicker__popper__custom-footer {
1039
+ display: flex;
1040
+ flex-direction: column;
1041
+ justify-content: flex-start;
1042
+ align-items: flex-start;
1043
+ padding: var(--spacing-md) var(--spacing-xs);
1044
+ border-top: 1px solid var(--color-base-200);
1045
+ }
1046
+ .Layer__datepicker__wrapper .Layer__datepicker__popper__custom-footer .Layer__text-btn {
1047
+ padding: var(--spacing-xs) var(--spacing-xs);
1048
+ color: var(--color-base-800);
1049
+ font-weight: 460;
1050
+ text-decoration: none;
1051
+ }
1052
+ .Layer__datepicker__wrapper .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {
1041
1053
  background-color: var(--color-base-800);
1042
1054
  color: var(--color-base-100);
1043
1055
  font-weight: 460;
1044
1056
  }
1045
- .react-datepicker--time-only .react-datepicker__time-container .react-datepicker__time-list-item {
1057
+ .Layer__datepicker__wrapper .react-datepicker--time-only .react-datepicker__time-container .react-datepicker__time-list-item {
1046
1058
  display: flex;
1047
1059
  align-items: center;
1048
1060
  justify-content: center;
1049
1061
  transition: all 0.2s ease-in-out;
1050
1062
  }
1051
- .react-datepicker--time-only .react-datepicker__time-container .react-datepicker__time-list-item:hover {
1063
+ .Layer__datepicker__wrapper .react-datepicker--time-only .react-datepicker__time-container .react-datepicker__time-list-item:hover {
1052
1064
  background-color: var(--color-base-400);
1053
1065
  color: var(--color-base-800);
1054
1066
  }
1055
- .react-datepicker--time-only .react-datepicker__time-container .react-datepicker__time-list-item.react-datepicker__time-list-item--selected {
1067
+ .Layer__datepicker__wrapper .react-datepicker--time-only .react-datepicker__time-container .react-datepicker__time-list-item.react-datepicker__time-list-item--selected {
1056
1068
  background-color: var(--color-base-800);
1057
1069
  color: var(--color-base-100);
1058
1070
  font-weight: 460;
1059
1071
  }
1060
- .react-datepicker--time-only .react-datepicker__time-container .react-datepicker__header {
1072
+ .Layer__datepicker__wrapper .react-datepicker--time-only .react-datepicker__time-container .react-datepicker__header {
1061
1073
  padding: var(--spacing-sm) 0 0;
1062
1074
  background: white;
1063
1075
  border: none;
1064
1076
  }
1065
- .react-datepicker--time-only .react-datepicker__time-container .react-datepicker__header .react-datepicker-time__header {
1077
+ .Layer__datepicker__wrapper .react-datepicker--time-only .react-datepicker__time-container .react-datepicker__header .react-datepicker-time__header {
1066
1078
  padding: 0 var(--spacing-md) var(--spacing-sm);
1067
1079
  text-align: left;
1068
1080
  font-weight: 460;
@@ -1075,24 +1087,22 @@
1075
1087
  font-size: 14px;
1076
1088
  border-bottom: 1px solid var(--color-base-200);
1077
1089
  }
1078
- .react-datepicker__children-container {
1079
- width: 100%;
1080
- margin: 0;
1081
- padding: 0;
1090
+ .Layer__datepicker__time__wrapper .react-datepicker__header {
1091
+ padding: 0 !important;
1082
1092
  }
1083
- .Layer__datepicker__popper__custom-footer {
1084
- display: flex;
1085
- flex-direction: column;
1086
- justify-content: flex-start;
1087
- align-items: flex-start;
1088
- padding: var(--spacing-md) var(--spacing-xs);
1089
- border-top: 1px solid var(--color-base-200);
1093
+ .Layer__datepicker__time__wrapper .react-datepicker-time__header {
1094
+ display: none;
1090
1095
  }
1091
- .Layer__datepicker__popper__custom-footer .Layer__text-btn {
1092
- padding: var(--spacing-xs) var(--spacing-xs);
1093
- color: var(--color-base-800);
1094
- font-weight: 460;
1095
- text-decoration: none;
1096
+ .Layer__datepicker__time__wrapper .Layer__datepicker__time input {
1097
+ max-width: 84px;
1098
+ }
1099
+ .Layer__datepicker__time__wrapper .Layer__datepicker__popper {
1100
+ min-width: auto;
1101
+ max-width: auto;
1102
+ }
1103
+ .Layer__datepicker__time__wrapper .Layer__datepicker__popper .react-datepicker__month-container {
1104
+ min-width: auto;
1105
+ max-width: auto;
1096
1106
  }
1097
1107
  .Layer__details-list {
1098
1108
  display: flex;
@@ -1719,9 +1729,14 @@
1719
1729
  }
1720
1730
  .Layer__table {
1721
1731
  width: 100%;
1722
- border-collapse: separate;
1723
1732
  border-spacing: 0;
1724
1733
  }
1734
+ .Layer__table.Layer__table__seperate-rows {
1735
+ border-collapse: separate;
1736
+ }
1737
+ .Layer__table.Layer__table__collapse-rows {
1738
+ border-collapse: collapse;
1739
+ }
1725
1740
  .Layer__table::-webkit-scrollbar {
1726
1741
  width: 6px;
1727
1742
  height: 6px;
@@ -1737,7 +1752,7 @@
1737
1752
  .Layer__table::-webkit-scrollbar-thumb:hover {
1738
1753
  background: #999;
1739
1754
  }
1740
- .Layer__table-header {
1755
+ .Layer__table .Layer__table-header {
1741
1756
  color: var(--text-color-secondary);
1742
1757
  font-size: var(--text-sm);
1743
1758
  font-variation-settings: "wght" var(--font-weight-normal);
@@ -1754,27 +1769,93 @@
1754
1769
  text-align: left;
1755
1770
  position: relative;
1756
1771
  }
1757
- .Layer__table-header.Layer__table-header--primary {
1772
+ .Layer__table .Layer__table-header .Layer__table-cell {
1773
+ border-top: none;
1774
+ }
1775
+ .Layer__table .Layer__table-header.Layer__table-header--primary .Layer__table-cell.Layer__table-cell--primary {
1758
1776
  color: var(--text-color-primary);
1759
1777
  font-variation-settings: "wght" var(--font-weight-bold);
1760
1778
  }
1761
- .Layer__table-cell--primary,
1762
- .Layer__table-cell--primary .Layer__table-cell-content {
1763
- color: var(--color-base-800);
1764
- font-variation-settings: "wght" var(--font-weight-bold);
1779
+ .Layer__table .Layer__table-body .Layer__table-empty-row:first-child {
1780
+ display: none;
1765
1781
  }
1766
- .Layer__table-cell {
1782
+ .Layer__table .Layer__table-empty-row {
1783
+ background: var(--color-base-100);
1784
+ height: var(--spacing-2xs);
1785
+ border-top: 1px solid var(--color-base-200);
1786
+ border-bottom: 1px solid var(--color-base-200);
1787
+ }
1788
+ .Layer__table .Layer__table-row {
1789
+ position: relative;
1790
+ height: var(--spacing-5xl);
1791
+ transition: all 100ms ease-in-out;
1792
+ }
1793
+ .Layer__table .Layer__table-row.Layer__table-row--expanded .Layer__table-row--expand-icon {
1794
+ transform: rotate(0deg);
1795
+ }
1796
+ .Layer__table .Layer__table-row.Layer__table-row--collapsed .Layer__table-row--expand-icon {
1797
+ transform: rotate(-90deg);
1798
+ }
1799
+ .Layer__table .Layer__table-row.Layer__table-row--variant-expandable {
1800
+ cursor: pointer;
1801
+ }
1802
+ .Layer__table .Layer__table-row.Layer__table-row--variant-default {
1803
+ background: var(--color-base-50);
1804
+ }
1805
+ .Layer__table .Layer__table-row.Layer__table-row--variant-summation {
1806
+ background: var(--color-base-100);
1807
+ }
1808
+ .Layer__table .Layer__table-row--depth-0 td:nth-child(1) .Layer__table-cell-content {
1809
+ padding-left: calc(var(--spacing-lg) * 1);
1810
+ }
1811
+ .Layer__table .Layer__table-row--depth-1 td:nth-child(1) .Layer__table-cell-content {
1812
+ padding-left: calc(var(--spacing-lg) * 2);
1813
+ }
1814
+ .Layer__table .Layer__table-row--depth-2 td:nth-child(1) .Layer__table-cell-content {
1815
+ padding-left: calc(var(--spacing-lg) * 3);
1816
+ }
1817
+ .Layer__table .Layer__table-row--depth-3 td:nth-child(1) .Layer__table-cell-content {
1818
+ padding-left: calc(var(--spacing-lg) * 4);
1819
+ }
1820
+ .Layer__table .Layer__table-row--depth-4 td:nth-child(1) .Layer__table-cell-content {
1821
+ padding-left: calc(var(--spacing-lg) * 5);
1822
+ }
1823
+ .Layer__table .Layer__table-row--depth-5 td:nth-child(1) .Layer__table-cell-content {
1824
+ padding-left: calc(var(--spacing-lg) * 6);
1825
+ }
1826
+ .Layer__table .Layer__table-row--depth-6 td:nth-child(1) .Layer__table-cell-content {
1827
+ padding-left: calc(var(--spacing-lg) * 7);
1828
+ }
1829
+ .Layer__table .Layer__table-row--depth-7 td:nth-child(1) .Layer__table-cell-content {
1830
+ padding-left: calc(var(--spacing-lg) * 8);
1831
+ }
1832
+ .Layer__table .Layer__table-row--depth-8 td:nth-child(1) .Layer__table-cell-content {
1833
+ padding-left: calc(var(--spacing-lg) * 9);
1834
+ }
1835
+ .Layer__table .Layer__table-row--depth-9 td:nth-child(1) .Layer__table-cell-content {
1836
+ padding-left: calc(var(--spacing-lg) * 10);
1837
+ }
1838
+ .Layer__table .Layer__table-row--depth-10 td:nth-child(1) .Layer__table-cell-content {
1839
+ padding-left: calc(var(--spacing-lg) * 11);
1840
+ }
1841
+ .Layer__table .Layer__table-cell {
1767
1842
  font-size: var(--text-md);
1768
1843
  text-align: left;
1769
1844
  color: var(--text-color-secondary);
1770
1845
  border-top: 1px solid var(--border-color);
1771
- height: var(--spacing-5xl);
1772
1846
  padding: 0;
1773
1847
  }
1774
- .Layer__table-row:last-child .Layer__table-cell {
1775
- border-bottom: 1px solid var(--border-color);
1848
+ .Layer__table .Layer__table-cell.Layer__table-cell--primary {
1849
+ color: var(--color-base-800);
1850
+ font-variation-settings: "wght" var(--font-weight-bold);
1776
1851
  }
1777
- .Layer__table-cell-content {
1852
+ .Layer__table .Layer__table-cell.Layer__table-cell-amount--positive .Layer__table-cell-content::before {
1853
+ content: "$";
1854
+ }
1855
+ .Layer__table .Layer__table-cell.Layer__table-cell-amount--negative .Layer__table-cell-content::before {
1856
+ content: "-$";
1857
+ }
1858
+ .Layer__table .Layer__table-cell .Layer__table-cell-content {
1778
1859
  display: flex;
1779
1860
  align-items: center;
1780
1861
  height: 100%;
@@ -1784,6 +1865,21 @@
1784
1865
  transition: all var(--transition-speed) ease-out;
1785
1866
  position: relative;
1786
1867
  }
1868
+ .Layer__table .Layer__table-cell .Layer__table-cell-content .Layer__table-row--expand-icon {
1869
+ transition: transform 0.1s ease-in-out;
1870
+ width: 16px;
1871
+ height: 16px;
1872
+ margin-right: 8px;
1873
+ }
1874
+ .Layer__table tr th:nth-child(1) .Layer__table-cell-content,
1875
+ .Layer__table tr td:nth-child(1) .Layer__table-cell-content {
1876
+ padding-left: var(--spacing-lg);
1877
+ }
1878
+ .Layer__table tr td:last-child .Layer__table-cell-content,
1879
+ .Layer__table tr th:last-child .Layer__table-cell-content {
1880
+ justify-content: flex-end;
1881
+ padding-right: var(--spacing-lg);
1882
+ }
1787
1883
  .Layer__table-cell-content-indentation {
1788
1884
  height: 100%;
1789
1885
  display: flex;
@@ -1800,21 +1896,160 @@
1800
1896
  top: 0;
1801
1897
  bottom: 0;
1802
1898
  }
1803
- .Layer__table--hover-effect .Layer__table-row:hover {
1804
- background-color: var(--color-base-50);
1805
- cursor: pointer;
1899
+ .Layer__table-row--hidden .Layer__table-cell {
1900
+ border-top-width: 0;
1806
1901
  }
1807
- .Layer__table-cell--amount {
1808
- justify-content: flex-end;
1809
- text-align: right;
1902
+ .Layer__table-cell {
1903
+ height: auto;
1810
1904
  }
1811
- .Layer__table.with-cell-separators > tbody > tr > td:first-child .Layer__table-cell-content::after,
1812
- .Layer__table.with-cell-separators > tbody > tr > td:last-child .Layer__table-cell-content::after,
1813
- .Layer__table.with-cell-separators > thead > tr > th:first-child.Layer__table-header::after,
1814
- .Layer__table.with-cell-separators > thead > tr > th:last-child.Layer__table-header::after {
1815
- display: none;
1905
+ .Layer__table-cell > .Layer__table-cell-content {
1906
+ overflow: hidden;
1907
+ transition: all 50ms ease-out;
1816
1908
  }
1817
- .Layer__table-state-container {
1909
+ .Layer__table-row {
1910
+ transition: all 100ms ease-in-out;
1911
+ }
1912
+ .Layer__table-row.Layer__table-row--collapsed .Layer__table-cell > .Layer__table-cell-content {
1913
+ transition:
1914
+ height 60ms ease-out,
1915
+ opacity 50ms ease-in-out,
1916
+ padding 50ms ease-in-out;
1917
+ }
1918
+ .Layer__table-row.Layer__table-row--with-show:not(.initial-load) {
1919
+ opacity: 0.5;
1920
+ }
1921
+ .Layer__table-row.Layer__table-row--with-show:not(.initial-load).show {
1922
+ transition: opacity 50ms ease-out;
1923
+ opacity: 1;
1924
+ }
1925
+ .Layer__table.with-cell-separators > tbody > tr > td:first-child .Layer__table-cell-content::after,
1926
+ .Layer__table.with-cell-separators > tbody > tr > td:last-child .Layer__table-cell-content::after,
1927
+ .Layer__table.with-cell-separators > thead > tr > th:first-child.Layer__table-header::after,
1928
+ .Layer__table.with-cell-separators > thead > tr > th:last-child.Layer__table-header::after {
1929
+ display: none;
1930
+ }
1931
+ .Layer__table-state-container {
1932
+ padding: var(--spacing-2xl) var(--spacing-sm);
1933
+ box-sizing: border-box;
1934
+ display: flex;
1935
+ flex-direction: column;
1936
+ align-items: center;
1937
+ justify-content: center;
1938
+ width: 100%;
1939
+ height: calc(100vh - 200px);
1940
+ }
1941
+ .Layer__component--as-widget .Layer__table-state-container {
1942
+ height: calc(100% - 160px);
1943
+ }
1944
+ .Layer__table-row--active .Layer__table-cell:first-child .Layer__table-cell-content:before {
1945
+ content: "";
1946
+ background-color: var(--color-base-400);
1947
+ height: 100%;
1948
+ width: 4px;
1949
+ position: absolute;
1950
+ left: 0;
1951
+ top: 0;
1952
+ bottom: 0;
1953
+ }
1954
+ .Layer__table--hover-effect .Layer__table-row:hover {
1955
+ background-color: var(--color-base-50);
1956
+ cursor: pointer;
1957
+ }
1958
+ .Layer__table {
1959
+ width: 100%;
1960
+ border-collapse: separate;
1961
+ border-spacing: 0;
1962
+ }
1963
+ .Layer__table::-webkit-scrollbar {
1964
+ width: 6px;
1965
+ height: 6px;
1966
+ }
1967
+ .Layer__table::-webkit-scrollbar-track {
1968
+ background: #f1f1f1;
1969
+ border-radius: 4px;
1970
+ }
1971
+ .Layer__table::-webkit-scrollbar-thumb {
1972
+ background: #e2e2e2;
1973
+ border-radius: 4px;
1974
+ }
1975
+ .Layer__table::-webkit-scrollbar-thumb:hover {
1976
+ background: #999;
1977
+ }
1978
+ .Layer__table-header {
1979
+ color: var(--text-color-secondary);
1980
+ font-size: var(--text-sm);
1981
+ font-variation-settings: "wght" var(--font-weight-normal);
1982
+ font-variant-numeric: lining-nums proportional-nums;
1983
+ font-feature-settings:
1984
+ "cv10" on,
1985
+ "cv05" on,
1986
+ "cv08" on,
1987
+ "ss03" on;
1988
+ text-overflow: ellipsis;
1989
+ line-height: 140%;
1990
+ letter-spacing: -0.06px;
1991
+ padding: var(--spacing-sm) var(--spacing-md);
1992
+ text-align: left;
1993
+ position: relative;
1994
+ }
1995
+ .Layer__table-header.Layer__table-header--primary {
1996
+ color: var(--text-color-primary);
1997
+ font-variation-settings: "wght" var(--font-weight-bold);
1998
+ }
1999
+ .Layer__table-cell--primary,
2000
+ .Layer__table-cell--primary .Layer__table-cell-content {
2001
+ color: var(--color-base-800);
2002
+ font-variation-settings: "wght" var(--font-weight-bold);
2003
+ }
2004
+ .Layer__table-cell {
2005
+ font-size: var(--text-md);
2006
+ text-align: left;
2007
+ color: var(--text-color-secondary);
2008
+ border-top: 1px solid var(--border-color);
2009
+ height: var(--spacing-5xl);
2010
+ padding: 0;
2011
+ }
2012
+ .Layer__table-cell-content {
2013
+ display: flex;
2014
+ align-items: center;
2015
+ height: 100%;
2016
+ top: 0px;
2017
+ padding: var(--spacing-sm) var(--spacing-md);
2018
+ box-sizing: border-box;
2019
+ transition: all var(--transition-speed) ease-out;
2020
+ position: relative;
2021
+ }
2022
+ .Layer__table-cell-content-indentation {
2023
+ height: 100%;
2024
+ display: flex;
2025
+ align-items: center;
2026
+ box-sizing: border-box;
2027
+ }
2028
+ .Layer__table-row--active .Layer__table-cell:first-child .Layer__table-cell-content:before {
2029
+ content: "";
2030
+ background-color: var(--color-base-400);
2031
+ height: 100%;
2032
+ width: 4px;
2033
+ position: absolute;
2034
+ left: 0;
2035
+ top: 0;
2036
+ bottom: 0;
2037
+ }
2038
+ .Layer__table--hover-effect .Layer__table-row:hover {
2039
+ background-color: var(--color-base-50);
2040
+ cursor: pointer;
2041
+ }
2042
+ .Layer__table-cell--amount {
2043
+ justify-content: flex-end;
2044
+ text-align: right;
2045
+ }
2046
+ .Layer__table.with-cell-separators > tbody > tr > td:first-child .Layer__table-cell-content::after,
2047
+ .Layer__table.with-cell-separators > tbody > tr > td:last-child .Layer__table-cell-content::after,
2048
+ .Layer__table.with-cell-separators > thead > tr > th:first-child.Layer__table-header::after,
2049
+ .Layer__table.with-cell-separators > thead > tr > th:last-child.Layer__table-header::after {
2050
+ display: none;
2051
+ }
2052
+ .Layer__table-state-container {
1818
2053
  padding: var(--spacing-2xl) var(--spacing-sm);
1819
2054
  box-sizing: border-box;
1820
2055
  display: flex;
@@ -1851,13 +2086,16 @@
1851
2086
  }
1852
2087
  .Layer__table-cell > .Layer__table-cell-content {
1853
2088
  overflow: hidden;
1854
- transition: all 100ms ease-out;
2089
+ transition: all 50ms ease-out;
1855
2090
  }
1856
2091
  .Layer__table-row {
1857
- transition: all 180ms ease-in-out;
2092
+ transition: all 100ms ease-in-out;
1858
2093
  }
1859
2094
  .Layer__table-row.Layer__table-row--collapsed .Layer__table-cell > .Layer__table-cell-content {
1860
- transition: height 60ms ease-out, opacity 50ms ease-in-out;
2095
+ transition:
2096
+ height 60ms ease-out,
2097
+ opacity 50ms ease-in-out,
2098
+ padding 50ms ease-in-out;
1861
2099
  }
1862
2100
  .Layer__table-row.Layer__table-row--with-show:not(.initial-load) {
1863
2101
  opacity: 0.5;
@@ -1867,8 +2105,14 @@
1867
2105
  opacity: 1;
1868
2106
  }
1869
2107
  .Layer__table-row.Layer__table-row--anim-starting-state {
1870
- transform: scaleX(0.98);
1871
2108
  opacity: 0;
2109
+ height: 0px;
2110
+ }
2111
+ .Layer__table-row.Layer__table-row--anim-starting-state td .Layer__table-cell-content {
2112
+ opacity: 0;
2113
+ padding-top: 0;
2114
+ padding-bottom: 0;
2115
+ height: 0%;
1872
2116
  }
1873
2117
  .Layer__table__empty-row {
1874
2118
  background: var(--color-base-100);
@@ -1876,6 +2120,23 @@
1876
2120
  border-top: 1px solid var(--color-base-200);
1877
2121
  border-bottom: 1px solid var(--color-base-200);
1878
2122
  }
2123
+ tbody .Layer__table__empty-row:first-child {
2124
+ display: none;
2125
+ }
2126
+ .Layer__table-row.Layer__table-row--anim-complete-state {
2127
+ height: var(--spacing-5xl);
2128
+ }
2129
+ .Layer__table-row.Layer__table-row--anim-complete-state td .Layer__table-cell-content {
2130
+ opacity: 1;
2131
+ padding-top: var(--spacing-sm);
2132
+ padding-bottom: var(--spacing-sm);
2133
+ }
2134
+ .Layer__table-wrapper--bottom-spacing {
2135
+ padding-bottom: var(--spacing-lg);
2136
+ }
2137
+ .Layer__table-wrapper--bottom-spacing .Layer__table {
2138
+ border-bottom: 1px solid var(--border-color);
2139
+ }
1879
2140
  .Layer__tabs {
1880
2141
  display: flex;
1881
2142
  width: max-content;
@@ -2114,86 +2375,63 @@
2114
2375
  display: none;
2115
2376
  }
2116
2377
  }
2117
- .Layer__view-main {
2378
+ .Layer__view .Layer__view-main {
2118
2379
  padding: var(--spacing-md) var(--spacing-lg);
2119
2380
  display: flex;
2120
2381
  flex-direction: column;
2121
2382
  gap: var(--spacing-md);
2122
2383
  container-type: inline-size;
2123
2384
  }
2124
- .Layer__view-main .Layer__toggle {
2385
+ .Layer__view .Layer__view-main .Layer__toggle {
2125
2386
  border-radius: 6px;
2126
2387
  }
2127
- .Layer__view-main .Layer__toggle .Layer__toggle-option input + span {
2388
+ .Layer__view .Layer__view-main .Layer__toggle .Layer__toggle-option input + span {
2128
2389
  border-radius: 6px;
2129
2390
  }
2130
- .Layer__view-main .Layer__toggle__thumb {
2391
+ .Layer__view .Layer__view-main .Layer__toggle__thumb {
2131
2392
  border-radius: 6px;
2132
2393
  }
2133
- .Layer__view-header {
2394
+ .Layer__view .Layer__view-header {
2134
2395
  display: flex;
2135
2396
  width: 100%;
2136
2397
  border-bottom: 1px solid var(--color-base-200);
2137
2398
  container-type: inline-size;
2399
+ position: relative;
2400
+ z-index: 1;
2138
2401
  }
2139
- .Layer__view-header__content {
2402
+ .Layer__view .Layer__view-header__content {
2140
2403
  padding: var(--spacing-lg);
2141
2404
  display: flex;
2142
2405
  align-items: center;
2143
2406
  justify-content: space-between;
2144
2407
  width: 100%;
2145
- max-width: 1406px;
2146
2408
  }
2147
- .Layer__view-header__controls {
2409
+ .Layer__view .Layer__view-header__controls {
2148
2410
  display: flex;
2149
2411
  align-items: center;
2150
2412
  }
2151
2413
  @container (max-width: 760px) {
2152
- .Layer__view-header__content {
2414
+ .Layer__view .Layer__view-header__content {
2153
2415
  flex-direction: column;
2154
2416
  align-items: flex-start;
2155
2417
  gap: var(--spacing-sm);
2156
2418
  }
2157
- .Layer__view-header__content .Layer__heading {
2419
+ .Layer__view .Layer__view-header__content .Layer__heading {
2158
2420
  align-self: flex-start;
2159
2421
  }
2160
2422
  }
2161
- .Layer__panel_view-main {
2162
- display: flex;
2163
- flex-direction: column;
2164
- gap: var(--spacing-md);
2165
- container-type: inline-size;
2423
+ .Layer__view.Layer__view--panel .Layer__view-main {
2424
+ padding: 0;
2166
2425
  }
2167
- .Layer__panel_view-header {
2168
- display: flex;
2169
- width: 100%;
2170
- border-bottom: 1px solid var(--color-base-200);
2171
- container-type: inline-size;
2426
+ .Layer__view.Layer__view--panel .Layer__view-header {
2172
2427
  position: relative;
2173
2428
  z-index: 1;
2174
2429
  }
2175
- .Layer__panel_view-header__content {
2176
- padding: var(--spacing-lg);
2177
- display: flex;
2178
- align-items: center;
2179
- justify-content: space-between;
2180
- width: 100%;
2181
- max-width: 1406px;
2182
- }
2183
- .Layer__panel_view-header__controls {
2430
+ .Layer__view.Layer__view--panel .Layer__view-header__controls {
2184
2431
  display: flex;
2185
2432
  align-items: center;
2186
2433
  gap: var(--spacing-sm);
2187
- }
2188
- @container (max-width: 760px) {
2189
- .Layer__panel_view-header__content {
2190
- flex-direction: column;
2191
- align-items: flex-start;
2192
- gap: var(--spacing-sm);
2193
- }
2194
- .Layer__panel_view-header__content .Layer__heading {
2195
- align-self: flex-start;
2196
- }
2434
+ flex-wrap: wrap;
2197
2435
  }
2198
2436
  .Layer__ledger-account__index {
2199
2437
  background-color: var(--color-base-0);
@@ -2250,25 +2488,6 @@
2250
2488
  .Layer__ledger-account__entry-details__line-items {
2251
2489
  padding: var(--spacing-md);
2252
2490
  }
2253
- .Layer__ledger-account__entry-details__table td {
2254
- padding: var(--spacing-xs) var(--spacing-md);
2255
- font-size: 12px;
2256
- color: var(--color-base-600);
2257
- }
2258
- .Layer__ledger-account__entry-details__table__total-row td {
2259
- font-variation-settings: "wght" var(--font-weight-bold);
2260
- color: var(--text-color-primary);
2261
- }
2262
- .Layer__table.Layer__ledger-account__entry-details__table th,
2263
- .Layer__ledger-account__entry-details__table__total-row td,
2264
- .Layer__table.Layer__ledger-account__entry-details__table tr th:last-child.Layer__table-header,
2265
- .Layer__table.Layer__ledger-account__entry-details__table tr th:first-child.Layer__table-header {
2266
- padding: var(--spacing-md);
2267
- }
2268
- .Layer__ledger-account__entry-details__table .Layer__table-cell--amount {
2269
- width: 128px;
2270
- box-sizing: border-box;
2271
- }
2272
2491
  .Layer__ledger-account__pagination {
2273
2492
  display: flex;
2274
2493
  justify-content: flex-end;
@@ -2359,200 +2578,41 @@
2359
2578
  padding-right: var(--spacing-md);
2360
2579
  }
2361
2580
  }
2362
- .Layer__balance-sheet {
2363
- border: 1px solid var(--border-color);
2364
- border-radius: var(--corner-radius);
2365
- background-color: var(--background-color);
2366
- }
2367
- .Layer__balance-sheet * {
2368
- font-family: var(--font-family);
2369
- font-feature-settings:
2370
- "cv10" on,
2371
- "cv01" on,
2372
- "cv05" on,
2373
- "cv08" on,
2374
- "ss03" on;
2375
- }
2376
- .Layer__balance-sheet tbody .Layer__table__empty-row:first-child {
2377
- display: none;
2581
+ .Layer__ledger-account__entry-details__table .Layer__table-row.Layer__table-row--variant-default,
2582
+ .Layer__ledger-account__entry-details__table .Layer__table-row.Layer__table-row--variant-summation {
2583
+ background-color: var(--color-base-0);
2378
2584
  }
2379
- .Layer__balance-sheet .Layer__balance-sheet__title {
2380
- display: inline;
2381
- flex: 1;
2382
- font-size: var(--text-heading);
2383
- margin: 0;
2585
+ .Layer__ledger-account__entry-details__table tr td:first-child {
2586
+ width: 75%;
2384
2587
  }
2385
- @container (max-width: 800px) {
2386
- .Layer__balance-sheet .Layer__balance-sheet__header {
2387
- flex-direction: column;
2388
- gap: var(--spacing-sm);
2389
- }
2390
- }
2391
- @container (max-width: 540px) {
2392
- .Layer__balance-sheet .Layer__balance-sheet__header {
2393
- flex-direction: row;
2394
- gap: var(--spacing-sm);
2395
- flex-wrap: wrap;
2396
- }
2397
- .Layer__balance-sheet .Layer__balance-sheet__header .Layer__balance-sheet__actions {
2398
- flex-wrap: wrap;
2399
- }
2400
- .Layer__balance-sheet .Layer__balance-sheet__header .Layer__balance-sheet__actions__date-picker {
2401
- flex-wrap: wrap;
2402
- gap: var(--spacing-xs);
2588
+ @container (min-width: 1400px) {
2589
+ .Layer__ledger-account__entry-details__table tr td:first-child .Layer__table-cell-content,
2590
+ .Layer__ledger-account__entry-details__table tr td:last-child .Layer__table-cell-content,
2591
+ .Layer__ledger-account__entry-details__table tr th:first-child.Layer__table-header,
2592
+ .Layer__ledger-account__entry-details__table tr th:last-child.Layer__table-header {
2593
+ padding-left: var(--spacing-lg);
2594
+ padding-right: var(--spacing-lg);
2403
2595
  }
2404
2596
  }
2405
- .Layer__balance-sheet__header {
2406
- display: flex;
2407
- flex: 1;
2408
- flex-direction: row;
2409
- padding: var(--spacing-sm) var(--spacing-md);
2410
- }
2411
- .Layer__balance-sheet__header.Layer__balance-sheet__header--no-title .Layer__balance-sheet__actions {
2412
- flex: 1;
2413
- }
2414
- .Layer__balance-sheet__header .Layer__balance-sheet__actions {
2415
- display: flex;
2416
- flex-direction: row;
2417
- justify-content: space-between;
2418
- gap: var(--spacing-xs);
2419
- }
2420
- .Layer__balance-sheet__header .Layer__balance-sheet__actions .Layer__balance-sheet__actions__date-picker {
2421
- display: flex;
2422
- flex-direction: row;
2423
- gap: var(--spacing-xs);
2424
- }
2425
- .Layer__balance-sheet__table {
2426
- width: 100%;
2427
- border-collapse: collapse;
2428
- }
2429
- .Layer__balance-sheet__table .Layer__balance-sheet-row {
2430
- font-size: 1em;
2431
- height: 52px;
2432
- }
2433
- .Layer__balance-sheet__table .Layer__balance-sheet-row .Layer__balance-sheet-cell__value .Layer__table-cell-content {
2434
- justify-content: flex-end;
2435
- }
2436
- .Layer__balance-sheet__table .Layer__balance-sheet-row.Layer__balance-sheet-row--depth-0:not(.Layer__balance-sheet-row--display-children-true) .Layer__balance-sheet-cell__label {
2437
- padding-left: 16px;
2438
- }
2439
- .Layer__balance-sheet__table .Layer__balance-sheet-row.Layer__balance-sheet-row--depth-0 .Layer__balance-sheet-cell__label .Layer__table-cell-content {
2440
- font-size: var(--text-lg);
2441
- font-weight: 540;
2442
- color: var(--text-color-primary);
2443
- }
2444
- .Layer__balance-sheet__table .Layer__balance-sheet-row.Layer__balance-sheet-row--depth-1:not(.Layer__balance-sheet-row--display-children-true) {
2445
- background-color: var(--color-base-50);
2446
- }
2447
- .Layer__balance-sheet__table .Layer__balance-sheet-row.Layer__balance-sheet-row--depth-1:not(.Layer__balance-sheet-row--display-children-true) .Layer__balance-sheet-cell__label {
2448
- padding-left: calc(50px - var(--spacing-sm));
2449
- }
2450
- .Layer__balance-sheet__table .Layer__balance-sheet-row.Layer__balance-sheet-row--depth-1 .Layer__balance-sheet-cell__label {
2451
- padding-left: calc(34px - var(--spacing-sm));
2452
- }
2453
- .Layer__balance-sheet__table .Layer__balance-sheet-row.Layer__balance-sheet-row--depth-1 .Layer__table-cell-content {
2454
- font-size: var(--text-md);
2455
- font-variation-settings: "wght" var(--font-weight-bold);
2456
- color: var(--color-base-700);
2457
- }
2458
- .Layer__balance-sheet__table .Layer__balance-sheet-row.Layer__balance-sheet-row--depth-2:not(.Layer__balance-sheet-row--display-children-true) {
2459
- background-color: var(--color-base-50);
2460
- }
2461
- .Layer__balance-sheet__table .Layer__balance-sheet-row.Layer__balance-sheet-row--depth-2:not(.Layer__balance-sheet-row--display-children-true) .Layer__balance-sheet-cell__label {
2462
- padding-left: calc(80px - var(--spacing-sm));
2463
- }
2464
- .Layer__balance-sheet__table .Layer__balance-sheet-row.Layer__balance-sheet-row--depth-2 .Layer__balance-sheet-cell__label {
2465
- padding-left: calc(64px - var(--spacing-sm));
2466
- }
2467
- .Layer__balance-sheet__table .Layer__balance-sheet-row.Layer__balance-sheet-row--depth-2 .Layer__table-cell-content {
2468
- font-size: var(--text-md);
2469
- font-weight: 460;
2470
- color: var(--text-color-secondary);
2471
- }
2472
- .Layer__balance-sheet__table .Layer__balance-sheet-row.Layer__balance-sheet-row--depth-3:not(.Layer__balance-sheet-row--display-children-true) {
2473
- background-color: var(--color-base-50);
2474
- }
2475
- .Layer__balance-sheet__table .Layer__balance-sheet-row.Layer__balance-sheet-row--depth-3:not(.Layer__balance-sheet-row--display-children-true) .Layer__balance-sheet-cell__label {
2476
- padding-left: calc(104px - var(--spacing-sm));
2477
- }
2478
- .Layer__balance-sheet__table .Layer__balance-sheet-row.Layer__balance-sheet-row--depth-3 .Layer__balance-sheet-cell__label {
2479
- padding-left: calc(88px - var(--spacing-sm));
2480
- }
2481
- .Layer__balance-sheet__table .Layer__balance-sheet-row.Layer__balance-sheet-row--depth-3 .Layer__table-cell-content {
2482
- font-size: var(--text-md);
2483
- font-weight: 460;
2484
- color: var(--text-color-secondary);
2485
- }
2486
- .Layer__balance-sheet__table .Layer__balance-sheet-row.Layer__balance-sheet-row--depth-4:not(.Layer__balance-sheet-row--display-children-true) {
2487
- background-color: var(--color-base-50);
2488
- }
2489
- .Layer__balance-sheet__table .Layer__balance-sheet-row.Layer__balance-sheet-row--depth-4:not(.Layer__balance-sheet-row--display-children-true) .Layer__balance-sheet-cell__label {
2490
- padding-left: calc(130px - var(--spacing-sm));
2491
- }
2492
- .Layer__balance-sheet__table .Layer__balance-sheet-row.Layer__balance-sheet-row--depth-4 .Layer__balance-sheet-cell__label {
2493
- padding-left: calc(114px - var(--spacing-sm));
2494
- }
2495
- .Layer__balance-sheet__table .Layer__balance-sheet-row.Layer__balance-sheet-row--depth-4 .Layer__table-cell-content {
2496
- font-size: var(--text-md);
2497
- font-weight: 460;
2498
- color: var(--text-color-secondary);
2499
- }
2500
- .Layer__balance-sheet__table .Layer__balance-sheet-row.Layer__balance-sheet-row--display-children-true {
2501
- font-weight: bold;
2502
- cursor: pointer;
2503
- }
2504
- .Layer__balance-sheet__table .Layer__balance-sheet-row.Layer__balance-sheet-row--display-children-false {
2505
- font-weight: normal;
2506
- }
2507
- .Layer__balance-sheet__table .Layer__balance-sheet-row.Layer__balance-sheet-row--variant-summation {
2508
- background: var(--color-base-100) !important;
2509
- }
2510
- .Layer__balance-sheet__table .Layer__balance-sheet-row.Layer__balance-sheet-row--variant-summation .Layer__table-cell-content {
2511
- font-size: var(--text-md);
2512
- font-variation-settings: "wght" var(--font-weight-bold);
2513
- color: var(--text-color-primary);
2514
- }
2515
- .Layer__balance-sheet__table .Layer__balance-sheet-row.Layer__balance-sheet-row--expanded svg {
2516
- transform: rotate(0deg);
2517
- }
2518
- .Layer__balance-sheet__table .Layer__table-cell--last {
2519
- text-align: right;
2520
- }
2521
- .Layer__balance-sheet__table .Layer__table-cell__content-wrapper {
2522
- display: flex;
2523
- align-items: center;
2524
- }
2525
- .Layer__balance-sheet__table .Layer__table-cell__content-wrapper .Layer__table__expand-icon {
2526
- margin: 0;
2527
- transition: transform var(--transition-speed);
2528
- transform: rotate(-90deg);
2529
- }
2530
- .Layer__balance-sheet__table .Layer__balance-sheet-cell__label {
2531
- position: relative;
2532
- }
2533
- .Layer__balance-sheet__table .Layer__table-cell__active {
2534
- display: none;
2535
- width: 4px;
2536
- height: 100%;
2537
- position: absolute;
2538
- background: var(--color-base-400);
2539
- left: 0;
2540
- top: 0;
2541
- }
2542
- .Layer__balance-sheet__table .Layer__balance-sheet-row .Layer__table-cell__active {
2543
- display: none;
2544
- }
2545
- .Layer__balance-sheet__table .Layer__balance-sheet-row:not(.Layer__balance-sheet-row--display-children-true) .Layer__table-cell__active {
2546
- display: block;
2547
- }
2548
- .Layer__balance-sheet__table .Layer__balance-sheet-cell__label .Layer__table-cell-content {
2549
- padding-left: 0;
2597
+ .Layer__balance-sheet {
2598
+ border: 1px solid var(--border-color);
2599
+ border-radius: var(--corner-radius);
2600
+ background-color: var(--background-color);
2550
2601
  }
2551
- .Layer__balance-sheet__table .Layer__balance-sheet-cell__value--positive .Layer__table-cell-content::before {
2552
- content: "$";
2602
+ .Layer__balance-sheet * {
2603
+ font-family: var(--font-family);
2604
+ font-feature-settings:
2605
+ "cv10" on,
2606
+ "cv01" on,
2607
+ "cv05" on,
2608
+ "cv08" on,
2609
+ "ss03" on;
2553
2610
  }
2554
- .Layer__balance-sheet__table .Layer__balance-sheet-cell__value--negative .Layer__table-cell-content::before {
2555
- content: "-$";
2611
+ .Layer__balance-sheet .Layer__balance-sheet__title {
2612
+ display: inline;
2613
+ flex: 1;
2614
+ font-size: var(--text-heading);
2615
+ margin: 0;
2556
2616
  }
2557
2617
  .Layer__statement-of-cash-flow {
2558
2618
  border: 1px solid var(--border-color);
@@ -2571,9 +2631,6 @@
2571
2631
  "cv08" on,
2572
2632
  "ss03" on;
2573
2633
  }
2574
- .Layer__statement-of-cash-flow tbody .Layer__table__empty-row:first-child {
2575
- display: none;
2576
- }
2577
2634
  .Layer__statement-of-cash-flow .Layer__statement-of-cash-flow__title {
2578
2635
  display: inline;
2579
2636
  flex: 1;
@@ -2600,14 +2657,6 @@
2600
2657
  gap: var(--spacing-xs);
2601
2658
  }
2602
2659
  }
2603
- @container (min-width: 1400px) {
2604
- .Layer__statement-of-cash-flow .Layer__table tr td:first-child .Layer__table-cell-content,
2605
- .Layer__statement-of-cash-flow .Layer__table tr td:last-child .Layer__table-cell-content,
2606
- .Layer__statement-of-cash-flow .Layer__table tr th:first-child.Layer__table-header,
2607
- .Layer__statement-of-cash-flow .Layer__table tr th:last-child.Layer__table-header {
2608
- padding-left: 0;
2609
- }
2610
- }
2611
2660
  .Layer__statement-of-cash-flow__header {
2612
2661
  display: flex;
2613
2662
  flex: 1;
@@ -2628,126 +2677,6 @@
2628
2677
  flex-direction: row;
2629
2678
  gap: var(--spacing-xs);
2630
2679
  }
2631
- .Layer__statement-of-cash-flow__table {
2632
- width: 100%;
2633
- border-collapse: collapse;
2634
- }
2635
- .Layer__statement-of-cash-flow__table .Layer__statement-of-cash-flow-row {
2636
- font-size: 1em;
2637
- height: 52px;
2638
- }
2639
- .Layer__statement-of-cash-flow__table .Layer__statement-of-cash-flow-row .Layer__statement-of-cash-flow-cell__value .Layer__table-cell-content {
2640
- justify-content: flex-end;
2641
- }
2642
- .Layer__statement-of-cash-flow__table .Layer__statement-of-cash-flow-row.Layer__statement-of-cash-flow-row--depth-0:not(.Layer__statement-of-cash-flow-row--display-children-true) .Layer__statement-of-cash-flow-cell__label {
2643
- padding-left: 16px;
2644
- }
2645
- .Layer__statement-of-cash-flow__table .Layer__statement-of-cash-flow-row.Layer__statement-of-cash-flow-row--depth-0 .Layer__statement-of-cash-flow-cell__label .Layer__table-cell-content {
2646
- font-size: var(--text-lg);
2647
- font-weight: 540;
2648
- color: var(--text-color-primary);
2649
- }
2650
- .Layer__statement-of-cash-flow__table .Layer__statement-of-cash-flow-row.Layer__statement-of-cash-flow-row--depth-0.Layer__statement-of-cash-flow-row--variant-summation .Layer__table-cell-content {
2651
- font-size: var(--text-md);
2652
- }
2653
- .Layer__statement-of-cash-flow__table .Layer__statement-of-cash-flow-row.Layer__statement-of-cash-flow-row--depth-1:not(.Layer__statement-of-cash-flow-row--display-children-true) {
2654
- background-color: var(--color-base-50);
2655
- }
2656
- .Layer__statement-of-cash-flow__table .Layer__statement-of-cash-flow-row.Layer__statement-of-cash-flow-row--depth-1:not(.Layer__statement-of-cash-flow-row--display-children-true) .Layer__statement-of-cash-flow-cell__label {
2657
- padding-left: calc(50px - var(--spacing-sm));
2658
- }
2659
- .Layer__statement-of-cash-flow__table .Layer__statement-of-cash-flow-row.Layer__statement-of-cash-flow-row--depth-1 .Layer__statement-of-cash-flow-cell__label {
2660
- padding-left: calc(34px - var(--spacing-sm));
2661
- }
2662
- .Layer__statement-of-cash-flow__table .Layer__statement-of-cash-flow-row.Layer__statement-of-cash-flow-row--depth-1 .Layer__table-cell-content {
2663
- font-size: var(--text-md);
2664
- font-variation-settings: "wght" var(--font-weight-bold);
2665
- color: var(--color-base-700);
2666
- }
2667
- .Layer__statement-of-cash-flow__table .Layer__statement-of-cash-flow-row.Layer__statement-of-cash-flow-row--depth-2:not(.Layer__statement-of-cash-flow-row--display-children-true) {
2668
- background-color: var(--color-base-50);
2669
- }
2670
- .Layer__statement-of-cash-flow__table .Layer__statement-of-cash-flow-row.Layer__statement-of-cash-flow-row--depth-2:not(.Layer__statement-of-cash-flow-row--display-children-true) .Layer__statement-of-cash-flow-cell__label {
2671
- padding-left: calc(80px - var(--spacing-sm));
2672
- }
2673
- .Layer__statement-of-cash-flow__table .Layer__statement-of-cash-flow-row.Layer__statement-of-cash-flow-row--depth-2 .Layer__statement-of-cash-flow-cell__label {
2674
- padding-left: calc(64px - var(--spacing-sm));
2675
- }
2676
- .Layer__statement-of-cash-flow__table .Layer__statement-of-cash-flow-row.Layer__statement-of-cash-flow-row--depth-2 .Layer__table-cell-content {
2677
- font-size: var(--text-md);
2678
- font-weight: 460;
2679
- color: var(--text-color-secondary);
2680
- }
2681
- .Layer__statement-of-cash-flow__table .Layer__statement-of-cash-flow-row.Layer__statement-of-cash-flow-row--depth-3:not(.Layer__statement-of-cash-flow-row--display-children-true) {
2682
- background-color: var(--color-base-50);
2683
- }
2684
- .Layer__statement-of-cash-flow__table .Layer__statement-of-cash-flow-row.Layer__statement-of-cash-flow-row--depth-3:not(.Layer__statement-of-cash-flow-row--display-children-true) .Layer__statement-of-cash-flow-cell__label {
2685
- padding-left: calc(104px - var(--spacing-sm));
2686
- }
2687
- .Layer__statement-of-cash-flow__table .Layer__statement-of-cash-flow-row.Layer__statement-of-cash-flow-row--depth-3 .Layer__statement-of-cash-flow-cell__label {
2688
- padding-left: calc(88px - var(--spacing-sm));
2689
- }
2690
- .Layer__statement-of-cash-flow__table .Layer__statement-of-cash-flow-row.Layer__statement-of-cash-flow-row--depth-3 .Layer__table-cell-content {
2691
- font-size: var(--text-md);
2692
- font-weight: 460;
2693
- color: var(--text-color-secondary);
2694
- }
2695
- .Layer__statement-of-cash-flow__table .Layer__statement-of-cash-flow-row.Layer__statement-of-cash-flow-row--depth-4:not(.Layer__statement-of-cash-flow-row--display-children-true) {
2696
- background-color: var(--color-base-50);
2697
- }
2698
- .Layer__statement-of-cash-flow__table .Layer__statement-of-cash-flow-row.Layer__statement-of-cash-flow-row--depth-4:not(.Layer__statement-of-cash-flow-row--display-children-true) .Layer__statement-of-cash-flow-cell__label {
2699
- padding-left: calc(130px - var(--spacing-sm));
2700
- }
2701
- .Layer__statement-of-cash-flow__table .Layer__statement-of-cash-flow-row.Layer__statement-of-cash-flow-row--depth-4 .Layer__statement-of-cash-flow-cell__label {
2702
- padding-left: calc(114px - var(--spacing-sm));
2703
- }
2704
- .Layer__statement-of-cash-flow__table .Layer__statement-of-cash-flow-row.Layer__statement-of-cash-flow-row--depth-4 .Layer__table-cell-content {
2705
- font-size: var(--text-md);
2706
- font-weight: 460;
2707
- color: var(--text-color-secondary);
2708
- }
2709
- .Layer__statement-of-cash-flow__table .Layer__statement-of-cash-flow-row.Layer__statement-of-cash-flow-row--display-children-true {
2710
- font-weight: bold;
2711
- cursor: pointer;
2712
- }
2713
- .Layer__statement-of-cash-flow__table .Layer__statement-of-cash-flow-row.Layer__statement-of-cash-flow-row--display-children-false {
2714
- font-weight: normal;
2715
- }
2716
- .Layer__statement-of-cash-flow__table .Layer__statement-of-cash-flow-row.Layer__statement-of-cash-flow-row--variant-summation {
2717
- background: var(--color-base-100);
2718
- }
2719
- .Layer__statement-of-cash-flow__table .Layer__statement-of-cash-flow-row.Layer__statement-of-cash-flow-row--variant-summation .Layer__table-cell-content {
2720
- font-size: var(--text-md);
2721
- font-variation-settings: "wght" var(--font-weight-bold);
2722
- color: var(--text-color-primary);
2723
- }
2724
- .Layer__statement-of-cash-flow__table .Layer__statement-of-cash-flow-row.Layer__statement-of-cash-flow-row--expanded svg {
2725
- transform: rotate(0deg);
2726
- }
2727
- .Layer__statement-of-cash-flow__table .Layer__table-cell--last {
2728
- text-align: right;
2729
- }
2730
- .Layer__statement-of-cash-flow__table .Layer__table-cell__content-wrapper {
2731
- display: flex;
2732
- align-items: center;
2733
- }
2734
- .Layer__statement-of-cash-flow__table .Layer__table-cell__content-wrapper .Layer__table__expand-icon {
2735
- margin: 0;
2736
- transition: transform var(--transition-speed);
2737
- transform: rotate(-90deg);
2738
- }
2739
- .Layer__statement-of-cash-flow__table .Layer__statement-of-cash-flow-cell__label {
2740
- position: relative;
2741
- }
2742
- .Layer__statement-of-cash-flow__table .Layer__statement-of-cash-flow-cell__label .Layer__table-cell-content {
2743
- padding-left: 0;
2744
- }
2745
- .Layer__statement-of-cash-flow__table .Layer__statement-of-cash-flow-cell__value--positive .Layer__table-cell-content::before {
2746
- content: "$";
2747
- }
2748
- .Layer__statement-of-cash-flow__table .Layer__statement-of-cash-flow-cell__value--negative .Layer__table-cell-content::before {
2749
- content: "-$";
2750
- }
2751
2680
  .Layer__bank-transactions {
2752
2681
  max-width: var(--max-component-width);
2753
2682
  }
@@ -2759,6 +2688,7 @@
2759
2688
  }
2760
2689
  .Layer__bank-transactions__header {
2761
2690
  position: sticky;
2691
+ z-index: 10;
2762
2692
  left: 0;
2763
2693
  display: flex;
2764
2694
  width: 100%;
@@ -3200,6 +3130,7 @@
3200
3130
  min-width: 150px;
3201
3131
  box-sizing: border-box;
3202
3132
  z-index: 2;
3133
+ text-align: right;
3203
3134
  box-shadow: -8px 0px 20px -2px rgba(255, 255, 255, 0.64);
3204
3135
  }
3205
3136
  .Layer__table.Layer__bank-transactions__table .Layer__table-cell__category-col {
@@ -3213,15 +3144,12 @@
3213
3144
  z-index: 2;
3214
3145
  }
3215
3146
  .Layer__bank-transactions__date-col {
3216
- min-width: 130px;
3217
- width: 130px;
3218
- max-width: 130px;
3147
+ min-width: 140px;
3148
+ width: 140px;
3149
+ max-width: 140px;
3219
3150
  box-sizing: border-box;
3220
3151
  }
3221
3152
  .Layer__bank-transactions__tx-col {
3222
- min-width: 125px;
3223
- width: 180px;
3224
- max-width: 280px;
3225
3153
  box-sizing: border-box;
3226
3154
  }
3227
3155
  .Layer__bank-transactions__tx-text {
@@ -3861,6 +3789,13 @@
3861
3789
  border-right-color: transparent;
3862
3790
  }
3863
3791
  }
3792
+ .Layer__bank-transaction-row--removing .Layer__table-cell-content {
3793
+ max-height: 0px;
3794
+ top: 1px;
3795
+ padding-top: 0;
3796
+ padding-bottom: 0;
3797
+ overflow: hidden;
3798
+ }
3864
3799
  .Layer__bank-transactions__mobile-list {
3865
3800
  padding: 0;
3866
3801
  margin: 0;
@@ -4624,9 +4559,7 @@
4624
4559
  display: flex;
4625
4560
  align-items: center;
4626
4561
  justify-content: flex-end;
4627
- }
4628
- .Layer__journal__form__input-group .Layer__datepicker__time {
4629
- margin-left: var(--spacing-sm);
4562
+ gap: var(--spacing-xs);
4630
4563
  }
4631
4564
  .Layer__journal__form__input-group .Layer__input-label {
4632
4565
  padding: 0;
@@ -4787,6 +4720,8 @@
4787
4720
  min-height: 150px;
4788
4721
  box-sizing: border-box;
4789
4722
  overflow: visible;
4723
+ z-index: 1;
4724
+ max-width: var(--max-component-width);
4790
4725
  }
4791
4726
  .Layer__linked-accounts::-webkit-scrollbar {
4792
4727
  display: none;
@@ -4807,7 +4742,6 @@
4807
4742
  .Layer__linked-accounts__list {
4808
4743
  padding: var(--spacing-md);
4809
4744
  display: flex;
4810
- max-width: 1000px;
4811
4745
  flex-wrap: wrap;
4812
4746
  align-items: stretch;
4813
4747
  gap: var(--spacing-md);
@@ -5069,18 +5003,16 @@
5069
5003
  flex-direction: column;
5070
5004
  height: 100%;
5071
5005
  overflow: hidden;
5072
- padding: var(--spacing-md) var(--spacing-lg);
5073
- gap: var(--spacing-md);
5074
- max-width: 480px;
5006
+ border-radius: 8px;
5007
+ box-shadow: 0px 0px 0px 1px var(--color-base-300);
5008
+ background-color: var(--color-base-0);
5075
5009
  }
5076
5010
  .Layer__tasks-component .Layer__tasks-pending {
5077
5011
  display: flex;
5078
5012
  align-items: center;
5079
5013
  justify-content: space-between;
5080
- padding: var(--spacing-xs) var(--spacing-xs) var(--spacing-xs) var(--spacing-sm);
5014
+ padding: var(--spacing-md) var(--spacing-lg);
5081
5015
  border-radius: 8px;
5082
- background-color: var(--color-base-0);
5083
- box-shadow: 0px 0px 0px 1px var(--color-base-300);
5084
5016
  }
5085
5017
  .Layer__tasks-component .Layer__tasks-pending .Layer__tasks-pending-bar {
5086
5018
  display: flex;
@@ -5088,8 +5020,8 @@
5088
5020
  gap: var(--spacing-xs);
5089
5021
  font-weight: 540;
5090
5022
  padding: var(--spacing-xs);
5091
- border-radius: 8px;
5092
5023
  background-color: var(--color-base-50);
5024
+ border-radius: 8px;
5093
5025
  }
5094
5026
  .Layer__tasks-component .Layer__tasks-pending .Layer__tasks-pending-bar .mini-chart {
5095
5027
  transform: rotate(90deg);
@@ -5105,14 +5037,15 @@
5105
5037
  align-items: center;
5106
5038
  justify-content: flex-start;
5107
5039
  gap: var(--spacing-md);
5040
+ padding: var(--spacing-md) var(--spacing-lg);
5041
+ border-bottom: 1px solid var(--color-base-300);
5108
5042
  }
5109
5043
  .Layer__tasks-component .Layer__tasks-list {
5110
- border-radius: 8px;
5111
5044
  background-color: var(--color-base-0);
5112
5045
  box-shadow: 0px 0px 0px 1px var(--color-base-300);
5113
5046
  }
5114
5047
  .Layer__tasks-component .Layer__tasks-list .Layer__tasks-list-item-wrapper {
5115
- padding: var(--spacing-xs);
5048
+ padding: var(--spacing-2xs);
5116
5049
  }
5117
5050
  .Layer__tasks-component .Layer__tasks-list .Layer__tasks-list-item-wrapper:not(:last-child) {
5118
5051
  border-bottom: 1px solid var(--color-base-300);
@@ -5131,7 +5064,7 @@
5131
5064
  align-items: center;
5132
5065
  justify-content: space-between;
5133
5066
  gap: var(--spacing-xs);
5134
- padding: var(--spacing-sm);
5067
+ padding: var(--spacing-md);
5135
5068
  }
5136
5069
  .Layer__tasks-component .Layer__tasks-list .Layer__tasks-list-item-wrapper .Layer__tasks-list-item .Layer__tasks-list-item__head .Layer__tasks-list-item__head-info {
5137
5070
  display: flex;
@@ -5157,8 +5090,8 @@
5157
5090
  background: var(--color-info-warning-bg);
5158
5091
  }
5159
5092
  .Layer__tasks-component .Layer__tasks-list .Layer__tasks-list-item-wrapper .Layer__tasks-list-item .Layer__tasks-list-item__body {
5160
- padding-right: var(--spacing-sm);
5161
- padding-left: var(--spacing-sm);
5093
+ padding-right: var(--spacing-md);
5094
+ padding-left: var(--spacing-md);
5162
5095
  padding-bottom: 0;
5163
5096
  height: 0;
5164
5097
  opacity: 0;
@@ -5217,10 +5150,30 @@
5217
5150
  .Layer__tasks-component .Layer__tasks__pagination ul {
5218
5151
  margin: 0;
5219
5152
  }
5153
+ .Layer__tasks__expand-icon {
5154
+ transition: transform 150ms ease-out;
5155
+ color: var(--color-base-600);
5156
+ margin-left: -15px;
5157
+ }
5220
5158
  @media screen and (max-width: 400px) {
5221
5159
  .Layer__tasks-component {
5222
5160
  padding: var(--spacing-xs) var(--spacing-sm);
5223
5161
  }
5162
+ .Layer__tasks-component .Layer__tasks-pending {
5163
+ flex-direction: column;
5164
+ align-items: stretch;
5165
+ gap: var(--spacing-xs);
5166
+ padding: var(--spacing-md) 0;
5167
+ }
5168
+ .Layer__tasks-component .Layer__tasks-pending .Layer__tasks-pending-bar {
5169
+ justify-content: space-between;
5170
+ }
5171
+ .Layer__tasks-component .Layer__badge {
5172
+ white-space: nowrap;
5173
+ }
5174
+ .Layer__tasks-component .Layer__tasks-header {
5175
+ padding: var(--spacing-md) 0;
5176
+ }
5224
5177
  .Layer__tasks-list .Layer__tasks-list-item-wrapper .Layer__tasks-list-item .Layer__tasks-list-item__head {
5225
5178
  padding: var(--spacing-xs);
5226
5179
  }
@@ -5288,6 +5241,7 @@
5288
5241
  .Layer__panel {
5289
5242
  flex: 1;
5290
5243
  display: flex;
5244
+ align-items: start;
5291
5245
  height: 100%;
5292
5246
  }
5293
5247
  .Layer__panel__content {
@@ -5304,9 +5258,9 @@
5304
5258
  .Layer__panel .Layer__panel__content .Layer__component-header {
5305
5259
  position: sticky;
5306
5260
  top: 0;
5261
+ z-index: auto;
5307
5262
  background: rgba(255, 255, 255, 0.5);
5308
5263
  backdrop-filter: blur(6px);
5309
- z-index: 1;
5310
5264
  border-top-left-radius: var(--border-radius-sm);
5311
5265
  border-top-right-radius: var(--border-radius-sm);
5312
5266
  }
@@ -5316,7 +5270,6 @@
5316
5270
  position: -webkit-sticky;
5317
5271
  position: sticky;
5318
5272
  max-height: 0;
5319
- z-index: 1;
5320
5273
  top: 0;
5321
5274
  overflow-x: hidden;
5322
5275
  transition: max-width 180ms ease-in-out;
@@ -5331,6 +5284,14 @@
5331
5284
  opacity: 0.2;
5332
5285
  transition: opacity 180ms ease-in-out;
5333
5286
  }
5287
+ .Layer__panel__sidebar--default {
5288
+ max-width: none;
5289
+ width: 100%;
5290
+ flex: 1;
5291
+ }
5292
+ .Layer__panel__sidebar--default .Layer__panel__sidebar-content {
5293
+ width: 100%;
5294
+ }
5334
5295
  .Layer__panel.Layer__panel--open .Layer__panel__sidebar {
5335
5296
  max-width: 480px;
5336
5297
  margin-left: -1px;
@@ -5374,6 +5335,98 @@
5374
5335
  width: 100%;
5375
5336
  }
5376
5337
  }
5338
+ .Layer__date-picker {
5339
+ position: relative;
5340
+ display: inline-block;
5341
+ }
5342
+ .Layer__date-picker .Layer__dropdown-toggle {
5343
+ box-shadow: 0px 1px 2px 0px var(--base-transparent-6), 0px 0px 0px 1px var(--color-base-300);
5344
+ border-radius: var(--spacing-2xs);
5345
+ padding: var(--spacing-3xs) var(--spacing-xs) var(--spacing-3xs);
5346
+ min-height: var(--spacing-2xl);
5347
+ min-width: 180px;
5348
+ cursor: pointer;
5349
+ text-align: left;
5350
+ padding-left: var(--spacing-lm);
5351
+ gap: 20px;
5352
+ border: 1px solid transparent;
5353
+ background-color: var(--color-white);
5354
+ font-size: 14px;
5355
+ display: flex;
5356
+ align-items: center;
5357
+ justify-content: space-between;
5358
+ }
5359
+ .Layer__date-picker .Layer__dropdown-toggle .Layer__chevron {
5360
+ display: flex;
5361
+ transition: transform 0.3s ease;
5362
+ }
5363
+ .Layer__date-picker .Layer__dropdown-toggle .Layer__chevron.open {
5364
+ transform: rotate(180deg);
5365
+ }
5366
+ .Layer__date-picker .Layer__dropdown-menu {
5367
+ margin-top: 5px;
5368
+ position: absolute;
5369
+ top: 100%;
5370
+ left: 0;
5371
+ box-shadow: 0px 1px 2px 0px var(--base-transparent-6), 0px 0px 0px 1px var(--color-base-300);
5372
+ border-radius: var(--spacing-2xs);
5373
+ background-color: var(--color-white);
5374
+ width: 256px;
5375
+ z-index: 1000;
5376
+ opacity: 0;
5377
+ animation: fadeIn 0.3s forwards;
5378
+ }
5379
+ @keyframes fadeIn {
5380
+ to {
5381
+ opacity: 1;
5382
+ }
5383
+ }
5384
+ .Layer__date-picker .Layer__dropdown-menu .Layer__view-options {
5385
+ padding: var(--spacing-xs);
5386
+ margin-bottom: var(--spacing-4xs);
5387
+ }
5388
+ .Layer__date-picker .Layer__dropdown-menu .Layer__compare-options-wrapper {
5389
+ border-top: 1px solid var(--color-base-200);
5390
+ padding: var(--spacing-md) var(--spacing-sm) var(--spacing-sm);
5391
+ }
5392
+ .Layer__date-picker .Layer__dropdown-menu .Layer__compare-options-wrapper:first-child {
5393
+ border-top: transparent;
5394
+ }
5395
+ .Layer__date-picker .Layer__dropdown-menu .Layer__compare-options {
5396
+ display: grid;
5397
+ grid-template-columns: 2fr 2fr;
5398
+ }
5399
+ .Layer__date-picker .Layer__option {
5400
+ cursor: pointer;
5401
+ display: flex;
5402
+ justify-content: space-between;
5403
+ align-items: center;
5404
+ font-size: 14px;
5405
+ padding: 0px var(--spacing-xs);
5406
+ max-height: 28px;
5407
+ min-height: 28px;
5408
+ }
5409
+ .Layer__date-picker .Layer__option:hover {
5410
+ border-radius: var(--spacing-3xs);
5411
+ background: var(--color-base-100);
5412
+ max-width: max-content;
5413
+ }
5414
+ .Layer__date-picker .Layer__option.Layer__selected {
5415
+ border-radius: var(--spacing-3xs);
5416
+ background: var(--color-base-100);
5417
+ max-width: max-content;
5418
+ }
5419
+ .Layer__date-picker .Layer__option .Layer__tick {
5420
+ margin-left: 10px;
5421
+ padding-top: 2px;
5422
+ color: var(--color-base-900);
5423
+ }
5424
+ .Layer__date-picker .Layer__compare-header {
5425
+ color: var(--color-base-500);
5426
+ font-size: 11px;
5427
+ padding: 0 0 var(--spacing-sm) var(--spacing-xs);
5428
+ position: relative;
5429
+ }
5377
5430
  .Layer__pill {
5378
5431
  position: relative;
5379
5432
  background-color: var(--badge-bg-color);
@@ -6255,6 +6308,11 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
6255
6308
  width: calc(25% - 12px);
6256
6309
  height: 56px;
6257
6310
  }
6311
+ .Layer__accounting-overview-profit-and-loss-charts {
6312
+ display: flex;
6313
+ flex-direction: column;
6314
+ gap: var(--spacing-md);
6315
+ }
6258
6316
  .Layer__component.Layer__accounting-overview-profit-and-loss .recharts-responsive-container {
6259
6317
  margin-top: -42px;
6260
6318
  }
@@ -6292,6 +6350,70 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
6292
6350
  margin-top: -12px;
6293
6351
  }
6294
6352
  }
6353
+ .Layer__bookkeeping-overview--view .Layer__panel .Layer__panel__content .Layer__component-header {
6354
+ z-index: 1;
6355
+ }
6356
+ .Layer__bookkeeping-overview--view .Layer__panel.Layer__panel--open .Layer__panel__content {
6357
+ border-right: none;
6358
+ }
6359
+ .Layer__bookkeeping-overview--view .Layer__panel__sidebar {
6360
+ padding: var(--spacing-md) var(--spacing-lg);
6361
+ border-left: none;
6362
+ background: none;
6363
+ }
6364
+ @media screen and (min-width: 1100px) {
6365
+ .Layer__bookkeeping-overview--view .Layer__view-main {
6366
+ padding-right: 0;
6367
+ }
6368
+ }
6369
+ .Layer__bookkeeping-overview__summaries-row {
6370
+ display: flex;
6371
+ align-items: center;
6372
+ gap: var(--spacing-md);
6373
+ max-width: 1406px;
6374
+ padding: var(--spacing-md);
6375
+ }
6376
+ .Layer__bookkeeping-overview__summaries-row .Layer__notification-card {
6377
+ width: calc(25% - 12px);
6378
+ height: 56px;
6379
+ }
6380
+ .Layer__bookkeeping-overview-profit-and-loss-charts {
6381
+ display: flex;
6382
+ flex-direction: column;
6383
+ gap: var(--spacing-md);
6384
+ }
6385
+ .bookkeeping-overview-profit-and-loss-charts > .Layer__toggle {
6386
+ display: none;
6387
+ }
6388
+ .Layer__bookkeeping-overview-profit-and-loss .recharts-legend-wrapper {
6389
+ top: 16px !important;
6390
+ }
6391
+ .Layer__component.Layer__bookkeeping-overview-profit-and-loss-chart.bookkeeping-overview-profit-and-loss-chart--hidden {
6392
+ display: none;
6393
+ }
6394
+ @container (max-width: 796px) {
6395
+ .Layer__bookkeeping-overview__summaries-row {
6396
+ flex-direction: column;
6397
+ }
6398
+ .Layer__bookkeeping-overview__summaries-row .Layer__profit-and-loss-summaries {
6399
+ width: 100%;
6400
+ flex-direction: column;
6401
+ }
6402
+ .Layer__bookkeeping-overview__summaries-row .Layer__notification-card.Layer__txs-to-review {
6403
+ width: 100%;
6404
+ }
6405
+ .bookkeeping-overview-profit-and-loss-charts {
6406
+ flex-direction: column;
6407
+ }
6408
+ .bookkeeping-overview-profit-and-loss-charts > .Layer__toggle {
6409
+ display: flex;
6410
+ }
6411
+ }
6412
+ @container (max-width: 460px) {
6413
+ .Layer__component.Layer__bookkeeping-overview-profit-and-loss .recharts-responsive-container {
6414
+ margin-top: -12px;
6415
+ }
6416
+ }
6295
6417
  .Layer__reports .Layer__panel__content {
6296
6418
  border-radius: var(--border-radius-sm);
6297
6419
  }