/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 */
:root {
  --size: 1rem;
  --font: Inter, Roboto, "Helvetica Neue", "Arial Nova", "Nimbus Sans", Noto Sans, Arial, sans-serif;
  --font-icon: "Material Symbols Outlined";
  --speed1: .1s;
  --speed2: .2s;
  --speed3: .3s;
  --speed4: .4s;
  --active: rgb(128 128 128 / .192);
  --overlay: rgb(0 0 0 / .5);
  --elevate1: 0 .125rem .125rem 0 rgb(0 0 0 / .32);
  --elevate2: 0 .25rem .5rem 0 rgb(0 0 0 / .4);
  --elevate3: 0 .375rem .75rem 0 rgb(0 0 0 / .48);
  --top: env(safe-area-inset-top);
  --bottom: env(safe-area-inset-bottom);
  --left: env(safe-area-inset-left);
  --right: env(safe-area-inset-right);
}

:root, body.light {
  --primary: #6750a4;
  --on-primary: #ffffff;
  --primary-container: #e9ddff;
  --on-primary-container: #22005d;
  --secondary: #625b71;
  --on-secondary: #ffffff;
  --secondary-container: #e8def8;
  --on-secondary-container: #1e192b;
  --tertiary: #7e5260;
  --on-tertiary: #ffffff;
  --tertiary-container: #ffd9e3;
  --on-tertiary-container: #31101d;
  --error: #ba1a1a;
  --on-error: #ffffff;
  --error-container: #ffdad6;
  --on-error-container: #410002;
  --background: #fffbff;
  --on-background: #1c1b1e;
  --surface: #fdf8fd;
  --on-surface: #1c1b1e;
  --surface-variant: #e7e0eb;
  --on-surface-variant: #49454e;
  --outline: #7a757f;
  --outline-variant: #cac4cf;
  --shadow: #000000;
  --scrim: #000000;
  --inverse-surface: #313033;
  --inverse-on-surface: #f4eff4;
  --inverse-primary: #cfbcff;
  --surface-dim: #ddd8dd;
  --surface-bright: #fdf8fd;
  --surface-container-lowest: #ffffff;
  --surface-container-low: #f7f2f7;
  --surface-container: #f2ecf1;
  --surface-container-high: #ece7eb;
  --surface-container-highest: #e6e1e6;
}

body.dark {
  --primary: #cfbcff;
  --on-primary: #381e72;
  --primary-container: #4f378a;
  --on-primary-container: #e9ddff;
  --secondary: #cbc2db;
  --on-secondary: #332d41;
  --secondary-container: #4a4458;
  --on-secondary-container: #e8def8;
  --tertiary: #efb8c8;
  --on-tertiary: #4a2532;
  --tertiary-container: #633b48;
  --on-tertiary-container: #ffd9e3;
  --error: #ffb4ab;
  --on-error: #690005;
  --error-container: #93000a;
  --on-error-container: #ffb4ab;
  --background: #1c1b1e;
  --on-background: #e6e1e6;
  --surface: #141316;
  --on-surface: #e6e1e6;
  --surface-variant: #49454e;
  --on-surface-variant: #cac4cf;
  --outline: #948f99;
  --outline-variant: #49454e;
  --shadow: #000000;
  --scrim: #000000;
  --inverse-surface: #e6e1e6;
  --inverse-on-surface: #313033;
  --inverse-primary: #6750a4;
  --surface-dim: #141316;
  --surface-bright: #3a383c;
  --surface-container-lowest: #0f0e11;
  --surface-container-low: #1c1b1e;
  --surface-container: #201f22;
  --surface-container-high: #2b292d;
  --surface-container-highest: #363438;
}

@font-face {
  font-family: Material Symbols Outlined;
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(/assets/material-symbols-outlined-536842a7ecdba7637ebfeb9d8c87b135c085d5fae1277fd18a2ad358f166bac1.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@3.9.7/dist/cdn/material-symbols-outlined.woff2) format("woff2");
}
@font-face {
  font-family: Material Symbols Rounded;
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(/assets/material-symbols-rounded-ac1c2edf268a524667b097ae1f8de82186dbccd9b684fd23b751e0bbf8c798db.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@3.9.7/dist/cdn/material-symbols-rounded.woff2) format("woff2");
}
@font-face {
  font-family: Material Symbols Sharp;
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(/assets/material-symbols-sharp-318f539f500dcd97ba6b7743548461c1cbf4fe9d896c66e6088eba7620c7ef3b.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@3.9.7/dist/cdn/material-symbols-sharp.woff2) format("woff2");
}
@font-face {
  font-family: Material Symbols Subset;
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(/assets/material-symbols-subset-f09a316877d4715653d9e32dcb97ce4b930c5f938e04de10be5351da27c75653.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@3.9.7/dist/cdn/material-symbols-subset.woff2) format("woff2");
}
* {
  -webkit-tap-highlight-color: transparent;
  position: relative;
  vertical-align: middle;
  color: inherit;
  margin: 0;
  padding: 0;
  border-radius: inherit;
  box-sizing: border-box;
}

body {
  color: var(--on-surface);
  background-color: var(--surface);
  overflow-x: hidden;
}

label {
  font-size: 0.75rem;
  vertical-align: baseline;
}

a, b, i, span, strong, em, code {
  vertical-align: baseline;
}

a, button, .button {
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  border: none;
  font-family: inherit;
  outline: inherit;
  justify-content: center;
}

a, button, .button, i, label {
  -webkit-user-select: none;
  user-select: none;
}

body ::-webkit-scrollbar, body ::-webkit-scrollbar-thumb, body ::-webkit-scrollbar-button {
  background: none;
  inline-size: 0.4rem;
  block-size: 0.4rem;
}

body :is(:hover, :focus)::-webkit-scrollbar-thumb {
  background: var(--outline);
  border-radius: 1rem;
}

* + :is(address, article, blockquote, code, .field, fieldset, form, .grid, h1, h2, h3, h4, h5, h6, nav, ol, p, pre, .row, section, aside, table, .tabs, ul) {
  margin-block-start: 1rem;
}

:is(a, button, .button, .chip):focus-visible {
  outline: 0.125rem solid var(--primary);
  outline-offset: 0.25rem;
}

.transparent {
  background-color: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
}

.primary {
  background-color: var(--primary) !important;
  color: var(--on-primary) !important;
}

.primary-text {
  color: var(--primary) !important;
}

.primary-border {
  border-color: var(--primary) !important;
}

.primary-container {
  background-color: var(--primary-container) !important;
  color: var(--on-primary-container) !important;
}

.secondary {
  background-color: var(--secondary) !important;
  color: var(--on-secondary) !important;
}

.secondary-text {
  color: var(--secondary) !important;
}

.secondary-border {
  border-color: var(--secondary) !important;
}

.secondary-container {
  background-color: var(--secondary-container) !important;
  color: var(--on-secondary-container) !important;
}

.tertiary {
  background-color: var(--tertiary) !important;
  color: var(--on-tertiary) !important;
}

.tertiary-text {
  color: var(--tertiary) !important;
}

.tertiary-border {
  border-color: var(--tertiary) !important;
}

.tertiary-container {
  background-color: var(--tertiary-container) !important;
  color: var(--on-tertiary-container) !important;
}

.error {
  background-color: var(--error) !important;
  color: var(--on-error) !important;
}

.error-text {
  color: var(--error) !important;
}

.error-border {
  border-color: var(--error) !important;
}

.error-container {
  background-color: var(--error-container) !important;
  color: var(--on-error-container) !important;
}

.background {
  background-color: var(--background) !important;
  color: var(--on-background) !important;
}

.surface, .surface-dim, .surface-bright, .surface-container-lowest, .surface-container-low, .surface-container, .surface-container-high, .surface-container-highest {
  background-color: var(--surface) !important;
  color: var(--on-surface) !important;
}

.surface-variant {
  background-color: var(--surface-variant) !important;
  color: var(--on-surface-variant) !important;
}

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

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

.inverse-primary-text {
  color: var(--inverse-primary) !important;
}

.inverse-primary-border {
  border-color: var(--inverse-primary) !important;
}

.surface-dim {
  background-color: var(--surface-dim) !important;
}

.surface-bright {
  background-color: var(--surface-bright) !important;
}

.surface-container-lowest {
  background-color: var(--surface-container-lowest) !important;
}

.surface-container {
  background-color: var(--surface-container) !important;
}

.surface-container-high {
  background-color: var(--surface-container-high) !important;
}

.surface-container-highest {
  background-color: var(--surface-container-highest) !important;
}

.surface-container-low {
  background-color: var(--surface-container-low) !important;
}

.black {
  background-color: #000 !important;
}

.black-border {
  border-color: #000 !important;
}

.black-text {
  color: #000 !important;
}

.white {
  background-color: #fff !important;
}

.white-border {
  border-color: #fff !important;
}

.white-text {
  color: #fff !important;
}

.transparent-border {
  border-color: transparent !important;
}

.transparent-text {
  color: transparent !important;
}

.fill:not(i) {
  background-color: var(--surface-variant) !important;
  color: var(--on-surface-variant) !important;
}

.middle-align {
  display: flex;
  align-items: center !important;
}

.bottom-align {
  display: flex;
  align-items: flex-end !important;
}

.top-align {
  display: flex;
  align-items: flex-start !important;
}

.left-align {
  text-align: start;
  justify-content: flex-start !important;
}

.right-align {
  text-align: end;
  justify-content: flex-end !important;
}

.center-align {
  text-align: center;
  justify-content: center !important;
}

.red, .red6 {
  background-color: #f44336 !important;
}

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

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

.red1 {
  background-color: #ffebee !important;
}

.red2 {
  background-color: #ffcdd2 !important;
}

.red3 {
  background-color: #ef9a9a !important;
}

.red4 {
  background-color: #e57373 !important;
}

.red5 {
  background-color: #ef5350 !important;
}

.red7 {
  background-color: #e53935 !important;
}

.red8 {
  background-color: #d32f2f !important;
}

.red9 {
  background-color: #c62828 !important;
}

.red10 {
  background-color: #b71c1c !important;
}

.pink, .pink6 {
  background-color: #e91e63 !important;
}

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

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

.pink1 {
  background-color: #fce4ec !important;
}

.pink2 {
  background-color: #f8bbd0 !important;
}

.pink3 {
  background-color: #f48fb1 !important;
}

.pink4 {
  background-color: #f06292 !important;
}

.pink5 {
  background-color: #ec407a !important;
}

.pink7 {
  background-color: #d81b60 !important;
}

.pink8 {
  background-color: #c2185b !important;
}

.pink9 {
  background-color: #ad1457 !important;
}

.pink10 {
  background-color: #880e4f !important;
}

.purple, .purple6 {
  background-color: #9c27b0 !important;
}

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

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

.purple1 {
  background-color: #f3e5f5 !important;
}

.purple2 {
  background-color: #e1bee7 !important;
}

.purple3 {
  background-color: #ce93d8 !important;
}

.purple4 {
  background-color: #ba68c8 !important;
}

.purple5 {
  background-color: #ab47bc !important;
}

.purple7 {
  background-color: #8e24aa !important;
}

.purple8 {
  background-color: #7b1fa2 !important;
}

.purple9 {
  background-color: #6a1b9a !important;
}

.purple10 {
  background-color: #4a148c !important;
}

.deep-purple, .deep-purple6 {
  background-color: #673ab7 !important;
}

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

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

.deep-purple1 {
  background-color: #ede7f6 !important;
}

.deep-purple2 {
  background-color: #d1c4e9 !important;
}

.deep-purple3 {
  background-color: #b39ddb !important;
}

.deep-purple4 {
  background-color: #9575cd !important;
}

.deep-purple5 {
  background-color: #7e57c2 !important;
}

.deep-purple7 {
  background-color: #5e35b1 !important;
}

.deep-purple8 {
  background-color: #512da8 !important;
}

.deep-purple9 {
  background-color: #4527a0 !important;
}

.deep-purple10 {
  background-color: #311b92 !important;
}

.indigo, .indigo6 {
  background-color: #3f51b5 !important;
}

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

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

.indigo1 {
  background-color: #e8eaf6 !important;
}

.indigo2 {
  background-color: #c5cae9 !important;
}

.indigo3 {
  background-color: #9fa8da !important;
}

.indigo4 {
  background-color: #7986cb !important;
}

.indigo5 {
  background-color: #5c6bc0 !important;
}

.indigo7 {
  background-color: #3949ab !important;
}

.indigo8 {
  background-color: #303f9f !important;
}

.indigo9 {
  background-color: #283593 !important;
}

.indigo10 {
  background-color: #1a237e !important;
}

.blue, .blue6 {
  background-color: #2196f3 !important;
}

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

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

.blue1 {
  background-color: #e3f2fd !important;
}

.blue2 {
  background-color: #bbdefb !important;
}

.blue3 {
  background-color: #90caf9 !important;
}

.blue4 {
  background-color: #64b5f6 !important;
}

.blue5 {
  background-color: #42a5f5 !important;
}

.blue7 {
  background-color: #1e88e5 !important;
}

.blue8 {
  background-color: #1976d2 !important;
}

.blue9 {
  background-color: #1565c0 !important;
}

.blue10 {
  background-color: #0d47a1 !important;
}

.light-blue, .light-blue6 {
  background-color: #03a9f4 !important;
}

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

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

.light-blue1 {
  background-color: #e1f5fe !important;
}

.light-blue2 {
  background-color: #b3e5fc !important;
}

.light-blue3 {
  background-color: #81d4fa !important;
}

.light-blue4 {
  background-color: #4fc3f7 !important;
}

.light-blue5 {
  background-color: #29b6f6 !important;
}

.light-blue7 {
  background-color: #039be5 !important;
}

.light-blue8 {
  background-color: #0288d1 !important;
}

.light-blue9 {
  background-color: #0277bd !important;
}

.light-blue10 {
  background-color: #01579b !important;
}

.cyan, .cyan6 {
  background-color: #00bcd4 !important;
}

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

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

.cyan1 {
  background-color: #e0f7fa !important;
}

.cyan2 {
  background-color: #b2ebf2 !important;
}

.cyan3 {
  background-color: #80deea !important;
}

.cyan4 {
  background-color: #4dd0e1 !important;
}

.cyan5 {
  background-color: #26c6da !important;
}

.cyan7 {
  background-color: #00acc1 !important;
}

.cyan8 {
  background-color: #0097a7 !important;
}

.cyan9 {
  background-color: #00838f !important;
}

.cyan10 {
  background-color: #006064 !important;
}

.teal, .teal6 {
  background-color: #009688 !important;
}

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

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

.teal1 {
  background-color: #e0f2f1 !important;
}

.teal2 {
  background-color: #b2dfdb !important;
}

.teal3 {
  background-color: #80cbc4 !important;
}

.teal4 {
  background-color: #4db6ac !important;
}

.teal5 {
  background-color: #26a69a !important;
}

.teal7 {
  background-color: #00897b !important;
}

.teal8 {
  background-color: #00796b !important;
}

.teal9 {
  background-color: #00695c !important;
}

.teal10 {
  background-color: #004d40 !important;
}

.green, .green6 {
  background-color: #4caf50 !important;
}

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

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

.green1 {
  background-color: #e8f5e9 !important;
}

.green2 {
  background-color: #c8e6c9 !important;
}

.green3 {
  background-color: #a5d6a7 !important;
}

.green4 {
  background-color: #81c784 !important;
}

.green5 {
  background-color: #66bb6a !important;
}

.green7 {
  background-color: #43a047 !important;
}

.green8 {
  background-color: #388e3c !important;
}

.green9 {
  background-color: #2e7d32 !important;
}

.green10 {
  background-color: #1b5e20 !important;
}

.light-green, .light-green6 {
  background-color: #8bc34a !important;
}

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

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

.light-green1 {
  background-color: #f1f8e9 !important;
}

.light-green2 {
  background-color: #dcedc8 !important;
}

.light-green3 {
  background-color: #c5e1a5 !important;
}

.light-green4 {
  background-color: #aed581 !important;
}

.light-green5 {
  background-color: #9ccc65 !important;
}

.light-green7 {
  background-color: #7cb342 !important;
}

.light-green8 {
  background-color: #689f38 !important;
}

.light-green9 {
  background-color: #558b2f !important;
}

.light-green10 {
  background-color: #33691e !important;
}

.lime, .lime6 {
  background-color: #cddc39 !important;
}

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

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

.lime1 {
  background-color: #f9fbe7 !important;
}

.lime2 {
  background-color: #f0f4c3 !important;
}

.lime3 {
  background-color: #e6ee9c !important;
}

.lime4 {
  background-color: #dce775 !important;
}

.lime5 {
  background-color: #d4e157 !important;
}

.lime7 {
  background-color: #c0ca33 !important;
}

.lime8 {
  background-color: #afb42b !important;
}

.lime9 {
  background-color: #9e9d24 !important;
}

.lime10 {
  background-color: #827717 !important;
}

.yellow, .yellow6 {
  background-color: #ffeb3b !important;
}

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

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

.yellow1 {
  background-color: #fffde7 !important;
}

.yellow2 {
  background-color: #fff9c4 !important;
}

.yellow3 {
  background-color: #fff59d !important;
}

.yellow4 {
  background-color: #fff176 !important;
}

.yellow5 {
  background-color: #ffee58 !important;
}

.yellow7 {
  background-color: #fdd835 !important;
}

.yellow8 {
  background-color: #fbc02d !important;
}

.yellow9 {
  background-color: #f9a825 !important;
}

.yellow10 {
  background-color: #f57f17 !important;
}

.amber, .amber6 {
  background-color: #ffc107 !important;
}

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

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

.amber1 {
  background-color: #fff8e1 !important;
}

.amber2 {
  background-color: #ffecb3 !important;
}

.amber3 {
  background-color: #ffe082 !important;
}

.amber4 {
  background-color: #ffd54f !important;
}

.amber5 {
  background-color: #ffca28 !important;
}

.amber7 {
  background-color: #ffb300 !important;
}

.amber8 {
  background-color: #ffa000 !important;
}

.amber9 {
  background-color: #ff8f00 !important;
}

.amber10 {
  background-color: #ff6f00 !important;
}

.orange, .orange6 {
  background-color: #ff9800 !important;
}

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

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

.orange1 {
  background-color: #fff3e0 !important;
}

.orange2 {
  background-color: #ffe0b2 !important;
}

.orange3 {
  background-color: #ffcc80 !important;
}

.orange4 {
  background-color: #ffb74d !important;
}

.orange5 {
  background-color: #ffa726 !important;
}

.orange7 {
  background-color: #fb8c00 !important;
}

.orange8 {
  background-color: #f57c00 !important;
}

.orange9 {
  background-color: #ef6c00 !important;
}

.orange10 {
  background-color: #e65100 !important;
}

.deep-orange, .deep-orange6 {
  background-color: #ff5722 !important;
}

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

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

.deep-orange1 {
  background-color: #fbe9e7 !important;
}

.deep-orange2 {
  background-color: #ffccbc !important;
}

.deep-orange3 {
  background-color: #ffab91 !important;
}

.deep-orange4 {
  background-color: #ff8a65 !important;
}

.deep-orange5 {
  background-color: #ff7043 !important;
}

.deep-orange7 {
  background-color: #f4511e !important;
}

.deep-orange8 {
  background-color: #e64a19 !important;
}

.deep-orange9 {
  background-color: #d84315 !important;
}

.deep-orange10 {
  background-color: #bf360c !important;
}

.brown, .brown6 {
  background-color: #795548 !important;
}

.brown-border {
  border-color: #795548 !important;
}

.brown-text {
  color: #795548 !important;
}

.brown1 {
  background-color: #efebe9 !important;
}

.brown2 {
  background-color: #d7ccc8 !important;
}

.brown3 {
  background-color: #bcaaa4 !important;
}

.brown4 {
  background-color: #a1887f !important;
}

.brown5 {
  background-color: #8d6e63 !important;
}

.brown7 {
  background-color: #6d4c41 !important;
}

.brown8 {
  background-color: #5d4037 !important;
}

.brown9 {
  background-color: #4e342e !important;
}

.brown10 {
  background-color: #3e2723 !important;
}

.blue-grey, .blue-grey6 {
  background-color: #607d8b !important;
}

.blue-grey-border {
  border-color: #607d8b !important;
}

.blue-grey-text {
  color: #607d8b !important;
}

.blue-grey1 {
  background-color: #eceff1 !important;
}

.blue-grey2 {
  background-color: #cfd8dc !important;
}

.blue-grey3 {
  background-color: #b0bec5 !important;
}

.blue-grey4 {
  background-color: #90a4ae !important;
}

.blue-grey5 {
  background-color: #78909c !important;
}

.blue-grey7 {
  background-color: #546e7a !important;
}

.blue-grey8 {
  background-color: #455a64 !important;
}

.blue-grey9 {
  background-color: #37474f !important;
}

.blue-grey10 {
  background-color: #263238 !important;
}

.grey, .grey6 {
  background-color: #9e9e9e !important;
}

.grey-border {
  border-color: #9e9e9e !important;
}

.grey-text {
  color: #9e9e9e !important;
}

.grey1 {
  background-color: #fafafa !important;
}

.grey2 {
  background-color: #f5f5f5 !important;
}

.grey3 {
  background-color: #eee !important;
}

.grey4 {
  background-color: #e0e0e0 !important;
}

.grey5 {
  background-color: #bdbdbd !important;
}

.grey7 {
  background-color: #757575 !important;
}

.grey8 {
  background-color: #616161 !important;
}

.grey9 {
  background-color: #424242 !important;
}

.grey10 {
  background-color: #212121 !important;
}

.horizontal {
  display: inline-flex;
  flex-direction: row !important;
  gap: 1rem;
  inline-size: auto !important;
  max-inline-size: none !important;
}

.horizontal > * {
  margin-block: 0 !important;
}

.vertical {
  display: flex;
  flex-direction: column !important;
}

:is(a, button, .button, .chip).vertical {
  display: inline-flex;
  gap: 0.25rem;
  block-size: auto !important;
  max-block-size: none !important;
  padding-block: 0.5rem;
}

.vertical > * {
  margin-inline: 0 !important;
}

.no-elevate {
  box-shadow: none !important;
}

.small-elevate, .elevate {
  box-shadow: var(--elevate1) !important;
}

.medium-elevate {
  box-shadow: var(--elevate2) !important;
}

.large-elevate {
  box-shadow: var(--elevate3) !important;
}

.round {
  border-radius: var(---round);
}

.small-round, .medium-round, .large-round {
  border-radius: var(---round) !important;
}

.top-round, .bottom-round, .left-round, .right-round, .medium-round, .round {
  ---round: 2rem;
}

.small-round {
  ---round: .5rem;
}

.large-round {
  ---round: 3.5rem;
}

.no-round, .square, .top-round, .bottom-round, .left-round, .right-round {
  border-radius: 0 !important;
}

.top-round {
  border-start-start-radius: var(---round) !important;
  border-start-end-radius: var(---round) !important;
}

.bottom-round {
  border-end-end-radius: var(---round) !important;
  border-end-start-radius: var(---round) !important;
}

.left-round {
  border-start-start-radius: var(---round) !important;
  border-end-start-radius: var(---round) !important;
}

.right-round {
  border-start-end-radius: var(---round) !important;
  border-end-end-radius: var(---round) !important;
}

.circle {
  border-radius: 50%;
}

:is(button, .button, .chip).circle {
  border-radius: 2.5rem;
}

:is(.circle, .square):not(i, img, video, svg), :is(.circle, .square).chip.medium {
  block-size: 2.5rem;
  inline-size: 2.5rem;
  padding: 0;
}

:is(.circle, .square) > span {
  display: none;
}

:is(.circle, .square).small:not(i, img, video, svg), :is(.circle, .square).chip {
  block-size: 2rem;
  inline-size: 2rem;
}

:is(.circle, .square).large:not(i, img, video, svg) {
  block-size: 3rem;
  inline-size: 3rem;
}

:is(.circle, .square).extra:not(i, img, video, svg) {
  block-size: 3.5rem;
  inline-size: 3.5rem;
}

:is(.circle, .square).round {
  border-radius: 1rem !important;
}

.border:not(table, .field, .list, menu) {
  box-sizing: border-box;
  border: 0.0625rem solid var(--outline);
  background-color: transparent;
  box-shadow: none;
}

.no-border {
  border-color: transparent !important;
}

:is(nav, .row, dialog.max, header.fixed, footer.fixed, menu > a, menu.max, table, .tabs):not(.round) {
  border-radius: 0;
}

[class*=margin]:not(.left-margin, .right-margin, .top-margin, .bottom-margin, .horizontal-margin, .vertical-margin) {
  margin: var(---margin) !important;
}

[class*=margin] {
  ---margin: 1rem;
}

.no-margin {
  ---margin: 0;
}

.auto-margin {
  ---margin: auto;
}

.tiny-margin {
  ---margin: .25rem;
}

.small-margin {
  ---margin: .5rem;
}

.large-margin {
  ---margin: 1.5rem;
}

.left-margin, .horizontal-margin {
  margin-inline-start: var(---margin) !important;
}

.right-margin, .horizontal-margin {
  margin-inline-end: var(---margin) !important;
}

.top-margin, .vertical-margin {
  margin-block-start: var(---margin) !important;
}

.bottom-margin, .vertical-margin {
  margin-block-end: var(---margin) !important;
}

.no-opacity {
  opacity: 1 !important;
}

.opacity {
  opacity: 0 !important;
}

.small-opacity {
  opacity: 0.75 !important;
}

.medium-opacity {
  opacity: 0.5 !important;
}

.large-opacity {
  opacity: 0.25 !important;
}

[class*=padding]:not(.left-padding, .right-padding, .top-padding, .bottom-padding, .horizontal-padding, .vertical-padding) {
  padding: var(---padding) !important;
}

[class*=padding] {
  ---padding: 1rem;
}

.no-padding {
  ---padding: 0;
}

.tiny-padding {
  ---padding: .25rem;
}

.small-padding {
  ---padding: .5rem;
}

.large-padding {
  ---padding: 1.5rem;
}

.left-padding, .horizontal-padding {
  padding-inline-start: var(---padding) !important;
}

.right-padding, .horizontal-padding {
  padding-inline-end: var(---padding) !important;
}

.top-padding, .vertical-padding {
  padding-block-start: var(---padding) !important;
}

.bottom-padding, .vertical-padding {
  padding-block-end: var(---padding) !important;
}

.front {
  z-index: 10 !important;
}

.back {
  z-index: -10 !important;
}

.left {
  inset-inline-start: 0;
}

.right {
  inset-inline-end: 0;
}

.top {
  inset-block-start: 0;
}

.bottom {
  inset-block-end: 0;
}

.center {
  inset-inline-start: 50%;
  transform: translate(-50%);
}

[dir=rtl] .center {
  transform: translate(50%);
}

.middle {
  inset-block-start: 50%;
  transform: translateY(-50%);
}

.middle.center {
  transform: translate(-50%, -50%);
}

[dir=rtl] .middle.center {
  transform: translate(50%, -50%);
}

.ripple {
  ---duration: .6s;
}

.fast-ripple {
  ---duration: .2s;
}

.slow-ripple {
  ---duration: 1.8s;
}

.ripple-js {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  overflow: hidden;
}

.ripple-js > div {
  position: absolute;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.3;
  transform: scale(0);
  animation: to-ripple var(---duration) linear;
}

@keyframes to-ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}
.scroll {
  overflow: auto;
}

.no-scroll {
  overflow: hidden;
}

[class*=width] {
  max-inline-size: 100%;
}

.auto-width {
  inline-size: auto;
}

.small-width {
  inline-size: 12rem !important;
}

.medium-width {
  inline-size: 24rem !important;
}

.large-width {
  inline-size: 36rem !important;
}

.auto-height {
  block-size: auto;
}

.small-height {
  block-size: 12rem !important;
}

.medium-height {
  block-size: 24rem !important;
}

.large-height {
  block-size: 36rem !important;
}

.wrap {
  display: block;
  white-space: normal;
}

.no-wrap:not(menu) {
  display: flex;
  white-space: nowrap;
}

.tiny-space:not(nav, ol, ul, .row, .grid, table, .tooltip, .list, menu) {
  block-size: 0.5rem;
}

:is(.space, .small-space):not(nav, ol, ul, .row, .grid, table, .tooltip, .list, menu) {
  block-size: 1rem;
}

.medium-space:not(nav, ol, ul, .row, .grid, table, .tooltip, .list, menu) {
  block-size: 2rem;
}

.large-space:not(nav, ol, ul, .row, .grid, table, .tooltip, .list, menu) {
  block-size: 3rem;
}

.responsive {
  inline-size: -webkit-fill-available;
  inline-size: -moz-available;
}

@media only screen and (max-width: 600px) {
  .m:not(.s), .l:not(.s), .m.l:not(.s) {
    display: none;
  }
}
@media only screen and (min-width: 601px) and (max-width: 992px) {
  .s:not(.m), .l:not(.m), .s.l:not(.m) {
    display: none;
  }
}
@media only screen and (min-width: 993px) {
  .m:not(.l), .s:not(.l), .m.s:not(.l) {
    display: none;
  }
}
html {
  font-size: var(--size);
}

body {
  font-family: var(--font);
  font-size: 0.875rem;
  line-height: 1.5rem;
  letter-spacing: 0.0313rem;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 400;
  display: block;
  align-items: center;
  line-height: normal;
}

h1 {
  font-size: 3.5625rem;
}

h2 {
  font-size: 2.8125rem;
}

h3 {
  font-size: 2.25rem;
}

h4 {
  font-size: 2rem;
}

h5 {
  font-size: 1.75rem;
}

h6 {
  font-size: 1.5rem;
}

h1.small {
  font-size: 3.0625rem;
}

h2.small {
  font-size: 2.3125rem;
}

h3.small {
  font-size: 1.75rem;
}

h4.small {
  font-size: 1.5rem;
}

h5.small {
  font-size: 1.25rem;
}

h6.small {
  font-size: 1rem;
}

h1.large {
  font-size: 4.0625rem;
}

h2.large {
  font-size: 3.3125rem;
}

h3.large {
  font-size: 2.75rem;
}

h4.large {
  font-size: 2.5rem;
}

h5.large {
  font-size: 2.25rem;
}

h6.large {
  font-size: 2rem;
}

.link {
  color: var(--primary) !important;
}

.inverse-link {
  color: var(--inverse-primary) !important;
}

.truncate {
  overflow: hidden;
  white-space: nowrap !important;
  text-overflow: ellipsis;
  flex: inherit;
}

.truncate > * {
  white-space: nowrap !important;
}

.small-text {
  font-size: 0.75rem;
}

.medium-text {
  font-size: 0.875rem;
}

.large-text {
  font-size: 1rem;
}

.upper {
  text-transform: uppercase;
}

.lower {
  text-transform: lowercase;
}

.capitalize {
  text-transform: capitalize;
}

.bold {
  font-weight: 700;
}

.overline {
  text-decoration: line-through;
}

.underline {
  text-decoration: underline;
}

.italic {
  font-style: italic;
}

p {
  margin: 0.5rem 0;
}

.no-line {
  line-height: normal;
}

.tiny-line {
  line-height: 1.25rem;
}

.small-line {
  line-height: 1.5rem;
}

.medium-line {
  line-height: 1.75rem;
}

.large-line {
  line-height: 2rem;
}

.extra-line {
  line-height: 2.25rem;
}

pre {
  border-radius: 0;
  background-color: var(--surface-container);
  white-space: pre-wrap;
  padding: 1rem;
  border-inline-start: 0.25rem solid var(--primary);
  font-family: inherit;
}

blockquote {
  border-radius: 0;
  padding: 1rem;
  border-inline-start: 0.25rem solid var(--primary);
  font-family: inherit;
}

code {
  border-radius: 0;
  background-color: var(--surface-container);
  white-space: pre-wrap;
  padding: 0.25rem;
}

pre > code, blockquote > code {
  padding: 0;
}

.scroll > code {
  white-space: pre;
}

pre:has(> code) {
  direction: ltr;
  text-align: start;
}

:is(.wave, .chip, .button, button, nav.tabbed > a, .tabs > a):not(.slow-ripple, .ripple, .fast-ripple):after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  border-radius: inherit;
  inline-size: 100%;
  block-size: 100%;
  background-position: center;
  background-image: radial-gradient(circle, currentColor 1%, transparent 1%);
  opacity: 0;
  transition: none;
}

:is(.wave, .chip, .button, button, nav.tabbed > a, .tabs > a):not(.slow-ripple, .ripple, .fast-ripple):is(:focus-visible, :hover):after {
  background-size: 15000%;
  opacity: 0.1;
  transition: background-size var(--speed2) linear;
}

:is(.wave, .chip, .button, button, nav.tabbed > a, .tabs > a):not(.slow-ripple, .ripple, .fast-ripple):active:after {
  background-size: 5000%;
  opacity: 0;
  transition: none;
}

.no-wave:after, .no-wave:is(:hover, :active):after {
  display: none;
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  font-size: 0.6875rem;
  text-transform: none;
  z-index: 2;
  padding: 0 0.25rem;
  min-block-size: 1rem;
  min-inline-size: 1rem;
  background-color: var(--error);
  color: var(--on-error);
  line-height: normal;
  border-radius: 1rem;
  inset: 50% auto auto 50%;
  transform: translateY(-100%);
  font-family: var(--font);
}

.badge.top {
  transform: translate(-50%, -100%);
}

.badge.bottom {
  transform: translate(-50%);
}

.badge.left {
  transform: translate(-100%, -50%);
}

.badge.right {
  transform: translateY(-50%);
}

.badge.top.left {
  transform: translate(-100%, -100%);
}

.badge.bottom.left {
  transform: translate(-100%);
}

.badge.top.right {
  transform: translateY(-100%);
}

.badge.bottom.right {
  transform: translate(0);
}

.badge.border {
  border-color: var(--error);
  color: var(--error);
  background-color: var(--surface);
}

.badge:is(.circle, .square) {
  text-align: center;
  inline-size: auto;
  block-size: auto;
  padding: 0 0.25rem;
  border-radius: 1rem;
}

.badge.square {
  border-radius: 0;
}

.badge.min > * {
  display: none;
}

.badge.min {
  clip-path: circle(18.75% at 50% 50%);
}

nav:is(.left, .right, .top, .bottom) > a > .badge, nav:is(.left, .right, .top, .bottom) > :is(ol, ul) > li > a > .badge {
  inset: 1rem auto auto 50%;
}

.badge.none {
  inset: auto !important;
  transform: none;
  position: relative;
  margin: 0 0.125rem;
}

:is(button, .button, .chip) > .badge.none {
  margin: 0 -0.5rem;
}

.button, button {
  box-sizing: content-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  block-size: 2.5rem;
  min-inline-size: 2.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--on-primary);
  padding: 0 1.5rem;
  background-color: var(--primary);
  margin: 0 0.5rem;
  border-radius: 1.25rem;
  transition: transform var(--speed3), border-radius var(--speed3), padding var(--speed3);
  -webkit-user-select: none;
  user-select: none;
  gap: 1rem;
  line-height: normal;
}

:is(button, .button).small {
  block-size: 2rem;
  min-inline-size: 2rem;
  border-radius: 1rem;
}

:is(button, .button).large {
  block-size: 3rem;
  min-inline-size: 3rem;
  border-radius: 1.5rem;
}

:is(.button, button):is(.extra, .extend) {
  block-size: 3.5rem;
  min-inline-size: 3.5rem;
  font-size: 1rem;
  border-radius: 1.75rem;
}

:is(button, .button).border {
  border-color: var(--outline);
  color: var(--primary);
}

:is(button, .button):not(.border, .chip):hover {
  box-shadow: var(--elevate1);
}

.extend > span {
  display: none;
}

.extend:is(:hover, .active) {
  inline-size: auto;
  padding: 0 1.5rem;
}

.extend:is(:hover, .active) > i + span {
  display: inherit;
  margin-inline-start: 1.5rem;
}

.extend:is(:hover, .active) > :is(img, svg) + span {
  display: inherit;
  margin-inline-start: 2.5rem;
}

:is(.button, button)[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.button[disabled] {
  pointer-events: none;
}

:is(.button, button)[disabled]:before, :is(.button, button)[disabled]:after {
  display: none;
}

:is(.button, button).fill {
  background-color: var(--secondary-container) !important;
  color: var(--on-secondary-container) !important;
}

:is(.button, button).vertical {
  border-radius: 2rem;
}

article {
  box-shadow: var(--elevate1);
  background-color: var(--surface-container-low);
  color: var(--on-surface);
  padding: 1rem;
  border-radius: 0.75rem;
  display: block;
  transition: transform var(--speed3), border-radius var(--speed3), padding var(--speed3);
}

article.small {
  block-size: 12rem;
}

article.medium {
  block-size: 20rem;
}

article.large {
  block-size: 32rem;
}

.chip {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  block-size: 2rem;
  min-inline-size: 2rem;
  font-size: 0.875rem;
  font-weight: 500;
  background-color: transparent;
  border: 0.0625rem solid var(--outline-variant);
  color: var(--on-surface-variant);
  padding: 0 1rem;
  margin: 0 0.5rem;
  text-transform: none;
  border-radius: 0.5rem;
  transition: transform var(--speed3), border-radius var(--speed3), padding var(--speed3);
  -webkit-user-select: none;
  user-select: none;
  gap: 1rem;
  line-height: normal;
  letter-spacing: normal;
}

.chip.fill:hover {
  box-shadow: var(--elevate1);
}

.chip.medium {
  block-size: 2.5rem;
  min-inline-size: 2.5rem;
  border-radius: 0.5rem;
}

.chip.large {
  block-size: 3rem;
  min-inline-size: 3rem;
  border-radius: 0.5rem;
}

.chip.fill {
  background-color: var(--secondary-container) !important;
  border: none;
}

.chip.round.small {
  border-radius: 1rem;
}

.chip.round {
  border-radius: 1.25rem;
}

.chip.round.large {
  border-radius: 1.5rem;
}

main.responsive {
  flex: 1;
  padding: 0.5rem;
  overflow-x: hidden;
}

:is(main, header, footer, section).responsive {
  max-inline-size: 75rem;
  margin: 0 auto;
}

:is(main, header, footer, section).responsive.max {
  max-inline-size: 100%;
}

*:has(> main.responsive) {
  display: flex;
  flex-direction: column;
  min-block-size: 100vh;
}

*:has(> nav.bottom:not(.s, .m, .l)) {
  padding-block-end: calc(var(--bottom) + 5rem);
}

*:has(> nav.top:not(.s, .m, .l)) {
  padding-block-start: calc(var(--top) + 5rem);
}

*:has(> nav.left:not(.s, .m, .l)) {
  padding-inline-start: calc(var(--left) + 5rem);
}

*:has(> nav.right:not(.s, .m, .l)) {
  padding-inline-end: calc(var(--right) + 5rem);
}

*:has(> nav.drawer.left:not(.s, .m, .l)) {
  padding-inline-start: calc(var(--left) + 20rem);
}

*:has(> nav.drawer.right:not(.s, .m, .l)) {
  padding-inline-end: calc(var(--right) + 20rem);
}

nav.top:not(.s, .m, .l) ~ header.fixed {
  inset-block-start: 5rem;
}

nav.bottom:not(.s, .m, .l) ~ footer.fixed {
  inset-block-end: 5rem;
}

:not(main):has(> aside) {
  overflow: auto;
}

aside {
  z-index: 1;
}

aside:not(.fixed, .absolute).right {
  float: right;
}

aside:not(.fixed, .absolute).left {
  float: left;
}

@media only screen and (max-width: 600px) {
  *:has(> nav.s.bottom) {
    padding-block-end: calc(var(--bottom) + 5rem);
  }
  *:has(> nav.s.top) {
    padding-block-start: calc(var(--top) + 5rem);
  }
  *:has(> nav.s.left) {
    padding-inline-start: calc(var(--left) + 5rem);
  }
  *:has(> nav.s.right) {
    padding-inline-end: calc(var(--right) + 5rem);
  }
  *:has(> nav.s.drawer.left) {
    padding-inline-start: calc(var(--left) + 20rem);
  }
  *:has(> nav.s.drawer.right) {
    padding-inline-end: calc(var(--right) + 20rem);
  }
  nav.s.top ~ header.fixed {
    inset-block-start: 5rem;
  }
  nav.s.bottom ~ footer.fixed {
    inset-block-end: 5rem;
  }
}
@media only screen and (min-width: 601px) and (max-width: 992px) {
  *:has(> nav.m.bottom) {
    padding-block-end: calc(var(--bottom) + 5rem);
  }
  *:has(> nav.m.top) {
    padding-block-start: calc(var(--top) + 5rem);
  }
  *:has(> nav.m.left) {
    padding-inline-start: calc(var(--left) + 5rem);
  }
  *:has(> nav.m.right) {
    padding-inline-end: calc(var(--right) + 5rem);
  }
  *:has(> nav.m.drawer.left) {
    padding-inline-start: calc(var(--left) + 20rem);
  }
  *:has(> nav.m.drawer.right) {
    padding-inline-end: calc(var(--right) + 20rem);
  }
  nav.m.top ~ header.fixed {
    inset-block-start: 5rem;
  }
  nav.m.bottom ~ footer.fixed {
    inset-block-end: 5rem;
  }
}
@media only screen and (min-width: 993px) {
  *:has(> nav.l.bottom) {
    padding-block-end: calc(var(--bottom) + 5rem);
  }
  *:has(> nav.l.top) {
    padding-block-start: calc(var(--top) + 5rem);
  }
  *:has(> nav.l.left) {
    padding-inline-start: calc(var(--left) + 5rem);
  }
  *:has(> nav.l.right) {
    padding-inline-end: calc(var(--right) + 5rem);
  }
  *:has(> nav.l.drawer.left) {
    padding-inline-start: calc(var(--left) + 20rem);
  }
  *:has(> nav.l.drawer.right) {
    padding-inline-end: calc(var(--right) + 20rem);
  }
  nav.l.top ~ header.fixed {
    inset-block-start: 5rem;
  }
  nav.l.bottom ~ footer.fixed {
    inset-block-end: 5rem;
  }
}
@media only screen and (max-width: 600px) {
  main.responsive {
    padding-inline: calc(var(--left) + 0.5rem) calc(var(--right) + 0.5rem);
  }
}
dialog {
  display: block;
  visibility: hidden;
  border: none;
  opacity: 0;
  position: fixed;
  box-shadow: var(--elevate2);
  color: var(--on-surface);
  background-color: var(--surface-container-high);
  padding: 1.5rem;
  z-index: 100;
  inset: 10% auto auto 50%;
  min-inline-size: 20rem;
  max-inline-size: 100%;
  max-block-size: 80%;
  overflow-x: hidden;
  overflow-y: auto;
  transition: all var(--speed3), 0s background-color;
  border-radius: 1.75rem;
  transform: translate(-50%, -4rem);
  outline: none;
}

dialog.small {
  inline-size: 25%;
  block-size: 25%;
}

dialog.medium {
  inline-size: 50%;
  block-size: 50%;
}

dialog.large {
  inline-size: 75%;
  block-size: 75%;
}

dialog:is(.active, [open]) {
  visibility: visible;
  opacity: 1;
  transform: translate(-50%);
}

dialog:popover-open {
  visibility: visible;
  opacity: 1;
  transform: translate(-50%);
}

dialog.top {
  opacity: 1;
  padding: 1rem;
  inset: 0 auto auto 0;
  block-size: auto;
  inline-size: 100%;
  min-inline-size: auto;
  max-block-size: 100%;
  transform: translateY(-100%);
  border-radius: 0 0 1rem 1rem;
}

[dir=rtl] dialog.right, dialog.left {
  opacity: 1;
  padding: 1rem;
  inset: 0 auto auto 0;
  inline-size: auto;
  block-size: 100%;
  max-block-size: 100%;
  border-radius: 0 1rem 1rem 0;
  background-color: var(--surface);
  transform: translate(-100%);
}

[dir=rtl] dialog.left, dialog.right {
  opacity: 1;
  padding: 1rem;
  inset: 0 0 auto auto;
  inline-size: auto;
  block-size: 100%;
  max-block-size: 100%;
  border-radius: 1rem 0 0 1rem;
  background-color: var(--surface);
  transform: translate(100%);
}

dialog.bottom {
  opacity: 1;
  padding: 1rem;
  inset: auto auto 0 0;
  block-size: auto;
  inline-size: 100%;
  min-inline-size: auto;
  max-block-size: 100%;
  transform: translateY(100%);
  border-radius: 1rem 1rem 0 0;
}

dialog.max {
  inset: 0 auto auto 0;
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: 100%;
  max-block-size: 100%;
  transform: translateY(4rem);
  background-color: var(--surface);
}

dialog:is(.active, [open]):is(.left, .right, .top, .bottom, .max) {
  transform: translate(0);
}

dialog:popover-open:is(.left, .right, .top, .bottom, .max) {
  transform: translate(0);
}

dialog.small:is(.left, .right) {
  inline-size: 20rem;
}

dialog.medium:is(.left, .right) {
  inline-size: 32rem;
}

dialog.large:is(.left, .right) {
  inline-size: 44rem;
}

dialog.small:is(.top, .bottom) {
  block-size: 16rem;
}

dialog.medium:is(.top, .bottom) {
  block-size: 24rem;
}

dialog.large:is(.top, .bottom) {
  block-size: 32rem;
}

hr, [class*=divider] {
  all: unset;
  min-inline-size: 1.5rem;
  min-block-size: auto;
  block-size: 0.0625rem;
  background-color: var(--outline-variant);
  display: block;
}

hr + *, [class*=divider] + * {
  margin: 0 !important;
}

hr.medium, .medium-divider {
  margin: 1rem 0 !important;
}

hr.large, .large-divider {
  margin: 1.5rem 0 !important;
}

hr.small, .small-divider {
  margin: 0.5rem 0 !important;
}

hr.vertical, .divider.vertical {
  min-inline-size: auto;
  min-block-size: 1.5rem;
  inline-size: 0.0625rem;
}

summary, summary:focus {
  list-style-type: none;
  cursor: pointer;
  outline: none;
}

summary::-webkit-details-marker {
  display: none;
}

.field {
  ---size: 3rem;
  ---start: 1.2rem;
  block-size: var(---size);
  margin-block-end: 2rem;
  border-radius: 0.25rem 0.25rem 0 0;
}

.grid > * > .field {
  margin-block-end: 1rem;
}

.grid > * > .field + .field {
  margin-block-start: 2rem;
}

.grid.no-space > * > .field + .field {
  margin-block-start: 1rem;
}

.grid.medium-space > * > .field + .field {
  margin-block-start: 2.5rem;
}

.grid.large-space > * > .field + .field {
  margin-block-start: 3rem;
}

.field.small {
  ---size: 2.5rem;
  ---start: 1rem;
}

.field.large {
  ---size: 3.5rem;
  ---start: 1.4rem;
}

.field.extra {
  ---size: 4rem;
  ---start: 1.6rem;
}

.field.border {
  border-radius: 0.25rem;
}

.field.round.small {
  border-radius: 1.25rem;
}

.field.round {
  border-radius: 1.5rem;
}

.field.round.large {
  border-radius: 1.75rem;
}

.field.round.extra {
  border-radius: 2rem;
}

.field > :is(i, img, svg, progress, a:not(.helper, .error)) {
  position: absolute;
  inset: 50% auto auto auto;
  transform: translateY(-50%);
  cursor: pointer;
  z-index: 0;
  inline-size: 1.5rem;
  block-size: 1.5rem;
}

.field > :is(i, img, svg, progress, a:not(.helper, .error)), [dir=rtl] .field > :is(i, img, svg, progress, a:not(.helper, .error)):first-child {
  inset: 50% 1rem auto auto;
}

.field > :is(i, img, svg, progress, a:not(.helper, .error)):first-child, [dir=rtl] .field > :is(i, img, svg, progress, a:not(.helper, .error)) {
  inset: 50% auto auto 1rem;
}

.field.invalid > i {
  color: var(--error);
}

.field > progress.circle {
  inset-block-start: calc(50% - 0.75rem) !important;
  border-width: 0.1875rem;
}

.field > a:not(.helper, .error) {
  z-index: 10;
}

.field > a > :is(i, img, svg, progress, a:not(.helper, .error)) {
  inline-size: 1.5rem;
  block-size: 1.5rem;
}

.field > :is(input, textarea, select) {
  all: unset;
  position: relative;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  border-radius: inherit;
  border: 0.0625rem solid transparent;
  padding: 0 0.9375rem;
  font-family: inherit;
  font-size: 1rem;
  inline-size: 100%;
  block-size: 100%;
  outline: none;
  z-index: 1;
  background: none;
  resize: none;
  text-align: start;
  cursor: text;
}

input::-webkit-date-and-time-value {
  text-align: start;
}

:is(input, select, textarea):-webkit-autofill {
  -webkit-background-clip: text;
  -webkit-text-fill-color: var(--on-surface);
}

.field > :is(input, textarea, select):focus {
  border: 0.125rem solid transparent;
  padding: 0 0.875rem;
}

.field.min > textarea {
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  max-block-size: 12rem;
}

input[type=file], input[type=color], :not(.field) > input[type^=date], :not(.field) > input[type^=time], input::-webkit-calendar-picker-indicator {
  opacity: 0;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inline-size: 100%;
  block-size: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  z-index: 2 !important;
}

input::-webkit-search-decoration, input::-webkit-search-cancel-button, input::-webkit-search-results-button, input::-webkit-search-results-decoration, input::-webkit-inner-spin-button, input::-webkit-outer-spin-button {
  display: none;
}

input[type=number] {
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}

.field.border > :is(input, textarea, select) {
  border-color: var(--outline);
}

.field.border > :is(input, textarea, select):focus {
  border-color: var(--primary);
}

.field.round > :is(input, textarea, select) {
  padding-inline: 1.4376rem;
}

.field.round > :is(input, textarea, select):focus {
  padding-inline: 1.375rem;
}

.field.prefix > :is(input, textarea, select) {
  padding-inline-start: 2.9375rem;
}

.field.prefix > .slider {
  margin-inline-start: 3.5rem;
}

.field.prefix > :is(input, textarea, select):focus {
  padding-inline-start: 2.875rem;
}

.field.suffix > :is(input, textarea, select) {
  padding-inline-end: 2.9375rem;
}

.field.suffix > .slider {
  margin-inline-end: 3.5rem;
}

.field.suffix > :is(input, textarea, select):focus {
  padding-inline-end: 2.875rem;
}

.field:not(.border, .round) > :is(input, textarea, select) {
  border-block-end-color: var(--outline);
}

.field:not(.border, .round) > :is(input, textarea, select):focus {
  border-block-end-color: var(--primary);
}

.field.round:not(.border, .fill) > :is(input, textarea, select), .field.round:not(.border) > :is(input, textarea, select):focus {
  box-shadow: var(--elevate1);
}

.field.round:not(.border, .fill) > :is(input, textarea, select):focus {
  box-shadow: var(--elevate2);
}

.field.invalid:not(.border, .round) > :is(input, textarea, select), .field.invalid:not(.border, .round) > :is(input, textarea, select):focus {
  border-block-end-color: var(--error);
}

.field.invalid.border > :is(input, textarea, select), .field.invalid.border > :is(input, textarea, select):focus {
  border-color: var(--error);
}

.field:has(> :disabled) {
  opacity: 0.5;
  cursor: not-allowed;
}

.field > :disabled {
  cursor: not-allowed;
}

.field.textarea.small:not(.min) {
  ---size: 4.5rem;
}

.field.textarea:not(.min) {
  ---size: 5.5rem;
}

.field.textarea.large:not(.min) {
  ---size: 6.5rem;
}

.field.textarea.extra:not(.min) {
  ---size: 7.5rem;
}

.field > select {
  -webkit-user-select: none;
  user-select: none;
}

.field > select > option {
  background-color: var(--surface-container);
  color: var(--on-surface);
}

.field.label > :is(input, select) {
  padding-block-start: 1rem;
}

.field.label.border:not(.fill) > :is(input, select) {
  padding-block-start: 0;
}

.field > textarea {
  padding-block-start: var(---start);
  white-space: pre-wrap;
}

.field > textarea:focus {
  padding-block-start: calc(var(---start) - 0.06rem);
}

.field:not(.label) > textarea, .field.border.label:not(.fill) > textarea {
  padding-block-start: calc(var(---start) - 0.5rem);
}

.field:not(.label) > textarea:focus, .field.border.label:not(.fill) > textarea:focus {
  padding-block-start: calc(var(---start) - 0.56rem);
}

.field.label > label {
  position: absolute;
  inset: -0.5rem auto auto 1rem;
  display: flex;
  inline-size: calc(100% - 5rem);
  block-size: 4rem;
  line-height: 4rem;
  font-size: 1rem;
  transition: all 0.2s;
  gap: 0.25rem;
  white-space: nowrap;
}

[dir=rtl] .field.label > label {
  inset: -0.5rem 1rem auto auto;
}

.field.label.small > label {
  block-size: 3.5rem;
  line-height: 3.5rem;
}

.field.label.large > label {
  block-size: 4.5rem;
  line-height: 4.5rem;
}

.field.label.extra > label {
  block-size: 5rem;
  line-height: 5rem;
}

.field.label.border.prefix:not(.fill) > :is(label.active, :focus + label, [placeholder]:not(:placeholder-shown) + label, select + label) {
  inset-inline-start: 1rem;
}

.field.label.round > label, .field.label.border.prefix.round:not(.fill) > :is(label.active, :focus + label, [placeholder]:not(:placeholder-shown) + label, select + label) {
  inset-inline-start: 1.5rem;
}

.field.label.prefix > label {
  inset-inline-start: 3rem;
}

.field.label > :is(label.active, :focus + label, [placeholder]:not(:placeholder-shown) + label, select + label) {
  block-size: 2.5rem;
  line-height: 2.5rem;
  font-size: 0.75rem;
}

.field.label.border:not(.fill) > :is(label.active, :focus + label, [placeholder]:not(:placeholder-shown) + label, select + label) {
  block-size: 1rem;
  line-height: 1rem;
}

.field.label.border:not(.fill) > label:after {
  content: "";
  display: block;
  margin-block-start: 0.5rem;
  border-block-start: 0.0625rem solid var(--outline);
  block-size: 1rem;
  transition: none;
  flex: auto;
}

.field.label.border:not(.fill) > :focus + label:after {
  border-block-start: 0.125rem solid var(--primary);
}

.field.label.border:not(.fill) > :is(input, textarea):is(:focus, [placeholder]:not(:placeholder-shown), .active), .field.label.border:not(.fill) > select {
  clip-path: polygon(-2% -2%, 0.75rem -2%, 0.75rem 0.5rem, calc(100% - 5rem) 0.5rem, calc(100% - 5rem) -2%, 102% -2%, 102% 102%, -2% 102%);
}

[dir=rtl] .field.label.border:not(.fill) > :is(input, textarea):is(:focus, [placeholder]:not(:placeholder-shown), .active), [dir=rtl] .field.label.border:not(.fill) > select {
  clip-path: polygon(-2% -2%, 5rem -2%, 5rem 0.5rem, calc(100% - 0.75rem) 0.5rem, calc(100% - 0.75rem) -2%, 102% -2%, 102% 102%, -2% 102%);
}

.field.label.border.round:not(.fill) > :is(input, textarea):is(:focus, [placeholder]:not(:placeholder-shown), .active), .field.label.border.round:not(.fill) > select {
  clip-path: polygon(-2% -2%, 1.25rem -2%, 1.25rem 0.5rem, calc(100% - 5rem) 0.5rem, calc(100% - 5rem) -2%, 102% -2%, 102% 102%, -2% 102%);
}

[dir=rtl] .field.label.border.round:not(.fill) > :is(input, textarea):is(:focus, [placeholder]:not(:placeholder-shown), .active), [dir=rtl] .field.label.border.round:not(.fill) > select {
  clip-path: polygon(-2% -2%, 5rem -2%, 5rem 0.5rem, calc(100% - 1.25rem) 0.5rem, calc(100% - 1.25rem) -2%, 102% -2%, 102% 102%, -2% 102%);
}

.field.label > :focus + label {
  color: var(--primary);
}

.field.label.invalid > label, .field.label.invalid > label:after {
  color: var(--error) !important;
  border-color: var(--error) !important;
}

.field.label > label > a {
  block-size: inherit;
  line-height: inherit;
  inline-size: 1rem;
}

.field.label > label > a > :is(i, img, svg) {
  block-size: 1rem;
  line-height: 1rem;
  inline-size: 1rem;
  font-size: 1rem;
}

.field > :is(.helper, .error) {
  position: absolute;
  inset: auto auto 0 1rem;
  transform: translateY(100%);
  font-size: 0.75rem;
  background: none !important;
  padding-block-start: 0.125rem;
}

[dir=rtl] .field > :is(.helper, .error) {
  inset: auto 1rem 0 auto;
}

a.helper {
  color: var(--primary);
}

.field > .error {
  color: var(--error) !important;
}

.field.round > :is(.helper, .error) {
  inset-inline-start: 1.5rem;
}

.field.invalid > .helper {
  display: none;
}

table td > .field {
  margin: 0;
}

fieldset {
  border-radius: 0.25rem;
  padding: 1rem;
  border: 0.0625rem solid var(--outline-variant);
}

fieldset > legend {
  margin: 0 -0.25rem;
  padding: 0 0.25rem;
}

fieldset > legend + * {
  margin-block-start: 0 !important;
}

.grid {
  ---gap: 1rem;
  display: grid;
  grid-template-columns: repeat(12, calc(8.33% - var(---gap) + var(---gap) / 12));
  gap: var(---gap);
}

.grid.no-space {
  ---gap: 0rem;
}

.grid.medium-space {
  ---gap: 1.5rem;
}

.grid.large-space {
  ---gap: 2rem;
}

.grid > * {
  margin: 0;
}

.s1 {
  grid-area: auto/span 1;
}

.s2 {
  grid-area: auto/span 2;
}

.s3 {
  grid-area: auto/span 3;
}

.s4 {
  grid-area: auto/span 4;
}

.s5 {
  grid-area: auto/span 5;
}

.s6 {
  grid-area: auto/span 6;
}

.s7 {
  grid-area: auto/span 7;
}

.s8 {
  grid-area: auto/span 8;
}

.s9 {
  grid-area: auto/span 9;
}

.s10 {
  grid-area: auto/span 10;
}

.s11 {
  grid-area: auto/span 11;
}

.s12 {
  grid-area: auto/span 12;
}

@media only screen and (min-width: 601px) {
  .m1 {
    grid-area: auto/span 1;
  }
  .m2 {
    grid-area: auto/span 2;
  }
  .m3 {
    grid-area: auto/span 3;
  }
  .m4 {
    grid-area: auto/span 4;
  }
  .m5 {
    grid-area: auto/span 5;
  }
  .m6 {
    grid-area: auto/span 6;
  }
  .m7 {
    grid-area: auto/span 7;
  }
  .m8 {
    grid-area: auto/span 8;
  }
  .m9 {
    grid-area: auto/span 9;
  }
  .m10 {
    grid-area: auto/span 10;
  }
  .m11 {
    grid-area: auto/span 11;
  }
  .m12 {
    grid-area: auto/span 12;
  }
}
@media only screen and (min-width: 993px) {
  .l1 {
    grid-area: auto/span 1;
  }
  .l2 {
    grid-area: auto/span 2;
  }
  .l3 {
    grid-area: auto/span 3;
  }
  .l4 {
    grid-area: auto/span 4;
  }
  .l5 {
    grid-area: auto/span 5;
  }
  .l6 {
    grid-area: auto/span 6;
  }
  .l7 {
    grid-area: auto/span 7;
  }
  .l8 {
    grid-area: auto/span 8;
  }
  .l9 {
    grid-area: auto/span 9;
  }
  .l10 {
    grid-area: auto/span 10;
  }
  .l11 {
    grid-area: auto/span 11;
  }
  .l12 {
    grid-area: auto/span 12;
  }
}
i, :is(.checkbox, .radio, .switch) > span:before, :is(.checkbox, .radio, .switch) > span > i {
  ---size: 1.5rem;
  font-family: var(--font-icon);
  font-weight: 400;
  font-style: normal;
  font-size: var(---size);
  letter-spacing: normal;
  text-transform: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  vertical-align: middle;
  text-align: center;
  overflow: hidden;
  inline-size: var(---size);
  min-inline-size: var(---size);
  block-size: var(---size);
  min-block-size: var(---size);
  box-sizing: content-box;
  line-height: normal;
}

i.tiny {
  ---size: 1rem;
}

.chip > i, i.small {
  ---size: 1.25rem;
}

i.medium {
  ---size: 1.5rem;
}

i.large {
  ---size: 1.75rem;
}

i.extra {
  ---size: 2rem;
}

i.fill, a.row:is(:hover, :focus) > i, .transparent:is(:hover, :focus) > i {
  font-variation-settings: "FILL" 1;
}

i > :is(img, svg) {
  inline-size: 100%;
  block-size: 100%;
  background-size: 100%;
  border-radius: inherit;
  position: absolute;
  inset: 0 auto auto 0;
  padding: inherit;
}

i[class*=fa-] {
  font-size: calc(var(---size) * 0.85);
  line-height: normal;
  block-size: auto;
  min-block-size: auto;
}

.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}

:is(.absolute, .fixed).left.right {
  inline-size: auto;
}

:is(.absolute, .fixed).left.right.small {
  block-size: 20rem;
}

:is(.absolute, .fixed).left.right.medium {
  block-size: 28rem;
}

:is(.absolute, .fixed).left.right.large {
  block-size: 44rem;
}

:is(.absolute, .fixed).top.bottom.small {
  inline-size: 20rem;
}

:is(.absolute, .fixed).top.bottom.medium {
  inline-size: 28rem;
}

:is(.absolute, .fixed).top.bottom.large {
  inline-size: 44rem;
}

header, footer {
  display: flex;
  justify-content: center;
  flex-direction: column;
  min-block-size: 4rem;
  padding: 0 1rem;
  background-color: var(--surface-container);
}

main ~ footer {
  min-block-size: 5rem;
}

:is(header, footer).fixed.responsive {
  z-index: 12;
}

:is(header, footer, menu > *).fixed {
  position: sticky;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 11;
  background-color: inherit;
}

:is(dialog, menu, nav, article) > :is(header, footer) {
  background-color: inherit;
  padding: 0;
}

:is(dialog, article, [class*=padding]) > :is(header, footer).fixed {
  ---translateY: 1rem;
  transform: translateY(var(---translateY));
}

:is(dialog, article, [class*=padding]) > header.fixed {
  transform: translateY(calc(-1 * var(---translateY)));
}

.no-padding > :is(header, footer).fixed {
  transform: none;
}

.small-padding > :is(header, footer).fixed {
  ---translateY: .5rem;
}

:is(.large-padding, dialog:not(.left, .right, .top, .bottom)) > :is(header, footer).fixed {
  ---translateY: 1.5rem;
}

.list {
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0;
  flex: 1;
}

.list > li, .list > li > details > summary, .list > li > a:only-child {
  all: unset;
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: center;
  align-self: normal;
  text-align: start;
  justify-content: flex-start;
  white-space: nowrap;
  gap: 1rem;
  min-block-size: 3.5rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
  flex: 1;
}

.list > li:has(ul, ol, details[open], a:only-child) {
  padding: 0;
}

.list > li > .list {
  padding: 0 0 0 1rem;
}

.list > li > *, .list > li > a:only-child > *, .list > li > details > summary > * {
  margin: 0;
}

.list > li > :is(details, .max), .list > li > a:only-child > .max, .list > li > details > summary > .max {
  flex: 1;
}

.list.border > li:not(:last-child):before, .list.border > li > details[open] > summary:before {
  content: "";
  position: absolute;
  background-color: var(--outline-variant);
  inset: auto 0 0 0;
  block-size: 0.0625rem;
  inline-size: auto;
}

.list.no-space > li, .list.no-space > li > details > summary {
  min-block-size: 2.5rem;
}

.list.medium-space > li, .list.medium-space > li > details > summary {
  min-block-size: 4.5rem;
}

.list.large-space > li, .list.large-space > li > details > summary {
  min-block-size: 5.5rem;
}

svg {
  fill: currentcolor;
}

:is(img, svg, video):is(.small, .medium, .large, .tiny, .extra, .round, .circle, .square, .responsive) {
  object-fit: cover;
  object-position: center;
  transition: transform var(--speed3), border-radius var(--speed3), padding var(--speed3);
  block-size: 3rem;
  inline-size: 3rem;
}

:is(img, svg, video).round {
  border-radius: 0.5rem;
}

:is(img, svg, video).tiny {
  block-size: 2rem;
  inline-size: 2rem;
}

:is(img, svg, video).small {
  block-size: 2.5rem;
  inline-size: 2.5rem;
}

:is(img, svg, video).large {
  block-size: 3.5rem;
  inline-size: 3.5rem;
}

:is(img, svg, video).extra {
  block-size: 4rem;
  inline-size: 4rem;
}

:is(img, svg, video).responsive {
  inline-size: 100%;
  block-size: 100%;
  margin: 0 auto;
}

:is(button, .button, .chip):not(.transparent) > .responsive {
  border: 0.25rem solid transparent;
}

:is(button, .button, .chip.medium) > .responsive {
  inline-size: 2.5rem;
}

:is(button.small, .button.small, .chip:not(.medium)) > .responsive {
  inline-size: 2rem;
}

:is(button, .button, .chip).large > .responsive {
  inline-size: 3rem;
}

:is(button, .button, .chip).extra > .responsive {
  inline-size: 3.5rem;
}

:is(img, svg, video).responsive.tiny {
  inline-size: 100%;
  block-size: 4rem;
}

:is(img, svg, video).responsive.small {
  inline-size: 100%;
  block-size: 8rem;
}

:is(img, svg, video).responsive.medium {
  inline-size: 100%;
  block-size: 12rem;
}

:is(img, svg, video).responsive.large {
  inline-size: 100%;
  block-size: 16rem;
}

:is(img, svg, video).responsive.extra {
  inline-size: 100%;
  block-size: 20rem;
}

:is(img, svg, video).responsive.round {
  border-radius: 2rem;
}

:is(img, svg, video).empty-state {
  max-inline-size: 100%;
  inline-size: 24rem;
}

:is(button, .button, .chip, .field) > :is(img, svg):not(.responsive, .tiny, .small, .medium, .large, .extra), .tabs :is(img, svg):not(.responsive, .tiny, .small, .medium, .large, .extra) {
  min-inline-size: 1.5rem;
  max-inline-size: 1.5rem;
  min-block-size: 1.5rem;
  max-block-size: 1.5rem;
}

:is(button, .button, .chip) > :is(i, img, svg), :is(button, .button, .chip) > .responsive {
  margin: 0 -0.5rem;
}

:is(button, .button) > .responsive {
  margin-inline-start: -1.5rem;
}

:is(button, .button) > span + .responsive {
  margin-inline-start: -0.5rem;
  margin-inline-end: -1.5rem;
}

.chip > .responsive {
  margin-inline-start: -1rem;
}

.chip > span + .responsive {
  margin-inline-start: -0.5rem;
  margin-inline-end: -1rem;
}

:is(.circle, .square) > .responsive {
  margin: 0;
}

.extend > :is(.responsive, i) {
  margin: 0;
  position: absolute;
  inset-inline: 1rem;
  z-index: 1;
}

.extend > .responsive {
  inset-inline: 0;
  inline-size: 3.5rem;
}

.extend.border > .responsive {
  inline-size: 3.375rem;
}

menu {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  box-shadow: var(--elevate2);
  background-color: var(--surface-container);
  z-index: 11;
  inset: auto auto 0 0;
  inline-size: 100%;
  max-block-size: 50vh;
  max-inline-size: none !important;
  overflow-x: hidden;
  overflow-y: auto;
  font-size: 0.875rem;
  font-weight: 400;
  text-transform: none;
  color: var(--on-surface);
  line-height: normal;
  text-align: start;
  border-radius: 0.25rem;
  transform: scale(0.8) translateY(120%);
  transition: all var(--speed2), 0s background-color;
}

[dir=rtl] menu {
  inset: auto 0 0 auto;
}

menu.no-wrap {
  inline-size: max-content;
  white-space: nowrap !important;
}

menu.active, menu:not([data-ui]):active, :not(menu, [data-ui]):focus-within > menu, menu > li:hover > menu, menu > li > menu:hover {
  opacity: 1;
  visibility: visible;
  transform: scale(1) translateY(100%);
}

menu.active.top, :not(menu, [data-ui]):focus-within > menu.top, menu > li:hover > menu.top, menu > li > menu.top:hover {
  transform: scale(1) translateY(-100%);
}

menu * {
  white-space: inherit !important;
}

menu > li, menu > li > a:only-child {
  all: unset;
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: center;
  align-self: normal;
  text-align: start;
  justify-content: flex-start;
  white-space: nowrap;
  gap: 1rem;
  padding: 0.5rem 1rem;
  min-block-size: 3rem;
  flex: 1;
  margin: 0 !important;
  cursor: pointer;
}

menu > li:is(:hover, :focus, .active) {
  background-color: var(--active);
}

menu > li > :is(.max, .field), menu > li > a:only-child > .max, menu > li:has(.field, a:only-child) {
  flex: 1;
  padding: 0;
  margin: 0;
}

menu.min {
  inset: 0 0 auto 0;
  transform: none !important;
  background-color: var(--surface-variant) !important;
  color: var(--on-surface-variant) !important;
}

[dir=rtl] menu.min.right, menu.min.left, menu.top.left {
  inset: 0 0 auto auto;
}

[dir=rtl] menu.min.left, menu.min.right, menu.top {
  inset: 0 auto auto 0;
}

menu.max {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  block-size: 100%;
  max-block-size: none;
  min-block-size: auto;
  z-index: 100;
  transform: none !important;
  background-color: var(--surface-variant) !important;
  color: var(--on-surface-variant) !important;
}

menu.no-wrap:is(.min, .max) {
  min-inline-size: 16rem;
}

[dir=rtl] menu.right, [dir=rtl] menu.top.min.right, menu.left, menu.top.min.left {
  inset: auto 0 0 auto;
}

[dir=rtl] menu.left, [dir=rtl] menu.top.min.left, menu.right, menu.top.min {
  inset: auto auto 0 0;
}

menu.top {
  transform: scale(0.8) translateY(-120%);
}

menu:has(menu) {
  ---child: 1;
  ---type: 0;
  overflow: unset;
  white-space: nowrap;
  inline-size: auto;
  min-inline-size: 12rem;
  max-block-size: none;
}

menu > li > :is(menu, menu.right), [dir=rtl] menu > li > menu.left {
  inset: auto auto calc(3rem * (var(---child) - var(---type))) 100%;
}

[dir=rtl] menu > li > :is(menu, menu.right), menu > li > menu.left {
  inset: auto 100% calc(3rem * (var(---child) - var(---type))) auto;
}

menu > li > :is(menu.top, menu.top.right), [dir=rtl] menu > li > menu.top.left {
  inset: calc(3rem * (var(---child) - var(---type))) auto auto 100%;
}

[dir=rtl] menu > li > :is(menu.top, menu.top.right), menu > li > menu.top.left {
  inset: calc(3rem * (var(---child) - var(---type))) 100% auto auto;
}

menu.no-space > li {
  min-block-size: 2.5rem;
}

menu.medium-space > li {
  min-block-size: 3.5rem;
}

menu.large-space > li {
  min-block-size: 4rem;
}

menu.border > li:not(:last-child):before {
  content: "";
  position: absolute;
  background-color: var(--outline-variant);
  inset: auto 0 0 0;
  block-size: 0.0625rem;
  inline-size: auto;
}

menu > li:nth-last-child(2) {
  ---child: 2;
}

menu > li:nth-last-child(3) {
  ---child: 3;
}

menu > li:nth-last-child(4) {
  ---child: 4;
}

menu > li:nth-last-child(5) {
  ---child: 5;
}

menu > li:nth-last-child(6) {
  ---child: 6;
}

menu > li:nth-last-child(7) {
  ---child: 7;
}

menu > li:nth-last-child(8) {
  ---child: 8;
}

menu > li:nth-last-child(9) {
  ---child: 9;
}

menu > li:nth-last-child(10) {
  ---child: 10;
}

menu > li:nth-last-child(11) {
  ---child: 11;
}

menu > li:nth-last-of-type(2) {
  ---type: 1;
}

menu > li:nth-last-of-type(3) {
  ---type: 2;
}

menu > li:nth-last-of-type(4) {
  ---type: 3;
}

menu > li:nth-last-of-type(5) {
  ---type: 4;
}

menu > li:nth-last-of-type(6) {
  ---type: 5;
}

menu > li:nth-last-of-type(7) {
  ---type: 6;
}

menu > li:nth-last-of-type(8) {
  ---type: 7;
}

menu > li:nth-last-of-type(9) {
  ---type: 8;
}

menu > li:nth-last-of-type(10) {
  ---type: 9;
}

menu > li:nth-last-of-type(11) {
  ---type: 10;
}

nav > :is(ol, ul), nav > :is(ol, ul) > li {
  all: unset;
}

nav, .row, a.row, nav.drawer > :is(a, label), nav.drawer > :is(ol, ul) > li > :is(a, label) {
  display: flex;
  align-items: center;
  align-self: normal;
  text-align: start;
  justify-content: flex-start;
  white-space: nowrap;
  gap: 1rem;
}

a.row, nav.row {
  min-block-size: 3rem;
  margin: 0;
}

:is(nav, .row, .max) > :only-child, nav > :is(ol, ul) > li > :only-child {
  margin: 0;
}

:is(nav, .row) > :not(ul, ol) {
  margin: 0;
  white-space: normal;
  flex: none;
}

:is(nav, .row).no-space {
  gap: 0;
}

:is(nav, .row).no-space:not(.vertical) > .border + .border {
  border-inline-start: 0;
}

:is(nav, .row).no-space.vertical > .border + .border {
  border-top: 0;
}

:is(nav, .row).medium-space {
  gap: 1.5rem;
}

:is(nav, .row).large-space {
  gap: 2rem;
}

:is(nav, .row) > .max, :is(nav, .row) > :is(ol, ul) > .max, nav.drawer > :is(a, label) > .max, nav.drawer > :is(ol, ul) > li > :is(a, label) > .max {
  flex: 1;
}

:is(nav, .row).wrap {
  display: flex;
  flex-wrap: wrap;
}

:is(header, footer) > :is(nav, .row) {
  min-block-size: inherit;
}

:is(nav, .row) > .border.no-margin + .border.no-margin {
  border-inline-start: 0;
}

nav:is(.left, .right, .top, .bottom) {
  border: 0;
  position: fixed;
  color: var(--on-surface);
  transform: none;
  z-index: 100;
  block-size: auto;
  inline-size: auto;
  text-align: center;
  padding: 0.5rem 1rem;
  inset: var(--top) var(--right) var(--bottom) var(--left);
  margin: 0;
}

nav:is(.left, .right) {
  inline-size: 5rem;
  justify-content: flex-start;
  flex-direction: column;
  background-color: var(--surface);
}

nav:is(.top, .bottom) {
  block-size: 5rem;
  justify-content: center;
  flex-direction: row;
  background-color: var(--surface-container);
}

nav.top {
  inset-block-end: auto;
}

nav.left {
  inset-inline-end: auto;
}

nav.right {
  inset-inline-start: auto;
}

nav.bottom {
  inset-block-start: auto;
}

nav.drawer {
  flex-direction: column;
  align-items: normal;
  inline-size: 20rem;
  gap: 0;
  padding: 0.5rem 1rem;
}

nav.drawer:is(.min, .max) {
  inline-size: auto;
}

nav.drawer.max {
  inline-size: 100%;
}

:is(nav, .row) > header {
  background-color: inherit;
}

nav:is(.left, .right) > header {
  transform: translateY(-0.5rem);
}

nav.drawer > header {
  transform: translateY(-0.75rem);
  min-block-size: 4.5rem;
  align-self: stretch;
}

nav.drawer > :is(a, label), nav.drawer > :is(ol, ul) > li > :is(a, label), :is(a.row, nav.row):is(.wave, .slow-ripple, .ripple, .fast-ripple) {
  padding: 0.75rem;
  font-size: inherit;
}

nav.drawer > a, nav.drawer > :is(ol, ul) > li > a {
  border-radius: 2rem;
}

nav.drawer > a:is(:hover, .active), nav.drawer > :is(ol, ul) > li > a:is(:hover, .active) {
  background-color: var(--secondary-container);
}

nav.drawer > a:is(:hover, :focus, .active) > i, nav.drawer > :is(ol, ul) > li > a:is(:hover, :focus, .active) > i {
  font-variation-settings: "FILL" 1;
}

nav > :is(ol, ul) {
  all: inherit;
  flex: auto;
}

nav:not(.left, .right, .bottom, .top) > :is(ol, ul) {
  padding: 0;
}

nav:is(.left, .right, .top, .bottom):not(.drawer) > a:not(.button, .chip), nav:is(.left, .right, .top, .bottom):not(.drawer) > :is(ol, ul) > li > a:not(.button, .chip) {
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  line-height: normal;
}

nav:is(.top, .bottom):not(.drawer) > a:not(.button, .chip), nav:is(.top, .bottom):not(.drawer) > :is(ol, ul) > li > a:not(.button, .chip) {
  inline-size: 3.5rem;
}

nav:is(.left, .right, .top, .bottom):not(.drawer) > a:not(.button, .chip) > i, nav:is(.left, .right, .top, .bottom):not(.drawer) > :is(ol, ul) > li > a:not(.button, .chip) > i {
  padding: 0.25rem;
  border-radius: 2rem;
  transition: padding var(--speed1) linear;
  margin: 0 auto;
}

nav:is(.left, .right, .top, .bottom):not(.drawer) > a:not(.button, .chip):is(:hover, :focus, .active) > i, nav:is(.left, .right, .top, .bottom):not(.drawer) > :is(ol, ul) > li > a:not(.button, .chip):is(:hover, :focus, .active) > i {
  background-color: var(--secondary-container);
  color: var(--on-secondary-container);
  padding: 0.25rem 1rem;
  font-variation-settings: "FILL" 1;
}

:is(nav, .row):is(.left-align, .top-align, .vertical) {
  justify-content: flex-start;
}

:is(nav, .row):is(.right-align, .bottom-align) {
  justify-content: flex-end;
}

:is(nav, .row):is(.center-align, .middle-align) {
  justify-content: center;
}

:is(nav, .row):is(.left-align, .top-align, .vertical).vertical {
  align-items: flex-start;
}

:is(nav, .row):is(.right-align, .bottom-align).vertical {
  align-items: flex-end;
}

:is(nav, .row):is(.center-align, .middle-align).vertical {
  align-items: center;
}

:is(.drawer, .vertical) > :is(li, [class*=divider], hr):not(.vertical), :is(.drawer, .vertical) > :is(ol, ul) > li:not(.vertical) {
  align-self: stretch;
}

nav:not(.left, .right) > .space {
  inline-size: 0.5rem;
}

nav:not(.left, .right) > .medium-space {
  inline-size: 1rem;
}

nav:not(.left, .right) > .large-space {
  inline-size: 1.5rem;
}

nav.tabbed {
  background-color: var(--surface-container);
  border-radius: 4rem !important;
  gap: 0rem;
  block-size: 4rem;
}

nav.tabbed.small {
  block-size: 3rem;
}

nav.tabbed.large {
  block-size: 5rem;
}

nav.tabbed > a {
  border-radius: inherit;
  block-size: inherit;
  display: inline-flex;
  align-items: center;
  padding-inline: 1rem;
  gap: 0.5rem;
  font-size: 1rem;
  flex: 1;
}

nav.tabbed > a.active {
  background-color: var(--primary-container);
}

:not(nav) > :is(ul, ol) {
  all: revert;
}

:is(.scroll, .no-scroll, .no-space, .tabs, .tabbed) > :focus-visible {
  outline: 0.125rem solid var(--primary);
  outline-offset: -0.125rem;
}

@media only screen and (max-width: 600px) {
  nav.top, nav.bottom {
    justify-content: space-around;
  }
}
.overlay, dialog::backdrop {
  display: block !important;
  opacity: 0;
  visibility: hidden;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  color: var(--on-surface);
  background-color: var(--overlay);
  z-index: 100;
  transition: all var(--speed3), 0s background-color;
}

.overlay.active {
  opacity: 1;
  visibility: visible;
}

dialog:popover-open::backdrop {
  opacity: 1;
  visibility: visible;
}

.overlay + dialog::backdrop, .snackbar::backdrop {
  display: none;
}

[popover] {
  border: 0;
}

.page {
  ---transform: translate(0, 0);
  opacity: 0;
  position: absolute;
  display: none;
}

.page.active {
  opacity: 1;
  position: inherit;
  display: inherit;
  animation: var(--speed4) to-page ease;
}

.page.active.top {
  ---transform: translate(0, -4rem);
}

.page.active.bottom {
  ---transform: translate(0, 4rem);
}

.page.active.left {
  ---transform: translate(-4rem, 0);
}

.page.active.right {
  ---transform: translate(4rem, 0);
}

@keyframes to-page {
  0% {
    opacity: 0;
    transform: var(---transform);
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
progress {
  position: relative;
  inline-size: 100%;
  block-size: 0.5rem;
  color: var(--primary);
  background: var(--primary-container);
  border-radius: 1rem;
  flex: none;
  border: none;
  overflow: hidden;
  writing-mode: horizontal-tb;
  direction: ltr;
  -webkit-appearance: none;
}

progress.small {
  inline-size: 4rem;
}

progress.medium {
  inline-size: 8rem;
}

progress.large {
  inline-size: 12rem;
}

progress:not(.circle, [value]):after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inline-size: 100%;
  block-size: 100%;
  clip-path: none;
  background: currentcolor;
  animation: 1.6s to-linear ease infinite;
}

progress:not(.circle, [value])::-moz-progress-bar {
  animation: 1.6s to-linear ease infinite;
}

progress:not(.circle, [value])::-webkit-progress-value {
  animation: 1.6s to-linear ease infinite;
}

progress::-webkit-progress-bar {
  background: none;
}

progress::-webkit-progress-value {
  background: currentcolor;
}

progress::-moz-progress-bar {
  background: currentcolor;
}

progress.circle {
  display: inline-block;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: 50%;
  border-width: 0.3rem;
  border-style: solid;
  border-color: currentcolor;
  animation: 1.6s to-circular linear infinite;
  background: none;
  flex: none;
}

progress.circle::-moz-progress-bar {
  background: none;
}

progress.circle.small {
  inline-size: 1.5rem;
  block-size: 1.5rem;
  border-width: 0.2rem;
}

progress.circle.large {
  inline-size: 3.5rem;
  block-size: 3.5rem;
  border-width: 0.4rem;
}

:is(nav, .row, .field) > progress:not(.circle, .small, .medium, .large) {
  flex: auto;
}

progress.max {
  display: unset;
  position: absolute;
  inline-size: 100% !important;
  block-size: 100% !important;
  color: var(--active);
  background: none;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: inherit;
  animation: none;
  writing-mode: horizontal-tb;
}

progress:is(.horizontal, .vertical, .max) {
  display: unset;
  inline-size: 100% !important;
}

progress.vertical {
  writing-mode: vertical-lr;
}

progress.max.vertical {
  transform: rotate(-180deg);
}

progress.max + * {
  margin-block-start: 0;
}

:is(.button, button, .chip) > progress.circle {
  color: inherit;
}

@supports (-moz-appearance: none) {
  progress.max.vertical {
    transform: none;
  }
}
@keyframes to-linear {
  0% {
    margin-inline-start: 0%;
    inline-size: 0%;
  }
  50% {
    margin-inline-start: 0%;
    inline-size: 100%;
  }
  to {
    margin-inline-start: 100%;
    inline-size: 0%;
  }
}
@keyframes to-circular {
  0% {
    transform: rotate(0);
    clip-path: polygon(50% 50%, 0% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%);
  }
  20% {
    clip-path: polygon(50% 50%, 0% 0%, 50% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%);
  }
  30% {
    clip-path: polygon(50% 50%, 0% 0%, 50% 0%, 100% 0%, 100% 50%, 100% 50%, 100% 50%, 100% 50%, 100% 50%);
  }
  40% {
    clip-path: polygon(50% 50%, 0% 0%, 50% 0%, 100% 0%, 100% 50%, 100% 100%, 100% 100%, 100% 100%, 100% 100%);
  }
  50% {
    clip-path: polygon(50% 50%, 50% 0%, 50% 0%, 100% 0%, 100% 50%, 100% 100%, 50% 100%, 50% 100%, 50% 100%);
  }
  60% {
    clip-path: polygon(50% 50%, 100% 50%, 100% 50%, 100% 50%, 100% 50%, 100% 100%, 50% 100%, 0% 100%, 0% 100%);
  }
  70% {
    clip-path: polygon(50% 50%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 0% 100%, 0% 50%);
  }
  80% {
    clip-path: polygon(50% 50%, 0% 100%, 0% 100%, 0% 100%, 0% 100%, 0% 100%, 0% 100%, 0% 100%, 0% 50%);
  }
  90% {
    transform: rotate(360deg);
    clip-path: polygon(50% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%);
  }
  to {
    clip-path: polygon(50% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%);
  }
}
.checkbox, .radio, .switch {
  direction: ltr;
  inline-size: auto;
  block-size: auto;
  line-height: normal;
  white-space: nowrap;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  ---size: 1.5rem;
}

:is(.checkbox, .radio, .switch).small {
  ---size: 1rem;
}

:is(.checkbox, .radio, .switch).large {
  ---size: 2rem;
}

:is(.checkbox, .radio, .switch).extra {
  ---size: 2.5rem;
}

:is(.checkbox, .radio) > input {
  inline-size: var(---size);
  block-size: var(---size);
  opacity: 0;
}

.switch > input {
  inline-size: 3.25rem;
  block-size: 2rem;
  opacity: 0;
}

:is(.checkbox, .radio, .switch) > span {
  display: inline-flex;
  align-items: center;
  color: var(--on-surface);
  font-size: 0.875rem;
}

:is(.checkbox, .radio) > span:not(:empty) {
  padding-inline-start: 0.25rem;
}

:is(.checkbox, .radio, .switch) > span:before, :is(.checkbox, .radio, .switch) > span > i, :is(.checkbox, .radio) > span:after {
  ---size: inherit;
  content: "";
  inline-size: var(---size);
  block-size: var(---size);
  box-sizing: border-box;
  margin: 0 auto;
  outline: none;
  color: var(--primary);
  position: absolute;
  inset: auto auto auto calc(var(---size) * -1);
  border-radius: 50%;
  -webkit-user-select: none;
  user-select: none;
  z-index: 1;
}

.switch > span:before, .switch.icon > span > i {
  position: absolute;
  inset: 50% auto auto 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all var(--speed2);
  font-size: calc(var(---size) - 0.5rem);
  -webkit-user-select: none;
  user-select: none;
  min-inline-size: var(---size);
  min-block-size: var(---size);
  content: "";
  color: var(--surface-variant);
  background-color: var(--outline);
}

.switch > span:before, .switch.icon > span > i {
  transform: translate(-3rem, -50%) scale(0.6);
}

.switch.icon > span > i {
  transform: translate(-3rem, -50%) scale(1);
}

.checkbox > span:before {
  content: "check_box_outline_blank";
}

.checkbox > input:checked + span:before {
  content: "check_box";
  font-variation-settings: "FILL" 1;
}

.checkbox > input:indeterminate + span:before {
  content: "indeterminate_check_box";
}

.radio > span:before {
  content: "radio_button_unchecked";
}

.radio > input:checked + span:before {
  content: "radio_button_checked";
}

:is(.radio, .checkbox, .switch).icon > span:before {
  content: "" !important;
  font-variation-settings: unset !important;
}

:is(.checkbox, .radio) > span:after {
  transition: all var(--speed1);
  background-color: currentColor;
  box-shadow: 0 0 0 0 currentColor;
  opacity: 0;
}

:is(.checkbox, .radio):is(:hover) > input:not(:disabled) + span:after, :is(.checkbox, .radio) > input:not(:disabled):is(:focus) + span:after {
  box-shadow: 0 0 0 0.5rem currentColor;
  opacity: 0.1;
}

.switch > input:not(:disabled):is(:focus, :hover) + span:before, .switch.icon > input:not(:disabled):is(:focus, :hover) + span > i {
  box-shadow: 0 0 0 0.5rem var(--active);
}

:is(.checkbox, .radio) > input:checked + span:before, :is(.checkbox, .radio).icon > input:checked + span > i {
  color: var(--primary);
}

.icon > input:checked + span > i:first-child, .icon > span > i:last-child {
  opacity: 0;
}

.icon > input:checked + span > i:last-child, .icon > span > i:first-child {
  opacity: 1;
}

.switch > input:checked + span:after {
  border: none;
  background-color: var(--primary);
}

.switch > input:checked + span:before, .switch.icon > input:checked + span > i {
  content: "check";
  color: var(--primary);
  background-color: var(--on-primary);
  transform: translate(-1.75rem, -50%) scale(1);
}

.switch > input:active:not(:disabled) + span:before, .switch.icon > input:active:not(:disabled) + span > i {
  transform: translate(-3rem, -50%) scale(1.2);
}

.switch > input:active:checked:not(:disabled) + span:before, .switch.icon > input:active:checked:not(:disabled) + span > i {
  transform: translate(-1.75rem, -50%) scale(1.2);
}

:is(.checkbox, .radio, .switch) > input:disabled + span {
  opacity: 0.5;
  cursor: not-allowed;
}

.switch > span:after {
  content: "";
  position: absolute;
  inset: 50% auto auto 0;
  background-color: var(--active);
  border: 0.125rem solid var(--outline);
  box-sizing: border-box;
  inline-size: 3.25rem;
  block-size: 2rem;
  border-radius: 2rem;
  transform: translate(-3.25rem, -50%);
}

.field > :is(nav, .row) {
  flex-grow: 1;
  padding: 0 1rem;
}

.field.round > :is(nav, .row) {
  flex-grow: 1;
  padding: 0 1.5rem;
}

[dir=rtl] .switch {
  transform: scale(-1);
}

[dir=rtl] .switch > span:before, [dir=rtl] .switch.icon > span > i {
  transform: translate(-3rem, -50%) scale(-0.6);
}

[dir=rtl] .switch.icon > span > i {
  transform: translate(-3rem, -50%) scale(-1);
}

[dir=rtl] .switch > input:checked + span:before, [dir=rtl] .switch.icon > input:checked + span > i {
  transform: translate(-1.75rem, -50%) scale(-1);
}

.switch > :focus-visible + span:after {
  outline: 0.125rem solid var(--primary);
  outline-offset: 0.25rem;
}

:is(.checkbox, .radio) > :focus-visible + span:before {
  outline: 0.125rem solid var(--primary);
  outline-offset: 0.375rem;
}

.slider {
  ---start: 0%;
  ---end: 0%;
  ---value1: "";
  ---value2: "";
  display: flex;
  align-items: center !important;
  inline-size: auto;
  block-size: 1.25rem;
  margin: 1.125rem;
  flex: none;
  direction: ltr;
}

[dir=rtl] .slider {
  transform: scaleX(-1);
}

.slider.vertical {
  flex-direction: row !important;
  margin: 0.5rem auto !important;
  padding: 50% 0;
  transform: rotate(-90deg);
  inline-size: 100%;
}

.slider.small {
  inline-size: 4rem;
}

.slider.medium {
  inline-size: 8rem;
}

.slider.large {
  inline-size: 12rem;
}

.slider > input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-shadow: none;
  border: none;
  outline: none;
  pointer-events: none;
  inline-size: 100%;
  block-size: 1rem;
  background: none;
  z-index: 1;
  padding: 0;
  margin: 0;
  transform: rotate(0);
}

.slider > input:only-of-type {
  pointer-events: all;
}

.slider > input + input {
  position: absolute;
}

.slider > input::-webkit-slider-thumb {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-shadow: none;
  border: none;
  outline: none;
  pointer-events: all;
  block-size: 2.75rem;
  inline-size: 0.25rem;
  border-radius: 0.25rem;
  background: var(--primary);
  cursor: grab;
  margin: 0;
}

.slider > input::-webkit-slider-thumb:active {
  cursor: grabbing;
}

.slider > input::-moz-range-thumb {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-shadow: none;
  border: none;
  outline: none;
  pointer-events: all;
  block-size: 2.75rem;
  inline-size: 0.25rem;
  border-radius: 0.25rem;
  background: var(--primary);
  cursor: grab;
  margin: 0;
}

.slider > input::-moz-range-thumb:active {
  cursor: grabbing;
}

.slider > input:not(:disabled):is(:focus)::-webkit-slider-thumb {
  transform: scaleX(0.6);
}

.slider > input:not(:disabled):is(:focus)::-moz-range-thumb {
  transform: scaleX(0.6);
}

.slider > input:disabled {
  cursor: not-allowed;
  opacity: 1;
}

.slider > input:disabled::-webkit-slider-thumb {
  background: #9e9e9e;
  cursor: not-allowed;
}

.slider > input:disabled::-moz-range-thumb {
  background: #9e9e9e;
  cursor: not-allowed;
}

.slider > input:disabled ~ span {
  background: #9e9e9e;
}

.slider > span {
  position: absolute;
  block-size: 1rem;
  border-radius: 1rem 0 0 1rem;
  background: var(--primary);
  z-index: 0;
  inset: calc(50% - 0.5rem) var(---end) auto var(---start);
  clip-path: polygon(0 0, calc(100% - 0.5rem) 0, calc(100% - 0.5rem) 100%, 0 100%);
}

.slider > input[type=range] + input[type=range] ~ span {
  border-radius: 0;
  clip-path: polygon(0.5rem 0, max(0.5rem, 100% - 0.5rem) 0, max(0.5rem, 100% - 0.5rem) 100%, 0.5rem 100%);
}

.field > .slider {
  inline-size: 100%;
}

.slider:before {
  content: "";
  position: absolute;
  inline-size: 100%;
  block-size: 1rem;
  border-radius: 1rem;
  background: var(--primary-container);
  clip-path: polygon(calc(var(---start) - 0.5rem) 0, 0 0, 0 100%, calc(var(---start) - 0.5rem) 100%, calc(var(---start) - 0.5rem) 0, calc(100% - var(---end) + 0.5rem) 0, 100% 0, 100% 100%, calc(100% - var(---end) + 0.5rem) 100%, calc(100% - var(---end) + 0.5rem) 0);
}

.slider:has(> [disabled]):before {
  background: var(--active);
}

.slider > .tooltip {
  visibility: hidden !important;
  opacity: 0 !important;
  inset: 0 auto auto calc(100% - var(---end));
  border-radius: 2rem;
  transition: top var(--speed2) ease, opacity var(--speed2) ease;
  transform: translate(-50%, -50%) !important;
  padding: 0.75rem 1rem;
}

[dir=rtl] .slider > .tooltip {
  transform: translate(-50%, -50%) scaleX(-1) !important;
}

.slider > .tooltip + .tooltip {
  inset: 0.25rem calc(100% - var(---start)) auto auto;
  transform: translate(50%, -50%) !important;
}

[dir=rtl] .slider > .tooltip + .tooltip {
  transform: translate(50%, -50%) scaleX(-1) !important;
}

.slider > .tooltip:before {
  content: var(---value1);
}

.slider > .tooltip + .tooltip:before {
  content: var(---value2);
}

.slider > :focus ~ .tooltip {
  inset-block-start: -1rem !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.slider.vertical > .tooltip {
  display: none;
}

:is(nav, .row, .field) > .slider:not(.circle, .small, .medium, .large) {
  flex: auto;
}

.slider.max, .slider.max.vertical, .slider.max > input, .slider.max.vertical > input {
  all: unset;
  margin: 0 !important;
  position: absolute;
  color: var(--primary);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: inherit;
  overflow: hidden;
  z-index: 2;
  cursor: grab;
  inline-size: 100%;
  block-size: 100%;
}

.slider.max:before {
  display: none;
}

.slider.max.vertical > input {
  writing-mode: vertical-lr;
  transform: rotate(-180deg);
}

.slider.max > input::-webkit-slider-thumb {
  opacity: 0;
  inline-size: 1rem;
  block-size: 100vh;
  transform: none !important;
}

.slider.max > input::-moz-range-thumb {
  opacity: 0;
  inline-size: 1rem;
  block-size: 100vh;
  transform: none !important;
}

.slider.max > span {
  block-size: auto !important;
  inset: 0 var(---end) 0 var(---start);
  clip-path: none;
  background: currentcolor;
  border-radius: 0;
}

.slider.max.vertical > span {
  inset: var(---end) 0 var(---start) 0;
}

.slider > input:focus-visible::-webkit-slider-thumb {
  outline: 0.1875rem solid var(--primary);
  outline-offset: 0.25rem;
}

.slider > input:focus-visible::-moz-range-thumb {
  outline: 0.1875rem solid var(--primary);
  outline-offset: 0.25rem;
}

.slider.max > input:focus-visible {
  outline: 0.1875rem solid var(--primary);
  outline-offset: -0.125rem;
}

@media (pointer: coarse) {
  .slider > :hover ~ .tooltip {
    inset-block-start: -1rem !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}
.snackbar {
  position: fixed;
  inset: auto auto 6rem 50%;
  inline-size: 80%;
  block-size: auto;
  z-index: 200;
  visibility: hidden;
  display: flex;
  box-shadow: var(--elevate2);
  color: var(--inverse-on-surface);
  background-color: var(--inverse-surface);
  padding: 1rem;
  cursor: pointer;
  text-align: start;
  align-items: center;
  border-radius: 0.25rem;
  gap: 0.5rem;
  transition: all var(--speed2);
  transform: translate(-50%, 1rem);
  opacity: 0;
}

.snackbar.top {
  inset: 6rem auto auto 50%;
}

.snackbar:is(.active) {
  visibility: visible;
  transform: translate(-50%);
  opacity: 1;
}

.snackbar:popover-open {
  visibility: visible;
  transform: translate(-50%);
  opacity: 1;
}

.snackbar > .max {
  flex: auto;
}

@media only screen and (min-width: 993px) {
  .snackbar {
    inline-size: 40%;
  }
}
table {
  inline-size: 100%;
  border-spacing: 0;
  font-size: 0.875rem;
  text-align: start;
}

.scroll > table, table :is(thead, tbody, tfoot, tr, th, td) {
  background-color: inherit;
  color: inherit;
}

:is(th, td) {
  inline-size: auto;
  text-align: inherit;
  padding: 0.5rem;
}

:is(th, td) > * {
  vertical-align: middle;
}

table.border > tbody > tr:not(:last-child) > td, thead > tr > th {
  border-block-end: 0.0625rem solid var(--outline);
}

tfoot > tr > th {
  border-block-start: 0.0625rem solid var(--outline);
}

table.stripes > tbody > tr:nth-child(odd) {
  background-color: var(--active);
}

table.no-space :is(th, td) {
  padding: 0;
}

table.medium-space :is(th, td) {
  padding: 0.75rem;
}

table.large-space :is(th, td) {
  padding: 1rem;
}

table > .fixed, th.fixed {
  position: sticky;
  z-index: 1;
  inset-block-start: 0;
}

tfoot.fixed, tfoot th.fixed {
  inset-block-end: 0;
}

:is(td, th).min {
  inline-size: 0.1%;
  white-space: nowrap;
}

.tabs {
  display: flex;
  white-space: nowrap;
  border-block-end: 0.0625rem solid var(--surface-variant);
}

.tabs:not(.left-align, .right-align, .center-align) {
  justify-content: space-around;
}

.tabs > a {
  display: flex;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--on-surface-variant);
  padding: 0.5rem 1rem;
  text-align: center;
  min-block-size: 3rem;
  inline-size: 100%;
  gap: 0.25rem;
}

.tabs.small > a {
  min-block-size: 2rem;
}

.tabs.large > a {
  min-block-size: 4rem;
}

.tabs > a.active, .tabs > a.active > i {
  color: var(--primary);
}

.tabs > a.active:before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  block-size: 0.125rem;
  background-color: var(--primary);
}

.tabs.min > a.active:before {
  margin: 0 auto;
  max-inline-size: min(100%, 4rem);
}

.tabs:is(.left-align, .center-align, .right-align) > a {
  inline-size: auto;
}

.tooltip {
  ---space: -.5rem;
  visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-color: var(--inverse-surface);
  color: var(--inverse-on-surface);
  font-size: 0.75rem;
  text-align: center;
  border-radius: 0.25rem;
  padding: 0.5rem;
  position: absolute;
  z-index: 3;
  inset: 0 auto auto 50%;
  inline-size: auto;
  white-space: nowrap;
  font-weight: 500;
  opacity: 0;
  transition: all var(--speed2);
  line-height: normal;
  transform: translate(-50%, -100%) scale(0.9);
}

.tooltip.left {
  inset: 50% auto auto 0;
  transform: translate(-100%, -50%) scale(0.9);
}

.tooltip.right {
  inset: 50% 0 auto auto;
  transform: translate(100%, -50%) scale(0.9);
}

.tooltip.bottom {
  inset: auto auto 0 50%;
  transform: translate(-50%, 100%) scale(0.9);
}

.tooltip.small {
  inline-size: 8rem;
  white-space: normal;
}

.tooltip.medium {
  inline-size: 12rem;
  white-space: normal;
}

.tooltip.large {
  inline-size: 16rem;
  white-space: normal;
}

:hover > .tooltip {
  visibility: visible;
  opacity: 1;
  transform: translate(-50%, -100%) scale(1);
}

:hover > .tooltip.left {
  transform: translate(-100%, -50%) scale(1);
}

:hover > .tooltip.right {
  transform: translate(100%, -50%) scale(1);
}

:hover > .tooltip.bottom {
  transform: translate(-50%, 100%) scale(1);
}

.tooltip.no-space {
  ---space: 0;
}

.tooltip.medium-space {
  ---space: -1rem;
}

.tooltip.large-space {
  ---space: -1.5rem;
}

.tooltip:not(.left, .right, .bottom) {
  margin-block-start: var(---space) !important;
}

.tooltip.left, .tooltip.right {
  margin-inline: var(---space) !important;
}

.tooltip.bottom {
  margin-block-end: var(---space) !important;
}

menu:active ~ .tooltip, :is(button, .button):focus > menu ~ .tooltip, .field > :focus ~ menu ~ .tooltip {
  visibility: hidden;
}

.slider > .tooltip {
  ---space: -1.25rem;
}

.slider.vertical > .tooltip {
  ---space: -.75rem;
}

.slider.vertical > .tooltip:is(.left, .right) {
  ---space: -.5rem;
}

.tooltip.max {
  display: block;
  font-size: inherit;
  white-space: normal;
  text-align: start;
  inline-size: 20rem;
  border-radius: 0.5rem;
  padding: 1rem;
  box-shadow: var(--elevate2);
}

[class*=blur], [class*=blur].light {
  ---blur: 1rem;
  -webkit-backdrop-filter: blur(var(---blur));
  backdrop-filter: blur(var(---blur));
  color: var(--on-surface);
  background-color: rgba(255, 255, 255, 0.5019607843);
}

.dark [class*=blur], [class*=blur].dark {
  background-color: rgba(0, 0, 0, 0.5019607843);
}

.small-blur {
  ---blur: .5rem;
}

.large-blur {
  ---blur: 1.5rem;
}

.shadow {
  background-color: rgba(0, 0, 0, 0.3137254902);
}

:is(.left-shadow, .right-shadow, .top-shadow, .bottom-shadow) {
  background-color: transparent !important;
}

.left-shadow {
  background-image: linear-gradient(to right, black, transparent);
}

.right-shadow {
  background-image: linear-gradient(to left, black, transparent);
}

.bottom-shadow {
  background-image: linear-gradient(to top, black, transparent);
}

.top-shadow {
  background-image: linear-gradient(to bottom, black, transparent);
}

/*!
 * Quill Editor v2.0.3
 * https://quilljs.com
 * Copyright (c) 2017-2024, Slab
 * Copyright (c) 2014, Jason Chen
 * Copyright (c) 2013, salesforce.com
 */
.ql-container {
  box-sizing: border-box;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 13px;
  height: 100%;
  margin: 0;
  position: relative;
}

.ql-container.ql-disabled .ql-tooltip {
  visibility: hidden;
}

.ql-container:not(.ql-disabled) li[data-list=checked] > .ql-ui, .ql-container:not(.ql-disabled) li[data-list=unchecked] > .ql-ui {
  cursor: pointer;
}

.ql-clipboard {
  left: -100000px;
  height: 1px;
  overflow-y: hidden;
  position: absolute;
  top: 50%;
}

.ql-clipboard p {
  margin: 0;
  padding: 0;
}

.ql-editor {
  box-sizing: border-box;
  counter-reset: list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  line-height: 1.42;
  height: 100%;
  outline: none;
  overflow-y: auto;
  padding: 12px 15px;
  tab-size: 4;
  -moz-tab-size: 4;
  text-align: left;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.ql-editor > * {
  cursor: text;
}

.ql-editor p, .ql-editor ol, .ql-editor pre, .ql-editor blockquote, .ql-editor h1, .ql-editor h2, .ql-editor h3, .ql-editor h4, .ql-editor h5, .ql-editor h6 {
  margin: 0;
  padding: 0;
}

@supports (counter-set: none) {
  .ql-editor p, .ql-editor h1, .ql-editor h2, .ql-editor h3, .ql-editor h4, .ql-editor h5, .ql-editor h6 {
    counter-set: list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  }
}
@supports not (counter-set: none) {
  .ql-editor p, .ql-editor h1, .ql-editor h2, .ql-editor h3, .ql-editor h4, .ql-editor h5, .ql-editor h6 {
    counter-reset: list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  }
}
.ql-editor table {
  border-collapse: collapse;
}

.ql-editor td {
  border: 1px solid #000;
  padding: 2px 5px;
}

.ql-editor ol {
  padding-left: 1.5em;
}

.ql-editor li {
  list-style-type: none;
  padding-left: 1.5em;
  position: relative;
}

.ql-editor li > .ql-ui:before {
  display: inline-block;
  margin-left: -1.5em;
  margin-right: 0.3em;
  text-align: right;
  white-space: nowrap;
  width: 1.2em;
}

.ql-editor li[data-list=checked] > .ql-ui, .ql-editor li[data-list=unchecked] > .ql-ui {
  color: #777;
}

.ql-editor li[data-list=bullet] > .ql-ui:before {
  content: "•";
}

.ql-editor li[data-list=checked] > .ql-ui:before {
  content: "☑";
}

.ql-editor li[data-list=unchecked] > .ql-ui:before {
  content: "☐";
}

@supports (counter-set: none) {
  .ql-editor li[data-list] {
    counter-set: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  }
}
@supports not (counter-set: none) {
  .ql-editor li[data-list] {
    counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  }
}
.ql-editor li[data-list=ordered] {
  counter-increment: list-0;
}

.ql-editor li[data-list=ordered] > .ql-ui:before {
  content: counter(list-0, decimal) ". ";
}

.ql-editor li[data-list=ordered].ql-indent-1 {
  counter-increment: list-1;
}

.ql-editor li[data-list=ordered].ql-indent-1 > .ql-ui:before {
  content: counter(list-1, lower-alpha) ". ";
}

@supports (counter-set: none) {
  .ql-editor li[data-list].ql-indent-1 {
    counter-set: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  }
}
@supports not (counter-set: none) {
  .ql-editor li[data-list].ql-indent-1 {
    counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  }
}
.ql-editor li[data-list=ordered].ql-indent-2 {
  counter-increment: list-2;
}

.ql-editor li[data-list=ordered].ql-indent-2 > .ql-ui:before {
  content: counter(list-2, lower-roman) ". ";
}

@supports (counter-set: none) {
  .ql-editor li[data-list].ql-indent-2 {
    counter-set: list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  }
}
@supports not (counter-set: none) {
  .ql-editor li[data-list].ql-indent-2 {
    counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  }
}
.ql-editor li[data-list=ordered].ql-indent-3 {
  counter-increment: list-3;
}

.ql-editor li[data-list=ordered].ql-indent-3 > .ql-ui:before {
  content: counter(list-3, decimal) ". ";
}

@supports (counter-set: none) {
  .ql-editor li[data-list].ql-indent-3 {
    counter-set: list-4 list-5 list-6 list-7 list-8 list-9;
  }
}
@supports not (counter-set: none) {
  .ql-editor li[data-list].ql-indent-3 {
    counter-reset: list-4 list-5 list-6 list-7 list-8 list-9;
  }
}
.ql-editor li[data-list=ordered].ql-indent-4 {
  counter-increment: list-4;
}

.ql-editor li[data-list=ordered].ql-indent-4 > .ql-ui:before {
  content: counter(list-4, lower-alpha) ". ";
}

@supports (counter-set: none) {
  .ql-editor li[data-list].ql-indent-4 {
    counter-set: list-5 list-6 list-7 list-8 list-9;
  }
}
@supports not (counter-set: none) {
  .ql-editor li[data-list].ql-indent-4 {
    counter-reset: list-5 list-6 list-7 list-8 list-9;
  }
}
.ql-editor li[data-list=ordered].ql-indent-5 {
  counter-increment: list-5;
}

.ql-editor li[data-list=ordered].ql-indent-5 > .ql-ui:before {
  content: counter(list-5, lower-roman) ". ";
}

@supports (counter-set: none) {
  .ql-editor li[data-list].ql-indent-5 {
    counter-set: list-6 list-7 list-8 list-9;
  }
}
@supports not (counter-set: none) {
  .ql-editor li[data-list].ql-indent-5 {
    counter-reset: list-6 list-7 list-8 list-9;
  }
}
.ql-editor li[data-list=ordered].ql-indent-6 {
  counter-increment: list-6;
}

.ql-editor li[data-list=ordered].ql-indent-6 > .ql-ui:before {
  content: counter(list-6, decimal) ". ";
}

@supports (counter-set: none) {
  .ql-editor li[data-list].ql-indent-6 {
    counter-set: list-7 list-8 list-9;
  }
}
@supports not (counter-set: none) {
  .ql-editor li[data-list].ql-indent-6 {
    counter-reset: list-7 list-8 list-9;
  }
}
.ql-editor li[data-list=ordered].ql-indent-7 {
  counter-increment: list-7;
}

.ql-editor li[data-list=ordered].ql-indent-7 > .ql-ui:before {
  content: counter(list-7, lower-alpha) ". ";
}

@supports (counter-set: none) {
  .ql-editor li[data-list].ql-indent-7 {
    counter-set: list-8 list-9;
  }
}
@supports not (counter-set: none) {
  .ql-editor li[data-list].ql-indent-7 {
    counter-reset: list-8 list-9;
  }
}
.ql-editor li[data-list=ordered].ql-indent-8 {
  counter-increment: list-8;
}

.ql-editor li[data-list=ordered].ql-indent-8 > .ql-ui:before {
  content: counter(list-8, lower-roman) ". ";
}

@supports (counter-set: none) {
  .ql-editor li[data-list].ql-indent-8 {
    counter-set: list-9;
  }
}
@supports not (counter-set: none) {
  .ql-editor li[data-list].ql-indent-8 {
    counter-reset: list-9;
  }
}
.ql-editor li[data-list=ordered].ql-indent-9 {
  counter-increment: list-9;
}

.ql-editor li[data-list=ordered].ql-indent-9 > .ql-ui:before {
  content: counter(list-9, decimal) ". ";
}

.ql-editor .ql-indent-1:not(.ql-direction-rtl) {
  padding-left: 3em;
}

.ql-editor li.ql-indent-1:not(.ql-direction-rtl) {
  padding-left: 4.5em;
}

.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right {
  padding-right: 3em;
}

.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right {
  padding-right: 4.5em;
}

.ql-editor .ql-indent-2:not(.ql-direction-rtl) {
  padding-left: 6em;
}

.ql-editor li.ql-indent-2:not(.ql-direction-rtl) {
  padding-left: 7.5em;
}

.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right {
  padding-right: 6em;
}

.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right {
  padding-right: 7.5em;
}

.ql-editor .ql-indent-3:not(.ql-direction-rtl) {
  padding-left: 9em;
}

.ql-editor li.ql-indent-3:not(.ql-direction-rtl) {
  padding-left: 10.5em;
}

.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right {
  padding-right: 9em;
}

.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right {
  padding-right: 10.5em;
}

.ql-editor .ql-indent-4:not(.ql-direction-rtl) {
  padding-left: 12em;
}

.ql-editor li.ql-indent-4:not(.ql-direction-rtl) {
  padding-left: 13.5em;
}

.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right {
  padding-right: 12em;
}

.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right {
  padding-right: 13.5em;
}

.ql-editor .ql-indent-5:not(.ql-direction-rtl) {
  padding-left: 15em;
}

.ql-editor li.ql-indent-5:not(.ql-direction-rtl) {
  padding-left: 16.5em;
}

.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right {
  padding-right: 15em;
}

.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right {
  padding-right: 16.5em;
}

.ql-editor .ql-indent-6:not(.ql-direction-rtl) {
  padding-left: 18em;
}

.ql-editor li.ql-indent-6:not(.ql-direction-rtl) {
  padding-left: 19.5em;
}

.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right {
  padding-right: 18em;
}

.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right {
  padding-right: 19.5em;
}

.ql-editor .ql-indent-7:not(.ql-direction-rtl) {
  padding-left: 21em;
}

.ql-editor li.ql-indent-7:not(.ql-direction-rtl) {
  padding-left: 22.5em;
}

.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right {
  padding-right: 21em;
}

.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right {
  padding-right: 22.5em;
}

.ql-editor .ql-indent-8:not(.ql-direction-rtl) {
  padding-left: 24em;
}

.ql-editor li.ql-indent-8:not(.ql-direction-rtl) {
  padding-left: 25.5em;
}

.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right {
  padding-right: 24em;
}

.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right {
  padding-right: 25.5em;
}

.ql-editor .ql-indent-9:not(.ql-direction-rtl) {
  padding-left: 27em;
}

.ql-editor li.ql-indent-9:not(.ql-direction-rtl) {
  padding-left: 28.5em;
}

.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right {
  padding-right: 27em;
}

.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right {
  padding-right: 28.5em;
}

.ql-editor li.ql-direction-rtl {
  padding-right: 1.5em;
}

.ql-editor li.ql-direction-rtl > .ql-ui:before {
  margin-left: 0.3em;
  margin-right: -1.5em;
  text-align: left;
}

.ql-editor table {
  table-layout: fixed;
  width: 100%;
}

.ql-editor table td {
  outline: none;
}

.ql-editor .ql-code-block-container {
  font-family: monospace;
}

.ql-editor .ql-video {
  display: block;
  max-width: 100%;
}

.ql-editor .ql-video.ql-align-center {
  margin: 0 auto;
}

.ql-editor .ql-video.ql-align-right {
  margin: 0 0 0 auto;
}

.ql-editor .ql-bg-black {
  background-color: #000;
}

.ql-editor .ql-bg-red {
  background-color: #e60000;
}

.ql-editor .ql-bg-orange {
  background-color: #f90;
}

.ql-editor .ql-bg-yellow {
  background-color: #ff0;
}

.ql-editor .ql-bg-green {
  background-color: #008a00;
}

.ql-editor .ql-bg-blue {
  background-color: #06c;
}

.ql-editor .ql-bg-purple {
  background-color: #93f;
}

.ql-editor .ql-color-white {
  color: #fff;
}

.ql-editor .ql-color-red {
  color: #e60000;
}

.ql-editor .ql-color-orange {
  color: #f90;
}

.ql-editor .ql-color-yellow {
  color: #ff0;
}

.ql-editor .ql-color-green {
  color: #008a00;
}

.ql-editor .ql-color-blue {
  color: #06c;
}

.ql-editor .ql-color-purple {
  color: #93f;
}

.ql-editor .ql-font-serif {
  font-family: Georgia, Times New Roman, serif;
}

.ql-editor .ql-font-monospace {
  font-family: Monaco, Courier New, monospace;
}

.ql-editor .ql-size-small {
  font-size: 0.75em;
}

.ql-editor .ql-size-large {
  font-size: 1.5em;
}

.ql-editor .ql-size-huge {
  font-size: 2.5em;
}

.ql-editor .ql-direction-rtl {
  direction: rtl;
  text-align: inherit;
}

.ql-editor .ql-align-center {
  text-align: center;
}

.ql-editor .ql-align-justify {
  text-align: justify;
}

.ql-editor .ql-align-right {
  text-align: right;
}

.ql-editor .ql-ui {
  position: absolute;
}

.ql-editor.ql-blank::before {
  color: rgba(0, 0, 0, 0.6);
  content: attr(data-placeholder);
  font-style: italic;
  left: 15px;
  pointer-events: none;
  position: absolute;
  right: 15px;
}

.ql-snow.ql-toolbar:after, .ql-snow .ql-toolbar:after {
  clear: both;
  content: "";
  display: table;
}

.ql-snow.ql-toolbar button, .ql-snow .ql-toolbar button {
  background: none;
  border: none;
  cursor: pointer;
  display: inline-block;
  float: left;
  height: 24px;
  padding: 3px 5px;
  width: 28px;
}

.ql-snow.ql-toolbar button svg, .ql-snow .ql-toolbar button svg {
  float: left;
  height: 100%;
}

.ql-snow.ql-toolbar button:active:hover, .ql-snow .ql-toolbar button:active:hover {
  outline: none;
}

.ql-snow.ql-toolbar input.ql-image[type=file], .ql-snow .ql-toolbar input.ql-image[type=file] {
  display: none;
}

.ql-snow.ql-toolbar button:hover, .ql-snow .ql-toolbar button:hover, .ql-snow.ql-toolbar button:focus, .ql-snow .ql-toolbar button:focus, .ql-snow.ql-toolbar button.ql-active, .ql-snow .ql-toolbar button.ql-active, .ql-snow.ql-toolbar .ql-picker-label:hover, .ql-snow .ql-toolbar .ql-picker-label:hover, .ql-snow.ql-toolbar .ql-picker-label.ql-active, .ql-snow .ql-toolbar .ql-picker-label.ql-active, .ql-snow.ql-toolbar .ql-picker-item:hover, .ql-snow .ql-toolbar .ql-picker-item:hover, .ql-snow.ql-toolbar .ql-picker-item.ql-selected, .ql-snow .ql-toolbar .ql-picker-item.ql-selected {
  color: #06c;
}

.ql-snow.ql-toolbar button:hover .ql-fill, .ql-snow .ql-toolbar button:hover .ql-fill, .ql-snow.ql-toolbar button:focus .ql-fill, .ql-snow .ql-toolbar button:focus .ql-fill, .ql-snow.ql-toolbar button.ql-active .ql-fill, .ql-snow .ql-toolbar button.ql-active .ql-fill, .ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill, .ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill, .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill, .ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill, .ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill, .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill, .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill, .ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill, .ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill, .ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill, .ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill, .ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill, .ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill, .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill, .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill, .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill, .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill, .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill, .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill, .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill, .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill {
  fill: #06c;
}

.ql-snow.ql-toolbar button:hover .ql-stroke, .ql-snow .ql-toolbar button:hover .ql-stroke, .ql-snow.ql-toolbar button:focus .ql-stroke, .ql-snow .ql-toolbar button:focus .ql-stroke, .ql-snow.ql-toolbar button.ql-active .ql-stroke, .ql-snow .ql-toolbar button.ql-active .ql-stroke, .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke, .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke, .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke, .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke, .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke, .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke, .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke, .ql-snow.ql-toolbar button:hover .ql-stroke-miter, .ql-snow .ql-toolbar button:hover .ql-stroke-miter, .ql-snow.ql-toolbar button:focus .ql-stroke-miter, .ql-snow .ql-toolbar button:focus .ql-stroke-miter, .ql-snow.ql-toolbar button.ql-active .ql-stroke-miter, .ql-snow .ql-toolbar button.ql-active .ql-stroke-miter, .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter, .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter, .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter, .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter, .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter, .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter, .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter, .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter {
  stroke: #06c;
}

@media (pointer: coarse) {
  .ql-snow.ql-toolbar button:hover:not(.ql-active), .ql-snow .ql-toolbar button:hover:not(.ql-active) {
    color: #444;
  }
  .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-fill, .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-fill, .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill, .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill {
    fill: #444;
  }
  .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke, .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke, .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter, .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter {
    stroke: #444;
  }
}
.ql-snow {
  box-sizing: border-box;
}

.ql-snow * {
  box-sizing: border-box;
}

.ql-snow .ql-hidden {
  display: none;
}

.ql-snow .ql-out-bottom, .ql-snow .ql-out-top {
  visibility: hidden;
}

.ql-snow .ql-tooltip {
  position: absolute;
  transform: translateY(10px);
}

.ql-snow .ql-tooltip a {
  cursor: pointer;
  text-decoration: none;
}

.ql-snow .ql-tooltip.ql-flip {
  transform: translateY(-10px);
}

.ql-snow .ql-formats {
  display: inline-block;
  vertical-align: middle;
}

.ql-snow .ql-formats:after {
  clear: both;
  content: "";
  display: table;
}

.ql-snow .ql-stroke {
  fill: none;
  stroke: #444;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.ql-snow .ql-stroke-miter {
  fill: none;
  stroke: #444;
  stroke-miterlimit: 10;
  stroke-width: 2;
}

.ql-snow .ql-fill, .ql-snow .ql-stroke.ql-fill {
  fill: #444;
}

.ql-snow .ql-empty {
  fill: none;
}

.ql-snow .ql-even {
  fill-rule: evenodd;
}

.ql-snow .ql-thin, .ql-snow .ql-stroke.ql-thin {
  stroke-width: 1;
}

.ql-snow .ql-transparent {
  opacity: 0.4;
}

.ql-snow .ql-direction svg:last-child {
  display: none;
}

.ql-snow .ql-direction.ql-active svg:last-child {
  display: inline;
}

.ql-snow .ql-direction.ql-active svg:first-child {
  display: none;
}

.ql-snow .ql-editor h1 {
  font-size: 2em;
}

.ql-snow .ql-editor h2 {
  font-size: 1.5em;
}

.ql-snow .ql-editor h3 {
  font-size: 1.17em;
}

.ql-snow .ql-editor h4 {
  font-size: 1em;
}

.ql-snow .ql-editor h5 {
  font-size: 0.83em;
}

.ql-snow .ql-editor h6 {
  font-size: 0.67em;
}

.ql-snow .ql-editor a {
  text-decoration: underline;
}

.ql-snow .ql-editor blockquote {
  border-left: 4px solid #ccc;
  margin-bottom: 5px;
  margin-top: 5px;
  padding-left: 16px;
}

.ql-snow .ql-editor code, .ql-snow .ql-editor .ql-code-block-container {
  background-color: #f0f0f0;
  border-radius: 3px;
}

.ql-snow .ql-editor .ql-code-block-container {
  margin-bottom: 5px;
  margin-top: 5px;
  padding: 5px 10px;
}

.ql-snow .ql-editor code {
  font-size: 85%;
  padding: 2px 4px;
}

.ql-snow .ql-editor .ql-code-block-container {
  background-color: #23241f;
  color: #f8f8f2;
  overflow: visible;
}

.ql-snow .ql-editor img {
  max-width: 100%;
}

.ql-snow .ql-picker {
  color: #444;
  display: inline-block;
  float: left;
  font-size: 14px;
  font-weight: 500;
  height: 24px;
  position: relative;
  vertical-align: middle;
}

.ql-snow .ql-picker-label {
  cursor: pointer;
  display: inline-block;
  height: 100%;
  padding-left: 8px;
  padding-right: 2px;
  position: relative;
  width: 100%;
}

.ql-snow .ql-picker-label::before {
  display: inline-block;
  line-height: 22px;
}

.ql-snow .ql-picker-options {
  background-color: #fff;
  display: none;
  min-width: 100%;
  padding: 4px 8px;
  position: absolute;
  white-space: nowrap;
}

.ql-snow .ql-picker-options .ql-picker-item {
  cursor: pointer;
  display: block;
  padding-bottom: 5px;
  padding-top: 5px;
}

.ql-snow .ql-picker.ql-expanded .ql-picker-label {
  color: #ccc;
  z-index: 2;
}

.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
  fill: #ccc;
}

.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
  stroke: #ccc;
}

.ql-snow .ql-picker.ql-expanded .ql-picker-options {
  display: block;
  margin-top: -1px;
  top: 100%;
  z-index: 1;
}

.ql-snow .ql-color-picker, .ql-snow .ql-icon-picker {
  width: 28px;
}

.ql-snow .ql-color-picker .ql-picker-label, .ql-snow .ql-icon-picker .ql-picker-label {
  padding: 2px 4px;
}

.ql-snow .ql-color-picker .ql-picker-label svg, .ql-snow .ql-icon-picker .ql-picker-label svg {
  right: 4px;
}

.ql-snow .ql-icon-picker .ql-picker-options {
  padding: 4px 0;
}

.ql-snow .ql-icon-picker .ql-picker-item {
  height: 24px;
  width: 24px;
  padding: 2px 4px;
}

.ql-snow .ql-color-picker .ql-picker-options {
  padding: 3px 5px;
  width: 152px;
}

.ql-snow .ql-color-picker .ql-picker-item {
  border: 1px solid transparent;
  float: left;
  height: 16px;
  margin: 2px;
  padding: 0;
  width: 16px;
}

.ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg {
  position: absolute;
  margin-top: -9px;
  right: 0;
  top: 50%;
  width: 18px;
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=""])::before, .ql-snow .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=""])::before, .ql-snow .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=""])::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=""])::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=""])::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=""])::before {
  content: attr(data-label);
}

.ql-snow .ql-picker.ql-header {
  width: 98px;
}

.ql-snow .ql-picker.ql-header .ql-picker-label::before, .ql-snow .ql-picker.ql-header .ql-picker-item::before {
  content: "Normal";
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  content: "Heading 1";
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  content: "Heading 2";
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  content: "Heading 3";
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  content: "Heading 4";
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  content: "Heading 5";
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  content: "Heading 6";
}

.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  font-size: 2em;
}

.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  font-size: 1.5em;
}

.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  font-size: 1.17em;
}

.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  font-size: 1em;
}

.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  font-size: 0.83em;
}

.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  font-size: 0.67em;
}

.ql-snow .ql-picker.ql-font {
  width: 108px;
}

.ql-snow .ql-picker.ql-font .ql-picker-label::before, .ql-snow .ql-picker.ql-font .ql-picker-item::before {
  content: "Sans Serif";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
  content: "Serif";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
  content: "Monospace";
}

.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
  font-family: Georgia, Times New Roman, serif;
}

.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
  font-family: Monaco, Courier New, monospace;
}

.ql-snow .ql-picker.ql-size {
  width: 98px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label::before, .ql-snow .ql-picker.ql-size .ql-picker-item::before {
  content: "Normal";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
  content: "Small";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
  content: "Large";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
  content: "Huge";
}

.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
  font-size: 10px;
}

.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
  font-size: 18px;
}

.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
  font-size: 32px;
}

.ql-snow .ql-color-picker.ql-background .ql-picker-item {
  background-color: #fff;
}

.ql-snow .ql-color-picker.ql-color .ql-picker-item {
  background-color: #000;
}

.ql-code-block-container {
  position: relative;
}

.ql-code-block-container .ql-ui {
  right: 5px;
  top: 5px;
}

.ql-toolbar.ql-snow {
  border: 1px solid #ccc;
  box-sizing: border-box;
  font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  padding: 8px;
}

.ql-toolbar.ql-snow .ql-formats {
  margin-right: 15px;
}

.ql-toolbar.ql-snow .ql-picker-label {
  border: 1px solid transparent;
}

.ql-toolbar.ql-snow .ql-picker-options {
  border: 1px solid transparent;
  box-shadow: rgba(0, 0, 0, 0.2) 0 2px 8px;
}

.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
  border-color: #ccc;
}

.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
  border-color: #ccc;
}

.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item.ql-selected, .ql-toolbar.ql-snow .ql-color-picker .ql-picker-item:hover {
  border-color: #000;
}

.ql-toolbar.ql-snow + .ql-container.ql-snow {
  border-top: 0;
}

.ql-snow .ql-tooltip {
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: 0 0 5px #ddd;
  color: #444;
  padding: 5px 12px;
  white-space: nowrap;
}

.ql-snow .ql-tooltip::before {
  content: "Visit URL:";
  line-height: 26px;
  margin-right: 8px;
}

.ql-snow .ql-tooltip input[type=text] {
  display: none;
  border: 1px solid #ccc;
  font-size: 13px;
  height: 26px;
  margin: 0;
  padding: 3px 5px;
  width: 170px;
}

.ql-snow .ql-tooltip a.ql-preview {
  display: inline-block;
  max-width: 200px;
  overflow-x: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
}

.ql-snow .ql-tooltip a.ql-action::after {
  border-right: 1px solid #ccc;
  content: "Edit";
  margin-left: 16px;
  padding-right: 8px;
}

.ql-snow .ql-tooltip a.ql-remove::before {
  content: "Remove";
  margin-left: 8px;
}

.ql-snow .ql-tooltip a {
  line-height: 26px;
}

.ql-snow .ql-tooltip.ql-editing a.ql-preview, .ql-snow .ql-tooltip.ql-editing a.ql-remove {
  display: none;
}

.ql-snow .ql-tooltip.ql-editing input[type=text] {
  display: inline-block;
}

.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
  border-right: 0;
  content: "Save";
  padding-right: 0;
}

.ql-snow .ql-tooltip[data-mode=link]::before {
  content: "Enter link:";
}

.ql-snow .ql-tooltip[data-mode=formula]::before {
  content: "Enter formula:";
}

.ql-snow .ql-tooltip[data-mode=video]::before {
  content: "Enter video:";
}

.ql-snow a {
  color: #06c;
}

.ql-container.ql-snow {
  border: 1px solid #ccc;
}


[data-tg-tour] {
  scroll-margin: 30px 0;
}

.tg-backdrop {
  position: absolute;
  align-items: center;
  justify-content: center;
  display: none;
  z-index: 99;
  border-radius: 7px;
  box-shadow: rgba(33, 33, 33, 0.8) 0 0 1px 2px, rgba(33, 33, 33, 0.8) 0 0 0 1000vh;
  border: 1px solid rgba(193, 192, 232, 0.5);
  top: 50vh;
  left: 50vw;
  width: 0;
  height: 0;
}
.tg-backdrop.tg-backdrop-animate {
  transition: all 300ms;
}
.tg-backdrop.allow-interaction {
  pointer-events: none;
}

.tg-dialog {
  border-radius: 12px;
  animation-delay: 100ms;
  min-height: 120px;
  background: #fff;
  color: #252525;
  max-width: 340px;
  width: max-content;
  z-index: 9999;
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  padding: 0;
  font-size: 0.9rem;
}
.tg-dialog .tg-dialog-header {
  display: flex;
  align-items: center;
  padding: 25px 25px 0 25px;
}
.tg-dialog .tg-dialog-header .tg-dialog-title {
  font-size: 1rem;
  font-weight: 700;
  margin-right: auto;
}
.tg-dialog .tg-dialog-header .tg-dialog-title + .tg-dialog-body {
  padding: 18.75px 25px 18.75px 25px;
}
.tg-dialog .tg-dialog-header .tg-dialog-close-btn {
  width: 12px;
  height: 12px;
  margin-left: 10px;
  opacity: 0.4;
  cursor: pointer;
  white-space: nowrap;
}
.tg-dialog .tg-dialog-header .tg-dialog-close-btn:hover {
  opacity: 8;
}
.tg-dialog .tg-dialog-header .tg-dialog-close-btn:focus {
  opacity: 1;
}
.tg-dialog .tg-dialog-header .tg-dialog-spinner {
  display: none;
  opacity: 0.4;
  margin-top: -1px;
  -webkit-animation: tg-spin 1s linear infinite;
  -moz-animation: tg-spin 1s linear infinite;
  -o-animation: tg-spin 1s linear infinite;
  animation: tg-spin 1s linear infinite;
}
@keyframes tg-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(359deg);
  }
}
.tg-dialog .tg-dialog-progress-bar {
  background: #f1f1f1;
  height: 5px;
  display: block;
  margin-top: 18.75px;
  position: relative;
}
.tg-dialog .tg-dialog-progress-bar > .tg-bar {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 4px;
  background: #414144;
  height: 100%;
  display: block;
  transition: all 300ms;
}
.tg-dialog .tg-dialog-body {
  padding: 25px;
  font-weight: 400;
}
.tg-dialog .tg-dialog-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px 0;
  margin-bottom: 10px;
  border-top: 1px solid #dedee7;
  border-bottom: 1px solid #dedee7;
}
.tg-dialog .tg-dialog-dots > span.tg-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  background: #c2c7ce;
  border-radius: 12px;
  margin: 0 4px;
}
.tg-dialog .tg-dialog-dots > span.tg-dot.tg-dot-active {
  background: #5362d9;
}
.tg-dialog .tg-dialog-footer {
  padding: 12.5px 25px 25px 25px;
  display: flex;
  align-items: center;
}
.tg-dialog .tg-dialog-footer button.tg-dialog-btn {
  padding: 5px 10px;
  border: 1px solid #cbcfd5;
  color: #6f727e;
  border-radius: 4px;
  font-weight: 500;
  font-size: 0.82rem;
  white-space: nowrap;
}
.tg-dialog .tg-dialog-footer button.tg-dialog-btn + button {
  margin-left: auto;
}
.tg-dialog .tg-dialog-footer button.tg-dialog-btn.disabled {
  pointer-events: none;
  opacity: 0.6;
}
.tg-dialog .tg-dialog-footer button.tg-dialog-btn:hover {
  color: #464852;
  border: 1px solid #b5b7c2;
  outline: none;
  box-shadow: none;
}
.tg-dialog .tg-dialog-footer button.tg-dialog-btn:focus {
  outline: none;
  box-shadow: none;
}
.tg-dialog .tg-dialog-footer button.tg-dialog-btn:active {
  color: #4655cb;
  background: #f1f2ff;
  border: 1px solid #5362d9;
  outline: none;
  box-shadow: none;
}
.tg-dialog .tg-dialog-footer .tg-dialog-footer-sup {
  margin: 0 auto;
  padding: 0 10px;
  text-align: center;
  line-height: 1;
}
.tg-dialog .tg-dialog-footer .tg-dialog-footer-sup .tg-step-progress {
  font-size: 0.78rem;
  font-weight: 700;
  margin: 0 auto;
  opacity: 0.4;
  letter-spacing: 1px;
  display: inline-block;
}
.tg-dialog .tg-dialog-footer .tg-dialog-footer-sup .tg-dialog-dots {
  padding: 0;
  margin: 0;
  border: none;
}
.tg-dialog .tg-dialog-footer .tg-dialog-footer-sup .tg-dialog-dots > span.tg-dot {
  width: 8px;
  height: 8px;
  margin: 0 3px;
}
.tg-dialog .tg-dialog-footer .tg-dialog-footer-sup .tg-dialog-dots + .tg-step-progress {
  margin-top: 10px;
  font-size: 0.68rem;
}
.tg-dialog .tg-arrow {
  position: absolute;
  background: #fff;
  width: 9px;
  height: 9px;
  border-radius: 1px;
  transform: rotate(45deg);
}
.tg-dialog.tg-dialog-fixed {
  transition: none;
  animation-delay: 0ms;
}
.tg-dialog.animate-position {
  transition: all 300ms;
}
.tg-dialog.tg-dialog-loading .tg-dialog-header .tg-dialog-title {
  opacity: 0.4;
}
.tg-dialog.tg-dialog-loading .tg-dialog-header .tg-dialog-close-btn {
  display: none;
}
.tg-dialog.tg-dialog-loading .tg-dialog-header .tg-dialog-spinner {
  display: inline-block;
}
.tg-dialog.tg-dialog-loading .tg-dialog-body {
  opacity: 0.4;
  pointer-events: none;
}
.tg-dialog.tg-dialog-loading .tg-dialog-footer {
  pointer-events: none;
  opacity: 0.4;
}

/** disable interaction with other elements on page */
.tg-no-interaction * {
  pointer-events: none !important;
  user-select: none !important;
}

.tg-no-interaction .tg-dialog,
.tg-no-interaction .tg-active-element,
.tg-dialog *,
.tg-active-element * {
  pointer-events: auto !important;
  user-select: text !important;
}

body.light {
  --primary:#1B998B;
  --on-primary:#FFF;
  --secondary-container: #89C3FF;
  --on-secondary-container:#1E192B;
  --background: #FAFAFA;
  --surface: #eff0f1;
  --surface-variant: #e0e0eb;
  --on-surface-variant: #49454e;
}

body.dark {
  --primary: #FEC652;
  --on-primary: #332810;
  --secondary-container: #FEC652;
  --on-secondary-container: #332810;
}

@font-face {
  font-family: "Roboto";
  src: url(/assets/Roboto/Roboto-Regular-20000d75440612ea9275ebd2723e3fa8730d6bbfd445ed31bad745bec6164d8b.ttf) format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto-Bold";
  src: url(/assets/Roboto/Roboto-Bold-b0786970a4e751b8f1794254733040ecbfaa7cc2ef8fa7f4eab4769bc98303e9.ttf) format("truetype");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url(/assets/Montserrat/Montserrat-VariableFont_wght-2b4c48e4d75dc0183d5a52680098c8efcc52e6d471ec1601f31aff1866cb2b28.ttf) format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
/* beercss: */
:root {
  --font: "Roboto";
}

/* fallback */
@font-face {
  font-family: "Material Icons";
  font-style: normal;
  font-weight: 400;
  src: url(/assets/Material_Icons/material_icons_v138-b966b19b74517f75c4e231fb0a6fe5643427fe736c74d1a9b8701e87bd20400e.woff2) format("woff2");
  font-display: block;
}
.material-icons {
  font-family: "Material Icons";
  font-weight: normal;
  font-style: normal;
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
  /* Support for IE. */
  font-feature-settings: "liga";
}

body {
  background-color: var(--surface-container-lowest);
  line-height: 1.25;
  letter-spacing: initial;
}
body .responsive header {
  background-color: var(--surface);
}
body .field > select, body input[type^=file], body input[type^=date], body input[type^=time], body input[type^=color] {
  appearance: none;
  cursor: pointer;
}
body :is(form) {
  margin-block-start: 0rem !important;
}
body :is(p) {
  margin-block-start: 0.5rem !important;
}

@media only screen and (min-width: 993px) {
  nav.l.left ~ main.responsive {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
.percent_icon {
  font-size: 8px;
  position: absolute;
  top: 4px;
}

nav:is(.left, .right, .top, .bottom):not(.drawer) > a:not(.button, .chip):is(:hover, :focus, .active) > i .percent_icon, nav:is(.left, .right, .top, .bottom):not(.drawer) > :is(ol, ul) > li > a:not(.button, .chip):is(:hover, :focus, .active) > i .percent_icon {
  color: var(--secondary-container);
}

[dir=rtl] dialog.right, dialog.left {
  max-width: 90%;
}
[dir=rtl] dialog.right nav.drawer, dialog.left nav.drawer {
  inline-size: 18rem;
}

nav:is(.left, .right, .top, .bottom):not(.drawer) > a:not(.button, .chip), nav:is(.left, .right, .top, .bottom):not(.drawer) > :is(ol, ul) > li > a:not(.button, .chip) {
  gap: unset;
}

.field.label.border:not(.fill):focus-within > label::after {
  border-block-start: 0.125rem solid var(--primary);
}

.main-black {
  background: #0B0A0A;
  padding: 8rem 20rem;
}

.main-content {
  margin-bottom: 4.5rem;
}

.hidden {
  display: none !important;
}

.mt-0 {
  margin-top: 0 !important;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.mt-n3 {
  margin-top: -1rem !important;
}

@media only screen and (max-width: 601px) {
  .mt-s {
    margin-top: 0.5rem !important;
  }
}

.mirrored {
  transform: rotateY(180deg);
}

.rotate-90 {
  rotate: 90deg;
}

.rotate-180 {
  rotate: 180deg;
}

.rotate-270 {
  rotate: 270deg;
}

.blur-text {
  -webkit-text-security: square;
}

.inline {
  display: inline;
}

.flex {
  display: flex;
}

.link a {
  font-weight: bold;
  color: var(--primary);
}
.link a:hover {
  text-decoration: underline;
}

.page-title {
  text-align: center;
  justify-content: center;
  margin-bottom: 0;
  font: bold 37px/1.2em Montserrat;
  color: var(--primary);
  font-size: 1.25rem;
}
@media only screen and (min-width: 601px) {
  .page-title {
    font-size: 1.5rem;
  }
}
@media only screen and (min-width: 993px) {
  .page-title {
    font-size: 2rem;
  }
}

#error_explanation {
  margin-top: 1rem;
  margin-left: 15px;
  background: yellow;
}

.pagination {
  font-size: 1.5rem;
}
.pagination li {
  display: inline-block;
  margin: 0 5px;
}
.pagination li.active {
  font-weight: bold;
}
.pagination li.active a {
  text-decoration: underline;
}
.pagination li a:hover {
  color: var(--primary);
}

.image-footer {
  color: var(--primary);
  position: absolute;
  bottom: -20px;
}

.admin-list-actions {
  display: flex;
  width: 100%;
}

.border-radius {
  border-radius: 0.5rem !important;
}

header {
  border-radius: initial;
  padding: 0 0.5rem;
}
header svg {
  width: 100%;
}

.hover:hover {
  transform: scale(1.05);
  transition: transform 0.5s ease;
}

.hover-shrink:hover {
  transform: scale(0.95);
  transition: transform 0.5s ease;
}

@media only screen and (min-width: 993px) {
  .phone-border-l {
    max-width: 464px;
    min-height: 696px;
    padding: 0.5rem;
    padding-bottom: 2rem;
    margin-top: 1rem;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid lightgray;
    border-radius: 0.5rem;
  }
  .phone-border-l .phone-footer {
    position: absolute;
    left: 0;
    bottom: 0px;
    width: 100%;
  }
  .phone-border-l .phone-footer footer {
    position: initial;
  }
}
.preview-image {
  display: inline-table;
  max-height: 64px;
  overflow: hidden;
  margin: auto;
}

.virtual-card {
  max-width: 25rem;
  max-height: 16.875rem;
  border-radius: 0.5rem;
  aspect-ratio: 85.6/53.98;
}

.highlight {
  -webkit-animation: highlight 1000ms;
  -moz-animation: highlight 1000ms;
  animation: highlight 1000ms;
}
@-moz-keyframes highlight {
  from {
    background-color: var(--background);
  }
  to {
    background-color: var(--surface);
  }
}
@-webkit-keyframes highlight {
  from {
    background-color: var(--background);
  }
  to {
    background-color: var(--surface);
  }
}
@keyframes highlight {
  from {
    background-color: var(--background);
  }
  to {
    background-color: var(--surface);
  }
}

::placeholder {
  color: #aaa;
  opacity: 1;
}

.dynamic-font-size {
  font-size: 0.75rem;
}
@media only screen and (min-width: 601px) {
  .dynamic-font-size {
    font-size: 0.875rem;
  }
}

.filter-font-size {
  font-size: 0.75rem !important;
}
@media only screen and (min-width: 601px) {
  .filter-font-size {
    font-size: 0.875rem !important;
  }
}
@media only screen and (min-width: 993px) {
  .filter-font-size {
    font-size: 1rem !important;
  }
}

.ql-toolbar button {
  min-inline-size: initial;
  margin: initial;
  border-radius: inherit;
}
.ql-toolbar button:hover {
  color: transparent !important;
  box-shadow: unset !important;
}

#qr-code-scanner video {
  max-width: 100%;
}
#qr-code-scanner #qr-shaded-region div {
  border-radius: 0;
}

@keyframes details-show {
  from {
    opacity: 0;
    transform: var(--details-translate, translateY(-0.5em));
  }
}
details[open] > *:not(summary) {
  animation: details-show 300ms ease-in-out;
}

#multi-update-modal {
  background-color: var(--surface-container-high);
}

.tg-dialog-btn {
  background-color: initial;
}

.g-map {
  height: 300px;
}
@media only screen and (min-width: 601px) {
  .g-map {
    height: 300px;
  }
}
@media only screen and (min-width: 993px) {
  .g-map {
    height: 400px;
  }
}

.g-map button {
  all: unset;
}

.gm-style-iw {
  padding-inline-end: 12px !important;
  padding-bottom: 12px !important;
  max-width: fit-content !important;
  max-height: fit-content !important;
}
.gm-style-iw .gm-style-iw-d {
  overflow: visible !important;
}

.admin-actions {
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
}
.admin-actions .admin-actions__link {
  margin-top: -0.5rem;
  margin-right: 0.5rem;
}

.alert {
  border-radius: 5px;
  margin-top: 1rem;
  padding: 1rem;
  display: flex;
  align-items: center;
  border: 1px solid;
  cursor: pointer;
  opacity: 1;
  max-height: 200px;
  overflow: hidden;
  /* Alert Variants */
}
.alert::after {
  content: "";
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}
.alert.fade-out {
  transition: opacity 0.5s ease, max-height 0.5s ease, padding 0.5s ease, padding-left 3s ease-in, margin 0.5s ease;
  opacity: 0;
  max-height: 0;
  padding: 0;
  margin: 0;
}
.alert i {
  margin-right: 1rem;
}
.alert-warning {
  background-color: #fff3cd;
  color: #856404;
  border-color: #ffeeba;
}
.alert-error {
  background-color: #f8d7da;
  color: #721c24;
  border-color: #f5c6cb;
}
.alert-success {
  background-color: #d4edda;
  color: #155724;
  border-color: #c3e6cb;
}
.alert-info {
  background-color: #d1ecf1;
  color: #0c5460;
  border-color: #bee5eb;
}

article.member-card {
  max-width: 432px;
  margin-left: auto;
  margin-right: auto;
  background-color: white;
  border-top: 1px solid #eee;
}

.dark article.member-card {
  background-color: var(--surface);
}

/* The flip box container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-box {
  max-width: 432px;
  margin-left: auto;
  margin-right: auto;
  background-color: white;
  width: 100%;
  height: 100%;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
  cursor: pointer;
}

/* This container is needed to position the front and back side */
.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 1s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-box.active .flip-box-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-box-front, .flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-box-front {
  position: relative;
}

/* Style the back side */
.flip-box-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--surface);
  transform: rotateY(180deg);
}

.custom-badge {
  padding: 5px 10px;
  border-radius: 0.25rem;
  font-weight: bold;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: normal;
  position: absolute;
  top: -0.8rem;
  right: -0.8rem;
  font-size: 0.625rem;
}
@media only screen and (min-width: 601px) {
  .custom-badge {
    font-size: 0.75em;
  }
}

.custom-badge-large {
  padding: 0.5rem 1rem;
  font-size: 0.75em;
}
@media only screen and (min-width: 601px) {
  .custom-badge-large {
    font-size: 0.875em;
  }
}

.custom-badge-info {
  background-color: #17a2b8;
}

.custom-badge-success {
  background-color: #28a745;
}

.custom-badge-danger {
  background-color: #dc3545;
}

.custom-badge-warning {
  background-color: #ffc107;
  color: #212529;
}

.category-circle {
  border-radius: 50%;
  block-size: 1rem;
  inline-size: 1rem;
  display: inline-flex;
}

.discount-description {
  font-size: 0.625rem;
}
@media only screen and (min-width: 601px) {
  .discount-description {
    font-size: 0.75rem;
  }
}

.discount-article {
  margin: 0 auto 0.5rem auto;
}
.discount-article button.surface:hover {
  transform: scale(1.05);
}
.discount-article a:hover {
  text-decoration: underline;
}
.discount-article article {
  width: 100%;
  background: #fff;
  box-shadow: 4px 4px 12px 0 rgba(0, 0, 0, 0.15);
  padding: 0.75rem;
}
@media only screen and (min-width: 601px) {
  .discount-article article {
    padding: 1rem;
  }
}
.discount-article article i.discount_type_icon {
  color: #ababab;
  font-size: 1.5rem;
  overflow: visible;
}
@media only screen and (min-width: 601px) {
  .discount-article article i.discount_type_icon {
    font-size: 2rem;
    margin: 0 0.25rem;
  }
}
.discount-article article i.special_discount_icon {
  font-size: 1rem;
}
.discount-article article p {
  color: rgb(156, 163, 175);
  font-size: 0.5rem;
  margin: 0;
}
@media only screen and (min-width: 601px) {
  .discount-article article p {
    font-size: 0.75rem;
  }
}
@media only screen and (min-width: 601px) {
  .discount-article article .redeem-btn {
    margin: 0 0.25rem;
  }
}
.discount-article article .discount-value .code-icon {
  font-size: 0.75rem;
  position: absolute;
  right: -1.25rem;
}
@media only screen and (min-width: 601px) {
  .discount-article article .discount-value .code-icon {
    right: -1.5rem;
  }
}
@media only screen and (max-width: 601px) {
  .discount-article h5 {
    font-size: 1.25rem;
  }
}

.discount-region-name {
  font-size: 0.875rem;
}
@media only screen and (min-width: 601px) {
  .discount-region-name {
    font-size: 1rem;
  }
}
@media only screen and (min-width: 993px) {
  .discount-region-name {
    font-size: 1.25rem;
  }
}

.discount-member-info article {
  background-color: #ffffff;
  border: 1px solid #ddd;
  border-radius: 0.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin: 1.25rem;
  padding: 1.25rem;
  font-family: "Arial", sans-serif;
}
.discount-member-info .member-details ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.discount-member-info .member-details ul li {
  padding: 0.5rem 0;
  border-bottom: 1px solid #eee;
}
.discount-member-info .member-details ul li:last-child {
  border-bottom: none;
}
.discount-member-info .text-muted {
  color: #aaa;
}
.discount-member-info .article-title {
  font-size: 1.5em;
  font-weight: bold;
  color: #333;
  margin: 0;
}
.discount-member-info .article-subtitle {
  font-size: 0.85em;
  color: #888;
}
.discount-member-info .article-footer {
  font-size: 0.85em;
  color: #888;
  border-top: 1px solid #eee;
  padding-top: 10px;
  margin-top: 15px;
}

.partner_dropdown {
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.partner_dropdown .partner_dropdown_content {
  display: block;
  padding: 0;
  height: fit-content;
  overflow: auto;
  max-height: 0px;
  transition: max-height 0.3s ease-in-out;
}

.partner_dropdown.open {
  border: 1px solid lightgray;
  border-radius: 0.75rem;
}
.partner_dropdown.open .partner_dropdown_content {
  padding: 0.5rem;
  max-height: 330px;
  transition: max-height 0.3s ease-in-out;
}

#favorite_locations_filter i:hover {
  font-variation-settings: "FILL" 1;
}
#favorite_locations_filter i.fill:hover {
  font-variation-settings: "FILL" 0;
}

.swipe-background {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  color: white;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}
.swipe-background .swipe-icon-right {
  padding: 0.5rem;
  border-radius: 50%;
  opacity: 0;
}
.swipe-background .swipe-icon-left {
  padding: 0.5rem;
  border-radius: 50%;
  opacity: 0;
}

.swipe-target {
  background: white !important;
  touch-action: pan-y;
}
.swipe-target.swiping {
  transition: none;
}

@keyframes flash {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.4;
    transform: scale(1.3);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.flash-effect {
  animation: flash 300ms ease-out;
}

@keyframes passing-through {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  30%, 70% {
    opacity: 1;
    transform: translateY(0px);
  }
  100% {
    opacity: 0;
    transform: translateY(-40px);
  }
}
@keyframes slide-in {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  30% {
    opacity: 1;
    transform: translateY(0px);
  }
}
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  10% {
    transform: scale(1.1);
  }
  20% {
    transform: scale(1);
  }
}
.dropzone, .dropzone * {
  box-sizing: border-box;
}

.dropzone {
  min-height: 150px;
  border: 1px solid rgba(0, 0, 0, 0.8);
  border-radius: 5px;
  padding: 20px 20px;
}

.dropzone.dz-clickable {
  cursor: pointer;
}

.dropzone.dz-clickable * {
  cursor: default;
}

.dropzone.dz-clickable .dz-message, .dropzone.dz-clickable .dz-message * {
  cursor: pointer;
}

.dropzone.dz-started .dz-message {
  display: none;
}

.dropzone.dz-drag-hover {
  border-style: solid;
}

.dropzone.dz-drag-hover .dz-message {
  opacity: 0.5;
}

.dropzone .dz-message {
  text-align: center;
  margin: 3em 0;
}

.dropzone .dz-message .dz-button {
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: inherit;
}

.dropzone .dz-preview {
  position: relative;
  display: inline-block;
  vertical-align: top;
  margin: 16px;
  min-height: 100px;
}

.dropzone .dz-preview:hover {
  z-index: 1000;
}

.dropzone .dz-preview:hover .dz-details {
  opacity: 1;
}

.dropzone .dz-preview.dz-file-preview .dz-image {
  border-radius: 20px;
  background: #999;
  background: linear-gradient(to bottom, #eee, #ddd);
}

.dropzone .dz-preview.dz-file-preview .dz-details {
  opacity: 1;
}

.dropzone .dz-preview.dz-image-preview {
  background: #fff;
}

.dropzone .dz-preview.dz-image-preview .dz-details {
  transition: opacity 0.2s linear;
}

.dropzone .dz-preview .dz-remove {
  font-size: 14px;
  text-align: center;
  display: block;
  cursor: pointer;
  border: none;
}

.dropzone .dz-preview .dz-remove:hover {
  text-decoration: underline;
}

.dropzone .dz-preview:hover .dz-details {
  opacity: 1;
}

.dropzone .dz-preview .dz-details {
  z-index: 20;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  font-size: 13px;
  min-width: 100%;
  max-width: 100%;
  padding: 2em 1em;
  text-align: center;
  color: rgba(0, 0, 0, 0.9);
  line-height: 150%;
}

.dropzone .dz-preview .dz-details .dz-size {
  margin-bottom: 1em;
  font-size: 16px;
}

.dropzone .dz-preview .dz-details .dz-filename {
  white-space: nowrap;
}

.dropzone .dz-preview .dz-details .dz-filename:hover span {
  border: 1px solid rgba(200, 200, 200, 0.8);
  background-color: rgba(255, 255, 255, 0.8);
}

.dropzone .dz-preview .dz-details .dz-filename:not(:hover) {
  overflow: hidden;
  text-overflow: ellipsis;
}

.dropzone .dz-preview .dz-details .dz-filename:not(:hover) span {
  border: 1px solid transparent;
}

.dropzone .dz-preview .dz-details .dz-filename span, .dropzone .dz-preview .dz-details .dz-size span {
  background-color: rgba(255, 255, 255, 0.4);
  padding: 0 0.4em;
  border-radius: 3px;
}

.dropzone .dz-preview:hover .dz-image img {
  transform: scale(1.05, 1.05);
  filter: blur(8px);
}

.dropzone .dz-preview .dz-image {
  border-radius: 20px;
  overflow: hidden;
  width: 120px;
  height: 120px;
  position: relative;
  display: block;
  z-index: 10;
}

.dropzone .dz-preview .dz-image img {
  display: block;
}

.dropzone .dz-preview.dz-success .dz-success-mark {
  animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
}

.dropzone .dz-preview.dz-error .dz-error-mark {
  opacity: 1;
  animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
}

.dropzone .dz-preview .dz-success-mark, .dropzone .dz-preview .dz-error-mark {
  pointer-events: none;
  opacity: 0;
  z-index: 500;
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  margin-left: -27px;
  margin-top: -27px;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 50%;
}

.dropzone .dz-preview .dz-success-mark svg, .dropzone .dz-preview .dz-error-mark svg {
  display: block;
  width: 54px;
  height: 54px;
  fill: #fff;
}

.dropzone .dz-preview.dz-processing .dz-progress {
  opacity: 1;
  transition: all 0.2s linear;
}

.dropzone .dz-preview.dz-complete .dz-progress {
  opacity: 0;
  transition: opacity 0.4s ease-in;
}

.dropzone .dz-preview:not(.dz-processing) .dz-progress {
  animation: pulse 6s ease infinite;
}

.dropzone .dz-preview .dz-progress {
  opacity: 1;
  z-index: 1000;
  pointer-events: none;
  position: absolute;
  height: 20px;
  top: 50%;
  margin-top: -10px;
  left: 15%;
  right: 15%;
  border: 3px solid rgba(0, 0, 0, 0.8);
  background: rgba(0, 0, 0, 0.8);
  border-radius: 10px;
  overflow: hidden;
}

.dropzone .dz-preview .dz-progress .dz-upload {
  background: #fff;
  display: block;
  position: relative;
  height: 100%;
  width: 0;
  transition: width 300ms ease-in-out;
  border-radius: 17px;
}

.dropzone .dz-preview.dz-error .dz-error-message {
  display: block;
}

.dropzone .dz-preview.dz-error:hover .dz-error-message {
  opacity: 1;
  pointer-events: auto;
}

.dropzone .dz-preview .dz-error-message {
  pointer-events: none;
  z-index: 1000;
  position: absolute;
  display: block;
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 8px;
  font-size: 13px;
  top: 130px;
  left: -10px;
  width: 140px;
  background: #b10606;
  padding: 0.5em 1em;
  color: #fff;
}

.dropzone .dz-preview .dz-error-message:after {
  content: "";
  position: absolute;
  top: -6px;
  left: 64px;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #b10606;
} 
.dropzone, .dropzone * {
  box-sizing: border-box;
}

.dropzone {
  position: relative;
}

.dropzone .dz-preview {
  position: relative;
  display: inline-block;
  width: 120px;
  margin: 0.5em;
}

.dropzone .dz-preview .dz-progress {
  display: block;
  height: 15px;
  border: 1px solid #aaa;
}

.dropzone .dz-preview .dz-progress .dz-upload {
  display: block;
  height: 100%;
  width: 0;
  background: green;
}

.dropzone .dz-preview .dz-error-message {
  color: red;
  display: none;
}

.dropzone .dz-preview.dz-error .dz-error-message, .dropzone .dz-preview.dz-error .dz-error-mark {
  display: block;
}

.dropzone .dz-preview.dz-success .dz-success-mark {
  display: block;
}

.dropzone .dz-preview .dz-error-mark, .dropzone .dz-preview .dz-success-mark {
  position: absolute;
  display: none;
  left: 30px;
  top: 30px;
  width: 54px;
  height: 58px;
  left: 50%;
  margin-left: -27px;
} 
.dropzone {
  border: 2px dashed #9ca3af;
  border-radius: 0.25rem;
  min-height: 10rem;
  padding: 0.5rem;
}
.dropzone i {
  inset: 13% 0.5rem auto auto !important;
}
.dropzone .dz-message {
  margin: 3rem 0;
}
.dropzone .dz-message .dz-msg-title {
  font-size: 1.25rem;
}
.dropzone .dz-message .dz-msg-desc {
  font-size: 0.75rem;
}
.dropzone .dz-preview {
  margin: 0;
}
.dropzone .dz-error-message {
  top: 145px !important;
}

footer {
  padding: 0;
  color: #000000;
  background-color: initial;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  font-size: 0.625rem;
}
@media only screen and (min-width: 601px) {
  footer {
    font-size: 0.75rem;
  }
}
@media only screen and (min-width: 993px) {
  footer {
    font-size: 0.875rem;
  }
}
footer a:hover {
  text-decoration: underline;
}

.field:not(.fieldset-field) {
  background-color: var(--background);
}

.fieldset-field fieldset {
  background-color: var(--background);
}

.customer_color_helper {
  position: absolute;
  left: 1rem;
  bottom: 0;
  transform: translateY(100%);
  background: none !important;
  padding-top: 0.125rem;
  font-size: 0.5rem;
}
@media only screen and (min-width: 601px) {
  .customer_color_helper {
    font-size: 0.75rem;
  }
}

.color-preview-field {
  width: calc(100% - 10px);
  height: 38px;
  position: absolute;
  top: 5px;
  left: 5px;
}

.field .badge {
  inset: 0 0 auto auto;
}

.fieldset-field fieldset {
  margin-top: -0.5rem;
  padding: 0.5rem 1rem;
  border-color: var(--outline);
}
.fieldset-field fieldset legend {
  font-size: 0.75rem;
}
.fieldset-field fieldset .tooltip-link {
  margin-top: -0.5rem;
}
.fieldset-field fieldset .field {
  margin-block-end: 0 !important;
}

fieldset .field {
  margin-block-end: 0 !important;
}

.checkbox-field {
  margin: 0;
  margin-top: -1rem;
  display: flex;
  align-items: center;
  background-color: initial !important;
}

.ql-container {
  min-height: 4rem;
}
.ql-container :is(p) {
  margin-block-start: unset !important;
}

.switch-checkbox > span::before {
  content: "";
}

.member-card .mc-status img {
  max-width: 100%;
}
.member-card .img-ml-22 img {
  margin-left: 22%;
}
.member-card .mc-data {
  padding: 1rem 1rem 1rem 0;
}
.member-card .mc-data .member-type {
  font-size: 1rem;
}
.member-card .mc-data .member-info {
  margin-top: 0.5rem;
  padding: 0;
  white-space: pre-wrap;
  overflow-y: initial;
  height: initial;
}
.member-card .mc-data .member-footer {
  margin-top: 0.5rem;
  font-size: 0.625rem;
}
.member-card .mc-data .member-footer p {
  margin: 0 !important;
}
.member-card .mc-manager-buttons {
  padding-top: 0.25rem;
}
.member-card .mc-manager-buttons button {
  margin: 0 0.25rem;
  background: transparent;
  color: black;
}

.profile-header-image {
  margin: -74px -10px;
}
@media only screen and (min-width: 993px) {
  .profile-header-image {
    margin: 0;
    border-radius: unset;
  }
}
.profile-header-image svg {
  max-height: 200px;
}

.profile-header-buttons {
  position: unset;
}

.profile-person-image .profile-image {
  display: inline-flex;
  width: 100%;
  height: 200px;
  border-radius: 50px;
  max-width: 200px;
  max-height: 200px;
  box-shadow: 4px 4px 12px 0 rgba(0, 0, 0, 0.15);
  background: white;
}
.profile-person-image .profile-image img {
  width: 200px;
  height: 200px;
}
@media only screen and (min-width: 993px) {
  .profile-person-image {
    margin-top: -4rem;
  }
}

.profile-links button.surface:hover {
  transform: scale(1.05);
}

.profile-entry {
  max-width: 314px;
  margin: 0 auto 0.5rem auto;
}
.profile-entry a {
  width: 100%;
}
.profile-entry a.wave:hover {
  transform: scale(1.03);
  border-radius: 0.75rem;
}
.profile-entry article {
  width: 100%;
  background: #fff;
  box-shadow: 4px 4px 12px 0 rgba(0, 0, 0, 0.15);
}
.profile-entry article i {
  color: #ababab;
  font-size: 2rem;
  margin: 0 0.25rem !important;
  overflow: visible;
}
.profile-entry article svg {
  color: #ababab;
  width: 1.5rem;
  height: 1.75rem;
  margin: 0 0.25rem !important;
  overflow: visible;
}
.profile-entry article p {
  color: rgb(156, 163, 175);
  font-size: 0.75rem;
  margin: 0;
}

.shop_products .padding {
  padding: 1rem !important;
}
.shop_products .no-padding {
  padding: 0rem !important;
}
.shop_products .margin {
  margin: 1rem !important;
}
.shop_products article {
  box-shadow: 0 0.125rem 0.125rem 0 rgba(0, 0, 0, 0.32);
  background-color: #f7f2f7;
  color: #1c1b1e;
  padding: 1rem;
  border-radius: 0.75rem;
  display: block;
  transition: transform 0.3s, border-radius 0.3s, padding 0.3s;
}
.shop_products nav {
  display: flex;
  align-items: center;
  align-self: normal;
  text-align: start;
  justify-content: flex-start;
  white-space: nowrap;
  gap: 1rem;
  margin: 0;
}
.shop_products .shop-product-title {
  font-size: 1rem;
}
@media only screen and (min-width: 601px) {
  .shop_products .shop-product-title {
    font-size: 1.25rem;
  }
}
.shop_products .shop-product-seller-name {
  font-size: 0.625rem;
}
.shop_products .shop-product-description-short {
  min-height: 6rem;
  line-height: 1.4;
  font-size: 0.75rem;
}
@media only screen and (min-width: 601px) {
  .shop_products .shop-product-description-short {
    font-size: 0.875rem;
  }
}
.shop_products .shop-product-footer {
  padding-top: 0 !important;
  position: absolute;
  bottom: 0;
  width: 100%;
}
.shop_products .shop-product-footer button {
  font-size: 0.625rem;
}
@media only screen and (min-width: 601px) {
  .shop_products .shop-product-footer button {
    font-size: 0.75rem;
  }
}
.shop_products .shop-product-price {
  color: red;
  font-size: 1rem;
}
.shop_products .shop-product-stock {
  display: block;
  font-size: 0.625rem;
}
@media only screen and (min-width: 601px) {
  .shop_products .shop-product-stock {
    font-size: 0.75rem;
  }
}
.shop_products .badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  font-size: 0.6875rem;
  text-transform: none;
  z-index: 2;
  padding: 0 0.25rem;
  min-block-size: 1rem;
  min-inline-size: 1rem;
  background-color: #ba1a1a;
  color: white;
  line-height: normal;
  border-radius: 1rem;
  inset: 50% auto auto 50%;
  transform: translateY(-100%);
  font-family: roboto;
}
.shop_products .hidden-indicator {
  position: absolute;
  left: calc(50% - 55px);
  top: 2.5px;
  z-index: 1;
  color: white;
  background: orange;
  padding: 0 1rem;
  font-size: 12px;
  border-radius: inherit;
}
.shop_products .position-indicator {
  position: absolute;
  left: 10px;
  bottom: 5px;
  z-index: 1;
}
.shop_products .country-indicator {
  display: flex;
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 1;
}
.shop_products .product-image-col {
  background: white;
  border-top-left-radius: 0.75rem;
  border-top-right-radius: 0;
  border-bottom-left-radius: 0.75rem;
  border-bottom-right-radius: 0;
  overflow: hidden;
  padding: 0;
}
.shop_products .product-image-col img {
  inline-size: 100%;
  block-size: 14rem;
  object-fit: cover;
  object-position: center;
}
.shop_products .add_to_cart-button {
  position: relative;
  width: 100%;
  margin-left: 0;
  background-color: transparent;
  border-radius: 2rem;
  border-color: black !important;
  block-size: 2.5rem;
  gap: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.shop_products .cart-button {
  position: relative;
  block-size: 2.5rem;
  gap: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-with-icon {
  block-size: 2.5rem;
  gap: 0.5rem;
  display: inline-flex;
  align-items: center;
}

table {
  font-size: 0.625rem;
  background-color: unset;
}
table th {
  font-weight: 600;
}
@media only screen and (min-width: 601px) {
  table {
    font-size: 0.75rem;
  }
}
@media only screen and (min-width: 993px) {
  table {
    font-size: 0.875rem;
  }
}
table img {
  max-height: 1.5rem;
  max-width: 6rem;
}
table .total-row td {
  border-top: 1px solid black;
}
table tbody tr[data-action*=click]:hover {
  background-color: #eff0f1 !important;
}
table .info_text {
  max-height: 100px;
  overflow: auto;
}
table .info_text p {
  margin: 0 !important;
}

.tooltip-link {
  position: absolute;
  right: -3px;
  top: -3px;
  z-index: 2;
}

.tooltip-link-checkbox {
  position: absolute;
  right: -30px;
  top: 0px;
  z-index: 2;
}