@syncfusion/ej2-layouts 32.1.25 → 33.1.44

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,6 +1,6 @@
1
1
  /*!
2
2
  * filename: ej2-layouts.min.js
3
- * version : 32.1.25
3
+ * version : 33.1.44
4
4
  * Copyright Syncfusion Inc. 2001 - 2025. All rights reserved.
5
5
  * Use of this code is subject to the terms of our license.
6
6
  * A copy of the current license can be obtained at any time by e-mailing
@@ -1,6 +1,6 @@
1
1
  /*!
2
2
  * filename: ej2-layouts.umd.min.js
3
- * version : 32.1.25
3
+ * version : 33.1.44
4
4
  * Copyright Syncfusion Inc. 2001 - 2025. All rights reserved.
5
5
  * Use of this code is subject to the terms of our license.
6
6
  * A copy of the current license can be obtained at any time by e-mailing
@@ -1,6 +1,6 @@
1
1
  /*!
2
2
  * filename: ej2-layouts.min.js
3
- * version : 32.1.25
3
+ * version : 33.1.44
4
4
  * Copyright Syncfusion Inc. 2001 - 2025. All rights reserved.
5
5
  * Use of this code is subject to the terms of our license.
6
6
  * A copy of the current license can be obtained at any time by e-mailing
@@ -1,6 +1,6 @@
1
1
  /*!
2
2
  * filename: index.d.ts
3
- * version : 32.1.25
3
+ * version : 33.1.44
4
4
  * Copyright Syncfusion Inc. 2001 - 2025. All rights reserved.
5
5
  * Use of this code is subject to the terms of our license.
6
6
  * A copy of the current license can be obtained at any time by e-mailing
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@syncfusion/ej2-layouts",
3
- "version": "32.1.25",
3
+ "version": "33.1.44",
4
4
  "description": "A package of Essential JS 2 layout pure CSS components such as card and avatar. The card is used as small container to show content in specific structure, whereas the avatars are icons, initials or figures representing particular person.",
5
5
  "author": "Syncfusion Inc.",
6
6
  "license": "SEE LICENSE IN license",
@@ -8,7 +8,7 @@
8
8
  "module": "./index.js",
9
9
  "es2015": "./dist/es6/ej2-layouts.es5.js",
10
10
  "dependencies": {
11
- "@syncfusion/ej2-base": "~32.1.24"
11
+ "@syncfusion/ej2-base": "~33.1.44"
12
12
  },
13
13
  "devDependencies": {},
14
14
  "keywords": [
@@ -599,7 +599,6 @@
599
599
  /* stylelint-disable property-no-vendor-prefix */
600
600
  .e-card {
601
601
  -webkit-tap-highlight-color: rgba(var(--color-sf-primary));
602
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.05)), to(rgba(var(--color-sf-primary), 0.05))), rgba(var(--color-sf-surface));
603
602
  background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface));
604
603
  border: none none none;
605
604
  -webkit-box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
@@ -651,14 +650,12 @@
651
650
  }
652
651
  .e-card .e-card-actions .e-card-btn:focus,
653
652
  .e-card .e-card-actions a:focus {
654
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-on-surface), 0.08)), to(rgba(var(--color-sf-on-surface), 0.08))), rgba(var(--color-sf-surface));
655
653
  background: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.08), rgba(var(--color-sf-on-surface), 0.08)), rgba(var(--color-sf-surface));
656
654
  border: calc(var(--e-border) * 0.0625) solid;
657
655
  color: var(--color-sf-on-surface);
658
656
  }
659
657
  .e-card .e-card-actions .e-card-btn:active,
660
658
  .e-card .e-card-actions a:active {
661
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-on-surface), 0.12)), to(rgba(var(--color-sf-on-surface), 0.12))), rgba(var(--color-sf-surface));
662
659
  background: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12)), rgba(var(--color-sf-surface));
663
660
  border: calc(var(--e-border) * 0.0625) solid linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12));
664
661
  color: rgba(var(--color-sf-on-surface));
@@ -605,7 +605,6 @@
605
605
  /* stylelint-disable property-no-vendor-prefix */
606
606
  .e-card {
607
607
  -webkit-tap-highlight-color: rgba(var(--color-sf-primary));
608
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.05)), to(rgba(var(--color-sf-primary), 0.05))), rgba(var(--color-sf-surface));
609
608
  background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface));
610
609
  border: none none none;
611
610
  -webkit-box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
@@ -657,14 +656,12 @@
657
656
  }
658
657
  .e-card .e-card-actions .e-card-btn:focus,
659
658
  .e-card .e-card-actions a:focus {
660
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-on-surface), 0.08)), to(rgba(var(--color-sf-on-surface), 0.08))), rgba(var(--color-sf-surface));
661
659
  background: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.08), rgba(var(--color-sf-on-surface), 0.08)), rgba(var(--color-sf-surface));
662
660
  border: calc(var(--e-border) * 0.0625) solid;
663
661
  color: var(--color-sf-on-surface);
664
662
  }
665
663
  .e-card .e-card-actions .e-card-btn:active,
666
664
  .e-card .e-card-actions a:active {
667
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-on-surface), 0.12)), to(rgba(var(--color-sf-on-surface), 0.12))), rgba(var(--color-sf-surface));
668
665
  background: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12)), rgba(var(--color-sf-surface));
669
666
  border: calc(var(--e-border) * 0.0625) solid linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12));
670
667
  color: rgba(var(--color-sf-on-surface));
@@ -226,7 +226,6 @@
226
226
  /* 15px */
227
227
  /* 16px */
228
228
  .e-dashboardlayout.e-control .e-dashboard-gridline-table {
229
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.05)), to(rgba(var(--color-sf-primary), 0.05))), rgba(var(--color-sf-surface));
230
229
  background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface));
231
230
  border-collapse: collapse;
232
231
  height: 100%;
@@ -469,7 +468,6 @@
469
468
  }
470
469
  .e-dashboardlayout.e-control .e-panel .e-panel-container .e-panel-header {
471
470
  color: rgba(var(--color-sf-on-surface));
472
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.05)), to(rgba(var(--color-sf-primary), 0.05))), rgba(var(--color-sf-surface));
473
471
  background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface));
474
472
  -webkit-box-sizing: border-box;
475
473
  box-sizing: border-box;
@@ -230,7 +230,6 @@
230
230
 
231
231
 
232
232
  .e-dashboardlayout.e-control .e-dashboard-gridline-table {
233
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.05)), to(rgba(var(--color-sf-primary), 0.05))), rgba(var(--color-sf-surface));
234
233
  background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface));
235
234
  border-collapse: collapse;
236
235
  height: 100%;
@@ -475,7 +474,6 @@
475
474
  }
476
475
  .e-dashboardlayout.e-control .e-panel .e-panel-container .e-panel-header {
477
476
  color: rgba(var(--color-sf-on-surface));
478
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.05)), to(rgba(var(--color-sf-primary), 0.05))), rgba(var(--color-sf-surface));
479
477
  background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface));
480
478
  -webkit-box-sizing: border-box;
481
479
  box-sizing: border-box;
@@ -743,7 +743,6 @@
743
743
  /* stylelint-disable property-no-vendor-prefix */
744
744
  .e-card {
745
745
  -webkit-tap-highlight-color: rgba(var(--color-sf-primary));
746
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.05)), to(rgba(var(--color-sf-primary), 0.05))), rgba(var(--color-sf-surface));
747
746
  background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface));
748
747
  border: none none none;
749
748
  -webkit-box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
@@ -795,14 +794,12 @@
795
794
  }
796
795
  .e-card .e-card-actions .e-card-btn:focus,
797
796
  .e-card .e-card-actions a:focus {
798
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-on-surface), 0.08)), to(rgba(var(--color-sf-on-surface), 0.08))), rgba(var(--color-sf-surface));
799
797
  background: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.08), rgba(var(--color-sf-on-surface), 0.08)), rgba(var(--color-sf-surface));
800
798
  border: calc(var(--e-border) * 0.0625) solid;
801
799
  color: var(--color-sf-on-surface);
802
800
  }
803
801
  .e-card .e-card-actions .e-card-btn:active,
804
802
  .e-card .e-card-actions a:active {
805
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-on-surface), 0.12)), to(rgba(var(--color-sf-on-surface), 0.12))), rgba(var(--color-sf-surface));
806
803
  background: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12)), rgba(var(--color-sf-surface));
807
804
  border: calc(var(--e-border) * 0.0625) solid linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12));
808
805
  color: rgba(var(--color-sf-on-surface));
@@ -1717,7 +1714,6 @@
1717
1714
  /* 15px */
1718
1715
  /* 16px */
1719
1716
  .e-dashboardlayout.e-control .e-dashboard-gridline-table {
1720
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.05)), to(rgba(var(--color-sf-primary), 0.05))), rgba(var(--color-sf-surface));
1721
1717
  background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface));
1722
1718
  border-collapse: collapse;
1723
1719
  height: 100%;
@@ -1960,7 +1956,6 @@
1960
1956
  }
1961
1957
  .e-dashboardlayout.e-control .e-panel .e-panel-container .e-panel-header {
1962
1958
  color: rgba(var(--color-sf-on-surface));
1963
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.05)), to(rgba(var(--color-sf-primary), 0.05))), rgba(var(--color-sf-surface));
1964
1959
  background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface));
1965
1960
  -webkit-box-sizing: border-box;
1966
1961
  box-sizing: border-box;
@@ -743,7 +743,6 @@
743
743
  /* stylelint-disable property-no-vendor-prefix */
744
744
  .e-card {
745
745
  -webkit-tap-highlight-color: rgba(var(--color-sf-primary));
746
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.05)), to(rgba(var(--color-sf-primary), 0.05))), rgba(var(--color-sf-surface));
747
746
  background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface));
748
747
  border: none none none;
749
748
  -webkit-box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
@@ -795,14 +794,12 @@
795
794
  }
796
795
  .e-card .e-card-actions .e-card-btn:focus,
797
796
  .e-card .e-card-actions a:focus {
798
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-on-surface), 0.08)), to(rgba(var(--color-sf-on-surface), 0.08))), rgba(var(--color-sf-surface));
799
797
  background: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.08), rgba(var(--color-sf-on-surface), 0.08)), rgba(var(--color-sf-surface));
800
798
  border: calc(var(--e-border) * 0.0625) solid;
801
799
  color: var(--color-sf-on-surface);
802
800
  }
803
801
  .e-card .e-card-actions .e-card-btn:active,
804
802
  .e-card .e-card-actions a:active {
805
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-on-surface), 0.12)), to(rgba(var(--color-sf-on-surface), 0.12))), rgba(var(--color-sf-surface));
806
803
  background: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12)), rgba(var(--color-sf-surface));
807
804
  border: calc(var(--e-border) * 0.0625) solid linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12));
808
805
  color: rgba(var(--color-sf-on-surface));
@@ -2056,7 +2053,6 @@
2056
2053
  /* 15px */
2057
2054
  /* 16px */
2058
2055
  .e-dashboardlayout.e-control .e-dashboard-gridline-table {
2059
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.05)), to(rgba(var(--color-sf-primary), 0.05))), rgba(var(--color-sf-surface));
2060
2056
  background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface));
2061
2057
  border-collapse: collapse;
2062
2058
  height: 100%;
@@ -2299,7 +2295,6 @@
2299
2295
  }
2300
2296
  .e-dashboardlayout.e-control .e-panel .e-panel-container .e-panel-header {
2301
2297
  color: rgba(var(--color-sf-on-surface));
2302
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.05)), to(rgba(var(--color-sf-primary), 0.05))), rgba(var(--color-sf-surface));
2303
2298
  background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface));
2304
2299
  -webkit-box-sizing: border-box;
2305
2300
  box-sizing: border-box;
@@ -751,7 +751,6 @@
751
751
  /* stylelint-disable property-no-vendor-prefix */
752
752
  .e-card {
753
753
  -webkit-tap-highlight-color: rgba(var(--color-sf-primary));
754
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.05)), to(rgba(var(--color-sf-primary), 0.05))), rgba(var(--color-sf-surface));
755
754
  background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface));
756
755
  border: none none none;
757
756
  -webkit-box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
@@ -803,14 +802,12 @@
803
802
  }
804
803
  .e-card .e-card-actions .e-card-btn:focus,
805
804
  .e-card .e-card-actions a:focus {
806
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-on-surface), 0.08)), to(rgba(var(--color-sf-on-surface), 0.08))), rgba(var(--color-sf-surface));
807
805
  background: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.08), rgba(var(--color-sf-on-surface), 0.08)), rgba(var(--color-sf-surface));
808
806
  border: calc(var(--e-border) * 0.0625) solid;
809
807
  color: var(--color-sf-on-surface);
810
808
  }
811
809
  .e-card .e-card-actions .e-card-btn:active,
812
810
  .e-card .e-card-actions a:active {
813
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-on-surface), 0.12)), to(rgba(var(--color-sf-on-surface), 0.12))), rgba(var(--color-sf-surface));
814
811
  background: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12)), rgba(var(--color-sf-surface));
815
812
  border: calc(var(--e-border) * 0.0625) solid linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12));
816
813
  color: rgba(var(--color-sf-on-surface));
@@ -1647,7 +1644,6 @@
1647
1644
 
1648
1645
 
1649
1646
  .e-dashboardlayout.e-control .e-dashboard-gridline-table {
1650
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.05)), to(rgba(var(--color-sf-primary), 0.05))), rgba(var(--color-sf-surface));
1651
1647
  background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface));
1652
1648
  border-collapse: collapse;
1653
1649
  height: 100%;
@@ -1892,7 +1888,6 @@
1892
1888
  }
1893
1889
  .e-dashboardlayout.e-control .e-panel .e-panel-container .e-panel-header {
1894
1890
  color: rgba(var(--color-sf-on-surface));
1895
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.05)), to(rgba(var(--color-sf-primary), 0.05))), rgba(var(--color-sf-surface));
1896
1891
  background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface));
1897
1892
  -webkit-box-sizing: border-box;
1898
1893
  box-sizing: border-box;
@@ -751,7 +751,6 @@
751
751
  /* stylelint-disable property-no-vendor-prefix */
752
752
  .e-card {
753
753
  -webkit-tap-highlight-color: rgba(var(--color-sf-primary));
754
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.05)), to(rgba(var(--color-sf-primary), 0.05))), rgba(var(--color-sf-surface));
755
754
  background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface));
756
755
  border: none none none;
757
756
  -webkit-box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
@@ -803,14 +802,12 @@
803
802
  }
804
803
  .e-card .e-card-actions .e-card-btn:focus,
805
804
  .e-card .e-card-actions a:focus {
806
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-on-surface), 0.08)), to(rgba(var(--color-sf-on-surface), 0.08))), rgba(var(--color-sf-surface));
807
805
  background: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.08), rgba(var(--color-sf-on-surface), 0.08)), rgba(var(--color-sf-surface));
808
806
  border: calc(var(--e-border) * 0.0625) solid;
809
807
  color: var(--color-sf-on-surface);
810
808
  }
811
809
  .e-card .e-card-actions .e-card-btn:active,
812
810
  .e-card .e-card-actions a:active {
813
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-on-surface), 0.12)), to(rgba(var(--color-sf-on-surface), 0.12))), rgba(var(--color-sf-surface));
814
811
  background: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12)), rgba(var(--color-sf-surface));
815
812
  border: calc(var(--e-border) * 0.0625) solid linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12));
816
813
  color: rgba(var(--color-sf-on-surface));
@@ -1990,7 +1987,6 @@
1990
1987
 
1991
1988
 
1992
1989
  .e-dashboardlayout.e-control .e-dashboard-gridline-table {
1993
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.05)), to(rgba(var(--color-sf-primary), 0.05))), rgba(var(--color-sf-surface));
1994
1990
  background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface));
1995
1991
  border-collapse: collapse;
1996
1992
  height: 100%;
@@ -2235,7 +2231,6 @@
2235
2231
  }
2236
2232
  .e-dashboardlayout.e-control .e-panel .e-panel-container .e-panel-header {
2237
2233
  color: rgba(var(--color-sf-on-surface));
2238
- background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.05)), to(rgba(var(--color-sf-primary), 0.05))), rgba(var(--color-sf-surface));
2239
2234
  background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface));
2240
2235
  -webkit-box-sizing: border-box;
2241
2236
  box-sizing: border-box;