/*!
* Materialize v2.3.3-1.0.40 (https://materializeweb.com)
* Copyright 2014-2026 Materialize
* MIT License (https://raw.githubusercontent.com/materializecss/materialize/master/LICENSE)
*/
@charset "UTF-8";
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  -webkit-box-sizing: content-box;
          box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none;
}

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  -webkit-box-sizing: border-box;
          box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type=checkbox],
[type=radio] {
  -webkit-box-sizing: border-box;
          box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type=search] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* Misc
   ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none;
}

:root {
  --md-source: #006495;
  /* primary */
  --md-ref-palette-primary0: #000000;
  --md-ref-palette-primary10: #001e30;
  --md-ref-palette-primary20: #003450;
  --md-ref-palette-primary25: #003f60;
  --md-ref-palette-primary30: #004b71;
  --md-ref-palette-primary35: #005783;
  --md-ref-palette-primary40: #006495;
  --md-ref-palette-primary50: #0f7eb8;
  --md-ref-palette-primary60: #3d98d4;
  --md-ref-palette-primary70: #5db3f0;
  --md-ref-palette-primary80: #8fcdff;
  --md-ref-palette-primary90: #cbe6ff;
  --md-ref-palette-primary95: #e6f2ff;
  --md-ref-palette-primary98: #f7f9ff;
  --md-ref-palette-primary99: #fcfcff;
  --md-ref-palette-primary100: #ffffff;
  /* secondary */
  --md-ref-palette-secondary0: #000000;
  --md-ref-palette-secondary10: #0d1d29;
  --md-ref-palette-secondary20: #22323f;
  --md-ref-palette-secondary25: #2d3d4b;
  --md-ref-palette-secondary30: #394856;
  --md-ref-palette-secondary35: #445462;
  --md-ref-palette-secondary40: #50606f;
  --md-ref-palette-secondary50: #697988;
  --md-ref-palette-secondary60: #8293a2;
  --md-ref-palette-secondary70: #9dadbd;
  --md-ref-palette-secondary80: #b8c8d9;
  --md-ref-palette-secondary90: #d4e4f6;
  --md-ref-palette-secondary95: #e6f2ff;
  --md-ref-palette-secondary98: #f7f9ff;
  --md-ref-palette-secondary99: #fcfcff;
  --md-ref-palette-secondary100: #ffffff;
  /* tertiary */
  --md-ref-palette-tertiary0: #000000;
  --md-ref-palette-tertiary10: #211634;
  --md-ref-palette-tertiary20: #362b4a;
  --md-ref-palette-tertiary25: #423656;
  --md-ref-palette-tertiary30: #4d4162;
  --md-ref-palette-tertiary35: #594c6e;
  --md-ref-palette-tertiary40: #66587b;
  --md-ref-palette-tertiary50: #7f7195;
  --md-ref-palette-tertiary60: #998ab0;
  --md-ref-palette-tertiary70: #b4a4cb;
  --md-ref-palette-tertiary80: #d0bfe7;
  --md-ref-palette-tertiary90: #ecdcff;
  --md-ref-palette-tertiary95: #f7edff;
  --md-ref-palette-tertiary98: #fef7ff;
  --md-ref-palette-tertiary99: #fffbff;
  --md-ref-palette-tertiary100: #ffffff;
  /* neutral */
  --md-ref-palette-neutral0: #000000;
  --md-ref-palette-neutral10: #1a1c1e;
  --md-ref-palette-neutral20: #2e3133;
  --md-ref-palette-neutral25: #3a3c3e;
  --md-ref-palette-neutral30: #454749;
  --md-ref-palette-neutral35: #515255;
  --md-ref-palette-neutral40: #5d5e61;
  --md-ref-palette-neutral50: #76777a;
  --md-ref-palette-neutral60: #8f9194;
  --md-ref-palette-neutral70: #aaabae;
  --md-ref-palette-neutral80: #c6c6c9;
  --md-ref-palette-neutral90: #e2e2e5;
  --md-ref-palette-neutral95: #f0f0f3;
  --md-ref-palette-neutral98: #f9f9fc;
  --md-ref-palette-neutral99: #fcfcff;
  --md-ref-palette-neutral100: #ffffff;
  /* neutral-variant */
  --md-ref-palette-neutral-variant0: #000000;
  --md-ref-palette-neutral-variant10: #161c22;
  --md-ref-palette-neutral-variant20: #2b3137;
  --md-ref-palette-neutral-variant25: #363c42;
  --md-ref-palette-neutral-variant30: #41474d;
  --md-ref-palette-neutral-variant35: #4d5359;
  --md-ref-palette-neutral-variant40: #595f65;
  --md-ref-palette-neutral-variant50: #72787e;
  --md-ref-palette-neutral-variant60: #8b9198;
  --md-ref-palette-neutral-variant70: #a6acb3;
  --md-ref-palette-neutral-variant80: #c1c7ce;
  --md-ref-palette-neutral-variant90: #dee3ea;
  --md-ref-palette-neutral-variant95: #ecf1f9;
  --md-ref-palette-neutral-variant98: #f7f9ff;
  --md-ref-palette-neutral-variant99: #fcfcff;
  --md-ref-palette-neutral-variant100: #ffffff;
  /* error */
  --md-ref-palette-error0: #000000;
  --md-ref-palette-error10: #410002;
  --md-ref-palette-error20: #690005;
  --md-ref-palette-error25: #7e0007;
  --md-ref-palette-error30: #93000a;
  --md-ref-palette-error35: #a80710;
  --md-ref-palette-error40: #ba1a1a;
  --md-ref-palette-error50: #de3730;
  --md-ref-palette-error60: #ff5449;
  --md-ref-palette-error70: #ff897d;
  --md-ref-palette-error80: #ffb4ab;
  --md-ref-palette-error90: #ffdad6;
  --md-ref-palette-error95: #ffedea;
  --md-ref-palette-error98: #fff8f7;
  --md-ref-palette-error99: #fffbff;
  --md-ref-palette-error100: #ffffff;
  /* light */
  --md-sys-color-primary-light: #006495;
  --md-sys-color-on-primary-light: #ffffff;
  --md-sys-color-primary-container-light: #cbe6ff;
  --md-sys-color-on-primary-container-light: #001e30;
  --md-sys-color-secondary-light: #50606f;
  --md-sys-color-on-secondary-light: #ffffff;
  --md-sys-color-secondary-container-light: #d4e4f6;
  --md-sys-color-on-secondary-container-light: #0d1d29;
  --md-sys-color-tertiary-light: #66587b;
  --md-sys-color-on-tertiary-light: #ffffff;
  --md-sys-color-tertiary-container-light: #ecdcff;
  --md-sys-color-on-tertiary-container-light: #211634;
  --md-sys-color-error-light: #ba1a1a;
  --md-sys-color-error-container-light: #ffdad6;
  --md-sys-color-on-error-light: #ffffff;
  --md-sys-color-on-error-container-light: #410002;
  --md-sys-color-background-light: #fcfcff;
  --md-sys-color-on-background-light: #1a1c1e;
  --md-sys-color-surface-light: #fcfcff;
  --md-sys-color-on-surface-light: #1a1c1e;
  --md-sys-color-surface-variant-light: #dee3ea;
  --md-sys-color-on-surface-variant-light: #41474d;
  --md-sys-color-outline-light: #72787e;
  --md-sys-color-inverse-on-surface-light: #f0f0f3;
  --md-sys-color-inverse-surface-light: #2e3133;
  --md-sys-color-inverse-primary-light: #8fcdff;
  --md-sys-color-shadow-light: #000000;
  --md-sys-color-surface-tint-light: #006495;
  --md-sys-color-outline-variant-light: #c1c7ce;
  --md-sys-color-scrim-light: #000000;
  /* dark */
  --md-sys-color-primary-dark: #8fcdff;
  --md-sys-color-on-primary-dark: #003450;
  --md-sys-color-primary-container-dark: #004b71;
  --md-sys-color-on-primary-container-dark: #cbe6ff;
  --md-sys-color-secondary-dark: #b8c8d9;
  --md-sys-color-on-secondary-dark: #22323f;
  --md-sys-color-secondary-container-dark: #394856;
  --md-sys-color-on-secondary-container-dark: #d4e4f6;
  --md-sys-color-tertiary-dark: #d0bfe7;
  --md-sys-color-on-tertiary-dark: #362b4a;
  --md-sys-color-tertiary-container-dark: #4d4162;
  --md-sys-color-on-tertiary-container-dark: #ecdcff;
  --md-sys-color-error-dark: #ffb4ab;
  --md-sys-color-error-container-dark: #93000a;
  --md-sys-color-on-error-dark: #690005;
  --md-sys-color-on-error-container-dark: #ffdad6;
  --md-sys-color-background-dark: #1a1c1e;
  --md-sys-color-on-background-dark: #e2e2e5;
  --md-sys-color-surface-dark: #1a1c1e;
  --md-sys-color-on-surface-dark: #e2e2e5;
  --md-sys-color-surface-variant-dark: #41474d;
  --md-sys-color-on-surface-variant-dark: #c1c7ce;
  --md-sys-color-outline-dark: #8b9198;
  --md-sys-color-inverse-on-surface-dark: #1a1c1e;
  --md-sys-color-inverse-surface-dark: #e2e2e5;
  --md-sys-color-inverse-primary-dark: #006495;
  --md-sys-color-shadow-dark: #000000;
  --md-sys-color-surface-tint-dark: #8fcdff;
  --md-sys-color-outline-variant-dark: #41474d;
  --md-sys-color-scrim-dark: #000000;
  /* display - large */
  --md-sys-typescale-display-large-font-family-name: Roboto;
  --md-sys-typescale-display-large-font-family-style: Regular;
  --md-sys-typescale-display-large-font-weight: 400px;
  --md-sys-typescale-display-large-font-size: 57px;
  --md-sys-typescale-display-large-line-height: 64px;
  --md-sys-typescale-display-large-letter-spacing: -0.25px;
  /* display - medium */
  --md-sys-typescale-display-medium-font-family-name: Roboto;
  --md-sys-typescale-display-medium-font-family-style: Regular;
  --md-sys-typescale-display-medium-font-weight: 400px;
  --md-sys-typescale-display-medium-font-size: 45px;
  --md-sys-typescale-display-medium-line-height: 52px;
  --md-sys-typescale-display-medium-letter-spacing: 0px;
  /* display - small */
  --md-sys-typescale-display-small-font-family-name: Roboto;
  --md-sys-typescale-display-small-font-family-style: Regular;
  --md-sys-typescale-display-small-font-weight: 400px;
  --md-sys-typescale-display-small-font-size: 36px;
  --md-sys-typescale-display-small-line-height: 44px;
  --md-sys-typescale-display-small-letter-spacing: 0px;
  /* headline - large */
  --md-sys-typescale-headline-large-font-family-name: Roboto;
  --md-sys-typescale-headline-large-font-family-style: Regular;
  --md-sys-typescale-headline-large-font-weight: 400px;
  --md-sys-typescale-headline-large-font-size: 32px;
  --md-sys-typescale-headline-large-line-height: 40px;
  --md-sys-typescale-headline-large-letter-spacing: 0px;
  /* headline - medium */
  --md-sys-typescale-headline-medium-font-family-name: Roboto;
  --md-sys-typescale-headline-medium-font-family-style: Regular;
  --md-sys-typescale-headline-medium-font-weight: 400px;
  --md-sys-typescale-headline-medium-font-size: 28px;
  --md-sys-typescale-headline-medium-line-height: 36px;
  --md-sys-typescale-headline-medium-letter-spacing: 0px;
  /* headline - small */
  --md-sys-typescale-headline-small-font-family-name: Roboto;
  --md-sys-typescale-headline-small-font-family-style: Regular;
  --md-sys-typescale-headline-small-font-weight: 400px;
  --md-sys-typescale-headline-small-font-size: 24px;
  --md-sys-typescale-headline-small-line-height: 32px;
  --md-sys-typescale-headline-small-letter-spacing: 0px;
  /* body - large */
  --md-sys-typescale-body-large-font-family-name: Roboto;
  --md-sys-typescale-body-large-font-family-style: Regular;
  --md-sys-typescale-body-large-font-weight: 400px;
  --md-sys-typescale-body-large-font-size: 16px;
  --md-sys-typescale-body-large-line-height: 24px;
  --md-sys-typescale-body-large-letter-spacing: 0.50px;
  /* body - medium */
  --md-sys-typescale-body-medium-font-family-name: Roboto;
  --md-sys-typescale-body-medium-font-family-style: Regular;
  --md-sys-typescale-body-medium-font-weight: 400px;
  --md-sys-typescale-body-medium-font-size: 14px;
  --md-sys-typescale-body-medium-line-height: 20px;
  --md-sys-typescale-body-medium-letter-spacing: 0.25px;
  /* body - small */
  --md-sys-typescale-body-small-font-family-name: Roboto;
  --md-sys-typescale-body-small-font-family-style: Regular;
  --md-sys-typescale-body-small-font-weight: 400px;
  --md-sys-typescale-body-small-font-size: 12px;
  --md-sys-typescale-body-small-line-height: 16px;
  --md-sys-typescale-body-small-letter-spacing: 0.40px;
  /* label - large */
  --md-sys-typescale-label-large-font-family-name: Roboto;
  --md-sys-typescale-label-large-font-family-style: Medium;
  --md-sys-typescale-label-large-font-weight: 500px;
  --md-sys-typescale-label-large-font-size: 14px;
  --md-sys-typescale-label-large-line-height: 20px;
  --md-sys-typescale-label-large-letter-spacing: 0.10px;
  /* label - medium */
  --md-sys-typescale-label-medium-font-family-name: Roboto;
  --md-sys-typescale-label-medium-font-family-style: Medium;
  --md-sys-typescale-label-medium-font-weight: 500px;
  --md-sys-typescale-label-medium-font-size: 12px;
  --md-sys-typescale-label-medium-line-height: 16px;
  --md-sys-typescale-label-medium-letter-spacing: 0.50px;
  /* label - small */
  --md-sys-typescale-label-small-font-family-name: Roboto;
  --md-sys-typescale-label-small-font-family-style: Medium;
  --md-sys-typescale-label-small-font-weight: 500px;
  --md-sys-typescale-label-small-font-size: 11px;
  --md-sys-typescale-label-small-line-height: 16px;
  --md-sys-typescale-label-small-letter-spacing: 0.50px;
  /* title - large */
  --md-sys-typescale-title-large-font-family-name: Roboto;
  --md-sys-typescale-title-large-font-family-style: Regular;
  --md-sys-typescale-title-large-font-weight: 400px;
  --md-sys-typescale-title-large-font-size: 22px;
  --md-sys-typescale-title-large-line-height: 28px;
  --md-sys-typescale-title-large-letter-spacing: 0px;
  /* title - medium */
  --md-sys-typescale-title-medium-font-family-name: Roboto;
  --md-sys-typescale-title-medium-font-family-style: Medium;
  --md-sys-typescale-title-medium-font-weight: 500px;
  --md-sys-typescale-title-medium-font-size: 16px;
  --md-sys-typescale-title-medium-line-height: 24px;
  --md-sys-typescale-title-medium-letter-spacing: 0.15px;
  /* title - small */
  --md-sys-typescale-title-small-font-family-name: Roboto;
  --md-sys-typescale-title-small-font-family-style: Medium;
  --md-sys-typescale-title-small-font-weight: 500px;
  --md-sys-typescale-title-small-font-size: 14px;
  --md-sys-typescale-title-small-line-height: 20px;
  --md-sys-typescale-title-small-letter-spacing: 0.10px;
}

/* System Defaults */
:root, :host {
  color-scheme: light;
  --md-sys-color-primary: var(--md-sys-color-primary-light);
  --md-sys-color-on-primary: var(--md-sys-color-on-primary-light);
  --md-sys-color-primary-container: var(--md-sys-color-primary-container-light);
  --md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-light);
  --md-sys-color-secondary: var(--md-sys-color-secondary-light);
  --md-sys-color-on-secondary: var(--md-sys-color-on-secondary-light);
  --md-sys-color-secondary-container: var(--md-sys-color-secondary-container-light);
  --md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-light);
  --md-sys-color-tertiary: var(--md-sys-color-tertiary-light);
  --md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-light);
  --md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-light);
  --md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-light);
  --md-sys-color-error: var(--md-sys-color-error-light);
  --md-sys-color-on-error: var(--md-sys-color-on-error-light);
  --md-sys-color-error-container: var(--md-sys-color-error-container-light);
  --md-sys-color-on-error-container: var(--md-sys-color-on-error-container-light);
  --md-sys-color-outline: var(--md-sys-color-outline-light);
  --md-sys-color-background: var(--md-sys-color-background-light);
  --md-sys-color-on-background: var(--md-sys-color-on-background-light);
  --md-sys-color-surface: var(--md-sys-color-surface-light);
  --md-sys-color-on-surface: var(--md-sys-color-on-surface-light);
  --md-sys-color-surface-variant: var(--md-sys-color-surface-variant-light);
  --md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-light);
  --md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-light);
  --md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-light);
  --md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary-light);
  --md-sys-color-shadow: var(--md-sys-color-shadow-light);
  --md-sys-color-surface-tint: var(--md-sys-color-surface-tint-light);
  --md-sys-color-outline-variant: var(--md-sys-color-outline-variant-light);
  --md-sys-color-scrim: var(--md-sys-color-scrim-light);
}

@media (prefers-color-scheme: dark) {
  :root, :host {
    color-scheme: dark;
    --md-sys-color-primary: var(--md-sys-color-primary-dark);
    --md-sys-color-on-primary: var(--md-sys-color-on-primary-dark);
    --md-sys-color-primary-container: var(--md-sys-color-primary-container-dark);
    --md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-dark);
    --md-sys-color-secondary: var(--md-sys-color-secondary-dark);
    --md-sys-color-on-secondary: var(--md-sys-color-on-secondary-dark);
    --md-sys-color-secondary-container: var(--md-sys-color-secondary-container-dark);
    --md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-dark);
    --md-sys-color-tertiary: var(--md-sys-color-tertiary-dark);
    --md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-dark);
    --md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-dark);
    --md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-dark);
    --md-sys-color-error: var(--md-sys-color-error-dark);
    --md-sys-color-on-error: var(--md-sys-color-on-error-dark);
    --md-sys-color-error-container: var(--md-sys-color-error-container-dark);
    --md-sys-color-on-error-container: var(--md-sys-color-on-error-container-dark);
    --md-sys-color-outline: var(--md-sys-color-outline-dark);
    --md-sys-color-background: var(--md-sys-color-background-dark);
    --md-sys-color-on-background: var(--md-sys-color-on-background-dark);
    --md-sys-color-surface: var(--md-sys-color-surface-dark);
    --md-sys-color-on-surface: var(--md-sys-color-on-surface-dark);
    --md-sys-color-surface-variant: var(--md-sys-color-surface-variant-dark);
    --md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-dark);
    --md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-dark);
    --md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-dark);
    --md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary-dark);
    --md-sys-color-shadow: var(--md-sys-color-shadow-dark);
    --md-sys-color-surface-tint: var(--md-sys-color-surface-tint-dark);
    --md-sys-color-outline-variant: var(--md-sys-color-outline-variant-dark);
    --md-sys-color-scrim: var(--md-sys-color-scrim-dark);
  }
}
/* ===================================================================== Themes */
:root[theme=light] {
  color-scheme: light;
  --md-sys-color-primary: var(--md-sys-color-primary-light);
  --md-sys-color-on-primary: var(--md-sys-color-on-primary-light);
  --md-sys-color-primary-container: var(--md-sys-color-primary-container-light);
  --md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-light);
  --md-sys-color-secondary: var(--md-sys-color-secondary-light);
  --md-sys-color-on-secondary: var(--md-sys-color-on-secondary-light);
  --md-sys-color-secondary-container: var(--md-sys-color-secondary-container-light);
  --md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-light);
  --md-sys-color-tertiary: var(--md-sys-color-tertiary-light);
  --md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-light);
  --md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-light);
  --md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-light);
  --md-sys-color-error: var(--md-sys-color-error-light);
  --md-sys-color-on-error: var(--md-sys-color-on-error-light);
  --md-sys-color-error-container: var(--md-sys-color-error-container-light);
  --md-sys-color-on-error-container: var(--md-sys-color-on-error-container-light);
  --md-sys-color-outline: var(--md-sys-color-outline-light);
  --md-sys-color-background: var(--md-sys-color-background-light);
  --md-sys-color-on-background: var(--md-sys-color-on-background-light);
  --md-sys-color-surface: var(--md-sys-color-surface-light);
  --md-sys-color-on-surface: var(--md-sys-color-on-surface-light);
  --md-sys-color-surface-variant: var(--md-sys-color-surface-variant-light);
  --md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-light);
  --md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-light);
  --md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-light);
  --md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary-light);
  --md-sys-color-shadow: var(--md-sys-color-shadow-light);
  --md-sys-color-surface-tint: var(--md-sys-color-surface-tint-light);
  --md-sys-color-outline-variant: var(--md-sys-color-outline-variant-light);
  --md-sys-color-scrim: var(--md-sys-color-scrim-light);
}

:root[theme=dark] {
  color-scheme: dark;
  --md-sys-color-primary: var(--md-sys-color-primary-dark);
  --md-sys-color-on-primary: var(--md-sys-color-on-primary-dark);
  --md-sys-color-primary-container: var(--md-sys-color-primary-container-dark);
  --md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-dark);
  --md-sys-color-secondary: var(--md-sys-color-secondary-dark);
  --md-sys-color-on-secondary: var(--md-sys-color-on-secondary-dark);
  --md-sys-color-secondary-container: var(--md-sys-color-secondary-container-dark);
  --md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-dark);
  --md-sys-color-tertiary: var(--md-sys-color-tertiary-dark);
  --md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-dark);
  --md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-dark);
  --md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-dark);
  --md-sys-color-error: var(--md-sys-color-error-dark);
  --md-sys-color-on-error: var(--md-sys-color-on-error-dark);
  --md-sys-color-error-container: var(--md-sys-color-error-container-dark);
  --md-sys-color-on-error-container: var(--md-sys-color-on-error-container-dark);
  --md-sys-color-outline: var(--md-sys-color-outline-dark);
  --md-sys-color-background: var(--md-sys-color-background-dark);
  --md-sys-color-on-background: var(--md-sys-color-on-background-dark);
  --md-sys-color-surface: var(--md-sys-color-surface-dark);
  --md-sys-color-on-surface: var(--md-sys-color-on-surface-dark);
  --md-sys-color-surface-variant: var(--md-sys-color-surface-variant-dark);
  --md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-dark);
  --md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-dark);
  --md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-dark);
  --md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary-dark);
  --md-sys-color-shadow: var(--md-sys-color-shadow-dark);
  --md-sys-color-surface-tint: var(--md-sys-color-surface-tint-dark);
  --md-sys-color-outline-variant: var(--md-sys-color-outline-variant-dark);
  --md-sys-color-scrim: var(--md-sys-color-scrim-dark);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.primary-text {
  color: var(--md-sys-color-primary);
}

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

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

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

.primary-container-text {
  color: var(--md-sys-color-primary-container);
}

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

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

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

.secondary-text {
  color: var(--md-sys-color-secondary);
}

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

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

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

.secondary-container-text {
  color: var(--md-sys-color-secondary-container);
}

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

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

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

.tertiary-text {
  color: var(--md-sys-color-tertiary);
}

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

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

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

.tertiary-container-text {
  color: var(--md-sys-color-tertiary-container);
}

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

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

.error {
  background-color: var(--md-sys-color-error);
}

.error-text {
  color: var(--md-sys-color-error);
}

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

.on-error-text {
  color: var(--md-sys-color-on-error);
}

.error-container {
  background-color: var(--md-sys-color-error-container);
}

.error-container-text {
  color: var(--md-sys-color-error-container);
}

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

.on-error-container-text {
  color: var(--md-sys-color-on-error-container);
}

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

.background-text {
  color: var(--md-sys-color-background);
}

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

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

.surface {
  background-color: var(--md-sys-color-surface);
}

.surface-text {
  color: var(--md-sys-color-surface);
}

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

.on-surface-text {
  color: var(--md-sys-color-on-surface);
}

.surface-variant {
  background-color: var(--md-sys-color-surface-variant);
}

.surface-variant-text {
  color: var(--md-sys-color-surface-variant);
}

.on-surface-variant {
  background-color: var(--md-sys-color-on-surface-variant);
}

.on-surface-variant-text {
  color: var(--md-sys-color-on-surface-variant);
}

.outline {
  background-color: var(--md-sys-color-outline);
}

.outline-text {
  color: var(--md-sys-color-outline);
}

.inverse-on-surface {
  background-color: var(--md-sys-color-inverse-on-surface);
}

.inverse-on-surface-text {
  color: var(--md-sys-color-inverse-on-surface);
}

.inverse-surface {
  background-color: var(--md-sys-color-inverse-surface);
}

.inverse-surface-text {
  color: var(--md-sys-color-inverse-surface);
}

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

.inverse-primary-text {
  color: var(--md-sys-color-inverse-primary);
}

.shadow {
  background-color: var(--md-sys-color-shadow);
}

.shadow-text {
  color: var(--md-sys-color-shadow);
}

.surface-tint {
  background-color: var(--md-sys-color-surface-tint);
}

.surface-tint-text {
  color: var(--md-sys-color-surface-tint);
}

.outline-variant {
  background-color: var(--md-sys-color-outline-variant);
}

.outline-variant-text {
  color: var(--md-sys-color-outline-variant);
}

.scrim {
  background-color: var(--md-sys-color-scrim);
}

.scrim-text {
  color: var(--md-sys-color-scrim);
}

.materialize-red {
  background-color: #e51c23 !important;
}

.materialize-red-text {
  color: #e51c23 !important;
}

.materialize-red-border {
  border-color: #e51c23 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-materialize-red {
    background-color: #e51c23 !important;
  }
  .light-mode-materialize-red-text {
    color: #e51c23 !important;
  }
  .light-mode-materialize-red-border {
    border-color: #e51c23 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-materialize-red {
    background-color: #e51c23 !important;
  }
  .dark-mode-materialize-red-text {
    color: #e51c23 !important;
  }
  .dark-mode-materialize-red-border {
    border-color: #e51c23 !important;
  }
}
.materialize-red.lighten-5 {
  background-color: #fdeaeb !important;
}

.materialize-red-text.text-lighten-5 {
  color: #fdeaeb !important;
}

.materialize-red-border.border-lighten-5 {
  border-color: #fdeaeb !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-materialize-red.lighten-5-light-mode {
    background-color: #fdeaeb !important;
  }
  .light-mode-materialize-red-text.text-lighten-5-light-mode {
    color: #fdeaeb !important;
  }
  .light-mode-materialize-red-border.border-lighten-5-light-mode {
    border-color: #fdeaeb !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-materialize-red.lighten-5-dark-mode {
    background-color: #fdeaeb !important;
  }
  .dark-mode-materialize-red-text.text-lighten-5-dark-mode {
    color: #fdeaeb !important;
  }
  .dark-mode-materialize-red-border.border-lighten-5-dark-mode {
    border-color: #fdeaeb !important;
  }
}
.materialize-red.lighten-4 {
  background-color: #f8c1c3 !important;
}

.materialize-red-text.text-lighten-4 {
  color: #f8c1c3 !important;
}

.materialize-red-border.border-lighten-4 {
  border-color: #f8c1c3 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-materialize-red.lighten-4-light-mode {
    background-color: #f8c1c3 !important;
  }
  .light-mode-materialize-red-text.text-lighten-4-light-mode {
    color: #f8c1c3 !important;
  }
  .light-mode-materialize-red-border.border-lighten-4-light-mode {
    border-color: #f8c1c3 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-materialize-red.lighten-4-dark-mode {
    background-color: #f8c1c3 !important;
  }
  .dark-mode-materialize-red-text.text-lighten-4-dark-mode {
    color: #f8c1c3 !important;
  }
  .dark-mode-materialize-red-border.border-lighten-4-dark-mode {
    border-color: #f8c1c3 !important;
  }
}
.materialize-red.lighten-3 {
  background-color: #f3989b !important;
}

.materialize-red-text.text-lighten-3 {
  color: #f3989b !important;
}

.materialize-red-border.border-lighten-3 {
  border-color: #f3989b !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-materialize-red.lighten-3-light-mode {
    background-color: #f3989b !important;
  }
  .light-mode-materialize-red-text.text-lighten-3-light-mode {
    color: #f3989b !important;
  }
  .light-mode-materialize-red-border.border-lighten-3-light-mode {
    border-color: #f3989b !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-materialize-red.lighten-3-dark-mode {
    background-color: #f3989b !important;
  }
  .dark-mode-materialize-red-text.text-lighten-3-dark-mode {
    color: #f3989b !important;
  }
  .dark-mode-materialize-red-border.border-lighten-3-dark-mode {
    border-color: #f3989b !important;
  }
}
.materialize-red.lighten-2 {
  background-color: #ee6e73 !important;
}

.materialize-red-text.text-lighten-2 {
  color: #ee6e73 !important;
}

.materialize-red-border.border-lighten-2 {
  border-color: #ee6e73 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-materialize-red.lighten-2-light-mode {
    background-color: #ee6e73 !important;
  }
  .light-mode-materialize-red-text.text-lighten-2-light-mode {
    color: #ee6e73 !important;
  }
  .light-mode-materialize-red-border.border-lighten-2-light-mode {
    border-color: #ee6e73 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-materialize-red.lighten-2-dark-mode {
    background-color: #ee6e73 !important;
  }
  .dark-mode-materialize-red-text.text-lighten-2-dark-mode {
    color: #ee6e73 !important;
  }
  .dark-mode-materialize-red-border.border-lighten-2-dark-mode {
    border-color: #ee6e73 !important;
  }
}
.materialize-red.lighten-1 {
  background-color: #ea454b !important;
}

.materialize-red-text.text-lighten-1 {
  color: #ea454b !important;
}

.materialize-red-border.border-lighten-1 {
  border-color: #ea454b !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-materialize-red.lighten-1-light-mode {
    background-color: #ea454b !important;
  }
  .light-mode-materialize-red-text.text-lighten-1-light-mode {
    color: #ea454b !important;
  }
  .light-mode-materialize-red-border.border-lighten-1-light-mode {
    border-color: #ea454b !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-materialize-red.lighten-1-dark-mode {
    background-color: #ea454b !important;
  }
  .dark-mode-materialize-red-text.text-lighten-1-dark-mode {
    color: #ea454b !important;
  }
  .dark-mode-materialize-red-border.border-lighten-1-dark-mode {
    border-color: #ea454b !important;
  }
}
.materialize-red.darken-1 {
  background-color: #d0181e !important;
}

.materialize-red-text.text-darken-1 {
  color: #d0181e !important;
}

.materialize-red-border.border-darken-1 {
  border-color: #d0181e !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-materialize-red.darken-1-light-mode {
    background-color: #d0181e !important;
  }
  .light-mode-materialize-red-text.text-darken-1-light-mode {
    color: #d0181e !important;
  }
  .light-mode-materialize-red-border.border-darken-1-light-mode {
    border-color: #d0181e !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-materialize-red.darken-1-dark-mode {
    background-color: #d0181e !important;
  }
  .dark-mode-materialize-red-text.text-darken-1-dark-mode {
    color: #d0181e !important;
  }
  .dark-mode-materialize-red-border.border-darken-1-dark-mode {
    border-color: #d0181e !important;
  }
}
.materialize-red.darken-2 {
  background-color: #b9151b !important;
}

.materialize-red-text.text-darken-2 {
  color: #b9151b !important;
}

.materialize-red-border.border-darken-2 {
  border-color: #b9151b !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-materialize-red.darken-2-light-mode {
    background-color: #b9151b !important;
  }
  .light-mode-materialize-red-text.text-darken-2-light-mode {
    color: #b9151b !important;
  }
  .light-mode-materialize-red-border.border-darken-2-light-mode {
    border-color: #b9151b !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-materialize-red.darken-2-dark-mode {
    background-color: #b9151b !important;
  }
  .dark-mode-materialize-red-text.text-darken-2-dark-mode {
    color: #b9151b !important;
  }
  .dark-mode-materialize-red-border.border-darken-2-dark-mode {
    border-color: #b9151b !important;
  }
}
.materialize-red.darken-3 {
  background-color: #a21318 !important;
}

.materialize-red-text.text-darken-3 {
  color: #a21318 !important;
}

.materialize-red-border.border-darken-3 {
  border-color: #a21318 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-materialize-red.darken-3-light-mode {
    background-color: #a21318 !important;
  }
  .light-mode-materialize-red-text.text-darken-3-light-mode {
    color: #a21318 !important;
  }
  .light-mode-materialize-red-border.border-darken-3-light-mode {
    border-color: #a21318 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-materialize-red.darken-3-dark-mode {
    background-color: #a21318 !important;
  }
  .dark-mode-materialize-red-text.text-darken-3-dark-mode {
    color: #a21318 !important;
  }
  .dark-mode-materialize-red-border.border-darken-3-dark-mode {
    border-color: #a21318 !important;
  }
}
.materialize-red.darken-4 {
  background-color: #8b1014 !important;
}

.materialize-red-text.text-darken-4 {
  color: #8b1014 !important;
}

.materialize-red-border.border-darken-4 {
  border-color: #8b1014 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-materialize-red.darken-4-light-mode {
    background-color: #8b1014 !important;
  }
  .light-mode-materialize-red-text.text-darken-4-light-mode {
    color: #8b1014 !important;
  }
  .light-mode-materialize-red-border.border-darken-4-light-mode {
    border-color: #8b1014 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-materialize-red.darken-4-dark-mode {
    background-color: #8b1014 !important;
  }
  .dark-mode-materialize-red-text.text-darken-4-dark-mode {
    color: #8b1014 !important;
  }
  .dark-mode-materialize-red-border.border-darken-4-dark-mode {
    border-color: #8b1014 !important;
  }
}
.red {
  background-color: #F44336 !important;
}

.red-text {
  color: #F44336 !important;
}

.red-border {
  border-color: #F44336 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-red {
    background-color: #F44336 !important;
  }
  .light-mode-red-text {
    color: #F44336 !important;
  }
  .light-mode-red-border {
    border-color: #F44336 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-red {
    background-color: #F44336 !important;
  }
  .dark-mode-red-text {
    color: #F44336 !important;
  }
  .dark-mode-red-border {
    border-color: #F44336 !important;
  }
}
.red.lighten-5 {
  background-color: #FFEBEE !important;
}

.red-text.text-lighten-5 {
  color: #FFEBEE !important;
}

.red-border.border-lighten-5 {
  border-color: #FFEBEE !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-red.lighten-5-light-mode {
    background-color: #FFEBEE !important;
  }
  .light-mode-red-text.text-lighten-5-light-mode {
    color: #FFEBEE !important;
  }
  .light-mode-red-border.border-lighten-5-light-mode {
    border-color: #FFEBEE !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-red.lighten-5-dark-mode {
    background-color: #FFEBEE !important;
  }
  .dark-mode-red-text.text-lighten-5-dark-mode {
    color: #FFEBEE !important;
  }
  .dark-mode-red-border.border-lighten-5-dark-mode {
    border-color: #FFEBEE !important;
  }
}
.red.lighten-4 {
  background-color: #FFCDD2 !important;
}

.red-text.text-lighten-4 {
  color: #FFCDD2 !important;
}

.red-border.border-lighten-4 {
  border-color: #FFCDD2 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-red.lighten-4-light-mode {
    background-color: #FFCDD2 !important;
  }
  .light-mode-red-text.text-lighten-4-light-mode {
    color: #FFCDD2 !important;
  }
  .light-mode-red-border.border-lighten-4-light-mode {
    border-color: #FFCDD2 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-red.lighten-4-dark-mode {
    background-color: #FFCDD2 !important;
  }
  .dark-mode-red-text.text-lighten-4-dark-mode {
    color: #FFCDD2 !important;
  }
  .dark-mode-red-border.border-lighten-4-dark-mode {
    border-color: #FFCDD2 !important;
  }
}
.red.lighten-3 {
  background-color: #EF9A9A !important;
}

.red-text.text-lighten-3 {
  color: #EF9A9A !important;
}

.red-border.border-lighten-3 {
  border-color: #EF9A9A !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-red.lighten-3-light-mode {
    background-color: #EF9A9A !important;
  }
  .light-mode-red-text.text-lighten-3-light-mode {
    color: #EF9A9A !important;
  }
  .light-mode-red-border.border-lighten-3-light-mode {
    border-color: #EF9A9A !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-red.lighten-3-dark-mode {
    background-color: #EF9A9A !important;
  }
  .dark-mode-red-text.text-lighten-3-dark-mode {
    color: #EF9A9A !important;
  }
  .dark-mode-red-border.border-lighten-3-dark-mode {
    border-color: #EF9A9A !important;
  }
}
.red.lighten-2 {
  background-color: #E57373 !important;
}

.red-text.text-lighten-2 {
  color: #E57373 !important;
}

.red-border.border-lighten-2 {
  border-color: #E57373 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-red.lighten-2-light-mode {
    background-color: #E57373 !important;
  }
  .light-mode-red-text.text-lighten-2-light-mode {
    color: #E57373 !important;
  }
  .light-mode-red-border.border-lighten-2-light-mode {
    border-color: #E57373 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-red.lighten-2-dark-mode {
    background-color: #E57373 !important;
  }
  .dark-mode-red-text.text-lighten-2-dark-mode {
    color: #E57373 !important;
  }
  .dark-mode-red-border.border-lighten-2-dark-mode {
    border-color: #E57373 !important;
  }
}
.red.lighten-1 {
  background-color: #EF5350 !important;
}

.red-text.text-lighten-1 {
  color: #EF5350 !important;
}

.red-border.border-lighten-1 {
  border-color: #EF5350 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-red.lighten-1-light-mode {
    background-color: #EF5350 !important;
  }
  .light-mode-red-text.text-lighten-1-light-mode {
    color: #EF5350 !important;
  }
  .light-mode-red-border.border-lighten-1-light-mode {
    border-color: #EF5350 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-red.lighten-1-dark-mode {
    background-color: #EF5350 !important;
  }
  .dark-mode-red-text.text-lighten-1-dark-mode {
    color: #EF5350 !important;
  }
  .dark-mode-red-border.border-lighten-1-dark-mode {
    border-color: #EF5350 !important;
  }
}
.red.darken-1 {
  background-color: #E53935 !important;
}

.red-text.text-darken-1 {
  color: #E53935 !important;
}

.red-border.border-darken-1 {
  border-color: #E53935 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-red.darken-1-light-mode {
    background-color: #E53935 !important;
  }
  .light-mode-red-text.text-darken-1-light-mode {
    color: #E53935 !important;
  }
  .light-mode-red-border.border-darken-1-light-mode {
    border-color: #E53935 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-red.darken-1-dark-mode {
    background-color: #E53935 !important;
  }
  .dark-mode-red-text.text-darken-1-dark-mode {
    color: #E53935 !important;
  }
  .dark-mode-red-border.border-darken-1-dark-mode {
    border-color: #E53935 !important;
  }
}
.red.darken-2 {
  background-color: #D32F2F !important;
}

.red-text.text-darken-2 {
  color: #D32F2F !important;
}

.red-border.border-darken-2 {
  border-color: #D32F2F !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-red.darken-2-light-mode {
    background-color: #D32F2F !important;
  }
  .light-mode-red-text.text-darken-2-light-mode {
    color: #D32F2F !important;
  }
  .light-mode-red-border.border-darken-2-light-mode {
    border-color: #D32F2F !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-red.darken-2-dark-mode {
    background-color: #D32F2F !important;
  }
  .dark-mode-red-text.text-darken-2-dark-mode {
    color: #D32F2F !important;
  }
  .dark-mode-red-border.border-darken-2-dark-mode {
    border-color: #D32F2F !important;
  }
}
.red.darken-3 {
  background-color: #C62828 !important;
}

.red-text.text-darken-3 {
  color: #C62828 !important;
}

.red-border.border-darken-3 {
  border-color: #C62828 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-red.darken-3-light-mode {
    background-color: #C62828 !important;
  }
  .light-mode-red-text.text-darken-3-light-mode {
    color: #C62828 !important;
  }
  .light-mode-red-border.border-darken-3-light-mode {
    border-color: #C62828 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-red.darken-3-dark-mode {
    background-color: #C62828 !important;
  }
  .dark-mode-red-text.text-darken-3-dark-mode {
    color: #C62828 !important;
  }
  .dark-mode-red-border.border-darken-3-dark-mode {
    border-color: #C62828 !important;
  }
}
.red.darken-4 {
  background-color: #B71C1C !important;
}

.red-text.text-darken-4 {
  color: #B71C1C !important;
}

.red-border.border-darken-4 {
  border-color: #B71C1C !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-red.darken-4-light-mode {
    background-color: #B71C1C !important;
  }
  .light-mode-red-text.text-darken-4-light-mode {
    color: #B71C1C !important;
  }
  .light-mode-red-border.border-darken-4-light-mode {
    border-color: #B71C1C !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-red.darken-4-dark-mode {
    background-color: #B71C1C !important;
  }
  .dark-mode-red-text.text-darken-4-dark-mode {
    color: #B71C1C !important;
  }
  .dark-mode-red-border.border-darken-4-dark-mode {
    border-color: #B71C1C !important;
  }
}
.red.accent-1 {
  background-color: #FF8A80 !important;
}

.red-text.text-accent-1 {
  color: #FF8A80 !important;
}

.red-border.border-accent-1 {
  border-color: #FF8A80 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-red.accent-1-light-mode {
    background-color: #FF8A80 !important;
  }
  .light-mode-red-text.text-accent-1-light-mode {
    color: #FF8A80 !important;
  }
  .light-mode-red-border.border-accent-1-light-mode {
    border-color: #FF8A80 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-red.accent-1-dark-mode {
    background-color: #FF8A80 !important;
  }
  .dark-mode-red-text.text-accent-1-dark-mode {
    color: #FF8A80 !important;
  }
  .dark-mode-red-border.border-accent-1-dark-mode {
    border-color: #FF8A80 !important;
  }
}
.red.accent-2 {
  background-color: #FF5252 !important;
}

.red-text.text-accent-2 {
  color: #FF5252 !important;
}

.red-border.border-accent-2 {
  border-color: #FF5252 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-red.accent-2-light-mode {
    background-color: #FF5252 !important;
  }
  .light-mode-red-text.text-accent-2-light-mode {
    color: #FF5252 !important;
  }
  .light-mode-red-border.border-accent-2-light-mode {
    border-color: #FF5252 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-red.accent-2-dark-mode {
    background-color: #FF5252 !important;
  }
  .dark-mode-red-text.text-accent-2-dark-mode {
    color: #FF5252 !important;
  }
  .dark-mode-red-border.border-accent-2-dark-mode {
    border-color: #FF5252 !important;
  }
}
.red.accent-3 {
  background-color: #FF1744 !important;
}

.red-text.text-accent-3 {
  color: #FF1744 !important;
}

.red-border.border-accent-3 {
  border-color: #FF1744 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-red.accent-3-light-mode {
    background-color: #FF1744 !important;
  }
  .light-mode-red-text.text-accent-3-light-mode {
    color: #FF1744 !important;
  }
  .light-mode-red-border.border-accent-3-light-mode {
    border-color: #FF1744 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-red.accent-3-dark-mode {
    background-color: #FF1744 !important;
  }
  .dark-mode-red-text.text-accent-3-dark-mode {
    color: #FF1744 !important;
  }
  .dark-mode-red-border.border-accent-3-dark-mode {
    border-color: #FF1744 !important;
  }
}
.red.accent-4 {
  background-color: #D50000 !important;
}

.red-text.text-accent-4 {
  color: #D50000 !important;
}

.red-border.border-accent-4 {
  border-color: #D50000 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-red.accent-4-light-mode {
    background-color: #D50000 !important;
  }
  .light-mode-red-text.text-accent-4-light-mode {
    color: #D50000 !important;
  }
  .light-mode-red-border.border-accent-4-light-mode {
    border-color: #D50000 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-red.accent-4-dark-mode {
    background-color: #D50000 !important;
  }
  .dark-mode-red-text.text-accent-4-dark-mode {
    color: #D50000 !important;
  }
  .dark-mode-red-border.border-accent-4-dark-mode {
    border-color: #D50000 !important;
  }
}
.pink {
  background-color: #e91e63 !important;
}

.pink-text {
  color: #e91e63 !important;
}

.pink-border {
  border-color: #e91e63 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-pink {
    background-color: #e91e63 !important;
  }
  .light-mode-pink-text {
    color: #e91e63 !important;
  }
  .light-mode-pink-border {
    border-color: #e91e63 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-pink {
    background-color: #e91e63 !important;
  }
  .dark-mode-pink-text {
    color: #e91e63 !important;
  }
  .dark-mode-pink-border {
    border-color: #e91e63 !important;
  }
}
.pink.lighten-5 {
  background-color: #fce4ec !important;
}

.pink-text.text-lighten-5 {
  color: #fce4ec !important;
}

.pink-border.border-lighten-5 {
  border-color: #fce4ec !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-pink.lighten-5-light-mode {
    background-color: #fce4ec !important;
  }
  .light-mode-pink-text.text-lighten-5-light-mode {
    color: #fce4ec !important;
  }
  .light-mode-pink-border.border-lighten-5-light-mode {
    border-color: #fce4ec !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-pink.lighten-5-dark-mode {
    background-color: #fce4ec !important;
  }
  .dark-mode-pink-text.text-lighten-5-dark-mode {
    color: #fce4ec !important;
  }
  .dark-mode-pink-border.border-lighten-5-dark-mode {
    border-color: #fce4ec !important;
  }
}
.pink.lighten-4 {
  background-color: #f8bbd0 !important;
}

.pink-text.text-lighten-4 {
  color: #f8bbd0 !important;
}

.pink-border.border-lighten-4 {
  border-color: #f8bbd0 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-pink.lighten-4-light-mode {
    background-color: #f8bbd0 !important;
  }
  .light-mode-pink-text.text-lighten-4-light-mode {
    color: #f8bbd0 !important;
  }
  .light-mode-pink-border.border-lighten-4-light-mode {
    border-color: #f8bbd0 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-pink.lighten-4-dark-mode {
    background-color: #f8bbd0 !important;
  }
  .dark-mode-pink-text.text-lighten-4-dark-mode {
    color: #f8bbd0 !important;
  }
  .dark-mode-pink-border.border-lighten-4-dark-mode {
    border-color: #f8bbd0 !important;
  }
}
.pink.lighten-3 {
  background-color: #f48fb1 !important;
}

.pink-text.text-lighten-3 {
  color: #f48fb1 !important;
}

.pink-border.border-lighten-3 {
  border-color: #f48fb1 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-pink.lighten-3-light-mode {
    background-color: #f48fb1 !important;
  }
  .light-mode-pink-text.text-lighten-3-light-mode {
    color: #f48fb1 !important;
  }
  .light-mode-pink-border.border-lighten-3-light-mode {
    border-color: #f48fb1 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-pink.lighten-3-dark-mode {
    background-color: #f48fb1 !important;
  }
  .dark-mode-pink-text.text-lighten-3-dark-mode {
    color: #f48fb1 !important;
  }
  .dark-mode-pink-border.border-lighten-3-dark-mode {
    border-color: #f48fb1 !important;
  }
}
.pink.lighten-2 {
  background-color: #f06292 !important;
}

.pink-text.text-lighten-2 {
  color: #f06292 !important;
}

.pink-border.border-lighten-2 {
  border-color: #f06292 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-pink.lighten-2-light-mode {
    background-color: #f06292 !important;
  }
  .light-mode-pink-text.text-lighten-2-light-mode {
    color: #f06292 !important;
  }
  .light-mode-pink-border.border-lighten-2-light-mode {
    border-color: #f06292 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-pink.lighten-2-dark-mode {
    background-color: #f06292 !important;
  }
  .dark-mode-pink-text.text-lighten-2-dark-mode {
    color: #f06292 !important;
  }
  .dark-mode-pink-border.border-lighten-2-dark-mode {
    border-color: #f06292 !important;
  }
}
.pink.lighten-1 {
  background-color: #ec407a !important;
}

.pink-text.text-lighten-1 {
  color: #ec407a !important;
}

.pink-border.border-lighten-1 {
  border-color: #ec407a !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-pink.lighten-1-light-mode {
    background-color: #ec407a !important;
  }
  .light-mode-pink-text.text-lighten-1-light-mode {
    color: #ec407a !important;
  }
  .light-mode-pink-border.border-lighten-1-light-mode {
    border-color: #ec407a !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-pink.lighten-1-dark-mode {
    background-color: #ec407a !important;
  }
  .dark-mode-pink-text.text-lighten-1-dark-mode {
    color: #ec407a !important;
  }
  .dark-mode-pink-border.border-lighten-1-dark-mode {
    border-color: #ec407a !important;
  }
}
.pink.darken-1 {
  background-color: #d81b60 !important;
}

.pink-text.text-darken-1 {
  color: #d81b60 !important;
}

.pink-border.border-darken-1 {
  border-color: #d81b60 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-pink.darken-1-light-mode {
    background-color: #d81b60 !important;
  }
  .light-mode-pink-text.text-darken-1-light-mode {
    color: #d81b60 !important;
  }
  .light-mode-pink-border.border-darken-1-light-mode {
    border-color: #d81b60 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-pink.darken-1-dark-mode {
    background-color: #d81b60 !important;
  }
  .dark-mode-pink-text.text-darken-1-dark-mode {
    color: #d81b60 !important;
  }
  .dark-mode-pink-border.border-darken-1-dark-mode {
    border-color: #d81b60 !important;
  }
}
.pink.darken-2 {
  background-color: #c2185b !important;
}

.pink-text.text-darken-2 {
  color: #c2185b !important;
}

.pink-border.border-darken-2 {
  border-color: #c2185b !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-pink.darken-2-light-mode {
    background-color: #c2185b !important;
  }
  .light-mode-pink-text.text-darken-2-light-mode {
    color: #c2185b !important;
  }
  .light-mode-pink-border.border-darken-2-light-mode {
    border-color: #c2185b !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-pink.darken-2-dark-mode {
    background-color: #c2185b !important;
  }
  .dark-mode-pink-text.text-darken-2-dark-mode {
    color: #c2185b !important;
  }
  .dark-mode-pink-border.border-darken-2-dark-mode {
    border-color: #c2185b !important;
  }
}
.pink.darken-3 {
  background-color: #ad1457 !important;
}

.pink-text.text-darken-3 {
  color: #ad1457 !important;
}

.pink-border.border-darken-3 {
  border-color: #ad1457 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-pink.darken-3-light-mode {
    background-color: #ad1457 !important;
  }
  .light-mode-pink-text.text-darken-3-light-mode {
    color: #ad1457 !important;
  }
  .light-mode-pink-border.border-darken-3-light-mode {
    border-color: #ad1457 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-pink.darken-3-dark-mode {
    background-color: #ad1457 !important;
  }
  .dark-mode-pink-text.text-darken-3-dark-mode {
    color: #ad1457 !important;
  }
  .dark-mode-pink-border.border-darken-3-dark-mode {
    border-color: #ad1457 !important;
  }
}
.pink.darken-4 {
  background-color: #880e4f !important;
}

.pink-text.text-darken-4 {
  color: #880e4f !important;
}

.pink-border.border-darken-4 {
  border-color: #880e4f !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-pink.darken-4-light-mode {
    background-color: #880e4f !important;
  }
  .light-mode-pink-text.text-darken-4-light-mode {
    color: #880e4f !important;
  }
  .light-mode-pink-border.border-darken-4-light-mode {
    border-color: #880e4f !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-pink.darken-4-dark-mode {
    background-color: #880e4f !important;
  }
  .dark-mode-pink-text.text-darken-4-dark-mode {
    color: #880e4f !important;
  }
  .dark-mode-pink-border.border-darken-4-dark-mode {
    border-color: #880e4f !important;
  }
}
.pink.accent-1 {
  background-color: #ff80ab !important;
}

.pink-text.text-accent-1 {
  color: #ff80ab !important;
}

.pink-border.border-accent-1 {
  border-color: #ff80ab !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-pink.accent-1-light-mode {
    background-color: #ff80ab !important;
  }
  .light-mode-pink-text.text-accent-1-light-mode {
    color: #ff80ab !important;
  }
  .light-mode-pink-border.border-accent-1-light-mode {
    border-color: #ff80ab !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-pink.accent-1-dark-mode {
    background-color: #ff80ab !important;
  }
  .dark-mode-pink-text.text-accent-1-dark-mode {
    color: #ff80ab !important;
  }
  .dark-mode-pink-border.border-accent-1-dark-mode {
    border-color: #ff80ab !important;
  }
}
.pink.accent-2 {
  background-color: #ff4081 !important;
}

.pink-text.text-accent-2 {
  color: #ff4081 !important;
}

.pink-border.border-accent-2 {
  border-color: #ff4081 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-pink.accent-2-light-mode {
    background-color: #ff4081 !important;
  }
  .light-mode-pink-text.text-accent-2-light-mode {
    color: #ff4081 !important;
  }
  .light-mode-pink-border.border-accent-2-light-mode {
    border-color: #ff4081 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-pink.accent-2-dark-mode {
    background-color: #ff4081 !important;
  }
  .dark-mode-pink-text.text-accent-2-dark-mode {
    color: #ff4081 !important;
  }
  .dark-mode-pink-border.border-accent-2-dark-mode {
    border-color: #ff4081 !important;
  }
}
.pink.accent-3 {
  background-color: #f50057 !important;
}

.pink-text.text-accent-3 {
  color: #f50057 !important;
}

.pink-border.border-accent-3 {
  border-color: #f50057 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-pink.accent-3-light-mode {
    background-color: #f50057 !important;
  }
  .light-mode-pink-text.text-accent-3-light-mode {
    color: #f50057 !important;
  }
  .light-mode-pink-border.border-accent-3-light-mode {
    border-color: #f50057 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-pink.accent-3-dark-mode {
    background-color: #f50057 !important;
  }
  .dark-mode-pink-text.text-accent-3-dark-mode {
    color: #f50057 !important;
  }
  .dark-mode-pink-border.border-accent-3-dark-mode {
    border-color: #f50057 !important;
  }
}
.pink.accent-4 {
  background-color: #c51162 !important;
}

.pink-text.text-accent-4 {
  color: #c51162 !important;
}

.pink-border.border-accent-4 {
  border-color: #c51162 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-pink.accent-4-light-mode {
    background-color: #c51162 !important;
  }
  .light-mode-pink-text.text-accent-4-light-mode {
    color: #c51162 !important;
  }
  .light-mode-pink-border.border-accent-4-light-mode {
    border-color: #c51162 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-pink.accent-4-dark-mode {
    background-color: #c51162 !important;
  }
  .dark-mode-pink-text.text-accent-4-dark-mode {
    color: #c51162 !important;
  }
  .dark-mode-pink-border.border-accent-4-dark-mode {
    border-color: #c51162 !important;
  }
}
.purple {
  background-color: #9c27b0 !important;
}

.purple-text {
  color: #9c27b0 !important;
}

.purple-border {
  border-color: #9c27b0 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-purple {
    background-color: #9c27b0 !important;
  }
  .light-mode-purple-text {
    color: #9c27b0 !important;
  }
  .light-mode-purple-border {
    border-color: #9c27b0 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-purple {
    background-color: #9c27b0 !important;
  }
  .dark-mode-purple-text {
    color: #9c27b0 !important;
  }
  .dark-mode-purple-border {
    border-color: #9c27b0 !important;
  }
}
.purple.lighten-5 {
  background-color: #f3e5f5 !important;
}

.purple-text.text-lighten-5 {
  color: #f3e5f5 !important;
}

.purple-border.border-lighten-5 {
  border-color: #f3e5f5 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-purple.lighten-5-light-mode {
    background-color: #f3e5f5 !important;
  }
  .light-mode-purple-text.text-lighten-5-light-mode {
    color: #f3e5f5 !important;
  }
  .light-mode-purple-border.border-lighten-5-light-mode {
    border-color: #f3e5f5 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-purple.lighten-5-dark-mode {
    background-color: #f3e5f5 !important;
  }
  .dark-mode-purple-text.text-lighten-5-dark-mode {
    color: #f3e5f5 !important;
  }
  .dark-mode-purple-border.border-lighten-5-dark-mode {
    border-color: #f3e5f5 !important;
  }
}
.purple.lighten-4 {
  background-color: #e1bee7 !important;
}

.purple-text.text-lighten-4 {
  color: #e1bee7 !important;
}

.purple-border.border-lighten-4 {
  border-color: #e1bee7 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-purple.lighten-4-light-mode {
    background-color: #e1bee7 !important;
  }
  .light-mode-purple-text.text-lighten-4-light-mode {
    color: #e1bee7 !important;
  }
  .light-mode-purple-border.border-lighten-4-light-mode {
    border-color: #e1bee7 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-purple.lighten-4-dark-mode {
    background-color: #e1bee7 !important;
  }
  .dark-mode-purple-text.text-lighten-4-dark-mode {
    color: #e1bee7 !important;
  }
  .dark-mode-purple-border.border-lighten-4-dark-mode {
    border-color: #e1bee7 !important;
  }
}
.purple.lighten-3 {
  background-color: #ce93d8 !important;
}

.purple-text.text-lighten-3 {
  color: #ce93d8 !important;
}

.purple-border.border-lighten-3 {
  border-color: #ce93d8 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-purple.lighten-3-light-mode {
    background-color: #ce93d8 !important;
  }
  .light-mode-purple-text.text-lighten-3-light-mode {
    color: #ce93d8 !important;
  }
  .light-mode-purple-border.border-lighten-3-light-mode {
    border-color: #ce93d8 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-purple.lighten-3-dark-mode {
    background-color: #ce93d8 !important;
  }
  .dark-mode-purple-text.text-lighten-3-dark-mode {
    color: #ce93d8 !important;
  }
  .dark-mode-purple-border.border-lighten-3-dark-mode {
    border-color: #ce93d8 !important;
  }
}
.purple.lighten-2 {
  background-color: #ba68c8 !important;
}

.purple-text.text-lighten-2 {
  color: #ba68c8 !important;
}

.purple-border.border-lighten-2 {
  border-color: #ba68c8 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-purple.lighten-2-light-mode {
    background-color: #ba68c8 !important;
  }
  .light-mode-purple-text.text-lighten-2-light-mode {
    color: #ba68c8 !important;
  }
  .light-mode-purple-border.border-lighten-2-light-mode {
    border-color: #ba68c8 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-purple.lighten-2-dark-mode {
    background-color: #ba68c8 !important;
  }
  .dark-mode-purple-text.text-lighten-2-dark-mode {
    color: #ba68c8 !important;
  }
  .dark-mode-purple-border.border-lighten-2-dark-mode {
    border-color: #ba68c8 !important;
  }
}
.purple.lighten-1 {
  background-color: #ab47bc !important;
}

.purple-text.text-lighten-1 {
  color: #ab47bc !important;
}

.purple-border.border-lighten-1 {
  border-color: #ab47bc !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-purple.lighten-1-light-mode {
    background-color: #ab47bc !important;
  }
  .light-mode-purple-text.text-lighten-1-light-mode {
    color: #ab47bc !important;
  }
  .light-mode-purple-border.border-lighten-1-light-mode {
    border-color: #ab47bc !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-purple.lighten-1-dark-mode {
    background-color: #ab47bc !important;
  }
  .dark-mode-purple-text.text-lighten-1-dark-mode {
    color: #ab47bc !important;
  }
  .dark-mode-purple-border.border-lighten-1-dark-mode {
    border-color: #ab47bc !important;
  }
}
.purple.darken-1 {
  background-color: #8e24aa !important;
}

.purple-text.text-darken-1 {
  color: #8e24aa !important;
}

.purple-border.border-darken-1 {
  border-color: #8e24aa !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-purple.darken-1-light-mode {
    background-color: #8e24aa !important;
  }
  .light-mode-purple-text.text-darken-1-light-mode {
    color: #8e24aa !important;
  }
  .light-mode-purple-border.border-darken-1-light-mode {
    border-color: #8e24aa !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-purple.darken-1-dark-mode {
    background-color: #8e24aa !important;
  }
  .dark-mode-purple-text.text-darken-1-dark-mode {
    color: #8e24aa !important;
  }
  .dark-mode-purple-border.border-darken-1-dark-mode {
    border-color: #8e24aa !important;
  }
}
.purple.darken-2 {
  background-color: #7b1fa2 !important;
}

.purple-text.text-darken-2 {
  color: #7b1fa2 !important;
}

.purple-border.border-darken-2 {
  border-color: #7b1fa2 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-purple.darken-2-light-mode {
    background-color: #7b1fa2 !important;
  }
  .light-mode-purple-text.text-darken-2-light-mode {
    color: #7b1fa2 !important;
  }
  .light-mode-purple-border.border-darken-2-light-mode {
    border-color: #7b1fa2 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-purple.darken-2-dark-mode {
    background-color: #7b1fa2 !important;
  }
  .dark-mode-purple-text.text-darken-2-dark-mode {
    color: #7b1fa2 !important;
  }
  .dark-mode-purple-border.border-darken-2-dark-mode {
    border-color: #7b1fa2 !important;
  }
}
.purple.darken-3 {
  background-color: #6a1b9a !important;
}

.purple-text.text-darken-3 {
  color: #6a1b9a !important;
}

.purple-border.border-darken-3 {
  border-color: #6a1b9a !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-purple.darken-3-light-mode {
    background-color: #6a1b9a !important;
  }
  .light-mode-purple-text.text-darken-3-light-mode {
    color: #6a1b9a !important;
  }
  .light-mode-purple-border.border-darken-3-light-mode {
    border-color: #6a1b9a !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-purple.darken-3-dark-mode {
    background-color: #6a1b9a !important;
  }
  .dark-mode-purple-text.text-darken-3-dark-mode {
    color: #6a1b9a !important;
  }
  .dark-mode-purple-border.border-darken-3-dark-mode {
    border-color: #6a1b9a !important;
  }
}
.purple.darken-4 {
  background-color: #4a148c !important;
}

.purple-text.text-darken-4 {
  color: #4a148c !important;
}

.purple-border.border-darken-4 {
  border-color: #4a148c !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-purple.darken-4-light-mode {
    background-color: #4a148c !important;
  }
  .light-mode-purple-text.text-darken-4-light-mode {
    color: #4a148c !important;
  }
  .light-mode-purple-border.border-darken-4-light-mode {
    border-color: #4a148c !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-purple.darken-4-dark-mode {
    background-color: #4a148c !important;
  }
  .dark-mode-purple-text.text-darken-4-dark-mode {
    color: #4a148c !important;
  }
  .dark-mode-purple-border.border-darken-4-dark-mode {
    border-color: #4a148c !important;
  }
}
.purple.accent-1 {
  background-color: #ea80fc !important;
}

.purple-text.text-accent-1 {
  color: #ea80fc !important;
}

.purple-border.border-accent-1 {
  border-color: #ea80fc !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-purple.accent-1-light-mode {
    background-color: #ea80fc !important;
  }
  .light-mode-purple-text.text-accent-1-light-mode {
    color: #ea80fc !important;
  }
  .light-mode-purple-border.border-accent-1-light-mode {
    border-color: #ea80fc !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-purple.accent-1-dark-mode {
    background-color: #ea80fc !important;
  }
  .dark-mode-purple-text.text-accent-1-dark-mode {
    color: #ea80fc !important;
  }
  .dark-mode-purple-border.border-accent-1-dark-mode {
    border-color: #ea80fc !important;
  }
}
.purple.accent-2 {
  background-color: #e040fb !important;
}

.purple-text.text-accent-2 {
  color: #e040fb !important;
}

.purple-border.border-accent-2 {
  border-color: #e040fb !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-purple.accent-2-light-mode {
    background-color: #e040fb !important;
  }
  .light-mode-purple-text.text-accent-2-light-mode {
    color: #e040fb !important;
  }
  .light-mode-purple-border.border-accent-2-light-mode {
    border-color: #e040fb !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-purple.accent-2-dark-mode {
    background-color: #e040fb !important;
  }
  .dark-mode-purple-text.text-accent-2-dark-mode {
    color: #e040fb !important;
  }
  .dark-mode-purple-border.border-accent-2-dark-mode {
    border-color: #e040fb !important;
  }
}
.purple.accent-3 {
  background-color: #d500f9 !important;
}

.purple-text.text-accent-3 {
  color: #d500f9 !important;
}

.purple-border.border-accent-3 {
  border-color: #d500f9 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-purple.accent-3-light-mode {
    background-color: #d500f9 !important;
  }
  .light-mode-purple-text.text-accent-3-light-mode {
    color: #d500f9 !important;
  }
  .light-mode-purple-border.border-accent-3-light-mode {
    border-color: #d500f9 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-purple.accent-3-dark-mode {
    background-color: #d500f9 !important;
  }
  .dark-mode-purple-text.text-accent-3-dark-mode {
    color: #d500f9 !important;
  }
  .dark-mode-purple-border.border-accent-3-dark-mode {
    border-color: #d500f9 !important;
  }
}
.purple.accent-4 {
  background-color: #aa00ff !important;
}

.purple-text.text-accent-4 {
  color: #aa00ff !important;
}

.purple-border.border-accent-4 {
  border-color: #aa00ff !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-purple.accent-4-light-mode {
    background-color: #aa00ff !important;
  }
  .light-mode-purple-text.text-accent-4-light-mode {
    color: #aa00ff !important;
  }
  .light-mode-purple-border.border-accent-4-light-mode {
    border-color: #aa00ff !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-purple.accent-4-dark-mode {
    background-color: #aa00ff !important;
  }
  .dark-mode-purple-text.text-accent-4-dark-mode {
    color: #aa00ff !important;
  }
  .dark-mode-purple-border.border-accent-4-dark-mode {
    border-color: #aa00ff !important;
  }
}
.deep-purple {
  background-color: #673ab7 !important;
}

.deep-purple-text {
  color: #673ab7 !important;
}

.deep-purple-border {
  border-color: #673ab7 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-deep-purple {
    background-color: #673ab7 !important;
  }
  .light-mode-deep-purple-text {
    color: #673ab7 !important;
  }
  .light-mode-deep-purple-border {
    border-color: #673ab7 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-deep-purple {
    background-color: #673ab7 !important;
  }
  .dark-mode-deep-purple-text {
    color: #673ab7 !important;
  }
  .dark-mode-deep-purple-border {
    border-color: #673ab7 !important;
  }
}
.deep-purple.lighten-5 {
  background-color: #ede7f6 !important;
}

.deep-purple-text.text-lighten-5 {
  color: #ede7f6 !important;
}

.deep-purple-border.border-lighten-5 {
  border-color: #ede7f6 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-deep-purple.lighten-5-light-mode {
    background-color: #ede7f6 !important;
  }
  .light-mode-deep-purple-text.text-lighten-5-light-mode {
    color: #ede7f6 !important;
  }
  .light-mode-deep-purple-border.border-lighten-5-light-mode {
    border-color: #ede7f6 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-deep-purple.lighten-5-dark-mode {
    background-color: #ede7f6 !important;
  }
  .dark-mode-deep-purple-text.text-lighten-5-dark-mode {
    color: #ede7f6 !important;
  }
  .dark-mode-deep-purple-border.border-lighten-5-dark-mode {
    border-color: #ede7f6 !important;
  }
}
.deep-purple.lighten-4 {
  background-color: #d1c4e9 !important;
}

.deep-purple-text.text-lighten-4 {
  color: #d1c4e9 !important;
}

.deep-purple-border.border-lighten-4 {
  border-color: #d1c4e9 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-deep-purple.lighten-4-light-mode {
    background-color: #d1c4e9 !important;
  }
  .light-mode-deep-purple-text.text-lighten-4-light-mode {
    color: #d1c4e9 !important;
  }
  .light-mode-deep-purple-border.border-lighten-4-light-mode {
    border-color: #d1c4e9 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-deep-purple.lighten-4-dark-mode {
    background-color: #d1c4e9 !important;
  }
  .dark-mode-deep-purple-text.text-lighten-4-dark-mode {
    color: #d1c4e9 !important;
  }
  .dark-mode-deep-purple-border.border-lighten-4-dark-mode {
    border-color: #d1c4e9 !important;
  }
}
.deep-purple.lighten-3 {
  background-color: #b39ddb !important;
}

.deep-purple-text.text-lighten-3 {
  color: #b39ddb !important;
}

.deep-purple-border.border-lighten-3 {
  border-color: #b39ddb !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-deep-purple.lighten-3-light-mode {
    background-color: #b39ddb !important;
  }
  .light-mode-deep-purple-text.text-lighten-3-light-mode {
    color: #b39ddb !important;
  }
  .light-mode-deep-purple-border.border-lighten-3-light-mode {
    border-color: #b39ddb !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-deep-purple.lighten-3-dark-mode {
    background-color: #b39ddb !important;
  }
  .dark-mode-deep-purple-text.text-lighten-3-dark-mode {
    color: #b39ddb !important;
  }
  .dark-mode-deep-purple-border.border-lighten-3-dark-mode {
    border-color: #b39ddb !important;
  }
}
.deep-purple.lighten-2 {
  background-color: #9575cd !important;
}

.deep-purple-text.text-lighten-2 {
  color: #9575cd !important;
}

.deep-purple-border.border-lighten-2 {
  border-color: #9575cd !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-deep-purple.lighten-2-light-mode {
    background-color: #9575cd !important;
  }
  .light-mode-deep-purple-text.text-lighten-2-light-mode {
    color: #9575cd !important;
  }
  .light-mode-deep-purple-border.border-lighten-2-light-mode {
    border-color: #9575cd !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-deep-purple.lighten-2-dark-mode {
    background-color: #9575cd !important;
  }
  .dark-mode-deep-purple-text.text-lighten-2-dark-mode {
    color: #9575cd !important;
  }
  .dark-mode-deep-purple-border.border-lighten-2-dark-mode {
    border-color: #9575cd !important;
  }
}
.deep-purple.lighten-1 {
  background-color: #7e57c2 !important;
}

.deep-purple-text.text-lighten-1 {
  color: #7e57c2 !important;
}

.deep-purple-border.border-lighten-1 {
  border-color: #7e57c2 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-deep-purple.lighten-1-light-mode {
    background-color: #7e57c2 !important;
  }
  .light-mode-deep-purple-text.text-lighten-1-light-mode {
    color: #7e57c2 !important;
  }
  .light-mode-deep-purple-border.border-lighten-1-light-mode {
    border-color: #7e57c2 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-deep-purple.lighten-1-dark-mode {
    background-color: #7e57c2 !important;
  }
  .dark-mode-deep-purple-text.text-lighten-1-dark-mode {
    color: #7e57c2 !important;
  }
  .dark-mode-deep-purple-border.border-lighten-1-dark-mode {
    border-color: #7e57c2 !important;
  }
}
.deep-purple.darken-1 {
  background-color: #5e35b1 !important;
}

.deep-purple-text.text-darken-1 {
  color: #5e35b1 !important;
}

.deep-purple-border.border-darken-1 {
  border-color: #5e35b1 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-deep-purple.darken-1-light-mode {
    background-color: #5e35b1 !important;
  }
  .light-mode-deep-purple-text.text-darken-1-light-mode {
    color: #5e35b1 !important;
  }
  .light-mode-deep-purple-border.border-darken-1-light-mode {
    border-color: #5e35b1 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-deep-purple.darken-1-dark-mode {
    background-color: #5e35b1 !important;
  }
  .dark-mode-deep-purple-text.text-darken-1-dark-mode {
    color: #5e35b1 !important;
  }
  .dark-mode-deep-purple-border.border-darken-1-dark-mode {
    border-color: #5e35b1 !important;
  }
}
.deep-purple.darken-2 {
  background-color: #512da8 !important;
}

.deep-purple-text.text-darken-2 {
  color: #512da8 !important;
}

.deep-purple-border.border-darken-2 {
  border-color: #512da8 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-deep-purple.darken-2-light-mode {
    background-color: #512da8 !important;
  }
  .light-mode-deep-purple-text.text-darken-2-light-mode {
    color: #512da8 !important;
  }
  .light-mode-deep-purple-border.border-darken-2-light-mode {
    border-color: #512da8 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-deep-purple.darken-2-dark-mode {
    background-color: #512da8 !important;
  }
  .dark-mode-deep-purple-text.text-darken-2-dark-mode {
    color: #512da8 !important;
  }
  .dark-mode-deep-purple-border.border-darken-2-dark-mode {
    border-color: #512da8 !important;
  }
}
.deep-purple.darken-3 {
  background-color: #4527a0 !important;
}

.deep-purple-text.text-darken-3 {
  color: #4527a0 !important;
}

.deep-purple-border.border-darken-3 {
  border-color: #4527a0 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-deep-purple.darken-3-light-mode {
    background-color: #4527a0 !important;
  }
  .light-mode-deep-purple-text.text-darken-3-light-mode {
    color: #4527a0 !important;
  }
  .light-mode-deep-purple-border.border-darken-3-light-mode {
    border-color: #4527a0 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-deep-purple.darken-3-dark-mode {
    background-color: #4527a0 !important;
  }
  .dark-mode-deep-purple-text.text-darken-3-dark-mode {
    color: #4527a0 !important;
  }
  .dark-mode-deep-purple-border.border-darken-3-dark-mode {
    border-color: #4527a0 !important;
  }
}
.deep-purple.darken-4 {
  background-color: #311b92 !important;
}

.deep-purple-text.text-darken-4 {
  color: #311b92 !important;
}

.deep-purple-border.border-darken-4 {
  border-color: #311b92 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-deep-purple.darken-4-light-mode {
    background-color: #311b92 !important;
  }
  .light-mode-deep-purple-text.text-darken-4-light-mode {
    color: #311b92 !important;
  }
  .light-mode-deep-purple-border.border-darken-4-light-mode {
    border-color: #311b92 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-deep-purple.darken-4-dark-mode {
    background-color: #311b92 !important;
  }
  .dark-mode-deep-purple-text.text-darken-4-dark-mode {
    color: #311b92 !important;
  }
  .dark-mode-deep-purple-border.border-darken-4-dark-mode {
    border-color: #311b92 !important;
  }
}
.deep-purple.accent-1 {
  background-color: #b388ff !important;
}

.deep-purple-text.text-accent-1 {
  color: #b388ff !important;
}

.deep-purple-border.border-accent-1 {
  border-color: #b388ff !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-deep-purple.accent-1-light-mode {
    background-color: #b388ff !important;
  }
  .light-mode-deep-purple-text.text-accent-1-light-mode {
    color: #b388ff !important;
  }
  .light-mode-deep-purple-border.border-accent-1-light-mode {
    border-color: #b388ff !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-deep-purple.accent-1-dark-mode {
    background-color: #b388ff !important;
  }
  .dark-mode-deep-purple-text.text-accent-1-dark-mode {
    color: #b388ff !important;
  }
  .dark-mode-deep-purple-border.border-accent-1-dark-mode {
    border-color: #b388ff !important;
  }
}
.deep-purple.accent-2 {
  background-color: #7c4dff !important;
}

.deep-purple-text.text-accent-2 {
  color: #7c4dff !important;
}

.deep-purple-border.border-accent-2 {
  border-color: #7c4dff !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-deep-purple.accent-2-light-mode {
    background-color: #7c4dff !important;
  }
  .light-mode-deep-purple-text.text-accent-2-light-mode {
    color: #7c4dff !important;
  }
  .light-mode-deep-purple-border.border-accent-2-light-mode {
    border-color: #7c4dff !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-deep-purple.accent-2-dark-mode {
    background-color: #7c4dff !important;
  }
  .dark-mode-deep-purple-text.text-accent-2-dark-mode {
    color: #7c4dff !important;
  }
  .dark-mode-deep-purple-border.border-accent-2-dark-mode {
    border-color: #7c4dff !important;
  }
}
.deep-purple.accent-3 {
  background-color: #651fff !important;
}

.deep-purple-text.text-accent-3 {
  color: #651fff !important;
}

.deep-purple-border.border-accent-3 {
  border-color: #651fff !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-deep-purple.accent-3-light-mode {
    background-color: #651fff !important;
  }
  .light-mode-deep-purple-text.text-accent-3-light-mode {
    color: #651fff !important;
  }
  .light-mode-deep-purple-border.border-accent-3-light-mode {
    border-color: #651fff !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-deep-purple.accent-3-dark-mode {
    background-color: #651fff !important;
  }
  .dark-mode-deep-purple-text.text-accent-3-dark-mode {
    color: #651fff !important;
  }
  .dark-mode-deep-purple-border.border-accent-3-dark-mode {
    border-color: #651fff !important;
  }
}
.deep-purple.accent-4 {
  background-color: #6200ea !important;
}

.deep-purple-text.text-accent-4 {
  color: #6200ea !important;
}

.deep-purple-border.border-accent-4 {
  border-color: #6200ea !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-deep-purple.accent-4-light-mode {
    background-color: #6200ea !important;
  }
  .light-mode-deep-purple-text.text-accent-4-light-mode {
    color: #6200ea !important;
  }
  .light-mode-deep-purple-border.border-accent-4-light-mode {
    border-color: #6200ea !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-deep-purple.accent-4-dark-mode {
    background-color: #6200ea !important;
  }
  .dark-mode-deep-purple-text.text-accent-4-dark-mode {
    color: #6200ea !important;
  }
  .dark-mode-deep-purple-border.border-accent-4-dark-mode {
    border-color: #6200ea !important;
  }
}
.indigo {
  background-color: #3f51b5 !important;
}

.indigo-text {
  color: #3f51b5 !important;
}

.indigo-border {
  border-color: #3f51b5 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-indigo {
    background-color: #3f51b5 !important;
  }
  .light-mode-indigo-text {
    color: #3f51b5 !important;
  }
  .light-mode-indigo-border {
    border-color: #3f51b5 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-indigo {
    background-color: #3f51b5 !important;
  }
  .dark-mode-indigo-text {
    color: #3f51b5 !important;
  }
  .dark-mode-indigo-border {
    border-color: #3f51b5 !important;
  }
}
.indigo.lighten-5 {
  background-color: #e8eaf6 !important;
}

.indigo-text.text-lighten-5 {
  color: #e8eaf6 !important;
}

.indigo-border.border-lighten-5 {
  border-color: #e8eaf6 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-indigo.lighten-5-light-mode {
    background-color: #e8eaf6 !important;
  }
  .light-mode-indigo-text.text-lighten-5-light-mode {
    color: #e8eaf6 !important;
  }
  .light-mode-indigo-border.border-lighten-5-light-mode {
    border-color: #e8eaf6 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-indigo.lighten-5-dark-mode {
    background-color: #e8eaf6 !important;
  }
  .dark-mode-indigo-text.text-lighten-5-dark-mode {
    color: #e8eaf6 !important;
  }
  .dark-mode-indigo-border.border-lighten-5-dark-mode {
    border-color: #e8eaf6 !important;
  }
}
.indigo.lighten-4 {
  background-color: #c5cae9 !important;
}

.indigo-text.text-lighten-4 {
  color: #c5cae9 !important;
}

.indigo-border.border-lighten-4 {
  border-color: #c5cae9 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-indigo.lighten-4-light-mode {
    background-color: #c5cae9 !important;
  }
  .light-mode-indigo-text.text-lighten-4-light-mode {
    color: #c5cae9 !important;
  }
  .light-mode-indigo-border.border-lighten-4-light-mode {
    border-color: #c5cae9 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-indigo.lighten-4-dark-mode {
    background-color: #c5cae9 !important;
  }
  .dark-mode-indigo-text.text-lighten-4-dark-mode {
    color: #c5cae9 !important;
  }
  .dark-mode-indigo-border.border-lighten-4-dark-mode {
    border-color: #c5cae9 !important;
  }
}
.indigo.lighten-3 {
  background-color: #9fa8da !important;
}

.indigo-text.text-lighten-3 {
  color: #9fa8da !important;
}

.indigo-border.border-lighten-3 {
  border-color: #9fa8da !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-indigo.lighten-3-light-mode {
    background-color: #9fa8da !important;
  }
  .light-mode-indigo-text.text-lighten-3-light-mode {
    color: #9fa8da !important;
  }
  .light-mode-indigo-border.border-lighten-3-light-mode {
    border-color: #9fa8da !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-indigo.lighten-3-dark-mode {
    background-color: #9fa8da !important;
  }
  .dark-mode-indigo-text.text-lighten-3-dark-mode {
    color: #9fa8da !important;
  }
  .dark-mode-indigo-border.border-lighten-3-dark-mode {
    border-color: #9fa8da !important;
  }
}
.indigo.lighten-2 {
  background-color: #7986cb !important;
}

.indigo-text.text-lighten-2 {
  color: #7986cb !important;
}

.indigo-border.border-lighten-2 {
  border-color: #7986cb !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-indigo.lighten-2-light-mode {
    background-color: #7986cb !important;
  }
  .light-mode-indigo-text.text-lighten-2-light-mode {
    color: #7986cb !important;
  }
  .light-mode-indigo-border.border-lighten-2-light-mode {
    border-color: #7986cb !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-indigo.lighten-2-dark-mode {
    background-color: #7986cb !important;
  }
  .dark-mode-indigo-text.text-lighten-2-dark-mode {
    color: #7986cb !important;
  }
  .dark-mode-indigo-border.border-lighten-2-dark-mode {
    border-color: #7986cb !important;
  }
}
.indigo.lighten-1 {
  background-color: #5c6bc0 !important;
}

.indigo-text.text-lighten-1 {
  color: #5c6bc0 !important;
}

.indigo-border.border-lighten-1 {
  border-color: #5c6bc0 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-indigo.lighten-1-light-mode {
    background-color: #5c6bc0 !important;
  }
  .light-mode-indigo-text.text-lighten-1-light-mode {
    color: #5c6bc0 !important;
  }
  .light-mode-indigo-border.border-lighten-1-light-mode {
    border-color: #5c6bc0 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-indigo.lighten-1-dark-mode {
    background-color: #5c6bc0 !important;
  }
  .dark-mode-indigo-text.text-lighten-1-dark-mode {
    color: #5c6bc0 !important;
  }
  .dark-mode-indigo-border.border-lighten-1-dark-mode {
    border-color: #5c6bc0 !important;
  }
}
.indigo.darken-1 {
  background-color: #3949ab !important;
}

.indigo-text.text-darken-1 {
  color: #3949ab !important;
}

.indigo-border.border-darken-1 {
  border-color: #3949ab !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-indigo.darken-1-light-mode {
    background-color: #3949ab !important;
  }
  .light-mode-indigo-text.text-darken-1-light-mode {
    color: #3949ab !important;
  }
  .light-mode-indigo-border.border-darken-1-light-mode {
    border-color: #3949ab !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-indigo.darken-1-dark-mode {
    background-color: #3949ab !important;
  }
  .dark-mode-indigo-text.text-darken-1-dark-mode {
    color: #3949ab !important;
  }
  .dark-mode-indigo-border.border-darken-1-dark-mode {
    border-color: #3949ab !important;
  }
}
.indigo.darken-2 {
  background-color: #303f9f !important;
}

.indigo-text.text-darken-2 {
  color: #303f9f !important;
}

.indigo-border.border-darken-2 {
  border-color: #303f9f !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-indigo.darken-2-light-mode {
    background-color: #303f9f !important;
  }
  .light-mode-indigo-text.text-darken-2-light-mode {
    color: #303f9f !important;
  }
  .light-mode-indigo-border.border-darken-2-light-mode {
    border-color: #303f9f !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-indigo.darken-2-dark-mode {
    background-color: #303f9f !important;
  }
  .dark-mode-indigo-text.text-darken-2-dark-mode {
    color: #303f9f !important;
  }
  .dark-mode-indigo-border.border-darken-2-dark-mode {
    border-color: #303f9f !important;
  }
}
.indigo.darken-3 {
  background-color: #283593 !important;
}

.indigo-text.text-darken-3 {
  color: #283593 !important;
}

.indigo-border.border-darken-3 {
  border-color: #283593 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-indigo.darken-3-light-mode {
    background-color: #283593 !important;
  }
  .light-mode-indigo-text.text-darken-3-light-mode {
    color: #283593 !important;
  }
  .light-mode-indigo-border.border-darken-3-light-mode {
    border-color: #283593 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-indigo.darken-3-dark-mode {
    background-color: #283593 !important;
  }
  .dark-mode-indigo-text.text-darken-3-dark-mode {
    color: #283593 !important;
  }
  .dark-mode-indigo-border.border-darken-3-dark-mode {
    border-color: #283593 !important;
  }
}
.indigo.darken-4 {
  background-color: #1a237e !important;
}

.indigo-text.text-darken-4 {
  color: #1a237e !important;
}

.indigo-border.border-darken-4 {
  border-color: #1a237e !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-indigo.darken-4-light-mode {
    background-color: #1a237e !important;
  }
  .light-mode-indigo-text.text-darken-4-light-mode {
    color: #1a237e !important;
  }
  .light-mode-indigo-border.border-darken-4-light-mode {
    border-color: #1a237e !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-indigo.darken-4-dark-mode {
    background-color: #1a237e !important;
  }
  .dark-mode-indigo-text.text-darken-4-dark-mode {
    color: #1a237e !important;
  }
  .dark-mode-indigo-border.border-darken-4-dark-mode {
    border-color: #1a237e !important;
  }
}
.indigo.accent-1 {
  background-color: #8c9eff !important;
}

.indigo-text.text-accent-1 {
  color: #8c9eff !important;
}

.indigo-border.border-accent-1 {
  border-color: #8c9eff !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-indigo.accent-1-light-mode {
    background-color: #8c9eff !important;
  }
  .light-mode-indigo-text.text-accent-1-light-mode {
    color: #8c9eff !important;
  }
  .light-mode-indigo-border.border-accent-1-light-mode {
    border-color: #8c9eff !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-indigo.accent-1-dark-mode {
    background-color: #8c9eff !important;
  }
  .dark-mode-indigo-text.text-accent-1-dark-mode {
    color: #8c9eff !important;
  }
  .dark-mode-indigo-border.border-accent-1-dark-mode {
    border-color: #8c9eff !important;
  }
}
.indigo.accent-2 {
  background-color: #536dfe !important;
}

.indigo-text.text-accent-2 {
  color: #536dfe !important;
}

.indigo-border.border-accent-2 {
  border-color: #536dfe !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-indigo.accent-2-light-mode {
    background-color: #536dfe !important;
  }
  .light-mode-indigo-text.text-accent-2-light-mode {
    color: #536dfe !important;
  }
  .light-mode-indigo-border.border-accent-2-light-mode {
    border-color: #536dfe !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-indigo.accent-2-dark-mode {
    background-color: #536dfe !important;
  }
  .dark-mode-indigo-text.text-accent-2-dark-mode {
    color: #536dfe !important;
  }
  .dark-mode-indigo-border.border-accent-2-dark-mode {
    border-color: #536dfe !important;
  }
}
.indigo.accent-3 {
  background-color: #3d5afe !important;
}

.indigo-text.text-accent-3 {
  color: #3d5afe !important;
}

.indigo-border.border-accent-3 {
  border-color: #3d5afe !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-indigo.accent-3-light-mode {
    background-color: #3d5afe !important;
  }
  .light-mode-indigo-text.text-accent-3-light-mode {
    color: #3d5afe !important;
  }
  .light-mode-indigo-border.border-accent-3-light-mode {
    border-color: #3d5afe !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-indigo.accent-3-dark-mode {
    background-color: #3d5afe !important;
  }
  .dark-mode-indigo-text.text-accent-3-dark-mode {
    color: #3d5afe !important;
  }
  .dark-mode-indigo-border.border-accent-3-dark-mode {
    border-color: #3d5afe !important;
  }
}
.indigo.accent-4 {
  background-color: #304ffe !important;
}

.indigo-text.text-accent-4 {
  color: #304ffe !important;
}

.indigo-border.border-accent-4 {
  border-color: #304ffe !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-indigo.accent-4-light-mode {
    background-color: #304ffe !important;
  }
  .light-mode-indigo-text.text-accent-4-light-mode {
    color: #304ffe !important;
  }
  .light-mode-indigo-border.border-accent-4-light-mode {
    border-color: #304ffe !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-indigo.accent-4-dark-mode {
    background-color: #304ffe !important;
  }
  .dark-mode-indigo-text.text-accent-4-dark-mode {
    color: #304ffe !important;
  }
  .dark-mode-indigo-border.border-accent-4-dark-mode {
    border-color: #304ffe !important;
  }
}
.blue {
  background-color: #2196F3 !important;
}

.blue-text {
  color: #2196F3 !important;
}

.blue-border {
  border-color: #2196F3 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-blue {
    background-color: #2196F3 !important;
  }
  .light-mode-blue-text {
    color: #2196F3 !important;
  }
  .light-mode-blue-border {
    border-color: #2196F3 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-blue {
    background-color: #2196F3 !important;
  }
  .dark-mode-blue-text {
    color: #2196F3 !important;
  }
  .dark-mode-blue-border {
    border-color: #2196F3 !important;
  }
}
.blue.lighten-5 {
  background-color: #E3F2FD !important;
}

.blue-text.text-lighten-5 {
  color: #E3F2FD !important;
}

.blue-border.border-lighten-5 {
  border-color: #E3F2FD !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-blue.lighten-5-light-mode {
    background-color: #E3F2FD !important;
  }
  .light-mode-blue-text.text-lighten-5-light-mode {
    color: #E3F2FD !important;
  }
  .light-mode-blue-border.border-lighten-5-light-mode {
    border-color: #E3F2FD !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-blue.lighten-5-dark-mode {
    background-color: #E3F2FD !important;
  }
  .dark-mode-blue-text.text-lighten-5-dark-mode {
    color: #E3F2FD !important;
  }
  .dark-mode-blue-border.border-lighten-5-dark-mode {
    border-color: #E3F2FD !important;
  }
}
.blue.lighten-4 {
  background-color: #BBDEFB !important;
}

.blue-text.text-lighten-4 {
  color: #BBDEFB !important;
}

.blue-border.border-lighten-4 {
  border-color: #BBDEFB !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-blue.lighten-4-light-mode {
    background-color: #BBDEFB !important;
  }
  .light-mode-blue-text.text-lighten-4-light-mode {
    color: #BBDEFB !important;
  }
  .light-mode-blue-border.border-lighten-4-light-mode {
    border-color: #BBDEFB !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-blue.lighten-4-dark-mode {
    background-color: #BBDEFB !important;
  }
  .dark-mode-blue-text.text-lighten-4-dark-mode {
    color: #BBDEFB !important;
  }
  .dark-mode-blue-border.border-lighten-4-dark-mode {
    border-color: #BBDEFB !important;
  }
}
.blue.lighten-3 {
  background-color: #90CAF9 !important;
}

.blue-text.text-lighten-3 {
  color: #90CAF9 !important;
}

.blue-border.border-lighten-3 {
  border-color: #90CAF9 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-blue.lighten-3-light-mode {
    background-color: #90CAF9 !important;
  }
  .light-mode-blue-text.text-lighten-3-light-mode {
    color: #90CAF9 !important;
  }
  .light-mode-blue-border.border-lighten-3-light-mode {
    border-color: #90CAF9 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-blue.lighten-3-dark-mode {
    background-color: #90CAF9 !important;
  }
  .dark-mode-blue-text.text-lighten-3-dark-mode {
    color: #90CAF9 !important;
  }
  .dark-mode-blue-border.border-lighten-3-dark-mode {
    border-color: #90CAF9 !important;
  }
}
.blue.lighten-2 {
  background-color: #64B5F6 !important;
}

.blue-text.text-lighten-2 {
  color: #64B5F6 !important;
}

.blue-border.border-lighten-2 {
  border-color: #64B5F6 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-blue.lighten-2-light-mode {
    background-color: #64B5F6 !important;
  }
  .light-mode-blue-text.text-lighten-2-light-mode {
    color: #64B5F6 !important;
  }
  .light-mode-blue-border.border-lighten-2-light-mode {
    border-color: #64B5F6 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-blue.lighten-2-dark-mode {
    background-color: #64B5F6 !important;
  }
  .dark-mode-blue-text.text-lighten-2-dark-mode {
    color: #64B5F6 !important;
  }
  .dark-mode-blue-border.border-lighten-2-dark-mode {
    border-color: #64B5F6 !important;
  }
}
.blue.lighten-1 {
  background-color: #42A5F5 !important;
}

.blue-text.text-lighten-1 {
  color: #42A5F5 !important;
}

.blue-border.border-lighten-1 {
  border-color: #42A5F5 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-blue.lighten-1-light-mode {
    background-color: #42A5F5 !important;
  }
  .light-mode-blue-text.text-lighten-1-light-mode {
    color: #42A5F5 !important;
  }
  .light-mode-blue-border.border-lighten-1-light-mode {
    border-color: #42A5F5 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-blue.lighten-1-dark-mode {
    background-color: #42A5F5 !important;
  }
  .dark-mode-blue-text.text-lighten-1-dark-mode {
    color: #42A5F5 !important;
  }
  .dark-mode-blue-border.border-lighten-1-dark-mode {
    border-color: #42A5F5 !important;
  }
}
.blue.darken-1 {
  background-color: #1E88E5 !important;
}

.blue-text.text-darken-1 {
  color: #1E88E5 !important;
}

.blue-border.border-darken-1 {
  border-color: #1E88E5 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-blue.darken-1-light-mode {
    background-color: #1E88E5 !important;
  }
  .light-mode-blue-text.text-darken-1-light-mode {
    color: #1E88E5 !important;
  }
  .light-mode-blue-border.border-darken-1-light-mode {
    border-color: #1E88E5 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-blue.darken-1-dark-mode {
    background-color: #1E88E5 !important;
  }
  .dark-mode-blue-text.text-darken-1-dark-mode {
    color: #1E88E5 !important;
  }
  .dark-mode-blue-border.border-darken-1-dark-mode {
    border-color: #1E88E5 !important;
  }
}
.blue.darken-2 {
  background-color: #1976D2 !important;
}

.blue-text.text-darken-2 {
  color: #1976D2 !important;
}

.blue-border.border-darken-2 {
  border-color: #1976D2 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-blue.darken-2-light-mode {
    background-color: #1976D2 !important;
  }
  .light-mode-blue-text.text-darken-2-light-mode {
    color: #1976D2 !important;
  }
  .light-mode-blue-border.border-darken-2-light-mode {
    border-color: #1976D2 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-blue.darken-2-dark-mode {
    background-color: #1976D2 !important;
  }
  .dark-mode-blue-text.text-darken-2-dark-mode {
    color: #1976D2 !important;
  }
  .dark-mode-blue-border.border-darken-2-dark-mode {
    border-color: #1976D2 !important;
  }
}
.blue.darken-3 {
  background-color: #1565C0 !important;
}

.blue-text.text-darken-3 {
  color: #1565C0 !important;
}

.blue-border.border-darken-3 {
  border-color: #1565C0 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-blue.darken-3-light-mode {
    background-color: #1565C0 !important;
  }
  .light-mode-blue-text.text-darken-3-light-mode {
    color: #1565C0 !important;
  }
  .light-mode-blue-border.border-darken-3-light-mode {
    border-color: #1565C0 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-blue.darken-3-dark-mode {
    background-color: #1565C0 !important;
  }
  .dark-mode-blue-text.text-darken-3-dark-mode {
    color: #1565C0 !important;
  }
  .dark-mode-blue-border.border-darken-3-dark-mode {
    border-color: #1565C0 !important;
  }
}
.blue.darken-4 {
  background-color: #0D47A1 !important;
}

.blue-text.text-darken-4 {
  color: #0D47A1 !important;
}

.blue-border.border-darken-4 {
  border-color: #0D47A1 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-blue.darken-4-light-mode {
    background-color: #0D47A1 !important;
  }
  .light-mode-blue-text.text-darken-4-light-mode {
    color: #0D47A1 !important;
  }
  .light-mode-blue-border.border-darken-4-light-mode {
    border-color: #0D47A1 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-blue.darken-4-dark-mode {
    background-color: #0D47A1 !important;
  }
  .dark-mode-blue-text.text-darken-4-dark-mode {
    color: #0D47A1 !important;
  }
  .dark-mode-blue-border.border-darken-4-dark-mode {
    border-color: #0D47A1 !important;
  }
}
.blue.accent-1 {
  background-color: #82B1FF !important;
}

.blue-text.text-accent-1 {
  color: #82B1FF !important;
}

.blue-border.border-accent-1 {
  border-color: #82B1FF !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-blue.accent-1-light-mode {
    background-color: #82B1FF !important;
  }
  .light-mode-blue-text.text-accent-1-light-mode {
    color: #82B1FF !important;
  }
  .light-mode-blue-border.border-accent-1-light-mode {
    border-color: #82B1FF !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-blue.accent-1-dark-mode {
    background-color: #82B1FF !important;
  }
  .dark-mode-blue-text.text-accent-1-dark-mode {
    color: #82B1FF !important;
  }
  .dark-mode-blue-border.border-accent-1-dark-mode {
    border-color: #82B1FF !important;
  }
}
.blue.accent-2 {
  background-color: #448AFF !important;
}

.blue-text.text-accent-2 {
  color: #448AFF !important;
}

.blue-border.border-accent-2 {
  border-color: #448AFF !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-blue.accent-2-light-mode {
    background-color: #448AFF !important;
  }
  .light-mode-blue-text.text-accent-2-light-mode {
    color: #448AFF !important;
  }
  .light-mode-blue-border.border-accent-2-light-mode {
    border-color: #448AFF !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-blue.accent-2-dark-mode {
    background-color: #448AFF !important;
  }
  .dark-mode-blue-text.text-accent-2-dark-mode {
    color: #448AFF !important;
  }
  .dark-mode-blue-border.border-accent-2-dark-mode {
    border-color: #448AFF !important;
  }
}
.blue.accent-3 {
  background-color: #2979FF !important;
}

.blue-text.text-accent-3 {
  color: #2979FF !important;
}

.blue-border.border-accent-3 {
  border-color: #2979FF !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-blue.accent-3-light-mode {
    background-color: #2979FF !important;
  }
  .light-mode-blue-text.text-accent-3-light-mode {
    color: #2979FF !important;
  }
  .light-mode-blue-border.border-accent-3-light-mode {
    border-color: #2979FF !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-blue.accent-3-dark-mode {
    background-color: #2979FF !important;
  }
  .dark-mode-blue-text.text-accent-3-dark-mode {
    color: #2979FF !important;
  }
  .dark-mode-blue-border.border-accent-3-dark-mode {
    border-color: #2979FF !important;
  }
}
.blue.accent-4 {
  background-color: #2962FF !important;
}

.blue-text.text-accent-4 {
  color: #2962FF !important;
}

.blue-border.border-accent-4 {
  border-color: #2962FF !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-blue.accent-4-light-mode {
    background-color: #2962FF !important;
  }
  .light-mode-blue-text.text-accent-4-light-mode {
    color: #2962FF !important;
  }
  .light-mode-blue-border.border-accent-4-light-mode {
    border-color: #2962FF !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-blue.accent-4-dark-mode {
    background-color: #2962FF !important;
  }
  .dark-mode-blue-text.text-accent-4-dark-mode {
    color: #2962FF !important;
  }
  .dark-mode-blue-border.border-accent-4-dark-mode {
    border-color: #2962FF !important;
  }
}
.light-blue {
  background-color: #03a9f4 !important;
}

.light-blue-text {
  color: #03a9f4 !important;
}

.light-blue-border {
  border-color: #03a9f4 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-light-blue {
    background-color: #03a9f4 !important;
  }
  .light-mode-light-blue-text {
    color: #03a9f4 !important;
  }
  .light-mode-light-blue-border {
    border-color: #03a9f4 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-light-blue {
    background-color: #03a9f4 !important;
  }
  .dark-mode-light-blue-text {
    color: #03a9f4 !important;
  }
  .dark-mode-light-blue-border {
    border-color: #03a9f4 !important;
  }
}
.light-blue.lighten-5 {
  background-color: #e1f5fe !important;
}

.light-blue-text.text-lighten-5 {
  color: #e1f5fe !important;
}

.light-blue-border.border-lighten-5 {
  border-color: #e1f5fe !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-light-blue.lighten-5-light-mode {
    background-color: #e1f5fe !important;
  }
  .light-mode-light-blue-text.text-lighten-5-light-mode {
    color: #e1f5fe !important;
  }
  .light-mode-light-blue-border.border-lighten-5-light-mode {
    border-color: #e1f5fe !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-light-blue.lighten-5-dark-mode {
    background-color: #e1f5fe !important;
  }
  .dark-mode-light-blue-text.text-lighten-5-dark-mode {
    color: #e1f5fe !important;
  }
  .dark-mode-light-blue-border.border-lighten-5-dark-mode {
    border-color: #e1f5fe !important;
  }
}
.light-blue.lighten-4 {
  background-color: #b3e5fc !important;
}

.light-blue-text.text-lighten-4 {
  color: #b3e5fc !important;
}

.light-blue-border.border-lighten-4 {
  border-color: #b3e5fc !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-light-blue.lighten-4-light-mode {
    background-color: #b3e5fc !important;
  }
  .light-mode-light-blue-text.text-lighten-4-light-mode {
    color: #b3e5fc !important;
  }
  .light-mode-light-blue-border.border-lighten-4-light-mode {
    border-color: #b3e5fc !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-light-blue.lighten-4-dark-mode {
    background-color: #b3e5fc !important;
  }
  .dark-mode-light-blue-text.text-lighten-4-dark-mode {
    color: #b3e5fc !important;
  }
  .dark-mode-light-blue-border.border-lighten-4-dark-mode {
    border-color: #b3e5fc !important;
  }
}
.light-blue.lighten-3 {
  background-color: #81d4fa !important;
}

.light-blue-text.text-lighten-3 {
  color: #81d4fa !important;
}

.light-blue-border.border-lighten-3 {
  border-color: #81d4fa !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-light-blue.lighten-3-light-mode {
    background-color: #81d4fa !important;
  }
  .light-mode-light-blue-text.text-lighten-3-light-mode {
    color: #81d4fa !important;
  }
  .light-mode-light-blue-border.border-lighten-3-light-mode {
    border-color: #81d4fa !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-light-blue.lighten-3-dark-mode {
    background-color: #81d4fa !important;
  }
  .dark-mode-light-blue-text.text-lighten-3-dark-mode {
    color: #81d4fa !important;
  }
  .dark-mode-light-blue-border.border-lighten-3-dark-mode {
    border-color: #81d4fa !important;
  }
}
.light-blue.lighten-2 {
  background-color: #4fc3f7 !important;
}

.light-blue-text.text-lighten-2 {
  color: #4fc3f7 !important;
}

.light-blue-border.border-lighten-2 {
  border-color: #4fc3f7 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-light-blue.lighten-2-light-mode {
    background-color: #4fc3f7 !important;
  }
  .light-mode-light-blue-text.text-lighten-2-light-mode {
    color: #4fc3f7 !important;
  }
  .light-mode-light-blue-border.border-lighten-2-light-mode {
    border-color: #4fc3f7 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-light-blue.lighten-2-dark-mode {
    background-color: #4fc3f7 !important;
  }
  .dark-mode-light-blue-text.text-lighten-2-dark-mode {
    color: #4fc3f7 !important;
  }
  .dark-mode-light-blue-border.border-lighten-2-dark-mode {
    border-color: #4fc3f7 !important;
  }
}
.light-blue.lighten-1 {
  background-color: #29b6f6 !important;
}

.light-blue-text.text-lighten-1 {
  color: #29b6f6 !important;
}

.light-blue-border.border-lighten-1 {
  border-color: #29b6f6 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-light-blue.lighten-1-light-mode {
    background-color: #29b6f6 !important;
  }
  .light-mode-light-blue-text.text-lighten-1-light-mode {
    color: #29b6f6 !important;
  }
  .light-mode-light-blue-border.border-lighten-1-light-mode {
    border-color: #29b6f6 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-light-blue.lighten-1-dark-mode {
    background-color: #29b6f6 !important;
  }
  .dark-mode-light-blue-text.text-lighten-1-dark-mode {
    color: #29b6f6 !important;
  }
  .dark-mode-light-blue-border.border-lighten-1-dark-mode {
    border-color: #29b6f6 !important;
  }
}
.light-blue.darken-1 {
  background-color: #039be5 !important;
}

.light-blue-text.text-darken-1 {
  color: #039be5 !important;
}

.light-blue-border.border-darken-1 {
  border-color: #039be5 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-light-blue.darken-1-light-mode {
    background-color: #039be5 !important;
  }
  .light-mode-light-blue-text.text-darken-1-light-mode {
    color: #039be5 !important;
  }
  .light-mode-light-blue-border.border-darken-1-light-mode {
    border-color: #039be5 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-light-blue.darken-1-dark-mode {
    background-color: #039be5 !important;
  }
  .dark-mode-light-blue-text.text-darken-1-dark-mode {
    color: #039be5 !important;
  }
  .dark-mode-light-blue-border.border-darken-1-dark-mode {
    border-color: #039be5 !important;
  }
}
.light-blue.darken-2 {
  background-color: #0288d1 !important;
}

.light-blue-text.text-darken-2 {
  color: #0288d1 !important;
}

.light-blue-border.border-darken-2 {
  border-color: #0288d1 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-light-blue.darken-2-light-mode {
    background-color: #0288d1 !important;
  }
  .light-mode-light-blue-text.text-darken-2-light-mode {
    color: #0288d1 !important;
  }
  .light-mode-light-blue-border.border-darken-2-light-mode {
    border-color: #0288d1 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-light-blue.darken-2-dark-mode {
    background-color: #0288d1 !important;
  }
  .dark-mode-light-blue-text.text-darken-2-dark-mode {
    color: #0288d1 !important;
  }
  .dark-mode-light-blue-border.border-darken-2-dark-mode {
    border-color: #0288d1 !important;
  }
}
.light-blue.darken-3 {
  background-color: #0277bd !important;
}

.light-blue-text.text-darken-3 {
  color: #0277bd !important;
}

.light-blue-border.border-darken-3 {
  border-color: #0277bd !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-light-blue.darken-3-light-mode {
    background-color: #0277bd !important;
  }
  .light-mode-light-blue-text.text-darken-3-light-mode {
    color: #0277bd !important;
  }
  .light-mode-light-blue-border.border-darken-3-light-mode {
    border-color: #0277bd !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-light-blue.darken-3-dark-mode {
    background-color: #0277bd !important;
  }
  .dark-mode-light-blue-text.text-darken-3-dark-mode {
    color: #0277bd !important;
  }
  .dark-mode-light-blue-border.border-darken-3-dark-mode {
    border-color: #0277bd !important;
  }
}
.light-blue.darken-4 {
  background-color: #01579b !important;
}

.light-blue-text.text-darken-4 {
  color: #01579b !important;
}

.light-blue-border.border-darken-4 {
  border-color: #01579b !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-light-blue.darken-4-light-mode {
    background-color: #01579b !important;
  }
  .light-mode-light-blue-text.text-darken-4-light-mode {
    color: #01579b !important;
  }
  .light-mode-light-blue-border.border-darken-4-light-mode {
    border-color: #01579b !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-light-blue.darken-4-dark-mode {
    background-color: #01579b !important;
  }
  .dark-mode-light-blue-text.text-darken-4-dark-mode {
    color: #01579b !important;
  }
  .dark-mode-light-blue-border.border-darken-4-dark-mode {
    border-color: #01579b !important;
  }
}
.light-blue.accent-1 {
  background-color: #80d8ff !important;
}

.light-blue-text.text-accent-1 {
  color: #80d8ff !important;
}

.light-blue-border.border-accent-1 {
  border-color: #80d8ff !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-light-blue.accent-1-light-mode {
    background-color: #80d8ff !important;
  }
  .light-mode-light-blue-text.text-accent-1-light-mode {
    color: #80d8ff !important;
  }
  .light-mode-light-blue-border.border-accent-1-light-mode {
    border-color: #80d8ff !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-light-blue.accent-1-dark-mode {
    background-color: #80d8ff !important;
  }
  .dark-mode-light-blue-text.text-accent-1-dark-mode {
    color: #80d8ff !important;
  }
  .dark-mode-light-blue-border.border-accent-1-dark-mode {
    border-color: #80d8ff !important;
  }
}
.light-blue.accent-2 {
  background-color: #40c4ff !important;
}

.light-blue-text.text-accent-2 {
  color: #40c4ff !important;
}

.light-blue-border.border-accent-2 {
  border-color: #40c4ff !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-light-blue.accent-2-light-mode {
    background-color: #40c4ff !important;
  }
  .light-mode-light-blue-text.text-accent-2-light-mode {
    color: #40c4ff !important;
  }
  .light-mode-light-blue-border.border-accent-2-light-mode {
    border-color: #40c4ff !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-light-blue.accent-2-dark-mode {
    background-color: #40c4ff !important;
  }
  .dark-mode-light-blue-text.text-accent-2-dark-mode {
    color: #40c4ff !important;
  }
  .dark-mode-light-blue-border.border-accent-2-dark-mode {
    border-color: #40c4ff !important;
  }
}
.light-blue.accent-3 {
  background-color: #00b0ff !important;
}

.light-blue-text.text-accent-3 {
  color: #00b0ff !important;
}

.light-blue-border.border-accent-3 {
  border-color: #00b0ff !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-light-blue.accent-3-light-mode {
    background-color: #00b0ff !important;
  }
  .light-mode-light-blue-text.text-accent-3-light-mode {
    color: #00b0ff !important;
  }
  .light-mode-light-blue-border.border-accent-3-light-mode {
    border-color: #00b0ff !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-light-blue.accent-3-dark-mode {
    background-color: #00b0ff !important;
  }
  .dark-mode-light-blue-text.text-accent-3-dark-mode {
    color: #00b0ff !important;
  }
  .dark-mode-light-blue-border.border-accent-3-dark-mode {
    border-color: #00b0ff !important;
  }
}
.light-blue.accent-4 {
  background-color: #0091ea !important;
}

.light-blue-text.text-accent-4 {
  color: #0091ea !important;
}

.light-blue-border.border-accent-4 {
  border-color: #0091ea !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-light-blue.accent-4-light-mode {
    background-color: #0091ea !important;
  }
  .light-mode-light-blue-text.text-accent-4-light-mode {
    color: #0091ea !important;
  }
  .light-mode-light-blue-border.border-accent-4-light-mode {
    border-color: #0091ea !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-light-blue.accent-4-dark-mode {
    background-color: #0091ea !important;
  }
  .dark-mode-light-blue-text.text-accent-4-dark-mode {
    color: #0091ea !important;
  }
  .dark-mode-light-blue-border.border-accent-4-dark-mode {
    border-color: #0091ea !important;
  }
}
.cyan {
  background-color: #00bcd4 !important;
}

.cyan-text {
  color: #00bcd4 !important;
}

.cyan-border {
  border-color: #00bcd4 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-cyan {
    background-color: #00bcd4 !important;
  }
  .light-mode-cyan-text {
    color: #00bcd4 !important;
  }
  .light-mode-cyan-border {
    border-color: #00bcd4 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-cyan {
    background-color: #00bcd4 !important;
  }
  .dark-mode-cyan-text {
    color: #00bcd4 !important;
  }
  .dark-mode-cyan-border {
    border-color: #00bcd4 !important;
  }
}
.cyan.lighten-5 {
  background-color: #e0f7fa !important;
}

.cyan-text.text-lighten-5 {
  color: #e0f7fa !important;
}

.cyan-border.border-lighten-5 {
  border-color: #e0f7fa !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-cyan.lighten-5-light-mode {
    background-color: #e0f7fa !important;
  }
  .light-mode-cyan-text.text-lighten-5-light-mode {
    color: #e0f7fa !important;
  }
  .light-mode-cyan-border.border-lighten-5-light-mode {
    border-color: #e0f7fa !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-cyan.lighten-5-dark-mode {
    background-color: #e0f7fa !important;
  }
  .dark-mode-cyan-text.text-lighten-5-dark-mode {
    color: #e0f7fa !important;
  }
  .dark-mode-cyan-border.border-lighten-5-dark-mode {
    border-color: #e0f7fa !important;
  }
}
.cyan.lighten-4 {
  background-color: #b2ebf2 !important;
}

.cyan-text.text-lighten-4 {
  color: #b2ebf2 !important;
}

.cyan-border.border-lighten-4 {
  border-color: #b2ebf2 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-cyan.lighten-4-light-mode {
    background-color: #b2ebf2 !important;
  }
  .light-mode-cyan-text.text-lighten-4-light-mode {
    color: #b2ebf2 !important;
  }
  .light-mode-cyan-border.border-lighten-4-light-mode {
    border-color: #b2ebf2 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-cyan.lighten-4-dark-mode {
    background-color: #b2ebf2 !important;
  }
  .dark-mode-cyan-text.text-lighten-4-dark-mode {
    color: #b2ebf2 !important;
  }
  .dark-mode-cyan-border.border-lighten-4-dark-mode {
    border-color: #b2ebf2 !important;
  }
}
.cyan.lighten-3 {
  background-color: #80deea !important;
}

.cyan-text.text-lighten-3 {
  color: #80deea !important;
}

.cyan-border.border-lighten-3 {
  border-color: #80deea !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-cyan.lighten-3-light-mode {
    background-color: #80deea !important;
  }
  .light-mode-cyan-text.text-lighten-3-light-mode {
    color: #80deea !important;
  }
  .light-mode-cyan-border.border-lighten-3-light-mode {
    border-color: #80deea !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-cyan.lighten-3-dark-mode {
    background-color: #80deea !important;
  }
  .dark-mode-cyan-text.text-lighten-3-dark-mode {
    color: #80deea !important;
  }
  .dark-mode-cyan-border.border-lighten-3-dark-mode {
    border-color: #80deea !important;
  }
}
.cyan.lighten-2 {
  background-color: #4dd0e1 !important;
}

.cyan-text.text-lighten-2 {
  color: #4dd0e1 !important;
}

.cyan-border.border-lighten-2 {
  border-color: #4dd0e1 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-cyan.lighten-2-light-mode {
    background-color: #4dd0e1 !important;
  }
  .light-mode-cyan-text.text-lighten-2-light-mode {
    color: #4dd0e1 !important;
  }
  .light-mode-cyan-border.border-lighten-2-light-mode {
    border-color: #4dd0e1 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-cyan.lighten-2-dark-mode {
    background-color: #4dd0e1 !important;
  }
  .dark-mode-cyan-text.text-lighten-2-dark-mode {
    color: #4dd0e1 !important;
  }
  .dark-mode-cyan-border.border-lighten-2-dark-mode {
    border-color: #4dd0e1 !important;
  }
}
.cyan.lighten-1 {
  background-color: #26c6da !important;
}

.cyan-text.text-lighten-1 {
  color: #26c6da !important;
}

.cyan-border.border-lighten-1 {
  border-color: #26c6da !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-cyan.lighten-1-light-mode {
    background-color: #26c6da !important;
  }
  .light-mode-cyan-text.text-lighten-1-light-mode {
    color: #26c6da !important;
  }
  .light-mode-cyan-border.border-lighten-1-light-mode {
    border-color: #26c6da !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-cyan.lighten-1-dark-mode {
    background-color: #26c6da !important;
  }
  .dark-mode-cyan-text.text-lighten-1-dark-mode {
    color: #26c6da !important;
  }
  .dark-mode-cyan-border.border-lighten-1-dark-mode {
    border-color: #26c6da !important;
  }
}
.cyan.darken-1 {
  background-color: #00acc1 !important;
}

.cyan-text.text-darken-1 {
  color: #00acc1 !important;
}

.cyan-border.border-darken-1 {
  border-color: #00acc1 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-cyan.darken-1-light-mode {
    background-color: #00acc1 !important;
  }
  .light-mode-cyan-text.text-darken-1-light-mode {
    color: #00acc1 !important;
  }
  .light-mode-cyan-border.border-darken-1-light-mode {
    border-color: #00acc1 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-cyan.darken-1-dark-mode {
    background-color: #00acc1 !important;
  }
  .dark-mode-cyan-text.text-darken-1-dark-mode {
    color: #00acc1 !important;
  }
  .dark-mode-cyan-border.border-darken-1-dark-mode {
    border-color: #00acc1 !important;
  }
}
.cyan.darken-2 {
  background-color: #0097a7 !important;
}

.cyan-text.text-darken-2 {
  color: #0097a7 !important;
}

.cyan-border.border-darken-2 {
  border-color: #0097a7 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-cyan.darken-2-light-mode {
    background-color: #0097a7 !important;
  }
  .light-mode-cyan-text.text-darken-2-light-mode {
    color: #0097a7 !important;
  }
  .light-mode-cyan-border.border-darken-2-light-mode {
    border-color: #0097a7 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-cyan.darken-2-dark-mode {
    background-color: #0097a7 !important;
  }
  .dark-mode-cyan-text.text-darken-2-dark-mode {
    color: #0097a7 !important;
  }
  .dark-mode-cyan-border.border-darken-2-dark-mode {
    border-color: #0097a7 !important;
  }
}
.cyan.darken-3 {
  background-color: #00838f !important;
}

.cyan-text.text-darken-3 {
  color: #00838f !important;
}

.cyan-border.border-darken-3 {
  border-color: #00838f !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-cyan.darken-3-light-mode {
    background-color: #00838f !important;
  }
  .light-mode-cyan-text.text-darken-3-light-mode {
    color: #00838f !important;
  }
  .light-mode-cyan-border.border-darken-3-light-mode {
    border-color: #00838f !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-cyan.darken-3-dark-mode {
    background-color: #00838f !important;
  }
  .dark-mode-cyan-text.text-darken-3-dark-mode {
    color: #00838f !important;
  }
  .dark-mode-cyan-border.border-darken-3-dark-mode {
    border-color: #00838f !important;
  }
}
.cyan.darken-4 {
  background-color: #006064 !important;
}

.cyan-text.text-darken-4 {
  color: #006064 !important;
}

.cyan-border.border-darken-4 {
  border-color: #006064 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-cyan.darken-4-light-mode {
    background-color: #006064 !important;
  }
  .light-mode-cyan-text.text-darken-4-light-mode {
    color: #006064 !important;
  }
  .light-mode-cyan-border.border-darken-4-light-mode {
    border-color: #006064 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-cyan.darken-4-dark-mode {
    background-color: #006064 !important;
  }
  .dark-mode-cyan-text.text-darken-4-dark-mode {
    color: #006064 !important;
  }
  .dark-mode-cyan-border.border-darken-4-dark-mode {
    border-color: #006064 !important;
  }
}
.cyan.accent-1 {
  background-color: #84ffff !important;
}

.cyan-text.text-accent-1 {
  color: #84ffff !important;
}

.cyan-border.border-accent-1 {
  border-color: #84ffff !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-cyan.accent-1-light-mode {
    background-color: #84ffff !important;
  }
  .light-mode-cyan-text.text-accent-1-light-mode {
    color: #84ffff !important;
  }
  .light-mode-cyan-border.border-accent-1-light-mode {
    border-color: #84ffff !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-cyan.accent-1-dark-mode {
    background-color: #84ffff !important;
  }
  .dark-mode-cyan-text.text-accent-1-dark-mode {
    color: #84ffff !important;
  }
  .dark-mode-cyan-border.border-accent-1-dark-mode {
    border-color: #84ffff !important;
  }
}
.cyan.accent-2 {
  background-color: #18ffff !important;
}

.cyan-text.text-accent-2 {
  color: #18ffff !important;
}

.cyan-border.border-accent-2 {
  border-color: #18ffff !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-cyan.accent-2-light-mode {
    background-color: #18ffff !important;
  }
  .light-mode-cyan-text.text-accent-2-light-mode {
    color: #18ffff !important;
  }
  .light-mode-cyan-border.border-accent-2-light-mode {
    border-color: #18ffff !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-cyan.accent-2-dark-mode {
    background-color: #18ffff !important;
  }
  .dark-mode-cyan-text.text-accent-2-dark-mode {
    color: #18ffff !important;
  }
  .dark-mode-cyan-border.border-accent-2-dark-mode {
    border-color: #18ffff !important;
  }
}
.cyan.accent-3 {
  background-color: #00e5ff !important;
}

.cyan-text.text-accent-3 {
  color: #00e5ff !important;
}

.cyan-border.border-accent-3 {
  border-color: #00e5ff !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-cyan.accent-3-light-mode {
    background-color: #00e5ff !important;
  }
  .light-mode-cyan-text.text-accent-3-light-mode {
    color: #00e5ff !important;
  }
  .light-mode-cyan-border.border-accent-3-light-mode {
    border-color: #00e5ff !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-cyan.accent-3-dark-mode {
    background-color: #00e5ff !important;
  }
  .dark-mode-cyan-text.text-accent-3-dark-mode {
    color: #00e5ff !important;
  }
  .dark-mode-cyan-border.border-accent-3-dark-mode {
    border-color: #00e5ff !important;
  }
}
.cyan.accent-4 {
  background-color: #00b8d4 !important;
}

.cyan-text.text-accent-4 {
  color: #00b8d4 !important;
}

.cyan-border.border-accent-4 {
  border-color: #00b8d4 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-cyan.accent-4-light-mode {
    background-color: #00b8d4 !important;
  }
  .light-mode-cyan-text.text-accent-4-light-mode {
    color: #00b8d4 !important;
  }
  .light-mode-cyan-border.border-accent-4-light-mode {
    border-color: #00b8d4 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-cyan.accent-4-dark-mode {
    background-color: #00b8d4 !important;
  }
  .dark-mode-cyan-text.text-accent-4-dark-mode {
    color: #00b8d4 !important;
  }
  .dark-mode-cyan-border.border-accent-4-dark-mode {
    border-color: #00b8d4 !important;
  }
}
.teal {
  background-color: #009688 !important;
}

.teal-text {
  color: #009688 !important;
}

.teal-border {
  border-color: #009688 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-teal {
    background-color: #009688 !important;
  }
  .light-mode-teal-text {
    color: #009688 !important;
  }
  .light-mode-teal-border {
    border-color: #009688 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-teal {
    background-color: #009688 !important;
  }
  .dark-mode-teal-text {
    color: #009688 !important;
  }
  .dark-mode-teal-border {
    border-color: #009688 !important;
  }
}
.teal.lighten-5 {
  background-color: #e0f2f1 !important;
}

.teal-text.text-lighten-5 {
  color: #e0f2f1 !important;
}

.teal-border.border-lighten-5 {
  border-color: #e0f2f1 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-teal.lighten-5-light-mode {
    background-color: #e0f2f1 !important;
  }
  .light-mode-teal-text.text-lighten-5-light-mode {
    color: #e0f2f1 !important;
  }
  .light-mode-teal-border.border-lighten-5-light-mode {
    border-color: #e0f2f1 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-teal.lighten-5-dark-mode {
    background-color: #e0f2f1 !important;
  }
  .dark-mode-teal-text.text-lighten-5-dark-mode {
    color: #e0f2f1 !important;
  }
  .dark-mode-teal-border.border-lighten-5-dark-mode {
    border-color: #e0f2f1 !important;
  }
}
.teal.lighten-4 {
  background-color: #b2dfdb !important;
}

.teal-text.text-lighten-4 {
  color: #b2dfdb !important;
}

.teal-border.border-lighten-4 {
  border-color: #b2dfdb !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-teal.lighten-4-light-mode {
    background-color: #b2dfdb !important;
  }
  .light-mode-teal-text.text-lighten-4-light-mode {
    color: #b2dfdb !important;
  }
  .light-mode-teal-border.border-lighten-4-light-mode {
    border-color: #b2dfdb !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-teal.lighten-4-dark-mode {
    background-color: #b2dfdb !important;
  }
  .dark-mode-teal-text.text-lighten-4-dark-mode {
    color: #b2dfdb !important;
  }
  .dark-mode-teal-border.border-lighten-4-dark-mode {
    border-color: #b2dfdb !important;
  }
}
.teal.lighten-3 {
  background-color: #80cbc4 !important;
}

.teal-text.text-lighten-3 {
  color: #80cbc4 !important;
}

.teal-border.border-lighten-3 {
  border-color: #80cbc4 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-teal.lighten-3-light-mode {
    background-color: #80cbc4 !important;
  }
  .light-mode-teal-text.text-lighten-3-light-mode {
    color: #80cbc4 !important;
  }
  .light-mode-teal-border.border-lighten-3-light-mode {
    border-color: #80cbc4 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-teal.lighten-3-dark-mode {
    background-color: #80cbc4 !important;
  }
  .dark-mode-teal-text.text-lighten-3-dark-mode {
    color: #80cbc4 !important;
  }
  .dark-mode-teal-border.border-lighten-3-dark-mode {
    border-color: #80cbc4 !important;
  }
}
.teal.lighten-2 {
  background-color: #4db6ac !important;
}

.teal-text.text-lighten-2 {
  color: #4db6ac !important;
}

.teal-border.border-lighten-2 {
  border-color: #4db6ac !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-teal.lighten-2-light-mode {
    background-color: #4db6ac !important;
  }
  .light-mode-teal-text.text-lighten-2-light-mode {
    color: #4db6ac !important;
  }
  .light-mode-teal-border.border-lighten-2-light-mode {
    border-color: #4db6ac !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-teal.lighten-2-dark-mode {
    background-color: #4db6ac !important;
  }
  .dark-mode-teal-text.text-lighten-2-dark-mode {
    color: #4db6ac !important;
  }
  .dark-mode-teal-border.border-lighten-2-dark-mode {
    border-color: #4db6ac !important;
  }
}
.teal.lighten-1 {
  background-color: #26a69a !important;
}

.teal-text.text-lighten-1 {
  color: #26a69a !important;
}

.teal-border.border-lighten-1 {
  border-color: #26a69a !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-teal.lighten-1-light-mode {
    background-color: #26a69a !important;
  }
  .light-mode-teal-text.text-lighten-1-light-mode {
    color: #26a69a !important;
  }
  .light-mode-teal-border.border-lighten-1-light-mode {
    border-color: #26a69a !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-teal.lighten-1-dark-mode {
    background-color: #26a69a !important;
  }
  .dark-mode-teal-text.text-lighten-1-dark-mode {
    color: #26a69a !important;
  }
  .dark-mode-teal-border.border-lighten-1-dark-mode {
    border-color: #26a69a !important;
  }
}
.teal.darken-1 {
  background-color: #00897b !important;
}

.teal-text.text-darken-1 {
  color: #00897b !important;
}

.teal-border.border-darken-1 {
  border-color: #00897b !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-teal.darken-1-light-mode {
    background-color: #00897b !important;
  }
  .light-mode-teal-text.text-darken-1-light-mode {
    color: #00897b !important;
  }
  .light-mode-teal-border.border-darken-1-light-mode {
    border-color: #00897b !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-teal.darken-1-dark-mode {
    background-color: #00897b !important;
  }
  .dark-mode-teal-text.text-darken-1-dark-mode {
    color: #00897b !important;
  }
  .dark-mode-teal-border.border-darken-1-dark-mode {
    border-color: #00897b !important;
  }
}
.teal.darken-2 {
  background-color: #00796b !important;
}

.teal-text.text-darken-2 {
  color: #00796b !important;
}

.teal-border.border-darken-2 {
  border-color: #00796b !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-teal.darken-2-light-mode {
    background-color: #00796b !important;
  }
  .light-mode-teal-text.text-darken-2-light-mode {
    color: #00796b !important;
  }
  .light-mode-teal-border.border-darken-2-light-mode {
    border-color: #00796b !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-teal.darken-2-dark-mode {
    background-color: #00796b !important;
  }
  .dark-mode-teal-text.text-darken-2-dark-mode {
    color: #00796b !important;
  }
  .dark-mode-teal-border.border-darken-2-dark-mode {
    border-color: #00796b !important;
  }
}
.teal.darken-3 {
  background-color: #00695c !important;
}

.teal-text.text-darken-3 {
  color: #00695c !important;
}

.teal-border.border-darken-3 {
  border-color: #00695c !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-teal.darken-3-light-mode {
    background-color: #00695c !important;
  }
  .light-mode-teal-text.text-darken-3-light-mode {
    color: #00695c !important;
  }
  .light-mode-teal-border.border-darken-3-light-mode {
    border-color: #00695c !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-teal.darken-3-dark-mode {
    background-color: #00695c !important;
  }
  .dark-mode-teal-text.text-darken-3-dark-mode {
    color: #00695c !important;
  }
  .dark-mode-teal-border.border-darken-3-dark-mode {
    border-color: #00695c !important;
  }
}
.teal.darken-4 {
  background-color: #004d40 !important;
}

.teal-text.text-darken-4 {
  color: #004d40 !important;
}

.teal-border.border-darken-4 {
  border-color: #004d40 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-teal.darken-4-light-mode {
    background-color: #004d40 !important;
  }
  .light-mode-teal-text.text-darken-4-light-mode {
    color: #004d40 !important;
  }
  .light-mode-teal-border.border-darken-4-light-mode {
    border-color: #004d40 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-teal.darken-4-dark-mode {
    background-color: #004d40 !important;
  }
  .dark-mode-teal-text.text-darken-4-dark-mode {
    color: #004d40 !important;
  }
  .dark-mode-teal-border.border-darken-4-dark-mode {
    border-color: #004d40 !important;
  }
}
.teal.accent-1 {
  background-color: #a7ffeb !important;
}

.teal-text.text-accent-1 {
  color: #a7ffeb !important;
}

.teal-border.border-accent-1 {
  border-color: #a7ffeb !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-teal.accent-1-light-mode {
    background-color: #a7ffeb !important;
  }
  .light-mode-teal-text.text-accent-1-light-mode {
    color: #a7ffeb !important;
  }
  .light-mode-teal-border.border-accent-1-light-mode {
    border-color: #a7ffeb !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-teal.accent-1-dark-mode {
    background-color: #a7ffeb !important;
  }
  .dark-mode-teal-text.text-accent-1-dark-mode {
    color: #a7ffeb !important;
  }
  .dark-mode-teal-border.border-accent-1-dark-mode {
    border-color: #a7ffeb !important;
  }
}
.teal.accent-2 {
  background-color: #64ffda !important;
}

.teal-text.text-accent-2 {
  color: #64ffda !important;
}

.teal-border.border-accent-2 {
  border-color: #64ffda !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-teal.accent-2-light-mode {
    background-color: #64ffda !important;
  }
  .light-mode-teal-text.text-accent-2-light-mode {
    color: #64ffda !important;
  }
  .light-mode-teal-border.border-accent-2-light-mode {
    border-color: #64ffda !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-teal.accent-2-dark-mode {
    background-color: #64ffda !important;
  }
  .dark-mode-teal-text.text-accent-2-dark-mode {
    color: #64ffda !important;
  }
  .dark-mode-teal-border.border-accent-2-dark-mode {
    border-color: #64ffda !important;
  }
}
.teal.accent-3 {
  background-color: #1de9b6 !important;
}

.teal-text.text-accent-3 {
  color: #1de9b6 !important;
}

.teal-border.border-accent-3 {
  border-color: #1de9b6 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-teal.accent-3-light-mode {
    background-color: #1de9b6 !important;
  }
  .light-mode-teal-text.text-accent-3-light-mode {
    color: #1de9b6 !important;
  }
  .light-mode-teal-border.border-accent-3-light-mode {
    border-color: #1de9b6 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-teal.accent-3-dark-mode {
    background-color: #1de9b6 !important;
  }
  .dark-mode-teal-text.text-accent-3-dark-mode {
    color: #1de9b6 !important;
  }
  .dark-mode-teal-border.border-accent-3-dark-mode {
    border-color: #1de9b6 !important;
  }
}
.teal.accent-4 {
  background-color: #00bfa5 !important;
}

.teal-text.text-accent-4 {
  color: #00bfa5 !important;
}

.teal-border.border-accent-4 {
  border-color: #00bfa5 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-teal.accent-4-light-mode {
    background-color: #00bfa5 !important;
  }
  .light-mode-teal-text.text-accent-4-light-mode {
    color: #00bfa5 !important;
  }
  .light-mode-teal-border.border-accent-4-light-mode {
    border-color: #00bfa5 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-teal.accent-4-dark-mode {
    background-color: #00bfa5 !important;
  }
  .dark-mode-teal-text.text-accent-4-dark-mode {
    color: #00bfa5 !important;
  }
  .dark-mode-teal-border.border-accent-4-dark-mode {
    border-color: #00bfa5 !important;
  }
}
.green {
  background-color: #4CAF50 !important;
}

.green-text {
  color: #4CAF50 !important;
}

.green-border {
  border-color: #4CAF50 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-green {
    background-color: #4CAF50 !important;
  }
  .light-mode-green-text {
    color: #4CAF50 !important;
  }
  .light-mode-green-border {
    border-color: #4CAF50 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-green {
    background-color: #4CAF50 !important;
  }
  .dark-mode-green-text {
    color: #4CAF50 !important;
  }
  .dark-mode-green-border {
    border-color: #4CAF50 !important;
  }
}
.green.lighten-5 {
  background-color: #E8F5E9 !important;
}

.green-text.text-lighten-5 {
  color: #E8F5E9 !important;
}

.green-border.border-lighten-5 {
  border-color: #E8F5E9 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-green.lighten-5-light-mode {
    background-color: #E8F5E9 !important;
  }
  .light-mode-green-text.text-lighten-5-light-mode {
    color: #E8F5E9 !important;
  }
  .light-mode-green-border.border-lighten-5-light-mode {
    border-color: #E8F5E9 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-green.lighten-5-dark-mode {
    background-color: #E8F5E9 !important;
  }
  .dark-mode-green-text.text-lighten-5-dark-mode {
    color: #E8F5E9 !important;
  }
  .dark-mode-green-border.border-lighten-5-dark-mode {
    border-color: #E8F5E9 !important;
  }
}
.green.lighten-4 {
  background-color: #C8E6C9 !important;
}

.green-text.text-lighten-4 {
  color: #C8E6C9 !important;
}

.green-border.border-lighten-4 {
  border-color: #C8E6C9 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-green.lighten-4-light-mode {
    background-color: #C8E6C9 !important;
  }
  .light-mode-green-text.text-lighten-4-light-mode {
    color: #C8E6C9 !important;
  }
  .light-mode-green-border.border-lighten-4-light-mode {
    border-color: #C8E6C9 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-green.lighten-4-dark-mode {
    background-color: #C8E6C9 !important;
  }
  .dark-mode-green-text.text-lighten-4-dark-mode {
    color: #C8E6C9 !important;
  }
  .dark-mode-green-border.border-lighten-4-dark-mode {
    border-color: #C8E6C9 !important;
  }
}
.green.lighten-3 {
  background-color: #A5D6A7 !important;
}

.green-text.text-lighten-3 {
  color: #A5D6A7 !important;
}

.green-border.border-lighten-3 {
  border-color: #A5D6A7 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-green.lighten-3-light-mode {
    background-color: #A5D6A7 !important;
  }
  .light-mode-green-text.text-lighten-3-light-mode {
    color: #A5D6A7 !important;
  }
  .light-mode-green-border.border-lighten-3-light-mode {
    border-color: #A5D6A7 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-green.lighten-3-dark-mode {
    background-color: #A5D6A7 !important;
  }
  .dark-mode-green-text.text-lighten-3-dark-mode {
    color: #A5D6A7 !important;
  }
  .dark-mode-green-border.border-lighten-3-dark-mode {
    border-color: #A5D6A7 !important;
  }
}
.green.lighten-2 {
  background-color: #81C784 !important;
}

.green-text.text-lighten-2 {
  color: #81C784 !important;
}

.green-border.border-lighten-2 {
  border-color: #81C784 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-green.lighten-2-light-mode {
    background-color: #81C784 !important;
  }
  .light-mode-green-text.text-lighten-2-light-mode {
    color: #81C784 !important;
  }
  .light-mode-green-border.border-lighten-2-light-mode {
    border-color: #81C784 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-green.lighten-2-dark-mode {
    background-color: #81C784 !important;
  }
  .dark-mode-green-text.text-lighten-2-dark-mode {
    color: #81C784 !important;
  }
  .dark-mode-green-border.border-lighten-2-dark-mode {
    border-color: #81C784 !important;
  }
}
.green.lighten-1 {
  background-color: #66BB6A !important;
}

.green-text.text-lighten-1 {
  color: #66BB6A !important;
}

.green-border.border-lighten-1 {
  border-color: #66BB6A !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-green.lighten-1-light-mode {
    background-color: #66BB6A !important;
  }
  .light-mode-green-text.text-lighten-1-light-mode {
    color: #66BB6A !important;
  }
  .light-mode-green-border.border-lighten-1-light-mode {
    border-color: #66BB6A !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-green.lighten-1-dark-mode {
    background-color: #66BB6A !important;
  }
  .dark-mode-green-text.text-lighten-1-dark-mode {
    color: #66BB6A !important;
  }
  .dark-mode-green-border.border-lighten-1-dark-mode {
    border-color: #66BB6A !important;
  }
}
.green.darken-1 {
  background-color: #43A047 !important;
}

.green-text.text-darken-1 {
  color: #43A047 !important;
}

.green-border.border-darken-1 {
  border-color: #43A047 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-green.darken-1-light-mode {
    background-color: #43A047 !important;
  }
  .light-mode-green-text.text-darken-1-light-mode {
    color: #43A047 !important;
  }
  .light-mode-green-border.border-darken-1-light-mode {
    border-color: #43A047 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-green.darken-1-dark-mode {
    background-color: #43A047 !important;
  }
  .dark-mode-green-text.text-darken-1-dark-mode {
    color: #43A047 !important;
  }
  .dark-mode-green-border.border-darken-1-dark-mode {
    border-color: #43A047 !important;
  }
}
.green.darken-2 {
  background-color: #388E3C !important;
}

.green-text.text-darken-2 {
  color: #388E3C !important;
}

.green-border.border-darken-2 {
  border-color: #388E3C !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-green.darken-2-light-mode {
    background-color: #388E3C !important;
  }
  .light-mode-green-text.text-darken-2-light-mode {
    color: #388E3C !important;
  }
  .light-mode-green-border.border-darken-2-light-mode {
    border-color: #388E3C !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-green.darken-2-dark-mode {
    background-color: #388E3C !important;
  }
  .dark-mode-green-text.text-darken-2-dark-mode {
    color: #388E3C !important;
  }
  .dark-mode-green-border.border-darken-2-dark-mode {
    border-color: #388E3C !important;
  }
}
.green.darken-3 {
  background-color: #2E7D32 !important;
}

.green-text.text-darken-3 {
  color: #2E7D32 !important;
}

.green-border.border-darken-3 {
  border-color: #2E7D32 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-green.darken-3-light-mode {
    background-color: #2E7D32 !important;
  }
  .light-mode-green-text.text-darken-3-light-mode {
    color: #2E7D32 !important;
  }
  .light-mode-green-border.border-darken-3-light-mode {
    border-color: #2E7D32 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-green.darken-3-dark-mode {
    background-color: #2E7D32 !important;
  }
  .dark-mode-green-text.text-darken-3-dark-mode {
    color: #2E7D32 !important;
  }
  .dark-mode-green-border.border-darken-3-dark-mode {
    border-color: #2E7D32 !important;
  }
}
.green.darken-4 {
  background-color: #1B5E20 !important;
}

.green-text.text-darken-4 {
  color: #1B5E20 !important;
}

.green-border.border-darken-4 {
  border-color: #1B5E20 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-green.darken-4-light-mode {
    background-color: #1B5E20 !important;
  }
  .light-mode-green-text.text-darken-4-light-mode {
    color: #1B5E20 !important;
  }
  .light-mode-green-border.border-darken-4-light-mode {
    border-color: #1B5E20 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-green.darken-4-dark-mode {
    background-color: #1B5E20 !important;
  }
  .dark-mode-green-text.text-darken-4-dark-mode {
    color: #1B5E20 !important;
  }
  .dark-mode-green-border.border-darken-4-dark-mode {
    border-color: #1B5E20 !important;
  }
}
.green.accent-1 {
  background-color: #B9F6CA !important;
}

.green-text.text-accent-1 {
  color: #B9F6CA !important;
}

.green-border.border-accent-1 {
  border-color: #B9F6CA !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-green.accent-1-light-mode {
    background-color: #B9F6CA !important;
  }
  .light-mode-green-text.text-accent-1-light-mode {
    color: #B9F6CA !important;
  }
  .light-mode-green-border.border-accent-1-light-mode {
    border-color: #B9F6CA !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-green.accent-1-dark-mode {
    background-color: #B9F6CA !important;
  }
  .dark-mode-green-text.text-accent-1-dark-mode {
    color: #B9F6CA !important;
  }
  .dark-mode-green-border.border-accent-1-dark-mode {
    border-color: #B9F6CA !important;
  }
}
.green.accent-2 {
  background-color: #69F0AE !important;
}

.green-text.text-accent-2 {
  color: #69F0AE !important;
}

.green-border.border-accent-2 {
  border-color: #69F0AE !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-green.accent-2-light-mode {
    background-color: #69F0AE !important;
  }
  .light-mode-green-text.text-accent-2-light-mode {
    color: #69F0AE !important;
  }
  .light-mode-green-border.border-accent-2-light-mode {
    border-color: #69F0AE !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-green.accent-2-dark-mode {
    background-color: #69F0AE !important;
  }
  .dark-mode-green-text.text-accent-2-dark-mode {
    color: #69F0AE !important;
  }
  .dark-mode-green-border.border-accent-2-dark-mode {
    border-color: #69F0AE !important;
  }
}
.green.accent-3 {
  background-color: #00E676 !important;
}

.green-text.text-accent-3 {
  color: #00E676 !important;
}

.green-border.border-accent-3 {
  border-color: #00E676 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-green.accent-3-light-mode {
    background-color: #00E676 !important;
  }
  .light-mode-green-text.text-accent-3-light-mode {
    color: #00E676 !important;
  }
  .light-mode-green-border.border-accent-3-light-mode {
    border-color: #00E676 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-green.accent-3-dark-mode {
    background-color: #00E676 !important;
  }
  .dark-mode-green-text.text-accent-3-dark-mode {
    color: #00E676 !important;
  }
  .dark-mode-green-border.border-accent-3-dark-mode {
    border-color: #00E676 !important;
  }
}
.green.accent-4 {
  background-color: #00C853 !important;
}

.green-text.text-accent-4 {
  color: #00C853 !important;
}

.green-border.border-accent-4 {
  border-color: #00C853 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-green.accent-4-light-mode {
    background-color: #00C853 !important;
  }
  .light-mode-green-text.text-accent-4-light-mode {
    color: #00C853 !important;
  }
  .light-mode-green-border.border-accent-4-light-mode {
    border-color: #00C853 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-green.accent-4-dark-mode {
    background-color: #00C853 !important;
  }
  .dark-mode-green-text.text-accent-4-dark-mode {
    color: #00C853 !important;
  }
  .dark-mode-green-border.border-accent-4-dark-mode {
    border-color: #00C853 !important;
  }
}
.light-green {
  background-color: #8bc34a !important;
}

.light-green-text {
  color: #8bc34a !important;
}

.light-green-border {
  border-color: #8bc34a !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-light-green {
    background-color: #8bc34a !important;
  }
  .light-mode-light-green-text {
    color: #8bc34a !important;
  }
  .light-mode-light-green-border {
    border-color: #8bc34a !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-light-green {
    background-color: #8bc34a !important;
  }
  .dark-mode-light-green-text {
    color: #8bc34a !important;
  }
  .dark-mode-light-green-border {
    border-color: #8bc34a !important;
  }
}
.light-green.lighten-5 {
  background-color: #f1f8e9 !important;
}

.light-green-text.text-lighten-5 {
  color: #f1f8e9 !important;
}

.light-green-border.border-lighten-5 {
  border-color: #f1f8e9 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-light-green.lighten-5-light-mode {
    background-color: #f1f8e9 !important;
  }
  .light-mode-light-green-text.text-lighten-5-light-mode {
    color: #f1f8e9 !important;
  }
  .light-mode-light-green-border.border-lighten-5-light-mode {
    border-color: #f1f8e9 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-light-green.lighten-5-dark-mode {
    background-color: #f1f8e9 !important;
  }
  .dark-mode-light-green-text.text-lighten-5-dark-mode {
    color: #f1f8e9 !important;
  }
  .dark-mode-light-green-border.border-lighten-5-dark-mode {
    border-color: #f1f8e9 !important;
  }
}
.light-green.lighten-4 {
  background-color: #dcedc8 !important;
}

.light-green-text.text-lighten-4 {
  color: #dcedc8 !important;
}

.light-green-border.border-lighten-4 {
  border-color: #dcedc8 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-light-green.lighten-4-light-mode {
    background-color: #dcedc8 !important;
  }
  .light-mode-light-green-text.text-lighten-4-light-mode {
    color: #dcedc8 !important;
  }
  .light-mode-light-green-border.border-lighten-4-light-mode {
    border-color: #dcedc8 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-light-green.lighten-4-dark-mode {
    background-color: #dcedc8 !important;
  }
  .dark-mode-light-green-text.text-lighten-4-dark-mode {
    color: #dcedc8 !important;
  }
  .dark-mode-light-green-border.border-lighten-4-dark-mode {
    border-color: #dcedc8 !important;
  }
}
.light-green.lighten-3 {
  background-color: #c5e1a5 !important;
}

.light-green-text.text-lighten-3 {
  color: #c5e1a5 !important;
}

.light-green-border.border-lighten-3 {
  border-color: #c5e1a5 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-light-green.lighten-3-light-mode {
    background-color: #c5e1a5 !important;
  }
  .light-mode-light-green-text.text-lighten-3-light-mode {
    color: #c5e1a5 !important;
  }
  .light-mode-light-green-border.border-lighten-3-light-mode {
    border-color: #c5e1a5 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-light-green.lighten-3-dark-mode {
    background-color: #c5e1a5 !important;
  }
  .dark-mode-light-green-text.text-lighten-3-dark-mode {
    color: #c5e1a5 !important;
  }
  .dark-mode-light-green-border.border-lighten-3-dark-mode {
    border-color: #c5e1a5 !important;
  }
}
.light-green.lighten-2 {
  background-color: #aed581 !important;
}

.light-green-text.text-lighten-2 {
  color: #aed581 !important;
}

.light-green-border.border-lighten-2 {
  border-color: #aed581 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-light-green.lighten-2-light-mode {
    background-color: #aed581 !important;
  }
  .light-mode-light-green-text.text-lighten-2-light-mode {
    color: #aed581 !important;
  }
  .light-mode-light-green-border.border-lighten-2-light-mode {
    border-color: #aed581 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-light-green.lighten-2-dark-mode {
    background-color: #aed581 !important;
  }
  .dark-mode-light-green-text.text-lighten-2-dark-mode {
    color: #aed581 !important;
  }
  .dark-mode-light-green-border.border-lighten-2-dark-mode {
    border-color: #aed581 !important;
  }
}
.light-green.lighten-1 {
  background-color: #9ccc65 !important;
}

.light-green-text.text-lighten-1 {
  color: #9ccc65 !important;
}

.light-green-border.border-lighten-1 {
  border-color: #9ccc65 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-light-green.lighten-1-light-mode {
    background-color: #9ccc65 !important;
  }
  .light-mode-light-green-text.text-lighten-1-light-mode {
    color: #9ccc65 !important;
  }
  .light-mode-light-green-border.border-lighten-1-light-mode {
    border-color: #9ccc65 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-light-green.lighten-1-dark-mode {
    background-color: #9ccc65 !important;
  }
  .dark-mode-light-green-text.text-lighten-1-dark-mode {
    color: #9ccc65 !important;
  }
  .dark-mode-light-green-border.border-lighten-1-dark-mode {
    border-color: #9ccc65 !important;
  }
}
.light-green.darken-1 {
  background-color: #7cb342 !important;
}

.light-green-text.text-darken-1 {
  color: #7cb342 !important;
}

.light-green-border.border-darken-1 {
  border-color: #7cb342 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-light-green.darken-1-light-mode {
    background-color: #7cb342 !important;
  }
  .light-mode-light-green-text.text-darken-1-light-mode {
    color: #7cb342 !important;
  }
  .light-mode-light-green-border.border-darken-1-light-mode {
    border-color: #7cb342 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-light-green.darken-1-dark-mode {
    background-color: #7cb342 !important;
  }
  .dark-mode-light-green-text.text-darken-1-dark-mode {
    color: #7cb342 !important;
  }
  .dark-mode-light-green-border.border-darken-1-dark-mode {
    border-color: #7cb342 !important;
  }
}
.light-green.darken-2 {
  background-color: #689f38 !important;
}

.light-green-text.text-darken-2 {
  color: #689f38 !important;
}

.light-green-border.border-darken-2 {
  border-color: #689f38 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-light-green.darken-2-light-mode {
    background-color: #689f38 !important;
  }
  .light-mode-light-green-text.text-darken-2-light-mode {
    color: #689f38 !important;
  }
  .light-mode-light-green-border.border-darken-2-light-mode {
    border-color: #689f38 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-light-green.darken-2-dark-mode {
    background-color: #689f38 !important;
  }
  .dark-mode-light-green-text.text-darken-2-dark-mode {
    color: #689f38 !important;
  }
  .dark-mode-light-green-border.border-darken-2-dark-mode {
    border-color: #689f38 !important;
  }
}
.light-green.darken-3 {
  background-color: #558b2f !important;
}

.light-green-text.text-darken-3 {
  color: #558b2f !important;
}

.light-green-border.border-darken-3 {
  border-color: #558b2f !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-light-green.darken-3-light-mode {
    background-color: #558b2f !important;
  }
  .light-mode-light-green-text.text-darken-3-light-mode {
    color: #558b2f !important;
  }
  .light-mode-light-green-border.border-darken-3-light-mode {
    border-color: #558b2f !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-light-green.darken-3-dark-mode {
    background-color: #558b2f !important;
  }
  .dark-mode-light-green-text.text-darken-3-dark-mode {
    color: #558b2f !important;
  }
  .dark-mode-light-green-border.border-darken-3-dark-mode {
    border-color: #558b2f !important;
  }
}
.light-green.darken-4 {
  background-color: #33691e !important;
}

.light-green-text.text-darken-4 {
  color: #33691e !important;
}

.light-green-border.border-darken-4 {
  border-color: #33691e !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-light-green.darken-4-light-mode {
    background-color: #33691e !important;
  }
  .light-mode-light-green-text.text-darken-4-light-mode {
    color: #33691e !important;
  }
  .light-mode-light-green-border.border-darken-4-light-mode {
    border-color: #33691e !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-light-green.darken-4-dark-mode {
    background-color: #33691e !important;
  }
  .dark-mode-light-green-text.text-darken-4-dark-mode {
    color: #33691e !important;
  }
  .dark-mode-light-green-border.border-darken-4-dark-mode {
    border-color: #33691e !important;
  }
}
.light-green.accent-1 {
  background-color: #ccff90 !important;
}

.light-green-text.text-accent-1 {
  color: #ccff90 !important;
}

.light-green-border.border-accent-1 {
  border-color: #ccff90 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-light-green.accent-1-light-mode {
    background-color: #ccff90 !important;
  }
  .light-mode-light-green-text.text-accent-1-light-mode {
    color: #ccff90 !important;
  }
  .light-mode-light-green-border.border-accent-1-light-mode {
    border-color: #ccff90 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-light-green.accent-1-dark-mode {
    background-color: #ccff90 !important;
  }
  .dark-mode-light-green-text.text-accent-1-dark-mode {
    color: #ccff90 !important;
  }
  .dark-mode-light-green-border.border-accent-1-dark-mode {
    border-color: #ccff90 !important;
  }
}
.light-green.accent-2 {
  background-color: #b2ff59 !important;
}

.light-green-text.text-accent-2 {
  color: #b2ff59 !important;
}

.light-green-border.border-accent-2 {
  border-color: #b2ff59 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-light-green.accent-2-light-mode {
    background-color: #b2ff59 !important;
  }
  .light-mode-light-green-text.text-accent-2-light-mode {
    color: #b2ff59 !important;
  }
  .light-mode-light-green-border.border-accent-2-light-mode {
    border-color: #b2ff59 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-light-green.accent-2-dark-mode {
    background-color: #b2ff59 !important;
  }
  .dark-mode-light-green-text.text-accent-2-dark-mode {
    color: #b2ff59 !important;
  }
  .dark-mode-light-green-border.border-accent-2-dark-mode {
    border-color: #b2ff59 !important;
  }
}
.light-green.accent-3 {
  background-color: #76ff03 !important;
}

.light-green-text.text-accent-3 {
  color: #76ff03 !important;
}

.light-green-border.border-accent-3 {
  border-color: #76ff03 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-light-green.accent-3-light-mode {
    background-color: #76ff03 !important;
  }
  .light-mode-light-green-text.text-accent-3-light-mode {
    color: #76ff03 !important;
  }
  .light-mode-light-green-border.border-accent-3-light-mode {
    border-color: #76ff03 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-light-green.accent-3-dark-mode {
    background-color: #76ff03 !important;
  }
  .dark-mode-light-green-text.text-accent-3-dark-mode {
    color: #76ff03 !important;
  }
  .dark-mode-light-green-border.border-accent-3-dark-mode {
    border-color: #76ff03 !important;
  }
}
.light-green.accent-4 {
  background-color: #64dd17 !important;
}

.light-green-text.text-accent-4 {
  color: #64dd17 !important;
}

.light-green-border.border-accent-4 {
  border-color: #64dd17 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-light-green.accent-4-light-mode {
    background-color: #64dd17 !important;
  }
  .light-mode-light-green-text.text-accent-4-light-mode {
    color: #64dd17 !important;
  }
  .light-mode-light-green-border.border-accent-4-light-mode {
    border-color: #64dd17 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-light-green.accent-4-dark-mode {
    background-color: #64dd17 !important;
  }
  .dark-mode-light-green-text.text-accent-4-dark-mode {
    color: #64dd17 !important;
  }
  .dark-mode-light-green-border.border-accent-4-dark-mode {
    border-color: #64dd17 !important;
  }
}
.lime {
  background-color: #cddc39 !important;
}

.lime-text {
  color: #cddc39 !important;
}

.lime-border {
  border-color: #cddc39 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-lime {
    background-color: #cddc39 !important;
  }
  .light-mode-lime-text {
    color: #cddc39 !important;
  }
  .light-mode-lime-border {
    border-color: #cddc39 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-lime {
    background-color: #cddc39 !important;
  }
  .dark-mode-lime-text {
    color: #cddc39 !important;
  }
  .dark-mode-lime-border {
    border-color: #cddc39 !important;
  }
}
.lime.lighten-5 {
  background-color: #f9fbe7 !important;
}

.lime-text.text-lighten-5 {
  color: #f9fbe7 !important;
}

.lime-border.border-lighten-5 {
  border-color: #f9fbe7 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-lime.lighten-5-light-mode {
    background-color: #f9fbe7 !important;
  }
  .light-mode-lime-text.text-lighten-5-light-mode {
    color: #f9fbe7 !important;
  }
  .light-mode-lime-border.border-lighten-5-light-mode {
    border-color: #f9fbe7 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-lime.lighten-5-dark-mode {
    background-color: #f9fbe7 !important;
  }
  .dark-mode-lime-text.text-lighten-5-dark-mode {
    color: #f9fbe7 !important;
  }
  .dark-mode-lime-border.border-lighten-5-dark-mode {
    border-color: #f9fbe7 !important;
  }
}
.lime.lighten-4 {
  background-color: #f0f4c3 !important;
}

.lime-text.text-lighten-4 {
  color: #f0f4c3 !important;
}

.lime-border.border-lighten-4 {
  border-color: #f0f4c3 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-lime.lighten-4-light-mode {
    background-color: #f0f4c3 !important;
  }
  .light-mode-lime-text.text-lighten-4-light-mode {
    color: #f0f4c3 !important;
  }
  .light-mode-lime-border.border-lighten-4-light-mode {
    border-color: #f0f4c3 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-lime.lighten-4-dark-mode {
    background-color: #f0f4c3 !important;
  }
  .dark-mode-lime-text.text-lighten-4-dark-mode {
    color: #f0f4c3 !important;
  }
  .dark-mode-lime-border.border-lighten-4-dark-mode {
    border-color: #f0f4c3 !important;
  }
}
.lime.lighten-3 {
  background-color: #e6ee9c !important;
}

.lime-text.text-lighten-3 {
  color: #e6ee9c !important;
}

.lime-border.border-lighten-3 {
  border-color: #e6ee9c !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-lime.lighten-3-light-mode {
    background-color: #e6ee9c !important;
  }
  .light-mode-lime-text.text-lighten-3-light-mode {
    color: #e6ee9c !important;
  }
  .light-mode-lime-border.border-lighten-3-light-mode {
    border-color: #e6ee9c !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-lime.lighten-3-dark-mode {
    background-color: #e6ee9c !important;
  }
  .dark-mode-lime-text.text-lighten-3-dark-mode {
    color: #e6ee9c !important;
  }
  .dark-mode-lime-border.border-lighten-3-dark-mode {
    border-color: #e6ee9c !important;
  }
}
.lime.lighten-2 {
  background-color: #dce775 !important;
}

.lime-text.text-lighten-2 {
  color: #dce775 !important;
}

.lime-border.border-lighten-2 {
  border-color: #dce775 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-lime.lighten-2-light-mode {
    background-color: #dce775 !important;
  }
  .light-mode-lime-text.text-lighten-2-light-mode {
    color: #dce775 !important;
  }
  .light-mode-lime-border.border-lighten-2-light-mode {
    border-color: #dce775 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-lime.lighten-2-dark-mode {
    background-color: #dce775 !important;
  }
  .dark-mode-lime-text.text-lighten-2-dark-mode {
    color: #dce775 !important;
  }
  .dark-mode-lime-border.border-lighten-2-dark-mode {
    border-color: #dce775 !important;
  }
}
.lime.lighten-1 {
  background-color: #d4e157 !important;
}

.lime-text.text-lighten-1 {
  color: #d4e157 !important;
}

.lime-border.border-lighten-1 {
  border-color: #d4e157 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-lime.lighten-1-light-mode {
    background-color: #d4e157 !important;
  }
  .light-mode-lime-text.text-lighten-1-light-mode {
    color: #d4e157 !important;
  }
  .light-mode-lime-border.border-lighten-1-light-mode {
    border-color: #d4e157 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-lime.lighten-1-dark-mode {
    background-color: #d4e157 !important;
  }
  .dark-mode-lime-text.text-lighten-1-dark-mode {
    color: #d4e157 !important;
  }
  .dark-mode-lime-border.border-lighten-1-dark-mode {
    border-color: #d4e157 !important;
  }
}
.lime.darken-1 {
  background-color: #c0ca33 !important;
}

.lime-text.text-darken-1 {
  color: #c0ca33 !important;
}

.lime-border.border-darken-1 {
  border-color: #c0ca33 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-lime.darken-1-light-mode {
    background-color: #c0ca33 !important;
  }
  .light-mode-lime-text.text-darken-1-light-mode {
    color: #c0ca33 !important;
  }
  .light-mode-lime-border.border-darken-1-light-mode {
    border-color: #c0ca33 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-lime.darken-1-dark-mode {
    background-color: #c0ca33 !important;
  }
  .dark-mode-lime-text.text-darken-1-dark-mode {
    color: #c0ca33 !important;
  }
  .dark-mode-lime-border.border-darken-1-dark-mode {
    border-color: #c0ca33 !important;
  }
}
.lime.darken-2 {
  background-color: #afb42b !important;
}

.lime-text.text-darken-2 {
  color: #afb42b !important;
}

.lime-border.border-darken-2 {
  border-color: #afb42b !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-lime.darken-2-light-mode {
    background-color: #afb42b !important;
  }
  .light-mode-lime-text.text-darken-2-light-mode {
    color: #afb42b !important;
  }
  .light-mode-lime-border.border-darken-2-light-mode {
    border-color: #afb42b !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-lime.darken-2-dark-mode {
    background-color: #afb42b !important;
  }
  .dark-mode-lime-text.text-darken-2-dark-mode {
    color: #afb42b !important;
  }
  .dark-mode-lime-border.border-darken-2-dark-mode {
    border-color: #afb42b !important;
  }
}
.lime.darken-3 {
  background-color: #9e9d24 !important;
}

.lime-text.text-darken-3 {
  color: #9e9d24 !important;
}

.lime-border.border-darken-3 {
  border-color: #9e9d24 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-lime.darken-3-light-mode {
    background-color: #9e9d24 !important;
  }
  .light-mode-lime-text.text-darken-3-light-mode {
    color: #9e9d24 !important;
  }
  .light-mode-lime-border.border-darken-3-light-mode {
    border-color: #9e9d24 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-lime.darken-3-dark-mode {
    background-color: #9e9d24 !important;
  }
  .dark-mode-lime-text.text-darken-3-dark-mode {
    color: #9e9d24 !important;
  }
  .dark-mode-lime-border.border-darken-3-dark-mode {
    border-color: #9e9d24 !important;
  }
}
.lime.darken-4 {
  background-color: #827717 !important;
}

.lime-text.text-darken-4 {
  color: #827717 !important;
}

.lime-border.border-darken-4 {
  border-color: #827717 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-lime.darken-4-light-mode {
    background-color: #827717 !important;
  }
  .light-mode-lime-text.text-darken-4-light-mode {
    color: #827717 !important;
  }
  .light-mode-lime-border.border-darken-4-light-mode {
    border-color: #827717 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-lime.darken-4-dark-mode {
    background-color: #827717 !important;
  }
  .dark-mode-lime-text.text-darken-4-dark-mode {
    color: #827717 !important;
  }
  .dark-mode-lime-border.border-darken-4-dark-mode {
    border-color: #827717 !important;
  }
}
.lime.accent-1 {
  background-color: #f4ff81 !important;
}

.lime-text.text-accent-1 {
  color: #f4ff81 !important;
}

.lime-border.border-accent-1 {
  border-color: #f4ff81 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-lime.accent-1-light-mode {
    background-color: #f4ff81 !important;
  }
  .light-mode-lime-text.text-accent-1-light-mode {
    color: #f4ff81 !important;
  }
  .light-mode-lime-border.border-accent-1-light-mode {
    border-color: #f4ff81 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-lime.accent-1-dark-mode {
    background-color: #f4ff81 !important;
  }
  .dark-mode-lime-text.text-accent-1-dark-mode {
    color: #f4ff81 !important;
  }
  .dark-mode-lime-border.border-accent-1-dark-mode {
    border-color: #f4ff81 !important;
  }
}
.lime.accent-2 {
  background-color: #eeff41 !important;
}

.lime-text.text-accent-2 {
  color: #eeff41 !important;
}

.lime-border.border-accent-2 {
  border-color: #eeff41 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-lime.accent-2-light-mode {
    background-color: #eeff41 !important;
  }
  .light-mode-lime-text.text-accent-2-light-mode {
    color: #eeff41 !important;
  }
  .light-mode-lime-border.border-accent-2-light-mode {
    border-color: #eeff41 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-lime.accent-2-dark-mode {
    background-color: #eeff41 !important;
  }
  .dark-mode-lime-text.text-accent-2-dark-mode {
    color: #eeff41 !important;
  }
  .dark-mode-lime-border.border-accent-2-dark-mode {
    border-color: #eeff41 !important;
  }
}
.lime.accent-3 {
  background-color: #c6ff00 !important;
}

.lime-text.text-accent-3 {
  color: #c6ff00 !important;
}

.lime-border.border-accent-3 {
  border-color: #c6ff00 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-lime.accent-3-light-mode {
    background-color: #c6ff00 !important;
  }
  .light-mode-lime-text.text-accent-3-light-mode {
    color: #c6ff00 !important;
  }
  .light-mode-lime-border.border-accent-3-light-mode {
    border-color: #c6ff00 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-lime.accent-3-dark-mode {
    background-color: #c6ff00 !important;
  }
  .dark-mode-lime-text.text-accent-3-dark-mode {
    color: #c6ff00 !important;
  }
  .dark-mode-lime-border.border-accent-3-dark-mode {
    border-color: #c6ff00 !important;
  }
}
.lime.accent-4 {
  background-color: #aeea00 !important;
}

.lime-text.text-accent-4 {
  color: #aeea00 !important;
}

.lime-border.border-accent-4 {
  border-color: #aeea00 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-lime.accent-4-light-mode {
    background-color: #aeea00 !important;
  }
  .light-mode-lime-text.text-accent-4-light-mode {
    color: #aeea00 !important;
  }
  .light-mode-lime-border.border-accent-4-light-mode {
    border-color: #aeea00 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-lime.accent-4-dark-mode {
    background-color: #aeea00 !important;
  }
  .dark-mode-lime-text.text-accent-4-dark-mode {
    color: #aeea00 !important;
  }
  .dark-mode-lime-border.border-accent-4-dark-mode {
    border-color: #aeea00 !important;
  }
}
.yellow {
  background-color: #ffeb3b !important;
}

.yellow-text {
  color: #ffeb3b !important;
}

.yellow-border {
  border-color: #ffeb3b !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-yellow {
    background-color: #ffeb3b !important;
  }
  .light-mode-yellow-text {
    color: #ffeb3b !important;
  }
  .light-mode-yellow-border {
    border-color: #ffeb3b !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-yellow {
    background-color: #ffeb3b !important;
  }
  .dark-mode-yellow-text {
    color: #ffeb3b !important;
  }
  .dark-mode-yellow-border {
    border-color: #ffeb3b !important;
  }
}
.yellow.lighten-5 {
  background-color: #fffde7 !important;
}

.yellow-text.text-lighten-5 {
  color: #fffde7 !important;
}

.yellow-border.border-lighten-5 {
  border-color: #fffde7 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-yellow.lighten-5-light-mode {
    background-color: #fffde7 !important;
  }
  .light-mode-yellow-text.text-lighten-5-light-mode {
    color: #fffde7 !important;
  }
  .light-mode-yellow-border.border-lighten-5-light-mode {
    border-color: #fffde7 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-yellow.lighten-5-dark-mode {
    background-color: #fffde7 !important;
  }
  .dark-mode-yellow-text.text-lighten-5-dark-mode {
    color: #fffde7 !important;
  }
  .dark-mode-yellow-border.border-lighten-5-dark-mode {
    border-color: #fffde7 !important;
  }
}
.yellow.lighten-4 {
  background-color: #fff9c4 !important;
}

.yellow-text.text-lighten-4 {
  color: #fff9c4 !important;
}

.yellow-border.border-lighten-4 {
  border-color: #fff9c4 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-yellow.lighten-4-light-mode {
    background-color: #fff9c4 !important;
  }
  .light-mode-yellow-text.text-lighten-4-light-mode {
    color: #fff9c4 !important;
  }
  .light-mode-yellow-border.border-lighten-4-light-mode {
    border-color: #fff9c4 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-yellow.lighten-4-dark-mode {
    background-color: #fff9c4 !important;
  }
  .dark-mode-yellow-text.text-lighten-4-dark-mode {
    color: #fff9c4 !important;
  }
  .dark-mode-yellow-border.border-lighten-4-dark-mode {
    border-color: #fff9c4 !important;
  }
}
.yellow.lighten-3 {
  background-color: #fff59d !important;
}

.yellow-text.text-lighten-3 {
  color: #fff59d !important;
}

.yellow-border.border-lighten-3 {
  border-color: #fff59d !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-yellow.lighten-3-light-mode {
    background-color: #fff59d !important;
  }
  .light-mode-yellow-text.text-lighten-3-light-mode {
    color: #fff59d !important;
  }
  .light-mode-yellow-border.border-lighten-3-light-mode {
    border-color: #fff59d !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-yellow.lighten-3-dark-mode {
    background-color: #fff59d !important;
  }
  .dark-mode-yellow-text.text-lighten-3-dark-mode {
    color: #fff59d !important;
  }
  .dark-mode-yellow-border.border-lighten-3-dark-mode {
    border-color: #fff59d !important;
  }
}
.yellow.lighten-2 {
  background-color: #fff176 !important;
}

.yellow-text.text-lighten-2 {
  color: #fff176 !important;
}

.yellow-border.border-lighten-2 {
  border-color: #fff176 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-yellow.lighten-2-light-mode {
    background-color: #fff176 !important;
  }
  .light-mode-yellow-text.text-lighten-2-light-mode {
    color: #fff176 !important;
  }
  .light-mode-yellow-border.border-lighten-2-light-mode {
    border-color: #fff176 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-yellow.lighten-2-dark-mode {
    background-color: #fff176 !important;
  }
  .dark-mode-yellow-text.text-lighten-2-dark-mode {
    color: #fff176 !important;
  }
  .dark-mode-yellow-border.border-lighten-2-dark-mode {
    border-color: #fff176 !important;
  }
}
.yellow.lighten-1 {
  background-color: #ffee58 !important;
}

.yellow-text.text-lighten-1 {
  color: #ffee58 !important;
}

.yellow-border.border-lighten-1 {
  border-color: #ffee58 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-yellow.lighten-1-light-mode {
    background-color: #ffee58 !important;
  }
  .light-mode-yellow-text.text-lighten-1-light-mode {
    color: #ffee58 !important;
  }
  .light-mode-yellow-border.border-lighten-1-light-mode {
    border-color: #ffee58 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-yellow.lighten-1-dark-mode {
    background-color: #ffee58 !important;
  }
  .dark-mode-yellow-text.text-lighten-1-dark-mode {
    color: #ffee58 !important;
  }
  .dark-mode-yellow-border.border-lighten-1-dark-mode {
    border-color: #ffee58 !important;
  }
}
.yellow.darken-1 {
  background-color: #fdd835 !important;
}

.yellow-text.text-darken-1 {
  color: #fdd835 !important;
}

.yellow-border.border-darken-1 {
  border-color: #fdd835 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-yellow.darken-1-light-mode {
    background-color: #fdd835 !important;
  }
  .light-mode-yellow-text.text-darken-1-light-mode {
    color: #fdd835 !important;
  }
  .light-mode-yellow-border.border-darken-1-light-mode {
    border-color: #fdd835 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-yellow.darken-1-dark-mode {
    background-color: #fdd835 !important;
  }
  .dark-mode-yellow-text.text-darken-1-dark-mode {
    color: #fdd835 !important;
  }
  .dark-mode-yellow-border.border-darken-1-dark-mode {
    border-color: #fdd835 !important;
  }
}
.yellow.darken-2 {
  background-color: #fbc02d !important;
}

.yellow-text.text-darken-2 {
  color: #fbc02d !important;
}

.yellow-border.border-darken-2 {
  border-color: #fbc02d !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-yellow.darken-2-light-mode {
    background-color: #fbc02d !important;
  }
  .light-mode-yellow-text.text-darken-2-light-mode {
    color: #fbc02d !important;
  }
  .light-mode-yellow-border.border-darken-2-light-mode {
    border-color: #fbc02d !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-yellow.darken-2-dark-mode {
    background-color: #fbc02d !important;
  }
  .dark-mode-yellow-text.text-darken-2-dark-mode {
    color: #fbc02d !important;
  }
  .dark-mode-yellow-border.border-darken-2-dark-mode {
    border-color: #fbc02d !important;
  }
}
.yellow.darken-3 {
  background-color: #f9a825 !important;
}

.yellow-text.text-darken-3 {
  color: #f9a825 !important;
}

.yellow-border.border-darken-3 {
  border-color: #f9a825 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-yellow.darken-3-light-mode {
    background-color: #f9a825 !important;
  }
  .light-mode-yellow-text.text-darken-3-light-mode {
    color: #f9a825 !important;
  }
  .light-mode-yellow-border.border-darken-3-light-mode {
    border-color: #f9a825 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-yellow.darken-3-dark-mode {
    background-color: #f9a825 !important;
  }
  .dark-mode-yellow-text.text-darken-3-dark-mode {
    color: #f9a825 !important;
  }
  .dark-mode-yellow-border.border-darken-3-dark-mode {
    border-color: #f9a825 !important;
  }
}
.yellow.darken-4 {
  background-color: #f57f17 !important;
}

.yellow-text.text-darken-4 {
  color: #f57f17 !important;
}

.yellow-border.border-darken-4 {
  border-color: #f57f17 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-yellow.darken-4-light-mode {
    background-color: #f57f17 !important;
  }
  .light-mode-yellow-text.text-darken-4-light-mode {
    color: #f57f17 !important;
  }
  .light-mode-yellow-border.border-darken-4-light-mode {
    border-color: #f57f17 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-yellow.darken-4-dark-mode {
    background-color: #f57f17 !important;
  }
  .dark-mode-yellow-text.text-darken-4-dark-mode {
    color: #f57f17 !important;
  }
  .dark-mode-yellow-border.border-darken-4-dark-mode {
    border-color: #f57f17 !important;
  }
}
.yellow.accent-1 {
  background-color: #ffff8d !important;
}

.yellow-text.text-accent-1 {
  color: #ffff8d !important;
}

.yellow-border.border-accent-1 {
  border-color: #ffff8d !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-yellow.accent-1-light-mode {
    background-color: #ffff8d !important;
  }
  .light-mode-yellow-text.text-accent-1-light-mode {
    color: #ffff8d !important;
  }
  .light-mode-yellow-border.border-accent-1-light-mode {
    border-color: #ffff8d !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-yellow.accent-1-dark-mode {
    background-color: #ffff8d !important;
  }
  .dark-mode-yellow-text.text-accent-1-dark-mode {
    color: #ffff8d !important;
  }
  .dark-mode-yellow-border.border-accent-1-dark-mode {
    border-color: #ffff8d !important;
  }
}
.yellow.accent-2 {
  background-color: #ffff00 !important;
}

.yellow-text.text-accent-2 {
  color: #ffff00 !important;
}

.yellow-border.border-accent-2 {
  border-color: #ffff00 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-yellow.accent-2-light-mode {
    background-color: #ffff00 !important;
  }
  .light-mode-yellow-text.text-accent-2-light-mode {
    color: #ffff00 !important;
  }
  .light-mode-yellow-border.border-accent-2-light-mode {
    border-color: #ffff00 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-yellow.accent-2-dark-mode {
    background-color: #ffff00 !important;
  }
  .dark-mode-yellow-text.text-accent-2-dark-mode {
    color: #ffff00 !important;
  }
  .dark-mode-yellow-border.border-accent-2-dark-mode {
    border-color: #ffff00 !important;
  }
}
.yellow.accent-3 {
  background-color: #ffea00 !important;
}

.yellow-text.text-accent-3 {
  color: #ffea00 !important;
}

.yellow-border.border-accent-3 {
  border-color: #ffea00 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-yellow.accent-3-light-mode {
    background-color: #ffea00 !important;
  }
  .light-mode-yellow-text.text-accent-3-light-mode {
    color: #ffea00 !important;
  }
  .light-mode-yellow-border.border-accent-3-light-mode {
    border-color: #ffea00 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-yellow.accent-3-dark-mode {
    background-color: #ffea00 !important;
  }
  .dark-mode-yellow-text.text-accent-3-dark-mode {
    color: #ffea00 !important;
  }
  .dark-mode-yellow-border.border-accent-3-dark-mode {
    border-color: #ffea00 !important;
  }
}
.yellow.accent-4 {
  background-color: #ffd600 !important;
}

.yellow-text.text-accent-4 {
  color: #ffd600 !important;
}

.yellow-border.border-accent-4 {
  border-color: #ffd600 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-yellow.accent-4-light-mode {
    background-color: #ffd600 !important;
  }
  .light-mode-yellow-text.text-accent-4-light-mode {
    color: #ffd600 !important;
  }
  .light-mode-yellow-border.border-accent-4-light-mode {
    border-color: #ffd600 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-yellow.accent-4-dark-mode {
    background-color: #ffd600 !important;
  }
  .dark-mode-yellow-text.text-accent-4-dark-mode {
    color: #ffd600 !important;
  }
  .dark-mode-yellow-border.border-accent-4-dark-mode {
    border-color: #ffd600 !important;
  }
}
.amber {
  background-color: #ffc107 !important;
}

.amber-text {
  color: #ffc107 !important;
}

.amber-border {
  border-color: #ffc107 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-amber {
    background-color: #ffc107 !important;
  }
  .light-mode-amber-text {
    color: #ffc107 !important;
  }
  .light-mode-amber-border {
    border-color: #ffc107 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-amber {
    background-color: #ffc107 !important;
  }
  .dark-mode-amber-text {
    color: #ffc107 !important;
  }
  .dark-mode-amber-border {
    border-color: #ffc107 !important;
  }
}
.amber.lighten-5 {
  background-color: #fff8e1 !important;
}

.amber-text.text-lighten-5 {
  color: #fff8e1 !important;
}

.amber-border.border-lighten-5 {
  border-color: #fff8e1 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-amber.lighten-5-light-mode {
    background-color: #fff8e1 !important;
  }
  .light-mode-amber-text.text-lighten-5-light-mode {
    color: #fff8e1 !important;
  }
  .light-mode-amber-border.border-lighten-5-light-mode {
    border-color: #fff8e1 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-amber.lighten-5-dark-mode {
    background-color: #fff8e1 !important;
  }
  .dark-mode-amber-text.text-lighten-5-dark-mode {
    color: #fff8e1 !important;
  }
  .dark-mode-amber-border.border-lighten-5-dark-mode {
    border-color: #fff8e1 !important;
  }
}
.amber.lighten-4 {
  background-color: #ffecb3 !important;
}

.amber-text.text-lighten-4 {
  color: #ffecb3 !important;
}

.amber-border.border-lighten-4 {
  border-color: #ffecb3 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-amber.lighten-4-light-mode {
    background-color: #ffecb3 !important;
  }
  .light-mode-amber-text.text-lighten-4-light-mode {
    color: #ffecb3 !important;
  }
  .light-mode-amber-border.border-lighten-4-light-mode {
    border-color: #ffecb3 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-amber.lighten-4-dark-mode {
    background-color: #ffecb3 !important;
  }
  .dark-mode-amber-text.text-lighten-4-dark-mode {
    color: #ffecb3 !important;
  }
  .dark-mode-amber-border.border-lighten-4-dark-mode {
    border-color: #ffecb3 !important;
  }
}
.amber.lighten-3 {
  background-color: #ffe082 !important;
}

.amber-text.text-lighten-3 {
  color: #ffe082 !important;
}

.amber-border.border-lighten-3 {
  border-color: #ffe082 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-amber.lighten-3-light-mode {
    background-color: #ffe082 !important;
  }
  .light-mode-amber-text.text-lighten-3-light-mode {
    color: #ffe082 !important;
  }
  .light-mode-amber-border.border-lighten-3-light-mode {
    border-color: #ffe082 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-amber.lighten-3-dark-mode {
    background-color: #ffe082 !important;
  }
  .dark-mode-amber-text.text-lighten-3-dark-mode {
    color: #ffe082 !important;
  }
  .dark-mode-amber-border.border-lighten-3-dark-mode {
    border-color: #ffe082 !important;
  }
}
.amber.lighten-2 {
  background-color: #ffd54f !important;
}

.amber-text.text-lighten-2 {
  color: #ffd54f !important;
}

.amber-border.border-lighten-2 {
  border-color: #ffd54f !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-amber.lighten-2-light-mode {
    background-color: #ffd54f !important;
  }
  .light-mode-amber-text.text-lighten-2-light-mode {
    color: #ffd54f !important;
  }
  .light-mode-amber-border.border-lighten-2-light-mode {
    border-color: #ffd54f !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-amber.lighten-2-dark-mode {
    background-color: #ffd54f !important;
  }
  .dark-mode-amber-text.text-lighten-2-dark-mode {
    color: #ffd54f !important;
  }
  .dark-mode-amber-border.border-lighten-2-dark-mode {
    border-color: #ffd54f !important;
  }
}
.amber.lighten-1 {
  background-color: #ffca28 !important;
}

.amber-text.text-lighten-1 {
  color: #ffca28 !important;
}

.amber-border.border-lighten-1 {
  border-color: #ffca28 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-amber.lighten-1-light-mode {
    background-color: #ffca28 !important;
  }
  .light-mode-amber-text.text-lighten-1-light-mode {
    color: #ffca28 !important;
  }
  .light-mode-amber-border.border-lighten-1-light-mode {
    border-color: #ffca28 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-amber.lighten-1-dark-mode {
    background-color: #ffca28 !important;
  }
  .dark-mode-amber-text.text-lighten-1-dark-mode {
    color: #ffca28 !important;
  }
  .dark-mode-amber-border.border-lighten-1-dark-mode {
    border-color: #ffca28 !important;
  }
}
.amber.darken-1 {
  background-color: #ffb300 !important;
}

.amber-text.text-darken-1 {
  color: #ffb300 !important;
}

.amber-border.border-darken-1 {
  border-color: #ffb300 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-amber.darken-1-light-mode {
    background-color: #ffb300 !important;
  }
  .light-mode-amber-text.text-darken-1-light-mode {
    color: #ffb300 !important;
  }
  .light-mode-amber-border.border-darken-1-light-mode {
    border-color: #ffb300 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-amber.darken-1-dark-mode {
    background-color: #ffb300 !important;
  }
  .dark-mode-amber-text.text-darken-1-dark-mode {
    color: #ffb300 !important;
  }
  .dark-mode-amber-border.border-darken-1-dark-mode {
    border-color: #ffb300 !important;
  }
}
.amber.darken-2 {
  background-color: #ffa000 !important;
}

.amber-text.text-darken-2 {
  color: #ffa000 !important;
}

.amber-border.border-darken-2 {
  border-color: #ffa000 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-amber.darken-2-light-mode {
    background-color: #ffa000 !important;
  }
  .light-mode-amber-text.text-darken-2-light-mode {
    color: #ffa000 !important;
  }
  .light-mode-amber-border.border-darken-2-light-mode {
    border-color: #ffa000 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-amber.darken-2-dark-mode {
    background-color: #ffa000 !important;
  }
  .dark-mode-amber-text.text-darken-2-dark-mode {
    color: #ffa000 !important;
  }
  .dark-mode-amber-border.border-darken-2-dark-mode {
    border-color: #ffa000 !important;
  }
}
.amber.darken-3 {
  background-color: #ff8f00 !important;
}

.amber-text.text-darken-3 {
  color: #ff8f00 !important;
}

.amber-border.border-darken-3 {
  border-color: #ff8f00 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-amber.darken-3-light-mode {
    background-color: #ff8f00 !important;
  }
  .light-mode-amber-text.text-darken-3-light-mode {
    color: #ff8f00 !important;
  }
  .light-mode-amber-border.border-darken-3-light-mode {
    border-color: #ff8f00 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-amber.darken-3-dark-mode {
    background-color: #ff8f00 !important;
  }
  .dark-mode-amber-text.text-darken-3-dark-mode {
    color: #ff8f00 !important;
  }
  .dark-mode-amber-border.border-darken-3-dark-mode {
    border-color: #ff8f00 !important;
  }
}
.amber.darken-4 {
  background-color: #ff6f00 !important;
}

.amber-text.text-darken-4 {
  color: #ff6f00 !important;
}

.amber-border.border-darken-4 {
  border-color: #ff6f00 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-amber.darken-4-light-mode {
    background-color: #ff6f00 !important;
  }
  .light-mode-amber-text.text-darken-4-light-mode {
    color: #ff6f00 !important;
  }
  .light-mode-amber-border.border-darken-4-light-mode {
    border-color: #ff6f00 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-amber.darken-4-dark-mode {
    background-color: #ff6f00 !important;
  }
  .dark-mode-amber-text.text-darken-4-dark-mode {
    color: #ff6f00 !important;
  }
  .dark-mode-amber-border.border-darken-4-dark-mode {
    border-color: #ff6f00 !important;
  }
}
.amber.accent-1 {
  background-color: #ffe57f !important;
}

.amber-text.text-accent-1 {
  color: #ffe57f !important;
}

.amber-border.border-accent-1 {
  border-color: #ffe57f !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-amber.accent-1-light-mode {
    background-color: #ffe57f !important;
  }
  .light-mode-amber-text.text-accent-1-light-mode {
    color: #ffe57f !important;
  }
  .light-mode-amber-border.border-accent-1-light-mode {
    border-color: #ffe57f !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-amber.accent-1-dark-mode {
    background-color: #ffe57f !important;
  }
  .dark-mode-amber-text.text-accent-1-dark-mode {
    color: #ffe57f !important;
  }
  .dark-mode-amber-border.border-accent-1-dark-mode {
    border-color: #ffe57f !important;
  }
}
.amber.accent-2 {
  background-color: #ffd740 !important;
}

.amber-text.text-accent-2 {
  color: #ffd740 !important;
}

.amber-border.border-accent-2 {
  border-color: #ffd740 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-amber.accent-2-light-mode {
    background-color: #ffd740 !important;
  }
  .light-mode-amber-text.text-accent-2-light-mode {
    color: #ffd740 !important;
  }
  .light-mode-amber-border.border-accent-2-light-mode {
    border-color: #ffd740 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-amber.accent-2-dark-mode {
    background-color: #ffd740 !important;
  }
  .dark-mode-amber-text.text-accent-2-dark-mode {
    color: #ffd740 !important;
  }
  .dark-mode-amber-border.border-accent-2-dark-mode {
    border-color: #ffd740 !important;
  }
}
.amber.accent-3 {
  background-color: #ffc400 !important;
}

.amber-text.text-accent-3 {
  color: #ffc400 !important;
}

.amber-border.border-accent-3 {
  border-color: #ffc400 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-amber.accent-3-light-mode {
    background-color: #ffc400 !important;
  }
  .light-mode-amber-text.text-accent-3-light-mode {
    color: #ffc400 !important;
  }
  .light-mode-amber-border.border-accent-3-light-mode {
    border-color: #ffc400 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-amber.accent-3-dark-mode {
    background-color: #ffc400 !important;
  }
  .dark-mode-amber-text.text-accent-3-dark-mode {
    color: #ffc400 !important;
  }
  .dark-mode-amber-border.border-accent-3-dark-mode {
    border-color: #ffc400 !important;
  }
}
.amber.accent-4 {
  background-color: #ffab00 !important;
}

.amber-text.text-accent-4 {
  color: #ffab00 !important;
}

.amber-border.border-accent-4 {
  border-color: #ffab00 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-amber.accent-4-light-mode {
    background-color: #ffab00 !important;
  }
  .light-mode-amber-text.text-accent-4-light-mode {
    color: #ffab00 !important;
  }
  .light-mode-amber-border.border-accent-4-light-mode {
    border-color: #ffab00 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-amber.accent-4-dark-mode {
    background-color: #ffab00 !important;
  }
  .dark-mode-amber-text.text-accent-4-dark-mode {
    color: #ffab00 !important;
  }
  .dark-mode-amber-border.border-accent-4-dark-mode {
    border-color: #ffab00 !important;
  }
}
.orange {
  background-color: #ff9800 !important;
}

.orange-text {
  color: #ff9800 !important;
}

.orange-border {
  border-color: #ff9800 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-orange {
    background-color: #ff9800 !important;
  }
  .light-mode-orange-text {
    color: #ff9800 !important;
  }
  .light-mode-orange-border {
    border-color: #ff9800 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-orange {
    background-color: #ff9800 !important;
  }
  .dark-mode-orange-text {
    color: #ff9800 !important;
  }
  .dark-mode-orange-border {
    border-color: #ff9800 !important;
  }
}
.orange.lighten-5 {
  background-color: #fff3e0 !important;
}

.orange-text.text-lighten-5 {
  color: #fff3e0 !important;
}

.orange-border.border-lighten-5 {
  border-color: #fff3e0 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-orange.lighten-5-light-mode {
    background-color: #fff3e0 !important;
  }
  .light-mode-orange-text.text-lighten-5-light-mode {
    color: #fff3e0 !important;
  }
  .light-mode-orange-border.border-lighten-5-light-mode {
    border-color: #fff3e0 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-orange.lighten-5-dark-mode {
    background-color: #fff3e0 !important;
  }
  .dark-mode-orange-text.text-lighten-5-dark-mode {
    color: #fff3e0 !important;
  }
  .dark-mode-orange-border.border-lighten-5-dark-mode {
    border-color: #fff3e0 !important;
  }
}
.orange.lighten-4 {
  background-color: #ffe0b2 !important;
}

.orange-text.text-lighten-4 {
  color: #ffe0b2 !important;
}

.orange-border.border-lighten-4 {
  border-color: #ffe0b2 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-orange.lighten-4-light-mode {
    background-color: #ffe0b2 !important;
  }
  .light-mode-orange-text.text-lighten-4-light-mode {
    color: #ffe0b2 !important;
  }
  .light-mode-orange-border.border-lighten-4-light-mode {
    border-color: #ffe0b2 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-orange.lighten-4-dark-mode {
    background-color: #ffe0b2 !important;
  }
  .dark-mode-orange-text.text-lighten-4-dark-mode {
    color: #ffe0b2 !important;
  }
  .dark-mode-orange-border.border-lighten-4-dark-mode {
    border-color: #ffe0b2 !important;
  }
}
.orange.lighten-3 {
  background-color: #ffcc80 !important;
}

.orange-text.text-lighten-3 {
  color: #ffcc80 !important;
}

.orange-border.border-lighten-3 {
  border-color: #ffcc80 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-orange.lighten-3-light-mode {
    background-color: #ffcc80 !important;
  }
  .light-mode-orange-text.text-lighten-3-light-mode {
    color: #ffcc80 !important;
  }
  .light-mode-orange-border.border-lighten-3-light-mode {
    border-color: #ffcc80 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-orange.lighten-3-dark-mode {
    background-color: #ffcc80 !important;
  }
  .dark-mode-orange-text.text-lighten-3-dark-mode {
    color: #ffcc80 !important;
  }
  .dark-mode-orange-border.border-lighten-3-dark-mode {
    border-color: #ffcc80 !important;
  }
}
.orange.lighten-2 {
  background-color: #ffb74d !important;
}

.orange-text.text-lighten-2 {
  color: #ffb74d !important;
}

.orange-border.border-lighten-2 {
  border-color: #ffb74d !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-orange.lighten-2-light-mode {
    background-color: #ffb74d !important;
  }
  .light-mode-orange-text.text-lighten-2-light-mode {
    color: #ffb74d !important;
  }
  .light-mode-orange-border.border-lighten-2-light-mode {
    border-color: #ffb74d !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-orange.lighten-2-dark-mode {
    background-color: #ffb74d !important;
  }
  .dark-mode-orange-text.text-lighten-2-dark-mode {
    color: #ffb74d !important;
  }
  .dark-mode-orange-border.border-lighten-2-dark-mode {
    border-color: #ffb74d !important;
  }
}
.orange.lighten-1 {
  background-color: #ffa726 !important;
}

.orange-text.text-lighten-1 {
  color: #ffa726 !important;
}

.orange-border.border-lighten-1 {
  border-color: #ffa726 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-orange.lighten-1-light-mode {
    background-color: #ffa726 !important;
  }
  .light-mode-orange-text.text-lighten-1-light-mode {
    color: #ffa726 !important;
  }
  .light-mode-orange-border.border-lighten-1-light-mode {
    border-color: #ffa726 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-orange.lighten-1-dark-mode {
    background-color: #ffa726 !important;
  }
  .dark-mode-orange-text.text-lighten-1-dark-mode {
    color: #ffa726 !important;
  }
  .dark-mode-orange-border.border-lighten-1-dark-mode {
    border-color: #ffa726 !important;
  }
}
.orange.darken-1 {
  background-color: #fb8c00 !important;
}

.orange-text.text-darken-1 {
  color: #fb8c00 !important;
}

.orange-border.border-darken-1 {
  border-color: #fb8c00 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-orange.darken-1-light-mode {
    background-color: #fb8c00 !important;
  }
  .light-mode-orange-text.text-darken-1-light-mode {
    color: #fb8c00 !important;
  }
  .light-mode-orange-border.border-darken-1-light-mode {
    border-color: #fb8c00 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-orange.darken-1-dark-mode {
    background-color: #fb8c00 !important;
  }
  .dark-mode-orange-text.text-darken-1-dark-mode {
    color: #fb8c00 !important;
  }
  .dark-mode-orange-border.border-darken-1-dark-mode {
    border-color: #fb8c00 !important;
  }
}
.orange.darken-2 {
  background-color: #f57c00 !important;
}

.orange-text.text-darken-2 {
  color: #f57c00 !important;
}

.orange-border.border-darken-2 {
  border-color: #f57c00 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-orange.darken-2-light-mode {
    background-color: #f57c00 !important;
  }
  .light-mode-orange-text.text-darken-2-light-mode {
    color: #f57c00 !important;
  }
  .light-mode-orange-border.border-darken-2-light-mode {
    border-color: #f57c00 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-orange.darken-2-dark-mode {
    background-color: #f57c00 !important;
  }
  .dark-mode-orange-text.text-darken-2-dark-mode {
    color: #f57c00 !important;
  }
  .dark-mode-orange-border.border-darken-2-dark-mode {
    border-color: #f57c00 !important;
  }
}
.orange.darken-3 {
  background-color: #ef6c00 !important;
}

.orange-text.text-darken-3 {
  color: #ef6c00 !important;
}

.orange-border.border-darken-3 {
  border-color: #ef6c00 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-orange.darken-3-light-mode {
    background-color: #ef6c00 !important;
  }
  .light-mode-orange-text.text-darken-3-light-mode {
    color: #ef6c00 !important;
  }
  .light-mode-orange-border.border-darken-3-light-mode {
    border-color: #ef6c00 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-orange.darken-3-dark-mode {
    background-color: #ef6c00 !important;
  }
  .dark-mode-orange-text.text-darken-3-dark-mode {
    color: #ef6c00 !important;
  }
  .dark-mode-orange-border.border-darken-3-dark-mode {
    border-color: #ef6c00 !important;
  }
}
.orange.darken-4 {
  background-color: #e65100 !important;
}

.orange-text.text-darken-4 {
  color: #e65100 !important;
}

.orange-border.border-darken-4 {
  border-color: #e65100 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-orange.darken-4-light-mode {
    background-color: #e65100 !important;
  }
  .light-mode-orange-text.text-darken-4-light-mode {
    color: #e65100 !important;
  }
  .light-mode-orange-border.border-darken-4-light-mode {
    border-color: #e65100 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-orange.darken-4-dark-mode {
    background-color: #e65100 !important;
  }
  .dark-mode-orange-text.text-darken-4-dark-mode {
    color: #e65100 !important;
  }
  .dark-mode-orange-border.border-darken-4-dark-mode {
    border-color: #e65100 !important;
  }
}
.orange.accent-1 {
  background-color: #ffd180 !important;
}

.orange-text.text-accent-1 {
  color: #ffd180 !important;
}

.orange-border.border-accent-1 {
  border-color: #ffd180 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-orange.accent-1-light-mode {
    background-color: #ffd180 !important;
  }
  .light-mode-orange-text.text-accent-1-light-mode {
    color: #ffd180 !important;
  }
  .light-mode-orange-border.border-accent-1-light-mode {
    border-color: #ffd180 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-orange.accent-1-dark-mode {
    background-color: #ffd180 !important;
  }
  .dark-mode-orange-text.text-accent-1-dark-mode {
    color: #ffd180 !important;
  }
  .dark-mode-orange-border.border-accent-1-dark-mode {
    border-color: #ffd180 !important;
  }
}
.orange.accent-2 {
  background-color: #ffab40 !important;
}

.orange-text.text-accent-2 {
  color: #ffab40 !important;
}

.orange-border.border-accent-2 {
  border-color: #ffab40 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-orange.accent-2-light-mode {
    background-color: #ffab40 !important;
  }
  .light-mode-orange-text.text-accent-2-light-mode {
    color: #ffab40 !important;
  }
  .light-mode-orange-border.border-accent-2-light-mode {
    border-color: #ffab40 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-orange.accent-2-dark-mode {
    background-color: #ffab40 !important;
  }
  .dark-mode-orange-text.text-accent-2-dark-mode {
    color: #ffab40 !important;
  }
  .dark-mode-orange-border.border-accent-2-dark-mode {
    border-color: #ffab40 !important;
  }
}
.orange.accent-3 {
  background-color: #ff9100 !important;
}

.orange-text.text-accent-3 {
  color: #ff9100 !important;
}

.orange-border.border-accent-3 {
  border-color: #ff9100 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-orange.accent-3-light-mode {
    background-color: #ff9100 !important;
  }
  .light-mode-orange-text.text-accent-3-light-mode {
    color: #ff9100 !important;
  }
  .light-mode-orange-border.border-accent-3-light-mode {
    border-color: #ff9100 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-orange.accent-3-dark-mode {
    background-color: #ff9100 !important;
  }
  .dark-mode-orange-text.text-accent-3-dark-mode {
    color: #ff9100 !important;
  }
  .dark-mode-orange-border.border-accent-3-dark-mode {
    border-color: #ff9100 !important;
  }
}
.orange.accent-4 {
  background-color: #ff6d00 !important;
}

.orange-text.text-accent-4 {
  color: #ff6d00 !important;
}

.orange-border.border-accent-4 {
  border-color: #ff6d00 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-orange.accent-4-light-mode {
    background-color: #ff6d00 !important;
  }
  .light-mode-orange-text.text-accent-4-light-mode {
    color: #ff6d00 !important;
  }
  .light-mode-orange-border.border-accent-4-light-mode {
    border-color: #ff6d00 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-orange.accent-4-dark-mode {
    background-color: #ff6d00 !important;
  }
  .dark-mode-orange-text.text-accent-4-dark-mode {
    color: #ff6d00 !important;
  }
  .dark-mode-orange-border.border-accent-4-dark-mode {
    border-color: #ff6d00 !important;
  }
}
.deep-orange {
  background-color: #ff5722 !important;
}

.deep-orange-text {
  color: #ff5722 !important;
}

.deep-orange-border {
  border-color: #ff5722 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-deep-orange {
    background-color: #ff5722 !important;
  }
  .light-mode-deep-orange-text {
    color: #ff5722 !important;
  }
  .light-mode-deep-orange-border {
    border-color: #ff5722 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-deep-orange {
    background-color: #ff5722 !important;
  }
  .dark-mode-deep-orange-text {
    color: #ff5722 !important;
  }
  .dark-mode-deep-orange-border {
    border-color: #ff5722 !important;
  }
}
.deep-orange.lighten-5 {
  background-color: #fbe9e7 !important;
}

.deep-orange-text.text-lighten-5 {
  color: #fbe9e7 !important;
}

.deep-orange-border.border-lighten-5 {
  border-color: #fbe9e7 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-deep-orange.lighten-5-light-mode {
    background-color: #fbe9e7 !important;
  }
  .light-mode-deep-orange-text.text-lighten-5-light-mode {
    color: #fbe9e7 !important;
  }
  .light-mode-deep-orange-border.border-lighten-5-light-mode {
    border-color: #fbe9e7 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-deep-orange.lighten-5-dark-mode {
    background-color: #fbe9e7 !important;
  }
  .dark-mode-deep-orange-text.text-lighten-5-dark-mode {
    color: #fbe9e7 !important;
  }
  .dark-mode-deep-orange-border.border-lighten-5-dark-mode {
    border-color: #fbe9e7 !important;
  }
}
.deep-orange.lighten-4 {
  background-color: #ffccbc !important;
}

.deep-orange-text.text-lighten-4 {
  color: #ffccbc !important;
}

.deep-orange-border.border-lighten-4 {
  border-color: #ffccbc !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-deep-orange.lighten-4-light-mode {
    background-color: #ffccbc !important;
  }
  .light-mode-deep-orange-text.text-lighten-4-light-mode {
    color: #ffccbc !important;
  }
  .light-mode-deep-orange-border.border-lighten-4-light-mode {
    border-color: #ffccbc !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-deep-orange.lighten-4-dark-mode {
    background-color: #ffccbc !important;
  }
  .dark-mode-deep-orange-text.text-lighten-4-dark-mode {
    color: #ffccbc !important;
  }
  .dark-mode-deep-orange-border.border-lighten-4-dark-mode {
    border-color: #ffccbc !important;
  }
}
.deep-orange.lighten-3 {
  background-color: #ffab91 !important;
}

.deep-orange-text.text-lighten-3 {
  color: #ffab91 !important;
}

.deep-orange-border.border-lighten-3 {
  border-color: #ffab91 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-deep-orange.lighten-3-light-mode {
    background-color: #ffab91 !important;
  }
  .light-mode-deep-orange-text.text-lighten-3-light-mode {
    color: #ffab91 !important;
  }
  .light-mode-deep-orange-border.border-lighten-3-light-mode {
    border-color: #ffab91 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-deep-orange.lighten-3-dark-mode {
    background-color: #ffab91 !important;
  }
  .dark-mode-deep-orange-text.text-lighten-3-dark-mode {
    color: #ffab91 !important;
  }
  .dark-mode-deep-orange-border.border-lighten-3-dark-mode {
    border-color: #ffab91 !important;
  }
}
.deep-orange.lighten-2 {
  background-color: #ff8a65 !important;
}

.deep-orange-text.text-lighten-2 {
  color: #ff8a65 !important;
}

.deep-orange-border.border-lighten-2 {
  border-color: #ff8a65 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-deep-orange.lighten-2-light-mode {
    background-color: #ff8a65 !important;
  }
  .light-mode-deep-orange-text.text-lighten-2-light-mode {
    color: #ff8a65 !important;
  }
  .light-mode-deep-orange-border.border-lighten-2-light-mode {
    border-color: #ff8a65 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-deep-orange.lighten-2-dark-mode {
    background-color: #ff8a65 !important;
  }
  .dark-mode-deep-orange-text.text-lighten-2-dark-mode {
    color: #ff8a65 !important;
  }
  .dark-mode-deep-orange-border.border-lighten-2-dark-mode {
    border-color: #ff8a65 !important;
  }
}
.deep-orange.lighten-1 {
  background-color: #ff7043 !important;
}

.deep-orange-text.text-lighten-1 {
  color: #ff7043 !important;
}

.deep-orange-border.border-lighten-1 {
  border-color: #ff7043 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-deep-orange.lighten-1-light-mode {
    background-color: #ff7043 !important;
  }
  .light-mode-deep-orange-text.text-lighten-1-light-mode {
    color: #ff7043 !important;
  }
  .light-mode-deep-orange-border.border-lighten-1-light-mode {
    border-color: #ff7043 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-deep-orange.lighten-1-dark-mode {
    background-color: #ff7043 !important;
  }
  .dark-mode-deep-orange-text.text-lighten-1-dark-mode {
    color: #ff7043 !important;
  }
  .dark-mode-deep-orange-border.border-lighten-1-dark-mode {
    border-color: #ff7043 !important;
  }
}
.deep-orange.darken-1 {
  background-color: #f4511e !important;
}

.deep-orange-text.text-darken-1 {
  color: #f4511e !important;
}

.deep-orange-border.border-darken-1 {
  border-color: #f4511e !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-deep-orange.darken-1-light-mode {
    background-color: #f4511e !important;
  }
  .light-mode-deep-orange-text.text-darken-1-light-mode {
    color: #f4511e !important;
  }
  .light-mode-deep-orange-border.border-darken-1-light-mode {
    border-color: #f4511e !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-deep-orange.darken-1-dark-mode {
    background-color: #f4511e !important;
  }
  .dark-mode-deep-orange-text.text-darken-1-dark-mode {
    color: #f4511e !important;
  }
  .dark-mode-deep-orange-border.border-darken-1-dark-mode {
    border-color: #f4511e !important;
  }
}
.deep-orange.darken-2 {
  background-color: #e64a19 !important;
}

.deep-orange-text.text-darken-2 {
  color: #e64a19 !important;
}

.deep-orange-border.border-darken-2 {
  border-color: #e64a19 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-deep-orange.darken-2-light-mode {
    background-color: #e64a19 !important;
  }
  .light-mode-deep-orange-text.text-darken-2-light-mode {
    color: #e64a19 !important;
  }
  .light-mode-deep-orange-border.border-darken-2-light-mode {
    border-color: #e64a19 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-deep-orange.darken-2-dark-mode {
    background-color: #e64a19 !important;
  }
  .dark-mode-deep-orange-text.text-darken-2-dark-mode {
    color: #e64a19 !important;
  }
  .dark-mode-deep-orange-border.border-darken-2-dark-mode {
    border-color: #e64a19 !important;
  }
}
.deep-orange.darken-3 {
  background-color: #d84315 !important;
}

.deep-orange-text.text-darken-3 {
  color: #d84315 !important;
}

.deep-orange-border.border-darken-3 {
  border-color: #d84315 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-deep-orange.darken-3-light-mode {
    background-color: #d84315 !important;
  }
  .light-mode-deep-orange-text.text-darken-3-light-mode {
    color: #d84315 !important;
  }
  .light-mode-deep-orange-border.border-darken-3-light-mode {
    border-color: #d84315 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-deep-orange.darken-3-dark-mode {
    background-color: #d84315 !important;
  }
  .dark-mode-deep-orange-text.text-darken-3-dark-mode {
    color: #d84315 !important;
  }
  .dark-mode-deep-orange-border.border-darken-3-dark-mode {
    border-color: #d84315 !important;
  }
}
.deep-orange.darken-4 {
  background-color: #bf360c !important;
}

.deep-orange-text.text-darken-4 {
  color: #bf360c !important;
}

.deep-orange-border.border-darken-4 {
  border-color: #bf360c !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-deep-orange.darken-4-light-mode {
    background-color: #bf360c !important;
  }
  .light-mode-deep-orange-text.text-darken-4-light-mode {
    color: #bf360c !important;
  }
  .light-mode-deep-orange-border.border-darken-4-light-mode {
    border-color: #bf360c !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-deep-orange.darken-4-dark-mode {
    background-color: #bf360c !important;
  }
  .dark-mode-deep-orange-text.text-darken-4-dark-mode {
    color: #bf360c !important;
  }
  .dark-mode-deep-orange-border.border-darken-4-dark-mode {
    border-color: #bf360c !important;
  }
}
.deep-orange.accent-1 {
  background-color: #ff9e80 !important;
}

.deep-orange-text.text-accent-1 {
  color: #ff9e80 !important;
}

.deep-orange-border.border-accent-1 {
  border-color: #ff9e80 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-deep-orange.accent-1-light-mode {
    background-color: #ff9e80 !important;
  }
  .light-mode-deep-orange-text.text-accent-1-light-mode {
    color: #ff9e80 !important;
  }
  .light-mode-deep-orange-border.border-accent-1-light-mode {
    border-color: #ff9e80 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-deep-orange.accent-1-dark-mode {
    background-color: #ff9e80 !important;
  }
  .dark-mode-deep-orange-text.text-accent-1-dark-mode {
    color: #ff9e80 !important;
  }
  .dark-mode-deep-orange-border.border-accent-1-dark-mode {
    border-color: #ff9e80 !important;
  }
}
.deep-orange.accent-2 {
  background-color: #ff6e40 !important;
}

.deep-orange-text.text-accent-2 {
  color: #ff6e40 !important;
}

.deep-orange-border.border-accent-2 {
  border-color: #ff6e40 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-deep-orange.accent-2-light-mode {
    background-color: #ff6e40 !important;
  }
  .light-mode-deep-orange-text.text-accent-2-light-mode {
    color: #ff6e40 !important;
  }
  .light-mode-deep-orange-border.border-accent-2-light-mode {
    border-color: #ff6e40 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-deep-orange.accent-2-dark-mode {
    background-color: #ff6e40 !important;
  }
  .dark-mode-deep-orange-text.text-accent-2-dark-mode {
    color: #ff6e40 !important;
  }
  .dark-mode-deep-orange-border.border-accent-2-dark-mode {
    border-color: #ff6e40 !important;
  }
}
.deep-orange.accent-3 {
  background-color: #ff3d00 !important;
}

.deep-orange-text.text-accent-3 {
  color: #ff3d00 !important;
}

.deep-orange-border.border-accent-3 {
  border-color: #ff3d00 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-deep-orange.accent-3-light-mode {
    background-color: #ff3d00 !important;
  }
  .light-mode-deep-orange-text.text-accent-3-light-mode {
    color: #ff3d00 !important;
  }
  .light-mode-deep-orange-border.border-accent-3-light-mode {
    border-color: #ff3d00 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-deep-orange.accent-3-dark-mode {
    background-color: #ff3d00 !important;
  }
  .dark-mode-deep-orange-text.text-accent-3-dark-mode {
    color: #ff3d00 !important;
  }
  .dark-mode-deep-orange-border.border-accent-3-dark-mode {
    border-color: #ff3d00 !important;
  }
}
.deep-orange.accent-4 {
  background-color: #dd2c00 !important;
}

.deep-orange-text.text-accent-4 {
  color: #dd2c00 !important;
}

.deep-orange-border.border-accent-4 {
  border-color: #dd2c00 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-deep-orange.accent-4-light-mode {
    background-color: #dd2c00 !important;
  }
  .light-mode-deep-orange-text.text-accent-4-light-mode {
    color: #dd2c00 !important;
  }
  .light-mode-deep-orange-border.border-accent-4-light-mode {
    border-color: #dd2c00 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-deep-orange.accent-4-dark-mode {
    background-color: #dd2c00 !important;
  }
  .dark-mode-deep-orange-text.text-accent-4-dark-mode {
    color: #dd2c00 !important;
  }
  .dark-mode-deep-orange-border.border-accent-4-dark-mode {
    border-color: #dd2c00 !important;
  }
}
.brown {
  background-color: #795548 !important;
}

.brown-text {
  color: #795548 !important;
}

.brown-border {
  border-color: #795548 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-brown {
    background-color: #795548 !important;
  }
  .light-mode-brown-text {
    color: #795548 !important;
  }
  .light-mode-brown-border {
    border-color: #795548 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-brown {
    background-color: #795548 !important;
  }
  .dark-mode-brown-text {
    color: #795548 !important;
  }
  .dark-mode-brown-border {
    border-color: #795548 !important;
  }
}
.brown.lighten-5 {
  background-color: #efebe9 !important;
}

.brown-text.text-lighten-5 {
  color: #efebe9 !important;
}

.brown-border.border-lighten-5 {
  border-color: #efebe9 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-brown.lighten-5-light-mode {
    background-color: #efebe9 !important;
  }
  .light-mode-brown-text.text-lighten-5-light-mode {
    color: #efebe9 !important;
  }
  .light-mode-brown-border.border-lighten-5-light-mode {
    border-color: #efebe9 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-brown.lighten-5-dark-mode {
    background-color: #efebe9 !important;
  }
  .dark-mode-brown-text.text-lighten-5-dark-mode {
    color: #efebe9 !important;
  }
  .dark-mode-brown-border.border-lighten-5-dark-mode {
    border-color: #efebe9 !important;
  }
}
.brown.lighten-4 {
  background-color: #d7ccc8 !important;
}

.brown-text.text-lighten-4 {
  color: #d7ccc8 !important;
}

.brown-border.border-lighten-4 {
  border-color: #d7ccc8 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-brown.lighten-4-light-mode {
    background-color: #d7ccc8 !important;
  }
  .light-mode-brown-text.text-lighten-4-light-mode {
    color: #d7ccc8 !important;
  }
  .light-mode-brown-border.border-lighten-4-light-mode {
    border-color: #d7ccc8 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-brown.lighten-4-dark-mode {
    background-color: #d7ccc8 !important;
  }
  .dark-mode-brown-text.text-lighten-4-dark-mode {
    color: #d7ccc8 !important;
  }
  .dark-mode-brown-border.border-lighten-4-dark-mode {
    border-color: #d7ccc8 !important;
  }
}
.brown.lighten-3 {
  background-color: #bcaaa4 !important;
}

.brown-text.text-lighten-3 {
  color: #bcaaa4 !important;
}

.brown-border.border-lighten-3 {
  border-color: #bcaaa4 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-brown.lighten-3-light-mode {
    background-color: #bcaaa4 !important;
  }
  .light-mode-brown-text.text-lighten-3-light-mode {
    color: #bcaaa4 !important;
  }
  .light-mode-brown-border.border-lighten-3-light-mode {
    border-color: #bcaaa4 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-brown.lighten-3-dark-mode {
    background-color: #bcaaa4 !important;
  }
  .dark-mode-brown-text.text-lighten-3-dark-mode {
    color: #bcaaa4 !important;
  }
  .dark-mode-brown-border.border-lighten-3-dark-mode {
    border-color: #bcaaa4 !important;
  }
}
.brown.lighten-2 {
  background-color: #a1887f !important;
}

.brown-text.text-lighten-2 {
  color: #a1887f !important;
}

.brown-border.border-lighten-2 {
  border-color: #a1887f !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-brown.lighten-2-light-mode {
    background-color: #a1887f !important;
  }
  .light-mode-brown-text.text-lighten-2-light-mode {
    color: #a1887f !important;
  }
  .light-mode-brown-border.border-lighten-2-light-mode {
    border-color: #a1887f !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-brown.lighten-2-dark-mode {
    background-color: #a1887f !important;
  }
  .dark-mode-brown-text.text-lighten-2-dark-mode {
    color: #a1887f !important;
  }
  .dark-mode-brown-border.border-lighten-2-dark-mode {
    border-color: #a1887f !important;
  }
}
.brown.lighten-1 {
  background-color: #8d6e63 !important;
}

.brown-text.text-lighten-1 {
  color: #8d6e63 !important;
}

.brown-border.border-lighten-1 {
  border-color: #8d6e63 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-brown.lighten-1-light-mode {
    background-color: #8d6e63 !important;
  }
  .light-mode-brown-text.text-lighten-1-light-mode {
    color: #8d6e63 !important;
  }
  .light-mode-brown-border.border-lighten-1-light-mode {
    border-color: #8d6e63 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-brown.lighten-1-dark-mode {
    background-color: #8d6e63 !important;
  }
  .dark-mode-brown-text.text-lighten-1-dark-mode {
    color: #8d6e63 !important;
  }
  .dark-mode-brown-border.border-lighten-1-dark-mode {
    border-color: #8d6e63 !important;
  }
}
.brown.darken-1 {
  background-color: #6d4c41 !important;
}

.brown-text.text-darken-1 {
  color: #6d4c41 !important;
}

.brown-border.border-darken-1 {
  border-color: #6d4c41 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-brown.darken-1-light-mode {
    background-color: #6d4c41 !important;
  }
  .light-mode-brown-text.text-darken-1-light-mode {
    color: #6d4c41 !important;
  }
  .light-mode-brown-border.border-darken-1-light-mode {
    border-color: #6d4c41 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-brown.darken-1-dark-mode {
    background-color: #6d4c41 !important;
  }
  .dark-mode-brown-text.text-darken-1-dark-mode {
    color: #6d4c41 !important;
  }
  .dark-mode-brown-border.border-darken-1-dark-mode {
    border-color: #6d4c41 !important;
  }
}
.brown.darken-2 {
  background-color: #5d4037 !important;
}

.brown-text.text-darken-2 {
  color: #5d4037 !important;
}

.brown-border.border-darken-2 {
  border-color: #5d4037 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-brown.darken-2-light-mode {
    background-color: #5d4037 !important;
  }
  .light-mode-brown-text.text-darken-2-light-mode {
    color: #5d4037 !important;
  }
  .light-mode-brown-border.border-darken-2-light-mode {
    border-color: #5d4037 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-brown.darken-2-dark-mode {
    background-color: #5d4037 !important;
  }
  .dark-mode-brown-text.text-darken-2-dark-mode {
    color: #5d4037 !important;
  }
  .dark-mode-brown-border.border-darken-2-dark-mode {
    border-color: #5d4037 !important;
  }
}
.brown.darken-3 {
  background-color: #4e342e !important;
}

.brown-text.text-darken-3 {
  color: #4e342e !important;
}

.brown-border.border-darken-3 {
  border-color: #4e342e !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-brown.darken-3-light-mode {
    background-color: #4e342e !important;
  }
  .light-mode-brown-text.text-darken-3-light-mode {
    color: #4e342e !important;
  }
  .light-mode-brown-border.border-darken-3-light-mode {
    border-color: #4e342e !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-brown.darken-3-dark-mode {
    background-color: #4e342e !important;
  }
  .dark-mode-brown-text.text-darken-3-dark-mode {
    color: #4e342e !important;
  }
  .dark-mode-brown-border.border-darken-3-dark-mode {
    border-color: #4e342e !important;
  }
}
.brown.darken-4 {
  background-color: #3e2723 !important;
}

.brown-text.text-darken-4 {
  color: #3e2723 !important;
}

.brown-border.border-darken-4 {
  border-color: #3e2723 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-brown.darken-4-light-mode {
    background-color: #3e2723 !important;
  }
  .light-mode-brown-text.text-darken-4-light-mode {
    color: #3e2723 !important;
  }
  .light-mode-brown-border.border-darken-4-light-mode {
    border-color: #3e2723 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-brown.darken-4-dark-mode {
    background-color: #3e2723 !important;
  }
  .dark-mode-brown-text.text-darken-4-dark-mode {
    color: #3e2723 !important;
  }
  .dark-mode-brown-border.border-darken-4-dark-mode {
    border-color: #3e2723 !important;
  }
}
.blue-grey {
  background-color: #607d8b !important;
}

.blue-grey-text {
  color: #607d8b !important;
}

.blue-grey-border {
  border-color: #607d8b !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-blue-grey {
    background-color: #607d8b !important;
  }
  .light-mode-blue-grey-text {
    color: #607d8b !important;
  }
  .light-mode-blue-grey-border {
    border-color: #607d8b !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-blue-grey {
    background-color: #607d8b !important;
  }
  .dark-mode-blue-grey-text {
    color: #607d8b !important;
  }
  .dark-mode-blue-grey-border {
    border-color: #607d8b !important;
  }
}
.blue-grey.lighten-5 {
  background-color: #eceff1 !important;
}

.blue-grey-text.text-lighten-5 {
  color: #eceff1 !important;
}

.blue-grey-border.border-lighten-5 {
  border-color: #eceff1 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-blue-grey.lighten-5-light-mode {
    background-color: #eceff1 !important;
  }
  .light-mode-blue-grey-text.text-lighten-5-light-mode {
    color: #eceff1 !important;
  }
  .light-mode-blue-grey-border.border-lighten-5-light-mode {
    border-color: #eceff1 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-blue-grey.lighten-5-dark-mode {
    background-color: #eceff1 !important;
  }
  .dark-mode-blue-grey-text.text-lighten-5-dark-mode {
    color: #eceff1 !important;
  }
  .dark-mode-blue-grey-border.border-lighten-5-dark-mode {
    border-color: #eceff1 !important;
  }
}
.blue-grey.lighten-4 {
  background-color: #cfd8dc !important;
}

.blue-grey-text.text-lighten-4 {
  color: #cfd8dc !important;
}

.blue-grey-border.border-lighten-4 {
  border-color: #cfd8dc !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-blue-grey.lighten-4-light-mode {
    background-color: #cfd8dc !important;
  }
  .light-mode-blue-grey-text.text-lighten-4-light-mode {
    color: #cfd8dc !important;
  }
  .light-mode-blue-grey-border.border-lighten-4-light-mode {
    border-color: #cfd8dc !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-blue-grey.lighten-4-dark-mode {
    background-color: #cfd8dc !important;
  }
  .dark-mode-blue-grey-text.text-lighten-4-dark-mode {
    color: #cfd8dc !important;
  }
  .dark-mode-blue-grey-border.border-lighten-4-dark-mode {
    border-color: #cfd8dc !important;
  }
}
.blue-grey.lighten-3 {
  background-color: #b0bec5 !important;
}

.blue-grey-text.text-lighten-3 {
  color: #b0bec5 !important;
}

.blue-grey-border.border-lighten-3 {
  border-color: #b0bec5 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-blue-grey.lighten-3-light-mode {
    background-color: #b0bec5 !important;
  }
  .light-mode-blue-grey-text.text-lighten-3-light-mode {
    color: #b0bec5 !important;
  }
  .light-mode-blue-grey-border.border-lighten-3-light-mode {
    border-color: #b0bec5 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-blue-grey.lighten-3-dark-mode {
    background-color: #b0bec5 !important;
  }
  .dark-mode-blue-grey-text.text-lighten-3-dark-mode {
    color: #b0bec5 !important;
  }
  .dark-mode-blue-grey-border.border-lighten-3-dark-mode {
    border-color: #b0bec5 !important;
  }
}
.blue-grey.lighten-2 {
  background-color: #90a4ae !important;
}

.blue-grey-text.text-lighten-2 {
  color: #90a4ae !important;
}

.blue-grey-border.border-lighten-2 {
  border-color: #90a4ae !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-blue-grey.lighten-2-light-mode {
    background-color: #90a4ae !important;
  }
  .light-mode-blue-grey-text.text-lighten-2-light-mode {
    color: #90a4ae !important;
  }
  .light-mode-blue-grey-border.border-lighten-2-light-mode {
    border-color: #90a4ae !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-blue-grey.lighten-2-dark-mode {
    background-color: #90a4ae !important;
  }
  .dark-mode-blue-grey-text.text-lighten-2-dark-mode {
    color: #90a4ae !important;
  }
  .dark-mode-blue-grey-border.border-lighten-2-dark-mode {
    border-color: #90a4ae !important;
  }
}
.blue-grey.lighten-1 {
  background-color: #78909c !important;
}

.blue-grey-text.text-lighten-1 {
  color: #78909c !important;
}

.blue-grey-border.border-lighten-1 {
  border-color: #78909c !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-blue-grey.lighten-1-light-mode {
    background-color: #78909c !important;
  }
  .light-mode-blue-grey-text.text-lighten-1-light-mode {
    color: #78909c !important;
  }
  .light-mode-blue-grey-border.border-lighten-1-light-mode {
    border-color: #78909c !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-blue-grey.lighten-1-dark-mode {
    background-color: #78909c !important;
  }
  .dark-mode-blue-grey-text.text-lighten-1-dark-mode {
    color: #78909c !important;
  }
  .dark-mode-blue-grey-border.border-lighten-1-dark-mode {
    border-color: #78909c !important;
  }
}
.blue-grey.darken-1 {
  background-color: #546e7a !important;
}

.blue-grey-text.text-darken-1 {
  color: #546e7a !important;
}

.blue-grey-border.border-darken-1 {
  border-color: #546e7a !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-blue-grey.darken-1-light-mode {
    background-color: #546e7a !important;
  }
  .light-mode-blue-grey-text.text-darken-1-light-mode {
    color: #546e7a !important;
  }
  .light-mode-blue-grey-border.border-darken-1-light-mode {
    border-color: #546e7a !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-blue-grey.darken-1-dark-mode {
    background-color: #546e7a !important;
  }
  .dark-mode-blue-grey-text.text-darken-1-dark-mode {
    color: #546e7a !important;
  }
  .dark-mode-blue-grey-border.border-darken-1-dark-mode {
    border-color: #546e7a !important;
  }
}
.blue-grey.darken-2 {
  background-color: #455a64 !important;
}

.blue-grey-text.text-darken-2 {
  color: #455a64 !important;
}

.blue-grey-border.border-darken-2 {
  border-color: #455a64 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-blue-grey.darken-2-light-mode {
    background-color: #455a64 !important;
  }
  .light-mode-blue-grey-text.text-darken-2-light-mode {
    color: #455a64 !important;
  }
  .light-mode-blue-grey-border.border-darken-2-light-mode {
    border-color: #455a64 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-blue-grey.darken-2-dark-mode {
    background-color: #455a64 !important;
  }
  .dark-mode-blue-grey-text.text-darken-2-dark-mode {
    color: #455a64 !important;
  }
  .dark-mode-blue-grey-border.border-darken-2-dark-mode {
    border-color: #455a64 !important;
  }
}
.blue-grey.darken-3 {
  background-color: #37474f !important;
}

.blue-grey-text.text-darken-3 {
  color: #37474f !important;
}

.blue-grey-border.border-darken-3 {
  border-color: #37474f !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-blue-grey.darken-3-light-mode {
    background-color: #37474f !important;
  }
  .light-mode-blue-grey-text.text-darken-3-light-mode {
    color: #37474f !important;
  }
  .light-mode-blue-grey-border.border-darken-3-light-mode {
    border-color: #37474f !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-blue-grey.darken-3-dark-mode {
    background-color: #37474f !important;
  }
  .dark-mode-blue-grey-text.text-darken-3-dark-mode {
    color: #37474f !important;
  }
  .dark-mode-blue-grey-border.border-darken-3-dark-mode {
    border-color: #37474f !important;
  }
}
.blue-grey.darken-4 {
  background-color: #263238 !important;
}

.blue-grey-text.text-darken-4 {
  color: #263238 !important;
}

.blue-grey-border.border-darken-4 {
  border-color: #263238 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-blue-grey.darken-4-light-mode {
    background-color: #263238 !important;
  }
  .light-mode-blue-grey-text.text-darken-4-light-mode {
    color: #263238 !important;
  }
  .light-mode-blue-grey-border.border-darken-4-light-mode {
    border-color: #263238 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-blue-grey.darken-4-dark-mode {
    background-color: #263238 !important;
  }
  .dark-mode-blue-grey-text.text-darken-4-dark-mode {
    color: #263238 !important;
  }
  .dark-mode-blue-grey-border.border-darken-4-dark-mode {
    border-color: #263238 !important;
  }
}
.grey {
  background-color: #9e9e9e !important;
}

.grey-text {
  color: #9e9e9e !important;
}

.grey-border {
  border-color: #9e9e9e !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-grey {
    background-color: #9e9e9e !important;
  }
  .light-mode-grey-text {
    color: #9e9e9e !important;
  }
  .light-mode-grey-border {
    border-color: #9e9e9e !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-grey {
    background-color: #9e9e9e !important;
  }
  .dark-mode-grey-text {
    color: #9e9e9e !important;
  }
  .dark-mode-grey-border {
    border-color: #9e9e9e !important;
  }
}
.grey.lighten-5 {
  background-color: #fafafa !important;
}

.grey-text.text-lighten-5 {
  color: #fafafa !important;
}

.grey-border.border-lighten-5 {
  border-color: #fafafa !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-grey.lighten-5-light-mode {
    background-color: #fafafa !important;
  }
  .light-mode-grey-text.text-lighten-5-light-mode {
    color: #fafafa !important;
  }
  .light-mode-grey-border.border-lighten-5-light-mode {
    border-color: #fafafa !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-grey.lighten-5-dark-mode {
    background-color: #fafafa !important;
  }
  .dark-mode-grey-text.text-lighten-5-dark-mode {
    color: #fafafa !important;
  }
  .dark-mode-grey-border.border-lighten-5-dark-mode {
    border-color: #fafafa !important;
  }
}
.grey.lighten-4 {
  background-color: #f5f5f5 !important;
}

.grey-text.text-lighten-4 {
  color: #f5f5f5 !important;
}

.grey-border.border-lighten-4 {
  border-color: #f5f5f5 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-grey.lighten-4-light-mode {
    background-color: #f5f5f5 !important;
  }
  .light-mode-grey-text.text-lighten-4-light-mode {
    color: #f5f5f5 !important;
  }
  .light-mode-grey-border.border-lighten-4-light-mode {
    border-color: #f5f5f5 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-grey.lighten-4-dark-mode {
    background-color: #f5f5f5 !important;
  }
  .dark-mode-grey-text.text-lighten-4-dark-mode {
    color: #f5f5f5 !important;
  }
  .dark-mode-grey-border.border-lighten-4-dark-mode {
    border-color: #f5f5f5 !important;
  }
}
.grey.lighten-3 {
  background-color: #eeeeee !important;
}

.grey-text.text-lighten-3 {
  color: #eeeeee !important;
}

.grey-border.border-lighten-3 {
  border-color: #eeeeee !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-grey.lighten-3-light-mode {
    background-color: #eeeeee !important;
  }
  .light-mode-grey-text.text-lighten-3-light-mode {
    color: #eeeeee !important;
  }
  .light-mode-grey-border.border-lighten-3-light-mode {
    border-color: #eeeeee !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-grey.lighten-3-dark-mode {
    background-color: #eeeeee !important;
  }
  .dark-mode-grey-text.text-lighten-3-dark-mode {
    color: #eeeeee !important;
  }
  .dark-mode-grey-border.border-lighten-3-dark-mode {
    border-color: #eeeeee !important;
  }
}
.grey.lighten-2 {
  background-color: #e0e0e0 !important;
}

.grey-text.text-lighten-2 {
  color: #e0e0e0 !important;
}

.grey-border.border-lighten-2 {
  border-color: #e0e0e0 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-grey.lighten-2-light-mode {
    background-color: #e0e0e0 !important;
  }
  .light-mode-grey-text.text-lighten-2-light-mode {
    color: #e0e0e0 !important;
  }
  .light-mode-grey-border.border-lighten-2-light-mode {
    border-color: #e0e0e0 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-grey.lighten-2-dark-mode {
    background-color: #e0e0e0 !important;
  }
  .dark-mode-grey-text.text-lighten-2-dark-mode {
    color: #e0e0e0 !important;
  }
  .dark-mode-grey-border.border-lighten-2-dark-mode {
    border-color: #e0e0e0 !important;
  }
}
.grey.lighten-1 {
  background-color: #bdbdbd !important;
}

.grey-text.text-lighten-1 {
  color: #bdbdbd !important;
}

.grey-border.border-lighten-1 {
  border-color: #bdbdbd !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-grey.lighten-1-light-mode {
    background-color: #bdbdbd !important;
  }
  .light-mode-grey-text.text-lighten-1-light-mode {
    color: #bdbdbd !important;
  }
  .light-mode-grey-border.border-lighten-1-light-mode {
    border-color: #bdbdbd !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-grey.lighten-1-dark-mode {
    background-color: #bdbdbd !important;
  }
  .dark-mode-grey-text.text-lighten-1-dark-mode {
    color: #bdbdbd !important;
  }
  .dark-mode-grey-border.border-lighten-1-dark-mode {
    border-color: #bdbdbd !important;
  }
}
.grey.darken-1 {
  background-color: #757575 !important;
}

.grey-text.text-darken-1 {
  color: #757575 !important;
}

.grey-border.border-darken-1 {
  border-color: #757575 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-grey.darken-1-light-mode {
    background-color: #757575 !important;
  }
  .light-mode-grey-text.text-darken-1-light-mode {
    color: #757575 !important;
  }
  .light-mode-grey-border.border-darken-1-light-mode {
    border-color: #757575 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-grey.darken-1-dark-mode {
    background-color: #757575 !important;
  }
  .dark-mode-grey-text.text-darken-1-dark-mode {
    color: #757575 !important;
  }
  .dark-mode-grey-border.border-darken-1-dark-mode {
    border-color: #757575 !important;
  }
}
.grey.darken-2 {
  background-color: #616161 !important;
}

.grey-text.text-darken-2 {
  color: #616161 !important;
}

.grey-border.border-darken-2 {
  border-color: #616161 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-grey.darken-2-light-mode {
    background-color: #616161 !important;
  }
  .light-mode-grey-text.text-darken-2-light-mode {
    color: #616161 !important;
  }
  .light-mode-grey-border.border-darken-2-light-mode {
    border-color: #616161 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-grey.darken-2-dark-mode {
    background-color: #616161 !important;
  }
  .dark-mode-grey-text.text-darken-2-dark-mode {
    color: #616161 !important;
  }
  .dark-mode-grey-border.border-darken-2-dark-mode {
    border-color: #616161 !important;
  }
}
.grey.darken-3 {
  background-color: #424242 !important;
}

.grey-text.text-darken-3 {
  color: #424242 !important;
}

.grey-border.border-darken-3 {
  border-color: #424242 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-grey.darken-3-light-mode {
    background-color: #424242 !important;
  }
  .light-mode-grey-text.text-darken-3-light-mode {
    color: #424242 !important;
  }
  .light-mode-grey-border.border-darken-3-light-mode {
    border-color: #424242 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-grey.darken-3-dark-mode {
    background-color: #424242 !important;
  }
  .dark-mode-grey-text.text-darken-3-dark-mode {
    color: #424242 !important;
  }
  .dark-mode-grey-border.border-darken-3-dark-mode {
    border-color: #424242 !important;
  }
}
.grey.darken-4 {
  background-color: #212121 !important;
}

.grey-text.text-darken-4 {
  color: #212121 !important;
}

.grey-border.border-darken-4 {
  border-color: #212121 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-grey.darken-4-light-mode {
    background-color: #212121 !important;
  }
  .light-mode-grey-text.text-darken-4-light-mode {
    color: #212121 !important;
  }
  .light-mode-grey-border.border-darken-4-light-mode {
    border-color: #212121 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-grey.darken-4-dark-mode {
    background-color: #212121 !important;
  }
  .dark-mode-grey-text.text-darken-4-dark-mode {
    color: #212121 !important;
  }
  .dark-mode-grey-border.border-darken-4-dark-mode {
    border-color: #212121 !important;
  }
}
.gold {
  background-color: #a68b4d !important;
}

.gold-text {
  color: #a68b4d !important;
}

.gold-border {
  border-color: #a68b4d !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-gold {
    background-color: #a68b4d !important;
  }
  .light-mode-gold-text {
    color: #a68b4d !important;
  }
  .light-mode-gold-border {
    border-color: #a68b4d !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-gold {
    background-color: #a68b4d !important;
  }
  .dark-mode-gold-text {
    color: #a68b4d !important;
  }
  .dark-mode-gold-border {
    border-color: #a68b4d !important;
  }
}
.gold.lighten-5 {
  background-color: #f4f1ea !important;
}

.gold-text.text-lighten-5 {
  color: #f4f1ea !important;
}

.gold-border.border-lighten-5 {
  border-color: #f4f1ea !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-gold.lighten-5-light-mode {
    background-color: #f4f1ea !important;
  }
  .light-mode-gold-text.text-lighten-5-light-mode {
    color: #f4f1ea !important;
  }
  .light-mode-gold-border.border-lighten-5-light-mode {
    border-color: #f4f1ea !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-gold.lighten-5-dark-mode {
    background-color: #f4f1ea !important;
  }
  .dark-mode-gold-text.text-lighten-5-dark-mode {
    color: #f4f1ea !important;
  }
  .dark-mode-gold-border.border-lighten-5-dark-mode {
    border-color: #f4f1ea !important;
  }
}
.gold.lighten-4 {
  background-color: #e4dcca !important;
}

.gold-text.text-lighten-4 {
  color: #e4dcca !important;
}

.gold-border.border-lighten-4 {
  border-color: #e4dcca !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-gold.lighten-4-light-mode {
    background-color: #e4dcca !important;
  }
  .light-mode-gold-text.text-lighten-4-light-mode {
    color: #e4dcca !important;
  }
  .light-mode-gold-border.border-lighten-4-light-mode {
    border-color: #e4dcca !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-gold.lighten-4-dark-mode {
    background-color: #e4dcca !important;
  }
  .dark-mode-gold-text.text-lighten-4-dark-mode {
    color: #e4dcca !important;
  }
  .dark-mode-gold-border.border-lighten-4-dark-mode {
    border-color: #e4dcca !important;
  }
}
.gold.lighten-3 {
  background-color: #d2c5a6 !important;
}

.gold-text.text-lighten-3 {
  color: #d2c5a6 !important;
}

.gold-border.border-lighten-3 {
  border-color: #d2c5a6 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-gold.lighten-3-light-mode {
    background-color: #d2c5a6 !important;
  }
  .light-mode-gold-text.text-lighten-3-light-mode {
    color: #d2c5a6 !important;
  }
  .light-mode-gold-border.border-lighten-3-light-mode {
    border-color: #d2c5a6 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-gold.lighten-3-dark-mode {
    background-color: #d2c5a6 !important;
  }
  .dark-mode-gold-text.text-lighten-3-dark-mode {
    color: #d2c5a6 !important;
  }
  .dark-mode-gold-border.border-lighten-3-dark-mode {
    border-color: #d2c5a6 !important;
  }
}
.gold.lighten-2 {
  background-color: #c1ae82 !important;
}

.gold-text.text-lighten-2 {
  color: #c1ae82 !important;
}

.gold-border.border-lighten-2 {
  border-color: #c1ae82 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-gold.lighten-2-light-mode {
    background-color: #c1ae82 !important;
  }
  .light-mode-gold-text.text-lighten-2-light-mode {
    color: #c1ae82 !important;
  }
  .light-mode-gold-border.border-lighten-2-light-mode {
    border-color: #c1ae82 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-gold.lighten-2-dark-mode {
    background-color: #c1ae82 !important;
  }
  .dark-mode-gold-text.text-lighten-2-dark-mode {
    color: #c1ae82 !important;
  }
  .dark-mode-gold-border.border-lighten-2-dark-mode {
    border-color: #c1ae82 !important;
  }
}
.gold.lighten-1 {
  background-color: #b29a64 !important;
}

.gold-text.text-lighten-1 {
  color: #b29a64 !important;
}

.gold-border.border-lighten-1 {
  border-color: #b29a64 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-gold.lighten-1-light-mode {
    background-color: #b29a64 !important;
  }
  .light-mode-gold-text.text-lighten-1-light-mode {
    color: #b29a64 !important;
  }
  .light-mode-gold-border.border-lighten-1-light-mode {
    border-color: #b29a64 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-gold.lighten-1-dark-mode {
    background-color: #b29a64 !important;
  }
  .dark-mode-gold-text.text-lighten-1-dark-mode {
    color: #b29a64 !important;
  }
  .dark-mode-gold-border.border-lighten-1-dark-mode {
    border-color: #b29a64 !important;
  }
}
.gold.darken-1 {
  background-color: #907943 !important;
}

.gold-text.text-darken-1 {
  color: #907943 !important;
}

.gold-border.border-darken-1 {
  border-color: #907943 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-gold.darken-1-light-mode {
    background-color: #907943 !important;
  }
  .light-mode-gold-text.text-darken-1-light-mode {
    color: #907943 !important;
  }
  .light-mode-gold-border.border-darken-1-light-mode {
    border-color: #907943 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-gold.darken-1-dark-mode {
    background-color: #907943 !important;
  }
  .dark-mode-gold-text.text-darken-1-dark-mode {
    color: #907943 !important;
  }
  .dark-mode-gold-border.border-darken-1-dark-mode {
    border-color: #907943 !important;
  }
}
.gold.darken-2 {
  background-color: #746136 !important;
}

.gold-text.text-darken-2 {
  color: #746136 !important;
}

.gold-border.border-darken-2 {
  border-color: #746136 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-gold.darken-2-light-mode {
    background-color: #746136 !important;
  }
  .light-mode-gold-text.text-darken-2-light-mode {
    color: #746136 !important;
  }
  .light-mode-gold-border.border-darken-2-light-mode {
    border-color: #746136 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-gold.darken-2-dark-mode {
    background-color: #746136 !important;
  }
  .dark-mode-gold-text.text-darken-2-dark-mode {
    color: #746136 !important;
  }
  .dark-mode-gold-border.border-darken-2-dark-mode {
    border-color: #746136 !important;
  }
}
.gold.darken-3 {
  background-color: #534626 !important;
}

.gold-text.text-darken-3 {
  color: #534626 !important;
}

.gold-border.border-darken-3 {
  border-color: #534626 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-gold.darken-3-light-mode {
    background-color: #534626 !important;
  }
  .light-mode-gold-text.text-darken-3-light-mode {
    color: #534626 !important;
  }
  .light-mode-gold-border.border-darken-3-light-mode {
    border-color: #534626 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-gold.darken-3-dark-mode {
    background-color: #534626 !important;
  }
  .dark-mode-gold-text.text-darken-3-dark-mode {
    color: #534626 !important;
  }
  .dark-mode-gold-border.border-darken-3-dark-mode {
    border-color: #534626 !important;
  }
}
.gold.darken-4 {
  background-color: #322a17 !important;
}

.gold-text.text-darken-4 {
  color: #322a17 !important;
}

.gold-border.border-darken-4 {
  border-color: #322a17 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-gold.darken-4-light-mode {
    background-color: #322a17 !important;
  }
  .light-mode-gold-text.text-darken-4-light-mode {
    color: #322a17 !important;
  }
  .light-mode-gold-border.border-darken-4-light-mode {
    border-color: #322a17 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-gold.darken-4-dark-mode {
    background-color: #322a17 !important;
  }
  .dark-mode-gold-text.text-darken-4-dark-mode {
    color: #322a17 !important;
  }
  .dark-mode-gold-border.border-darken-4-dark-mode {
    border-color: #322a17 !important;
  }
}
.black {
  background-color: #000000 !important;
}

.black-text {
  color: #000000 !important;
}

.black-border {
  border-color: #000000 !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-black {
    background-color: #000000 !important;
  }
  .light-mode-black-text {
    color: #000000 !important;
  }
  .light-mode-black-border {
    border-color: #000000 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-black {
    background-color: #000000 !important;
  }
  .dark-mode-black-text {
    color: #000000 !important;
  }
  .dark-mode-black-border {
    border-color: #000000 !important;
  }
}
.white {
  background-color: #FFFFFF !important;
}

.white-text {
  color: #FFFFFF !important;
}

.white-border {
  border-color: #FFFFFF !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-white {
    background-color: #FFFFFF !important;
  }
  .light-mode-white-text {
    color: #FFFFFF !important;
  }
  .light-mode-white-border {
    border-color: #FFFFFF !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-white {
    background-color: #FFFFFF !important;
  }
  .dark-mode-white-text {
    color: #FFFFFF !important;
  }
  .dark-mode-white-border {
    border-color: #FFFFFF !important;
  }
}
.transparent {
  background-color: transparent !important;
}

.transparent-text {
  color: transparent !important;
}

.transparent-border {
  border-color: transparent !important;
}

@media (prefers-color-scheme: light) {
  .light-mode-transparent {
    background-color: transparent !important;
  }
  .light-mode-transparent-text {
    color: transparent !important;
  }
  .light-mode-transparent-border {
    border-color: transparent !important;
  }
}
@media (prefers-color-scheme: dark) {
  .dark-mode-transparent {
    background-color: transparent !important;
  }
  .dark-mode-transparent-text {
    color: transparent !important;
  }
  .dark-mode-transparent-border {
    border-color: transparent !important;
  }
}
.gradient-45deg-light-blue-teal {
  background: #b3e5fc;
  background: linear-gradient(45deg, #b3e5fc, #64ffda);
}
.gradient-45deg-light-blue-teal.gradient-shadow {
  -webkit-box-shadow: 0 6px 20px 0 rgba(100, 255, 218, 0.5) !important;
          box-shadow: 0 6px 20px 0 rgba(100, 255, 218, 0.5) !important;
}

.gradient-45deg-light-blue-teal-shadow {
  -webkit-box-shadow: 0 6px 20px 0 rgba(100, 255, 218, 0.5) !important;
          box-shadow: 0 6px 20px 0 rgba(100, 255, 218, 0.5) !important;
}

.gradient-45deg-indigo-light-blue {
  background: #3949ab;
  background: linear-gradient(45deg, #3949ab, #4fc3f7);
}
.gradient-45deg-indigo-light-blue.gradient-shadow {
  -webkit-box-shadow: 0 6px 20px 0 rgba(79, 195, 247, 0.5) !important;
          box-shadow: 0 6px 20px 0 rgba(79, 195, 247, 0.5) !important;
}

.gradient-45deg-indigo-light-blue-shadow {
  -webkit-box-shadow: 0 6px 20px 0 rgba(79, 195, 247, 0.5) !important;
          box-shadow: 0 6px 20px 0 rgba(79, 195, 247, 0.5) !important;
}

.gradient-45deg-light-blue-indigo {
  background: #b3e5fc;
  background: linear-gradient(45deg, #b3e5fc, #9fa8da);
}
.gradient-45deg-light-blue-indigo.gradient-shadow {
  -webkit-box-shadow: 0 6px 20px 0 rgba(159, 168, 218, 0.5) !important;
          box-shadow: 0 6px 20px 0 rgba(159, 168, 218, 0.5) !important;
}

.gradient-45deg-light-blue-indigo-shadow {
  -webkit-box-shadow: 0 6px 20px 0 rgba(159, 168, 218, 0.5) !important;
          box-shadow: 0 6px 20px 0 rgba(159, 168, 218, 0.5) !important;
}

.gradient-45deg-yellow-green {
  background: #ffff8d;
  background: linear-gradient(45deg, #ffff8d, #B9F6CA);
}
.gradient-45deg-yellow-green.gradient-shadow {
  -webkit-box-shadow: 0 6px 20px 0 rgba(185, 246, 202, 0.5) !important;
          box-shadow: 0 6px 20px 0 rgba(185, 246, 202, 0.5) !important;
}

.gradient-45deg-yellow-green-shadow {
  -webkit-box-shadow: 0 6px 20px 0 rgba(185, 246, 202, 0.5) !important;
          box-shadow: 0 6px 20px 0 rgba(185, 246, 202, 0.5) !important;
}

.gradient-45deg-orange-deep-orange {
  background: #ffe0b2;
  background: linear-gradient(45deg, #ffe0b2, #ffccbc);
}
.gradient-45deg-orange-deep-orange.gradient-shadow {
  -webkit-box-shadow: 0 6px 20px 0 rgba(255, 204, 188, 0.5) !important;
          box-shadow: 0 6px 20px 0 rgba(255, 204, 188, 0.5) !important;
}

.gradient-45deg-orange-deep-orange-shadow {
  -webkit-box-shadow: 0 6px 20px 0 rgba(255, 204, 188, 0.5) !important;
          box-shadow: 0 6px 20px 0 rgba(255, 204, 188, 0.5) !important;
}

.gradient-45deg-deep-purple-purple {
  background: #d1c4e9;
  background: linear-gradient(45deg, #d1c4e9, #f3e5f5);
}
.gradient-45deg-deep-purple-purple.gradient-shadow {
  -webkit-box-shadow: 0 6px 20px 0 rgba(243, 229, 245, 0.5) !important;
          box-shadow: 0 6px 20px 0 rgba(243, 229, 245, 0.5) !important;
}

.gradient-45deg-deep-purple-purple-shadow {
  -webkit-box-shadow: 0 6px 20px 0 rgba(243, 229, 245, 0.5) !important;
          box-shadow: 0 6px 20px 0 rgba(243, 229, 245, 0.5) !important;
}

.gradient-45deg-red-pink {
  background: #FF5252;
  background: linear-gradient(45deg, #FF5252, #f48fb1);
}
.gradient-45deg-red-pink.gradient-shadow {
  -webkit-box-shadow: 0 6px 20px 0 rgba(244, 143, 177, 0.5) !important;
          box-shadow: 0 6px 20px 0 rgba(244, 143, 177, 0.5) !important;
}

.gradient-45deg-red-pink-shadow {
  -webkit-box-shadow: 0 6px 20px 0 rgba(244, 143, 177, 0.5) !important;
          box-shadow: 0 6px 20px 0 rgba(244, 143, 177, 0.5) !important;
}

.gradient-45deg-light-green-amber {
  background: #c5e1a5;
  background: linear-gradient(45deg, #c5e1a5, #fff8e1);
}
.gradient-45deg-light-green-amber.gradient-shadow {
  -webkit-box-shadow: 0 6px 20px 0 rgba(255, 248, 225, 0.5) !important;
          box-shadow: 0 6px 20px 0 rgba(255, 248, 225, 0.5) !important;
}

.gradient-45deg-light-green-amber-shadow {
  -webkit-box-shadow: 0 6px 20px 0 rgba(255, 248, 225, 0.5) !important;
          box-shadow: 0 6px 20px 0 rgba(255, 248, 225, 0.5) !important;
}

.gradient-45deg-amber-amber {
  background: #ff6f00;
  background: linear-gradient(45deg, #ff6f00, #ffca28);
}
.gradient-45deg-amber-amber.gradient-shadow {
  -webkit-box-shadow: 0 6px 20px 0 rgba(255, 202, 40, 0.5) !important;
          box-shadow: 0 6px 20px 0 rgba(255, 202, 40, 0.5) !important;
}

.gradient-45deg-amber-amber-shadow {
  -webkit-box-shadow: 0 6px 20px 0 rgba(255, 202, 40, 0.5) !important;
          box-shadow: 0 6px 20px 0 rgba(255, 202, 40, 0.5) !important;
}

.gradient-45deg-purple-pink {
  background: #ea80fc;
  background: linear-gradient(45deg, #ea80fc, #fce4ec);
}
.gradient-45deg-purple-pink.gradient-shadow {
  -webkit-box-shadow: 0 6px 20px 0 rgba(252, 228, 236, 0.5) !important;
          box-shadow: 0 6px 20px 0 rgba(252, 228, 236, 0.5) !important;
}

.gradient-45deg-purple-pink-shadow {
  -webkit-box-shadow: 0 6px 20px 0 rgba(252, 228, 236, 0.5) !important;
          box-shadow: 0 6px 20px 0 rgba(252, 228, 236, 0.5) !important;
}

.gradient-45deg-teal-cyan {
  background: #e0f2f1;
  background: linear-gradient(45deg, #e0f2f1, #00e5ff);
}
.gradient-45deg-teal-cyan.gradient-shadow {
  -webkit-box-shadow: 0 6px 20px 0 rgba(0, 229, 255, 0.5) !important;
          box-shadow: 0 6px 20px 0 rgba(0, 229, 255, 0.5) !important;
}

.gradient-45deg-teal-cyan-shadow {
  -webkit-box-shadow: 0 6px 20px 0 rgba(0, 229, 255, 0.5) !important;
          box-shadow: 0 6px 20px 0 rgba(0, 229, 255, 0.5) !important;
}

.gradient-45deg-blue-grey-blue-grey {
  background: #cfd8dc;
  background: linear-gradient(45deg, #cfd8dc, #546e7a);
}
.gradient-45deg-blue-grey-blue-grey.gradient-shadow {
  -webkit-box-shadow: 0 6px 20px 0 rgba(84, 110, 122, 0.5) !important;
          box-shadow: 0 6px 20px 0 rgba(84, 110, 122, 0.5) !important;
}

.gradient-45deg-blue-grey-blue-grey-shadow {
  -webkit-box-shadow: 0 6px 20px 0 rgba(84, 110, 122, 0.5) !important;
          box-shadow: 0 6px 20px 0 rgba(84, 110, 122, 0.5) !important;
}

.gradient-45deg-orange-amber {
  background: #e65100;
  background: linear-gradient(45deg, #e65100, #1976D2);
}
.gradient-45deg-orange-amber.gradient-shadow {
  -webkit-box-shadow: 0 6px 20px 0 rgba(25, 118, 210, 0.5) !important;
          box-shadow: 0 6px 20px 0 rgba(25, 118, 210, 0.5) !important;
}

.gradient-45deg-orange-amber-shadow {
  -webkit-box-shadow: 0 6px 20px 0 rgba(25, 118, 210, 0.5) !important;
          box-shadow: 0 6px 20px 0 rgba(25, 118, 210, 0.5) !important;
}

.gradient-45deg-indigo-blue {
  background: #303f9f;
  background: linear-gradient(45deg, #303f9f, #1976D2);
}
.gradient-45deg-indigo-blue.gradient-shadow {
  -webkit-box-shadow: 0 6px 20px 0 rgba(25, 118, 210, 0.5) !important;
          box-shadow: 0 6px 20px 0 rgba(25, 118, 210, 0.5) !important;
}

.gradient-45deg-indigo-blue-shadow {
  -webkit-box-shadow: 0 6px 20px 0 rgba(25, 118, 210, 0.5) !important;
          box-shadow: 0 6px 20px 0 rgba(25, 118, 210, 0.5) !important;
}

.gradient-45deg-brown-brown {
  background: #6d4c41;
  background: linear-gradient(45deg, #6d4c41, #BBDEFB);
}
.gradient-45deg-brown-brown.gradient-shadow {
  -webkit-box-shadow: 0 6px 20px 0 rgba(187, 222, 251, 0.5) !important;
          box-shadow: 0 6px 20px 0 rgba(187, 222, 251, 0.5) !important;
}

.gradient-45deg-brown-brown-shadow {
  -webkit-box-shadow: 0 6px 20px 0 rgba(187, 222, 251, 0.5) !important;
          box-shadow: 0 6px 20px 0 rgba(187, 222, 251, 0.5) !important;
}

.gradient-45deg-blue-grey-blue {
  background: #263238;
  background: linear-gradient(45deg, #263238, #2979FF);
}
.gradient-45deg-blue-grey-blue.gradient-shadow {
  -webkit-box-shadow: 0 6px 20px 0 rgba(41, 121, 255, 0.5) !important;
          box-shadow: 0 6px 20px 0 rgba(41, 121, 255, 0.5) !important;
}

.gradient-45deg-blue-grey-blue-shadow {
  -webkit-box-shadow: 0 6px 20px 0 rgba(41, 121, 255, 0.5) !important;
          box-shadow: 0 6px 20px 0 rgba(41, 121, 255, 0.5) !important;
}

.gradient-45deg-purple-deep-orange {
  background: #8e24aa;
  background: linear-gradient(45deg, #8e24aa, #ff6e40);
}
.gradient-45deg-purple-deep-orange.gradient-shadow {
  -webkit-box-shadow: 0 6px 20px 0 rgba(255, 110, 64, 0.5) !important;
          box-shadow: 0 6px 20px 0 rgba(255, 110, 64, 0.5) !important;
}

.gradient-45deg-purple-deep-orange-shadow {
  -webkit-box-shadow: 0 6px 20px 0 rgba(255, 110, 64, 0.5) !important;
          box-shadow: 0 6px 20px 0 rgba(255, 110, 64, 0.5) !important;
}

.gradient-45deg-green-teal {
  background: #43A047;
  background: linear-gradient(45deg, #43A047, #1de9b6);
}
.gradient-45deg-green-teal.gradient-shadow {
  -webkit-box-shadow: 0 6px 20px 0 rgba(29, 233, 182, 0.5) !important;
          box-shadow: 0 6px 20px 0 rgba(29, 233, 182, 0.5) !important;
}

.gradient-45deg-green-teal-shadow {
  -webkit-box-shadow: 0 6px 20px 0 rgba(29, 233, 182, 0.5) !important;
          box-shadow: 0 6px 20px 0 rgba(29, 233, 182, 0.5) !important;
}

.gradient-45deg-purple-light-blue {
  background: #e040fb;
  background: linear-gradient(45deg, #e040fb, #4fc3f7);
}
.gradient-45deg-purple-light-blue.gradient-shadow {
  -webkit-box-shadow: 0 6px 20px 0 rgba(79, 195, 247, 0.5) !important;
          box-shadow: 0 6px 20px 0 rgba(79, 195, 247, 0.5) !important;
}

.gradient-45deg-purple-light-blue-shadow {
  -webkit-box-shadow: 0 6px 20px 0 rgba(79, 195, 247, 0.5) !important;
          box-shadow: 0 6px 20px 0 rgba(79, 195, 247, 0.5) !important;
}

.gradient-45deg-cyan-cyan {
  background: #18ffff;
  background: linear-gradient(45deg, #18ffff, #00e5ff);
}
.gradient-45deg-cyan-cyan.gradient-shadow {
  -webkit-box-shadow: 0 6px 20px 0 rgba(0, 229, 255, 0.5) !important;
          box-shadow: 0 6px 20px 0 rgba(0, 229, 255, 0.5) !important;
}

.gradient-45deg-cyan-cyan-shadow {
  -webkit-box-shadow: 0 6px 20px 0 rgba(0, 229, 255, 0.5) !important;
          box-shadow: 0 6px 20px 0 rgba(0, 229, 255, 0.5) !important;
}

.gradient-45deg-yellow-teal {
  background: #fff9c4;
  background: linear-gradient(45deg, #fff9c4, #64ffda);
}
.gradient-45deg-yellow-teal.gradient-shadow {
  -webkit-box-shadow: 0 6px 20px 0 rgba(100, 255, 218, 0.5) !important;
          box-shadow: 0 6px 20px 0 rgba(100, 255, 218, 0.5) !important;
}

.gradient-45deg-yellow-teal-shadow {
  -webkit-box-shadow: 0 6px 20px 0 rgba(100, 255, 218, 0.5) !important;
          box-shadow: 0 6px 20px 0 rgba(100, 255, 218, 0.5) !important;
}

.gradient-45deg-purple-deep-purple {
  background: #7b1fa2;
  background: linear-gradient(45deg, #7b1fa2, #7c4dff);
}
.gradient-45deg-purple-deep-purple.gradient-shadow {
  -webkit-box-shadow: 0 6px 20px 0 rgba(124, 77, 255, 0.5) !important;
          box-shadow: 0 6px 20px 0 rgba(124, 77, 255, 0.5) !important;
}

.gradient-45deg-purple-deep-purple-shadow {
  -webkit-box-shadow: 0 6px 20px 0 rgba(124, 77, 255, 0.5) !important;
          box-shadow: 0 6px 20px 0 rgba(124, 77, 255, 0.5) !important;
}

.gradient-45deg-cyan-light-green {
  background: #0097a7;
  background: linear-gradient(45deg, #0097a7, #b2ff59);
}
.gradient-45deg-cyan-light-green.gradient-shadow {
  -webkit-box-shadow: 0 6px 20px 0 rgba(178, 255, 89, 0.5) !important;
          box-shadow: 0 6px 20px 0 rgba(178, 255, 89, 0.5) !important;
}

.gradient-45deg-cyan-light-green-shadow {
  -webkit-box-shadow: 0 6px 20px 0 rgba(178, 255, 89, 0.5) !important;
          box-shadow: 0 6px 20px 0 rgba(178, 255, 89, 0.5) !important;
}

.gradient-45deg-purple-amber {
  background: #d500f9;
  background: linear-gradient(45deg, #d500f9, #ffa000);
}
.gradient-45deg-purple-amber.gradient-shadow {
  -webkit-box-shadow: 0 6px 20px 0 rgba(255, 160, 0, 0.5) !important;
          box-shadow: 0 6px 20px 0 rgba(255, 160, 0, 0.5) !important;
}

.gradient-45deg-purple-amber-shadow {
  -webkit-box-shadow: 0 6px 20px 0 rgba(255, 160, 0, 0.5) !important;
          box-shadow: 0 6px 20px 0 rgba(255, 160, 0, 0.5) !important;
}

.gradient-45deg-indigo-purple {
  background: #303f9f;
  background: linear-gradient(45deg, #303f9f, #7b1fa2);
}
.gradient-45deg-indigo-purple.gradient-shadow {
  -webkit-box-shadow: 0 6px 20px 0 rgba(123, 31, 162, 0.5) !important;
          box-shadow: 0 6px 20px 0 rgba(123, 31, 162, 0.5) !important;
}

.gradient-45deg-indigo-purple-shadow {
  -webkit-box-shadow: 0 6px 20px 0 rgba(123, 31, 162, 0.5) !important;
          box-shadow: 0 6px 20px 0 rgba(123, 31, 162, 0.5) !important;
}

.gradient-45deg-deep-purple-blue {
  background: #6200ea;
  background: linear-gradient(45deg, #6200ea, #1976D2);
}
.gradient-45deg-deep-purple-blue.gradient-shadow {
  -webkit-box-shadow: 0 6px 20px 0 rgba(25, 118, 210, 0.5) !important;
          box-shadow: 0 6px 20px 0 rgba(25, 118, 210, 0.5) !important;
}

.gradient-45deg-deep-purple-blue-shadow {
  -webkit-box-shadow: 0 6px 20px 0 rgba(25, 118, 210, 0.5) !important;
          box-shadow: 0 6px 20px 0 rgba(25, 118, 210, 0.5) !important;
}

.gradient-45deg-deep-orange-orange {
  background: #bf360c;
  background: linear-gradient(45deg, #bf360c, #f57c00);
}
.gradient-45deg-deep-orange-orange.gradient-shadow {
  -webkit-box-shadow: 0 6px 20px 0 rgba(245, 124, 0, 0.5) !important;
          box-shadow: 0 6px 20px 0 rgba(245, 124, 0, 0.5) !important;
}

.gradient-45deg-deep-orange-orange-shadow {
  -webkit-box-shadow: 0 6px 20px 0 rgba(245, 124, 0, 0.5) !important;
          box-shadow: 0 6px 20px 0 rgba(245, 124, 0, 0.5) !important;
}

.gradient-45deg-light-blue-cyan {
  background: #0288d1;
  background: linear-gradient(45deg, #0288d1, #26c6da);
}
.gradient-45deg-light-blue-cyan.gradient-shadow {
  -webkit-box-shadow: 0 6px 20px 0 rgba(38, 198, 218, 0.5) !important;
          box-shadow: 0 6px 20px 0 rgba(38, 198, 218, 0.5) !important;
}

.gradient-45deg-light-blue-cyan-shadow {
  -webkit-box-shadow: 0 6px 20px 0 rgba(38, 198, 218, 0.5) !important;
          box-shadow: 0 6px 20px 0 rgba(38, 198, 218, 0.5) !important;
}

.gradient-45deg-blue-indigo {
  background: #2962FF;
  background: linear-gradient(45deg, #2962FF, #3949ab);
}
.gradient-45deg-blue-indigo.gradient-shadow {
  -webkit-box-shadow: 0 6px 20px 0 rgba(57, 73, 171, 0.5) !important;
          box-shadow: 0 6px 20px 0 rgba(57, 73, 171, 0.5) !important;
}

.gradient-45deg-blue-indigo-shadow {
  -webkit-box-shadow: 0 6px 20px 0 rgba(57, 73, 171, 0.5) !important;
          box-shadow: 0 6px 20px 0 rgba(57, 73, 171, 0.5) !important;
}

.gradient-45deg-semi-dark {
  background: #00aeff;
  background: -webkit-gradient(linear, right top, left top, from(#00aeff), to(#3369e6));
  background: linear-gradient(-90deg, #00aeff, #3369e6);
}
.gradient-45deg-semi-dark.gradient-shadow {
  -webkit-box-shadow: 0 6px 20px 0 rgba(51, 105, 230, 0.5) !important;
          box-shadow: 0 6px 20px 0 rgba(51, 105, 230, 0.5) !important;
}

.gradient-45deg-semi-dark-shadow {
  -webkit-box-shadow: 0 6px 20px 0 rgba(51, 105, 230, 0.5) !important;
          box-shadow: 0 6px 20px 0 rgba(51, 105, 230, 0.5) !important;
}

a {
  text-decoration: none;
}

html {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-weight: normal;
  color: var(--md-sys-color-on-background);
}
@media only screen and (min-width: 0) {
  html {
    font-size: 14px;
  }
}
@media only screen and (min-width: 993px) {
  html {
    font-size: 14.5px;
  }
}
@media only screen and (min-width: 1201px) {
  html {
    font-size: 15px;
  }
}

html[data-font=muli] {
  font-family: "Muli", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 400;
  line-height: 1.3;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  font-weight: inherit;
}

h1 {
  font-size: 4.2rem;
  line-height: 110%;
  margin: 2.8rem 0 1.68rem 0;
}

h2 {
  font-size: 3.56rem;
  line-height: 110%;
  margin: 2.3733333333rem 0 1.424rem 0;
}

h3 {
  font-size: 2.92rem;
  line-height: 110%;
  margin: 1.9466666667rem 0 1.168rem 0;
}

h4 {
  font-size: 2.28rem;
  line-height: 110%;
  margin: 1.52rem 0 0.912rem 0;
}

h5 {
  font-size: 1.64rem;
  line-height: 110%;
  margin: 1.0933333333rem 0 0.656rem 0;
}

h6 {
  font-size: 1.15rem;
  line-height: 110%;
  margin: 0.7666666667rem 0 0.46rem 0;
}

em {
  font-style: italic;
}

strong {
  font-weight: 500;
}

small {
  font-size: 75%;
}

.light {
  font-weight: 300;
}

.thin {
  font-weight: 200;
}

@media only screen and (min-width: 360px) {
  .flow-text {
    font-size: 1.2rem;
  }
}
@media only screen and (min-width: 390px) {
  .flow-text {
    font-size: 1.224rem;
  }
}
@media only screen and (min-width: 420px) {
  .flow-text {
    font-size: 1.248rem;
  }
}
@media only screen and (min-width: 450px) {
  .flow-text {
    font-size: 1.272rem;
  }
}
@media only screen and (min-width: 480px) {
  .flow-text {
    font-size: 1.296rem;
  }
}
@media only screen and (min-width: 510px) {
  .flow-text {
    font-size: 1.32rem;
  }
}
@media only screen and (min-width: 540px) {
  .flow-text {
    font-size: 1.344rem;
  }
}
@media only screen and (min-width: 570px) {
  .flow-text {
    font-size: 1.368rem;
  }
}
@media only screen and (min-width: 600px) {
  .flow-text {
    font-size: 1.392rem;
  }
}
@media only screen and (min-width: 630px) {
  .flow-text {
    font-size: 1.416rem;
  }
}
@media only screen and (min-width: 660px) {
  .flow-text {
    font-size: 1.44rem;
  }
}
@media only screen and (min-width: 690px) {
  .flow-text {
    font-size: 1.464rem;
  }
}
@media only screen and (min-width: 720px) {
  .flow-text {
    font-size: 1.488rem;
  }
}
@media only screen and (min-width: 750px) {
  .flow-text {
    font-size: 1.512rem;
  }
}
@media only screen and (min-width: 780px) {
  .flow-text {
    font-size: 1.536rem;
  }
}
@media only screen and (min-width: 810px) {
  .flow-text {
    font-size: 1.56rem;
  }
}
@media only screen and (min-width: 840px) {
  .flow-text {
    font-size: 1.584rem;
  }
}
@media only screen and (min-width: 870px) {
  .flow-text {
    font-size: 1.608rem;
  }
}
@media only screen and (min-width: 900px) {
  .flow-text {
    font-size: 1.632rem;
  }
}
@media only screen and (min-width: 930px) {
  .flow-text {
    font-size: 1.656rem;
  }
}
@media only screen and (min-width: 960px) {
  .flow-text {
    font-size: 1.68rem;
  }
}
@media only screen and (max-width: 360px) {
  .flow-text {
    font-size: 1.2rem;
  }
}

html {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

*, *:before, *:after {
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
}

body {
  background-color: var(--md-sys-color-background);
  color: var(--md-sys-color-on-background);
}

button,
input,
optgroup,
select,
textarea {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

a {
  color: colorFunc("light-blue", "darken-1");
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.valign-wrapper {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

.clearfix {
  clear: both;
}

.z-depth-0, .pagination li.active a:focus, .pagination li.disabled a, .btn:focus, .btn-large:focus, .btn-small:focus, .btn.filled:focus, .btn.tonal:focus, .btn.text, .btn-flat, .btn.disabled, .btn-floating.disabled, .btn-large.disabled, .btn-small.disabled, .btn-flat.disabled,
.btn:disabled, .btn-floating:disabled, .btn-large:disabled, .btn-small:disabled, .btn-flat:disabled,
.btn[disabled], .btn-floating[disabled], .btn-large[disabled], .btn-small[disabled], .btn-flat[disabled], .btn-floating:focus, .filled.btn-floating:focus, .tonal.btn-floating:focus, .text.btn-floating, .filled.btn-large:focus, .tonal.btn-large:focus, .text.btn-large, .filled.btn-small:focus, .tonal.btn-small:focus, .text.btn-small {
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
}

/* 2dp elevation modified*/
.z-depth-1, .sidenav, .collapsible, .pagination li.active a:hover, .card-panel, .card, .btn:hover, .btn-large:hover, .btn-small:hover, .btn.filled:hover, .btn.tonal:hover, .btn.elevated, .btn.elevated:focus, .btn-floating:hover, .filled.btn-floating:hover, .tonal.btn-floating:hover, .elevated.btn-floating, .elevated.btn-floating:focus, .btn-floating, .filled.btn-large:hover, .tonal.btn-large:hover, .elevated.btn-large, .elevated.btn-large:focus, .filled.btn-small:hover, .tonal.btn-small:hover, .elevated.btn-small, .elevated.btn-small:focus {
  -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
          box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}

.z-depth-1-half, .btn-floating:hover, .btn-floating:focus {
  -webkit-box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2);
          box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2);
}

/* 6dp elevation modified*/
.z-depth-2, .btn.elevated:hover, .elevated.btn-floating:hover, .elevated.btn-large:hover, .elevated.btn-small:hover {
  -webkit-box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
          box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
}

/* 12dp elevation modified*/
.z-depth-3, .toast {
  -webkit-box-shadow: 0 8px 17px 2px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
          box-shadow: 0 8px 17px 2px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
}

/* 16dp elevation */
.z-depth-4 {
  -webkit-box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -7px rgba(0, 0, 0, 0.2);
          box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -7px rgba(0, 0, 0, 0.2);
}

/* 24dp elevation */
.z-depth-5, .modal {
  -webkit-box-shadow: 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2);
          box-shadow: 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2);
}

.hoverable {
  -webkit-transition: -webkit-box-shadow 0.25s;
  transition: -webkit-box-shadow 0.25s;
  transition: box-shadow 0.25s;
  transition: box-shadow 0.25s, -webkit-box-shadow 0.25s;
}
.hoverable:hover {
  -webkit-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
          box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.divider {
  height: 1px;
  overflow: hidden;
  background-color: var(--md-sys-color-outline-variant);
}

blockquote {
  margin: 20px 0;
  padding-left: 0.9rem;
  border-left: 1px solid var(--md-sys-color-primary);
}

blockquote i.material-icons {
  font-size: inherit;
  vertical-align: sub;
}

i {
  line-height: inherit;
}
i.left {
  float: left;
  margin-left: -8px;
}
i.right {
  float: right;
}
i.tiny {
  font-size: 1rem;
}
i.small {
  font-size: 2rem;
}
i.medium {
  font-size: 4rem;
}
i.large {
  font-size: 6rem;
}

html.noscroll {
  position: fixed;
  overflow-y: scroll;
  width: 100%;
}

img.responsive-img,
video.responsive-video {
  max-width: 100%;
  height: auto;
}

.parallax-container {
  position: relative;
  overflow: hidden;
  height: 500px;
}
.parallax-container .parallax {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}
.parallax-container .parallax img {
  opacity: 0;
  position: absolute;
  left: 50%;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

.pin-top, .pin-bottom {
  position: relative;
}

.pinned {
  position: fixed !important;
}

select:focus {
  outline: 1px solid var(--md-ref-palette-primary80);
}

label {
  font-size: 0.8rem;
  color: var(--md-sys-color-on-surface-variant);
}

/*********************
  Transition Classes
**********************/
ul.staggered-list li {
  opacity: 0;
}

.fade-in {
  opacity: 0;
  -webkit-transform-origin: 0 50%;
          transform-origin: 0 50%;
}

/*********************
  Media Query Classes
**********************/
@media only screen and (max-width : 600.99px) {
  .hide-on-small-only, .hide-on-small-and-down {
    display: none !important;
  }
}

@media only screen and (max-width : 992.99px) {
  .hide-on-med-and-down {
    display: none !important;
  }
}

@media only screen and (min-width : 601px) {
  .hide-on-med-and-up {
    display: none !important;
  }
}

@media only screen and (min-width: 601px) and (max-width: 992.99px) {
  .hide-on-med-only {
    display: none !important;
  }
}

@media only screen and (min-width : 993px) {
  .hide-on-large-only {
    display: none !important;
  }
}

@media only screen and (min-width : 1201px) {
  .hide-on-extra-large-only {
    display: none !important;
  }
}

@media only screen and (min-width : 1201px) {
  .show-on-extra-large {
    display: block !important;
  }
}

@media only screen and (min-width : 993px) {
  .show-on-large {
    display: block !important;
  }
}

@media only screen and (min-width: 601px) and (max-width: 992.99px) {
  .show-on-medium {
    display: block !important;
  }
}

@media only screen and (max-width : 600.99px) {
  .show-on-small {
    display: block !important;
  }
}

@media only screen and (min-width : 601px) {
  .show-on-medium-and-up {
    display: block !important;
  }
}

@media only screen and (max-width : 992.99px) {
  .show-on-medium-and-down {
    display: block !important;
  }
}

@media only screen and (max-width : 600.99px) {
  .center-on-small-only {
    text-align: center;
  }
}

.page-footer {
  margin-top: 5rem;
  padding-top: 3rem;
  border-top: 1px dashed var(--md-sys-color-outline-variant);
}
.page-footer a {
  color: var(--md-sys-color-primary);
}
.page-footer .footer-copyright {
  overflow: hidden;
  min-height: 50px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 10px 0px;
}

:where(.page-footer p) {
  color: var(--md-sys-color-on-surface-variant);
}

.page-footer ul {
  padding-left: 0;
  list-style-type: none;
}

table, th, td {
  border: none;
}

table {
  width: 100%;
  display: table;
  border-collapse: collapse;
  border-spacing: 0;
}
table.striped tr {
  border-bottom: none;
}
table.striped tbody > tr:nth-child(odd) {
  background-color: rgba(0, 0, 0, 0.08);
}
table.highlight > tbody > tr {
  -webkit-transition: background-color 0.25s ease;
  transition: background-color 0.25s ease;
}
table.highlight > tbody > tr:hover {
  background-color: rgba(0, 0, 0, 0.04);
}
table thead {
  color: var(--md-sys-color-on-surface-variant);
}
table.centered thead tr th, table.centered tbody tr td {
  text-align: center;
}

tr {
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

td, th {
  padding: 15px 5px;
  display: table-cell;
  text-align: left;
  vertical-align: middle;
  border-radius: 0;
}

@media only screen and (max-width : 992.99px) {
  table.responsive-table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    display: block;
    position: relative;
  }
  table.responsive-table td:empty:before {
    content: " ";
  }
  table.responsive-table th,
  table.responsive-table td {
    margin: 0;
    vertical-align: top;
  }
  table.responsive-table th {
    text-align: left;
  }
  table.responsive-table thead {
    display: block;
    float: left;
  }
  table.responsive-table thead tr {
    display: block;
    padding: 0 10px 0 0;
  }
  table.responsive-table thead tr th::before {
    content: " ";
  }
  table.responsive-table tbody {
    display: block;
    width: auto;
    position: relative;
    overflow-x: auto;
    white-space: nowrap;
  }
  table.responsive-table tbody tr {
    display: inline-block;
    vertical-align: top;
  }
  table.responsive-table th {
    display: block;
    text-align: right;
  }
  table.responsive-table td {
    display: block;
    min-height: 1.25em;
    text-align: left;
  }
  table.responsive-table tr {
    border-bottom: none;
    padding: 0 10px;
  }
  table.responsive-table {
    /* sort out borders */
  }
  table.responsive-table thead {
    border: 0;
    border-right: 1px solid var(--md-sys-color-outline-variant);
  }
}
.video-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}
.video-container iframe, .video-container object, .video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*******************
  Utility Classes
*******************/
.hide {
  display: none !important;
}

.left-align {
  text-align: left;
}

.right-align {
  text-align: right;
}

.center, .center-align {
  text-align: center;
}

.left {
  float: left !important;
}

.right {
  float: right !important;
}

.no-select {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.circle {
  border-radius: 50%;
}

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.truncate {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.no-padding {
  padding: 0 !important;
}

/**************************
  Utility Spacing Classes
**************************/
.m-0 {
  margin: 0 !important;
}

.mt-0 {
  margin-top: 0 !important;
}

.mr-0 {
  margin-right: 0 !important;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.ml-0 {
  margin-left: 0 !important;
}

.mx-0 {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.my-0 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.m-1 {
  margin: 0.25rem !important;
}

.mt-1 {
  margin-top: 0.25rem !important;
}

.mr-1 {
  margin-right: 0.25rem !important;
}

.mb-1 {
  margin-bottom: 0.25rem !important;
}

.ml-1 {
  margin-left: 0.25rem !important;
}

.mx-1 {
  margin-left: 0.25rem !important;
  margin-right: 0.25rem !important;
}

.my-1 {
  margin-top: 0.25rem !important;
  margin-bottom: 0.25rem !important;
}

.m-2 {
  margin: 0.5rem !important;
}

.mt-2 {
  margin-top: 0.5rem !important;
}

.mr-2 {
  margin-right: 0.5rem !important;
}

.mb-2 {
  margin-bottom: 0.5rem !important;
}

.ml-2 {
  margin-left: 0.5rem !important;
}

.mx-2 {
  margin-left: 0.5rem !important;
  margin-right: 0.5rem !important;
}

.my-2 {
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}

.m-3 {
  margin: 0.75rem !important;
}

.mt-3 {
  margin-top: 0.75rem !important;
}

.mr-3 {
  margin-right: 0.75rem !important;
}

.mb-3 {
  margin-bottom: 0.75rem !important;
}

.ml-3 {
  margin-left: 0.75rem !important;
}

.mx-3 {
  margin-left: 0.75rem !important;
  margin-right: 0.75rem !important;
}

.my-3 {
  margin-top: 0.75rem !important;
  margin-bottom: 0.75rem !important;
}

.m-4 {
  margin: 1rem !important;
}

.mt-4 {
  margin-top: 1rem !important;
}

.mr-4 {
  margin-right: 1rem !important;
}

.mb-4 {
  margin-bottom: 1rem !important;
}

.ml-4 {
  margin-left: 1rem !important;
}

.mx-4 {
  margin-left: 1rem !important;
  margin-right: 1rem !important;
}

.my-4 {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
}

.m-5 {
  margin: 1.5rem !important;
}

.mt-5 {
  margin-top: 1.5rem !important;
}

.mr-5 {
  margin-right: 1.5rem !important;
}

.mb-5 {
  margin-bottom: 1.5rem !important;
}

.ml-5 {
  margin-left: 1.5rem !important;
}

.mx-5 {
  margin-left: 1.5rem !important;
  margin-right: 1.5rem !important;
}

.my-5 {
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}

.m-6 {
  margin: 3rem !important;
}

.mt-6 {
  margin-top: 3rem !important;
}

.mr-6 {
  margin-right: 3rem !important;
}

.mb-6 {
  margin-bottom: 3rem !important;
}

.ml-6 {
  margin-left: 3rem !important;
}

.mx-6 {
  margin-left: 3rem !important;
  margin-right: 3rem !important;
}

.my-6 {
  margin-top: 3rem !important;
  margin-bottom: 3rem !important;
}

.m-auto {
  margin: auto !important;
}

.mt-auto {
  margin-top: auto !important;
}

.mr-auto {
  margin-right: auto !important;
}

.mb-auto {
  margin-bottom: auto !important;
}

.ml-auto {
  margin-left: auto !important;
}

.mx-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}

.my-auto {
  margin-top: auto !important;
  margin-bottom: auto !important;
}

.p-0 {
  padding: 0 !important;
}

.pt-0 {
  padding-top: 0 !important;
}

.pr-0 {
  padding-right: 0 !important;
}

.pb-0 {
  padding-bottom: 0 !important;
}

.pl-0 {
  padding-left: 0 !important;
}

.px-0 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.py-0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.p-1 {
  padding: 0.25rem !important;
}

.pt-1 {
  padding-top: 0.25rem !important;
}

.pr-1 {
  padding-right: 0.25rem !important;
}

.pb-1 {
  padding-bottom: 0.25rem !important;
}

.pl-1 {
  padding-left: 0.25rem !important;
}

.px-1 {
  padding-left: 0.25rem !important;
  padding-right: 0.25rem !important;
}

.py-1 {
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
}

.p-2 {
  padding: 0.5rem !important;
}

.pt-2 {
  padding-top: 0.5rem !important;
}

.pr-2 {
  padding-right: 0.5rem !important;
}

.pb-2 {
  padding-bottom: 0.5rem !important;
}

.pl-2 {
  padding-left: 0.5rem !important;
}

.px-2 {
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}

.py-2 {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

.p-3 {
  padding: 0.75rem !important;
}

.pt-3 {
  padding-top: 0.75rem !important;
}

.pr-3 {
  padding-right: 0.75rem !important;
}

.pb-3 {
  padding-bottom: 0.75rem !important;
}

.pl-3 {
  padding-left: 0.75rem !important;
}

.px-3 {
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
}

.py-3 {
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
}

.p-4 {
  padding: 1rem !important;
}

.pt-4 {
  padding-top: 1rem !important;
}

.pr-4 {
  padding-right: 1rem !important;
}

.pb-4 {
  padding-bottom: 1rem !important;
}

.pl-4 {
  padding-left: 1rem !important;
}

.px-4 {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

.py-4 {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

.p-5 {
  padding: 1.5rem !important;
}

.pt-5 {
  padding-top: 1.5rem !important;
}

.pr-5 {
  padding-right: 1.5rem !important;
}

.pb-5 {
  padding-bottom: 1.5rem !important;
}

.pl-5 {
  padding-left: 1.5rem !important;
}

.px-5 {
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}

.py-5 {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}

.p-6 {
  padding: 3rem !important;
}

.pt-6 {
  padding-top: 3rem !important;
}

.pr-6 {
  padding-right: 3rem !important;
}

.pb-6 {
  padding-bottom: 3rem !important;
}

.pl-6 {
  padding-left: 3rem !important;
}

.px-6 {
  padding-left: 3rem !important;
  padding-right: 3rem !important;
}

.py-6 {
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}

.p-auto {
  padding: auto !important;
}

.pt-auto {
  padding-top: auto !important;
}

.pr-auto {
  padding-right: auto !important;
}

.pb-auto {
  padding-bottom: auto !important;
}

.pl-auto {
  padding-left: auto !important;
}

.px-auto {
  padding-left: auto !important;
  padding-right: auto !important;
}

.py-auto {
  padding-top: auto !important;
  padding-bottom: auto !important;
}

.margin-0 {
  margin: 0 !important;
}

.margin-1 {
  margin: 0.25rem !important;
}

.margin-2 {
  margin: 0.5rem !important;
}

.margin-3 {
  margin: 0.75rem !important;
}

.margin-4 {
  margin: 1rem !important;
}

.margin-5 {
  margin: 1.5rem !important;
}

.margin-6 {
  margin: 3rem !important;
}

.padding-0 {
  padding: 0 !important;
}

.padding-1 {
  padding: 0.25rem !important;
}

.padding-2 {
  padding: 0.5rem !important;
}

.padding-3 {
  padding: 0.75rem !important;
}

.padding-4 {
  padding: 1rem !important;
}

.padding-5 {
  padding: 1.5rem !important;
}

.padding-6 {
  padding: 3rem !important;
}

.display-docked {
  position: absolute;
  opacity: 0;
  z-index: 9999;
  visibility: hidden;
}

/**************************
  Utility Typography Classes
**************************/
.font-weight-100 {
  font-weight: 100 !important;
}

.font-weight-200 {
  font-weight: 200 !important;
}

.font-weight-300 {
  font-weight: 300 !important;
}

.font-weight-400 {
  font-weight: 400 !important;
}

.font-weight-500 {
  font-weight: 500 !important;
}

.font-weight-600 {
  font-weight: 600 !important;
}

.font-weight-700 {
  font-weight: 700 !important;
}

.font-weight-800 {
  font-weight: 800 !important;
}

.font-weight-900 {
  font-weight: 900 !important;
}

.font-weight-normal {
  font-weight: normal !important;
}

.font-weight-bold {
  font-weight: bold !important;
}

.font-weight-lighter {
  font-weight: lighter !important;
}

.font-weight-bolder {
  font-weight: bolder !important;
}

.line-height-normal {
  line-height: normal !important;
}

/**************************
  Utility Cursor Classes
**************************/
.cursor-alias {
  cursor: alias;
}

.cursor-alias-important {
  cursor: alias !important;
}

.cursor-all-scroll {
  cursor: all-scroll;
}

.cursor-all-scroll-important {
  cursor: all-scroll !important;
}

.cursor-auto {
  cursor: auto;
}

.cursor-auto-important {
  cursor: auto !important;
}

.cursor-cell {
  cursor: cell;
}

.cursor-cell-important {
  cursor: cell !important;
}

.cursor-col-resize {
  cursor: col-resize;
}

.cursor-col-resize-important {
  cursor: col-resize !important;
}

.cursor-context-menu {
  cursor: context-menu;
}

.cursor-context-menu-important {
  cursor: context-menu !important;
}

.cursor-copy {
  cursor: copy;
}

.cursor-copy-important {
  cursor: copy !important;
}

.cursor-crosshair {
  cursor: crosshair;
}

.cursor-crosshair-important {
  cursor: crosshair !important;
}

.cursor-default {
  cursor: default;
}

.cursor-default-important {
  cursor: default !important;
}

.cursor-e-resize {
  cursor: e-resize;
}

.cursor-e-resize-important {
  cursor: e-resize !important;
}

.cursor-ew-resize {
  cursor: ew-resize;
}

.cursor-ew-resize-important {
  cursor: ew-resize !important;
}

.cursor-grab {
  cursor: -webkit-grab;
  cursor: grab;
}

.cursor-grab-important {
  cursor: -webkit-grab !important;
  cursor: grab !important;
}

.cursor-grabbing {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

.cursor-grabbing-important {
  cursor: -webkit-grabbing !important;
  cursor: grabbing !important;
}

.cursor-help {
  cursor: help;
}

.cursor-help-important {
  cursor: help !important;
}

.cursor-move {
  cursor: move;
}

.cursor-move-important {
  cursor: move !important;
}

.cursor-n-resize {
  cursor: n-resize;
}

.cursor-n-resize-important {
  cursor: n-resize !important;
}

.cursor-ne-resize {
  cursor: ne-resize;
}

.cursor-ne-resize-important {
  cursor: ne-resize !important;
}

.cursor-nesw-resize {
  cursor: nesw-resize;
}

.cursor-nesw-resize-important {
  cursor: nesw-resize !important;
}

.cursor-ns-resize {
  cursor: ns-resize;
}

.cursor-ns-resize-important {
  cursor: ns-resize !important;
}

.cursor-nw-resize {
  cursor: nw-resize;
}

.cursor-nw-resize-important {
  cursor: nw-resize !important;
}

.cursor-nwse-resize {
  cursor: nwse-resize;
}

.cursor-nwse-resize-important {
  cursor: nwse-resize !important;
}

.cursor-no-drop {
  cursor: no-drop;
}

.cursor-no-drop-important {
  cursor: no-drop !important;
}

.cursor-none {
  cursor: none;
}

.cursor-none-important {
  cursor: none !important;
}

.cursor-not-allowed {
  cursor: not-allowed;
}

.cursor-not-allowed-important {
  cursor: not-allowed !important;
}

.cursor-pointer {
  cursor: pointer;
}

.cursor-pointer-important {
  cursor: pointer !important;
}

.cursor-progress {
  cursor: progress;
}

.cursor-progress-important {
  cursor: progress !important;
}

.cursor-row-resize {
  cursor: row-resize;
}

.cursor-row-resize-important {
  cursor: row-resize !important;
}

.cursor-s-resize {
  cursor: s-resize;
}

.cursor-s-resize-important {
  cursor: s-resize !important;
}

.cursor-se-resize {
  cursor: se-resize;
}

.cursor-se-resize-important {
  cursor: se-resize !important;
}

.cursor-sw-resize {
  cursor: sw-resize;
}

.cursor-sw-resize-important {
  cursor: sw-resize !important;
}

.cursor-text {
  cursor: text;
}

.cursor-text-important {
  cursor: text !important;
}

.cursor-w-resize {
  cursor: w-resize;
}

.cursor-w-resize-important {
  cursor: w-resize !important;
}

.cursor-wait {
  cursor: wait;
}

.cursor-wait-important {
  cursor: wait !important;
}

.cursor-zoom-in {
  cursor: -webkit-zoom-in;
  cursor: zoom-in;
}

.cursor-zoom-in-important {
  cursor: -webkit-zoom-in !important;
  cursor: zoom-in !important;
}

.cursor-zoom-out {
  cursor: -webkit-zoom-out;
  cursor: zoom-out;
}

.cursor-zoom-out-important {
  cursor: -webkit-zoom-out !important;
  cursor: zoom-out !important;
}

.confirmation-btns {
  margin-left: auto;
}

/**************************
  Utility Screen-Fit Classes
**************************/
.screen-fit {
  width: 100%;
  height: 100vh;
}

.screen-fit-x {
  width: 100%;
}

.screen-fit-y {
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}

.screen-fit-min {
  min-width: 100%;
  min-height: 100vh;
}

.screen-fit-min-x {
  min-width: 100%;
  height: 100vh;
}

.screen-fit-min-y {
  width: 100%;
  min-height: 100vh;
}

/**************************
  Utility Screen-Flex Classes
**************************/
.screen-flex {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.screen-flex.screen-flex-important {
  display: -webkit-box !important;
  display: -webkit-flex !important;
  display: -ms-flexbox !important;
  display: flex !important;
}
.screen-flex.screen-center {
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
.screen-flex.screen-left {
  -webkit-box-pack: left;
  -webkit-justify-content: left;
      -ms-flex-pack: left;
          justify-content: left;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
.screen-flex.screen-right {
  -webkit-box-pack: right;
  -webkit-justify-content: right;
      -ms-flex-pack: right;
          justify-content: right;
  -webkit-box-align: right;
  -webkit-align-items: right;
      -ms-flex-align: right;
          align-items: right;
}
.screen-flex.screen-wrap {
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}
.screen-flex.screen-no-wrap {
  -webkit-flex-wrap: nowrap;
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
}
.screen-flex.screen-center-y {
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
.screen-flex.screen-bottom-y {
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
      -ms-flex-align: end;
          align-items: flex-end;
}
.screen-flex.screen-top-y {
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
}
.screen-flex.screen-center-x {
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.screen-flex.screen-center-space-x {
  -webkit-justify-content: space-around;
      -ms-flex-pack: distribute;
          justify-content: space-around;
}
.screen-flex.screen-center-distributed-x {
  -webkit-box-pack: space-evenly;
  -webkit-justify-content: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
}
.screen-flex.screen-distributed-x {
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.screen-flex.screen-direction-y-asc {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}
.screen-flex.screen-direction-y-desc {
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
  -webkit-flex-direction: column-reverse;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse;
}
.screen-flex.screen-direction-x-asc {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
}
.screen-flex.screen-direction-x-desc {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -webkit-flex-direction: row-reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}
.screen-flex .element-flex-grow-1 {
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

.element-flex {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

/**************************
  Utility Object-Fit Classes
**************************/
.object-fit-cover {
  -o-object-fit: cover;
     object-fit: cover;
}

.object-fit-fill {
  -o-object-fit: fill;
     object-fit: fill;
}

/* This is needed for some mobile phones to display the Google Icon font properly */
.material-icons, .material-symbols-outlined,
.material-symbols-rounded, .material-symbols-sharp {
  text-rendering: optimizeLegibility;
  -webkit-font-feature-settings: "liga";
     -moz-font-feature-settings: "liga";
          font-feature-settings: "liga";
  -webkit-user-select: none;
  -ms-user-select: none;
  -moz-user-select: none;
       user-select: none;
}

.container {
  margin: 0 auto;
  max-width: 1280px;
  width: 90%;
}

@media only screen and (min-width : 601px) {
  .container {
    width: 85%;
  }
}
@media only screen and (min-width : 993px) {
  .container {
    width: 70%;
  }
}
.section {
  padding: 1rem 0;
}

body {
  --gap-size: 1.5rem;
}

.row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gap-size);
}
.row .s1 {
  grid-column: auto/span 1;
}
.row .s2 {
  grid-column: auto/span 2;
}
.row .s3 {
  grid-column: auto/span 3;
}
.row .s4 {
  grid-column: auto/span 4;
}
.row .s5 {
  grid-column: auto/span 5;
}
.row .s6 {
  grid-column: auto/span 6;
}
.row .s7 {
  grid-column: auto/span 7;
}
.row .s8 {
  grid-column: auto/span 8;
}
.row .s9 {
  grid-column: auto/span 9;
}
.row .s10 {
  grid-column: auto/span 10;
}
.row .s11 {
  grid-column: auto/span 11;
}
.row .s12 {
  grid-column: auto/span 12;
}
.row .offset-s1 {
  grid-column-start: 3;
}
.row .offset-s2 {
  grid-column-start: 2;
}
.row .offset-s3 {
  grid-column-start: 4;
}
.row .offset-s4 {
  grid-column-start: 5;
}
.row .offset-s5 {
  grid-column-start: 6;
}
.row .offset-s6 {
  grid-column-start: 7;
}
.row .offset-s7 {
  grid-column-start: 8;
}
.row .offset-s8 {
  grid-column-start: 9;
}
.row .offset-s9 {
  grid-column-start: 10;
}
.row .offset-s10 {
  grid-column-start: 11;
}
.row .offset-s11 {
  grid-column-start: 12;
}
@media only screen and (min-width : 601px) {
  .row .m1 {
    grid-column: auto/span 1;
  }
  .row .m2 {
    grid-column: auto/span 2;
  }
  .row .m3 {
    grid-column: auto/span 3;
  }
  .row .m4 {
    grid-column: auto/span 4;
  }
  .row .m5 {
    grid-column: auto/span 5;
  }
  .row .m6 {
    grid-column: auto/span 6;
  }
  .row .m7 {
    grid-column: auto/span 7;
  }
  .row .m8 {
    grid-column: auto/span 8;
  }
  .row .m9 {
    grid-column: auto/span 9;
  }
  .row .m10 {
    grid-column: auto/span 10;
  }
  .row .m11 {
    grid-column: auto/span 11;
  }
  .row .m12 {
    grid-column: auto/span 12;
  }
  .row .offset-m1 {
    grid-column-start: 2;
  }
  .row .offset-m2 {
    grid-column-start: 3;
  }
  .row .offset-m3 {
    grid-column-start: 4;
  }
  .row .offset-m4 {
    grid-column-start: 5;
  }
  .row .offset-m5 {
    grid-column-start: 6;
  }
  .row .offset-m6 {
    grid-column-start: 7;
  }
  .row .offset-m7 {
    grid-column-start: 8;
  }
  .row .offset-m8 {
    grid-column-start: 9;
  }
  .row .offset-m9 {
    grid-column-start: 10;
  }
  .row .offset-m10 {
    grid-column-start: 11;
  }
  .row .offset-m11 {
    grid-column-start: 12;
  }
}
@media only screen and (min-width : 993px) {
  .row .l1 {
    grid-column: auto/span 1;
  }
  .row .l2 {
    grid-column: auto/span 2;
  }
  .row .l3 {
    grid-column: auto/span 3;
  }
  .row .l4 {
    grid-column: auto/span 4;
  }
  .row .l5 {
    grid-column: auto/span 5;
  }
  .row .l6 {
    grid-column: auto/span 6;
  }
  .row .l7 {
    grid-column: auto/span 7;
  }
  .row .l8 {
    grid-column: auto/span 8;
  }
  .row .l9 {
    grid-column: auto/span 9;
  }
  .row .l10 {
    grid-column: auto/span 10;
  }
  .row .l11 {
    grid-column: auto/span 11;
  }
  .row .l12 {
    grid-column: auto/span 12;
  }
  .row .offset-l1 {
    grid-column-start: 2;
  }
  .row .offset-l2 {
    grid-column-start: 3;
  }
  .row .offset-l3 {
    grid-column-start: 4;
  }
  .row .offset-l4 {
    grid-column-start: 5;
  }
  .row .offset-l5 {
    grid-column-start: 6;
  }
  .row .offset-l6 {
    grid-column-start: 7;
  }
  .row .offset-l7 {
    grid-column-start: 8;
  }
  .row .offset-l8 {
    grid-column-start: 9;
  }
  .row .offset-l9 {
    grid-column-start: 10;
  }
  .row .offset-l10 {
    grid-column-start: 11;
  }
  .row .offset-l11 {
    grid-column-start: 12;
  }
}
@media only screen and (min-width : 1201px) {
  .row .xl1 {
    grid-column: auto/span 1;
  }
  .row .xl2 {
    grid-column: auto/span 2;
  }
  .row .xl3 {
    grid-column: auto/span 3;
  }
  .row .xl4 {
    grid-column: auto/span 4;
  }
  .row .xl5 {
    grid-column: auto/span 5;
  }
  .row .xl6 {
    grid-column: auto/span 6;
  }
  .row .xl7 {
    grid-column: auto/span 7;
  }
  .row .xl8 {
    grid-column: auto/span 8;
  }
  .row .xl9 {
    grid-column: auto/span 9;
  }
  .row .xl10 {
    grid-column: auto/span 10;
  }
  .row .xl11 {
    grid-column: auto/span 11;
  }
  .row .xl12 {
    grid-column: auto/span 12;
  }
  .row .offset-xl1 {
    grid-column-start: 2;
  }
  .row .offset-xl2 {
    grid-column-start: 3;
  }
  .row .offset-xl3 {
    grid-column-start: 4;
  }
  .row .offset-xl4 {
    grid-column-start: 5;
  }
  .row .offset-xl5 {
    grid-column-start: 6;
  }
  .row .offset-xl6 {
    grid-column-start: 7;
  }
  .row .offset-xl7 {
    grid-column-start: 8;
  }
  .row .offset-xl8 {
    grid-column-start: 9;
  }
  .row .offset-xl9 {
    grid-column-start: 10;
  }
  .row .offset-xl10 {
    grid-column-start: 11;
  }
  .row .offset-xl11 {
    grid-column-start: 12;
  }
}

.g-0 {
  gap: 0;
}

.g-1 {
  gap: calc(0.25 * var(--gap-size));
}

.g-2 {
  gap: calc(0.5 * var(--gap-size));
}

.g-3 {
  gap: calc(1 * var(--gap-size));
}

.g-4 {
  gap: calc(1.5 * var(--gap-size));
}

.g-5 {
  gap: calc(3 * var(--gap-size));
}

.scale-transition {
  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.53, 0.01, 0.36, 1.63) !important;
  transition: -webkit-transform 0.3s cubic-bezier(0.53, 0.01, 0.36, 1.63) !important;
  transition: transform 0.3s cubic-bezier(0.53, 0.01, 0.36, 1.63) !important;
  transition: transform 0.3s cubic-bezier(0.53, 0.01, 0.36, 1.63), -webkit-transform 0.3s cubic-bezier(0.53, 0.01, 0.36, 1.63) !important;
}

.scale-transition.scale-out {
  -webkit-transform: scale(0);
          transform: scale(0);
  -webkit-transition: -webkit-transform 0.2s !important;
  transition: -webkit-transform 0.2s !important;
  transition: transform 0.2s !important;
  transition: transform 0.2s, -webkit-transform 0.2s !important;
}

.scale-transition.scale-in {
  -webkit-transform: scale(1);
          transform: scale(1);
}

.table-of-contents {
  list-style: none;
}
.table-of-contents.fixed {
  position: fixed;
}
.table-of-contents li {
  padding: 0;
}
.table-of-contents a {
  display: inline-block;
  font-weight: 400;
  color: var(--md-sys-color-secondary);
  padding-left: 16px;
  height: 2rem;
  line-height: 2rem;
  border-left: 1px solid var(--md-sys-color-outline-variant);
}
.table-of-contents a:hover {
  color: var(--md-sys-color-on-background);
  padding-left: 15px;
}
.table-of-contents a.active {
  color: var(--md-sys-color-primary);
  font-weight: 500;
  padding-left: 14px;
  border-left: 2px solid var(--md-sys-color-primary);
}

.tap-target-wrapper {
  width: 800px;
  height: 800px;
  position: fixed;
  z-index: 1000;
  visibility: hidden;
  -webkit-transition: visibility 0s 0.3s;
  transition: visibility 0s 0.3s;
}

.tap-target-wrapper.open {
  visibility: visible;
  -webkit-transition: visibility 0s;
  transition: visibility 0s;
}
.tap-target-wrapper.open .tap-target {
  -webkit-transform: scale(1);
          transform: scale(1);
  opacity: 0.95;
  -webkit-transition: opacity 0.3s cubic-bezier(0.42, 0, 0.58, 1), -webkit-transform 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  transition: opacity 0.3s cubic-bezier(0.42, 0, 0.58, 1), -webkit-transform 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  transition: transform 0.3s cubic-bezier(0.42, 0, 0.58, 1), opacity 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  transition: transform 0.3s cubic-bezier(0.42, 0, 0.58, 1), opacity 0.3s cubic-bezier(0.42, 0, 0.58, 1), -webkit-transform 0.3s cubic-bezier(0.42, 0, 0.58, 1);
}
.tap-target-wrapper.open .tap-target-wave::before {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.tap-target-wrapper.open .tap-target-wave::after {
  visibility: visible;
  -webkit-animation: pulse-animation 1s cubic-bezier(0.24, 0, 0.38, 1) infinite;
          animation: pulse-animation 1s cubic-bezier(0.24, 0, 0.38, 1) infinite;
  -webkit-transition: opacity 0.3s, visibility 0s 1s, -webkit-transform 0.3s;
  transition: opacity 0.3s, visibility 0s 1s, -webkit-transform 0.3s;
  transition: opacity 0.3s, transform 0.3s, visibility 0s 1s;
  transition: opacity 0.3s, transform 0.3s, visibility 0s 1s, -webkit-transform 0.3s;
}

.tap-target {
  position: absolute;
  font-size: 1rem;
  border-radius: 50%;
  background-color: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-primary);
  -webkit-box-shadow: 0 20px 20px 0 rgba(0, 0, 0, 0.14), 0 10px 50px 0 rgba(0, 0, 0, 0.12), 0 30px 10px -20px rgba(0, 0, 0, 0.2);
          box-shadow: 0 20px 20px 0 rgba(0, 0, 0, 0.14), 0 10px 50px 0 rgba(0, 0, 0, 0.12), 0 30px 10px -20px rgba(0, 0, 0, 0.2);
  width: 100%;
  height: 100%;
  opacity: 0;
  -webkit-transform: scale(0);
          transform: scale(0);
  -webkit-transition: opacity 0.3s cubic-bezier(0.42, 0, 0.58, 1), -webkit-transform 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  transition: opacity 0.3s cubic-bezier(0.42, 0, 0.58, 1), -webkit-transform 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  transition: transform 0.3s cubic-bezier(0.42, 0, 0.58, 1), opacity 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  transition: transform 0.3s cubic-bezier(0.42, 0, 0.58, 1), opacity 0.3s cubic-bezier(0.42, 0, 0.58, 1), -webkit-transform 0.3s cubic-bezier(0.42, 0, 0.58, 1);
}

.tap-target-content {
  position: relative;
  display: table-cell;
}

.tap-target-wave {
  position: absolute;
  border-radius: 50%;
  z-index: 10001;
}
.tap-target-wave::before, .tap-target-wave::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: var(--md-sys-color-surface);
}
.tap-target-wave::before {
  -webkit-transform: scale(0);
          transform: scale(0);
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}
.tap-target-wave::after {
  visibility: hidden;
  -webkit-transition: opacity 0.3s, visibility 0s, -webkit-transform 0.3s;
  transition: opacity 0.3s, visibility 0s, -webkit-transform 0.3s;
  transition: opacity 0.3s, transform 0.3s, visibility 0s;
  transition: opacity 0.3s, transform 0.3s, visibility 0s, -webkit-transform 0.3s;
  z-index: -1;
}

.tap-target-origin {
  top: 50%;
  left: 50%;
  z-index: 10002;
  position: absolute !important;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.tap-target-origin:not(.btn), .tap-target-origin:not(.btn):hover {
  background: none;
}

@media only screen and (max-width: 600px) {
  .tap-target, .tap-target-wrapper {
    width: 600px;
    height: 600px;
  }
}
:root {
  --btn-height: 40px;
  --btn-font-size-icon: 16px;
  --btn-padding: 24px;
  --btn-padding-icon: 16px;
  --btn-gap-icon: 8px;
  --btn-border-radius: 4px;
  --btn-font-size: 14px;
}

.btn, .btn-small, .btn-large, .btn-floating, .btn-flat {
  height: var(--btn-height);
  border-radius: var(--btn-border-radius);
  padding-left: var(--btn-padding);
  padding-right: var(--btn-padding);
  font-size: var(--btn-font-size);
  font-weight: 500;
  text-decoration: none;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
  outline: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -webkit-transition: background-color 0.2s ease-out;
  transition: background-color 0.2s ease-out;
}
.btn:focus, .btn-floating:focus, .btn-large:focus, .btn-small:focus, .btn-flat:focus {
  background-color: var(--md-sys-color-primary-container);
}

.btn, .btn-small, .btn-large, .btn-floating {
  color: var(--md-sys-color-on-primary);
  background-color: var(--md-sys-color-primary);
}
.btn:hover, .btn-floating:hover, .btn:focus, .btn-floating:focus, .btn-large:hover, .btn-large:focus, .btn-small:hover, .btn-small:focus {
  color: var(--md-sys-color-on-primary);
}
.btn:hover, .btn-floating:hover, .btn-large:hover, .btn-small:hover {
  background-color: color-mix(in srgb, var(--md-sys-color-primary), var(--md-sys-color-on-primary) 16%);
}
.btn:focus, .btn-floating:focus, .btn-large:focus, .btn-small:focus {
  background-color: color-mix(in srgb, var(--md-sys-color-primary), var(--md-sys-color-on-primary) 20%);
}
.btn:focus-visible, .btn-floating:focus-visible, .btn-large:focus-visible, .btn-small:focus-visible {
  outline: 3px solid var(--md-sys-color-secondary);
  outline-offset: 2px;
}

.btn.icon-left, .icon-left.btn-small, .icon-left.btn-large, .icon-left.btn-floating, .btn.icon-right, .icon-right.btn-small, .icon-right.btn-large, .icon-right.btn-floating {
  position: relative;
}

.btn.icon-left, .icon-left.btn-small, .icon-left.btn-large, .icon-left.btn-floating {
  padding-left: calc(var(--btn-padding-icon) + var(--btn-font-size-icon) + var(--btn-gap-icon));
}

.btn.icon-right, .icon-right.btn-small, .icon-right.btn-large, .icon-right.btn-floating {
  padding-right: calc(var(--btn-padding-icon) + var(--btn-font-size-icon) + var(--btn-gap-icon));
}

.btn.icon-left i, .icon-left.btn-small i, .icon-left.btn-large i, .icon-left.btn-floating i, .btn.icon-right i, .icon-right.btn-small i, .icon-right.btn-large i, .icon-right.btn-floating i {
  position: absolute;
  top: 50%;
  font-size: var(--btn-font-size-icon);
  line-height: 1;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.btn.icon-left i, .icon-left.btn-small i, .icon-left.btn-large i, .icon-left.btn-floating i {
  left: var(--btn-padding-icon);
}

.btn.icon-right i, .icon-right.btn-small i, .icon-right.btn-large i, .icon-right.btn-floating i {
  right: var(--btn-padding-icon);
}

.btn.filled, .filled.btn-small, .filled.btn-large, .filled.btn-floating {
  color: var(--md-sys-color-on-primary);
  background-color: var(--md-sys-color-primary);
}
.btn.filled:hover, .filled.btn-small:hover, .filled.btn-large:hover, .filled.btn-floating:hover, .btn.filled:focus, .filled.btn-small:focus, .filled.btn-large:focus, .filled.btn-floating:focus {
  color: var(--md-sys-color-on-primary);
}
.btn.filled:hover, .filled.btn-small:hover, .filled.btn-large:hover, .filled.btn-floating:hover {
  background-color: color-mix(in srgb, var(--md-sys-color-primary), var(--md-sys-color-on-primary) 16%);
}
.btn.filled:focus, .filled.btn-small:focus, .filled.btn-large:focus, .filled.btn-floating:focus {
  background-color: color-mix(in srgb, var(--md-sys-color-primary), var(--md-sys-color-on-primary) 20%);
}
.btn.filled:focus-visible, .filled.btn-small:focus-visible, .filled.btn-large:focus-visible, .filled.btn-floating:focus-visible {
  outline: 3px solid var(--md-sys-color-secondary);
  outline-offset: 2px;
}

.btn.tonal, .tonal.btn-small, .tonal.btn-large, .tonal.btn-floating {
  color: var(--md-sys-color-on-secondary-container);
  background-color: var(--md-sys-color-secondary-container);
}
.btn.tonal:hover, .tonal.btn-small:hover, .tonal.btn-large:hover, .tonal.btn-floating:hover, .btn.tonal:focus, .tonal.btn-small:focus, .tonal.btn-large:focus, .tonal.btn-floating:focus {
  color: var(--md-sys-color-on-secondary-container);
}
.btn.tonal:hover, .tonal.btn-small:hover, .tonal.btn-large:hover, .tonal.btn-floating:hover {
  background-color: color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 16%);
}
.btn.tonal:focus, .tonal.btn-small:focus, .tonal.btn-large:focus, .tonal.btn-floating:focus {
  background-color: color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 20%);
}
.btn.tonal:focus-visible, .tonal.btn-small:focus-visible, .tonal.btn-large:focus-visible, .tonal.btn-floating:focus-visible {
  outline: 3px solid var(--md-sys-color-secondary);
  outline-offset: 2px;
}

.btn.elevated, .elevated.btn-small, .elevated.btn-large, .elevated.btn-floating {
  color: var(--md-sys-color-on-secondary-container);
  background-color: var(--md-sys-color-secondary-container);
}
.btn.elevated:hover, .elevated.btn-small:hover, .elevated.btn-large:hover, .elevated.btn-floating:hover, .btn.elevated:focus, .elevated.btn-small:focus, .elevated.btn-large:focus, .elevated.btn-floating:focus {
  color: var(--md-sys-color-primary);
}
.btn.elevated:hover, .elevated.btn-small:hover, .elevated.btn-large:hover, .elevated.btn-floating:hover {
  background-color: color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 16%);
}
.btn.elevated:focus, .elevated.btn-small:focus, .elevated.btn-large:focus, .elevated.btn-floating:focus {
  background-color: color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-primary) 20%);
}
.btn.elevated:focus-visible, .elevated.btn-small:focus-visible, .elevated.btn-large:focus-visible, .elevated.btn-floating:focus-visible {
  outline: 3px solid var(--md-sys-color-secondary);
  outline-offset: 2px;
}

.btn.outlined, .outlined.btn-small, .outlined.btn-large, .outlined.btn-floating {
  background-color: transparent;
  color: var(--md-sys-color-primary);
  border: 1px solid var(--md-sys-color-outline);
}
.btn.outlined:hover, .outlined.btn-small:hover, .outlined.btn-large:hover, .outlined.btn-floating:hover, .btn.outlined:focus, .outlined.btn-small:focus, .outlined.btn-large:focus, .outlined.btn-floating:focus {
  color: var(--md-sys-color-primary);
}
.btn.outlined:hover, .outlined.btn-small:hover, .outlined.btn-large:hover, .outlined.btn-floating:hover {
  background-color: color-mix(in srgb, transparent, var(--md-sys-color-primary) 16%);
}
.btn.outlined:focus, .outlined.btn-small:focus, .outlined.btn-large:focus, .outlined.btn-floating:focus {
  background-color: color-mix(in srgb, transparent, var(--md-sys-color-primary) 20%);
  border: 1px solid var(--md-sys-color-primary);
}
.btn.outlined.disabled, .outlined.disabled.btn-small, .outlined.disabled.btn-large, .outlined.disabled.btn-floating {
  background-color: unset;
  border-color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 38%);
}
.btn.outlined:focus-visible, .outlined.btn-small:focus-visible, .outlined.btn-large:focus-visible, .outlined.btn-floating:focus-visible {
  outline: 3px solid var(--md-sys-color-secondary);
  outline-offset: 2px;
}

.btn.text, .text.btn-small, .text.btn-large, .text.btn-floating, .btn-flat {
  color: var(--md-sys-color-primary);
  background-color: var(--md-sys-color-surface-variant);
}
.btn.text:hover, .text.btn-small:hover, .text.btn-large:hover, .text.btn-floating:hover, .btn.text:focus, .text.btn-small:focus, .text.btn-large:focus, .text.btn-floating:focus, .btn-flat:hover, .btn-flat:focus {
  color: var(--md-sys-color-primary);
}
.btn.text:hover, .text.btn-small:hover, .text.btn-large:hover, .text.btn-floating:hover, .btn-flat:hover {
  background-color: color-mix(in srgb, var(--md-sys-color-primary) 16%, transparent);
}
.btn.text:focus, .text.btn-small:focus, .text.btn-large:focus, .text.btn-floating:focus, .btn-flat:focus {
  background-color: color-mix(in srgb, transparent, var(--md-sys-color-primary) 20%);
}
.btn.text.disabled, .text.disabled.btn-small, .text.disabled.btn-large, .text.disabled.btn-floating, .btn-flat.disabled {
  background-color: unset;
}
.btn.text:focus-visible, .text.btn-small:focus-visible, .text.btn-large:focus-visible, .text.btn-floating:focus-visible, .btn-flat:focus-visible {
  outline: 3px solid var(--md-sys-color-secondary);
  outline-offset: 2px;
}

.btn.disabled, .btn-floating.disabled, .btn-large.disabled, .btn-small.disabled, .btn-flat.disabled,
.btn:disabled, .btn-floating:disabled, .btn-large:disabled, .btn-small:disabled, .btn-flat:disabled,
.btn[disabled], .btn-floating[disabled], .btn-large[disabled], .btn-small[disabled], .btn-flat[disabled] {
  color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 38%);
  background-color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 12%);
  pointer-events: none;
  -webkit-box-shadow: none;
          box-shadow: none;
  cursor: default;
}

.btn-floating {
  width: 40px;
  height: 40px;
  color: var(--md-sys-color-on-primary-container);
  background-color: var(--md-sys-color-primary-container);
  border-radius: 16px;
  padding: 0;
  display: grid;
  grid-auto-flow: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  overflow: hidden;
  z-index: 1;
  -webkit-transition: background-color 0.3s;
  transition: background-color 0.3s;
  cursor: pointer;
  vertical-align: middle;
  text-align: center;
}
.btn-floating:hover {
  background-color: color-mix(in srgb, var(--md-sys-color-primary-container), var(--md-sys-color-on-primary-container) 16%);
}
.btn-floating:focus {
  background-color: color-mix(in srgb, var(--md-sys-color-primary-container), var(--md-sys-color-on-primary-container) 24%);
}
.btn-floating:before {
  border-radius: 0;
}
.btn-floating.btn-large {
  width: 56px;
  height: 56px;
  padding: 0;
}
.btn-floating.btn-large.halfway-fab {
  bottom: -28px;
}
.btn-floating.btn-small {
  --btn-small-height: calc(0.75 * var(--btn-height));
  width: var(--btn-small-height);
  height: var(--btn-small-height);
}
.btn-floating.btn-small.halfway-fab {
  bottom: calc(var(--btn-small-height) * -0.5);
}
.btn-floating.halfway-fab {
  position: absolute;
  right: 24px;
  bottom: -20px;
}
.btn-floating.halfway-fab.left {
  right: auto;
  left: 24px;
}
.btn-floating i {
  color: currentColor;
  font-size: 1.6rem;
  width: inherit;
  display: inline-block;
  text-align: center;
}

button.btn-floating {
  border: none;
}

.fixed-action-btn {
  position: fixed;
  right: 23px;
  bottom: 23px;
  padding-top: 15px;
  margin-bottom: 0;
  z-index: 997;
}
.fixed-action-btn.active ul {
  visibility: visible;
  padding-left: 0;
  list-style-type: none;
}
.fixed-action-btn.direction-left, .fixed-action-btn.direction-right {
  padding: 0 0 0 15px;
}
.fixed-action-btn.direction-left ul, .fixed-action-btn.direction-right ul {
  text-align: right;
  right: 64px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  height: 100%;
  left: auto;
  /*width 100% only goes to width of button container */
  width: 500px;
}
.fixed-action-btn.direction-left ul li, .fixed-action-btn.direction-right ul li {
  display: inline-block;
  margin: 7.5px 15px 0 0;
}
.fixed-action-btn.direction-right {
  padding: 0 15px 0 0;
}
.fixed-action-btn.direction-right ul {
  text-align: left;
  direction: rtl;
  left: 64px;
  right: auto;
}
.fixed-action-btn.direction-right ul li {
  margin: 7.5px 0 0 15px;
}
.fixed-action-btn.direction-bottom {
  padding: 0 0 15px 0;
}
.fixed-action-btn.direction-bottom ul {
  top: 64px;
  bottom: auto;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
  -webkit-flex-direction: column-reverse;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse;
}
.fixed-action-btn.direction-bottom ul li {
  margin: 15px 0 0 0;
}
.fixed-action-btn.top {
  top: 23px;
  bottom: unset;
  padding-bottom: 15px;
  padding-top: 0;
}
.fixed-action-btn.top > ul {
  top: 64px;
  bottom: unset;
}
.fixed-action-btn.toolbar {
  padding: 0;
  height: 56px;
}
.fixed-action-btn.toolbar.active > a i {
  opacity: 0;
}
.fixed-action-btn.toolbar ul {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  top: 0;
  bottom: 0;
  z-index: 1;
}
.fixed-action-btn.toolbar ul li {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: inline-block;
  margin: 0;
  height: 100%;
  -webkit-transition: none;
  transition: none;
}
.fixed-action-btn.toolbar ul li a {
  display: block;
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
  background-color: transparent;
  -webkit-box-shadow: none;
          box-shadow: none;
  color: var(--md-sys-color-on-secondary);
  line-height: 56px;
  z-index: 1;
}
.fixed-action-btn.toolbar ul li a i {
  line-height: inherit;
}
.fixed-action-btn ul {
  left: 0;
  right: 0;
  text-align: center;
  position: absolute;
  bottom: 64px;
  margin: 0;
  visibility: hidden;
}
.fixed-action-btn ul li {
  margin-bottom: 15px;
}
.fixed-action-btn ul a.btn-floating {
  opacity: 0;
}
.fixed-action-btn .fab-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 40px;
  height: 40px;
  background-color: var(--md-sys-color-secondary);
  border-radius: 16px;
  -webkit-transform: scale(0);
          transform: scale(0);
}

.btn-large {
  height: calc(1.5 * var(--btn-height));
  font-size: 18px;
  padding: 0 28px;
}
.btn-large i {
  font-size: 1.6rem;
}

.btn-small {
  height: calc(0.75 * var(--btn-height));
  font-size: 13px;
}
.btn-small i {
  font-size: 1.2rem;
}

.btn-block {
  display: block;
}

.btn.rounded, .rounded.btn-floating, .rounded.btn-large, .rounded.btn-small {
  border-radius: 99999px;
}

.alert {
  --alert-container: var(--md-sys-color-surface-variant);
  --alert-on-container: var(--md-sys-color-on-surface-variant);
  --alert-border: var(--md-sys-color-outline-variant);
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 0.875rem;
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 1rem 1.125rem;
  margin: 0 0 1rem;
  border: 1px solid transparent;
  border-radius: 0.75rem;
  background: var(--alert-container);
  color: var(--alert-on-container);
  line-height: 1.5;
}
.alert .alert-icon {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  -webkit-align-self: center;
      -ms-flex-item-align: center;
          align-self: center;
  margin-top: 0;
  font-size: 1.375rem;
  line-height: 1;
}
.alert .alert-image {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
}
.alert .alert-content {
  min-width: 0;
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
}
.alert .alert-title {
  display: block;
  margin: 0 0 0.25rem;
  font-weight: 600;
}
.alert .alert-message {
  margin: 0;
}
.alert .alert-close {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 2rem;
  height: 2rem;
  margin: -0.25rem -0.375rem -0.25rem 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.alert .alert-close:hover, .alert .alert-close:focus-visible {
  background: color-mix(in srgb, currentColor 12%, transparent);
}
.alert .alert-close .material-icons {
  font-size: 1.25rem;
}
.alert.alert-info {
  --alert-container: var(--md-sys-color-secondary-container);
  --alert-on-container: var(--md-sys-color-on-secondary-container);
  --alert-border: var(--md-sys-color-secondary);
}
.alert.alert-success {
  --alert-container: var(--md-sys-color-tertiary-container);
  --alert-on-container: var(--md-sys-color-on-tertiary-container);
  --alert-border: var(--md-sys-color-tertiary);
}
.alert.alert-warning {
  --alert-container: var(--md-sys-color-primary-container);
  --alert-on-container: var(--md-sys-color-on-primary-container);
  --alert-border: var(--md-sys-color-primary);
}
.alert.alert-error {
  --alert-container: var(--md-sys-color-error-container);
  --alert-on-container: var(--md-sys-color-on-error-container);
  --alert-border: var(--md-sys-color-error);
}
.alert.alert-outlined {
  border-color: var(--alert-border);
  background: transparent;
}
.alert.alert-filled {
  border-color: var(--alert-border);
  background: var(--alert-border);
  color: var(--md-sys-color-on-primary);
}
.alert.alert-compact {
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  padding-block: 0.625rem;
}
.alert[hidden] {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  .alert {
    -webkit-transition: opacity 180ms ease, -webkit-transform 180ms ease;
    transition: opacity 180ms ease, -webkit-transform 180ms ease;
    transition: opacity 180ms ease, transform 180ms ease;
    transition: opacity 180ms ease, transform 180ms ease, -webkit-transform 180ms ease;
  }
  .alert.alert-dismissing {
    opacity: 0;
    -webkit-transform: translateY(-0.25rem);
            transform: translateY(-0.25rem);
  }
}
.kanban-board {
  --kanban-zoom: 1;
  --kanban-column-width: 20rem;
  --kanban-gap: 1rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: calc(var(--kanban-gap) * var(--kanban-zoom));
  width: 100%;
  padding: 0.25rem;
  overflow-x: auto;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  overscroll-behavior-x: contain;
}
.kanban-board > .kanban-column {
  zoom: var(--kanban-zoom);
}
.kanban-board.kanban-wrap {
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  overflow-x: visible;
}

.kanban-column {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 var(--kanban-column-width);
      -ms-flex: 0 0 var(--kanban-column-width);
          flex: 0 0 var(--kanban-column-width);
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  min-height: 15rem;
  padding: 0.75rem;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: 0.875rem;
  background: var(--md-sys-color-surface-variant);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-transition: border-color 160ms ease, background-color 160ms ease;
  transition: border-color 160ms ease, background-color 160ms ease;
}
.kanban-column.is-drag-over {
  border-color: var(--md-sys-color-primary);
  background: color-mix(in srgb, var(--md-sys-color-primary-container) 55%, var(--md-sys-color-surface-variant));
}

.kanban-column-header {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 0.5rem;
  padding: 0.25rem 0.25rem 0.75rem;
  color: var(--md-sys-color-on-surface-variant);
}

.kanban-column-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

.kanban-column-count {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  min-width: 1.5rem;
  min-height: 1.5rem;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 0 0.375rem;
  border-radius: 999px;
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  font-size: 0.75rem;
}

.kanban-column-body {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.75rem;
  min-height: 8rem;
}

.kanban-card {
  --kanban-card-accent: var(--md-sys-color-primary);
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.625rem;
  padding: 1rem;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: 0.75rem;
  background: var(--kanban-card-color, var(--md-sys-color-surface));
  color: var(--kanban-card-text, var(--md-sys-color-on-surface));
  -webkit-box-shadow: var(--md-sys-elevation-level1, 0 1px 2px rgba(0, 0, 0, 0.14));
          box-shadow: var(--md-sys-elevation-level1, 0 1px 2px rgba(0, 0, 0, 0.14));
  cursor: -webkit-grab;
  cursor: grab;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  overflow: hidden;
  -webkit-transition: opacity 160ms ease, -webkit-transform 160ms ease, -webkit-box-shadow 160ms ease;
  transition: opacity 160ms ease, -webkit-transform 160ms ease, -webkit-box-shadow 160ms ease;
  transition: transform 160ms ease, opacity 160ms ease, box-shadow 160ms ease;
  transition: transform 160ms ease, opacity 160ms ease, box-shadow 160ms ease, -webkit-transform 160ms ease, -webkit-box-shadow 160ms ease;
}
.kanban-card:active, .kanban-card.is-dragging {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}
.kanban-card.is-dragging {
  opacity: 0.45;
  -webkit-box-shadow: var(--md-sys-elevation-level3, 0 8px 18px rgba(0, 0, 0, 0.2));
          box-shadow: var(--md-sys-elevation-level3, 0 8px 18px rgba(0, 0, 0, 0.2));
}
.kanban-card:focus-visible {
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: 2px;
}
.kanban-card.kanban-card-accent::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 0.25rem;
  background: var(--kanban-card-accent);
  content: "";
  pointer-events: none;
}
.kanban-card.kanban-card-accent-top::after {
  top: 0;
  bottom: auto;
  left: 0;
  width: 100%;
  height: 0.25rem;
}
.kanban-card.kanban-card-accent-right::after {
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  width: 0.25rem;
  height: 100%;
}
.kanban-card.kanban-card-accent-left::after {
  top: 0;
  right: auto;
  bottom: 0;
  left: 0;
  width: 0.25rem;
  height: 100%;
}
.kanban-card.is-disabled, .kanban-card[aria-disabled=true] {
  cursor: not-allowed;
  opacity: 0.55;
  -webkit-filter: saturate(0.55);
          filter: saturate(0.55);
}

.kanban-drag-image {
  position: fixed !important;
  top: -10000px !important;
  left: -10000px !important;
  z-index: -1;
  pointer-events: none;
  -webkit-transform: rotate(2deg) scale(1.015);
          transform: rotate(2deg) scale(1.015);
  -webkit-transform-origin: center;
          transform-origin: center;
}

.kanban-drop-preview {
  min-height: 4rem;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border: 2px dashed var(--md-sys-color-primary);
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--md-sys-color-primary-container) 45%, transparent);
  pointer-events: none;
}

.kanban-card-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

.kanban-card-description {
  margin: 0;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 0.875rem;
}

.kanban-card-meta {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 0.5rem;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 0.75rem;
}

.kanban-card-label {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-align-self: flex-start;
      -ms-flex-item-align: start;
          align-self: flex-start;
  padding: 0.1875rem 0.5rem;
  border-radius: 999px;
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  font-size: 0.75rem;
}

.kanban-empty {
  display: grid;
  min-height: 5rem;
  place-items: center;
  border: 1px dashed var(--md-sys-color-outline);
  border-radius: 0.625rem;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 0.875rem;
}

@media (max-width: 600px) {
  .kanban-board {
    --kanban-column-width: min(20rem, calc(100vw - 3rem));
  }
}
.gantt {
  position: relative;
  --gantt-label-width: 220px;
  color: var(--md-sys-color-on-surface);
  background: var(--md-sys-color-surface);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: 16px;
  overflow: hidden;
  min-width: 0;
}
.gantt .gantt-viewport {
  overflow: auto;
  max-height: 640px;
  position: relative;
}
.gantt .gantt-viewport:focus-visible {
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: -3px;
}
.gantt .gantt-table {
  position: relative;
  width: calc(var(--gantt-label-width) + var(--gantt-timeline-width));
}
.gantt .gantt-dependencies {
  position: absolute;
  top: 0;
  left: var(--gantt-label-width);
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  color: var(--md-sys-color-outline);
}
.gantt .gantt-dependency {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5px;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.gantt .gantt-dependency-caption {
  color: var(--md-sys-color-on-surface-variant);
  font-size: 11px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.gantt .gantt-dependency-chip {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 3px;
  margin-right: 4px;
  max-width: 100%;
  vertical-align: middle;
}
.gantt .gantt-disconnect {
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 50%;
  padding: 0;
  background: transparent;
  color: var(--md-sys-color-on-surface-variant);
  cursor: pointer;
  font-size: 18px;
}
.gantt .gantt-disconnect:hover {
  background: var(--md-sys-color-error-container);
  color: var(--md-sys-color-on-error-container);
}
.gantt .gantt-connect-port {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  z-index: 1;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-primary);
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  line-height: 1;
  cursor: crosshair;
  -ms-touch-action: none;
      touch-action: none;
}
.gantt .gantt-connect-port > .material-icons {
  display: block;
  width: 16px;
  height: 16px;
  font-size: 16px;
  line-height: 1;
  margin: 0;
}
.gantt .gantt-connect-port:focus-visible {
  outline: 2px solid var(--md-sys-color-on-surface);
  outline-offset: 3px;
}
.gantt .gantt-connect-port[aria-pressed=true] {
  background: var(--md-sys-color-primary-container);
}
.gantt .gantt-disconnect:focus-visible {
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: 2px;
}
.gantt .gantt-dependency-hit {
  fill: none;
  stroke: transparent;
  stroke-width: 16px;
  pointer-events: stroke;
}
.gantt .gantt-link-control {
  overflow: visible;
}
.gantt .gantt-link-remove {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface-variant);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
}
.gantt .gantt-link-remove:hover, .gantt .gantt-link-remove:focus-visible {
  background: var(--md-sys-color-surface-variant);
}
.gantt .gantt-link-remove:hover {
  color: var(--md-sys-color-error);
}
.gantt .gantt-link-remove:focus-visible {
  outline: 1px solid var(--md-sys-color-on-surface);
  outline-offset: 1px;
}
@media (hover: hover) and (pointer: fine) {
  .gantt .gantt-connect-port, .gantt .gantt-link-remove {
    opacity: 0;
    pointer-events: none;
  }
  .gantt .gantt-row:hover .gantt-connect-port,
  .gantt .gantt-connect-port:focus-visible,
  .gantt .gantt-connecting .gantt-connect-port,
  .gantt .gantt-dependency-link:hover .gantt-link-remove,
  .gantt .gantt-dependency-link:focus-within .gantt-link-remove {
    opacity: 1;
    pointer-events: auto;
  }
}
.gantt .gantt-connecting .gantt-bar {
  cursor: crosshair;
}
.gantt .gantt-bar.gantt-connect-target {
  outline: 3px solid var(--md-sys-color-primary);
  outline-offset: 3px;
}
.gantt .gantt-connection-preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}
.gantt .gantt-connection-preview path {
  fill: none;
  stroke: var(--md-sys-color-primary);
  stroke-width: 2px;
  stroke-dasharray: 5 4;
}
.gantt .gantt-row {
  display: grid;
  grid-template-columns: var(--gantt-label-width) var(--gantt-timeline-width);
}
.gantt .gantt-row + .gantt-row {
  border-top: 1px solid var(--md-sys-color-outline-variant);
}
.gantt .gantt-label {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 2;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 12px 16px;
  min-width: 0;
  border-right: 1px solid var(--md-sys-color-outline-variant);
  background: var(--md-sys-color-surface);
}
.gantt .gantt-task-name {
  font-weight: 600;
  overflow-wrap: anywhere;
  line-height: 1.4;
}
.gantt .gantt-task-detail {
  color: var(--md-sys-color-on-surface-variant);
  font-size: 12px;
  overflow-wrap: anywhere;
}
.gantt .gantt-label.gantt-selectable-label {
  padding-left: calc(30px + var(--checkbox-size));
}
.gantt input.gantt-select {
  position: absolute;
  left: 12px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.gantt .gantt-row.is-selected .gantt-label {
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}
.gantt .gantt-row.is-selected .gantt-bar {
  -webkit-box-shadow: 0 0 0 2px var(--md-sys-color-primary);
          box-shadow: 0 0 0 2px var(--md-sys-color-primary);
}
.gantt .gantt-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--md-sys-color-surface-variant);
}
.gantt .gantt-header .gantt-label {
  background: var(--md-sys-color-surface-variant);
  font-weight: 600;
}
.gantt .gantt-months, .gantt .gantt-ticks {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.gantt .gantt-month {
  padding: 8px;
  font-size: 12px;
  font-weight: 600;
  border-right: 1px solid var(--md-sys-color-outline-variant);
  overflow: hidden;
  white-space: nowrap;
}
.gantt .gantt-tick {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 6px 0;
  font-size: 11px;
  border-top: 1px solid var(--md-sys-color-outline-variant);
  border-right: 1px solid var(--md-sys-color-outline-variant);
}
.gantt .gantt-tick strong {
  font-size: 13px;
}
.gantt .gantt-tick.is-today {
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}
.gantt .gantt-track {
  position: relative;
  min-height: 68px;
  background-image: repeating-linear-gradient(to right, transparent 0, transparent calc(var(--gantt-day-width) - 1px), var(--md-sys-color-outline-variant) calc(var(--gantt-day-width) - 1px), var(--md-sys-color-outline-variant) var(--gantt-day-width)), repeating-linear-gradient(to right, var(--md-sys-color-surface-variant) 0, var(--md-sys-color-surface-variant) calc(var(--gantt-day-width) * 2), transparent calc(var(--gantt-day-width) * 2), transparent calc(var(--gantt-day-width) * 7));
  background-size: auto, calc(var(--gantt-day-width) * 7) 100%;
  background-position: 0 0, var(--gantt-weekend-offset) 0;
}
.gantt .gantt-bar {
  z-index: 1;
  --gantt-bar-color: var(--md-sys-color-primary);
  --gantt-bar-container: var(--md-sys-color-primary-container);
  --gantt-bar-text: var(--md-sys-color-on-primary-container);
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  height: 36px;
  min-width: 8px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--gantt-bar-color);
  border-radius: 8px;
  background: var(--gantt-bar-container);
  color: var(--gantt-bar-text);
  font: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}
.gantt .gantt-bar[data-tone=secondary] {
  --gantt-bar-color: var(--md-sys-color-secondary);
  --gantt-bar-container: var(--md-sys-color-secondary-container);
  --gantt-bar-text: var(--md-sys-color-on-secondary-container);
}
.gantt .gantt-bar[data-tone=tertiary] {
  --gantt-bar-color: var(--md-sys-color-tertiary);
  --gantt-bar-container: var(--md-sys-color-tertiary-container);
  --gantt-bar-text: var(--md-sys-color-on-tertiary-container);
}
.gantt .gantt-bar[data-tone=error] {
  --gantt-bar-color: var(--md-sys-color-error);
  --gantt-bar-container: var(--md-sys-color-error-container);
  --gantt-bar-text: var(--md-sys-color-on-error-container);
}
.gantt .gantt-bar:hover {
  -webkit-box-shadow: 0 2px 5px var(--md-sys-color-outline-variant);
          box-shadow: 0 2px 5px var(--md-sys-color-outline-variant);
}
.gantt .gantt-bar:focus-visible {
  outline: 2px solid var(--gantt-bar-color);
  outline-offset: 3px;
  z-index: 1;
}
.gantt .gantt-progress {
  position: absolute;
  inset: auto auto 0 0;
  height: 5px;
  background: var(--gantt-progress-color, var(--gantt-bar-color));
  pointer-events: none;
}
.gantt .gantt-progress[data-progress-region=low] {
  --gantt-progress-color: var(--gantt-progress-low-color, dodgerblue);
}
.gantt .gantt-progress[data-progress-region=optimal] {
  --gantt-progress-color: var(--gantt-progress-optimal-color, seagreen);
}
.gantt .gantt-progress[data-progress-region=suboptimal] {
  --gantt-progress-color: var(--gantt-progress-suboptimal-color, darkorange);
}
.gantt .gantt-progress[data-progress-region=critical] {
  --gantt-progress-color: var(--gantt-progress-critical-color, crimson);
}
.gantt .gantt-overrun-text {
  color: var(--gantt-progress-critical-color, crimson);
  font-size: 12px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.gantt .gantt-bar-text {
  display: block;
  padding: 0 10px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.gantt .gantt-bar.is-milestone {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
          transform: translate(-50%, -50%) rotate(45deg);
  background: var(--gantt-bar-color);
}
.gantt .gantt-today {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--md-sys-color-primary);
  opacity: 0.65;
  pointer-events: none;
}
.gantt .gantt-empty {
  padding: 32px 16px;
  text-align: center;
  color: var(--md-sys-color-on-surface-variant);
}
.gantt.gantt-editable .gantt-bar {
  cursor: -webkit-grab;
  cursor: grab;
  -ms-touch-action: none;
      touch-action: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.gantt.gantt-dragging .gantt-bar {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}
.gantt .gantt-resize {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 12px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface-variant);
  cursor: ew-resize;
  -ms-touch-action: none;
      touch-action: none;
  opacity: 0;
  z-index: 1;
}
.gantt .gantt-resize::after {
  content: "";
  display: block;
  width: 4px;
  height: 14px;
  margin: auto;
  border-inline: 1px solid currentColor;
}
.gantt .gantt-task:hover .gantt-resize, .gantt .gantt-task:focus-within .gantt-resize {
  opacity: 1;
}
.gantt .gantt-resize:focus-visible {
  opacity: 1;
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: 1px;
}
.gantt .gantt-announcement {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  -webkit-clip-path: inset(50%);
          clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}
.gantt:has(.gantt-connecting) .gantt-announcement, .gantt.gantt-dragging .gantt-announcement {
  -webkit-clip-path: none;
          clip-path: none;
  width: auto;
  height: auto;
  max-width: calc(100% - 24px);
  white-space: normal;
  bottom: 12px;
  right: 12px;
  z-index: 4;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--md-sys-color-inverse-surface);
  color: var(--md-sys-color-inverse-on-surface);
  font-size: 12px;
  pointer-events: none;
}
@media (hover: none) {
  .gantt .gantt-resize {
    opacity: 1;
  }
}
@media (max-width: 600px) {
  .gantt {
    --gantt-label-width: 144px;
  }
  .gantt .gantt-label {
    padding: 10px;
  }
}
@media (forced-colors: active) {
  .gantt .gantt-progress, .gantt .gantt-today, .gantt .gantt-bar.is-milestone {
    background: Highlight;
  }
}

.collapsible {
  padding-left: 0;
  list-style-type: none;
  background-color: var(--md-sys-color-surface);
  border-top: 1px solid var(--md-sys-color-outline-variant);
  border-right: 1px solid var(--md-sys-color-outline-variant);
  border-left: 1px solid var(--md-sys-color-outline-variant);
  margin: 0.5rem 0 1rem 0;
  border-radius: 12px;
}
.collapsible:not(:has(li:last-child.active)) {
  overflow: hidden;
}

.collapsible-header {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  line-height: 1.5;
  padding: 1rem;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}
.collapsible-header:focus {
  outline: 0;
}
.collapsible-header > i {
  width: 2rem;
  font-size: 1.6rem;
  display: inline-block;
  text-align: center;
  margin-right: 1rem;
}

.collapsible-header::after {
  content: "\e5cf";
  display: inline-block;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 1em;
      -ms-flex: 0 0 1em;
          flex: 0 0 1em;
  -webkit-align-self: center;
      -ms-flex-item-align: center;
          align-self: center;
  width: 1em;
  height: 1em;
  -webkit-margin-start: auto;
     -moz-margin-start: auto;
          margin-inline-start: auto;
  font-family: "Material Symbols Outlined", "Material Symbols Rounded", "Material Symbols Sharp", "Material Icons";
  font-size: 25px;
  line-height: 1;
  text-align: center;
  -webkit-font-smoothing: antialiased;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
  -webkit-transform-origin: center;
          transform-origin: center;
  -webkit-transition: -webkit-transform var(--collapsible-arrow-duration, 300ms) var(--collapsible-arrow-easing, cubic-bezier(0.4, 0, 0.2, 1));
  transition: -webkit-transform var(--collapsible-arrow-duration, 300ms) var(--collapsible-arrow-easing, cubic-bezier(0.4, 0, 0.2, 1));
  transition: transform var(--collapsible-arrow-duration, 300ms) var(--collapsible-arrow-easing, cubic-bezier(0.4, 0, 0.2, 1));
  transition: transform var(--collapsible-arrow-duration, 300ms) var(--collapsible-arrow-easing, cubic-bezier(0.4, 0, 0.2, 1)), -webkit-transform var(--collapsible-arrow-duration, 300ms) var(--collapsible-arrow-easing, cubic-bezier(0.4, 0, 0.2, 1));
}

.collapsible > li.active > .collapsible-header::after {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .collapsible-header::after {
    -webkit-transition: none;
    transition: none;
  }
}
.keyboard-focused .collapsible-header:focus {
  background-color: rgba(0, 0, 0, 0.12);
}

.collapsible-header-content {
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

.collapsible-body {
  max-height: 0;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0 2rem;
  overflow: hidden;
}

.collapsible > li:first-child .collapsible-header {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.collapsible > li:last-child:not(.active) .collapsible-header {
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  -webkit-transition-delay: 250ms;
          transition-delay: 250ms;
  -webkit-transition-property: border-radius;
  transition-property: border-radius;
}
.collapsible > li:last-child.active .collapsible-body {
  border-radius: 0 0 12px 12px;
}

.collapsible > li.active .collapsible-header {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.collapsible.popout {
  border: none;
  -webkit-box-shadow: none;
          box-shadow: none;
}
.collapsible.popout > li {
  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
          box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  margin: 0 24px;
  -webkit-transition: margin 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: margin 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.collapsible.popout > li.active {
  -webkit-box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
          box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
  margin: 16px 0;
}

:root {
  --bagde-height: 22px;
}

span.badge {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 4px;
  min-width: 3rem;
  padding: 0 6px;
  margin-left: 14px;
  text-align: center;
  font-size: 1rem;
  line-height: var(--bagde-height);
  height: var(--bagde-height);
  color: var(--md-sys-color-on-surface-variant);
  float: right;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
span.badge.new {
  font-weight: 300;
  font-size: 0.8rem;
  color: var(--md-sys-color-on-primary);
  background-color: var(--md-sys-color-primary);
  border-radius: 2px;
}
span.badge.round {
  border-radius: 999px;
}
span.badge.new:after {
  content: " new";
}
span.badge[data-badge-caption]::after {
  content: " " attr(data-badge-caption);
}
span.badge[data-badge-caption=""]::after, span.badge[data-badge-caption=" "]::after {
  content: none;
}

.badge > i,
.navbar span.badge > i {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin: 0;
  float: none;
  color: inherit;
  font-size: 16px;
  line-height: 1;
}
.badge > i:is(.fa, [class^=fa-], [class*=" fa-"]),
.navbar span.badge > i:is(.fa, [class^=fa-], [class*=" fa-"]) {
  font-size: 13.3333333333px;
}

.active span.badge {
  color: var(--md-sys-color-on-primary);
}

.navbar ul a span.badge {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  float: none;
  margin-left: 4px;
  line-height: var(--bagde-height);
  height: var(--bagde-height);
  -webkit-font-smoothing: auto;
}

.collection-item span.badge {
  margin-top: calc(0.75rem - var(--bagde-height) * 0.5);
}

.collapsible span.badge {
  margin-left: auto;
}
.collapsible span.badge.leading {
  margin-right: 7px;
  -webkit-box-ordinal-group: 0;
  -webkit-order: -1;
      -ms-flex-order: -1;
          order: -1;
}

.collapsible .active span.badge:not(.new) {
  color: var(--md-sys-color-on-surface-variant);
}

.sidenav span.badge {
  margin-top: calc(var(--sidenav-line-height) * 0.5 - 11px);
}

table span.badge {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  float: none;
  margin-left: auto;
}

.card-panel {
  --background-color: color-mix(in srgb, var(--md-sys-color-surface), var(--md-sys-color-surface-tint) 17%);
  -webkit-transition: -webkit-box-shadow 0.25s;
  transition: -webkit-box-shadow 0.25s;
  transition: box-shadow 0.25s;
  transition: box-shadow 0.25s, -webkit-box-shadow 0.25s;
  padding: 24px;
  margin: 0.5rem 0 1rem 0;
  border-radius: 12px;
  background-color: var(--background-color);
}

.card.card-image-alt {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  min-width: 0;
  min-height: var(--card-image-alt-height, 186px);
  isolation: isolate;
  background-size: cover;
  background-position: var(--card-image-position, center);
  background-repeat: no-repeat;
}
.card.card-image-alt:not(:has(> .overlay))::before,
.card.card-image-alt > .overlay {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: var(--card-image-alt-overlay, linear-gradient(color-mix(in srgb, var(--md-sys-color-scrim) 30%, transparent), color-mix(in srgb, var(--md-sys-color-scrim) 30%, transparent) 60%, var(--md-sys-color-scrim) 160%));
}
.card.card-image-alt.gradient:not(:has(> .overlay))::before,
.card.card-image-alt.gradient > .overlay {
  background: var(--card-image-alt-overlay, linear-gradient(to bottom, transparent, color-mix(in srgb, var(--md-sys-color-scrim) 40%, transparent) 50%, color-mix(in srgb, var(--md-sys-color-scrim) 80%, transparent)));
}
.card.card-image-alt.gradient > .card-content {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}
.card.card-image-alt.gradient > .card-content > * {
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
}
.card.card-image-alt.gradient > .card-content > :first-child {
  margin-top: auto;
}
.card.card-image-alt > .card-content {
  position: relative;
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  min-height: 0;
  overflow-wrap: anywhere;
  color: var(--md-sys-color-surface-light);
}
.card.card-image-alt > .card-content > .card-title {
  font-size: 1.5em;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 4px;
}
.card.card-image-alt > .card-content :is(.btn.text, .btn-flat):not(:disabled):not(.disabled):not([disabled]) {
  color: inherit;
  background-color: transparent;
}
.card.card-image-alt > .card-content :is(.btn.text, .btn-flat):not(:disabled):not(.disabled):not([disabled]):hover, .card.card-image-alt > .card-content :is(.btn.text, .btn-flat):not(:disabled):not(.disabled):not([disabled]):focus {
  background-color: color-mix(in srgb, currentColor 20%, transparent);
}
.card.card-image-alt > .card-content :is(.btn.text, .btn-flat):not(:disabled):not(.disabled):not([disabled]):focus-visible {
  outline-color: currentColor;
}
.card.card-image-alt > .card-action {
  position: relative;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  margin-top: auto;
  padding: 16px 24px;
  color: var(--md-sys-color-on-surface);
  background-color: var(--background-color);
  border-radius: 0 0 12px 12px;
}

.card {
  --background-color: color-mix(in srgb, var(--md-sys-color-surface), var(--md-sys-color-surface-tint) 17%);
  position: relative;
  background-color: var(--background-color);
  -webkit-transition: -webkit-box-shadow 0.25s;
  transition: -webkit-box-shadow 0.25s;
  transition: box-shadow 0.25s;
  transition: box-shadow 0.25s, -webkit-box-shadow 0.25s;
  border-radius: 12px;
}
.card .card-title {
  font-size: 24px;
  font-weight: 300;
}
.card .card-badges {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  gap: 6px;
  max-width: calc(100% - 24px);
  pointer-events: none;
}
.card .card-badges.left {
  left: 12px;
  right: auto;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}
.card .card-badges > .badge {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 4px;
  float: none;
  min-width: 0;
  min-height: 24px;
  max-width: 100%;
  height: auto;
  margin: 0;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  overflow-wrap: anywhere;
  color: var(--card-badge-color, var(--md-sys-color-on-primary-container));
  background-color: var(--card-badge-background, var(--md-sys-color-primary-container));
}
.card .card-badges > .badge.round {
  border-radius: 999px;
}
.card .card-badges > .badge:is(a, button) {
  pointer-events: auto;
}
.card.small, .card.medium, .card.large {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  min-width: 0;
}
.card.small > .card-image, .card.medium > .card-image, .card.large > .card-image {
  -webkit-box-flex: 0;
  -webkit-flex: 0 1 var(--card-image-height, 180px);
      -ms-flex: 0 1 var(--card-image-height, 180px);
          flex: 0 1 var(--card-image-height, 180px);
  height: var(--card-image-height, 180px);
  min-height: 0;
  overflow: hidden;
}
.card.small > .card-image > img, .card.medium > .card-image > img, .card.large > .card-image > img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: var(--card-image-position, center);
     object-position: var(--card-image-position, center);
}
.card.small > .card-content, .card.small > .card-stacked > .card-content, .card.medium > .card-content, .card.medium > .card-stacked > .card-content, .card.large > .card-content, .card.large > .card-stacked > .card-content {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 0;
      -ms-flex: 1 1 0px;
          flex: 1 1 0;
  min-height: 0;
  max-height: none;
  overflow: auto;
}
.card.small > .card-action, .card.small > .card-stacked > .card-action, .card.medium > .card-action, .card.medium > .card-stacked > .card-action, .card.large > .card-action, .card.large > .card-stacked > .card-action {
  position: relative;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  margin-top: auto;
}
.card.small {
  height: 300px;
}
.card.medium {
  height: 400px;
}
.card.large {
  height: 500px;
}
.card.horizontal {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.card.horizontal.small, .card.horizontal.medium, .card.horizontal.large {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
}
.card.horizontal.small > .card-image, .card.horizontal.medium > .card-image, .card.horizontal.large > .card-image {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 40%;
      -ms-flex: 0 0 40%;
          flex: 0 0 40%;
  height: 100%;
  max-height: none;
  overflow: hidden;
}
.card.horizontal.small > .card-image > img, .card.horizontal.medium > .card-image > img, .card.horizontal.large > .card-image > img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.card.horizontal.small > .card-stacked, .card.horizontal.medium > .card-stacked, .card.horizontal.large > .card-stacked {
  min-width: 0;
  min-height: 0;
}
.card.horizontal .card-image {
  max-width: 50%;
}
.card.horizontal .card-image img {
  border-radius: 12px 0 0 12px;
  max-width: 100%;
  width: auto;
}
.card.horizontal .card-stacked {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  position: relative;
}
.card.horizontal .card-stacked .card-content {
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}
.card > .card-image:only-child {
  border-radius: inherit;
}
.card > .card-image:only-child > img {
  border-radius: inherit;
}
.card > .card-image:only-child > .card-title.gradient {
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}
.card.sticky-action .card-action {
  z-index: 2;
}
.card.sticky-action .card-reveal {
  z-index: 1;
  padding-bottom: 64px;
}
.card .card-image {
  position: relative;
}
.card .card-image img {
  display: block;
  border-radius: 12px 12px 0 0;
  position: relative;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
}
.card .card-image .card-title {
  color: var(--md-sys-color-surface-light);
  position: absolute;
  bottom: 0;
  left: 0;
  max-width: 100%;
  padding: 24px;
}
.card .card-image .card-title.gradient {
  display: block;
  top: auto;
  width: 100%;
  padding-top: 64px;
  color: var(--md-sys-color-surface-light);
  background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--md-sys-color-scrim) 40%, transparent) 50%, color-mix(in srgb, var(--md-sys-color-scrim) 80%, transparent));
  pointer-events: none;
}
.card .card-image .card-title.gradient:is(a, button, .activator),
.card .card-image .card-title.gradient a, .card .card-image .card-title.gradient button {
  pointer-events: auto;
}
.card .card-image .activator {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  cursor: pointer;
}
.card .card-image img.activator {
  position: relative;
}
.card .card-content {
  padding: 24px;
  border-radius: 0 0 12px 12px;
}
.card .card-content p {
  margin: 0;
}
.card .card-content .card-title {
  display: block;
  line-height: 32px;
  margin-bottom: 8px;
}
.card .card-content .card-title i {
  line-height: 32px;
  vertical-align: text-bottom;
  margin-right: 6px;
}
.card .card-content .card-title.activator {
  cursor: pointer;
}
.card .card-action {
  padding: 0 1.6rem;
}
.card .card-action:last-child {
  border-radius: 0 0 12px 12px;
}
.card .card-action a {
  height: var(--btn-height);
  border-radius: var(--btn-border-radius);
  padding-left: var(--btn-padding);
  padding-right: var(--btn-padding);
  font-size: var(--btn-font-size);
  font-weight: 500;
  text-decoration: none;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
  outline: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -webkit-transition: background-color 0.2s ease-out;
  transition: background-color 0.2s ease-out;
}
.card .card-action a:focus {
  background-color: var(--md-sys-color-primary-container);
}
.card .card-action a:first-child {
  margin-left: -1.6rem;
}
.card .card-action a:last-child {
  margin-right: -1.6rem;
}
.card .card-action .btn.filled, .card .card-action .btn.tonal, .card .card-action .btn.elevated, .card .card-action .btn.outlined {
  margin: 0 0.26rem 1.6rem 0;
}
.card .card-reveal {
  padding: 24px;
  position: absolute;
  background-color: var(--md-sys-color-surface);
  width: 100%;
  overflow-y: auto;
  left: 0;
  top: 100%;
  height: 100%;
  z-index: 3;
  display: none;
}
.card .card-reveal .card-title {
  cursor: pointer;
  display: block;
}

.timeline {
  position: relative;
  container-type: inline-size;
  container-name: materialize-timeline;
  list-style: none;
  padding: 0;
  margin: 24px 0;
}
.timeline > .timeline-event {
  --_timeline-marker-radius: calc(var(--timeline-badge-size, 40px) / 2);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(var(--timeline-badge-size, 40px) + var(--timeline-gap, 16px) * 2) minmax(0, 1fr);
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  min-height: var(--timeline-badge-size, 40px);
  padding-block: var(--timeline-event-spacing, 12px);
  list-style: none;
}
.timeline > .timeline-event:has(> .timeline-badge:empty) {
  --_timeline-marker-radius: 8px;
}
.timeline > .timeline-event::before, .timeline > .timeline-event::after {
  content: "";
  position: absolute;
  inset-inline-start: calc(50% - var(--timeline-line-width, 2px) / 2);
  width: var(--timeline-line-width, 2px);
  height: max(0px, 50% - var(--_timeline-marker-radius) - var(--timeline-marker-gap, 12px));
  background-color: var(--timeline-line-color, var(--md-sys-color-outline-variant));
  pointer-events: none;
}
.timeline > .timeline-event::before {
  inset-block-start: 0;
}
.timeline > .timeline-event::after {
  inset-block-end: 0;
}
.timeline > .timeline-event:first-child::before, .timeline > .timeline-event:last-child::after {
  display: none;
}
.timeline > .timeline-event > .timeline-content {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  width: 100%;
  margin: 0;
  overflow-wrap: anywhere;
}
.timeline > .timeline-event:nth-child(even) > .timeline-content {
  grid-column: 3;
}
.timeline > .timeline-event > .timeline-badge {
  position: relative;
  z-index: 1;
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: var(--timeline-badge-size, 40px);
  height: var(--timeline-badge-size, 40px);
  border-radius: 50%;
  line-height: 1;
}
.timeline > .timeline-event > .timeline-badge:empty {
  width: 16px;
  height: 16px;
}
.timeline > .timeline-event > .timeline-badge > i {
  font-size: 20px;
  line-height: 1;
}
.timeline.timeline-left > .timeline-event {
  grid-template-columns: var(--timeline-badge-size, 40px) minmax(0, 1fr);
  -webkit-column-gap: var(--timeline-gap, 16px);
     -moz-column-gap: var(--timeline-gap, 16px);
          column-gap: var(--timeline-gap, 16px);
}
.timeline.timeline-left > .timeline-event::before, .timeline.timeline-left > .timeline-event::after {
  inset-inline-start: calc((var(--timeline-badge-size, 40px) - var(--timeline-line-width, 2px)) / 2);
}
.timeline.timeline-left > .timeline-event > .timeline-content, .timeline.timeline-left > .timeline-event:nth-child(even) > .timeline-content {
  grid-column: 2;
}
.timeline.timeline-left > .timeline-event > .timeline-badge {
  grid-column: 1;
}

:where(.timeline > .timeline-event > .timeline-badge) {
  color: var(--md-sys-color-on-primary);
  background-color: var(--md-sys-color-primary);
}

@container materialize-timeline (max-width: 600px) {
  .timeline > .timeline-event {
    grid-template-columns: var(--timeline-badge-size, 40px) minmax(0, 1fr);
    -webkit-column-gap: var(--timeline-gap, 16px);
       -moz-column-gap: var(--timeline-gap, 16px);
            column-gap: var(--timeline-gap, 16px);
  }
  .timeline > .timeline-event::before, .timeline > .timeline-event::after {
    inset-inline-start: calc((var(--timeline-badge-size, 40px) - var(--timeline-line-width, 2px)) / 2);
  }
  .timeline > .timeline-event > .timeline-content, .timeline > .timeline-event:nth-child(even) > .timeline-content {
    grid-column: 2;
  }
  .timeline > .timeline-event > .timeline-badge {
    grid-column: 1;
  }
}
@media only screen and (max-width: 600px) {
  .timeline > .timeline-event {
    grid-template-columns: var(--timeline-badge-size, 40px) minmax(0, 1fr);
    -webkit-column-gap: var(--timeline-gap, 16px);
       -moz-column-gap: var(--timeline-gap, 16px);
            column-gap: var(--timeline-gap, 16px);
  }
  .timeline > .timeline-event::before, .timeline > .timeline-event::after {
    inset-inline-start: calc((var(--timeline-badge-size, 40px) - var(--timeline-line-width, 2px)) / 2);
  }
  .timeline > .timeline-event > .timeline-content, .timeline > .timeline-event:nth-child(even) > .timeline-content {
    grid-column: 2;
  }
  .timeline > .timeline-event > .timeline-badge {
    grid-column: 1;
  }
}
.page-footer.footer-compact {
  margin-top: 3rem;
  padding-block: 1.5rem;
  border-top: 1px solid var(--md-sys-color-outline-variant);
  color: var(--md-sys-color-on-surface-variant);
  font-size: 0.875rem;
  line-height: 1.6;
}
.page-footer.footer-compact .footer-content {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 1rem 2rem;
}
.page-footer.footer-compact .footer-brand {
  display: inline-block;
  color: var(--md-sys-color-on-surface);
  font-size: 1.125rem;
  font-weight: 600;
}
.page-footer.footer-compact .footer-description {
  margin: 0.25rem 0 0;
}
.page-footer.footer-compact .footer-links {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.25rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-footer.footer-compact .footer-links a {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  min-height: 44px;
}
.page-footer.footer-compact .footer-credits {
  margin: 1rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--md-sys-color-outline-variant);
  font-size: 0.8125rem;
}
.page-footer.footer-compact a {
  text-underline-offset: 0.2em;
}
.page-footer.footer-compact a:hover {
  text-decoration: underline;
}
.page-footer.footer-compact a:focus-visible {
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: 4px;
  border-radius: 2px;
}

.page-footer.footer-bordered {
  border: 1px solid var(--md-sys-color-outline);
  border-radius: 12px;
}

.footer-layout {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  min-height: var(--footer-layout-height, 100dvh);
  margin: 0;
}
.footer-layout > header, .footer-layout > footer {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
}
.footer-layout > main {
  -webkit-box-flex: 1;
  -webkit-flex: 1 0 auto;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
  min-width: 0;
}
.footer-layout > .page-footer {
  margin-top: 0;
}
.footer-layout.footer-fixed {
  height: var(--footer-layout-height, 100dvh);
  min-height: 0;
  overflow: hidden;
}
.footer-layout.footer-fixed > main {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  scroll-padding-block: 16px;
}
.footer-layout.footer-fixed > footer {
  max-height: 50%;
  overflow: auto;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

#toast-container {
  display: block;
  position: fixed;
  z-index: 10000;
}
@media only screen and (max-width : 600.99px) {
  #toast-container {
    min-width: 100%;
    bottom: 0%;
  }
}
@media only screen and (min-width : 601px) and (max-width : 992.99px) {
  #toast-container {
    left: 5%;
    bottom: 7%;
    max-width: 90%;
  }
}
@media only screen and (min-width : 993px) {
  #toast-container {
    top: 10%;
    right: 7%;
    max-width: 86%;
  }
}

.toast {
  border-radius: 4px;
  top: 35px;
  width: auto;
  margin-top: 10px;
  position: relative;
  max-width: 100%;
  height: auto;
  min-height: 48px;
  padding-left: 16px;
  padding-right: 12px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: var(--md-sys-color-inverse-on-surface);
  background-color: var(--md-sys-color-inverse-surface);
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  cursor: default;
}
.toast .toast-action {
  color: var(--md-sys-color-inverse-primary);
  font-weight: 500;
  margin-right: -25px;
  margin-left: 3rem;
}
.toast.rounded {
  border-radius: 24px;
}
@media only screen and (max-width : 600.99px) {
  .toast {
    width: 100%;
    border-radius: 0;
  }
}

.tabs {
  padding-left: 0;
  list-style-type: none;
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  width: 100%;
  background-color: var(--md-sys-color-surface);
  margin: 0 auto;
  white-space: nowrap;
  scrollbar-width: none;
}
.tabs.tabs-transparent {
  background-color: transparent;
}
.tabs.tabs-transparent .tab a {
  color: var(--font-on-primary-color-medium);
}
.tabs.tabs-transparent .tab.disabled a,
.tabs.tabs-transparent .tab.disabled a:hover,
.tabs.tabs-transparent .tab.disabled a:focus {
  color: rgba(255, 255, 255, 0.38);
}
.tabs.tabs-transparent .tab a:hover {
  background-color: rgba(0, 0, 0, 0.04);
}
.tabs.tabs-transparent .tab a.active,
.tabs.tabs-transparent .tab a:focus {
  background-color: transparent;
}
.tabs.tabs-transparent .tab a:hover,
.tabs.tabs-transparent .tab a.active,
.tabs.tabs-transparent .tab a:focus {
  color: var(--md-sys-color-on-primary);
}
.tabs.tabs-transparent .indicator {
  background-color: var(--md-sys-color-on-primary);
}
.tabs.tabs-fixed-width {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.tabs.tabs-fixed-width .tab {
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}
.tabs .tab {
  padding-left: 0;
  list-style-type: none;
  display: inline-block;
  text-align: center;
  line-height: 48px;
  padding: 0;
  margin: 0;
}
.tabs .tab i.material-icons {
  position: relative;
  top: 8px;
  vertical-align: middle;
}
.tabs .tab span {
  height: 24px;
  line-height: 20px;
}
.tabs .tab a {
  color: var(--md-sys-color-on-surface-variant);
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 48px;
  padding: 0 24px;
  font-size: 14px;
  text-overflow: ellipsis;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  overflow: hidden;
  -webkit-transition: color 0.28s ease, background-color 0.28s ease;
  transition: color 0.28s ease, background-color 0.28s ease;
}
.tabs .tab a.active {
  background-color: transparent;
}
.tabs .tab a.active, .tabs .tab a:focus, .tabs .tab a:hover {
  color: var(--md-sys-color-primary);
}
.tabs .tab a:hover {
  background-color: color-mix(in srgb, transparent, var(--md-sys-color-primary) 6%);
}
.tabs .tab a:focus {
  background-color: var(--md-sys-color-primary-container);
}
.tabs .tab a.active {
  background-color: color-mix(in srgb, transparent, var(--md-sys-color-primary) 18%);
}
.tabs .tab a:focus, .tabs .tab a.active {
  outline: none;
}
.tabs .tab.disabled a, .tabs .tab.disabled a:hover {
  color: var(--md-sys-color-on-surface);
  cursor: default;
  background-color: transparent;
}
.tabs .tab.disabled a:not(:focus), .tabs .tab.disabled a:hover:not(:focus) {
  background-color: transparent;
}
.tabs .indicator {
  position: absolute;
  bottom: 0;
  height: 3px;
  background-color: var(--md-sys-color-primary);
  will-change: left, right;
  border-radius: 3px 3px 0 0;
}
.tabs.tabs-horizontal .tab {
  height: 48px;
}
.tabs.tabs-horizontal .tab a {
  display: block;
}
.tabs.tabs-horizontal .tab i.material-icons {
  padding: 0 4px;
  position: relative;
  top: -2px;
  vertical-align: middle;
}

/* Fixed Sidenav hide on smaller */
@media only screen and (max-width : 992.99px) {
  .tabs {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
  .tabs .tab {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
  }
  .tabs .tab a {
    padding: 0 12px;
  }
}
.tabs-fill {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: 16px;
  background: var(--md-sys-color-surface);
}
.tabs-fill > .tabs {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  margin: 0;
  width: 100%;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}
.tabs-fill > .tabs-fill-panel {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 0;
      -ms-flex: 1 1 0px;
          flex: 1 1 0;
  min-height: 0;
  overflow: auto;
  padding: 24px;
}
.tabs-fill[data-tab-position=bottom] > .tabs {
  -webkit-box-ordinal-group: 2;
  -webkit-order: 1;
      -ms-flex-order: 1;
          order: 1;
  border-bottom: 0;
  border-top: 1px solid var(--md-sys-color-outline-variant);
}
.tabs-fill[data-tab-position=bottom] > .tabs .indicator {
  top: 0;
  bottom: auto;
}

.material-tooltip {
  padding: 0 8px;
  border-radius: 4px;
  color: var(--md-sys-color-inverse-on-surface);
  background-color: var(--md-sys-color-inverse-surface);
  font-family: var(--md-sys-typescale-body-small-font-family-name);
  font-size: var(--md-sys-typescale-body-small-font-size);
  line-height: var(--md-sys-typescale-body-small-line-height);
  font-weight: var(--md-sys-typescale-body-small-font-weight);
  min-height: 24px;
  opacity: 0;
  padding-top: 6px;
  padding-bottom: 6px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: 0.4px;
  position: absolute;
  max-width: 300px;
  overflow: hidden;
  left: 0;
  top: 0;
  pointer-events: none;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  visibility: hidden;
  z-index: 2000;
}

.backdrop {
  position: absolute;
  opacity: 0;
  height: 7px;
  width: 14px;
  border-radius: 0 0 50% 50%;
  background-color: var(--md-sys-color-inverse-surface);
  z-index: -1;
  -webkit-transform-origin: 50% 0;
          transform-origin: 50% 0;
  visibility: hidden;
}

[popover] {
  outline: none;
  padding: 0;
  border: none;
}

.dropdown-content {
  --menu-surface: var(--md-sys-color-surface-container-low, color-mix(in srgb, var(--md-sys-color-surface), var(--md-sys-color-on-surface) 4%));
  background-color: var(--menu-surface);
  color: var(--md-sys-color-on-surface);
  border: none;
  border-radius: 16px;
  -webkit-box-shadow: 0 2px 6px 2px color-mix(in srgb, var(--md-sys-color-shadow) 15%, transparent), 0 1px 2px color-mix(in srgb, var(--md-sys-color-shadow) 30%, transparent);
          box-shadow: 0 2px 6px 2px color-mix(in srgb, var(--md-sys-color-shadow) 15%, transparent), 0 1px 2px color-mix(in srgb, var(--md-sys-color-shadow) 30%, transparent);
  padding: 2px 4px;
  list-style-type: none;
  margin: 0;
  display: none;
  min-width: 112px;
  outline: none;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-padding-block: 2px;
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 9999;
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  white-space: nowrap;
}
.dropdown-content[data-submenu] {
  position: fixed;
  right: auto;
  bottom: auto;
  min-width: min(180px, 100vw - 16px);
  max-width: min(280px, 100vw - 16px);
}
.dropdown-content > li {
  --menu-item-surface: var(--menu-surface);
  --menu-item-color: var(--md-sys-color-on-surface);
  min-height: 48px;
  color: var(--menu-item-color);
  background-color: var(--menu-item-surface);
  border-radius: 4px;
  outline: none;
  -webkit-transition: background-color 150ms ease, border-radius 150ms ease;
  transition: background-color 150ms ease, border-radius 150ms ease;
  clear: both;
  position: relative;
  cursor: pointer;
  line-height: 24px;
  width: 100%;
  text-align: start;
}
.dropdown-content > li + li {
  margin-top: 2px;
}
.dropdown-content > li:first-child, .dropdown-content > li:is(.divider + li) {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}
.dropdown-content > li:last-child, .dropdown-content > li:has(+ .divider) {
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}
.dropdown-content > li.divider {
  min-height: 0;
  height: 1px;
  width: auto;
  margin: 4px 12px;
  border-radius: 0;
  background-color: var(--md-sys-color-outline-variant);
  cursor: default;
}
.dropdown-content > li > a, .dropdown-content > li > span, .dropdown-content > li > button {
  display: block;
  width: 100%;
  min-height: inherit;
  padding: 12px;
  border: none;
  border-radius: inherit;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0.5px;
  text-align: inherit;
  cursor: inherit;
  outline: none;
}
.dropdown-content > li > span > label {
  top: 1px;
  left: 0;
  height: 18px;
}
.dropdown-content > li > :is(a, span, button) > i {
  height: 24px;
  line-height: 24px;
  font-size: 20px;
  float: inline-start;
  margin: 0;
  -webkit-margin-end: 8px;
     -moz-margin-end: 8px;
          margin-inline-end: 8px;
  width: 20px;
  color: var(--md-sys-color-on-surface-variant);
}
.dropdown-content > li > .dropdown-trigger {
  -webkit-padding-end: 36px;
     -moz-padding-end: 36px;
          padding-inline-end: 36px;
}
.dropdown-content > li > .dropdown-trigger::after {
  content: "";
  position: absolute;
  inset-inline-end: 16px;
  top: calc(50% - 4px);
  width: 8px;
  height: 8px;
  border-top: 2px solid currentColor;
  -webkit-border-end: 2px solid currentColor;
     -moz-border-end: 2px solid currentColor;
          border-inline-end: 2px solid currentColor;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.dropdown-content > li > .dropdown-trigger:dir(rtl)::after {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.dropdown-content > li:has(> .dropdown-trigger[aria-expanded=true]) {
  border-radius: 12px;
  background-color: color-mix(in srgb, var(--menu-item-surface), var(--menu-item-color) 10%);
}
.dropdown-content > li:is(.selected, [aria-selected=true], [aria-checked=true]) {
  --menu-item-surface: var(--md-sys-color-tertiary-container);
  --menu-item-color: var(--md-sys-color-on-tertiary-container);
  border-radius: 12px;
}
.dropdown-content > li:is(.selected, [aria-selected=true], [aria-checked=true]) > :is(a, span, button) > i {
  color: inherit;
}
.dropdown-content > li:not(.disabled, .divider, .optgroup, [aria-disabled=true]):hover {
  background-color: color-mix(in srgb, var(--menu-item-surface), var(--menu-item-color) 8%);
}
.dropdown-content > li:not(.disabled, .divider, .optgroup, [aria-disabled=true]):is(:focus, :focus-within, .active) {
  background-color: color-mix(in srgb, var(--menu-item-surface), var(--menu-item-color) 10%);
}
.dropdown-content > li:not(.disabled, .divider, .optgroup, [aria-disabled=true]):focus-visible, .dropdown-content > li:not(.disabled, .divider, .optgroup, [aria-disabled=true]):has(> :focus-visible) {
  outline: 3px solid var(--md-sys-color-secondary);
  outline-offset: -3px;
}
.dropdown-content > li:not(.disabled, .divider, .optgroup, [aria-disabled=true]):active {
  background-color: color-mix(in srgb, var(--menu-item-surface), var(--menu-item-color) 10%);
}
.dropdown-content > li:is(.disabled, [aria-disabled=true]) {
  color: color-mix(in srgb, var(--menu-item-color) 38%, transparent);
  cursor: default;
}
.dropdown-content > li:is(.disabled, [aria-disabled=true]) > :is(a, span, button) > i {
  color: inherit;
}

@media (forced-colors: active) {
  .dropdown-content {
    border: 1px solid CanvasText;
  }
  .dropdown-content > li:not(.disabled, .divider, .optgroup, [aria-disabled=true]):is(:focus, :focus-within, .active) {
    outline: 3px solid Highlight;
    outline-offset: -3px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dropdown-content > li {
    -webkit-transition: none;
    transition: none;
  }
}
.input-field.col .dropdown-content [type=checkbox] + label {
  top: 1px;
  left: 0;
  height: 18px;
  -webkit-transform: none;
          transform: none;
}

.dropdown-trigger {
  cursor: pointer;
}

.collection {
  padding-left: 0;
  list-style-type: none;
  background-color: var(--md-sys-color-surface);
  margin: 0.5rem 0 1rem 0;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}
.collection .collection-item {
  background-color: transparent;
  line-height: 1.5rem;
  padding: 10px 20px;
  margin: 0;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}
.collection .collection-item.avatar {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-height: 84px;
  padding-left: 72px;
  position: relative;
  overflow-wrap: anywhere;
}
.collection .collection-item.avatar:has(> .secondary-content) {
  padding-right: 60px;
}
.collection .collection-item.avatar:not(.circle-clipper) > .circle,
.collection .collection-item.avatar :not(.circle-clipper) > .circle {
  position: absolute;
  width: 42px;
  height: 42px;
  overflow: hidden;
  left: 15px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  display: inline-block;
  vertical-align: middle;
}
.collection .collection-item.avatar img.circle {
  -o-object-fit: cover;
     object-fit: cover;
}
.collection .collection-item.avatar i.circle {
  font-size: 18px;
  line-height: 42px;
  color: #fff;
  background-color: var(--md-sys-color-shadow-light);
  text-align: center;
}
.collection .collection-item.avatar .title {
  font-size: 16px;
}
.collection .collection-item.avatar p {
  margin: 0;
}
.collection .collection-item.avatar > .secondary-content {
  position: absolute;
  top: 50%;
  right: 16px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  float: none;
  line-height: 1;
}
.collection .collection-item.avatar > .secondary-content > i {
  display: block;
}
.collection .collection-item:last-child {
  border-bottom: none;
}
.collection .collection-item.active {
  background-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}
.collection .collection-item.active .secondary-content {
  color: var(--md-sys-color-on-primary);
}
.collection a.collection-item {
  display: block;
  -webkit-transition: 0.25s;
  transition: 0.25s;
  color: var(--md-sys-color-primary);
}
.collection a.collection-item:not(.active):hover {
  background-color: rgba(0, 0, 0, 0.04);
}
.collection.with-header .collection-header {
  background-color: var(--md-sys-color-surface-variant);
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  padding: 10px 20px;
}
.collection.with-header .collection-item {
  padding-left: 30px;
}
.collection.with-header .collection-item.avatar {
  padding-left: 72px;
}

.secondary-content {
  float: right;
  color: var(--md-sys-color-primary);
}

.collapsible .collection {
  margin: 0;
  border: none;
}

.list-item {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.modal {
  --modal-footer-divider-height: 1px;
  --modal-border-radius: 28px;
  --modal-padding: 24px;
  --modal-padding-bottom: 16px;
  --modal-background-color: color-mix(in srgb, var(--md-sys-color-surface), var(--md-sys-color-surface-tint) 17%);
  border: none;
  outline: none;
  padding: 0;
  max-height: 70%;
  width: 55%;
  border-radius: var(--modal-border-radius);
  will-change: top, opacity;
  background-color: var(--modal-background-color);
}
.modal[open] {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}
@media only screen and (max-width : 992.99px) {
  .modal {
    width: 80%;
  }
}
.modal::-webkit-backdrop {
  -webkit-backdrop-filter: blur(1px);
          backdrop-filter: blur(1px);
}
.modal::-ms-backdrop {
  backdrop-filter: blur(1px);
}
.modal::backdrop {
  -webkit-backdrop-filter: blur(1px);
          backdrop-filter: blur(1px);
}
.modal .modal-header {
  padding: var(--modal-padding);
  padding-bottom: var(--modal-padding-bottom);
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}
.modal .modal-content {
  padding: 0 var(--modal-padding);
}
.modal .modal-footer {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  border-radius: 0 0 var(--modal-border-radius) var(--modal-border-radius);
  padding: var(--modal-padding);
  text-align: right;
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.modal .modal-close {
  cursor: pointer;
}
.modal h1, .modal h2, .modal h3, .modal h4, .modal h5, .modal h6 {
  margin: 0;
}

.modal.bottom-sheet {
  margin-bottom: 0;
  max-height: 45%;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  will-change: bottom, opacity;
}

.materialboxed {
  display: block;
  cursor: -webkit-zoom-in;
  cursor: zoom-in;
  position: relative;
  -webkit-transition: opacity 0.4s;
  transition: opacity 0.4s;
  -webkit-backface-visibility: hidden;
}
.materialboxed:hover:not(.active) {
  opacity: 0.8;
}
.materialboxed.active {
  cursor: -webkit-zoom-out;
  cursor: zoom-out;
}

#materialbox-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: var(--md-sys-color-background);
  z-index: 1000;
  will-change: opacity;
}

.materialbox-caption {
  position: fixed;
  display: none;
  color: var(--md-sys-color-on-background);
  line-height: 50px;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  padding: 0% 15%;
  height: 50px;
  z-index: 1000;
  -webkit-font-smoothing: antialiased;
}

.chip {
  --font-size: 14px;
  --font-size-icon: 18px;
  --padding: 8px;
  color: var(--md-sys-color-on-surface-variant);
  background-color: rgba(0, 0, 0, 0.09);
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  white-space: nowrap;
  gap: 8px;
  margin: 0;
  height: 32px;
  padding-left: var(--padding);
  padding-right: var(--padding);
  font-size: var(--font-size);
  font-weight: 500;
  border-radius: 8px;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  vertical-align: top;
}

.chip:focus {
  outline: none;
  background-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}

.chip.outlined {
  background-color: transparent;
  border-color: var(--md-sys-color-outline);
  border-width: 1px;
  border-style: solid;
}

.chip > img {
  margin: 0;
  width: 24px;
  height: 24px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 12px;
}

.chip > .material-icons {
  font-size: var(--font-size-icon);
  color: var(--md-sys-color-on-surface-variant);
}

.chip .close {
  border: none;
  border-radius: 50%;
  height: 24px;
  width: 24px;
  padding: 0;
  display: grid;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-align-content: center;
      -ms-flex-line-pack: center;
          align-content: center;
  cursor: pointer;
}

.chip .close:hover {
  background-color: rgba(136, 136, 136, 0.5333333333);
}

.chips {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: 4px;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  border: none;
  -webkit-box-shadow: none;
          box-shadow: none;
  margin: 0 0 8px 0;
  padding: 4px;
  /* min-height: 45px; */
  outline: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.chips.focus {
  border-bottom: 1px solid var(--md-sys-color-primary);
  -webkit-box-shadow: 0 1px 0 0 var(--md-sys-color-primary);
          box-shadow: 0 1px 0 0 var(--md-sys-color-primary);
}

.chips.input-field {
  border-bottom: 1px solid var(--md-sys-color-on-surface-variant);
}

.chis input:not([type]):not(.browser-default).input {
  background: none;
  border: 0;
  color: var(--md-sys-color-on-background);
  display: inline-block;
  font-size: 16px;
  /* height: 32px;
   line-height: 32px; */
  height: 32px;
  outline: 0;
  margin: 0;
  padding: 0;
  width: 120px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  min-width: 100px;
  max-width: 200px;
}

.chis input:not([type]):not(.browser-default).input:focus {
  border: 0;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.chips.input-field:hover {
  cursor: text;
}

.chips .autocomplete-content {
  margin-top: 0;
  margin-bottom: 0;
}

.prefix ~ .chips {
  margin-left: 3rem;
  width: 92%;
  width: calc(100% - 3rem);
}

.suffix ~ .chips {
  margin-right: 3rem;
  width: 92%;
  width: calc(100% - 3rem);
}

.chips:empty ~ label {
  font-size: 0.8rem;
  -webkit-transform: translateY(-140%);
          transform: translateY(-140%);
}

.toolbar:not(.fixed-action-btn):not(.code-toolbar > .toolbar) {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 100%;
  gap: 8px;
  padding: 5px 5px;
  margin: 0.5rem 0 1rem 0;
  border-radius: 20px;
  background-color: var(--md-sys-color-surface-variant);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.toolbar:not(.fixed-action-btn):not(.code-toolbar > .toolbar)::-webkit-scrollbar {
  display: none;
}
.toolbar:not(.fixed-action-btn):not(.code-toolbar > .toolbar) > .toolbar-group {
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
}
.toolbar:not(.fixed-action-btn):not(.code-toolbar > .toolbar).toolbar-wrap {
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  height: auto;
  overflow-x: visible;
  overflow-y: visible;
  row-gap: 8px;
}
.toolbar:not(.fixed-action-btn):not(.code-toolbar > .toolbar).toolbar-wrap > .toolbar-group {
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  row-gap: 8px;
  -webkit-flex-shrink: 1;
      -ms-flex-negative: 1;
          flex-shrink: 1;
  min-width: 0;
}

.toolbar-group {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 5px;
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
}

.toolbar-separator {
  -webkit-align-self: stretch;
      -ms-flex-item-align: stretch;
          align-self: stretch;
  width: 1px;
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
  margin: 4px 2px;
  background-color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface-variant) 32%);
}

.toolbar-freeze-left,
.toolbar-freeze-right {
  position: -webkit-sticky;
  position: sticky;
  z-index: 1;
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
  background-color: var(--md-sys-color-surface-variant);
}

.toolbar-freeze-left {
  left: 0;
  padding-right: 8px;
  border-radius: 20px 0 0 20px;
  -webkit-box-shadow: 6px 0 6px -4px rgba(0, 0, 0, 0.25);
          box-shadow: 6px 0 6px -4px rgba(0, 0, 0, 0.25);
}

.toolbar-freeze-right {
  right: 0;
  padding-left: 8px;
  border-radius: 0 20px 20px 0;
  -webkit-box-shadow: -6px 0 6px -4px rgba(0, 0, 0, 0.25);
          box-shadow: -6px 0 6px -4px rgba(0, 0, 0, 0.25);
}

.toolbar-track {
  position: relative;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  height: 34px;
  padding: 3px;
  border-radius: 999px;
  background-color: var(--md-sys-color-surface);
  border: 1px solid var(--md-sys-color-outline-variant);
}

.toolbar-track.toolbar-track-bare {
  padding: 3px 0;
  background-color: transparent;
  border-color: transparent;
}

.toolbar-track-indicator {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 0;
  z-index: 0;
  width: 0;
  border-radius: 999px;
  background-color: var(--md-sys-color-primary);
  opacity: 0;
  pointer-events: none;
  -webkit-transition: width 0.22s cubic-bezier(0.2, 0.7, 0.3, 1), opacity 0.14s ease, -webkit-transform 0.22s cubic-bezier(0.2, 0.7, 0.3, 1);
  transition: width 0.22s cubic-bezier(0.2, 0.7, 0.3, 1), opacity 0.14s ease, -webkit-transform 0.22s cubic-bezier(0.2, 0.7, 0.3, 1);
  transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.3, 1), width 0.22s cubic-bezier(0.2, 0.7, 0.3, 1), opacity 0.14s ease;
  transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.3, 1), width 0.22s cubic-bezier(0.2, 0.7, 0.3, 1), opacity 0.14s ease, -webkit-transform 0.22s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.toolbar-track.is-armed .toolbar-track-indicator {
  opacity: 1;
}

.toolbar-track-item {
  position: relative;
  z-index: 1;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  height: 28px;
  padding: 0 13px;
  border: 0;
  border-radius: 999px;
  background-color: transparent;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 12.5px;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  -webkit-transition: color 0.16s ease;
  transition: color 0.16s ease;
}
.toolbar-track-item:hover {
  color: var(--md-sys-color-on-surface);
}
.toolbar-track-item.is-active {
  font-weight: 600;
  color: var(--md-sys-color-on-primary);
}
.toolbar-track-item:focus-visible {
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: 2px;
}

.toolbar-slider {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 13px;
  border-radius: 999px;
  background-color: var(--md-sys-color-surface);
  border: 1px solid var(--md-sys-color-outline-variant);
}
.toolbar-slider .range-field {
  width: 120px;
  margin-top: 18px;
}
.toolbar-slider i.material-icons {
  font-size: 18px;
}
.toolbar-slider span {
  line-height: 1;
  position: relative;
  top: -3px;
}

.toolbar-search {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  width: 34px;
  height: 34px;
  padding: 2px;
  overflow: hidden;
  border-radius: 999px;
  background-color: var(--md-sys-color-surface);
  border: 1px solid var(--md-sys-color-outline-variant);
  -webkit-transition: width 0.2s cubic-bezier(0.2, 0.7, 0.3, 1);
  transition: width 0.2s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.toolbar-search.is-expanded {
  width: 190px;
}
.toolbar-search .toolbar-search-toggle {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 28px;
      -ms-flex: 0 0 28px;
          flex: 0 0 28px;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: transparent;
  color: var(--md-sys-color-on-surface-variant);
  cursor: pointer;
}
.toolbar-search .toolbar-search-input {
  width: 0;
  min-width: 0;
  height: 28px;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background-color: transparent;
  color: var(--md-sys-color-on-surface);
  font-size: 12px;
  opacity: 0;
  -webkit-transition: opacity 0.12s ease;
  transition: opacity 0.12s ease;
}
.toolbar-search.is-expanded .toolbar-search-input {
  width: 150px;
  padding-right: 5px;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .toolbar-track-indicator {
    -webkit-transition: opacity 0.14s ease;
    transition: opacity 0.14s ease;
  }
}
.toolbar.toolbar-zoom:not(.fixed-action-btn) {
  background-color: var(--md-sys-color-surface);
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  gap: 2px;
  padding: 2px;
  height: 38px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: 999px;
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
}
.toolbar.toolbar-zoom:not(.fixed-action-btn) > crazy-button {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-align-self: center;
      -ms-flex-item-align: center;
          align-self: center;
  height: 32px;
  margin: 0;
  padding: 0;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  line-height: 0;
}
.toolbar.toolbar-zoom:not(.fixed-action-btn) > crazy-button > .btn {
  --button-height: 32px;
  height: 32px;
  min-height: 32px;
  margin: 0;
  border-radius: 999px;
}
.toolbar.toolbar-zoom:not(.fixed-action-btn) > crazy-button.toolbar-zoom-reset > .btn {
  -webkit-align-self: center;
      -ms-flex-item-align: center;
          align-self: center;
  margin-block: auto;
  --button-height: 28px;
  height: 28px;
  min-height: 28px;
  min-width: 46px;
  -webkit-margin-end: 2px;
     -moz-margin-end: 2px;
          margin-inline-end: 2px;
  padding-inline: 8px;
  font-size: 11px;
  border: 0;
  background: var(--md-sys-color-surface-variant);
}

.toolbar:not(.fixed-action-btn) .toolbar.toolbar-zoom {
  margin: 0;
}

.toolbar.toolbar-zoom > crazy-button:is(.toolbar-zoom-out, .toolbar-zoom-in) > .btn > i {
  position: relative;
  display: block;
  width: 18px;
  height: 18px;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 18px;
      -ms-flex: 0 0 18px;
          flex: 0 0 18px;
  margin: 0;
  font-size: 0;
  line-height: 0;
}
.toolbar.toolbar-zoom > crazy-button:is(.toolbar-zoom-out, .toolbar-zoom-in) > .btn > i::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 8px;
  width: 12px;
  height: 2px;
  background: currentColor;
}
.toolbar.toolbar-zoom > crazy-button.toolbar-zoom-in > .btn > i::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 3px;
  width: 2px;
  height: 12px;
  background: currentColor;
}

div.code-toolbar > .toolbar {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: auto;
  max-width: calc(100% - 1rem);
  gap: 0.25rem;
  padding: 0;
  margin: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
  opacity: 1;
}
div.code-toolbar > .toolbar > .toolbar-item > button.copy-to-clipboard-button {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-height: 28px;
  padding: 4px 12px;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: 16px;
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
  -webkit-box-shadow: none;
          box-shadow: none;
  cursor: pointer;
}
div.code-toolbar > .toolbar > .toolbar-item > button.copy-to-clipboard-button:hover {
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}
div.code-toolbar > .toolbar > .toolbar-item > button.copy-to-clipboard-button:focus-visible {
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: 2px;
}

:root {
  --navbar-height: 64px;
  --navbar-height-mobile: 56px;
  --appbar-title-font-size: 24px;
}

/* :where() keeps this whole rule at zero specificity, so a color utility
   class (.primary, .secondary, .surface, etc.) placed on the same element
   always wins over this base/fallback styling, no matter which rule comes
   later in the stylesheet. Without it, "background-color" here tied on
   specificity with ".primary" and (being later in source order) silently
   overrode the intended navbar color whenever both classes were present. */
:where(.nav-wrapper) {
  height: 100%;
  background-color: var(--md-sys-color-surface);
  padding-left: 4px;
  padding-right: 4px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

.navbar {
  border: 0;
  border-radius: 0;
  color: var(--md-sys-color-on-primary);
  background-color: var(--md-sys-color-secondary-container);
  width: 100%;
  height: var(--navbar-height-mobile);
  line-height: var(--navbar-height-mobile);
}

.navbar.nav-extended {
  height: auto;
}

.navbar.nav-extended .nav-wrapper {
  min-height: var(--navbar-height-mobile);
  height: auto;
}

.navbar.nav-extended .nav-content {
  position: relative;
  line-height: normal;
}

.navbar ul:not(.dropdown-content) {
  list-style-type: none;
  margin: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1em;
}

.navbar ul:not(.dropdown-content).left {
  float: left;
}

.navbar ul:not(.dropdown-content) > li {
  -webkit-transition: background-color 0.3s;
  transition: background-color 0.3s;
  padding: 0;
}

.navbar ul:not(.dropdown-content) > li > a {
  -webkit-transition: background-color 0.3s;
  transition: background-color 0.3s;
  color: var(--md-sys-color-on-surface);
  display: block;
  cursor: pointer;
}

.navbar ul:not(.dropdown-content) > li > a.btn,
.navbar ul:not(.dropdown-content) > li > a.btn-large,
.navbar ul:not(.dropdown-content) > li > a.btn-flat,
.navbar ul:not(.dropdown-content) > li > a.btn-floating {
  margin-top: -2px;
  margin-left: 15px;
  margin-right: 15px;
  /* Was inline-block, which overrides .btn's own inline-flex;
     align-items:center and breaks vertical centering of the button's
     text - visually harmless on .btn-large (tall enough that the
     misalignment doesn't stand out) but text nearly clips out the
     bottom on the smaller .btn/.btn-flat/.btn-floating sizes. */
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

.navbar ul:not(.dropdown-content) > li > a.btn > .material-icons,
.navbar ul:not(.dropdown-content) > li > a.btn-large > .material-icons,
.navbar ul:not(.dropdown-content) > li > a.btn-flat > .material-icons,
.navbar ul:not(.dropdown-content) > li > a.btn-floating > .material-icons,
.navbar ul:not(.dropdown-content) > li > a.btn > .material-symbols-outlined,
.navbar ul:not(.dropdown-content) > li > a.btn-large > .material-symbols-outlined,
.navbar ul:not(.dropdown-content) > li > a.btn-flat > .material-symbols-outlined,
.navbar ul:not(.dropdown-content) > li > a.btn-floating > .material-symbols-outlined,
.navbar ul:not(.dropdown-content) > li > a.btn > .material-symbols-rounded,
.navbar ul:not(.dropdown-content) > li > a.btn-large > .material-symbols-rounded,
.navbar ul:not(.dropdown-content) > li > a.btn-flat > .material-symbols-rounded,
.navbar ul:not(.dropdown-content) > li > a.btn-floating > .material-symbols-rounded,
.navbar ul:not(.dropdown-content) > li > a.btn > .material-symbols-sharp,
.navbar ul:not(.dropdown-content) > li > a.btn-large > .material-symbols-sharp,
.navbar ul:not(.dropdown-content) > li > a.btn-flat > .material-symbols-sharp,
.navbar ul:not(.dropdown-content) > li > a.btn-floating > .material-symbols-sharp {
  height: inherit;
  line-height: inherit;
}

.navbar a {
  color: var(--md-sys-color-on-primary);
}

.navbar i,
.navbar [class^=mdi-],
.navbar [class*=mdi-],
.navbar i.material-icons,
.navbar i.material-symbols-outlined,
.navbar i.material-symbols-rounded,
.navbar i.material-symbols-sharp {
  display: block;
  font-size: 24px;
  height: var(--navbar-height-mobile);
  line-height: var(--navbar-height-mobile);
}

/* Collapse button */
.navbar .sidenav-trigger {
  float: left;
  position: relative;
  z-index: 1;
  height: var(--navbar-height-mobile);
  margin: 0 18px;
}

.navbar .sidenav-trigger i {
  height: var(--navbar-height-mobile);
  line-height: var(--navbar-height-mobile);
}

/* Logo */
.navbar .brand-logo {
  color: var(--md-sys-color-on-surface);
  font-size: var(--appbar-title-font-size);
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0;
}

.navbar .brand-logo.center {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

/* Collision-safe centered app bar: the left link region and the generated
   right spacer share the available width, keeping the logo truly centered
   without taking it out of the flex layout. */
.navbar:is(.appbar, .appbar-bordered) .nav-wrapper.nav-wrapper-centered::after {
  content: "";
  -webkit-box-ordinal-group: 4;
  -webkit-order: 3;
      -ms-flex-order: 3;
          order: 3;
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 0;
      -ms-flex: 1 1 0px;
          flex: 1 1 0;
  min-width: 0;
}

.navbar:is(.appbar, .appbar-bordered) .nav-wrapper.nav-wrapper-centered > ul {
  -webkit-box-ordinal-group: 2;
  -webkit-order: 1;
      -ms-flex-order: 1;
          order: 1;
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 0;
      -ms-flex: 1 1 0px;
          flex: 1 1 0;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.navbar:is(.appbar, .appbar-bordered) .nav-wrapper.nav-wrapper-centered > ul::-webkit-scrollbar {
  display: none;
}

.navbar:is(.appbar, .appbar-bordered) .nav-wrapper.nav-wrapper-centered > ul > li > a {
  white-space: nowrap;
}

.navbar:is(.appbar, .appbar-bordered) .nav-wrapper.nav-wrapper-centered > .brand-logo.center {
  position: static;
  -webkit-box-ordinal-group: 3;
  -webkit-order: 2;
      -ms-flex-order: 2;
          order: 2;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  left: auto;
  -webkit-transform: none;
          transform: none;
}

.navbar .brand-logo.right {
  right: 0.5rem;
  padding: 0;
}

.navbar .brand-logo i,
.navbar .brand-logo [class^=mdi-],
.navbar .brand-logo [class*=mdi-],
.navbar .brand-logo i.material-icons,
.navbar .brand-logo i.material-symbols-outlined,
.navbar .brand-logo i.material-symbols-rounded,
.navbar .brand-logo i.material-symbols-sharp {
  /* Was float:left, paired with an explicit height/line-height (from
     the general .navbar i rule) sized to the whole navbar row height,
     inside a brand-logo that's only ever as tall as its own text.
     Floating a block that tall out of a small inline-block parent
     with nothing to clear it let it render outside/clipped by the
     navbar row - invisible in practice. brand-logo is flex now, so
     this just needs to be a normal flex item. */
  margin-right: 15px;
}

/* Structured MD3 app-bar content. These hooks keep branded demos and app
   shells from falling back to bare, loosely spaced anchor elements. */
.navbar:is(.appbar, .appbar-bordered) {
  overflow: visible;
  background: var(--md-sys-color-surface-variant);
  border: 0;
  border-radius: 0;
  -webkit-box-shadow: none;
          box-shadow: none;
}

/* Retain the original class as an explicit outline option. */
.navbar.appbar-bordered {
  border: 1px solid var(--md-sys-color-outline-variant);
}

/* Layout variants. `navbar-rounded` adds the inset treatment; use
   `navbar-full` for a flush, full-width rectangle. */
.navbar:is(.appbar, .appbar-bordered).navbar-rounded {
  margin: 8px 0;
  padding: 4px;
  border-radius: 16px;
  -webkit-box-shadow: 0 1px 2px color-mix(in srgb, var(--md-sys-color-shadow) 18%, transparent);
          box-shadow: 0 1px 2px color-mix(in srgb, var(--md-sys-color-shadow) 18%, transparent);
}

.navbar:is(.appbar, .appbar-bordered).navbar-full {
  width: 100%;
  margin: 0;
  padding: 0;
  border-radius: 0;
  border-left: 0;
  border-right: 0;
}

/* Extended app bars may contain tabs and a halfway FAB. Keep the rounded
   surface on its children, but let the FAB extend below the bar. */
.navbar:is(.appbar, .appbar-bordered).nav-extended {
  overflow: visible;
}

.navbar:is(.appbar, .appbar-bordered).nav-extended.navbar-rounded .nav-wrapper {
  border-radius: 15px 15px 0 0;
}

.navbar:is(.appbar, .appbar-bordered).nav-extended.navbar-rounded .nav-content {
  color: var(--md-sys-color-on-surface);
  background: var(--md-sys-color-surface-variant);
  border-radius: 0 0 15px 15px;
}

.navbar:is(.appbar, .appbar-bordered) .nav-wrapper {
  gap: 12px;
  padding-inline: 12px;
  background: var(--md-sys-color-surface-variant);
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.navbar:is(.appbar, .appbar-bordered) .nav-wrapper > .brand-logo,
.navbar:is(.appbar, .appbar-bordered) .nav-wrapper > ul:not(.dropdown-content),
.navbar:is(.appbar, .appbar-bordered) .nav-actions > li {
  -webkit-align-self: center;
      -ms-flex-item-align: center;
          align-self: center;
}

.navbar:is(.appbar, .appbar-bordered):not(.nav-extended) .nav-wrapper > .brand-logo,
.navbar:is(.appbar, .appbar-bordered):not(.nav-extended) .nav-wrapper > ul:not(.dropdown-content),
.navbar:is(.appbar, .appbar-bordered):not(.nav-extended) .nav-wrapper > ul:not(.dropdown-content) > li {
  height: 40px;
}

.navbar:is(.appbar, .appbar-bordered) .nav-actions > li {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

.navbar:is(.appbar, .appbar-bordered) .nav-wrapper::-webkit-scrollbar {
  display: none;
}

.navbar:is(.appbar, .appbar-bordered) .nav-wrapper > ul:not(.dropdown-content) {
  min-width: 0;
  -webkit-flex-shrink: 1;
      -ms-flex-negative: 1;
          flex-shrink: 1;
}

.navbar:is(.appbar, .appbar-bordered).navbar-wrap .nav-wrapper {
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  height: auto;
  row-gap: 8px;
  overflow: visible;
}

.navbar:is(.appbar, .appbar-bordered).navbar-wrap .nav-wrapper > ul:not(.dropdown-content) {
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  white-space: normal;
}

.navbar .brand-logo .brand-logo-image {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 40px;
  height: 40px;
  margin-right: 10px;
  padding: 8px;
  -o-object-fit: contain;
     object-fit: contain;
  background: var(--md-sys-color-primary-container);
  border-radius: 12px;
}

.navbar .nav-separator {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 1px;
      -ms-flex: 0 0 1px;
          flex: 0 0 1px;
  width: 1px;
  height: 32px;
  margin-inline: 4px;
  background: var(--md-sys-color-outline-variant);
}

.navbar .nav-context {
  color: var(--md-sys-color-on-surface-variant);
  font-size: 14px;
  white-space: nowrap;
}

.navbar ul.nav-actions:not(.dropdown-content) {
  gap: 8px;
}

.navbar:is(.appbar, .appbar-bordered) ul:not(.dropdown-content):not(.nav-actions):not(.tabs) > li > a:not(.btn):not(.btn-floating) {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  height: 40px;
  padding-inline: 12px;
  line-height: 40px;
  border-radius: 20px;
}

.navbar:is(.appbar, .appbar-bordered) ul:not(.dropdown-content):not(.nav-actions):not(.tabs) > li > a:not(.btn):not(.btn-floating):hover {
  background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
}

.navbar:is(.appbar, .appbar-bordered) ul:not(.dropdown-content):not(.nav-actions):not(.tabs) > li.active > a:not(.btn):not(.btn-floating) {
  color: var(--md-sys-color-on-primary-container);
  background: var(--md-sys-color-primary-container);
}

/* Text links use the same centred row as the app bar. The global navbar icon
   rule intentionally sizes standalone icons to the full bar; undo that for
   icons embedded beside link text. */
.navbar:is(.appbar, .appbar-bordered) ul:not(.dropdown-content):not(.tabs) > li > a:not(.btn):not(.btn-floating):has(> .material-icons.left),
.navbar:is(.appbar, .appbar-bordered) ul:not(.dropdown-content):not(.tabs) > li > a:not(.btn):not(.btn-floating):has(> .material-icons.right),
.navbar:is(.appbar, .appbar-bordered) .dropdown-trigger:has(> .material-icons) {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  min-height: 40px;
  font-size: 16px;
  line-height: 1;
}

.navbar:is(.appbar, .appbar-bordered) ul:not(.dropdown-content):not(.tabs) > li > a > .material-icons:is(.left, .right) {
  width: 24px;
  height: 24px;
  margin: 0;
  line-height: 24px;
}

.navbar:is(.appbar, .appbar-bordered) ul:not(.dropdown-content):not(.tabs) > li > a > .material-icons.right {
  -webkit-box-ordinal-group: 2;
  -webkit-order: 1;
      -ms-flex-order: 1;
          order: 1;
}

/* Tabs retain their component geometry and click target instead of inheriting
   navigation-pill spacing. */
.navbar:is(.appbar, .appbar-bordered) .tabs {
  gap: 0;
  background: transparent;
}

.navbar:is(.appbar, .appbar-bordered) .tabs .tab > a {
  height: 48px;
  min-height: 48px;
  padding-inline: 24px;
  line-height: 48px;
  border-radius: 0;
}

/* Buttons must remain legible and vertically centred in the constrained app
   bar row, including legacy examples using btn-large. */
.navbar:is(.appbar, .appbar-bordered) ul:not(.dropdown-content) > li > :is(.btn, .btn-large) {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  max-height: 48px;
  margin: 0;
  color: var(--md-sys-color-on-primary);
  white-space: nowrap;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 8px;
}

.navbar:is(.appbar, .appbar-bordered) ul:not(.dropdown-content) > li > :is(.btn, .btn-large) > .material-icons {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 20px;
      -ms-flex: 0 0 20px;
          flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin-left: 8px;
  line-height: 20px;
}

.navbar:is(.appbar, .appbar-bordered) .dropdown-trigger {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  white-space: nowrap;
}

.navbar:is(.appbar, .appbar-bordered) ul:not(.dropdown-content) > li > a:has(> .material-icons:only-child) {
  display: grid;
  place-items: center;
  width: 40px;
  padding: 0;
}

.navbar:is(.appbar, .appbar-bordered) ul:not(.dropdown-content) > li > a:has(> .material-icons:only-child) > .material-icons {
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
}

.navbar ul.nav-actions:not(.dropdown-content) > li > :is(.btn, .btn-floating) {
  margin: 0;
}

.navbar .nav-actions .btn-floating {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.navbar .nav-actions .btn-floating > .material-icons {
  display: block;
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
}

.navbar .nav-actions .btn > .material-icons {
  height: 16px;
  line-height: 16px;
}

/* Title */
.navbar .nav-title {
  display: inline-block;
  color: var(--md-sys-color-on-surface);
  font-size: 32px;
  padding: 20px 24px 28px;
}

/* Navbar Search Form */
.navbar form {
  height: 100%;
}

.navbar .input-field {
  margin: 0;
  height: 100%;
}

.navbar .input-field input[type=search] {
  height: 100%;
  font-size: 1.2rem;
  border: none;
  padding-left: 2rem;
  color: var(--md-sys-color-on-primary);
}

.navbar .input-field input[type=search]:focus,
.navbar .input-field input[type=search][type=text]:valid,
.navbar .input-field input[type=search][type=password]:valid,
.navbar .input-field input[type=search][type=email]:valid,
.navbar .input-field input[type=search][type=url]:valid,
.navbar .input-field input[type=search][type=date]:valid {
  border: none;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.navbar .input-field label {
  top: 0;
  left: 0;
}

.navbar .input-field label i {
  color: var(--font-on-primary-color-medium);
  -webkit-transition: color 0.3s;
  transition: color 0.3s;
}

.navbar .input-field label.active i {
  color: var(--md-sys-color-on-primary);
}

/* Fixed Navbar */
.navbar-fixed {
  position: relative;
  height: var(--navbar-height-mobile);
  z-index: 997;
}

.navbar-fixed .navbar {
  position: fixed;
  right: 0;
}

@media only screen and (min-width: 601px) {
  .nav.nav-extended .nav-wrapper {
    min-height: var(--navbar-height-mobile);
  }
  .nav,
  .navbar,
  .navbar .nav-wrapper i,
  nav a.sidenav-trigger,
  .navbar a.sidenav-trigger i {
    height: var(--navbar-height);
    line-height: var(--navbar-height);
  }
  .navbar-fixed {
    height: var(--navbar-height);
  }
}
.sidenav {
  --sidenav-width: 300px;
  --sidenav-font-size: 14px;
  --sidenav-padding: 16px;
  --sidenav-item-height: 48px;
  --sidenav-line-height: var(--sidenav-item-height);
  position: fixed;
  width: var(--sidenav-width);
  left: 0;
  top: 0;
  margin: 0;
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
  height: 100vh;
  padding: 0;
  z-index: 999;
  overflow-y: auto;
  will-change: transform;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transform: translateX(-105%);
          transform: translateX(-105%);
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  color: var(--md-sys-color-on-secondary-container);
  background-color: var(--md-sys-color-surface);
}
.sidenav.right-aligned {
  right: 0;
  -webkit-transform: translateX(105%);
          transform: translateX(105%);
  left: auto;
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
}
.sidenav .collapsible {
  margin: 0;
}
.sidenav {
  /* Hover only on top row */
  /*a:hover {
    //color: red;
    //background-color: var(--md-sys-color-on-secondary-container);
    //md.sys.color.on-secondary-container
  }*/
}
.sidenav a:focus {
  background-color: rgba(0, 0, 0, 0.12);
}
.sidenav li.active > a:not(.collapsible-header):not(.btn):not(.btn-large):not(.btn-small):not(.btn-flat):not(.btn-large):not(.btn-floating) {
  background-color: color-mix(in srgb, var(--md-sys-color-secondary) 10%, transparent);
}
.sidenav .collapsible-body > ul {
  padding-left: 10px;
}
.sidenav li {
  list-style: none;
  display: grid;
  -webkit-align-content: center;
      -ms-flex-line-pack: center;
          align-content: center;
}
.sidenav li > button.collapsible-header {
  width: auto;
  border: 0;
  background: transparent;
  font: inherit;
  text-align: left;
}
.sidenav li > a,
.sidenav li > button.collapsible-header {
  /* https://stackoverflow.com/questions/5848090/full-width-hover-background-for-nested-lists */
  margin: 0 12px;
  padding: 0 var(--sidenav-padding);
  /*
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  */
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: var(--sidenav-item-height);
  font-size: var(--sidenav-font-size);
  font-weight: 500;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  overflow: hidden;
  border-radius: 100px;
}
.sidenav li > a:not(.btn):not(.btn-flat):not(.btn-large):not(.btn-floating),
.sidenav li > button.collapsible-header:not(.btn):not(.btn-flat):not(.btn-large):not(.btn-floating) {
  color: var(--md-sys-color-on-secondary-container);
}
.sidenav li > a:not(.btn):not(.btn-flat):not(.btn-large):not(.btn-floating):hover,
.sidenav li > button.collapsible-header:not(.btn):not(.btn-flat):not(.btn-large):not(.btn-floating):hover {
  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
}
.sidenav li > a.btn, .sidenav li > a.btn-large, .sidenav li > a.btn-flat, .sidenav li > a.btn-floating,
.sidenav li > button.collapsible-header.btn,
.sidenav li > button.collapsible-header.btn-large,
.sidenav li > button.collapsible-header.btn-flat,
.sidenav li > button.collapsible-header.btn-floating {
  margin: 10px 15px;
}
.sidenav li > a,
.sidenav li > button.collapsible-header {
  /* TODO: Use special class in future like "mw-icon" */
}
.sidenav li > a > .material-icons, .sidenav li > a > .material-symbols-outlined, .sidenav li > a > .material-symbols-rounded, .sidenav li > a > .material-symbols-sharp,
.sidenav li > button.collapsible-header > .material-icons,
.sidenav li > button.collapsible-header > .material-symbols-outlined,
.sidenav li > button.collapsible-header > .material-symbols-rounded,
.sidenav li > button.collapsible-header > .material-symbols-sharp {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: 24px;
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
  vertical-align: middle;
  margin-right: 12px;
}
.sidenav .divider {
  margin: calc(var(--sidenav-padding) * 0.5) 0 0 0;
}
.sidenav .subheader {
  cursor: initial;
  pointer-events: none;
  color: red;
  font-size: var(--sidenav-font-size);
  font-weight: 500;
  line-height: var(--sidenav-line-height);
}
.sidenav .user-view {
  position: relative;
  padding: calc(var(--sidenav-padding) * 2) calc(var(--sidenav-padding) * 2) 0;
  margin-bottom: calc(var(--sidenav-padding) * 0.5);
}
.sidenav .user-view > a {
  height: auto;
  padding: 0;
}
.sidenav .user-view > a:hover {
  background-color: transparent;
}
.sidenav .user-view .background {
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
}
.sidenav .user-view .circle, .sidenav .user-view .name, .sidenav .user-view .email {
  display: block;
}
.sidenav .user-view .circle {
  height: 64px;
  width: 64px;
}
.sidenav .user-view .name,
.sidenav .user-view .email {
  font-size: var(--sidenav-font-size);
  line-height: calc(var(--sidenav-line-height) * 0.5);
}
.sidenav .user-view .name {
  margin-top: 16px;
  font-weight: 500;
}
.sidenav .user-view .email {
  padding-bottom: 16px;
  font-weight: 400;
}

.drag-target {
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 998;
}
.drag-target.right-aligned {
  right: 0;
}

.sidenav.sidenav-fixed {
  left: 0;
  -webkit-transform: translateX(0);
          transform: translateX(0);
  position: fixed;
}
.sidenav.sidenav-fixed.right-aligned {
  right: 0;
  left: auto;
}

@media only screen and (max-width : 992.99px) {
  .sidenav.sidenav-fixed {
    -webkit-transform: translateX(-105%);
            transform: translateX(-105%);
  }
  .sidenav.sidenav-fixed.right-aligned {
    -webkit-transform: translateX(105%);
            transform: translateX(105%);
  }
  .sidenav > a {
    padding: 0 var(--sidenav-padding);
  }
  .sidenav .user-view {
    padding: var(--sidenav-padding) var(--sidenav-padding) 0;
  }
}
.sidenav .collapsible-body {
  padding: 0;
}

.sidenav-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;
  height: 120vh;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 997;
  display: none;
}

.sidenav .collapsible,
.sidenav.sidenav-fixed .collapsible {
  border: none;
  -webkit-box-shadow: none;
          box-shadow: none;
}
.sidenav .collapsible-header,
.sidenav.sidenav-fixed .collapsible-header {
  border: none;
}
.sidenav .collapsible-body,
.sidenav.sidenav-fixed .collapsible-body {
  border: none;
}

.sidenav li > :is(a, button).collapsible-header {
  border-radius: 12px;
}

.sidenav li.active > :is(a, button).collapsible-header {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.progress {
  position: relative;
  height: 4px;
  display: block;
  width: 100%;
  background-color: var(--md-sys-color-surface-variant);
  border-radius: 4px;
  margin: 0.5rem 0 1rem 0;
  overflow: hidden;
  background-color: var(--md-sys-color-secondary-container);
}
.progress .determinate {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  background-color: var(--md-sys-color-primary);
  -webkit-transition: width 0.3s linear;
  transition: width 0.3s linear;
}
.progress .indeterminate {
  background-color: var(--md-sys-color-primary);
}
.progress .indeterminate:before {
  content: "";
  position: absolute;
  background-color: inherit;
  top: 0;
  left: 0;
  bottom: 0;
  will-change: left, right;
  -webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
          animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
}
.progress .indeterminate:after {
  content: "";
  position: absolute;
  background-color: inherit;
  top: 0;
  left: 0;
  bottom: 0;
  will-change: left, right;
  -webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
          animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
  -webkit-animation-delay: 1.15s;
          animation-delay: 1.15s;
}

@-webkit-keyframes indeterminate {
  0% {
    left: -35%;
    right: 100%;
  }
  60% {
    left: 100%;
    right: -90%;
  }
  100% {
    left: 100%;
    right: -90%;
  }
}

@keyframes indeterminate {
  0% {
    left: -35%;
    right: 100%;
  }
  60% {
    left: 100%;
    right: -90%;
  }
  100% {
    left: 100%;
    right: -90%;
  }
}
@-webkit-keyframes indeterminate-short {
  0% {
    left: -200%;
    right: 100%;
  }
  60% {
    left: 107%;
    right: -8%;
  }
  100% {
    left: 107%;
    right: -8%;
  }
}
@keyframes indeterminate-short {
  0% {
    left: -200%;
    right: 100%;
  }
  60% {
    left: 107%;
    right: -8%;
  }
  100% {
    left: 107%;
    right: -8%;
  }
}
/*
    @license
    Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
    This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
    The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
    The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
    Code distributed by Google as part of the polymer project is also
    subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 */
/**************************/
/* STYLES FOR THE SPINNER */
/**************************/
/*
 * Constants:
 *      STROKEWIDTH = 3px
 *      ARCSIZE     = 270 degrees (amount of circle the arc takes up)
 *      ARCTIME     = 1333ms (time it takes to expand and contract arc)
 *      ARCSTARTROT = 216 degrees (how much the start location of the arc
 *                                should rotate each time, 216 gives us a
 *                                5 pointed star shape (it's 360/5 * 3).
 *                                For a 7 pointed star, we might do
 *                                360/7 * 3 = 154.286)
 *      CONTAINERWIDTH = 28px
 *      SHRINK_TIME = 400ms
 */
.preloader-wrapper {
  display: inline-block;
  position: relative;
  width: 50px;
  height: 50px;
}
.preloader-wrapper.small {
  width: 36px;
  height: 36px;
}
.preloader-wrapper.big {
  width: 64px;
  height: 64px;
}
.preloader-wrapper.active {
  /* duration: 360 * ARCTIME / (ARCSTARTROT + (360-ARCSIZE)) */
  -webkit-animation: container-rotate 1568ms linear infinite;
  animation: container-rotate 1568ms linear infinite;
}

@-webkit-keyframes container-rotate {
  to {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes container-rotate {
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.spinner-layer {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  border-color: var(--md-sys-color-primary);
}

.spinner-blue,
.spinner-blue-only {
  border-color: #4285f4;
}

.spinner-red,
.spinner-red-only {
  border-color: #db4437;
}

.spinner-yellow,
.spinner-yellow-only {
  border-color: #f4b400;
}

.spinner-green,
.spinner-green-only {
  border-color: #0f9d58;
}

/**
 * IMPORTANT NOTE ABOUT CSS ANIMATION PROPERTIES (keanulee):
 *
 * iOS Safari (tested on iOS 8.1) does not handle animation-delay very well - it doesn't
 * guarantee that the animation will start _exactly_ after that value. So we avoid using
 * animation-delay and instead set custom keyframes for each color (as redundant as it
 * seems).
 *
 * We write out each animation in full (instead of separating animation-name,
 * animation-duration, etc.) because under the polyfill, Safari does not recognize those
 * specific properties properly, treats them as -webkit-animation, and overrides the
 * other animation rules. See https://github.com/Polymer/platform/issues/53.
 */
.active .spinner-layer.spinner-blue {
  /* durations: 4 * ARCTIME */
  -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, blue-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, blue-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}

.active .spinner-layer.spinner-red {
  /* durations: 4 * ARCTIME */
  -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}

.active .spinner-layer.spinner-yellow {
  /* durations: 4 * ARCTIME */
  -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, yellow-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, yellow-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}

.active .spinner-layer.spinner-green {
  /* durations: 4 * ARCTIME */
  -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, green-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, green-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}

.active .spinner-layer,
.active .spinner-layer.spinner-blue-only,
.active .spinner-layer.spinner-red-only,
.active .spinner-layer.spinner-yellow-only,
.active .spinner-layer.spinner-green-only {
  /* durations: 4 * ARCTIME */
  opacity: 1;
  -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}

@-webkit-keyframes fill-unfill-rotate {
  12.5% {
    -webkit-transform: rotate(135deg);
  } /* 0.5 * ARCSIZE */
  25% {
    -webkit-transform: rotate(270deg);
  } /* 1   * ARCSIZE */
  37.5% {
    -webkit-transform: rotate(405deg);
  } /* 1.5 * ARCSIZE */
  50% {
    -webkit-transform: rotate(540deg);
  } /* 2   * ARCSIZE */
  62.5% {
    -webkit-transform: rotate(675deg);
  } /* 2.5 * ARCSIZE */
  75% {
    -webkit-transform: rotate(810deg);
  } /* 3   * ARCSIZE */
  87.5% {
    -webkit-transform: rotate(945deg);
  } /* 3.5 * ARCSIZE */
  to {
    -webkit-transform: rotate(1080deg);
  } /* 4   * ARCSIZE */
}
@keyframes fill-unfill-rotate {
  12.5% {
    -webkit-transform: rotate(135deg);
            transform: rotate(135deg);
  } /* 0.5 * ARCSIZE */
  25% {
    -webkit-transform: rotate(270deg);
            transform: rotate(270deg);
  } /* 1   * ARCSIZE */
  37.5% {
    -webkit-transform: rotate(405deg);
            transform: rotate(405deg);
  } /* 1.5 * ARCSIZE */
  50% {
    -webkit-transform: rotate(540deg);
            transform: rotate(540deg);
  } /* 2   * ARCSIZE */
  62.5% {
    -webkit-transform: rotate(675deg);
            transform: rotate(675deg);
  } /* 2.5 * ARCSIZE */
  75% {
    -webkit-transform: rotate(810deg);
            transform: rotate(810deg);
  } /* 3   * ARCSIZE */
  87.5% {
    -webkit-transform: rotate(945deg);
            transform: rotate(945deg);
  } /* 3.5 * ARCSIZE */
  to {
    -webkit-transform: rotate(1080deg);
            transform: rotate(1080deg);
  } /* 4   * ARCSIZE */
}
@-webkit-keyframes blue-fade-in-out {
  from {
    opacity: 1;
  }
  25% {
    opacity: 1;
  }
  26% {
    opacity: 0;
  }
  89% {
    opacity: 0;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes blue-fade-in-out {
  from {
    opacity: 1;
  }
  25% {
    opacity: 1;
  }
  26% {
    opacity: 0;
  }
  89% {
    opacity: 0;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes red-fade-in-out {
  from {
    opacity: 0;
  }
  15% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  51% {
    opacity: 0;
  }
}
@keyframes red-fade-in-out {
  from {
    opacity: 0;
  }
  15% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  51% {
    opacity: 0;
  }
}
@-webkit-keyframes yellow-fade-in-out {
  from {
    opacity: 0;
  }
  40% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  76% {
    opacity: 0;
  }
}
@keyframes yellow-fade-in-out {
  from {
    opacity: 0;
  }
  40% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  76% {
    opacity: 0;
  }
}
@-webkit-keyframes green-fade-in-out {
  from {
    opacity: 0;
  }
  65% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes green-fade-in-out {
  from {
    opacity: 0;
  }
  65% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/**
 * Patch the gap that appear between the two adjacent div.circle-clipper while the
 * spinner is rotating (appears on Chrome 38, Safari 7.1, and IE 11).
 */
.gap-patch {
  position: absolute;
  top: 0;
  left: 45%;
  width: 10%;
  height: 100%;
  overflow: hidden;
  border-color: inherit;
}

.gap-patch .circle {
  width: 1000%;
  left: -450%;
}

.circle-clipper {
  display: inline-block;
  position: relative;
  width: 50%;
  height: 100%;
  overflow: hidden;
  border-color: inherit;
}
.circle-clipper .circle {
  width: 200%;
  height: 100%;
  border-width: 3px; /* STROKEWIDTH */
  border-style: solid;
  border-color: inherit;
  border-bottom-color: transparent !important;
  border-radius: 50%;
  -webkit-animation: none;
  animation: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
}
.circle-clipper.left .circle {
  left: 0;
  border-right-color: transparent !important;
  -webkit-transform: rotate(129deg);
  transform: rotate(129deg);
}
.circle-clipper.right .circle {
  left: -100%;
  border-left-color: transparent !important;
  -webkit-transform: rotate(-129deg);
  transform: rotate(-129deg);
}

.active .circle-clipper.left .circle {
  /* duration: ARCTIME */
  -webkit-animation: left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  animation: left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}

.active .circle-clipper.right .circle {
  /* duration: ARCTIME */
  -webkit-animation: right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  animation: right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}

@-webkit-keyframes left-spin {
  from {
    -webkit-transform: rotate(130deg);
  }
  50% {
    -webkit-transform: rotate(-5deg);
  }
  to {
    -webkit-transform: rotate(130deg);
  }
}
@keyframes left-spin {
  from {
    -webkit-transform: rotate(130deg);
            transform: rotate(130deg);
  }
  50% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg);
  }
  to {
    -webkit-transform: rotate(130deg);
            transform: rotate(130deg);
  }
}
@-webkit-keyframes right-spin {
  from {
    -webkit-transform: rotate(-130deg);
  }
  50% {
    -webkit-transform: rotate(5deg);
  }
  to {
    -webkit-transform: rotate(-130deg);
  }
}
@keyframes right-spin {
  from {
    -webkit-transform: rotate(-130deg);
            transform: rotate(-130deg);
  }
  50% {
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg);
  }
  to {
    -webkit-transform: rotate(-130deg);
            transform: rotate(-130deg);
  }
}
#spinnerContainer.cooldown {
  /* duration: SHRINK_TIME */
  -webkit-animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(0.4, 0, 0.2, 1);
  animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

@-webkit-keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.loading {
  --loading-size: 7rem;
  --loading-color: var(--md-sys-color-primary);
  --loading-background: var(--md-sys-color-surface-container, var(--md-sys-color-surface));
  --loading-thickness: 3px;
  position: relative;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: var(--loading-size);
  height: var(--loading-size);
  vertical-align: middle;
  border-radius: 50%;
  background: var(--loading-background);
  color: var(--loading-color);
  isolation: isolate;
}
.loading > .preloader-wrapper {
  position: absolute;
  inset: 5%;
  width: 90%;
  height: 90%;
  pointer-events: none;
}
.loading > .preloader-wrapper .spinner-layer {
  border-color: var(--loading-color);
}
.loading > .preloader-wrapper .circle-clipper .circle {
  border-width: var(--loading-thickness);
}
.loading:not(.active) > .preloader-wrapper {
  visibility: hidden;
}
.loading:not(.active) > .preloader-wrapper, .loading:not(.active) > .preloader-wrapper .spinner-layer, .loading:not(.active) > .preloader-wrapper .circle-clipper .circle {
  -webkit-animation: none;
          animation: none;
}
.loading.loading-small {
  --loading-size: 4rem;
}
.loading.loading-large {
  --loading-size: 10rem;
}
.loading[hidden] {
  display: none;
}
.loading .loading-content {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 72%;
  height: 72%;
  overflow: hidden;
  border-radius: inherit;
}
.loading .loading-content img, .loading .loading-content svg {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.loading .loading-content .material-icons {
  font-size: calc(var(--loading-size) * 0.35);
}

@media (prefers-reduced-motion: reduce) {
  .loading > .preloader-wrapper, .loading > .preloader-wrapper .spinner-layer, .loading > .preloader-wrapper .circle-clipper .circle {
    -webkit-animation: none;
            animation: none;
  }
}
.swal2-container.popup-container {
  --swal2-backdrop: color-mix(in srgb, var(--md-sys-color-scrim) 40%, transparent);
  z-index: 1100;
}

.swal2-popup.popup {
  --swal2-background: var(--md-sys-color-surface);
  --swal2-color: var(--md-sys-color-on-surface);
  --swal2-border: 1px solid var(--md-sys-color-outline-variant);
  --swal2-border-radius: 28px;
  --swal2-input-background: var(--md-sys-color-surface);
  --swal2-input-border: 1px solid var(--md-sys-color-outline);
  --swal2-input-border-radius: 4px;
  --swal2-input-box-shadow: none;
  --swal2-input-hover-box-shadow: none;
  --swal2-input-focus-border: 1px solid var(--md-sys-color-primary);
  --swal2-input-focus-box-shadow: 0 0 0 1px var(--md-sys-color-primary);
  --swal2-validation-message-background: var(--md-sys-color-error-container);
  --swal2-validation-message-color: var(--md-sys-color-on-error-container);
  --swal2-footer-border-color: var(--md-sys-color-outline-variant);
  --swal2-footer-color: var(--md-sys-color-on-surface-variant);
  --swal2-timer-progress-bar-background: var(--md-sys-color-primary);
  --swal2-close-button-color: var(--md-sys-color-on-surface-variant);
  --swal2-close-button-focus-box-shadow: inset 0 0 0 2px var(--md-sys-color-primary);
  --swal2-outline: 0 0 0 2px var(--md-sys-color-primary);
  font-family: inherit;
}
.swal2-popup.popup .swal2-title {
  font-size: 1.5rem;
  line-height: 1.3;
}
.swal2-popup.popup .swal2-html-container {
  font-size: 1rem;
  line-height: 1.5;
}
.swal2-popup.popup .swal2-actions {
  gap: 0.75rem;
  padding: 0 1.5rem;
}
.swal2-popup.popup .swal2-actions .btn {
  margin: 0;
}
.swal2-popup.popup .swal2-close:hover {
  color: var(--md-sys-color-primary);
}
.swal2-popup.popup .swal2-loader {
  border-color: var(--md-sys-color-primary) transparent;
}
.swal2-popup.popup input.swal2-input,
.swal2-popup.popup textarea.swal2-textarea,
.swal2-popup.popup select.swal2-select {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: auto !important;
  min-width: 0;
  max-width: calc(100% - 3rem);
  margin: 1rem 1.5rem 0;
  padding: 0.75rem;
  border: var(--swal2-input-border);
  border-radius: var(--swal2-input-border-radius);
  background: var(--swal2-input-background);
  color: var(--swal2-color);
  -webkit-box-shadow: none;
          box-shadow: none;
  font-size: 1rem;
}
.swal2-popup.popup input.swal2-input:focus,
.swal2-popup.popup textarea.swal2-textarea:focus,
.swal2-popup.popup select.swal2-select:focus {
  border: var(--swal2-input-focus-border);
  -webkit-box-shadow: var(--swal2-input-focus-box-shadow);
          box-shadow: var(--swal2-input-focus-box-shadow);
  outline: none;
}
.swal2-popup.popup input.swal2-input::-webkit-input-placeholder, .swal2-popup.popup textarea.swal2-textarea::-webkit-input-placeholder, .swal2-popup.popup select.swal2-select::-webkit-input-placeholder {
  color: var(--md-sys-color-on-surface-variant);
  opacity: 1;
}
.swal2-popup.popup input.swal2-input::-moz-placeholder, .swal2-popup.popup textarea.swal2-textarea::-moz-placeholder, .swal2-popup.popup select.swal2-select::-moz-placeholder {
  color: var(--md-sys-color-on-surface-variant);
  opacity: 1;
}
.swal2-popup.popup input.swal2-input:-ms-input-placeholder, .swal2-popup.popup textarea.swal2-textarea:-ms-input-placeholder, .swal2-popup.popup select.swal2-select:-ms-input-placeholder {
  color: var(--md-sys-color-on-surface-variant);
  opacity: 1;
}
.swal2-popup.popup input.swal2-input::-ms-input-placeholder, .swal2-popup.popup textarea.swal2-textarea::-ms-input-placeholder, .swal2-popup.popup select.swal2-select::-ms-input-placeholder {
  color: var(--md-sys-color-on-surface-variant);
  opacity: 1;
}
.swal2-popup.popup input.swal2-input::placeholder,
.swal2-popup.popup textarea.swal2-textarea::placeholder,
.swal2-popup.popup select.swal2-select::placeholder {
  color: var(--md-sys-color-on-surface-variant);
  opacity: 1;
}
.swal2-popup.popup input.swal2-input.swal2-inputerror,
.swal2-popup.popup textarea.swal2-textarea.swal2-inputerror,
.swal2-popup.popup select.swal2-select.swal2-inputerror {
  border-color: var(--md-sys-color-error) !important;
  -webkit-box-shadow: 0 0 0 1px var(--md-sys-color-error) !important;
          box-shadow: 0 0 0 1px var(--md-sys-color-error) !important;
}
.swal2-popup.popup input.swal2-input, .swal2-popup.popup select.swal2-select {
  height: 3rem;
}
.swal2-popup.popup textarea.swal2-textarea {
  min-height: 7rem;
}
.swal2-popup.popup .swal2-input-label {
  color: var(--md-sys-color-on-surface);
  font-size: 1rem;
}
.swal2-popup.popup .swal2-radio input,
.swal2-popup.popup .swal2-checkbox input {
  -webkit-appearance: auto;
     -moz-appearance: auto;
          appearance: auto;
  position: static;
  opacity: 1;
  pointer-events: auto;
  width: 1.125rem;
  height: 1.125rem;
  accent-color: var(--md-sys-color-primary);
  background: initial;
  border: initial;
}
.swal2-popup.popup .swal2-radio input::before, .swal2-popup.popup .swal2-radio input::after,
.swal2-popup.popup .swal2-checkbox input::before,
.swal2-popup.popup .swal2-checkbox input::after {
  display: none;
}
.swal2-popup.popup .swal2-radio input:focus-visible,
.swal2-popup.popup .swal2-checkbox input:focus-visible {
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: 2px;
}
.swal2-popup.popup .swal2-radio label, .swal2-popup.popup .swal2-checkbox {
  gap: 0.5rem;
  color: inherit;
}
.swal2-popup.popup .swal2-radio input + span, .swal2-popup.popup .swal2-checkbox input + span {
  padding-left: 0;
  font-size: 1rem;
}
.swal2-popup.popup .swal2-radio input + span::before, .swal2-popup.popup .swal2-radio input + span::after, .swal2-popup.popup .swal2-checkbox input + span::before, .swal2-popup.popup .swal2-checkbox input + span::after {
  display: none;
}

.swal2-popup.popup:has(> .swal2-html-container.popup-content-fill) {
  overflow: hidden;
}

.swal2-popup.popup .swal2-html-container.popup-content-fill {
  margin: 0;
  padding: 0;
}
.swal2-popup.popup .swal2-html-container.popup-content-fill > .tabs-fill {
  border: 0;
  border-radius: 0;
}

.swal2-container.popup-container.swal2-grow-fullscreen:has(> .popup > .popup-content-fill) {
  grid-template-rows: repeat(3, minmax(0, 1fr));
}
.swal2-container.popup-container.swal2-grow-fullscreen:has(> .popup > .popup-content-fill) > .swal2-popup.popup {
  display: -webkit-box !important;
  display: -webkit-flex !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100%;
  min-height: 0;
  padding-bottom: 0;
}
.swal2-container.popup-container.swal2-grow-fullscreen:has(> .popup > .popup-content-fill) > .swal2-popup.popup > * {
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
}
.swal2-container.popup-container.swal2-grow-fullscreen:has(> .popup > .popup-content-fill) > .swal2-popup.popup > .swal2-html-container.popup-content-fill {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 0;
      -ms-flex: 1 1 0px;
          flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
}
.swal2-container.popup-container.swal2-grow-fullscreen:has(> .popup > .popup-content-fill) > .swal2-popup.popup > .swal2-close {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
}
.swal2-container.popup-container.swal2-grow-fullscreen:has(> .popup > .popup-content-fill) > .swal2-popup.popup > .swal2-title {
  padding-inline: 3rem;
}
.swal2-container.popup-container.swal2-grow-fullscreen:has(> .popup > .popup-content-fill) > .swal2-popup.popup > .swal2-actions {
  margin-bottom: 1.25em;
}

@media (prefers-reduced-motion: reduce) {
  .popup-container .swal2-popup.popup,
  .popup-container .swal2-popup.popup * {
    -webkit-animation: none !important;
            animation: none !important;
    -webkit-transition: none !important;
    transition: none !important;
  }
}
.slider {
  position: relative;
  height: 400px;
  width: 100%;
}
.slider.fullscreen {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.slider.fullscreen ul.slides {
  padding-left: 0;
  list-style-type: none;
  height: 100%;
}
.slider.fullscreen ul.indicators {
  padding-left: 0;
  list-style-type: none;
  z-index: 2;
  bottom: 30px;
}
.slider.fullscreen ul.indicators .indicator-item {
  background-color: rgba(255, 255, 255, 0.45);
}
.slider.fullscreen ul.indicators .indicator-item.active {
  background-color: var(--md-ref-palette-primary100);
}
.slider .slides {
  background-color: var(--md-sys-color-surface);
  margin: 0;
  height: 400px;
  padding-left: 0;
  list-style-type: none;
}
.slider .slides li {
  padding-left: 0;
  list-style-type: none;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: inherit;
  overflow: hidden;
}
.slider .slides li img {
  height: 100%;
  width: 100%;
  background-size: cover;
  background-position: center;
}
.slider .slides li .caption {
  color: #fff;
  position: absolute;
  top: 15%;
  left: 15%;
  width: 70%;
  opacity: 0;
}
.slider .slides li .caption p {
  color: rgba(255, 255, 255, 0.75);
}
.slider .slides li.active {
  z-index: 2;
}
.slider .indicators {
  padding-left: 0;
  list-style-type: none;
  position: absolute;
  text-align: center;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
}
.slider .indicators .indicator-item {
  display: inline-block;
  position: relative;
  height: 16px;
  width: 16px;
  margin: 0 12px;
}
.slider .indicators .indicator-item-btn {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  background-color: var(--md-sys-color-shadow-light);
  -webkit-transition: background-color 0.3s;
  transition: background-color 0.3s;
  border-radius: 50%;
  border-width: 0;
}
.slider .indicators .indicator-item-btn.active {
  background-color: var(--md-sys-color-primary);
}

.carousel {
  --carousel-height: 400px;
  overflow: hidden;
  position: relative;
  width: 100%;
  height: var(--carousel-height);
  -webkit-perspective: 500px;
          perspective: 500px;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform-origin: 0% 50%;
          transform-origin: 0% 50%;
}
.carousel.carousel-slider {
  top: 0;
  left: 0;
}
.carousel.carousel-slider .carousel-fixed-item {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20px;
  z-index: 1;
}
.carousel.carousel-slider .carousel-fixed-item.with-indicators {
  bottom: 68px;
}
.carousel.carousel-slider .carousel-item {
  width: 100%;
  height: 100%;
  min-height: var(--carousel-height);
  position: absolute;
  top: 0;
  left: 0;
}
.carousel.carousel-slider .carousel-item h2 {
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
}
.carousel.carousel-slider .carousel-item p {
  font-size: 15px;
}
.carousel .carousel-item {
  visibility: hidden;
  width: calc(var(--carousel-height) * 0.5);
  height: calc(var(--carousel-height) * 0.5);
  position: absolute;
  top: 0;
  left: 0;
}
.carousel .carousel-item > img {
  width: 100%;
}
.carousel .indicators {
  padding-left: 0;
  list-style-type: none;
  position: absolute;
  text-align: center;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
}
.carousel .indicators .indicator-item {
  display: inline-block;
  position: relative;
  cursor: pointer;
  height: 8px;
  width: 8px;
  margin: 24px 4px;
  background-color: rgba(255, 255, 255, 0.45);
  -webkit-transition: background-color 0.3s;
  transition: background-color 0.3s;
  border-radius: 50%;
}
.carousel .indicators .indicator-item.active {
  background-color: var(--md-ref-palette-primary100);
}
.carousel.scrolling .carousel-item .materialboxed,
.carousel .carousel-item:not(.active) .materialboxed {
  pointer-events: none;
}

.datepicker-container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  max-width: 325px;
  padding: 0;
  background-color: var(--md-sys-color-inverse-on-surface);
}

.datepicker-controls {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 280px;
  margin: 0 auto;
}
.datepicker-controls .selects-container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.datepicker-controls .select-wrapper input {
  height: 49px;
  margin: 4px 0 0 0;
  border-bottom: none;
  border-radius: 4px;
  text-align: center;
}
.datepicker-controls .select-wrapper input:focus {
  color: var(--md-sys-color-primary);
  background-color: color-mix(in srgb, transparent, var(--md-sys-color-primary) 20%);
}
.datepicker-controls .select-wrapper input::-moz-selection {
  background-color: transparent;
}
.datepicker-controls .select-wrapper input::selection {
  background-color: transparent;
}
.datepicker-controls .select-wrapper .caret {
  display: none;
}
.datepicker-controls .select-dropdown {
  padding: 0;
  vertical-align: middle;
}
.datepicker-controls .select-year input,
.datepicker-controls .select-month input {
  background-color: transparent;
}
.datepicker-controls .select-year input {
  width: 50px;
}
.datepicker-controls .select-month input {
  width: 80px;
}
.datepicker-controls .month-prev,
.datepicker-controls .month-next {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  height: 49px;
  border-radius: var(--btn-border-radius);
  padding-left: var(--btn-padding);
  padding-right: var(--btn-padding);
  font-size: var(--btn-font-size);
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
  outline: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -webkit-transition: background-color 0.2s ease-out;
  transition: background-color 0.2s ease-out;
}
.datepicker-controls .month-prev:focus,
.datepicker-controls .month-next:focus {
  background-color: var(--md-sys-color-primary-container);
}
.datepicker-controls .month-prev:focus,
.datepicker-controls .month-next:focus {
  background-color: color-mix(in srgb, transparent, var(--md-sys-color-primary) 20%);
}
.datepicker-controls .month-prev > svg,
.datepicker-controls .month-next > svg {
  fill: var(--md-sys-color-on-surface-variant);
}

.month-prev, .month-next {
  height: 49px;
  margin-top: 4px;
  cursor: pointer;
  background-color: transparent;
  border: none;
}

/* Date Display */
.datepicker-date-display {
  -webkit-box-flex: 1;
  -webkit-flex: 1 auto;
      -ms-flex: 1 auto;
          flex: 1 auto;
  padding: 20px 22px;
  border-bottom: 1px solid var(--md-sys-color-surface-variant-light);
  font-weight: 500;
}
.datepicker-date-display .year-text {
  display: block;
  font-size: 1.5rem;
  line-height: 25px;
  color: var(--md-sys-color-on-primary);
}
.datepicker-date-display .date-text {
  display: block;
  font-size: 2.8rem;
  line-height: 47px;
  font-weight: 500;
}
.daterange .datepicker-date-display .date-text {
  font-size: 1.8rem;
}

/* Calendar */
.datepicker-calendar-container {
  -webkit-box-flex: 2.5;
  -webkit-flex: 2.5 auto;
      -ms-flex: 2.5 auto;
          flex: 2.5 auto;
}

.datepicker-table {
  width: 280px;
  font-size: 1rem;
  margin: 0 auto;
}
.datepicker-table thead {
  border-bottom: none;
}
.datepicker-table th {
  padding: 10px 5px;
  text-align: center;
}
.datepicker-table tr {
  border: none;
}
.datepicker-table abbr {
  text-decoration: none;
  color: var(--md-sys-color-on-surface-variant);
}
.datepicker-table .datepicker-day {
  padding: 0;
  color: var(--md-sys-color-on-background);
}
.datepicker-table .datepicker-day.is-today {
  color: var(--md-sys-color-primary);
}
.datepicker-table .datepicker-day {
  /*&.is-selected button {
    background-color: var(--md-sys-color-primary);
    color:  var(--md-sys-color-on-primary);
  }*/
}

.datepicker-day.is-daterange-start,
.datepicker-day.is-daterange-end,
.datepicker-day.is-daterange {
  position: relative;
}
.datepicker-day.is-daterange-start:before,
.datepicker-day.is-daterange-end:before,
.datepicker-day.is-daterange:before {
  position: absolute;
  top: 5px;
  width: 100%;
  height: 34px;
  content: "";
  background-color: var(--md-sys-color-primary-container);
  z-index: 0;
}

.datepicker-day.is-daterange-start:before,
.datepicker-day.is-daterange-end:before {
  width: 50%;
}

.datepicker-day.is-daterange-start:before {
  left: 50%;
}

.datepicker-day.is-daterange .datepicker-day-button:before {
  background-color: var(--md-sys-color-primary-container);
}

.datepicker-day-button {
  background-color: transparent;
  border: none;
  line-height: 34px;
  display: block;
  width: 34px;
  border-radius: 50%;
  margin: 5px;
  padding: 0 5px;
  cursor: pointer;
  color: inherit;
  position: relative;
  z-index: 1;
}
.datepicker-day-button:hover {
  background-color: color-mix(in srgb, transparent, var(--md-sys-color-primary) 6%);
}
.datepicker-day-button:focus {
  border-color: var(--md-sys-color-primary);
}
.is-selected .datepicker-day-button {
  background-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}
.is-selected .datepicker-day-button:focus {
  background-color: var(--md-sys-color-surface-variant);
  color: var(--md-sys-color-primary);
}
.datepicker-day-button.is-outside-current-month button, .datepicker-day-button.is-disabled button {
  color: var(--md-sys-color-on-surface);
  pointer-events: none;
}

/* Footer */
.datepicker-footer {
  width: 280px;
  margin: 0 auto;
  padding-bottom: 5px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.datepicker-cancel,
.datepicker-clear,
.datepicker-today,
.datepicker-done {
  color: var(--md-sys-color-primary);
  padding: 0 1rem;
}

.datepicker-clear {
  color: var(--md-sys-color-error);
}

/* Display modes */
.datepicker-modal {
  max-width: calc(325px + var(--modal-padding) * 2);
  max-height: none;
  background-color: var(--md-sys-color-inverse-on-surface);
}

.timepicker-container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  max-width: 325px;
  padding: 0;
  background-color: var(--md-sys-color-inverse-on-surface);
}

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

/* Clock Digital Display */
.timepicker-digital-display {
  width: auto;
  -webkit-box-flex: 1;
  -webkit-flex: 1 auto;
      -ms-flex: 1 auto;
          flex: 1 auto;
  padding: 2rem 0.71rem 0.67rem 0.71rem;
  font-weight: 300;
}

.timepicker-text-container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  font-size: 4rem;
  text-align: left;
  color: var(--font-on-primary-color-medium);
  font-weight: 400;
  /*position: relative;*/
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  padding: 1rem 1rem 1.3rem 1rem;
}
.timepicker-text-container input[type=text] {
  height: 4rem;
  color: var(--md-sys-color-secondary);
  border-bottom: 0px;
  font-size: 4rem;
  direction: ltr;
}

.timepicker-display-column {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

.timepicker-display-digital-clock {
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

.timepicker-input-hours-wrapper,
.timepicker-input-minutes-wrapper {
  width: 6.85rem;
  height: 5.75rem;
}

.timepicker-input-hours,
.timepicker-input-minutes,
.timepicker-span-am-pm div {
  cursor: pointer;
}

input[type=text].timepicker-input-hours,
input[type=text].timepicker-input-minutes {
  height: 100%;
  padding: 1.33rem 0.8rem;
  border: 0;
  text-align: center;
  color: var(--md-sys-color-on-background);
  background-color: var(--md-sys-color-surface-variant);
}
input[type=text].timepicker-input-hours:focus,
input[type=text].timepicker-input-minutes:focus {
  background-color: var(--md-sys-color-primary-container);
}

.timepicker-input-divider-wrapper {
  width: 1.6rem;
  text-align: center;
}

/*input[type=text].text-primary {
  color: var(--md-sys-color-on-background);
}*/
.timepicker-display-am-pm {
  font-size: 1.3rem;
  /*position: absolute;
  top: 1rem;
  right: 1rem;*/
  font-weight: 400;
}

.timepicker-span-am-pm {
  height: 5.75rem;
  max-width: 3.5rem;
}

.timepicker-container .am-btn,
.timepicker-container .pm-btn {
  width: 3.6rem;
  height: 50%;
  padding-left: calc(var(--btn-padding) / 1.8);
  padding-right: calc(var(--btn-padding) / 1.8);
  line-height: 2rem;
  vertical-align: middle;
  text-align: center;
  border: 1px solid var(--md-sys-color-outline);
}

.timepicker-container .am-btn {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.timepicker-container .pm-btn {
  border-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* Analog Clock Display */
.timepicker-analog-display {
  -webkit-box-flex: 2.5;
  -webkit-flex: 2.5 auto;
      -ms-flex: 2.5 auto;
          flex: 2.5 auto;
  padding: 0.67rem;
}

.timepicker-plate {
  background-color: var(--md-sys-color-surface-variant);
  border-radius: 50%;
  width: 260px;
  height: 260px;
  overflow: visible;
  position: relative;
  margin: 0 1.6rem 1.6rem 1.6rem;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.timepicker-canvas,
.timepicker-dial {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.timepicker-minutes {
  visibility: hidden;
}

.timepicker-tick {
  border-radius: 50%;
  color: var(--md-sys-color-on-background);
  line-height: 40px;
  text-align: center;
  width: 40px;
  height: 40px;
  position: absolute;
  cursor: pointer;
  font-size: 15px;
}

.timepicker-tick.active,
.timepicker-tick:hover {
  background-color: color-mix(in srgb, transparent, var(--md-sys-color-primary) 6%);
}

.timepicker-dial {
  -webkit-transition: opacity 350ms, -webkit-transform 350ms;
  transition: opacity 350ms, -webkit-transform 350ms;
  transition: transform 350ms, opacity 350ms;
  transition: transform 350ms, opacity 350ms, -webkit-transform 350ms;
}

.timepicker-dial-out {
  opacity: 0;
}
.timepicker-dial-out.timepicker-hours {
  -webkit-transform: scale(1.1, 1.1);
          transform: scale(1.1, 1.1);
}
.timepicker-dial-out.timepicker-minutes {
  -webkit-transform: scale(0.8, 0.8);
          transform: scale(0.8, 0.8);
}

.timepicker-canvas {
  -webkit-transition: opacity 175ms;
  transition: opacity 175ms;
}
.timepicker-canvas line {
  stroke: var(--md-sys-color-primary);
  stroke-width: 4;
  stroke-linecap: round;
}

.timepicker-canvas-out {
  opacity: 0.25;
}

.timepicker-canvas-bearing {
  stroke: none;
  fill: var(--md-sys-color-primary);
}

.timepicker-canvas-bg {
  stroke: none;
  fill: var(--md-sys-color-primary);
}

/* Footer */
.timepicker-footer {
  margin: 0 auto;
  padding: 5px 1rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.timepicker-clear {
  color: var(--md-sys-color-error);
}

.timepicker-close {
  color: var(--md-sys-color-primary);
}

.timepicker-clear,
.timepicker-close {
  padding: 0 20px;
}

/* Display modes */
.timepicker-modal {
  max-width: 326px;
  max-height: none;
  background-color: var(--md-sys-color-inverse-on-surface);
  overflow-x: hidden;
}
.timepicker-modal .timepicker-container {
  margin-left: calc(-1 * var(--modal-padding));
  margin-right: calc(-1 * var(--modal-padding));
}
.timepicker-modal .modal-header + .modal-content .timepicker-digital-display {
  padding-top: 0;
}
.timepicker-modal .modal-header + .modal-content .timepicker-text-container {
  padding-top: 4px;
}
.timepicker-modal .timepicker-analog-display {
  padding-bottom: 0;
}
.timepicker-modal .timepicker-plate {
  margin-bottom: 0;
}

/* Media Queries */
@media only screen and (min-width : 993px) {
  .timepicker-container {
    width: auto;
    max-width: 620px;
  }
  .timepicker-container {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
  }
  .timepicker-digital-display {
    padding: 0.67rem;
  }
  .timepicker-text-container {
    /*top: 31%;*/
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    margin-top: 4.8rem;
    text-align: center;
  }
  .timepicker-display-column {
    padding: 0 3%;
  }
  .timepicker-display-am-pm {
    margin-top: 1.1rem;
  }
  .timepicker-span-am-pm {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    max-width: unset;
    /*width: 100%;
    padding: 0 4%;
    flex-wrap: wrap;
    flex-direction: row;
    display: flex;*/
  }
  .timepicker-container .am-btn,
  .timepicker-container .pm-btn {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    /*width: auto;*/
    padding-left: calc(var(--btn-padding) / 0.565);
    padding-right: calc(var(--btn-padding) / 0.565);
    border-radius: var(--btn-border-radius);
    border: 1px solid var(--md-sys-color-outline);
  }
  .timepicker-container .am-btn {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  .timepicker-container .pm-btn {
    border-left: 0;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
  }
  .timepicker-plate {
    margin-top: 1.6rem;
  }
  /* Display modes */
  .timepicker-modal {
    width: 65%;
    max-width: 605px;
  }
  .timepicker-modal .modal-header + .modal-content .timepicker-digital-display,
  .timepicker-modal .modal-header + .modal-content .timepicker-analog-display {
    padding-top: 0;
  }
  .timepicker-modal .modal-header + .modal-content .timepicker-text-container {
    margin-top: 2.4rem;
  }
  .timepicker-modal .modal-header + .modal-content .timepicker-plate {
    margin-top: 4px;
    margin-bottom: 0;
  }
  .timepicker-modal .timepicker-digital-display,
  .timepicker-modal .timepicker-analog-display {
    padding-bottom: 0;
  }
  .timepicker-modal .timepicker-plate {
    margin-bottom: 0;
  }
}
.breadcrumb-wrapper {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  min-height: 48px;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  white-space: nowrap;
  padding-block: 4px;
}
.breadcrumb-wrapper > * {
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
}
.breadcrumb-wrapper .breadcrumb,
.breadcrumb-wrapper .breadcrumb > * {
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
}

.breadcrumb {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  vertical-align: middle;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 6px;
  min-height: 40px;
  line-height: 1.5;
  white-space: nowrap;
  color: var(--md-sys-color-on-surface-variant);
}
.breadcrumb:last-child, .breadcrumb[aria-current=page] {
  color: var(--md-sys-color-on-surface);
  font-weight: 500;
}
.breadcrumb:-webkit-any-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.breadcrumb:-moz-any-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.breadcrumb:any-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.breadcrumb:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -2px;
  border-radius: 4px;
}
.breadcrumb i {
  font-size: 24px;
}
.breadcrumb i.material-icons, .breadcrumb i.material-symbols-outlined,
.breadcrumb i.material-symbols-rounded, .breadcrumb i.material-symbols-sharp, .breadcrumb:before {
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
}
.breadcrumb:before {
  content: "\e5cc";
  opacity: 0.45;
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
  line-height: 1;
  -webkit-margin-start: 2px;
     -moz-margin-start: 2px;
          margin-inline-start: 2px;
  font-family: "Material Symbols Outlined", "Material Symbols Rounded", "Material Symbols Sharp", "Material Icons";
}
.breadcrumb:first-child:before {
  display: none;
}

.navbar .breadcrumb {
  color: color-mix(in srgb, currentColor 78%, transparent);
}
.navbar .breadcrumb:-webkit-any-link:hover {
  color: inherit;
}
.navbar .breadcrumb:-moz-any-link:hover {
  color: inherit;
}
.navbar .breadcrumb:last-child, .navbar .breadcrumb[aria-current=page], .navbar .breadcrumb:any-link:hover {
  color: inherit;
}

.breadcrumb > i,
.navbar .breadcrumb > i,
.navbar .nav-wrapper .breadcrumb > i {
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
  height: auto;
  line-height: 1;
  margin: 0;
}

[dir=rtl] .breadcrumb:before {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

.pagination li {
  display: inline-block;
  vertical-align: top;
}
.pagination li a {
  height: 2rem;
  border-radius: var(--btn-border-radius);
  padding-left: 0.66rem;
  padding-right: 0.66rem;
  font-size: 1.2rem;
  font-weight: 500;
  text-decoration: none;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
  outline: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -webkit-transition: background-color 0.2s ease-out;
  transition: background-color 0.2s ease-out;
}
.pagination li a:focus {
  background-color: var(--md-sys-color-primary-container);
}
.pagination li.active a {
  color: var(--md-sys-color-on-primary);
  background-color: var(--md-sys-color-primary);
}
.pagination li.active a:hover, .pagination li.active a:focus {
  color: var(--md-sys-color-on-primary);
}
.pagination li.active a:hover {
  background-color: color-mix(in srgb, var(--md-sys-color-primary), var(--md-sys-color-on-primary) 16%);
}
.pagination li.active a:focus {
  background-color: color-mix(in srgb, var(--md-sys-color-primary), var(--md-sys-color-on-primary) 20%);
}
.pagination li.active a:focus-visible {
  outline: 3px solid var(--md-sys-color-secondary);
  outline-offset: 2px;
}
.pagination li.disabled a {
  color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 38%);
  background-color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 12%);
  pointer-events: none;
  -webkit-box-shadow: none;
          box-shadow: none;
  cursor: default;
}
.pagination li i {
  font-size: 2rem;
}
.pagination li.pages ul li {
  display: inline-block;
  float: none;
}

@media only screen and (max-width : 992.99px) {
  .pagination {
    width: 100%;
  }
  .pagination li.prev,
  .pagination li.next {
    width: 10%;
  }
  .pagination li.pages {
    width: 80%;
    overflow: hidden;
    white-space: nowrap;
  }
}
[type=radio]:not(:checked),
[type=radio]:checked {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

[type=radio]:not(:checked) + span,
[type=radio]:checked + span {
  position: relative;
  padding-left: 35px;
  cursor: pointer;
  display: inline-block;
  height: 25px;
  line-height: 25px;
  font-size: 1rem;
  -webkit-transition: 0.28s ease;
  transition: 0.28s ease;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

[type=radio] + span:before,
[type=radio] + span:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  margin: 4px;
  width: 16px;
  height: 16px;
  z-index: 0;
  -webkit-transition: 0.28s ease;
  transition: 0.28s ease;
}

/* Unchecked styles */
[type=radio]:not(:checked) + span:before,
[type=radio]:not(:checked) + span:after,
[type=radio]:checked + span:before,
[type=radio]:checked + span:after,
[type=radio].with-gap:checked + span:before,
[type=radio].with-gap:checked + span:after {
  border-radius: 50%;
}

[type=radio]:not(:checked) + span:before,
[type=radio]:not(:checked) + span:after {
  border: 2px solid var(--md-sys-color-on-surface-variant);
}

[type=radio]:not(:checked) + span:after {
  -webkit-transform: scale(0);
          transform: scale(0);
}

/* Checked styles */
[type=radio]:checked + span:before {
  border: 2px solid transparent;
}

[type=radio]:checked + span:after,
[type=radio].with-gap:checked + span:before,
[type=radio].with-gap:checked + span:after {
  border: 2px solid var(--md-sys-color-primary);
}

[type=radio]:checked + span:after,
[type=radio].with-gap:checked + span:after {
  background-color: var(--md-sys-color-primary);
}

[type=radio]:checked + span:after {
  -webkit-transform: scale(1.02);
          transform: scale(1.02);
}

/* Radio With gap */
[type=radio].with-gap:checked + span:after {
  -webkit-transform: scale(0.5);
          transform: scale(0.5);
}

/* Focused styles */
[type=radio].tabbed:focus + span:before {
  -webkit-box-shadow: 0 0 0 10px color-mix(in srgb, transparent, var(--md-sys-color-primary) 18%);
          box-shadow: 0 0 0 10px color-mix(in srgb, transparent, var(--md-sys-color-primary) 18%);
}

/* Disabled Radio With gap */
[type=radio].with-gap:disabled:checked + span:before {
  border: 2px solid color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 38%);
}

[type=radio].with-gap:disabled:checked + span:after {
  border: none;
  background-color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 38%);
}

/* Disabled style */
[type=radio]:disabled:not(:checked) + span:before,
[type=radio]:disabled:checked + span:before {
  background-color: transparent;
  border-color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 38%);
}

[type=radio]:disabled + span {
  color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 38%);
}

[type=radio]:disabled:not(:checked) + span:before {
  border-color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 38%);
}

[type=radio]:disabled:checked + span:after {
  background-color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 38%);
  border-color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 38%);
}

.radio-group-horizontal {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 16px 24px;
  margin: 16px 0;
  padding: 16px;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: 16px;
}
.radio-group-horizontal > label {
  position: relative;
  padding-block: 8px;
}
.radio-group-horizontal > label > input:focus-visible + span {
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: 4px;
  border-radius: 4px;
}

fieldset.radio-group {
  min-width: 0;
  margin: 0;
  padding: 8px 16px 12px;
  border: 1px solid var(--md-sys-color-outline);
  border-radius: 4px;
}
fieldset.radio-group > legend {
  padding: 0 4px;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 12px;
  line-height: 16px;
}
fieldset.radio-group > p:not(.supporting-text) {
  margin: 0;
}
fieldset.radio-group label {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  min-height: 44px;
  color: var(--md-sys-color-on-surface);
  cursor: pointer;
}
fieldset.radio-group input[type=radio] + span {
  height: auto;
  min-height: 24px;
  padding-left: 28px;
  line-height: 24px;
}
fieldset.radio-group input[type=radio] + span::before, fieldset.radio-group input[type=radio] + span::after {
  margin: 4px 0;
}
fieldset.radio-group input:focus-visible + span {
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: 4px;
  border-radius: 4px;
}
fieldset.radio-group.error {
  background: transparent;
  border-color: var(--md-sys-color-error);
}
fieldset.radio-group.error > legend {
  color: var(--md-sys-color-error);
}

/* Material Design 3 checkboxes, adapted to native Materialize markup. */
:root {
  --checkbox-size: 20px;
  --checkbox-shape: 2px;
  --checkbox-state-layer-size: 44px;
}

input[type=checkbox] {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  position: relative;
  z-index: 0;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 var(--checkbox-size);
      -ms-flex: 0 0 var(--checkbox-size);
          flex: 0 0 var(--checkbox-size);
  width: var(--checkbox-size);
  height: var(--checkbox-size);
  margin: 0;
  padding: 0;
  vertical-align: middle;
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  color: var(--checkbox-selected-icon-color, var(--md-sys-color-on-primary));
  background: transparent;
  border: 2px solid var(--checkbox-outline-color, var(--md-sys-color-on-surface-variant));
  border-radius: var(--checkbox-shape);
  outline: none;
  cursor: pointer;
  -webkit-transition: background-color 150ms linear, border-color 150ms linear;
  transition: background-color 150ms linear, border-color 150ms linear;
  -webkit-tap-highlight-color: transparent;
}
input[type=checkbox]::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: var(--checkbox-state-layer-size);
  height: var(--checkbox-state-layer-size);
  background: transparent;
  border-radius: 50%;
  -webkit-transform: translate(-50%, -50%) scale(0.8);
          transform: translate(-50%, -50%) scale(0.8);
  -webkit-transition: background-color 150ms linear, -webkit-transform 150ms ease;
  transition: background-color 150ms linear, -webkit-transform 150ms ease;
  transition: background-color 150ms linear, transform 150ms ease;
  transition: background-color 150ms linear, transform 150ms ease, -webkit-transform 150ms ease;
  pointer-events: none;
}
input[type=checkbox]::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 6px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 5px;
  height: 10px;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  opacity: 0;
  -webkit-transform: rotate(45deg) scale(0.6);
          transform: rotate(45deg) scale(0.6);
  -webkit-transform-origin: center;
          transform-origin: center;
  -webkit-transition: opacity 50ms linear, -webkit-transform 350ms cubic-bezier(0.2, 0, 0, 1);
  transition: opacity 50ms linear, -webkit-transform 350ms cubic-bezier(0.2, 0, 0, 1);
  transition: opacity 50ms linear, transform 350ms cubic-bezier(0.2, 0, 0, 1);
  transition: opacity 50ms linear, transform 350ms cubic-bezier(0.2, 0, 0, 1), -webkit-transform 350ms cubic-bezier(0.2, 0, 0, 1);
  pointer-events: none;
}
input[type=checkbox]:checked, input[type=checkbox]:indeterminate {
  background: var(--checkbox-selected-container-color, var(--md-sys-color-primary));
  border-color: var(--checkbox-selected-container-color, var(--md-sys-color-primary));
}
input[type=checkbox]:checked::after {
  opacity: 1;
  -webkit-transform: rotate(45deg) scale(1);
          transform: rotate(45deg) scale(1);
}
input[type=checkbox]:indeterminate::after {
  top: 7px;
  left: 3px;
  width: 10px;
  height: 2px;
  background: currentColor;
  border: 0;
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
}
input[type=checkbox]:not(:disabled):hover::before {
  background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
  -webkit-transform: translate(-50%, -50%) scale(1);
          transform: translate(-50%, -50%) scale(1);
}
input[type=checkbox]:not(:disabled):is(:checked, :indeterminate):hover::before {
  background: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
}
input[type=checkbox]:not(:disabled):active::before {
  background: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
  -webkit-transform: translate(-50%, -50%) scale(1);
          transform: translate(-50%, -50%) scale(1);
}
input[type=checkbox]:not(:disabled):is(:checked, :indeterminate):active::before {
  background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
}
input[type=checkbox]:focus-visible::before, input[type=checkbox].tabbed:focus::before {
  background: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
  -webkit-transform: translate(-50%, -50%) scale(1);
          transform: translate(-50%, -50%) scale(1);
}
input[type=checkbox]:is(:checked, :indeterminate):focus-visible::before, input[type=checkbox]:is(:checked, :indeterminate).tabbed:focus::before {
  background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
}
input[type=checkbox]:disabled {
  cursor: default;
  border-color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
}
input[type=checkbox]:disabled:is(:checked, :indeterminate) {
  color: var(--md-sys-color-surface);
  background: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
  border-color: transparent;
}

input[type=checkbox].filled-in {
  border-radius: var(--checkbox-shape);
}

label:has(> input[type=checkbox]):has(> span:not(.lever)) {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 12px;
  min-height: 48px;
  color: var(--md-sys-color-on-surface);
  font-size: 16px;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
label:has(> input[type=checkbox]):has(> span:not(.lever)) > span:not(.lever) {
  padding: 0;
  line-height: 24px;
}
label:has(> input[type=checkbox]):has(> span:not(.lever)) > .checkbox-icon {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 20px;
  line-height: 24px;
}
label:has(> input[type=checkbox]):has(> span:not(.lever)) > input[type=checkbox]:disabled ~ span:not(.lever),
label:has(> input[type=checkbox]):has(> span:not(.lever)) > input[type=checkbox]:disabled ~ .checkbox-icon {
  color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
}
label:has(> input[type=checkbox]):has(> span:not(.lever)):has(> input[type=checkbox]:disabled) {
  cursor: default;
}

p:has(> label:has(> input[type=checkbox]):has(> span:not(.lever))) {
  margin-block: 0;
}

.switch {
  --track-height: 32px;
  --track-width: 52px;
  --border-width: 2px;
  --size-off: 16px;
  --size-on: 24px;
  --icon-size: 16px;
  --gap-on: calc(((var(--track-height) - var(--size-on)) / 2) - var(--border-width));
  --gap-off: calc(((var(--track-height) - var(--size-off)) / 2) - var(--border-width));
}

.switch,
.switch * {
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.switch label {
  cursor: pointer;
}

.switch label input[type=checkbox] {
  opacity: 0;
  width: 0;
  height: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0 !important;
}
.switch label input[type=checkbox]:checked + .lever {
  background-color: var(--md-sys-color-primary);
  border-color: var(--md-sys-color-primary);
}
.switch label input[type=checkbox]:checked + .lever:before, .switch label input[type=checkbox]:checked + .lever:after {
  top: var(--gap-on);
  inset-inline-start: calc(var(--track-width) - var(--size-on) - var(--gap-on) - 2 * var(--border-width));
  width: var(--size-on);
  height: var(--size-on);
}
.switch label input[type=checkbox]:checked + .lever:after {
  background-color: var(--md-sys-color-surface);
}

.switch label .lever {
  content: "";
  display: inline-block;
  position: relative;
  width: var(--track-width);
  height: var(--track-height);
  border-style: solid;
  border-width: 2px;
  border-color: var(--md-sys-color-outline);
  background-color: var(--md-sys-color-surface-variant);
  border-radius: 15px;
  margin-right: 10px;
  -webkit-transition: background 0.3s ease;
  transition: background 0.3s ease;
  vertical-align: middle;
  -ms-touch-action: pan-y;
      touch-action: pan-y;
  margin: 0 16px;
}
.switch label .lever:before, .switch label .lever:after {
  content: "";
  position: absolute;
  display: inline-block;
  width: var(--size-off);
  height: var(--size-off);
  border-radius: 50%;
  inset-inline-start: var(--gap-off);
  top: var(--gap-off);
  -webkit-transition: inset-inline-start 0.3s ease, top 0.3s ease, width 0.3s ease, height 0.3s ease, background 0.3s ease, -webkit-box-shadow 0.1s ease, -webkit-transform 0.1s ease;
  transition: inset-inline-start 0.3s ease, top 0.3s ease, width 0.3s ease, height 0.3s ease, background 0.3s ease, -webkit-box-shadow 0.1s ease, -webkit-transform 0.1s ease;
  transition: inset-inline-start 0.3s ease, top 0.3s ease, width 0.3s ease, height 0.3s ease, background 0.3s ease, box-shadow 0.1s ease, transform 0.1s ease;
  transition: inset-inline-start 0.3s ease, top 0.3s ease, width 0.3s ease, height 0.3s ease, background 0.3s ease, box-shadow 0.1s ease, transform 0.1s ease, -webkit-box-shadow 0.1s ease, -webkit-transform 0.1s ease;
}
.switch label .lever:after {
  background-color: var(--md-sys-color-outline);
  height: var(--size-off);
  width: var(--size-off);
}

input[type=checkbox]:not(:disabled) ~ .lever:active:before,
input[type=checkbox]:not(:disabled).tabbed:focus ~ .lever::before,
input[type=checkbox]:not(:disabled) ~ .lever:hover::before {
  -webkit-transform: scale(2.4);
          transform: scale(2.4);
}

input[type=checkbox]:checked:not(:disabled) ~ .lever:hover::before {
  background-color: color-mix(in srgb, transparent, var(--md-sys-color-primary) 6%);
}

input[type=checkbox]:checked:not(:disabled) ~ .lever:active::before,
input[type=checkbox]:checked:not(:disabled).tabbed:focus ~ .lever::before {
  background-color: color-mix(in srgb, transparent, var(--md-sys-color-primary) 18%);
}

input[type=checkbox]:not(:disabled) ~ .lever:hover::before {
  background-color: rgba(0, 0, 0, 0.04);
}

input[type=checkbox]:not(:disabled) ~ .lever:active:before,
input[type=checkbox]:not(:disabled).tabbed:focus ~ .lever::before {
  background-color: rgba(0, 0, 0, 0.12);
}

.switch input[type=checkbox][disabled] + .lever {
  cursor: default;
  opacity: 0.5;
}

/* Optional icon-thumb variation for Materialize switches. */
.switch.switch-with-icon {
  --size-off: 24px;
}

.switch.switch-with-icon label .lever::after {
  content: var(--switch-icon-off, "\e5cd"); /* close */
  display: grid;
  place-items: center;
  font-family: "Material Icons";
  -webkit-font-feature-settings: "liga";
     -moz-font-feature-settings: "liga";
          font-feature-settings: "liga";
  text-transform: none;
  letter-spacing: normal;
  white-space: nowrap;
  font-size: var(--icon-size);
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  color: var(--md-sys-color-surface);
}

.switch.switch-with-icon label input[type=checkbox]:checked + .lever::after {
  content: var(--switch-icon-on, "\e5ca"); /* check */
  color: var(--md-sys-color-primary);
}

.switch label input[type=checkbox]:focus-visible + .lever {
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: 4px;
}

.switch label input[type=checkbox] + .lever.is-dragging {
  --switch-drag-size: calc(var(--size-off) + (var(--size-on) - var(--size-off)) * var(--switch-drag-progress));
  background-color: color-mix(in srgb, var(--md-sys-color-primary) var(--switch-drag-percent), var(--md-sys-color-surface-variant));
  border-color: color-mix(in srgb, var(--md-sys-color-primary) var(--switch-drag-percent), var(--md-sys-color-outline));
  -webkit-transition: none;
  transition: none;
}
.switch label input[type=checkbox] + .lever.is-dragging::before, .switch label input[type=checkbox] + .lever.is-dragging::after {
  width: var(--switch-drag-size);
  height: var(--switch-drag-size);
  top: calc((var(--track-height) - var(--switch-drag-size)) / 2 - var(--border-width));
  inset-inline-start: calc(var(--track-height) / 2 - var(--border-width) + (var(--track-width) - var(--track-height)) * var(--switch-drag-progress) - var(--switch-drag-size) / 2);
  -webkit-transition: none;
  transition: none;
}
.switch label input[type=checkbox] + .lever.is-dragging::after {
  background-color: color-mix(in srgb, var(--md-sys-color-surface) var(--switch-drag-percent), var(--md-sys-color-outline));
}

.switch label input[type=checkbox]:not(:disabled) + .lever.is-dragging::before {
  width: var(--size-on);
  height: var(--size-on);
  top: var(--gap-on);
  inset-inline-start: calc(var(--track-height) / 2 - var(--border-width) + (var(--track-width) - var(--track-height)) * var(--switch-drag-progress) - var(--size-on) / 2);
  -webkit-transform: scale(2.4);
          transform: scale(2.4);
  background-color: color-mix(in srgb, transparent, var(--md-sys-color-primary) 18%);
  pointer-events: none;
}

.switch.switch-with-icon label input[type=checkbox] + .lever.is-dragging::after {
  content: var(--switch-icon-off, "\e5cd");
  color: color-mix(in srgb, var(--md-sys-color-primary) var(--switch-drag-percent), var(--md-sys-color-surface));
}

.switch.switch-with-icon label input[type=checkbox] + .lever.is-dragging.is-drag-on::after {
  content: var(--switch-icon-on, "\e5ca");
}

@media (prefers-reduced-motion: reduce) {
  .switch label .lever,
  .switch label .lever::before,
  .switch label .lever::after {
    -webkit-transition: none;
    transition: none;
  }
}
.range-field {
  position: relative;
  min-width: 0;
}
.range-field:has(> .supporting-text) > input[type=range], .range-field:has(+ .supporting-text) > input[type=range] {
  margin-bottom: 0;
}
.range-field > .supporting-text,
.range-field + .supporting-text {
  margin-top: 0;
}

.range-field-header {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
  -webkit-align-items: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 16px;
}
.range-field-header > label {
  min-width: 0;
}
.range-field-header > output {
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
  color: var(--md-sys-color-on-surface);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

input[type=range] {
  --range-active-color: var(--md-sys-color-primary);
  --range-inactive-color: var(--md-sys-color-surface-variant);
  --range-handle-size: 20px;
  --range-track-height: 4px;
  --range-direction: to right;
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  position: relative;
  display: block;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 48px;
  margin: 8px 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  -webkit-box-shadow: none;
          box-shadow: none;
  cursor: pointer;
  -ms-touch-action: pan-y;
      touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}
input[type=range]:dir(rtl) {
  --range-direction: to left;
}
input[type=range]:focus {
  outline: none;
  -webkit-box-shadow: none;
          box-shadow: none;
}
input[type=range]:disabled {
  --range-active-color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
  --range-inactive-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
  cursor: default;
}

input[type=range]::-webkit-slider-runnable-track {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  height: var(--range-track-height);
  border: none;
  border-radius: 999px;
  background: linear-gradient(var(--range-direction), var(--range-active-color) 0 var(--range-progress, 50%), var(--range-inactive-color) var(--range-progress, 50%) 100%);
}

input[type=range]::-moz-range-track {
  box-sizing: border-box;
  height: var(--range-track-height);
  border: none;
  border-radius: 999px;
  background: linear-gradient(var(--range-direction), var(--range-active-color) 0 var(--range-progress, 50%), var(--range-inactive-color) var(--range-progress, 50%) 100%);
}

input[type=range]::-moz-range-progress {
  background: transparent;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: var(--range-handle-size);
  height: var(--range-handle-size);
  border: none;
  border-radius: 50%;
  background: var(--range-active-color);
  -webkit-box-shadow: 0 1px 2px color-mix(in srgb, var(--md-sys-color-shadow) 24%, transparent);
          box-shadow: 0 1px 2px color-mix(in srgb, var(--md-sys-color-shadow) 24%, transparent);
  -webkit-transition: -webkit-box-shadow 120ms ease, -webkit-transform 120ms ease;
  transition: -webkit-box-shadow 120ms ease, -webkit-transform 120ms ease;
  transition: box-shadow 120ms ease, transform 120ms ease;
  transition: box-shadow 120ms ease, transform 120ms ease, -webkit-box-shadow 120ms ease, -webkit-transform 120ms ease;
  -webkit-appearance: none;
  margin-top: calc((var(--range-track-height) - var(--range-handle-size)) / 2);
}

input[type=range]::-moz-range-thumb {
  box-sizing: border-box;
  width: var(--range-handle-size);
  height: var(--range-handle-size);
  border: none;
  border-radius: 50%;
  background: var(--range-active-color);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--md-sys-color-shadow) 24%, transparent);
  -moz-transition: box-shadow 120ms ease, transform 120ms ease;
  transition: box-shadow 120ms ease, transform 120ms ease;
}

input[type=range]:not(:disabled):hover::-webkit-slider-thumb {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
  -webkit-box-shadow: 0 0 0 16px color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
          box-shadow: 0 0 0 16px color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
}

input[type=range]:not(:disabled):hover::-moz-range-thumb {
  transform: scale(1.1);
  box-shadow: 0 0 0 16px color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
}

input[type=range]:not(:disabled):is(:focus-visible, :active, .active)::-webkit-slider-thumb {
  -webkit-box-shadow: 0 0 0 16px color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent);
          box-shadow: 0 0 0 16px color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent);
}

input[type=range]:not(:disabled):is(:focus-visible, :active, .active)::-moz-range-thumb {
  box-shadow: 0 0 0 16px color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent);
}

input[type=range] + .thumb {
  position: absolute;
  z-index: 3;
  display: block;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  min-width: 32px;
  max-width: min(16rem, 80vw);
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
  text-align: center;
  overflow-wrap: anywhere;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translate(-50%, -100%) scale(0.85);
          transform: translate(-50%, -100%) scale(0.85);
  -webkit-transform-origin: bottom center;
          transform-origin: bottom center;
  -webkit-transition: opacity 120ms ease, visibility 120ms, -webkit-transform 120ms ease;
  transition: opacity 120ms ease, visibility 120ms, -webkit-transform 120ms ease;
  transition: opacity 120ms ease, transform 120ms ease, visibility 120ms;
  transition: opacity 120ms ease, transform 120ms ease, visibility 120ms, -webkit-transform 120ms ease;
}
input[type=range] + .thumb::after {
  content: "";
  position: absolute;
  top: 100%;
  left: var(--range-label-arrow, 50%);
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  border: 5px solid transparent;
  border-bottom: 0;
  border-top-color: var(--md-sys-color-primary);
}
input[type=range] + .thumb .value {
  display: block;
}
input[type=range] + .thumb.active {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translate(-50%, -100%) scale(1);
          transform: translate(-50%, -100%) scale(1);
}

.range-ticks {
  position: absolute;
  height: 4px;
  pointer-events: none;
}
.range-ticks > span {
  position: absolute;
  top: 1px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  background: var(--md-sys-color-on-surface-variant);
}
.range-ticks > span.is-active {
  background: var(--md-sys-color-on-primary);
}
.range-ticks.is-disabled {
  opacity: 0.38;
}

@media (prefers-reduced-motion: reduce) {
  input[type=range] + .thumb {
    -webkit-transition: none;
    transition: none;
  }
  input[type=range]::-webkit-slider-thumb {
    -webkit-transition: none;
    transition: none;
  }
  input[type=range]::-moz-range-thumb {
    -moz-transition: none;
    transition: none;
  }
}
@media (forced-colors: active) {
  input[type=range] {
    --range-active-color: Highlight;
    --range-inactive-color: GrayText;
  }
  input[type=range]:focus-visible {
    outline: 2px solid Highlight;
    outline-offset: 2px;
  }
  input[type=range]::-webkit-slider-runnable-track {
    border: 1px solid CanvasText;
  }
  input[type=range]::-moz-range-track {
    border: 1px solid CanvasText;
  }
  input[type=range]::-webkit-slider-thumb {
    border: 1px solid CanvasText;
  }
  input[type=range]::-moz-range-thumb {
    border: 1px solid CanvasText;
  }
  input[type=range] + .thumb {
    border: 1px solid CanvasText;
  }
}
.range-interval {
  position: relative;
  display: grid;
  min-width: 0;
  isolation: isolate;
  --range-direction: to right;
  --range-outer-color: var(--range-muted-color, var(--md-sys-color-surface-variant));
  --range-inner-color: var(--md-sys-color-primary);
}
.range-interval:dir(rtl) {
  --range-direction: to left;
}
.range-interval::before {
  content: "";
  grid-area: 1/1;
  align-self: center;
  height: var(--range-track-height, 4px);
  border-radius: 999px;
  background: linear-gradient(var(--range-direction), var(--range-outer-color) 0 var(--range-start), var(--range-inner-color) var(--range-start) var(--range-end), var(--range-outer-color) var(--range-end) 100%);
}
.range-interval:has(input:disabled)::before {
  opacity: 0.38;
}
.range-interval.range-compact {
  --range-track-height: 2px;
}
.range-interval.range-expressive {
  --range-track-height: 12px;
}
.range-interval > input[type=range] {
  grid-area: 1/1;
  pointer-events: none;
  z-index: var(--range-start-layer, 1);
}
.range-interval > input[type=range] ~ input[type=range] {
  z-index: 1;
}
.range-interval > input[type=range]:focus-visible {
  z-index: 2;
}
.range-interval > input[type=range]::-webkit-slider-runnable-track {
  background: transparent;
}
.range-interval > input[type=range]::-moz-range-track {
  background: transparent;
}
.range-interval > input[type=range]::-webkit-slider-thumb {
  pointer-events: auto;
}
.range-interval > input[type=range]::-moz-range-thumb {
  pointer-events: auto;
}
.range-interval > input[type=range]:disabled::-webkit-slider-thumb {
  pointer-events: none;
}
.range-interval > input[type=range]:disabled::-moz-range-thumb {
  pointer-events: none;
}
.range-interval > .range-ticks {
  display: none;
}

.range-field.range-compact input[type=range],
.range-interval.range-compact > input[type=range] {
  --range-track-height: 2px;
  --range-handle-size: 16px;
}

.range-field.range-expressive input[type=range],
.range-interval.range-expressive > input[type=range] {
  --range-track-height: 12px;
  --range-handle-size: 24px;
}

@media (forced-colors: active) {
  .range-interval::before {
    background: CanvasText;
  }
}
.range-interval.range-outside {
  --range-outer-color: var(--md-sys-color-primary);
  --range-inner-color: var(--range-muted-color, var(--md-sys-color-surface-variant));
}
.range-interval.range-outside::before {
  -webkit-clip-path: inset(0 var(--range-edge, 10px));
          clip-path: inset(0 var(--range-edge, 10px));
}
.range-interval.range-outside::after {
  content: "";
  position: absolute;
  inset-inline: calc(var(--range-edge, 10px) - 1px);
  top: 50%;
  height: 16px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  border-inline: 2px solid var(--md-sys-color-primary);
  pointer-events: none;
}
.range-interval.range-outside:has(input:disabled)::after {
  opacity: 0.38;
}

.range-control {
  --range-muted-color: color-mix(in srgb, var(--md-sys-color-on-surface) 24%, transparent);
  display: grid;
  grid-template-columns: minmax(0, 4.5rem) minmax(0, 1fr) minmax(0, 4.5rem);
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  gap: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--md-sys-color-outline);
  border-radius: 0;
  background: var(--md-sys-color-surface-variant);
  color: var(--md-sys-color-on-surface);
  min-width: 0;
}
.range-control.range-control-single {
  grid-template-columns: minmax(0, 4.5rem) minmax(0, 1fr);
}
.range-control:focus-within {
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: -2px;
}
.range-control[data-range-variant=outlined] {
  border: 1px solid var(--md-sys-color-outline);
  border-radius: 4px;
  background: var(--md-sys-color-surface);
}
.range-control[data-range-variant=rounded] {
  border: 1px solid var(--md-sys-color-outline);
  border-radius: 16px;
}
.range-control > .range-interval,
.range-control > .range-control-track {
  margin-inline: 16px;
  -webkit-align-self: center;
      -ms-flex-item-align: center;
          align-self: center;
  min-width: 0;
}
.range-control > .range-interval > input[type=range],
.range-control > .range-control-track > input[type=range] {
  height: 56px;
  margin-block: 0;
}
.range-control > .range-control-value {
  position: static;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
  -webkit-flex-direction: column-reverse;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-width: 0;
  min-height: 56px;
  margin: 0;
  padding: 4px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-radius: inherit;
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  font-size: 10px;
  line-height: 1.2;
  text-align: center;
  -webkit-transform: none;
          transform: none;
}
.range-control > .range-control-value:first-child {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}
.range-control > .range-control-value:last-child {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}
.range-control > .range-control-value > span {
  overflow-wrap: anywhere;
}
.range-control > .range-control-value > .range-control-number > input[type=number] {
  -webkit-appearance: textfield;
     -moz-appearance: textfield;
          appearance: textfield;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 30px;
  margin: 0;
  padding: 0 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  -webkit-box-shadow: none;
          box-shadow: none;
  font: inherit;
  font-size: 16px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.range-control > .range-control-value > .range-control-number > input[type=number]::-webkit-inner-spin-button, .range-control > .range-control-value > .range-control-number > input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.range-control > .range-control-value > .range-control-number > input[type=number] {
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.range-control > .range-control-value > .range-control-number > input[type=number]:focus {
  color: inherit;
  -webkit-text-fill-color: currentColor;
}
.range-control > .range-control-value > .range-control-number > input[type=number]:focus-visible {
  outline: 2px solid var(--md-sys-color-primary);
}
.range-control > .range-control-value > .range-control-number > input[type=number]:disabled {
  opacity: 0.38;
}

@media (forced-colors: active) {
  .range-interval.range-outside::after {
    border-color: CanvasText;
  }
  .range-control {
    border-color: CanvasText;
  }
}
.range-control-number {
  position: relative;
  display: block;
  width: 100%;
  height: 30px;
  min-width: 0;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.range-control-number:focus-within > .range-control-readout {
  visibility: hidden;
}
.range-control-number:has(input:disabled) > .range-control-readout {
  opacity: 0.38;
}

.range-control-readout {
  position: absolute;
  inset: 0 2px;
  overflow: hidden;
  pointer-events: none;
  white-space: nowrap;
  direction: ltr;
}

.range-control-reel {
  display: block;
}
.range-control-reel > span {
  display: block;
  height: 30px;
  line-height: 30px;
}

/* Style Placeholders */
::-webkit-input-placeholder {
  color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 75%, transparent);
  opacity: 1;
}
::-moz-placeholder {
  color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 75%, transparent);
  opacity: 1;
}
:-ms-input-placeholder {
  color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 75%, transparent);
  opacity: 1;
}
::-ms-input-placeholder {
  color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 75%, transparent);
  opacity: 1;
}
::placeholder {
  color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 75%, transparent);
  opacity: 1;
}

/* Text inputs */
input:not([type]):not(.browser-default),
input[type=text]:not(.browser-default),
input[type=password]:not(.browser-default),
input[type=email]:not(.browser-default),
input[type=url]:not(.browser-default),
input[type=time]:not(.browser-default),
input[type=date]:not(.browser-default),
input[type=datetime]:not(.browser-default),
input[type=datetime-local]:not(.browser-default),
input[type=month]:not(.browser-default),
input[type=tel]:not(.browser-default),
input[type=number]:not(.browser-default),
input[type=search]:not(.browser-default),
textarea.materialize-textarea {
  outline: none;
  color: var(--md-sys-color-on-background);
  width: 100%;
  font-size: 16px;
  height: 56px;
  background-color: transparent;
}

.input-field input:not([type=checkbox]):not([type=radio]).invalid, .input-field textarea.invalid {
  border-bottom: 2px solid var(--md-sys-color-error);
  -webkit-box-shadow: 0 1px 0 0 var(--md-sys-color-error);
          box-shadow: 0 1px 0 0 var(--md-sys-color-error);
}

.input-field input:not([type=checkbox]):not([type=radio]).invalid ~ .supporting-text[data-error] > span, .input-field textarea.invalid ~ .supporting-text[data-error] > span {
  display: none;
}

.input-field input:not([type=checkbox]):not([type=radio]).invalid ~ .supporting-text:after, .input-field textarea.invalid ~ .supporting-text:after {
  content: attr(data-error);
  color: var(--md-sys-color-error);
}

.supporting-text {
  display: block;
  font-size: 12px;
  line-height: 16px;
  margin: 4px 0 0;
}
.supporting-text:has(> .material-icons) {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 4px;
}
.supporting-text[hidden] {
  display: none;
}
.supporting-text > .material-icons {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 16px;
      -ms-flex: 0 0 16px;
          flex: 0 0 16px;
  font-size: 16px;
  line-height: 16px;
}

.input-field {
  --input-color: var(--md-sys-color-primary);
  position: relative;
  clear: both;
}
.input-field input:not([type=checkbox]):not([type=radio]), .input-field textarea {
  -webkit-box-sizing: border-box;
          box-sizing: border-box; /* https://stackoverflow.com/questions/1377719/padding-within-inputs-breaks-width-100*/
  padding: 0 16px;
  border: none;
  border-radius: 4px;
  border-bottom: 1px solid var(--md-sys-color-on-surface-variant);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.input-field input:not([type=checkbox]):not([type=radio]):focus:not([readonly]), .input-field textarea:focus:not([readonly]) {
  border-bottom: 2px solid var(--input-color);
  padding-top: 21px;
}
.input-field input:not([type=checkbox]):not([type=radio]):disabled, .input-field input:not([type=checkbox]):not([type=radio])[readonly=readonly], .input-field textarea:disabled, .input-field textarea[readonly=readonly] {
  color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 38%);
  border-color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 12%);
  background-color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 4%);
}
.input-field input:not([type=checkbox]):not([type=radio]):focus:not([readonly]) + label, .input-field textarea:focus:not([readonly]) + label {
  color: var(--input-color);
}
.input-field input:not([type=checkbox]):not([type=radio]):not(:-moz-placeholder) + label, .input-field textarea:not(:-moz-placeholder) + label {
  transform: scale(0.75);
  top: 8px;
  max-width: calc((100% - 32px) / 0.75);
}
.input-field input:not([type=checkbox]):not([type=radio]):not(:-ms-input-placeholder) + label, .input-field textarea:not(:-ms-input-placeholder) + label {
  transform: scale(0.75);
  top: 8px;
  max-width: calc((100% - 32px) / 0.75);
}
.input-field input:not([type=checkbox]):not([type=radio]):focus:not([readonly]) + label, .input-field input:not([type=checkbox]):not([type=radio]):not([placeholder=" "]) + label, .input-field input:not([type=checkbox]):not([type=radio]):not(:placeholder-shown) + label, .input-field textarea:focus:not([readonly]) + label, .input-field textarea:not([placeholder=" "]) + label, .input-field textarea:not(:placeholder-shown) + label {
  -webkit-transform: scale(0.75);
          transform: scale(0.75);
  top: 8px;
  max-width: calc((100% - 32px) / 0.75);
}
.input-field input:not([type=checkbox]):not([type=radio]):disabled + label, .input-field input:not([type=checkbox]):not([type=radio])[readonly=readonly] + label, .input-field textarea:disabled + label, .input-field textarea[readonly=readonly] + label {
  color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 38%);
}
.input-field input:not([type=checkbox]):not([type=radio]).invalid ~ label, .input-field input:not([type=checkbox]):not([type=radio]):focus.invalid ~ label, .input-field textarea.invalid ~ label, .input-field textarea:focus.invalid ~ label {
  color: var(--md-sys-color-error);
}
.input-field input::-webkit-input-placeholder {
  -webkit-user-select: none;
          user-select: none;
}
.input-field input::-moz-placeholder {
  -moz-user-select: none;
       user-select: none;
}
.input-field input:-ms-input-placeholder {
  -ms-user-select: none;
      user-select: none;
}
.input-field input::-ms-input-placeholder {
  -ms-user-select: none;
      user-select: none;
}
.input-field input::placeholder {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.input-field > label {
  color: var(--md-sys-color-on-surface-variant);
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  font-size: 16px;
  position: absolute;
  left: 16px;
  top: 16px;
  cursor: text;
  -webkit-transform-origin: top left;
          transform-origin: top left;
  max-width: calc(100% - 32px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-transition: left 0.2s ease-out, top 0.2s ease-out, -webkit-transform 0.2s ease-out;
  transition: left 0.2s ease-out, top 0.2s ease-out, -webkit-transform 0.2s ease-out;
  transition: left 0.2s ease-out, top 0.2s ease-out, transform 0.2s ease-out;
  transition: left 0.2s ease-out, top 0.2s ease-out, transform 0.2s ease-out, -webkit-transform 0.2s ease-out;
}
.input-field .supporting-text {
  color: var(--md-sys-color-on-surface-variant);
  padding: 0 16px;
}
.input-field .character-counter {
  color: var(--md-sys-color-on-surface-variant);
  font-size: 12px;
  float: right;
  padding: 0 16px;
  margin-top: 4px;
}
.input-field .prefix {
  position: absolute;
  left: 12px;
  top: 16px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-self: center;
      -ms-flex-item-align: center;
          align-self: center;
}
.input-field .suffix {
  position: absolute;
  right: 12px;
  top: 16px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.input-field .prefix ~ input:not([type=checkbox]):not([type=radio]), .input-field .prefix ~ textarea {
  padding-left: 52px;
}
.input-field :is(crazy-button, regular-btn).suffix[data-password-toggle-icon] {
  top: 8px;
  right: 4px;
}
.input-field :is(crazy-button, regular-btn).suffix[data-password-toggle-icon] > .btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.input-field :is(crazy-button, regular-btn).suffix[data-password-toggle-icon] > .btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: currentColor;
  opacity: 0;
  pointer-events: none;
}
.input-field :is(crazy-button, regular-btn).suffix[data-password-toggle-icon] > .btn:hover:not(:disabled)::before {
  opacity: 0.08;
}
.input-field :is(crazy-button, regular-btn).suffix[data-password-toggle-icon] > .btn:active:not(:disabled)::before {
  opacity: 0.16;
}
.input-field .suffix ~ input:not([type=checkbox]):not([type=radio]), .input-field .suffix ~ textarea {
  padding-right: 52px;
}
.input-field .prefix ~ label {
  left: 52px;
}
.input-field:not(.outlined) > input:not([type=checkbox]):not([type=radio]):not(:focus):not(:-moz-placeholder) {
  padding-top: 20px;
}
.input-field:not(.outlined) > input:not([type=checkbox]):not([type=radio]):not(:focus):not(:-ms-input-placeholder) {
  padding-top: 20px;
}
.input-field:not(.outlined) > input:not([type=checkbox]):not([type=radio]):not(:focus):not(:placeholder-shown) {
  padding-top: 20px;
}
.input-field.outlined input:not([type=checkbox]):not([type=radio]), .input-field.outlined textarea {
  padding-top: 0;
  background-color: transparent;
  border: 1px solid var(--md-sys-color-on-surface-variant);
  border-radius: 4px;
}
.input-field.outlined input:not([type=checkbox]):not([type=radio]):focus:not([readonly]), .input-field.outlined textarea:focus:not([readonly]) {
  border: 2px solid var(--input-color);
  padding-top: 0;
  margin-left: -1px;
}
.input-field.outlined input:not([type=checkbox]):not([type=radio]):focus:not([readonly]) + label, .input-field.outlined textarea:focus:not([readonly]) + label {
  color: var(--input-color);
}
.input-field.outlined input:not([type=checkbox]):not([type=radio]):not(:-moz-placeholder) + label, .input-field.outlined textarea:not(:-moz-placeholder) + label {
  top: -8px;
  left: 16px;
  margin-left: -4px;
  padding: 0 4px;
  background-color: var(--md-sys-color-surface);
}
.input-field.outlined input:not([type=checkbox]):not([type=radio]):not(:-ms-input-placeholder) + label, .input-field.outlined textarea:not(:-ms-input-placeholder) + label {
  top: -8px;
  left: 16px;
  margin-left: -4px;
  padding: 0 4px;
  background-color: var(--md-sys-color-surface);
}
.input-field.outlined input:not([type=checkbox]):not([type=radio]):focus:not([readonly]) + label, .input-field.outlined input:not([type=checkbox]):not([type=radio]):not([placeholder=" "]) + label, .input-field.outlined input:not([type=checkbox]):not([type=radio]):not(:placeholder-shown) + label, .input-field.outlined textarea:focus:not([readonly]) + label, .input-field.outlined textarea:not([placeholder=" "]) + label, .input-field.outlined textarea:not(:placeholder-shown) + label {
  top: -8px;
  left: 16px;
  margin-left: -4px;
  padding: 0 4px;
  background-color: var(--md-sys-color-surface);
}
.input-field.outlined input:not([type=checkbox]):not([type=radio]):disabled, .input-field.outlined input:not([type=checkbox]):not([type=radio])[readonly=readonly], .input-field.outlined textarea:disabled, .input-field.outlined textarea[readonly=readonly] {
  color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 38%);
  border-color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 12%);
}
.input-field.error {
  background-color: transparent;
}
.input-field.error input:not([type=checkbox]):not([type=radio]), .input-field.error textarea {
  border-color: var(--md-sys-color-error);
}
.input-field.error input:focus:not([readonly]), .input-field.error textarea:focus:not([readonly]) {
  border-color: var(--md-sys-color-error);
}
.input-field.error input:focus:not([readonly]) + label, .input-field.error textarea:focus:not([readonly]) + label {
  color: var(--md-sys-color-error);
}
.input-field.error label {
  color: var(--md-sys-color-error);
}
.input-field.error .supporting-text {
  color: var(--md-sys-color-error);
}
.input-field.error .suffix {
  color: var(--md-sys-color-error);
}

/* Inline */
.inline {
  display: inline-block;
}

/* Search Field */
.searchbar .prefix {
  position: absolute;
  padding-left: 1rem;
  top: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-self: center;
      -ms-flex-item-align: center;
          align-self: center;
}
.searchbar > input {
  border-width: 0;
  background-color: transparent;
  padding-left: 3rem;
}

.searchbar.has-sidebar {
  margin-left: 0;
}
@media only screen and (min-width : 993px) {
  .searchbar.has-sidebar {
    margin-left: 300px;
  }
}

/*
.input-field input[type=search] {
  display: block;
  line-height: inherit;

  .nav-wrapper & {
    height: inherit;
    padding-left: 4rem;
    width: calc(100% - 4rem);
    border: 0;
    box-shadow: none;
  }
  &:focus:not(.browser-default) {
    border: 0;
    box-shadow: none;
  }
  & + .label-icon {
    transform: none;
    left: 1rem;
  }
}
*/
/* Textarea */
textarea {
  width: 100%;
  height: 3rem;
  background-color: transparent;
}
textarea.materialize-textarea {
  padding-top: 26px !important;
  padding-bottom: 4px !important;
  line-height: normal;
  overflow-y: hidden; /* prevents scroll bar flash */
  resize: none;
  min-height: 3rem;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.input-field.outlined textarea.materialize-textarea {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

.hiddendiv {
  visibility: hidden;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word; /* future version of deprecated 'word-wrap' */
  padding-top: 1.2rem; /* prevents text jump on Enter keypress */
  position: absolute;
  top: 0;
  z-index: -1;
}

/* Autocomplete Items */
.autocomplete-content li .highlight {
  color: var(--md-sys-color-on-background);
}
.autocomplete-content li img {
  height: 40px;
  width: 40px;
  margin: 5px 15px;
}

/* Datepicker date input fields */
.datepicker-date-input {
  position: relative;
  text-indent: -9999px;
}
.datepicker-date-input::after {
  display: block;
  position: absolute;
  top: 1.1rem;
  content: attr(data-date);
  color: var(--input-color);
  text-indent: 0;
}
.datepicker-date-input:focus-visible {
  text-indent: 0;
}
.datepicker-date-input:focus-visible:after {
  text-indent: -9999px;
}

.input-field.outlined.has-outlined-notch > input:not([type=checkbox]):not([type=radio]), .input-field.outlined.has-outlined-notch > textarea,
.input-field.outlined > .select-wrapper.has-outlined-notch > input:not([type=checkbox]):not([type=radio]),
.input-field.outlined > .select-wrapper.has-outlined-notch > textarea {
  border-color: transparent;
}
.input-field.outlined.has-outlined-notch > input:not([type=checkbox]):not([type=radio]):focus:not([readonly]), .input-field.outlined.has-outlined-notch > input:not([type=checkbox]):not([type=radio]):disabled, .input-field.outlined.has-outlined-notch > input:not([type=checkbox]):not([type=radio])[readonly], .input-field.outlined.has-outlined-notch > textarea:focus:not([readonly]), .input-field.outlined.has-outlined-notch > textarea:disabled, .input-field.outlined.has-outlined-notch > textarea[readonly],
.input-field.outlined > .select-wrapper.has-outlined-notch > input:not([type=checkbox]):not([type=radio]):focus:not([readonly]),
.input-field.outlined > .select-wrapper.has-outlined-notch > input:not([type=checkbox]):not([type=radio]):disabled,
.input-field.outlined > .select-wrapper.has-outlined-notch > input:not([type=checkbox]):not([type=radio])[readonly],
.input-field.outlined > .select-wrapper.has-outlined-notch > textarea:focus:not([readonly]),
.input-field.outlined > .select-wrapper.has-outlined-notch > textarea:disabled,
.input-field.outlined > .select-wrapper.has-outlined-notch > textarea[readonly] {
  border-color: transparent;
}
.input-field.outlined.has-outlined-notch > input:not([type=checkbox]):not([type=radio]) + label, .input-field.outlined.has-outlined-notch > input:not([type=checkbox]):not([type=radio]):focus:not([readonly]) + label, .input-field.outlined.has-outlined-notch > textarea + label, .input-field.outlined.has-outlined-notch > textarea:focus:not([readonly]) + label,
.input-field.outlined > .select-wrapper.has-outlined-notch > input:not([type=checkbox]):not([type=radio]) + label,
.input-field.outlined > .select-wrapper.has-outlined-notch > input:not([type=checkbox]):not([type=radio]):focus:not([readonly]) + label,
.input-field.outlined > .select-wrapper.has-outlined-notch > textarea + label,
.input-field.outlined > .select-wrapper.has-outlined-notch > textarea:focus:not([readonly]) + label {
  background-color: transparent;
}
.input-field.outlined.has-outlined-notch > .input-outline,
.input-field.outlined > .select-wrapper.has-outlined-notch > .input-outline {
  position: absolute;
  pointer-events: none;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  min-width: 0;
  margin: 0;
  padding: 0 12px;
  border: 1px solid var(--md-sys-color-on-surface-variant);
  border-radius: 4px;
  background: transparent;
}
.input-field.outlined.has-outlined-notch > .input-outline > legend,
.input-field.outlined > .select-wrapper.has-outlined-notch > .input-outline > legend {
  float: none;
  width: auto;
  display: block;
  max-width: 0.01px;
  height: 16px;
  padding: 0;
  font: inherit;
  font-size: 12px;
  line-height: 16px;
  visibility: hidden;
  white-space: nowrap;
  overflow: hidden;
}
.input-field.outlined.has-outlined-notch > .input-outline > legend > span,
.input-field.outlined > .select-wrapper.has-outlined-notch > .input-outline > legend > span {
  display: inline-block;
  padding: 0 3px;
}
.input-field.outlined.has-outlined-notch > input:focus:not([readonly]) ~ .input-outline,
.input-field.outlined.has-outlined-notch > textarea:focus:not([readonly]) ~ .input-outline,
.input-field.outlined > .select-wrapper.has-outlined-notch > input:focus:not([readonly]) ~ .input-outline,
.input-field.outlined > .select-wrapper.has-outlined-notch > textarea:focus:not([readonly]) ~ .input-outline {
  border-width: 2px;
  border-color: var(--input-color);
  padding-inline: 11px;
}
.input-field.outlined.has-outlined-notch > :is(input, textarea):is(:focus:not([readonly]), :not([placeholder=" "]), :not(:-moz-placeholder)) ~ .input-outline > legend, .input-field.outlined > .select-wrapper.has-outlined-notch > :is(input, textarea):is(:focus:not([readonly]), :not([placeholder=" "]), :not(:-moz-placeholder)) ~ .input-outline > legend {
  max-width: 100%;
}
.input-field.outlined.has-outlined-notch > :is(input, textarea):is(:focus:not([readonly]), :not([placeholder=" "]), :not(:-ms-input-placeholder)) ~ .input-outline > legend, .input-field.outlined > .select-wrapper.has-outlined-notch > :is(input, textarea):is(:focus:not([readonly]), :not([placeholder=" "]), :not(:-ms-input-placeholder)) ~ .input-outline > legend {
  max-width: 100%;
}
.input-field.outlined.has-outlined-notch > :is(input, textarea):is(:focus:not([readonly]), :not([placeholder=" "]), :not(:placeholder-shown)) ~ .input-outline > legend,
.input-field.outlined > .select-wrapper.has-outlined-notch > :is(input, textarea):is(:focus:not([readonly]), :not([placeholder=" "]), :not(:placeholder-shown)) ~ .input-outline > legend {
  max-width: 100%;
}
.input-field.outlined.has-outlined-notch > :is(input, textarea):is(:disabled, [readonly]:not(.select-dropdown)) ~ .input-outline,
.input-field.outlined > .select-wrapper.has-outlined-notch > :is(input, textarea):is(:disabled, [readonly]:not(.select-dropdown)) ~ .input-outline {
  border-color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 12%);
}
.input-field.outlined.has-outlined-notch > :is(input, textarea).invalid ~ .input-outline, .input-field.outlined.has-outlined-notch.error > .input-outline,
.input-field.outlined > .select-wrapper.has-outlined-notch > :is(input, textarea).invalid ~ .input-outline,
.input-field.outlined > .select-wrapper.has-outlined-notch.error > .input-outline {
  border-color: var(--md-sys-color-error);
}

.input-field > button.suffix.input-copy-button {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 40px;
  height: 40px;
  top: 8px;
  right: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--md-sys-color-on-surface-variant);
  cursor: pointer;
  z-index: 1;
}
.input-field > button.suffix.input-copy-button > i {
  margin: 0;
  font-size: 24px;
  line-height: 1;
}
.input-field > button.suffix.input-copy-button:hover {
  background: color-mix(in srgb, currentColor 8%, transparent);
}
.input-field > button.suffix.input-copy-button:focus-visible {
  outline: 2px solid var(--input-color);
  outline-offset: 2px;
}
.input-field > button.suffix.input-copy-button:disabled {
  opacity: 0.38;
  cursor: default;
}
.input-field:has(> .input-copy-button) > input:not([type=checkbox]):not([type=radio]), .input-field:has(> .input-copy-button) > textarea {
  padding-right: 56px;
}

.input-copy-status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  -webkit-clip-path: inset(50%);
          clip-path: inset(50%);
  white-space: nowrap;
}

.autocomplete-selected {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.autocomplete-selected[hidden] {
  display: none;
}
.autocomplete-selected .autocomplete-selected-chip {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 12px;
  border-radius: 8px;
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}
.autocomplete-selected .autocomplete-selected-chip button {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-width: 28px;
  min-height: 28px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 20px;
}
.autocomplete-selected .autocomplete-selected-chip button:focus-visible {
  outline: 2px solid currentColor;
}

.input-field.outlined.error > .select-wrapper > .input-outline {
  border-color: var(--md-sys-color-error);
}

.input-field.error > .select-wrapper > label,
.input-field.error > .select-wrapper:focus-within > label {
  color: var(--md-sys-color-error);
}

select.browser-default {
  opacity: 1;
  color: var(--md-sys-color-on-background);
}

select {
  background-color: var(--md-sys-color-surface);
  width: 100%;
  padding: 5px;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: 2px;
  height: 3rem;
}

.select-wrapper:focus-within {
  outline: 2px solid var(--md-sys-color-primary);
  border-radius: 4px;
}

.select-wrapper {
  position: relative;
}
.select-wrapper .caret {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto 0;
  z-index: 0;
  fill: var(--md-sys-color-on-background);
  pointer-events: none;
}
.select-wrapper .hide-select {
  width: 0;
  height: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: -1;
}

select:disabled {
  color: var(--md-sys-color-on-surface);
}

.select-wrapper.disabled + label {
  color: var(--md-sys-color-on-surface);
}
.select-wrapper.disabled .caret {
  fill: var(--md-sys-color-on-surface);
}

.select-wrapper input.select-dropdown:disabled {
  color: var(--md-sys-color-on-surface);
  cursor: default;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.select-wrapper i {
  color: var(--md-sys-color-on-surface);
}

.dropdown-content.select-dropdown > li {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
.dropdown-content.select-dropdown > li > span {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.dropdown-content.select-dropdown > li > img {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 20px;
      -ms-flex: 0 0 20px;
          flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin: 0;
  -webkit-margin-end: 12px;
     -moz-margin-end: 12px;
          margin-inline-end: 12px;
  -o-object-fit: cover;
     object-fit: cover;
  float: none;
  -webkit-box-ordinal-group: 2;
  -webkit-order: 1;
      -ms-flex-order: 1;
          order: 1;
}
.dropdown-content.select-dropdown > li > img.left {
  -webkit-box-ordinal-group: 0;
  -webkit-order: -1;
      -ms-flex-order: -1;
          order: -1;
  -webkit-margin-start: 12px;
     -moz-margin-start: 12px;
          margin-inline-start: 12px;
  -webkit-margin-end: -4px;
     -moz-margin-end: -4px;
          margin-inline-end: -4px;
}
.dropdown-content.select-dropdown > li > span > label {
  position: static;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  height: auto;
  min-height: 24px;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
  -webkit-transform: none;
          transform: none;
}
.dropdown-content.select-dropdown > li > span > label > input[type=checkbox] {
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
}
.dropdown-content.select-dropdown > li > span > label > span {
  color: inherit;
}

.input-field:has(> .select-wrapper) {
  margin-top: 16px;
}

.input-field > .select-wrapper > label {
  position: absolute !important;
  top: 16px !important;
  left: 16px !important;
  z-index: 2;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 16px !important;
  line-height: 24px !important;
  text-align: left !important;
  background: transparent;
  -webkit-transform: none !important;
          transform: none !important;
  -webkit-transform-origin: top left !important;
          transform-origin: top left !important;
  -webkit-transition: top 0.2s ease-out, color 0.2s ease-out, -webkit-transform 0.2s ease-out;
  transition: top 0.2s ease-out, color 0.2s ease-out, -webkit-transform 0.2s ease-out;
  transition: top 0.2s ease-out, transform 0.2s ease-out, color 0.2s ease-out;
  transition: top 0.2s ease-out, transform 0.2s ease-out, color 0.2s ease-out, -webkit-transform 0.2s ease-out;
}

.input-field > .select-wrapper:has(> input.select-dropdown:not(:-moz-placeholder)) > label {
  position: absolute !important;
  top: 4px !important;
  left: 16px !important;
  padding: 0 !important;
  font-size: 16px !important;
  background: transparent;
  transform: scale(0.75) !important;
}

.input-field > .select-wrapper:has(> input.select-dropdown:not(:-ms-input-placeholder)) > label {
  position: absolute !important;
  top: 4px !important;
  left: 16px !important;
  padding: 0 !important;
  font-size: 16px !important;
  background: transparent;
  transform: scale(0.75) !important;
}

.input-field > .select-wrapper:has(> input.select-dropdown:not(:placeholder-shown)) > label,
.input-field > .select-wrapper:has(.hide-select > select[placeholder]:not([placeholder=""])) > label,
.input-field > .select-wrapper:focus-within > label {
  position: absolute !important;
  top: 4px !important;
  left: 16px !important;
  padding: 0 !important;
  font-size: 16px !important;
  background: transparent;
  -webkit-transform: scale(0.75) !important;
          transform: scale(0.75) !important;
}

.input-field > .select-wrapper:focus-within > label {
  color: var(--input-color);
}

.input-field.outlined > .select-wrapper:has(> input.select-dropdown:not(:-moz-placeholder)) > label {
  top: -8px !important;
  left: 12px !important;
  padding: 0 4px !important;
  line-height: 16px !important;
  background: var(--md-sys-color-surface);
  transform: scale(0.75) !important;
}

.input-field.outlined > .select-wrapper:has(> input.select-dropdown:not(:-ms-input-placeholder)) > label {
  top: -8px !important;
  left: 12px !important;
  padding: 0 4px !important;
  line-height: 16px !important;
  background: var(--md-sys-color-surface);
  transform: scale(0.75) !important;
}

.input-field.outlined > .select-wrapper:has(> input.select-dropdown:not(:placeholder-shown)) > label,
.input-field.outlined > .select-wrapper:has(.hide-select > select[placeholder]:not([placeholder=""])) > label,
.input-field.outlined > .select-wrapper:focus-within > label {
  top: -8px !important;
  left: 12px !important;
  padding: 0 4px !important;
  line-height: 16px !important;
  background: var(--md-sys-color-surface);
  -webkit-transform: scale(0.75) !important;
          transform: scale(0.75) !important;
}

.dropdown-content.select-dropdown > li.optgroup {
  min-height: 44px;
  border-radius: 0;
  cursor: default;
  color: var(--md-sys-color-on-surface-variant);
}
.dropdown-content.select-dropdown > li.optgroup:not(:first-child) {
  margin-top: 4px;
  border-top: 1px solid var(--md-sys-color-outline-variant);
}
.dropdown-content.select-dropdown > li.optgroup > span {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}
.dropdown-content.select-dropdown > li.optgroup + li {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.dropdown-content.select-dropdown > li:has(+ .optgroup) {
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

.input-field.outlined > .select-wrapper:focus-within {
  outline: none;
}
.input-field.outlined > .select-wrapper > input.select-dropdown:not([type=checkbox]):not([type=radio]):not(:focus):not(:-moz-placeholder) {
  padding-top: 0;
  padding-bottom: 0;
  padding-right: 40px;
}
.input-field.outlined > .select-wrapper > input.select-dropdown:not([type=checkbox]):not([type=radio]):not(:focus):not(:-ms-input-placeholder) {
  padding-top: 0;
  padding-bottom: 0;
  padding-right: 40px;
}
.input-field.outlined > .select-wrapper > input.select-dropdown,
.input-field.outlined > .select-wrapper > input.select-dropdown:not([type=checkbox]):not([type=radio]):not(:focus):not(:placeholder-shown) {
  padding-top: 0;
  padding-bottom: 0;
  padding-right: 40px;
}
.input-field.outlined > .select-wrapper.has-outlined-notch > input.select-dropdown + label {
  background: transparent;
}
.input-field.outlined > .select-wrapper.has-outlined-notch > .input-outline {
  border-color: var(--md-sys-color-on-surface-variant);
}
.input-field.outlined > .select-wrapper.has-outlined-notch:focus-within > .input-outline {
  border-color: var(--input-color);
  border-width: 2px;
  padding-inline: 11px;
}
.input-field.outlined > .select-wrapper.has-outlined-notch:focus-within > .input-outline > legend {
  max-width: 100%;
}
.input-field.outlined > .select-wrapper.has-outlined-notch.disabled > .input-outline {
  border-color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 12%);
}

.input-field:not(.outlined) > .select-wrapper:has(> label) > input.select-dropdown:not([type=checkbox]):not([type=radio]):not(:-moz-placeholder) {
  padding-top: 12px;
  padding-right: 40px;
}

.input-field:not(.outlined) > .select-wrapper:has(> label) > input.select-dropdown:not([type=checkbox]):not([type=radio]):not(:-ms-input-placeholder) {
  padding-top: 12px;
  padding-right: 40px;
}

.input-field:not(.outlined) > .select-wrapper:has(> label) > input.select-dropdown:not([type=checkbox]):not([type=radio]):not(:placeholder-shown), .input-field:not(.outlined) > .select-wrapper:has(> label):focus-within > input.select-dropdown:not([type=checkbox]):not([type=radio]) {
  padding-top: 12px;
  padding-right: 40px;
}

.file-field {
  display: grid;
  grid-template-columns: -webkit-min-content minmax(0, 1fr);
  grid-template-columns: min-content minmax(0, 1fr);
  gap: 10px;
}
.file-field:has(> .supporting-text) {
  row-gap: 0;
}
.file-field > .supporting-text {
  grid-column: 1/-1;
  min-width: 0;
  cursor: auto;
}
.file-field .file-path-wrapper {
  overflow: hidden;
}
.file-field input.file-path {
  width: 100%;
}
.file-field .btn {
  height: 3rem;
  line-height: 3rem;
}
.file-field span {
  cursor: pointer;
}
.file-field input[type=file] {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  cursor: pointer;
  width: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  font-size: 20px;
  filter: alpha(opacity=0);
}
.file-field input[type=file]::-webkit-file-upload-button {
  display: none;
}

/**
new approach for floating labels aka "form-fields" (css only)
- also use for selects, autocomplete, etc.

<div class="row g-1 p-3">
  \3c !-- Animated -->
  <fieldset class="form-field animated s12 m4">
    <legend>Given Name</legend>
    <input type="text" id="my-input-1" placeholder=" "/>
    <label for="my-input-1">Given Name</label>
  </fieldset>
  \3c !-- Disabled-->
  <fieldset class="form-field s12 m4" disabled>
    <legend>Family Name</legend>
    <input type="text" id="my-input-2" placeholder="e.g. Doe" />
    <label for="my-input-2">Family Name</label>
  </fieldset>
  \3c !-- different placeholder than label + required -->
  <fieldset class="form-field s12 m4">
    <legend>Birthmonth</legend>
    <input type="text" id="my-input-3" placeholder="e.g. April" required />
    <label for="my-input-3">Birthmonth</label>
  </fieldset>
</div>
*/
:root {
  --mw-font-size: 16px;
  --mw-border-radius: 8px;
  --mw-input-height: 56px;
  --mw-idle-color: var(--md-sys-color-outline);
  --mw-border-width: 1px;
  --mw-hover-color: var(--md-sys-color-on-primary-container);
  --mw-hover-border-width: 1px;
  --mw-focus-color: var(--md-sys-color-primary);
  --mw-focus-border-width: 2px;
  --mw-disabled-color: #8886;
  --mw-padding-left: 16px;
  --mw-input-padding-x: var(--mw-padding-left);
  --mw-input-padding-r: 12px;
  --mw-label-padding: 4px;
  --mw-inputlabel-duration: 0.2s;
  --mw-inset: 5px;
  /* calclated properties */
  --label-size: calc(var(--mw-font-size) * 0.75);
  --label-margin-left: calc(var(--mw-padding-left) - var(--mw-label-padding));
  --half-inp: calc((-0.5 * var(--mw-input-height)));
  --half-lbl: calc((0.5 * var(--label-size)));
  --distY: calc(var(--half-inp) + var(--half-lbl));
}

/*=== idle */
fieldset.form-field {
  position: relative;
  border-width: var(--mw-border-width);
  border-color: var(--mw-idle-color);
  border-style: solid;
  border-radius: var(--mw-border-radius);
  cursor: text;
  height: var(--mw-input-height);
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-auto-flow: column;
  -webkit-box-align: baseline;
  -webkit-align-items: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  font-size: var(--mw-font-size);
  padding: 0 calc(var(--mw-inset) - var(--mw-border-width));
}

fieldset.form-field legend {
  color: var(--mw-idle-color);
  font-size: var(--label-size);
  padding: 0 var(--mw-label-padding);
  margin: 0;
  margin-left: calc(var(--mw-padding-left) - var(--mw-label-padding) - var(--mw-border-width));
  cursor: text;
  /* color: transparent; */
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

fieldset.form-field input,
fieldset.form-field select {
  --mw-calc-input-height: calc(
    var(--mw-input-height) - var(--label-size) + 2 * var(--mw-border-width)
  );
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-size: var(--mw-font-size);
  padding: 0;
  margin: 0;
  width: 100%;
  height: var(--mw-calc-input-height);
  max-height: var(--mw-calc-input-height);
  margin-top: calc(-1 * var(--half-lbl));
  padding-left: calc(var(--mw-padding-left) - var(--mw-border-width));
  border: none;
  line-height: normal;
  outline: none;
  background: none;
  /* background-color: #0f05 !important; */
}

fieldset.form-field select {
  padding: 0;
  /* margin: 0; */
  padding-left: calc(var(--mw-padding-left) - var(--mw-label-padding));
  /* background-color: #f005 !important; */
  z-index: 2;
}

fieldset.form-field select option {
  background-color: black;
  color: white;
}

fieldset.form-field input::-webkit-input-placeholder {
  color: var(--mw-idle-color);
  font-size: var(--mw-font-size);
}

fieldset.form-field input::-moz-placeholder {
  color: var(--mw-idle-color);
  font-size: var(--mw-font-size);
}

fieldset.form-field input:-ms-input-placeholder {
  color: var(--mw-idle-color);
  font-size: var(--mw-font-size);
}

fieldset.form-field input::-ms-input-placeholder {
  color: var(--mw-idle-color);
  font-size: var(--mw-font-size);
}

fieldset.form-field input::placeholder {
  color: var(--mw-idle-color);
  font-size: var(--mw-font-size);
}

fieldset.form-field label {
  position: absolute;
  top: calc(var(--mw-input-height) / 2 - var(--label-size) - var(--mw-font-size) / 2);
  margin-left: calc(var(--mw-inset) - var(--mw-border-width));
  font-size: var(--mw-font-size);
  cursor: text;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  color: transparent;
  /* color: green; */
  z-index: 1; /* for not blocking klicks */
  pointer-events: none;
}

/* fixes from other inputs */
fieldset.form-field .select-wrapper {
  outline: none !important;
}

/*--- idle animated */
fieldset.form-field.animated legend::before {
  content: "";
  position: absolute;
  display: block;
  width: calc(100% - var(--mw-border-radius));
  right: calc(0.5 * var(--mw-border-radius));
  height: 0;
  border-top: var(--mw-border-width) solid var(--mw-idle-color);
  -webkit-align-self: center;
      -ms-flex-item-align: center;
          align-self: center;
  -webkit-transition: width calc(var(--mw-inputlabel-duration) * 0.8);
  transition: width calc(var(--mw-inputlabel-duration) * 0.8);
}

fieldset.form-field.animated legend {
  color: transparent;
}

fieldset.form-field.animated input::-webkit-input-placeholder {
  opacity: 1;
  -webkit-transition: opacity var(--mw-inputlabel-duration) step-end;
  transition: opacity var(--mw-inputlabel-duration) step-end;
}

fieldset.form-field.animated input::-moz-placeholder {
  opacity: 1;
  -moz-transition: opacity var(--mw-inputlabel-duration) step-end;
  transition: opacity var(--mw-inputlabel-duration) step-end;
}

fieldset.form-field.animated input:-ms-input-placeholder {
  opacity: 1;
  -ms-transition: opacity var(--mw-inputlabel-duration) step-end;
  transition: opacity var(--mw-inputlabel-duration) step-end;
}

fieldset.form-field.animated input::-ms-input-placeholder {
  opacity: 1;
  -ms-transition: opacity var(--mw-inputlabel-duration) step-end;
  transition: opacity var(--mw-inputlabel-duration) step-end;
}

fieldset.form-field.animated input::placeholder {
  opacity: 1;
  -webkit-transition: opacity var(--mw-inputlabel-duration) step-end;
  transition: opacity var(--mw-inputlabel-duration) step-end;
}

fieldset.form-field.animated label {
  position: absolute;
  left: calc(var(--mw-input-padding-x) - var(--mw-border-width));
  font-size: var(--mw-font-size);
  -webkit-transition: font-size var(--mw-inputlabel-duration), opacity var(--mw-inputlabel-duration) step-end, -webkit-transform var(--mw-inputlabel-duration);
  transition: font-size var(--mw-inputlabel-duration), opacity var(--mw-inputlabel-duration) step-end, -webkit-transform var(--mw-inputlabel-duration);
  transition: font-size var(--mw-inputlabel-duration), transform var(--mw-inputlabel-duration), opacity var(--mw-inputlabel-duration) step-end;
  transition: font-size var(--mw-inputlabel-duration), transform var(--mw-inputlabel-duration), opacity var(--mw-inputlabel-duration) step-end, -webkit-transform var(--mw-inputlabel-duration);
}

/*--- idle animated populated */
fieldset.form-field.animated:has(input:not(:-moz-placeholder)) legend::before {
  width: 0;
}
fieldset.form-field.animated:has(input:not(:-ms-input-placeholder)) legend::before {
  width: 0;
}
fieldset.form-field.animated:has(input:not(:placeholder-shown)) legend::before {
  width: 0;
}

fieldset.form-field.animated:has(input:not(:-moz-placeholder)) legend {
  color: var(--mw-idle-color);
}

fieldset.form-field.animated:has(input:not(:-ms-input-placeholder)) legend {
  color: var(--mw-idle-color);
}

fieldset.form-field.animated:has(input:not(:placeholder-shown)) legend {
  color: var(--mw-idle-color);
}

fieldset.form-field.animated:has(input:not(:-moz-placeholder)) label {
  color: transparent;
}

fieldset.form-field.animated:has(input:not(:-ms-input-placeholder)) label {
  color: transparent;
}

fieldset.form-field.animated:has(input:not(:placeholder-shown)) label {
  color: transparent;
}

/*===== hovered */
fieldset.form-field:hover {
  border-width: var(--mw-hover-border-width);
  border-color: var(--mw-hover-color);
  padding: 0 calc(var(--mw-inset) - var(--mw-hover-border-width));
}

fieldset.form-field:hover legend::before {
  border-width: var(--mw-hover-border-width);
  border-color: var(--mw-hover-color);
}

fieldset.form-field:hover legend {
  color: var(--mw-hover-color);
}

/* hovered animated */
fieldset.form-field.animated:hover legend {
  color: transparent;
}

fieldset.form-field.animated:has(input:placeholder-shown):hover input::-webkit-input-placeholder {
  color: transparent;
}

fieldset.form-field.animated:has(input:placeholder-shown):hover input::-moz-placeholder {
  color: transparent;
}

fieldset.form-field.animated:has(input:placeholder-shown):hover input:-ms-input-placeholder {
  color: transparent;
}

fieldset.form-field.animated:has(input:placeholder-shown):hover input::-ms-input-placeholder {
  color: transparent;
}

fieldset.form-field.animated:has(input:-moz-placeholder):hover input::placeholder {
  color: transparent;
}

fieldset.form-field.animated:has(input:-ms-input-placeholder):hover input::placeholder {
  color: transparent;
}

fieldset.form-field.animated:has(input:placeholder-shown):hover input::placeholder {
  color: transparent;
}

fieldset.form-field.animated:has(input:not(:-moz-placeholder)):hover legend {
  color: var(--mw-hover-color);
}

fieldset.form-field.animated:has(input:not(:-ms-input-placeholder)):hover legend {
  color: var(--mw-hover-color);
}

fieldset.form-field.animated:has(input:not(:placeholder-shown)):hover legend {
  color: var(--mw-hover-color);
}

fieldset.form-field.animated:hover label {
  /* color: transparent; */
  color: var(--mw-hover-color);
  left: calc(var(--mw-input-padding-x) - var(--mw-hover-border-width));
  top: calc(0.5 * var(--mw-input-height) - var(--label-size) * 0.5 - var(--mw-font-size) + var(--mw-hover-border-width));
}

/*===== focused */
fieldset.form-field:focus-within {
  border-width: var(--mw-focus-border-width);
  border-color: var(--mw-focus-color);
  padding: 0 calc(var(--mw-inset) - var(--mw-focus-border-width));
}

fieldset.form-field:focus-within legend::before {
  border-width: var(--mw-focus-border-width);
  border-color: var(--mw-focus-color);
}

fieldset.form-field:focus-within legend {
  color: var(--mw-focus-color);
}

fieldset.form-field select:focus {
  color: var(--mw-focus-color);
}

/* focused animated */
fieldset.form-field.animated:focus-within legend::before {
  width: 0;
}

fieldset.form-field.animated:focus-within legend {
  color: var(--mw-focus-color);
}

fieldset.form-field.animated:has(input:not(:-moz-placeholder)):focus-within legend {
  color: var(--mw-focus-color);
}

fieldset.form-field.animated:has(input:not(:-ms-input-placeholder)):focus-within legend {
  color: var(--mw-focus-color);
}

fieldset.form-field.animated:has(input:not(:placeholder-shown)):focus-within legend {
  color: var(--mw-focus-color);
}

fieldset.form-field.animated:focus-within input::-webkit-input-placeholder {
  color: transparent;
}

fieldset.form-field.animated:focus-within input::-moz-placeholder {
  color: transparent;
}

fieldset.form-field.animated:focus-within input:-ms-input-placeholder {
  color: transparent;
}

fieldset.form-field.animated:focus-within input::-ms-input-placeholder {
  color: transparent;
}

fieldset.form-field.animated:focus-within input::placeholder {
  color: transparent;
}

fieldset.form-field.animated:focus-within label {
  color: transparent;
  left: calc(var(--mw-input-padding-x) - var(--mw-hover-border-width));
}

/*
fieldset.form-field.animated input:not(:placeholder-shown) ~ legend::before {
  width: 0;
}
fieldset.form-field.animated input:not(:placeholder-shown) ~ label {
  font-size: var(--label-size);
  transform: translateY(0);
  opacity: 1;
}
fieldset.form-field.animated label {
  opacity: 1;
  color: var(--mw-focus-color);
  font-size: var(--label-size);
  transform: translateY(var(--distY)) translateX(var(--mw-input-padding-x));
  transition: font-size var(--mw-inputlabel-duration), transform var(--mw-inputlabel-duration), opacity 0s;
}
fieldset.form-field.animated:focus-within legend::before,
fieldset.form-field.animated:has(input:not(:placeholder-shown)) legend::before {
  border-top: var(--mw-focus-border-width) solid var(--mw-focus-color);
  width: 0;
}
fieldset.form-field.animated:focus-within input::placeholder {
  opacity: 0;
  transition: opacity 0s;
}
*/
/* disabled*/
fieldset.form-field[disabled],
fieldset.form-field[disabled]:hover {
  background-color: transparent;
  border-color: var(--mw-disabled-color);
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  cursor: not-allowed;
  padding: 0 calc(var(--mw-inset) - var(--mw-border-width));
}

fieldset.form-field[disabled] input {
  cursor: not-allowed;
}

fieldset.form-field[disabled] input::-webkit-input-placeholder {
  color: var(--mw-disabled-color);
  cursor: not-allowed;
}

fieldset.form-field[disabled] input::-moz-placeholder {
  color: var(--mw-disabled-color);
  cursor: not-allowed;
}

fieldset.form-field[disabled] input:-ms-input-placeholder {
  color: var(--mw-disabled-color);
  cursor: not-allowed;
}

fieldset.form-field[disabled] input::-ms-input-placeholder {
  color: var(--mw-disabled-color);
  cursor: not-allowed;
}

fieldset.form-field[disabled] legend,
fieldset.form-field[disabled] input::placeholder {
  color: var(--mw-disabled-color);
  cursor: not-allowed;
}

fieldset.form-field[disabled] input {
  height: calc(var(--mw-input-height) - var(--label-size) + 2 * var(--mw-border-width));
  margin-top: calc(-1 * var(--half-lbl));
}

fieldset.form-field[disabled]:hover {
  border-width: var(--mw-border-width);
}

fieldset.form-field[disabled]:hover input,
fieldset.form-field[disabled]:hover select {
  padding-left: calc(var(--mw-padding-left) - var(--mw-border-width));
}

fieldset.form-field[disabled]:hover legend {
  margin-left: calc(var(--mw-padding-left) - var(--mw-label-padding) - var(--mw-border-width));
  border-color: transparent;
  border-color: var(--mw-disabled-color);
  color: var(--mw-disabled-color);
  cursor: not-allowed;
}

fieldset.form-field[disabled] label {
  cursor: not-allowed;
}

/* special: required */
fieldset.form-field:has([required]) legend::after {
  content: " *";
}

fieldset.form-field:has([required]) label::after {
  content: " *";
}

:root {
  --color-input-width: 40px;
  --color-input-height: 32px;
}

.pickr button.pcr-button {
  width: var(--color-input-width);
  height: var(--color-input-height);
  min-width: 0;
  padding: 0;
  margin: 0;
  overflow: hidden;
  border-bottom: 1px solid var(--md-sys-color-on-surface-variant);
  border-radius: 6px 6px 0 0;
}
.pickr button.pcr-button::before, .pickr button.pcr-button::after {
  border-radius: 0;
}
.pickr button.pcr-button:focus, .pickr button.pcr-button.pcr-active {
  -webkit-box-shadow: none;
          box-shadow: none;
}
.pickr button.pcr-button:focus-visible {
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: -2px;
}

input[type=color][data-color-picker] {
  width: var(--color-input-width);
  height: var(--color-input-height);
  min-width: 0;
  padding: 0 !important;
  margin: 0;
  overflow: hidden;
  cursor: pointer;
  border-radius: 6px 6px 0 0;
}
input[type=color][data-color-picker]::-webkit-color-swatch-wrapper {
  padding: 0;
}
input[type=color][data-color-picker]::-webkit-color-swatch, input[type=color][data-color-picker]::-moz-color-swatch {
  border: 0;
  border-radius: 6px 6px 0 0;
}

.input-field:has(> input[type=color][data-color-picker]) {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 12px;
}

input[type=color][data-color-picker] ~ label {
  position: static;
  display: inline-block;
  -webkit-transform: none;
          transform: none;
  margin: 0;
  padding: 0;
  font-size: 1rem;
  color: var(--md-sys-color-on-surface-variant);
}

.pickr button.pcr-button.disabled {
  opacity: 0.38;
}

.pcr-app {
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: 6px;
  -webkit-box-shadow: 0 2px 6px color-mix(in srgb, var(--md-sys-color-shadow) 18%, transparent), 0 10px 28px color-mix(in srgb, var(--md-sys-color-shadow) 22%, transparent);
          box-shadow: 0 2px 6px color-mix(in srgb, var(--md-sys-color-shadow) 18%, transparent), 0 10px 28px color-mix(in srgb, var(--md-sys-color-shadow) 22%, transparent);
}
.pcr-app .pcr-interaction .pcr-result {
  height: 25px;
  color: var(--md-sys-color-on-surface);
  background-color: var(--md-sys-color-surface-variant);
}
.pcr-app .pcr-interaction input {
  color: var(--md-sys-color-on-surface);
  background-color: var(--md-sys-color-surface-variant);
}
.pcr-app .pcr-interaction .pcr-save {
  background-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}

input[data-date-picker=air-datepicker][readonly] {
  caret-color: transparent;
  cursor: pointer;
}

.input-field:has(input[data-date-picker=air-datepicker]) > label,
.input-field:has(input[data-date-picker=air-datepicker]) .prefix,
.input-field:has(input[data-date-picker=air-datepicker]) .suffix {
  z-index: 1;
  cursor: pointer;
}

.air-datepicker {
  --adp-z-index: 100001;
  --adp-transition-duration: 0.11s;
  --adp-font-family: 'Roboto', sans-serif;
  --adp-background-color: var(--md-sys-color-surface);
  --adp-color: var(--md-sys-color-on-surface);
  --adp-color-secondary: var(--md-sys-color-on-surface-variant);
  --adp-border-color: var(--md-sys-color-outline-variant);
  --adp-border-color-inner: var(--md-sys-color-outline-variant);
  --adp-color-current-date: var(--md-sys-color-primary);
  --adp-background-color-hover: var(--md-sys-color-surface-variant);
  --adp-background-color-active: var(--md-sys-color-surface-variant);
  --adp-cell-background-color-selected: var(--md-sys-color-primary);
  --adp-cell-background-color-selected-hover: var(--md-sys-color-primary-container);
  --adp-cell-border-color-in-range: var(--md-sys-color-primary);
  --adp-cell-background-color-in-range: var(--md-sys-color-primary-container);
  --adp-cell-background-color-in-range-hover: var(--md-sys-color-primary-container);
  --adp-color-other-month: var(--md-sys-color-outline);
  --adp-color-other-month-hover: var(--md-sys-color-on-surface-variant);
  --adp-btn-color: var(--md-sys-color-primary);
  --adp-btn-color-hover: var(--md-sys-color-on-primary);
  --adp-btn-background-color-hover: var(--md-sys-color-primary-container);
  --adp-btn-background-color-active: var(--md-sys-color-primary-container);
  --adp-time-track-color: var(--md-sys-color-outline-variant);
  --adp-time-track-color-hover: var(--md-sys-color-primary);
  --adp-time-day-period-color: var(--md-sys-color-on-surface-variant);
  --adp-border-radius: 24px;
  --adp-cell-border-radius: 50%;
  --adp-padding: 16px;
  --adp-color-disabled: var(--md-sys-color-outline);
  --adp-color-disabled-in-range: var(--md-sys-color-on-surface-variant);
}
.air-datepicker .air-datepicker-nav {
  height: auto;
  min-height: 32px;
  padding: 0px;
  -webkit-box-shadow: initial;
          box-shadow: initial;
  background-color: inherit;
  color: var(--adp-nav-color-secondary) !important;
}
.air-datepicker .air-datepicker-nav .air-datepicker-nav--title {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 14px;
  line-height: 1.25;
}
.air-datepicker .air-datepicker-nav .air-datepicker-nav--title i {
  font-size: 14px;
}
.air-datepicker .air-datepicker-nav .air-datepicker-nav--title small {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--adp-color-secondary);
}
.air-datepicker .air-datepicker-nav .air-datepicker-nav--action i {
  font-size: 18px;
}
.air-datepicker .air-datepicker-cell {
  font-variant-numeric: tabular-nums;
}
.air-datepicker .air-datepicker-cell.-day-.-weekend- {
  color: var(--md-sys-color-outline);
}
.air-datepicker .air-datepicker-body--day-name.-weekend- {
  opacity: 0.7;
}
.air-datepicker .air-datepicker-cell.-day-.-weekend-.-in-range-,
.air-datepicker .air-datepicker-cell.-day-.-weekend-.-selected- {
  color: inherit;
}
.air-datepicker .air-datepicker-cell.-day-.-other-month-.-selected- {
  color: var(--md-sys-color-on-primary);
  background: var(--md-sys-color-primary);
}
.air-datepicker i.air-datepicker--pointer {
  display: none;
}

.filepond--drop-label.filepond--drop-label label {
  color: var(--md-sys-color-on-surface-variant);
}

.filepond--root + label {
  left: 0;
}

.file-field.file-field-enhanced {
  display: block;
}
.file-field.file-field-enhanced > label {
  position: static;
  display: block;
  margin-bottom: 0.375rem;
  color: var(--md-sys-color-on-surface);
  -webkit-transform: none;
          transform: none;
}
.file-field.file-field-enhanced .filepond--root {
  margin: 0.5rem 0 1rem 0;
  font-size: 1rem;
}
.file-field.file-field-enhanced:has(> .supporting-text) .filepond--root {
  margin-bottom: 0;
}
.file-field.file-field-enhanced .filepond--panel-root {
  border-radius: 12px;
  background-color: var(--md-sys-color-surface-variant);
}
.file-field.file-field-enhanced .filepond--drop-label {
  color: var(--md-sys-color-on-surface-variant);
}
.file-field.file-field-enhanced .filepond--label-action {
  color: var(--md-sys-color-primary);
  -webkit-text-decoration-color: var(--md-sys-color-primary);
     -moz-text-decoration-color: var(--md-sys-color-primary);
          text-decoration-color: var(--md-sys-color-primary);
}
.file-field.file-field-enhanced .filepond--drop-label .material-icons {
  font-size: 1.25rem;
  line-height: 1;
  vertical-align: middle;
}
.file-field.file-field-enhanced .filepond-label-content {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
}

.input-field:has(> select.tomselected) {
  margin-top: 16px;
}

.input-field > .ts-wrapper {
  margin-top: 5px;
}
.input-field > .ts-wrapper.single > .ts-control, .input-field > .ts-wrapper.multi > .ts-control {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  height: 56px;
  min-height: 56px;
  padding: 0 0 0 15px !important;
  overflow: hidden;
  background: var(--md-sys-color-background) !important;
  background-image: none !important;
  border: 0 !important;
  border-bottom: 1px solid var(--md-sys-color-on-surface-variant) !important;
  border-radius: 4px 4px 0 0;
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
}
.input-field > .ts-wrapper.focus > .ts-control {
  border-bottom: 2px solid var(--input-color) !important;
}
.input-field > .ts-wrapper .ts-control {
  font-size: 16px;
  color: var(--md-sys-color-on-surface);
}
.input-field > .ts-wrapper .ts-control > input,
.input-field > .ts-wrapper .ts-control input[role=combobox] {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--md-sys-color-on-surface) !important;
  font-size: 16px;
  line-height: 24px;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
}
.input-field > .ts-wrapper .ts-control > input::-webkit-input-placeholder, .input-field > .ts-wrapper .ts-control input[role=combobox]::-webkit-input-placeholder {
  color: color-mix(in srgb, var(--md-sys-color-on-surface) 55%, transparent);
  opacity: 1;
}
.input-field > .ts-wrapper .ts-control > input::-moz-placeholder, .input-field > .ts-wrapper .ts-control input[role=combobox]::-moz-placeholder {
  color: color-mix(in srgb, var(--md-sys-color-on-surface) 55%, transparent);
  opacity: 1;
}
.input-field > .ts-wrapper .ts-control > input:-ms-input-placeholder, .input-field > .ts-wrapper .ts-control input[role=combobox]:-ms-input-placeholder {
  color: color-mix(in srgb, var(--md-sys-color-on-surface) 55%, transparent);
  opacity: 1;
}
.input-field > .ts-wrapper .ts-control > input::-ms-input-placeholder, .input-field > .ts-wrapper .ts-control input[role=combobox]::-ms-input-placeholder {
  color: color-mix(in srgb, var(--md-sys-color-on-surface) 55%, transparent);
  opacity: 1;
}
.input-field > .ts-wrapper .ts-control > input::placeholder,
.input-field > .ts-wrapper .ts-control input[role=combobox]::placeholder {
  color: color-mix(in srgb, var(--md-sys-color-on-surface) 55%, transparent);
  opacity: 1;
}
.input-field > .ts-wrapper.multi > .ts-control {
  gap: 6px;
  padding: 0 0 0 15px !important;
  -webkit-flex-wrap: nowrap;
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
}
.input-field > .ts-wrapper.multi > .ts-control .item {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  margin: 0 !important;
  padding: 4px 10px !important;
  color: var(--md-sys-color-on-primary-container);
  line-height: 20px;
  background: var(--md-sys-color-primary-container);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: 999px;
}
.input-field > .ts-wrapper.single > .ts-control .item {
  margin: 0 !important;
  padding: 0 !important;
  color: var(--md-sys-color-on-surface);
  line-height: 24px;
  background: transparent;
  border: 0;
}
.input-field > .ts-wrapper.disabled > .ts-control {
  opacity: 1;
  color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 38%);
  background: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 4%) !important;
  border-color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 12%) !important;
}
.input-field > .ts-wrapper.single > .ts-control::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 24px;
  width: 9px;
  height: 9px;
  margin-top: -6px;
  border: solid var(--md-sys-color-on-surface) !important;
  border-width: 0 3px 3px 0 !important;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.input-field > .ts-wrapper.single.dropdown-active > .ts-control::after {
  margin-top: -3px;
  -webkit-transform: rotate(-135deg);
          transform: rotate(-135deg);
}

.input-field > select.tomselected[data-select-overflow=wrap] + .ts-wrapper.multi > .ts-control {
  height: auto;
  min-height: 56px;
  padding: 8px 0 8px 15px !important;
  overflow: visible;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}

.input-field > select.tomselected[data-select-overflow=scroll] + .ts-wrapper.multi > .ts-control {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-flex-wrap: nowrap;
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
  scrollbar-color: var(--md-sys-color-outline) transparent;
  scrollbar-width: thin;
}
.input-field > select.tomselected[data-select-overflow=scroll] + .ts-wrapper.multi > .ts-control::-webkit-scrollbar {
  height: 5px;
}
.input-field > select.tomselected[data-select-overflow=scroll] + .ts-wrapper.multi > .ts-control::-webkit-scrollbar-thumb {
  background: var(--md-sys-color-outline);
  border-radius: 999px;
}

.input-field > select.tomselected + .ts-wrapper + label {
  position: absolute !important;
  top: 16px !important;
  left: 16px !important;
  z-index: 2;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 16px !important;
  line-height: 24px !important;
  text-align: left !important;
  background: transparent;
  -webkit-transform: none !important;
          transform: none !important;
  -webkit-transform-origin: top left !important;
          transform-origin: top left !important;
  -webkit-transition: top 0.2s ease-out, color 0.2s ease-out, -webkit-transform 0.2s ease-out;
  transition: top 0.2s ease-out, color 0.2s ease-out, -webkit-transform 0.2s ease-out;
  transition: top 0.2s ease-out, transform 0.2s ease-out, color 0.2s ease-out;
  transition: top 0.2s ease-out, transform 0.2s ease-out, color 0.2s ease-out, -webkit-transform 0.2s ease-out;
}

.input-field > select.tomselected[placeholder]:not([placeholder=""]) + .ts-wrapper + label,
.input-field > select.tomselected:has(> option[value=""]:checked:not(:empty)) + .ts-wrapper + label,
.input-field > select.tomselected + .ts-wrapper.has-items + label,
.input-field > select.tomselected + .ts-wrapper.focus + label {
  position: absolute !important;
  top: -12px !important;
  left: 16px !important;
  font-size: 16px !important;
  -webkit-transform: scale(0.75) !important;
          transform: scale(0.75) !important;
}

.input-field > select.tomselected + .ts-wrapper.focus + label {
  color: var(--input-color);
}

.input-field.outlined > .ts-wrapper.single > .ts-control,
.input-field.outlined > .ts-wrapper.multi > .ts-control {
  padding: 0 0 0 15px !important;
  background: transparent !important;
  border: 1px solid var(--md-sys-color-on-surface-variant) !important;
  border-radius: 4px;
}

.input-field.outlined > .ts-wrapper.focus > .ts-control {
  border: 2px solid var(--input-color) !important;
}

.input-field.outlined > select.tomselected[placeholder]:not([placeholder=""]) + .ts-wrapper + label,
.input-field.outlined > select.tomselected:has(> option[value=""]:checked:not(:empty)) + .ts-wrapper + label,
.input-field.outlined > select.tomselected + .ts-wrapper.has-items + label,
.input-field.outlined > select.tomselected + .ts-wrapper.focus + label {
  top: -8px !important;
  left: 12px !important;
  padding: 0 4px !important;
  line-height: 16px !important;
  background: var(--md-sys-color-surface);
  -webkit-transform: scale(0.75) !important;
          transform: scale(0.75) !important;
}

div.suffix.suffix-tomselect {
  z-index: 2;
  top: 30px;
}

.input-field.error > .ts-wrapper > .ts-control,
.input-field.outlined.error > .ts-wrapper > .ts-control {
  border-color: var(--md-sys-color-error) !important;
}

.input-field.error > select.tomselected + .ts-wrapper + label,
.input-field.error > select.tomselected + .ts-wrapper.focus + label {
  color: var(--md-sys-color-error);
}

.ts-dropdown {
  --menu-surface: var(--md-sys-color-surface-container-low, color-mix(in srgb, var(--md-sys-color-surface), var(--md-sys-color-on-surface) 4%));
  background-color: var(--menu-surface);
  color: var(--md-sys-color-on-surface);
  border: none;
  border-radius: 16px;
  -webkit-box-shadow: 0 2px 6px 2px color-mix(in srgb, var(--md-sys-color-shadow) 15%, transparent), 0 1px 2px color-mix(in srgb, var(--md-sys-color-shadow) 30%, transparent);
          box-shadow: 0 2px 6px 2px color-mix(in srgb, var(--md-sys-color-shadow) 15%, transparent), 0 1px 2px color-mix(in srgb, var(--md-sys-color-shadow) 30%, transparent);
  z-index: 9999;
  margin-top: 4px;
  overflow: hidden;
  font-family: inherit;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.5px;
}
.ts-dropdown .ts-dropdown-content {
  padding: 2px 4px;
  background: inherit;
  scroll-padding-block: 2px;
}
.ts-dropdown .optgroup {
  border: 0;
  opacity: 1;
}
.ts-dropdown .optgroup[data-disabled] .option {
  opacity: 1;
}
.ts-dropdown .optgroup + .optgroup {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--md-sys-color-outline-variant);
}
.ts-dropdown .optgroup-header {
  padding: 12px;
  color: var(--md-sys-color-on-surface-variant);
  background: transparent;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}
.ts-dropdown .option, .ts-dropdown .create, .ts-dropdown .no-results {
  --menu-item-surface: var(--menu-surface);
  --menu-item-color: var(--md-sys-color-on-surface);
  min-height: 48px;
  color: var(--menu-item-color);
  background-color: var(--menu-item-surface);
  border-radius: 4px;
  outline: none;
  -webkit-transition: background-color 150ms ease, border-radius 150ms ease;
  transition: background-color 150ms ease, border-radius 150ms ease;
  position: relative;
  display: block;
  padding: 12px;
  font-size: 16px;
  line-height: 24px;
  opacity: 1;
}
.ts-dropdown .option + :is(.option, .create, .no-results), .ts-dropdown .create + :is(.option, .create, .no-results), .ts-dropdown .no-results + :is(.option, .create, .no-results) {
  margin-top: 2px;
}
.ts-dropdown .option:first-child, .ts-dropdown .option:is(.optgroup-header + *), .ts-dropdown .create:first-child, .ts-dropdown .create:is(.optgroup-header + *), .ts-dropdown .no-results:first-child, .ts-dropdown .no-results:is(.optgroup-header + *) {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}
.ts-dropdown .option:last-child, .ts-dropdown .create:last-child, .ts-dropdown .no-results:last-child {
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}
.ts-dropdown .option.selected, .ts-dropdown .create.selected, .ts-dropdown .no-results.selected {
  --menu-item-surface: var(--md-sys-color-tertiary-container);
  --menu-item-color: var(--md-sys-color-on-tertiary-container);
  border-radius: 12px;
}
.ts-dropdown .option[data-selectable]:not([aria-disabled=true], [data-disabled], [data-disabled] *):hover, .ts-dropdown .create[data-selectable]:not([aria-disabled=true], [data-disabled], [data-disabled] *):hover, .ts-dropdown .no-results[data-selectable]:not([aria-disabled=true], [data-disabled], [data-disabled] *):hover {
  background-color: color-mix(in srgb, var(--menu-item-surface), var(--menu-item-color) 8%);
}
.ts-dropdown .option[data-selectable]:not([aria-disabled=true], [data-disabled], [data-disabled] *).active, .ts-dropdown .create[data-selectable]:not([aria-disabled=true], [data-disabled], [data-disabled] *).active, .ts-dropdown .no-results[data-selectable]:not([aria-disabled=true], [data-disabled], [data-disabled] *).active {
  color: var(--menu-item-color);
  background-color: color-mix(in srgb, var(--menu-item-surface), var(--menu-item-color) 10%);
  outline: 3px solid var(--md-sys-color-secondary);
  outline-offset: -3px;
}
.ts-dropdown .option[aria-disabled=true], .ts-dropdown .option[data-disabled], .ts-dropdown .option:is([data-disabled] *), .ts-dropdown .create[aria-disabled=true], .ts-dropdown .create[data-disabled], .ts-dropdown .create:is([data-disabled] *), .ts-dropdown .no-results[aria-disabled=true], .ts-dropdown .no-results[data-disabled], .ts-dropdown .no-results:is([data-disabled] *) {
  color: color-mix(in srgb, var(--menu-item-color) 38%, transparent);
  opacity: 1;
  cursor: default;
}
.ts-dropdown .no-results {
  color: var(--md-sys-color-on-surface-variant);
}
.ts-dropdown [data-selectable] .highlight {
  color: inherit;
  background: color-mix(in srgb, var(--menu-item-color) 12%, transparent);
}

.ts-dropdown .ts-option-content,
.input-field > .ts-wrapper .ts-option-content {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
}
.ts-dropdown .ts-option-content img,
.input-field > .ts-wrapper .ts-option-content img {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 20px;
      -ms-flex: 0 0 20px;
          flex: 0 0 20px;
  width: 20px;
  height: 20px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 50%;
}

@media (prefers-reduced-motion: reduce) {
  .ts-dropdown :is(.option, .create, .no-results) {
    -webkit-transition: none;
    transition: none;
  }
}
@media (forced-colors: active) {
  .ts-dropdown {
    border: 1px solid CanvasText;
  }
  .ts-dropdown [data-selectable].active {
    outline: 3px solid Highlight;
    outline-offset: -3px;
  }
}
.pulse {
  overflow: visible;
  position: relative;
  &::before {
    content: "";
    display: block;
    position: absolute;
    pointer-events: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: inherit;
    border-radius: inherit;
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
    transition: opacity 0.3s, -webkit-transform 0.3s;
    transition: opacity 0.3s, transform 0.3s;
    transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s;
    -webkit-animation: pulse-animation 1s cubic-bezier(0.24, 0, 0.38, 1) infinite;
            animation: pulse-animation 1s cubic-bezier(0.24, 0, 0.38, 1) infinite;
    z-index: -1;
  }
}

@-webkit-keyframes pulse-animation {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    opacity: 0;
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
  }
}

@keyframes pulse-animation {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    opacity: 0;
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
  }
}
.btn.btn-expressive {
  --button-height: 40px;
  --button-padding: 24px;
  --button-icon: 20px;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 8px;
  height: var(--button-height);
  min-height: var(--button-height);
  padding: 0 var(--button-padding);
  border-radius: 999px;
  font-size: 14px;
  line-height: 1.2;
  text-transform: none;
  white-space: nowrap;
  -webkit-transition: border-radius 180ms ease, background-color 180ms ease, flex-grow 180ms ease, -webkit-box-flex 180ms ease, -webkit-flex-grow 180ms ease;
  transition: border-radius 180ms ease, background-color 180ms ease, flex-grow 180ms ease, -webkit-box-flex 180ms ease, -webkit-flex-grow 180ms ease;
  transition: border-radius 180ms ease, background-color 180ms ease, flex-grow 180ms ease;
  transition: border-radius 180ms ease, background-color 180ms ease, flex-grow 180ms ease, -webkit-box-flex 180ms ease, -webkit-flex-grow 180ms ease, -ms-flex-positive 180ms ease;
}
.btn.btn-expressive > i,
.btn.btn-expressive > .material-icons {
  position: static;
  -webkit-transform: none;
          transform: none;
  font-size: var(--button-icon);
  line-height: 1;
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
}
.btn.btn-expressive:focus-visible {
  outline: 3px solid var(--md-sys-color-on-surface);
  outline-offset: 3px;
}
.btn.btn-expressive:active:not(:disabled) {
  border-radius: 12px;
}
.btn.btn-expressive.btn-xs {
  --button-height: 32px;
  --button-padding: 12px;
}
.btn.btn-expressive.btn-sm {
  --button-height: 40px;
}
.btn.btn-expressive.btn-md {
  --button-height: 56px;
  --button-icon: 24px;
  font-size: 16px;
}
.btn.btn-expressive.btn-lg {
  --button-height: 96px;
  --button-padding: 40px;
  --button-icon: 32px;
  font-size: 24px;
}
.btn.btn-expressive.btn-xl {
  --button-height: 136px;
  --button-padding: 48px;
  --button-icon: 40px;
  font-size: 32px;
}
.btn.btn-expressive.btn-square {
  border-radius: calc(var(--button-height) * 0.28);
}

.btn.btn-toggle[aria-pressed=true] {
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  border-color: transparent;
  border-radius: 16px;
}

.btn.btn-icon {
  width: var(--button-height);
  min-width: var(--button-height);
  padding: 0;
}

.btn.btn-icon-standard {
  background: transparent;
  color: var(--md-sys-color-on-surface-variant);
  -webkit-box-shadow: none;
          box-shadow: none;
}

.btn.btn-icon-standard:hover:not(:disabled) {
  background: var(--md-sys-color-surface-variant);
}

.btn.btn-icon.btn-toggle[aria-pressed=true] {
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}

.btn.btn-icon.btn-icon-narrow {
  width: calc(var(--button-height) * 0.8);
  min-width: calc(var(--button-height) * 0.8);
}

.btn.btn-icon.btn-icon-wide {
  width: calc(var(--button-height) * 1.5);
}

.btn-group {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  max-width: 100%;
}

.btn-group > .btn {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 0;
      -ms-flex: 1 1 0px;
          flex: 1 1 0;
  min-width: 0;
}

.btn-group-standard {
  width: 100%;
  max-width: 480px;
}

.btn-group-standard > .btn:hover:not(:disabled) {
  -webkit-box-flex: 1.2;
  -webkit-flex-grow: 1.2;
      -ms-flex-positive: 1.2;
          flex-grow: 1.2;
}

.btn-group-connected {
  gap: 2px;
}

.btn-group-connected > .btn.btn-expressive {
  border-radius: 4px;
}

.btn-group-connected > .btn.btn-expressive:first-child {
  border-start-start-radius: 999px;
  border-end-start-radius: 999px;
}

.btn-group-connected > .btn.btn-expressive:last-child {
  border-start-end-radius: 999px;
  border-end-end-radius: 999px;
}

.btn-group-connected > .btn.btn-expressive:active:not(:disabled) {
  border-radius: 4px;
}
.btn-group-connected > .btn.btn-expressive:active:not(:disabled):first-child {
  border-start-start-radius: 999px;
  border-end-start-radius: 999px;
}
.btn-group-connected > .btn.btn-expressive:active:not(:disabled):last-child {
  border-start-end-radius: 999px;
  border-end-end-radius: 999px;
}

.btn-split {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  gap: 2px;
  position: relative;
  vertical-align: middle;
}

.btn-split > .btn:first-child {
  border-start-end-radius: 4px;
  border-end-end-radius: 4px;
}

.btn-split > .btn-menu-trigger {
  border-start-start-radius: 4px;
  border-end-start-radius: 4px;
}

.btn-menu-trigger > .material-icons {
  -webkit-transition: -webkit-transform 180ms ease;
  transition: -webkit-transform 180ms ease;
  transition: transform 180ms ease;
  transition: transform 180ms ease, -webkit-transform 180ms ease;
}

.btn-menu-trigger[aria-expanded=true] > .material-icons {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

.btn.btn-fab {
  --button-height: 56px;
  --button-icon: 24px;
  width: var(--button-height);
  padding: 0;
  border-radius: 16px;
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  -webkit-box-shadow: 0 3px 8px color-mix(in srgb, var(--md-sys-color-shadow) 20%, transparent);
          box-shadow: 0 3px 8px color-mix(in srgb, var(--md-sys-color-shadow) 20%, transparent);
}
.btn.btn-fab.fab-secondary {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}
.btn.btn-fab.fab-tertiary {
  background: var(--md-sys-color-tertiary-container);
  color: var(--md-sys-color-on-tertiary-container);
}
.btn.btn-fab.fab-small {
  --button-height: 40px;
  border-radius: 12px;
}
.btn.btn-fab.fab-large {
  --button-height: 96px;
  --button-icon: 36px;
  border-radius: 28px;
}
.btn.btn-fab.btn-fab-extended {
  width: auto;
  padding: 0 20px;
}

.btn-fab-menu {
  position: relative;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

.btn-fab-menu .btn-menu-trigger[aria-expanded=true] > .material-icons {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

.btn.btn-expressive.btn-round-left, .btn.btn-expressive.btn-round-left:active:not(:disabled), .btn.btn-expressive.btn-round-left[aria-pressed=true] {
  border-radius: calc(var(--button-height) / 2) 4px 4px calc(var(--button-height) / 2);
}

.btn.btn-expressive.btn-round-right, .btn.btn-expressive.btn-round-right:active:not(:disabled), .btn.btn-expressive.btn-round-right[aria-pressed=true] {
  border-radius: 4px calc(var(--button-height) / 2) calc(var(--button-height) / 2) 4px;
}

.btn.btn-expressive:disabled,
.btn.btn-expressive.btn-toggle:disabled {
  background: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
  color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
  -webkit-box-shadow: none;
          box-shadow: none;
  cursor: default;
}

@media (pointer: coarse) {
  .btn.btn-expressive::after {
    content: "";
    position: absolute;
    inset: -4px 0;
    min-height: 48px;
  }
  .btn-group {
    gap: 8px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .btn.btn-expressive,
  .btn-menu-trigger > .material-icons {
    -webkit-transition: none;
    transition: none;
  }
}
.list {
  --list-gap: 2px;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
}
.list > li {
  list-style: none;
}

.list.list-flush {
  padding: 0;
  border-radius: inherit;
  overflow: hidden;
}

.list-item {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 16px;
  min-height: 56px;
  width: 100%;
  padding: 8px 16px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: inherit;
}
.list-item.list-two-line {
  min-height: 72px;
}
.list-item.list-three-line {
  min-height: 88px;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
  padding-block: 12px;
}

.list-content {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.list-headline {
  display: block;
  font-size: 16px;
  line-height: 24px;
  color: var(--md-sys-color-on-surface);
}

.list-supporting {
  display: block;
  font-size: 14px;
  line-height: 20px;
  color: var(--md-sys-color-on-surface-variant);
}

.list-leading,
.list-trailing {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
  color: var(--md-sys-color-on-surface-variant);
}

.list-trailing {
  gap: 8px;
  font-size: 12px;
  line-height: 16px;
}

.list-avatar {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}

.list-image {
  width: 56px;
  height: 56px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 8px;
}

.list-interactive {
  border: 0;
  background: transparent;
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.list-interactive:hover {
  background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
}
.list-interactive:focus-visible {
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: -2px;
}
.list-interactive:disabled {
  opacity: 0.38;
  cursor: default;
}

.list-item:has(.list-control:checked),
.list-item[aria-current=page] {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}

.list .list-control[type=radio] + .list-content {
  height: auto;
  min-height: 25px;
}

.list-item:has(.list-control[type=radio]:focus-visible) {
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: -2px;
}

.list-segmented {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: var(--list-gap);
  padding: 0;
  background: transparent;
}
.list-segmented > li > .list-item {
  border-radius: 4px;
  background-color: var(--md-sys-color-surface-variant);
}
.list-segmented > li:first-child > .list-item {
  border-start-start-radius: 16px;
  border-start-end-radius: 16px;
}
.list-segmented > li:last-child > .list-item {
  border-end-start-radius: 16px;
  border-end-end-radius: 16px;
}
.list-segmented > li > .list-item:has(.list-control:checked),
.list-segmented > li > .list-item[aria-current=page] {
  background-color: var(--md-sys-color-secondary-container);
}
.list-segmented > li > .list-interactive:hover {
  background-color: color-mix(in srgb, var(--md-sys-color-surface-variant), var(--md-sys-color-on-surface) 8%);
}

.list-divider {
  height: 1px;
  margin: 0 16px 0 56px;
  background: var(--md-sys-color-outline-variant);
}

.list-check-stamp {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--md-sys-color-on-surface-variant);
}

.list-check-stamp[hidden] {
  display: none;
}

.list-check-stamp > .material-icons {
  font-size: 16px;
}

.list-check-note {
  margin: 8px 0 0;
  -webkit-padding-start: 12px;
     -moz-padding-start: 12px;
          padding-inline-start: 12px;
  -webkit-border-start: 2px solid var(--md-sys-color-outline);
     -moz-border-start: 2px solid var(--md-sys-color-outline);
          border-inline-start: 2px solid var(--md-sys-color-outline);
  font-style: italic;
}

.list-checklist-footer {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 16px;
  padding: 16px;
  color: var(--md-sys-color-on-surface-variant);
}

.list-checklist-footer > progress {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  height: 6px;
  accent-color: var(--md-sys-color-primary);
}

.divider.divider-line {
  --divider-color: var(--md-sys-color-outline-variant);
  --divider-thickness: 1px;
  --divider-style: solid;
  --divider-spacing: 16px;
  --divider-inset: 16px;
  display: block;
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
  height: 0;
  margin: var(--divider-spacing) 0;
  border: 0;
  -webkit-border-before: var(--divider-thickness) var(--divider-style) var(--divider-color);
          border-block-start: var(--divider-thickness) var(--divider-style) var(--divider-color);
  background: transparent;
  overflow: visible;
}
.divider.divider-line.divider-inset {
  -webkit-margin-start: var(--divider-inset);
     -moz-margin-start: var(--divider-inset);
          margin-inline-start: var(--divider-inset);
}
.divider.divider-line.divider-middle {
  margin-inline: var(--divider-inset);
}
.divider.divider-line.divider-dashed, .divider.divider-line.divider-dotted {
  --divider-color: var(--md-sys-color-outline);
  --divider-thickness: 1.5px;
}
.divider.divider-line.divider-strong {
  --divider-color: var(--md-sys-color-outline);
}
.divider.divider-line.divider-accent {
  --divider-color: var(--md-sys-color-primary);
}
.divider.divider-line.divider-thick {
  --divider-thickness: 4px;
}
.divider.divider-line.divider-dashed {
  --divider-style: dashed;
}
.divider.divider-line.divider-dotted {
  --divider-style: dotted;
}
.divider.divider-line.divider-vertical {
  width: 0;
  height: auto;
  -webkit-align-self: stretch;
      -ms-flex-item-align: stretch;
          align-self: stretch;
  margin: 0 var(--divider-spacing);
  -webkit-border-before: 0;
          border-block-start: 0;
  -webkit-border-start: var(--divider-thickness) var(--divider-style) var(--divider-color);
     -moz-border-start: var(--divider-thickness) var(--divider-style) var(--divider-color);
          border-inline-start: var(--divider-thickness) var(--divider-style) var(--divider-color);
}
.divider.divider-line.divider-label {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 16px;
  height: auto;
  border: 0;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}
.divider.divider-line.divider-label::before, .divider.divider-line.divider-label::after {
  content: "";
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 8px;
  -webkit-border-before: var(--divider-thickness) var(--divider-style) var(--divider-color);
          border-block-start: var(--divider-thickness) var(--divider-style) var(--divider-color);
}
.divider.divider-line.divider-label.divider-label-start::before {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 24px;
      -ms-flex: 0 0 24px;
          flex: 0 0 24px;
}
.divider.divider-line.divider-label.divider-label-end::after {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 24px;
      -ms-flex: 0 0 24px;
          flex: 0 0 24px;
}

.card-drag-handle {
  float: right;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 44px;
      -ms-flex: 0 0 44px;
          flex: 0 0 44px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--md-sys-color-on-surface-variant);
  cursor: -webkit-grab;
  cursor: grab;
  -ms-touch-action: none;
      touch-action: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.card-drag-handle:focus-visible {
  outline: 2px solid var(--md-sys-color-primary);
}
.card-drag-handle:active {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

.card-handle-dragging {
  position: absolute !important;
  opacity: 0;
  pointer-events: none;
}

.card-drag-ghost {
  position: fixed !important;
  z-index: 10000;
  pointer-events: none;
  opacity: 0.85;
  margin: 0;
  max-height: 180px;
  overflow: hidden;
  background: var(--md-sys-color-surface);
  -webkit-box-shadow: 0 8px 24px color-mix(in srgb, var(--md-sys-color-shadow) 20%, transparent);
          box-shadow: 0 8px 24px color-mix(in srgb, var(--md-sys-color-shadow) 20%, transparent);
}

.card-drag-placeholder {
  border: 2px dashed var(--md-sys-color-primary);
  border-radius: 14px;
  background: var(--md-sys-color-primary-container);
  margin-bottom: 8px;
}

.kanban-card:has(> .card-drag-handle) {
  position: relative;
}
.kanban-card:has(> .card-drag-handle) > .card-drag-handle {
  position: absolute;
  top: 4px;
  right: 4px;
  float: none;
  color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 65%, transparent);
  background: transparent;
  border-radius: 50%;
  outline: none;
}
.kanban-card:has(> .card-drag-handle) > .card-drag-handle > .material-icons {
  font-size: 20px;
}
.kanban-card:has(> .card-drag-handle) > .card-drag-handle:focus-visible {
  outline: 2px solid var(--md-sys-color-primary);
}
.kanban-card:has(> .card-drag-handle) > .card-drag-handle:hover, .kanban-card:has(> .card-drag-handle) > .card-drag-handle:focus-visible, .kanban-card:has(> .card-drag-handle) > .card-drag-handle:active {
  color: var(--md-sys-color-on-surface);
  background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
}
.kanban-card:has(> .card-drag-handle) > .kanban-card-label, .kanban-card:has(> .card-drag-handle) > .kanban-card-title {
  max-width: calc(100% - 36px);
}

.org-chart {
  position: relative;
  overflow: auto;
  height: 560px;
  max-height: 680px;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: 24px;
  -webkit-clip-path: inset(0 round 24px);
          clip-path: inset(0 round 24px);
  background-color: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  background-image: radial-gradient(var(--md-sys-color-outline-variant) 1px, transparent 1px);
  background-size: 24px 24px;
  isolation: isolate;
  -ms-scroll-chaining: none;
      overscroll-behavior: contain;
}

.org-chart-stage {
  position: relative;
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
}

.org-chart-connect-port {
  position: absolute;
  right: -10px;
  top: 18px;
  z-index: 3;
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 50%;
  border: 0;
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-primary);
  cursor: crosshair;
  -ms-touch-action: none;
      touch-action: none;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  line-height: 1;
}
.org-chart-connect-port > .material-icons {
  display: block;
  width: 16px;
  height: 16px;
  font-size: 16px;
  line-height: 1;
  margin: 0;
}
.org-chart-connect-port:focus-visible {
  outline: 2px solid var(--md-sys-color-on-surface);
  outline-offset: 3px;
}

.org-chart-person > .org-chart-connect-port {
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.org-chart-connection-preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 4;
}
.org-chart-connection-preview path {
  fill: none;
  stroke: var(--md-sys-color-primary);
  stroke-width: 2;
  stroke-dasharray: 6 4;
}

.org-chart-team {
  position: absolute;
  z-index: 2;
  width: 248px;
  padding: 8px;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: 20px;
  background: var(--org-item-color, var(--md-sys-color-surface-variant));
  -webkit-box-shadow: 0 4px 14px color-mix(in srgb, var(--md-sys-color-shadow) 8%, transparent);
          box-shadow: 0 4px 14px color-mix(in srgb, var(--md-sys-color-shadow) 8%, transparent);
}

.org-chart-team-handle {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 100%;
  padding: 12px 8px 16px;
  gap: 12px;
  background: none;
  border: 0;
  border-radius: 12px;
  color: var(--org-item-text, var(--md-sys-color-on-surface-variant));
  font: inherit;
  text-align: left;
  cursor: -webkit-grab;
  cursor: grab;
  -ms-touch-action: none;
      touch-action: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.org-chart-team-handle:focus-visible {
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: 2px;
}
.org-chart-team-handle.is-dragging {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}
.org-chart-team-handle:disabled {
  cursor: default;
  opacity: 1;
}

.org-chart-team-name {
  font-weight: 700;
  overflow-wrap: anywhere;
}

.org-chart-count {
  -webkit-box-flex: 0;
  -webkit-flex: none;
      -ms-flex: none;
          flex: none;
  border-radius: 20px;
  padding: 3px 9px;
  font-size: 12px;
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}

.org-chart-person {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 12px;
  min-height: 76px;
  margin-bottom: 8px;
  padding: 14px 12px;
  border-radius: 14px;
  background: var(--org-item-color, var(--md-sys-color-surface));
}
.org-chart-person:last-child {
  margin-bottom: 0;
}

.org-chart-avatar {
  overflow: hidden;
  min-width: 0;
}
.org-chart-avatar > img {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  -o-object-fit: cover;
     object-fit: cover;
}
.org-chart-avatar {
  display: grid;
  place-items: center;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 38px;
      -ms-flex: 0 0 38px;
          flex: 0 0 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--org-item-color, var(--md-sys-color-primary-container));
  color: var(--org-item-text, var(--md-sys-color-on-primary-container));
  font-size: 12px;
  font-weight: 700;
}

.org-chart-person-details {
  min-width: 0;
}

.org-chart-person-name, .org-chart-person-role {
  display: block;
  overflow-wrap: anywhere;
}

.org-chart-person-name {
  font-size: 14px;
  line-height: 1.4;
}

.org-chart-person-role {
  margin-top: 4px;
  font-size: 12px;
  color: var(--org-item-text, var(--md-sys-color-on-surface-variant));
}

.org-chart-empty {
  padding: 16px;
  font-size: 14px;
  color: var(--md-sys-color-on-surface-variant);
}

.org-chart-links {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: visible;
  pointer-events: none;
}
.org-chart-links path {
  fill: none;
  stroke: var(--md-sys-color-primary);
  stroke-width: 1.75;
  opacity: 0.65;
}
.org-chart-links circle {
  fill: var(--md-sys-color-primary);
}
.org-chart-links text {
  fill: var(--md-sys-color-on-surface-variant);
  stroke: var(--md-sys-color-surface);
  stroke-width: 5px;
  stroke-linejoin: round;
  paint-order: stroke;
  font-family: inherit;
  font-size: 11px;
  text-anchor: middle;
}

.org-chart-summary {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  -webkit-clip-path: inset(50%);
          clip-path: inset(50%);
  white-space: nowrap;
}

.org-chart-toolbar {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  margin: 20px 0 16px;
}

.org-chart-toolbar-title {
  margin-right: auto;
  font-size: 18px;
  font-weight: 700;
}

.org-chart-form {
  display: grid;
  gap: 16px;
}

.org-chart-field {
  display: grid;
  gap: 8px;
}
.org-chart-field label {
  position: static;
  color: var(--md-sys-color-on-surface);
  font-size: 14px;
}
.org-chart-field select {
  display: block;
  width: 100%;
  color: var(--md-sys-color-on-surface);
  background: var(--md-sys-color-surface);
  border: 1px solid var(--md-sys-color-outline);
  border-radius: 8px;
  padding: 10px;
}

.org-chart-form-error {
  color: var(--md-sys-color-error);
  margin: 0;
}

.org-chart-drag-icon {
  -webkit-box-flex: 0;
  -webkit-flex: none;
      -ms-flex: none;
          flex: none;
  font-size: 24px;
}

.org-chart-team-name {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.org-chart-team-handle {
  min-height: 48px;
  gap: 8px;
}

.org-chart-person, .org-chart-team {
  position: relative;
}
.org-chart-person.org-chart-tinted, .org-chart-team.org-chart-tinted {
  background: color-mix(in srgb, var(--org-item-color) 18%, var(--md-sys-color-surface));
}
.org-chart-person[data-accent]::after, .org-chart-team[data-accent]::after {
  content: "";
  position: absolute;
  pointer-events: none;
  inset: -1px;
  border: 3px solid transparent;
  border-radius: inherit;
}
.org-chart-person[data-accent=top]::after, .org-chart-team[data-accent=top]::after {
  border-top-color: var(--org-item-accent);
}
.org-chart-person[data-accent=bottom]::after, .org-chart-team[data-accent=bottom]::after {
  border-bottom-color: var(--org-item-accent);
}
.org-chart-person[data-accent=left]::after, .org-chart-team[data-accent=left]::after {
  border-left-color: var(--org-item-accent);
}
.org-chart-person[data-accent=right]::after, .org-chart-team[data-accent=right]::after {
  border-right-color: var(--org-item-accent);
}

.org-chart-team {
  position: absolute;
}

.org-chart-person {
  gap: 8px;
  padding: 12px 6px;
}

.org-chart-person > .card-drag-handle {
  -webkit-flex-basis: 44px;
      -ms-flex-preferred-size: 44px;
          flex-basis: 44px;
  -webkit-box-ordinal-group: 4;
  -webkit-order: 3;
      -ms-flex-order: 3;
          order: 3;
  margin-left: auto;
}

.org-chart-person > .org-chart-avatar {
  -webkit-flex-basis: 30px;
      -ms-flex-preferred-size: 30px;
          flex-basis: 30px;
  height: 30px;
}

@media (hover: hover) and (pointer: fine) {
  .org-chart-connect-port {
    opacity: 0;
    pointer-events: none;
  }
  .org-chart-person:hover > .org-chart-connect-port,
  .org-chart-team:hover > .org-chart-connect-port,
  .org-chart-connect-port:focus-visible,
  .org-chart:has(.org-chart-team-handle.is-dragging, .card-handle-dragging, .org-chart-connection-preview) .org-chart-connect-port,
  .card-drag-ghost > .org-chart-connect-port {
    opacity: 1;
    pointer-events: auto;
  }
}
.org-chart-links text.org-chart-link-label {
  pointer-events: auto;
  cursor: text;
}
.org-chart-links text.org-chart-link-label:hover {
  fill: var(--md-sys-color-primary);
}
.org-chart-links text.org-chart-link-label:focus-visible {
  outline: 1px solid var(--md-sys-color-on-surface);
  outline-offset: 4px;
}

.org-chart-stage > input.org-chart-link-editor {
  position: absolute;
  z-index: 5;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 220px;
  height: 36px;
  margin: 0;
  padding: 6px 10px;
  border: 1px solid var(--md-sys-color-outline);
  border-radius: 8px;
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  font: inherit;
  font-size: 13px;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.org-chart-links .org-chart-link-remove {
  pointer-events: auto;
  cursor: pointer;
}
.org-chart-links .org-chart-link-remove rect {
  fill: transparent;
}
.org-chart-links .org-chart-link-remove text {
  font-size: 18px;
  fill: var(--md-sys-color-on-surface-variant);
}
.org-chart-links .org-chart-link-remove:hover rect, .org-chart-links .org-chart-link-remove:focus-visible rect {
  fill: var(--md-sys-color-surface-variant);
}
.org-chart-links .org-chart-link-remove:hover text {
  fill: var(--md-sys-color-error);
}
.org-chart-links .org-chart-link-remove:focus-visible {
  outline: 1px solid var(--md-sys-color-on-surface);
  border-radius: 50%;
}

.org-chart-links .org-chart-link-hit {
  stroke: transparent;
  stroke-width: 16px;
  pointer-events: stroke;
}

.org-chart-links .org-chart-link-remove rect {
  fill: var(--md-sys-color-surface);
}

@media (hover: hover) and (pointer: fine) {
  .org-chart-links .org-chart-link-remove {
    opacity: 0;
    pointer-events: none;
  }
  .org-chart-links .org-chart-link:hover .org-chart-link-remove,
  .org-chart-links .org-chart-link:focus-within .org-chart-link-remove {
    opacity: 1;
    pointer-events: auto;
  }
}
.org-chart-links .org-chart-link-label-empty {
  opacity: 0;
}

.org-chart-links .org-chart-link:hover .org-chart-link-label-empty,
.org-chart-links .org-chart-link:focus-within .org-chart-link-label-empty {
  opacity: 1;
}

.tippy-box[data-theme~=materialize] {
  background-color: var(--md-sys-color-inverse-surface);
  color: var(--md-sys-color-inverse-on-surface);
}
.tippy-box[data-theme~=materialize] > .tippy-backdrop {
  background-color: var(--md-sys-color-inverse-surface);
}
.tippy-box[data-theme~=materialize] > .tippy-arrow {
  color: var(--md-sys-color-inverse-surface);
}

:where(crazy-button, regular-btn) {
  cursor: pointer;
}

:where(crazy-button[disabled], regular-btn[disabled]) {
  cursor: default;
}

:is(crazy-button, regular-btn) {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  vertical-align: middle;
  max-width: 100%;
}
:is(crazy-button, regular-btn) > .btn, :is(crazy-button, regular-btn) > .btn-split > .btn {
  position: relative;
  cursor: inherit;
}
:is(crazy-button, regular-btn) .btn > img {
  width: var(--button-icon);
  height: var(--button-icon);
  -o-object-fit: contain;
     object-fit: contain;
}
:is(crazy-button, regular-btn) .btn.btn-icon[part=button] > img {
  display: block;
  width: 100%;
  height: 100%;
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: inherit;
}
:is(crazy-button, regular-btn) .btn > i {
  color: inherit;
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
}
:is(crazy-button, regular-btn) slot {
  display: contents;
}
:is(crazy-button, regular-btn)[size=small] .btn {
  --button-height: 30px;
}
:is(crazy-button, regular-btn)[size=extra-large] .btn {
  --button-height: 100px;
}

:where(h1, h2, h3, h4, h5, h6):has(> :where(crazy-button, regular-btn)) {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
:where(h1, h2, h3, h4, h5, h6):has(> :where(crazy-button, regular-btn)) > :where(crazy-button, regular-btn) {
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
  line-height: 0;
}

.btn-group > :is(crazy-button, regular-btn) {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 0;
      -ms-flex: 1 1 0px;
          flex: 1 1 0;
  min-width: 0;
}
.btn-group > :is(crazy-button, regular-btn) > .btn {
  width: 100%;
}

.btn-group-standard > :is(crazy-button, regular-btn):has(> .btn:hover:not(:disabled)) {
  -webkit-box-flex: 1.2;
  -webkit-flex-grow: 1.2;
      -ms-flex-positive: 1.2;
          flex-grow: 1.2;
}

.btn-group-connected > :is(crazy-button, regular-btn) > .btn.btn-expressive {
  border-radius: 4px;
}
.btn-group-connected > :is(crazy-button, regular-btn):first-child > .btn {
  border-start-start-radius: 999px;
  border-end-start-radius: 999px;
}
.btn-group-connected > :is(crazy-button, regular-btn):last-child > .btn {
  border-start-end-radius: 999px;
  border-end-end-radius: 999px;
}

:is(crazy-button, regular-btn) > .btn.btn-rail {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 5px;
  width: 88px;
  height: auto;
  min-height: 76px;
  padding: 8px 0;
  border: 0;
  border-radius: 16px;
  background: transparent;
  -webkit-box-shadow: none;
          box-shadow: none;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 13px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: normal;
  text-transform: none;
  text-decoration: none;
  text-align: center;
  white-space: normal;
}
:is(crazy-button, regular-btn) > .btn.btn-rail .m3-rail-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 32px;
  border-radius: 18px;
}
:is(crazy-button, regular-btn) > .btn.btn-rail .m3-rail-icon > i {
  position: static;
  margin: 0;
  -webkit-transform: none;
          transform: none;
  color: inherit;
  font-size: 28px;
  line-height: 1;
}
:is(crazy-button, regular-btn) > .btn.btn-rail .m3-rail-icon > img {
  width: 28px;
  height: 28px;
  -o-object-fit: contain;
     object-fit: contain;
}
:is(crazy-button, regular-btn) > .btn.btn-rail:hover:not(:disabled) .m3-rail-icon {
  background: var(--md-sys-color-surface-variant);
}
:is(crazy-button, regular-btn) > .btn.btn-rail[aria-current]:not([aria-current=false]) .m3-rail-icon {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}
:is(crazy-button, regular-btn) > .btn.btn-rail:focus-visible {
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: -2px;
}
:is(crazy-button, regular-btn) > .btn.btn-rail:disabled {
  opacity: 0.38;
  cursor: default;
}

.input-field > .prefix ~ input:not([type=checkbox]):not([type=radio]),
.input-field > .prefix ~ textarea {
  padding-left: 52px;
}
.input-field > .suffix ~ input:not([type=checkbox]):not([type=radio]),
.input-field > .suffix ~ textarea {
  padding-right: 52px;
}
.input-field:not(.outlined) > input:not([type=checkbox]):not([type=radio]):not(:focus):not(:-moz-placeholder) {
  padding-top: 20px;
}
.input-field:not(.outlined) > input:not([type=checkbox]):not([type=radio]):not(:focus):not(:-ms-input-placeholder) {
  padding-top: 20px;
}
.input-field:not(.outlined) > input:not([type=checkbox]):not([type=radio]):not(:focus):not(:placeholder-shown) {
  padding-top: 20px;
}

:is(crazy-loading, loading-screen-btn) {
  --loading-size: 7rem;
  --loading-color: var(--md-sys-color-primary);
  --loading-background: var(--md-sys-color-surface-container, var(--md-sys-color-surface));
  --loading-thickness: 3px;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  vertical-align: middle;
}
:is(crazy-loading, loading-screen-btn)[size=small] {
  --loading-size: 4rem;
}
:is(crazy-loading, loading-screen-btn)[size=normal] {
  --loading-size: 7rem;
}
:is(crazy-loading, loading-screen-btn)[size=large] {
  --loading-size: 10rem;
}
:is(crazy-loading, loading-screen-btn)[hidden] {
  display: none;
}
:is(crazy-loading, loading-screen-btn) > .loading {
  --loading-size: inherit;
  --loading-color: inherit;
  --loading-background: inherit;
  --loading-thickness: inherit;
}
:is(crazy-loading, loading-screen-btn) .loading-content > slot {
  display: contents;
}

loading-screen-btn {
  --loading-size: 10rem;
}

.number-input-stepper {
  display: grid;
  grid-template-columns: 40px 40px minmax(60px, 1fr) 40px 40px;
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  max-width: 100%;
  border: 1px solid var(--md-sys-color-outline);
  border-radius: 16px;
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  overflow: hidden;
}
.number-input-stepper:focus-within {
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: 2px;
}
.number-input-stepper > input[type=text]:not(.browser-default),
.number-input-stepper > input[type=text]:not(.browser-default):focus:not([readonly]) {
  width: 100%;
  min-width: 0;
  height: 56px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border: 0;
  border-radius: 0;
  outline: 0;
  -webkit-box-shadow: none;
          box-shadow: none;
  padding: 0 4px;
  margin: 0;
  background: transparent;
  color: inherit;
  text-align: center;
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
}
.number-input-stepper > button {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0;
  min-height: 56px;
  border: 0;
  border-radius: 0;
  padding: 4px;
  background: color-mix(in srgb, var(--md-sys-color-primary-container) 55%, var(--md-sys-color-surface));
  color: var(--md-sys-color-on-primary-container);
  cursor: pointer;
}
.number-input-stepper > button > span {
  font-size: 28px;
  line-height: 1;
}
.number-input-stepper > button > small {
  font-size: 11px;
  line-height: 1.2;
}
.number-input-stepper > button[data-large=true] {
  background: var(--md-sys-color-primary-container);
}
.number-input-stepper > button:hover:not(:disabled) {
  background: color-mix(in srgb, var(--md-sys-color-primary) 12%, var(--md-sys-color-primary-container));
}
.number-input-stepper > button:focus-visible {
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: -3px;
}
.number-input-stepper > button:disabled {
  opacity: 0.38;
  cursor: default;
}

.number-input-stepper:has(> input[data-number-variant=outlined]) {
  border-radius: 4px;
}
.number-input-stepper:has(> input[data-number-variant=outlined]):focus-within {
  outline: none;
  border-color: var(--md-sys-color-primary);
  -webkit-box-shadow: inset 0 0 0 1px var(--md-sys-color-primary);
          box-shadow: inset 0 0 0 1px var(--md-sys-color-primary);
}

.number-input-stepper:has(> input[data-number-variant=filled]) {
  border: 0;
  border-bottom: 1px solid var(--md-sys-color-on-surface-variant);
  border-radius: 4px 4px 0 0;
  background: var(--md-sys-color-surface-container-highest, var(--md-sys-color-surface-variant));
}
.number-input-stepper:has(> input[data-number-variant=filled]):focus-within {
  outline: none;
  border-bottom-color: var(--md-sys-color-primary);
  -webkit-box-shadow: 0 1px 0 0 var(--md-sys-color-primary);
          box-shadow: 0 1px 0 0 var(--md-sys-color-primary);
}

.input-field:has(> .number-input-stepper) > label {
  position: static;
  display: block;
  -webkit-transform: none;
          transform: none;
  font-size: 12px;
  margin-bottom: 4px;
}
.input-field:has(> .number-input-stepper):focus-within > label {
  color: var(--md-sys-color-primary);
}

.m3-rail {
  position: fixed;
  inset: 0 auto 0 0;
  width: 104px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  overflow-y: auto;
  padding: 16px 4px;
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface-variant);
}

.m3-rail-nav {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 100%;
  height: auto;
  line-height: normal;
  background: transparent;
  -webkit-box-shadow: none;
          box-shadow: none;
}
.m3-rail-nav > a {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 5px;
  min-height: 76px;
  padding: 8px 0;
  color: inherit;
  font-size: 13px;
  text-decoration: none;
  text-align: center;
  border-radius: 16px;
}
.m3-rail-nav > a:hover .m3-rail-icon {
  background: var(--md-sys-color-surface-variant);
}
.m3-rail-nav > a[aria-current=page] .m3-rail-icon {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}
.m3-rail-nav > a:focus-visible {
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: -2px;
}

.m3-rail-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 32px;
  border-radius: 18px;
}

.m3-rail-icon .material-icons {
  font-size: 28px;
}

.m3-rail-icon img {
  width: 28px;
  height: 28px;
}

.m3-rail-actions {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 36px;
}
.m3-rail-actions button {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid var(--md-sys-color-outline);
  padding: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
}
.m3-rail-actions button:hover {
  background: var(--md-sys-color-surface-variant);
}
.m3-rail-actions button:focus-visible {
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: 3px;
}
.m3-rail-actions .material-icons {
  font-size: 28px;
}

@media (max-width: 480px) {
  .m3-rail {
    width: 88px;
  }
  .m3-rail-nav > a {
    font-size: 12px;
    min-height: 72px;
  }
}
/* Crowded navigation options. Scroll keeps one compact row; wrap grows the
   bar vertically and preserves every item without clipping. */
.navbar:is(.appbar, .appbar-bordered).navbar-scroll > .nav-wrapper {
  position: relative;
  -webkit-flex-wrap: nowrap;
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}

.navbar:is(.appbar, .appbar-bordered).navbar-scroll > .nav-wrapper > ul:not(.dropdown-content) {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  min-width: -webkit-max-content;
  min-width: -moz-max-content;
  min-width: max-content;
}

.navbar:is(.appbar, .appbar-bordered).navbar-scroll {
  position: relative;
  isolation: isolate;
}

.navbar:is(.appbar, .appbar-bordered).navbar-scroll > .nav-wrapper {
  position: relative;
  z-index: 0;
}

.navbar:is(.appbar, .appbar-bordered).navbar-scroll::after {
  content: "";
  position: absolute;
  z-index: 20;
  right: 0;
  top: 0;
  width: 15px;
  height: 100%;
  pointer-events: none;
  opacity: var(--scroll-right-fade, 1) !important;
  background: linear-gradient(to right, transparent, var(--md-sys-color-surface-variant));
  -webkit-transition: opacity 160ms ease;
  transition: opacity 160ms ease;
}

.navbar:is(.appbar, .appbar-bordered).navbar-scroll::before {
  content: "";
  position: absolute;
  z-index: 20;
  left: 0;
  top: 0;
  width: 15px;
  height: 100%;
  pointer-events: none;
  opacity: var(--scroll-left-fade, 1) !important;
  background: linear-gradient(to left, transparent, var(--md-sys-color-surface-variant));
  -webkit-transition: opacity 160ms ease;
  transition: opacity 160ms ease;
}

.navbar:is(.appbar, .appbar-bordered).navbar-scroll:not(.is-scroll-end)::after {
  opacity: var(--scroll-right-fade, 0) !important;
}

.navbar:is(.appbar, .appbar-bordered).navbar-scroll.is-scroll-start::before {
  opacity: 0;
}

.navbar:is(.appbar, .appbar-bordered).navbar-scroll:not(.is-scroll-start)::before {
  opacity: var(--scroll-left-fade, 0) !important;
}

/* Fixed edge masks. These are real children of the navbar (not descendants
   of the scrolling row), so they cannot move with the links. */
.navbar:is(.appbar, .appbar-bordered).navbar-scroll > .navbar-scroll-fade {
  display: block;
  position: absolute;
  z-index: 1000;
  top: 0;
  width: 28px;
  height: 100%;
  pointer-events: none;
  opacity: 1;
  -webkit-transition: opacity 160ms ease;
  transition: opacity 160ms ease;
}

.navbar:is(.appbar, .appbar-bordered).navbar-scroll > .navbar-scroll-fade-left {
  left: 0;
  background: linear-gradient(to left, transparent, var(--md-sys-color-surface-variant));
}

.navbar:is(.appbar, .appbar-bordered).navbar-scroll > .navbar-scroll-fade-right {
  right: 0;
  background: linear-gradient(to right, transparent, var(--md-sys-color-surface-variant));
}

.navbar:is(.appbar, .appbar-bordered).navbar-scroll > .navbar-scroll-fade.is-hidden {
  opacity: 0;
}

.swal2-popup.popup.popup-stepper-dialog {
  width: min(36rem, 100vw - 2rem);
}
.swal2-popup.popup.popup-stepper-dialog .popup-stepper {
  text-align: start;
}
.swal2-popup.popup.popup-stepper-dialog .popup-stepper-progress {
  display: block;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 100%;
  height: 4px;
  border: 0;
  border-radius: 999px;
  overflow: hidden;
  background: var(--md-sys-color-surface-variant);
  color: var(--md-sys-color-primary);
}
.swal2-popup.popup.popup-stepper-dialog .popup-stepper-progress::-webkit-progress-bar {
  background: var(--md-sys-color-surface-variant);
}
.swal2-popup.popup.popup-stepper-dialog .popup-stepper-progress::-webkit-progress-value {
  background: var(--md-sys-color-primary);
}
.swal2-popup.popup.popup-stepper-dialog .popup-stepper-progress::-moz-progress-bar {
  background: var(--md-sys-color-primary);
}
.swal2-popup.popup.popup-stepper-dialog .popup-stepper-list {
  list-style: none;
  margin: 24px 0;
  padding: 0;
}
.swal2-popup.popup.popup-stepper-dialog .popup-stepper-step {
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 16px;
  -webkit-padding-after: 24px;
          padding-block-end: 24px;
  color: var(--md-sys-color-on-surface-variant);
}
.swal2-popup.popup.popup-stepper-dialog .popup-stepper-step:not(:last-child)::before {
  content: "";
  position: absolute;
  inset-inline-start: 17px;
  top: 40px;
  bottom: 4px;
  width: 2px;
  background: var(--md-sys-color-outline-variant);
}
.swal2-popup.popup.popup-stepper-dialog .popup-stepper-step:last-child {
  -webkit-padding-after: 0;
          padding-block-end: 0;
}
.swal2-popup.popup.popup-stepper-dialog .popup-stepper-step strong {
  display: block;
  color: var(--md-sys-color-on-surface);
  overflow-wrap: anywhere;
}
.swal2-popup.popup.popup-stepper-dialog .popup-stepper-step p {
  margin: 4px 0 0;
  font-size: 0.875rem;
  overflow-wrap: anywhere;
}
.swal2-popup.popup.popup-stepper-dialog .popup-stepper-step[data-state=active] .popup-stepper-marker {
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}
.swal2-popup.popup.popup-stepper-dialog .popup-stepper-step[data-state=active] .popup-stepper-marker::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 2px solid var(--md-sys-color-primary);
  border-inline-end-color: transparent;
  border-radius: 50%;
  -webkit-animation: popup-stepper-spin 1s linear infinite;
          animation: popup-stepper-spin 1s linear infinite;
}
.swal2-popup.popup.popup-stepper-dialog .popup-stepper-step[data-state=waiting] .popup-stepper-marker {
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}
.swal2-popup.popup.popup-stepper-dialog .popup-stepper-step[data-state=complete] .popup-stepper-marker {
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}
.swal2-popup.popup.popup-stepper-dialog .popup-stepper-step[data-state=error] .popup-stepper-marker {
  background: var(--md-sys-color-error-container);
  color: var(--md-sys-color-on-error-container);
}
.swal2-popup.popup.popup-stepper-dialog .popup-stepper-step[data-state=error] p {
  color: var(--md-sys-color-error);
}
.swal2-popup.popup.popup-stepper-dialog .popup-stepper-marker {
  position: relative;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--md-sys-color-surface-variant);
  color: var(--md-sys-color-on-surface-variant);
  font-weight: 600;
}
.swal2-popup.popup.popup-stepper-dialog .popup-stepper-content:not(:empty) {
  margin-top: 16px;
}
.swal2-popup.popup.popup-stepper-dialog .popup-stepper-validation {
  color: var(--md-sys-color-error);
}
.swal2-popup.popup.popup-stepper-dialog .popup-stepper-content .input-field {
  margin-block: 16px 8px;
}
.swal2-popup.popup.popup-stepper-dialog .popup-stepper-state {
  display: block;
  font-size: 0.75rem;
}
.swal2-popup.popup.popup-stepper-dialog .popup-stepper-status {
  font-size: 0.875rem;
  color: var(--md-sys-color-on-surface-variant);
}

@-webkit-keyframes popup-stepper-spin {
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes popup-stepper-spin {
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .swal2-popup.popup .popup-stepper-marker::after {
    -webkit-animation: none !important;
            animation: none !important;
  }
}
.rich-textarea-field {
  margin-block: 24px;
}
.rich-textarea-field > label {
  display: block;
  margin-bottom: 8px;
  color: var(--md-sys-color-on-surface);
  font-size: 0.875rem;
  font-weight: 500;
}
.rich-textarea-field > textarea[hidden] {
  display: none !important;
}

.rich-textarea {
  --rich-textarea-min-height: 160px;
  min-width: 0;
  border: 1px solid var(--md-sys-color-outline);
  border-radius: 12px;
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  -webkit-transition: border-color 120ms ease, -webkit-box-shadow 120ms ease;
  transition: border-color 120ms ease, -webkit-box-shadow 120ms ease;
  transition: border-color 120ms ease, box-shadow 120ms ease;
  transition: border-color 120ms ease, box-shadow 120ms ease, -webkit-box-shadow 120ms ease;
}
.rich-textarea:focus-within {
  border-color: var(--md-sys-color-primary);
  -webkit-box-shadow: 0 0 0 1px var(--md-sys-color-primary);
          box-shadow: 0 0 0 1px var(--md-sys-color-primary);
}
.rich-textarea.is-invalid {
  border-color: var(--md-sys-color-error);
}
.rich-textarea.is-invalid:focus-within {
  -webkit-box-shadow: 0 0 0 1px var(--md-sys-color-error);
          box-shadow: 0 0 0 1px var(--md-sys-color-error);
}
.rich-textarea.is-disabled {
  opacity: 0.5;
  background: var(--md-sys-color-surface-variant);
}
.rich-textarea .ql-toolbar.ql-snow {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  gap: 4px;
  padding: 8px;
  border: 0;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  border-radius: 11px 11px 0 0;
  background: var(--md-sys-color-surface-container, var(--md-sys-color-surface-variant));
  font-family: inherit;
}
.rich-textarea .ql-toolbar.ql-snow .ql-formats {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0 8px 0 0;
}
.rich-textarea .ql-toolbar.ql-snow button {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 36px;
  height: 36px;
  padding: 8px;
  border: 0;
  border-radius: 8px;
  color: var(--md-sys-color-on-surface-variant);
  background: transparent;
}
.rich-textarea .ql-toolbar.ql-snow button svg {
  width: 20px;
  height: 20px;
}
.rich-textarea .ql-toolbar.ql-snow button:hover, .rich-textarea .ql-toolbar.ql-snow button.ql-active {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}
.rich-textarea .ql-toolbar.ql-snow button:focus-visible {
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: -2px;
}
.rich-textarea .ql-toolbar.ql-snow .ql-picker {
  height: 36px;
  color: var(--md-sys-color-on-surface-variant);
}
.rich-textarea .ql-toolbar.ql-snow .ql-picker-label {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  min-height: 36px;
  border: 0;
  border-radius: 8px;
}
.rich-textarea .ql-toolbar.ql-snow .ql-picker-label:focus-visible, .rich-textarea .ql-toolbar.ql-snow .ql-picker-item:focus-visible {
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: -2px;
}
.rich-textarea .ql-toolbar.ql-snow .ql-picker-options {
  z-index: 10;
  padding: 8px;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: 8px;
  background: var(--md-sys-color-surface);
  -webkit-box-shadow: 0 4px 12px color-mix(in srgb, var(--md-sys-color-shadow) 16%, transparent);
          box-shadow: 0 4px 12px color-mix(in srgb, var(--md-sys-color-shadow) 16%, transparent);
}
.rich-textarea .ql-toolbar.ql-snow .ql-picker-item {
  padding: 6px 8px;
  border-radius: 4px;
}
.rich-textarea .ql-toolbar.ql-snow .ql-picker-item:hover, .rich-textarea .ql-toolbar.ql-snow .ql-picker-item.ql-selected {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}
.rich-textarea .ql-snow .ql-stroke {
  stroke: currentColor;
}
.rich-textarea .ql-snow .ql-fill {
  fill: currentColor;
}
.rich-textarea .ql-snow .ql-stroke.ql-fill {
  fill: currentColor;
}
.rich-textarea .ql-snow .ql-picker-label:hover, .rich-textarea .ql-snow .ql-picker-label.ql-active {
  color: var(--md-sys-color-primary);
}
.rich-textarea .ql-snow button:hover .ql-stroke, .rich-textarea .ql-snow button.ql-active .ql-stroke,
.rich-textarea .ql-snow .ql-picker-label:hover .ql-stroke, .rich-textarea .ql-snow .ql-picker-label.ql-active .ql-stroke {
  stroke: currentColor;
}
.rich-textarea .ql-snow button:hover .ql-fill, .rich-textarea .ql-snow button.ql-active .ql-fill {
  fill: currentColor;
}
.rich-textarea .ql-snow a {
  color: var(--md-sys-color-primary);
}
.rich-textarea .ql-container.ql-snow {
  height: auto;
  border: 0;
  border-radius: 0 0 11px 11px;
  font-family: inherit;
  font-size: 1rem;
}
.rich-textarea .ql-container.ql-snow:first-child {
  border-radius: 11px;
}
.rich-textarea .ql-editor {
  min-height: var(--rich-textarea-min-height);
  max-height: var(--rich-textarea-max-height, 480px);
  padding: 16px;
  line-height: 1.6;
  font-family: var(--rich-textarea-font-family, inherit);
  color: inherit;
  background: transparent;
  border-radius: inherit;
  overflow-wrap: anywhere;
  outline: none;
}
.rich-textarea .ql-editor.ql-blank::before {
  left: 16px;
  right: 16px;
  color: var(--md-sys-color-on-surface-variant);
  font-style: normal;
}
.rich-textarea .ql-editor strong, .rich-textarea .ql-editor b {
  font-weight: 800;
}
.rich-textarea .ql-editor blockquote {
  border-color: var(--md-sys-color-outline);
}
.rich-textarea .ql-tooltip {
  z-index: 11;
  max-width: 100%;
  white-space: normal;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: 8px;
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  -webkit-box-shadow: 0 4px 12px color-mix(in srgb, var(--md-sys-color-shadow) 16%, transparent);
          box-shadow: 0 4px 12px color-mix(in srgb, var(--md-sys-color-shadow) 16%, transparent);
}
.rich-textarea .ql-tooltip input[type=text] {
  width: 180px;
  max-width: 100%;
  height: 32px;
  margin: 4px 0;
  padding: 4px 8px;
  border: 1px solid var(--md-sys-color-outline);
  border-radius: 4px;
  background: var(--md-sys-color-surface);
  color: inherit;
}
.rich-textarea .rich-textarea-error {
  padding: 8px 16px;
  color: var(--md-sys-color-error);
  font-size: 0.75rem;
}
.rich-textarea [hidden] {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .rich-textarea {
    -webkit-transition: none;
    transition: none;
  }
}
/* App-bar content geometry and surface variants. */
.navbar .nav-icon-img {
  display: block;
  height: 24px;
  width: 24px;
  -o-object-fit: contain;
     object-fit: contain;
}

.navbar .navbar-search-toolbar {
  width: auto;
  margin: 0 0 0 auto;
  padding: 4px;
  overflow: visible;
}

/* Inset surfaces retain their height at desktop and mobile sizes. */
.navbar:is(.appbar, .appbar-bordered).navbar-rounded:not(.nav-extended):not(.navbar-wrap) {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  height: 64px;
  margin: 8px 0;
  padding: 4px;
  border-radius: 16px;
  overflow: hidden;
}

.navbar:is(.appbar, .appbar-bordered).navbar-rounded:not(.nav-extended):not(.navbar-wrap) > .nav-wrapper {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 56px;
      -ms-flex: 0 0 56px;
          flex: 0 0 56px;
  height: 56px;
  border-radius: 11px;
  -webkit-transform: none;
          transform: none;
}

.navbar:is(.appbar, .appbar-bordered).navbar-full {
  width: 100%;
  margin: 0;
  padding: 0;
  border-radius: 0;
  border-left: 0;
  border-right: 0;
}

/* Dropdown triggers: keep the label and arrow in one predictable hit
   target instead of inheriting the legacy floated-icon offsets. */
.navbar:is(.appbar, .appbar-bordered) .dropdown-trigger {
  display: -webkit-inline-box !important;
  display: -webkit-inline-flex !important;
  display: -ms-inline-flexbox !important;
  display: inline-flex !important;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 8px;
  width: -webkit-max-content !important;
  width: -moz-max-content !important;
  width: max-content !important;
  max-width: none;
  height: 40px;
  min-height: 40px;
  padding: 0 14px 0 16px;
  line-height: 1;
}

.navbar:is(.appbar, .appbar-bordered) .dropdown-trigger > .material-icons {
  display: inline-block !important;
  position: static !important;
  float: none !important;
  width: 20px;
  height: 20px;
  margin: 0;
  line-height: 20px;
  -webkit-transition: -webkit-transform 160ms ease;
  transition: -webkit-transform 160ms ease;
  transition: transform 160ms ease;
  transition: transform 160ms ease, -webkit-transform 160ms ease;
}

.navbar:is(.appbar, .appbar-bordered) .nav-wrapper > ul > li:has(> .dropdown-trigger) {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  height: 40px;
  margin: 0;
  padding: 0;
}

.navbar:is(.appbar, .appbar-bordered) .nav-wrapper > ul > li:has(> .dropdown-trigger) > .dropdown-trigger {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  -webkit-align-self: center;
      -ms-flex-item-align: center;
          align-self: center;
  margin: 0;
}

.navbar:is(.appbar, .appbar-bordered) .dropdown-trigger[aria-expanded=true] > .material-icons.right {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

/* Icon links: center standalone icons inside their 40px hit targets. */
.navbar:is(.appbar, .appbar-bordered) .nav-wrapper > ul > li:has(> a:not(.btn):not(.btn-large):not(.btn-floating):not(.dropdown-trigger) > .material-icons:only-child) {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 40px;
      -ms-flex: 0 0 40px;
          flex: 0 0 40px;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
}

.navbar:is(.appbar, .appbar-bordered) .nav-wrapper > ul > li > a:not(.btn):not(.btn-large):not(.btn-floating):not(.dropdown-trigger):has(> .material-icons:only-child) {
  display: inline-grid !important;
  place-items: center;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 40px !important;
  height: 40px;
  min-height: 40px;
  padding: 0 !important;
  line-height: 1;
}

.navbar:is(.appbar, .appbar-bordered) .nav-wrapper > ul > li > a:not(.btn):not(.btn-large):not(.btn-floating):not(.dropdown-trigger) > .material-icons:only-child {
  display: block !important;
  position: static !important;
  float: none !important;
  width: 24px;
  height: 24px;
  margin: 0 !important;
  line-height: 24px;
  text-align: center;
}

.navbar:is(.appbar, .appbar-bordered) .nav-wrapper > ul > li > a:not(.btn):not(.btn-large):not(.btn-floating):not(.dropdown-trigger):has(> .material-icons.left),
.navbar:is(.appbar, .appbar-bordered) .nav-wrapper > ul > li > a:not(.btn):not(.btn-large):not(.btn-floating):not(.dropdown-trigger):has(> .material-icons.right) {
  display: -webkit-inline-box !important;
  display: -webkit-inline-flex !important;
  display: -ms-inline-flexbox !important;
  display: inline-flex !important;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: -webkit-max-content !important;
  width: -moz-max-content !important;
  width: max-content !important;
  min-width: 0;
  height: 40px;
  min-height: 40px;
  padding: 0 12px !important;
  line-height: 1;
  white-space: nowrap;
}

.navbar:is(.appbar, .appbar-bordered) .nav-wrapper > ul > li > a:not(.btn):not(.btn-large):not(.btn-floating):not(.dropdown-trigger) > .material-icons.left,
.navbar:is(.appbar, .appbar-bordered) .nav-wrapper > ul > li > a:not(.btn):not(.btn-large):not(.btn-floating):not(.dropdown-trigger) > .material-icons.right {
  display: block !important;
  position: static !important;
  float: none !important;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 24px;
      -ms-flex: 0 0 24px;
          flex: 0 0 24px;
  width: 24px;
  height: 24px;
  margin: 0 !important;
  line-height: 24px;
  text-align: center;
}

.navbar:is(.appbar, .appbar-bordered) .nav-wrapper > ul > li:has(> a:not(.btn):not(.btn-large):not(.btn-floating):not(.dropdown-trigger) > .material-icons.left),
.navbar:is(.appbar, .appbar-bordered) .nav-wrapper > ul > li:has(> a:not(.btn):not(.btn-large):not(.btn-floating):not(.dropdown-trigger) > .material-icons.right) {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  height: 40px;
}

/* Button rows: normalize the item row and prevent text-plus-icon buttons
   from being mistaken for standalone icon buttons. */
.navbar:is(.appbar, .appbar-bordered) .nav-wrapper > ul > li:has(> :is(.btn, .btn-large)) {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  height: 48px;
  margin: 0;
  padding: 0;
}

.navbar:is(.appbar, .appbar-bordered) .nav-wrapper > ul > li > a.btn,
.navbar:is(.appbar, .appbar-bordered) .nav-wrapper > ul > li > a.btn-large {
  display: -webkit-inline-box !important;
  display: -webkit-inline-flex !important;
  display: -ms-inline-flexbox !important;
  display: inline-flex !important;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: -webkit-max-content !important;
  width: -moz-max-content !important;
  width: max-content !important;
  min-width: 104px;
  height: 40px;
  min-height: 40px;
  margin: 0 !important;
  padding: 0 20px !important;
  line-height: 1;
  white-space: nowrap;
}

.navbar:is(.appbar, .appbar-bordered) .nav-wrapper > ul > li > a.btn-large {
  min-width: 144px;
  height: 48px;
  min-height: 48px;
  padding-inline: 24px !important;
}

.navbar:is(.appbar, .appbar-bordered) .nav-wrapper > ul > li > a.btn:has(> .material-icons),
.navbar:is(.appbar, .appbar-bordered) .nav-wrapper > ul > li > a.btn-large:has(> .material-icons) {
  gap: 8px;
}

.navbar:is(.appbar, .appbar-bordered) .nav-wrapper > ul > li > a.btn > .material-icons,
.navbar:is(.appbar, .appbar-bordered) .nav-wrapper > ul > li > a.btn-large > .material-icons {
  display: block !important;
  position: static !important;
  float: none !important;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 20px;
      -ms-flex: 0 0 20px;
          flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin: 0 !important;
  line-height: 20px;
}

/* Extended navbar tabs: use the navbar's readable foreground instead of the
   low-contrast primary token inherited by transparent tabs. */
.navbar:is(.appbar, .appbar-bordered) .nav-content,
.navbar:is(.appbar, .appbar-bordered) .nav-content .tabs {
  background: var(--md-sys-color-surface-variant);
}

.navbar:is(.appbar, .appbar-bordered) .nav-content .tabs > .tab > a {
  color: var(--md-sys-color-on-surface) !important;
  opacity: 0.92;
}

.navbar:is(.appbar, .appbar-bordered) .nav-content .tabs > .tab > a.active {
  color: var(--md-sys-color-on-surface) !important;
  opacity: 1;
  font-weight: 600;
}

.navbar:is(.appbar, .appbar-bordered) .nav-content .tabs > .tab.disabled > a {
  color: var(--md-sys-color-on-surface) !important;
  opacity: 0.5;
}

.navbar:is(.appbar, .appbar-bordered) .nav-content .tabs > .indicator {
  background-color: var(--md-sys-color-on-surface) !important;
}

.navbar:is(.appbar, .appbar-bordered) .sidenav-trigger {
  display: -webkit-inline-box !important;
  display: -webkit-inline-flex !important;
  display: -ms-inline-flexbox !important;
  display: inline-flex !important;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 40px;
      -ms-flex: 0 0 40px;
          flex: 0 0 40px;
  width: 40px;
  height: 40px;
  min-height: 40px;
  margin: 0;
  padding: 0;
  line-height: 1;
  color: var(--md-sys-color-on-surface) !important;
}

.navbar:is(.appbar, .appbar-bordered) .sidenav-trigger > .material-icons {
  display: block !important;
  position: static !important;
  float: none !important;
  width: 24px;
  height: 24px;
  margin: 0 !important;
  line-height: 24px;
  text-align: center;
}

.navbar:is(.appbar, .appbar-bordered).navbar-wrap > .nav-wrapper {
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  height: auto;
  min-height: 56px;
  padding-bottom: 8px;
  overflow: visible;
  row-gap: 8px;
}

.navbar:is(.appbar, .appbar-bordered).navbar-wrap {
  height: auto;
  min-height: 56px;
}

.navbar:is(.appbar, .appbar-bordered).navbar-wrap > .nav-wrapper > ul:not(.dropdown-content) {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 100%;
      -ms-flex: 1 1 100%;
          flex: 1 1 100%;
  padding-left: 0;
  height: auto !important;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  white-space: normal;
}

.navbar:is(.appbar, .appbar-bordered).navbar-wrap > .nav-wrapper > ul:not(.dropdown-content) > li {
  height: auto !important;
}

.navbar:is(.appbar, .appbar-bordered) ul:not(.dropdown-content) > li > a {
  white-space: nowrap;
}

.navbar:is(.appbar, .appbar-bordered):not(.navbar-wrap) .nav-wrapper > ul.ml-auto:not(.nav-actions):not(.dropdown-content) {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  max-width: none;
}

/* Separators used as list items need an explicit display/height; otherwise
   navbar item rules can collapse the one-pixel divider. */
.navbar:is(.appbar, .appbar-bordered) .nav-actions > li.nav-separator {
  display: block !important;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 1px;
      -ms-flex: 0 0 1px;
          flex: 0 0 1px;
  width: 1px;
  height: 24px;
  margin: 0 4px;
  padding: 0;
  background: var(--md-sys-color-on-surface-variant);
  opacity: 0.7;
  border: 0;
  visibility: visible !important;
}

@media (prefers-reduced-motion: reduce) {
  .navbar:is(.appbar, .appbar-bordered) .dropdown-trigger > .material-icons {
    -webkit-transition: none;
    transition: none;
  }
}
.otp-input {
  --otp-slot-size: 48px;
  --otp-slot-gap: 8px;
  --otp-slot-radius: 4px;
  position: relative;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  max-width: 100%;
  margin-block: 8px;
  margin-left: auto;
  margin-right: auto;
}
.otp-input[data-otp-align=left] {
  margin-left: 0;
  margin-right: auto;
}
.otp-input[data-otp-align=right] {
  margin-left: auto;
  margin-right: 0;
}
.otp-input {
  border-radius: var(--otp-slot-radius);
}
.otp-input > input.otp-input-native {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0;
  font-size: 16px;
  z-index: 1;
}
.otp-input .otp-input-slots {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--otp-slot-gap);
}
.otp-input .otp-input-slot {
  display: inline-grid;
  place-items: center;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 var(--otp-slot-size);
      -ms-flex: 0 0 var(--otp-slot-size);
          flex: 0 0 var(--otp-slot-size);
  width: var(--otp-slot-size);
  height: calc(var(--otp-slot-size) + 8px);
  border: 1px solid var(--md-sys-color-on-surface-variant);
  border-radius: var(--otp-slot-radius);
  background: transparent;
  color: var(--md-sys-color-on-surface);
  font-size: 24px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  -webkit-transition: border-color 120ms ease, background-color 120ms ease, -webkit-box-shadow 120ms ease;
  transition: border-color 120ms ease, background-color 120ms ease, -webkit-box-shadow 120ms ease;
  transition: border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
  transition: border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease, -webkit-box-shadow 120ms ease;
}
.otp-input .otp-input-slot.is-selected {
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}
.otp-input .otp-input-slot.is-active {
  border: 2px solid var(--input-color, var(--md-sys-color-primary));
}
.otp-input .otp-input-group-start {
  -webkit-margin-start: var(--otp-slot-gap);
     -moz-margin-start: var(--otp-slot-gap);
          margin-inline-start: var(--otp-slot-gap);
}
.otp-input .otp-input-separator {
  color: var(--md-sys-color-on-surface-variant);
  white-space: pre;
}
.otp-input:hover:not(:has(> input:disabled)) .otp-input-slot:not(.is-active) {
  border-color: var(--md-sys-color-on-surface);
}
.otp-input:has(> input:disabled) {
  opacity: 0.38;
  cursor: not-allowed;
}
.otp-input[data-invalid] .otp-input-slot, .otp-input:has(> input[aria-invalid=true]) .otp-input-slot, .otp-input:has(> input:user-invalid) .otp-input-slot {
  border-color: var(--md-sys-color-error);
}
.otp-input[data-invalid] .otp-input-slot.is-active, .otp-input:has(> input[aria-invalid=true]) .otp-input-slot.is-active, .otp-input:has(> input:user-invalid) .otp-input-slot.is-active {
  border-width: 2px;
}

@media (max-width: 600px) {
  .otp-input {
    --otp-slot-size: 36px;
    --otp-slot-gap: 4px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .otp-input .otp-input-slot {
    -webkit-transition: none;
    transition: none;
  }
}
@media (forced-colors: active) {
  .otp-input .otp-input-slot {
    border-color: ButtonText;
  }
  .otp-input .otp-input-slot.is-active {
    outline: 2px solid Highlight;
    outline-offset: 2px;
  }
  .otp-input:has(> input:disabled) .otp-input-slot {
    color: GrayText;
    border-color: GrayText;
  }
}
.input-field:has(> .otp-input) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, -webkit-max-content) minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr) minmax(0, max-content) minmax(0, 1fr);
  justify-items: start;
}
.input-field:has(> .otp-input):has(> .otp-input[data-otp-align=left]) {
  grid-template-columns: 0 minmax(0, -webkit-max-content) minmax(0, 1fr);
  grid-template-columns: 0 minmax(0, max-content) minmax(0, 1fr);
}
.input-field:has(> .otp-input):has(> .otp-input[data-otp-align=right]) {
  grid-template-columns: minmax(0, 1fr) minmax(0, -webkit-max-content) 0;
  grid-template-columns: minmax(0, 1fr) minmax(0, max-content) 0;
}
.input-field:has(> .otp-input) > .otp-input {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
}
.input-field:has(> .otp-input) > .otp-input[data-otp-align] {
  margin: 0;
}
.input-field:has(> .otp-input) > label {
  grid-column: 2;
  grid-row: 1;
  max-width: 100%;
  position: static;
  -webkit-box-ordinal-group: 0;
  -webkit-order: -1;
      -ms-flex-order: -1;
          order: -1;
  -webkit-transform: none;
          transform: none;
  margin: 0 0 8px;
  padding: 0;
  font-size: 12px;
  line-height: 1.4;
  background: transparent;
}
.input-field:has(> .otp-input) > .supporting-text {
  grid-column: 2;
  grid-row: 3;
  max-width: 100%;
  padding-inline: 0;
}
.input-field:has(> .otp-input):focus-within > label {
  color: var(--input-color);
}
.input-field:has(> .otp-input):has(input:disabled) > label {
  opacity: 0.38;
}
.input-field:has(> .otp-input).error > label, .input-field:has(> .otp-input).error > .supporting-text, .input-field:has(> .otp-input):has(input[aria-invalid=true]) > label, .input-field:has(> .otp-input):has(input[aria-invalid=true]) > .supporting-text, .input-field:has(> .otp-input):has(.otp-input[data-invalid]) > label, .input-field:has(> .otp-input):has(.otp-input[data-invalid]) > .supporting-text, .input-field:has(> .otp-input):has(input:user-invalid) > label, .input-field:has(> .otp-input):has(input:user-invalid) > .supporting-text {
  color: var(--md-sys-color-error);
}
.input-field:has(> .otp-input).error .otp-input-slot, .input-field:has(> .otp-input):has(input[aria-invalid=true]) .otp-input-slot, .input-field:has(> .otp-input):has(.otp-input[data-invalid]) .otp-input-slot, .input-field:has(> .otp-input):has(input:user-invalid) .otp-input-slot {
  border-color: var(--md-sys-color-error);
}

.input-field:not(.outlined) > .otp-input .otp-input-slot {
  border-width: 0 0 1px;
  border-radius: var(--otp-slot-radius) var(--otp-slot-radius) 0 0;
}
.input-field:not(.outlined) > .otp-input .otp-input-slot.is-active {
  border-width: 0 0 2px;
}

.editor:has(> .editor-workspace) {
  --editor-height: 680px;
  --editor-code-font: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  text-align: left;
  color: var(--md-sys-color-on-surface);
  background: var(--md-sys-color-surface);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: 20px;
  overflow: hidden;
  min-width: 0;
}

.editor-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  height: var(--editor-height);
}

.editor-input-pane {
  display: grid;
  grid-template-rows: minmax(180px, 1.1fr) minmax(180px, 1fr);
  min-width: 0;
  min-height: 0;
  border-right: 1px solid var(--md-sys-color-outline-variant);
}

.editor-source-panel, .editor-preview-pane {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  min-height: 0;
  min-width: 0;
}

.editor-pane-header {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  gap: 12px;
  min-height: 54px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  background: var(--md-sys-color-surface-variant);
}

.editor .editor-pane-title {
  color: var(--md-sys-color-on-surface);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.editor-language, .editor-status {
  color: var(--md-sys-color-on-surface-variant);
  font-size: 11px;
}

.editor-code {
  position: relative;
  overflow: hidden;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-height: 0;
  min-width: 0;
  background: var(--md-sys-color-surface);
}

.editor-code:focus-within, .editor-code.is-drop-target {
  -webkit-box-shadow: inset 0 0 0 2px var(--md-sys-color-primary);
          box-shadow: inset 0 0 0 2px var(--md-sys-color-primary);
}

.editor .editor-lines {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 48px;
      -ms-flex: 0 0 48px;
          flex: 0 0 48px;
  margin: 0;
  padding: 16px 10px;
  overflow: hidden;
  text-align: right;
  color: var(--md-sys-color-outline);
  border-right: 1px solid var(--md-sys-color-outline-variant);
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  font: 13px/24px var(--editor-code-font);
}

.editor textarea.editor-source, .editor textarea.editor-source:focus {
  display: block;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 16px;
  border: 0;
  border-radius: 0;
  -webkit-box-shadow: none;
          box-shadow: none;
  outline: none;
  resize: none;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background: transparent;
  color: var(--md-sys-color-on-surface);
  caret-color: var(--md-sys-color-primary);
  font: 13px/24px var(--editor-code-font);
  text-align: left;
  letter-spacing: normal;
  -moz-tab-size: 4;
    -o-tab-size: 4;
       tab-size: 4;
  white-space: pre;
  overflow: auto;
}

.editor-source::-moz-selection {
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}

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

.editor-tokens {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  min-height: 0;
  min-width: 0;
  border-top: 1px solid var(--md-sys-color-outline-variant);
}

.editor select.editor-source-select {
  width: auto;
  max-width: 70%;
  height: 30px;
  min-height: 0;
  margin: 0;
  padding: 0 24px 0 8px;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: 8px;
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  font-size: 12px;
}

.editor input.editor-token-search {
  width: calc(100% - 32px);
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 34px;
      -ms-flex: 0 0 34px;
          flex: 0 0 34px;
  height: 34px;
  min-height: 0;
  margin: 12px 16px 0;
  padding: 0 10px;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: 8px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: var(--md-sys-color-on-surface);
  background: var(--md-sys-color-surface);
  font-size: 12px;
}

.editor-token-help {
  margin: 8px 16px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--md-sys-color-on-surface-variant);
}

.editor-token-tree {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-height: 0;
  padding: 0 16px 16px;
  overflow: auto;
}

.editor-token-branch {
  margin: 4px 0;
}

.editor-token-branch > .editor-token-branch, .editor-token-branch > .editor-token-row {
  margin-left: 16px;
  border-left: 1px solid var(--md-sys-color-outline-variant);
  padding-left: 12px;
}

.editor-token-branch > .editor-array-item {
  padding-left: 28px;
}

.editor-token-summary {
  cursor: pointer;
  padding: 6px 0;
  font: 12px/1.5 var(--editor-code-font);
  color: var(--md-sys-color-on-surface);
}

.editor-token-type {
  margin-left: 10px;
  color: var(--md-sys-color-on-surface-variant);
  font: 11px/1.5 system-ui, sans-serif;
}

.editor-token-row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 3px 0;
}

.editor-token {
  -webkit-box-flex: 0;
  -webkit-flex: none;
      -ms-flex: none;
          flex: none;
  max-width: 65%;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: -webkit-grab;
  cursor: grab;
  padding: 5px 10px;
  border: 1px solid color-mix(in srgb, var(--md-sys-color-primary) 30%, transparent);
  border-radius: 999px;
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  font: 12px/1.4 var(--editor-code-font);
}

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

.editor-token:active {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

.editor-token:disabled {
  opacity: 0.6;
  cursor: default;
}

.editor-token:focus-visible, .editor-token-summary:focus-visible, .editor-source-select:focus-visible {
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: 2px;
}

.editor-token-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 12px;
}

.editor-empty {
  color: var(--md-sys-color-on-surface-variant);
  font-size: 13px;
}

.editor-preview {
  display: block;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  width: 100%;
  min-height: 0;
  border: 0;
  background: white;
}

.editor-error {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  max-height: 140px;
  overflow: auto;
  margin: 0;
  padding: 12px 16px;
  white-space: pre-wrap;
  color: var(--md-sys-color-on-error-container);
  background: var(--md-sys-color-error-container);
  font: 12px/1.5 var(--editor-code-font);
}

.editor-error[hidden] {
  display: none;
}

@media (max-width: 700px) {
  .editor-workspace {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
  }
  .editor-input-pane {
    height: var(--editor-height);
    border-right: 0;
  }
  .editor-preview-pane {
    height: 440px;
    border-top: 1px solid var(--md-sys-color-outline-variant);
  }
  .editor-language {
    display: none;
  }
}
.editor-drop-caret {
  position: absolute;
  z-index: 1;
  width: 2px;
  border-radius: 1px;
  background: var(--md-sys-color-primary);
  -webkit-box-shadow: 0 0 0 1px var(--md-sys-color-surface);
          box-shadow: 0 0 0 1px var(--md-sys-color-surface);
  pointer-events: none;
}

.editor-drop-caret[hidden] {
  display: none;
}

.editor .editor-highlight {
  position: absolute;
  top: 0;
  margin: 0;
  padding: 16px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  overflow: hidden;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  border: 0;
  border-radius: 0;
  font: 13px/24px var(--editor-code-font);
  letter-spacing: normal;
  white-space: pre;
  -moz-tab-size: 4;
    -o-tab-size: 4;
       tab-size: 4;
  background: transparent;
  color: var(--md-sys-color-on-surface);
  text-shadow: none;
}

.editor .editor-highlight[hidden] {
  display: none;
}

.editor .editor-highlight-code, .editor .editor-highlight-code .token {
  font: inherit;
  letter-spacing: inherit;
  white-space: inherit;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  text-shadow: none;
  text-decoration: none;
}

.editor .editor-code.is-highlighted textarea.editor-source {
  position: relative;
  color: transparent;
  -webkit-text-fill-color: transparent;
  caret-color: var(--md-sys-color-primary);
}

.editor .editor-code.is-highlighted textarea.editor-source::-moz-selection {
  color: transparent;
  background: color-mix(in srgb, var(--md-sys-color-primary) 24%, transparent);
}

.editor .editor-code.is-highlighted textarea.editor-source::selection {
  color: transparent;
  background: color-mix(in srgb, var(--md-sys-color-primary) 24%, transparent);
}

.editor .editor-highlight-code .token.comment {
  color: var(--md-sys-color-outline);
}

.editor .editor-highlight-code .token.punctuation {
  color: var(--md-sys-color-on-surface-variant);
}

.editor .editor-highlight-code .token.tag,
.editor .editor-highlight-code .token.keyword,
.editor .editor-highlight-code .token.delimiter {
  color: var(--md-sys-color-primary);
}

.editor .editor-highlight-code .token.attr-name,
.editor .editor-highlight-code .token.property,
.editor .editor-highlight-code .token.function {
  color: var(--md-sys-color-tertiary);
}

.editor .editor-highlight-code .token.attr-value,
.editor .editor-highlight-code .token.string,
.editor .editor-highlight-code .token.number,
.editor .editor-highlight-code .token.boolean {
  color: var(--md-sys-color-secondary);
}

.editor .editor-highlight-code .token.variable {
  color: var(--md-sys-color-on-primary-container);
}

.editor .editor-token-type, .editor .editor-token-value {
  font-style: normal;
}

.editor em.editor-token-type, .editor em.editor-token-value {
  font-style: italic;
}

.editor .editor-token-heading {
  margin: 12px 0 6px;
  font: 700 11px/1.5 system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--md-sys-color-on-surface-variant);
}

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

.editor .editor-pane-header > .ts-wrapper {
  -webkit-box-flex: 0;
  -webkit-flex: 0 1 260px;
      -ms-flex: 0 1 260px;
          flex: 0 1 260px;
  min-width: 0;
  max-width: 68%;
  margin: 0;
  font-size: 12px;
}

.editor .editor-pane-header .ts-control {
  min-height: 32px;
  padding: 5px 28px 5px 10px !important;
  -webkit-flex-wrap: nowrap;
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: 8px;
  -webkit-box-shadow: none;
          box-shadow: none;
  background: var(--md-sys-color-surface) !important;
  color: var(--md-sys-color-on-surface);
}

.editor .editor-pane-header .ts-control > .item {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.editor .editor-pane-header .ts-control > input {
  width: auto !important;
  min-width: 0 !important;
  min-height: 0;
  height: auto;
  margin: 0 !important;
  padding: 0 !important;
  font: inherit;
  line-height: 20px;
  border: 0 !important;
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
  color: inherit;
  background: transparent;
}

.editor .editor-pane-header .ts-wrapper.single .ts-control::after {
  right: 10px;
  border-top-color: var(--md-sys-color-on-surface);
}

.editor .editor-pane-header .ts-wrapper.focus .ts-control {
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: 1px;
}

.editor-select-dropdown {
  z-index: 10000;
  margin-top: 4px;
  overflow: hidden;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: 10px;
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  font: 12px/1.5 system-ui, sans-serif;
}
.editor-select-dropdown .option, .editor-select-dropdown .no-results, .editor-select-dropdown .loading {
  padding: 10px 12px;
  color: inherit;
}
.editor-select-dropdown .active {
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}
.editor-select-dropdown .selected {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}

.editor-code[hidden] {
  display: none;
}

.editor-mapping {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  min-height: 0;
  min-width: 0;
}

.editor-mapping-scroll {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-height: 0;
  overflow: auto;
}

.editor .editor-mapping-table {
  width: auto;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.editor .editor-mapping-table th, .editor .editor-mapping-table td {
  position: relative;
  min-width: 190px;
  width: 190px;
  padding: 8px;
  border-right: 1px solid var(--md-sys-color-outline-variant);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  border-radius: 0;
  vertical-align: top;
  background: var(--md-sys-color-surface);
}

.editor .editor-mapping-table th[scope=row] {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 64px;
  width: 64px;
  padding: 18px 12px;
  background: var(--md-sys-color-surface-variant);
  color: var(--md-sys-color-on-surface-variant);
  font-size: 11px;
  font-weight: 600;
}

.editor .editor-mapping-table input, .editor .editor-mapping-table textarea {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: block;
  width: 100%;
  min-height: 36px;
  height: 36px;
  margin: 0;
  padding: 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  -webkit-box-shadow: none;
          box-shadow: none;
  background: transparent;
  color: var(--md-sys-color-on-surface);
  font: 12px/20px var(--editor-code-font);
}

.editor .editor-mapping-table input {
  padding-right: 24px;
  font: 600 12px/20px system-ui, sans-serif;
}

.editor .editor-mapping-table textarea {
  resize: vertical;
  min-height: 100px;
  height: 100px;
  white-space: pre;
  -moz-tab-size: 4;
    -o-tab-size: 4;
       tab-size: 4;
}

.editor .editor-mapping-table input:focus, .editor .editor-mapping-table textarea:focus, .editor .editor-mapping-table td.is-drop-target textarea {
  outline: none;
  border-color: var(--md-sys-color-primary);
  -webkit-box-shadow: 0 0 0 1px var(--md-sys-color-primary);
          box-shadow: 0 0 0 1px var(--md-sys-color-primary);
}

.editor-column-remove {
  position: absolute;
  top: 13px;
  right: 11px;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--md-sys-color-on-surface-variant);
  cursor: pointer;
  font-size: 18px;
}

.editor-column-remove:disabled {
  opacity: 0.35;
  cursor: default;
}

.editor-mapping-actions {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  gap: 8px;
  padding: 8px 12px;
  border-top: 1px solid var(--md-sys-color-outline-variant);
}

.editor-mapping-actions > span {
  font-size: 11px;
  color: var(--md-sys-color-on-surface-variant);
}

.editor-sheet-preview {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  position: relative;
  background: white;
}

.editor-sheet-grid {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.editor-sheet-preview .jss_container {
  padding: 0;
  max-width: 100%;
}

.editor-sheet-preview .jss_content {
  max-width: 100%;
  -ms-scroll-chaining: none;
      overscroll-behavior: contain;
}

.editor-spreadsheet .editor-input-pane {
  grid-template-rows: minmax(230px, 1fr) minmax(200px, 1fr);
}

.editor-sheet-preview .jss_worksheet > tbody > tr > td.readonly {
  color: var(--jss_content_color, #000);
}

.editor.editor-fill {
  height: 100%;
  min-height: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.editor.editor-fill > .editor-workspace {
  height: 100%;
  min-height: 0;
  grid-template-rows: minmax(0, 1fr);
}
.editor.editor-fill .editor-input-pane {
  height: auto;
  grid-template-rows: minmax(0, 1.1fr) minmax(0, 1fr);
}
.editor.editor-fill .editor-preview-pane {
  height: auto;
}
.editor.editor-fill .editor-tokens {
  overflow: auto;
}

@media (max-width: 700px) {
  .editor.editor-fill > .editor-workspace {
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }
}
.navbar.navbar-hide-on-scroll {
  position: -webkit-sticky;
  position: sticky;
  top: var(--navbar-hide-offset, 0px);
  z-index: 997;
  translate: 0 0;
  -webkit-transition: translate 180ms ease;
  transition: translate 180ms ease;
}
.navbar.navbar-hide-on-scroll.is-navbar-hidden {
  translate: 0 calc(-100% - var(--navbar-hide-offset, 0px) - 2px);
  pointer-events: none;
}
.navbar.navbar-hide-on-scroll:focus-within {
  translate: 0 0;
  pointer-events: auto;
  -webkit-transition: none;
  transition: none;
}

.navbar.navbar-hide-on-scroll.navbar-scroll {
  position: -webkit-sticky;
  position: sticky;
}

.navbar-fixed > .navbar.navbar-hide-on-scroll {
  position: fixed;
}

@media (prefers-reduced-motion: reduce) {
  .navbar.navbar-hide-on-scroll {
    -webkit-transition: none;
    transition: none;
  }
}
@media print {
  .navbar.navbar-hide-on-scroll, .navbar-fixed > .navbar.navbar-hide-on-scroll {
    position: static;
    translate: none;
  }
}
.navbar.navbar-tiny {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  width: 100%;
  height: auto;
  min-height: 40px;
  padding: 4px 12px;
  line-height: 1.4;
  font-size: 13px;
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}
.navbar.navbar-tiny[hidden] {
  display: none;
}
.navbar.navbar-tiny > .nav-wrapper {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  min-width: 0;
  height: auto;
  gap: 4px 16px;
  padding: 0;
  background: transparent;
}
.navbar.navbar-tiny .navbar-tiny-content {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 180px;
      -ms-flex: 1 1 180px;
          flex: 1 1 180px;
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}
.navbar.navbar-tiny a {
  color: inherit;
}
.navbar.navbar-tiny .brand-logo {
  position: static;
  -webkit-transform: none;
          transform: none;
  height: auto;
  font-size: 14px;
  line-height: 1.4;
  white-space: nowrap;
}
.navbar.navbar-tiny .brand-logo .brand-logo-image {
  width: 24px;
  height: 24px;
  padding: 4px;
  border-radius: 8px;
  margin-right: 6px;
}
.navbar.navbar-tiny ul:not(.dropdown-content) {
  gap: 4px;
  min-width: 0;
  max-width: 100%;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}
.navbar.navbar-tiny ul:not(.dropdown-content) > li > a {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  min-height: 32px;
  height: auto;
  padding: 0 8px;
  line-height: 1.4;
  border-radius: 16px;
  white-space: nowrap;
}
.navbar.navbar-tiny ul:not(.dropdown-content) > li > a:hover {
  background: color-mix(in srgb, currentColor 8%, transparent);
}
.navbar.navbar-tiny a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
.navbar.navbar-tiny > .navbar-tiny-close {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 32px;
      -ms-flex: 0 0 32px;
          flex: 0 0 32px;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 32px;
  height: 32px;
  margin-left: auto;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.navbar.navbar-tiny > .navbar-tiny-close > .material-icons {
  width: 18px;
  height: 18px;
  margin: 0;
  font-size: 18px;
  line-height: 1;
}
.navbar.navbar-tiny > .navbar-tiny-close:hover {
  background: color-mix(in srgb, currentColor 12%, transparent);
}
.navbar.navbar-tiny > .navbar-tiny-close:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
.navbar.navbar-tiny.navbar-tiny-top, .navbar.navbar-tiny.navbar-tiny-bottom {
  position: fixed;
  z-index: 998;
  inset-inline: 0;
  padding-left: max(12px, env(safe-area-inset-left));
  padding-right: max(12px, env(safe-area-inset-right));
}
.navbar.navbar-tiny.navbar-tiny-top {
  top: var(--navbar-tiny-offset, 0px);
  bottom: auto;
  padding-top: max(4px, env(safe-area-inset-top));
}
.navbar.navbar-tiny.navbar-tiny-bottom {
  top: auto;
  bottom: var(--navbar-tiny-offset, 0px);
  padding-bottom: max(4px, env(safe-area-inset-bottom));
}

@media print {
  .navbar.navbar-tiny.navbar-tiny-top, .navbar.navbar-tiny.navbar-tiny-bottom {
    position: static;
  }
}
.card.code-card {
  --code-card-background: #282c34;
  --code-card-color: #abb2bf;
  --code-card-border-color: #8888;
  --code-card-font-size: 0.85rem;
  --code-card-padding: 1em;
  position: relative;
  min-width: 0;
  max-width: 100%;
  margin: 1em 0;
  overflow: hidden;
  font: var(--code-card-font-size)/1.25 monospace, monospace;
  background: var(--code-card-background);
  color: var(--code-card-color);
  border: 1px solid var(--code-card-border-color);
  -webkit-box-shadow: none;
          box-shadow: none;
}
.card.code-card .code-card-status, .card.code-card .code-card-copy {
  position: absolute;
  z-index: 2;
  color: var(--md-sys-color-on-surface-variant, #abb2bf);
}
.card.code-card .code-card-status {
  top: 15px;
  right: 45px;
  font: 14px/1.25 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  pointer-events: none;
}
.card.code-card .code-card-copy {
  top: 6px;
  right: 6px;
}
.card.code-card .code-card-copy > .btn {
  color: inherit;
}
.card.code-card .code-card-copy[hidden] {
  display: none;
}
.card.code-card .code-card-copy > .btn:focus-visible, .card.code-card .code-card-body:focus-visible {
  outline: 2px solid var(--md-sys-color-primary, #61aeee);
  outline-offset: -2px;
}
.card.code-card pre.code-card-body {
  display: block;
  margin: 0;
  padding: 0;
  max-height: var(--code-card-max-height, none);
  overflow: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  text-align: start;
  direction: ltr;
  white-space: pre;
}
.card.code-card pre.code-card-body, .card.code-card pre.code-card-body > code {
  font: inherit;
  text-shadow: none;
}
.card.code-card pre.code-card-body > code {
  display: block;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  min-width: 100%;
  margin: 0;
  padding: var(--code-card-padding);
  border: 0;
  background: transparent;
  color: inherit;
  white-space: inherit;
}
.card.code-card .token {
  background: transparent;
  text-shadow: none;
}
.card.code-card .token.comment, .card.code-card .token.prolog, .card.code-card .token.doctype, .card.code-card .token.cdata {
  color: #5c6370;
  font-style: italic;
}
.card.code-card .token.punctuation, .card.code-card .token.operator, .card.code-card .token.property {
  color: var(--code-card-color);
}
.card.code-card .token.keyword, .card.code-card .token.atrule {
  color: #c678dd;
}
.card.code-card .token.tag, .card.code-card .token.selector, .card.code-card .token.deleted {
  color: #e06c75;
}
.card.code-card .token.function, .card.code-card .token.function-variable, .card.code-card .token.url {
  color: #61aeee;
}
.card.code-card .token.class-name, .card.code-card .token.builtin {
  color: #e6c07b;
}
.card.code-card .token.attr-name, .card.code-card .token.number, .card.code-card .token.constant, .card.code-card .token.variable, .card.code-card .token.builtin-variable {
  color: #d19a66;
}
.card.code-card .token.string, .card.code-card .token.string-property, .card.code-card .token.attr-value, .card.code-card .token.regex, .card.code-card .token.inserted {
  color: #98c379;
}
.card.code-card .token.boolean, .card.code-card .token.entity {
  color: #56b6c2;
}
.card.code-card .token.important, .card.code-card .token.bold {
  font-weight: bold;
}
.card.code-card .token.italic {
  font-style: italic;
}

.script-editor {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: 12px;
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
}
.script-editor:focus-within {
  border-color: var(--md-sys-color-primary);
}
.script-editor .script-editor-viewport {
  position: relative;
  grid-column: 2;
  min-width: 0;
  height: var(--script-editor-height, 360px);
}
.script-editor pre.script-editor-highlight,
.script-editor textarea.script-editor-input,
.script-editor pre.script-editor-gutter {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 0;
  padding: 12px;
  border: 0;
  border-radius: 0;
  outline: 0;
  -webkit-box-shadow: none;
          box-shadow: none;
  font: var(--script-editor-font-size, 14px)/1.6 ui-monospace, SFMono-Regular, Consolas, monospace;
  -webkit-font-variant-ligatures: none;
     -moz-font-variant-ligatures: none;
          font-variant-ligatures: none;
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
  text-indent: 0;
  text-shadow: none;
  white-space: pre;
  overflow-wrap: normal;
  word-break: normal;
  direction: ltr;
}
.script-editor pre.script-editor-highlight,
.script-editor textarea.script-editor-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: transparent;
}
.script-editor pre.script-editor-highlight {
  overflow: hidden;
  pointer-events: none;
  color: inherit;
}
.script-editor pre.script-editor-highlight code, .script-editor pre.script-editor-highlight .token {
  font: inherit;
  letter-spacing: inherit;
  text-shadow: none;
  background: transparent;
}
.script-editor pre.script-editor-highlight code {
  display: block;
  min-width: -webkit-max-content;
  min-width: -moz-max-content;
  min-width: max-content;
  padding: 0;
  border: 0;
  color: inherit;
}
.script-editor pre.script-editor-highlight .token.comment, .script-editor pre.script-editor-highlight .token.prolog, .script-editor pre.script-editor-highlight .token.doctype {
  color: var(--md-sys-color-on-surface-variant);
}
.script-editor pre.script-editor-highlight .token.keyword, .script-editor pre.script-editor-highlight .token.tag, .script-editor pre.script-editor-highlight .token.boolean {
  color: var(--md-sys-color-primary);
}
.script-editor pre.script-editor-highlight .token.string, .script-editor pre.script-editor-highlight .token.attr-value, .script-editor pre.script-editor-highlight .token.regex {
  color: var(--md-sys-color-tertiary);
}
.script-editor pre.script-editor-highlight .token.number, .script-editor pre.script-editor-highlight .token.function, .script-editor pre.script-editor-highlight .token.class-name {
  color: var(--md-sys-color-secondary);
}
.script-editor pre.script-editor-highlight .token.deleted, .script-editor pre.script-editor-highlight .token.important {
  color: var(--md-sys-color-error);
}
.script-editor textarea.script-editor-input {
  z-index: 1;
  resize: none;
  overflow: auto;
  color: transparent;
  caret-color: var(--md-sys-color-on-surface);
  -webkit-text-fill-color: transparent;
}
.script-editor textarea.script-editor-input::-moz-selection {
  background: color-mix(in srgb, var(--md-sys-color-primary) 25%, transparent);
}
.script-editor textarea.script-editor-input::selection {
  background: color-mix(in srgb, var(--md-sys-color-primary) 25%, transparent);
}
.script-editor textarea.script-editor-input:focus-visible {
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: -2px;
}
.script-editor pre.script-editor-gutter {
  grid-column: 1;
  height: var(--script-editor-height, 360px);
  padding-inline: 6px;
  overflow: hidden;
  text-align: right;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  color: var(--md-sys-color-on-surface-variant);
  background: transparent;
  border-right: 1px solid var(--md-sys-color-outline-variant);
}
.script-editor .script-editor-gutter[hidden] {
  display: none;
}
.script-editor .script-editor-status {
  grid-column: 1/-1;
  padding: 8px 16px;
  border-top: 1px solid var(--md-sys-color-outline-variant);
  color: var(--md-sys-color-on-surface-variant);
  font-size: 0.8125rem;
}
.script-editor.is-composing textarea.script-editor-input {
  color: inherit;
  -webkit-text-fill-color: currentColor;
}
.script-editor.is-composing pre.script-editor-highlight {
  visibility: hidden;
}

@media (forced-colors: active) {
  .script-editor textarea.script-editor-input {
    color: CanvasText;
    -webkit-text-fill-color: CanvasText;
  }
  .script-editor pre.script-editor-highlight {
    visibility: hidden;
  }
}
.screenplay-editor {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: 12px;
  background: var(--md-sys-color-surface-variant);
  color: var(--md-sys-color-on-surface);
}
.screenplay-editor input.screenplay-title {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 16px 24px;
  border: 0;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  border-radius: 0;
  -webkit-box-shadow: none;
          box-shadow: none;
  background: var(--md-sys-color-surface);
  color: inherit;
  font-family: inherit;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.5;
}
.screenplay-editor .screenplay-paper {
  --screenplay-page-scale: 1;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 100%;
  height: var(--screenplay-editor-height, 640px);
  overflow: auto;
  scrollbar-gutter: stable;
  -ms-scroll-chaining: none;
      overscroll-behavior: contain;
}
.screenplay-editor .screenplay-pages {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 24px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  min-width: 100%;
  padding: 24px;
}
.screenplay-editor .screenplay-page-frame {
  position: relative;
  -webkit-box-flex: 0;
  -webkit-flex: none;
      -ms-flex: none;
          flex: none;
  overflow: clip;
  -webkit-box-shadow: var(--screenplay-page-shadow, 0 0 0 1px rgba(0, 0, 0, 0.1490196078), 0 0 12px rgba(0, 0, 0, 0.2509803922), 0 8px 18px rgba(0, 0, 0, 0.3490196078));
          box-shadow: var(--screenplay-page-shadow, 0 0 0 1px rgba(0, 0, 0, 0.1490196078), 0 0 12px rgba(0, 0, 0, 0.2509803922), 0 8px 18px rgba(0, 0, 0, 0.3490196078));
  width: calc(210mm * var(--screenplay-page-scale));
  height: calc(297mm * var(--screenplay-page-scale));
}
.screenplay-editor .screenplay-page {
  position: relative;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 210mm;
  height: 297mm;
  padding: 25.4mm 25.4mm 25.4mm 38.1mm;
  background: var(--screenplay-paper-background, #fff);
  color: var(--screenplay-paper-color, #202124);
  -webkit-transform: scale(var(--screenplay-page-scale));
          transform: scale(var(--screenplay-page-scale));
  -webkit-transform-origin: top left;
          transform-origin: top left;
  font: 12pt/16px "Courier New", Courier, monospace;
}
.screenplay-editor .screenplay-page-body {
  position: relative;
  height: 100%;
}
.screenplay-editor .screenplay-page-number {
  position: absolute;
  top: 12.7mm;
  right: 25.4mm;
  font: inherit;
}
.screenplay-editor .screenplay-block {
  position: relative;
  padding: 0;
}
.screenplay-editor .screenplay-block.is-active::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 -10px;
  width: 2px;
  border-radius: 2px;
  background: var(--screenplay-paper-color, #202124);
}
.screenplay-editor .screenplay-block-handle {
  position: absolute;
  top: -3px;
  left: -38px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--screenplay-paper-color, #202124);
  opacity: 0;
  cursor: -webkit-grab;
  cursor: grab;
}
.screenplay-editor .screenplay-block-handle i {
  font-size: 20px;
}
.screenplay-editor .screenplay-block-handle:active {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}
.screenplay-editor .screenplay-block-handle:focus-visible {
  opacity: 1;
  outline: 1px solid currentColor;
}
.screenplay-editor .screenplay-block-handle:disabled {
  visibility: hidden;
}
.screenplay-editor .screenplay-block:is(:hover, :focus-within, .is-active) .screenplay-block-handle {
  opacity: 0.65;
}
.screenplay-editor .screenplay-block.is-dragging {
  opacity: 0.4;
}
.screenplay-editor .screenplay-drop-indicator {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--screenplay-paper-color, #202124);
  pointer-events: none;
  z-index: 2;
}
.screenplay-editor .screenplay-drop-indicator::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: inherit;
}
.screenplay-editor textarea.screenplay-block-input {
  display: block;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 100%;
  min-height: 16px;
  margin: 0;
  padding: 0;
  resize: none;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  -webkit-box-shadow: none;
          box-shadow: none;
  background: transparent;
  color: inherit;
  font: 12pt/16px "Courier New", Courier, monospace;
  letter-spacing: normal;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: normal;
  -moz-tab-size: 4;
    -o-tab-size: 4;
       tab-size: 4;
}
.screenplay-editor textarea.screenplay-measure {
  position: absolute;
  visibility: hidden;
  height: 0;
  min-height: 0;
  pointer-events: none;
}
.screenplay-editor textarea.screenplay-block-input::-webkit-input-placeholder {
  color: var(--screenplay-paper-muted, #727272);
  opacity: 1;
}
.screenplay-editor textarea.screenplay-block-input::-moz-placeholder {
  color: var(--screenplay-paper-muted, #727272);
  opacity: 1;
}
.screenplay-editor textarea.screenplay-block-input:-ms-input-placeholder {
  color: var(--screenplay-paper-muted, #727272);
  opacity: 1;
}
.screenplay-editor textarea.screenplay-block-input::-ms-input-placeholder {
  color: var(--screenplay-paper-muted, #727272);
  opacity: 1;
}
.screenplay-editor textarea.screenplay-block-input::placeholder {
  color: var(--screenplay-paper-muted, #727272);
  opacity: 1;
}
.screenplay-editor .screenplay-scene textarea, .screenplay-editor .screenplay-character textarea, .screenplay-editor .screenplay-transition textarea {
  text-transform: uppercase;
}
.screenplay-editor .screenplay-scene textarea {
  font-weight: 700;
}
.screenplay-editor .screenplay-character {
  margin-left: 2in;
}
.screenplay-editor .screenplay-dialogue {
  margin-inline: 1in;
}
.screenplay-editor .screenplay-parenthetical {
  margin-inline: 1.5in 1in;
}
.screenplay-editor .screenplay-transition textarea {
  text-align: right;
}
.screenplay-editor input.screenplay-title:focus-visible {
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: -2px;
}
.screenplay-editor textarea.screenplay-block-input:focus-visible {
  outline: none;
}
.screenplay-editor .screenplay-paper:focus-visible {
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: -2px;
}

.storyboard {
  min-width: 0;
  color: var(--md-sys-color-on-surface);
}
.storyboard .storyboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--storyboard-card-width, 260px)), 1fr));
  -webkit-box-align: start;
  -webkit-align-items: start;
      -ms-flex-align: start;
          align-items: start;
  gap: 20px;
}
.storyboard .storyboard-shot {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: 12px;
  background: var(--md-sys-color-surface);
}
.storyboard .storyboard-shot.is-selected {
  border-color: var(--md-sys-color-primary);
  -webkit-box-shadow: 0 0 0 1px var(--md-sys-color-primary);
          box-shadow: 0 0 0 1px var(--md-sys-color-primary);
}
.storyboard .storyboard-shot-header {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  background: var(--md-sys-color-surface-variant);
}
.storyboard .storyboard-shot.is-selected .storyboard-shot-header {
  background: var(--md-sys-color-primary-container);
}
.storyboard .storyboard-drag-handle {
  display: grid;
  place-items: center;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 40px;
      -ms-flex: 0 0 40px;
          flex: 0 0 40px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--md-sys-color-on-surface-variant);
  cursor: -webkit-grab;
  cursor: grab;
}
.storyboard .storyboard-drag-handle:active {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}
.storyboard .storyboard-drag-handle:disabled {
  cursor: default;
  opacity: 0.4;
}
.storyboard .storyboard-shot.is-dragging {
  opacity: 0.45;
}
.storyboard .storyboard-shot.is-drop-before {
  -webkit-box-shadow: -4px 0 0 var(--md-sys-color-primary);
          box-shadow: -4px 0 0 var(--md-sys-color-primary);
}
.storyboard .storyboard-shot.is-drop-after {
  -webkit-box-shadow: 4px 0 0 var(--md-sys-color-primary);
          box-shadow: 4px 0 0 var(--md-sys-color-primary);
}
.storyboard .storyboard-shot.is-drop-vertical.is-drop-before {
  -webkit-box-shadow: 0 -4px 0 var(--md-sys-color-primary);
          box-shadow: 0 -4px 0 var(--md-sys-color-primary);
}
.storyboard .storyboard-shot.is-drop-vertical.is-drop-after {
  -webkit-box-shadow: 0 4px 0 var(--md-sys-color-primary);
          box-shadow: 0 4px 0 var(--md-sys-color-primary);
}
.storyboard .storyboard-shot-select {
  display: block;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 10px 16px;
  border: 0;
  border-radius: 0;
  background: var(--md-sys-color-surface-variant);
  color: var(--md-sys-color-on-surface-variant);
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.storyboard .storyboard-shot-select[aria-pressed=true] {
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}
.storyboard .storyboard-frame {
  display: grid;
  place-items: center;
  aspect-ratio: var(--storyboard-frame-ratio, 16/9);
  overflow: hidden;
  background: var(--md-sys-color-surface-variant);
}
.storyboard .storyboard-frame img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.storyboard .storyboard-image-placeholder {
  padding: 16px;
  color: var(--md-sys-color-on-surface-variant);
  text-align: center;
}
.storyboard .storyboard-shot-content {
  padding: 16px;
}
.storyboard label.storyboard-field {
  display: block;
  margin-bottom: 12px;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 0.75rem;
}
.storyboard label.storyboard-field > span {
  display: block;
  margin-bottom: 4px;
}
.storyboard input.storyboard-input, .storyboard textarea.storyboard-input {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 8px;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: 6px;
  -webkit-box-shadow: none;
          box-shadow: none;
  background: transparent;
  color: var(--md-sys-color-on-surface);
  font: inherit;
  font-size: 0.875rem;
  line-height: 1.5;
}
.storyboard textarea.storyboard-input {
  min-height: 90px;
  resize: vertical;
}
.storyboard .storyboard-duration {
  font-size: 0.8125rem;
  color: var(--md-sys-color-on-surface-variant);
}
.storyboard .storyboard-details {
  margin-block: 12px;
}
.storyboard .storyboard-details > summary {
  min-height: 36px;
  cursor: pointer;
  color: var(--md-sys-color-primary);
  font-size: 0.875rem;
}
.storyboard .storyboard-shot-actions {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--md-sys-color-outline-variant);
}
.storyboard .storyboard-shot-actions > crazy-button:nth-child(2) {
  margin-right: auto;
}
.storyboard .storyboard-status {
  color: var(--md-sys-color-on-surface-variant);
  font-size: 0.875rem;
}
.storyboard .storyboard-empty {
  grid-column: 1/-1;
  padding: 32px;
  border: 1px dashed var(--md-sys-color-outline-variant);
  border-radius: 12px;
  text-align: center;
}
.storyboard :is(button, input, textarea, summary):focus-visible {
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: -2px;
}