beercss 2.1.0 → 2.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.
- package/README.md +7 -6
- package/dist/cdn/beer.min.css +1 -1
- package/dist/cdn/beer.min.js +1 -1
- package/package.json +1 -1
- package/src/cdn/{beer.js → beer.ts} +160 -171
- package/src/cdn/elements/buttons.css +1 -1
- package/src/cdn/elements/fields.css +1 -1
- package/src/cdn/elements/media.css +9 -0
- package/src/cdn/elements/navigations.css +4 -0
- package/src/cdn/elements/selections.css +5 -5
package/README.md
CHANGED
|
@@ -127,8 +127,8 @@ This project was guided by the **"Germany Beer Purity Law"** or **"Reinheitsgebo
|
|
|
127
127
|
From jsdelivr.net.
|
|
128
128
|
|
|
129
129
|
```html
|
|
130
|
-
<link href="https://cdn.jsdelivr.net/npm/beercss@2.1.
|
|
131
|
-
<script src="https://cdn.jsdelivr.net/npm/beercss@2.1.
|
|
130
|
+
<link href="https://cdn.jsdelivr.net/npm/beercss@2.1.3/dist/cdn/beer.min.css" rel="stylesheet" />
|
|
131
|
+
<script src="https://cdn.jsdelivr.net/npm/beercss@2.1.3/dist/cdn/beer.min.js" type="text/javascript"></script>
|
|
132
132
|
<script src="https://cdn.jsdelivr.net/npm/material-dynamic-colors@0.0.10/dist/cdn/material-dynamic-colors.min.js" type="text/javascript"></script>
|
|
133
133
|
```
|
|
134
134
|
|
|
@@ -150,7 +150,7 @@ import "material-dynamic-colors";
|
|
|
150
150
|
|
|
151
151
|
### HTML
|
|
152
152
|
|
|
153
|
-
You can use this html to setup your project
|
|
153
|
+
You can use this html to setup your project. See on [Codepen](https://codepen.io/leo-bnu/pen/yLKLPxj).
|
|
154
154
|
|
|
155
155
|
```html
|
|
156
156
|
<html>
|
|
@@ -160,8 +160,8 @@ You can use this html to setup your project
|
|
|
160
160
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
161
161
|
<meta name="google" content="notranslate">
|
|
162
162
|
<title>Hello world</title>
|
|
163
|
-
<link href="https://cdn.jsdelivr.net/npm/beercss@2.1.
|
|
164
|
-
<script src="https://cdn.jsdelivr.net/npm/beercss@2.1.
|
|
163
|
+
<link href="https://cdn.jsdelivr.net/npm/beercss@2.1.3/dist/cdn/beer.min.css" rel="stylesheet">
|
|
164
|
+
<script src="https://cdn.jsdelivr.net/npm/beercss@2.1.3/dist/cdn/beer.min.js" type="text/javascript"></script>
|
|
165
165
|
<script src="https://cdn.jsdelivr.net/npm/material-dynamic-colors@0.0.10/dist/cdn/material-dynamic-colors.min.js" type="text/javascript"></script>
|
|
166
166
|
</head>
|
|
167
167
|
<body class="light">
|
|
@@ -197,6 +197,7 @@ You can use this html to setup your project
|
|
|
197
197
|
</nav>
|
|
198
198
|
|
|
199
199
|
<main class="responsive">
|
|
200
|
+
<img src="https://www.beercss.com/beer-and-woman.jpg" class="responsive">
|
|
200
201
|
<h3>Welcome</h3>
|
|
201
202
|
<h5>The beer is ready!</h5>
|
|
202
203
|
</main>
|
|
@@ -232,4 +233,4 @@ https://github.com/beercss/beercss/blob/main/CONTRIBUTING.md
|
|
|
232
233
|
Beercss is an MIT-licensed open source project with its ongoing development made possible entirely by the support of these awesome backers. If you'd like to join them, please consider:
|
|
233
234
|
|
|
234
235
|
- [Become a backer or sponsor on Patreon](https://www.patreon.com/beercss).
|
|
235
|
-
- [Become a backer or sponsor on Open Collective](https://www.opencollective.com/beercss).
|
|
236
|
+
- [Become a backer or sponsor on Open Collective](https://www.opencollective.com/beercss).
|
package/dist/cdn/beer.min.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@import"https://fonts.googleapis.com/css2?family=Material+Icons&family=Material+Icons+Outlined&family=Roboto:wght@300;400;500&display=swap";:root,body.light{--primary: #6750A4;--on-primary: #FFFFFF;--primary-container: #EADDFF;--on-primary-container: #21005E;--secondary: #625B71;--on-secondary: #FFFFFF;--secondary-container: #E8DEF8;--on-secondary-container: #1E192B;--tertiary: #7D5260;--on-tertiary: #FFFFFF;--tertiary-container: #FFD8E4;--on-tertiary-container: #370B1E;--error: #B3261E;--on-error: #FFFFFF;--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;--overlay: rgba(0,0,0,.5);--active: rgba(0,0,0,.1);--shadow1: 0 2rem 2rem 0 rgba(0, 0, 0, .14), 0 1rem 5rem 0 rgba(0, 0, 0, .12), 0 3rem 1rem -2rem rgba(0, 0, 0, .2);--shadow2: 0 6rem 10rem 0 rgba(0, 0, 0, .14), 0 1rem 18rem 0 rgba(0, 0, 0, .12), 0 3rem 5rem -1rem rgba(0, 0, 0, .3);--shadow3: 0 10rem 16rem 0 rgba(0, 0, 0, .14), 0 1rem 31rem 0 rgba(0, 0, 0, .12), 0 3rem 9rem 0rem rgba(0, 0, 0, .4);--size: 1px;--font: "Roboto", BlinkMacSystemFont, -apple-system, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;--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;--overlay: rgba(0,0,0,.5);--active: rgba(255,255,255,.2);--shadow1: 0 2rem 2rem 0 rgba(0, 0, 0, .14), 0 1rem 5rem 0 rgba(0, 0, 0, .12), 0 3rem 1rem -2rem rgba(0, 0, 0, .2);--shadow2: 0 6rem 10rem 0 rgba(0, 0, 0, .14), 0 1rem 18rem 0 rgba(0, 0, 0, .12), 0 3rem 5rem -1rem rgba(0, 0, 0, .3);--shadow3: 0 10rem 16rem 0 rgba(0, 0, 0, .14), 0 1rem 31rem 0 rgba(0, 0, 0, .12), 0 3rem 9rem 0rem rgba(0, 0, 0, .4);--size: 1px;--font: "Roboto", BlinkMacSystemFont, -apple-system, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;--speed1: .1s;--speed2: .2s;--speed3: .3s;--speed4: .4s}*{-webkit-tap-highlight-color:transparent;position:relative;vertical-align:middle;color:inherit;margin:0;padding:0}body{color:var(--on-background);background-color:var(--background);margin:0;overflow-x:hidden}label{font-size:12rem;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}.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}.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}.transparent-border{border-color:transparent!important}.transparent-text{color:transparent!important}.badge{display:inline-flex;align-items:center;justify-content:center;position:absolute;font-size:10rem;text-transform:none;z-index:1;padding:0 6rem;background-color:var(--error);color:var(--on-error);top:0;left:auto;bottom:auto;right:0;transform:translate(50%,-100%);width:16rem;height:16rem}.badge.none{top:auto;left:auto;bottom:auto;right:auto;transform:none;position:relative;margin:0 2rem}.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.top.right{top:0;left:auto;bottom:auto;right:0;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:1rem solid var(--error);background-color:transparent;color:var(--error)}.badge.round{border-radius:8rem}.badge.circle,.badge.square{padding:0;text-align:center;width:16rem;height:16rem;min-width:auto;min-height:auto;max-width:none;max-height:none}.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;box-shadow:var(--shadow1);min-height:40rem;height:40rem;font-size:14rem;font-weight:500;color:var(--on-primary);padding:0 16rem;background-color:var(--primary);margin:0 8rem;border-radius:4rem;transition:var(--speed3) transform,var(--speed3) border-radius,var(--speed3) padding;user-select:none}.button>:not(.dropdown,.progress,.badge,.tooltip)+:not(.dropdown,.progress,.badge,.tooltip),button>:not(.dropdown,.progress,.badge,.tooltip)+:not(.dropdown,.progress,.badge,.tooltip){margin-left:4rem}.button.none,button.none{box-shadow:none;width:auto;min-width:auto;height:auto;min-height:auto;color:var(--primary);padding:0;background-color:transparent;margin:0 8rem}.button.small,button.small{min-height:32rem!important;height:32rem;font-size:14rem}.button.medium,button.medium{min-height:40rem!important;height:40rem}.button.large,button.large{min-height:48rem!important;height:48rem}.button.extra,button.extra{min-height:56rem!important;height:56rem;font-size:16rem}.button.border,button.border{border:1rem solid var(--primary);background-color:transparent;color:var(--primary);box-shadow:none}.button.round,button.round{transform:none;border-radius:32rem}.button.top-round,button.top-round{border-radius:32rem 32rem 4rem 4rem!important}.button.bottom-round,button.bottom-round{border-radius:4rem 4rem 32rem 32rem!important}.button.left-round,button.left-round{border-radius:32rem 4rem 4rem 32rem!important}.button.right-round,button.right-round{border-radius:4rem 32rem 32rem 4rem!important}.button.top-round.left-round,button.top-round.left-round{border-radius:32rem 32rem 4rem!important}.button.top-round.right-round,button.top-round.right-round{border-radius:32rem 32rem 32rem 4rem!important}.button.bottom-round.left-round,button.bottom-round.left-round{border-radius:32rem 4rem 32rem 32rem!important}.button.bottom-round.right-round,button.bottom-round.right-round{border-radius:4rem 32rem 32rem!important}.button.circle,button.circle{transform:none;border-radius:40rem;padding:0}.button.square,button.square{transform:none;border-radius:4rem;padding:0}.button.extend,button.extend{min-height:56rem!important;min-width:56rem!important;padding:0}.button.extend>span,button.extend>span{display:none}.button.extend:hover,button.extend:hover,.button.extend.active,button.extend.active{width:auto;max-width:none;min-width:auto;padding:0 16rem}.button.extend:hover>i+span,button.extend:hover>i+span,.button.extend.active>i+span,button.extend.active>i+span{display:inherit;margin-left:32rem}.button.extend:hover>img+span,button.extend:hover>img+span,.button.extend.active>img+span,button.extend.active>img+span{display:inherit;margin-left:48rem}.button.square:not(.flat,.border),.button.circle:not(.flat,.border),.button.diamond:not(.flat,.border),button.square:not(.flat,.border),button.circle:not(.flat,.border),button.diamond:not(.flat,.border){box-shadow:var(--shadow2)}.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}.card,article{box-shadow:var(--shadow1);background-color:var(--surface-variant);color:var(--on-surface-variant);padding:16rem;border-radius:4rem;display:block;transition:var(--speed3) transform,var(--speed3) border-radius,var(--speed3) padding}.card+.card,article+article{margin-top:16rem}.row.medium-space>.col>.card+.card,.row.medium-space>.col>article+article{margin-top:24rem}.row.large-space>.col>.card+.card,.row.large-space>.col>article+article{margin-top:32rem}.card.small,article.small{height:192rem}.card.medium,article.medium{height:320rem}.card.large,article.large{height:512rem}.card.border,article.border{border:1rem solid var(--outline);box-shadow:none;background-color:transparent}.card.round,article.round{border-radius:24rem}.chip{box-sizing:content-box;display:inline-flex;align-items:center;justify-content:center;box-shadow:none;min-height:40rem;height:40rem;font-size:14rem;font-weight:500;color:var(--on-secondary);padding:0 16rem;background-color:var(--secondary);margin:0 8rem;text-transform:none;border-radius:8rem;transition:var(--speed3) transform,var(--speed3) border-radius,var(--speed3) padding;user-select:none}.chip>:not(.dropdown,.progress,.badge,.tooltip)+:not(.dropdown,.progress,.badge,.tooltip){margin-left:4rem}.chip.small{min-height:32rem!important;height:32rem}.chip.medium{min-height:40rem!important;height:40rem}.chip.large{min-height:48rem!important;height:48rem}.chip.border{border:1rem solid var(--secondary);background-color:transparent;color:var(--secondary)}.chip.active:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;background-color:var(--active)}.chip.circle{transform:none;border-radius:40rem;padding:0}.chip.square{transform:none;border-radius:4rem;padding:0}.chip.round{border-radius:24rem}main.responsive,main.responsive.min{margin:0 auto;max-width:992rem;padding:8rem;overflow-x:hidden;min-height:100vh;box-sizing:border-box}main.responsive.max{max-width:100%}nav.top:not(.s,.m,.l)~main.responsive{padding-top:96rem}nav.bottom:not(.s,.m,.l)~main.responsive{padding-bottom:96rem}nav.left:not(.s,.m,.l)~main.responsive{padding-left:96rem}nav.right:not(.s,.m,.l)~main.responsive{padding-right:96rem}@media only screen and (max-width: 600px){nav.s.bottom~main.responsive{padding-bottom:96rem}nav.s.top~main.responsive{padding-top:96rem}nav.s.left~main.responsive{padding-left:96rem}nav.s.right~main.responsive{padding-right:96rem}}@media only screen and (min-width: 601px) and (max-width: 992px){nav.m.bottom~main.responsive{padding-bottom:96rem}nav.m.top~main.responsive{padding-top:96rem}nav.m.left~main.responsive{padding-left:96rem}nav.m.right~main.responsive{padding-right:96rem}}@media only screen and (min-width: 993px){nav.l.bottom~main.responsive{padding-bottom:96rem}nav.l.top~main.responsive{padding-top:96rem}nav.l.left~main.responsive{padding-left:96rem}nav.l.right~main.responsive{padding-right:96rem}}@media only screen and (max-width: 600px){main.responsive{padding-right:8rem;padding-left:8rem}}.dropdown{opacity:0;visibility:hidden;position:absolute;box-shadow:var(--shadow2);background-color:var(--surface);box-sizing:border-box;z-index:11;top:auto;bottom:0;left:0;right:auto;width:100%;max-height:320rem;transform:translateY(100%);overflow-x:hidden;overflow-y:auto;font-size:14rem;font-weight:400;text-transform:none;color:var(--on-surface);line-height:normal;text-align:left}.dropdown.no-wrap{width:auto}.dropdown.active,.dropdown:not([data-ui]):active,button:not([data-ui]):focus-within>.dropdown,.button:not([data-ui]):focus-within>.dropdown,.field>:not([data-ui]):focus-within~.dropdown{opacity:1;visibility:visible;max-width:none;animation:var(--speed1) dropdown-to-bottom}.dropdown.border{border:1rem solid var(--outline);box-shadow:none}.dropdown.round{border-radius:24rem}.dropdown.right{left:0;right:auto}.dropdown.left{left:auto;right:0}.dropdown>a{display:block;padding:8rem 16rem}.dropdown>a:hover,.dropdown>a:focus,.dropdown>a.active{background-color:var(--active)}.dropdown.no-wrap>a{white-space:nowrap}.dropdown>a.row.no-wrap,.dropdown>a.row.no-wrap+a.row.no-wrap{margin:0 -8rem}@keyframes dropdown-to-bottom{0%{opacity:0;transform:translateY(75%)}to{opacity:1;transform:translateY(100%)}}details[open]>:not(summary){animation:details-to-open var(--speed3) ease}summary.none{list-style-type:none}summary{cursor:pointer}summary:focus{outline:none}@keyframes details-to-open{0%{opacity:0;transform:translateY(-8rem)}to{opacity:1;transform:translateY(0)}}.field{height:48rem;margin-bottom:32rem;border:none!important}*:not(.field)+.field,.field+*:not(.field){margin-top:16rem}.row>.col>.field:last-child{margin-bottom:16rem}.row.no-space>.col>.field:not(:last-child){margin-bottom:16rem}.row.medium-space>.col>.field:not(:last-child){margin-bottom:40rem}.row.large-space>.col>.field:not(:last-child){margin-bottom:48rem}.field.small{height:40rem}.field.medium{height:48rem}.field.large{height:56rem}.field.extra{height:64rem}.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>i,.field>img,.field>.loader{position:absolute;top:50%;left:auto;right:16rem;transform:translateY(-50%);cursor:pointer;z-index:0}.field.border>i,.field.fill>i,.field.round>i,.field.border>img,.field.fill>img,.field.round>img,.field.border>.loader,.field.fill>.loader,.field.round>.loader{left:auto;right:16rem}.field>i:first-child,.field>img:first-child,.field>.loader:first-child{left:16rem;right:auto}.field.border>i:first-child,.field.fill>i:first-child,.field.round>i:first-child,.field.border>img:first-child,.field.fill>img:first-child,.field.round>img:first-child,.field.border>.loader:first-child,.field.fill>.loader:first-child,.field.round>.loader:first-child{left:16rem;right:auto}.field.invalid>i{color:var(--error)!important}.field>.loader{border-width:3rem;width:24rem;height:24rem}.field>select,input[type^=date],input[type^=time]{-webkit-appearance:none;-moz-appearance:none;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;padding:0;margin:0;cursor:pointer}input[type=file]{position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;opacity:0;cursor:pointer}.field>input,.field>textarea,.field>select{border:1rem solid transparent;padding:0 15rem;font-family:inherit;font-size:16rem;width:100%;height:100%;outline:none;z-index:1;background:none;box-sizing:border-box;resize:none;border-radius:inherit}.field>input:focus,.field>textarea:focus,.field>select:focus{border:2rem solid transparent;padding:0 14rem}.field.border>input,.field.border>textarea,.field.border>select{border-color:var(--outline);box-shadow:none!important}.field.border>input:focus,.field.border>textarea:focus,.field.border>select:focus{border-color:var(--primary)}.field.round>input,.field.round>textarea,.field.round>select{box-shadow:var(--shadow1);padding-left:23rem;padding-right:23rem}.field.round>input:focus,.field.round>textarea:focus,.field.round>select:focus{padding-left:22rem;padding-right:22rem}.field.prefix>input,.field.prefix>textarea,.field.prefix>select{padding-left:47rem}.field.prefix>input:focus,.field.prefix>textarea:focus,.field.prefix>select:focus{padding-left:46rem}.field.suffix>input,.field.suffix>textarea,.field.suffix>select{padding-right:47rem}.field.suffix>input:focus,.field.suffix>textarea:focus,.field.suffix>select:focus{padding-right:46rem}.field:not(.border,.flat,.round)>input,.field:not(.border,.flat,.round)>textarea,.field:not(.border,.flat,.round)>select{border-bottom-color:var(--outline)}.field:not(.border,.flat,.round)>input:focus,.field:not(.border,.flat,.round)>textarea:focus,.field:not(.border,.flat,.round)>select:focus{border-bottom-color:var(--primary)}.field{border-radius:8rem 8rem 0 0}.field.border{border-radius:8rem}.field.round{border-radius:32rem}.field.round.textarea{border-radius:24rem}.field.fill>input,.field.fill>textarea,.field.fill>select{box-shadow:none}.field.flat>input,.field.flat>textarea,.field.flat>select{border-color:transparent!important;box-shadow:none!important}.field.flat>input:focus,.field.flat>textarea:focus,.field.flat>select:focus{box-shadow:var(--shadow1)!important}.field.invalid:not(.border,.round,.flat)>input,.field.invalid:not(.border,.round,.flat)>textarea,.field.invalid:not(.border,.round,.flat)>select,.field.invalid:not(.border,.round,.flat)>input:focus,.field.invalid:not(.border,.round,.flat)>textarea:focus,.field.invalid:not(.border,.round,.flat)>select:focus{border-bottom-color:var(--error)}.field.invalid.border>input,.field.invalid.border>textarea,.field.invalid.border>select,.field.invalid.border>input:focus,.field.invalid.border>textarea:focus,.field.invalid.border>select:focus{border-color:var(--error)}.field>:disabled{opacity:.5;cursor:not-allowed}.field.small.textarea{height:72rem}.field.textarea,.field.medium.textarea{height:88rem}.field.large.textarea{height:104rem}.field.extra.textarea{height:120rem}.field>select>option{background-color:var(--surface);color:var(--on-surface)}.field.label>input,.field.label>select{padding-top:16rem}.field.label.border:not(.fill)>input,.field.label.border:not(.fill)>select{padding-top:0}.field.label.small>textarea{padding-top:18rem}.field.label>textarea,.field.label.medium>textarea{padding-top:22rem}.field.label.large>textarea{padding-top:26rem}.field.label.extra>textarea{padding-top:30rem}.field.small:not(.label)>textarea,.field.small.border:not(.fill)>textarea{padding-top:10rem}.field:not(.label)>textarea,.field.border:not(.fill)>textarea,.field.medium:not(.label)>textarea,.field.medium.border:not(.fill)>textarea{padding-top:14rem}.field.large:not(.label)>textarea,.field.large.border:not(.fill)>textarea{padding-top:18rem}.field.extra:not(.label)>textarea,.field.extra.border:not(.fill)>textarea{padding-top:22rem}.field.label>label{position:absolute;top:50%;left:16rem;font-size:16rem;transform:translateY(-50%);will-change:top,left;transition:var(--speed2) all,0s background-color;z-index:10}.field.label.textarea.small>label{top:20rem}.field.label.textarea>label,.field.label.textarea.medium>label{top:24rem}.field.label.textarea.large>label{top:28rem}.field.label.textarea.extra>label{top:32rem}.field.label.round>label{left:24rem}.field.label.prefix>label{left:48rem}.field.label>label.active,.field.label>[placeholder]:focus~label,.field.label>[placeholder]:not(:placeholder-shown)~label{font-size:12rem;transform:translateY(-120%)}.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:12rem;top:0%;left:16rem;transform:translateY(-50%)}.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:24rem}.field.label>:focus~label{color:var(--primary)}.field.invalid>label{color:var(--error)!important}.field>label.required:after,.field.required>label:after{content:" * "}.field>.helper,.field>.error{position:absolute;left:16rem;bottom:0;transform:translateY(100%);font-size:12rem;background:none!important;padding-top:2rem}a.helper{color:var(--primary)}.field>.error{color:var(--error)!important}.field.round>.helper,.field.round>.error{left:24rem}.field.invalid>.helper{display:none}table td>.field{max-height:100%;height:100%;margin:0;padding:0}i{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24rem;line-height:inherit;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:"liga";-webkit-font-smoothing:antialiased;vertical-align:middle;text-align:center;overflow:hidden;width:24rem;margin:0 auto}i.outlined{font-family:Material Icons Outlined}i.small{font-size:16rem;width:16rem}i.medium{font-size:24rem;width:24rem}i.large{font-size:32rem;width:32rem}i.extra{font-size:48rem;width:48rem}.circle>i{vertical-align:unset}.absolute{position:absolute}.fixed{position:fixed}.absolute,.fixed{border-radius:inherit;float:none}.absolute.round,.fixed.round,header.round,footer.round{border-radius:24rem}.absolute.border,.fixed.border,header.border,footer.border{border:1rem solid var(--outline)}.absolute.left.right,.fixed.left.right{width:auto}.absolute.left.right.small,.fixed.left.right.small{height:320rem}.absolute.left.right.medium,.fixed.left.right.medium{height:448rem}.absolute.left.right.large,.fixed.left.right.large{height:704rem}.absolute.top.bottom.small,.fixed.top.bottom.small{width:320rem}.absolute.top.bottom.medium,.fixed.top.bottom.medium{width:448rem}.absolute.top.bottom.large,.fixed.top.bottom.large{width:704rem}header.fixed,footer.fixed{position:sticky;top:0;bottom:0;left:0;right:0;z-index:11;background-color:inherit;padding:inherit;padding-left:0;padding-right:0}.modal>header.fixed,.card>header.fixed,article>header.fixed,.padding>header.fixed,.medium-padding>header.fixed{transform:translateY(-16rem)}.modal>footer.fixed,.card>footer.fixed,article>footer.fixed,.padding>footer.fixed,.medium-padding>footer.fixed{transform:translateY(16rem)}.no-padding>header.fixed,.no-padding>footer.fixed{transform:none}.small-padding>header.fixed{transform:translateY(-8rem)}.small-padding>footer.fixed{transform:translateY(8rem)}.large-padding>header.fixed{transform:translateY(-24rem)}.large-padding>footer.fixed{transform:translateY(24rem)}.loader{--loader-translateY: 0;display:inline-block;width:40rem;height:40rem;border-radius:50%;box-sizing:border-box;border:4rem 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:24rem;height:24rem;border-width:3rem}.loader.medium{width:40rem;height:40rem;border-width:4rem}.loader.large{width:56rem;height:56rem;border-width:5rem}.loader.red{border-color:#f44336!important}.loader.pink{border-color:#e91e63!important}.loader.purple{border-color:#9c27b0!important}.loader.deep-purple{border-color:#673ab7!important}.loader.indigo{border-color:#3f51b5!important}.loader.blue{border-color:#2196f3!important}.loader.light-blue{border-color:#03a9f4!important}.loader.cyan{border-color:#00bcd4!important}.loader.teal{border-color:#009688!important}.loader.green{border-color:#4caf50!important}.loader.light-green{border-color:#8bc34a!important}.loader.lime{border-color:#cddc39!important}.loader.yellow{border-color:#ffeb3b!important}.loader.amber{border-color:#ffc107!important}.loader.orange{border-color:#ff9800!important}.loader.deep-orange{border-color:#ff5722!important}.loader.brown{border-color:#795548!important}.loader.blue-grey{border-color:#607d8b!important}.loader.grey{border-color:#9e9e9e!important}.loader.black{border-color:#000!important}.loader.white{border-color:#fff!important}.field>.loader{--loader-translateY: -50%}@keyframes to-loader{0%{transform:translateY(var(--loader-translateY)) 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(--loader-translateY)) 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%)}}img,video{border-radius:inherit;margin:0 auto}img.right,video.right,i.right{position:absolute;right:0}img.left,video.left,i.left{position:absolute;left:0}img.small,img.medium,img.large,img.tiny,img.extra,img.border,img.round,img.circle,img.responsive,video.small,video.medium,video.large,video.tiny,video.extra,video.border,video.round,video.circle,video.responsive{object-fit:cover;object-position:center;transition:var(--speed3) transform,var(--speed3) border-radius,var(--speed3) padding}img.border,video.border{border:1rem solid var(--outline)}img.round,video.round{border-radius:8rem!important;height:48rem!important;width:48rem!important}img.circle,video.circle{border-radius:50%!important;height:48rem!important;width:48rem!important}img.tiny,video.tiny{height:32rem!important;width:32rem!important}img.small,video.small{height:40rem!important;width:40rem!important}img.medium,video.medium{height:48rem!important;width:48rem!important}img.large,video.large{height:56rem!important;width:56rem!important}img.extra,video.extra{height:64rem!important;width:64rem!important}img.responsive,video.responsive{width:100%!important;height:100%!important}button>img.responsive,.button>img.responsive,.chip>img.responsive{width:40rem!important;border:2rem solid transparent;box-sizing:border-box}button.small>img.responsive,.button.small>img.responsive,.chip.small>img.responsive{width:32rem!important}button.large>img.responsive,.button.large>img.responsive,.chip.large>img.responsive{width:48rem!important}button.extra>img.responsive,.button.extra>img.responsive,.chip.extra>img.responsive{width:56rem!important}img.responsive.tiny,video.responsive.tiny{width:100%!important;height:64rem!important}img.responsive.small,video.responsive.small{width:100%!important;height:128rem!important}img.responsive.medium,video.responsive.medium{width:100%!important;height:192rem!important}img.responsive.large,video.responsive.large{width:100%!important;height:256rem!important}img.responsive.extra,video.responsive.extra{width:100%!important;height:320rem!important}img.empty-state,video.empty-state{max-width:100%;width:384rem}button>img:not(.responsive,.tiny,.small,.medium,.large,.extra),.button>img:not(.responsive,.tiny,.small,.medium,.large,.extra),.chip>img:not(.responsive,.tiny,.small,.medium,.large,.extra),.field>img:not(.responsive,.tiny,.small,.medium,.large,.extra),.tabs>a>img:not(.responsive,.tiny,.small,.medium,.large,.extra),td img:not(.responsive,.tiny,.small,.medium,.large,.extra){min-width:24rem!important;max-width:24rem!important;min-height:24rem!important;max-height:24rem!important}.button.diamond>img,button.diamond>img,.button.circle>img,button.circle>img,.button.square>img,button.square>img{margin:0!important;padding:0!important}.button>img.responsive:first-child,button>img.responsive:first-child,.chip>img.responsive:first-child{margin-left:-16rem}.button>img.responsive:last-child,button>img.responsive:last-child,.chip>img.responsive:last-child{margin-right:-16rem}.button.extend>i:first-child,.button.extend>img:first-child,button.extend>i:first-child,button.extend>img:first-child{position:absolute;left:16rem}.button.extend>i:last-child,.button.extend>img:last-child,button.extend>i:last-child,button.extend>img:last-child{position:absolute;right:16rem}.button.extend>img.responsive:first-child,button.extend>img.responsive:first-child{position:absolute;left:0}.button.extend>img.responsive:last-child,button.extend>img.responsive:last-child{position:absolute;right:0}.modal{opacity:0;visibility:hidden;position:fixed;box-shadow:var(--shadow2);color:var(--on-surface-variant);background-color:var(--surface-variant);padding:16rem;box-sizing:border-box;z-index:100;left:50%;top:10%;min-width:320rem;max-width:100%;max-height:80%;overflow-x:hidden;overflow-y:auto;will-change:opacity,transform;transition:var(--speed3) all,0s background-color;transform:translate(-50%,-50%)}.modal.border{border:1rem solid var(--outline);box-shadow:none}.modal.round{border-radius:24rem}.modal.bottom.round{border-radius:24rem 24rem 0 0}.modal.top.round{border-radius:0 0 24rem 24rem}.modal.left.round{border-radius:0 24rem 24rem 0}.modal.right.round{border-radius:24rem 0 0 24rem}.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.left,.modal.active.right,.modal.active.top,.modal.active.bottom{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;float:none;top:0;left:0;right:auto;bottom:auto;width:auto;height:100%;max-height:100%;transform:translate(-100%)}.modal.right{opacity:1;float:none;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.left.small,.modal.right.small{width:320rem}.modal.left.medium,.modal.right.medium{width:512rem}.modal.left.large,.modal.right.large{width:704rem}.modal.top.small,.modal.bottom.small{height:256rem}.modal.top.medium,.modal.bottom.medium{height:384rem}.modal.top.large,.modal.bottom.large{height:512rem}nav>.modal,nav.left>.modal{z-index:0;text-align:left;padding:16rem 16rem 16rem 80rem;overflow-y:auto;background-color:inherit}nav.right>.modal{padding:16rem 80rem 16rem 16rem}nav.top>.modal{padding:80rem 48rem 16rem}nav.bottom>.modal{padding:16rem 48rem 80rem}.modal>a:not(button,.button,.chip):hover,.modal>a:not(button,.button,.chip).active{background-color:var(--active)}.modal>a.row{margin:0 -8rem}.modal>a:not(button,.button,.chip){padding:12rem 0}nav:not(.left,.right,.top,.bottom){display:flex;align-items:center;white-space:nowrap;margin:0 -8rem}*:not(.progress)+nav:not(.left,.right,.top,.bottom){margin-top:8rem}nav:not(.left,.right,.top,.bottom)>:not(.dropdown,.badge){margin:0 8rem}nav.wrap{display:block;white-space:normal}*:not(.progress)+nav.wrap{margin:8rem -8rem}nav.wrap>:not(.dropdown,.badge){margin:8rem}.field>nav{padding:0 8rem}nav.left,nav.right,nav.top,nav.bottom{display:flex;align-items:center;justify-content:center;flex-direction:column;border:0;position:fixed;box-shadow:var(--shadow2);color:var(--on-surface-variant);background-color:var(--surface-variant);transform:none;box-sizing:border-box;z-index:100;left:0;top:0;bottom:0;right:0;height:auto;width:auto;text-align:center;margin:0}nav.left,nav.right{width:80rem}nav.top,nav.bottom{height:80rem}nav.border{box-shadow:none;border:1rem solid var(--outline)}nav.left.border{border-top:none;border-bottom:none;border-left:none}nav.right.border{border-top:none;border-bottom:none;border-right:none}nav.top.border{border-top:none;border-right:none;border-left:none}nav.bottom.border{border-bottom:none;border-right:none;border-left:none}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.left>a:not(button,.button,.chip,img,video),nav.right>a:not(button,.button,.chip,img,video),nav.top>a:not(button,.button,.chip,img,video),nav.bottom>a:not(button,.button,.chip,img,video){min-width:56rem;min-height:56rem;text-align:center;margin:8rem;display:grid;z-index:101}nav.left>a:not(button,.button,.chip,img,video),nav.right>a:not(button,.button,.chip,img,video){width:auto}nav.top>a:not(button,.button,.chip,img,video),nav.bottom>a:not(button,.button,.chip,img,video){height:auto;width:56rem}nav.left:before,nav.right:before,nav.top:before,nav.bottom:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background-color:inherit;z-index:101}nav.left>:not(.modal,.overlay),nav.right>:not(.modal,.overlay),nav.top>:not(.modal,.overlay),nav.bottom>:not(.modal,.overlay){z-index:101}nav.no-space>a:not(button,.button,.chip){margin:0}nav.medium-space>a:not(button,.button,.chip){margin:16rem}nav.large-space>a:not(button,.button,.chip){margin:24rem}nav.left>a:not(button,.button,.chip)>i,nav.right>a:not(button,.button,.chip)>i,nav.top>a:not(button,.button,.chip)>i,nav.bottom>a:not(button,.button,.chip)>i{padding:4rem;border-radius:32rem;transition:var(--speed1) padding linear}nav.left>a:not(button,.button,.chip):hover>i,nav.left>a:not(button,.button,.chip):focus>i,nav.left>a:not(button,.button,.chip).active>i,nav.right>a:not(button,.button,.chip):hover>i,nav.right>a:not(button,.button,.chip):focus>i,nav.right>a:not(button,.button,.chip).active>i,nav.top>a:not(button,.button,.chip):hover>i,nav.top>a:not(button,.button,.chip):focus>i,nav.top>a:not(button,.button,.chip).active>i,nav.bottom>a:not(button,.button,.chip):focus>i,nav.bottom>a:not(button,.button,.chip):hover>i,nav.bottom>a:not(button,.button,.chip).active>i{background-color:var(--primary);color:var(--on-primary);padding:4rem 16rem}nav.left>.modal,nav.right>.modal,nav.top>.modal,nav.bottom>.modal{margin:0}nav.left>.modal{padding-left:88rem}nav.right>.modal{padding-right:88rem}nav.top>.modal{padding-top:88rem}nav.bottom>.modal{padding-bottom:88rem}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}@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;will-change:opacity;transition:var(--speed3) all,0s background-color}nav>.overlay{z-index:0}.overlay.active{opacity:1;visibility:visible}.overlay.active.top-align,.overlay.active.middle-align,.overlay.active.bottom-align{display:flex}.page,.modal:not(.active) .page.active,.page:not(.active) .page.active{opacity:0;position:absolute;visibility:hidden;display:block}.page.active{opacity:1;position:inherit;visibility:visible}.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(-64rem)}to{opacity:1;transform:translateY(0)}}@keyframes page-to-top{0%{opacity:0;transform:translateY(64rem)}to{opacity:1;transform:translateY(0)}}@keyframes page-to-left{0%{opacity:0;transform:translate(64rem)}to{opacity:1;transform:translate(0)}}@keyframes page-to-right{0%{opacity:0;transform:translate(-64rem)}to{opacity:1;transform:translate(0)}}.progress{position:absolute;background-color:var(--active);top:0;bottom:0;left:0;right:0;border-radius:inherit;margin:0!important;padding:0!important;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%)}.row{margin:0 -8rem;min-width:100%}.row .row:not(.no-wrap){margin-top:-8rem}.row .row .row:not(.no-wrap){margin-top:8rem}.row+.row,.row .row+.row{margin-top:16rem}.row:after{content:"";display:table;clear:both}.row.no-space{height:auto;margin:0}.row.min{width:fit-content;min-width:auto;max-width:-webkit-fill-available}.row.space,.row.small-space{margin:0 -8rem}.row.medium-space{margin:0 -12rem}.row.large-space{margin:0 -16rem}.row>.col{float:left;text-align:left;box-sizing:border-box;width:min-content;padding:8rem;margin-left:auto;left:auto;right:auto}.row.no-space>.col{padding:0}.row.space>.col,.row.small-space>.col{padding:8rem}.row.medium-space>.col{padding:12rem}.row.large-space>.col{padding:16rem}.row.no-wrap{margin-top:0;margin-bottom:0;display:flex}.modal>.row.no-wrap:only-child{min-height:100%;height:max-content}.row+.row{margin-top:16rem}.row.no-wrap>.col{float:none;flex:1;padding-top:0;padding-bottom:0;margin:0}.row.no-wrap>.col.min,.row.no-wrap.scroll>.col{flex:0}.row .col.s1{width:8.3333333333%}.row .col.s2{width:16.6666666667%}.row .col.s3{width:25%}.row .col.s4{width:33.3333333333%}.row .col.s5{width:41.6666666667%}.row .col.s6{width:50%}.row .col.s7{width:58.3333333333%}.row .col.s8{width:66.6666666667%}.row .col.s9{width:75%}.row .col.s10{width:83.3333333333%}.row .col.s11{width:91.6666666667%}.row .col.s12{width:100%}@media only screen and (min-width: 601px){.row .col.m1{width:8.3333333333%}.row .col.m2{width:16.6666666667%}.row .col.m3{width:25%}.row .col.m4{width:33.3333333333%}.row .col.m5{width:41.6666666667%}.row .col.m6{width:50%}.row .col.m7{width:58.3333333333%}.row .col.m8{width:66.6666666667%}.row .col.m9{width:75%}.row .col.m10{width:83.3333333333%}.row .col.m11{width:91.6666666667%}.row .col.m12{width:100%}}@media only screen and (min-width: 993px){.row .col.l1{width:8.3333333333%}.row .col.l2{width:16.6666666667%}.row .col.l3{width:25%}.row .col.l4{width:33.3333333333%}.row .col.l5{width:41.6666666667%}.row .col.l6{width:50%}.row .col.l7{width:58.3333333333%}.row .col.l8{width:66.6666666667%}.row .col.l9{width:75%}.row .col.l10{width:83.3333333333%}.row .col.l11{width:91.6666666667%}.row .col.l12{width:100%}}.checkbox,.radio,.switch{width:auto;height:auto;line-height:normal;white-space:nowrap;cursor:pointer;display:inline-flex;align-items:center}.checkbox>*,.radio>*,.switch>*{margin:0;padding:0}.checkbox>input,.radio>input{width:24rem;height:24rem;opacity:0}.checkbox>span,.radio>span,.switch>span{display:inline-flex;align-items:center;color:var(--on-background);font-size:14rem}.checkbox>span,.radio>span{padding-left:4rem}.checkbox>input+span:before,.radio>input+span:before{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24rem;line-height:inherit;letter-spacing:normal;text-transform:none;display:inline-flex;align-items:center;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:"liga";-webkit-font-smoothing:antialiased;vertical-align:middle;text-align:center;overflow:hidden;width:24rem;height:24rem;margin:0 auto;padding:0;outline:none;color:var(--primary);position:absolute;left:-24rem;background-color:transparent;border-radius:50%}.checkbox>input+span:before{content:"check_box_outline_blank"}.radio>input+span:before{content:"radio_button_unchecked"}.checkbox:focus>input:not([disabled])+span:before,.checkbox:hover>input:not([disabled])+span:before,.checkbox>input:not([disabled]):focus+span:before,.checkbox>input:not([disabled]):hover+span:before,.radio:focus>input:not([disabled])+span:before,.radio:hover>input:not([disabled])+span:before,.radio>input:not([disabled]):focus+span:before,.radio>input:not([disabled]):hover+span:before{background-color:var(--active);box-shadow:0 0 0 8rem var(--active);animation:var(--speed1) to-checked ease-out}.checkbox>input:checked+span:before{color:var(--primary);content:"check_box"}.radio>input:checked+span:before{color:var(--primary);content:"radio_button_checked"}.checkbox+.checkbox,.radio+.radio,.switch+.switch{margin-left:8rem}.field>.checkbox,.field>.radio,.field>.switch{margin:0 12rem 0 4rem}.field>nav>.checkbox,.field>nav>.radio,.field>nav>.switch{margin:0 4rem 0 12rem}.checkbox>span:empty,.radio>span:empty,.switch>span:empty{padding:0}.switch>input{width:40rem;height:24rem;opacity:0}.switch>input+span:before{content:"";position:absolute;left:0;top:50%;background-color:var(--on-background);opacity:.6;width:32rem;height:14rem;border-radius:8rem;animation:none;transform:translate(-40rem,-50%)}.switch>input:checked+span:before{background-color:var(--primary)}.switch>input+span:after{content:"";position:absolute;border-radius:50%;width:20rem;height:20rem;background-color:#fff;box-shadow:var(--shadow1);left:0;top:50%;transition:var(--speed1) transform,var(--speed1) background-color;transform:translate(-44rem,-50%)}.switch>input:checked+span:after{background-color:var(--primary);transform:translate(-24rem,-50%)}.switch:focus>input:not([disabled])+span:after,.switch:hover>input:not([disabled])+span:after,.switch>input:not([disabled]):focus+span:after,.switch>input:not([disabled]):hover+span:after{box-shadow:0 0 0 8rem var(--active);animation:var(--speed1) to-checked ease-out}.checkbox>input:disabled+span,.radio>input:disabled+span,.switch>input:disabled+span{opacity:.5;cursor:not-allowed}@keyframes to-checked{0%{box-shadow:0 0 0 0 var(--active)}to{box-shadow:0 0 0 8rem var(--active)}}table{width:100%;border-spacing:0;font-size:14rem;color:var(--on-background);text-align:left}table td,table th{width:1%;text-align:inherit;padding:8rem;margin:0}table th{font-weight:500}table.border td,table.border th{border-bottom:1rem solid var(--outline)}table.min{width:min-content;min-width:auto;max-width:-webkit-fill-available}table.no-space td,table.no-space th{padding:0}table.space td,table.space th,table.small-space th,table.small-space td{padding:8rem}table.medium-space td,table.medium-space th{padding:12rem}table.large-space td,table.large-space th{padding:16rem}td>.button,td>nav>.button,td>button,td>nav>button,td>.none,td>nav>.none,td>.chip,td>nav>.chip{min-height:24rem;max-height:24rem;box-sizing:border-box}td>.circle:not(.tiny,.small,.medium,.large,.extra),td>nav>.circle:not(.tiny,.small,.medium,.large,.extra),td>.square:not(.tiny,.small,.medium,.large,.extra),td>nav>.square:not(.tiny,.small,.medium,.large,.extra),td>.diamond:not(.tiny,.small,.medium,.large,.extra),td>nav>.diamond:not(.tiny,.small,.medium,.large,.extra){min-width:24rem;max-width:24rem;min-height:24rem;max-height:24rem;box-sizing:border-box}.tabs{display:flex;justify-content:space-around;margin-top:16rem;white-space:nowrap;border-bottom:1rem solid var(--outline)}*>.tabs:first-child{margin-top:0}.tabs>a{display:inline-flex;align-items:center;font-size:14rem;font-weight:500;color:var(--on-background);padding:0 16rem;text-transform:uppercase;border-bottom:2rem solid transparent;text-align:center;min-height:40rem;width:100%}.tabs>a>span{margin:4rem}.tabs.small>a{min-height:32rem}.tabs.medium>a{min-height:40rem}.tabs.large>a{min-height:48rem}.tabs>a.active{color:var(--primary);border-bottom:2rem solid var(--primary)}.tabs>a.active>i{color:var(--primary)}.tabs>a>i,.tabs>a>img{margin:0}.tabs.left-align>a,.tabs.center-align>a,.tabs.right-align>a{width:auto}.toast{position:fixed;top:auto;bottom:72rem;left:50%;right:auto;width:80%;height:auto;z-index:200;visibility:hidden;display:inline-block;box-shadow:var(--shadow2);color:var(--on-error);background-color:var(--error-background);padding:16rem;opacity:1;margin:0;cursor:pointer;transform:translate(-50%);text-align:left;display:flex;align-items:center}.toast.top{top:72rem;bottom:auto}.toast.bottom{top:auto;bottom:72rem}.toast.active{visibility:visible;animation:var(--speed2) toast-to-top}.toast.active.top{visibility:visible;animation:var(--speed2) toast-to-bottom}.toast.small{padding:8rem}.toast.medium{padding:16rem}.toast.large{padding:24rem}.toast.round{border-radius:24rem}.toast>*{margin:0;overflow:unset}.toast>*+*{margin-left:8rem}@keyframes toast-to-top{0%{opacity:0;transform:translate(-50%,16rem)}to{opacity:1;transform:translate(-50%)}}@keyframes toast-to-bottom{0%{opacity:0;transform:translate(-50%,-16rem)}to{opacity:1;transform:translate(-50%)}}@media only screen and (min-width: 993px){.toast{width:40%}}.tooltip{display:none;background-color:#000000e6;color:#fff;font-size:12rem;text-align:center;border-radius:4rem;padding:8rem;position:absolute;z-index:3;top:0;left:50%;bottom:auto;right:auto;transform:translate(-50%,-100%);width:auto;white-space:nowrap;line-height:normal;text-transform:none;font-weight:500}.tooltip.round{border-radius:64rem}.tooltip.border{border:1rem solid var(--outline)}.tooltip.left{left:0;top:50%;bottom:auto;right:auto;transform:translate(-100%,-50%)}.tooltip.right{right:0;top:50%;bottom:auto;left:auto;transform:translate(100%,-50%)}.tooltip.top{top:0;left:50%;bottom:auto;right:auto;transform:translate(-50%,-100%)}.tooltip.bottom{bottom:0;left:50%;top:auto;right:auto;transform:translate(-50%,100%)}.tooltip.small{width:128rem;white-space:normal}.tooltip.medium{width:192rem;white-space:normal}.tooltip.large{width:256rem;white-space:normal}*:hover>.tooltip{display:initial}.tooltip.margin,.tooltip.small-margin,.tooltip.medium-margin,.tooltip.large-margin{max-width:none;max-height:none}.tooltip.small-margin{margin:-8rem 0!important}.tooltip.margin,.tooltip.medium-margin{margin:-16rem 0!important}.tooltip.large-margin{margin:-24rem 0!important}.tooltip.left.small-margin,.tooltip.right.small-margin{margin:0 -8rem!important}.tooltip.left.margin,.tooltip.left.medium-margin,.tooltip.right.margin,.tooltip.right.medium-margin{margin:0 -16rem!important}.tooltip.left.large-margin,.tooltip.right.large-margin{margin:0 -24rem!important}.dropdown:active~.tooltip,button:focus>.dropdown~.tooltip,.button:focus>.dropdown~.tooltip,.field>:focus~.dropdown~.tooltip{display:none}.middle-align{display:flex!important;align-items:center}.bottom-align{display:flex!important;align-items:flex-end}.top-align{display:flex!important;align-items:flex-start}.left-align{text-align:left!important;justify-content:flex-start}.right-align{text-align:right!important;justify-content:flex-end}.center-align{text-align:center!important;justify-content:center}.center-align>.row,.center-align>table{margin-left:auto;margin-right:auto}.right-align>.row,.right-align>table{margin-left:auto}.left-align>.row,.left-align>table{margin-right:auto}.divider,.small-divider{border-bottom:1rem solid var(--outline);display:block;margin:8rem 0}.medium-divider{border-bottom:1rem solid var(--outline);display:block;margin:16rem 0}.large-divider{border-bottom:1rem solid var(--outline);display:block;margin:24rem 0}.row.divider,.row.small-divider{margin:0 -8rem!important;padding:8rem 0}.row.medium-divider{margin:0 -8rem!important;padding:16rem 0}.row.large-divider{margin:0 -8rem!important;padding:24rem 0}.flat{box-shadow:none!important}.round{border-radius:24rem}.top-round{border-radius:24rem 24rem 4rem 4rem!important}.bottom-round{border-radius:4rem 4rem 24rem 24rem!important}.left-round{border-radius:24rem 4rem 4rem 24rem!important}.right-round{border-radius:4rem 24rem 24rem 4rem!important}.top-round.left-round{border-radius:24rem 24rem 4rem!important}.top-round.right-round{border-radius:24rem 24rem 24rem 4rem!important}.bottom-round.left-round{border-radius:24rem 4rem 24rem 24rem!important}.bottom-round.right-round{border-radius:4rem 24rem 24rem!important}.circle,.square,.diamond{min-width:40rem;min-height:40rem;max-width:40rem;max-height:40rem;height:40rem}.circle>span,.square>span,.diamond>span{display:none}.diamond.small,.square.small,.circle.small{min-width:32rem;min-height:32rem;max-width:32rem;max-height:32rem;height:32rem}.diamond.large,.square.large,.circle.large{min-width:48rem;min-height:48rem;max-width:48rem;max-height:48rem;height:48rem}.diamond.extra,.square.extra,.circle.extra{min-width:56rem;min-height:56rem;max-width:56rem;max-height:56rem;height:56rem}.diamond{transform:rotate(45deg);border-radius:4rem;padding:0}.diamond>i{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-45deg);margin:0;padding:0}.square.round,.circle.round,.diamond.round{border-radius:16rem}.diamond.round{transform:rotate(45deg)}.no-margin{margin:0!important}.small-margin{margin:8rem!important}.medium-margin,.margin{margin:16rem!important}.large-margin{margin:24rem!important}.no-opacity{opacity:0}.opacity{opacity:1}.no-padding{padding:0!important}.small-padding{padding:8rem!important}.medium-padding,.padding{padding:16rem!important}.large-padding{padding:24rem!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;padding-bottom:16rem}.no-scroll{overflow:hidden!important}.shadow{background-color:#00000050!important;box-shadow:none!important}.left-shadow{background-color:transparent!important;box-shadow:none!important;background-image:linear-gradient(to right,black,transparent)!important}.right-shadow{background-color:transparent!important;box-shadow:none!important;background-image:linear-gradient(to left,black,transparent)!important}.bottom-shadow{background-color:transparent!important;box-shadow:none!important;background-image:linear-gradient(to top,black,transparent)!important}.top-shadow{background-color:transparent!important;box-shadow:none!important;background-image:linear-gradient(to bottom,black,transparent)!important}.no-shadow{box-shadow:none!important}.small-shadow{box-shadow:var(--shadow1)!important}.medium-shadow{box-shadow:var(--shadow2)!important}.large-shadow{box-shadow:var(--shadow3)!important}.small-width{width:192rem!important;max-width:100%}.medium-width{width:384rem!important;max-width:100%}.large-width{width:576rem!important;max-width:100%}.small-height{height:192rem!important}.medium-height{height:384rem!important}.large-height{height:576rem!important}.wrap{display:block}a.no-wrap{flex-direction:row}a.wrap{flex-direction:column}.space:not(nav,.row,table),.small-space:not(nav,.row,table){height:16rem;display:block}.medium-space:not(nav,.row,table){height:32rem;display:block}.large-space:not(nav,.row,table){height:48rem;display:block}.responsive{margin:0;width:-webkit-fill-available;width:-moz-available}.responsive>i,.responsive>img{margin:0}@media only screen and (max-width: 600px){.medium-device:not(.small-device),.large-device:not(.small-device),.medium-device.large-device:not(.small-device),.m:not(.s),.l:not(.s),.m.l:not(.s){display:none!important}}@media only screen and (min-width: 601px) and (max-width: 992px){.small-device:not(.medium-device),.large-device:not(.medium-device),.small-device.large-device:not(.medium-device),.s:not(.m),.l:not(.m),.s.l:not(.m){display:none!important}}@media only screen and (min-width: 993px){.medium-device:not(.large-device),.small-device:not(.large-device),.medium-device.small-device:not(.large-device),.m:not(.l),.s:not(.l),.m.s:not(.l){display:none!important}}html{font-size:var(--size)}body{font-family:var(--font);font-size:14rem}h1,h2,h3,h4,h5,h6{font-weight:400;margin-bottom:8rem;display:flex;align-items:center}*:not(.progress)+h1,*:not(.progress)+h2,*:not(.progress)+h3,*:not(.progress)+h4,*:not(.progress)+h5,*:not(.progress)+h6{margin-top:8rem}h1{font-size:96rem}h2{font-size:60rem}h3{font-size:48rem}h4{font-size:34rem}h5{font-size:24rem}h6{font-size:20rem}.link{color:var(--primary)}.truncate{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.small-text{font-size:12rem}.medium-text{font-size:14rem}.large-text{font-size:16rem}.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:8rem 0}.wave:after,.wave.light:after,.chip:after,.button:after,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,rgba(255,255,255,.4) 1%,transparent 1%);opacity:0;transition:none;will-change:background-size}.wave.dark:after,.chip.border:after,.button.none:after,button.none:after,.button.border:after,button.border:after{background-image:radial-gradient(circle,rgba(150,150,150,.2) 1%,transparent 1%)}.wave.none:after,.button.none:after,button.none:after{top:0;left:-4rem;padding:0 4rem}.wave.none:not(.small,.medium,.large,.extra):after,.button.none:not(.small,.medium,.large,.extra):after,button.none:not(.small,.medium,.large,.extra):after{top:-4rem;left:-4rem;padding:4rem}.wave:hover:after,.chip:hover:after,.button:hover:after,button:hover:after,.wave:focus:after,.chip:focus:after,.button:focus:after,button:focus:after{background-size:15000%;opacity:1;transition:var(--speed2) background-size linear}.wave:active:after,.chip:active:after,.button:active:after,button:active:after{background-size:5000%;opacity:0;transition:none}.no-wave:after,.no-wave:hover:after,.no-wave:active:after{display:none}
|
|
1
|
+
@import"https://fonts.googleapis.com/css2?family=Material+Icons&family=Material+Icons+Outlined&family=Roboto:wght@300;400;500&display=swap";:root,body.light{--primary: #6750A4;--on-primary: #FFFFFF;--primary-container: #EADDFF;--on-primary-container: #21005E;--secondary: #625B71;--on-secondary: #FFFFFF;--secondary-container: #E8DEF8;--on-secondary-container: #1E192B;--tertiary: #7D5260;--on-tertiary: #FFFFFF;--tertiary-container: #FFD8E4;--on-tertiary-container: #370B1E;--error: #B3261E;--on-error: #FFFFFF;--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;--overlay: rgba(0,0,0,.5);--active: rgba(0,0,0,.1);--shadow1: 0 2rem 2rem 0 rgba(0, 0, 0, .14), 0 1rem 5rem 0 rgba(0, 0, 0, .12), 0 3rem 1rem -2rem rgba(0, 0, 0, .2);--shadow2: 0 6rem 10rem 0 rgba(0, 0, 0, .14), 0 1rem 18rem 0 rgba(0, 0, 0, .12), 0 3rem 5rem -1rem rgba(0, 0, 0, .3);--shadow3: 0 10rem 16rem 0 rgba(0, 0, 0, .14), 0 1rem 31rem 0 rgba(0, 0, 0, .12), 0 3rem 9rem 0rem rgba(0, 0, 0, .4);--size: 1px;--font: "Roboto", BlinkMacSystemFont, -apple-system, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;--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;--overlay: rgba(0,0,0,.5);--active: rgba(255,255,255,.2);--shadow1: 0 2rem 2rem 0 rgba(0, 0, 0, .14), 0 1rem 5rem 0 rgba(0, 0, 0, .12), 0 3rem 1rem -2rem rgba(0, 0, 0, .2);--shadow2: 0 6rem 10rem 0 rgba(0, 0, 0, .14), 0 1rem 18rem 0 rgba(0, 0, 0, .12), 0 3rem 5rem -1rem rgba(0, 0, 0, .3);--shadow3: 0 10rem 16rem 0 rgba(0, 0, 0, .14), 0 1rem 31rem 0 rgba(0, 0, 0, .12), 0 3rem 9rem 0rem rgba(0, 0, 0, .4);--size: 1px;--font: "Roboto", BlinkMacSystemFont, -apple-system, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;--speed1: .1s;--speed2: .2s;--speed3: .3s;--speed4: .4s}*{-webkit-tap-highlight-color:transparent;position:relative;vertical-align:middle;color:inherit;margin:0;padding:0}body{color:var(--on-background);background-color:var(--background);margin:0;overflow-x:hidden}label{font-size:12rem;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}.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}.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}.transparent-border{border-color:transparent!important}.transparent-text{color:transparent!important}.badge{display:inline-flex;align-items:center;justify-content:center;position:absolute;font-size:10rem;text-transform:none;z-index:1;padding:0 6rem;background-color:var(--error);color:var(--on-error);top:0;left:auto;bottom:auto;right:0;transform:translate(50%,-100%);width:16rem;height:16rem}.badge.none{top:auto;left:auto;bottom:auto;right:auto;transform:none;position:relative;margin:0 2rem}.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.top.right{top:0;left:auto;bottom:auto;right:0;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:1rem solid var(--error);background-color:transparent;color:var(--error)}.badge.round{border-radius:8rem}.badge.circle,.badge.square{padding:0;text-align:center;width:16rem;height:16rem;min-width:auto;min-height:auto;max-width:none;max-height:none}.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;box-shadow:var(--shadow1);min-height:40rem;height:40rem;font-size:14rem;font-weight:500;color:var(--on-primary);padding:0 16rem;background-color:var(--primary);margin:0 8rem;border-radius:8rem;transition:var(--speed3) transform,var(--speed3) border-radius,var(--speed3) padding;user-select:none}.button>:not(.dropdown,.progress,.badge,.tooltip)+:not(.dropdown,.progress,.badge,.tooltip),button>:not(.dropdown,.progress,.badge,.tooltip)+:not(.dropdown,.progress,.badge,.tooltip){margin-left:4rem}.button.none,button.none{box-shadow:none;width:auto;min-width:auto;height:auto;min-height:auto;color:var(--primary);padding:0;background-color:transparent;margin:0 8rem}.button.small,button.small{min-height:32rem!important;height:32rem;font-size:14rem}.button.medium,button.medium{min-height:40rem!important;height:40rem}.button.large,button.large{min-height:48rem!important;height:48rem}.button.extra,button.extra{min-height:56rem!important;height:56rem;font-size:16rem}.button.border,button.border{border:1rem solid var(--primary);background-color:transparent;color:var(--primary);box-shadow:none}.button.round,button.round{transform:none;border-radius:32rem}.button.top-round,button.top-round{border-radius:32rem 32rem 4rem 4rem!important}.button.bottom-round,button.bottom-round{border-radius:4rem 4rem 32rem 32rem!important}.button.left-round,button.left-round{border-radius:32rem 4rem 4rem 32rem!important}.button.right-round,button.right-round{border-radius:4rem 32rem 32rem 4rem!important}.button.top-round.left-round,button.top-round.left-round{border-radius:32rem 32rem 4rem!important}.button.top-round.right-round,button.top-round.right-round{border-radius:32rem 32rem 32rem 4rem!important}.button.bottom-round.left-round,button.bottom-round.left-round{border-radius:32rem 4rem 32rem 32rem!important}.button.bottom-round.right-round,button.bottom-round.right-round{border-radius:4rem 32rem 32rem!important}.button.circle,button.circle{transform:none;border-radius:40rem;padding:0}.button.square,button.square{transform:none;border-radius:4rem;padding:0}.button.extend,button.extend{min-height:56rem!important;min-width:56rem!important;padding:0}.button.extend>span,button.extend>span{display:none}.button.extend:hover,button.extend:hover,.button.extend.active,button.extend.active{width:auto;max-width:none;min-width:auto;padding:0 16rem}.button.extend:hover>i+span,button.extend:hover>i+span,.button.extend.active>i+span,button.extend.active>i+span{display:inherit;margin-left:32rem}.button.extend:hover>img+span,button.extend:hover>img+span,.button.extend.active>img+span,button.extend.active>img+span{display:inherit;margin-left:48rem}.button.square:not(.flat,.border),.button.circle:not(.flat,.border),.button.diamond:not(.flat,.border),button.square:not(.flat,.border),button.circle:not(.flat,.border),button.diamond:not(.flat,.border){box-shadow:var(--shadow2)}.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}.card,article{box-shadow:var(--shadow1);background-color:var(--surface-variant);color:var(--on-surface-variant);padding:16rem;border-radius:4rem;display:block;transition:var(--speed3) transform,var(--speed3) border-radius,var(--speed3) padding}.card+.card,article+article{margin-top:16rem}.row.medium-space>.col>.card+.card,.row.medium-space>.col>article+article{margin-top:24rem}.row.large-space>.col>.card+.card,.row.large-space>.col>article+article{margin-top:32rem}.card.small,article.small{height:192rem}.card.medium,article.medium{height:320rem}.card.large,article.large{height:512rem}.card.border,article.border{border:1rem solid var(--outline);box-shadow:none;background-color:transparent}.card.round,article.round{border-radius:24rem}.chip{box-sizing:content-box;display:inline-flex;align-items:center;justify-content:center;box-shadow:none;min-height:40rem;height:40rem;font-size:14rem;font-weight:500;color:var(--on-secondary);padding:0 16rem;background-color:var(--secondary);margin:0 8rem;text-transform:none;border-radius:8rem;transition:var(--speed3) transform,var(--speed3) border-radius,var(--speed3) padding;user-select:none}.chip>:not(.dropdown,.progress,.badge,.tooltip)+:not(.dropdown,.progress,.badge,.tooltip){margin-left:4rem}.chip.small{min-height:32rem!important;height:32rem}.chip.medium{min-height:40rem!important;height:40rem}.chip.large{min-height:48rem!important;height:48rem}.chip.border{border:1rem solid var(--secondary);background-color:transparent;color:var(--secondary)}.chip.active:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;background-color:var(--active)}.chip.circle{transform:none;border-radius:40rem;padding:0}.chip.square{transform:none;border-radius:4rem;padding:0}.chip.round{border-radius:24rem}main.responsive,main.responsive.min{margin:0 auto;max-width:992rem;padding:8rem;overflow-x:hidden;min-height:100vh;box-sizing:border-box}main.responsive.max{max-width:100%}nav.top:not(.s,.m,.l)~main.responsive{padding-top:96rem}nav.bottom:not(.s,.m,.l)~main.responsive{padding-bottom:96rem}nav.left:not(.s,.m,.l)~main.responsive{padding-left:96rem}nav.right:not(.s,.m,.l)~main.responsive{padding-right:96rem}@media only screen and (max-width: 600px){nav.s.bottom~main.responsive{padding-bottom:96rem}nav.s.top~main.responsive{padding-top:96rem}nav.s.left~main.responsive{padding-left:96rem}nav.s.right~main.responsive{padding-right:96rem}}@media only screen and (min-width: 601px) and (max-width: 992px){nav.m.bottom~main.responsive{padding-bottom:96rem}nav.m.top~main.responsive{padding-top:96rem}nav.m.left~main.responsive{padding-left:96rem}nav.m.right~main.responsive{padding-right:96rem}}@media only screen and (min-width: 993px){nav.l.bottom~main.responsive{padding-bottom:96rem}nav.l.top~main.responsive{padding-top:96rem}nav.l.left~main.responsive{padding-left:96rem}nav.l.right~main.responsive{padding-right:96rem}}@media only screen and (max-width: 600px){main.responsive{padding-right:8rem;padding-left:8rem}}.dropdown{opacity:0;visibility:hidden;position:absolute;box-shadow:var(--shadow2);background-color:var(--surface);box-sizing:border-box;z-index:11;top:auto;bottom:0;left:0;right:auto;width:100%;max-height:320rem;transform:translateY(100%);overflow-x:hidden;overflow-y:auto;font-size:14rem;font-weight:400;text-transform:none;color:var(--on-surface);line-height:normal;text-align:left}.dropdown.no-wrap{width:auto}.dropdown.active,.dropdown:not([data-ui]):active,button:not([data-ui]):focus-within>.dropdown,.button:not([data-ui]):focus-within>.dropdown,.field>:not([data-ui]):focus-within~.dropdown{opacity:1;visibility:visible;max-width:none;animation:var(--speed1) dropdown-to-bottom}.dropdown.border{border:1rem solid var(--outline);box-shadow:none}.dropdown.round{border-radius:24rem}.dropdown.right{left:0;right:auto}.dropdown.left{left:auto;right:0}.dropdown>a{display:block;padding:8rem 16rem}.dropdown>a:hover,.dropdown>a:focus,.dropdown>a.active{background-color:var(--active)}.dropdown.no-wrap>a{white-space:nowrap}.dropdown>a.row.no-wrap,.dropdown>a.row.no-wrap+a.row.no-wrap{margin:0 -8rem}@keyframes dropdown-to-bottom{0%{opacity:0;transform:translateY(75%)}to{opacity:1;transform:translateY(100%)}}details[open]>:not(summary){animation:details-to-open var(--speed3) ease}summary.none{list-style-type:none}summary{cursor:pointer}summary:focus{outline:none}@keyframes details-to-open{0%{opacity:0;transform:translateY(-8rem)}to{opacity:1;transform:translateY(0)}}.field{height:48rem;margin-bottom:32rem;border:none!important}*:not(.field)+.field,.field+*:not(.field){margin-top:16rem}.row>.col>.field:last-child{margin-bottom:16rem}.row.no-space>.col>.field:not(:last-child){margin-bottom:16rem}.row.medium-space>.col>.field:not(:last-child){margin-bottom:40rem}.row.large-space>.col>.field:not(:last-child){margin-bottom:48rem}.field.small{height:40rem}.field.medium{height:48rem}.field.large{height:56rem}.field.extra{height:64rem}.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>i,.field>img,.field>.loader{position:absolute;top:50%;left:auto;right:16rem;transform:translateY(-50%);cursor:pointer;z-index:0}.field.border>i,.field.fill>i,.field.round>i,.field.border>img,.field.fill>img,.field.round>img,.field.border>.loader,.field.fill>.loader,.field.round>.loader{left:auto;right:16rem}.field>i:first-child,.field>img:first-child,.field>.loader:first-child{left:16rem;right:auto}.field.border>i:first-child,.field.fill>i:first-child,.field.round>i:first-child,.field.border>img:first-child,.field.fill>img:first-child,.field.round>img:first-child,.field.border>.loader:first-child,.field.fill>.loader:first-child,.field.round>.loader:first-child{left:16rem;right:auto}.field.invalid>i{color:var(--error)!important}.field>.loader{border-width:3rem;width:24rem;height:24rem}.field>select,input[type^=date],input[type^=time]{-webkit-appearance:none;-moz-appearance:none;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;padding:0;margin:0;cursor:pointer}input[type=file]{position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;opacity:0;cursor:pointer}.field>input,.field>textarea,.field>select{border:1rem solid transparent;padding:0 15rem;font-family:inherit;font-size:16rem;width:100%;height:100%;outline:none;z-index:1;background:none;box-sizing:border-box;resize:none;border-radius:inherit}.field>input:focus,.field>textarea:focus,.field>select:focus{border:2rem solid transparent;padding:0 14rem}.field.border>input,.field.border>textarea,.field.border>select{border-color:var(--outline);box-shadow:none!important}.field.border>input:focus,.field.border>textarea:focus,.field.border>select:focus{border-color:var(--primary)}.field.round>input,.field.round>textarea,.field.round>select{box-shadow:var(--shadow1);padding-left:23rem;padding-right:23rem}.field.round>input:focus,.field.round>textarea:focus,.field.round>select:focus{padding-left:22rem;padding-right:22rem}.field.prefix>input,.field.prefix>textarea,.field.prefix>select{padding-left:47rem}.field.prefix>input:focus,.field.prefix>textarea:focus,.field.prefix>select:focus{padding-left:46rem}.field.suffix>input,.field.suffix>textarea,.field.suffix>select{padding-right:47rem}.field.suffix>input:focus,.field.suffix>textarea:focus,.field.suffix>select:focus{padding-right:46rem}.field:not(.border,.flat,.round)>input,.field:not(.border,.flat,.round)>textarea,.field:not(.border,.flat,.round)>select{border-bottom-color:var(--outline)}.field:not(.border,.flat,.round)>input:focus,.field:not(.border,.flat,.round)>textarea:focus,.field:not(.border,.flat,.round)>select:focus{border-bottom-color:var(--primary)}.field{border-radius:8rem 8rem 0 0}.field.border{border-radius:8rem}.field.round{border-radius:32rem}.field.round.textarea{border-radius:24rem}.field.fill>input,.field.fill>textarea,.field.fill>select{box-shadow:none}.field.flat>input,.field.flat>textarea,.field.flat>select{border-color:transparent!important;box-shadow:none!important}.field.flat>input:focus,.field.flat>textarea:focus,.field.flat>select:focus{box-shadow:var(--shadow1)!important}.field.invalid:not(.border,.round,.flat)>input,.field.invalid:not(.border,.round,.flat)>textarea,.field.invalid:not(.border,.round,.flat)>select,.field.invalid:not(.border,.round,.flat)>input:focus,.field.invalid:not(.border,.round,.flat)>textarea:focus,.field.invalid:not(.border,.round,.flat)>select:focus{border-bottom-color:var(--error)}.field.invalid.border>input,.field.invalid.border>textarea,.field.invalid.border>select,.field.invalid.border>input:focus,.field.invalid.border>textarea:focus,.field.invalid.border>select:focus{border-color:var(--error)}.field>:disabled{opacity:.5;cursor:not-allowed}.field.small.textarea{height:72rem}.field.textarea,.field.medium.textarea{height:88rem}.field.large.textarea{height:104rem}.field.extra.textarea{height:120rem}.field>select>option{background-color:var(--surface);color:var(--on-surface)}.field.label>input,.field.label>select{padding-top:16rem}.field.label.border:not(.fill)>input,.field.label.border:not(.fill)>select{padding-top:0}.field.label.small>textarea{padding-top:18rem}.field.label>textarea,.field.label.medium>textarea{padding-top:22rem}.field.label.large>textarea{padding-top:26rem}.field.label.extra>textarea{padding-top:30rem}.field.small:not(.label)>textarea,.field.small.border:not(.fill)>textarea{padding-top:10rem}.field:not(.label)>textarea,.field.border:not(.fill)>textarea,.field.medium:not(.label)>textarea,.field.medium.border:not(.fill)>textarea{padding-top:14rem}.field.large:not(.label)>textarea,.field.large.border:not(.fill)>textarea{padding-top:18rem}.field.extra:not(.label)>textarea,.field.extra.border:not(.fill)>textarea{padding-top:22rem}.field.label>label{position:absolute;top:50%;left:16rem;font-size:16rem;transform:translateY(-50%);will-change:top,left;transition:var(--speed2) all,0s background-color;z-index:0}.field.label.textarea.small>label{top:20rem}.field.label.textarea>label,.field.label.textarea.medium>label{top:24rem}.field.label.textarea.large>label{top:28rem}.field.label.textarea.extra>label{top:32rem}.field.label.round>label{left:24rem}.field.label.prefix>label{left:48rem}.field.label>label.active,.field.label>[placeholder]:focus~label,.field.label>[placeholder]:not(:placeholder-shown)~label{font-size:12rem;transform:translateY(-120%)}.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:12rem;top:0%;left:16rem;transform:translateY(-50%)}.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:24rem}.field.label>:focus~label{color:var(--primary)}.field.invalid>label{color:var(--error)!important}.field>label.required:after,.field.required>label:after{content:" * "}.field>.helper,.field>.error{position:absolute;left:16rem;bottom:0;transform:translateY(100%);font-size:12rem;background:none!important;padding-top:2rem}a.helper{color:var(--primary)}.field>.error{color:var(--error)!important}.field.round>.helper,.field.round>.error{left:24rem}.field.invalid>.helper{display:none}table td>.field{max-height:100%;height:100%;margin:0;padding:0}i{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24rem;line-height:inherit;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:"liga";-webkit-font-smoothing:antialiased;vertical-align:middle;text-align:center;overflow:hidden;width:24rem;margin:0 auto}i.outlined{font-family:Material Icons Outlined}i.small{font-size:16rem;width:16rem}i.medium{font-size:24rem;width:24rem}i.large{font-size:32rem;width:32rem}i.extra{font-size:48rem;width:48rem}.circle>i{vertical-align:unset}.absolute{position:absolute}.fixed{position:fixed}.absolute,.fixed{border-radius:inherit;float:none}.absolute.round,.fixed.round,header.round,footer.round{border-radius:24rem}.absolute.border,.fixed.border,header.border,footer.border{border:1rem solid var(--outline)}.absolute.left.right,.fixed.left.right{width:auto}.absolute.left.right.small,.fixed.left.right.small{height:320rem}.absolute.left.right.medium,.fixed.left.right.medium{height:448rem}.absolute.left.right.large,.fixed.left.right.large{height:704rem}.absolute.top.bottom.small,.fixed.top.bottom.small{width:320rem}.absolute.top.bottom.medium,.fixed.top.bottom.medium{width:448rem}.absolute.top.bottom.large,.fixed.top.bottom.large{width:704rem}header.fixed,footer.fixed{position:sticky;top:0;bottom:0;left:0;right:0;z-index:11;background-color:inherit;padding:inherit;padding-left:0;padding-right:0}.modal>header.fixed,.card>header.fixed,article>header.fixed,.padding>header.fixed,.medium-padding>header.fixed{transform:translateY(-16rem)}.modal>footer.fixed,.card>footer.fixed,article>footer.fixed,.padding>footer.fixed,.medium-padding>footer.fixed{transform:translateY(16rem)}.no-padding>header.fixed,.no-padding>footer.fixed{transform:none}.small-padding>header.fixed{transform:translateY(-8rem)}.small-padding>footer.fixed{transform:translateY(8rem)}.large-padding>header.fixed{transform:translateY(-24rem)}.large-padding>footer.fixed{transform:translateY(24rem)}.loader{--loader-translateY: 0;display:inline-block;width:40rem;height:40rem;border-radius:50%;box-sizing:border-box;border:4rem 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:24rem;height:24rem;border-width:3rem}.loader.medium{width:40rem;height:40rem;border-width:4rem}.loader.large{width:56rem;height:56rem;border-width:5rem}.loader.red{border-color:#f44336!important}.loader.pink{border-color:#e91e63!important}.loader.purple{border-color:#9c27b0!important}.loader.deep-purple{border-color:#673ab7!important}.loader.indigo{border-color:#3f51b5!important}.loader.blue{border-color:#2196f3!important}.loader.light-blue{border-color:#03a9f4!important}.loader.cyan{border-color:#00bcd4!important}.loader.teal{border-color:#009688!important}.loader.green{border-color:#4caf50!important}.loader.light-green{border-color:#8bc34a!important}.loader.lime{border-color:#cddc39!important}.loader.yellow{border-color:#ffeb3b!important}.loader.amber{border-color:#ffc107!important}.loader.orange{border-color:#ff9800!important}.loader.deep-orange{border-color:#ff5722!important}.loader.brown{border-color:#795548!important}.loader.blue-grey{border-color:#607d8b!important}.loader.grey{border-color:#9e9e9e!important}.loader.black{border-color:#000!important}.loader.white{border-color:#fff!important}.field>.loader{--loader-translateY: -50%}@keyframes to-loader{0%{transform:translateY(var(--loader-translateY)) 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(--loader-translateY)) 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%)}}img,video{border-radius:inherit;margin:0 auto;max-width:none!important;max-height:none!important;min-width:auto!important;min-height:auto!important}img.right,video.right,i.right{position:absolute;right:0}img.left,video.left,i.left{position:absolute;left:0}img.small,img.medium,img.large,img.tiny,img.extra,img.border,img.round,img.circle,img.responsive,video.small,video.medium,video.large,video.tiny,video.extra,video.border,video.round,video.circle,video.responsive{object-fit:cover;object-position:center;transition:var(--speed3) transform,var(--speed3) border-radius,var(--speed3) padding}img.border,video.border{border:1rem solid var(--outline)}img.round,video.round{border-radius:8rem!important;height:48rem!important;width:48rem!important}img.circle,video.circle{border-radius:50%!important;height:48rem!important;width:48rem!important}img.tiny,video.tiny{height:32rem!important;width:32rem!important}img.small,video.small{height:40rem!important;width:40rem!important}img.medium,video.medium{height:48rem!important;width:48rem!important}img.large,video.large{height:56rem!important;width:56rem!important}img.extra,video.extra{height:64rem!important;width:64rem!important}img.responsive,video.responsive{width:100%!important;height:100%!important}button>img.responsive,.button>img.responsive,.chip>img.responsive{width:40rem!important;border:2rem solid transparent;box-sizing:border-box}button.small>img.responsive,.button.small>img.responsive,.chip.small>img.responsive{width:32rem!important}button.large>img.responsive,.button.large>img.responsive,.chip.large>img.responsive{width:48rem!important}button.extra>img.responsive,.button.extra>img.responsive,.chip.extra>img.responsive{width:56rem!important}img.responsive.tiny,video.responsive.tiny{width:100%!important;height:64rem!important}img.responsive.small,video.responsive.small{width:100%!important;height:128rem!important}img.responsive.medium,video.responsive.medium{width:100%!important;height:192rem!important}img.responsive.large,video.responsive.large{width:100%!important;height:256rem!important}img.responsive.extra,video.responsive.extra{width:100%!important;height:320rem!important}img.responsive.round,video.responsive.round{border-radius:24rem!important}img.empty-state,video.empty-state{max-width:100%;width:384rem}button>img:not(.responsive,.tiny,.small,.medium,.large,.extra),.button>img:not(.responsive,.tiny,.small,.medium,.large,.extra),.chip>img:not(.responsive,.tiny,.small,.medium,.large,.extra),.field>img:not(.responsive,.tiny,.small,.medium,.large,.extra),.tabs>a>img:not(.responsive,.tiny,.small,.medium,.large,.extra),td img:not(.responsive,.tiny,.small,.medium,.large,.extra){min-width:24rem!important;max-width:24rem!important;min-height:24rem!important;max-height:24rem!important}.button.diamond>img,button.diamond>img,.button.circle>img,button.circle>img,.button.square>img,button.square>img{margin:0!important;padding:0!important}.button>img.responsive:first-child,button>img.responsive:first-child,.chip>img.responsive:first-child{margin-left:-16rem}.button>img.responsive:last-child,button>img.responsive:last-child,.chip>img.responsive:last-child{margin-right:-16rem}.button.extend>i:first-child,.button.extend>img:first-child,button.extend>i:first-child,button.extend>img:first-child{position:absolute;left:16rem}.button.extend>i:last-child,.button.extend>img:last-child,button.extend>i:last-child,button.extend>img:last-child{position:absolute;right:16rem}.button.extend>img.responsive:first-child,button.extend>img.responsive:first-child{position:absolute;left:0}.button.extend>img.responsive:last-child,button.extend>img.responsive:last-child{position:absolute;right:0}.modal{opacity:0;visibility:hidden;position:fixed;box-shadow:var(--shadow2);color:var(--on-surface-variant);background-color:var(--surface-variant);padding:16rem;box-sizing:border-box;z-index:100;left:50%;top:10%;min-width:320rem;max-width:100%;max-height:80%;overflow-x:hidden;overflow-y:auto;will-change:opacity,transform;transition:var(--speed3) all,0s background-color;transform:translate(-50%,-50%)}.modal.border{border:1rem solid var(--outline);box-shadow:none}.modal.round{border-radius:24rem}.modal.bottom.round{border-radius:24rem 24rem 0 0}.modal.top.round{border-radius:0 0 24rem 24rem}.modal.left.round{border-radius:0 24rem 24rem 0}.modal.right.round{border-radius:24rem 0 0 24rem}.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.left,.modal.active.right,.modal.active.top,.modal.active.bottom{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;float:none;top:0;left:0;right:auto;bottom:auto;width:auto;height:100%;max-height:100%;transform:translate(-100%)}.modal.right{opacity:1;float:none;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.left.small,.modal.right.small{width:320rem}.modal.left.medium,.modal.right.medium{width:512rem}.modal.left.large,.modal.right.large{width:704rem}.modal.top.small,.modal.bottom.small{height:256rem}.modal.top.medium,.modal.bottom.medium{height:384rem}.modal.top.large,.modal.bottom.large{height:512rem}nav>.modal,nav.left>.modal{z-index:0;text-align:left;padding:16rem 16rem 16rem 80rem;overflow-y:auto;background-color:inherit}nav.right>.modal{padding:16rem 80rem 16rem 16rem}nav.top>.modal{padding:80rem 48rem 16rem}nav.bottom>.modal{padding:16rem 48rem 80rem}.modal>a:not(button,.button,.chip):hover,.modal>a:not(button,.button,.chip).active{background-color:var(--active)}.modal>a.row{margin:0 -8rem}.modal>a:not(button,.button,.chip){padding:12rem 0}nav:not(.left,.right,.top,.bottom){display:flex;align-items:center;white-space:nowrap;margin:0 -8rem}*:not(.progress)+nav:not(.left,.right,.top,.bottom){margin-top:8rem}nav:not(.left,.right,.top,.bottom)>:not(.dropdown,.badge){margin:0 8rem}nav.wrap{display:block;white-space:normal}*:not(.progress)+nav.wrap{margin:8rem -8rem}nav.wrap>:not(.dropdown,.badge){margin:8rem}.field>nav{padding:0 8rem}nav>.max{flex-grow:1}nav.left,nav.right,nav.top,nav.bottom{display:flex;align-items:center;justify-content:center;flex-direction:column;border:0;position:fixed;box-shadow:var(--shadow2);color:var(--on-surface-variant);background-color:var(--surface-variant);transform:none;box-sizing:border-box;z-index:100;left:0;top:0;bottom:0;right:0;height:auto;width:auto;text-align:center;margin:0}nav.left,nav.right{width:80rem}nav.top,nav.bottom{height:80rem}nav.border{box-shadow:none;border:1rem solid var(--outline)}nav.left.border{border-top:none;border-bottom:none;border-left:none}nav.right.border{border-top:none;border-bottom:none;border-right:none}nav.top.border{border-top:none;border-right:none;border-left:none}nav.bottom.border{border-bottom:none;border-right:none;border-left:none}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.left>a:not(button,.button,.chip,img,video),nav.right>a:not(button,.button,.chip,img,video),nav.top>a:not(button,.button,.chip,img,video),nav.bottom>a:not(button,.button,.chip,img,video){min-width:56rem;min-height:56rem;text-align:center;margin:8rem;display:grid;z-index:101}nav.left>a:not(button,.button,.chip,img,video),nav.right>a:not(button,.button,.chip,img,video){width:auto}nav.top>a:not(button,.button,.chip,img,video),nav.bottom>a:not(button,.button,.chip,img,video){height:auto;width:56rem}nav.left:before,nav.right:before,nav.top:before,nav.bottom:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background-color:inherit;z-index:101}nav.left>:not(.modal,.overlay),nav.right>:not(.modal,.overlay),nav.top>:not(.modal,.overlay),nav.bottom>:not(.modal,.overlay){z-index:101}nav.no-space>a:not(button,.button,.chip){margin:0}nav.medium-space>a:not(button,.button,.chip){margin:16rem}nav.large-space>a:not(button,.button,.chip){margin:24rem}nav.left>a:not(button,.button,.chip)>i,nav.right>a:not(button,.button,.chip)>i,nav.top>a:not(button,.button,.chip)>i,nav.bottom>a:not(button,.button,.chip)>i{padding:4rem;border-radius:32rem;transition:var(--speed1) padding linear}nav.left>a:not(button,.button,.chip):hover>i,nav.left>a:not(button,.button,.chip):focus>i,nav.left>a:not(button,.button,.chip).active>i,nav.right>a:not(button,.button,.chip):hover>i,nav.right>a:not(button,.button,.chip):focus>i,nav.right>a:not(button,.button,.chip).active>i,nav.top>a:not(button,.button,.chip):hover>i,nav.top>a:not(button,.button,.chip):focus>i,nav.top>a:not(button,.button,.chip).active>i,nav.bottom>a:not(button,.button,.chip):focus>i,nav.bottom>a:not(button,.button,.chip):hover>i,nav.bottom>a:not(button,.button,.chip).active>i{background-color:var(--primary);color:var(--on-primary);padding:4rem 16rem}nav.left>.modal,nav.right>.modal,nav.top>.modal,nav.bottom>.modal{margin:0}nav.left>.modal{padding-left:88rem}nav.right>.modal{padding-right:88rem}nav.top>.modal{padding-top:88rem}nav.bottom>.modal{padding-bottom:88rem}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}@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;will-change:opacity;transition:var(--speed3) all,0s background-color}nav>.overlay{z-index:0}.overlay.active{opacity:1;visibility:visible}.overlay.active.top-align,.overlay.active.middle-align,.overlay.active.bottom-align{display:flex}.page,.modal:not(.active) .page.active,.page:not(.active) .page.active{opacity:0;position:absolute;visibility:hidden;display:block}.page.active{opacity:1;position:inherit;visibility:visible}.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(-64rem)}to{opacity:1;transform:translateY(0)}}@keyframes page-to-top{0%{opacity:0;transform:translateY(64rem)}to{opacity:1;transform:translateY(0)}}@keyframes page-to-left{0%{opacity:0;transform:translate(64rem)}to{opacity:1;transform:translate(0)}}@keyframes page-to-right{0%{opacity:0;transform:translate(-64rem)}to{opacity:1;transform:translate(0)}}.progress{position:absolute;background-color:var(--active);top:0;bottom:0;left:0;right:0;border-radius:inherit;margin:0!important;padding:0!important;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%)}.row{margin:0 -8rem;min-width:100%}.row .row:not(.no-wrap){margin-top:-8rem}.row .row .row:not(.no-wrap){margin-top:8rem}.row+.row,.row .row+.row{margin-top:16rem}.row:after{content:"";display:table;clear:both}.row.no-space{height:auto;margin:0}.row.min{width:fit-content;min-width:auto;max-width:-webkit-fill-available}.row.space,.row.small-space{margin:0 -8rem}.row.medium-space{margin:0 -12rem}.row.large-space{margin:0 -16rem}.row>.col{float:left;text-align:left;box-sizing:border-box;width:min-content;padding:8rem;margin-left:auto;left:auto;right:auto}.row.no-space>.col{padding:0}.row.space>.col,.row.small-space>.col{padding:8rem}.row.medium-space>.col{padding:12rem}.row.large-space>.col{padding:16rem}.row.no-wrap{margin-top:0;margin-bottom:0;display:flex}.modal>.row.no-wrap:only-child{min-height:100%;height:max-content}.row+.row{margin-top:16rem}.row.no-wrap>.col{float:none;flex:1;padding-top:0;padding-bottom:0;margin:0}.row.no-wrap>.col.min,.row.no-wrap.scroll>.col{flex:0}.row .col.s1{width:8.3333333333%}.row .col.s2{width:16.6666666667%}.row .col.s3{width:25%}.row .col.s4{width:33.3333333333%}.row .col.s5{width:41.6666666667%}.row .col.s6{width:50%}.row .col.s7{width:58.3333333333%}.row .col.s8{width:66.6666666667%}.row .col.s9{width:75%}.row .col.s10{width:83.3333333333%}.row .col.s11{width:91.6666666667%}.row .col.s12{width:100%}@media only screen and (min-width: 601px){.row .col.m1{width:8.3333333333%}.row .col.m2{width:16.6666666667%}.row .col.m3{width:25%}.row .col.m4{width:33.3333333333%}.row .col.m5{width:41.6666666667%}.row .col.m6{width:50%}.row .col.m7{width:58.3333333333%}.row .col.m8{width:66.6666666667%}.row .col.m9{width:75%}.row .col.m10{width:83.3333333333%}.row .col.m11{width:91.6666666667%}.row .col.m12{width:100%}}@media only screen and (min-width: 993px){.row .col.l1{width:8.3333333333%}.row .col.l2{width:16.6666666667%}.row .col.l3{width:25%}.row .col.l4{width:33.3333333333%}.row .col.l5{width:41.6666666667%}.row .col.l6{width:50%}.row .col.l7{width:58.3333333333%}.row .col.l8{width:66.6666666667%}.row .col.l9{width:75%}.row .col.l10{width:83.3333333333%}.row .col.l11{width:91.6666666667%}.row .col.l12{width:100%}}.checkbox,.radio,.switch{width:auto;height:auto;line-height:normal;white-space:nowrap;cursor:pointer;display:inline-flex;align-items:center}.checkbox>*,.radio>*,.switch>*{margin:0;padding:0}.checkbox>input,.radio>input{width:24rem;height:24rem;opacity:0}.checkbox>span,.radio>span,.switch>span{display:inline-flex;align-items:center;color:var(--on-background);font-size:14rem}.checkbox>span,.radio>span{padding-left:4rem}.checkbox>input+span:before,.radio>input+span:before{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24rem;line-height:inherit;letter-spacing:normal;text-transform:none;display:inline-flex;align-items:center;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:"liga";-webkit-font-smoothing:antialiased;vertical-align:middle;text-align:center;overflow:hidden;width:24rem;height:24rem;margin:0 auto;padding:0;outline:none;color:var(--primary);position:absolute;left:-24rem;background-color:transparent;border-radius:50%}.checkbox>input+span:before{content:"check_box_outline_blank"}.radio>input+span:before{content:"radio_button_unchecked"}.checkbox:focus>input:not([disabled])+span:before,.checkbox:hover>input:not([disabled])+span:before,.checkbox>input:not([disabled]):focus+span:before,.checkbox>input:not([disabled]):hover+span:before,.radio:focus>input:not([disabled])+span:before,.radio:hover>input:not([disabled])+span:before,.radio>input:not([disabled]):focus+span:before,.radio>input:not([disabled]):hover+span:before{background-color:var(--active);box-shadow:0 0 0 8rem var(--active);animation:var(--speed1) to-checked ease-out}.checkbox>input:checked+span:before{color:var(--primary);content:"check_box"}.radio>input:checked+span:before{color:var(--primary);content:"radio_button_checked"}.checkbox+.checkbox,.radio+.radio,.switch+.switch{margin-left:8rem}.field>.checkbox,.field>.radio,.field>nav>.checkbox,.field>nav>.radio{margin:0 4rem 0 12rem}.field>.switch,.field>nav>.switch{margin:0 4rem 0 16rem}.checkbox>span:empty,.radio>span:empty,.switch>span:empty{padding:0}.switch>input{width:40rem;height:24rem;opacity:0}.switch>input+span:before{content:"";position:absolute;left:0;top:50%;background-color:var(--on-background);opacity:.6;width:32rem;height:14rem;border-radius:8rem;animation:none;transform:translate(-40rem,-50%)}.switch>input:checked+span:before{background-color:var(--primary)}.switch>input+span:after{content:"";position:absolute;border-radius:50%;width:20rem;height:20rem;background-color:#fff;box-shadow:var(--shadow1);left:0;top:50%;transition:var(--speed1) transform,var(--speed1) background-color;transform:translate(-44rem,-50%)}.switch>input:checked+span:after{background-color:var(--primary);transform:translate(-24rem,-50%)}.switch:focus>input:not([disabled])+span:after,.switch:hover>input:not([disabled])+span:after,.switch>input:not([disabled]):focus+span:after,.switch>input:not([disabled]):hover+span:after{box-shadow:0 0 0 8rem var(--active);animation:var(--speed1) to-checked ease-out}.checkbox>input:disabled+span,.radio>input:disabled+span,.switch>input:disabled+span{opacity:.5;cursor:not-allowed}@keyframes to-checked{0%{box-shadow:0 0 0 0 var(--active)}to{box-shadow:0 0 0 8rem var(--active)}}table{width:100%;border-spacing:0;font-size:14rem;color:var(--on-background);text-align:left}table td,table th{width:1%;text-align:inherit;padding:8rem;margin:0}table th{font-weight:500}table.border td,table.border th{border-bottom:1rem solid var(--outline)}table.min{width:min-content;min-width:auto;max-width:-webkit-fill-available}table.no-space td,table.no-space th{padding:0}table.space td,table.space th,table.small-space th,table.small-space td{padding:8rem}table.medium-space td,table.medium-space th{padding:12rem}table.large-space td,table.large-space th{padding:16rem}td>.button,td>nav>.button,td>button,td>nav>button,td>.none,td>nav>.none,td>.chip,td>nav>.chip{min-height:24rem;max-height:24rem;box-sizing:border-box}td>.circle:not(.tiny,.small,.medium,.large,.extra),td>nav>.circle:not(.tiny,.small,.medium,.large,.extra),td>.square:not(.tiny,.small,.medium,.large,.extra),td>nav>.square:not(.tiny,.small,.medium,.large,.extra),td>.diamond:not(.tiny,.small,.medium,.large,.extra),td>nav>.diamond:not(.tiny,.small,.medium,.large,.extra){min-width:24rem;max-width:24rem;min-height:24rem;max-height:24rem;box-sizing:border-box}.tabs{display:flex;justify-content:space-around;margin-top:16rem;white-space:nowrap;border-bottom:1rem solid var(--outline)}*>.tabs:first-child{margin-top:0}.tabs>a{display:inline-flex;align-items:center;font-size:14rem;font-weight:500;color:var(--on-background);padding:0 16rem;text-transform:uppercase;border-bottom:2rem solid transparent;text-align:center;min-height:40rem;width:100%}.tabs>a>span{margin:4rem}.tabs.small>a{min-height:32rem}.tabs.medium>a{min-height:40rem}.tabs.large>a{min-height:48rem}.tabs>a.active{color:var(--primary);border-bottom:2rem solid var(--primary)}.tabs>a.active>i{color:var(--primary)}.tabs>a>i,.tabs>a>img{margin:0}.tabs.left-align>a,.tabs.center-align>a,.tabs.right-align>a{width:auto}.toast{position:fixed;top:auto;bottom:72rem;left:50%;right:auto;width:80%;height:auto;z-index:200;visibility:hidden;display:inline-block;box-shadow:var(--shadow2);color:var(--on-error);background-color:var(--error-background);padding:16rem;opacity:1;margin:0;cursor:pointer;transform:translate(-50%);text-align:left;display:flex;align-items:center}.toast.top{top:72rem;bottom:auto}.toast.bottom{top:auto;bottom:72rem}.toast.active{visibility:visible;animation:var(--speed2) toast-to-top}.toast.active.top{visibility:visible;animation:var(--speed2) toast-to-bottom}.toast.small{padding:8rem}.toast.medium{padding:16rem}.toast.large{padding:24rem}.toast.round{border-radius:24rem}.toast>*{margin:0;overflow:unset}.toast>*+*{margin-left:8rem}@keyframes toast-to-top{0%{opacity:0;transform:translate(-50%,16rem)}to{opacity:1;transform:translate(-50%)}}@keyframes toast-to-bottom{0%{opacity:0;transform:translate(-50%,-16rem)}to{opacity:1;transform:translate(-50%)}}@media only screen and (min-width: 993px){.toast{width:40%}}.tooltip{display:none;background-color:#000000e6;color:#fff;font-size:12rem;text-align:center;border-radius:4rem;padding:8rem;position:absolute;z-index:3;top:0;left:50%;bottom:auto;right:auto;transform:translate(-50%,-100%);width:auto;white-space:nowrap;line-height:normal;text-transform:none;font-weight:500}.tooltip.round{border-radius:64rem}.tooltip.border{border:1rem solid var(--outline)}.tooltip.left{left:0;top:50%;bottom:auto;right:auto;transform:translate(-100%,-50%)}.tooltip.right{right:0;top:50%;bottom:auto;left:auto;transform:translate(100%,-50%)}.tooltip.top{top:0;left:50%;bottom:auto;right:auto;transform:translate(-50%,-100%)}.tooltip.bottom{bottom:0;left:50%;top:auto;right:auto;transform:translate(-50%,100%)}.tooltip.small{width:128rem;white-space:normal}.tooltip.medium{width:192rem;white-space:normal}.tooltip.large{width:256rem;white-space:normal}*:hover>.tooltip{display:initial}.tooltip.margin,.tooltip.small-margin,.tooltip.medium-margin,.tooltip.large-margin{max-width:none;max-height:none}.tooltip.small-margin{margin:-8rem 0!important}.tooltip.margin,.tooltip.medium-margin{margin:-16rem 0!important}.tooltip.large-margin{margin:-24rem 0!important}.tooltip.left.small-margin,.tooltip.right.small-margin{margin:0 -8rem!important}.tooltip.left.margin,.tooltip.left.medium-margin,.tooltip.right.margin,.tooltip.right.medium-margin{margin:0 -16rem!important}.tooltip.left.large-margin,.tooltip.right.large-margin{margin:0 -24rem!important}.dropdown:active~.tooltip,button:focus>.dropdown~.tooltip,.button:focus>.dropdown~.tooltip,.field>:focus~.dropdown~.tooltip{display:none}.middle-align{display:flex!important;align-items:center}.bottom-align{display:flex!important;align-items:flex-end}.top-align{display:flex!important;align-items:flex-start}.left-align{text-align:left!important;justify-content:flex-start}.right-align{text-align:right!important;justify-content:flex-end}.center-align{text-align:center!important;justify-content:center}.center-align>.row,.center-align>table{margin-left:auto;margin-right:auto}.right-align>.row,.right-align>table{margin-left:auto}.left-align>.row,.left-align>table{margin-right:auto}.divider,.small-divider{border-bottom:1rem solid var(--outline);display:block;margin:8rem 0}.medium-divider{border-bottom:1rem solid var(--outline);display:block;margin:16rem 0}.large-divider{border-bottom:1rem solid var(--outline);display:block;margin:24rem 0}.row.divider,.row.small-divider{margin:0 -8rem!important;padding:8rem 0}.row.medium-divider{margin:0 -8rem!important;padding:16rem 0}.row.large-divider{margin:0 -8rem!important;padding:24rem 0}.flat{box-shadow:none!important}.round{border-radius:24rem}.top-round{border-radius:24rem 24rem 4rem 4rem!important}.bottom-round{border-radius:4rem 4rem 24rem 24rem!important}.left-round{border-radius:24rem 4rem 4rem 24rem!important}.right-round{border-radius:4rem 24rem 24rem 4rem!important}.top-round.left-round{border-radius:24rem 24rem 4rem!important}.top-round.right-round{border-radius:24rem 24rem 24rem 4rem!important}.bottom-round.left-round{border-radius:24rem 4rem 24rem 24rem!important}.bottom-round.right-round{border-radius:4rem 24rem 24rem!important}.circle,.square,.diamond{min-width:40rem;min-height:40rem;max-width:40rem;max-height:40rem;height:40rem}.circle>span,.square>span,.diamond>span{display:none}.diamond.small,.square.small,.circle.small{min-width:32rem;min-height:32rem;max-width:32rem;max-height:32rem;height:32rem}.diamond.large,.square.large,.circle.large{min-width:48rem;min-height:48rem;max-width:48rem;max-height:48rem;height:48rem}.diamond.extra,.square.extra,.circle.extra{min-width:56rem;min-height:56rem;max-width:56rem;max-height:56rem;height:56rem}.diamond{transform:rotate(45deg);border-radius:4rem;padding:0}.diamond>i{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-45deg);margin:0;padding:0}.square.round,.circle.round,.diamond.round{border-radius:16rem}.diamond.round{transform:rotate(45deg)}.no-margin{margin:0!important}.small-margin{margin:8rem!important}.medium-margin,.margin{margin:16rem!important}.large-margin{margin:24rem!important}.no-opacity{opacity:0}.opacity{opacity:1}.no-padding{padding:0!important}.small-padding{padding:8rem!important}.medium-padding,.padding{padding:16rem!important}.large-padding{padding:24rem!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;padding-bottom:16rem}.no-scroll{overflow:hidden!important}.shadow{background-color:#00000050!important;box-shadow:none!important}.left-shadow{background-color:transparent!important;box-shadow:none!important;background-image:linear-gradient(to right,black,transparent)!important}.right-shadow{background-color:transparent!important;box-shadow:none!important;background-image:linear-gradient(to left,black,transparent)!important}.bottom-shadow{background-color:transparent!important;box-shadow:none!important;background-image:linear-gradient(to top,black,transparent)!important}.top-shadow{background-color:transparent!important;box-shadow:none!important;background-image:linear-gradient(to bottom,black,transparent)!important}.no-shadow{box-shadow:none!important}.small-shadow{box-shadow:var(--shadow1)!important}.medium-shadow{box-shadow:var(--shadow2)!important}.large-shadow{box-shadow:var(--shadow3)!important}.small-width{width:192rem!important;max-width:100%}.medium-width{width:384rem!important;max-width:100%}.large-width{width:576rem!important;max-width:100%}.small-height{height:192rem!important}.medium-height{height:384rem!important}.large-height{height:576rem!important}.wrap{display:block}a.no-wrap{flex-direction:row}a.wrap{flex-direction:column}.space:not(nav,.row,table),.small-space:not(nav,.row,table){height:16rem;display:block}.medium-space:not(nav,.row,table){height:32rem;display:block}.large-space:not(nav,.row,table){height:48rem;display:block}.responsive{margin:0;width:-webkit-fill-available;width:-moz-available}.responsive>i,.responsive>img{margin:0}@media only screen and (max-width: 600px){.medium-device:not(.small-device),.large-device:not(.small-device),.medium-device.large-device:not(.small-device),.m:not(.s),.l:not(.s),.m.l:not(.s){display:none!important}}@media only screen and (min-width: 601px) and (max-width: 992px){.small-device:not(.medium-device),.large-device:not(.medium-device),.small-device.large-device:not(.medium-device),.s:not(.m),.l:not(.m),.s.l:not(.m){display:none!important}}@media only screen and (min-width: 993px){.medium-device:not(.large-device),.small-device:not(.large-device),.medium-device.small-device:not(.large-device),.m:not(.l),.s:not(.l),.m.s:not(.l){display:none!important}}html{font-size:var(--size)}body{font-family:var(--font);font-size:14rem}h1,h2,h3,h4,h5,h6{font-weight:400;margin-bottom:8rem;display:flex;align-items:center}*:not(.progress)+h1,*:not(.progress)+h2,*:not(.progress)+h3,*:not(.progress)+h4,*:not(.progress)+h5,*:not(.progress)+h6{margin-top:8rem}h1{font-size:96rem}h2{font-size:60rem}h3{font-size:48rem}h4{font-size:34rem}h5{font-size:24rem}h6{font-size:20rem}.link{color:var(--primary)}.truncate{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.small-text{font-size:12rem}.medium-text{font-size:14rem}.large-text{font-size:16rem}.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:8rem 0}.wave:after,.wave.light:after,.chip:after,.button:after,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,rgba(255,255,255,.4) 1%,transparent 1%);opacity:0;transition:none;will-change:background-size}.wave.dark:after,.chip.border:after,.button.none:after,button.none:after,.button.border:after,button.border:after{background-image:radial-gradient(circle,rgba(150,150,150,.2) 1%,transparent 1%)}.wave.none:after,.button.none:after,button.none:after{top:0;left:-4rem;padding:0 4rem}.wave.none:not(.small,.medium,.large,.extra):after,.button.none:not(.small,.medium,.large,.extra):after,button.none:not(.small,.medium,.large,.extra):after{top:-4rem;left:-4rem;padding:4rem}.wave:hover:after,.chip:hover:after,.button:hover:after,button:hover:after,.wave:focus:after,.chip:focus:after,.button:focus:after,button:focus:after{background-size:15000%;opacity:1;transition:var(--speed2) background-size linear}.wave:active:after,.chip:active:after,.button:active:after,button:active:after{background-size:5000%;opacity:0;transition:none}.no-wave:after,.no-wave:hover:after,.no-wave:active:after{display:none}
|
package/dist/cdn/beer.min.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(()=>{let
|
|
1
|
+
(()=>{if(window.ui)return;let g=null,x=null,y=null,m={light:"",dark:""};const Y=()=>"fxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,r=>{let t=Math.random()*16|0;return(r=="x"?t:t&3|8).toString(16)}),u=(r,t)=>{try{return typeof r=="string"?(t||document).querySelector(r):r}catch{}},c=(r,t)=>{try{return typeof r=="string"?(t||document).querySelectorAll(r):r}catch{}},n=(r,t)=>r?r.classList.contains(t):!1,p=(r,t)=>{!r||r.classList.add(t)},d=(r,t)=>{!r||r.classList.remove(t)},s=(r,t,o)=>{r.addEventListener(t,o,!0)},D=(r,t,o)=>{r.removeEventListener(t,o,!0)},q=(r,t)=>{if(!!t)return t.parentNode.insertBefore(r,t)},F=r=>{if(!!r)return r.previousElementSibling},B=r=>{if(!!r)return r.nextElementSibling},f=r=>{if(!!r)return r.parentElement},T=r=>{let t=document.createElement("div");for(let o in r)t[o]=r[o];return t},v=r=>{let t=r,o=f(r),e=u("label",o),a=n(o,"border")&&!n(o,"fill");if(document.activeElement==r||t.value||/date|time/.test(t.type)){if(a&&e){let i=n(e,"active")?e.offsetWidth:Math.round(e.offsetWidth/1.33),b=n(o,"round")?20:12,C=i+b+8;t.style.clipPath=`polygon(0% 0%, ${b}rem 0%, ${b}rem 8rem, ${C}rem 8rem, ${C}rem 0%, 100% 0%, 100% 100%, 0% 100%)`}else t.style.clipPath="";p(e,"active")}else d(e,"active"),t.style.clipPath="";r.getAttribute("data-ui")&&z(r)},A=r=>{let t=r.currentTarget;/input/i.test(t.tagName)||z(t)},j=r=>{let t=r.currentTarget,o=u("input:not([type=file]):not([type=checkbox]):not([type=radio]), select, textarea",f(t));o&&o.focus()},S=r=>{let t=r.currentTarget;v(t)},$=r=>{let t=r.currentTarget;v(t)},E=r=>{let t=r.currentTarget;c(".dropdown.active").forEach(e=>d(e,"active")),D(t,"click",E)},L=r=>{let t=r.currentTarget;d(t,"active"),g&&clearTimeout(g)},M=r=>{let t=r.currentTarget;k(t)},_=r=>{let t=r.currentTarget;k(t,r)},I=()=>{x&&clearTimeout(x),x=setTimeout(w,180)},k=(r,t)=>{if(t){if(t.key!=="Enter")return;let a=t.currentTarget,l=B(a);return!l||!/file/i.test(l.type)?void 0:l.click()}let o=r,e=F(r);!e||!/text/i.test(e.type)||(e.value=Array.from(o.files).map(a=>a.name).join(", "),e.readOnly=!0,e.addEventListener("keydown",_),v(e))},z=(r,t,o)=>{if(t||(t=u(r.getAttribute("data-ui"))),n(t,"modal"))return O(r,t);if(n(t,"dropdown"))return P(r,t);if(n(t,"toast"))return H(r,t,o);if(n(t,"page"))return N(r,t);if(n(t,"progress"))return U(t,o);if(h(r),n(t,"active"))return d(t,"active");p(t,"active")},h=r=>{let t=f(r);if(!n(t,"tabs"))return;c("a",t).forEach(e=>d(e,"active")),p(r,"active")},N=(r,t)=>{h(r);let o=f(t);for(let e=0;e<o.children.length;e++)n(o.children[e],"page")&&d(o.children[e],"active");p(t,"active")},P=(r,t)=>{if(h(r),n(t,"active"))return d(t,"active");c(".dropdown.active").forEach(e=>d(e,"active")),p(t,"active"),s(document.body,"click",E)},O=(r,t)=>{h(r);let o=F(t);n(o,"overlay")||(o=T({className:"overlay active"}),q(o,t)),o.onclick=()=>{d(r,"active"),d(t,"active"),d(o,"active")};let e=n(t,"active"),a=f(t);/nav/i.test(a.tagName)&&c(".modal, a, .overlay",a).forEach(i=>d(i,"active")),e?(d(r,"active"),d(o,"active"),d(t,"active")):(p(r,"active"),p(o,"active"),p(t,"active"))},H=(r,t,o)=>{h(r),c(".toast.active").forEach(a=>d(a,"active")),p(t,"active"),s(t,"click",L),g&&clearTimeout(g),!(o&&o==-1)&&(g=setTimeout(()=>{d(t,"active")},o&&o?o:6e3))},U=(r,t)=>{let o=r;if(n(o,"left"))return o.style.clipPath=`polygon(0% 0%, 0% 100%, ${t}% 100%, ${t}% 0%)`;if(n(o,"top"))return o.style.clipPath=`polygon(0% 0%, 100% 0%, 100% ${t}%, 0% ${t}%)`;if(n(o,"right"))return o.style.clipPath=`polygon(100% 0%, 100% 100%, ${100-t}% 100%, ${100-t}% 0%)`;if(n(o,"bottom"))return o.style.clipPath=`polygon(0% 100%, 100% 100%, 100% ${100-t}%, 0% ${100-t}%)`},R=()=>{if(m.light&&m.dark)return m;let r=document.createElement("body");r.className="light",document.body.appendChild(r);let t=document.createElement("body");t.className="dark",document.body.appendChild(t);let o=getComputedStyle(r),e=getComputedStyle(t),a=["--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 l=0;l<a.length;l++)m.light+=a[l]+":"+o.getPropertyValue(a[l])+";",m.dark+=a[l]+":"+e.getPropertyValue(a[l])+";";return document.body.removeChild(r),document.body.removeChild(t),m},V=r=>{if(!r||!window.materialDynamicColors)return R();let t=/dark/i.test(document.body.className)?"dark":"light";return r&&r.light&&r.dark?(m.light=r.light,m.dark=r.dark,document.body.setAttribute("style",r[t]),r):window.materialDynamicColors(r).then(o=>{const e=a=>{let l="";for(let i in a){let b=i.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g,"$1-$2").toLowerCase();l+="--"+b+":"+a[i]+";"}return l};return m.light=e(o.light),m.dark=e(o.dark),document.body.setAttribute("style",m[t]),m})},W=r=>r?(document.body.classList.remove("light","dark"),document.body.classList.add(r),window.materialDynamicColors&&document.body.setAttribute("style",m[r]),r):/dark/i.test(document.body.className)?"dark":"light",Z=()=>{y||(y=new MutationObserver(I),y.observe(document.body,{childList:!0,subtree:!0}),w())},w=(r,t)=>{if(r){if(r=="setup")return Z();if(r=="guid")return Y();if(r=="mode")return W(t);if(r=="theme")return V(t);let i=u(r),b=u("[data-ui='#"+i.id+"']");z(b,i,t)}c("[data-ui]").forEach(i=>s(i,"click",A)),c(".field > label").forEach(i=>s(i,"click",j)),c(".field > input:not([type=file]):not([type=checkbox]):not([type=radio]), .field > select, .field > textarea").forEach(i=>{s(i,"focus",S),s(i,"blur",$),v(i)}),c(".field > input[type=file]").forEach(i=>{s(i,"change",M),k(i)})};window.ui=w,window.addEventListener("load",()=>w("setup"))})();
|
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": "2.1.
|
|
5
|
+
"version": "2.1.3",
|
|
6
6
|
"name": "beercss",
|
|
7
7
|
"license": "MIT",
|
|
8
8
|
"type": "module",
|
|
@@ -1,237 +1,241 @@
|
|
|
1
1
|
(() => {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
2
|
+
if (window["ui"]) return;
|
|
3
|
+
|
|
4
|
+
interface ILastTheme {
|
|
5
|
+
dark:string,
|
|
6
|
+
light:string
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
let _timeoutToast:NodeJS.Timeout = null;
|
|
10
|
+
let _timeoutMutation:NodeJS.Timeout = null;
|
|
11
|
+
let _mutation:MutationObserver = null;
|
|
12
|
+
let _lastTheme:ILastTheme = {
|
|
13
|
+
light: "",
|
|
14
|
+
dark: ""
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
const guid = ():string => {
|
|
18
|
+
return "fxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c:string) => {
|
|
11
19
|
let r = (Math.random() * 16) | 0,
|
|
12
20
|
v = c == "x" ? r : (r & 0x3) | 0x8;
|
|
13
21
|
return v.toString(16);
|
|
14
22
|
});
|
|
15
|
-
}
|
|
23
|
+
}
|
|
16
24
|
|
|
17
|
-
const query = (selector, element) => {
|
|
25
|
+
const query = (selector:string|Element, element?:Element):Element => {
|
|
18
26
|
try {
|
|
19
|
-
return selector
|
|
20
|
-
? selector
|
|
21
|
-
:
|
|
27
|
+
return typeof selector == "string"
|
|
28
|
+
? (element || document).querySelector(selector)
|
|
29
|
+
: selector;
|
|
22
30
|
} catch {}
|
|
23
|
-
}
|
|
31
|
+
}
|
|
24
32
|
|
|
25
|
-
const queryAll = (selector
|
|
33
|
+
const queryAll = (selector:string|NodeListOf<Element>, element?:Element) => {
|
|
26
34
|
try {
|
|
27
|
-
return
|
|
28
|
-
? selector
|
|
29
|
-
:
|
|
35
|
+
return typeof selector == "string"
|
|
36
|
+
? (element || document).querySelectorAll(selector)
|
|
37
|
+
: selector;
|
|
30
38
|
} catch {}
|
|
31
|
-
}
|
|
39
|
+
}
|
|
32
40
|
|
|
33
|
-
const hasClass = (element, name) => {
|
|
41
|
+
const hasClass = (element:Element, name:string):boolean => {
|
|
34
42
|
if (!element) return false;
|
|
35
43
|
return element.classList.contains(name);
|
|
36
|
-
}
|
|
44
|
+
}
|
|
37
45
|
|
|
38
|
-
const addClass = (element, name) => {
|
|
46
|
+
const addClass = (element:Element, name:string) => {
|
|
39
47
|
if (!element) return;
|
|
40
48
|
element.classList.add(name);
|
|
41
|
-
}
|
|
49
|
+
}
|
|
42
50
|
|
|
43
|
-
const removeClass = (element, name) => {
|
|
51
|
+
const removeClass = (element:Element, name:string) => {
|
|
44
52
|
if (!element) return;
|
|
45
53
|
element.classList.remove(name);
|
|
46
|
-
}
|
|
54
|
+
}
|
|
47
55
|
|
|
48
|
-
const on = (element, name, callback) => {
|
|
56
|
+
const on = (element:Element, name:string, callback:any) => {
|
|
49
57
|
element.addEventListener(name, callback, true);
|
|
50
|
-
}
|
|
58
|
+
}
|
|
51
59
|
|
|
52
|
-
const off = (element, name, callback) => {
|
|
60
|
+
const off = (element:Element, name:string, callback:any) => {
|
|
53
61
|
element.removeEventListener(name, callback, true);
|
|
54
|
-
}
|
|
62
|
+
}
|
|
55
63
|
|
|
56
|
-
const insertBefore = (newElement, element) => {
|
|
64
|
+
const insertBefore = (newElement:Element, element:Element):Element => {
|
|
57
65
|
if (!element) return;
|
|
58
66
|
return element.parentNode.insertBefore(newElement, element);
|
|
59
|
-
}
|
|
67
|
+
}
|
|
60
68
|
|
|
61
|
-
const prev = (element) => {
|
|
69
|
+
const prev = (element:Element):Element => {
|
|
62
70
|
if (!element) return;
|
|
63
71
|
return element.previousElementSibling;
|
|
64
|
-
}
|
|
72
|
+
}
|
|
65
73
|
|
|
66
|
-
const next = (element) => {
|
|
74
|
+
const next = (element:Element):Element => {
|
|
67
75
|
if (!element) return;
|
|
68
76
|
return element.nextElementSibling;
|
|
69
|
-
}
|
|
77
|
+
}
|
|
70
78
|
|
|
71
|
-
const parent = (element) => {
|
|
79
|
+
const parent = (element:Element):Element => {
|
|
72
80
|
if (!element) return;
|
|
73
|
-
return element.
|
|
74
|
-
}
|
|
81
|
+
return element.parentElement;
|
|
82
|
+
}
|
|
75
83
|
|
|
76
|
-
const create = (json) => {
|
|
84
|
+
const create = (json:any) => {
|
|
77
85
|
let element = document.createElement("div");
|
|
78
86
|
|
|
79
87
|
for (let i in json)
|
|
80
88
|
element[i] = json[i];
|
|
81
89
|
|
|
82
90
|
return element;
|
|
83
|
-
}
|
|
91
|
+
}
|
|
84
92
|
|
|
85
|
-
const updateInput = (target) => {
|
|
93
|
+
const updateInput = (target:Element) => {
|
|
94
|
+
let input = target as HTMLInputElement;
|
|
86
95
|
let parentTarget = parent(target);
|
|
87
|
-
let label = query("label", parentTarget);
|
|
96
|
+
let label = query("label", parentTarget) as HTMLLabelElement;
|
|
88
97
|
let isBorder = hasClass(parentTarget, "border") && !hasClass(parentTarget, "fill");
|
|
89
|
-
let toActive = document.activeElement == target ||
|
|
98
|
+
let toActive = document.activeElement == target || input.value || /date|time/.test(input.type);
|
|
90
99
|
|
|
91
100
|
if (toActive) {
|
|
92
101
|
if (isBorder && label) {
|
|
93
102
|
let width = hasClass(label, "active") ? label.offsetWidth : Math.round(label.offsetWidth / 1.33);
|
|
94
103
|
let start = hasClass(parentTarget, "round") ? 20 : 12;
|
|
95
104
|
let end = width + start + 8;
|
|
96
|
-
|
|
105
|
+
input.style.clipPath = `polygon(0% 0%, ${start}rem 0%, ${start}rem 8rem, ${end}rem 8rem, ${end}rem 0%, 100% 0%, 100% 100%, 0% 100%)`;
|
|
97
106
|
} else
|
|
98
|
-
|
|
107
|
+
input.style.clipPath = "";
|
|
99
108
|
addClass(label, "active");
|
|
100
109
|
} else {
|
|
101
110
|
removeClass(label, "active");
|
|
102
|
-
|
|
111
|
+
input.style.clipPath = "";
|
|
103
112
|
}
|
|
104
113
|
|
|
105
|
-
if (target.getAttribute("data-ui"))
|
|
106
|
-
open(target);
|
|
114
|
+
if (target.getAttribute("data-ui")) open(target);
|
|
107
115
|
}
|
|
108
116
|
|
|
109
|
-
const onClickElement = (e) => {
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
117
|
+
const onClickElement = (e:Event) => {
|
|
118
|
+
let target = e.currentTarget as HTMLElement;
|
|
119
|
+
if (/input/i.test(target.tagName)) return;
|
|
120
|
+
open(target);
|
|
121
|
+
}
|
|
113
122
|
|
|
114
|
-
const onClickLabel = (e) => {
|
|
115
|
-
let
|
|
123
|
+
const onClickLabel = (e:Event) => {
|
|
124
|
+
let target = e.currentTarget as Element;
|
|
125
|
+
let input = query('input:not([type=file]):not([type=checkbox]):not([type=radio]), select, textarea', parent(target)) as HTMLElement;
|
|
116
126
|
if (input) input.focus();
|
|
117
|
-
}
|
|
127
|
+
}
|
|
118
128
|
|
|
119
|
-
const onFocusInput = (e) => {
|
|
120
|
-
|
|
121
|
-
|
|
129
|
+
const onFocusInput = (e:Event) => {
|
|
130
|
+
let target = e.currentTarget as Element;
|
|
131
|
+
updateInput(target);
|
|
132
|
+
}
|
|
122
133
|
|
|
123
|
-
const onBlurInput = (e) => {
|
|
124
|
-
|
|
125
|
-
|
|
134
|
+
const onBlurInput = (e:Event) => {
|
|
135
|
+
let target = e.currentTarget as Element;
|
|
136
|
+
updateInput(target);
|
|
137
|
+
}
|
|
126
138
|
|
|
127
|
-
const onClickDocument = (e) => {
|
|
139
|
+
const onClickDocument = (e:Event) => {
|
|
140
|
+
let target = e.currentTarget as Element;
|
|
128
141
|
let dropdowns = queryAll(".dropdown.active");
|
|
129
|
-
dropdowns.forEach((x) =>
|
|
130
|
-
removeClass(x, "active");
|
|
131
|
-
});
|
|
142
|
+
dropdowns.forEach((x:Element) => removeClass(x, "active"));
|
|
132
143
|
|
|
133
|
-
off(
|
|
134
|
-
}
|
|
144
|
+
off(target, "click", onClickDocument);
|
|
145
|
+
}
|
|
135
146
|
|
|
136
|
-
const onClickToast = (e) => {
|
|
137
|
-
|
|
147
|
+
const onClickToast = (e:Event) => {
|
|
148
|
+
let target = e.currentTarget as Element;
|
|
149
|
+
removeClass(target, "active");
|
|
138
150
|
|
|
139
|
-
if (
|
|
140
|
-
|
|
141
|
-
};
|
|
151
|
+
if (_timeoutToast) clearTimeout(_timeoutToast);
|
|
152
|
+
}
|
|
142
153
|
|
|
143
|
-
const onChangeFile = (e) => {
|
|
144
|
-
|
|
154
|
+
const onChangeFile = (e:Event) => {
|
|
155
|
+
let target = e.currentTarget as HTMLInputElement;
|
|
156
|
+
updateFile(target);
|
|
145
157
|
}
|
|
146
158
|
|
|
147
|
-
const onKeydownFile = (e) => {
|
|
148
|
-
|
|
159
|
+
const onKeydownFile = (e:KeyboardEvent) => {
|
|
160
|
+
let target = e.currentTarget as HTMLInputElement;
|
|
161
|
+
updateFile(target, e);
|
|
149
162
|
}
|
|
150
163
|
|
|
151
164
|
const onMutation = () => {
|
|
152
|
-
if (
|
|
153
|
-
|
|
165
|
+
if (_timeoutMutation) clearTimeout(_timeoutMutation);
|
|
166
|
+
_timeoutMutation = setTimeout(ui, 180);
|
|
154
167
|
}
|
|
155
168
|
|
|
156
|
-
const updateFile = (target, e) => {
|
|
169
|
+
const updateFile = (target:Element, e?:KeyboardEvent) => {
|
|
157
170
|
if (e) {
|
|
158
171
|
if (e.key !== "Enter") return;
|
|
159
172
|
|
|
160
|
-
let
|
|
173
|
+
let target = e.currentTarget as Element;
|
|
174
|
+
let nextTarget = next(target) as HTMLInputElement;
|
|
161
175
|
if (!nextTarget || !/file/i.test(nextTarget.type)) return;
|
|
162
176
|
return nextTarget.click();
|
|
163
177
|
}
|
|
164
178
|
|
|
165
|
-
let
|
|
179
|
+
let currentTarget = target as HTMLInputElement;
|
|
180
|
+
let previousTarget = prev(target) as HTMLInputElement;
|
|
166
181
|
if (!previousTarget || !/text/i.test(previousTarget.type)) return;
|
|
167
|
-
previousTarget.value = Array.from(
|
|
168
|
-
previousTarget.
|
|
182
|
+
previousTarget.value = Array.from(currentTarget.files).map((x) => x.name).join(", ");
|
|
183
|
+
previousTarget.readOnly = true;
|
|
169
184
|
previousTarget.addEventListener("keydown", onKeydownFile);
|
|
170
185
|
updateInput(previousTarget);
|
|
171
186
|
}
|
|
172
187
|
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
if (
|
|
177
|
-
to = query(from.getAttribute("data-ui"));
|
|
178
|
-
|
|
179
|
-
if (hasClass(to, "modal")) return modal(from, to, config);
|
|
180
|
-
if (hasClass(to, "dropdown")) return dropdown(from, to, config);
|
|
188
|
+
const open = (from?:Element, to?:Element, config?:any) => {
|
|
189
|
+
if (!to) to = query(from.getAttribute("data-ui"))
|
|
190
|
+
if (hasClass(to, "modal")) return modal(from, to);
|
|
191
|
+
if (hasClass(to, "dropdown")) return dropdown(from, to);
|
|
181
192
|
if (hasClass(to, "toast")) return toast(from, to, config);
|
|
182
|
-
if (hasClass(to, "page")) return page(from, to
|
|
183
|
-
if (hasClass(to, "progress")) return progress(
|
|
193
|
+
if (hasClass(to, "page")) return page(from, to);
|
|
194
|
+
if (hasClass(to, "progress")) return progress(to, config);
|
|
184
195
|
|
|
185
|
-
tab(from
|
|
196
|
+
tab(from);
|
|
186
197
|
|
|
187
198
|
if (hasClass(to, "active")) return removeClass(to, "active");
|
|
188
199
|
|
|
189
200
|
addClass(to, "active");
|
|
190
|
-
}
|
|
201
|
+
}
|
|
191
202
|
|
|
192
|
-
const tab = (from) => {
|
|
203
|
+
const tab = (from:Element) => {
|
|
193
204
|
let container = parent(from);
|
|
194
|
-
if (!hasClass(container, "tabs"))
|
|
195
|
-
return;
|
|
205
|
+
if (!hasClass(container, "tabs")) return;
|
|
196
206
|
|
|
197
207
|
let tabs = queryAll("a", container);
|
|
198
|
-
tabs.forEach((x) =>
|
|
199
|
-
removeClass(x, "active");
|
|
200
|
-
});
|
|
208
|
+
tabs.forEach((x:Element) => removeClass(x, "active"));
|
|
201
209
|
|
|
202
210
|
addClass(from, "active");
|
|
203
|
-
}
|
|
211
|
+
}
|
|
204
212
|
|
|
205
|
-
const page = (from, to,
|
|
206
|
-
tab(from
|
|
213
|
+
const page = (from:Element, to:Element,) => {
|
|
214
|
+
tab(from);
|
|
207
215
|
|
|
208
216
|
let container = parent(to);
|
|
209
|
-
for (let i = 0; i < container.children.length; i++)
|
|
210
|
-
if (hasClass(container.children[i], "page"))
|
|
211
|
-
removeClass(container.children[i], "active");
|
|
212
|
-
}
|
|
217
|
+
for (let i = 0; i < container.children.length; i++)
|
|
218
|
+
if (hasClass(container.children[i], "page")) removeClass(container.children[i], "active");
|
|
213
219
|
|
|
214
220
|
addClass(to, "active");
|
|
215
|
-
}
|
|
221
|
+
}
|
|
216
222
|
|
|
217
|
-
const dropdown = (from, to
|
|
218
|
-
tab(from
|
|
223
|
+
const dropdown = (from:Element, to:Element) => {
|
|
224
|
+
tab(from);
|
|
219
225
|
|
|
220
226
|
if (hasClass(to, "active")) return removeClass(to, "active");
|
|
221
227
|
|
|
222
228
|
let dropdowns = queryAll(".dropdown.active");
|
|
223
|
-
dropdowns.forEach((x) =>
|
|
224
|
-
removeClass(x, "active");
|
|
225
|
-
});
|
|
229
|
+
dropdowns.forEach((x:Element) => removeClass(x, "active"));
|
|
226
230
|
|
|
227
231
|
addClass(to, "active");
|
|
228
|
-
on(document, "click", onClickDocument);
|
|
229
|
-
}
|
|
232
|
+
on(document.body, "click", onClickDocument);
|
|
233
|
+
}
|
|
230
234
|
|
|
231
|
-
const modal = (from, to
|
|
232
|
-
tab(from
|
|
235
|
+
const modal = (from:Element, to:Element) => {
|
|
236
|
+
tab(from);
|
|
233
237
|
|
|
234
|
-
let overlay = prev(to);
|
|
238
|
+
let overlay = prev(to) as HTMLElement;
|
|
235
239
|
if (!hasClass(overlay, "overlay")) {
|
|
236
240
|
overlay = create({ className: "overlay active" });
|
|
237
241
|
insertBefore(overlay, to);
|
|
@@ -247,9 +251,7 @@
|
|
|
247
251
|
let container = parent(to);
|
|
248
252
|
if (/nav/i.test(container.tagName)) {
|
|
249
253
|
let elements = queryAll(".modal, a, .overlay", container);
|
|
250
|
-
elements.forEach((x) =>
|
|
251
|
-
removeClass(x, "active");
|
|
252
|
-
});
|
|
254
|
+
elements.forEach((x:Element) => removeClass(x, "active"));
|
|
253
255
|
}
|
|
254
256
|
|
|
255
257
|
if (isActive) {
|
|
@@ -261,44 +263,38 @@
|
|
|
261
263
|
addClass(overlay, "active");
|
|
262
264
|
addClass(to, "active");
|
|
263
265
|
}
|
|
264
|
-
}
|
|
266
|
+
}
|
|
265
267
|
|
|
266
|
-
const toast = (from, to, config) => {
|
|
267
|
-
tab(from
|
|
268
|
+
const toast = (from:Element, to:Element, config:any) => {
|
|
269
|
+
tab(from);
|
|
268
270
|
|
|
269
271
|
let elements = queryAll(".toast.active");
|
|
270
|
-
elements.forEach((x) =>
|
|
271
|
-
removeClass(x, "active");
|
|
272
|
-
});
|
|
272
|
+
elements.forEach((x:Element) => removeClass(x, "active"));
|
|
273
273
|
addClass(to, "active");
|
|
274
274
|
on(to, "click", onClickToast);
|
|
275
275
|
|
|
276
|
-
if (
|
|
277
|
-
clearTimeout(timeoutToast);
|
|
276
|
+
if (_timeoutToast) clearTimeout(_timeoutToast);
|
|
278
277
|
|
|
279
|
-
if (config && config == -1)
|
|
280
|
-
return;
|
|
278
|
+
if (config && config == -1) return;
|
|
281
279
|
|
|
282
|
-
|
|
280
|
+
_timeoutToast = setTimeout(() => {
|
|
283
281
|
removeClass(to, "active");
|
|
284
282
|
}, config && config ? config : 6000);
|
|
285
|
-
}
|
|
283
|
+
}
|
|
286
284
|
|
|
287
|
-
const progress = (
|
|
288
|
-
|
|
289
|
-
|
|
285
|
+
const progress = (to:Element, config:any) => {
|
|
286
|
+
let element = to as HTMLElement;
|
|
287
|
+
|
|
288
|
+
if (hasClass(element, "left")) return element.style.clipPath = `polygon(0% 0%, 0% 100%, ${config}% 100%, ${config}% 0%)`;
|
|
290
289
|
|
|
291
|
-
if (hasClass(
|
|
292
|
-
return to.style.clipPath = `polygon(0% 0%, 100% 0%, 100% ${config}%, 0% ${config}%)`;
|
|
290
|
+
if (hasClass(element, "top")) return element.style.clipPath = `polygon(0% 0%, 100% 0%, 100% ${config}%, 0% ${config}%)`;
|
|
293
291
|
|
|
294
|
-
if (hasClass(
|
|
295
|
-
return to.style.clipPath = `polygon(100% 0%, 100% 100%, ${100 - config}% 100%, ${100 - config}% 0%)`;
|
|
292
|
+
if (hasClass(element, "right")) return element.style.clipPath = `polygon(100% 0%, 100% 100%, ${100 - config}% 100%, ${100 - config}% 0%)`;
|
|
296
293
|
|
|
297
|
-
if (hasClass(
|
|
298
|
-
|
|
299
|
-
};
|
|
294
|
+
if (hasClass(element, "bottom")) return element.style.clipPath = `polygon(0% 100%, 100% 100%, 100% ${100 - config}%, 0% ${100 - config}%)`;
|
|
295
|
+
}
|
|
300
296
|
|
|
301
|
-
const lastTheme = () => {
|
|
297
|
+
const lastTheme = ():ILastTheme => {
|
|
302
298
|
if (_lastTheme.light && _lastTheme.dark) return _lastTheme;
|
|
303
299
|
|
|
304
300
|
let light = document.createElement("body");
|
|
@@ -322,8 +318,8 @@
|
|
|
322
318
|
return _lastTheme;
|
|
323
319
|
}
|
|
324
320
|
|
|
325
|
-
const theme = (source) => {
|
|
326
|
-
if (!source || !window
|
|
321
|
+
const theme = (source:any):ILastTheme => {
|
|
322
|
+
if (!source || !window["materialDynamicColors"]) return lastTheme();
|
|
327
323
|
|
|
328
324
|
let mode = /dark/i.test(document.body.className) ? "dark" : "light";
|
|
329
325
|
if (source && source.light && source.dark) {
|
|
@@ -333,28 +329,28 @@
|
|
|
333
329
|
return source;
|
|
334
330
|
}
|
|
335
331
|
|
|
336
|
-
return window
|
|
332
|
+
return window["materialDynamicColors"](source).then((theme) => {
|
|
337
333
|
const toCss = (data) => {
|
|
338
334
|
let style = "";
|
|
339
|
-
for (
|
|
335
|
+
for (let i in data) {
|
|
340
336
|
let kebabCase = i.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();
|
|
341
337
|
style += "--"+kebabCase+":"+data[i]+";";
|
|
342
338
|
}
|
|
343
339
|
return style;
|
|
344
|
-
}
|
|
340
|
+
}
|
|
345
341
|
|
|
346
342
|
_lastTheme.light = toCss(theme.light);
|
|
347
343
|
_lastTheme.dark = toCss(theme.dark);
|
|
348
344
|
document.body.setAttribute("style", _lastTheme[mode]);
|
|
349
345
|
return _lastTheme;
|
|
350
346
|
});
|
|
351
|
-
}
|
|
347
|
+
}
|
|
352
348
|
|
|
353
|
-
const mode = (value) => {
|
|
349
|
+
const mode = (value:string):string => {
|
|
354
350
|
if (!value) return /dark/i.test(document.body.className) ? "dark" : "light";
|
|
355
351
|
document.body.classList.remove("light", "dark");
|
|
356
352
|
document.body.classList.add(value);
|
|
357
|
-
if (window
|
|
353
|
+
if (window["materialDynamicColors"]) document.body.setAttribute("style", _lastTheme[value]);
|
|
358
354
|
return value;
|
|
359
355
|
}
|
|
360
356
|
|
|
@@ -365,7 +361,7 @@
|
|
|
365
361
|
ui();
|
|
366
362
|
}
|
|
367
363
|
|
|
368
|
-
const ui = (selector, config) => {
|
|
364
|
+
const ui = (selector?:string, config?:any) => {
|
|
369
365
|
if (selector) {
|
|
370
366
|
if (selector == "setup") return setup();
|
|
371
367
|
if (selector == "guid") return guid();
|
|
@@ -374,36 +370,29 @@
|
|
|
374
370
|
|
|
375
371
|
let to = query(selector);
|
|
376
372
|
let from = query("[data-ui='#" + to.id + "']");
|
|
377
|
-
|
|
373
|
+
open(from, to, config);
|
|
378
374
|
}
|
|
379
375
|
|
|
380
376
|
let elements = queryAll("[data-ui]");
|
|
381
|
-
elements.forEach((x) =>
|
|
382
|
-
on(x, "click", onClickElement);
|
|
383
|
-
});
|
|
377
|
+
elements.forEach((x:Element) => on(x, "click", onClickElement));
|
|
384
378
|
|
|
385
379
|
let labels = queryAll(".field > label");
|
|
386
|
-
labels.forEach((x) =>
|
|
387
|
-
on(x, "click", onClickLabel);
|
|
388
|
-
});
|
|
380
|
+
labels.forEach((x:HTMLLabelElement) => on(x, "click", onClickLabel));
|
|
389
381
|
|
|
390
382
|
let inputs = queryAll(".field > input:not([type=file]):not([type=checkbox]):not([type=radio]), .field > select, .field > textarea");
|
|
391
|
-
inputs.forEach((x) => {
|
|
383
|
+
inputs.forEach((x:Element) => {
|
|
392
384
|
on(x, "focus", onFocusInput);
|
|
393
385
|
on(x, "blur", onBlurInput);
|
|
394
386
|
updateInput(x);
|
|
395
387
|
});
|
|
396
388
|
|
|
397
389
|
let files = queryAll(".field > input[type=file]");
|
|
398
|
-
files.forEach((x) => {
|
|
390
|
+
files.forEach((x:Element) => {
|
|
399
391
|
on(x, "change", onChangeFile);
|
|
400
392
|
updateFile(x);
|
|
401
393
|
});
|
|
402
|
-
}
|
|
403
|
-
|
|
404
|
-
window.ui = ui;
|
|
405
|
-
})();
|
|
394
|
+
}
|
|
406
395
|
|
|
407
|
-
window
|
|
408
|
-
ui("setup");
|
|
409
|
-
});
|
|
396
|
+
window["ui"] = ui;
|
|
397
|
+
window.addEventListener("load", () => ui("setup"));
|
|
398
|
+
})();
|
|
@@ -2,6 +2,10 @@ img,
|
|
|
2
2
|
video {
|
|
3
3
|
border-radius: inherit;
|
|
4
4
|
margin: 0 auto;
|
|
5
|
+
max-width: none !important;
|
|
6
|
+
max-height: none !important;
|
|
7
|
+
min-width: auto !important;
|
|
8
|
+
min-height: auto !important;
|
|
5
9
|
}
|
|
6
10
|
|
|
7
11
|
img.right,
|
|
@@ -152,6 +156,11 @@ video.responsive.extra {
|
|
|
152
156
|
height: 320rem !important;
|
|
153
157
|
}
|
|
154
158
|
|
|
159
|
+
img.responsive.round,
|
|
160
|
+
video.responsive.round {
|
|
161
|
+
border-radius: 24rem !important;
|
|
162
|
+
}
|
|
163
|
+
|
|
155
164
|
img.empty-state,
|
|
156
165
|
video.empty-state {
|
|
157
166
|
max-width: 100%;
|
|
@@ -109,14 +109,14 @@
|
|
|
109
109
|
|
|
110
110
|
.field > .checkbox,
|
|
111
111
|
.field > .radio,
|
|
112
|
-
.field > .
|
|
113
|
-
|
|
112
|
+
.field > nav > .checkbox,
|
|
113
|
+
.field > nav > .radio {
|
|
114
|
+
margin: 0 4rem 0 12rem;
|
|
114
115
|
}
|
|
115
116
|
|
|
116
|
-
.field >
|
|
117
|
-
.field > nav > .radio,
|
|
117
|
+
.field > .switch,
|
|
118
118
|
.field > nav > .switch {
|
|
119
|
-
margin: 0 4rem 0
|
|
119
|
+
margin: 0 4rem 0 16rem;
|
|
120
120
|
}
|
|
121
121
|
|
|
122
122
|
.checkbox > span:empty,
|