/*!***************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/material/material.scss ***!
  \***************************************************************************************************************************************************************/
@media (prefers-color-scheme: light) {
  :root {
    --md-sys-color-background: #fef7ff;
    --md-sys-color-error: #b3261e;
    --md-sys-color-error-container: #f9dedc;
    --md-sys-color-inverse-on-surface: #f5eff7;
    --md-sys-color-inverse-primary: #d0bcff;
    --md-sys-color-inverse-surface: #322f35;
    --md-sys-color-on-background: #1d1b20;
    --md-sys-color-on-error: #ffffff;
    --md-sys-color-on-error-container: #8c1d18;
    --md-sys-color-on-primary: #ffffff;
    --md-sys-color-on-primary-container: #4f378b;
    --md-sys-color-on-primary-fixed: #21005d;
    --md-sys-color-on-primary-fixed-variant: #4f378b;
    --md-sys-color-on-secondary: #ffffff;
    --md-sys-color-on-secondary-container: #4a4458;
    --md-sys-color-on-secondary-fixed: #1d192b;
    --md-sys-color-on-secondary-fixed-variant: #4a4458;
    --md-sys-color-on-surface: #1d1b20;
    --md-sys-color-on-surface-variant: #49454f;
    --md-sys-color-on-tertiary: #ffffff;
    --md-sys-color-on-tertiary-container: #633b48;
    --md-sys-color-on-tertiary-fixed: #31111d;
    --md-sys-color-on-tertiary-fixed-variant: #633b48;
    --md-sys-color-outline: #79747e;
    --md-sys-color-outline-variant: #cac4d0;
    --md-sys-color-primary: #6750a4;
    --md-sys-color-primary-container: #eaddff;
    --md-sys-color-primary-fixed: #eaddff;
    --md-sys-color-primary-fixed-dim: #d0bcff;
    --md-sys-color-scrim: #000000;
    --md-sys-color-secondary: #625b71;
    --md-sys-color-secondary-container: #e8def8;
    --md-sys-color-secondary-fixed: #e8def8;
    --md-sys-color-secondary-fixed-dim: #ccc2dc;
    --md-sys-color-shadow: #000000;
    --md-sys-color-surface: #fef7ff;
    --md-sys-color-surface-bright: #fef7ff;
    --md-sys-color-surface-container: #f3edf7;
    --md-sys-color-surface-container-high: #ece6f0;
    --md-sys-color-surface-container-highest: #e6e0e9;
    --md-sys-color-surface-container-low: #f7f2fa;
    --md-sys-color-surface-container-lowest: #ffffff;
    --md-sys-color-surface-dim: #ded8e1;
    --md-sys-color-surface-tint: #6750a4;
    --md-sys-color-surface-tint-color: #6750a4;
    --md-sys-color-surface-variant: #e7e0ec;
    --md-sys-color-tertiary: #7d5260;
    --md-sys-color-tertiary-container: #ffd8e4;
    --md-sys-color-tertiary-fixed: #ffd8e4;
    --md-sys-color-tertiary-fixed-dim: #efb8c8;
  }
}
@media (prefers-color-scheme: dark) {
  :root {
    --md-sys-color-primary: #d0bcff;
    --md-sys-color-on-primary: #381e72;
    --md-sys-color-primary-container: #4f378b;
    --md-sys-color-on-primary-container: #eaddff;
    --md-sys-color-secondary: #ccc2dc;
    --md-sys-color-on-secondary: #332d41;
    --md-sys-color-secondary-container: #4a4458;
    --md-sys-color-on-secondary-container: #e8def8;
    --md-sys-color-tertiary: #efb8c8;
    --md-sys-color-on-tertiary: #492532;
    --md-sys-color-tertiary-container: #633b48;
    --md-sys-color-on-tertiary-container: #ffd8e4;
    --md-sys-color-error: #f2b8b5;
    --md-sys-color-on-error: #601410;
    --md-sys-color-error-container: #8c1d18;
    --md-sys-color-on-error-container: #f9dedc;
    --md-sys-color-surface: #141218;
    --md-sys-color-on-surface: #e6e0e9;
    --md-sys-color-surface-variant: #49454f;
    --md-sys-color-on-surface-variant: #cac4d0;
    --md-sys-color-surface-container-highest: #36343b;
    --md-sys-color-surface-container-high: #2b2930;
    --md-sys-color-surface-container: #211f26;
    --md-sys-color-surface-container-low: #1d1b20;
    --md-sys-color-surface-container-lowest: #0f0d13;
    --md-sys-color-inverse-surface: #e6e0e9;
    --md-sys-color-inverse-on-surface: #322f35;
    --md-sys-color-surface-tint: #d0bcff;
    --md-sys-color-surface-tint-color: #d0bcff;
    --md-sys-color-outline: #938f99;
    --md-sys-color-outline-variant: #49454f;
    --md-sys-color-primary-fixed: #eaddff;
    --md-sys-color-on-primary-fixed: #21005d;
    --md-sys-color-primary-fixed-dim: #d0bcff;
    --md-sys-color-on-primary-fixed-variant: #4f378b;
    --md-sys-color-inverse-primary: #6750a4;
    --md-sys-color-secondary-fixed: #e8def8;
    --md-sys-color-on-secondary-fixed: #1d192b;
    --md-sys-color-secondary-fixed-dim: #ccc2dc;
    --md-sys-color-on-secondary-fixed-variant: #4a4458;
    --md-sys-color-tertiary-fixed: #ffd8e4;
    --md-sys-color-on-tertiary-fixed: #31111d;
    --md-sys-color-tertiary-fixed-dim: #efb8c8;
    --md-sys-color-on-tertiary-fixed-variant: #633b48;
    --md-sys-color-background: #141218;
    --md-sys-color-on-background: #e6e0e9;
    --md-sys-color-surface-bright: #3b383e;
    --md-sys-color-surface-dim: #141218;
    --md-sys-color-scrim: #000000;
    --md-sys-color-shadow: #000000;
  }
}
:root {
  --md-sys-color-surface38: color-mix(in srgb, var(--md-sys-color-surface) 38%, transparent);
  --md-sys-color-on-surface38: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
  --md-sys-color-surface-variant38: color-mix(in srgb, var(--md-sys-color-surface-variant) 38%, transparent);
  --md-sys-color-on-surface-variant38: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent);
  --md-sys-color-primary38: color-mix(in srgb, var(--md-sys-color-primary) 38%, transparent);
  --md-sys-color-on-primary38: color-mix(in srgb, var(--md-sys-color-on-primary) 38%, transparent);
}

:root {
  --md-sys-elevation-level5: rgba(0, 0, 0, 0.2) 0px 7px 8px -4px, rgba(0, 0, 0, 0.14) 0px 12px 17px 2px, rgba(0, 0, 0, 0.12) 0px 5px 22px 4px;
  --md-sys-elevation-level4: rgba(0, 0, 0, 0.2) 0px 5px 5px -3px, rgba(0, 0, 0, 0.14) 0px 8px 10px 1px, rgba(0, 0, 0, 0.12) 0px 3px 14px 2px;
  --md-sys-elevation-level3: rgba(0, 0, 0, 0.2) 0px 3px 5px -1px, rgba(0, 0, 0, 0.14) 0px 6px 10px 0px, rgba(0, 0, 0, 0.12) 0px 1px 18px 0px;
  --md-sys-elevation-level2: rgba(0, 0, 0, 0.2) 0px 3px 3px -2px, rgba(0, 0, 0, 0.14) 0px 3px 4px 0px, rgba(0, 0, 0, 0.12) 0px 1px 8px 0px;
  --md-sys-elevation-level1: rgba(0, 0, 0, 0.2) 0px 2px 1px -1px, rgba(0, 0, 0, 0.14) 0px 1px 1px 0px, rgba(0, 0, 0, 0.12) 0px 1px 3px 0px;
  --md-sys-elevation-level0: rgba(0, 0, 0, 0.2) 0px 0px 0px 0px, rgba(0, 0, 0, 0.14) 0px 0px 0px 0px, rgba(0, 0, 0, 0.12) 0px 0px 0px 0px;
}

@media (prefers-color-scheme: light) {
  :root {
    --md-sys-elevation-surface-tint-color: #6750a4;
  }
}
@media (prefers-color-scheme: dark) {
  :root {
    --md-sys-elevation-surface-tint-color: #d0bcff;
  }
}
:root {
  --md-sys-motion-spring-fast-spatial-damping: 0.9;
  --md-sys-motion-spring-fast-spatial-stiffness: 1400;
  --md-sys-motion-spring-fast-effects-damping: 1;
  --md-sys-motion-spring-fast-effects-stiffness: 3800;
  --md-sys-motion-spring-default-spatial-damping: 0.9;
  --md-sys-motion-spring-default-spatial-stiffness: 700;
  --md-sys-motion-spring-default-effects-damping: 1;
  --md-sys-motion-spring-default-effects-stiffness: 1600;
  --md-sys-motion-spring-slow-spatial-damping: 0.9;
  --md-sys-motion-spring-slow-spatial-stiffness: 300;
  --md-sys-motion-spring-slow-effects-damping: 1;
  --md-sys-motion-spring-slow-effects-stiffness: 800;
  --md-sys-motion-easing-emphasized: 0.2, 0, 0, 1;
  --md-sys-motion-easing-emphasized-accelerate: 0.3, 0, 0.8, 0.15;
  --md-sys-motion-easing-emphasized-decelerate: 0.05, 0.7, 0.1, 1;
  --md-sys-motion-easing-standard: 0.2, 0, 0, 1;
  --md-sys-motion-easing-standard-accelerate: 0.3, 0, 1, 1;
  --md-sys-motion-easing-standard-decelerate: 0, 0, 0, 1;
  --md-sys-motion-easing-legacy: 0.4, 0, 0.2, 1;
  --md-sys-motion-easing-legacy-accelerate: 0.4, 0, 1, 1;
  --md-sys-motion-easing-legacy-decelerate: 0, 0, 0.2, 1;
  --md-sys-motion-easing-linear: 0, 0, 1, 1;
  --md-sys-motion-duration-short1: 100ms;
  --md-sys-motion-duration-short2: 200ms;
  --md-sys-motion-duration-short3: 300ms;
  --md-sys-motion-duration-short4: 400ms;
  --md-sys-motion-duration-medium1: 500ms;
  --md-sys-motion-duration-medium2: 600ms;
  --md-sys-motion-duration-medium3: 700ms;
  --md-sys-motion-duration-medium4: 800ms;
  --md-sys-motion-duration-long1: 900ms;
  --md-sys-motion-duration-long2: 1000ms;
  --md-sys-motion-duration-long3: 1100ms;
  --md-sys-motion-duration-long4: 1200ms;
  --md-sys-motion-duration-extra-long1: 1400ms;
  --md-sys-motion-duration-extra-long2: 1600ms;
  --md-sys-motion-duration-extra-long3: 1800ms;
  --md-sys-motion-duration-extra-long4: 2000ms;
  --md-sys-motion-path: linear;
}

:root {
  --md-sys-shape-corner-full: circular;
  --md-sys-shape-corner-extra-large-top: 28px 28px 0 0;
  --md-sys-shape-corner-extra-large: 28px;
  --md-sys-shape-corner-large-top: 16px 16px 0 0;
  --md-sys-shape-corner-large-end: 0 16px 16px 0;
  --md-sys-shape-corner-large-start: 16px 0 0 16px;
  --md-sys-shape-corner-large: 16px;
  --md-sys-shape-corner-medium: 12px;
  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-extra-small-top: 4px 4px 0 0;
  --md-sys-shape-corner-extra-small: 4px;
  --md-sys-shape-corner-none: 0;
  --md-sys-shape-corner-large-increased: 20px;
  --md-sys-shape-corner-extra-large-increased: 32px;
  --md-sys-shape-corner-extra-extra-large: 48px;
  --md-sys-shape-corner-value-none: 0;
  --md-sys-shape-corner-value-extra-small: 4px;
  --md-sys-shape-corner-value-small: 8px;
  --md-sys-shape-corner-value-medium: 12px;
  --md-sys-shape-corner-value-large: 16px;
  --md-sys-shape-corner-value-large-increased: 20px;
  --md-sys-shape-corner-value-extra-large: 28px;
  --md-sys-shape-corner-value-extra-large-increased: 32px;
  --md-sys-shape-corner-value-extra-extra-large: 48px;
}

:root {
  --md-sys-typescale-display-large-font: "Noto Sans";
  --md-sys-typescale-display-large-weight: 400;
  --md-sys-typescale-display-large-size: 57px;
  --md-sys-typescale-display-large-tracking: -0.25px;
  --md-sys-typescale-display-large-line-height: 64px;
  --md-sys-typescale-display-medium-font: "Noto Sans";
  --md-sys-typescale-display-medium-weight: 400;
  --md-sys-typescale-display-medium-size: 45px;
  --md-sys-typescale-display-medium-tracking: 0;
  --md-sys-typescale-display-medium-line-height: 52px;
  --md-sys-typescale-display-small-font: "Noto Sans";
  --md-sys-typescale-display-small-weight: 400;
  --md-sys-typescale-display-small-size: 36px;
  --md-sys-typescale-display-small-tracking: 0;
  --md-sys-typescale-display-small-line-height: 44px;
  --md-sys-typescale-headline-large-font: "Noto Sans";
  --md-sys-typescale-headline-large-weight: 400;
  --md-sys-typescale-headline-large-size: 32px;
  --md-sys-typescale-headline-large-tracking: 0;
  --md-sys-typescale-headline-large-line-height: 40px;
  --md-sys-typescale-headline-medium-font: "Noto Sans";
  --md-sys-typescale-headline-medium-weight: 400;
  --md-sys-typescale-headline-medium-size: 28px;
  --md-sys-typescale-headline-medium-tracking: 0;
  --md-sys-typescale-headline-medium-line-height: 36px;
  --md-sys-typescale-headline-small-font: "Noto Sans";
  --md-sys-typescale-headline-small-weight: 400;
  --md-sys-typescale-headline-small-size: 24px;
  --md-sys-typescale-headline-small-tracking: 0;
  --md-sys-typescale-headline-small-line-height: 32px;
  --md-sys-typescale-title-large-font: "Noto Sans";
  --md-sys-typescale-title-large-weight: 400;
  --md-sys-typescale-title-large-size: 22px;
  --md-sys-typescale-title-large-tracking: 0;
  --md-sys-typescale-title-large-line-height: 28px;
  --md-sys-typescale-title-medium-font: "Noto Sans";
  --md-sys-typescale-title-medium-weight: 500;
  --md-sys-typescale-title-medium-size: 16px;
  --md-sys-typescale-title-medium-tracking: 0.15px;
  --md-sys-typescale-title-medium-line-height: 24px;
  --md-sys-typescale-title-small-font: "Noto Sans";
  --md-sys-typescale-title-small-weight: 500;
  --md-sys-typescale-title-small-size: 14px;
  --md-sys-typescale-title-small-tracking: 0.1px;
  --md-sys-typescale-title-small-line-height: 20px;
  --md-sys-typescale-body-large-font: "Noto Sans";
  --md-sys-typescale-body-large-weight: 400;
  --md-sys-typescale-body-large-size: 16px;
  --md-sys-typescale-body-large-tracking: 0.5px;
  --md-sys-typescale-body-large-line-height: 24px;
  --md-sys-typescale-body-medium-font: "Noto Sans";
  --md-sys-typescale-body-medium-weight: 400;
  --md-sys-typescale-body-medium-size: 14px;
  --md-sys-typescale-body-medium-tracking: 0.25px;
  --md-sys-typescale-body-medium-line-height: 20px;
  --md-sys-typescale-body-small-font: "Noto Sans";
  --md-sys-typescale-body-small-weight: 400;
  --md-sys-typescale-body-small-size: 12px;
  --md-sys-typescale-body-small-tracking: 0.4px;
  --md-sys-typescale-body-small-line-height: 16px;
  --md-sys-typescale-label-large-font: "Noto Sans";
  --md-sys-typescale-label-large-weight: 500;
  --md-sys-typescale-label-large-weight-prominent: 700;
  --md-sys-typescale-label-large-size: 14px;
  --md-sys-typescale-label-large-tracking: 0.1px;
  --md-sys-typescale-label-large-line-height: 20px;
  --md-sys-typescale-label-medium-text-transform: None;
  --md-sys-typescale-label-medium-font: "Noto Sans";
  --md-sys-typescale-label-medium-weight: 500;
  --md-sys-typescale-label-medium-weight-prominent: 700;
  --md-sys-typescale-label-medium-size: 12px;
  --md-sys-typescale-label-medium-tracking: 0.5px;
  --md-sys-typescale-label-medium-line-height: 16px;
  --md-sys-typescale-label-small-font: "Noto Sans";
  --md-sys-typescale-label-small-weight: 500;
  --md-sys-typescale-label-small-size: 11px;
  --md-sys-typescale-label-small-tracking: 0.5px;
  --md-sys-typescale-label-small-line-height: 16px;
}

.md-ripple {
  --md-comp-ripple-radius: 141.4213562373095%;
  --md-comp-ripple-left: 50%;
  --md-comp-ripple-top: 50%;
  --md-comp-ripple-x: 0%;
  --md-comp-ripple-y: 0%;
  position: relative;
}
.md-ripple:after {
  content: "";
  width: var(--md-comp-ripple-radius);
  aspect-ratio: 1/1;
  border-radius: 50%;
  position: absolute;
  left: var(--md-comp-ripple-left);
  top: var(--md-comp-ripple-top);
  transform: translate3d(-50%, -50%, 0) translate3d(var(--md-comp-ripple-x), var(--md-comp-ripple-y), 0);
  z-index: 1;
  pointer-events: none;
  background-color: var(--md-sys-color-primary);
  opacity: 0;
}

.md-ripple--bounded {
  overflow: hidden;
}

.md-ripple--trigger {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.md-ripple--focus::after {
  opacity: 10%;
  will-change: width;
  transition-property: width;
  transition-duration: var(--md-sys-motion-duration-short3);
  transition-timing-function: cubic-bezier(var(--md-sys-motion-easing-standard-decelerate));
}

.md-ripple--press::after {
  opacity: 10%;
  width: 0;
  transition: none;
}

.md-ripple--hover::after {
  opacity: 8%;
}

.md-ripple--drag::after {
  opacity: 16%;
}

.md-ripple--disabled {
  pointer-events: none;
}

:root {
  interpolate-size: allow-keywords;
}

* {
  margin: 0;
  border: 0;
  padding: 0;
  font: inherit;
}
*, *::before, *::after {
  box-sizing: border-box;
}
*:focus-visible {
  outline: 2px solid var(--md-sys-color-outline);
  outline-offset: -2px;
}
*:focus:not(:focus-visible) {
  outline: none;
}

ul,
ol {
  list-style: none;
  counter-reset: counter-number;
}
ul li:before,
ol li:before {
  counter-increment: counter-number;
  content: counter(counter-number) ". ";
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  overflow: auto;
  background-color: var(--md-sys-color-background);
  color: var(--md-sys-color-on-background);
  font-family: var(--md-sys-typescale-body-large-font);
  font-weight: var(--md-sys-typescale-body-large-weight);
  font-size: var(--md-sys-typescale-body-large-size);
  letter-spacing: var(--md-sys-typescale-body-large-tracking);
  line-height: var(--md-sys-typescale-body-large-line-height);
}

.md-layout {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: auto;
}

.md-layout__header {
  flex: 0 0 auto;
  position: sticky;
  top: 0;
}

.md-layout__body {
  flex: 1;
}

.md-layout__footer {
  flex: 0 0 auto;
  position: sticky;
  bottom: 0;
}

.md-pane {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
}

.md-pane__header {
  flex: 0 0 auto;
}

.md-pane__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.md-pane__main {
  flex: 1;
  overflow: auto;
}

.md-pane__footer {
  flex: 0 0 auto;
}

.md-scrim {
  position: absolute;
  z-index: 10;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: var(--md-sys-color-scrim);
  opacity: 0%;
  pointer-events: none;
  will-change: opacity;
  transition-property: opacity;
  transition-duration: var(--md-sys-motion-duration-short2);
  transition-timing-function: cubic-bezier(var(--md-sys-motion-easing-standard-accelerate));
}
.md-scrim.md-scrim--open {
  opacity: 32%;
  pointer-events: all;
  transition-property: opacity;
  transition-duration: var(--md-sys-motion-duration-short3);
  transition-timing-function: cubic-bezier(var(--md-sys-motion-easing-standard-decelerate));
}

.md-layout-column {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-gap: 24px;
}

.md-layout-column__item {
  grid-column-end: span 4;
}

@media (min-width: 840px) {
  .md-layout-column {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-gap: 24px;
  }
  .md-layout-column__item--expanded1 {
    grid-column-end: span 1;
  }
  .md-layout-column__item--expanded2 {
    grid-column-end: span 2;
  }
  .md-layout-column__item--expanded3 {
    grid-column-end: span 3;
  }
  .md-layout-column__item--expanded4 {
    grid-column-end: span 4;
  }
  .md-layout-column__item--expanded5 {
    grid-column-end: span 5;
  }
  .md-layout-column__item--expanded6 {
    grid-column-end: span 6;
  }
  .md-layout-column__item--expanded7 {
    grid-column-end: span 7;
  }
  .md-layout-column__item--expanded8 {
    grid-column-end: span 8;
  }
  .md-layout-column__item--expanded9 {
    grid-column-end: span 9;
  }
  .md-layout-column__item--expanded10 {
    grid-column-end: span 10;
  }
  .md-layout-column__item--expanded11 {
    grid-column-end: span 11;
  }
  .md-layout-column__item--expanded12 {
    grid-column-end: span 12;
  }
}
@media (min-width: 600px) and (max-width: 839px) {
  .md-layout-column {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    grid-gap: 16px;
  }
  .md-layout-column__item--medium1 {
    grid-column-end: span 1;
  }
  .md-layout-column__item--medium2 {
    grid-column-end: span 2;
  }
  .md-layout-column__item--medium3 {
    grid-column-end: span 3;
  }
  .md-layout-column__item--medium4 {
    grid-column-end: span 4;
  }
  .md-layout-column__item--medium5 {
    grid-column-end: span 5;
  }
  .md-layout-column__item--medium6 {
    grid-column-end: span 6;
  }
  .md-layout-column__item--medium7 {
    grid-column-end: span 7;
  }
  .md-layout-column__item--medium8 {
    grid-column-end: span 8;
  }
}
@media (max-width: 599px) {
  .md-layout-column {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-gap: 8px;
  }
  .md-layout-column__item--compact1 {
    grid-column-end: span 1;
  }
  .md-layout-column__item--compact2 {
    grid-column-end: span 2;
  }
  .md-layout-column__item--compact3 {
    grid-column-end: span 3;
  }
  .md-layout-column__item--compact4 {
    grid-column-end: span 4;
  }
}
:root {
  --md-comp-layout-border-item-north-height: 64px;
  --md-comp-layout-border-item-west-width: 256px;
  --md-comp-layout-border-item-east-width: 256px;
  --md-comp-layout-border-item-south-height: 64px;
  --md-comp-layout-border-item-north-margin: 24px;
  --md-comp-layout-border-item-west-margin: 24px;
  --md-comp-layout-border-item-east-margin: 24px;
  --md-comp-layout-border-item-south-margin: 24px;
}

.md-layout-border {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto 1fr auto;
  grid-template-areas: "north north north" "west center east" "south south south";
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
}

.md-layout-border__item {
  overflow: auto;
  will-change: margin;
  transition-property: margin;
  transition-duration: var(--md-sys-motion-duration-short2);
  transition-timing-function: cubic-bezier(var(--md-sys-motion-easing-standard-accelerate));
}
.md-layout-border__item.md-layout-border__item--modal {
  position: absolute;
  z-index: 20;
  background-color: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface);
}
.md-layout-border__item.md-layout-border__item--modal.md-layout-border__item--open {
  transition-property: margin;
  transition-duration: var(--md-sys-motion-duration-short3);
  transition-timing-function: cubic-bezier(var(--md-sys-motion-easing-standard-decelerate));
}

.md-layout-border__item--north {
  grid-area: north;
  height: var(--md-comp-layout-border-item-north-height);
  margin-top: calc(0px - var(--md-comp-layout-border-item-north-height) - var(--md-comp-layout-border-item-north-margin));
}
.md-layout-border__item--north.md-layout-border__item--margin {
  margin-bottom: var(--md-comp-layout-border-item-north-margin);
}
.md-layout-border__item--north.md-layout-border__item--open {
  margin-top: 0;
}
.md-layout-border__item--north.md-layout-border__item--modal {
  left: 0;
  top: 0;
  right: 0;
}

.md-layout-border__item--west {
  grid-area: west;
  width: var(--md-comp-layout-border-item-west-width);
  margin-left: calc(0px - var(--md-comp-layout-border-item-west-width) - var(--md-comp-layout-border-item-west-margin));
}
.md-layout-border__item--west.md-layout-border__item--margin {
  margin-right: var(--md-comp-layout-border-item-west-margin);
}
.md-layout-border__item--west.md-layout-border__item--open {
  margin-left: 0;
}
.md-layout-border__item--west.md-layout-border__item--modal {
  left: 0;
  top: 0;
  bottom: 0;
}

.md-layout-border__item--center {
  grid-area: center;
}

.md-layout-border__item--east {
  grid-area: east;
  width: var(--md-comp-layout-border-item-east-width);
  margin-right: calc(0px - var(--md-comp-layout-border-item-east-width) - var(--md-comp-layout-border-item-east-margin));
}
.md-layout-border__item--east.md-layout-border__item--margin {
  margin-left: var(--md-comp-layout-border-item-east-margin);
}
.md-layout-border__item--east.md-layout-border__item--open {
  margin-right: 0;
}
.md-layout-border__item--east.md-layout-border__item--modal {
  top: 0;
  right: 0;
  bottom: 0;
}

.md-layout-border__item--south {
  grid-area: south;
  height: var(--md-comp-layout-border-item-south-height);
  margin-bottom: calc(0px - var(--md-comp-layout-border-item-south-height) - var(--md-comp-layout-border-item-south-margin));
}
.md-layout-border__item--south.md-layout-border__item--margin {
  margin-top: var(--md-comp-layout-border-item-south-margin);
}
.md-layout-border__item--south.md-layout-border__item--open {
  margin-bottom: 0;
}
.md-layout-border__item--south.md-layout-border__item--modal {
  left: 0;
  right: 0;
  bottom: 0;
}

.md-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  width: 24px;
  height: 24px;
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  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;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  visibility: var(--md-comp-font-not-ready);
}

.md-icon[selected],
[selected] .md-icon {
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
}

.md-emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  width: 24px;
  height: 24px;
  font-family: "Noto Color Emoji";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  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;
  visibility: var(--md-comp-font-not-ready);
}

.md-image {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}

.md-image__native {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.md-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}

.md-avatar__native {
  width: 100%;
  height: 100%;
}

.md-avatar--extra-small {
  width: 18px;
  height: 18px;
}

.md-avatar--small {
  width: 20px;
  height: 20px;
}

.md-avatar--medium {
  width: 24px;
  height: 24px;
}

.md-avatar--large {
  width: 32px;
  height: 32px;
}

.md-avatar--extra-large {
  width: 40px;
  height: 40px;
}

.md-text {
  display: block;
  margin: 16px 0;
}

.md-text--display-large {
  font-family: var(--md-sys-typescale-display-large-font);
  font-weight: var(--md-sys-typescale-display-large-weight);
  font-size: var(--md-sys-typescale-display-large-size);
  letter-spacing: var(--md-sys-typescale-display-large-tracking);
  line-height: var(--md-sys-typescale-display-large-line-height);
}

.md-text--display-medium {
  font-family: var(--md-sys-typescale-display-medium-font);
  font-weight: var(--md-sys-typescale-display-medium-weight);
  font-size: var(--md-sys-typescale-display-medium-size);
  letter-spacing: var(--md-sys-typescale-display-medium-tracking);
  line-height: var(--md-sys-typescale-display-medium-line-height);
}

.md-text--display-small {
  font-family: var(--md-sys-typescale-display-small-font);
  font-weight: var(--md-sys-typescale-display-small-weight);
  font-size: var(--md-sys-typescale-display-small-size);
  letter-spacing: var(--md-sys-typescale-display-small-tracking);
  line-height: var(--md-sys-typescale-display-small-line-height);
}

.md-text--headline-large {
  font-family: var(--md-sys-typescale-headline-large-font);
  font-weight: var(--md-sys-typescale-headline-large-weight);
  font-size: var(--md-sys-typescale-headline-large-size);
  letter-spacing: var(--md-sys-typescale-headline-large-tracking);
  line-height: var(--md-sys-typescale-headline-large-line-height);
}

.md-text--headline-medium {
  font-family: var(--md-sys-typescale-headline-medium-font);
  font-weight: var(--md-sys-typescale-headline-medium-weight);
  font-size: var(--md-sys-typescale-headline-medium-size);
  letter-spacing: var(--md-sys-typescale-headline-medium-tracking);
  line-height: var(--md-sys-typescale-headline-medium-line-height);
}

.md-text--headline-small {
  font-family: var(--md-sys-typescale-headline-small-font);
  font-weight: var(--md-sys-typescale-headline-small-weight);
  font-size: var(--md-sys-typescale-headline-small-size);
  letter-spacing: var(--md-sys-typescale-headline-small-tracking);
  line-height: var(--md-sys-typescale-headline-small-line-height);
}

.md-text--title-large {
  font-family: var(--md-sys-typescale-title-large-font);
  font-weight: var(--md-sys-typescale-title-large-weight);
  font-size: var(--md-sys-typescale-title-large-size);
  letter-spacing: var(--md-sys-typescale-title-large-tracking);
  line-height: var(--md-sys-typescale-title-large-line-height);
}

.md-text--title-medium {
  font-family: var(--md-sys-typescale-title-medium-font);
  font-weight: var(--md-sys-typescale-title-medium-weight);
  font-size: var(--md-sys-typescale-title-medium-size);
  letter-spacing: var(--md-sys-typescale-title-medium-tracking);
  line-height: var(--md-sys-typescale-title-medium-line-height);
}

.md-text--title-small {
  font-family: var(--md-sys-typescale-title-small-font);
  font-weight: var(--md-sys-typescale-title-small-weight);
  font-size: var(--md-sys-typescale-title-small-size);
  letter-spacing: var(--md-sys-typescale-title-small-tracking);
  line-height: var(--md-sys-typescale-title-small-line-height);
}

.md-text--body-large {
  font-family: var(--md-sys-typescale-body-large-font);
  font-weight: var(--md-sys-typescale-body-large-weight);
  font-size: var(--md-sys-typescale-body-large-size);
  letter-spacing: var(--md-sys-typescale-body-large-tracking);
  line-height: var(--md-sys-typescale-body-large-line-height);
}

.md-text--body-medium {
  font-family: var(--md-sys-typescale-body-medium-font);
  font-weight: var(--md-sys-typescale-body-medium-weight);
  font-size: var(--md-sys-typescale-body-medium-size);
  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
  line-height: var(--md-sys-typescale-body-medium-line-height);
}

.md-text--body-small {
  font-family: var(--md-sys-typescale-body-small-font);
  font-weight: var(--md-sys-typescale-body-small-weight);
  font-size: var(--md-sys-typescale-body-small-size);
  letter-spacing: var(--md-sys-typescale-body-small-tracking);
  line-height: var(--md-sys-typescale-body-small-line-height);
}

.md-text--label-large {
  font-family: var(--md-sys-typescale-label-large-font);
  font-weight: var(--md-sys-typescale-label-large-weight);
  font-size: var(--md-sys-typescale-label-large-size);
  letter-spacing: var(--md-sys-typescale-label-large-tracking);
  line-height: var(--md-sys-typescale-label-large-line-height);
}

.md-text--label-medium {
  font-family: var(--md-sys-typescale-label-medium-font);
  font-weight: var(--md-sys-typescale-label-medium-weight);
  font-size: var(--md-sys-typescale-label-medium-size);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
  line-height: var(--md-sys-typescale-label-medium-line-height);
}

.md-text--label-small {
  font-family: var(--md-sys-typescale-label-small-font);
  font-weight: var(--md-sys-typescale-label-small-weight);
  font-size: var(--md-sys-typescale-label-small-size);
  letter-spacing: var(--md-sys-typescale-label-small-tracking);
  line-height: var(--md-sys-typescale-label-small-line-height);
}

.md-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  will-change: width, height, border-radius, background-color, color, border-color;
  transition-property: width, height, border-radius, background-color, color, border-color;
  transition-duration: var(--md-sys-motion-duration-short3);
  transition-timing-function: cubic-bezier(var(--md-sys-motion-easing-standard-decelerate));
}

.md-icon-button__native {
  will-change: width, height, font-size;
  transition-property: width, height, font-size;
  transition-duration: var(--md-sys-motion-duration-short3);
  transition-timing-function: cubic-bezier(var(--md-sys-motion-easing-standard-decelerate));
}

.md-icon-button--extra-small {
  width: 32px;
  height: 32px;
}
.md-icon-button--extra-small.md-icon-button--narrow {
  width: 28px;
  height: 32px;
}
.md-icon-button--extra-small.md-icon-button--wide {
  width: 40px;
  height: 32px;
}
.md-icon-button--extra-small.md-icon-button--round {
  border-radius: 16px;
}
.md-icon-button--extra-small.md-icon-button--round[selected] {
  border-radius: 12px;
}
.md-icon-button--extra-small.md-icon-button--square {
  border-radius: 12px;
}
.md-icon-button--extra-small.md-icon-button--square[selected] {
  border-radius: 16px;
}
.md-icon-button--extra-small:active, .md-icon-button--extra-small:active[selected] {
  border-radius: 8px;
}
.md-icon-button--extra-small .md-icon-button__native {
  width: 20px;
  height: 20px;
  font-size: 20px;
}

.md-icon-button--small {
  width: 40px;
  height: 40px;
}
.md-icon-button--small.md-icon-button--narrow {
  width: 32px;
  height: 40px;
}
.md-icon-button--small.md-icon-button--wide {
  width: 52px;
  height: 40px;
}
.md-icon-button--small.md-icon-button--round {
  border-radius: 20px;
}
.md-icon-button--small.md-icon-button--round[selected] {
  border-radius: 12px;
}
.md-icon-button--small.md-icon-button--square {
  border-radius: 12px;
}
.md-icon-button--small.md-icon-button--square[selected] {
  border-radius: 20px;
}
.md-icon-button--small:active, .md-icon-button--small:active[selected] {
  border-radius: 8px;
}
.md-icon-button--small .md-icon-button__native {
  width: 24px;
  height: 24px;
  font-size: 24px;
}

.md-icon-button--medium {
  width: 56px;
  height: 56px;
}
.md-icon-button--medium.md-icon-button--narrow {
  width: 48px;
  height: 56px;
}
.md-icon-button--medium.md-icon-button--wide {
  width: 72px;
  height: 56px;
}
.md-icon-button--medium.md-icon-button--round {
  border-radius: 28px;
}
.md-icon-button--medium.md-icon-button--round[selected] {
  border-radius: 16px;
}
.md-icon-button--medium.md-icon-button--square {
  border-radius: 16px;
}
.md-icon-button--medium.md-icon-button--square[selected] {
  border-radius: 28px;
}
.md-icon-button--medium:active, .md-icon-button--medium:active[selected] {
  border-radius: 12px;
}
.md-icon-button--medium .md-icon-button__native {
  width: 24px;
  height: 24px;
  font-size: 24px;
}

.md-icon-button--large {
  width: 96px;
  height: 96px;
}
.md-icon-button--large.md-icon-button--narrow {
  width: 64px;
  height: 96px;
}
.md-icon-button--large.md-icon-button--wide {
  width: 128px;
  height: 96px;
}
.md-icon-button--large.md-icon-button--round {
  border-radius: 48px;
}
.md-icon-button--large.md-icon-button--round[selected] {
  border-radius: 28px;
}
.md-icon-button--large.md-icon-button--square {
  border-radius: 28px;
}
.md-icon-button--large.md-icon-button--square[selected] {
  border-radius: 48px;
}
.md-icon-button--large:active, .md-icon-button--large:active[selected] {
  border-radius: 16px;
}
.md-icon-button--large .md-icon-button__native {
  width: 32px;
  height: 32px;
  font-size: 32px;
}

.md-icon-button--extra-large {
  width: 136px;
  height: 136px;
}
.md-icon-button--extra-large.md-icon-button--narrow {
  width: 104px;
  height: 136px;
}
.md-icon-button--extra-large.md-icon-button--wide {
  width: 184px;
  height: 136px;
}
.md-icon-button--extra-large.md-icon-button--round {
  border-radius: 68px;
}
.md-icon-button--extra-large.md-icon-button--round[selected] {
  border-radius: 28px;
}
.md-icon-button--extra-large.md-icon-button--square {
  border-radius: 28px;
}
.md-icon-button--extra-large.md-icon-button--square[selected] {
  border-radius: 68px;
}
.md-icon-button--extra-large:active, .md-icon-button--extra-large:active[selected] {
  border-radius: 16px;
}
.md-icon-button--extra-large .md-icon-button__native {
  width: 40px;
  height: 40px;
  font-size: 40px;
}

.md-icon-button--filled {
  background-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}
.md-icon-button--filled.md-icon-button--toggle {
  background-color: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface-container);
}
.md-icon-button--filled.md-icon-button--toggle[selected] {
  background-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}

.md-icon-button--tonal {
  background-color: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}
.md-icon-button--tonal.md-icon-button--toggle {
  background-color: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}
.md-icon-button--tonal.md-icon-button--toggle[selected] {
  background-color: var(--md-sys-color-secondary);
  color: var(--md-sys-color-on-secondary);
}

.md-icon-button--outlined {
  border: 1px solid var(--md-sys-color-outline-variant);
  color: var(--md-sys-color-on-surface-variant);
}
.md-icon-button--outlined.md-icon-button--toggle {
  border: 1px solid var(--md-sys-color-outline-variant);
  color: var(--md-sys-color-on-surface-variant);
}
.md-icon-button--outlined.md-icon-button--toggle[selected] {
  border: 1px solid var(--md-sys-color-inverse-surface);
  background-color: var(--md-sys-color-inverse-surface);
  color: var(--md-sys-color-inverse-on-surface);
}

.md-icon-button--standard {
  color: var(--md-sys-color-on-surface-variant);
}
.md-icon-button--standard.md-icon-button--toggle {
  color: var(--md-sys-color-on-surface-variant);
}
.md-icon-button--standard[selected] {
  color: var(--md-sys-color-primary);
}

.md-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  position: relative;
  will-change: height, padding, border-radius, gap, background-color, color, border;
  transition-property: height, padding, border-radius, gap, background-color, color, border;
  transition-duration: var(--md-sys-motion-duration-short3);
  transition-timing-function: cubic-bezier(var(--md-sys-motion-easing-standard-decelerate));
}

.md-button__native {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  width: 100%;
  height: 100%;
  z-index: 1;
  background-color: transparent;
  color: transparent;
}

.md-button--extra-small {
  height: 32px;
  padding: 0 12px;
  gap: 0 4px;
}
.md-button--extra-small .md-button__icon {
  width: 20px;
  height: 20px;
  font-size: 20px;
}
.md-button--extra-small .md-button__label {
  font-family: var(--md-sys-typescale-label-large-font);
  font-weight: var(--md-sys-typescale-label-large-weight);
  font-size: var(--md-sys-typescale-label-large-size);
  letter-spacing: var(--md-sys-typescale-label-large-tracking);
  line-height: var(--md-sys-typescale-label-large-line-height);
}
.md-button--extra-small.md-button--round {
  border-radius: 16px;
}
.md-button--extra-small.md-button--round[selected] {
  border-radius: 12px;
}
.md-button--extra-small.md-button--square {
  border-radius: 12px;
}
.md-button--extra-small.md-button--square[selected] {
  border-radius: 16px;
}
.md-button--extra-small:active {
  border-radius: 8px;
}

.md-button--small {
  height: 40px;
  padding: 0 16px;
  gap: 0 8px;
}
.md-button--small .md-button__icon {
  width: 20px;
  height: 20px;
  font-size: 20px;
}
.md-button--small .md-button__label {
  font-family: var(--md-sys-typescale-label-large-font);
  font-weight: var(--md-sys-typescale-label-large-weight);
  font-size: var(--md-sys-typescale-label-large-size);
  letter-spacing: var(--md-sys-typescale-label-large-tracking);
  line-height: var(--md-sys-typescale-label-large-line-height);
}
.md-button--small.md-button--round {
  border-radius: 20px;
}
.md-button--small.md-button--round[selected] {
  border-radius: 12px;
}
.md-button--small.md-button--square {
  border-radius: 12px;
}
.md-button--small.md-button--square[selected] {
  border-radius: 20px;
}
.md-button--small:active {
  border-radius: 8px;
}

.md-button--medium {
  height: 56px;
  padding: 0 24px;
  gap: 0 8px;
}
.md-button--medium .md-button__icon {
  width: 24px;
  height: 24px;
  font-size: 24px;
}
.md-button--medium .md-button__label {
  font-family: var(--md-sys-typescale-title-medium-font);
  font-weight: var(--md-sys-typescale-title-medium-weight);
  font-size: var(--md-sys-typescale-title-medium-size);
  letter-spacing: var(--md-sys-typescale-title-medium-tracking);
  line-height: var(--md-sys-typescale-title-medium-line-height);
}
.md-button--medium.md-button--round {
  border-radius: 28px;
}
.md-button--medium.md-button--round[selected] {
  border-radius: 16px;
}
.md-button--medium.md-button--square {
  border-radius: 16px;
}
.md-button--medium.md-button--square[selected] {
  border-radius: 28px;
}
.md-button--medium:active {
  border-radius: 12px;
}

.md-button--large {
  height: 96px;
  padding: 0 48px;
  gap: 0 12px;
}
.md-button--large .md-button__icon {
  width: 32px;
  height: 32px;
  font-size: 32px;
}
.md-button--large .md-button__label {
  font-family: var(--md-sys-typescale-headline-small-font);
  font-weight: var(--md-sys-typescale-headline-small-weight);
  font-size: var(--md-sys-typescale-headline-small-size);
  letter-spacing: var(--md-sys-typescale-headline-small-tracking);
  line-height: var(--md-sys-typescale-headline-small-line-height);
}
.md-button--large.md-button--round {
  border-radius: 48px;
}
.md-button--large.md-button--round[selected] {
  border-radius: 28px;
}
.md-button--large.md-button--square {
  border-radius: 28px;
}
.md-button--large.md-button--square[selected] {
  border-radius: 48px;
}
.md-button--large:active {
  border-radius: 16px;
}

.md-button--extra-large {
  height: 136px;
  padding: 0 64px;
  gap: 0 16px;
}
.md-button--extra-large .md-button__icon {
  width: 40px;
  height: 40px;
  font-size: 40px;
}
.md-button--extra-large .md-button__label {
  font-family: var(--md-sys-typescale-headline-large-font);
  font-weight: var(--md-sys-typescale-headline-large-weight);
  font-size: var(--md-sys-typescale-headline-large-size);
  letter-spacing: var(--md-sys-typescale-headline-large-tracking);
  line-height: var(--md-sys-typescale-headline-large-line-height);
}
.md-button--extra-large.md-button--round {
  border-radius: 68px;
}
.md-button--extra-large.md-button--round[selected] {
  border-radius: 28px;
}
.md-button--extra-large.md-button--square {
  border-radius: 28px;
}
.md-button--extra-large.md-button--square[selected] {
  border-radius: 68px;
}
.md-button--extra-large:active {
  border-radius: 16px;
}

.md-button--elevated {
  background-color: var(--md-sys-color-surface-container-low);
  color: var(--md-sys-color-primary);
}
.md-button--elevated.md-button--toggle {
  background-color: var(--md-sys-color-surface-container-low);
  color: var(--md-sys-color-primary);
}
.md-button--elevated.md-button--toggle[selected] {
  background-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}

.md-button--filled {
  background-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}
.md-button--filled.md-button--toggle {
  background-color: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface-variant);
}
.md-button--filled.md-button--toggle[selected] {
  background-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}

.md-button--tonal {
  background-color: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}
.md-button--tonal.md-button--toggle {
  background-color: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}
.md-button--tonal.md-button--toggle[selected] {
  background-color: var(--md-sys-color-secondary);
  color: var(--md-sys-color-on-secondary);
}

.md-button--outlined {
  border: 1px solid var(--md-sys-color-outline-variant);
  color: var(--md-sys-color-on-surface-variant);
}
.md-button--outlined.md-button--toggle {
  border: 1px solid var(--md-sys-color-outline-variant);
  color: var(--md-sys-color-on-surface-variant);
}
.md-button--outlined.md-button--toggle[selected] {
  background-color: var(--md-sys-color-inverse-surface);
  border: 1px solid var(--md-sys-color-inverse-surface);
  color: var(--md-sys-color-inverse-on-surface);
}

.md-button--text {
  color: var(--md-sys-color-primary);
}
.md-fab {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  box-shadow: var(--md-sys-elevation-level3);
  will-change: width;
  transition-property: width;
  transition-duration: var(--md-sys-motion-duration-short3);
  transition-timing-function: cubic-bezier(var(--md-sys-motion-easing-standard-decelerate));
}

.md-fab--unelevated {
  box-shadow: var(--md-sys-elevation-level0);
}

.md-fab__icon {
  flex: 0 0 auto;
}

.md-fab__label {
  overflow: hidden;
  white-space: nowrap;
}

.md-fab--small {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  padding: 16px;
}
.md-fab--small .md-fab__icon {
  width: 24px;
  height: 24px;
  font-size: 24px;
}

.md-fab--medium {
  width: 80px;
  height: 80px;
  border-radius: 20px;
  padding: 26px;
}
.md-fab--medium .md-fab__icon {
  width: 28px;
  height: 28px;
  font-size: 28px;
}

.md-fab--large {
  width: 96px;
  height: 96px;
  border-radius: 28px;
  padding: 30px;
}
.md-fab--large .md-fab__icon {
  width: 36px;
  height: 36px;
  font-size: 36px;
}

.md-fab--extended {
  width: auto;
  min-width: 80px;
}
.md-fab--extended.md-fab--small {
  padding-left: 16px;
  padding-right: 16px;
  -moz-column-gap: 8px;
       column-gap: 8px;
}
.md-fab--extended.md-fab--small .md-fab__label {
  font-family: var(--md-sys-typescale-title-medium-font);
  font-weight: var(--md-sys-typescale-title-medium-weight);
  font-size: var(--md-sys-typescale-title-medium-size);
  letter-spacing: var(--md-sys-typescale-title-medium-tracking);
  line-height: var(--md-sys-typescale-title-medium-line-height);
}
.md-fab--extended.md-fab--medium {
  padding-left: 26px;
  padding-right: 26px;
  -moz-column-gap: 12px;
       column-gap: 12px;
}
.md-fab--extended.md-fab--medium .md-fab__label {
  font-family: var(--md-sys-typescale-title-large-font);
  font-weight: var(--md-sys-typescale-title-large-weight);
  font-size: var(--md-sys-typescale-title-large-size);
  letter-spacing: var(--md-sys-typescale-title-large-tracking);
  line-height: var(--md-sys-typescale-title-large-line-height);
}
.md-fab--extended.md-fab--large {
  padding-left: 28px;
  padding-right: 28px;
  -moz-column-gap: 16px;
       column-gap: 16px;
}
.md-fab--extended.md-fab--large .md-fab__label {
  font-family: var(--md-sys-typescale-headline-small-font);
  font-weight: var(--md-sys-typescale-headline-small-weight);
  font-size: var(--md-sys-typescale-headline-small-size);
  letter-spacing: var(--md-sys-typescale-headline-small-tracking);
  line-height: var(--md-sys-typescale-headline-small-line-height);
}

.md-fab--primary-container {
  background-color: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}

.md-fab--secondary-container {
  background-color: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}

.md-fab--tertiary-container {
  background-color: var(--md-sys-color-tertiary-container);
  color: var(--md-sys-color-on-tertiary-container);
}

.md-fab--primary {
  background-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}

.md-fab--secondary {
  background-color: var(--md-sys-color-secondary);
  color: var(--md-sys-color-on-secondary);
}

.md-fab--tertiary {
  background-color: var(--md-sys-color-tertiary);
  color: var(--md-sys-color-on-tertiary);
}

.md-form {
  display: block;
}

.md-checkbox {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  width: 24px;
  height: 24px;
  position: relative;
}

.md-checkbox__native {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 200%;
  height: 200%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  z-index: 1;
}
.md-checkbox__native:indeterminate + .md-checkbox__container {
  border-color: var(--md-sys-color-primary);
  background-color: var(--md-sys-color-primary);
}
.md-checkbox__native:indeterminate + .md-checkbox__container .md-checkbox__icon {
  width: 10px;
  height: 2px;
  background-color: var(--md-sys-color-on-primary);
}
.md-checkbox__native:checked + .md-checkbox__container {
  border-color: var(--md-sys-color-primary);
  background-color: var(--md-sys-color-primary);
}
.md-checkbox__native:checked + .md-checkbox__container .md-checkbox__icon {
  width: 10px;
  height: 5px;
  border: 2px solid var(--md-sys-color-on-primary);
  border-top-width: 0;
  border-right-width: 0;
  transform: rotate(-45deg);
  margin-top: -4px;
}

.md-checkbox__container {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  width: 18px;
  height: 18px;
  border: 2px solid var(--md-sys-color-on-surface-variant);
  border-radius: 2px;
}

.md-checkbox[disabled] {
  pointer-events: none;
  opacity: 38%;
}

.md-radio-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  width: 24px;
  height: 24px;
  position: relative;
}

.md-radio-button__native {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 200%;
  height: 200%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  z-index: 1;
}
.md-radio-button__native:checked + .md-radio-button__container {
  border-color: var(--md-sys-color-primary);
}
.md-radio-button__native:checked + .md-radio-button__container .md-radio-button__icon {
  width: 10px;
  height: 10px;
  background-color: var(--md-sys-color-primary);
  border-radius: 5px;
}

.md-radio-button__container {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  border: 2px solid var(--md-sys-color-on-surface-variant);
  border-radius: 10px;
}

.md-radio-button[disabled] {
  pointer-events: none;
  opacity: 38%;
}

.md-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  width: 52px;
  height: 32px;
  position: relative;
}

.md-switch__native {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  z-index: 1;
}
.md-switch__native:checked + .md-switch__track {
  background-color: var(--md-sys-color-primary);
  border-color: var(--md-sys-color-primary);
}
.md-switch__native:checked + .md-switch__track .md-switch__handle {
  width: 24px;
  height: 24px;
  border-radius: 12px;
  background-color: var(--md-sys-color-on-primary);
  left: 22px;
}
.md-switch__native:checked + .md-switch__track .md-switch__icon {
  color: var(--md-sys-color-primary);
}
.md-switch__native:checked:active + .md-switch__track .md-switch__handle {
  left: 20px;
}
.md-switch__native:active + .md-switch__track .md-switch__handle {
  width: 28px;
  height: 28px;
  border-radius: 14px;
  left: 0px;
}
.md-switch__track {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  width: 52px;
  height: 32px;
  background-color: var(--md-sys-color-surface-container-highest);
  border-radius: 16px;
  border: 2px solid var(--md-sys-color-outline);
  position: relative;
  will-change: background-color, border-color;
  transition-property: background-color, border-color;
  transition-duration: var(--md-sys-motion-duration-short3);
  transition-timing-function: cubic-bezier(var(--md-sys-motion-easing-standard-decelerate));
}

.md-switch__handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  width: 16px;
  height: 16px;
  border-radius: 8px;
  background-color: var(--md-sys-color-outline);
  position: absolute;
  top: 50%;
  transform: translate3d(0%, -50%, 0);
  left: 6px;
  will-change: width, height, border-radius, background-color, border-color, left;
  transition-property: width, height, border-radius, background-color, border-color, left;
  transition-duration: var(--md-sys-motion-duration-short3);
  transition-timing-function: cubic-bezier(var(--md-sys-motion-easing-standard-decelerate));
}
.md-switch__handle:not(:empty) {
  width: 24px;
  height: 24px;
  border-radius: 12px;
  left: 3px;
}
.md-switch__handle.md-ripple::after {
  width: 40px;
}

.md-switch__icon {
  width: 16px;
  height: 16px;
  font-size: 16px;
  color: var(--md-sys-color-surface-container-highest);
  will-change: color;
  transition-property: color;
  transition-duration: var(--md-sys-motion-duration-short3);
  transition-timing-function: cubic-bezier(var(--md-sys-motion-easing-standard-decelerate));
}

.md-tool-group {
  display: inline-flex;
  align-items: center;
  gap: 0 4px;
}

.md-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  padding: 0 4px;
  background-color: var(--md-sys-color-error);
  color: var(--md-sys-color-on-error);
  font-family: var(--md-sys-typescale-label-small-font);
  font-weight: var(--md-sys-typescale-label-small-weight);
  font-size: var(--md-sys-typescale-label-small-size);
  letter-spacing: var(--md-sys-typescale-label-small-tracking);
  line-height: var(--md-sys-typescale-label-small-line-height);
}
.md-badge:empty {
  min-width: 6px;
  height: 6px;
  border-radius: 6px;
  padding: 0;
}

.md-divider {
  display: block;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  margin: 8px 0;
}

.md-list {
  display: flex;
  flex-direction: column;
  padding: 8px 0;
}

.md-list__item {
  display: flex;
  align-items: center;
  padding: 8px 16px 8px calc(16px + 24px * var(--md-comp-list-item-level, 0));
  gap: 0 16px;
}

.md-list__leading {
  flex: 0 0 auto;
  gap: 0;
}

.md-list__leading-item--video {
  margin: 4px 0 4px -16px;
}

.md-list__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.md-list__label {
  font-family: var(--md-sys-typescale-body-large-font);
  font-weight: var(--md-sys-typescale-body-large-weight);
  font-size: var(--md-sys-typescale-body-large-size);
  letter-spacing: var(--md-sys-typescale-body-large-tracking);
  line-height: var(--md-sys-typescale-body-large-line-height);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.md-list__supporting-text {
  font-family: var(--md-sys-typescale-body-medium-font);
  font-weight: var(--md-sys-typescale-body-medium-weight);
  font-size: var(--md-sys-typescale-body-medium-size);
  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
  line-height: var(--md-sys-typescale-body-medium-line-height);
  max-height: calc(var(--md-sys-typescale-body-medium-line-height) * 2);
  overflow: hidden;
}

.md-list__trailing {
  flex: 0 0 auto;
}

.md-list__item--one-line {
  min-height: 56px;
}

.md-list__item--two-line {
  min-height: 72px;
}

.md-list__item--three-line {
  min-height: 88px;
  padding-top: 12px;
  padding-bottom: 12px;
  align-items: flex-start;
}
.md-list__item--three-line .md-list__leading-item--video {
  margin: 0 0 0 -16px;
}

.md-list__item:not(.md-list__item--interactive)::after {
  display: none;
}

.md-list__item[selected] {
  background-color: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}

.md-tree {
  display: flex;
  flex-direction: column;
  padding: 8px 0;
}

.md-push-menu {
  display: flex;
  flex-direction: column;
  padding: 8px 0;
}

@keyframes navigation-bar-item-selected-icon {
  0% {
    width: 32px;
  }
  100% {
    width: 56px;
  }
}
.md-navigation-bar {
  display: flex;
  background-color: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface);
}
.md-navigation-bar .md-list {
  flex-direction: row;
  padding: 0;
}
.md-navigation-bar .md-list__item {
  flex: 1;
  min-height: 0;
  gap: 0;
  position: relative;
  will-change: width, height;
  transition-property: width, height;
  transition-duration: var(--md-sys-motion-duration-short3);
  transition-timing-function: cubic-bezier(var(--md-sys-motion-easing-standard-decelerate));
}
.md-navigation-bar .md-list__label {
  font-family: var(--md-sys-typescale-label-medium-font);
  font-weight: var(--md-sys-typescale-label-medium-weight);
  font-size: var(--md-sys-typescale-label-medium-size);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
  line-height: var(--md-sys-typescale-label-medium-line-height);
}
.md-navigation-bar .md-list__trailing-item--badge {
  position: absolute;
}

.md-navigation-bar--vertical .md-list {
  flex: 1;
}
.md-navigation-bar--vertical .md-list__item {
  flex-direction: column;
  padding-top: 6px;
  padding-bottom: 6px;
  padding-left: 12px;
  padding-right: 12px;
  width: 80px;
  height: 64px;
}
.md-navigation-bar--vertical .md-list__item[selected] {
  background-color: inherit;
  color: inherit;
}
.md-navigation-bar--vertical .md-list__item[selected] .md-list__leading-item--icon {
  background-color: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  animation-name: var(--navigation-bar-item-selected-icon, navigation-bar-item-selected-icon);
  animation-duration: var(--md-sys-motion-duration-short3);
  animation-timing-function: cubic-bezier(var(--md-sys-motion-easing-standard-decelerate));
}
.md-navigation-bar--vertical .md-list__leading + .md-list__content .md-list__label {
  margin-top: 4px;
}
.md-navigation-bar--vertical .md-list__leading-item--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  width: 56px;
  height: 32px;
  border-radius: 16px;
}
.md-navigation-bar--vertical .md-list__trailing-item--badge {
  left: 50%;
  top: 6px;
}
.md-navigation-bar--vertical .md-list__trailing-item--badge:empty {
  left: calc(50% + 5px);
  top: 11px;
}

.md-navigation-bar--horizontal {
  justify-content: center;
  padding: 12px 0;
}
.md-navigation-bar--horizontal .md-list {
  -moz-column-gap: 8px;
       column-gap: 8px;
}
.md-navigation-bar--horizontal .md-list__item {
  border-radius: 20px;
  width: auto;
  height: 40px;
}
.md-navigation-bar--horizontal .md-list__leading + .md-list__content .md-list__label {
  margin-left: 4px;
}
.md-navigation-bar--horizontal .md-list__trailing-item--badge {
  left: 28px;
  top: 4px;
}
.md-navigation-bar--horizontal .md-list__trailing-item--badge:empty {
  left: 33px;
  top: 9px;
}

.md-navigation-drawer {
  display: flex;
  flex-direction: column;
  background-color: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
}
.md-navigation-drawer .md-list,
.md-navigation-drawer .md-tree,
.md-navigation-drawer .md-push-menu {
  padding: 12px 0;
  margin-left: 12px;
  margin-right: 12px;
}
.md-navigation-drawer .md-list__item {
  border-radius: 28px;
  gap: 0 12px;
}
.md-navigation-drawer .md-list__label {
  font-family: var(--md-sys-typescale-label-large-font);
  font-weight: var(--md-sys-typescale-label-large-weight);
  font-size: var(--md-sys-typescale-label-large-size);
  letter-spacing: var(--md-sys-typescale-label-large-tracking);
  line-height: var(--md-sys-typescale-label-large-line-height);
}
.md-navigation-drawer .md-list__trailing-item--badge {
  padding: 0;
  font-family: var(--md-sys-typescale-label-large-font);
  font-weight: var(--md-sys-typescale-label-large-weight);
  font-size: var(--md-sys-typescale-label-large-size);
  letter-spacing: var(--md-sys-typescale-label-large-tracking);
  line-height: var(--md-sys-typescale-label-large-line-height);
  background-color: inherit;
  color: inherit;
}
.md-navigation-drawer.md-layout-border__item--modal {
  background-color: var(--md-sys-color-surface-container-low);
  color: var(--md-sys-color-on-surface);
}

@keyframes navigation-rail-item-selected-icon {
  0% {
    width: 32px;
  }
  100% {
    width: 56px;
  }
}
.md-navigation-rail {
  display: inline-flex;
  flex-direction: column;
  align-items: start;
  background-color: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface);
}
.md-navigation-rail .md-icon-button {
  margin: 20px 20px 0 20px;
}
.md-navigation-rail .md-fab {
  margin: 12px 12px 0 12px;
}
.md-navigation-rail .md-list {
  padding: 0;
  margin-top: 40px;
  align-items: start;
}
.md-navigation-rail .md-list__item {
  min-height: 0;
  gap: 0;
  position: relative;
  will-change: width, height;
  transition-property: width, height;
  transition-duration: var(--md-sys-motion-duration-short3);
  transition-timing-function: cubic-bezier(var(--md-sys-motion-easing-standard-decelerate));
}
.md-navigation-rail .md-list__content {
  min-width: unset;
}
.md-navigation-rail .md-list__label {
  font-family: var(--md-sys-typescale-label-medium-font);
  font-weight: var(--md-sys-typescale-label-medium-weight);
  font-size: var(--md-sys-typescale-label-medium-size);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
  line-height: var(--md-sys-typescale-label-medium-line-height);
  text-overflow: unset;
}
.md-navigation-rail .md-list__trailing-item--badge {
  position: absolute;
}

.md-navigation-rail:not([expanded]) {
  width: 80px;
}
.md-navigation-rail:not([expanded]) .md-list {
  row-gap: 4px;
}
.md-navigation-rail:not([expanded]) .md-list__item {
  flex-direction: column;
  padding-top: 6px;
  padding-bottom: 6px;
  padding-left: 12px;
  padding-right: 12px;
  width: 80px;
  height: 64px;
}
.md-navigation-rail:not([expanded]) .md-list__item[selected] {
  background-color: inherit;
  color: inherit;
}
.md-navigation-rail:not([expanded]) .md-list__item[selected] .md-list__leading-item--icon {
  background-color: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  animation-name: var(--navigation-rail-item-selected-icon, navigation-rail-item-selected-icon);
  animation-duration: var(--md-sys-motion-duration-short3);
  animation-timing-function: cubic-bezier(var(--md-sys-motion-easing-standard-decelerate));
}
.md-navigation-rail:not([expanded]) .md-list__leading + .md-list__content .md-list__label {
  margin-top: 4px;
}
.md-navigation-rail:not([expanded]) .md-list__leading-item--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  width: 56px;
  height: 32px;
  border-radius: 16px;
}
.md-navigation-rail:not([expanded]) .md-list__trailing-item--badge {
  left: 50%;
  top: 6px;
}
.md-navigation-rail:not([expanded]) .md-list__trailing-item--badge:empty {
  left: calc(50% + 5px);
  top: 11px;
}

.md-navigation-rail[expanded] {
  width: auto;
  min-width: 220px;
  max-width: 360px;
}
.md-navigation-rail[expanded] .md-list {
  margin-left: 12px;
  margin-right: 12px;
}
.md-navigation-rail[expanded] .md-list__item {
  padding-top: 16px;
  padding-bottom: 16px;
  border-radius: 28px;
  width: auto;
  height: 56px;
}
.md-navigation-rail[expanded] .md-list__leading + .md-list__content .md-list__label {
  margin-left: 8px;
}
.md-navigation-rail[expanded] .md-list__label {
  font-family: var(--md-sys-typescale-label-large-font);
  font-weight: var(--md-sys-typescale-label-large-weight);
  font-size: var(--md-sys-typescale-label-large-size);
  letter-spacing: var(--md-sys-typescale-label-large-tracking);
  line-height: var(--md-sys-typescale-label-large-line-height);
}
.md-navigation-rail[expanded] .md-list__trailing-item--badge {
  left: 28px;
  top: 12px;
}
.md-navigation-rail[expanded] .md-list__trailing-item--badge:empty {
  left: 33px;
  top: 17px;
}
/*!*******************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/demo/demo.scss ***!
  \*******************************************************************************************************************************************************/
.demo-ripple__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  width: 128px;
  height: 128px;
  background-color: var(--md-sys-color-surface-container);
}

.demo-ripple__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  width: 64px;
  height: 64px;
  background-color: var(--md-sys-color-surface-container-high);
}