beercss 3.1.1 → 3.1.3

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 (22) hide show
  1. package/README.md +15 -11
  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/index.js +2 -0
  8. package/package.json +1 -1
  9. package/src/cdn/beer.css +1 -0
  10. package/src/cdn/beer.ts +10 -5
  11. package/src/cdn/elements/buttons.css +3 -10
  12. package/src/cdn/elements/icons.css +1 -1
  13. package/src/cdn/elements/pages.css +14 -47
  14. package/src/cdn/elements/selections.css +1 -1
  15. package/src/cdn/elements/toasts.css +6 -21
  16. package/src/cdn/material-symbols-outlined.woff2 +0 -0
  17. package/src/cdn/material-symbols-rounded.woff2 +0 -0
  18. package/src/cdn/material-symbols-sharp.woff2 +0 -0
  19. package/src/cdn/settings/dark.css +3 -9
  20. package/src/cdn/settings/fonts.css +19 -1
  21. package/src/cdn/settings/globals.css +9 -0
  22. package/src/cdn/settings/light.css +3 -9
package/README.md CHANGED
@@ -1,16 +1,16 @@
1
1
  <p align="center">
2
- <a href="https://www.beercss.com" target="_blank" rel="noopener noreferrer"><img src="https://www.beercss.com/logo.png" alt="Beercss logo"></a>
2
+ <a href="https://www.beercss.com" target="_blank" rel="noopener noreferrer"><img src="https://www.beercss.com/logo.png" alt="Beer CSS logo"></a>
3
3
  </p>
4
4
  <p align="center">
5
5
  <a href="https://github.com/beercss/beercss/blob/main/LICENSE"><img src="https://img.shields.io/github/license/beercss/beercss" alt="License"></a>
6
- <img src="https://img.shields.io/jsdelivr/npm/hy/beercss" alt="Downloads">
7
- <img src="https://img.badgesize.io/beercss/beercss/main/dist/cdn/beer.min.css?compression=brotli" alt="Size">
6
+ <a href="https://github.com/beercss/beercss"><img src="https://img.shields.io/jsdelivr/npm/hy/beercss" alt="Downloads"></a>
7
+ <a href="https://github.com/beercss/beercss"><img src="https://img.badgesize.io/beercss/beercss/main/dist/cdn/beer.min.css?compression=brotli" alt="Size"></a>
8
8
  <a href="https://www.npmjs.com/package/beercss"><img src="https://img.shields.io/npm/v/beercss" alt="Version"></a>
9
9
  <a href="https://github.com/beercss/beercss/pulls"><img src="https://img.shields.io/github/issues-pr/beercss/beercss" alt="Pull Request"></a>
10
10
  <a href="https://github.com/beercss/beercss/issues"><img src="https://img.shields.io/github/issues/beercss/beercss" alt="Issues"></a>
11
11
  </p>
12
12
 
13
- # Beercss
13
+ # Beer CSS
14
14
 
15
15
  Build material design interfaces in record time...
16
16
 
@@ -118,19 +118,19 @@ From jsdelivr.net.
118
118
 
119
119
  ```html
120
120
  // with html
121
- <link href="https://cdn.jsdelivr.net/npm/beercss@3.1.1/dist/cdn/beer.min.css" rel="stylesheet" />
122
- <script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.1.1/dist/cdn/beer.min.js"></script>
121
+ <link href="https://cdn.jsdelivr.net/npm/beercss@3.1.3/dist/cdn/beer.min.css" rel="stylesheet" />
122
+ <script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.1.3/dist/cdn/beer.min.js"></script>
123
123
  <script type="module" src="https://cdn.jsdelivr.net/npm/material-dynamic-colors@0.1.7/dist/cdn/material-dynamic-colors.min.js"></script>
124
124
  ```
125
125
 
126
126
  ```css
127
127
  // with css
128
- @import "https://cdn.jsdelivr.net/npm/beercss@3.1.1/dist/cdn/beer.min.css";
128
+ @import "https://cdn.jsdelivr.net/npm/beercss@3.1.3/dist/cdn/beer.min.css";
129
129
  ```
130
130
 
131
131
  ```js
132
132
  // with javascript
133
- import "https://cdn.jsdelivr.net/npm/beercss@3.1.1/dist/cdn/beer.min.js";
133
+ import "https://cdn.jsdelivr.net/npm/beercss@3.1.3/dist/cdn/beer.min.js";
134
134
  import "https://cdn.jsdelivr.net/npm/material-dynamic-colors@0.1.7/dist/cdn/material-dynamic-colors.min.js";
135
135
  ```
136
136
 
@@ -160,6 +160,8 @@ import materialDynamicColors from "material-dynamic-colors";
160
160
  // importing manually from dist
161
161
  import "beercss/dist/cdn/beer.min.css";
162
162
  import "beercss/dist/cdn/material-symbols-outlined.woff2";
163
+ import "beercss/dist/cdn/material-symbols-rounded.woff2";
164
+ import "beercss/dist/cdn/material-symbols-sharp.woff2";
163
165
  import "beercss/dist/cdn/roboto-flex-cyrillic-ext.woff2";
164
166
  import "beercss/dist/cdn/roboto-flex-cyrillic.woff2";
165
167
  import "beercss/dist/cdn/roboto-flex-greek.woff2";
@@ -174,6 +176,8 @@ import materialDynamicColors from "material-dynamic-colors/dist/cdn/material-dyn
174
176
  // importing manually from src
175
177
  import "beercss/src/cdn/beer.css";
176
178
  import "beercss/src/cdn/material-symbols-outlined.woff2";
179
+ import "beercss/src/cdn/material-symbols-rounded.woff2";
180
+ import "beercss/src/cdn/material-symbols-sharp.woff2";
177
181
  import "beercss/src/cdn/roboto-flex-cyrillic-ext.woff2";
178
182
  import "beercss/src/cdn/roboto-flex-cyrillic.woff2";
179
183
  import "beercss/src/cdn/roboto-flex-greek.woff2";
@@ -196,8 +200,8 @@ You can use this html to setup your project. See on [Codepen](https://codepen.io
196
200
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
197
201
  <meta name="google" content="notranslate">
198
202
  <title>Hello world</title>
199
- <link href="https://cdn.jsdelivr.net/npm/beercss@3.1.1/dist/cdn/beer.min.css" rel="stylesheet">
200
- <script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.1.1/dist/cdn/beer.min.js"></script>
203
+ <link href="https://cdn.jsdelivr.net/npm/beercss@3.1.3/dist/cdn/beer.min.css" rel="stylesheet">
204
+ <script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.1.3/dist/cdn/beer.min.js"></script>
201
205
  <script type="module" src="https://cdn.jsdelivr.net/npm/material-dynamic-colors@0.1.7/dist/cdn/material-dynamic-colors.min.js"></script>
202
206
  </head>
203
207
  <body class="light">
@@ -257,7 +261,7 @@ Complete documentation and examples available at:
257
261
 
258
262
  ## Contributing guide
259
263
 
260
- Hi! We are really excited that you are interested in contributing to Beercss! Before submitting your contribution, please make sure to take a moment and read through the following guidelines:
264
+ 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:
261
265
 
262
266
  https://github.com/beercss/beercss/blob/main/CONTRIBUTING.md
263
267
 
package/dist/cdn/beer.min.css CHANGED
@@ -1 +1 @@
1
- :root,body.light{--primary: #6750A4;--on-primary: #FFF;--primary-container: #EADDFF;--on-primary-container: #21005E;--secondary: #625B71;--on-secondary: #FFF;--secondary-container: #E8DEF8;--on-secondary-container: #1E192B;--tertiary: #7D5260;--on-tertiary: #FFF;--tertiary-container: #FFD8E4;--on-tertiary-container: #370B1E;--error: #B3261E;--on-error: #FFF;--error-container: #F9DEDC;--on-error-container: #370B1E;--background: #FFFBFE;--on-background: #1C1B1F;--surface: #FFFBFE;--on-surface: #1C1B1F;--outline: #79747E;--surface-variant: #E7E0EC;--on-surface-variant: #49454E;--inverse-surface: #313033;--inverse-on-surface: #F4EFF4;--body: #FFF;--overlay: rgb(0 0 0 / .5);--active: rgb(0 0 0 / .1);--elevate1: 0 .125rem .125rem 0 rgb(0 0 0 / .14), 0 .0625rem .3125rem 0 rgb(0 0 0 / .12), 0 .1875rem .0625rem -.125rem rgb(0 0 0 / .2);--elevate2: 0 .375rem .625rem 0 rgb(0 0 0 / .14), 0 .0625rem 1.125rem 0 rgb(0 0 0 / .12), 0 .1875rem .3125rem -.0625rem rgb(0 0 0 / .3);--elevate3: 0 .625rem 1rem 0 rgb(0 0 0 / .14), 0 .0625rem 1.9375rem 0 rgb(0 0 0 / .12), 0 .1875rem .5625rem 0 rgb(0 0 0 / .4);--size: 16px;--font: "Roboto Flex", "Roboto", sans-serif, system-ui, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial";--speed1: .1s;--speed2: .2s;--speed3: .3s;--speed4: .4s}body.dark{--primary: #D0BCFF;--on-primary: #371E73;--primary-container: #4F378B;--on-primary-container: #EADDFF;--secondary: #CCC2DC;--on-secondary: #332D41;--secondary-container: #4A4458;--on-secondary-container: #E8DEF8;--tertiary: #EFB8C8;--on-tertiary: #492532;--tertiary-container: #633B48;--on-tertiary-container: #FFD8E4;--error: #F2B8B5;--on-error: #601410;--error-container: #8C1D18;--on-error-container: #F9DEDC;--background: #1C1B1F;--on-background: #E6E1E5;--surface: #1C1B1F;--on-surface: #E6E1E5;--outline: #938F99;--surface-variant: #49454F;--on-surface-variant: #CAC4D0;--inverse-surface: #E6E1E5;--inverse-on-surface: #313033;--body: #000;--overlay: rgb(0 0 0 / .5);--active: rgb(255 255 255 / .2);--elevate1: 0 .125rem .125rem 0 rgb(0 0 0 / .14), 0 .0625rem .3125rem 0 rgb(0 0 0 / .12), 0 .1875rem .0625rem -.125rem rgb(0 0 0 / .2);--elevate2: 0 .375rem .625rem 0 rgb(0 0 0 / .14), 0 .0625rem 1.125rem 0 rgb(0 0 0 / .12), 0 .1875rem .3125rem -.0625rem rgb(0 0 0 / .3);--elevate3: 0 .625rem 1rem 0 rgb(0 0 0 / .14), 0 .0625rem 1.9375rem 0 rgb(0 0 0 / .12), 0 .1875rem .5625rem 0 rgb(0 0 0 / .4);--size: 16px;--font: "Roboto Flex", "Roboto", sans-serif, system-ui, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial";--speed1: .1s;--speed2: .2s;--speed3: .3s;--speed4: .4s}@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:Roboto Flex;font-style:normal;font-weight:300;font-stretch:100%;font-display:swap;src:url(roboto-flex-cyrillic-ext.woff2) format("woff2");unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Roboto Flex;font-style:normal;font-weight:300;font-stretch:100%;font-display:swap;src:url(roboto-flex-cyrillic.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Roboto Flex;font-style:normal;font-weight:300;font-stretch:100%;font-display:swap;src:url(roboto-flex-greek.woff2) format("woff2");unicode-range:U+0370-03FF}@font-face{font-family:Roboto Flex;font-style:normal;font-weight:300;font-stretch:100%;font-display:swap;src:url(roboto-flex-vietnamese.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB}@font-face{font-family:Roboto Flex;font-style:normal;font-weight:300;font-stretch:100%;font-display:swap;src:url(roboto-flex-latin-ext.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Roboto Flex;font-style:normal;font-weight:300;font-stretch:100%;font-display:swap;src:url(roboto-flex-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Roboto Flex;font-style:normal;font-weight:400;font-stretch:100%;font-display:swap;src:url(roboto-flex-cyrillic-ext.woff2) format("woff2");unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Roboto Flex;font-style:normal;font-weight:400;font-stretch:100%;font-display:swap;src:url(roboto-flex-cyrillic.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Roboto Flex;font-style:normal;font-weight:400;font-stretch:100%;font-display:swap;src:url(roboto-flex-greek.woff2) format("woff2");unicode-range:U+0370-03FF}@font-face{font-family:Roboto Flex;font-style:normal;font-weight:400;font-stretch:100%;font-display:swap;src:url(roboto-flex-vietnamese.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB}@font-face{font-family:Roboto Flex;font-style:normal;font-weight:400;font-stretch:100%;font-display:swap;src:url(roboto-flex-latin-ext.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Roboto Flex;font-style:normal;font-weight:400;font-stretch:100%;font-display:swap;src:url(roboto-flex-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Roboto Flex;font-style:normal;font-weight:500;font-stretch:100%;font-display:swap;src:url(roboto-flex-cyrillic-ext.woff2) format("woff2");unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Roboto Flex;font-style:normal;font-weight:500;font-stretch:100%;font-display:swap;src:url(roboto-flex-cyrillic.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Roboto Flex;font-style:normal;font-weight:500;font-stretch:100%;font-display:swap;src:url(roboto-flex-greek.woff2) format("woff2");unicode-range:U+0370-03FF}@font-face{font-family:Roboto Flex;font-style:normal;font-weight:500;font-stretch:100%;font-display:swap;src:url(roboto-flex-vietnamese.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB}@font-face{font-family:Roboto Flex;font-style:normal;font-weight:500;font-stretch:100%;font-display:swap;src:url(roboto-flex-latin-ext.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Roboto Flex;font-style:normal;font-weight:500;font-stretch:100%;font-display:swap;src:url(roboto-flex-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}*{-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}.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)}.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{border-bottom:.0625rem solid 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:not(i,img,video,svg){border-radius:2rem!important}.no-round{border-radius:0!important}.top-round{border-radius:2rem 2rem 0 0!important}.bottom-round{border-radius:0 0 2rem 2rem!important}.left-round{border-radius:2rem 0 0 2rem!important}.right-round{border-radius:0 2rem 2rem 0!important}.top-round.left-round{border-radius:2rem 2rem 0!important}.top-round.right-round{border-radius:2rem 2rem 2rem 0!important}.bottom-round.left-round{border-radius:2rem 0 2rem 2rem!important}.bottom-round.right-round{border-radius:0 2rem 2rem!important}.circle{border-radius:50%}:is(button,.button,.chip).circle{border-radius:2.5rem}:is(.circle,.square):not(i,img,video,svg){height:2.5rem;width:2.5rem;padding:0}:is(.circle,.square)>span{display:none}:is(.circle,.square).small:not(i,img,video,svg){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-margin{margin:0!important}.tiny-margin{padding:.25rem!important}.small-margin{margin:.5rem!important}.medium-margin,.margin{margin:1rem!important}.large-margin{margin:1.5rem!important}.no-opacity{opacity:0}.opacity{opacity:1}.no-padding{padding:0!important}.tiny-padding{padding:.25rem!important}.small-padding{padding:.5rem!important}.medium-padding,.padding{padding:1rem!important}.large-padding{padding:1.5rem!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(.dropdown){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;width:stretch}@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}.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,.wave.light:after,:is(.chip,.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,:is(.button,button).none:after,:is(.chip,.button,button).border:after,:is(.chip,.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,.badge.top.right{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}.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.bottom.right{top:auto;left:auto;bottom:0;right:0;transform:translate(50%,100%)}.badge.border{border:.0625rem solid var(--error);color:var(--error)}.badge:is(.circle,.square){padding:0;text-align:center;width:1.25rem;height:1.25rem}.badge.circle{border-radius:50%}.badge.square{border-radius:0}.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:.5rem;transition:var(--speed3) transform,var(--speed3) border-radius,var(--speed3) padding;user-select:none;gap:1rem}: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}:is(button,.button).large{height:3rem;min-width:3rem}:is(.button,button):is(.extra,.extend){height:3.5rem;min-width:3.5rem;font-size:1rem}:is(button,.button).border{border:.0625rem solid var(--primary);color:var(--primary)}:is(.button,button).extend>span{display:none}:is(.button,button).extend:hover,:is(.button,button).extend.active{width:auto;padding:0 1rem}:is(button,.button):is(:hover,.active).extend>i+span{display:inherit;margin-left:2rem}:is(.button,button):is(:hover,.active).extend>:is(img,svg)+span{display:inherit;margin-left:3rem}.button[disabled],button:disabled{opacity:.5;cursor:not-allowed}.button[disabled]{pointer-events:none}.button[disabled]:before,button:disabled:before,.button[disabled]:after,button:disabled:after{display:none}:is(.button,button).fill{background-color:var(--secondary-container)!important;color:var(--on-secondary-container)!important}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:2.5rem;min-width:2.5rem;font-size:.875rem;font-weight:500;color:var(--on-secondary);padding:0 1rem;background-color:var(--secondary);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}.chip.small{height:2rem;min-width:2rem}.chip.large{height:3rem;min-width:3rem}.chip.border{border:.0625rem solid var(--secondary);color:var(--secondary)}.chip.fill{background-color:var(--secondary-container)!important;color:var(--on-secondary-container)!important;border:none}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}}.dropdown{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;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}.dropdown.no-wrap{width:auto;white-space:nowrap!important}.dropdown.active,.dropdown:not([data-ui]):active,:not([data-ui]):focus-within>.dropdown{opacity:1;visibility:visible;transform:scale(1) translateY(100%)}.dropdown.left{left:auto;right:0}.dropdown *{white-space:inherit!important}.dropdown>a{padding:.75rem 1rem;border-radius:0}.dropdown>a:not(.row){display:block}.dropdown>a:is(:hover,:focus,.active){background-color:var(--active)}.dropdown.min{top:0;bottom:auto;transform:none!important;border-radius:inherit}.dropdown.max{position:fixed;top:0;left:0;bottom:0;right:0;height:100%;max-height:none;min-height:auto;z-index:100;border-radius:0;transform:none!important}.dropdown.no-wrap:is(.min,.max){min-width:16rem}:is(.round,.circle):not(.square).small.field>.dropdown.min,:is(.round,.circle):not(.square):is(button,.button,.chip)>.dropdown.min{border-radius:1.25rem}:is(.round,.circle):not(.square).field>.dropdown.min,:is(.round,.circle):not(.square):is(button,.button,.chip).large>.dropdown.min{border-radius:1.5rem}:is(.round,.circle):not(.square).large.field>.dropdown.min,:is(.round,.circle):not(.square):is(button,.button,.chip).extra>.dropdown.min{border-radius:1.75rem}:is(.round,.circle):not(.square).extra.field>.dropdown.min{border-radius:2rem}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.medium{height:3rem}.field.large{height:3.5rem}.field.extra{height:4rem}.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,.loader){position:absolute;top:50%;left:auto;right:1rem;transform:translateY(-50%);cursor:pointer;z-index:0}.field:is(.border,.fill,.round)>:is(i,img,svg,.loader){left:auto;right:1rem}.field>:is(i,img,svg,.loader):first-child{left:1rem;right:auto}.field:is(.border,.fill,.round)>:is(i,img,svg,.loader):first-child{left:1rem;right:auto}.field.invalid>i{color:var(--error)}.field>.loader{border-width:.1875rem;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[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{border-radius:.25rem .25rem 0 0}.field.border{border-radius:.25rem}.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>:disabled{opacity:.5;cursor:not-allowed}.field.small.textarea{height:4.5rem}.field.textarea,.field.medium.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>input,.field.label>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,.field.label.medium>textarea{padding-top:1.375rem}.field.label.large>textarea{padding-top:1.625rem}.field.label.extra>textarea{padding-top:1.875rem}.field.small:not(.label)>textarea,.field.small.border:not(.fill)>textarea{padding-top:.625rem}.field:not(.label)>textarea,.field.border:not(.fill)>textarea,.field.medium:not(.label)>textarea,.field.medium.border:not(.fill)>textarea{padding-top:.875rem}.field.large:not(.label)>textarea,.field.large.border:not(.fill)>textarea{padding-top:1.125rem}.field.extra:not(.label)>textarea,.field.extra.border:not(.fill)>textarea{padding-top:1.375rem}.field.label>label{position:absolute;top:50%;left:1rem;font-size:1rem;transform:translateY(-50%);transition:var(--speed2) all,0s background-color;z-index:0}.field.label.textarea.small>label{top:1.25rem}.field.label.textarea>label,.field.label.textarea.medium>label{top:1.5rem}.field.label.textarea.large>label{top:1.75rem}.field.label.textarea.extra>label{top:2rem}.field.label.round>label{left:1.5rem}.field.label.prefix>label{left:3rem}.field.label>label.active,.field.label>[placeholder]:focus~label,.field.label>[placeholder]:not(:placeholder-shown)~label{font-size:.75rem;transform:translateY(-120%);z-index:1}.field.label.border:not(.fill)>label.active,.field.label.border:not(.fill)>[placeholder]:focus~label,.field.label.border:not(.fill)>[placeholder]:not(:placeholder-shown)~label{font-size:.75rem;top:0%;left:1rem;transform:translateY(-50%);z-index:1}.field.label.border.round:not(.fill)>label.active,.field.label.border.round:not(.fill)>[placeholder]:focus~label,.field.label.border.round:not(.fill)>[placeholder]:not(:placeholder-shown)~label{left:1.5rem;z-index:1}.field.label>:focus~label{color:var(--primary)}.field.invalid>label{color:var(--error)!important}.field>label.required:after,.field.required>label:after{content:" * "}.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{max-height:100%;height:100%}.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:Material Symbols Outlined;font-weight:400;font-style:normal;font-size:var(---size);letter-spacing:normal;text-transform:none;display:inline-flex;align-items: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}i.tiny{---size: 1rem}i.small{---size: 1.25rem}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}.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).fixed{position:sticky;top:0;bottom:0;left:0;right:0;z-index:12;background-color:inherit;border-radius:0}: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(.modal,.dropdown)>: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(.modal,article,.padding,.medium-padding)>header.fixed{transform:translateY(-1rem)}:is(.modal,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)}.loader{---translate-y: 0;display:inline-block;width:2.5rem;height:2.5rem;border-radius:50%;border:.25rem solid var(--primary);clip-path:polygon(50% 50%,0% 0%,50% 0%,50% 0%,50% 0%,50% 0%,50% 0%,50% 0%,50% 0%);animation:1.6s to-loader linear infinite;background:none!important}.loader.small{width:1.5rem;height:1.5rem;border-width:.1875rem}.loader.large{width:3.5rem;height:3.5rem;border-width:.3125rem}.loader.red{border-color:#f44336}.loader.pink{border-color:#e91e63}.loader.purple{border-color:#9c27b0}.loader.deep-purple{border-color:#673ab7}.loader.indigo{border-color:#3f51b5}.loader.blue{border-color:#2196f3}.loader.light-blue{border-color:#03a9f4}.loader.cyan{border-color:#00bcd4}.loader.teal{border-color:#009688}.loader.green{border-color:#4caf50}.loader.light-green{border-color:#8bc34a}.loader.lime{border-color:#cddc39}.loader.yellow{border-color:#ffeb3b}.loader.amber{border-color:#ffc107}.loader.orange{border-color:#ff9800}.loader.deep-orange{border-color:#ff5722}.loader.brown{border-color:#795548}.loader.blue-grey{border-color:#607d8b}.loader.grey{border-color:#9e9e9e}.loader.black{border-color:#000}.loader.white{border-color:#fff}.field>.loader{---translate-y: -50%}@keyframes to-loader{0%{transform:translateY(var(---translate-y)) 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% 50%,100% 50%,100% 50%,100% 50%,100% 50%)}30%{clip-path:polygon(50% 50%,0% 0%,50% 0%,100% 0%,100% 50%,100% 100%,50% 100%,50% 100%,50% 100%)}40%{clip-path:polygon(50% 50%,0% 0%,50% 0%,100% 0%,100% 50%,100% 100%,50% 100%,0% 100%,0% 50%)}50%{clip-path:polygon(50% 50%,50% 0%,50% 0%,100% 0%,100% 50%,100% 100%,50% 100%,0% 100%,0% 50%)}60%{clip-path:polygon(50% 50%,100% 50%,100% 50%,100% 50%,100% 50%,100% 100%,50% 100%,0% 100%,0% 50%)}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:translateY(var(---translate-y)) 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%)}}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).circle{border-radius:50%}: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)>:is(img,svg).responsive{width:2.5rem}:is(button,.button,.chip):not(.transparent)>:is(img,svg).responsive{border:.25rem solid transparent}:is(button,.button,.chip).small>:is(img,svg).responsive{width:2rem}:is(button,.button,.chip).large>:is(img,svg).responsive{width:3rem}:is(button,.button,.chip).extra>:is(img,svg).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,td) :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)>:is(img,svg).responsive{margin:0 -.5rem}:is(button,.button)>:is(img,svg).responsive{margin-left:-1.5rem}:is(button,.button)>span+:is(img,svg).responsive{margin-right:-1.5rem}.chip>:is(img,svg).responsive{margin-left:-1rem}.chip>span+:is(img,svg).responsive{margin-right:-1rem}:is(.circle,.square)>:is(img,svg).responsive{margin:0}.extend>:is(i,img,svg){margin:0;position:absolute;left:1rem}.extend>:is(img,svg).responsive{left:0;width:3.5rem}.extend.border>:is(img,svg).responsive{width:3.375rem}.modal{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)}.modal:not(.left,.right,.top,.bottom){border-radius:.75rem}.modal.small{width:25%;height:25%}.modal.medium{width:50%;height:50%}.modal.large{width:75%;height:75%}.modal.active{opacity:1;visibility:visible;transform:translate(-50%)}.modal.active:is(.left,.right,.top,.bottom,.max){transform:translate(0)}.modal.top{opacity:1;top:0;left:0;right:auto;bottom:auto;height:auto;width:100%;min-width:auto;max-height:100%;transform:translateY(-100%)}.modal.left{opacity:1;top:0;left:0;right:auto;bottom:auto;width:auto;height:100%;max-height:100%;transform:translate(-100%)}.modal.right{opacity:1;top:0;left:auto;right:0;bottom:auto;width:auto;height:100%;max-height:100%;transform:translate(100%)}.modal.bottom{opacity:1;top:auto;left:0;right:auto;bottom:0;height:auto;width:100%;min-width:auto;max-height:100%;transform:translateY(100%)}.modal.max{top:0;left:0;right:auto;bottom:auto;width:100%;height:100%;max-width:100%;max-height:100%;transform:translateY(4rem);border-radius:0}.modal.small:is(.left,.right){width:20rem}.modal.medium:is(.left,.right){width:32rem}.modal.large:is(.left,.right){width:44rem}.modal.small:is(.top,.bottom){height:16rem}.modal.medium:is(.top,.bottom){height:24rem}.modal.large:is(.top,.bottom){height:32rem}nav>.modal,nav.left>.modal{z-index:0;text-align:left;overflow-y:auto;background-color:inherit;padding:1rem 1rem 1rem 5rem}nav.right>.modal{padding:1rem 5rem 1rem 1rem}nav.top>.modal{padding:5rem 3rem 1rem}nav.bottom>.modal{padding:1rem 3rem 5rem}.modal>a.row:is(:hover,.active){background-color:var(--secondary-container)}.modal>.row{padding:.75rem}nav,.row{display:flex;align-items:center;justify-content:flex-start;white-space:nowrap;border-radius:0;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}nav *,.row *{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(.modal,.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>.modal{padding-left:5.5rem}nav.right>.modal{padding-right:5.5rem}nav.top>.modal{padding-top:5.5rem}nav.bottom>.modal{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,.modal):not(.active) .page.active{opacity:0;position:absolute;display:none}.page.active{opacity:1;position:inherit;display:inherit}.page.top.active{animation:var(--speed4) page-to-bottom ease}.page.bottom.active{animation:var(--speed4) page-to-top ease}.page.left.active{animation:var(--speed4) page-to-right ease}.page.right.active{animation:var(--speed4) page-to-left ease}@keyframes page-to-bottom{0%{opacity:0;transform:translateY(-4rem)}to{opacity:1;transform:translateY(0)}}@keyframes page-to-top{0%{opacity:0;transform:translateY(4rem)}to{opacity:1;transform:translateY(0)}}@keyframes page-to-left{0%{opacity:0;transform:translate(4rem)}to{opacity:1;transform:translate(0)}}@keyframes page-to-right{0%{opacity:0;transform:translate(-4rem)}to{opacity:1;transform:translate(0)}}.progress{position:absolute;background-color:var(--active);top:0;bottom:0;left:0;right:0;transition:var(--speed4) clip-path;clip-path:polygon(0% 0%,0% 0%,0% 0%,0% 0%)}.progress.left{clip-path:polygon(0% 0%,0% 100%,0% 100%,0% 0%)}.progress.right{clip-path:polygon(100% 0%,100% 100%,100% 100%,100% 0%)}.progress.top{clip-path:polygon(0% 0%,100% 0%,100% 0%,0% 0%)}.progress.bottom{clip-path:polygon(0% 100%,100% 100%,100% 100%,0% 100%)}.progress+*{margin-top:0}.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:Material Symbols Outlined;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{display:flex;align-items:center!important;width:auto;margin:1.125rem;flex:auto}.slider.small{width:4rem;flex:none}.slider.medium{width:8rem;flex:none}.slider.large{width:12rem;flex:none}.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;border-radius:1rem;background:var(--active);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+span{background:#9E9E9E}.slider>span{position:absolute;top:calc(50% - .1875rem);height:.375rem;border-radius:1rem;background:var(--primary);z-index:0}.field>.slider{width:100%}table{width:100%;border-spacing:0;font-size:.875rem;color:var(--on-background);text-align:left;border-radius:0}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}td>:is(.button,button,.none,.chip),td>nav>:is(.button,button,.none,.chip){min-height:1.5rem;max-height:1.5rem}td>:is(.circle,.square):not(.tiny,.small,.medium,.large,.extra),td>nav>:is(.circle,.square):not(.tiny,.small,.medium,.large,.extra){min-width:1.5rem;max-width:1.5rem;min-height:1.5rem;max-height:1.5rem}.tabs{display:flex;white-space:nowrap;border-bottom:.0625rem solid var(--outline);border-radius:0}.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.medium>a{min-height:2.5rem}.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}.toast{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(--on-error);background-color:var(--error-background);padding:1rem;opacity:1;cursor:pointer;transform:translate(-50%);text-align:left;align-items:center;border-radius:.25rem;gap:.5rem}.toast.top{top:6rem;bottom:auto}.toast.bottom{top:auto;bottom:4.5rem}.toast.active{visibility:visible;animation:var(--speed2) toast-to-top}.toast.active.top{animation:var(--speed2) toast-to-bottom}@keyframes toast-to-top{0%{opacity:0;transform:translate(-50%,1rem)}to{opacity:1;transform:translate(-50%)}}@keyframes toast-to-bottom{0%{opacity:0;transform:translate(-50%,-1rem)}to{opacity:1;transform:translate(-50%)}}@media only screen and (min-width: 993px){.toast{width:40%}}.tooltip{---space: 0;visibility:hidden;display:flex;align-items:center;justify-content:center;gap:.5rem;background-color:#000000e6;color:#fff;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}.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.small-space,.tooltip.space{---space: -.5rem}.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}.dropdown:active~.tooltip,:is(button,.button):focus>.dropdown~.tooltip,.field>:focus~.dropdown~.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}: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: "Roboto Flex", "Roboto", sans-serif, system-ui, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial";--font-icon: "Material Symbols Outlined";--speed1: .1s;--speed2: .2s;--speed3: .3s;--speed4: .4s}:root,body.light{--primary: #6750A4;--on-primary: #FFF;--primary-container: #EADDFF;--on-primary-container: #21005E;--secondary: #625B71;--on-secondary: #FFF;--secondary-container: #E8DEF8;--on-secondary-container: #1E192B;--tertiary: #7D5260;--on-tertiary: #FFF;--tertiary-container: #FFD8E4;--on-tertiary-container: #370B1E;--error: #B3261E;--on-error: #FFF;--error-container: #F9DEDC;--on-error-container: #370B1E;--background: #FFFBFE;--on-background: #1C1B1F;--surface: #FFFBFE;--on-surface: #1C1B1F;--outline: #79747E;--surface-variant: #E7E0EC;--on-surface-variant: #49454E;--inverse-surface: #313033;--inverse-on-surface: #F4EFF4;--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: #D0BCFF;--on-primary: #371E73;--primary-container: #4F378B;--on-primary-container: #EADDFF;--secondary: #CCC2DC;--on-secondary: #332D41;--secondary-container: #4A4458;--on-secondary-container: #E8DEF8;--tertiary: #EFB8C8;--on-tertiary: #492532;--tertiary-container: #633B48;--on-tertiary-container: #FFD8E4;--error: #F2B8B5;--on-error: #601410;--error-container: #8C1D18;--on-error-container: #F9DEDC;--background: #1C1B1F;--on-background: #E6E1E5;--surface: #1C1B1F;--on-surface: #E6E1E5;--outline: #938F99;--surface-variant: #49454F;--on-surface-variant: #CAC4D0;--inverse-surface: #E6E1E5;--inverse-on-surface: #313033;--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")}@font-face{font-family:Roboto Flex;font-style:normal;font-weight:300;font-stretch:100%;font-display:swap;src:url(roboto-flex-cyrillic-ext.woff2) format("woff2");unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Roboto Flex;font-style:normal;font-weight:300;font-stretch:100%;font-display:swap;src:url(roboto-flex-cyrillic.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Roboto Flex;font-style:normal;font-weight:300;font-stretch:100%;font-display:swap;src:url(roboto-flex-greek.woff2) format("woff2");unicode-range:U+0370-03FF}@font-face{font-family:Roboto Flex;font-style:normal;font-weight:300;font-stretch:100%;font-display:swap;src:url(roboto-flex-vietnamese.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB}@font-face{font-family:Roboto Flex;font-style:normal;font-weight:300;font-stretch:100%;font-display:swap;src:url(roboto-flex-latin-ext.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Roboto Flex;font-style:normal;font-weight:300;font-stretch:100%;font-display:swap;src:url(roboto-flex-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Roboto Flex;font-style:normal;font-weight:400;font-stretch:100%;font-display:swap;src:url(roboto-flex-cyrillic-ext.woff2) format("woff2");unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Roboto Flex;font-style:normal;font-weight:400;font-stretch:100%;font-display:swap;src:url(roboto-flex-cyrillic.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Roboto Flex;font-style:normal;font-weight:400;font-stretch:100%;font-display:swap;src:url(roboto-flex-greek.woff2) format("woff2");unicode-range:U+0370-03FF}@font-face{font-family:Roboto Flex;font-style:normal;font-weight:400;font-stretch:100%;font-display:swap;src:url(roboto-flex-vietnamese.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB}@font-face{font-family:Roboto Flex;font-style:normal;font-weight:400;font-stretch:100%;font-display:swap;src:url(roboto-flex-latin-ext.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Roboto Flex;font-style:normal;font-weight:400;font-stretch:100%;font-display:swap;src:url(roboto-flex-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Roboto Flex;font-style:normal;font-weight:500;font-stretch:100%;font-display:swap;src:url(roboto-flex-cyrillic-ext.woff2) format("woff2");unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Roboto Flex;font-style:normal;font-weight:500;font-stretch:100%;font-display:swap;src:url(roboto-flex-cyrillic.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Roboto Flex;font-style:normal;font-weight:500;font-stretch:100%;font-display:swap;src:url(roboto-flex-greek.woff2) format("woff2");unicode-range:U+0370-03FF}@font-face{font-family:Roboto Flex;font-style:normal;font-weight:500;font-stretch:100%;font-display:swap;src:url(roboto-flex-vietnamese.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB}@font-face{font-family:Roboto Flex;font-style:normal;font-weight:500;font-stretch:100%;font-display:swap;src:url(roboto-flex-latin-ext.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Roboto Flex;font-style:normal;font-weight:500;font-stretch:100%;font-display:swap;src:url(roboto-flex-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}*{-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}.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)}.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{border-bottom:.0625rem solid 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:not(i,img,video,svg){border-radius:2rem!important}.no-round{border-radius:0!important}.top-round{border-radius:2rem 2rem 0 0!important}.bottom-round{border-radius:0 0 2rem 2rem!important}.left-round{border-radius:2rem 0 0 2rem!important}.right-round{border-radius:0 2rem 2rem 0!important}.top-round.left-round{border-radius:2rem 2rem 0!important}.top-round.right-round{border-radius:2rem 2rem 2rem 0!important}.bottom-round.left-round{border-radius:2rem 0 2rem 2rem!important}.bottom-round.right-round{border-radius:0 2rem 2rem!important}.circle{border-radius:50%}:is(button,.button,.chip).circle{border-radius:2.5rem}:is(.circle,.square):not(i,img,video,svg){height:2.5rem;width:2.5rem;padding:0}:is(.circle,.square)>span{display:none}:is(.circle,.square).small:not(i,img,video,svg){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-margin{margin:0!important}.tiny-margin{padding:.25rem!important}.small-margin{margin:.5rem!important}.medium-margin,.margin{margin:1rem!important}.large-margin{margin:1.5rem!important}.no-opacity{opacity:0}.opacity{opacity:1}.no-padding{padding:0!important}.tiny-padding{padding:.25rem!important}.small-padding{padding:.5rem!important}.medium-padding,.padding{padding:1rem!important}.large-padding{padding:1.5rem!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(.dropdown){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;width:stretch}@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}.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,.wave.light:after,:is(.chip,.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,:is(.button,button).none:after,:is(.chip,.button,button).border:after,:is(.chip,.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,.badge.top.right{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}.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.bottom.right{top:auto;left:auto;bottom:0;right:0;transform:translate(50%,100%)}.badge.border{border:.0625rem solid var(--error);color:var(--error)}.badge:is(.circle,.square){padding:0;text-align:center;width:1.25rem;height:1.25rem}.badge.circle{border-radius:50%}.badge.square{border-radius:0}.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:.5rem;transition:var(--speed3) transform,var(--speed3) border-radius,var(--speed3) padding;user-select:none;gap:1rem}: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}:is(button,.button).large{height:3rem;min-width:3rem}:is(.button,button):is(.extra,.extend){height:3.5rem;min-width:3.5rem;font-size:1rem}:is(button,.button).border{border:.0625rem solid var(--primary);color:var(--primary)}:is(.button,button).extend>span{display:none}:is(.button,button).extend:hover,:is(.button,button).extend.active{width:auto;padding:0 1rem}:is(button,.button):is(:hover,.active).extend>i+span{display:inherit;margin-left:2rem}:is(.button,button):is(:hover,.active).extend>:is(img,svg)+span{display:inherit;margin-left:3rem}:is(.button,button):is(:disabled,[disabled]){opacity:.5;cursor:not-allowed}:is(.button,button):is(:disabled,[disabled]):before,:is(.button,button):is(:disabled,[disabled]):after{display:none}:is(.button,button).fill{background-color:var(--secondary-container)!important;color:var(--on-secondary-container)!important}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:2.5rem;min-width:2.5rem;font-size:.875rem;font-weight:500;color:var(--on-secondary);padding:0 1rem;background-color:var(--secondary);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}.chip.small{height:2rem;min-width:2rem}.chip.large{height:3rem;min-width:3rem}.chip.border{border:.0625rem solid var(--secondary);color:var(--secondary)}.chip.fill{background-color:var(--secondary-container)!important;color:var(--on-secondary-container)!important;border:none}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}}.dropdown{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;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}.dropdown.no-wrap{width:auto;white-space:nowrap!important}.dropdown.active,.dropdown:not([data-ui]):active,:not([data-ui]):focus-within>.dropdown{opacity:1;visibility:visible;transform:scale(1) translateY(100%)}.dropdown.left{left:auto;right:0}.dropdown *{white-space:inherit!important}.dropdown>a{padding:.75rem 1rem;border-radius:0}.dropdown>a:not(.row){display:block}.dropdown>a:is(:hover,:focus,.active){background-color:var(--active)}.dropdown.min{top:0;bottom:auto;transform:none!important;border-radius:inherit}.dropdown.max{position:fixed;top:0;left:0;bottom:0;right:0;height:100%;max-height:none;min-height:auto;z-index:100;border-radius:0;transform:none!important}.dropdown.no-wrap:is(.min,.max){min-width:16rem}:is(.round,.circle):not(.square).small.field>.dropdown.min,:is(.round,.circle):not(.square):is(button,.button,.chip)>.dropdown.min{border-radius:1.25rem}:is(.round,.circle):not(.square).field>.dropdown.min,:is(.round,.circle):not(.square):is(button,.button,.chip).large>.dropdown.min{border-radius:1.5rem}:is(.round,.circle):not(.square).large.field>.dropdown.min,:is(.round,.circle):not(.square):is(button,.button,.chip).extra>.dropdown.min{border-radius:1.75rem}:is(.round,.circle):not(.square).extra.field>.dropdown.min{border-radius:2rem}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.medium{height:3rem}.field.large{height:3.5rem}.field.extra{height:4rem}.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,.loader){position:absolute;top:50%;left:auto;right:1rem;transform:translateY(-50%);cursor:pointer;z-index:0}.field:is(.border,.fill,.round)>:is(i,img,svg,.loader){left:auto;right:1rem}.field>:is(i,img,svg,.loader):first-child{left:1rem;right:auto}.field:is(.border,.fill,.round)>:is(i,img,svg,.loader):first-child{left:1rem;right:auto}.field.invalid>i{color:var(--error)}.field>.loader{border-width:.1875rem;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[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{border-radius:.25rem .25rem 0 0}.field.border{border-radius:.25rem}.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>:disabled{opacity:.5;cursor:not-allowed}.field.small.textarea{height:4.5rem}.field.textarea,.field.medium.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>input,.field.label>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,.field.label.medium>textarea{padding-top:1.375rem}.field.label.large>textarea{padding-top:1.625rem}.field.label.extra>textarea{padding-top:1.875rem}.field.small:not(.label)>textarea,.field.small.border:not(.fill)>textarea{padding-top:.625rem}.field:not(.label)>textarea,.field.border:not(.fill)>textarea,.field.medium:not(.label)>textarea,.field.medium.border:not(.fill)>textarea{padding-top:.875rem}.field.large:not(.label)>textarea,.field.large.border:not(.fill)>textarea{padding-top:1.125rem}.field.extra:not(.label)>textarea,.field.extra.border:not(.fill)>textarea{padding-top:1.375rem}.field.label>label{position:absolute;top:50%;left:1rem;font-size:1rem;transform:translateY(-50%);transition:var(--speed2) all,0s background-color;z-index:0}.field.label.textarea.small>label{top:1.25rem}.field.label.textarea>label,.field.label.textarea.medium>label{top:1.5rem}.field.label.textarea.large>label{top:1.75rem}.field.label.textarea.extra>label{top:2rem}.field.label.round>label{left:1.5rem}.field.label.prefix>label{left:3rem}.field.label>label.active,.field.label>[placeholder]:focus~label,.field.label>[placeholder]:not(:placeholder-shown)~label{font-size:.75rem;transform:translateY(-120%);z-index:1}.field.label.border:not(.fill)>label.active,.field.label.border:not(.fill)>[placeholder]:focus~label,.field.label.border:not(.fill)>[placeholder]:not(:placeholder-shown)~label{font-size:.75rem;top:0%;left:1rem;transform:translateY(-50%);z-index:1}.field.label.border.round:not(.fill)>label.active,.field.label.border.round:not(.fill)>[placeholder]:focus~label,.field.label.border.round:not(.fill)>[placeholder]:not(:placeholder-shown)~label{left:1.5rem;z-index:1}.field.label>:focus~label{color:var(--primary)}.field.invalid>label{color:var(--error)!important}.field>label.required:after,.field.required>label:after{content:" * "}.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{max-height:100%;height:100%}.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;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}i.tiny{---size: 1rem}i.small{---size: 1.25rem}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}.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).fixed{position:sticky;top:0;bottom:0;left:0;right:0;z-index:12;background-color:inherit;border-radius:0}: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(.modal,.dropdown)>: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(.modal,article,.padding,.medium-padding)>header.fixed{transform:translateY(-1rem)}:is(.modal,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)}.loader{---translate-y: 0;display:inline-block;width:2.5rem;height:2.5rem;border-radius:50%;border:.25rem solid var(--primary);clip-path:polygon(50% 50%,0% 0%,50% 0%,50% 0%,50% 0%,50% 0%,50% 0%,50% 0%,50% 0%);animation:1.6s to-loader linear infinite;background:none!important}.loader.small{width:1.5rem;height:1.5rem;border-width:.1875rem}.loader.large{width:3.5rem;height:3.5rem;border-width:.3125rem}.loader.red{border-color:#f44336}.loader.pink{border-color:#e91e63}.loader.purple{border-color:#9c27b0}.loader.deep-purple{border-color:#673ab7}.loader.indigo{border-color:#3f51b5}.loader.blue{border-color:#2196f3}.loader.light-blue{border-color:#03a9f4}.loader.cyan{border-color:#00bcd4}.loader.teal{border-color:#009688}.loader.green{border-color:#4caf50}.loader.light-green{border-color:#8bc34a}.loader.lime{border-color:#cddc39}.loader.yellow{border-color:#ffeb3b}.loader.amber{border-color:#ffc107}.loader.orange{border-color:#ff9800}.loader.deep-orange{border-color:#ff5722}.loader.brown{border-color:#795548}.loader.blue-grey{border-color:#607d8b}.loader.grey{border-color:#9e9e9e}.loader.black{border-color:#000}.loader.white{border-color:#fff}.field>.loader{---translate-y: -50%}@keyframes to-loader{0%{transform:translateY(var(---translate-y)) 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% 50%,100% 50%,100% 50%,100% 50%,100% 50%)}30%{clip-path:polygon(50% 50%,0% 0%,50% 0%,100% 0%,100% 50%,100% 100%,50% 100%,50% 100%,50% 100%)}40%{clip-path:polygon(50% 50%,0% 0%,50% 0%,100% 0%,100% 50%,100% 100%,50% 100%,0% 100%,0% 50%)}50%{clip-path:polygon(50% 50%,50% 0%,50% 0%,100% 0%,100% 50%,100% 100%,50% 100%,0% 100%,0% 50%)}60%{clip-path:polygon(50% 50%,100% 50%,100% 50%,100% 50%,100% 50%,100% 100%,50% 100%,0% 100%,0% 50%)}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:translateY(var(---translate-y)) 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%)}}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).circle{border-radius:50%}: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)>:is(img,svg).responsive{width:2.5rem}:is(button,.button,.chip):not(.transparent)>:is(img,svg).responsive{border:.25rem solid transparent}:is(button,.button,.chip).small>:is(img,svg).responsive{width:2rem}:is(button,.button,.chip).large>:is(img,svg).responsive{width:3rem}:is(button,.button,.chip).extra>:is(img,svg).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,td) :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)>:is(img,svg).responsive{margin:0 -.5rem}:is(button,.button)>:is(img,svg).responsive{margin-left:-1.5rem}:is(button,.button)>span+:is(img,svg).responsive{margin-right:-1.5rem}.chip>:is(img,svg).responsive{margin-left:-1rem}.chip>span+:is(img,svg).responsive{margin-right:-1rem}:is(.circle,.square)>:is(img,svg).responsive{margin:0}.extend>:is(i,img,svg){margin:0;position:absolute;left:1rem}.extend>:is(img,svg).responsive{left:0;width:3.5rem}.extend.border>:is(img,svg).responsive{width:3.375rem}.modal{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)}.modal:not(.left,.right,.top,.bottom){border-radius:.75rem}.modal.small{width:25%;height:25%}.modal.medium{width:50%;height:50%}.modal.large{width:75%;height:75%}.modal.active{opacity:1;visibility:visible;transform:translate(-50%)}.modal.active:is(.left,.right,.top,.bottom,.max){transform:translate(0)}.modal.top{opacity:1;top:0;left:0;right:auto;bottom:auto;height:auto;width:100%;min-width:auto;max-height:100%;transform:translateY(-100%)}.modal.left{opacity:1;top:0;left:0;right:auto;bottom:auto;width:auto;height:100%;max-height:100%;transform:translate(-100%)}.modal.right{opacity:1;top:0;left:auto;right:0;bottom:auto;width:auto;height:100%;max-height:100%;transform:translate(100%)}.modal.bottom{opacity:1;top:auto;left:0;right:auto;bottom:0;height:auto;width:100%;min-width:auto;max-height:100%;transform:translateY(100%)}.modal.max{top:0;left:0;right:auto;bottom:auto;width:100%;height:100%;max-width:100%;max-height:100%;transform:translateY(4rem);border-radius:0}.modal.small:is(.left,.right){width:20rem}.modal.medium:is(.left,.right){width:32rem}.modal.large:is(.left,.right){width:44rem}.modal.small:is(.top,.bottom){height:16rem}.modal.medium:is(.top,.bottom){height:24rem}.modal.large:is(.top,.bottom){height:32rem}nav>.modal,nav.left>.modal{z-index:0;text-align:left;overflow-y:auto;background-color:inherit;padding:1rem 1rem 1rem 5rem}nav.right>.modal{padding:1rem 5rem 1rem 1rem}nav.top>.modal{padding:5rem 3rem 1rem}nav.bottom>.modal{padding:1rem 3rem 5rem}.modal>a.row:is(:hover,.active){background-color:var(--secondary-container)}.modal>.row{padding:.75rem}nav,.row{display:flex;align-items:center;justify-content:flex-start;white-space:nowrap;border-radius:0;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}nav *,.row *{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(.modal,.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>.modal{padding-left:5.5rem}nav.right>.modal{padding-right:5.5rem}nav.top>.modal{padding-top:5.5rem}nav.bottom>.modal{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,.modal):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:absolute;background-color:var(--active);top:0;bottom:0;left:0;right:0;transition:var(--speed4) clip-path;clip-path:polygon(0% 0%,0% 0%,0% 0%,0% 0%)}.progress.left{clip-path:polygon(0% 0%,0% 100%,0% 100%,0% 0%)}.progress.right{clip-path:polygon(100% 0%,100% 100%,100% 100%,100% 0%)}.progress.top{clip-path:polygon(0% 0%,100% 0%,100% 0%,0% 0%)}.progress.bottom{clip-path:polygon(0% 100%,100% 100%,100% 100%,0% 100%)}.progress+*{margin-top:0}.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{display:flex;align-items:center!important;width:auto;margin:1.125rem;flex:auto}.slider.small{width:4rem;flex:none}.slider.medium{width:8rem;flex:none}.slider.large{width:12rem;flex:none}.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;border-radius:1rem;background:var(--active);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+span{background:#9E9E9E}.slider>span{position:absolute;top:calc(50% - .1875rem);height:.375rem;border-radius:1rem;background:var(--primary);z-index:0}.field>.slider{width:100%}table{width:100%;border-spacing:0;font-size:.875rem;color:var(--on-background);text-align:left;border-radius:0}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}td>:is(.button,button,.none,.chip),td>nav>:is(.button,button,.none,.chip){min-height:1.5rem;max-height:1.5rem}td>:is(.circle,.square):not(.tiny,.small,.medium,.large,.extra),td>nav>:is(.circle,.square):not(.tiny,.small,.medium,.large,.extra){min-width:1.5rem;max-width:1.5rem;min-height:1.5rem;max-height:1.5rem}.tabs{display:flex;white-space:nowrap;border-bottom:.0625rem solid var(--outline);border-radius:0}.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.medium>a{min-height:2.5rem}.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}.toast{---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(--on-error);background-color:var(--error-background);padding:1rem;opacity:1;cursor:pointer;transform:translate(-50%);text-align:left;align-items:center;border-radius:.25rem;gap:.5rem}.toast.top{top:6rem;bottom:auto}.toast.active{visibility:visible;animation:var(--speed2) to-toast}.toast.active.top{---transform: translate(-50%, -1rem)}@keyframes to-toast{0%{opacity:0;transform:var(---transform)}to{opacity:1;transform:translate(-50%)}}@media only screen and (min-width: 993px){.toast{width:40%}}.tooltip{---space: 0;visibility:hidden;display:flex;align-items:center;justify-content:center;gap:.5rem;background-color:#000000e6;color:#fff;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}.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.small-space,.tooltip.space{---space: -.5rem}.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}.dropdown:active~.tooltip,:is(button,.button):focus>.dropdown~.tooltip,.field>:focus~.dropdown~.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}: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)}
package/dist/cdn/beer.min.js CHANGED
@@ -1 +1 @@
1
- export default(()=>{const y=globalThis;let m=null,E=null,C=null;const l={light:"",dark:""},M=async t=>await new Promise(e=>setTimeout(e,t)),D=()=>"fxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,t=>{const e=Math.random()*16|0;return(t==="x"?e:e&3|8).toString(16)}),v=(t,e)=>{try{return typeof t=="string"?(e!=null?e:document).querySelector(t):t}catch{}},d=(t,e)=>{try{return typeof t=="string"?(e!=null?e:document).querySelectorAll(t):t}catch{}},c=(t,e)=>t?t.classList.contains(e):!1,p=(t,e)=>{!t||t.classList.add(e)},s=(t,e)=>{!t||t.classList.remove(e)},g=(t,e,n)=>{t.addEventListener(e,n,!0)},_=(t,e,n)=>{t.removeEventListener(e,n,!0)},q=(t,e)=>{if(!!e)return e.parentNode.insertBefore(t,e)},L=t=>{if(!!t)return t.previousElementSibling},B=t=>{if(!!t)return t.nextElementSibling},h=t=>{if(!!t)return t.parentElement},I=t=>{const e=document.createElement("div");for(const n in t)e[n]=t[n];return e},T=t=>{const e=t,n=h(t),r=v("label",n),o=c(n,"border")&&!c(n,"fill");if(document.activeElement===t||e.value||/date|time/.test(e.type)){if(o&&r){let u=c(r,"active")?r.offsetWidth:Math.round(r.offsetWidth/1.33);u=u/16;const a=c(n,"round")?1.25:.75,f=u+a+.5;e.style.clipPath=`polygon(0% 0%, ${a}rem 0%, ${a}rem 0.5rem, ${f}rem 0.5rem, ${f}rem 0%, 100% 0%, 100% 100%, 0% 100%)`}else e.style.clipPath="";p(r,"active")}else s(r,"active"),e.style.clipPath="";t.getAttribute("data-ui")&&$(t)},O=t=>{const e=t.currentTarget;/input/i.test(e.tagName)||$(e)},R=t=>{const e=t.currentTarget,n=v("input:not([type=file]):not([type=checkbox]):not([type=radio]), select, textarea",h(e));n&&n.focus()},V=t=>{const e=t.currentTarget;T(e)},W=t=>{const e=t.currentTarget;T(e)},A=t=>{const e=t.currentTarget;d(".dropdown.active").forEach(r=>s(r,"active")),_(e,"click",A)},Z=t=>{const e=t.currentTarget;s(e,"active"),m&&clearTimeout(m)},j=t=>{const e=t.currentTarget;w(e)},z=t=>{const e=t.currentTarget;w(e,t)},K=t=>{const e=t.currentTarget;P(e)},G=()=>{E&&clearTimeout(E),E=setTimeout(()=>{x()},180)},w=(t,e)=>{if(e){if(e.key!=="Enter")return;const o=e.currentTarget,i=B(o);return!i||!/file/i.test(i.type)?void 0:i.click()}const n=t,r=L(t);!r||!/text/i.test(r.type)||(r.value=Array.from(n.files).map(o=>o.name).join(", "),r.readOnly=!0,r.addEventListener("keydown",z),T(r))},P=t=>{const e=h(t),n=v("span",e),r=d("input",e),o=v(".tooltip",e);if(!r.length||!n)return;const i=[],u=[];for(let k=0;k<r.length;k++){const F=parseFloat(r[k].min||"0"),rt=parseFloat(r[k].max||"100"),S=parseFloat(r[k].value||"0"),at=(S-F)*100/(rt-F);i.push(at),u.push(S)}o&&(o.textContent=u.join());let a=i[0],f=0,N=100-f-a;r.length>1&&(a=Math.abs(i[1]-i[0]),f=i[1]>i[0]?i[0]:i[1],N=100-f-a),n.style.left=`${f}%`,n.style.right=`${N}%`},$=(t,e,n)=>{if(e||(e=v(t.getAttribute("data-ui"))),c(e,"modal"))return Q(t,e);if(c(e,"dropdown"))return J(t,e);if(c(e,"toast"))return U(t,e,n);if(c(e,"page"))return H(t,e);if(c(e,"progress"))return X(e,n);if(b(t),c(e,"active"))return s(e,"active");p(e,"active")},b=t=>{const e=h(t);if(!c(e,"tabs"))return;d("a",e).forEach(r=>s(r,"active")),p(t,"active")},H=(t,e)=>{b(t);const n=h(e);for(let r=0;r<n.children.length;r++)c(n.children[r],"page")&&s(n.children[r],"active");p(e,"active")},J=(t,e)=>{if(b(t),c(e,"active"))return s(e,"active");d(".dropdown.active").forEach(r=>s(r,"active")),p(e,"active"),g(document.body,"click",A)},Q=async(t,e)=>{b(t);let n=L(e);c(n,"overlay")||(n=I({className:"overlay"}),q(n,e),await M(90)),n.onclick=()=>{s(t,"active"),s(e,"active"),s(n,"active")};const r=c(e,"active"),o=h(e);/nav/i.test(o.tagName)&&d(".modal, a, .overlay",o).forEach(u=>s(u,"active")),r?(s(t,"active"),s(n,"active"),s(e,"active")):(!/button/i.test(t.tagName)&&!c(t,"button")&&!c(t,"chip")&&p(t,"active"),p(n,"active"),p(e,"active"))},U=(t,e,n)=>{b(t),d(".toast.active").forEach(o=>s(o,"active")),p(e,"active"),g(e,"click",Z),m&&clearTimeout(m),n!==-1&&(m=setTimeout(()=>{s(e,"active")},n!=null?n:6e3))},X=(t,e)=>{const n=t;if(c(n,"left")){n.style.clipPath=`polygon(0% 0%, 0% 100%, ${e}% 100%, ${e}% 0%)`;return}if(c(n,"top")){n.style.clipPath=`polygon(0% 0%, 100% 0%, 100% ${e}%, 0% ${e}%)`;return}if(c(n,"right")){n.style.clipPath=`polygon(100% 0%, 100% 100%, ${100-e}% 100%, ${100-e}% 0%)`;return}c(n,"bottom")&&(n.style.clipPath=`polygon(0% 100%, 100% 100%, 100% ${100-e}%, 0% ${100-e}%)`)},Y=()=>{if(l.light&&l.dark)return l;const t=document.createElement("body");t.className="light",document.body.appendChild(t);const e=document.createElement("body");e.className="dark",document.body.appendChild(e);const n=getComputedStyle(t),r=getComputedStyle(e),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","--outline","--surface-variant","--on-surface-variant","--inverse-surface","--inverse-on-surface"];for(let i=0;i<o.length;i++)l.light+=o[i]+":"+n.getPropertyValue(o[i])+";",l.dark+=o[i]+":"+r.getPropertyValue(o[i])+";";return document.body.removeChild(t),document.body.removeChild(e),l},tt=t=>{if(!t||!y.materialDynamicColors)return Y();const e=/dark/i.test(document.body.className)?"dark":"light";return(t==null?void 0:t.light)&&(t==null?void 0:t.dark)?(l.light=t.light,l.dark=t.dark,document.body.setAttribute("style",t[e]),t):y.materialDynamicColors(t).then(n=>{const r=o=>{let i="";for(const u in o){const a=u.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g,"$1-$2").toLowerCase(),f=o[u];i+="--"+a+":"+f+";"}return i};return l.light=r(n.light),l.dark=r(n.dark),document.body.setAttribute("style",l[e]),l})},et=t=>t?(document.body.classList.remove("light","dark"),document.body.classList.add(t),y.materialDynamicColors&&document.body.setAttribute("style",l[t]),t):/dark/i.test(document.body.className)?"dark":"light",nt=()=>{if(!C)return C=new MutationObserver(G),C.observe(document.body,{childList:!0,subtree:!0}),x()},x=(t,e)=>{if(t){if(t==="setup")return nt();if(t==="guid")return D();if(t==="mode")return et(e);if(t==="theme")return tt(e);const a=v(t),f=v("[data-ui='#"+a.id+"']");$(f,a,e)}d("[data-ui]").forEach(a=>g(a,"click",O)),d(".field > label").forEach(a=>g(a,"click",R)),d(".field > input:not([type=file]):not([type=checkbox]):not([type=radio]), .field > select, .field > textarea").forEach(a=>{g(a,"focus",V),g(a,"blur",W),T(a)}),d(".field > input[type=file]").forEach(a=>{g(a,"change",j),w(a)}),d(".slider > input[type=range]").forEach(a=>{g(a,"input",K),P(a)})};return y.addEventListener&&y.addEventListener("load",()=>x("setup")),y.beercss=x,y.ui=x,y.ui})();
1
+ export default(()=>{const y=globalThis;let m=null,E=null,C=null;const l={light:"",dark:""},D=async t=>await new Promise(e=>setTimeout(e,t)),_=()=>"fxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,t=>{const e=Math.random()*16|0;return(t==="x"?e:e&3|8).toString(16)}),g=(t,e)=>{try{return typeof t=="string"?(e!=null?e:document).querySelector(t):t}catch{}},d=(t,e)=>{try{return typeof t=="string"?(e!=null?e:document).querySelectorAll(t):t}catch{}},c=(t,e)=>t?t.classList.contains(e):!1,w=(t,e)=>t?t.tagName.toLocaleLowerCase()==e:!1,p=(t,e)=>{!t||t.classList.add(e)},s=(t,e)=>{!t||t.classList.remove(e)},v=(t,e,n)=>{t.addEventListener(e,n,!0)},q=(t,e,n)=>{t.removeEventListener(e,n,!0)},B=(t,e)=>{if(!!e)return e.parentNode.insertBefore(t,e)},A=t=>{if(!!t)return t.previousElementSibling},I=t=>{if(!!t)return t.nextElementSibling},h=t=>{if(!!t)return t.parentElement},O=t=>{const e=document.createElement("div");for(const n in t)e[n]=t[n];return e},T=t=>{const e=t,n=h(t),r=g("label",n),i=c(n,"border")&&!c(n,"fill");if(document.activeElement===t||e.value||g("[selected]",e)||/date|time/.test(e.type)){if(i&&r){let u=c(r,"active")?r.offsetWidth:Math.round(r.offsetWidth/1.33);u=u/16;const a=c(n,"round")?1.25:.75,f=u+a+.5;e.style.clipPath=`polygon(0% 0%, ${a}rem 0%, ${a}rem 0.5rem, ${f}rem 0.5rem, ${f}rem 0%, 100% 0%, 100% 100%, 0% 100%)`}else e.style.clipPath="";p(r,"active")}else s(r,"active"),e.style.clipPath="";t.getAttribute("data-ui")&&$(t)},R=t=>{const e=t.currentTarget;w(e,"input")||$(e)},V=t=>{const e=t.currentTarget,n=g("input:not([type=file]):not([type=checkbox]):not([type=radio]), select, textarea",h(e));n&&n.focus()},W=t=>{const e=t.currentTarget;T(e)},Z=t=>{const e=t.currentTarget;T(e)},P=t=>{const e=t.currentTarget;d(".dropdown.active").forEach(r=>s(r,"active")),q(e,"click",P)},j=t=>{const e=t.currentTarget;s(e,"active"),m&&clearTimeout(m)},z=t=>{const e=t.currentTarget;L(e)},K=t=>{const e=t.currentTarget;L(e,t)},G=t=>{const e=t.currentTarget;F(e)},H=()=>{E&&clearTimeout(E),E=setTimeout(()=>{x()},180)},L=(t,e)=>{if(e){if(e.key!=="Enter")return;const i=e.currentTarget,o=I(i);return!o||!/file/i.test(o.type)?void 0:o.click()}const n=t,r=A(t);!r||!/text/i.test(r.type)||(r.value=Array.from(n.files).map(i=>i.name).join(", "),r.readOnly=!0,r.addEventListener("keydown",K),T(r))},F=t=>{const e=h(t),n=g("span",e),r=d("input",e),i=g(".tooltip",e);if(!r.length||!n)return;const o=[],u=[];for(let k=0;k<r.length;k++){const S=parseFloat(r[k].min||"0"),at=parseFloat(r[k].max||"100"),M=parseFloat(r[k].value||"0"),ot=(M-S)*100/(at-S);o.push(ot),u.push(M)}i&&(i.textContent=u.join());let a=o[0],f=0,N=100-f-a;r.length>1&&(a=Math.abs(o[1]-o[0]),f=o[1]>o[0]?o[0]:o[1],N=100-f-a),n.style.left=`${f}%`,n.style.right=`${N}%`},$=(t,e,n)=>{if(e||(e=g(t.getAttribute("data-ui"))),c(e,"modal"))return U(t,e);if(c(e,"dropdown"))return Q(t,e);if(c(e,"toast"))return X(t,e,n);if(c(e,"page"))return J(t,e);if(c(e,"progress"))return Y(e,n);if(b(t),c(e,"active"))return s(e,"active");p(e,"active")},b=t=>{const e=h(t);if(!c(e,"tabs"))return;d("a",e).forEach(r=>s(r,"active")),p(t,"active")},J=(t,e)=>{b(t);const n=h(e);for(let r=0;r<n.children.length;r++)c(n.children[r],"page")&&s(n.children[r],"active");p(e,"active")},Q=(t,e)=>{if(b(t),c(e,"active"))return s(e,"active");d(".dropdown.active").forEach(r=>s(r,"active")),p(e,"active"),v(document.body,"click",P)},U=async(t,e)=>{b(t);let n=A(e);c(n,"overlay")||(n=O({className:"overlay"}),B(n,e),await D(90)),n.onclick=()=>{s(t,"active"),s(e,"active"),s(n,"active")};const r=c(e,"active"),i=h(e);w(i,"nav")&&d(".modal, a, .overlay",i).forEach(u=>s(u,"active")),r?(s(t,"active"),s(n,"active"),s(e,"active")):(!w(t,"button")&&!c(t,"button")&&!c(t,"chip")&&p(t,"active"),p(n,"active"),p(e,"active"))},X=(t,e,n)=>{b(t),d(".toast.active").forEach(i=>s(i,"active")),p(e,"active"),v(e,"click",j),m&&clearTimeout(m),n!==-1&&(m=setTimeout(()=>{s(e,"active")},n!=null?n:6e3))},Y=(t,e)=>{const n=t;if(c(n,"left")){n.style.clipPath=`polygon(0% 0%, 0% 100%, ${e}% 100%, ${e}% 0%)`;return}if(c(n,"top")){n.style.clipPath=`polygon(0% 0%, 100% 0%, 100% ${e}%, 0% ${e}%)`;return}if(c(n,"right")){n.style.clipPath=`polygon(100% 0%, 100% 100%, ${100-e}% 100%, ${100-e}% 0%)`;return}c(n,"bottom")&&(n.style.clipPath=`polygon(0% 100%, 100% 100%, 100% ${100-e}%, 0% ${100-e}%)`)},tt=()=>{if(l.light&&l.dark)return l;const t=document.createElement("body");t.className="light",document.body.appendChild(t);const e=document.createElement("body");e.className="dark",document.body.appendChild(e);const n=getComputedStyle(t),r=getComputedStyle(e),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","--outline","--surface-variant","--on-surface-variant","--inverse-surface","--inverse-on-surface"];for(let o=0;o<i.length;o++)l.light+=i[o]+":"+n.getPropertyValue(i[o])+";",l.dark+=i[o]+":"+r.getPropertyValue(i[o])+";";return document.body.removeChild(t),document.body.removeChild(e),l},et=t=>{if(!t||!y.materialDynamicColors)return tt();const e=/dark/i.test(document.body.className)?"dark":"light";return(t==null?void 0:t.light)&&(t==null?void 0:t.dark)?(l.light=t.light,l.dark=t.dark,document.body.setAttribute("style",t[e]),t):y.materialDynamicColors(t).then(n=>{const r=i=>{let o="";for(const u in i){const a=u.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g,"$1-$2").toLowerCase(),f=i[u];o+="--"+a+":"+f+";"}return o};return l.light=r(n.light),l.dark=r(n.dark),document.body.setAttribute("style",l[e]),l})},nt=t=>t?(document.body.classList.remove("light","dark"),document.body.classList.add(t),y.materialDynamicColors&&document.body.setAttribute("style",l[t]),t):/dark/i.test(document.body.className)?"dark":"light",rt=()=>{if(!C)return C=new MutationObserver(H),C.observe(document.body,{childList:!0,subtree:!0}),x()},x=(t,e)=>{if(t){if(t==="setup")return rt();if(t==="guid")return _();if(t==="mode")return nt(e);if(t==="theme")return et(e);const a=g(t),f=g("[data-ui='#"+a.id+"']");$(f,a,e)}d("[data-ui]").forEach(a=>v(a,"click",R)),d(".field > label").forEach(a=>v(a,"click",V)),d(".field > input:not([type=file]):not([type=checkbox]):not([type=radio]), .field > select, .field > textarea").forEach(a=>{v(a,"focus",W),v(a,"blur",Z),T(a)}),d(".field > input[type=file]").forEach(a=>{v(a,"change",z),L(a)}),d(".slider > input[type=range]").forEach(a=>{v(a,"input",G),F(a)})};return y.addEventListener&&y.addEventListener("load",()=>x("setup")),y.beercss=x,y.ui=x,y.ui})();
package/index.js CHANGED
@@ -1,5 +1,7 @@
1
1
  import "./dist/cdn/beer.min.css";
2
2
  import "./dist/cdn/material-symbols-outlined.woff2";
3
+ import "./dist/cdn/material-symbols-rounded.woff2";
4
+ import "./dist/cdn/material-symbols-sharp.woff2";
3
5
  import "./dist/cdn/roboto-flex-cyrillic-ext.woff2";
4
6
  import "./dist/cdn/roboto-flex-cyrillic.woff2";
5
7
  import "./dist/cdn/roboto-flex-greek.woff2";
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.1.1",
5
+ "version": "3.1.3",
6
6
  "name": "beercss",
7
7
  "license": "MIT",
8
8
  "type": "module",
package/src/cdn/beer.css CHANGED
@@ -1,3 +1,4 @@
1
+ @import "./settings/globals.css";
1
2
  @import "./settings/light.css";
2
3
  @import "./settings/dark.css";
3
4
  @import "./settings/fonts.css";
package/src/cdn/beer.ts CHANGED
@@ -41,6 +41,11 @@ export default (() => {
41
41
  return element.classList.contains(name);
42
42
  };
43
43
 
44
+ const hasTag = (element: Element, name: string): boolean => {
45
+ if (!element) return false;
46
+ return element.tagName.toLocaleLowerCase() == name;
47
+ };
48
+
44
49
  const addClass = (element: Element, name: string) => {
45
50
  if (!element) return;
46
51
  element.classList.add(name);
@@ -92,7 +97,7 @@ export default (() => {
92
97
  const parentTarget = parent(target);
93
98
  const label = query("label", parentTarget) as HTMLLabelElement;
94
99
  const isBorder = hasClass(parentTarget, "border") && !hasClass(parentTarget, "fill");
95
- const toActive = document.activeElement === target || input.value || /date|time/.test(input.type);
100
+ const toActive = document.activeElement === target || input.value || query("[selected]", input) || /date|time/.test(input.type);
96
101
 
97
102
  if (toActive) {
98
103
  if (isBorder && label) {
@@ -101,7 +106,7 @@ export default (() => {
101
106
  const start = hasClass(parentTarget, "round") ? 1.25 : 0.75;
102
107
  const end = width + start + 0.5;
103
108
  input.style.clipPath = `polygon(0% 0%, ${start}rem 0%, ${start}rem 0.5rem, ${end}rem 0.5rem, ${end}rem 0%, 100% 0%, 100% 100%, 0% 100%)`;
104
- } else { input.style.clipPath = ""; }
109
+ } else input.style.clipPath = "";
105
110
  addClass(label, "active");
106
111
  } else {
107
112
  removeClass(label, "active");
@@ -113,7 +118,7 @@ export default (() => {
113
118
 
114
119
  const onClickElement = (e: Event) => {
115
120
  const target = e.currentTarget as HTMLElement;
116
- if (/input/i.test(target.tagName)) return;
121
+ if (hasTag(target, "input")) return;
117
122
  open(target);
118
123
  };
119
124
 
@@ -284,7 +289,7 @@ export default (() => {
284
289
 
285
290
  const isActive = hasClass(to, "active");
286
291
  const container = parent(to);
287
- if (/nav/i.test(container.tagName)) {
292
+ if (hasTag(container, "nav")) {
288
293
  const elements = queryAll(".modal, a, .overlay", container);
289
294
  elements.forEach((x: Element) => removeClass(x, "active"));
290
295
  }
@@ -294,7 +299,7 @@ export default (() => {
294
299
  removeClass(overlay, "active");
295
300
  removeClass(to, "active");
296
301
  } else {
297
- if (!/button/i.test(from.tagName) && !hasClass(from, "button") && !hasClass(from, "chip")) addClass(from, "active");
302
+ if (!hasTag(from, "button") && !hasClass(from, "button") && !hasClass(from, "chip")) addClass(from, "active");
298
303
  addClass(overlay, "active");
299
304
  addClass(to, "active");
300
305
  }
package/src/cdn/elements/buttons.css CHANGED
@@ -70,20 +70,13 @@ button {
70
70
  margin-left: 3rem;
71
71
  }
72
72
 
73
- .button[disabled],
74
- button:disabled {
73
+ :is(.button, button):is(:disabled, [disabled]) {
75
74
  opacity: 0.5;
76
75
  cursor: not-allowed;
77
76
  }
78
77
 
79
- .button[disabled] {
80
- pointer-events: none;
81
- }
82
-
83
- .button[disabled]::before,
84
- button:disabled::before,
85
- .button[disabled]::after,
86
- button:disabled::after {
78
+ :is(.button, button):is(:disabled, [disabled])::before,
79
+ :is(.button, button):is(:disabled, [disabled])::after {
87
80
  display: none;
88
81
  }
89
82
 
package/src/cdn/elements/icons.css CHANGED
@@ -1,7 +1,7 @@
1
1
  i {
2
2
  ---size: 1.5rem;
3
3
 
4
- font-family: "Material Symbols Outlined";
4
+ font-family: var(--font-icon);
5
5
  font-weight: normal;
6
6
  font-style: normal;
7
7
  font-size: var(---size);
package/src/cdn/elements/pages.css CHANGED
@@ -1,5 +1,7 @@
1
1
  .page,
2
2
  :is(.page, .modal):not(.active) .page.active {
3
+ ---transform: translate(0, 0);
4
+
3
5
  opacity: 0;
4
6
  position: absolute;
5
7
  display: none;
@@ -9,68 +11,33 @@
9
11
  opacity: 1;
10
12
  position: inherit;
11
13
  display: inherit;
14
+ animation: var(--speed4) to-page ease;
12
15
  }
13
16
 
14
- .page.top.active {
15
- animation: var(--speed4) page-to-bottom ease;
16
- }
17
-
18
- .page.bottom.active {
19
- animation: var(--speed4) page-to-top ease;
20
- }
21
-
22
- .page.left.active {
23
- animation: var(--speed4) page-to-right ease;
24
- }
25
-
26
- .page.right.active {
27
- animation: var(--speed4) page-to-left ease;
17
+ .page.active.top {
18
+ ---transform: translate(0, -4rem);
28
19
  }
29
20
 
30
- @keyframes page-to-bottom {
31
- from {
32
- opacity: 0;
33
- transform: translateY(-4rem);
34
- }
35
-
36
- to {
37
- opacity: 1;
38
- transform: translateY(0);
39
- }
21
+ .page.active.bottom {
22
+ ---transform: translate(0, 4rem);
40
23
  }
41
24
 
42
- @keyframes page-to-top {
43
- from {
44
- opacity: 0;
45
- transform: translateY(4rem);
46
- }
47
-
48
- to {
49
- opacity: 1;
50
- transform: translateY(0);
51
- }
25
+ .page.active.left {
26
+ ---transform: translate(-4rem, 0);
52
27
  }
53
28
 
54
- @keyframes page-to-left {
55
- from {
56
- opacity: 0;
57
- transform: translateX(4rem);
58
- }
59
-
60
- to {
61
- opacity: 1;
62
- transform: translateX(0);
63
- }
29
+ .page.active.right {
30
+ ---transform: translate(4rem, 0);
64
31
  }
65
32
 
66
- @keyframes page-to-right {
33
+ @keyframes to-page {
67
34
  from {
68
35
  opacity: 0;
69
- transform: translateX(-4rem);
36
+ transform: var(---transform);
70
37
  }
71
38
 
72
39
  to {
73
40
  opacity: 1;
74
- transform: translateX(0);
41
+ transform: translate(0, 0);
75
42
  }
76
43
  }
package/src/cdn/elements/selections.css CHANGED
@@ -36,7 +36,7 @@
36
36
 
37
37
  :is(.checkbox, .radio, .switch) > span::before,
38
38
  .icon > span > i {
39
- font-family: "Material Symbols Outlined";
39
+ font-family: var(--font-icon);
40
40
  font-weight: normal;
41
41
  font-style: normal;
42
42
  font-size: 1.5rem;
package/src/cdn/elements/toasts.css CHANGED
@@ -1,4 +1,6 @@
1
1
  .toast {
2
+ ---transform: translate(-50%, 1rem);
3
+
2
4
  position: fixed;
3
5
  top: auto;
4
6
  bottom: 6rem;
@@ -27,36 +29,19 @@
27
29
  bottom: auto;
28
30
  }
29
31
 
30
- .toast.bottom {
31
- top: auto;
32
- bottom: 4.5rem;
33
- }
34
-
35
32
  .toast.active {
36
33
  visibility: visible;
37
- animation: var(--speed2) toast-to-top;
34
+ animation: var(--speed2) to-toast;
38
35
  }
39
36
 
40
37
  .toast.active.top {
41
- animation: var(--speed2) toast-to-bottom;
42
- }
43
-
44
- @keyframes toast-to-top {
45
- 0% {
46
- opacity: 0;
47
- transform: translate(-50%, 1rem);
48
- }
49
-
50
- 100% {
51
- opacity: 1;
52
- transform: translate(-50%, 0);
53
- }
38
+ ---transform: translate(-50%, -1rem);
54
39
  }
55
40
 
56
- @keyframes toast-to-bottom {
41
+ @keyframes to-toast {
57
42
  0% {
58
43
  opacity: 0;
59
- transform: translate(-50%, -1rem);
44
+ transform: var(---transform);
60
45
  }
61
46
 
62
47
  100% {
package/src/cdn/settings/dark.css CHANGED
@@ -27,13 +27,7 @@ body.dark {
27
27
  --body: #000;
28
28
  --overlay: rgb(0 0 0 / 0.5);
29
29
  --active: rgb(255 255 255 / 0.2);
30
- --elevate1: 0 0.125rem 0.125rem 0 rgb(0 0 0 / 0.14), 0 0.0625rem 0.3125rem 0 rgb(0 0 0 / 0.12), 0 0.1875rem 0.0625rem -0.125rem rgb(0 0 0 / 0.2);
31
- --elevate2: 0 0.375rem 0.625rem 0 rgb(0 0 0 / 0.14), 0 0.0625rem 1.125rem 0 rgb(0 0 0 / 0.12), 0 0.1875rem 0.3125rem -0.0625rem rgb(0 0 0 / 0.3);
32
- --elevate3: 0 0.625rem 1rem 0 rgb(0 0 0 / 0.14), 0 0.0625rem 1.9375rem 0 rgb(0 0 0 / 0.12), 0 0.1875rem 0.5625rem 0 rgb(0 0 0 / 0.4);
33
- --size: 16px;
34
- --font: "Roboto Flex", "Roboto", sans-serif, system-ui, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial";
35
- --speed1: 0.1s;
36
- --speed2: 0.2s;
37
- --speed3: 0.3s;
38
- --speed4: 0.4s;
30
+ --elevate1: 0 0.125rem 0.125rem 0 rgb(0 0 0 / 0.32);
31
+ --elevate2: 0 0.25rem 0.5rem 0 rgb(0 0 0 / 0.4);
32
+ --elevate3: 0 0.375rem 0.75rem 0 rgb(0 0 0 / 0.48);
39
33
  }
package/src/cdn/settings/fonts.css CHANGED
@@ -1,4 +1,4 @@
1
- /* fallback */
1
+ /* outlined icons */
2
2
  @font-face {
3
3
  font-family: "Material Symbols Outlined";
4
4
  font-style: normal;
@@ -7,6 +7,24 @@
7
7
  src: url("../material-symbols-outlined.woff2") format("woff2");
8
8
  }
9
9
 
10
+ /* rounded icons */
11
+ @font-face {
12
+ font-family: "Material Symbols Rounded";
13
+ font-style: normal;
14
+ font-weight: 400;
15
+ font-display: swap;
16
+ src: url("../material-symbols-rounded.woff2") format("woff2");
17
+ }
18
+
19
+ /* sharp icons */
20
+ @font-face {
21
+ font-family: "Material Symbols Sharp";
22
+ font-style: normal;
23
+ font-weight: 400;
24
+ font-display: swap;
25
+ src: url("../material-symbols-sharp.woff2") format("woff2");
26
+ }
27
+
10
28
  /* cyrillic-ext */
11
29
  @font-face {
12
30
  font-family: "Roboto Flex";
package/src/cdn/settings/globals.css ADDED
@@ -0,0 +1,9 @@
1
+ :root {
2
+ --size: 16px;
3
+ --font: "Roboto Flex", "Roboto", sans-serif, system-ui, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial";
4
+ --font-icon: "Material Symbols Outlined";
5
+ --speed1: 0.1s;
6
+ --speed2: 0.2s;
7
+ --speed3: 0.3s;
8
+ --speed4: 0.4s;
9
+ }
package/src/cdn/settings/light.css CHANGED
@@ -28,13 +28,7 @@ body.light {
28
28
  --body: #FFF;
29
29
  --overlay: rgb(0 0 0 / 0.5);
30
30
  --active: rgb(0 0 0 / 0.1);
31
- --elevate1: 0 0.125rem 0.125rem 0 rgb(0 0 0 / 0.14), 0 0.0625rem 0.3125rem 0 rgb(0 0 0 / 0.12), 0 0.1875rem 0.0625rem -0.125rem rgb(0 0 0 / 0.2);
32
- --elevate2: 0 0.375rem 0.625rem 0 rgb(0 0 0 / 0.14), 0 0.0625rem 1.125rem 0 rgb(0 0 0 / 0.12), 0 0.1875rem 0.3125rem -0.0625rem rgb(0 0 0 / 0.3);
33
- --elevate3: 0 0.625rem 1rem 0 rgb(0 0 0 / 0.14), 0 0.0625rem 1.9375rem 0 rgb(0 0 0 / 0.12), 0 0.1875rem 0.5625rem 0 rgb(0 0 0 / 0.4);
34
- --size: 16px;
35
- --font: "Roboto Flex", "Roboto", sans-serif, system-ui, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial";
36
- --speed1: 0.1s;
37
- --speed2: 0.2s;
38
- --speed3: 0.3s;
39
- --speed4: 0.4s;
31
+ --elevate1: 0 0.125rem 0.125rem 0 rgb(0 0 0 / 0.32);
32
+ --elevate2: 0 0.25rem 0.5rem 0 rgb(0 0 0 / 0.4);
33
+ --elevate3: 0 0.375rem 0.75rem 0 rgb(0 0 0 / 0.48);
40
34
  }