beercss 2.0.0 → 2.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/README.md +3 -3
  2. package/dist/cdn/beer.min.css +1 -1
  3. package/dist/cdn/beer.min.js +1 -1
  4. package/package.json +1 -1
  5. package/src/cdn/beer.css +1 -1
  6. package/src/cdn/beer.js +51 -41
  7. package/src/cdn/elements/fields.css +169 -187
  8. package/src/cdn/elements/modals.css +6 -12
  9. package/src/cdn/helpers/{others.css → reset.css} +9 -14
package/README.md CHANGED
@@ -3,7 +3,7 @@
3
3
  </p>
4
4
  <p align="center">
5
5
  <a href="https://github.com/beercss/beercss/blob/main/LICENSE"><img src="https://img.shields.io/github/license/beercss/beercss" alt="License"></a>
6
- <a href="https://www.npmjs.com/package/beercss"><img src="https://img.shields.io/npm/dt/beercss" alt="Downloads"></a>
6
+ <img src="https://img.shields.io/jsdelivr/npm/hy/beercss" alt="Downloads">
7
7
  <a href="https://bundlephobia.com/package/beercss"><img src="https://badgen.net/bundlephobia/minzip/beercss" alt="Size"></a>
8
8
  <a href="https://www.npmjs.com/package/beercss"><img src="https://img.shields.io/npm/v/beercss" alt="Version"></a>
9
9
  <a href="https://github.com/beercss/beercss/pulls"><img src="https://img.shields.io/github/issues-pr/beercss/beercss" alt="Pull Request"></a>
@@ -101,8 +101,8 @@ Beercss is an MIT-licensed open source project with its ongoing development made
101
101
  From jsdelivr.net.
102
102
 
103
103
  ```html
104
- <link href="https://cdn.jsdelivr.net/npm/beercss@2.0.0/dist/cdn/beer.min.css" rel="stylesheet" />
105
- <script src="https://cdn.jsdelivr.net/npm/beercss@2.0.0/dist/cdn/beer.min.js" type="text/javascript"></script>
104
+ <link href="https://cdn.jsdelivr.net/npm/beercss@2.0.1/dist/cdn/beer.min.css" rel="stylesheet" />
105
+ <script src="https://cdn.jsdelivr.net/npm/beercss@2.0.1/dist/cdn/beer.min.js" type="text/javascript"></script>
106
106
  ```
107
107
 
108
108
  ### NPM
package/dist/cdn/beer.min.css CHANGED
@@ -1 +1 @@
1
- @import url(https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined&display=swap);@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap);:root{--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}.is-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}.transparent{background-color:transparent!important}.transparent-border{border-color:transparent!important}.transparent-text{color:transparent!important}.black{background-color:#000!important}.black-border{border-color:#000!important}.black-text{color:#000!important}.white{background-color:#fff!important}.white-border{border-color:#fff!important}.white-text{color:#fff!important}.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-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-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-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-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)}.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}.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 32rem!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 32rem!important}.button.circle,button.circle{transform:none;padding:0;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.active,.button.extend:hover,button.extend.active,button.extend:hover{width:auto;max-width:none;min-width:auto;padding:0 16rem}.button.extend.active>i+span,.button.extend:hover>i+span,button.extend.active>i+span,button.extend:hover>i+span{display:inherit;margin-left:32rem}.button.extend.active>img+span,.button.extend:hover>img+span,button.extend.active>img+span,button.extend:hover>img+span{display:inherit;margin-left:48rem}.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),button.square:not(.flat,.border){box-shadow:var(--shadow2)}.button[disabled],button:disabled{opacity:.5;cursor:not-allowed}.button[disabled]{pointer-events:none}.button[disabled]:after,.button[disabled]:before,button:disabled:after,button:disabled:before{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}.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;padding:0;border-radius:40rem;padding:0}.chip.square{transform:none;border-radius:4rem;padding:0}.chip.round{border-radius:24rem}.container,.container.min{margin:0 auto;max-width:992rem;padding:80rem 88rem;overflow-x:hidden}.container.max{max-width:100%}@media only screen and (max-width:600px){.container,.container.min{padding:80rem 8rem}}.dropdown{opacity:0;visibility:hidden;position:absolute;box-shadow:var(--shadow2);background-color:var(--surface);box-sizing:border-box;z-index:2;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}.button:not([data-ui]):focus-within>.dropdown,.dropdown.active,.dropdown:not([data-ui]):active,.field>:not([data-ui]):focus-within~.dropdown,button: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.active,.dropdown>a:focus,.dropdown>a:hover{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{from{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:0}@keyframes details-to-open{0%{opacity:0;transform:translateY(-8rem)}100%{opacity:1;transform:translateY(0)}}.field{height:48rem;margin-bottom:8rem}.field.small{height:40rem}.field.medium{height:48rem}.field.large{height:56rem}.field.extra{height:64rem}.field+.field{margin-top:24rem}.row.medium-space>.col>.field+.field{margin-top:32rem}.row.large-space>.col>.field+.field{margin-top:40rem}.field.round{border-radius:32rem}.field>i,.field>img{position:absolute;top:50%;left:auto;right:10rem;transform:translateY(-50%);cursor:pointer;color:var(--on-background);z-index:10}.field.border>i,.field.border>img,.field.fill>i,.field.fill>img,.field.round>i,.field.round>img{left:auto;right:10rem}.field>i:first-child,.field>img:first-child{left:10rem;right:auto}.field.border>i:first-child,.field.border>img:first-child,.field.fill>i:first-child,.field.fill>img:first-child,.field.round>i:first-child,.field.round>img:first-child{left:10rem;right:auto}input[type=file]{position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;opacity:0;cursor:pointer}.field.small.textarea{height:72rem}.field.medium.textarea,.field.textarea{height:88rem}.field.large.textarea{height:104rem}.field.extra.textarea{height:120rem}.field>input,.field>textarea{border:0;border-radius:8rem 8rem 0 0;border-bottom:2rem solid var(--outline);padding:4rem 8rem;font-family:inherit;font-size:14rem;width:100%;height:100%;outline:0;z-index:1;color:var(--on-background);background-color:transparent;box-sizing:border-box;resize:none}.field>input:focus,.field>textarea:focus{border-bottom:2rem solid var(--primary)}.field.border>input,.field.border>textarea{border:2rem solid var(--outline);border-radius:8rem;padding:4rem 8rem}.field.border>input:focus,.field.border>textarea:focus{border:2rem solid var(--primary)}.field.fill>input,.field.fill>textarea{background-color:var(--surface-variant);color:var(--on-surface-variant);padding:4rem 8rem}.field.fill>i,.field.fill>img{color:var(--on-surface-variant)}.field.round>input,.field.round>textarea{border:0;box-shadow:var(--shadow1)}.field.round>input{border-radius:32rem;padding:4rem 16rem}.field.round>textarea{border-radius:24rem;padding:13rem 16rem}.field.round.border.fill>input,.field.round.border.fill>textarea,.field.round.border>input,.field.round.border>textarea{border:2rem solid var(--outline);box-shadow:none}.field.round.border.fill>input:focus,.field.round.border.fill>textarea:focus,.field.round.border>input:focus,.field.round.border>textarea:focus{border:2rem solid var(--primary)}.field.round.fill>input,.field.round.fill>textarea{border:0;box-shadow:none}.field.flat>input,.field.flat>input::after,.field.flat>input::before{border:none!important;box-shadow:none!important}.field.flat>input:focus,.field.flat>input:focus::after,.field.flat>input:focus::before{box-shadow:var(--shadow1)!important}.field.label>input,.field.label>textarea{padding-top:20rem}.field.prefix>input,.field.prefix>textarea{padding-left:40rem}.field.suffix>input,.field.suffix>textarea{padding-right:40rem}.field.invalid>input,.field.invalid>textarea{border-bottom:2rem solid var(--error)}.field.invalid.border.round.fill>input,.field.invalid.border.round.fill>textarea,.field.invalid.border.round>input,.field.invalid.border.round>textarea,.field.invalid.border>input,.field.invalid.border>textarea{border:2rem solid var(--error)}.field.invalid.round>input,.field.invalid.round>textarea{border:inherit}.field>:disabled{opacity:.5;cursor:not-allowed}.field.label>label{animation:var(--speed1) label-to-middle;position:absolute;top:50%;left:8rem;font-size:14rem;transform:translateY(-50%);z-index:10}.field.label.textarea.small>label{top:20rem}.field.label.textarea.medium>label,.field.label.textarea>label{top:24rem}.field.label.textarea.large>label{top:28rem}.field.label.textarea.extra>label{top:32rem}.field.label.textarea.small>textarea{padding-top:20rem}.field.label.textarea.medium>textarea,.field.label.textarea>textarea{padding-top:24rem}.field.label.textarea.large>textarea{padding-top:28rem}.field.label.textarea.extra>textarea{padding-top:32rem}.field.label.round>label{left:16rem}.field.label.prefix>label{left:40rem}.field.label>[placeholder]:focus~label,.field.label>[placeholder]:not(:placeholder-shown)~label,.field.label>label.active{animation:var(--speed1) label-to-top;font-size:12rem;transform:translateY(-120%)}.field.label>:focus~label{color:var(--primary)}.field.invalid>label{color:var(--error)!important}.field.required>label:after,.field>label.required:after{content:" * "}.field>select{-moz-appearance:none;-webkit-appearance:none;appearance:none;border:0;border-radius:8rem 8rem 0 0;border-bottom:2rem solid var(--outline);padding:4rem 8rem;font-family:inherit;font-size:14rem;width:100%;height:100%;outline:0;cursor:pointer;color:var(--on-background);background-color:transparent;box-sizing:border-box;z-index:1}.field>select:focus{border-bottom:2rem solid var(--primary)}.field.border>select{border:2rem solid var(--outline);border-radius:8rem}.field.border>select:focus{border:2rem solid var(--primary)}.field.fill>select{background-color:var(--surface-variant);color:var(--on-surface-variant);padding:4rem 8rem 4rem 8rem}.field.round>select{border:0;border-radius:32rem;box-shadow:var(--shadow1);padding:4rem 16rem}.field.round.border.fill>select,.field.round.border>select{border:2rem solid var(--outline);border-radius:32rem;box-shadow:none}.field.round.border.fill>select:focus,.field.round.border>select:focus{border:2rem solid var(--primary)}.field.round.fill>select{border:0;border-radius:32rem;box-shadow:none}.field.label>select{padding-top:20rem}.field.prefix>select{padding-left:40rem}.field.suffix>select{padding-right:40rem}.field.invalid>select{border-bottom:2rem solid var(--error)}.field.invalid.border.round.fill>select,.field.invalid.border.round>select,.field.invalid.border>select{border:2rem solid var(--error)}.field.invalid.round>select{border:inherit}.field>select>option{background-color:var(--surface)}.field>.error,.field>.helper{position:absolute;left:8rem;bottom:0;transform:translateY(100%);font-size:12rem;background:0 0!important}a.helper{color:var(--primary)}.field>.error{color:var(--error)!important}.field.round>.error,.field.round>.helper{left:16rem}.field.invalid>.helper{display:none}table td>.field{max-height:100%;height:100%;margin:0;padding:0}@keyframes label-to-top{from{font-size:14rem;transform:translateY(-50%)}to{font-size:12rem;transform:translateY(-120%)}}@keyframes label-to-middle{from{font-size:12rem;transform:translateY(-120%)}to{font-size:14rem;transform:translateY(-50%)}}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;color:var(--on-background)}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{border-radius:24rem}.absolute.border,.fixed.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}footer.fixed,header.fixed{position:sticky;top:0;bottom:0;left:0;right:0;z-index:10;background-color:inherit;padding:inherit;padding-left:0;padding-right:0}.card>header.fixed,.medium-padding>header.fixed,.modal>header.fixed,.padding>header.fixed,article>header.fixed{transform:translateY(-16rem)}.card>footer.fixed,.medium-padding>footer.fixed,.modal>footer.fixed,.padding>footer.fixed,article>footer.fixed{transform:translateY(16rem)}.no-padding>footer.fixed,.no-padding>header.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{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:0 0!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}@keyframes to-loader{0%{transform:rotate(0);clip-path:polygon(50% 50%,0% 0%,50% 0%,50% 0%,50% 0%,50% 0%,50% 0%,50% 0%,50% 0%)}20%{clip-path:polygon(50% 50%,0% 0%,50% 0%,100% 0%,100% 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:rotate(360deg);clip-path:polygon(50% 50%,0% 50%,0% 50%,0% 50%,0% 50%,0% 50%,0% 50%,0% 50%,0% 50%)}100%{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}i.right,img.right,video.right{position:absolute;right:0}i.left,img.left,video.left{position:absolute;left:0}img.border,img.circle,img.extra,img.large,img.medium,img.responsive,img.round,img.small,img.tiny,video.border,video.circle,video.extra,video.large,video.medium,video.responsive,video.round,video.small,video.tiny{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>i,.chip>i,button>i{color:inherit}.button>img.responsive,.chip>img.responsive,button>img.responsive{width:auto!important;border:2rem solid transparent;box-sizing:border-box}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),.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),button>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.circle>img,.button.diamond>img,.button.square>img,button.circle>img,button.diamond>img,button.square>img{margin:0!important;padding:0!important}.button>.responsive:first-child,.chip>.responsive:first-child,button>.responsive:first-child{margin-left:-16rem}.button>.responsive:last-child,.chip>.responsive:last-child,button>.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}.menu{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}.menu.left,.menu.right{width:72rem}.menu.bottom,.menu.top{height:64rem}.menu::before{content:"";position:absolute;width:100%;height:100%;background-color:inherit;z-index:1;top:0;left:0;border-radius:inherit}.menu.border{box-shadow:none;border:1rem solid var(--outline)}.menu.left.border{border-top:none;border-bottom:none;border-left:none}.menu.right.border{border-top:none;border-bottom:none;border-right:none}.menu.top.border{border-top:none;border-right:none;border-left:none}.menu.bottom.border{border-bottom:none;border-right:none;border-left:none}.menu.active{box-shadow:none}.menu.top{bottom:auto;justify-content:center;flex-direction:row}.menu.left{right:auto;justify-content:flex-start;flex-direction:column}.menu.right{left:auto;justify-content:flex-start;flex-direction:column}.menu.bottom{top:auto;justify-content:center;flex-direction:row}.menu.left-align,.menu.top-align{align-items:center;justify-content:flex-start}.menu.bottom-align,.menu.right-align{align-items:center;justify-content:flex-end}.menu.center-align,.menu.middle-align{align-items:center;justify-content:center}.menu>.button,.menu>.chip,.menu>button,.menu>img,.menu>video{z-index:1}.menu>a:not(button,.button,.chip){border:0;display:flex;align-items:center;flex-direction:column;font-size:12rem;padding:0;margin:4rem;text-decoration:none;color:inherit;text-align:center;z-index:1;width:56rem;height:auto;min-height:56rem}.menu.no-space:not(.left,.right)>a:not(button,.button,.chip){margin:0}.menu.small-space:not(.left,.right)>a:not(button,.button,.chip),.menu:not(.left,.right)>a:not(button,.button,.chip){margin:0 8rem}.menu.medium-space:not(.left,.right)>a:not(button,.button,.chip){margin:0 12rem}.menu.large-space:not(.left,.right)>a:not(button,.button,.chip){margin:0 16rem}.menu.no-space:not(.top,.bottom)>a:not(button,.button,.chip){margin:0}.menu.small-space:not(.top,.bottom)>a:not(button,.button,.chip),.menu:not(.top,.bottom)>a:not(button,.button,.chip){margin:4rem 0}.menu.medium-space:not(.top,.bottom)>a:not(button,.button,.chip){margin:8rem 0}.menu.large-space:not(.top,.bottom)>a:not(button,.button,.chip){margin:12rem 0}.menu>a:not(button,.button,.chip)>i{margin-bottom:4rem;padding:4rem;border-radius:32rem;transition:var(--speed1) padding linear}.menu>a:not(button,.button,.chip).active>i,.menu>a:not(button,.button,.chip):focus>i,.menu>a:not(button,.button,.chip):hover>i{background-color:var(--primary);color:var(--on-primary);padding:4rem 16rem}.menu>.row{z-index:1}@media only screen and (max-width:600px){.menu.bottom{justify-content:space-around}.menu.top{justify-content:space-around}.menu.bottom>.button,.menu.bottom>.chip,.menu.bottom>button,.menu.bottom>img,.menu.bottom>video,.menu.top>.button,.menu.top>.chip,.menu.top>button,.menu.top>img,.menu.top>video{margin: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:100%;overflow-x:hidden;overflow-y:auto}.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%,0);animation:var(--speed2) modal-to-center ease}.modal.active.left{transform:translate(0);animation:var(--speed2) modal-to-right ease}.modal.active.right{transform:translate(0);animation:var(--speed2) modal-to-left ease}.modal.active.top{transform:translate(0);animation:var(--speed2) modal-to-bottom ease}.modal.active.bottom{transform:translate(0);animation:var(--speed2) modal-to-top ease}.modal.top{top:0;left:0;right:auto;bottom:auto;height:auto;width:100%;min-width:auto}.modal.left{float:none;top:0;left:0;right:auto;bottom:auto;width:auto;height:100%}.modal.right{float:none;top:0;left:auto;right:0;bottom:auto;width:auto;height:100%}.modal.bottom{top:auto;left:0;right:auto;bottom:0;height:auto;width:100%;min-width:auto}.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.bottom.small,.modal.top.small{height:256rem}.modal.bottom.medium,.modal.top.medium{height:384rem}.modal.bottom.large,.modal.top.large{height:512rem}.menu.left>.modal,.menu>.modal{z-index:0;text-align:left;padding:16rem 16rem 16rem 80rem;overflow-y:auto;background-color:inherit}.menu.right>.modal{padding:16rem 80rem 16rem 16rem}.menu.top>.modal{padding:80rem 48rem 16rem 48rem}.menu.bottom>.modal{padding:16rem 48rem 80rem 48rem}.modal>a:not(button,.button,.chip):before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-radius:inherit}.modal>a.row:before{margin:-8rem}.modal>a:not(button,.button,.chip):hover:before{background-color:var(--active)}@keyframes modal-to-right{from{opacity:0;transform:translate(-50%,0)}to{opacity:1;transform:translate(0)}}@keyframes modal-to-left{from{opacity:0;transform:translate(50%,0)}to{opacity:1;transform:translate(0)}}@keyframes modal-to-bottom{from{opacity:0;transform:translate(0,-50%)}to{opacity:1;transform:translate(0)}}@keyframes modal-to-top{from{opacity:0;transform:translate(0,50%)}to{opacity:1;transform:translate(0)}}@keyframes modal-to-center{from{opacity:0;transform:translate(-50%,-64rem)}to{opacity:1;transform:translate(-50%,0)}}nav{display:flex;align-items:center;white-space:nowrap;margin:0 -8rem}:not(.progress)+nav{margin-top:16rem}nav>: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.label>nav{margin-top:20rem}.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}.menu>.overlay{z-index:0}.overlay.active{opacity:1;visibility:visible;animation:var(--speed3) overlay-to-active}.overlay.active.bottom-align,.overlay.active.middle-align,.overlay.active.top-align{display:flex}@keyframes overlay-to-active{from{opacity:0}to{opacity:1}}.modal:not(.active) .page.active,.page,.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{from{opacity:0;transform:translateY(-64rem)}to{opacity:1;transform:translateY(0)}}@keyframes page-to-top{from{opacity:0;transform:translateY(64rem)}to{opacity:1;transform:translateY(0)}}@keyframes page-to-left{from{opacity:0;transform:translateX(64rem)}to{opacity:1;transform:translateX(0)}}@keyframes page-to-right{from{opacity:0;transform:translateX(-64rem)}to{opacity:1;transform:translateX(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;color:inherit;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.small-space,.row.space{height:auto;margin:0 -8rem}.row.medium-space{height:auto;margin:0 -12rem}.row.large-space{height:auto;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.small-space>.col,.row.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}.row.no-wrap>.col.min{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}.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:0;cursor:inherit;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>input:focus+span::before,.radio>input:focus+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>input:focus+span::after{box-shadow:0 0 0 8rem var(--active)}.checkbox>input:disabled+span,.radio>input:disabled+span,.switch>input:disabled+span{opacity:.5;cursor:not-allowed}@keyframes to-checked{from{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)}table th{width:1%;font-weight:500;text-align:left;padding:8rem 4rem;margin:0}table td{width:1%;text-align:left;padding:8rem 4rem;margin:0}table.border td,table.border th{border-bottom:1rem solid var(--outline)}table.small td,table.small th{padding:4rem 4rem}table.medium td,table.medium th{padding:8rem 4rem}table.large td,table.large th{padding:12rem 4rem}table.center-align td,table.center-align th{text-align:center}table.left-align td,table.left-align th{text-align:left}table.right-align td,table.right-align th{text-align:right}td>.button,td>.chip,td>.none,td>button,td>nav>.button,td>nav>.chip,td>nav>.none,td>nav>button{min-height:24rem;max-height:24rem;box-sizing:border-box}td>.circle:not(.tiny,.small,.medium,.large,.extra),td>.diamond:not(.tiny,.small,.medium,.large,.extra),td>.square:not(.tiny,.small,.medium,.large,.extra),td>nav>.circle:not(.tiny,.small,.medium,.large,.extra),td>nav>.diamond:not(.tiny,.small,.medium,.large,.extra),td>nav>.square: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.center-align>a,.tabs.left-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%,0);text-align:left;vertical-align:middle}.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-left:8rem}.toast>*{color:inherit}@keyframes toast-to-top{0%{opacity:0;transform:translate(-50%,16rem)}100%{opacity:1;transform:translate(-50%,0)}}@keyframes toast-to-bottom{0%{opacity:0;transform:translate(-50%,-16rem)}100%{opacity:1;transform:translate(-50%,0)}}@media only screen and (min-width:993px){.toast{width:40%}}.tooltip{display:none;background-color:rgba(0,0,0,.9);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.large-margin,.tooltip.margin,.tooltip.medium-margin,.tooltip.small-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}.button:focus>.dropdown~.tooltip,.dropdown:active~.tooltip,.field>:focus~.dropdown~.tooltip,button: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}.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}.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 24rem!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 24rem!important}.circle,.diamond,.square{min-width:40rem;min-height:40rem;max-width:40rem;max-height:40rem;height:40rem}.circle>span,.diamond>span,.square>span{display:none}.circle.small,.diamond.small,.square.small{min-width:32rem;min-height:32rem;max-width:32rem;max-height:32rem;height:32rem}.circle.large,.diamond.large,.square.large{min-width:48rem;min-height:48rem;max-width:48rem;max-height:48rem;height:48rem}.circle.extra,.diamond.extra,.square.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}.circle.round,.diamond.round,.square.round{border-radius:16rem}.diamond.round{transform:rotate(45deg)}.no-margin{margin:0!important}.small-margin{margin:8rem!important}.margin,.medium-margin{margin:16rem!important}.large-margin{margin:24rem!important}body{color:var(--on-background);background-color:var(--background);margin:0;overflow-x:hidden}*{-webkit-tap-highlight-color:transparent;position:relative;vertical-align:middle;color:var(--on-background)}*>*{color:inherit}.button,a,button{cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;border:none;font-family:inherit;outline:inherit;justify-content:center}label{font-size:12rem;color:var(--on-background)}.wrap{display:block}a.no-wrap{flex-direction:row}a.wrap{flex-direction:column}.scroll{overflow:auto;padding-bottom:16rem}.no-scroll{overflow:hidden}.responsive{margin:0;width:-webkit-fill-available;width:-moz-available}.responsive>i,.responsive>img{margin:0}@media only screen and (max-width:600px){.l:not(.s),.large-device:not(.small-device),.m.l:not(.s),.m:not(.s),.medium-device.large-device:not(.small-device),.medium-device:not(.small-device){display:none!important}}@media only screen and (min-width:601px) and (max-width:992px){.l:not(.m),.large-device:not(.medium-device),.s.l:not(.m),.s:not(.m),.small-device.large-device:not(.medium-device),.small-device:not(.medium-device){display:none!important}}@media only screen and (min-width:993px){.m.s:not(.l),.m:not(.l),.medium-device.small-device:not(.large-device),.medium-device:not(.large-device),.s:not(.l),.small-device:not(.large-device){display:none!important}}.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:translateX(-50%)}.middle{top:50%;transform:translateY(-50%)}.middle.center{transform:translate(-50%,-50%)}.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,#000,transparent)!important}.right-shadow{background-color:transparent!important;box-shadow:none!important;background-image:linear-gradient(to left,#000,transparent)!important}.bottom-shadow{background-color:transparent!important;box-shadow:none!important;background-image:linear-gradient(to top,#000,transparent)!important}.top-shadow{background-color:transparent!important;box-shadow:none!important;background-image:linear-gradient(to bottom,#000,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}.small-space:not(.menu,nav,.row),.space:not(.menu,nav,.row){height:16rem;display:block}.medium-space:not(.menu,nav,.row){height:32rem;display:block}.large-space:not(.menu,nav,.row){height:48rem;display:block}html{font-size:var(--size)}body{font-family:var(--font);font-size:14rem}h1,h2,h3,h4,h5,h6{font-weight:400;margin:0 0 8rem 0}:not(.progress)+h1,:not(.progress)+h2,:not(.progress)+h3,:not(.progress)+h4,:not(.progress)+h5,:not(.progress)+h6{margin:8rem 0}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}.button::after,.chip::after,.wave.light::after,.wave::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}.button.border::after,.button.none::after,.chip.border::after,.wave.dark::after,button.border::after,button.none::after{background-image:radial-gradient(circle,rgba(150,150,150,.2) 1%,transparent 1%)}.button.none::after,.wave.none::after,button.none::after{top:0;left:-4rem;padding:0 4rem}.button.none:not(.small,.medium,.large,.extra)::after,.wave.none:not(.small,.medium,.large,.extra)::after,button.none:not(.small,.medium,.large,.extra)::after{top:-4rem;left:-4rem;padding:4rem}.button:focus::after,.button:hover::after,.chip:focus::after,.chip:hover::after,.wave:focus::after,.wave:hover::after,button:focus::after,button:hover::after{background-size:15000%;opacity:1;transition:var(--speed2) background-size linear}.button:active::after,.chip:active::after,.wave:active::after,button:active::after{background-size:5000%;opacity:0;transition:none}.no-wave::after,.no-wave:active::after,.no-wave:hover::after{display:none}
1
+ @import url(https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined&display=swap);@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap);:root{--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}.is-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}body{color:var(--on-background);background-color:var(--background);margin:0;overflow-x:hidden}label{font-size:12rem}.button,a,button{cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;border:none;font-family:inherit;outline:inherit;justify-content:center}.wrap{display:block}a.no-wrap{flex-direction:row}a.wrap{flex-direction:column}.scroll{overflow:auto;padding-bottom:16rem}.no-scroll{overflow:hidden}.responsive{margin:0;width:-webkit-fill-available;width:-moz-available}.responsive>i,.responsive>img{margin:0}@media only screen and (max-width:600px){.l:not(.s),.large-device:not(.small-device),.m.l:not(.s),.m:not(.s),.medium-device.large-device:not(.small-device),.medium-device:not(.small-device){display:none!important}}@media only screen and (min-width:601px) and (max-width:992px){.l:not(.m),.large-device:not(.medium-device),.s.l:not(.m),.s:not(.m),.small-device.large-device:not(.medium-device),.small-device:not(.medium-device){display:none!important}}@media only screen and (min-width:993px){.m.s:not(.l),.m:not(.l),.medium-device.small-device:not(.large-device),.medium-device:not(.large-device),.s:not(.l),.small-device:not(.large-device){display:none!important}}.transparent{background-color:transparent!important}.transparent-border{border-color:transparent!important}.transparent-text{color:transparent!important}.black{background-color:#000!important}.black-border{border-color:#000!important}.black-text{color:#000!important}.white{background-color:#fff!important}.white-border{border-color:#fff!important}.white-text{color:#fff!important}.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-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-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-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-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)}.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}.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 32rem!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 32rem!important}.button.circle,button.circle{transform:none;padding:0;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.active,.button.extend:hover,button.extend.active,button.extend:hover{width:auto;max-width:none;min-width:auto;padding:0 16rem}.button.extend.active>i+span,.button.extend:hover>i+span,button.extend.active>i+span,button.extend:hover>i+span{display:inherit;margin-left:32rem}.button.extend.active>img+span,.button.extend:hover>img+span,button.extend.active>img+span,button.extend:hover>img+span{display:inherit;margin-left:48rem}.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),button.square:not(.flat,.border){box-shadow:var(--shadow2)}.button[disabled],button:disabled{opacity:.5;cursor:not-allowed}.button[disabled]{pointer-events:none}.button[disabled]:after,.button[disabled]:before,button:disabled:after,button:disabled:before{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}.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;padding:0;border-radius:40rem;padding:0}.chip.square{transform:none;border-radius:4rem;padding:0}.chip.round{border-radius:24rem}.container,.container.min{margin:0 auto;max-width:992rem;padding:80rem 88rem;overflow-x:hidden}.container.max{max-width:100%}@media only screen and (max-width:600px){.container,.container.min{padding:80rem 8rem}}.dropdown{opacity:0;visibility:hidden;position:absolute;box-shadow:var(--shadow2);background-color:var(--surface);box-sizing:border-box;z-index:2;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}.button:not([data-ui]):focus-within>.dropdown,.dropdown.active,.dropdown:not([data-ui]):active,.field>:not([data-ui]):focus-within~.dropdown,button: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.active,.dropdown>a:focus,.dropdown>a:hover{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{from{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:0}@keyframes details-to-open{0%{opacity:0;transform:translateY(-8rem)}100%{opacity:1;transform:translateY(0)}}.field{height:48rem;margin-bottom:8rem;border:none!important}.field.small{height:40rem}.field.medium{height:48rem}.field.large{height:56rem}.field.extra{height:64rem}.field+.field{margin-top:24rem}.row.medium-space>.col>.field+.field{margin-top:32rem}.row.large-space>.col>.field+.field{margin-top:40rem}.field.round{border-radius:32rem}.field>i,.field>img{position:absolute;top:50%;left:auto;right:16rem;transform:translateY(-50%);cursor:pointer;color:var(--on-background);z-index:10}.field.border>i,.field.border>img,.field.fill>i,.field.fill>img,.field.round>i,.field.round>img{left:auto;right:16rem}.field>i:first-child,.field>img:first-child{left:16rem;right:auto}.field.border>i:first-child,.field.border>img:first-child,.field.fill>i:first-child,.field.fill>img:first-child,.field.round>i:first-child,.field.round>img:first-child{left:16rem;right:auto}.field.invalid>i{color:var(--error)!important}input[type=file]{position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;opacity:0;cursor:pointer}.field>input,.field>select,.field>textarea{border:0;border-radius:8rem 8rem 0 0;border-bottom:2rem solid var(--outline);padding:0 16rem;font-family:inherit;font-size:16rem;width:100%;height:100%;outline:0;z-index:1;color:var(--on-background);background-color:transparent;box-sizing:border-box;resize:none}.field>select{-moz-appearance:none;-webkit-appearance:none;appearance:none;cursor:pointer}.field>textarea{padding:16rem}.field.border>input,.field.border>select{padding:0 14rem}.field.border>textarea{padding:14rem}.field>input:focus,.field>select:focus,.field>textarea:focus{border-bottom:2rem solid var(--primary)}.field.border>input,.field.border>select,.field.border>textarea{border:2rem solid var(--outline);border-radius:8rem}.field.border>input:focus,.field.border>select:focus,.field.border>textarea:focus{border:2rem solid var(--primary)}.field.fill>input,.field.fill>select,.field.fill>textarea{background-color:var(--surface-variant);color:var(--on-surface-variant)}.field.fill>i,.field.fill>img{color:var(--on-surface-variant)}.field.round>input,.field.round>select,.field.round>textarea{border:0;border-radius:32rem;box-shadow:var(--shadow1);padding:0 24rem}.field.round>textarea{border-radius:24rem;padding:16rem 24rem}.field.round.border>input,.field.round.border>select,.field.round.border>textarea{padding-left:22rem;padding-right:22rem}.field.round.border.fill>input,.field.round.border.fill>select,.field.round.border.fill>textarea,.field.round.border>input,.field.round.border>select,.field.round.border>textarea{border:2rem solid var(--outline);box-shadow:none}.field.round.border.fill>input:focus,.field.round.border.fill>select:focus,.field.round.border.fill>textarea:focus,.field.round.border>input:focus,.field.round.border>select:focus,.field.round.border>textarea:focus{border:2rem solid var(--primary)}.field.round.fill>input,.field.round.fill>select,.field.round.fill>textarea{border:0;box-shadow:none}.field.flat>input,.field.flat>select,.field.flat>textarea{border:none!important;box-shadow:none!important}.field.flat>input:focus,.field.flat>select:focus,.field.flat>textarea:focus{box-shadow:var(--shadow1)!important}.field.label>input,.field.label>select,.field.label>textarea{padding-top:20rem}.field.label.border:not(.fill)>input,.field.label.border:not(.fill)>select{padding-top:0}.field.prefix>input,.field.prefix>select,.field.prefix>textarea{padding-left:48rem}.field.suffix>input,.field.suffix>select,.field.suffix>textarea{padding-right:48rem}.field.border.prefix>input,.field.border.prefix>select,.field.border.prefix>textarea{padding-left:46rem}.field.border.suffix>input,.field.border.suffix>select,.field.border.suffix>textarea{padding-right:46rem}.field.invalid>input,.field.invalid>select,.field.invalid>textarea{border-bottom:2rem solid var(--error)}.field.invalid.border.round.fill>input,.field.invalid.border.round.fill>select,.field.invalid.border.round.fill>textarea,.field.invalid.border.round>input,.field.invalid.border.round>select,.field.invalid.border.round>textarea,.field.invalid.border>input,.field.invalid.border>select,.field.invalid.border>textarea{border:2rem solid var(--error)}.field.invalid.round>input,.field.invalid.round>select,.field.invalid.round>textarea{border:inherit}.field>:disabled{opacity:.5;cursor:not-allowed}.field.label.textarea.small>textarea{padding-top:20rem}.field.label.textarea.medium>textarea,.field.label.textarea>textarea{padding-top:24rem}.field.label.textarea.large>textarea{padding-top:28rem}.field.label.textarea.extra>textarea{padding-top:32rem}.field.label.textarea.small.border:not(.fill)>textarea{padding-top:10rem}.field.label.textarea.border:not(.fill)>textarea,.field.label.textarea.medium.border:not(.fill)>textarea{padding-top:14rem}.field.label.textarea.large.border:not(.fill)>textarea{padding-top:18rem}.field.label.textarea.extra.border:not(.fill)>textarea{padding-top:22rem}.field.small.textarea{height:72rem}.field.medium.textarea,.field.textarea{height:88rem}.field.large.textarea{height:104rem}.field.extra.textarea{height:120rem}.field>select>option{background-color:var(--surface)}.field.label>label{will-change:top,left;position:absolute;top:50%;left:16rem;font-size:16rem;transform:translateY(-50%);transition:all var(--speed1);z-index:10}.field.label.textarea.small>label{top:20rem}.field.label.textarea.medium>label,.field.label.textarea>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>[placeholder]:focus~label,.field.label>[placeholder]:not(:placeholder-shown)~label,.field.label>label.active{font-size:12rem;transform:translateY(-120%)}.field.label.border:not(.fill)>[placeholder]:focus~label,.field.label.border:not(.fill)>[placeholder]:not(:placeholder-shown)~label,.field.label.border:not(.fill)>label.active{font-size:12rem;top:0;left:16rem;transform:translateY(-50%)}.field.label.border.round:not(.fill)>[placeholder]:focus~label,.field.label.border.round:not(.fill)>[placeholder]:not(:placeholder-shown)~label,.field.label.border.round:not(.fill)>label.active{left:24rem}.field.label>:focus~label{color:var(--primary)}.field.invalid>label{color:var(--error)!important}.field.required>label:after,.field>label.required:after{content:" * "}.field>.error,.field>.helper{position:absolute;left:16rem;bottom:0;transform:translateY(100%);font-size:12rem;background:0 0!important;padding-top:2rem}a.helper{color:var(--primary)}.field>.error{color:var(--error)!important}.field.round>.error,.field.round>.helper{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;color:var(--on-background)}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{border-radius:24rem}.absolute.border,.fixed.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}footer.fixed,header.fixed{position:sticky;top:0;bottom:0;left:0;right:0;z-index:10;background-color:inherit;padding:inherit;padding-left:0;padding-right:0}.card>header.fixed,.medium-padding>header.fixed,.modal>header.fixed,.padding>header.fixed,article>header.fixed{transform:translateY(-16rem)}.card>footer.fixed,.medium-padding>footer.fixed,.modal>footer.fixed,.padding>footer.fixed,article>footer.fixed{transform:translateY(16rem)}.no-padding>footer.fixed,.no-padding>header.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{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:0 0!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}@keyframes to-loader{0%{transform:rotate(0);clip-path:polygon(50% 50%,0% 0%,50% 0%,50% 0%,50% 0%,50% 0%,50% 0%,50% 0%,50% 0%)}20%{clip-path:polygon(50% 50%,0% 0%,50% 0%,100% 0%,100% 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:rotate(360deg);clip-path:polygon(50% 50%,0% 50%,0% 50%,0% 50%,0% 50%,0% 50%,0% 50%,0% 50%,0% 50%)}100%{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}i.right,img.right,video.right{position:absolute;right:0}i.left,img.left,video.left{position:absolute;left:0}img.border,img.circle,img.extra,img.large,img.medium,img.responsive,img.round,img.small,img.tiny,video.border,video.circle,video.extra,video.large,video.medium,video.responsive,video.round,video.small,video.tiny{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>i,.chip>i,button>i{color:inherit}.button>img.responsive,.chip>img.responsive,button>img.responsive{width:auto!important;border:2rem solid transparent;box-sizing:border-box}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),.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),button>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.circle>img,.button.diamond>img,.button.square>img,button.circle>img,button.diamond>img,button.square>img{margin:0!important;padding:0!important}.button>.responsive:first-child,.chip>.responsive:first-child,button>.responsive:first-child{margin-left:-16rem}.button>.responsive:last-child,.chip>.responsive:last-child,button>.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}.menu{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}.menu.left,.menu.right{width:72rem}.menu.bottom,.menu.top{height:64rem}.menu::before{content:"";position:absolute;width:100%;height:100%;background-color:inherit;z-index:1;top:0;left:0;border-radius:inherit}.menu.border{box-shadow:none;border:1rem solid var(--outline)}.menu.left.border{border-top:none;border-bottom:none;border-left:none}.menu.right.border{border-top:none;border-bottom:none;border-right:none}.menu.top.border{border-top:none;border-right:none;border-left:none}.menu.bottom.border{border-bottom:none;border-right:none;border-left:none}.menu.active{box-shadow:none}.menu.top{bottom:auto;justify-content:center;flex-direction:row}.menu.left{right:auto;justify-content:flex-start;flex-direction:column}.menu.right{left:auto;justify-content:flex-start;flex-direction:column}.menu.bottom{top:auto;justify-content:center;flex-direction:row}.menu.left-align,.menu.top-align{align-items:center;justify-content:flex-start}.menu.bottom-align,.menu.right-align{align-items:center;justify-content:flex-end}.menu.center-align,.menu.middle-align{align-items:center;justify-content:center}.menu>.button,.menu>.chip,.menu>button,.menu>img,.menu>video{z-index:1}.menu>a:not(button,.button,.chip){border:0;display:flex;align-items:center;flex-direction:column;font-size:12rem;padding:0;margin:4rem;text-decoration:none;color:inherit;text-align:center;z-index:1;width:56rem;height:auto;min-height:56rem}.menu.no-space:not(.left,.right)>a:not(button,.button,.chip){margin:0}.menu.small-space:not(.left,.right)>a:not(button,.button,.chip),.menu:not(.left,.right)>a:not(button,.button,.chip){margin:0 8rem}.menu.medium-space:not(.left,.right)>a:not(button,.button,.chip){margin:0 12rem}.menu.large-space:not(.left,.right)>a:not(button,.button,.chip){margin:0 16rem}.menu.no-space:not(.top,.bottom)>a:not(button,.button,.chip){margin:0}.menu.small-space:not(.top,.bottom)>a:not(button,.button,.chip),.menu:not(.top,.bottom)>a:not(button,.button,.chip){margin:4rem 0}.menu.medium-space:not(.top,.bottom)>a:not(button,.button,.chip){margin:8rem 0}.menu.large-space:not(.top,.bottom)>a:not(button,.button,.chip){margin:12rem 0}.menu>a:not(button,.button,.chip)>i{margin-bottom:4rem;padding:4rem;border-radius:32rem;transition:var(--speed1) padding linear}.menu>a:not(button,.button,.chip).active>i,.menu>a:not(button,.button,.chip):focus>i,.menu>a:not(button,.button,.chip):hover>i{background-color:var(--primary);color:var(--on-primary);padding:4rem 16rem}.menu>.row{z-index:1}@media only screen and (max-width:600px){.menu.bottom{justify-content:space-around}.menu.top{justify-content:space-around}.menu.bottom>.button,.menu.bottom>.chip,.menu.bottom>button,.menu.bottom>img,.menu.bottom>video,.menu.top>.button,.menu.top>.chip,.menu.top>button,.menu.top>img,.menu.top>video{margin: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:100%;overflow-x:hidden;overflow-y:auto}.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%,0);animation:var(--speed2) modal-to-center ease}.modal.active.left{transform:translate(0);animation:var(--speed2) modal-to-right ease}.modal.active.right{transform:translate(0);animation:var(--speed2) modal-to-left ease}.modal.active.top{transform:translate(0);animation:var(--speed2) modal-to-bottom ease}.modal.active.bottom{transform:translate(0);animation:var(--speed2) modal-to-top ease}.modal.top{top:0;left:0;right:auto;bottom:auto;height:auto;width:100%;min-width:auto}.modal.left{float:none;top:0;left:0;right:auto;bottom:auto;width:auto;height:100%}.modal.right{float:none;top:0;left:auto;right:0;bottom:auto;width:auto;height:100%}.modal.bottom{top:auto;left:0;right:auto;bottom:0;height:auto;width:100%;min-width:auto}.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.bottom.small,.modal.top.small{height:256rem}.modal.bottom.medium,.modal.top.medium{height:384rem}.modal.bottom.large,.modal.top.large{height:512rem}.menu.left>.modal,.menu>.modal{z-index:0;text-align:left;padding:16rem 16rem 16rem 80rem;overflow-y:auto;background-color:inherit}.menu.right>.modal{padding:16rem 80rem 16rem 16rem}.menu.top>.modal{padding:80rem 48rem 16rem 48rem}.menu.bottom>.modal{padding:16rem 48rem 80rem 48rem}.modal>a:not(button,.button,.chip):hover{background-color:var(--active)}.modal>a.row{margin:0 -8rem}.modal>a:not(button,.button,.chip){padding:12rem 0}@keyframes modal-to-right{from{opacity:0;transform:translate(-50%,0)}to{opacity:1;transform:translate(0)}}@keyframes modal-to-left{from{opacity:0;transform:translate(50%,0)}to{opacity:1;transform:translate(0)}}@keyframes modal-to-bottom{from{opacity:0;transform:translate(0,-50%)}to{opacity:1;transform:translate(0)}}@keyframes modal-to-top{from{opacity:0;transform:translate(0,50%)}to{opacity:1;transform:translate(0)}}@keyframes modal-to-center{from{opacity:0;transform:translate(-50%,-64rem)}to{opacity:1;transform:translate(-50%,0)}}nav{display:flex;align-items:center;white-space:nowrap;margin:0 -8rem}:not(.progress)+nav{margin-top:16rem}nav>: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.label>nav{margin-top:20rem}.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}.menu>.overlay{z-index:0}.overlay.active{opacity:1;visibility:visible;animation:var(--speed3) overlay-to-active}.overlay.active.bottom-align,.overlay.active.middle-align,.overlay.active.top-align{display:flex}@keyframes overlay-to-active{from{opacity:0}to{opacity:1}}.modal:not(.active) .page.active,.page,.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{from{opacity:0;transform:translateY(-64rem)}to{opacity:1;transform:translateY(0)}}@keyframes page-to-top{from{opacity:0;transform:translateY(64rem)}to{opacity:1;transform:translateY(0)}}@keyframes page-to-left{from{opacity:0;transform:translateX(64rem)}to{opacity:1;transform:translateX(0)}}@keyframes page-to-right{from{opacity:0;transform:translateX(-64rem)}to{opacity:1;transform:translateX(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;color:inherit;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.small-space,.row.space{height:auto;margin:0 -8rem}.row.medium-space{height:auto;margin:0 -12rem}.row.large-space{height:auto;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.small-space>.col,.row.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}.row.no-wrap>.col.min{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}.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:0;cursor:inherit;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>input:focus+span::before,.radio>input:focus+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>input:focus+span::after{box-shadow:0 0 0 8rem var(--active)}.checkbox>input:disabled+span,.radio>input:disabled+span,.switch>input:disabled+span{opacity:.5;cursor:not-allowed}@keyframes to-checked{from{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)}table th{width:1%;font-weight:500;text-align:left;padding:8rem 4rem;margin:0}table td{width:1%;text-align:left;padding:8rem 4rem;margin:0}table.border td,table.border th{border-bottom:1rem solid var(--outline)}table.small td,table.small th{padding:4rem 4rem}table.medium td,table.medium th{padding:8rem 4rem}table.large td,table.large th{padding:12rem 4rem}table.center-align td,table.center-align th{text-align:center}table.left-align td,table.left-align th{text-align:left}table.right-align td,table.right-align th{text-align:right}td>.button,td>.chip,td>.none,td>button,td>nav>.button,td>nav>.chip,td>nav>.none,td>nav>button{min-height:24rem;max-height:24rem;box-sizing:border-box}td>.circle:not(.tiny,.small,.medium,.large,.extra),td>.diamond:not(.tiny,.small,.medium,.large,.extra),td>.square:not(.tiny,.small,.medium,.large,.extra),td>nav>.circle:not(.tiny,.small,.medium,.large,.extra),td>nav>.diamond:not(.tiny,.small,.medium,.large,.extra),td>nav>.square: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.center-align>a,.tabs.left-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%,0);text-align:left;vertical-align:middle}.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-left:8rem}.toast>*{color:inherit}@keyframes toast-to-top{0%{opacity:0;transform:translate(-50%,16rem)}100%{opacity:1;transform:translate(-50%,0)}}@keyframes toast-to-bottom{0%{opacity:0;transform:translate(-50%,-16rem)}100%{opacity:1;transform:translate(-50%,0)}}@media only screen and (min-width:993px){.toast{width:40%}}.tooltip{display:none;background-color:rgba(0,0,0,.9);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.large-margin,.tooltip.margin,.tooltip.medium-margin,.tooltip.small-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}.button:focus>.dropdown~.tooltip,.dropdown:active~.tooltip,.field>:focus~.dropdown~.tooltip,button: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}.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}.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 24rem!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 24rem!important}.circle,.diamond,.square{min-width:40rem;min-height:40rem;max-width:40rem;max-height:40rem;height:40rem}.circle>span,.diamond>span,.square>span{display:none}.circle.small,.diamond.small,.square.small{min-width:32rem;min-height:32rem;max-width:32rem;max-height:32rem;height:32rem}.circle.large,.diamond.large,.square.large{min-width:48rem;min-height:48rem;max-width:48rem;max-height:48rem;height:48rem}.circle.extra,.diamond.extra,.square.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}.circle.round,.diamond.round,.square.round{border-radius:16rem}.diamond.round{transform:rotate(45deg)}.no-margin{margin:0!important}.small-margin{margin:8rem!important}.margin,.medium-margin{margin:16rem!important}.large-margin{margin:24rem!important}.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:translateX(-50%)}.middle{top:50%;transform:translateY(-50%)}.middle.center{transform:translate(-50%,-50%)}.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,#000,transparent)!important}.right-shadow{background-color:transparent!important;box-shadow:none!important;background-image:linear-gradient(to left,#000,transparent)!important}.bottom-shadow{background-color:transparent!important;box-shadow:none!important;background-image:linear-gradient(to top,#000,transparent)!important}.top-shadow{background-color:transparent!important;box-shadow:none!important;background-image:linear-gradient(to bottom,#000,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}.small-space:not(.menu,nav,.row),.space:not(.menu,nav,.row){height:16rem;display:block}.medium-space:not(.menu,nav,.row){height:32rem;display:block}.large-space:not(.menu,nav,.row){height:48rem;display:block}html{font-size:var(--size)}body{font-family:var(--font);font-size:14rem}h1,h2,h3,h4,h5,h6{font-weight:400;margin:0 0 8rem 0}:not(.progress)+h1,:not(.progress)+h2,:not(.progress)+h3,:not(.progress)+h4,:not(.progress)+h5,:not(.progress)+h6{margin:8rem 0}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}.button::after,.chip::after,.wave.light::after,.wave::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}.button.border::after,.button.none::after,.chip.border::after,.wave.dark::after,button.border::after,button.none::after{background-image:radial-gradient(circle,rgba(150,150,150,.2) 1%,transparent 1%)}.button.none::after,.wave.none::after,button.none::after{top:0;left:-4rem;padding:0 4rem}.button.none:not(.small,.medium,.large,.extra)::after,.wave.none:not(.small,.medium,.large,.extra)::after,button.none:not(.small,.medium,.large,.extra)::after{top:-4rem;left:-4rem;padding:4rem}.button:focus::after,.button:hover::after,.chip:focus::after,.chip:hover::after,.wave:focus::after,.wave:hover::after,button:focus::after,button:hover::after{background-size:15000%;opacity:1;transition:var(--speed2) background-size linear}.button:active::after,.chip:active::after,.wave:active::after,button:active::after{background-size:5000%;opacity:0;transition:none}.no-wave::after,.no-wave:active::after,.no-wave:hover::after{display:none}
package/dist/cdn/beer.min.js CHANGED
@@ -1 +1 @@
1
- (()=>{const e=(e,t)=>{try{return e instanceof HTMLElement?e:(t||document).querySelector(e)}catch{return null}},t=(e,t)=>{try{return Array.isArray(e)?e:(t||document).querySelectorAll(e)}catch{return null}},a=(e,t)=>!!e&&e.classList.contains(t),r=(e,t)=>{e&&e.classList.add(t)},c=(e,t)=>{e&&e.classList.remove(t)},i=(e,t,a)=>{e.addEventListener(t,a,!0)},n=e=>{if(e)return e.parentNode},o=e=>{if(!/input/i.test(e.tagName))return g(e.currentTarget)},l=t=>{e("input:not([type=checkbox]):not([type=radio]), select, textarea",n(t.currentTarget)).focus()},v=t=>{var a=e("label",n(t.currentTarget));r(a,"active"),t.currentTarget.getAttribute("data-ui")&&g(t.currentTarget)},u=t=>{var a=e("label",n(t.currentTarget));t.currentTarget.value||c(a,"active"),t.currentTarget.getAttribute("data-ui")&&g(t.currentTarget)},d=e=>{var a,r,i;t(".dropdown.active").forEach((e=>{c(e,"active")})),a=e.currentTarget,r="click",i=d,a.removeEventListener(r,i,!0)},s=e=>{c(e.currentTarget,"active"),x&&clearTimeout(x)};var x=null;const g=(t,i,n)=>(i||(i=e(t.getAttribute("data-ui"))),a(i,"modal")?h(t,i,n):a(i,"dropdown")?y(t,i,n):a(i,"toast")?m(t,i,n):a(i,"page")?f(t,i,n):a(i,"progress")?T(t,i,n):(p(t,i,n),void(a(i,"active")?c(i,"active"):r(i,"active")))),p=(e,i,o)=>{var l=n(e);a(l,"tabs")&&(t("a",l).forEach((e=>{c(e,"active")})),r(e,"active"))},f=(e,t,i)=>{p(e,t,i);for(var o=n(t),l=0;l<o.children.length;l++)a(o.children[l],"page")&&c(o.children[l],"active");r(t,"active")},y=(e,n,o)=>{(p(e,n,o),a(n,"active"))?c(n,"active"):(t(".dropdown.active").forEach((e=>{c(e,"active")})),r(n,"active"),i(document,"click",d))},h=(e,i,o)=>{p(e,i,o);var l=(e=>{if(e)return e.previousElementSibling})(i);a(l,"overlay")||((e,t)=>{if(t)t.parentNode.insertBefore(e,t)})(l=(e=>{var t=document.createElement("div");for(var a in e)t[a]=e[a];return t})({className:"overlay active"}),i),l.onclick=()=>{c(e,"active"),c(i,"active"),c(l,"active")};var v=a(i,"active"),u=n(i);a(u,"menu")&&t(".menu > .modal, .menu > a, .menu > .overlay").forEach((e=>{c(e,"active")}));v?(c(e,"active"),c(l,"active"),c(i,"active")):(r(e,"active"),r(l,"active"),r(i,"active"))},m=(e,a,n)=>{p(e,a,n),t(".toast.active").forEach((e=>{c(e,"active")})),r(a,"active"),i(a,"click",s),x&&clearTimeout(x),n&&-1==n||(x=setTimeout((()=>{c(a,"active")}),n&&n?n:6e3))},T=(e,t,r)=>a(t,"left")?t.style.clipPath=`polygon(0% 0%, 0% 100%, ${r}% 100%, ${r}% 0%)`:a(t,"top")?t.style.clipPath=`polygon(0% 0%, 100% 0%, 100% ${r}%, 0% ${r}%)`:a(t,"right")?t.style.clipPath=`polygon(100% 0%, 100% 100%, ${100-r}% 100%, ${100-r}% 0%)`:a(t,"bottom")?t.style.clipPath=`polygon(0% 100%, 100% 100%, 100% ${100-r}%, 0% ${100-r}%)`:void 0;window.ui=(a,d)=>{if(a){if("guid"==a)return"fxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,(e=>{var t=16*Math.random()|0;return("x"==e?t:3&t|8).toString(16)}));var s=e(a),x=e("[data-ui='#"+s.id+"']");g(x,s,d)}else{t("[data-ui]").forEach((e=>{i(e,"click",o)})),t(".field > label").forEach((e=>{i(e,"click",l)})),t(".field > input:not([type=checkbox]):not([type=radio]), select, textarea").forEach((t=>{var a=e("label",n(t));i(t,"focus",v),i(t,"blur",u),t.value?r(a,"active"):c(a,"active")}))}}})();
1
+ (()=>{const e=(e,t)=>{try{return e instanceof HTMLElement?e:(t||document).querySelector(e)}catch{}},t=(e,t)=>{try{return Array.isArray(e)?e:(t||document).querySelectorAll(e)}catch{}},r=(e,t)=>!!e&&e.classList.contains(t),a=(e,t)=>{e&&e.classList.add(t)},c=(e,t)=>{e&&e.classList.remove(t)},i=(e,t,r)=>{e.addEventListener(t,r,!0)},l=e=>{if(e)return e.parentNode},n=(e,t,a)=>{if(!e.value&&document.activeElement!=e)return e.style.clipPath="";if(t&&r(a,"border")&&!r(a,"fill")){let c=Math.round(t.offsetWidth/(t.offsetHeight/14)),i=r(a,"round")?20:12,l=c+i+8;e.style.clipPath=`polygon(0% 0%, ${i}rem 0%, ${i}rem 8rem, ${l}rem 8rem, ${l}rem 0%, 100% 0%, 100% 100%, 0% 100%)`}else e.style.clipPath=""},o=e=>{if(!/input/i.test(e.tagName))return g(e.currentTarget)},u=t=>{e("input:not([type=checkbox]):not([type=radio]), select, textarea",l(t.currentTarget)).focus()},v=t=>{let r=l(t.currentTarget),c=e("label",r);a(c,"active"),n(t.currentTarget,c,r),t.currentTarget.getAttribute("data-ui")&&g(t.currentTarget)},d=t=>{let r=e("label",l(t.currentTarget));t.currentTarget.value||(c(r,"active"),t.currentTarget.style.clipPath=""),t.currentTarget.getAttribute("data-ui")&&g(t.currentTarget)},s=e=>{var r,a,i;t(".dropdown.active").forEach((e=>{c(e,"active")})),r=e.currentTarget,a="click",i=s,r.removeEventListener(a,i,!0)},x=e=>{c(e.currentTarget,"active"),f&&clearTimeout(f)};let f=null;const g=(t,i,l)=>(i||(i=e(t.getAttribute("data-ui"))),r(i,"modal")?y(t,i,l):r(i,"dropdown")?h(t,i,l):r(i,"toast")?T(t,i,l):r(i,"page")?m(t,i,l):r(i,"progress")?b(t,i,l):(p(t,i,l),r(i,"active")?c(i,"active"):void a(i,"active"))),p=(e,i,n)=>{let o=l(e);r(o,"tabs")&&(t("a",o).forEach((e=>{c(e,"active")})),a(e,"active"))},m=(e,t,i)=>{p(e,t,i);let n=l(t);for(let e=0;e<n.children.length;e++)r(n.children[e],"page")&&c(n.children[e],"active");a(t,"active")},h=(e,l,n)=>{if(p(e,l,n),r(l,"active"))return c(l,"active");t(".dropdown.active").forEach((e=>{c(e,"active")})),a(l,"active"),i(document,"click",s)},y=(e,i,n)=>{p(e,i,n);let o=(e=>{if(e)return e.previousElementSibling})(i);r(o,"overlay")||(o=(e=>{let t=document.createElement("div");for(let r in e)t[r]=e[r];return t})({className:"overlay active"}),((e,t)=>{if(t)t.parentNode.insertBefore(e,t)})(o,i)),o.onclick=()=>{c(e,"active"),c(i,"active"),c(o,"active")};let u=r(i,"active"),v=l(i);if(r(v,"menu")){t(".menu > .modal, .menu > a, .menu > .overlay").forEach((e=>{c(e,"active")}))}u?(c(e,"active"),c(o,"active"),c(i,"active")):(a(e,"active"),a(o,"active"),a(i,"active"))},T=(e,r,l)=>{p(e,r,l),t(".toast.active").forEach((e=>{c(e,"active")})),a(r,"active"),i(r,"click",x),f&&clearTimeout(f),l&&-1==l||(f=setTimeout((()=>{c(r,"active")}),l&&l?l:6e3))},b=(e,t,a)=>r(t,"left")?t.style.clipPath=`polygon(0% 0%, 0% 100%, ${a}% 100%, ${a}% 0%)`:r(t,"top")?t.style.clipPath=`polygon(0% 0%, 100% 0%, 100% ${a}%, 0% ${a}%)`:r(t,"right")?t.style.clipPath=`polygon(100% 0%, 100% 100%, ${100-a}% 100%, ${100-a}% 0%)`:r(t,"bottom")?t.style.clipPath=`polygon(0% 100%, 100% 100%, 100% ${100-a}%, 0% ${100-a}%)`:void 0;window.ui=(r,s)=>{if(r){if("guid"==r)return"fxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,(e=>{let t=16*Math.random()|0;return("x"==e?t:3&t|8).toString(16)}));let t=e(r),a=e("[data-ui='#"+t.id+"']");return g(a,t,s)}t("[data-ui]").forEach((e=>{i(e,"click",o)})),t(".field > label").forEach((e=>{i(e,"click",u)})),t(".field > input:not([type=checkbox]):not([type=radio]), select, textarea").forEach((t=>{let r=l(t),o=e("label",r);i(t,"focus",v),i(t,"blur",d),t.value?a(o,"active"):c(o,"active"),n(t,o,r)}))}})();
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.0.0",
5
+ "version": "2.0.1",
6
6
  "name": "beercss",
7
7
  "license": "MIT",
8
8
  "port": 1234,
package/src/cdn/beer.css CHANGED
@@ -1,6 +1,7 @@
1
1
  @import "./settings/urls.css";
2
2
  @import "./settings/light.css";
3
3
  @import "./settings/dark.css";
4
+ @import "./helpers/reset.css";
4
5
  @import "./helpers/colors.css";
5
6
  @import "./elements/badges.css";
6
7
  @import "./elements/buttons.css";
@@ -30,7 +31,6 @@
30
31
  @import "./helpers/dividers.css";
31
32
  @import "./helpers/forms.css";
32
33
  @import "./helpers/margins.css";
33
- @import "./helpers/others.css";
34
34
  @import "./helpers/paddings.css";
35
35
  @import "./helpers/positions.css";
36
36
  @import "./helpers/shadows.css";
package/src/cdn/beer.js CHANGED
@@ -1,7 +1,7 @@
1
1
  (() => {
2
2
  const guid = () => {
3
3
  return "fxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
4
- var r = (Math.random() * 16) | 0,
4
+ let r = (Math.random() * 16) | 0,
5
5
  v = c == "x" ? r : (r & 0x3) | 0x8;
6
6
  return v.toString(16);
7
7
  });
@@ -12,9 +12,7 @@
12
12
  return selector instanceof HTMLElement
13
13
  ? selector
14
14
  : (element || document).querySelector(selector);
15
- } catch {
16
- return null;
17
- }
15
+ } catch {}
18
16
  };
19
17
 
20
18
  const queryAll = (selector, element) => {
@@ -22,9 +20,7 @@
22
20
  return Array.isArray(selector)
23
21
  ? selector
24
22
  : (element || document).querySelectorAll(selector);
25
- } catch {
26
- return null;
27
- }
23
+ } catch {}
28
24
  };
29
25
 
30
26
  const hasClass = (element, name) => {
@@ -80,43 +76,62 @@
80
76
  };
81
77
 
82
78
  const create = (json) => {
83
- var element = document.createElement("div");
79
+ let element = document.createElement("div");
84
80
 
85
- for (var i in json)
81
+ for (let i in json)
86
82
  element[i] = json[i];
87
83
 
88
84
  return element;
89
85
  };
90
86
 
87
+ const updateInput = (input, label, parentTarget) => {
88
+ if (!input.value && document.activeElement != input) return input.style.clipPath = "";
89
+
90
+ if (label && hasClass(parentTarget, "border") && !hasClass(parentTarget, "fill")) {
91
+ let width = Math.round(label.offsetWidth / (label.offsetHeight / 14));
92
+ let start = hasClass(parentTarget, "round") ? 20 : 12;
93
+ let end = width + start + 8;
94
+ input.style.clipPath = `polygon(0% 0%, ${start}rem 0%, ${start}rem 8rem, ${end}rem 8rem, ${end}rem 0%, 100% 0%, 100% 100%, 0% 100%)`;
95
+ } else {
96
+ input.style.clipPath = "";
97
+ }
98
+ }
99
+
91
100
  const onClickElement = (e) => {
92
101
  if (/input/i.test(e.tagName)) return;
93
102
  return open(e.currentTarget);
94
103
  };
95
104
 
96
105
  const onClickLabel = (e) => {
97
- var input = query('input:not([type=checkbox]):not([type=radio]), select, textarea', parent(e.currentTarget));
106
+ let input = query('input:not([type=checkbox]):not([type=radio]), select, textarea', parent(e.currentTarget));
98
107
  input.focus();
99
108
  };
100
109
 
101
110
  const onFocusInput = (e) => {
102
- var label = query("label", parent(e.currentTarget));
111
+ let parentTarget = parent(e.currentTarget);
112
+ let label = query("label", parentTarget);
113
+
103
114
  addClass(label, "active");
115
+ updateInput(e.currentTarget, label, parentTarget);
104
116
 
105
117
  if (e.currentTarget.getAttribute("data-ui"))
106
118
  open(e.currentTarget);
107
119
  };
108
120
 
109
121
  const onBlurInput = (e) => {
110
- var label = query("label", parent(e.currentTarget));
122
+ let label = query("label", parent(e.currentTarget));
111
123
 
112
- if (!e.currentTarget.value) removeClass(label, "active");
124
+ if (!e.currentTarget.value) {
125
+ removeClass(label, "active");
126
+ e.currentTarget.style.clipPath = "";
127
+ }
113
128
 
114
129
  if (e.currentTarget.getAttribute("data-ui"))
115
130
  open(e.currentTarget);
116
131
  };
117
132
 
118
133
  const onClickDocument = (e) => {
119
- var dropdowns = queryAll(".dropdown.active");
134
+ let dropdowns = queryAll(".dropdown.active");
120
135
  dropdowns.forEach((x) => {
121
136
  removeClass(x, "active");
122
137
  });
@@ -131,7 +146,7 @@
131
146
  clearTimeout(timeoutToast);
132
147
  };
133
148
 
134
- var timeoutToast = null;
149
+ let timeoutToast = null;
135
150
 
136
151
  const open = (from, to, config) => {
137
152
  if (!to)
@@ -145,20 +160,17 @@
145
160
 
146
161
  tab(from, to, config);
147
162
 
148
- if (hasClass(to, "active")) {
149
- removeClass(to, "active");
150
- return;
151
- }
163
+ if (hasClass(to, "active")) return removeClass(to, "active");
152
164
 
153
165
  addClass(to, "active");
154
166
  };
155
167
 
156
168
  const tab = (from, to, config) => {
157
- var container = parent(from);
169
+ let container = parent(from);
158
170
  if (!hasClass(container, "tabs"))
159
171
  return;
160
172
 
161
- var tabs = queryAll("a", container);
173
+ let tabs = queryAll("a", container);
162
174
  tabs.forEach((x) => {
163
175
  removeClass(x, "active");
164
176
  });
@@ -169,8 +181,8 @@
169
181
  const page = (from, to, config) => {
170
182
  tab(from, to, config);
171
183
 
172
- var container = parent(to);
173
- for (var i = 0; i < container.children.length; i++) {
184
+ let container = parent(to);
185
+ for (let i = 0; i < container.children.length; i++) {
174
186
  if (hasClass(container.children[i], "page"))
175
187
  removeClass(container.children[i], "active");
176
188
  }
@@ -181,12 +193,9 @@
181
193
  const dropdown = (from, to, config) => {
182
194
  tab(from, to, config);
183
195
 
184
- if (hasClass(to, "active")) {
185
- removeClass(to, "active");
186
- return;
187
- }
196
+ if (hasClass(to, "active")) return removeClass(to, "active");
188
197
 
189
- var dropdowns = queryAll(".dropdown.active");
198
+ let dropdowns = queryAll(".dropdown.active");
190
199
  dropdowns.forEach((x) => {
191
200
  removeClass(x, "active");
192
201
  });
@@ -198,7 +207,7 @@
198
207
  const modal = (from, to, config) => {
199
208
  tab(from, to, config);
200
209
 
201
- var overlay = prev(to);
210
+ let overlay = prev(to);
202
211
  if (!hasClass(overlay, "overlay")) {
203
212
  overlay = create({ className: "overlay active" });
204
213
  insertBefore(overlay, to);
@@ -210,10 +219,10 @@
210
219
  removeClass(overlay, "active");
211
220
  }
212
221
 
213
- var isActive = hasClass(to, "active");
214
- var container = parent(to);
222
+ let isActive = hasClass(to, "active");
223
+ let container = parent(to);
215
224
  if (hasClass(container, "menu")) {
216
- var elements = queryAll(".menu > .modal, .menu > a, .menu > .overlay");
225
+ let elements = queryAll(".menu > .modal, .menu > a, .menu > .overlay");
217
226
  elements.forEach((x) => {
218
227
  removeClass(x, "active");
219
228
  });
@@ -233,7 +242,7 @@
233
242
  const toast = (from, to, config) => {
234
243
  tab(from, to, config);
235
244
 
236
- var elements = queryAll(".toast.active");
245
+ let elements = queryAll(".toast.active");
237
246
  elements.forEach((x) => {
238
247
  removeClass(x, "active");
239
248
  });
@@ -269,31 +278,32 @@
269
278
  if (selector) {
270
279
  if (selector == "guid") return guid();
271
280
 
272
- var to = query(selector);
273
- var from = query("[data-ui='#" + to.id + "']");
274
- open(from, to, config);
275
- return;
281
+ let to = query(selector);
282
+ let from = query("[data-ui='#" + to.id + "']");
283
+ return open(from, to, config);
276
284
  }
277
285
 
278
- var elements = queryAll("[data-ui]");
286
+ let elements = queryAll("[data-ui]");
279
287
  elements.forEach((x) => {
280
288
  on(x, "click", onClickElement);
281
289
  });
282
290
 
283
- var labels = queryAll(".field > label");
291
+ let labels = queryAll(".field > label");
284
292
  labels.forEach((x) => {
285
293
  on(x, "click", onClickLabel);
286
294
  });
287
295
 
288
- var inputs = queryAll(".field > input:not([type=checkbox]):not([type=radio]), select, textarea");
296
+ let inputs = queryAll(".field > input:not([type=checkbox]):not([type=radio]), select, textarea");
289
297
  inputs.forEach((x) => {
290
- var label = query("label", parent(x));
298
+ let parentTarget = parent(x);
299
+ let label = query("label", parentTarget);
291
300
 
292
301
  on(x, "focus", onFocusInput);
293
302
  on(x, "blur", onBlurInput);
294
303
 
295
304
  if (x.value) addClass(label, "active");
296
305
  else removeClass(label, "active");
306
+ updateInput(x, label, parentTarget);
297
307
  });
298
308
  };
299
309
 
package/src/cdn/elements/fields.css CHANGED
@@ -1,6 +1,7 @@
1
1
  .field {
2
2
  height: 48rem;
3
3
  margin-bottom: 8rem;
4
+ border: none!important;
4
5
  }
5
6
 
6
7
  .field.small {
@@ -41,7 +42,7 @@
41
42
  position: absolute;
42
43
  top: 50%;
43
44
  left: auto;
44
- right: 10rem;
45
+ right: 16rem;
45
46
  transform: translateY(-50%);
46
47
  cursor: pointer;
47
48
  color: var(--on-background);
@@ -55,12 +56,12 @@
55
56
  .field.fill > img,
56
57
  .field.round > img {
57
58
  left: auto;
58
- right: 10rem;
59
+ right: 16rem;
59
60
  }
60
61
 
61
62
  .field > i:first-child,
62
63
  .field > img:first-child {
63
- left: 10rem;
64
+ left: 16rem;
64
65
  right: auto;
65
66
  }
66
67
 
@@ -70,11 +71,15 @@
70
71
  .field.border > img:first-child,
71
72
  .field.fill > img:first-child,
72
73
  .field.round > img:first-child {
73
- left: 10rem;
74
+ left: 16rem;
74
75
  right: auto;
75
76
  }
76
77
 
77
- /* file */
78
+ .field.invalid > i {
79
+ color: var(--error)!important;
80
+ }
81
+
82
+ /* input, textarea and select */
78
83
  input[type="file"] {
79
84
  position: absolute;
80
85
  top: 0;
@@ -86,32 +91,15 @@ input[type="file"] {
86
91
  cursor: pointer;
87
92
  }
88
93
 
89
- /* input and textarea */
90
- .field.small.textarea {
91
- height: 72rem;
92
- }
93
-
94
- .field.textarea,
95
- .field.medium.textarea {
96
- height: 88rem;
97
- }
98
-
99
- .field.large.textarea {
100
- height: 104rem;
101
- }
102
-
103
- .field.extra.textarea {
104
- height: 120rem;
105
- }
106
-
107
94
  .field > input,
108
- .field > textarea {
95
+ .field > textarea,
96
+ .field > select {
109
97
  border: 0;
110
98
  border-radius: 8rem 8rem 0 0;
111
99
  border-bottom: 2rem solid var(--outline);
112
- padding: 4rem 8rem;
100
+ padding: 0 16rem;
113
101
  font-family: inherit;
114
- font-size: 14rem;
102
+ font-size: 16rem;
115
103
  width: 100%;
116
104
  height: 100%;
117
105
  outline: none;
@@ -122,28 +110,50 @@ input[type="file"] {
122
110
  resize: none;
123
111
  }
124
112
 
113
+ .field > select {
114
+ -moz-appearance: none;
115
+ -webkit-appearance: none;
116
+ appearance: none;
117
+ cursor: pointer;
118
+ }
119
+
120
+ .field > textarea {
121
+ padding: 16rem;
122
+ }
123
+
124
+ .field.border > input,
125
+ .field.border > select {
126
+ padding: 0 14rem;
127
+ }
128
+
129
+ .field.border > textarea {
130
+ padding: 14rem;
131
+ }
132
+
125
133
  .field > input:focus,
126
- .field > textarea:focus {
134
+ .field > textarea:focus,
135
+ .field > select:focus {
127
136
  border-bottom: 2rem solid var(--primary);
128
137
  }
129
138
 
130
139
  .field.border > input,
131
- .field.border > textarea {
140
+ .field.border > textarea,
141
+ .field.border > select {
132
142
  border: 2rem solid var(--outline);
133
143
  border-radius: 8rem;
134
- padding: 4rem 8rem;
135
144
  }
136
145
 
137
146
  .field.border > input:focus,
138
- .field.border > textarea:focus {
147
+ .field.border > textarea:focus,
148
+ .field.border > select:focus {
139
149
  border: 2rem solid var(--primary);
140
150
  }
141
151
 
142
152
  .field.fill > input,
143
- .field.fill > textarea {
153
+ .field.fill > textarea,
154
+ .field.fill > select {
144
155
  background-color: var(--surface-variant);
145
156
  color: var(--on-surface-variant);
146
- padding: 4rem 8rem;
147
157
  }
148
158
 
149
159
  .field.fill > i,
@@ -152,25 +162,32 @@ input[type="file"] {
152
162
  }
153
163
 
154
164
  .field.round > input,
155
- .field.round > textarea {
165
+ .field.round > textarea,
166
+ .field.round > select {
156
167
  border: 0;
157
- box-shadow: var(--shadow1);
158
- }
159
-
160
- .field.round > input {
161
168
  border-radius: 32rem;
162
- padding: 4rem 16rem;
169
+ box-shadow: var(--shadow1);
170
+ padding: 0 24rem;
163
171
  }
164
172
 
165
173
  .field.round > textarea {
166
174
  border-radius: 24rem;
167
- padding: 13rem 16rem;
175
+ padding: 16rem 24rem;
176
+ }
177
+
178
+ .field.round.border > input,
179
+ .field.round.border > select,
180
+ .field.round.border > textarea {
181
+ padding-left: 22rem;
182
+ padding-right: 22rem;
168
183
  }
169
184
 
170
185
  .field.round.border > input,
171
186
  .field.round.border.fill > input,
172
187
  .field.round.border > textarea,
173
- .field.round.border.fill > textarea {
188
+ .field.round.border.fill > textarea,
189
+ .field.round.border > select,
190
+ .field.round.border.fill > select {
174
191
  border: 2rem solid var(--outline);
175
192
  box-shadow: none;
176
193
  }
@@ -178,46 +195,70 @@ input[type="file"] {
178
195
  .field.round.border > input:focus,
179
196
  .field.round.border.fill > input:focus,
180
197
  .field.round.border > textarea:focus,
181
- .field.round.border.fill > textarea:focus {
198
+ .field.round.border.fill > textarea:focus,
199
+ .field.round.border > select:focus,
200
+ .field.round.border.fill > select:focus {
182
201
  border: 2rem solid var(--primary);
183
202
  }
184
203
 
185
204
  .field.round.fill > input,
186
- .field.round.fill > textarea {
205
+ .field.round.fill > textarea,
206
+ .field.round.fill > select {
187
207
  border: 0;
188
208
  box-shadow: none;
189
209
  }
190
210
 
191
211
  .field.flat > input,
192
- .field.flat > input::before,
193
- .field.flat > input::after {
212
+ .field.flat > textarea,
213
+ .field.flat > select {
194
214
  border: none!important;
195
215
  box-shadow: none!important;
196
216
  }
197
217
 
198
218
  .field.flat > input:focus,
199
- .field.flat > input:focus::before,
200
- .field.flat > input:focus::after {
219
+ .field.flat > textarea:focus,
220
+ .field.flat > select:focus {
201
221
  box-shadow: var(--shadow1)!important;
202
222
  }
203
223
 
204
224
  .field.label > input,
205
- .field.label > textarea {
225
+ .field.label > textarea,
226
+ .field.label > select {
206
227
  padding-top: 20rem;
207
228
  }
208
229
 
230
+ .field.label.border:not(.fill) > input,
231
+ .field.label.border:not(.fill) > select {
232
+ padding-top: 0;
233
+ }
234
+
209
235
  .field.prefix > input,
210
- .field.prefix > textarea {
211
- padding-left: 40rem;
236
+ .field.prefix > textarea,
237
+ .field.prefix > select {
238
+ padding-left: 48rem;
212
239
  }
213
240
 
214
241
  .field.suffix > input,
215
- .field.suffix > textarea {
216
- padding-right: 40rem;
242
+ .field.suffix > textarea,
243
+ .field.suffix > select {
244
+ padding-right: 48rem;
245
+ }
246
+
247
+ .field.border.prefix > input,
248
+ .field.border.prefix > textarea,
249
+ .field.border.prefix > select {
250
+ padding-left: 46rem;
251
+ }
252
+
253
+ .field.border.suffix > input,
254
+ .field.border.suffix > textarea,
255
+ .field.border.suffix > select {
256
+ padding-right: 46rem;
217
257
  }
218
258
 
219
259
  .field.invalid > input,
220
- .field.invalid > textarea {
260
+ .field.invalid > textarea,
261
+ .field.invalid > select {
221
262
  border-bottom: 2rem solid var(--error);
222
263
  }
223
264
 
@@ -226,12 +267,16 @@ input[type="file"] {
226
267
  .field.invalid.border.round.fill > input,
227
268
  .field.invalid.border > textarea,
228
269
  .field.invalid.border.round > textarea,
229
- .field.invalid.border.round.fill > textarea {
270
+ .field.invalid.border.round.fill > textarea,
271
+ .field.invalid.border > select,
272
+ .field.invalid.border.round > select,
273
+ .field.invalid.border.round.fill > select {
230
274
  border: 2rem solid var(--error);
231
275
  }
232
276
 
233
277
  .field.invalid.round > input,
234
- .field.invalid.round > textarea {
278
+ .field.invalid.round > textarea,
279
+ .field.invalid.round > select {
235
280
  border: inherit;
236
281
  }
237
282
 
@@ -240,34 +285,6 @@ input[type="file"] {
240
285
  cursor: not-allowed;
241
286
  }
242
287
 
243
- /* label */
244
- .field.label > label {
245
- animation: var(--speed1) label-to-middle;
246
- position: absolute;
247
- top: 50%;
248
- left: 8rem;
249
- font-size: 14rem;
250
- transform: translateY(-50%);
251
- z-index: 10;
252
- }
253
-
254
- .field.label.textarea.small > label {
255
- top: 20rem;
256
- }
257
-
258
- .field.label.textarea > label,
259
- .field.label.textarea.medium > label {
260
- top: 24rem;
261
- }
262
-
263
- .field.label.textarea.large > label {
264
- top: 28rem;
265
- }
266
-
267
- .field.label.textarea.extra > label {
268
- top: 32rem;
269
- }
270
-
271
288
  .field.label.textarea.small > textarea {
272
289
  padding-top: 20rem;
273
290
  }
@@ -285,139 +302,126 @@ input[type="file"] {
285
302
  padding-top: 32rem;
286
303
  }
287
304
 
288
- .field.label.round > label {
289
- left: 16rem;
305
+ .field.label.textarea.small.border:not(.fill) > textarea {
306
+ padding-top: 10rem;
290
307
  }
291
308
 
292
- .field.label.prefix > label {
293
- left: 40rem;
309
+ .field.label.textarea.border:not(.fill) > textarea,
310
+ .field.label.textarea.medium.border:not(.fill) > textarea {
311
+ padding-top: 14rem;
294
312
  }
295
313
 
296
- .field.label > label.active,
297
- .field.label > [placeholder]:focus ~ label,
298
- .field.label > [placeholder]:not(:placeholder-shown) ~ label {
299
- animation: var(--speed1) label-to-top;
300
- font-size: 12rem;
301
- transform: translateY(-120%);
314
+ .field.label.textarea.large.border:not(.fill) > textarea {
315
+ padding-top: 18rem;
302
316
  }
303
317
 
304
- .field.label > :focus ~ label {
305
- color: var(--primary);
318
+ .field.label.textarea.extra.border:not(.fill) > textarea {
319
+ padding-top: 22rem;
306
320
  }
307
321
 
308
- .field.invalid > label {
309
- color: var(--error)!important;
322
+ .field.small.textarea {
323
+ height: 72rem;
310
324
  }
311
325
 
312
- .field > label.required:after,
313
- .field.required > label:after {
314
- content: " * ";
326
+ .field.textarea,
327
+ .field.medium.textarea {
328
+ height: 88rem;
315
329
  }
316
330
 
317
- /* select */
318
- .field > select {
319
- -moz-appearance: none;
320
- -webkit-appearance: none;
321
- appearance: none;
322
- border: 0;
323
- border-radius: 8rem 8rem 0 0;
324
- border-bottom: 2rem solid var(--outline);
325
- padding: 4rem 8rem;
326
- font-family: inherit;
327
- font-size: 14rem;
328
- width: 100%;
329
- height: 100%;
330
- outline: none;
331
- cursor: pointer;
332
- color: var(--on-background);
333
- background-color: transparent;
334
- box-sizing: border-box;
335
- z-index: 1;
331
+ .field.large.textarea {
332
+ height: 104rem;
336
333
  }
337
334
 
338
- .field > select:focus {
339
- border-bottom: 2rem solid var(--primary);
335
+ .field.extra.textarea {
336
+ height: 120rem;
340
337
  }
341
338
 
342
- .field.border > select {
343
- border: 2rem solid var(--outline);
344
- border-radius: 8rem;
339
+ .field > select > option {
340
+ background-color: var(--surface);
345
341
  }
346
342
 
347
- .field.border > select:focus {
348
- border: 2rem solid var(--primary);
343
+ /* label */
344
+ .field.label > label {
345
+ will-change: top, left;
346
+ position: absolute;
347
+ top: 50%;
348
+ left: 16rem;
349
+ font-size: 16rem;
350
+ transform: translateY(-50%);
351
+ transition: all var(--speed1);
352
+ z-index: 10;
349
353
  }
350
354
 
351
- .field.fill > select {
352
- background-color: var(--surface-variant);
353
- color: var(--on-surface-variant);
354
- padding: 4rem 8rem 4rem 8rem;
355
+ .field.label.textarea.small > label {
356
+ top: 20rem;
355
357
  }
356
358
 
357
- .field.round > select {
358
- border: 0;
359
- border-radius: 32rem;
360
- box-shadow: var(--shadow1);
361
- padding: 4rem 16rem;
359
+ .field.label.textarea > label,
360
+ .field.label.textarea.medium > label {
361
+ top: 24rem;
362
362
  }
363
363
 
364
- .field.round.border > select,
365
- .field.round.border.fill > select {
366
- border: 2rem solid var(--outline);
367
- border-radius: 32rem;
368
- box-shadow: none;
364
+ .field.label.textarea.large > label {
365
+ top: 28rem;
369
366
  }
370
367
 
371
- .field.round.border > select:focus,
372
- .field.round.border.fill > select:focus {
373
- border: 2rem solid var(--primary);
368
+ .field.label.textarea.extra > label {
369
+ top: 32rem;
374
370
  }
375
371
 
376
- .field.round.fill > select {
377
- border: 0;
378
- border-radius: 32rem;
379
- box-shadow: none;
372
+ .field.label.round > label {
373
+ left: 24rem;
380
374
  }
381
375
 
382
- .field.label > select {
383
- padding-top: 20rem;
376
+ .field.label.prefix > label {
377
+ left: 48rem;
384
378
  }
385
379
 
386
- .field.prefix > select {
387
- padding-left: 40rem;
380
+ .field.label > label.active,
381
+ .field.label > [placeholder]:focus ~ label,
382
+ .field.label > [placeholder]:not(:placeholder-shown) ~ label {
383
+ font-size: 12rem;
384
+ transform: translateY(-120%);
388
385
  }
389
386
 
390
- .field.suffix > select {
391
- padding-right: 40rem;
387
+ .field.label.border:not(.fill) > label.active,
388
+ .field.label.border:not(.fill) > [placeholder]:focus ~ label,
389
+ .field.label.border:not(.fill) > [placeholder]:not(:placeholder-shown) ~ label {
390
+ font-size: 12rem;
391
+ top: 0%;
392
+ left: 16rem;
393
+ transform: translateY(-50%);
392
394
  }
393
395
 
394
- .field.invalid > select {
395
- border-bottom: 2rem solid var(--error);
396
+ .field.label.border.round:not(.fill) > label.active,
397
+ .field.label.border.round:not(.fill) > [placeholder]:focus ~ label,
398
+ .field.label.border.round:not(.fill) > [placeholder]:not(:placeholder-shown) ~ label {
399
+ left: 24rem;
396
400
  }
397
401
 
398
- .field.invalid.border > select,
399
- .field.invalid.border.round > select,
400
- .field.invalid.border.round.fill > select {
401
- border: 2rem solid var(--error);
402
+ .field.label > :focus ~ label {
403
+ color: var(--primary);
402
404
  }
403
405
 
404
- .field.invalid.round > select {
405
- border: inherit;
406
+ .field.invalid > label {
407
+ color: var(--error)!important;
406
408
  }
407
409
 
408
- .field > select > option {
409
- background-color: var(--surface);
410
+ .field > label.required:after,
411
+ .field.required > label:after {
412
+ content: " * ";
410
413
  }
411
414
 
412
415
  /* helper */
413
416
  .field > .helper,
414
417
  .field > .error {
415
418
  position: absolute;
416
- left: 8rem;
419
+ left: 16rem;
417
420
  bottom: 0;
418
421
  transform: translateY(100%);
419
422
  font-size: 12rem;
420
423
  background: none!important;
424
+ padding-top: 2rem;
421
425
  }
422
426
 
423
427
  a.helper {
@@ -430,7 +434,7 @@ a.helper {
430
434
 
431
435
  .field.round > .helper,
432
436
  .field.round > .error {
433
- left: 16rem;
437
+ left: 24rem;
434
438
  }
435
439
 
436
440
  .field.invalid > .helper {
@@ -442,26 +446,4 @@ table td > .field {
442
446
  height: 100%;
443
447
  margin: 0;
444
448
  padding: 0;
445
- }
446
-
447
- @keyframes label-to-top {
448
- from {
449
- font-size: 14rem;
450
- transform: translateY(-50%);
451
- }
452
- to {
453
- font-size: 12rem;
454
- transform: translateY(-120%);
455
- }
456
- }
457
-
458
- @keyframes label-to-middle {
459
- from {
460
- font-size: 12rem;
461
- transform: translateY(-120%);
462
- }
463
- to {
464
- font-size: 14rem;
465
- transform: translateY(-50%);
466
- }
467
- }
449
+ }
package/src/cdn/elements/modals.css CHANGED
@@ -175,22 +175,16 @@
175
175
  padding: 16rem 48rem 80rem 48rem;
176
176
  }
177
177
 
178
- .modal > a:not(button, .button, .chip):before {
179
- content: "";
180
- position: absolute;
181
- top: 0;
182
- left: 0;
183
- right: 0;
184
- bottom: 0;
185
- border-radius: inherit;
178
+ .modal > a:not(button, .button, .chip):hover {
179
+ background-color: var(--active);
186
180
  }
187
181
 
188
- .modal > a.row:before {
189
- margin: -8rem;
182
+ .modal > a.row {
183
+ margin: 0 -8rem;
190
184
  }
191
185
 
192
- .modal > a:not(button, .button, .chip):hover:before {
193
- background-color: var(--active);
186
+ .modal > a:not(button, .button, .chip) {
187
+ padding: 12rem 0;
194
188
  }
195
189
 
196
190
  @keyframes modal-to-right {
package/src/cdn/helpers/{others.css → reset.css} RENAMED
@@ -1,3 +1,10 @@
1
+ * {
2
+ -webkit-tap-highlight-color: transparent;
3
+ position: relative;
4
+ vertical-align: middle;
5
+ color: inherit;
6
+ }
7
+
1
8
  body {
2
9
  color: var(--on-background);
3
10
  background-color: var(--background);
@@ -5,17 +12,10 @@ body {
5
12
  overflow-x: hidden;
6
13
  }
7
14
 
8
- * {
9
- -webkit-tap-highlight-color: transparent;
10
- position: relative;
11
- vertical-align: middle;
12
- color: var(--on-background);
15
+ label {
16
+ font-size: 12rem;
13
17
  }
14
18
 
15
- * > * {
16
- color: inherit;
17
- }
18
-
19
19
  a,
20
20
  button,
21
21
  .button {
@@ -29,11 +29,6 @@ button,
29
29
  justify-content: center;
30
30
  }
31
31
 
32
- label {
33
- font-size: 12rem;
34
- color: var(--on-background);
35
- }
36
-
37
32
  .wrap {
38
33
  display: block;
39
34
  }