beercss 3.3.4 → 3.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (50) hide show
  1. package/README.md +13 -13
  2. package/dist/cdn/beer.min.css +1 -1
  3. package/dist/cdn/beer.min.js +1 -1
  4. package/dist/cdn/material-symbols-outlined.woff2 +0 -0
  5. package/dist/cdn/material-symbols-rounded.woff2 +0 -0
  6. package/dist/cdn/material-symbols-sharp.woff2 +0 -0
  7. package/package.json +4 -2
  8. package/src/cdn/beer.ts +43 -14
  9. package/src/cdn/elements/badges.css +81 -44
  10. package/src/cdn/elements/buttons.css +15 -15
  11. package/src/cdn/elements/cards.css +5 -5
  12. package/src/cdn/elements/chips.css +6 -6
  13. package/src/cdn/elements/containers.css +21 -21
  14. package/src/cdn/elements/dialogs.css +91 -63
  15. package/src/cdn/elements/fields.css +157 -142
  16. package/src/cdn/elements/grids.css +1 -1
  17. package/src/cdn/elements/icons.css +11 -11
  18. package/src/cdn/elements/layouts.css +19 -19
  19. package/src/cdn/elements/media.css +42 -42
  20. package/src/cdn/elements/menus.css +22 -22
  21. package/src/cdn/elements/navigations.css +42 -46
  22. package/src/cdn/elements/overlays.css +5 -5
  23. package/src/cdn/elements/pages.css +8 -0
  24. package/src/cdn/elements/progress.css +25 -25
  25. package/src/cdn/elements/selections.css +36 -26
  26. package/src/cdn/elements/sliders.css +35 -27
  27. package/src/cdn/elements/snackbars.css +25 -15
  28. package/src/cdn/elements/tables.css +5 -5
  29. package/src/cdn/elements/tabs.css +11 -11
  30. package/src/cdn/elements/tooltips.css +80 -32
  31. package/src/cdn/helpers/alignments.css +2 -2
  32. package/src/cdn/helpers/blurs.css +1 -1
  33. package/src/cdn/helpers/directions.css +10 -10
  34. package/src/cdn/helpers/dividers.css +2 -2
  35. package/src/cdn/helpers/forms.css +21 -29
  36. package/src/cdn/helpers/margins.css +4 -4
  37. package/src/cdn/helpers/paddings.css +4 -4
  38. package/src/cdn/helpers/positions.css +14 -6
  39. package/src/cdn/helpers/reset.css +9 -4
  40. package/src/cdn/helpers/responsive.css +2 -2
  41. package/src/cdn/helpers/sizes.css +9 -9
  42. package/src/cdn/helpers/spaces.css +4 -4
  43. package/src/cdn/helpers/theme.css +40 -1
  44. package/src/cdn/helpers/typography.css +2 -2
  45. package/src/cdn/helpers/waves.css +8 -8
  46. package/src/cdn/material-symbols-outlined.woff2 +0 -0
  47. package/src/cdn/material-symbols-rounded.woff2 +0 -0
  48. package/src/cdn/material-symbols-sharp.woff2 +0 -0
  49. package/src/cdn/settings/dark.css +8 -2
  50. package/src/cdn/settings/light.css +8 -2
package/README.md CHANGED
@@ -110,20 +110,20 @@ From jsdelivr.net.
110
110
 
111
111
  ```html
112
112
  // with html
113
- <link href="https://cdn.jsdelivr.net/npm/beercss@3.3.4/dist/cdn/beer.min.css" rel="stylesheet" />
114
- <script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.3.4/dist/cdn/beer.min.js"></script>
115
- <script type="module" src="https://cdn.jsdelivr.net/npm/material-dynamic-colors@1.0.1/dist/cdn/material-dynamic-colors.min.js"></script>
113
+ <link href="https://cdn.jsdelivr.net/npm/beercss@3.4.0/dist/cdn/beer.min.css" rel="stylesheet" />
114
+ <script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.4.0/dist/cdn/beer.min.js"></script>
115
+ <script type="module" src="https://cdn.jsdelivr.net/npm/material-dynamic-colors@1.0.5/dist/cdn/material-dynamic-colors.min.js"></script>
116
116
  ```
117
117
 
118
118
  ```css
119
119
  // with css
120
- @import "https://cdn.jsdelivr.net/npm/beercss@3.3.4/dist/cdn/beer.min.css";
120
+ @import "https://cdn.jsdelivr.net/npm/beercss@3.4.0/dist/cdn/beer.min.css";
121
121
  ```
122
122
 
123
123
  ```js
124
124
  // with javascript
125
- import "https://cdn.jsdelivr.net/npm/beercss@3.3.4/dist/cdn/beer.min.js";
126
- import "https://cdn.jsdelivr.net/npm/material-dynamic-colors@1.0.1/dist/cdn/material-dynamic-colors.min.js";
125
+ import "https://cdn.jsdelivr.net/npm/beercss@3.4.0/dist/cdn/beer.min.js";
126
+ import "https://cdn.jsdelivr.net/npm/material-dynamic-colors@1.0.5/dist/cdn/material-dynamic-colors.min.js";
127
127
  ```
128
128
 
129
129
  ### NPM
@@ -180,9 +180,9 @@ You can use this html to setup your project. See on [Codepen](https://codepen.io
180
180
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
181
181
  <meta name="google" content="notranslate">
182
182
  <title>Hello world</title>
183
- <link href="https://cdn.jsdelivr.net/npm/beercss@3.3.4/dist/cdn/beer.min.css" rel="stylesheet">
184
- <script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.3.4/dist/cdn/beer.min.js"></script>
185
- <script type="module" src="https://cdn.jsdelivr.net/npm/material-dynamic-colors@1.0.1/dist/cdn/material-dynamic-colors.min.js"></script>
183
+ <link href="https://cdn.jsdelivr.net/npm/beercss@3.4.0/dist/cdn/beer.min.css" rel="stylesheet">
184
+ <script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.4.0/dist/cdn/beer.min.js"></script>
185
+ <script type="module" src="https://cdn.jsdelivr.net/npm/material-dynamic-colors@1.0.5/dist/cdn/material-dynamic-colors.min.js"></script>
186
186
  </head>
187
187
  <body class="light">
188
188
  <nav class="left m l">
@@ -204,7 +204,7 @@ You can use this html to setup your project. See on [Codepen](https://codepen.io
204
204
  <div>More</div>
205
205
  </a>
206
206
  </nav>
207
-
207
+
208
208
  <nav class="bottom s">
209
209
  <a>
210
210
  <i>home</i>
@@ -219,7 +219,7 @@ You can use this html to setup your project. See on [Codepen](https://codepen.io
219
219
  <i>more_vert</i>
220
220
  </a>
221
221
  </nav>
222
-
222
+
223
223
  <main class="responsive">
224
224
  <img src="https://www.beercss.com/beer-and-woman.jpg" class="responsive round">
225
225
  <h3>Welcome</h3>
@@ -235,7 +235,7 @@ You can use this html to setup your project. See on [Codepen](https://codepen.io
235
235
 
236
236
  Complete documentation and examples available at:
237
237
 
238
- - **[Documentation](https://github.com/beercss/beercss/blob/main/docs/INDEX.md)**
238
+ - **[Documentation](docs/INDEX.md)**
239
239
  - **[Codepen](https://codepen.io/collection/XydYMB)**
240
240
  - **[Homepage](https://www.beercss.com)**
241
241
 
@@ -243,7 +243,7 @@ Complete documentation and examples available at:
243
243
 
244
244
  Hi! We are really excited that you are interested in contributing to Beer CSS! Before submitting your contribution, please make sure to take a moment and read through the following guidelines:
245
245
 
246
- https://github.com/beercss/beercss/blob/main/CONTRIBUTING.md
246
+ [Beer CSS Contributing Guidelines](CONTRIBUTING.md)
247
247
 
248
248
  ## License
249
249
 
package/dist/cdn/beer.min.css CHANGED
@@ -1 +1 @@
1
- :root{--size: 16px;--font: Inter, Roboto, "Helvetica Neue", "Arial Nova", "Nimbus Sans", Arial, sans-serif;--font-icon: "Material Symbols Outlined";--speed1: .1s;--speed2: .2s;--speed3: .3s;--speed4: .4s}:root,body.light{--primary: #6750a4;--on-primary: #ffffff;--primary-container: #e9ddff;--on-primary-container: #22005d;--secondary: #625b71;--on-secondary: #ffffff;--secondary-container: #e8def8;--on-secondary-container: #1e192b;--tertiary: #7e5260;--on-tertiary: #ffffff;--tertiary-container: #ffd9e3;--on-tertiary-container: #31101d;--error: #ba1a1a;--on-error: #ffffff;--error-container: #ffdad6;--on-error-container: #410002;--background: #fffbff;--on-background: #1c1b1e;--surface: #fffbff;--on-surface: #1c1b1e;--surface-variant: #e7e0eb;--on-surface-variant: #49454e;--outline: #7a757f;--outline-variant: #cac4cf;--shadow: #000000;--scrim: #000000;--inverse-surface: #313033;--inverse-on-surface: #f4eff4;--inverse-primary: #cfbcff;--body: #FFF;--overlay: rgb(0 0 0 / .5);--active: rgb(0 0 0 / .1);--elevate1: 0 .125rem .125rem 0 rgb(0 0 0 / .32);--elevate2: 0 .25rem .5rem 0 rgb(0 0 0 / .4);--elevate3: 0 .375rem .75rem 0 rgb(0 0 0 / .48)}body.dark{--primary: #cfbcff;--on-primary: #381e72;--primary-container: #4f378a;--on-primary-container: #e9ddff;--secondary: #cbc2db;--on-secondary: #332d41;--secondary-container: #4a4458;--on-secondary-container: #e8def8;--tertiary: #efb8c8;--on-tertiary: #4a2532;--tertiary-container: #633b48;--on-tertiary-container: #ffd9e3;--error: #ffb4ab;--on-error: #690005;--error-container: #93000a;--on-error-container: #ffb4ab;--background: #1c1b1e;--on-background: #e6e1e6;--surface: #1c1b1e;--on-surface: #e6e1e6;--surface-variant: #49454e;--on-surface-variant: #cac4cf;--outline: #948f99;--outline-variant: #49454e;--shadow: #000000;--scrim: #000000;--inverse-surface: #e6e1e6;--inverse-on-surface: #313033;--inverse-primary: #6750a4;--body: #000;--overlay: rgb(0 0 0 / .5);--active: rgb(255 255 255 / .2);--elevate1: 0 .125rem .125rem 0 rgb(0 0 0 / .32);--elevate2: 0 .25rem .5rem 0 rgb(0 0 0 / .4);--elevate3: 0 .375rem .75rem 0 rgb(0 0 0 / .48)}@font-face{font-family:Material Symbols Outlined;font-style:normal;font-weight:400;font-display:swap;src:url(material-symbols-outlined.woff2) format("woff2")}@font-face{font-family:Material Symbols Rounded;font-style:normal;font-weight:400;font-display:swap;src:url(material-symbols-rounded.woff2) format("woff2")}@font-face{font-family:Material Symbols Sharp;font-style:normal;font-weight:400;font-display:swap;src:url(material-symbols-sharp.woff2) format("woff2")}*{-webkit-tap-highlight-color:transparent;position:relative;vertical-align:middle;color:inherit;margin:0;padding:0;border-radius:inherit;box-sizing:border-box}body{color:var(--on-background);background-color:var(--body);overflow-x:hidden}label{font-size:.75rem;vertical-align:baseline}a,b,i,span{vertical-align:bottom}a,button,.button{cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;border:none;font-family:inherit;outline:inherit;justify-content:center}a,button,.button,i,label{user-select:none}body *::-webkit-scrollbar,body *::-webkit-scrollbar-thumb,body *::-webkit-scrollbar-button{background:none;width:.4rem;height:.4rem}body *:is(:hover,:focus)::-webkit-scrollbar-thumb{background:var(--outline);border-radius:1rem}.primary{background-color:var(--primary)!important;color:var(--on-primary)!important}.primary-text{color:var(--primary)!important}.primary-border{border-color:var(--primary)!important}.primary-container{background-color:var(--primary-container)!important;color:var(--on-primary-container)!important}.secondary{background-color:var(--secondary)!important;color:var(--on-secondary)!important}.secondary-text{color:var(--secondary)!important}.secondary-border{border-color:var(--secondary)!important}.secondary-container{background-color:var(--secondary-container)!important;color:var(--on-secondary-container)!important}.tertiary{background-color:var(--tertiary)!important;color:var(--on-tertiary)!important}.tertiary-text{color:var(--tertiary)!important}.tertiary-border{border-color:var(--tertiary)!important}.tertiary-container{background-color:var(--tertiary-container)!important;color:var(--on-tertiary-container)!important}.error{background-color:var(--error)!important;color:var(--on-error)!important}.error-text{color:var(--error)!important}.error-border{border-color:var(--error)!important}.error-container{background-color:var(--error-container)!important;color:var(--on-error-container)!important}.background{background-color:var(--background)!important;color:var(--on-background)!important}.surface{background-color:var(--surface)!important;color:var(--on-surface)!important}.surface-variant{background-color:var(--surface-variant)!important;color:var(--on-surface-variant)!important}.inverse-surface{background-color:var(--inverse-surface);color:var(--inverse-on-surface)}.inverse-primary{background-color:var(--inverse-primary);color:var(--primary)}.inverse-primary-text{color:var(--inverse-primary)!important}.inverse-primary-border{border-color:var(--inverse-primary)!important}.black{background-color:#000!important}.black-border{border-color:#000!important}.black-text{color:#000!important}.white{background-color:#fff!important}.white-border{border-color:#fff!important}.white-text{color:#fff!important}.transparent{background-color:transparent!important;box-shadow:none!important;color:inherit!important}.transparent-border{border-color:transparent!important}.transparent-text{color:transparent!important}.fill:not(i){background-color:var(--surface-variant)!important;color:var(--on-surface-variant)!important}.middle-align{display:flex;align-items:center!important}.bottom-align{display:flex;align-items:flex-end!important}.top-align{display:flex;align-items:flex-start!important}.left-align{text-align:left;justify-content:flex-start!important}.right-align{text-align:right;justify-content:flex-end!important}.center-align{text-align:center;justify-content:center!important}.red,.red6{background-color:#f44336!important}.red-border{border-color:#f44336!important}.red-text{color:#f44336!important}.red1{background-color:#ffebee!important}.red2{background-color:#ffcdd2!important}.red3{background-color:#ef9a9a!important}.red4{background-color:#e57373!important}.red5{background-color:#ef5350!important}.red7{background-color:#e53935!important}.red8{background-color:#d32f2f!important}.red9{background-color:#c62828!important}.red10{background-color:#b71c1c!important}.pink,.pink6{background-color:#e91e63!important}.pink-border{border-color:#e91e63!important}.pink-text{color:#e91e63!important}.pink1{background-color:#fce4ec!important}.pink2{background-color:#f8bbd0!important}.pink3{background-color:#f48fb1!important}.pink4{background-color:#f06292!important}.pink5{background-color:#ec407a!important}.pink7{background-color:#d81b60!important}.pink8{background-color:#c2185b!important}.pink9{background-color:#ad1457!important}.pink10{background-color:#880e4f!important}.purple,.purple6{background-color:#9c27b0!important}.purple-border{border-color:#9c27b0!important}.purple-text{color:#9c27b0!important}.purple1{background-color:#f3e5f5!important}.purple2{background-color:#e1bee7!important}.purple3{background-color:#ce93d8!important}.purple4{background-color:#ba68c8!important}.purple5{background-color:#ab47bc!important}.purple7{background-color:#8e24aa!important}.purple8{background-color:#7b1fa2!important}.purple9{background-color:#6a1b9a!important}.purple10{background-color:#4a148c!important}.deep-purple,.deep-purple6{background-color:#673ab7!important}.deep-purple-border{border-color:#673ab7!important}.deep-purple-text{color:#673ab7!important}.deep-purple1{background-color:#ede7f6!important}.deep-purple2{background-color:#d1c4e9!important}.deep-purple3{background-color:#b39ddb!important}.deep-purple4{background-color:#9575cd!important}.deep-purple5{background-color:#7e57c2!important}.deep-purple7{background-color:#5e35b1!important}.deep-purple8{background-color:#512da8!important}.deep-purple9{background-color:#4527a0!important}.deep-purple10{background-color:#311b92!important}.indigo,.indigo6{background-color:#3f51b5!important}.indigo-border{border-color:#3f51b5!important}.indigo-text{color:#3f51b5!important}.indigo1{background-color:#e8eaf6!important}.indigo2{background-color:#c5cae9!important}.indigo3{background-color:#9fa8da!important}.indigo4{background-color:#7986cb!important}.indigo5{background-color:#5c6bc0!important}.indigo7{background-color:#3949ab!important}.indigo8{background-color:#303f9f!important}.indigo9{background-color:#283593!important}.indigo10{background-color:#1a237e!important}.blue,.blue6{background-color:#2196f3!important}.blue-border{border-color:#2196f3!important}.blue-text{color:#2196f3!important}.blue1{background-color:#e3f2fd!important}.blue2{background-color:#bbdefb!important}.blue3{background-color:#90caf9!important}.blue4{background-color:#64b5f6!important}.blue5{background-color:#42a5f5!important}.blue7{background-color:#1e88e5!important}.blue8{background-color:#1976d2!important}.blue9{background-color:#1565c0!important}.blue10{background-color:#0d47a1!important}.light-blue,.light-blue6{background-color:#03a9f4!important}.light-blue-border{border-color:#03a9f4!important}.light-blue-text{color:#03a9f4!important}.light-blue1{background-color:#e1f5fe!important}.light-blue2{background-color:#b3e5fc!important}.light-blue3{background-color:#81d4fa!important}.light-blue4{background-color:#4fc3f7!important}.light-blue5{background-color:#29b6f6!important}.light-blue7{background-color:#039be5!important}.light-blue8{background-color:#0288d1!important}.light-blue9{background-color:#0277bd!important}.light-blue10{background-color:#01579b!important}.cyan,.cyan6{background-color:#00bcd4!important}.cyan-border{border-color:#00bcd4!important}.cyan-text{color:#00bcd4!important}.cyan1{background-color:#e0f7fa!important}.cyan2{background-color:#b2ebf2!important}.cyan3{background-color:#80deea!important}.cyan4{background-color:#4dd0e1!important}.cyan5{background-color:#26c6da!important}.cyan7{background-color:#00acc1!important}.cyan8{background-color:#0097a7!important}.cyan9{background-color:#00838f!important}.cyan10{background-color:#006064!important}.teal,.teal6{background-color:#009688!important}.teal-border{border-color:#009688!important}.teal-text{color:#009688!important}.teal1{background-color:#e0f2f1!important}.teal2{background-color:#b2dfdb!important}.teal3{background-color:#80cbc4!important}.teal4{background-color:#4db6ac!important}.teal5{background-color:#26a69a!important}.teal7{background-color:#00897b!important}.teal8{background-color:#00796b!important}.teal9{background-color:#00695c!important}.teal10{background-color:#004d40!important}.green,.green6{background-color:#4caf50!important}.green-border{border-color:#4caf50!important}.green-text{color:#4caf50!important}.green1{background-color:#e8f5e9!important}.green2{background-color:#c8e6c9!important}.green3{background-color:#a5d6a7!important}.green4{background-color:#81c784!important}.green5{background-color:#66bb6a!important}.green7{background-color:#43a047!important}.green8{background-color:#388e3c!important}.green9{background-color:#2e7d32!important}.green10{background-color:#1b5e20!important}.light-green,.light-green6{background-color:#8bc34a!important}.light-green-border{border-color:#8bc34a!important}.light-green-text{color:#8bc34a!important}.light-green1{background-color:#f1f8e9!important}.light-green2{background-color:#dcedc8!important}.light-green3{background-color:#c5e1a5!important}.light-green4{background-color:#aed581!important}.light-green5{background-color:#9ccc65!important}.light-green7{background-color:#7cb342!important}.light-green8{background-color:#689f38!important}.light-green9{background-color:#558b2f!important}.light-green10{background-color:#33691e!important}.lime,.lime6{background-color:#cddc39!important}.lime-border{border-color:#cddc39!important}.lime-text{color:#cddc39!important}.lime1{background-color:#f9fbe7!important}.lime2{background-color:#f0f4c3!important}.lime3{background-color:#e6ee9c!important}.lime4{background-color:#dce775!important}.lime5{background-color:#d4e157!important}.lime7{background-color:#c0ca33!important}.lime8{background-color:#afb42b!important}.lime9{background-color:#9e9d24!important}.lime10{background-color:#827717!important}.yellow,.yellow6{background-color:#ffeb3b!important}.yellow-border{border-color:#ffeb3b!important}.yellow-text{color:#ffeb3b!important}.yellow1{background-color:#fffde7!important}.yellow2{background-color:#fff9c4!important}.yellow3{background-color:#fff59d!important}.yellow4{background-color:#fff176!important}.yellow5{background-color:#ffee58!important}.yellow7{background-color:#fdd835!important}.yellow8{background-color:#fbc02d!important}.yellow9{background-color:#f9a825!important}.yellow10{background-color:#f57f17!important}.amber,.amber6{background-color:#ffc107!important}.amber-border{border-color:#ffc107!important}.amber-text{color:#ffc107!important}.amber1{background-color:#fff8e1!important}.amber2{background-color:#ffecb3!important}.amber3{background-color:#ffe082!important}.amber4{background-color:#ffd54f!important}.amber5{background-color:#ffca28!important}.amber7{background-color:#ffb300!important}.amber8{background-color:#ffa000!important}.amber9{background-color:#ff8f00!important}.amber10{background-color:#ff6f00!important}.orange,.orange6{background-color:#ff9800!important}.orange-border{border-color:#ff9800!important}.orange-text{color:#ff9800!important}.orange1{background-color:#fff3e0!important}.orange2{background-color:#ffe0b2!important}.orange3{background-color:#ffcc80!important}.orange4{background-color:#ffb74d!important}.orange5{background-color:#ffa726!important}.orange7{background-color:#fb8c00!important}.orange8{background-color:#f57c00!important}.orange9{background-color:#ef6c00!important}.orange10{background-color:#e65100!important}.deep-orange,.deep-orange6{background-color:#ff5722!important}.deep-orange-border{border-color:#ff5722!important}.deep-orange-text{color:#ff5722!important}.deep-orange1{background-color:#fbe9e7!important}.deep-orange2{background-color:#ffccbc!important}.deep-orange3{background-color:#ffab91!important}.deep-orange4{background-color:#ff8a65!important}.deep-orange5{background-color:#ff7043!important}.deep-orange7{background-color:#f4511e!important}.deep-orange8{background-color:#e64a19!important}.deep-orange9{background-color:#d84315!important}.deep-orange10{background-color:#bf360c!important}.brown,.brown6{background-color:#795548!important}.brown-border{border-color:#795548!important}.brown-text{color:#795548!important}.brown1{background-color:#efebe9!important}.brown2{background-color:#d7ccc8!important}.brown3{background-color:#bcaaa4!important}.brown4{background-color:#a1887f!important}.brown5{background-color:#8d6e63!important}.brown7{background-color:#6d4c41!important}.brown8{background-color:#5d4037!important}.brown9{background-color:#4e342e!important}.brown10{background-color:#3e2723!important}.blue-grey,.blue-grey6{background-color:#607d8b!important}.blue-grey-border{border-color:#607d8b!important}.blue-grey-text{color:#607d8b!important}.blue-grey1{background-color:#eceff1!important}.blue-grey2{background-color:#cfd8dc!important}.blue-grey3{background-color:#b0bec5!important}.blue-grey4{background-color:#90a4ae!important}.blue-grey5{background-color:#78909c!important}.blue-grey7{background-color:#546e7a!important}.blue-grey8{background-color:#455a64!important}.blue-grey9{background-color:#37474f!important}.blue-grey10{background-color:#263238!important}.grey,.grey6{background-color:#9e9e9e!important}.grey-border{border-color:#9e9e9e!important}.grey-text{color:#9e9e9e!important}.grey1{background-color:#fafafa!important}.grey2{background-color:#f5f5f5!important}.grey3{background-color:#eee!important}.grey4{background-color:#e0e0e0!important}.grey5{background-color:#bdbdbd!important}.grey7{background-color:#757575!important}.grey8{background-color:#616161!important}.grey9{background-color:#424242!important}.grey10{background-color:#212121!important}.horizontal{display:inline-flex;flex-direction:row!important;gap:1rem;width:auto!important;max-width:none!important}.horizontal>*{margin-top:0!important;margin-bottom:0!important}.vertical,.vertical:is(button,.button,.chip){display:inline-flex;flex-direction:column!important;gap:.25rem;height:auto!important;max-height:none!important;padding-top:.5rem;padding-bottom:.5rem}.vertical>*{margin-left:0!important;margin-right:0!important}.divider,.small-divider,.medium-divider,.large-divider{height:.0625rem;background-color:var(--outline);display:block;margin:0!important}.medium-divider{margin:1rem 0!important}.large-divider{margin:1.5rem 0!important}.small-divider{margin:.5rem 0!important}.no-elevate{box-shadow:none!important}.small-elevate,.elevate{box-shadow:var(--elevate1)!important}.medium-elevate{box-shadow:var(--elevate2)!important}.large-elevate{box-shadow:var(--elevate3)!important}.round{border-radius:var(---round)}.small-round,.medium-round,.large-round{border-radius:var(---round)!important}.top-round,.bottom-round,.left-round,.right-round,.medium-round,.round{---round: 2rem}.small-round{---round: .5rem}.large-round{---round: 3.5rem}.no-round,.square{border-radius:0!important}.top-round{border-radius:var(---round) var(---round) 0 0!important}.bottom-round{border-radius:0 0 var(---round) var(---round)!important}.left-round{border-radius:var(---round) 0 0 var(---round)!important}.right-round{border-radius:0 var(---round) var(---round) 0!important}.top-round.left-round{border-radius:var(---round) var(---round) 0!important}.top-round.right-round{border-radius:var(---round) var(---round) var(---round) 0!important}.bottom-round.left-round{border-radius:var(---round) 0 var(---round) var(---round)!important}.bottom-round.right-round{border-radius:0 var(---round) var(---round)!important}.circle{border-radius:50%}:is(button,.button,.chip).circle{border-radius:2.5rem}:is(.circle,.square):not(i,img,video,svg),:is(.circle,.square).chip.medium{height:2.5rem;width:2.5rem;padding:0}:is(.circle,.square)>span{display:none}:is(.circle,.square).small:not(i,img,video,svg),:is(.circle,.square).chip{height:2rem;width:2rem}:is(.circle,.square).large:not(i,img,video,svg){height:3rem;width:3rem}:is(.circle,.square).extra:not(i,img,video,svg){height:3.5rem;width:3.5rem}:is(.circle,.square).round{border-radius:1rem!important}.border:not(table,.field){box-sizing:border-box;border:.0625rem solid var(--outline);background-color:transparent;box-shadow:none}.no-border{border-color:transparent!important}:is(nav,.row,dialog.max,header.fixed,footer.fixed,menu > a,menu.max,table,.tabs):not(.round){border-radius:0}:is(.no-margin,.auto-margin,.tiny-margin,.small-margin,.medium-margin,.margin,.large-margin):not(.left-margin,.right-margin,.top-margin,.bottom-margin,.horizontal-margin,.vertical-margin){margin:var(---margin)!important}.no-margin,.auto-margin,.tiny-margin,.small-margin,.medium-margin,.margin,.large-margin,.left-margin,.right-margin,.top-margin,.bottom-margin,.horizontal-margin,.vertical-margin{---margin: 1rem}.no-margin{---margin: 0}.auto-margin{---margin: auto}.tiny-margin{---margin: .25rem}.small-margin{---margin: .5rem}.large-margin{---margin: 1.5rem}.left-margin,.horizontal-margin{margin-left:var(---margin)!important}.right-margin,.horizontal-margin{margin-right:var(---margin)!important}.top-margin,.vertical-margin{margin-top:var(---margin)!important}.bottom-margin,.vertical-margin{margin-bottom:var(---margin)!important}.no-opacity{opacity:1!important}.opacity{opacity:0!important}.small-opacity{opacity:.75!important}.medium-opacity{opacity:.5!important}.large-opacity{opacity:.25!important}:is(.no-padding,.auto-padding,.tiny-padding,.small-padding,.medium-padding,.padding,.large-padding):not(.left-padding,.right-padding,.top-padding,.bottom-padding,.horizontal-padding,.vertical-padding){padding:var(---padding)!important}.no-padding,.auto-padding,.tiny-padding,.small-padding,.medium-padding,.padding,.large-padding,.left-padding,.right-padding,.top-padding,.bottom-padding,.horizontal-padding,.vertical-padding{---padding: 1rem}.no-padding{---padding: 0}.auto-padding{---padding: auto}.tiny-padding{---padding: .25rem}.small-padding{---padding: .5rem}.large-padding{---padding: 1.5rem}.left-padding,.horizontal-padding{padding-left:var(---padding)!important}.right-padding,.horizontal-padding{padding-right:var(---padding)!important}.top-padding,.vertical-padding{padding-top:var(---padding)!important}.bottom-padding,.vertical-padding{padding-bottom:var(---padding)!important}.front{z-index:10!important}.back{z-index:-10!important}.left{left:0}.right{right:0}.top{top:0}.bottom{bottom:0}.center{left:50%;transform:translate(-50%)}.middle{top:50%;transform:translateY(-50%)}.middle.center{transform:translate(-50%,-50%)}.scroll{overflow:auto}.no-scroll{overflow:hidden}.small-width{width:12rem!important;max-width:100%}.medium-width{width:24rem!important;max-width:100%}.large-width{width:36rem!important;max-width:100%}.small-height{height:12rem!important}.medium-height{height:24rem!important}.large-height{height:36rem!important}.wrap{display:block;white-space:normal}.no-wrap:not(menu){display:flex;white-space:nowrap}.tiny-space:not(nav,.row,.grid,table,.tooltip){height:.5rem}:is(.space,.small-space):not(nav,.row,.grid,table,.tooltip){height:1rem}.medium-space:not(nav,.row,.grid,table,.tooltip){height:2rem}.large-space:not(nav,.row,.grid,table,.tooltip){height:3rem}.responsive{width:-webkit-fill-available;width:-moz-available}@media only screen and (max-width: 600px){.m:not(.s),.l:not(.s),.m.l:not(.s){display:none}}@media only screen and (min-width: 601px) and (max-width: 992px){.s:not(.m),.l:not(.m),.s.l:not(.m){display:none}}@media only screen and (min-width: 993px){.m:not(.l),.s:not(.l),.m.s:not(.l){display:none}}html{font-size:var(--size)}body{font-family:var(--font);font-size:.875rem;line-height:1.25}h1,h2,h3,h4,h5,h6{font-weight:400;display:flex;align-items:center;margin-bottom:.5rem;line-height:normal}*+h1,*+h2,*+h3,*+h4,*+h5,*+h6{margin-top:1rem}h1{font-size:3.5625rem}h2{font-size:2.8125rem}h3{font-size:2.25rem}h4{font-size:2rem}h5{font-size:1.75rem}h6{font-size:1.5rem}h1.small{font-size:3.0625rem}h2.small{font-size:2.3125rem}h3.small{font-size:1.75rem}h4.small{font-size:1.5rem}h5.small{font-size:1.25rem}h6.small{font-size:1rem}h1.large{font-size:4.0625rem}h2.large{font-size:3.3125rem}h3.large{font-size:2.75rem}h4.large{font-size:2.5rem}h5.large{font-size:2.25rem}h6.large{font-size:2rem}.link{color:var(--primary)!important}.inverse-link{color:var(--inverse-primary)!important}.truncate{overflow:hidden;white-space:nowrap!important;text-overflow:ellipsis;flex:inherit}.truncate>*{white-space:nowrap!important}.small-text{font-size:.75rem}.medium-text{font-size:.875rem}.large-text{font-size:1rem}.upper{text-transform:uppercase}.lower{text-transform:lowercase}.capitalize{text-transform:capitalize}.bold{font-weight:700}.overline{text-decoration:line-through}.underline{text-decoration:underline}.italic{font-style:italic}p{margin:.5rem 0}.no-line{line-height:normal}.tiny-line{line-height:1.25}.small-line{line-height:1.5}.medium-line{line-height:1.75}.large-line{line-height:2}.extra-line{line-height:2.25}.wave:after,.chip:after,.wave.light:after,:is(.button,button):after{content:"";position:absolute;top:0;left:0;z-index:1;border-radius:inherit;width:100%;height:100%;background-position:center;background-image:radial-gradient(circle,rgb(255 255 255 / .4) 1%,transparent 1%);opacity:0;transition:none}.wave.dark:after,.wave.row:after,.chip:after,:is(.button,button).none:after,:is(.button,button).border:after,:is(.button,button).transparent:after{background-image:radial-gradient(circle,rgb(150 150 150 / .2) 1%,transparent 1%)}.wave.none:after,:is(.button,button).none:after{top:0;left:-.25rem;padding:0 .25rem}.wave.none:not(.small,.medium,.large,.extra):after,:is(.button,button).none:not(.small,.medium,.large,.extra):after{top:-.25rem;left:-.25rem;padding:.25rem}:is(.wave,.chip,.button,button):is(:focus,:hover):after{background-size:15000%;opacity:1;transition:var(--speed2) background-size linear}:is(.wave,.chip,.button,button):active:after{background-size:5000%;opacity:0;transition:none}.no-wave:after,.no-wave:is(:hover,:active):after{display:none}.badge{display:inline-flex;align-items:center;justify-content:center;position:absolute;font-size:.75rem;text-transform:none;z-index:1;padding:0 .375rem;background-color:var(--error);color:var(--on-error);top:0;left:auto;bottom:auto;right:0;transform:translate(50%,-100%);height:1.25rem;line-height:normal}.badge.none{top:auto;left:auto;bottom:auto;right:auto;transform:none;position:relative;margin:0 .125rem}.badge.top{top:0;left:50%;bottom:auto;right:auto;transform:translate(-50%,-100%)}.badge.bottom{top:auto;left:50%;bottom:0;right:auto;transform:translate(-50%,100%)}.badge.left{top:50%;left:0;bottom:auto;right:auto;transform:translate(-100%,-50%)}.badge.right{top:50%;left:auto;bottom:auto;right:0;transform:translate(100%,-50%)}.badge.top.left{top:0;left:0;bottom:auto;right:auto;transform:translate(-50%,-100%)}.badge.bottom.left{top:auto;left:0;bottom:0;right:auto;transform:translate(-50%,100%)}.badge.top.right{top:0;left:auto;bottom:auto;right:0;transform:translate(50%,-100%)}.badge.bottom.right{top:auto;left:auto;bottom:0;right:0;transform:translate(50%,100%)}.badge.border{border-color:var(--error);color:var(--error)}.badge:is(.circle,.square){padding:0;text-align:center;width:1.25rem;height:1.25rem}.button,button{box-sizing:content-box;display:inline-flex;align-items:center;justify-content:center;height:2.5rem;min-width:2.5rem;font-size:.875rem;font-weight:500;color:var(--on-primary);padding:0 1.5rem;background-color:var(--primary);margin:0 .5rem;border-radius:1.25rem;transition:var(--speed3) transform,var(--speed3) border-radius,var(--speed3) padding;user-select:none;gap:1rem;line-height:normal}:is(button,.button).none{width:auto;height:auto;color:var(--primary);padding:0;background-color:transparent;min-width:auto;min-height:1.5rem}:is(button,.button).small{height:2rem;min-width:2rem;font-size:.875rem;border-radius:1rem}:is(button,.button).large{height:3rem;min-width:3rem;border-radius:1.5rem}:is(.button,button):is(.extra,.extend){height:3.5rem;min-width:3.5rem;font-size:1rem;border-radius:1.75rem}:is(button,.button).border{border-color:var(--outline);color:var(--primary)}.extend>span{display:none}.extend:is(:hover,.active){width:auto;padding:0 1.5rem}.extend:is(:hover,.active)>i+span{display:inherit;margin-left:1.5rem}.extend:is(:hover,.active)>:is(img,svg)+span{display:inherit;margin-left:2.5rem}:is(.button,button):is([disabled]){opacity:.5;cursor:not-allowed}:is(.button):is([disabled]){pointer-events:none}:is(.button,button):is([disabled]):before,:is(.button,button):is([disabled]):after{display:none}:is(.button,button).fill{background-color:var(--secondary-container)!important;color:var(--on-secondary-container)!important}:is(.button,button).vertical{border-radius:2rem}article{box-shadow:var(--elevate1);background-color:var(--surface);color:var(--on-surface);padding:1rem;border-radius:.75rem;display:block;transition:var(--speed3) transform,var(--speed3) border-radius,var(--speed3) padding}*+article{margin-top:1rem}article.small{height:12rem}article.medium{height:20rem}article.large{height:32rem}.chip{box-sizing:content-box;display:inline-flex;align-items:center;justify-content:center;height:2rem;min-width:2rem;font-size:.875rem;font-weight:500;background-color:transparent;border:.0625rem solid var(--outline);color:var(--on-surface-variant);padding:0 1rem;margin:0 .5rem;text-transform:none;border-radius:.5rem;transition:var(--speed3) transform,var(--speed3) border-radius,var(--speed3) padding;user-select:none;gap:1rem;line-height:normal}.chip.medium{height:2.5rem;min-width:2.5rem}.chip.large{height:3rem;min-width:3rem}.chip.fill{background-color:var(--secondary-container)!important;border-color:transparent}.chip.border{border-color:var(--outline)}.chip.round.small{border-radius:1rem}.chip.round{border-radius:1.25rem}.chip.round.large{border-radius:1.5rem}main.responsive{margin:0 auto;max-width:75rem;padding:.5rem;overflow-x:hidden;min-height:100vh}main.responsive.max{max-width:100%}nav.bottom:not(.s,.m,.l)~.responsive:not(header){padding-bottom:5rem}nav.top:not(.s,.m,.l)~.responsive:not(footer){padding-top:5rem}nav.left:not(.s,.m,.l)~.responsive{padding-left:6rem}nav.right:not(.s,.m,.l)~.responsive{padding-right:6rem}@media only screen and (max-width: 600px){nav.s.bottom~.responsive:not(header){padding-bottom:5rem}nav.s.top~.responsive:not(footer){padding-top:5rem}nav.s.left~.responsive{padding-left:6rem}nav.s.right~.responsive{padding-right:6rem}}@media only screen and (min-width: 601px) and (max-width: 992px){nav.m.bottom~.responsive:not(header){padding-bottom:5rem}nav.m.top~.responsive:not(footer){padding-top:5rem}nav.m.left~.responsive{padding-left:6rem}nav.m.right~.responsive{padding-right:6rem}}@media only screen and (min-width: 993px){nav.l.bottom~.responsive:not(header){padding-bottom:5rem}nav.l.top~.responsive:not(footer){padding-top:5rem}nav.l.left~.responsive{padding-left:6rem}nav.l.right~.responsive{padding-right:6rem}}@media only screen and (max-width: 600px){main.responsive{padding-right:.5rem;padding-left:.5rem}}dialog{display:block;border:none;opacity:0;visibility:hidden;position:fixed;box-shadow:var(--elevate2);color:var(--on-surface);background-color:var(--surface);padding:1rem;z-index:100;left:50%;top:10%;min-width:20rem;max-width:100%;max-height:80%;overflow-x:hidden;overflow-y:auto;transition:var(--speed3) all,0s background-color;transform:translate(-50%,-4rem);border-radius:1rem}dialog::backdrop{display:none}dialog.small{width:25%;height:25%}dialog.medium{width:50%;height:50%}dialog.large{width:75%;height:75%}dialog:is(.active,[open]){opacity:1;visibility:visible;transform:translate(-50%)}dialog:is(.active,[open]):is(.left,.right,.top,.bottom,.max){transform:translate(0)}dialog.top{opacity:1;top:0;left:0;right:auto;bottom:auto;height:auto;width:100%;min-width:auto;max-height:100%;transform:translateY(-100%);border-radius:0 0 1rem 1rem}dialog.left{opacity:1;top:0;left:0;right:auto;bottom:auto;width:auto;height:100%;max-height:100%;transform:translate(-100%);border-radius:0 1rem 1rem 0}dialog.right{opacity:1;top:0;left:auto;right:0;bottom:auto;width:auto;height:100%;max-height:100%;transform:translate(100%);border-radius:1rem 0 0 1rem}dialog.bottom{opacity:1;top:auto;left:0;right:auto;bottom:0;height:auto;width:100%;min-width:auto;max-height:100%;transform:translateY(100%);border-radius:1rem 1rem 0 0}dialog.max{top:0;left:0;right:auto;bottom:auto;width:100%;height:100%;max-width:100%;max-height:100%;transform:translateY(4rem)}dialog.small:is(.left,.right){width:20rem}dialog.medium:is(.left,.right){width:32rem}dialog.large:is(.left,.right){width:44rem}dialog.small:is(.top,.bottom){height:16rem}dialog.medium:is(.top,.bottom){height:24rem}dialog.large:is(.top,.bottom){height:32rem}nav>dialog,nav.left>dialog{z-index:0;text-align:left;overflow-y:auto;background-color:inherit;padding:1rem 1rem 1rem 5rem}nav.right>dialog{padding:1rem 5rem 1rem 1rem}nav.top>dialog{padding:5rem 3rem 1rem}nav.bottom>dialog{padding:1rem 3rem 5rem}dialog>a.row:is(:hover,.active){background-color:var(--secondary-container)}dialog>.row{padding:.75rem}summary.none{list-style-type:none}summary.none::-webkit-details-marker{display:none}summary{cursor:pointer}summary:focus{outline:none}.field{height:3rem;margin-bottom:2rem}*+.field{margin-top:1rem}.grid>*>.field{margin-bottom:1rem}.grid>*>.field+.field{margin-top:2rem}.grid.no-space>*>.field+.field{margin-top:1rem}.grid.medium-space>*>.field+.field{margin-top:2.5rem}.grid.large-space>*>.field+.field{margin-top:3rem}.field.small{height:2.5rem}.field.large{height:3.5rem}.field.extra{height:4rem}.field{border-radius:.25rem .25rem 0 0}.field.border{border-radius:.25rem}.field.round.small{border-radius:1.25rem}.field.round{border-radius:1.5rem}.field.round.large{border-radius:1.75rem}.field.round.extra{border-radius:2rem}.field:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-radius:inherit;background-color:inherit}.field.fill:before{background-color:var(--surface-variant);color:var(--on-surface-variant)}.field>:is(i,img,svg,progress,a:not(.helper,.error)){position:absolute;top:50%;left:auto;right:1rem;transform:translateY(-50%);cursor:pointer;z-index:0;width:1.5rem;height:1.5rem}.field>:is(i,img,svg,progress,a:not(.helper,.error)):first-child{left:1rem;right:auto}.field.invalid>i{color:var(--error)}.field>progress.circle{top:calc(50% - .75rem);border-width:.1875rem}.field>a:not(.helper,.error){z-index:10}.field>a>:is(i,img,svg,progress,a:not(.helper,.error)){width:1.5rem;height:1.5rem}.field>select,input[type^=date],input[type^=time],input[type=search]{appearance:none;cursor:pointer}input[type^=date]::-webkit-inner-spin-button,input[type^=date]::-webkit-calendar-picker-indicator,input[type^=time]::-webkit-inner-spin-button,input[type^=time]::-webkit-calendar-picker-indicator{opacity:0;position:absolute;top:0;bottom:0;left:0;right:0;width:100%;height:100%;z-index:-1;cursor:pointer}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button,input[type=number]{appearance:none;-moz-appearance:textfield}input[type=file]{position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;opacity:0;cursor:pointer}input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{display:none}.field>:is(input,textarea,select){border:.0625rem solid transparent;padding:0 .9375rem;font-family:inherit;font-size:1rem;width:100%;height:100%;outline:none;z-index:1;background:none;resize:none}.field>:is(input,textarea,select):focus{border:.125rem solid transparent;padding:0 .875rem}.field.border>:is(input,textarea,select){border-color:var(--outline)}.field.border>:is(input,textarea,select):focus{border-color:var(--primary)}.field.round>:is(input,textarea,select){padding-left:1.4376rem;padding-right:1.4376rem}.field.round>:is(input,textarea,select):focus{padding-left:1.375rem;padding-right:1.375rem}.field.prefix>:is(input,textarea,select){padding-left:2.9375rem}.field.prefix>.slider{margin-left:3.5rem}.field.prefix>:is(input,textarea,select):focus{padding-left:2.875rem}.field.suffix>:is(input,textarea,select){padding-right:2.9375rem}.field.suffix>.slider{margin-right:3.5rem}.field.suffix>:is(input,textarea,select):focus{padding-right:2.875rem}.field:not(.border,.round)>:is(input,textarea,select){border-bottom-color:var(--outline)}.field:not(.border,.round)>:is(input,textarea,select):focus{border-bottom-color:var(--primary)}.field.round:not(.border,.fill)>:is(input,textarea,select),.field.round:not(.border)>:is(input,textarea,select):focus{box-shadow:var(--elevate1)}.field.round:not(.border,.fill)>:is(input,textarea,select):focus{box-shadow:var(--elevate2)}.field.invalid:not(.border,.round)>:is(input,textarea,select),.field.invalid:not(.border,.round)>:is(input,textarea,select):focus{border-bottom-color:var(--error)}.field.invalid.border>:is(input,textarea,select),.field.invalid.border>:is(input,textarea,select):focus{border-color:var(--error)}.field:has(> :disabled){opacity:.5;cursor:not-allowed}.field>:disabled{cursor:not-allowed}.field.small.textarea{height:4.5rem}.field.textarea{height:5.5rem}.field.large.textarea{height:6.5rem}.field.extra.textarea{height:7.5rem}.field>select>option{background-color:var(--surface);color:var(--on-surface)}.field.label>:is(input,select){padding-top:1rem}.field.label.border:not(.fill)>:is(input,select){padding-top:0}.field.label.small>textarea{padding-top:1.125rem}.field.label>textarea{padding-top:1.375rem}.field.label.large>textarea{padding-top:1.625rem}.field.label.extra>textarea{padding-top:1.875rem}.field.label.small>textarea:focus{padding-top:1.0625rem}.field.label>textarea:focus{padding-top:1.3125rem}.field.label.large>textarea:focus{padding-top:1.5625rem}.field.label.extra>textarea:focus{padding-top:1.8125rem}.field.label.border:not(.fill)>textarea{padding-top:.875rem}.field.label.border:not(.fill)>textarea:focus{padding-top:.8125rem}.field.label>label{position:absolute;top:-.5rem;left:1rem;display:flex;width:calc(100% - 5rem);height:4rem;line-height:4rem;font-size:1rem;transition:all .2s;gap:.25rem;white-space:nowrap}.field.label.small>label{height:3.5rem;line-height:3.5rem}.field.label.large>label{height:4.5rem;line-height:4.5rem}.field.label.extra>label{height:5rem;line-height:5rem}.field.label.border.prefix:not(.fill)>:is(label.active,:focus + label,[placeholder]:not(:placeholder-shown) + label,select + label){left:1rem}.field.label.round>label,.field.label.border.prefix.round:not(.fill)>:is(label.active,:focus + label,[placeholder]:not(:placeholder-shown) + label,select + label){left:1.5rem}.field.label.prefix>label{left:3rem}.field.label>:is(label.active,:focus + label,[placeholder]:not(:placeholder-shown) + label,select + label){height:2.5rem;line-height:2.5rem;font-size:.75rem}.field.label.border:not(.fill)>:is(label.active,:focus + label,[placeholder]:not(:placeholder-shown) + label,select + label){height:1rem;line-height:1rem}.field.label.border:not(.fill)>label:after{content:"";display:block;margin-top:.5rem;border-top:.0625rem solid var(--outline);height:1rem;transition:none;flex:auto}.field.label.border:not(.fill)>:focus+label:after{border-top:.125rem solid var(--primary)}.field.label.border:not(.fill)>:is(input,textarea):is(:focus,[placeholder]:not(:placeholder-shown),.active),.field.label.border:not(.fill)>select{clip-path:polygon(-1% -1%,.75rem -1%,.75rem .5rem,calc(100% - 5rem) .5rem,calc(100% - 5rem) -1%,101% -1%,101% 101%,-1% 101%)}.field.label.border.round:not(.fill)>:is(input,textarea):is(:focus,[placeholder]:not(:placeholder-shown),.active),.field.label.border.round:not(.fill)>select{clip-path:polygon(-1% -1%,1.25rem -1%,1.25rem .5rem,calc(100% - 5rem) .5rem,calc(100% - 5rem) -1%,101% -1%,101% 101%,-1% 101%)}.field.label>:focus+label{color:var(--primary)}.field.label.invalid>label,.field.label.invalid>label:after{color:var(--error)!important;border-color:var(--error)!important}.field.label>label>a{height:inherit;line-height:inherit;width:1rem}.field.label>label>a>:is(i,img,svg){height:1rem;line-height:1rem;width:1rem;font-size:1rem}.field>:is(.helper,.error){position:absolute;left:1rem;bottom:0;transform:translateY(100%);font-size:.75rem;background:none!important;padding-top:.125rem}a.helper{color:var(--primary)}.field>.error{color:var(--error)!important}.field.round>:is(.helper,.error){left:1.5rem}.field.invalid>.helper{display:none}table td>.field{margin:0}.grid{---gap: 1rem;display:grid;grid-template-columns:repeat(12,calc(8.33% - var(---gap) + (var(---gap) / 12)));gap:var(---gap)}*+.grid{margin-top:1rem}.grid.no-space{---gap: 0rem}.grid.medium-space{---gap: 1.5rem}.grid.large-space{---gap: 2rem}.s1{grid-area:auto/span 1}.s2{grid-area:auto/span 2}.s3{grid-area:auto/span 3}.s4{grid-area:auto/span 4}.s5{grid-area:auto/span 5}.s6{grid-area:auto/span 6}.s7{grid-area:auto/span 7}.s8{grid-area:auto/span 8}.s9{grid-area:auto/span 9}.s10{grid-area:auto/span 10}.s11{grid-area:auto/span 11}.s12{grid-area:auto/span 12}@media only screen and (min-width: 601px){.m1{grid-area:auto/span 1}.m2{grid-area:auto/span 2}.m3{grid-area:auto/span 3}.m4{grid-area:auto/span 4}.m5{grid-area:auto/span 5}.m6{grid-area:auto/span 6}.m7{grid-area:auto/span 7}.m8{grid-area:auto/span 8}.m9{grid-area:auto/span 9}.m10{grid-area:auto/span 10}.m11{grid-area:auto/span 11}.m12{grid-area:auto/span 12}}@media only screen and (min-width: 993px){.l1{grid-area:auto/span 1}.l2{grid-area:auto/span 2}.l3{grid-area:auto/span 3}.l4{grid-area:auto/span 4}.l5{grid-area:auto/span 5}.l6{grid-area:auto/span 6}.l7{grid-area:auto/span 7}.l8{grid-area:auto/span 8}.l9{grid-area:auto/span 9}.l10{grid-area:auto/span 10}.l11{grid-area:auto/span 11}.l12{grid-area:auto/span 12}}i{---size: 1.5rem;font-family:var(--font-icon);font-weight:400;font-style:normal;font-size:var(---size);letter-spacing:normal;text-transform:none;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:"liga";-webkit-font-smoothing:antialiased;vertical-align:middle;text-align:center;overflow:hidden;width:var(---size);min-width:var(---size);height:var(---size);min-height:var(---size);box-sizing:content-box;line-height:normal}i.tiny{---size: 1rem}.chip>i,i.small{---size: 1.25rem}i.medium{---size: 1.5rem}i.large{---size: 1.75rem}i.extra{---size: 2rem}i.fill,a.row:is(:hover,:focus)>i,.transparent:is(:hover,:focus)>i{font-variation-settings:"FILL" 1}i>:is(img,svg){width:100%;height:100%;background-size:100%;border-radius:inherit;position:absolute;top:0;left:0;padding:inherit}i[class*=fa-]{font-size:calc(var(---size) * .85);line-height:normal;height:auto;min-height:auto}.absolute{position:absolute}.fixed{position:fixed}:is(.absolute,.fixed).left.right{width:auto}:is(.absolute,.fixed).left.right.small{height:20rem}:is(.absolute,.fixed).left.right.medium{height:28rem}:is(.absolute,.fixed).left.right.large{height:44rem}:is(.absolute,.fixed).top.bottom.small{width:20rem}:is(.absolute,.fixed).top.bottom.medium{width:28rem}:is(.absolute,.fixed).top.bottom.large{width:44rem}header,footer{padding:0 1rem;background-color:var(--surface)}:is(header,footer,menu > *).fixed{position:sticky;top:0;bottom:0;left:0;right:0;z-index:12;background-color:inherit}:is(header,footer).fixed:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;margin:0 -.5rem;max-width:100%;background-color:inherit}:is(dialog,menu)>:is(header,footer){padding:0;background-color:inherit}article>:is(header,footer){padding:inherit;padding-left:0;padding-right:0;z-index:11!important}:is(dialog,article,.padding,.medium-padding)>header.fixed{transform:translateY(-1rem)}:is(dialog,article,.padding,.medium-padding)>footer.fixed{transform:translateY(1rem)}.no-padding>:is(header,footer).fixed{transform:none}.small-padding>header.fixed{transform:translateY(-.5rem)}.small-padding>footer.fixed{transform:translateY(.5rem)}.large-padding>header.fixed{transform:translateY(-1.5rem)}.large-padding>footer.fixed{transform:translateY(1.5rem)}svg{fill:currentColor}:is(img,svg,video):is(.small,.medium,.large,.tiny,.extra,.round,.circle,.responsive){object-fit:cover;object-position:center;transition:var(--speed3) transform,var(--speed3) border-radius,var(--speed3) padding;height:3rem;width:3rem}:is(img,svg,video).round{border-radius:.5rem}:is(img,svg,video).tiny{height:2rem;width:2rem}:is(img,svg,video).small{height:2.5rem;width:2.5rem}:is(img,svg,video).large{height:3.5rem;width:3.5rem}:is(img,svg,video).extra{height:4rem;width:4rem}:is(img,svg,video).responsive{width:100%;height:100%;margin:0 auto}:is(button,.button,.chip):not(.transparent)>.responsive{border:.25rem solid transparent}:is(button.small,.button.small,.chip)>.responsive{width:2rem}:is(button,.button,.chip.medium)>.responsive{width:2.5rem}:is(button,.button,.chip).large>.responsive{width:3rem}:is(button,.button,.chip).extra>.responsive{width:3.5rem}:is(img,svg,video).responsive.tiny{width:100%;height:4rem}:is(img,svg,video).responsive.small{width:100%;height:8rem}:is(img,svg,video).responsive.medium{width:100%;height:12rem}:is(img,svg,video).responsive.large{width:100%;height:16rem}:is(img,svg,video).responsive.extra{width:100%;height:20rem}:is(img,svg,video).responsive.round{border-radius:2rem}:is(img,svg,video).empty-state{max-width:100%;width:24rem}:is(button,.button,.chip,.field)>:is(img,svg):not(.responsive,.tiny,.small,.medium,.large,.extra),:is(.tabs) :is(img,svg):not(.responsive,.tiny,.small,.medium,.large,.extra){min-width:1.5rem;max-width:1.5rem;min-height:1.5rem;max-height:1.5rem}:is(button,.button,.chip)>:is(i,img,svg),:is(button,.button,.chip)>.responsive{margin:0 -.5rem}:is(button,.button)>.responsive{margin-left:-1.5rem}:is(button,.button)>span+.responsive{margin-left:-.5rem;margin-right:-1.5rem}.chip>.responsive{margin-left:-1rem}.chip>span+.responsive{margin-left:-.5rem;margin-right:-1rem}:is(.circle,.square)>.responsive{margin:0}.extend>:is(.responsive,i){margin:0;position:absolute;left:1rem;z-index:1}.extend>.responsive{left:0;width:3.5rem}.extend.border>.responsive{width:3.375rem}menu{opacity:0;visibility:hidden;position:absolute;box-shadow:var(--elevate2);background-color:var(--surface);z-index:11;top:auto;bottom:0;left:0;right:auto;width:100%;max-height:50vh;max-width:none!important;overflow-x:hidden;overflow-y:auto;font-size:.875rem;font-weight:400;text-transform:none;color:var(--on-surface);line-height:normal;text-align:left;border-radius:.25rem;transform:scale(.8) translateY(120%);transition:var(--speed2) all,0s background-color}menu.no-wrap{width:max-content;white-space:nowrap!important}menu.active,menu:not([data-ui]):active,:not([data-ui]):focus-within>menu{opacity:1;visibility:visible;transform:scale(1) translateY(100%)}menu.left{left:auto;right:0}menu *{white-space:inherit!important}menu>a{padding:.75rem 1rem}menu>a:not(.row){display:block}menu>a:is(:hover,:focus,.active){background-color:var(--active)}menu.min{top:0;bottom:auto;transform:none!important;border-radius:inherit}menu.max{position:fixed;top:0;left:0;bottom:0;right:0;height:100%;max-height:none;min-height:auto;z-index:100;transform:none!important}menu.no-wrap:is(.min,.max){min-width:16rem}nav,.row{display:flex;align-items:center;justify-content:flex-start;white-space:nowrap;gap:1rem}:not(.divider,.small-divider,.medium-divider,.large-divider)+nav:not(.left,.right,.top,.bottom),:not(.divider,.small-divider,.medium-divider,.large-divider)+.row:not(a){margin-top:1rem}:is(nav,.row)>*,:is(nav,.row)>:not(.tooltip,menu)>*{margin-top:0;margin-bottom:0}nav>*,.row>*{margin:0!important;white-space:normal;flex:none}:is(nav,.row).no-space{gap:0}:is(nav,.row).no-space>.border+.border{border-left:0}:is(nav,.row).medium-space{gap:1.5rem}:is(nav,.row).large-space{gap:2rem}nav>.max,.row>.max{flex:auto}nav.wrap,.row.wrap{display:flex;flex-wrap:wrap}header>:is(nav,.row){min-height:4rem}footer>:is(nav,.row){min-height:5rem}:is(nav,.row)>.border.no-margin+.border.no-margin{border-left:0}a.row.wave{padding:.75rem}nav:is(.left,.right,.top,.bottom){display:flex;align-items:center;justify-content:center;flex-direction:column;border:0;position:fixed;color:var(--on-surface);background-color:var(--surface);transform:none;z-index:100;left:0;top:0;bottom:0;right:0;height:auto;width:auto;text-align:center;padding:.5rem}nav.left,nav.right{width:5rem}nav:is(.top,.bottom){height:5rem}nav.top{bottom:auto;justify-content:center;flex-direction:row}nav.left{right:auto;justify-content:flex-start;flex-direction:column}nav.right{left:auto;justify-content:flex-start;flex-direction:column}nav.bottom{top:auto;justify-content:center;flex-direction:row}nav:is(.left,.right,.top,.bottom)>a:not(button,.button,.chip,img,video,svg){min-width:3.5rem;min-height:3.5rem;text-align:center;display:flex;z-index:101;flex-direction:column}nav:is(.left,.right)>a:not(button,.button,.chip,img,video,svg){width:auto}nav:is(.top,.bottom)>a:not(button,.button,.chip,img,video,svg){height:auto;width:3.5rem}nav:is(.left,.right,.top,.bottom):before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background-color:inherit;z-index:101;border-radius:inherit}nav:is(.left,.right,.top,.bottom)>:not(dialog,.overlay){z-index:101}nav:is(.left,.right,.top,.bottom)>a:not(button,.button,.chip)>i{padding:.25rem;border-radius:2rem;transition:var(--speed1) padding linear;margin:0 auto}nav:is(.left,.right,.top,.bottom)>a:not(button,.button,.chip):is(:hover,:focus,.active)>i{background-color:var(--secondary-container);color:var(--on-secondary-container);padding:.25rem 1rem;font-variation-settings:"FILL" 1}nav.left>dialog{padding-left:5.5rem}nav.right>dialog{padding-right:5.5rem}nav.top>dialog{padding-top:5.5rem}nav.bottom>dialog{padding-bottom:5.5rem}nav.left-align,nav.top-align{justify-content:flex-start}nav.right-align,nav.bottom-align{justify-content:flex-end}nav.center-align,nav.middle-align{justify-content:center}nav:not(.left,.right)>.space{width:.5rem}nav:not(.left,.right)>.medium-space{width:1rem}nav:not(.left,.right)>.large-space{width:1.5rem}@media only screen and (max-width: 600px){nav.top,nav.bottom{justify-content:space-around}}.overlay{opacity:0;visibility:hidden;position:fixed;top:0;left:0;width:100%;height:100%;color:var(--on-background);background-color:var(--overlay);z-index:100;transition:var(--speed3) all,0s background-color}nav>.overlay{z-index:0}.overlay.active{opacity:1;visibility:visible}.page,:is(.page,dialog):not(.active) .page.active{---transform: translate(0, 0);opacity:0;position:absolute;display:none}.page.active{opacity:1;position:inherit;display:inherit;animation:var(--speed4) to-page ease}.page.active.top{---transform: translate(0, -4rem)}.page.active.bottom{---transform: translate(0, 4rem)}.page.active.left{---transform: translate(-4rem, 0)}.page.active.right{---transform: translate(4rem, 0)}@keyframes to-page{0%{opacity:0;transform:var(---transform)}to{opacity:1;transform:translate(0)}}progress{position:relative;width:100%;height:.5rem;color:var(--primary);background:var(--surface-variant);border-radius:0;flex:none;border:none}progress.small{width:4rem}progress.medium{width:8rem}progress.large{width:12rem}progress:not(.circle,[value]):after{content:"";position:absolute;top:0;bottom:0;left:0;right:0;width:100%;height:100%;clip-path:none;background:currentColor;animation:1.6s to-linear ease infinite}progress:not(.circle,[value])::-moz-progress-bar{animation:1.6s to-linear ease infinite}progress:not(.circle,[value])::-webkit-progress-value{animation:1.6s to-linear ease infinite}progress::-webkit-progress-bar{background:none}progress::-webkit-progress-value{background:currentColor}progress::-moz-progress-bar{background:currentColor}progress.circle{display:inline-block;width:2.5rem;height:2.5rem;border-radius:50%;border-width:.3rem;border-style:solid;border-color:currentColor;animation:1.6s to-circular linear infinite;background:none;flex:none}progress.circle::-moz-progress-bar{background:none}progress.circle.small{width:1.5rem;height:1.5rem;border-width:.2rem}progress.circle.large{width:3.5rem;height:3.5rem;border-width:.4rem}:is(nav,.row,.field)>progress:not(.circle,.small,.medium,.large){flex:auto}@keyframes to-linear{0%{margin-left:0%;width:0%}50%{margin-left:10%;width:80%}to{margin-left:100%;width:0%}}@keyframes to-circular{0%{transform:rotate(0);clip-path:polygon(50% 50%,0% 0%,50% 0%,50% 0%,50% 0%,50% 0%,50% 0%,50% 0%,50% 0%)}20%{clip-path:polygon(50% 50%,0% 0%,50% 0%,100% 0%,100% 0%,100% 0%,100% 0%,100% 0%,100% 0%)}30%{clip-path:polygon(50% 50%,0% 0%,50% 0%,100% 0%,100% 50%,100% 50%,100% 50%,100% 50%,100% 50%)}40%{clip-path:polygon(50% 50%,0% 0%,50% 0%,100% 0%,100% 50%,100% 100%,100% 100%,100% 100%,100% 100%)}50%{clip-path:polygon(50% 50%,50% 0%,50% 0%,100% 0%,100% 50%,100% 100%,50% 100%,50% 100%,50% 100%)}60%{clip-path:polygon(50% 50%,100% 50%,100% 50%,100% 50%,100% 50%,100% 100%,50% 100%,0% 100%,0% 100%)}70%{clip-path:polygon(50% 50%,50% 100%,50% 100%,50% 100%,50% 100%,50% 100%,50% 100%,0% 100%,0% 50%)}80%{clip-path:polygon(50% 50%,0% 100%,0% 100%,0% 100%,0% 100%,0% 100%,0% 100%,0% 100%,0% 50%)}90%{transform:rotate(360deg);clip-path:polygon(50% 50%,0% 50%,0% 50%,0% 50%,0% 50%,0% 50%,0% 50%,0% 50%,0% 50%)}to{clip-path:polygon(50% 50%,0% 50%,0% 50%,0% 50%,0% 50%,0% 50%,0% 50%,0% 50%,0% 50%)}}.checkbox,.radio,.switch{width:auto;height:auto;line-height:normal;white-space:nowrap;cursor:pointer;display:inline-flex;align-items:center}:is(.checkbox,.radio)>input{width:1.5rem;height:1.5rem;opacity:0}.switch>input{width:3.25rem;height:2rem;opacity:0}:is(.checkbox,.radio,.switch)>span{display:inline-flex;align-items:center;color:var(--on-background);font-size:.875rem}:is(.checkbox,.radio)>span:not(:empty){padding-left:.25rem}:is(.checkbox,.radio,.switch)>span:before,.icon>span>i{font-family:var(--font-icon);font-weight:400;font-style:normal;font-size:1.5rem;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:"liga";-webkit-font-smoothing:antialiased;vertical-align:middle;text-align:center;overflow:hidden;width:1.5rem;height:1.5rem;box-sizing:border-box;margin:0 auto;outline:none;color:var(--primary);position:absolute;left:-1.5rem;background-color:transparent;border-radius:50%;user-select:none;z-index:1;box-shadow:0 0 0 0 var(--active);transition:var(--speed1) all}.switch>span:before,.switch.icon>span>i{position:absolute;left:0;top:50%;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;transition:var(--speed2) all;font-size:1rem;user-select:none;min-width:auto;content:"";color:var(--surface-variant);background-color:var(--outline);transform:translate(-3rem,-50%) scale(.6)}.switch.icon>span>i{transform:translate(-3rem,-50%) scale(1)}.checkbox>span:before{content:"check_box_outline_blank"}.radio>span:before{content:"radio_button_unchecked"}.checkbox>input:checked+span:before{content:"check_box";font-variation-settings:"FILL" 1}.radio>input:checked+span:before{content:"radio_button_checked"}:is(.radio,.checkbox,.switch).icon>span:before{content:""!important;font-variation-settings:unset!important}:is(.checkbox,.radio)>input:is(:focus,:hover)+span:before{background-color:var(--active);box-shadow:0 0 0 .5rem var(--active)}.switch>input:is(:focus,:hover)+span:before,.switch.icon>input:is(:focus,:hover)+span>i{box-shadow:0 0 0 .5rem var(--active)}:is(.checkbox,.radio)>input:checked+span:before,:is(.checkbox,.radio).icon>input:checked+span>i{color:var(--primary)}.icon>input:checked+span>i:first-child,.icon>span>i:last-child{opacity:0}.icon>input:checked+span>i:last-child,.icon>span>i:first-child{opacity:1}.switch>input:checked+span:after{border:none;background-color:var(--primary)}.switch>input:checked+span:before,.switch.icon>input:checked+span>i{content:"check";color:var(--primary);background-color:var(--on-primary);transform:translate(-1.75rem,-50%) scale(1)}:is(.checkbox,.radio,.switch)>input:disabled+span{opacity:.5;cursor:not-allowed}.checkbox+.checkbox,.radio+.radio,.switch+.switch{margin-left:.5rem}.switch>span:after{content:"";position:absolute;left:0;top:50%;background-color:var(--active);border:.125rem solid var(--outline);box-sizing:border-box;width:3.25rem;height:2rem;border-radius:2rem;transform:translate(-3.25rem,-50%)}.field>:is(nav,.row){flex-grow:1;padding:0 1rem}.field.round>:is(nav,.row){flex-grow:1;padding:0 1.5rem}.slider{---start: 0%;---end: 0%;---value1: "";---value2: "";display:flex;align-items:center!important;width:auto;height:1.25rem;margin:1.125rem;flex:none}.slider.small{width:4rem}.slider.medium{width:8rem}.slider.large{width:12rem}.slider.vertical{margin:.5rem auto!important;padding:50% 0;transform:rotate(-90deg)}.slider>input{appearance:none;box-shadow:none;border:none;outline:none;pointer-events:none;width:100%;height:.25rem;background:none;z-index:1;padding:0;margin:0}.slider>input:focus~.tooltip{visibility:visible}.slider>input:only-of-type{cursor:pointer;pointer-events:all}.slider>input+input{position:absolute}.slider>input::-webkit-slider-thumb{appearance:none;box-shadow:none;border:none;outline:none;pointer-events:all;height:1.25rem;width:1.25rem;border-radius:50%;background:var(--primary);transition:var(--speed1) all ease-out;cursor:pointer}.slider>input::-moz-range-thumb{appearance:none;box-shadow:none;border:none;outline:none;pointer-events:all;height:1.25rem;width:1.25rem;border-radius:50%;background:var(--primary);transition:var(--speed1) all ease-out;cursor:pointer}.slider>input:not(:disabled):is(:focus,:hover)::-webkit-slider-thumb{box-shadow:0 0 0 .625rem var(--active)}.slider>input:not(:disabled):is(:focus,:hover)::-moz-range-thumb{box-shadow:0 0 0 .625rem var(--active)}.slider>input:disabled{cursor:not-allowed;opacity:1}.slider>input:disabled::-webkit-slider-thumb{background:#9E9E9E;cursor:not-allowed}.slider>input:disabled::-moz-range-thumb{background:#9E9E9E;cursor:not-allowed}.slider>input:disabled~:is(span,.tooltip){background:#9E9E9E}.slider>span{position:absolute;top:calc(50% - .1875rem);height:.375rem;border-radius:1rem;background:var(--primary);z-index:0;left:var(---start);right:var(---end)}.field>.slider{width:100%}.slider:before{content:"";position:absolute;width:100%;height:.25rem;border-radius:1rem;background:var(--active)}.slider>.tooltip{top:.25rem;opacity:0;left:calc(100% - var(---end));right:auto;bottom:auto;width:1.75rem;height:1.75rem;background-color:var(--primary);border-radius:50% 50% 0;transition:var(--speed2) ease top,var(--speed2) ease opacity;transform:translate(-50%,-50%) rotate(45deg)!important}.slider>.tooltip+.tooltip{left:auto;right:calc(100% - var(---start));transform:translate(50%,-50%) rotate(45deg)!important}.slider>.tooltip:before{content:var(---value1);transform:rotate(-45deg)}.slider>.tooltip+.tooltip:before{content:var(---value2)}.slider:hover>.tooltip{top:-.25rem;opacity:1}.slider.vertical>.tooltip{display:none}:is(nav,.row,.field)>.slider:not(.circle,.small,.medium,.large){flex:auto}.snackbar{---transform: translate(-50%, 1rem);position:fixed;top:auto;bottom:6rem;left:50%;right:auto;width:80%;height:auto;z-index:200;visibility:hidden;display:flex;box-shadow:var(--elevate2);color:var(--inverse-on-surface);background-color:var(--inverse-surface);padding:1rem;opacity:1;cursor:pointer;transform:translate(-50%);text-align:left;align-items:center;border-radius:.25rem;gap:.5rem}.snackbar.top{top:6rem;bottom:auto}.snackbar.active{visibility:visible;animation:var(--speed2) to-snackbar}.snackbar.active.top{---transform: translate(-50%, -1rem)}.snackbar>.max{flex:auto}@keyframes to-snackbar{0%{opacity:0;transform:var(---transform)}to{opacity:1;transform:translate(-50%)}}@media only screen and (min-width: 993px){.snackbar{width:40%}}table{width:100%;border-spacing:0;font-size:.875rem;color:var(--on-background);text-align:left}table :is(th,td){width:1%;text-align:inherit;padding:.5rem}table th{font-weight:500}table.border :is(th,td){border-bottom:.0625rem solid var(--outline)}table.no-space :is(th,td){padding:0}table.medium-space :is(th,td){padding:.75rem}table.large-space :is(th,td){padding:1rem}.tabs{display:flex;white-space:nowrap;border-bottom:.0625rem solid var(--outline)}.tabs.min{padding:0 1rem;gap:2rem}.tabs:not(.left-align,.right-align,.center-align){justify-content:space-around}*+.tabs{margin-top:1rem}.tabs>a{display:flex;font-size:.875rem;font-weight:500;color:var(--on-background);padding:.5rem 1rem;border-bottom:.125rem solid transparent;text-align:center;min-height:3rem;width:100%;gap:.25rem}.tabs.min>a{width:auto;padding:.5rem 0}.tabs.small>a{min-height:2rem}.tabs.large>a{min-height:4rem}.tabs>a.active{color:var(--primary);border-bottom:.125rem solid var(--primary)}.tabs>a.active>i{color:var(--primary)}.tabs:is(.left-align,.center-align,.right-align)>a{width:auto}.tooltip{---space: -.5rem;visibility:hidden;display:flex;align-items:center;justify-content:center;gap:.5rem;background-color:var(--inverse-surface);color:var(--inverse-on-surface);font-size:.75rem;text-align:center;border-radius:.25rem;padding:.5rem;position:absolute;z-index:3;top:0;left:50%;bottom:auto;right:auto;transform:translate(-50%,-100%) scale(.9);width:auto;white-space:nowrap;font-weight:500;opacity:0;transition:var(--speed2) all;line-height:normal}.tooltip.left{left:0;top:50%;bottom:auto;right:auto;transform:translate(-100%,-50%) scale(.9)}.tooltip.right{right:0;top:50%;bottom:auto;left:auto;transform:translate(100%,-50%) scale(.9)}.tooltip.bottom{bottom:0;left:50%;top:auto;right:auto;transform:translate(-50%,100%) scale(.9)}.tooltip.small{width:8rem;white-space:normal}.tooltip.medium{width:12rem;white-space:normal}.tooltip.large{width:16rem;white-space:normal}:hover>.tooltip{visibility:visible;opacity:1;transform:translate(-50%,-100%) scale(1)}:hover>.tooltip.left{transform:translate(-100%,-50%) scale(1)}:hover>.tooltip.right{transform:translate(100%,-50%) scale(1)}:hover>.tooltip.bottom{transform:translate(-50%,100%) scale(1)}.tooltip.no-space{---space: 0rem}.tooltip.medium-space{---space: -1rem}.tooltip.large-space{---space: -1.5rem}.tooltip:not(.left,.right,.bottom){margin-top:var(---space)!important}.tooltip.left{margin-left:var(---space)!important}.tooltip.right{margin-right:var(---space)!important}.tooltip.bottom{margin-bottom:var(---space)!important}menu:active~.tooltip,:is(button,.button):focus>menu~.tooltip,.field>:focus~menu~.tooltip{visibility:hidden}.vertical>.tooltip:not(.left,.right,.bottom){top:calc(50% + var(---space));transform:translate(-50%,-100%) scale(1) rotate(90deg)}.vertical>.tooltip.left{left:var(---space);transform:translate(-100%,-50%) scale(1) rotate(90deg)}.vertical>.tooltip.right{right:var(---space);transform:translate(100%,-50%) scale(1) rotate(90deg)}.vertical>.tooltip.bottom{bottom:calc(50% + var(---space));transform:translate(-50%,100%) scale(1) rotate(90deg)}.slider>.tooltip{---space: -1.25rem}.slider.vertical>.tooltip{---space: -.75rem}.slider.vertical>.tooltip:is(.left,.right){---space: -.5rem}.tooltip.max{display:block;font-size:inherit;white-space:normal;text-align:left;width:20rem;border-radius:.5rem;padding:1rem;box-shadow:var(--elevate2)}:is(.blur,.small-blur,.medium-blur,.large-blur),:is(.blur,.small-blur,.medium-blur,.large-blur).light{---blur: 1rem;-webkit-backdrop-filter:blur(var(---blur));backdrop-filter:blur(var(---blur));color:var(--on-background);background-color:#ffffff80}.dark :is(.blur,.small-blur,.medium-blur,.large-blur),:is(.blur,.small-blur,.medium-blur,.large-blur).dark{background-color:#00000080}.small-blur{---blur: .5rem}.large-blur{---blur: 1.5rem}.shadow{background-color:#00000050}:is(.left-shadow,.right-shadow,.top-shadow,.bottom-shadow){background-color:transparent!important}.left-shadow{background-image:linear-gradient(to right,black,transparent)}.right-shadow{background-image:linear-gradient(to left,black,transparent)}.bottom-shadow{background-image:linear-gradient(to top,black,transparent)}.top-shadow{background-image:linear-gradient(to bottom,black,transparent)}
1
+ :root{--size: 16px;--font: Inter, Roboto, "Helvetica Neue", "Arial Nova", "Nimbus Sans", Arial, sans-serif;--font-icon: "Material Symbols Outlined";--speed1: .1s;--speed2: .2s;--speed3: .3s;--speed4: .4s}:root,body.light{--primary: #6750a4;--on-primary: #ffffff;--primary-container: #e9ddff;--on-primary-container: #22005d;--secondary: #625b71;--on-secondary: #ffffff;--secondary-container: #e8def8;--on-secondary-container: #1e192b;--tertiary: #7e5260;--on-tertiary: #ffffff;--tertiary-container: #ffd9e3;--on-tertiary-container: #31101d;--error: #ba1a1a;--on-error: #ffffff;--error-container: #ffdad6;--on-error-container: #410002;--background: #fffbff;--on-background: #1c1b1e;--surface: #fdf8fd;--on-surface: #1c1b1e;--surface-variant: #e7e0eb;--on-surface-variant: #49454e;--outline: #7a757f;--outline-variant: #cac4cf;--shadow: #000000;--scrim: #000000;--inverse-surface: #313033;--inverse-on-surface: #f4eff4;--inverse-primary: #cfbcff;--surface-dim: #ddd8dd;--surface-bright: #fdf8fd;--surface-container-lowest: #ffffff;--surface-container-low: #f7f2f7;--surface-container: #f2ecf1;--surface-container-high: #ece7eb;--surface-container-highest: #e6e1e6;--overlay: rgb(0 0 0 / .5);--active: rgb(0 0 0 / .1);--elevate1: 0 .125rem .125rem 0 rgb(0 0 0 / .32);--elevate2: 0 .25rem .5rem 0 rgb(0 0 0 / .4);--elevate3: 0 .375rem .75rem 0 rgb(0 0 0 / .48)}body.dark{--primary: #cfbcff;--on-primary: #381e72;--primary-container: #4f378a;--on-primary-container: #e9ddff;--secondary: #cbc2db;--on-secondary: #332d41;--secondary-container: #4a4458;--on-secondary-container: #e8def8;--tertiary: #efb8c8;--on-tertiary: #4a2532;--tertiary-container: #633b48;--on-tertiary-container: #ffd9e3;--error: #ffb4ab;--on-error: #690005;--error-container: #93000a;--on-error-container: #ffb4ab;--background: #1c1b1e;--on-background: #e6e1e6;--surface: #141316;--on-surface: #e6e1e6;--surface-variant: #49454e;--on-surface-variant: #cac4cf;--outline: #948f99;--outline-variant: #49454e;--shadow: #000000;--scrim: #000000;--inverse-surface: #e6e1e6;--inverse-on-surface: #313033;--inverse-primary: #6750a4;--surface-dim: #141316;--surface-bright: #3a383c;--surface-container-lowest: #0f0e11;--surface-container-low: #1c1b1e;--surface-container: #201f22;--surface-container-high: #2b292d;--surface-container-highest: #363438;--overlay: rgb(0 0 0 / .5);--active: rgb(255 255 255 / .2);--elevate1: 0 .125rem .125rem 0 rgb(0 0 0 / .32);--elevate2: 0 .25rem .5rem 0 rgb(0 0 0 / .4);--elevate3: 0 .375rem .75rem 0 rgb(0 0 0 / .48)}@font-face{font-family:Material Symbols Outlined;font-style:normal;font-weight:400;font-display:swap;src:url(material-symbols-outlined.woff2) format("woff2")}@font-face{font-family:Material Symbols Rounded;font-style:normal;font-weight:400;font-display:swap;src:url(material-symbols-rounded.woff2) format("woff2")}@font-face{font-family:Material Symbols Sharp;font-style:normal;font-weight:400;font-display:swap;src:url(material-symbols-sharp.woff2) format("woff2")}*{-webkit-tap-highlight-color:transparent;position:relative;vertical-align:middle;color:inherit;margin:0;padding:0;border-radius:inherit;box-sizing:border-box}body{color:var(--on-surface);background-color:var(--surface);overflow-x:hidden}label{font-size:.75rem;vertical-align:baseline}a,b,i,span{vertical-align:bottom}a,button,.button{cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;border:none;font-family:inherit;outline:inherit;justify-content:center}a,button,.button,i,label{user-select:none}body *::-webkit-scrollbar,body *::-webkit-scrollbar-thumb,body *::-webkit-scrollbar-button{background:none;inline-size:.4rem;block-size:.4rem}body *:is(:hover,:focus)::-webkit-scrollbar-thumb{background:var(--outline);border-radius:1rem}pre,code{direction:ltr}.primary{background-color:var(--primary)!important;color:var(--on-primary)!important}.primary-text{color:var(--primary)!important}.primary-border{border-color:var(--primary)!important}.primary-container{background-color:var(--primary-container)!important;color:var(--on-primary-container)!important}.secondary{background-color:var(--secondary)!important;color:var(--on-secondary)!important}.secondary-text{color:var(--secondary)!important}.secondary-border{border-color:var(--secondary)!important}.secondary-container{background-color:var(--secondary-container)!important;color:var(--on-secondary-container)!important}.tertiary{background-color:var(--tertiary)!important;color:var(--on-tertiary)!important}.tertiary-text{color:var(--tertiary)!important}.tertiary-border{border-color:var(--tertiary)!important}.tertiary-container{background-color:var(--tertiary-container)!important;color:var(--on-tertiary-container)!important}.error{background-color:var(--error)!important;color:var(--on-error)!important}.error-text{color:var(--error)!important}.error-border{border-color:var(--error)!important}.error-container{background-color:var(--error-container)!important;color:var(--on-error-container)!important}.background{background-color:var(--background)!important;color:var(--on-background)!important}.surface,.surface-dim,.surface-bright,.surface-container-lowest,.surface-container-low,.surface-container,.surface-container-high,.surface-container-highest{background-color:var(--surface)!important;color:var(--on-surface)!important}.surface-variant{background-color:var(--surface-variant)!important;color:var(--on-surface-variant)!important}.inverse-surface{background-color:var(--inverse-surface);color:var(--inverse-on-surface)}.inverse-primary{background-color:var(--inverse-primary);color:var(--primary)}.inverse-primary-text{color:var(--inverse-primary)!important}.inverse-primary-border{border-color:var(--inverse-primary)!important}.surface-dim{background-color:var(--surface-dim)!important}.surface-bright{background-color:var(--surface-bright)!important}.surface-container-lowest{background-color:var(--surface-container-lowest)!important}.surface-container-low{background-color:var(--surface-container-low)!important}.surface-container{background-color:var(--surface-container)!important}.surface-container-high{background-color:var(--surface-container-high)!important}.surface-container-highest{background-color:var(--surface-container-highest)!important}.surface-container-low{background-color:var(--surface-container-low)!important}.black{background-color:#000!important}.black-border{border-color:#000!important}.black-text{color:#000!important}.white{background-color:#fff!important}.white-border{border-color:#fff!important}.white-text{color:#fff!important}.transparent{background-color:transparent!important;box-shadow:none!important;color:inherit!important}.transparent-border{border-color:transparent!important}.transparent-text{color:transparent!important}.fill:not(i){background-color:var(--surface-variant)!important;color:var(--on-surface-variant)!important}.middle-align{display:flex;align-items:center!important}.bottom-align{display:flex;align-items:flex-end!important}.top-align{display:flex;align-items:flex-start!important}.left-align{text-align:start;justify-content:flex-start!important}.right-align{text-align:end;justify-content:flex-end!important}.center-align{text-align:center;justify-content:center!important}.red,.red6{background-color:#f44336!important}.red-border{border-color:#f44336!important}.red-text{color:#f44336!important}.red1{background-color:#ffebee!important}.red2{background-color:#ffcdd2!important}.red3{background-color:#ef9a9a!important}.red4{background-color:#e57373!important}.red5{background-color:#ef5350!important}.red7{background-color:#e53935!important}.red8{background-color:#d32f2f!important}.red9{background-color:#c62828!important}.red10{background-color:#b71c1c!important}.pink,.pink6{background-color:#e91e63!important}.pink-border{border-color:#e91e63!important}.pink-text{color:#e91e63!important}.pink1{background-color:#fce4ec!important}.pink2{background-color:#f8bbd0!important}.pink3{background-color:#f48fb1!important}.pink4{background-color:#f06292!important}.pink5{background-color:#ec407a!important}.pink7{background-color:#d81b60!important}.pink8{background-color:#c2185b!important}.pink9{background-color:#ad1457!important}.pink10{background-color:#880e4f!important}.purple,.purple6{background-color:#9c27b0!important}.purple-border{border-color:#9c27b0!important}.purple-text{color:#9c27b0!important}.purple1{background-color:#f3e5f5!important}.purple2{background-color:#e1bee7!important}.purple3{background-color:#ce93d8!important}.purple4{background-color:#ba68c8!important}.purple5{background-color:#ab47bc!important}.purple7{background-color:#8e24aa!important}.purple8{background-color:#7b1fa2!important}.purple9{background-color:#6a1b9a!important}.purple10{background-color:#4a148c!important}.deep-purple,.deep-purple6{background-color:#673ab7!important}.deep-purple-border{border-color:#673ab7!important}.deep-purple-text{color:#673ab7!important}.deep-purple1{background-color:#ede7f6!important}.deep-purple2{background-color:#d1c4e9!important}.deep-purple3{background-color:#b39ddb!important}.deep-purple4{background-color:#9575cd!important}.deep-purple5{background-color:#7e57c2!important}.deep-purple7{background-color:#5e35b1!important}.deep-purple8{background-color:#512da8!important}.deep-purple9{background-color:#4527a0!important}.deep-purple10{background-color:#311b92!important}.indigo,.indigo6{background-color:#3f51b5!important}.indigo-border{border-color:#3f51b5!important}.indigo-text{color:#3f51b5!important}.indigo1{background-color:#e8eaf6!important}.indigo2{background-color:#c5cae9!important}.indigo3{background-color:#9fa8da!important}.indigo4{background-color:#7986cb!important}.indigo5{background-color:#5c6bc0!important}.indigo7{background-color:#3949ab!important}.indigo8{background-color:#303f9f!important}.indigo9{background-color:#283593!important}.indigo10{background-color:#1a237e!important}.blue,.blue6{background-color:#2196f3!important}.blue-border{border-color:#2196f3!important}.blue-text{color:#2196f3!important}.blue1{background-color:#e3f2fd!important}.blue2{background-color:#bbdefb!important}.blue3{background-color:#90caf9!important}.blue4{background-color:#64b5f6!important}.blue5{background-color:#42a5f5!important}.blue7{background-color:#1e88e5!important}.blue8{background-color:#1976d2!important}.blue9{background-color:#1565c0!important}.blue10{background-color:#0d47a1!important}.light-blue,.light-blue6{background-color:#03a9f4!important}.light-blue-border{border-color:#03a9f4!important}.light-blue-text{color:#03a9f4!important}.light-blue1{background-color:#e1f5fe!important}.light-blue2{background-color:#b3e5fc!important}.light-blue3{background-color:#81d4fa!important}.light-blue4{background-color:#4fc3f7!important}.light-blue5{background-color:#29b6f6!important}.light-blue7{background-color:#039be5!important}.light-blue8{background-color:#0288d1!important}.light-blue9{background-color:#0277bd!important}.light-blue10{background-color:#01579b!important}.cyan,.cyan6{background-color:#00bcd4!important}.cyan-border{border-color:#00bcd4!important}.cyan-text{color:#00bcd4!important}.cyan1{background-color:#e0f7fa!important}.cyan2{background-color:#b2ebf2!important}.cyan3{background-color:#80deea!important}.cyan4{background-color:#4dd0e1!important}.cyan5{background-color:#26c6da!important}.cyan7{background-color:#00acc1!important}.cyan8{background-color:#0097a7!important}.cyan9{background-color:#00838f!important}.cyan10{background-color:#006064!important}.teal,.teal6{background-color:#009688!important}.teal-border{border-color:#009688!important}.teal-text{color:#009688!important}.teal1{background-color:#e0f2f1!important}.teal2{background-color:#b2dfdb!important}.teal3{background-color:#80cbc4!important}.teal4{background-color:#4db6ac!important}.teal5{background-color:#26a69a!important}.teal7{background-color:#00897b!important}.teal8{background-color:#00796b!important}.teal9{background-color:#00695c!important}.teal10{background-color:#004d40!important}.green,.green6{background-color:#4caf50!important}.green-border{border-color:#4caf50!important}.green-text{color:#4caf50!important}.green1{background-color:#e8f5e9!important}.green2{background-color:#c8e6c9!important}.green3{background-color:#a5d6a7!important}.green4{background-color:#81c784!important}.green5{background-color:#66bb6a!important}.green7{background-color:#43a047!important}.green8{background-color:#388e3c!important}.green9{background-color:#2e7d32!important}.green10{background-color:#1b5e20!important}.light-green,.light-green6{background-color:#8bc34a!important}.light-green-border{border-color:#8bc34a!important}.light-green-text{color:#8bc34a!important}.light-green1{background-color:#f1f8e9!important}.light-green2{background-color:#dcedc8!important}.light-green3{background-color:#c5e1a5!important}.light-green4{background-color:#aed581!important}.light-green5{background-color:#9ccc65!important}.light-green7{background-color:#7cb342!important}.light-green8{background-color:#689f38!important}.light-green9{background-color:#558b2f!important}.light-green10{background-color:#33691e!important}.lime,.lime6{background-color:#cddc39!important}.lime-border{border-color:#cddc39!important}.lime-text{color:#cddc39!important}.lime1{background-color:#f9fbe7!important}.lime2{background-color:#f0f4c3!important}.lime3{background-color:#e6ee9c!important}.lime4{background-color:#dce775!important}.lime5{background-color:#d4e157!important}.lime7{background-color:#c0ca33!important}.lime8{background-color:#afb42b!important}.lime9{background-color:#9e9d24!important}.lime10{background-color:#827717!important}.yellow,.yellow6{background-color:#ffeb3b!important}.yellow-border{border-color:#ffeb3b!important}.yellow-text{color:#ffeb3b!important}.yellow1{background-color:#fffde7!important}.yellow2{background-color:#fff9c4!important}.yellow3{background-color:#fff59d!important}.yellow4{background-color:#fff176!important}.yellow5{background-color:#ffee58!important}.yellow7{background-color:#fdd835!important}.yellow8{background-color:#fbc02d!important}.yellow9{background-color:#f9a825!important}.yellow10{background-color:#f57f17!important}.amber,.amber6{background-color:#ffc107!important}.amber-border{border-color:#ffc107!important}.amber-text{color:#ffc107!important}.amber1{background-color:#fff8e1!important}.amber2{background-color:#ffecb3!important}.amber3{background-color:#ffe082!important}.amber4{background-color:#ffd54f!important}.amber5{background-color:#ffca28!important}.amber7{background-color:#ffb300!important}.amber8{background-color:#ffa000!important}.amber9{background-color:#ff8f00!important}.amber10{background-color:#ff6f00!important}.orange,.orange6{background-color:#ff9800!important}.orange-border{border-color:#ff9800!important}.orange-text{color:#ff9800!important}.orange1{background-color:#fff3e0!important}.orange2{background-color:#ffe0b2!important}.orange3{background-color:#ffcc80!important}.orange4{background-color:#ffb74d!important}.orange5{background-color:#ffa726!important}.orange7{background-color:#fb8c00!important}.orange8{background-color:#f57c00!important}.orange9{background-color:#ef6c00!important}.orange10{background-color:#e65100!important}.deep-orange,.deep-orange6{background-color:#ff5722!important}.deep-orange-border{border-color:#ff5722!important}.deep-orange-text{color:#ff5722!important}.deep-orange1{background-color:#fbe9e7!important}.deep-orange2{background-color:#ffccbc!important}.deep-orange3{background-color:#ffab91!important}.deep-orange4{background-color:#ff8a65!important}.deep-orange5{background-color:#ff7043!important}.deep-orange7{background-color:#f4511e!important}.deep-orange8{background-color:#e64a19!important}.deep-orange9{background-color:#d84315!important}.deep-orange10{background-color:#bf360c!important}.brown,.brown6{background-color:#795548!important}.brown-border{border-color:#795548!important}.brown-text{color:#795548!important}.brown1{background-color:#efebe9!important}.brown2{background-color:#d7ccc8!important}.brown3{background-color:#bcaaa4!important}.brown4{background-color:#a1887f!important}.brown5{background-color:#8d6e63!important}.brown7{background-color:#6d4c41!important}.brown8{background-color:#5d4037!important}.brown9{background-color:#4e342e!important}.brown10{background-color:#3e2723!important}.blue-grey,.blue-grey6{background-color:#607d8b!important}.blue-grey-border{border-color:#607d8b!important}.blue-grey-text{color:#607d8b!important}.blue-grey1{background-color:#eceff1!important}.blue-grey2{background-color:#cfd8dc!important}.blue-grey3{background-color:#b0bec5!important}.blue-grey4{background-color:#90a4ae!important}.blue-grey5{background-color:#78909c!important}.blue-grey7{background-color:#546e7a!important}.blue-grey8{background-color:#455a64!important}.blue-grey9{background-color:#37474f!important}.blue-grey10{background-color:#263238!important}.grey,.grey6{background-color:#9e9e9e!important}.grey-border{border-color:#9e9e9e!important}.grey-text{color:#9e9e9e!important}.grey1{background-color:#fafafa!important}.grey2{background-color:#f5f5f5!important}.grey3{background-color:#eee!important}.grey4{background-color:#e0e0e0!important}.grey5{background-color:#bdbdbd!important}.grey7{background-color:#757575!important}.grey8{background-color:#616161!important}.grey9{background-color:#424242!important}.grey10{background-color:#212121!important}.horizontal{display:inline-flex;flex-direction:row!important;gap:1rem;inline-size:auto!important;max-inline-size:none!important}.horizontal>*{margin-block-start:0!important;margin-block-end:0!important}.vertical,.vertical:is(button,.button,.chip){display:inline-flex;flex-direction:column!important;gap:.25rem;block-size:auto!important;max-block-size:none!important;padding-block-start:.5rem;padding-block-end:.5rem}.vertical>*{margin-inline-start:0!important;margin-inline-end:0!important}.divider,.small-divider,.medium-divider,.large-divider{block-size:.0625rem;background-color:var(--outline-variant);display:block;margin:0!important}.medium-divider{margin:1rem 0!important}.large-divider{margin:1.5rem 0!important}.small-divider{margin:.5rem 0!important}.no-elevate{box-shadow:none!important}.small-elevate,.elevate{box-shadow:var(--elevate1)!important}.medium-elevate{box-shadow:var(--elevate2)!important}.large-elevate{box-shadow:var(--elevate3)!important}.round{border-radius:var(---round)}.small-round,.medium-round,.large-round{border-radius:var(---round)!important}.top-round,.bottom-round,.left-round,.right-round,.medium-round,.round{---round: 2rem}.small-round{---round: .5rem}.large-round{---round: 3.5rem}.no-round,.square,.top-round,.bottom-round,.left-round,.right-round{border-radius:0!important}.top-round{border-start-start-radius:var(---round)!important;border-start-end-radius:var(---round)!important}.bottom-round{border-end-end-radius:var(---round)!important;border-end-start-radius:var(---round)!important}.left-round{border-start-start-radius:var(---round)!important;border-end-start-radius:var(---round)!important}.right-round{border-start-end-radius:var(---round)!important;border-end-end-radius:var(---round)!important}.circle{border-radius:50%}:is(button,.button,.chip).circle{border-radius:2.5rem}:is(.circle,.square):not(i,img,video,svg),:is(.circle,.square).chip.medium{block-size:2.5rem;inline-size:2.5rem;padding:0}:is(.circle,.square)>span{display:none}:is(.circle,.square).small:not(i,img,video,svg),:is(.circle,.square).chip{block-size:2rem;inline-size:2rem}:is(.circle,.square).large:not(i,img,video,svg){block-size:3rem;inline-size:3rem}:is(.circle,.square).extra:not(i,img,video,svg){block-size:3.5rem;inline-size:3.5rem}:is(.circle,.square).round{border-radius:1rem!important}.border:not(table,.field){box-sizing:border-box;border:.0625rem solid var(--outline);background-color:transparent;box-shadow:none}.no-border{border-color:transparent!important}:is(nav,.row,dialog.max,header.fixed,footer.fixed,menu > a,menu.max,table,.tabs):not(.round){border-radius:0}:is(.no-margin,.auto-margin,.tiny-margin,.small-margin,.medium-margin,.margin,.large-margin):not(.left-margin,.right-margin,.top-margin,.bottom-margin,.horizontal-margin,.vertical-margin){margin:var(---margin)!important}.no-margin,.auto-margin,.tiny-margin,.small-margin,.medium-margin,.margin,.large-margin,.left-margin,.right-margin,.top-margin,.bottom-margin,.horizontal-margin,.vertical-margin{---margin: 1rem}.no-margin{---margin: 0}.auto-margin{---margin: auto}.tiny-margin{---margin: .25rem}.small-margin{---margin: .5rem}.large-margin{---margin: 1.5rem}.left-margin,.horizontal-margin{margin-inline-start:var(---margin)!important}.right-margin,.horizontal-margin{margin-inline-end:var(---margin)!important}.top-margin,.vertical-margin{margin-block-start:var(---margin)!important}.bottom-margin,.vertical-margin{margin-block-end:var(---margin)!important}.no-opacity{opacity:1!important}.opacity{opacity:0!important}.small-opacity{opacity:.75!important}.medium-opacity{opacity:.5!important}.large-opacity{opacity:.25!important}:is(.no-padding,.auto-padding,.tiny-padding,.small-padding,.medium-padding,.padding,.large-padding):not(.left-padding,.right-padding,.top-padding,.bottom-padding,.horizontal-padding,.vertical-padding){padding:var(---padding)!important}.no-padding,.auto-padding,.tiny-padding,.small-padding,.medium-padding,.padding,.large-padding,.left-padding,.right-padding,.top-padding,.bottom-padding,.horizontal-padding,.vertical-padding{---padding: 1rem}.no-padding{---padding: 0}.auto-padding{---padding: auto}.tiny-padding{---padding: .25rem}.small-padding{---padding: .5rem}.large-padding{---padding: 1.5rem}.left-padding,.horizontal-padding{padding-inline-start:var(---padding)!important}.right-padding,.horizontal-padding{padding-inline-end:var(---padding)!important}.top-padding,.vertical-padding{padding-block-start:var(---padding)!important}.bottom-padding,.vertical-padding{padding-block-end:var(---padding)!important}.front{z-index:10!important}.back{z-index:-10!important}.left{inset-inline-start:0}.right{inset-inline-end:0}.top{inset-block-start:0}.bottom{inset-block-end:0}.center{inset-inline-start:50%;transform:translate(-50%)}[dir=rtl] .center{transform:translate(50%)}.middle{inset-block-start:50%;transform:translateY(-50%)}.middle.center{transform:translate(-50%,-50%)}[dir=rtl] .middle.center{transform:translate(50%,-50%)}.scroll{overflow:auto}.no-scroll{overflow:hidden}.small-width{inline-size:12rem!important;max-inline-size:100%}.medium-width{inline-size:24rem!important;max-inline-size:100%}.large-width{inline-size:36rem!important;max-inline-size:100%}.small-height{block-size:12rem!important}.medium-height{block-size:24rem!important}.large-height{block-size:36rem!important}.wrap{display:block;white-space:normal}.no-wrap:not(menu){display:flex;white-space:nowrap}.tiny-space:not(nav,.row,.grid,table,.tooltip){block-size:.5rem}:is(.space,.small-space):not(nav,.row,.grid,table,.tooltip){block-size:1rem}.medium-space:not(nav,.row,.grid,table,.tooltip){block-size:2rem}.large-space:not(nav,.row,.grid,table,.tooltip){block-size:3rem}.responsive{inline-size:-webkit-fill-available;inline-size:-moz-available}@media only screen and (max-width: 600px){.m:not(.s),.l:not(.s),.m.l:not(.s){display:none}}@media only screen and (min-width: 601px) and (max-width: 992px){.s:not(.m),.l:not(.m),.s.l:not(.m){display:none}}@media only screen and (min-width: 993px){.m:not(.l),.s:not(.l),.m.s:not(.l){display:none}}html{font-size:var(--size)}body{font-family:var(--font);font-size:.875rem;line-height:1.25}h1,h2,h3,h4,h5,h6{font-weight:400;display:flex;align-items:center;margin-block-end:.5rem;line-height:normal}*+h1,*+h2,*+h3,*+h4,*+h5,*+h6{margin-block-start:1rem}h1{font-size:3.5625rem}h2{font-size:2.8125rem}h3{font-size:2.25rem}h4{font-size:2rem}h5{font-size:1.75rem}h6{font-size:1.5rem}h1.small{font-size:3.0625rem}h2.small{font-size:2.3125rem}h3.small{font-size:1.75rem}h4.small{font-size:1.5rem}h5.small{font-size:1.25rem}h6.small{font-size:1rem}h1.large{font-size:4.0625rem}h2.large{font-size:3.3125rem}h3.large{font-size:2.75rem}h4.large{font-size:2.5rem}h5.large{font-size:2.25rem}h6.large{font-size:2rem}.link{color:var(--primary)!important}.inverse-link{color:var(--inverse-primary)!important}.truncate{overflow:hidden;white-space:nowrap!important;text-overflow:ellipsis;flex:inherit}.truncate>*{white-space:nowrap!important}.small-text{font-size:.75rem}.medium-text{font-size:.875rem}.large-text{font-size:1rem}.upper{text-transform:uppercase}.lower{text-transform:lowercase}.capitalize{text-transform:capitalize}.bold{font-weight:700}.overline{text-decoration:line-through}.underline{text-decoration:underline}.italic{font-style:italic}p{margin:.5rem 0}.no-line{line-height:normal}.tiny-line{line-height:1.25}.small-line{line-height:1.5}.medium-line{line-height:1.75}.large-line{line-height:2}.extra-line{line-height:2.25}.wave:after,.chip:after,.wave.light:after,:is(.button,button):after{content:"";position:absolute;inset-block-start:0;inset-inline-start:0;z-index:1;border-radius:inherit;inline-size:100%;block-size:100%;background-position:center;background-image:radial-gradient(circle,rgb(255 255 255 / .4) 1%,transparent 1%);opacity:0;transition:none}.wave.dark:after,.wave.row:after,.chip:after,:is(.button,button).none:after,:is(.button,button).border:after,:is(.button,button).transparent:after{background-image:radial-gradient(circle,rgb(150 150 150 / .2) 1%,transparent 1%)}.wave.none:after,:is(.button,button).none:after{inset-block-start:0;inset-inline-start:-.25rem;padding:0 .25rem}.wave.none:not(.small,.medium,.large,.extra):after,:is(.button,button).none:not(.small,.medium,.large,.extra):after{inset-block-start:-.25rem;inset-inline-start:-.25rem;padding:.25rem}:is(.wave,.chip,.button,button):is(:focus,:hover):after{background-size:15000%;opacity:1;transition:var(--speed2) background-size linear}:is(.wave,.chip,.button,button):active:after{background-size:5000%;opacity:0;transition:none}.no-wave:after,.no-wave:is(:hover,:active):after{display:none}.badge{display:inline-flex;align-items:center;justify-content:center;position:absolute;font-size:.75rem;text-transform:none;z-index:1;padding:0 .375rem;background-color:var(--error);color:var(--on-error);inset-block-start:0;inset-inline-start:auto;inset-block-end:auto;inset-inline-end:0;block-size:1.25rem;line-height:normal;transform:translate(50%,-100%)}[dir=rtl] .badge{transform:translate(-50%,-100%)}.badge.none{inset-block-start:auto;inset-inline-start:auto;inset-block-end:auto;inset-inline-end:auto;transform:none;position:relative;margin:0 .125rem}.badge.top{inset-block-start:0;inset-inline-start:50%;inset-block-end:auto;inset-inline-end:auto;transform:translate(-50%,-100%)}[dir=rtl] .badge.top{transform:translate(50%,-100%)}.badge.bottom{inset-block-start:auto;inset-inline-start:50%;inset-block-end:0;inset-inline-end:auto;transform:translate(-50%,100%)}[dir=rtl] .badge.bottom{transform:translate(50%,100%)}.badge.left{inset-block-start:50%;inset-inline-start:0;inset-block-end:auto;inset-inline-end:auto;transform:translate(-100%,-50%)}[dir=rtl] .badge.left{transform:translate(100%,-50%)}.badge.right{inset-block-start:50%;inset-inline-start:auto;inset-block-end:auto;inset-inline-end:0;transform:translate(100%,-50%)}[dir=rtl] .badge.right{transform:translate(-100%,-50%)}.badge.top.left{inset-block-start:0;inset-inline-start:0;inset-block-end:auto;inset-inline-end:auto;transform:translate(-50%,-100%)}[dir=rtl] .badge.top.left{transform:translate(50%,-100%)}.badge.bottom.left{inset-block-start:auto;inset-inline-start:0;inset-block-end:0;inset-inline-end:auto;transform:translate(-50%,100%)}[dir=rtl] .badge.bottom.left{transform:translate(50%,100%)}.badge.top.right{inset-block-start:0;inset-inline-start:auto;inset-block-end:auto;inset-inline-end:0;transform:translate(50%,-100%)}[dir=rtl] .badge.top.right{transform:translate(-50%,-100%)}.badge.bottom.right{inset-block-start:auto;inset-inline-start:auto;inset-block-end:0;inset-inline-end:0;transform:translate(50%,100%)}[dir=rtl] .badge.bottom.right{transform:translate(-50%,100%)}.badge.border{border-color:var(--error);color:var(--error)}.badge:is(.circle,.square){padding:0;text-align:center;inline-size:1.25rem;block-size:1.25rem}.button,button{box-sizing:content-box;display:inline-flex;align-items:center;justify-content:center;block-size:2.5rem;min-inline-size:2.5rem;font-size:.875rem;font-weight:500;color:var(--on-primary);padding:0 1.5rem;background-color:var(--primary);margin:0 .5rem;border-radius:1.25rem;transition:var(--speed3) transform,var(--speed3) border-radius,var(--speed3) padding;user-select:none;gap:1rem;line-height:normal}:is(button,.button).none{inline-size:auto;block-size:auto;color:var(--primary);padding:0;background-color:transparent;min-inline-size:auto;min-block-size:1.5rem}:is(button,.button).small{block-size:2rem;min-inline-size:2rem;font-size:.875rem;border-radius:1rem}:is(button,.button).large{block-size:3rem;min-inline-size:3rem;border-radius:1.5rem}:is(.button,button):is(.extra,.extend){block-size:3.5rem;min-inline-size:3.5rem;font-size:1rem;border-radius:1.75rem}:is(button,.button).border{border-color:var(--outline);color:var(--primary)}.extend>span{display:none}.extend:is(:hover,.active){inline-size:auto;padding:0 1.5rem}.extend:is(:hover,.active)>i+span{display:inherit;margin-inline-start:1.5rem}.extend:is(:hover,.active)>:is(img,svg)+span{display:inherit;margin-inline-start:2.5rem}:is(.button,button):is([disabled]){opacity:.5;cursor:not-allowed}:is(.button):is([disabled]){pointer-events:none}:is(.button,button):is([disabled]):before,:is(.button,button):is([disabled]):after{display:none}:is(.button,button).fill{background-color:var(--secondary-container)!important;color:var(--on-secondary-container)!important}:is(.button,button).vertical{border-radius:2rem}article{box-shadow:var(--elevate1);background-color:var(--surface-container-low);color:var(--on-surface);padding:1rem;border-radius:.75rem;display:block;transition:var(--speed3) transform,var(--speed3) border-radius,var(--speed3) padding}*+article{margin-block-start:1rem}article.small{block-size:12rem}article.medium{block-size:20rem}article.large{block-size:32rem}.chip{box-sizing:content-box;display:inline-flex;align-items:center;justify-content:center;block-size:2rem;min-inline-size:2rem;font-size:.875rem;font-weight:500;background-color:transparent;border:.0625rem solid var(--outline);color:var(--on-surface-variant);padding:0 1rem;margin:0 .5rem;text-transform:none;border-radius:.5rem;transition:var(--speed3) transform,var(--speed3) border-radius,var(--speed3) padding;user-select:none;gap:1rem;line-height:normal}.chip.medium{block-size:2.5rem;min-inline-size:2.5rem}.chip.large{block-size:3rem;min-inline-size:3rem}.chip.fill{background-color:var(--secondary-container)!important;border-color:transparent}.chip.border{border-color:var(--outline)}.chip.round.small{border-radius:1rem}.chip.round{border-radius:1.25rem}.chip.round.large{border-radius:1.5rem}main.responsive{margin:0 auto;max-inline-size:75rem;padding:.5rem;overflow-x:hidden;min-block-size:100vh}main.responsive.max{max-inline-size:100%}nav.bottom:not(.s,.m,.l)~.responsive:not(header){padding-block-end:5rem}nav.top:not(.s,.m,.l)~.responsive:not(footer){padding-block-start:5rem}nav.left:not(.s,.m,.l)~.responsive{padding-inline-start:6rem}nav.right:not(.s,.m,.l)~.responsive{padding-inline-end:6rem}@media only screen and (max-width: 600px){nav.s.bottom~.responsive:not(header){padding-block-end:5rem}nav.s.top~.responsive:not(footer){padding-block-start:5rem}nav.s.left~.responsive{padding-inline-start:6rem}nav.s.right~.responsive{padding-inline-end:6rem}}@media only screen and (min-width: 601px) and (max-width: 992px){nav.m.bottom~.responsive:not(header){padding-block-end:5rem}nav.m.top~.responsive:not(footer){padding-block-start:5rem}nav.m.left~.responsive{padding-inline-start:6rem}nav.m.right~.responsive{padding-inline-end:6rem}}@media only screen and (min-width: 993px){nav.l.bottom~.responsive:not(header){padding-block-end:5rem}nav.l.top~.responsive:not(footer){padding-block-start:5rem}nav.l.left~.responsive{padding-inline-start:6rem}nav.l.right~.responsive{padding-inline-end:6rem}}@media only screen and (max-width: 600px){main.responsive{padding-inline-end:.5rem;padding-inline-start:.5rem}}dialog{display:block;border:none;opacity:0;visibility:hidden;position:fixed;box-shadow:var(--elevate2);color:var(--on-surface);background-color:var(--surface-container-high);padding:1rem;z-index:100;inset-inline-start:50%;inset-block-start:10%;min-inline-size:20rem;max-inline-size:100%;max-block-size:80%;overflow-x:hidden;overflow-y:auto;transition:var(--speed3) all,0s background-color;border-radius:1rem;transform:translate(-50%,-4rem)}[dir=rtl] dialog{transform:translate(50%,-4rem)}dialog::backdrop{display:none}dialog.small{inline-size:25%;block-size:25%}dialog.medium{inline-size:50%;block-size:50%}dialog.large{inline-size:75%;block-size:75%}dialog:is(.active,[open]){opacity:1;visibility:visible;transform:translate(-50%)}[dir=rtl] dialog:is(.active,[open]){transform:translate(50%)}dialog:is(.active,[open]):is(.left,.right,.top,.bottom,.max),[dir=rtl] dialog:is(.active,[open]):is(.left,.right,.top,.bottom,.max){transform:translate(0)}dialog.top{opacity:1;inset-block-start:0;inset-inline-start:0;inset-inline-end:auto;inset-block-end:auto;block-size:auto;inline-size:100%;min-inline-size:auto;max-block-size:100%;transform:translateY(-100%);border-radius:unset;border-end-start-radius:1rem;border-end-end-radius:1rem}dialog.left{opacity:1;inset-block-start:0;inset-inline-start:0;inset-inline-end:auto;inset-block-end:auto;inline-size:auto;block-size:100%;max-block-size:100%;border-radius:unset;border-start-end-radius:1rem;border-end-end-radius:1rem;background-color:var(--surface);transform:translate(-100%)}[dir=rtl] dialog.left{transform:translate(100%)}dialog.right{opacity:1;inset-block-start:0;inset-inline-start:auto;inset-inline-end:0;inset-block-end:auto;inline-size:auto;block-size:100%;max-block-size:100%;border-radius:unset;border-start-start-radius:1rem;border-end-start-radius:1rem;background-color:var(--surface);transform:translate(100%)}[dir=rtl] dialog.right{transform:translate(-100%)}dialog.bottom{opacity:1;inset-block-start:auto;inset-inline-start:0;inset-inline-end:auto;inset-block-end:0;block-size:auto;inline-size:100%;min-inline-size:auto;max-block-size:100%;transform:translateY(100%);border-radius:unset;border-start-start-radius:1rem;border-start-end-radius:1rem}dialog.max{inset-block-start:0;inset-inline-start:0;inset-inline-end:auto;inset-block-end:auto;inline-size:100%;block-size:100%;max-inline-size:100%;max-block-size:100%;transform:translateY(4rem);background-color:var(--surface)}dialog.small:is(.left,.right){inline-size:20rem}dialog.medium:is(.left,.right){inline-size:32rem}dialog.large:is(.left,.right){inline-size:44rem}dialog.small:is(.top,.bottom){block-size:16rem}dialog.medium:is(.top,.bottom){block-size:24rem}dialog.large:is(.top,.bottom){block-size:32rem}nav>dialog,nav.left>dialog{z-index:0;text-align:start;overflow-y:auto;background-color:inherit;padding:1rem 1rem 1rem 5rem}nav.right>dialog{padding:1rem 5rem 1rem 1rem}nav.top>dialog{padding:5rem 3rem 1rem}nav.bottom>dialog{padding:1rem 3rem 5rem}dialog>a.row:is(:hover,.active){background-color:var(--secondary-container)}dialog>.row{padding:.75rem}summary.none{list-style-type:none}summary.none::-webkit-details-marker{display:none}summary{cursor:pointer}summary:focus{outline:none}.field{block-size:3rem;margin-block-end:2rem}*+.field{margin-block-start:1rem}.grid>*>.field{margin-block-end:1rem}.grid>*>.field+.field{margin-block-start:2rem}.grid.no-space>*>.field+.field{margin-block-start:1rem}.grid.medium-space>*>.field+.field{margin-block-start:2.5rem}.grid.large-space>*>.field+.field{margin-block-start:3rem}.field.small{block-size:2.5rem}.field.large{block-size:3.5rem}.field.extra{block-size:4rem}.field{border-radius:.25rem .25rem 0 0}.field.border{border-radius:.25rem}.field.round.small{border-radius:1.25rem}.field.round{border-radius:1.5rem}.field.round.large{border-radius:1.75rem}.field.round.extra{border-radius:2rem}.field:before{content:"";position:absolute;inset-block-start:0;inset-inline-start:0;inset-inline-end:0;inset-block-end:0;border-radius:inherit;background-color:inherit}.field.fill:before{background-color:var(--surface-container-highest);color:var(--on-surface-variant)}.field>:is(i,img,svg,progress,a:not(.helper,.error)){position:absolute;inset-block-start:50%;transform:translateY(-50%);cursor:pointer;z-index:0;inline-size:1.5rem;block-size:1.5rem}.field>:is(i,img,svg,progress,a:not(.helper,.error)),[dir=rtl] .field>:is(i,a:not(.helper,.error)):first-child{inset-inline-start:auto;inset-inline-end:1rem}.field>:is(i,img,svg,progress,a:not(.helper,.error)):first-child,[dir=rtl] .field>:is(i,a:not(.helper,.error)){inset-inline-start:1rem;inset-inline-end:auto}.field.invalid>i{color:var(--error)}.field>progress.circle{inset-block-start:calc(50% - .75rem);border-width:.1875rem}.field>a:not(.helper,.error){z-index:10}.field>a>:is(i,img,svg,progress,a:not(.helper,.error)){inline-size:1.5rem;block-size:1.5rem}.field>:is(input,textarea,select){appearance:none;border:.0625rem solid transparent;padding-inline:.9375rem;padding-block:0;font-family:inherit;font-size:1rem;inline-size:100%;block-size:100%;outline:none;z-index:1;background:none;resize:none}.field>:is(input,textarea,select):focus{border:.125rem solid transparent;padding-block:0;padding-inline:.875rem}input[type=file],input[type=color],:not(.field)>input[type^=date],:not(.field)>input[type^=time],input::-webkit-inner-spin-button,input::-webkit-outer-spin-button,input::-webkit-calendar-picker-indicator{opacity:0;position:absolute;inset-block-start:0;inset-block-end:0;inset-inline-start:0;inset-inline-end:0;inline-size:100%;block-size:100%;margin:0;padding:0;border:0;outline:0;z-index:2!important}input::-webkit-search-decoration,input::-webkit-search-cancel-button,input::-webkit-search-results-button,input::-webkit-search-results-decoration{display:none}.field.border>:is(input,textarea,select){border-color:var(--outline)}.field.border>:is(input,textarea,select):focus{border-color:var(--primary)}.field.round>:is(input,textarea,select){padding-inline-start:1.4376rem;padding-inline-end:1.4376rem}.field.round>:is(input,textarea,select):focus{padding-inline-start:1.375rem;padding-inline-end:1.375rem}.field.prefix>:is(input,textarea,select){padding-inline-start:2.9375rem}.field.prefix>.slider{margin-inline-start:3.5rem}.field.prefix>:is(input,textarea,select):focus{padding-inline-start:2.875rem}.field.suffix>:is(input,textarea,select){padding-inline-end:2.9375rem}.field.suffix>.slider{margin-inline-end:3.5rem}.field.suffix>:is(input,textarea,select):focus{padding-inline-end:2.875rem}.field:not(.border,.round)>:is(input,textarea,select){border-block-end-color:var(--outline)}.field:not(.border,.round)>:is(input,textarea,select):focus{border-block-end-color:var(--primary)}.field.round:not(.border,.fill)>:is(input,textarea,select),.field.round:not(.border)>:is(input,textarea,select):focus{box-shadow:var(--elevate1)}.field.round:not(.border,.fill)>:is(input,textarea,select):focus{box-shadow:var(--elevate2)}.field.invalid:not(.border,.round)>:is(input,textarea,select),.field.invalid:not(.border,.round)>:is(input,textarea,select):focus{border-block-end-color:var(--error)}.field.invalid.border>:is(input,textarea,select),.field.invalid.border>:is(input,textarea,select):focus{border-color:var(--error)}.field:has(> :disabled){opacity:.5;cursor:not-allowed}.field>:disabled{cursor:not-allowed}.field.small.textarea{block-size:4.5rem}.field.textarea{block-size:5.5rem}.field.large.textarea{block-size:6.5rem}.field.extra.textarea{block-size:7.5rem}.field>select>option{background-color:var(--surface-container);color:var(--on-surface)}.field.label>:is(input,select){padding-block-start:1rem}.field.label.border:not(.fill)>:is(input,select){padding-block-start:0}.field.label.small>textarea{padding-block-start:1.125rem}.field.label>textarea{padding-block-start:1.375rem}.field.label.large>textarea{padding-block-start:1.625rem}.field.label.extra>textarea{padding-block-start:1.875rem}.field.small>textarea,.field.small:not(.label)>textarea:focus,.field.small.border:not(.fill)>textarea{padding-block-start:.625rem}.field>textarea,.field:not(.label)>textarea:focus,.field.border:not(.fill)>textarea{padding-block-start:.875rem}.field.large>textarea,.field.large:not(.label)>textarea:focus,.field.large.border:not(.fill)>textarea{padding-block-start:1.125rem}.field.extra>textarea,.field.extra:not(.label)>textarea:focus,.field.extra.border:not(.fill)>textarea{padding-block-start:1.375rem}.field.small.border:not(.fill)>textarea:focus{padding-block-start:.5625rem!important}.field.border:not(.fill)>textarea:focus{padding-block-start:.8125rem!important}.field.large.border:not(.fill)>textarea:focus{padding-block-start:1.0625rem!important}.field.extra.border:not(.fill)>textarea:focus{padding-block-start:1.3125rem!important}.field.label>label{position:absolute;inset-block-start:-.5rem;inset-inline-start:1rem;display:flex;inline-size:calc(100% - 5rem);block-size:4rem;line-height:4rem;font-size:1rem;transition:all .2s;gap:.25rem;white-space:nowrap}.field.label.small>label{block-size:3.5rem;line-height:3.5rem}.field.label.large>label{block-size:4.5rem;line-height:4.5rem}.field.label.extra>label{block-size:5rem;line-height:5rem}.field.label.border.prefix:not(.fill)>:is(label.active,:focus + label,[placeholder]:not(:placeholder-shown) + label,select + label){inset-inline-start:1rem}.field.label.round>label,.field.label.border.prefix.round:not(.fill)>:is(label.active,:focus + label,[placeholder]:not(:placeholder-shown) + label,select + label){inset-inline-start:1.5rem}.field.label.prefix>label{inset-inline-start:3rem}.field.label>:is(label.active,:focus + label,[placeholder]:not(:placeholder-shown) + label,select + label){block-size:2.5rem;line-height:2.5rem;font-size:.75rem}.field.label.border:not(.fill)>:is(label.active,:focus + label,[placeholder]:not(:placeholder-shown) + label,select + label){block-size:1rem;line-height:1rem}.field.label.border:not(.fill)>label:after{content:"";display:block;margin-block-start:.5rem;border-block-start:.0625rem solid var(--outline);block-size:1rem;transition:none;flex:auto}.field.label.border:not(.fill)>:focus+label:after{border-block-start:.125rem solid var(--primary)}.field.label.border:not(.fill)>:is(input,textarea):is(:focus,[placeholder]:not(:placeholder-shown),.active),.field.label.border:not(.fill)>select{clip-path:polygon(-2% -2%,.75rem -2%,.75rem .5rem,calc(100% - 5rem) .5rem,calc(100% - 5rem) -2%,102% -2%,102% 102%,-2% 102%)}[dir=rtl] .field.label.border:not(.fill)>:is(input,textarea):is(:focus,[placeholder]:not(:placeholder-shown),.active),[dir=rtl] .field.label.border:not(.fill)>select{clip-path:polygon(-2% -2%,5rem -2%,5rem .5rem,calc(100% - .75rem) .5rem,calc(100% - .75rem) -2%,102% -2%,102% 102%,-2% 102%)}.field.label.border.round:not(.fill)>:is(input,textarea):is(:focus,[placeholder]:not(:placeholder-shown),.active),.field.label.border.round:not(.fill)>select{clip-path:polygon(-2% -2%,1.25rem -2%,1.25rem .5rem,calc(100% - 5rem) .5rem,calc(100% - 5rem) -2%,102% -2%,102% 102%,-2% 102%)}[dir=rtl] .field.label.border.round:not(.fill)>:is(input,textarea):is(:focus,[placeholder]:not(:placeholder-shown),.active),[dir=rtl] .field.label.border.round:not(.fill)>select{clip-path:polygon(-2% -2%,5rem -2%,5rem .5rem,calc(100% - 1.25rem) .5rem,calc(100% - 1.25rem) -2%,102% -2%,102% 102%,-2% 102%)}.field.label>:focus+label{color:var(--primary)}.field.label.invalid>label,.field.label.invalid>label:after{color:var(--error)!important;border-color:var(--error)!important}.field.label>label>a{block-size:inherit;line-height:inherit;inline-size:1rem}.field.label>label>a>:is(i,img,svg){block-size:1rem;line-height:1rem;inline-size:1rem;font-size:1rem}.field>:is(.helper,.error){position:absolute;inset-inline-start:1rem;inset-block-end:0;transform:translateY(100%);font-size:.75rem;background:none!important;padding-block-start:.125rem}a.helper{color:var(--primary)}.field>.error{color:var(--error)!important}.field.round>:is(.helper,.error){inset-inline-start:1.5rem}.field.invalid>.helper{display:none}table td>.field{margin:0}.grid{---gap: 1rem;display:grid;grid-template-columns:repeat(12,calc(8.33% - var(---gap) + (var(---gap) / 12)));gap:var(---gap)}*+.grid{margin-block-start:1rem}.grid.no-space{---gap: 0rem}.grid.medium-space{---gap: 1.5rem}.grid.large-space{---gap: 2rem}.s1{grid-area:auto/span 1}.s2{grid-area:auto/span 2}.s3{grid-area:auto/span 3}.s4{grid-area:auto/span 4}.s5{grid-area:auto/span 5}.s6{grid-area:auto/span 6}.s7{grid-area:auto/span 7}.s8{grid-area:auto/span 8}.s9{grid-area:auto/span 9}.s10{grid-area:auto/span 10}.s11{grid-area:auto/span 11}.s12{grid-area:auto/span 12}@media only screen and (min-width: 601px){.m1{grid-area:auto/span 1}.m2{grid-area:auto/span 2}.m3{grid-area:auto/span 3}.m4{grid-area:auto/span 4}.m5{grid-area:auto/span 5}.m6{grid-area:auto/span 6}.m7{grid-area:auto/span 7}.m8{grid-area:auto/span 8}.m9{grid-area:auto/span 9}.m10{grid-area:auto/span 10}.m11{grid-area:auto/span 11}.m12{grid-area:auto/span 12}}@media only screen and (min-width: 993px){.l1{grid-area:auto/span 1}.l2{grid-area:auto/span 2}.l3{grid-area:auto/span 3}.l4{grid-area:auto/span 4}.l5{grid-area:auto/span 5}.l6{grid-area:auto/span 6}.l7{grid-area:auto/span 7}.l8{grid-area:auto/span 8}.l9{grid-area:auto/span 9}.l10{grid-area:auto/span 10}.l11{grid-area:auto/span 11}.l12{grid-area:auto/span 12}}i{---size: 1.5rem;font-family:var(--font-icon);font-weight:400;font-style:normal;font-size:var(---size);letter-spacing:normal;text-transform:none;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:"liga";-webkit-font-smoothing:antialiased;vertical-align:middle;text-align:center;overflow:hidden;inline-size:var(---size);min-inline-size:var(---size);block-size:var(---size);min-block-size:var(---size);box-sizing:content-box;line-height:normal}i.tiny{---size: 1rem}.chip>i,i.small{---size: 1.25rem}i.medium{---size: 1.5rem}i.large{---size: 1.75rem}i.extra{---size: 2rem}i.fill,a.row:is(:hover,:focus)>i,.transparent:is(:hover,:focus)>i{font-variation-settings:"FILL" 1}i>:is(img,svg){inline-size:100%;block-size:100%;background-size:100%;border-radius:inherit;position:absolute;inset-block-start:0;inset-inline-start:0;padding:inherit}i[class*=fa-]{font-size:calc(var(---size) * .85);line-height:normal;block-size:auto;min-block-size:auto}.absolute{position:absolute}.fixed{position:fixed}:is(.absolute,.fixed).left.right{inline-size:auto}:is(.absolute,.fixed).left.right.small{block-size:20rem}:is(.absolute,.fixed).left.right.medium{block-size:28rem}:is(.absolute,.fixed).left.right.large{block-size:44rem}:is(.absolute,.fixed).top.bottom.small{inline-size:20rem}:is(.absolute,.fixed).top.bottom.medium{inline-size:28rem}:is(.absolute,.fixed).top.bottom.large{inline-size:44rem}header,footer{padding:0 1rem;background-color:var(--surface-container)}:is(header,footer,menu > *).fixed{position:sticky;inset-block-start:0;inset-block-end:0;inset-inline-start:0;inset-inline-end:0;z-index:12;background-color:inherit}:is(header,footer).fixed:before{content:"";position:absolute;inset-block-start:0;inset-inline-start:0;inset-inline-end:0;inset-block-end:0;margin:0 -.5rem;max-inline-size:100%;background-color:inherit}:is(dialog,menu)>:is(header,footer){padding:0;background-color:inherit}article>:is(header,footer){padding:inherit;padding-inline-start:0;padding-inline-end:0;z-index:11!important}:is(dialog,article,.padding,.medium-padding)>header.fixed{transform:translateY(-1rem)}:is(dialog,article,.padding,.medium-padding)>footer.fixed{transform:translateY(1rem)}.no-padding>:is(header,footer).fixed{transform:none}.small-padding>header.fixed{transform:translateY(-.5rem)}.small-padding>footer.fixed{transform:translateY(.5rem)}.large-padding>header.fixed{transform:translateY(-1.5rem)}.large-padding>footer.fixed{transform:translateY(1.5rem)}svg{fill:currentColor}:is(img,svg,video):is(.small,.medium,.large,.tiny,.extra,.round,.circle,.responsive){object-fit:cover;object-position:center;transition:var(--speed3) transform,var(--speed3) border-radius,var(--speed3) padding;block-size:3rem;inline-size:3rem}:is(img,svg,video).round{border-radius:.5rem}:is(img,svg,video).tiny{block-size:2rem;inline-size:2rem}:is(img,svg,video).small{block-size:2.5rem;inline-size:2.5rem}:is(img,svg,video).large{block-size:3.5rem;inline-size:3.5rem}:is(img,svg,video).extra{block-size:4rem;inline-size:4rem}:is(img,svg,video).responsive{inline-size:100%;block-size:100%;margin:0 auto}:is(button,.button,.chip):not(.transparent)>.responsive{border:.25rem solid transparent}:is(button.small,.button.small,.chip)>.responsive{inline-size:2rem}:is(button,.button,.chip.medium)>.responsive{inline-size:2.5rem}:is(button,.button,.chip).large>.responsive{inline-size:3rem}:is(button,.button,.chip).extra>.responsive{inline-size:3.5rem}:is(img,svg,video).responsive.tiny{inline-size:100%;block-size:4rem}:is(img,svg,video).responsive.small{inline-size:100%;block-size:8rem}:is(img,svg,video).responsive.medium{inline-size:100%;block-size:12rem}:is(img,svg,video).responsive.large{inline-size:100%;block-size:16rem}:is(img,svg,video).responsive.extra{inline-size:100%;block-size:20rem}:is(img,svg,video).responsive.round{border-radius:2rem}:is(img,svg,video).empty-state{max-inline-size:100%;inline-size:24rem}:is(button,.button,.chip,.field)>:is(img,svg):not(.responsive,.tiny,.small,.medium,.large,.extra),:is(.tabs) :is(img,svg):not(.responsive,.tiny,.small,.medium,.large,.extra){min-inline-size:1.5rem;max-inline-size:1.5rem;max-block-size:1.5rem}:is(button,.button,.chip)>:is(i,img,svg),:is(button,.button,.chip)>.responsive{margin:0 -.5rem}:is(button,.button)>.responsive{margin-inline-start:-1.5rem}:is(button,.button)>span+.responsive{margin-inline-start:-.5rem;margin-inline-end:-1.5rem}.chip>.responsive{margin-inline-start:-1rem}.chip>span+.responsive{margin-inline-start:-.5rem;margin-inline-end:-1rem}:is(.circle,.square)>.responsive{margin:0}.extend>:is(.responsive,i){margin:0;position:absolute;inset-inline:1rem;z-index:1}.extend>.responsive{inset-inline:0;inline-size:3.5rem}.extend.border>.responsive{inline-size:3.375rem}menu{opacity:0;visibility:hidden;position:absolute;box-shadow:var(--elevate2);background-color:var(--surface-container);z-index:11;inset-block-start:auto;inset-block-end:0;inset-inline-start:0;inset-inline-end:auto;inline-size:100%;max-block-size:50vh;max-inline-size:none!important;overflow-x:hidden;overflow-y:auto;font-size:.875rem;font-weight:400;text-transform:none;color:var(--on-surface);line-height:normal;text-align:start;border-radius:.25rem;transform:scale(.8) translateY(120%);transition:var(--speed2) all,0s background-color}menu.no-wrap{inline-size:max-content;white-space:nowrap!important}menu.active,menu:not([data-ui]):active,:not([data-ui]):focus-within>menu{opacity:1;visibility:visible;transform:scale(1) translateY(100%)}menu.left{inset-inline-start:auto;inset-inline-end:0}menu *{white-space:inherit!important}menu>a{padding:.75rem 1rem}menu>a:not(.row){display:block}menu>a:is(:hover,:focus,.active){background-color:var(--active)}menu.min{inset-block-start:0;inset-block-end:auto;transform:none!important;border-radius:inherit}menu.max{position:fixed;inset-block-start:0;inset-inline-start:0;inset-block-end:0;inset-inline-end:0;block-size:100%;max-block-size:none;min-block-size:auto;z-index:100;transform:none!important}menu.no-wrap:is(.min,.max){min-inline-size:16rem}nav,.row{display:flex;align-items:center;justify-content:flex-start;white-space:nowrap;gap:1rem}:not(.divider,.small-divider,.medium-divider,.large-divider)+nav:not(.left,.right,.top,.bottom),:not(.divider,.small-divider,.medium-divider,.large-divider)+.row:not(a){margin-block-start:1rem}:is(nav,.row)>*,:is(nav,.row)>:not(.tooltip,menu)>*{margin-block-start:0;margin-block-end:0}nav>*,.row>*{margin:0!important;white-space:normal;flex:none}:is(nav,.row).no-space{gap:0}:is(nav,.row).no-space>.border+.border{border-inline-start:0}:is(nav,.row).medium-space{gap:1.5rem}:is(nav,.row).large-space{gap:2rem}nav>.max,.row>.max{flex:auto}nav.wrap,.row.wrap{display:flex;flex-wrap:wrap}header>:is(nav,.row){min-block-size:4rem}footer>:is(nav,.row){min-block-size:5rem}:is(nav,.row)>.border.no-margin+.border.no-margin{border-inline-start:0}a.row.wave{padding:.75rem}nav:is(.left,.right,.top,.bottom){display:flex;align-items:center;justify-content:center;flex-direction:column;border:0;position:fixed;color:var(--on-surface);transform:none;z-index:100;inset-inline-start:0;inset-block-start:0;inset-block-end:0;inset-inline-end:0;block-size:auto;inline-size:auto;text-align:center;padding:.5rem}nav:is(.left,.right){inline-size:5rem;justify-content:flex-start;flex-direction:column;background-color:var(--surface)}nav:is(.top,.bottom){block-size:5rem;justify-content:center;flex-direction:row;background-color:var(--surface-container)}nav.top{inset-block-end:auto}nav.left{inset-inline-end:auto}nav.right{inset-inline-start:auto}nav.bottom{inset-block-start:auto}nav:is(.left,.right,.top,.bottom)>a:not(button,.button,.chip,img,video,svg){min-inline-size:3.5rem;min-block-size:3.5rem;text-align:center;display:flex;z-index:101;flex-direction:column}nav:is(.left,.right)>a:not(button,.button,.chip,img,video,svg){inline-size:auto}nav:is(.top,.bottom)>a:not(button,.button,.chip,img,video,svg){block-size:auto;inline-size:3.5rem}nav:is(.left,.right,.top,.bottom):before{content:"";position:absolute;inset-block-start:0;inset-inline-start:0;inset-inline-end:0;inset-block-end:0;background-color:inherit;z-index:101;border-radius:inherit}nav:is(.left,.right,.top,.bottom)>:not(dialog,.overlay){z-index:101}nav:is(.left,.right,.top,.bottom)>a:not(button,.button,.chip)>i{padding:.25rem;border-radius:2rem;transition:var(--speed1) padding linear;margin:0 auto}nav:is(.left,.right,.top,.bottom)>a:not(button,.button,.chip):is(:hover,:focus,.active)>i{background-color:var(--secondary-container);color:var(--on-secondary-container);padding:.25rem 1rem;font-variation-settings:"FILL" 1}nav.left>dialog{padding-inline-start:5.5rem}nav.right>dialog{padding-inline-end:5.5rem}nav.top>dialog{padding-block-start:5.5rem}nav.bottom>dialog{padding-block-end:5.5rem}nav.left-align,nav.top-align{justify-content:flex-start}nav.right-align,nav.bottom-align{justify-content:flex-end}nav.center-align,nav.middle-align{justify-content:center}nav:not(.left,.right)>.space{inline-size:.5rem}nav:not(.left,.right)>.medium-space{inline-size:1rem}nav:not(.left,.right)>.large-space{inline-size:1.5rem}@media only screen and (max-width: 600px){nav.top,nav.bottom{justify-content:space-around}}.overlay{opacity:0;visibility:hidden;position:fixed;inset-block-start:0;inset-inline-start:0;inline-size:100%;block-size:100%;color:var(--on-surface);background-color:var(--overlay);z-index:100;transition:var(--speed3) all,0s background-color}nav>.overlay{z-index:0}.overlay.active{opacity:1;visibility:visible}.page,:is(.page,dialog):not(.active) .page.active{---transform: translate(0, 0);opacity:0;position:absolute;display:none}.page.active{opacity:1;position:inherit;display:inherit;animation:var(--speed4) to-page ease}.page.active.top{---transform: translate(0, -4rem)}.page.active.bottom{---transform: translate(0, 4rem)}.page.active.left{---transform: translate(-4rem, 0)}[dir=rtl] .page.active.left,.page.active.right{---transform: translate(4rem, 0)}[dir=rtl] .page.active.right{---transform: translate(-4rem, 0)}@keyframes to-page{0%{opacity:0;transform:var(---transform)}to{opacity:1;transform:translate(0)}}progress{position:relative;inline-size:100%;block-size:.5rem;color:var(--primary);background:var(--surface-container-highest);border-radius:0;flex:none;border:none}progress.small{inline-size:4rem}progress.medium{inline-size:8rem}progress.large{inline-size:12rem}progress:not(.circle,[value]):after{content:"";position:absolute;inset-block-start:0;inset-block-end:0;inset-inline-start:0;inset-inline-end:0;inline-size:100%;block-size:100%;clip-path:none;background:currentColor;animation:1.6s to-linear ease infinite}progress:not(.circle,[value])::-moz-progress-bar{animation:1.6s to-linear ease infinite}progress:not(.circle,[value])::-webkit-progress-value{animation:1.6s to-linear ease infinite}progress::-webkit-progress-bar{background:none}progress::-webkit-progress-value{background:currentColor}progress::-moz-progress-bar{background:currentColor}progress.circle{display:inline-block;inline-size:2.5rem;block-size:2.5rem;border-radius:50%;border-width:.3rem;border-style:solid;border-color:currentColor;animation:1.6s to-circular linear infinite;background:none;flex:none}progress.circle::-moz-progress-bar{background:none}progress.circle.small{inline-size:1.5rem;block-size:1.5rem;border-width:.2rem}progress.circle.large{inline-size:3.5rem;block-size:3.5rem;border-width:.4rem}:is(nav,.row,.field)>progress:not(.circle,.small,.medium,.large){flex:auto}@keyframes to-linear{0%{margin-inline-start:0%;inline-size:0%}50%{margin-inline-start:10%;inline-size:80%}to{margin-inline-start:100%;inline-size:0%}}@keyframes to-circular{0%{transform:rotate(0);clip-path:polygon(50% 50%,0% 0%,50% 0%,50% 0%,50% 0%,50% 0%,50% 0%,50% 0%,50% 0%)}20%{clip-path:polygon(50% 50%,0% 0%,50% 0%,100% 0%,100% 0%,100% 0%,100% 0%,100% 0%,100% 0%)}30%{clip-path:polygon(50% 50%,0% 0%,50% 0%,100% 0%,100% 50%,100% 50%,100% 50%,100% 50%,100% 50%)}40%{clip-path:polygon(50% 50%,0% 0%,50% 0%,100% 0%,100% 50%,100% 100%,100% 100%,100% 100%,100% 100%)}50%{clip-path:polygon(50% 50%,50% 0%,50% 0%,100% 0%,100% 50%,100% 100%,50% 100%,50% 100%,50% 100%)}60%{clip-path:polygon(50% 50%,100% 50%,100% 50%,100% 50%,100% 50%,100% 100%,50% 100%,0% 100%,0% 100%)}70%{clip-path:polygon(50% 50%,50% 100%,50% 100%,50% 100%,50% 100%,50% 100%,50% 100%,0% 100%,0% 50%)}80%{clip-path:polygon(50% 50%,0% 100%,0% 100%,0% 100%,0% 100%,0% 100%,0% 100%,0% 100%,0% 50%)}90%{transform:rotate(360deg);clip-path:polygon(50% 50%,0% 50%,0% 50%,0% 50%,0% 50%,0% 50%,0% 50%,0% 50%,0% 50%)}to{clip-path:polygon(50% 50%,0% 50%,0% 50%,0% 50%,0% 50%,0% 50%,0% 50%,0% 50%,0% 50%)}}.checkbox,.radio,.switch{direction:ltr;inline-size:auto;block-size:auto;line-height:normal;white-space:nowrap;cursor:pointer;display:inline-flex;align-items:center}:is(.checkbox,.radio)>input{inline-size:1.5rem;block-size:1.5rem;opacity:0}.switch>input{inline-size:3.25rem;block-size:2rem;opacity:0}:is(.checkbox,.radio,.switch)>span{display:inline-flex;align-items:center;color:var(--on-surface);font-size:.875rem}:is(.checkbox,.radio)>span:not(:empty){padding-inline-start:.25rem}:is(.checkbox,.radio,.switch)>span:before,.icon>span>i{font-family:var(--font-icon);font-weight:400;font-style:normal;font-size:1.5rem;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:"liga";-webkit-font-smoothing:antialiased;vertical-align:middle;text-align:center;overflow:hidden;inline-size:1.5rem;block-size:1.5rem;box-sizing:border-box;margin:0 auto;outline:none;color:var(--primary);position:absolute;inset-inline-start:-1.5rem;background-color:transparent;border-radius:50%;user-select:none;z-index:1;box-shadow:0 0 0 0 var(--active);transition:var(--speed1) all}.switch>span:before,.switch.icon>span>i{position:absolute;inset-inline-start:0;inset-block-start:50%;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;transition:var(--speed2) all;font-size:1rem;user-select:none;min-inline-size:auto;content:"";color:var(--surface-variant);background-color:var(--outline)}.switch>span:before,.switch.icon>span>i{transform:translate(-3rem,-50%) scale(.6)}.switch.icon>span>i{transform:translate(-3rem,-50%) scale(1)}.checkbox>span:before{content:"check_box_outline_blank"}.radio>span:before{content:"radio_button_unchecked"}.checkbox>input:checked+span:before{content:"check_box";font-variation-settings:"FILL" 1}.radio>input:checked+span:before{content:"radio_button_checked"}:is(.radio,.checkbox,.switch).icon>span:before{content:""!important;font-variation-settings:unset!important}:is(.checkbox,.radio)>input:not(:disabled):is(:focus,:hover)+span:before{background-color:var(--active);box-shadow:0 0 0 .5rem var(--active)}.switch>input:not(:disabled):is(:focus,:hover)+span:before,.switch.icon>input:not(:disabled):is(:focus,:hover)+span>i{box-shadow:0 0 0 .5rem var(--active)}:is(.checkbox,.radio)>input:checked+span:before,:is(.checkbox,.radio).icon>input:checked+span>i{color:var(--primary)}.icon>input:checked+span>i:first-child,.icon>span>i:last-child{opacity:0}.icon>input:checked+span>i:last-child,.icon>span>i:first-child{opacity:1}.switch>input:checked+span:after{border:none;background-color:var(--primary)}.switch>input:checked+span:before,.switch.icon>input:checked+span>i{content:"check";color:var(--primary);background-color:var(--on-primary)}.switch>input:checked+span:before,.switch.icon>input:checked+span>i{transform:translate(-1.75rem,-50%) scale(1)}:is(.checkbox,.radio,.switch)>input:disabled+span{opacity:.5;cursor:not-allowed}.checkbox+.checkbox,.radio+.radio,.switch+.switch{margin-inline-start:.5rem}.switch>span:after{content:"";position:absolute;inset-inline-start:0;inset-block-start:50%;background-color:var(--active);border:.125rem solid var(--outline);box-sizing:border-box;inline-size:3.25rem;block-size:2rem;border-radius:2rem}.switch>span:after{transform:translate(-3.25rem,-50%)}.field>:is(nav,.row){flex-grow:1;padding:0 1rem}.field.round>:is(nav,.row){flex-grow:1;padding:0 1.5rem}.slider{---start: 0%;---end: 0%;---value1: "";---value2: "";display:flex;align-items:center!important;inline-size:auto;block-size:1.25rem;margin:1.125rem;flex:none}.slider.small{inline-size:4rem}.slider.medium{inline-size:8rem}.slider.large{inline-size:12rem}.slider.vertical{margin:.5rem auto!important;padding:50% 0;transform:rotate(-90deg)}.slider>input{appearance:none;box-shadow:none;border:none;outline:none;pointer-events:none;inline-size:100%;block-size:.25rem;background:none;z-index:1;padding:0;margin:0}.slider>input:focus~.tooltip{visibility:visible}.slider>input:only-of-type{cursor:pointer;pointer-events:all}.slider>input+input{position:absolute}.slider>input::-webkit-slider-thumb{appearance:none;box-shadow:none;border:none;outline:none;pointer-events:all;block-size:1.25rem;inline-size:1.25rem;border-radius:50%;background:var(--primary);transition:var(--speed1) all ease-out;cursor:pointer}.slider>input::-moz-range-thumb{appearance:none;box-shadow:none;border:none;outline:none;pointer-events:all;block-size:1.25rem;inline-size:1.25rem;border-radius:50%;background:var(--primary);transition:var(--speed1) all ease-out;cursor:pointer}.slider>input:not(:disabled):is(:focus,:hover)::-webkit-slider-thumb{box-shadow:0 0 0 .625rem var(--active)}.slider>input:not(:disabled):is(:focus,:hover)::-moz-range-thumb{box-shadow:0 0 0 .625rem var(--active)}.slider>input:disabled{cursor:not-allowed;opacity:1}.slider>input:disabled::-webkit-slider-thumb{background:#9E9E9E;cursor:not-allowed}.slider>input:disabled::-moz-range-thumb{background:#9E9E9E;cursor:not-allowed}.slider>input:disabled~:is(span,.tooltip){background:#9E9E9E}.slider>span{position:absolute;inset-block-start:calc(50% - .1875rem);block-size:.375rem;border-radius:1rem;background:var(--primary);z-index:0;inset-inline-start:var(---start);inset-inline-end:var(---end)}.field>.slider{inline-size:100%}.slider:before{content:"";position:absolute;inline-size:100%;block-size:.25rem;border-radius:1rem;background:var(--active)}.slider>.tooltip{inset-block-start:.25rem;opacity:0;inset-inline-start:calc(100% - var(---end));inset-inline-end:auto;inset-block-end:auto;inline-size:1.75rem;block-size:1.75rem;background-color:var(--primary);border-radius:50% 50% 0;transition:var(--speed2) ease top,var(--speed2) ease opacity;transform:translate(-50%,-50%) rotate(45deg)!important}[dir=rtl] .slider>.tooltip{transform:translate(50%,-50%) rotate(45deg)!important}.slider>.tooltip+.tooltip{inset-inline-start:auto;inset-inline-end:calc(100% - var(---start));transform:translate(50%,-50%) rotate(45deg)!important}[dir=rtl] .slider>.tooltip+.tooltip{transform:translate(-50%,-50%) rotate(45deg)!important}.slider>.tooltip:before{content:var(---value1);transform:rotate(-45deg)}.slider>.tooltip+.tooltip:before{content:var(---value2)}.slider:hover>.tooltip{inset-block-start:-.25rem;opacity:1}.slider.vertical>.tooltip{display:none}:is(nav,.row,.field)>.slider:not(.circle,.small,.medium,.large){flex:auto}.snackbar{---transform-start: translate(-50%, 1rem);---transform-end: translate(-50%, 0);position:fixed;inset-block-start:auto;inset-block-end:6rem;inset-inline-start:50%;inset-inline-end:auto;inline-size:80%;block-size:auto;z-index:200;visibility:hidden;display:flex;box-shadow:var(--elevate2);color:var(--inverse-on-surface);background-color:var(--inverse-surface);padding:1rem;opacity:1;cursor:pointer;text-align:start;align-items:center;border-radius:.25rem;gap:.5rem;transform:var(---transform-end)}[dir=rtl] .snackbar{---transform-start: translate(50%, 1rem);---transform-end: translate(50%, 0)}.snackbar.top{inset-block-start:6rem;inset-block-end:auto}.snackbar.active{visibility:visible;animation:var(--speed2) to-snackbar}.snackbar.active.top{---transform-end: translate(-50%, -1rem)}[dir=rtl] .snackbar.active.top{---transform-end: translate(50%, -1rem)}.snackbar>.max{flex:auto}@keyframes to-snackbar{0%{opacity:0;transform:var(---transform-start)}to{opacity:1;transform:var(---transform-end)}}@media only screen and (min-width: 993px){.snackbar{inline-size:40%}}table{inline-size:100%;border-spacing:0;font-size:.875rem;color:var(--on-surface);text-align:start}table :is(th,td){inline-size:1%;text-align:inherit;padding:.5rem}table th{font-weight:500}table.border :is(th,td){border-block-end:.0625rem solid var(--outline)}table.no-space :is(th,td){padding:0}table.medium-space :is(th,td){padding:.75rem}table.large-space :is(th,td){padding:1rem}.tabs{display:flex;white-space:nowrap;border-block-end:.0625rem solid var(--surface-variant)}.tabs.min{padding:0 1rem;gap:2rem}.tabs:not(.left-align,.right-align,.center-align){justify-content:space-around}*+.tabs{margin-block-start:1rem}.tabs>a{display:flex;font-size:.875rem;font-weight:500;color:var(--on-surface-variant);padding:.5rem 1rem;border-block-end:.125rem solid transparent;text-align:center;min-block-size:3rem;inline-size:100%;gap:.25rem}.tabs.min>a{inline-size:auto;padding:.5rem 0}.tabs.small>a{min-block-size:2rem}.tabs.large>a{min-block-size:4rem}.tabs>a.active{color:var(--primary);border-block-end:.125rem solid var(--primary)}.tabs>a.active>i{color:var(--primary)}.tabs:is(.left-align,.center-align,.right-align)>a{inline-size:auto}.tooltip{---space: -.5rem;visibility:hidden;display:flex;align-items:center;justify-content:center;gap:.5rem;background-color:var(--inverse-surface);color:var(--inverse-on-surface);font-size:.75rem;text-align:center;border-radius:.25rem;padding:.5rem;position:absolute;z-index:3;inset-block-start:0;inset-inline-start:50%;inset-block-end:auto;inset-inline-end:auto;inline-size:auto;white-space:nowrap;font-weight:500;opacity:0;transition:var(--speed2) all;line-height:normal;transform:translate(-50%,-100%) scale(.9)}[dir=rtl] .tooltip{transform:translate(50%,-100%) scale(.9)}.tooltip.left{inset-inline-start:0;inset-block-start:50%;inset-block-end:auto;inset-inline-end:auto;transform:translate(-100%,-50%) scale(.9)}[dir=rtl] .tooltip.left{transform:translate(100%,-50%) scale(.9)}.tooltip.right{inset-inline-end:0;inset-block-start:50%;inset-block-end:auto;inset-inline-start:auto;transform:translate(100%,-50%) scale(.9)}[dir=rtl] .tooltip.right{transform:translate(-100%,-50%) scale(.9)}.tooltip.bottom{inset-block-end:0;inset-inline-start:50%;inset-block-start:auto;inset-inline-end:auto;transform:translate(-50%,100%) scale(.9)}[dir=rtl] .tooltip.bottom{transform:translate(50%,100%) scale(.9)}.tooltip.small{inline-size:8rem;white-space:normal}.tooltip.medium{inline-size:12rem;white-space:normal}.tooltip.large{inline-size:16rem;white-space:normal}:hover>.tooltip{visibility:visible;opacity:1;transform:translate(-50%,-100%) scale(1)}[dir=rtl] :hover>.tooltip{transform:translate(50%,-100%) scale(1)}:hover>.tooltip.left{transform:translate(-100%,-50%) scale(1)}[dir=rtl] :hover>.tooltip.left{transform:translate(100%,-50%) scale(1)}:hover>.tooltip.right{transform:translate(100%,-50%) scale(1)}[dir=rtl] :hover>.tooltip.right{transform:translate(-100%,-50%) scale(1)}:hover>.tooltip.bottom{transform:translate(-50%,100%) scale(1)}[dir=rtl] :hover>.tooltip.bottom{transform:translate(50%,100%) scale(1)}.tooltip.no-space{---space: 0}.tooltip.medium-space{---space: -1rem}.tooltip.large-space{---space: -1.5rem}.tooltip:not(.left,.right,.bottom){margin-block-start:var(---space)!important}.tooltip.left{margin-inline-start:var(---space)!important}.tooltip.right{margin-inline-end:var(---space)!important}.tooltip.bottom{margin-block-end:var(---space)!important}menu:active~.tooltip,:is(button,.button):focus>menu~.tooltip,.field>:focus~menu~.tooltip{visibility:hidden}.vertical>.tooltip:not(.left,.right,.bottom){inset-block-start:calc(50% + var(---space));transform:translate(-50%,-100%) scale(1) rotate(90deg)}[dir=rtl] .vertical>.tooltip:not(.left,.right,.bottom){transform:translate(50%,-100%) scale(1) rotate(90deg)}.vertical>.tooltip.left{inset-inline-start:var(---space);transform:translate(-100%,-50%) scale(1) rotate(90deg)}[dir=rtl] .vertical>.tooltip.left{transform:translate(100%,-50%) scale(1) rotate(90deg)}.vertical>.tooltip.right{inset-inline-end:var(---space);transform:translate(100%,-50%) scale(1) rotate(90deg)}[dir=rtl] .vertical>.tooltip.right{transform:translate(-100%,-50%) scale(1) rotate(90deg)}.vertical>.tooltip.bottom{inset-block-end:calc(50% + var(---space));transform:translate(-50%,100%) scale(1) rotate(90deg)}[dir=rtl] .vertical>.tooltip.bottom{transform:translate(50%,100%) scale(1) rotate(90deg)}.slider>.tooltip{---space: -1.25rem}.slider.vertical>.tooltip{---space: -.75rem}.slider.vertical>.tooltip:is(.left,.right){---space: -.5rem}.tooltip.max{display:block;font-size:inherit;white-space:normal;text-align:start;inline-size:20rem;border-radius:.5rem;padding:1rem;box-shadow:var(--elevate2)}:is(.blur,.small-blur,.medium-blur,.large-blur),:is(.blur,.small-blur,.medium-blur,.large-blur).light{---blur: 1rem;-webkit-backdrop-filter:blur(var(---blur));backdrop-filter:blur(var(---blur));color:var(--on-surface);background-color:#ffffff80}.dark :is(.blur,.small-blur,.medium-blur,.large-blur),:is(.blur,.small-blur,.medium-blur,.large-blur).dark{background-color:#00000080}.small-blur{---blur: .5rem}.large-blur{---blur: 1.5rem}.shadow{background-color:#00000050}:is(.left-shadow,.right-shadow,.top-shadow,.bottom-shadow){background-color:transparent!important}.left-shadow{background-image:linear-gradient(to right,black,transparent)}.right-shadow{background-image:linear-gradient(to left,black,transparent)}.bottom-shadow{background-image:linear-gradient(to top,black,transparent)}.top-shadow{background-image:linear-gradient(to bottom,black,transparent)}
package/dist/cdn/beer.min.js CHANGED
@@ -1,4 +1,4 @@
1
1
  export default (() => {
2
- let m,F,$,N;const s={light:"",dark:""},O=[];async function G(t){return await new Promise(n=>setTimeout(n,t))}function H(){return"fxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,t=>{const n=Math.random()*16|0;return(t==="x"?n:n&3|8).toString(16)})}function b(t,n){try{return typeof t=="string"?(n!=null?n:document).querySelector(t):t}catch{return null}}function d(t,n){try{return typeof t=="string"?(n!=null?n:document).querySelectorAll(t):t!=null?t:O}catch{return O}}function f(t,n){var e,r;return(r=(e=t==null?void 0:t.classList)==null?void 0:e.contains(n))!=null?r:!1}function C(t,n){var e;return((e=t==null?void 0:t.tagName)==null?void 0:e.toLowerCase())===n}function P(t,n){var e;return((e=t==null?void 0:t.type)==null?void 0:e.toLowerCase())===n}function v(t,n){var e;(e=t==null?void 0:t.classList)==null||e.add(n)}function u(t,n){var e;(e=t==null?void 0:t.classList)==null||e.remove(n)}function y(t,n,e){t==null||t.addEventListener(n,e,!0)}function Q(t,n,e){t==null||t.removeEventListener(n,e,!0)}function U(t,n){var e;(e=n==null?void 0:n.parentNode)==null||e.insertBefore(t,n)}function Z(t){return t==null?void 0:t.previousElementSibling}function X(t){return t==null?void 0:t.nextElementSibling}function k(t){return t==null?void 0:t.parentElement}function Y(t){const n=document.createElement("div");for(const e in t)n.setAttribute(e,t[e]);return n}function L(t){const n=t;P(n,"number")&&!n.value&&(n.value=""),n.placeholder||(n.placeholder=" "),t.getAttribute("data-ui")&&D(t,null)}function J(t){D(t.currentTarget,null,null,t)}function tt(t){const n=t.currentTarget,e=k(n),r=b("input:not([type=file], [type=checkbox], [type=radio]), select, textarea",e);r&&r.focus()}function nt(t){const n=t.currentTarget;L(n)}function et(t){const n=t.currentTarget;L(n)}function j(t){Q(document.body,"click",j);const n=t.target;d("menu.active").forEach(r=>I(n,r,t))}function rt(t){const n=t.currentTarget;u(n,"active"),m&&clearTimeout(m)}function at(t){const n=t.currentTarget;_(n)}function it(t){const n=t.currentTarget;_(n,t)}function ot(t){const n=t.currentTarget;K(n)}function R(){F&&clearTimeout(F),F=setTimeout(()=>{w()},180)}function _(t,n){if(n){if(n.key!=="Enter")return;const o=n.currentTarget,i=X(o);return P(i,"file")?i.click():void 0}const e=t,r=Z(t);!P(r,"text")||(r.value=e.files?Array.from(e.files).map(o=>o.name).join(", "):"",r.readOnly=!0,r.addEventListener("keydown",it),L(r))}function K(t){const n=k(t),e=b("span",n),r=d("input",n);if(!r.length||!e)return;const o=parseInt(getComputedStyle(document.documentElement).getPropertyValue("--size"))||16,i=1.25*o*100/r[0].offsetWidth,c=[],a=[];for(let g=0;g<r.length;g++){const q=parseFloat(r[g].min),V=parseFloat(r[g].max),z=parseFloat(r[g].value),T=q||0,M=V||100,E=z||0,B=(E-T)*100/(M-T),W=i/2-i*B/100;c.push(B+W),a.push(E),q!==T&&(r[g].min=`${T}`),V!==M&&(r[g].max=`${M}`),z!==E&&(r[g].value=`${E}`)}let l=c[0],p=0,h=100-p-l,A=a[0],S=a[1]||0;r.length>1&&(l=Math.abs(c[1]-c[0]),p=c[1]>c[0]?c[0]:c[1],h=100-p-l,S>A&&(A=a[1]||0,S=a[0])),n.style.setProperty("---start",`${p}%`),n.style.setProperty("---end",`${h}%`),n.style.setProperty("---value1",`'${A}'`),n.style.setProperty("---value2",`'${S}'`)}async function D(t,n,e,r){if(!(!n&&(n=b(t.getAttribute("data-ui")),!n))){if(C(n,"dialog"))return await ut(t,n);if(C(n,"menu"))return I(t,n,r);if(f(n,"snackbar"))return st(t,n,e);if(f(n,"page"))return ct(t,n);if(x(t),f(n,"active"))return u(n,"active");v(n,"active")}}function x(t){const n=k(t);if(!f(n,"tabs"))return;d("a",n).forEach(r=>u(r,"active")),v(t,"active")}function ct(t,n){x(t);const e=k(n);if(e)for(let r=0;r<e.children.length;r++)f(e.children[r],"page")&&u(e.children[r],"active");v(n,"active")}function I(t,n,e){$&&clearTimeout($),$=setTimeout(()=>{var o,i;if(y(document.body,"click",j),x(t),f(n,"active")){if(!e)return u(n,"active");const c=e.target,a=b((o=c.getAttribute("data-ui"))!=null?o:""),l=c.closest("menu"),p=!b("menu",(i=c.closest("[data-ui]"))!=null?i:void 0);return a&&a!==l?I(c,a):!a&&!p&&l?!1:u(n,"active")}d("menu.active").forEach(c=>u(c,"active")),v(n,"active")},90)}async function ut(t,n){var l;(l=document.activeElement)==null||l.blur(),x(t);let e=Z(n);const r=n,o=f(n,"active")||r.open,i=f(n,"modal"),c=k(n),a=C(c,"nav");f(e,"overlay")||(e=Y({class:"overlay"}),U(e,n),await G(90)),e.onclick=()=>{i||(u(t,"active"),u(n,"active"),u(e,"active"),r.close())},a&&d("dialog, a, .overlay",c).forEach(h=>{u(h,"active"),h.open&&h.close()}),o?(u(t,"active"),u(e,"active"),u(n,"active"),r.close()):(!C(t,"button")&&!f(t,"button")&&!f(t,"chip")&&v(t,"active"),v(e,"active"),v(n,"active"),i?r.showModal():r.show())}function st(t,n,e){var o;(o=document.activeElement)==null||o.blur(),x(t),d(".snackbar.active").forEach(i=>u(i,"active")),v(n,"active"),y(n,"click",rt),m&&clearTimeout(m),e!==-1&&(m=setTimeout(()=>{u(n,"active")},e!=null?e:6e3))}function lt(){if(s.light&&s.dark)return s;const t=document.createElement("body");t.className="light",document.body.appendChild(t);const n=document.createElement("body");n.className="dark",document.body.appendChild(n);const e=getComputedStyle(t),r=getComputedStyle(n),o=["--primary","--on-primary","--primary-container","--on-primary-container","--secondary","--on-secondary","--secondary-container","--on-secondary-container","--tertiary","--on-tertiary","--tertiary-container","--on-tertiary-container","--error","--on-error","--error-container","--on-error-container","--background","--on-background","--surface","--on-surface","--surface-variant","--on-surface-variant","--outline","--outline-variant","--shadow","--scrim","--inverse-surface","--inverse-on-surface","--inverse-primary"];for(let i=0;i<o.length;i++)s.light+=o[i]+":"+e.getPropertyValue(o[i])+";",s.dark+=o[i]+":"+r.getPropertyValue(o[i])+";";return document.body.removeChild(t),document.body.removeChild(n),s}function dt(t){if(!t||!globalThis.materialDynamicColors)return lt();const n=/dark/i.test(document.body.className)?"dark":"light";return t.light&&t.dark?(s.light=t.light,s.dark=t.dark,document.body.setAttribute("style",t[n]),t):globalThis.materialDynamicColors(t).then(e=>{const r=o=>{let i="";for(const c in o){const a=c.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g,"$1-$2").toLowerCase(),l=o[c];i+="--"+a+":"+l+";"}return i};return s.light=r(e.light),s.dark=r(e.dark),document.body.setAttribute("style",s[n]),s})}function ft(t){if(!t)return/dark/i.test(document.body.className)?"dark":"light";document.body.classList.remove("light","dark"),document.body.classList.add(t);const n=t==="light"?s.light:s.dark;return globalThis.materialDynamicColors&&document.body.setAttribute("style",n),t}function gt(){N||(N=new MutationObserver(R),N.observe(document.body,{attributes:!0,attributeFilter:["value","max","min"],childList:!0,subtree:!0}),R())}function w(t,n){if(t){if(t==="setup")return gt();if(t==="guid")return H();if(t==="mode")return ft(n);if(t==="theme")return dt(n);const a=b(t);if(!a)return;D(a,a,n)}d("[data-ui]").forEach(a=>y(a,"click",J)),d(".field > label").forEach(a=>y(a,"click",tt)),d(".field > input:not([type=file]):not([type=range]), .field > select, .field > textarea").forEach(a=>{y(a,"focus",nt),y(a,"blur",et),L(a)}),d(".field > input[type=file]").forEach(a=>{y(a,"change",at),_(a)}),d(".slider > input[type=range]").forEach(a=>{y(a,"input",ot),K(a)})}globalThis.addEventListener&&globalThis.addEventListener("load",async()=>await w("setup"));globalThis.beercss=w;globalThis.ui=w;
2
+ let m,$,N,P;const l={light:"",dark:""},R=[];async function Q(t){return await new Promise(n=>setTimeout(n,t))}function U(){return"fxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,t=>{const n=Math.random()*16|0;return(t==="x"?n:n&3|8).toString(16)})}function b(t,n){try{return typeof t=="string"?(n!=null?n:document).querySelector(t):t}catch{return null}}function f(t,n){try{return typeof t=="string"?(n!=null?n:document).querySelectorAll(t):t!=null?t:R}catch{return R}}function d(t,n){var e,r;return(r=(e=t==null?void 0:t.classList)==null?void 0:e.contains(n))!=null?r:!1}function L(t,n){var e;return((e=t==null?void 0:t.tagName)==null?void 0:e.toLowerCase())===n}function k(t,n){var e;return((e=t==null?void 0:t.type)==null?void 0:e.toLowerCase())===n}function v(t,n){var e;(e=t==null?void 0:t.classList)==null||e.add(n)}function u(t,n){var e;(e=t==null?void 0:t.classList)==null||e.remove(n)}function g(t,n,e){t==null||t.addEventListener(n,e,!0)}function X(t,n,e){t==null||t.removeEventListener(n,e,!0)}function Y(t,n){var e;(e=n==null?void 0:n.parentNode)==null||e.insertBefore(t,n)}function _(t){return t==null?void 0:t.previousElementSibling}function j(t){return t==null?void 0:t.nextElementSibling}function x(t){return t==null?void 0:t.parentElement}function J(t){const n=document.createElement("div");for(const e in t)n.setAttribute(e,t[e]);return n}function T(t){const n=t;k(n,"number")&&!n.value&&(n.value=""),n.placeholder||(n.placeholder=" "),t.getAttribute("data-ui")&&q(t,null)}function tt(t){q(t.currentTarget,null,null,t)}function nt(t){const n=t.currentTarget,e=x(n),r=b("input:not([type=file], [type=checkbox], [type=radio]), select, textarea",e);r&&r.focus()}function et(t){const n=t.currentTarget;T(n)}function rt(t){const n=t.currentTarget;T(n)}function W(t){X(document.body,"click",W);const n=t.target;f("menu.active").forEach(r=>V(n,r,t))}function at(t){const n=t.currentTarget;u(n,"active"),m&&clearTimeout(m)}function it(t){const n=t.currentTarget;D(n)}function ot(t){const n=t.currentTarget;I(n)}function ct(t){const n=t.currentTarget;D(n,t)}function ut(t){const n=t.currentTarget;I(n,t)}function st(t){const n=t.currentTarget;G(n)}function Z(){$&&clearTimeout($),$=setTimeout(()=>{A()},180)}function D(t,n){if(n&&n.key==="Enter"){const i=_(t);return k(i,"file")?i.click():void 0}const e=t,r=j(t);!k(r,"text")||(r.value=e.files?Array.from(e.files).map(i=>i.name).join(", "):"",r.readOnly=!0,r.addEventListener("keydown",ct),T(r))}function I(t,n){if(n&&n.key==="Enter"){const i=_(t);return k(i,"color")?i.click():void 0}const e=t,r=j(t);!k(r,"text")||(r.readOnly=!0,r.value=e.value,r.addEventListener("keydown",ut),T(r))}function G(t){const n=x(t),e=b("span",n),r=f("input",n);if(!r.length||!e)return;const i=parseInt(getComputedStyle(document.documentElement).getPropertyValue("--size"))||16,c=1.25*i*100/r[0].offsetWidth,o=[],s=[];for(let y=0;y<r.length;y++){const z=parseFloat(r[y].min),B=parseFloat(r[y].max),O=parseFloat(r[y].value),C=z||0,F=B||100,w=O||0,K=(w-C)*100/(F-C),H=c/2-c*K/100;o.push(K+H),s.push(w),z!==C&&(r[y].min=`${C}`),B!==F&&(r[y].max=`${F}`),O!==w&&(r[y].value=`${w}`)}let a=o[0],p=0,h=100-p-a,S=s[0],M=s[1]||0;r.length>1&&(a=Math.abs(o[1]-o[0]),p=o[1]>o[0]?o[0]:o[1],h=100-p-a,M>S&&(S=s[1]||0,M=s[0])),n.style.setProperty("---start",`${p}%`),n.style.setProperty("---end",`${h}%`),n.style.setProperty("---value1",`'${S}'`),n.style.setProperty("---value2",`'${M}'`)}async function q(t,n,e,r){if(!(!n&&(n=b(t.getAttribute("data-ui")),!n))){if(L(n,"dialog"))return await ft(t,n);if(L(n,"menu"))return V(t,n,r);if(d(n,"snackbar"))return dt(t,n,e);if(d(n,"page"))return lt(t,n);if(E(t),d(n,"active"))return u(n,"active");v(n,"active")}}function E(t){const n=x(t);if(!d(n,"tabs"))return;f("a",n).forEach(r=>u(r,"active")),v(t,"active")}function lt(t,n){E(t);const e=x(n);if(e)for(let r=0;r<e.children.length;r++)d(e.children[r],"page")&&u(e.children[r],"active");v(n,"active")}function V(t,n,e){N&&clearTimeout(N),N=setTimeout(()=>{var i,c;if(g(document.body,"click",W),E(t),d(n,"active")){if(!e)return u(n,"active");const o=e.target,s=b((i=o.getAttribute("data-ui"))!=null?i:""),a=o.closest("menu"),p=!b("menu",(c=o.closest("[data-ui]"))!=null?c:void 0);return s&&s!==a?V(o,s):!s&&!p&&a?!1:u(n,"active")}f("menu.active").forEach(o=>u(o,"active")),v(n,"active")},90)}async function ft(t,n){var a;(a=document.activeElement)==null||a.blur(),E(t);let e=_(n);const r=n,i=d(n,"active")||r.open,c=d(n,"modal"),o=x(n),s=L(o,"nav");d(e,"overlay")||(e=J({class:"overlay"}),Y(e,n),await Q(90)),e.onclick=()=>{c||(u(t,"active"),u(n,"active"),u(e,"active"),r.close())},s&&f("dialog, a, .overlay",o).forEach(h=>{u(h,"active"),h.open&&h.close()}),i?(u(t,"active"),u(e,"active"),u(n,"active"),r.close()):(!L(t,"button")&&!d(t,"button")&&!d(t,"chip")&&v(t,"active"),v(e,"active"),v(n,"active"),c?r.showModal():r.show())}function dt(t,n,e){var i;(i=document.activeElement)==null||i.blur(),E(t),f(".snackbar.active").forEach(c=>u(c,"active")),v(n,"active"),g(n,"click",at),m&&clearTimeout(m),e!==-1&&(m=setTimeout(()=>{u(n,"active")},e!=null?e:6e3))}function gt(){if(l.light&&l.dark)return l;const t=document.createElement("body");t.className="light",document.body.appendChild(t);const n=document.createElement("body");n.className="dark",document.body.appendChild(n);const e=getComputedStyle(t),r=getComputedStyle(n),i=["--primary","--on-primary","--primary-container","--on-primary-container","--secondary","--on-secondary","--secondary-container","--on-secondary-container","--tertiary","--on-tertiary","--tertiary-container","--on-tertiary-container","--error","--on-error","--error-container","--on-error-container","--background","--on-background","--surface","--on-surface","--surface-variant","--on-surface-variant","--outline","--outline-variant","--shadow","--scrim","--inverse-surface","--inverse-on-surface","--inverse-primary","--surface-dim","--surface-bright","--surface-container-lowest","--surface-container-low","--surface-container","--surface-container-high","--surface-container-highest"];for(let c=0;c<i.length;c++)l.light+=i[c]+":"+e.getPropertyValue(i[c])+";",l.dark+=i[c]+":"+r.getPropertyValue(i[c])+";";return document.body.removeChild(t),document.body.removeChild(n),l}function yt(t){if(!t||!globalThis.materialDynamicColors)return gt();const n=/dark/i.test(document.body.className)?"dark":"light";return t.light&&t.dark?(l.light=t.light,l.dark=t.dark,document.body.setAttribute("style",t[n]),t):globalThis.materialDynamicColors(t).then(e=>{const r=i=>{let c="";for(const o in i){const s=o.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g,"$1-$2").toLowerCase(),a=i[o];c+="--"+s+":"+a+";"}return c};return l.light=r(e.light),l.dark=r(e.dark),document.body.setAttribute("style",l[n]),l})}function vt(t){if(!t)return/dark/i.test(document.body.className)?"dark":"light";document.body.classList.remove("light","dark"),document.body.classList.add(t);const n=t==="light"?l.light:l.dark;return globalThis.materialDynamicColors&&document.body.setAttribute("style",n),t}function pt(){P||(P=new MutationObserver(Z),P.observe(document.body,{attributes:!0,attributeFilter:["value","max","min"],childList:!0,subtree:!0}),Z())}function A(t,n){if(t){if(t==="setup")return pt();if(t==="guid")return U();if(t==="mode")return vt(n);if(t==="theme")return yt(n);const a=b(t);if(!a)return;q(a,a,n)}f("[data-ui]").forEach(a=>g(a,"click",tt)),f(".field > label").forEach(a=>g(a,"click",nt)),f(".field > input:not([type=file], [type=color], [type=range]), .field > select, .field > textarea").forEach(a=>{g(a,"focus",et),g(a,"blur",rt),T(a)}),f(".field > input[type=file]").forEach(a=>{g(a,"change",it),D(a)}),f(".field > input[type=color]").forEach(a=>{g(a,"change",ot),I(a)}),f(".slider > input[type=range]").forEach(a=>{g(a,"input",st),G(a)})}globalThis.addEventListener&&globalThis.addEventListener("load",async()=>await A("setup"));globalThis.beercss=A;globalThis.ui=A;
3
3
  return globalThis.ui;
4
4
  })();
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "author": "Everton and Leonardo",
3
3
  "description": "Build material design interfaces in record time... without stress for devs.",
4
4
  "homepage": "https://www.beercss.com/",
5
- "version": "3.3.4",
5
+ "version": "3.4.0",
6
6
  "name": "beercss",
7
7
  "license": "MIT",
8
8
  "type": "module",
@@ -14,10 +14,11 @@
14
14
  "test": "vitest"
15
15
  },
16
16
  "dependencies": {
17
- "material-dynamic-colors": "^1.0.1",
17
+ "material-dynamic-colors": "^1.0.5",
18
18
  "vue": "^3.2.31"
19
19
  },
20
20
  "devDependencies": {
21
+ "@types/jsdom": "^21.1.3",
21
22
  "@typescript-eslint/eslint-plugin": "^5.60.1",
22
23
  "@typescript-eslint/parser": "^5.60.1",
23
24
  "@vitejs/plugin-vue": "^2.2.1",
@@ -29,6 +30,7 @@
29
30
  "eslint-plugin-promise": "^6.1.1",
30
31
  "eslint-plugin-vue": "^9.8.0",
31
32
  "fs-extra": "^10.0.1",
33
+ "jsdom": "^22.1.0",
32
34
  "stylelint": "^14.15.0",
33
35
  "stylelint-config-standard-scss": "^6.1.0",
34
36
  "typescript": "^5.0.4",
package/src/cdn/beer.ts CHANGED
@@ -137,11 +137,21 @@ function onChangeFile (e: Event): void {
137
137
  updateFile(target);
138
138
  }
139
139
 
140
+ function onChangeColor (e: Event): void {
141
+ const target = e.currentTarget as HTMLInputElement;
142
+ updateColor(target);
143
+ }
144
+
140
145
  function onKeydownFile (e: KeyboardEvent): void {
141
146
  const target = e.currentTarget as HTMLInputElement;
142
147
  updateFile(target, e);
143
148
  }
144
149
 
150
+ function onKeydownColor (e: KeyboardEvent): void {
151
+ const target = e.currentTarget as HTMLInputElement;
152
+ updateColor(target, e);
153
+ }
154
+
145
155
  function onInputRange (e: Event): void {
146
156
  const target = e.currentTarget as HTMLInputElement;
147
157
  updateRange(target);
@@ -153,22 +163,35 @@ function onMutation (): void {
153
163
  }
154
164
 
155
165
  function updateFile (target: Element, e?: KeyboardEvent): void {
156
- if (e) {
157
- if (e.key !== "Enter") return;
166
+ if (e && e.key === "Enter") {
167
+ const previousTarget = prev(target) as HTMLInputElement;
168
+ if (!hasType(previousTarget, "file")) return;
169
+ return previousTarget.click();
170
+ }
158
171
 
159
- const target = e.currentTarget as Element;
160
- const nextTarget = next(target) as HTMLInputElement;
161
- if (!hasType(nextTarget, "file")) return;
162
- return nextTarget.click();
172
+ const currentTarget = target as HTMLInputElement;
173
+ const nextTarget = next(target) as HTMLInputElement;
174
+ if (!hasType(nextTarget, "text")) return;
175
+ nextTarget.value = currentTarget.files ? Array.from(currentTarget.files).map((x) => x.name).join(", ") : "";
176
+ nextTarget.readOnly = true;
177
+ nextTarget.addEventListener("keydown", onKeydownFile)
178
+ updateInput(nextTarget);
179
+ }
180
+
181
+ function updateColor (target: Element, e?: KeyboardEvent): void {
182
+ if (e && e.key === "Enter") {
183
+ const previousTarget = prev(target) as HTMLInputElement;
184
+ if (!hasType(previousTarget, "color")) return;
185
+ return previousTarget.click();
163
186
  }
164
187
 
165
188
  const currentTarget = target as HTMLInputElement;
166
- const previousTarget = prev(target) as HTMLInputElement;
167
- if (!hasType(previousTarget, "text")) return;
168
- previousTarget.value = currentTarget.files ? Array.from(currentTarget.files).map((x) => x.name).join(", ") : "";
169
- previousTarget.readOnly = true;
170
- previousTarget.addEventListener("keydown", onKeydownFile);
171
- updateInput(previousTarget);
189
+ const nextTarget = next(target) as HTMLInputElement;
190
+ if (!hasType(nextTarget, "text")) return;
191
+ nextTarget.readOnly = true;
192
+ nextTarget.value = currentTarget.value;
193
+ nextTarget.addEventListener("keydown", onKeydownColor)
194
+ updateInput(nextTarget);
172
195
  }
173
196
 
174
197
  function updateRange (target: Element): void {
@@ -359,7 +382,7 @@ function lastTheme (): IBeerCssTheme {
359
382
 
360
383
  const fromLight = getComputedStyle(light);
361
384
  const fromDark = getComputedStyle(dark);
362
- const variables = ["--primary", "--on-primary", "--primary-container", "--on-primary-container", "--secondary", "--on-secondary", "--secondary-container", "--on-secondary-container", "--tertiary", "--on-tertiary", "--tertiary-container", "--on-tertiary-container", "--error", "--on-error", "--error-container", "--on-error-container", "--background", "--on-background", "--surface", "--on-surface", "--surface-variant", "--on-surface-variant", "--outline", "--outline-variant", "--shadow", "--scrim", "--inverse-surface", "--inverse-on-surface", "--inverse-primary"];
385
+ const variables = ["--primary", "--on-primary", "--primary-container", "--on-primary-container", "--secondary", "--on-secondary", "--secondary-container", "--on-secondary-container", "--tertiary", "--on-tertiary", "--tertiary-container", "--on-tertiary-container", "--error", "--on-error", "--error-container", "--on-error-container", "--background", "--on-background", "--surface", "--on-surface", "--surface-variant", "--on-surface-variant", "--outline", "--outline-variant", "--shadow", "--scrim", "--inverse-surface", "--inverse-on-surface", "--inverse-primary", "--surface-dim", "--surface-bright", "--surface-container-lowest", "--surface-container-low", "--surface-container", "--surface-container-high", "--surface-container-highest"];
363
386
  for (let i = 0; i < variables.length; i++) {
364
387
  _lastTheme.light += variables[i] + ":" + fromLight.getPropertyValue(variables[i]) + ";";
365
388
  _lastTheme.dark += variables[i] + ":" + fromDark.getPropertyValue(variables[i]) + ";";
@@ -433,7 +456,7 @@ function ui (selector?: string | Element, options?: string | number | IBeerCssTh
433
456
  const labels = queryAll(".field > label");
434
457
  labels.forEach((x: Element) => on(x, "click", onClickLabel));
435
458
 
436
- const inputs = queryAll(".field > input:not([type=file]):not([type=range]), .field > select, .field > textarea");
459
+ const inputs = queryAll(".field > input:not([type=file], [type=color], [type=range]), .field > select, .field > textarea");
437
460
  inputs.forEach((x: Element) => {
438
461
  on(x, "focus", onFocusInput);
439
462
  on(x, "blur", onBlurInput);
@@ -446,6 +469,12 @@ function ui (selector?: string | Element, options?: string | number | IBeerCssTh
446
469
  updateFile(x);
447
470
  });
448
471
 
472
+ const colors = queryAll(".field > input[type=color]");
473
+ colors.forEach((x: Element) => {
474
+ on(x, "change", onChangeColor);
475
+ updateColor(x);
476
+ });
477
+
449
478
  const ranges = queryAll(".slider > input[type=range]");
450
479
  ranges.forEach((x: Element) => {
451
480
  on(x, "input", onInputRange);