@layerfi/components 0.1.33 → 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.
@@ -629,117 +629,6 @@
629
629
  .Layer__chart_y-axis-tick tspan {
630
630
  font-size: var(--text-sm);
631
631
  }
632
- .Layer__date-month-picker__wrapper {
633
- display: flex;
634
- align-items: center;
635
- position: relative;
636
- }
637
- .Layer__date-month-picker__wrapper .Layer__date-month-picker__current-button {
638
- border-top-left-radius: 0;
639
- border-bottom-left-radius: 0;
640
- }
641
- .Layer__date-month-picker__wrapper.Layer__date-month-picker__wrapper--current-date-option .Layer__date-month-picker {
642
- border-top-right-radius: 0;
643
- border-bottom-right-radius: 0;
644
- }
645
- .Layer__date-month-picker__wrapper .Layer__date-month-picker__current-button {
646
- border: 1px solid var(--input-border-color);
647
- border-left: none;
648
- box-shadow: none;
649
- }
650
- .Layer__date-month-picker {
651
- width: 210px;
652
- font-size: 14px;
653
- padding: 0.25rem;
654
- border: 1px solid var(--input-border-color);
655
- border-radius: var(--input-border-radius);
656
- overflow: hidden;
657
- position: relative;
658
- display: flex;
659
- align-items: center;
660
- justify-content: flex-end;
661
- z-index: 1;
662
- }
663
- .Layer__date-month-picker__button {
664
- padding: 0.25rem;
665
- display: flex;
666
- justify-content: center;
667
- align-items: center;
668
- text-align: center;
669
- background-color: var(--color-base-0);
670
- border: 0;
671
- border-radius: var(--input-border-radius);
672
- z-index: 3;
673
- position: relative;
674
- }
675
- .Layer__date-month-picker__button:active {
676
- background-color: var(--color-base-0);
677
- }
678
- .Layer__date-month-picker__button-icon path {
679
- stroke: var(--text-color);
680
- }
681
- .Layer__date-month-picker__button--disabled .Layer__date-month-picker__button-icon path {
682
- stroke: var(--color-base-500);
683
- }
684
- .Layer__date-month-picker__label {
685
- flex: 1;
686
- font-size: 14px;
687
- display: flex;
688
- justify-content: flex-start;
689
- align-items: center;
690
- text-align: center;
691
- padding: 0 var(--spacing-xs);
692
- transition: opacity 0.7s ease-in-out, transform 0.4s ease-in-out;
693
- width: 33%;
694
- position: relative;
695
- padding-left: 20px;
696
- }
697
- .Layer__date-month-picker__labels-container {
698
- display: flex;
699
- width: 660px;
700
- position: absolute;
701
- }
702
- .Layer__date-month-picker__effect-blur {
703
- width: 120px;
704
- height: 100%;
705
- position: absolute;
706
- right: -10px;
707
- bottom: 1px;
708
- background: linear-gradient(-90deg, #fff 50%, rgba(255, 255, 255, 0) 100%);
709
- z-index: 2;
710
- }
711
- @container (max-width: 759px) {
712
- .Layer__date-month-picker--responsive.Layer__date-month-picker__wrapper .Layer__date-month-picker {
713
- border: none;
714
- background: none;
715
- width: 175px;
716
- }
717
- .Layer__date-month-picker--responsive.Layer__date-month-picker__wrapper .Layer__date-month-picker__button {
718
- margin: 0 0.125rem;
719
- box-shadow: 0px 1px 2px 0px var(--base-transparent-6, rgba(16, 24, 40, 0.06)), 0px 0px 0px 1px var(--color-base-300);
720
- border-radius: 4px;
721
- }
722
- .Layer__date-month-picker--responsive.Layer__date-month-picker__wrapper .Layer__date-month-picker__effect-blur {
723
- right: 0;
724
- max-width: 70px;
725
- background: linear-gradient(-90deg, #f7f8fa 75%, rgba(255, 255, 255, 0) 100%);
726
- }
727
- .Layer__date-month-picker--responsive.Layer__date-month-picker__wrapper .Layer__date-month-picker__button--disabled {
728
- background-color: var(--color-base-200);
729
- }
730
- .Layer__date-month-picker--responsive.Layer__date-month-picker__wrapper .Layer__date-month-picker__labels-container {
731
- width: 550px;
732
- }
733
- .Layer__date-month-picker--responsive.Layer__date-month-picker__wrapper .Layer__date-month-picker__label {
734
- padding-left: 0;
735
- padding-right: 75px;
736
- justify-content: flex-end;
737
- font-size: 12px;
738
- }
739
- .Layer__date-month-picker--responsive .Layer__date-month-picker__current-button {
740
- display: none;
741
- }
742
- }
743
632
  .Layer__hover-menu {
744
633
  position: relative;
745
634
  display: flex;
@@ -896,6 +785,12 @@
896
785
  padding-top: var(--spacing-xl);
897
786
  }
898
787
  }
788
+ .Layer__error-boundary {
789
+ padding: var(--spacing-xl);
790
+ }
791
+ .Layer__error-boundary .Layer__data-state__description {
792
+ margin-bottom: 0;
793
+ }
899
794
  .Layer__datetime {
900
795
  display: inline-flex;
901
796
  align-items: center;
@@ -908,64 +803,67 @@
908
803
  .Layer__datetime__time {
909
804
  color: var(--color-base-600);
910
805
  }
911
- .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);
912
826
  padding: 8px;
913
827
  box-sizing: border-box;
914
828
  position: relative;
915
- border: 1px solid var(--border-color);
916
- border-radius: var(--input-border-radius);
917
- border-width: 0px;
918
- box-shadow: 0px 0px 0px 1px var(--input-border-color), 0px 0px 0px 2px rgba(0, 0, 0, 0);
829
+ border: none;
919
830
  margin: 1px;
920
831
  max-width: 150px;
921
832
  font-family: var(--font-family);
922
833
  font-size: var(--input-font-size);
923
834
  line-height: 140%;
924
835
  }
925
- .Layer__datepicker input:focus,
926
- .Layer__datepicker input:active,
927
- .Layer__datepicker input:focus-visible {
928
- 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;
929
843
  outline: none;
930
844
  }
931
- .react-datepicker__tab-loop {
932
- z-index: 99;
933
- }
934
- .Layer__datepicker input {
935
- text-align: center;
936
- }
937
- .Layer__datepicker__time input {
938
- max-width: 100px;
939
- }
940
- .Layer__datepicker__popper * {
941
- outline-color: var(--color-base-800);
942
- }
943
- .Layer__datepicker__popper {
845
+ .Layer__datepicker__wrapper .Layer__datepicker__popper {
846
+ min-width: 275px;
847
+ max-width: 275px;
944
848
  z-index: 99;
945
849
  border-radius: 8px;
946
850
  }
947
- .Layer__datepicker__popper .react-datepicker__day--in-range,
948
- .Layer__datepicker__popper .react-datepicker__day--in-selecting-range {
949
- background-color: var(--color-base-200);
950
- color: var(--color-base-800);
951
- }
952
- .Layer__datepicker__popper .react-datepicker__day--range-end {
953
- background-color: var(--color-base-800);
954
- color: var(--color-base-100);
851
+ .Layer__datepicker__wrapper .Layer__datepicker__popper * {
852
+ outline-color: var(--color-base-800);
955
853
  }
956
- .Layer__datepicker__popper .react-datepicker__triangle {
854
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .react-datepicker__triangle {
957
855
  display: none;
958
856
  }
959
- .Layer__datepicker__popper .Layer__datepicker__calendar {
857
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar {
960
858
  border: none;
961
859
  box-shadow: 0px 0px 0px 1px var(--input-border-color), 0px 0px 0px 2px rgba(0, 0, 0, 0);
962
860
  }
963
- .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__navigation--previous {
861
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__navigation--previous {
964
862
  left: auto;
965
863
  right: 42px;
966
864
  }
967
- .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__navigation--previous .react-datepicker__navigation-icon::before,
968
- .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 {
969
867
  border-color: var(--color-base-800);
970
868
  border-style: solid;
971
869
  border-width: 1px 1px 0 0;
@@ -973,15 +871,32 @@
973
871
  display: block;
974
872
  height: 6px;
975
873
  position: absolute;
976
- top: 10px;
874
+ top: 11px;
977
875
  width: 6px;
978
876
  }
979
- .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 {
980
882
  padding: var(--spacing-sm) 0 0;
981
883
  background: white;
982
884
  border: none;
983
885
  }
984
- .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 {
985
900
  padding: 0 var(--spacing-md) var(--spacing-sm);
986
901
  text-align: left;
987
902
  font-weight: 460;
@@ -994,76 +909,172 @@
994
909
  font-size: 14px;
995
910
  border-bottom: 1px solid var(--color-base-200);
996
911
  }
997
- .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__day-names {
912
+ .Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__day-names {
998
913
  padding: var(--spacing-xs) var(--spacing-xs) 0;
999
914
  }
1000
- .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 {
1001
916
  width: 32px;
1002
917
  height: 32px;
1003
918
  color: var(--color-base-500);
1004
919
  font-size: 12px;
1005
920
  }
1006
- .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 {
1007
923
  display: flex;
1008
924
  align-items: center;
1009
925
  justify-content: center;
1010
926
  }
1011
- .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day {
1012
- width: 32px;
1013
- 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 {
1014
931
  display: flex;
1015
932
  align-items: center;
1016
933
  justify-content: center;
1017
934
  transition: all 0.2s ease-in-out;
1018
935
  }
1019
- .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 {
1020
940
  background-color: var(--color-base-400);
1021
941
  color: var(--color-base-800);
1022
942
  }
1023
- .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day.react-datepicker__day--selected {
1024
- background-color: var(--color-base-800);
1025
- color: var(--color-base-100);
1026
- font-weight: 460;
1027
- }
1028
- .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 {
1029
947
  color: var(--color-base-500);
1030
948
  }
1031
- .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 {
1032
957
  color: var(--color-base-300);
1033
958
  cursor: not-allowed;
1034
959
  }
1035
- .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 {
1036
968
  background-color: var(--color-base-400);
1037
969
  color: var(--color-base-800);
1038
970
  border-color: var(--color-base-800);
1039
971
  outline-color: var(--color-base-800);
1040
972
  }
1041
- .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 {
1042
1053
  background-color: var(--color-base-800);
1043
1054
  color: var(--color-base-100);
1044
1055
  font-weight: 460;
1045
1056
  }
1046
- .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 {
1047
1058
  display: flex;
1048
1059
  align-items: center;
1049
1060
  justify-content: center;
1050
1061
  transition: all 0.2s ease-in-out;
1051
1062
  }
1052
- .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 {
1053
1064
  background-color: var(--color-base-400);
1054
1065
  color: var(--color-base-800);
1055
1066
  }
1056
- .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 {
1057
1068
  background-color: var(--color-base-800);
1058
1069
  color: var(--color-base-100);
1059
1070
  font-weight: 460;
1060
1071
  }
1061
- .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 {
1062
1073
  padding: var(--spacing-sm) 0 0;
1063
1074
  background: white;
1064
1075
  border: none;
1065
1076
  }
1066
- .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 {
1067
1078
  padding: 0 var(--spacing-md) var(--spacing-sm);
1068
1079
  text-align: left;
1069
1080
  font-weight: 460;
@@ -1076,24 +1087,22 @@
1076
1087
  font-size: 14px;
1077
1088
  border-bottom: 1px solid var(--color-base-200);
1078
1089
  }
1079
- .react-datepicker__children-container {
1080
- width: 100%;
1081
- margin: 0;
1082
- padding: 0;
1090
+ .Layer__datepicker__time__wrapper .react-datepicker__header {
1091
+ padding: 0 !important;
1083
1092
  }
1084
- .Layer__datepicker__popper__custom-footer {
1085
- display: flex;
1086
- flex-direction: column;
1087
- justify-content: flex-start;
1088
- align-items: flex-start;
1089
- padding: var(--spacing-md) var(--spacing-xs);
1090
- border-top: 1px solid var(--color-base-200);
1093
+ .Layer__datepicker__time__wrapper .react-datepicker-time__header {
1094
+ display: none;
1091
1095
  }
1092
- .Layer__datepicker__popper__custom-footer .Layer__text-btn {
1093
- padding: var(--spacing-xs) var(--spacing-xs);
1094
- color: var(--color-base-800);
1095
- font-weight: 460;
1096
- 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;
1097
1106
  }
1098
1107
  .Layer__details-list {
1099
1108
  display: flex;
@@ -1720,9 +1729,14 @@
1720
1729
  }
1721
1730
  .Layer__table {
1722
1731
  width: 100%;
1723
- border-collapse: separate;
1724
1732
  border-spacing: 0;
1725
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
+ }
1726
1740
  .Layer__table::-webkit-scrollbar {
1727
1741
  width: 6px;
1728
1742
  height: 6px;
@@ -1738,7 +1752,7 @@
1738
1752
  .Layer__table::-webkit-scrollbar-thumb:hover {
1739
1753
  background: #999;
1740
1754
  }
1741
- .Layer__table-header {
1755
+ .Layer__table .Layer__table-header {
1742
1756
  color: var(--text-color-secondary);
1743
1757
  font-size: var(--text-sm);
1744
1758
  font-variation-settings: "wght" var(--font-weight-normal);
@@ -1755,27 +1769,93 @@
1755
1769
  text-align: left;
1756
1770
  position: relative;
1757
1771
  }
1758
- .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 {
1759
1776
  color: var(--text-color-primary);
1760
1777
  font-variation-settings: "wght" var(--font-weight-bold);
1761
1778
  }
1762
- .Layer__table-cell--primary,
1763
- .Layer__table-cell--primary .Layer__table-cell-content {
1764
- color: var(--color-base-800);
1765
- font-variation-settings: "wght" var(--font-weight-bold);
1779
+ .Layer__table .Layer__table-body .Layer__table-empty-row:first-child {
1780
+ display: none;
1766
1781
  }
1767
- .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 {
1768
1842
  font-size: var(--text-md);
1769
1843
  text-align: left;
1770
1844
  color: var(--text-color-secondary);
1771
1845
  border-top: 1px solid var(--border-color);
1772
- height: var(--spacing-5xl);
1773
1846
  padding: 0;
1774
1847
  }
1775
- .Layer__table-row:last-child .Layer__table-cell {
1776
- 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);
1777
1851
  }
1778
- .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 {
1779
1859
  display: flex;
1780
1860
  align-items: center;
1781
1861
  height: 100%;
@@ -1785,6 +1865,21 @@
1785
1865
  transition: all var(--transition-speed) ease-out;
1786
1866
  position: relative;
1787
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
+ }
1788
1883
  .Layer__table-cell-content-indentation {
1789
1884
  height: 100%;
1790
1885
  display: flex;
@@ -1801,21 +1896,160 @@
1801
1896
  top: 0;
1802
1897
  bottom: 0;
1803
1898
  }
1804
- .Layer__table--hover-effect .Layer__table-row:hover {
1805
- background-color: var(--color-base-50);
1806
- cursor: pointer;
1899
+ .Layer__table-row--hidden .Layer__table-cell {
1900
+ border-top-width: 0;
1807
1901
  }
1808
- .Layer__table-cell--amount {
1809
- justify-content: flex-end;
1810
- text-align: right;
1902
+ .Layer__table-cell {
1903
+ height: auto;
1811
1904
  }
1812
- .Layer__table.with-cell-separators > tbody > tr > td:first-child .Layer__table-cell-content::after,
1813
- .Layer__table.with-cell-separators > tbody > tr > td:last-child .Layer__table-cell-content::after,
1814
- .Layer__table.with-cell-separators > thead > tr > th:first-child.Layer__table-header::after,
1815
- .Layer__table.with-cell-separators > thead > tr > th:last-child.Layer__table-header::after {
1816
- display: none;
1905
+ .Layer__table-cell > .Layer__table-cell-content {
1906
+ overflow: hidden;
1907
+ transition: all 50ms ease-out;
1817
1908
  }
1818
- .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 {
1819
2053
  padding: var(--spacing-2xl) var(--spacing-sm);
1820
2054
  box-sizing: border-box;
1821
2055
  display: flex;
@@ -1852,13 +2086,16 @@
1852
2086
  }
1853
2087
  .Layer__table-cell > .Layer__table-cell-content {
1854
2088
  overflow: hidden;
1855
- transition: all 100ms ease-out;
2089
+ transition: all 50ms ease-out;
1856
2090
  }
1857
2091
  .Layer__table-row {
1858
- transition: all 180ms ease-in-out;
2092
+ transition: all 100ms ease-in-out;
1859
2093
  }
1860
2094
  .Layer__table-row.Layer__table-row--collapsed .Layer__table-cell > .Layer__table-cell-content {
1861
- 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;
1862
2099
  }
1863
2100
  .Layer__table-row.Layer__table-row--with-show:not(.initial-load) {
1864
2101
  opacity: 0.5;
@@ -1868,8 +2105,14 @@
1868
2105
  opacity: 1;
1869
2106
  }
1870
2107
  .Layer__table-row.Layer__table-row--anim-starting-state {
1871
- transform: scaleX(0.98);
1872
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%;
1873
2116
  }
1874
2117
  .Layer__table__empty-row {
1875
2118
  background: var(--color-base-100);
@@ -1877,6 +2120,23 @@
1877
2120
  border-top: 1px solid var(--color-base-200);
1878
2121
  border-bottom: 1px solid var(--color-base-200);
1879
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
+ }
1880
2140
  .Layer__tabs {
1881
2141
  display: flex;
1882
2142
  width: max-content;
@@ -2115,86 +2375,63 @@
2115
2375
  display: none;
2116
2376
  }
2117
2377
  }
2118
- .Layer__view-main {
2378
+ .Layer__view .Layer__view-main {
2119
2379
  padding: var(--spacing-md) var(--spacing-lg);
2120
2380
  display: flex;
2121
2381
  flex-direction: column;
2122
2382
  gap: var(--spacing-md);
2123
2383
  container-type: inline-size;
2124
2384
  }
2125
- .Layer__view-main .Layer__toggle {
2385
+ .Layer__view .Layer__view-main .Layer__toggle {
2126
2386
  border-radius: 6px;
2127
2387
  }
2128
- .Layer__view-main .Layer__toggle .Layer__toggle-option input + span {
2388
+ .Layer__view .Layer__view-main .Layer__toggle .Layer__toggle-option input + span {
2129
2389
  border-radius: 6px;
2130
2390
  }
2131
- .Layer__view-main .Layer__toggle__thumb {
2391
+ .Layer__view .Layer__view-main .Layer__toggle__thumb {
2132
2392
  border-radius: 6px;
2133
2393
  }
2134
- .Layer__view-header {
2394
+ .Layer__view .Layer__view-header {
2135
2395
  display: flex;
2136
2396
  width: 100%;
2137
2397
  border-bottom: 1px solid var(--color-base-200);
2138
2398
  container-type: inline-size;
2399
+ position: relative;
2400
+ z-index: 1;
2139
2401
  }
2140
- .Layer__view-header__content {
2402
+ .Layer__view .Layer__view-header__content {
2141
2403
  padding: var(--spacing-lg);
2142
2404
  display: flex;
2143
2405
  align-items: center;
2144
2406
  justify-content: space-between;
2145
2407
  width: 100%;
2146
- max-width: 1406px;
2147
2408
  }
2148
- .Layer__view-header__controls {
2409
+ .Layer__view .Layer__view-header__controls {
2149
2410
  display: flex;
2150
2411
  align-items: center;
2151
2412
  }
2152
2413
  @container (max-width: 760px) {
2153
- .Layer__view-header__content {
2414
+ .Layer__view .Layer__view-header__content {
2154
2415
  flex-direction: column;
2155
2416
  align-items: flex-start;
2156
2417
  gap: var(--spacing-sm);
2157
2418
  }
2158
- .Layer__view-header__content .Layer__heading {
2419
+ .Layer__view .Layer__view-header__content .Layer__heading {
2159
2420
  align-self: flex-start;
2160
2421
  }
2161
2422
  }
2162
- .Layer__panel_view-main {
2163
- display: flex;
2164
- flex-direction: column;
2165
- gap: var(--spacing-md);
2166
- container-type: inline-size;
2423
+ .Layer__view.Layer__view--panel .Layer__view-main {
2424
+ padding: 0;
2167
2425
  }
2168
- .Layer__panel_view-header {
2169
- display: flex;
2170
- width: 100%;
2171
- border-bottom: 1px solid var(--color-base-200);
2172
- container-type: inline-size;
2426
+ .Layer__view.Layer__view--panel .Layer__view-header {
2173
2427
  position: relative;
2174
2428
  z-index: 1;
2175
2429
  }
2176
- .Layer__panel_view-header__content {
2177
- padding: var(--spacing-lg);
2178
- display: flex;
2179
- align-items: center;
2180
- justify-content: space-between;
2181
- width: 100%;
2182
- max-width: 1406px;
2183
- }
2184
- .Layer__panel_view-header__controls {
2430
+ .Layer__view.Layer__view--panel .Layer__view-header__controls {
2185
2431
  display: flex;
2186
2432
  align-items: center;
2187
2433
  gap: var(--spacing-sm);
2188
- }
2189
- @container (max-width: 760px) {
2190
- .Layer__panel_view-header__content {
2191
- flex-direction: column;
2192
- align-items: flex-start;
2193
- gap: var(--spacing-sm);
2194
- }
2195
- .Layer__panel_view-header__content .Layer__heading {
2196
- align-self: flex-start;
2197
- }
2434
+ flex-wrap: wrap;
2198
2435
  }
2199
2436
  .Layer__ledger-account__index {
2200
2437
  background-color: var(--color-base-0);
@@ -2251,25 +2488,6 @@
2251
2488
  .Layer__ledger-account__entry-details__line-items {
2252
2489
  padding: var(--spacing-md);
2253
2490
  }
2254
- .Layer__ledger-account__entry-details__table td {
2255
- padding: var(--spacing-xs) var(--spacing-md);
2256
- font-size: 12px;
2257
- color: var(--color-base-600);
2258
- }
2259
- .Layer__ledger-account__entry-details__table__total-row td {
2260
- font-variation-settings: "wght" var(--font-weight-bold);
2261
- color: var(--text-color-primary);
2262
- }
2263
- .Layer__table.Layer__ledger-account__entry-details__table th,
2264
- .Layer__ledger-account__entry-details__table__total-row td,
2265
- .Layer__table.Layer__ledger-account__entry-details__table tr th:last-child.Layer__table-header,
2266
- .Layer__table.Layer__ledger-account__entry-details__table tr th:first-child.Layer__table-header {
2267
- padding: var(--spacing-md);
2268
- }
2269
- .Layer__ledger-account__entry-details__table .Layer__table-cell--amount {
2270
- width: 128px;
2271
- box-sizing: border-box;
2272
- }
2273
2491
  .Layer__ledger-account__pagination {
2274
2492
  display: flex;
2275
2493
  justify-content: flex-end;
@@ -2360,200 +2578,41 @@
2360
2578
  padding-right: var(--spacing-md);
2361
2579
  }
2362
2580
  }
2363
- .Layer__balance-sheet {
2364
- border: 1px solid var(--border-color);
2365
- border-radius: var(--corner-radius);
2366
- background-color: var(--background-color);
2367
- }
2368
- .Layer__balance-sheet * {
2369
- font-family: var(--font-family);
2370
- font-feature-settings:
2371
- "cv10" on,
2372
- "cv01" on,
2373
- "cv05" on,
2374
- "cv08" on,
2375
- "ss03" on;
2376
- }
2377
- .Layer__balance-sheet tbody .Layer__table__empty-row:first-child {
2378
- 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);
2379
2584
  }
2380
- .Layer__balance-sheet .Layer__balance-sheet__title {
2381
- display: inline;
2382
- flex: 1;
2383
- font-size: var(--text-heading);
2384
- margin: 0;
2585
+ .Layer__ledger-account__entry-details__table tr td:first-child {
2586
+ width: 75%;
2385
2587
  }
2386
- @container (max-width: 800px) {
2387
- .Layer__balance-sheet .Layer__balance-sheet__header {
2388
- flex-direction: column;
2389
- gap: var(--spacing-sm);
2390
- }
2391
- }
2392
- @container (max-width: 540px) {
2393
- .Layer__balance-sheet .Layer__balance-sheet__header {
2394
- flex-direction: row;
2395
- gap: var(--spacing-sm);
2396
- flex-wrap: wrap;
2397
- }
2398
- .Layer__balance-sheet .Layer__balance-sheet__header .Layer__balance-sheet__actions {
2399
- flex-wrap: wrap;
2400
- }
2401
- .Layer__balance-sheet .Layer__balance-sheet__header .Layer__balance-sheet__actions__date-picker {
2402
- flex-wrap: wrap;
2403
- 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);
2404
2595
  }
2405
2596
  }
2406
- .Layer__balance-sheet__header {
2407
- display: flex;
2408
- flex: 1;
2409
- flex-direction: row;
2410
- padding: var(--spacing-sm) var(--spacing-md);
2411
- }
2412
- .Layer__balance-sheet__header.Layer__balance-sheet__header--no-title .Layer__balance-sheet__actions {
2413
- flex: 1;
2414
- }
2415
- .Layer__balance-sheet__header .Layer__balance-sheet__actions {
2416
- display: flex;
2417
- flex-direction: row;
2418
- justify-content: space-between;
2419
- gap: var(--spacing-xs);
2420
- }
2421
- .Layer__balance-sheet__header .Layer__balance-sheet__actions .Layer__balance-sheet__actions__date-picker {
2422
- display: flex;
2423
- flex-direction: row;
2424
- gap: var(--spacing-xs);
2425
- }
2426
- .Layer__balance-sheet__table {
2427
- width: 100%;
2428
- border-collapse: collapse;
2429
- }
2430
- .Layer__balance-sheet__table .Layer__balance-sheet-row {
2431
- font-size: 1em;
2432
- height: 52px;
2433
- }
2434
- .Layer__balance-sheet__table .Layer__balance-sheet-row .Layer__balance-sheet-cell__value .Layer__table-cell-content {
2435
- justify-content: flex-end;
2436
- }
2437
- .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 {
2438
- padding-left: 16px;
2439
- }
2440
- .Layer__balance-sheet__table .Layer__balance-sheet-row.Layer__balance-sheet-row--depth-0 .Layer__balance-sheet-cell__label .Layer__table-cell-content {
2441
- font-size: var(--text-lg);
2442
- font-weight: 540;
2443
- color: var(--text-color-primary);
2444
- }
2445
- .Layer__balance-sheet__table .Layer__balance-sheet-row.Layer__balance-sheet-row--depth-1:not(.Layer__balance-sheet-row--display-children-true) {
2446
- background-color: var(--color-base-50);
2447
- }
2448
- .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 {
2449
- padding-left: calc(50px - var(--spacing-sm));
2450
- }
2451
- .Layer__balance-sheet__table .Layer__balance-sheet-row.Layer__balance-sheet-row--depth-1 .Layer__balance-sheet-cell__label {
2452
- padding-left: calc(34px - var(--spacing-sm));
2453
- }
2454
- .Layer__balance-sheet__table .Layer__balance-sheet-row.Layer__balance-sheet-row--depth-1 .Layer__table-cell-content {
2455
- font-size: var(--text-md);
2456
- font-variation-settings: "wght" var(--font-weight-bold);
2457
- color: var(--color-base-700);
2458
- }
2459
- .Layer__balance-sheet__table .Layer__balance-sheet-row.Layer__balance-sheet-row--depth-2:not(.Layer__balance-sheet-row--display-children-true) {
2460
- background-color: var(--color-base-50);
2461
- }
2462
- .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 {
2463
- padding-left: calc(80px - var(--spacing-sm));
2464
- }
2465
- .Layer__balance-sheet__table .Layer__balance-sheet-row.Layer__balance-sheet-row--depth-2 .Layer__balance-sheet-cell__label {
2466
- padding-left: calc(64px - var(--spacing-sm));
2467
- }
2468
- .Layer__balance-sheet__table .Layer__balance-sheet-row.Layer__balance-sheet-row--depth-2 .Layer__table-cell-content {
2469
- font-size: var(--text-md);
2470
- font-weight: 460;
2471
- color: var(--text-color-secondary);
2472
- }
2473
- .Layer__balance-sheet__table .Layer__balance-sheet-row.Layer__balance-sheet-row--depth-3:not(.Layer__balance-sheet-row--display-children-true) {
2474
- background-color: var(--color-base-50);
2475
- }
2476
- .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 {
2477
- padding-left: calc(104px - var(--spacing-sm));
2478
- }
2479
- .Layer__balance-sheet__table .Layer__balance-sheet-row.Layer__balance-sheet-row--depth-3 .Layer__balance-sheet-cell__label {
2480
- padding-left: calc(88px - var(--spacing-sm));
2481
- }
2482
- .Layer__balance-sheet__table .Layer__balance-sheet-row.Layer__balance-sheet-row--depth-3 .Layer__table-cell-content {
2483
- font-size: var(--text-md);
2484
- font-weight: 460;
2485
- color: var(--text-color-secondary);
2486
- }
2487
- .Layer__balance-sheet__table .Layer__balance-sheet-row.Layer__balance-sheet-row--depth-4:not(.Layer__balance-sheet-row--display-children-true) {
2488
- background-color: var(--color-base-50);
2489
- }
2490
- .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 {
2491
- padding-left: calc(130px - var(--spacing-sm));
2492
- }
2493
- .Layer__balance-sheet__table .Layer__balance-sheet-row.Layer__balance-sheet-row--depth-4 .Layer__balance-sheet-cell__label {
2494
- padding-left: calc(114px - var(--spacing-sm));
2495
- }
2496
- .Layer__balance-sheet__table .Layer__balance-sheet-row.Layer__balance-sheet-row--depth-4 .Layer__table-cell-content {
2497
- font-size: var(--text-md);
2498
- font-weight: 460;
2499
- color: var(--text-color-secondary);
2500
- }
2501
- .Layer__balance-sheet__table .Layer__balance-sheet-row.Layer__balance-sheet-row--display-children-true {
2502
- font-weight: bold;
2503
- cursor: pointer;
2504
- }
2505
- .Layer__balance-sheet__table .Layer__balance-sheet-row.Layer__balance-sheet-row--display-children-false {
2506
- font-weight: normal;
2507
- }
2508
- .Layer__balance-sheet__table .Layer__balance-sheet-row.Layer__balance-sheet-row--variant-summation {
2509
- background: var(--color-base-100) !important;
2510
- }
2511
- .Layer__balance-sheet__table .Layer__balance-sheet-row.Layer__balance-sheet-row--variant-summation .Layer__table-cell-content {
2512
- font-size: var(--text-md);
2513
- font-variation-settings: "wght" var(--font-weight-bold);
2514
- color: var(--text-color-primary);
2515
- }
2516
- .Layer__balance-sheet__table .Layer__balance-sheet-row.Layer__balance-sheet-row--expanded svg {
2517
- transform: rotate(0deg);
2518
- }
2519
- .Layer__balance-sheet__table .Layer__table-cell--last {
2520
- text-align: right;
2521
- }
2522
- .Layer__balance-sheet__table .Layer__table-cell__content-wrapper {
2523
- display: flex;
2524
- align-items: center;
2525
- }
2526
- .Layer__balance-sheet__table .Layer__table-cell__content-wrapper .Layer__table__expand-icon {
2527
- margin: 0;
2528
- transition: transform var(--transition-speed);
2529
- transform: rotate(-90deg);
2530
- }
2531
- .Layer__balance-sheet__table .Layer__balance-sheet-cell__label {
2532
- position: relative;
2533
- }
2534
- .Layer__balance-sheet__table .Layer__table-cell__active {
2535
- display: none;
2536
- width: 4px;
2537
- height: 100%;
2538
- position: absolute;
2539
- background: var(--color-base-400);
2540
- left: 0;
2541
- top: 0;
2542
- }
2543
- .Layer__balance-sheet__table .Layer__balance-sheet-row .Layer__table-cell__active {
2544
- display: none;
2545
- }
2546
- .Layer__balance-sheet__table .Layer__balance-sheet-row:not(.Layer__balance-sheet-row--display-children-true) .Layer__table-cell__active {
2547
- display: block;
2548
- }
2549
- .Layer__balance-sheet__table .Layer__balance-sheet-cell__label .Layer__table-cell-content {
2550
- 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);
2551
2601
  }
2552
- .Layer__balance-sheet__table .Layer__balance-sheet-cell__value--positive .Layer__table-cell-content::before {
2553
- 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;
2554
2610
  }
2555
- .Layer__balance-sheet__table .Layer__balance-sheet-cell__value--negative .Layer__table-cell-content::before {
2556
- content: "-$";
2611
+ .Layer__balance-sheet .Layer__balance-sheet__title {
2612
+ display: inline;
2613
+ flex: 1;
2614
+ font-size: var(--text-heading);
2615
+ margin: 0;
2557
2616
  }
2558
2617
  .Layer__statement-of-cash-flow {
2559
2618
  border: 1px solid var(--border-color);
@@ -2572,9 +2631,6 @@
2572
2631
  "cv08" on,
2573
2632
  "ss03" on;
2574
2633
  }
2575
- .Layer__statement-of-cash-flow tbody .Layer__table__empty-row:first-child {
2576
- display: none;
2577
- }
2578
2634
  .Layer__statement-of-cash-flow .Layer__statement-of-cash-flow__title {
2579
2635
  display: inline;
2580
2636
  flex: 1;
@@ -2601,14 +2657,6 @@
2601
2657
  gap: var(--spacing-xs);
2602
2658
  }
2603
2659
  }
2604
- @container (min-width: 1400px) {
2605
- .Layer__statement-of-cash-flow .Layer__table tr td:first-child .Layer__table-cell-content,
2606
- .Layer__statement-of-cash-flow .Layer__table tr td:last-child .Layer__table-cell-content,
2607
- .Layer__statement-of-cash-flow .Layer__table tr th:first-child.Layer__table-header,
2608
- .Layer__statement-of-cash-flow .Layer__table tr th:last-child.Layer__table-header {
2609
- padding-left: 0;
2610
- }
2611
- }
2612
2660
  .Layer__statement-of-cash-flow__header {
2613
2661
  display: flex;
2614
2662
  flex: 1;
@@ -2629,126 +2677,6 @@
2629
2677
  flex-direction: row;
2630
2678
  gap: var(--spacing-xs);
2631
2679
  }
2632
- .Layer__statement-of-cash-flow__table {
2633
- width: 100%;
2634
- border-collapse: collapse;
2635
- }
2636
- .Layer__statement-of-cash-flow__table .Layer__statement-of-cash-flow-row {
2637
- font-size: 1em;
2638
- height: 52px;
2639
- }
2640
- .Layer__statement-of-cash-flow__table .Layer__statement-of-cash-flow-row .Layer__statement-of-cash-flow-cell__value .Layer__table-cell-content {
2641
- justify-content: flex-end;
2642
- }
2643
- .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 {
2644
- padding-left: 16px;
2645
- }
2646
- .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 {
2647
- font-size: var(--text-lg);
2648
- font-weight: 540;
2649
- color: var(--text-color-primary);
2650
- }
2651
- .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 {
2652
- font-size: var(--text-md);
2653
- }
2654
- .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) {
2655
- background-color: var(--color-base-50);
2656
- }
2657
- .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 {
2658
- padding-left: calc(50px - var(--spacing-sm));
2659
- }
2660
- .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 {
2661
- padding-left: calc(34px - var(--spacing-sm));
2662
- }
2663
- .Layer__statement-of-cash-flow__table .Layer__statement-of-cash-flow-row.Layer__statement-of-cash-flow-row--depth-1 .Layer__table-cell-content {
2664
- font-size: var(--text-md);
2665
- font-variation-settings: "wght" var(--font-weight-bold);
2666
- color: var(--color-base-700);
2667
- }
2668
- .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) {
2669
- background-color: var(--color-base-50);
2670
- }
2671
- .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 {
2672
- padding-left: calc(80px - var(--spacing-sm));
2673
- }
2674
- .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 {
2675
- padding-left: calc(64px - var(--spacing-sm));
2676
- }
2677
- .Layer__statement-of-cash-flow__table .Layer__statement-of-cash-flow-row.Layer__statement-of-cash-flow-row--depth-2 .Layer__table-cell-content {
2678
- font-size: var(--text-md);
2679
- font-weight: 460;
2680
- color: var(--text-color-secondary);
2681
- }
2682
- .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) {
2683
- background-color: var(--color-base-50);
2684
- }
2685
- .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 {
2686
- padding-left: calc(104px - var(--spacing-sm));
2687
- }
2688
- .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 {
2689
- padding-left: calc(88px - var(--spacing-sm));
2690
- }
2691
- .Layer__statement-of-cash-flow__table .Layer__statement-of-cash-flow-row.Layer__statement-of-cash-flow-row--depth-3 .Layer__table-cell-content {
2692
- font-size: var(--text-md);
2693
- font-weight: 460;
2694
- color: var(--text-color-secondary);
2695
- }
2696
- .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) {
2697
- background-color: var(--color-base-50);
2698
- }
2699
- .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 {
2700
- padding-left: calc(130px - var(--spacing-sm));
2701
- }
2702
- .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 {
2703
- padding-left: calc(114px - var(--spacing-sm));
2704
- }
2705
- .Layer__statement-of-cash-flow__table .Layer__statement-of-cash-flow-row.Layer__statement-of-cash-flow-row--depth-4 .Layer__table-cell-content {
2706
- font-size: var(--text-md);
2707
- font-weight: 460;
2708
- color: var(--text-color-secondary);
2709
- }
2710
- .Layer__statement-of-cash-flow__table .Layer__statement-of-cash-flow-row.Layer__statement-of-cash-flow-row--display-children-true {
2711
- font-weight: bold;
2712
- cursor: pointer;
2713
- }
2714
- .Layer__statement-of-cash-flow__table .Layer__statement-of-cash-flow-row.Layer__statement-of-cash-flow-row--display-children-false {
2715
- font-weight: normal;
2716
- }
2717
- .Layer__statement-of-cash-flow__table .Layer__statement-of-cash-flow-row.Layer__statement-of-cash-flow-row--variant-summation {
2718
- background: var(--color-base-100);
2719
- }
2720
- .Layer__statement-of-cash-flow__table .Layer__statement-of-cash-flow-row.Layer__statement-of-cash-flow-row--variant-summation .Layer__table-cell-content {
2721
- font-size: var(--text-md);
2722
- font-variation-settings: "wght" var(--font-weight-bold);
2723
- color: var(--text-color-primary);
2724
- }
2725
- .Layer__statement-of-cash-flow__table .Layer__statement-of-cash-flow-row.Layer__statement-of-cash-flow-row--expanded svg {
2726
- transform: rotate(0deg);
2727
- }
2728
- .Layer__statement-of-cash-flow__table .Layer__table-cell--last {
2729
- text-align: right;
2730
- }
2731
- .Layer__statement-of-cash-flow__table .Layer__table-cell__content-wrapper {
2732
- display: flex;
2733
- align-items: center;
2734
- }
2735
- .Layer__statement-of-cash-flow__table .Layer__table-cell__content-wrapper .Layer__table__expand-icon {
2736
- margin: 0;
2737
- transition: transform var(--transition-speed);
2738
- transform: rotate(-90deg);
2739
- }
2740
- .Layer__statement-of-cash-flow__table .Layer__statement-of-cash-flow-cell__label {
2741
- position: relative;
2742
- }
2743
- .Layer__statement-of-cash-flow__table .Layer__statement-of-cash-flow-cell__label .Layer__table-cell-content {
2744
- padding-left: 0;
2745
- }
2746
- .Layer__statement-of-cash-flow__table .Layer__statement-of-cash-flow-cell__value--positive .Layer__table-cell-content::before {
2747
- content: "$";
2748
- }
2749
- .Layer__statement-of-cash-flow__table .Layer__statement-of-cash-flow-cell__value--negative .Layer__table-cell-content::before {
2750
- content: "-$";
2751
- }
2752
2680
  .Layer__bank-transactions {
2753
2681
  max-width: var(--max-component-width);
2754
2682
  }
@@ -2760,6 +2688,7 @@
2760
2688
  }
2761
2689
  .Layer__bank-transactions__header {
2762
2690
  position: sticky;
2691
+ z-index: 10;
2763
2692
  left: 0;
2764
2693
  display: flex;
2765
2694
  width: 100%;
@@ -3201,6 +3130,7 @@
3201
3130
  min-width: 150px;
3202
3131
  box-sizing: border-box;
3203
3132
  z-index: 2;
3133
+ text-align: right;
3204
3134
  box-shadow: -8px 0px 20px -2px rgba(255, 255, 255, 0.64);
3205
3135
  }
3206
3136
  .Layer__table.Layer__bank-transactions__table .Layer__table-cell__category-col {
@@ -3214,15 +3144,12 @@
3214
3144
  z-index: 2;
3215
3145
  }
3216
3146
  .Layer__bank-transactions__date-col {
3217
- min-width: 130px;
3218
- width: 130px;
3219
- max-width: 130px;
3147
+ min-width: 140px;
3148
+ width: 140px;
3149
+ max-width: 140px;
3220
3150
  box-sizing: border-box;
3221
3151
  }
3222
3152
  .Layer__bank-transactions__tx-col {
3223
- min-width: 125px;
3224
- width: 180px;
3225
- max-width: 280px;
3226
3153
  box-sizing: border-box;
3227
3154
  }
3228
3155
  .Layer__bank-transactions__tx-text {
@@ -3862,6 +3789,13 @@
3862
3789
  border-right-color: transparent;
3863
3790
  }
3864
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
+ }
3865
3799
  .Layer__bank-transactions__mobile-list {
3866
3800
  padding: 0;
3867
3801
  margin: 0;
@@ -4625,9 +4559,7 @@
4625
4559
  display: flex;
4626
4560
  align-items: center;
4627
4561
  justify-content: flex-end;
4628
- }
4629
- .Layer__journal__form__input-group .Layer__datepicker__time {
4630
- margin-left: var(--spacing-sm);
4562
+ gap: var(--spacing-xs);
4631
4563
  }
4632
4564
  .Layer__journal__form__input-group .Layer__input-label {
4633
4565
  padding: 0;
@@ -4788,6 +4720,8 @@
4788
4720
  min-height: 150px;
4789
4721
  box-sizing: border-box;
4790
4722
  overflow: visible;
4723
+ z-index: 1;
4724
+ max-width: var(--max-component-width);
4791
4725
  }
4792
4726
  .Layer__linked-accounts::-webkit-scrollbar {
4793
4727
  display: none;
@@ -4808,7 +4742,6 @@
4808
4742
  .Layer__linked-accounts__list {
4809
4743
  padding: var(--spacing-md);
4810
4744
  display: flex;
4811
- max-width: 1000px;
4812
4745
  flex-wrap: wrap;
4813
4746
  align-items: stretch;
4814
4747
  gap: var(--spacing-md);
@@ -5070,18 +5003,16 @@
5070
5003
  flex-direction: column;
5071
5004
  height: 100%;
5072
5005
  overflow: hidden;
5073
- padding: var(--spacing-md) var(--spacing-lg);
5074
- gap: var(--spacing-md);
5075
- 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);
5076
5009
  }
5077
5010
  .Layer__tasks-component .Layer__tasks-pending {
5078
5011
  display: flex;
5079
5012
  align-items: center;
5080
5013
  justify-content: space-between;
5081
- padding: var(--spacing-xs) var(--spacing-xs) var(--spacing-xs) var(--spacing-sm);
5014
+ padding: var(--spacing-md) var(--spacing-lg);
5082
5015
  border-radius: 8px;
5083
- background-color: var(--color-base-0);
5084
- box-shadow: 0px 0px 0px 1px var(--color-base-300);
5085
5016
  }
5086
5017
  .Layer__tasks-component .Layer__tasks-pending .Layer__tasks-pending-bar {
5087
5018
  display: flex;
@@ -5089,8 +5020,8 @@
5089
5020
  gap: var(--spacing-xs);
5090
5021
  font-weight: 540;
5091
5022
  padding: var(--spacing-xs);
5092
- border-radius: 8px;
5093
5023
  background-color: var(--color-base-50);
5024
+ border-radius: 8px;
5094
5025
  }
5095
5026
  .Layer__tasks-component .Layer__tasks-pending .Layer__tasks-pending-bar .mini-chart {
5096
5027
  transform: rotate(90deg);
@@ -5106,14 +5037,15 @@
5106
5037
  align-items: center;
5107
5038
  justify-content: flex-start;
5108
5039
  gap: var(--spacing-md);
5040
+ padding: var(--spacing-md) var(--spacing-lg);
5041
+ border-bottom: 1px solid var(--color-base-300);
5109
5042
  }
5110
5043
  .Layer__tasks-component .Layer__tasks-list {
5111
- border-radius: 8px;
5112
5044
  background-color: var(--color-base-0);
5113
5045
  box-shadow: 0px 0px 0px 1px var(--color-base-300);
5114
5046
  }
5115
5047
  .Layer__tasks-component .Layer__tasks-list .Layer__tasks-list-item-wrapper {
5116
- padding: var(--spacing-xs);
5048
+ padding: var(--spacing-2xs);
5117
5049
  }
5118
5050
  .Layer__tasks-component .Layer__tasks-list .Layer__tasks-list-item-wrapper:not(:last-child) {
5119
5051
  border-bottom: 1px solid var(--color-base-300);
@@ -5132,7 +5064,7 @@
5132
5064
  align-items: center;
5133
5065
  justify-content: space-between;
5134
5066
  gap: var(--spacing-xs);
5135
- padding: var(--spacing-sm);
5067
+ padding: var(--spacing-md);
5136
5068
  }
5137
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 {
5138
5070
  display: flex;
@@ -5158,8 +5090,8 @@
5158
5090
  background: var(--color-info-warning-bg);
5159
5091
  }
5160
5092
  .Layer__tasks-component .Layer__tasks-list .Layer__tasks-list-item-wrapper .Layer__tasks-list-item .Layer__tasks-list-item__body {
5161
- padding-right: var(--spacing-sm);
5162
- padding-left: var(--spacing-sm);
5093
+ padding-right: var(--spacing-md);
5094
+ padding-left: var(--spacing-md);
5163
5095
  padding-bottom: 0;
5164
5096
  height: 0;
5165
5097
  opacity: 0;
@@ -5218,10 +5150,30 @@
5218
5150
  .Layer__tasks-component .Layer__tasks__pagination ul {
5219
5151
  margin: 0;
5220
5152
  }
5153
+ .Layer__tasks__expand-icon {
5154
+ transition: transform 150ms ease-out;
5155
+ color: var(--color-base-600);
5156
+ margin-left: -15px;
5157
+ }
5221
5158
  @media screen and (max-width: 400px) {
5222
5159
  .Layer__tasks-component {
5223
5160
  padding: var(--spacing-xs) var(--spacing-sm);
5224
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
+ }
5225
5177
  .Layer__tasks-list .Layer__tasks-list-item-wrapper .Layer__tasks-list-item .Layer__tasks-list-item__head {
5226
5178
  padding: var(--spacing-xs);
5227
5179
  }
@@ -5289,6 +5241,7 @@
5289
5241
  .Layer__panel {
5290
5242
  flex: 1;
5291
5243
  display: flex;
5244
+ align-items: start;
5292
5245
  height: 100%;
5293
5246
  }
5294
5247
  .Layer__panel__content {
@@ -5305,9 +5258,9 @@
5305
5258
  .Layer__panel .Layer__panel__content .Layer__component-header {
5306
5259
  position: sticky;
5307
5260
  top: 0;
5261
+ z-index: auto;
5308
5262
  background: rgba(255, 255, 255, 0.5);
5309
5263
  backdrop-filter: blur(6px);
5310
- z-index: 1;
5311
5264
  border-top-left-radius: var(--border-radius-sm);
5312
5265
  border-top-right-radius: var(--border-radius-sm);
5313
5266
  }
@@ -5317,7 +5270,6 @@
5317
5270
  position: -webkit-sticky;
5318
5271
  position: sticky;
5319
5272
  max-height: 0;
5320
- z-index: 1;
5321
5273
  top: 0;
5322
5274
  overflow-x: hidden;
5323
5275
  transition: max-width 180ms ease-in-out;
@@ -5332,6 +5284,14 @@
5332
5284
  opacity: 0.2;
5333
5285
  transition: opacity 180ms ease-in-out;
5334
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
+ }
5335
5295
  .Layer__panel.Layer__panel--open .Layer__panel__sidebar {
5336
5296
  max-width: 480px;
5337
5297
  margin-left: -1px;
@@ -5375,6 +5335,98 @@
5375
5335
  width: 100%;
5376
5336
  }
5377
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
+ }
5378
5430
  .Layer__pill {
5379
5431
  position: relative;
5380
5432
  background-color: var(--badge-bg-color);
@@ -6256,6 +6308,11 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
6256
6308
  width: calc(25% - 12px);
6257
6309
  height: 56px;
6258
6310
  }
6311
+ .Layer__accounting-overview-profit-and-loss-charts {
6312
+ display: flex;
6313
+ flex-direction: column;
6314
+ gap: var(--spacing-md);
6315
+ }
6259
6316
  .Layer__component.Layer__accounting-overview-profit-and-loss .recharts-responsive-container {
6260
6317
  margin-top: -42px;
6261
6318
  }
@@ -6293,6 +6350,70 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
6293
6350
  margin-top: -12px;
6294
6351
  }
6295
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
+ }
6296
6417
  .Layer__reports .Layer__panel__content {
6297
6418
  border-radius: var(--border-radius-sm);
6298
6419
  }