material-you-react/src/styles/generics.css

@import url(./themes/tokens.css);
@import url(./themes/colors.module.css);
@import url(./themes/typography.module.css);
@import "./themes/theme.dark.css" (prefers-color-scheme: dark);
@import "./themes/theme.light.css" (prefers-color-scheme: light);
div.m3.m3-card > :is(div.m3-card-footer, header.m3-card-header, section.m3-card-body) > .m3-card-media:first-child, div.m3.m3-card > .m3-card-media:first-child, div.m3.m3-card > .m3-card-action-area:first-child > .m3-card-action-area-content > .m3-card-media:first-child {
  padding: 0px;
  border-radius: 12px !important; }

div.m3.m3-card > .m3-card-action-area:first-child > .m3-card-action-area-content > .m3-card-media:first-child {
  padding: 0px;
  border-radius: 12px !important; }

div.m3-card-footer, header.m3-card-header, section.m3-card-body, .m3-card-media.m3 {
  padding: 16px;
  display: block;
  box-sizing: border-box; }

.m3.m3-card-media {
  width: 100%;
  display: block;
  contain: content;
  position: relative;
  box-sizing: border-box; }
  .m3.m3-card-media.m3-rounded {
    border-radius: 28px; }

div.m3.m3-card-action-area {
  display: block;
  cursor: pointer;
  contain: content;
  position: relative;
  border-radius: inherit;
  transition: box-shadow 0.2s cubic-bezier(0.2, 0, 0, 1); }
  div.m3.m3-card-action-area > div.m3.m3-card-action-area-content {
    top: 0;
    width: 100%;
    position: relative; }
  div.m3.m3-card-action-area > span.m3:is(.m3-card-state-layer, .m3-ripple-domain) {
    top: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1); }
  div.m3.m3-card-action-area:hover > span.m3.m3-card-state-layer {
    background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); }
  div.m3.m3-card-action-area:is(&:focus, &:focus-visible, &:focus-within) > span.m3.m3-card-state-layer {
    background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent); }
  div.m3.m3-card-action-area:is(&:focus, &:focus-visible, &:focus-within, &:hover):is(.m3-card-outlined, .m3-card-filled) {
    box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); }
  div.m3.m3-card-action-area:is(&:focus, &:focus-visible, &:focus-within, &:hover).m3-card-elevated {
    box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); }
  div.m3.m3-card-action-area:active:is(.m3-card-outlined, .m3-card-filled) {
    box-shadow: none !important; }
  div.m3.m3-card-action-area:active.m3-card-elevated {
    box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3) !important; }
  div.m3.m3-card-action-area:active:not(div.m3.m3-card-action-area:active:has(span.m3.m3-ripple-domain)) > span.m3.m3-card-state-layer {
    background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent); }
  div.m3.m3-card-action-area:active > span.m3.m3-ripple-domain > .m3.ripple {
    background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent); }

svg.m3.m3-svg-icon > text {
  alignment-baseline: central;
  text-anchor: middle; }
svg.m3.m3-svg-icon > text.m3-size-12px {
  width: 12px;
  aspect-ratio: 1;
  line-height: 12px;
  font-size: 12px; }
svg.m3.m3-svg-icon > text.m3-size-16px {
  width: 16px;
  aspect-ratio: 1;
  line-height: 16px;
  font-size: 16px; }
svg.m3.m3-svg-icon > text.m3-size-20px {
  width: 20px;
  aspect-ratio: 1;
  line-height: 20px;
  font-size: 20px; }
svg.m3.m3-svg-icon > text.m3-size-24px {
  width: 24px;
  aspect-ratio: 1;
  line-height: 24px;
  font-size: 24px; }
svg.m3.m3-svg-icon > text.m3-size-28px {
  width: 28px;
  aspect-ratio: 1;
  line-height: 28px;
  font-size: 28px; }
svg.m3.m3-svg-icon > text.m3-size-32px {
  width: 32px;
  aspect-ratio: 1;
  line-height: 32px;
  font-size: 32px; }
svg.m3.m3-svg-icon > text.m3-size-36px {
  width: 36px;
  aspect-ratio: 1;
  line-height: 36px;
  font-size: 36px; }
svg.m3.m3-svg-icon > text.m3-size-40px {
  width: 40px;
  aspect-ratio: 1;
  line-height: 40px;
  font-size: 40px; }
svg.m3.m3-svg-icon > text.m3-size-48px {
  width: 48px;
  aspect-ratio: 1;
  line-height: 48px;
  font-size: 48px; }
svg.m3.m3-svg-icon > text.m3-Outlined {
  font-family: Material-Symbols-Outlined-Regular; }
svg.m3.m3-svg-icon > text.m3-Rounded {
  font-family: Material-Symbols-Rounded-Regular; }
svg.m3.m3-svg-icon > text.m3-Sharp {
  font-family: Material-Symbols-Sharp-Regular; }

svg.m3.m3-badge {
  position: absolute;
  background-color: var(--md-sys-color-error); }
  svg.m3.m3-badge.disable-value {
    padding: 0;
    height: 6px;
    width: 6px;
    border-radius: 3px; }
    svg.m3.m3-badge.disable-value > text {
      display: none; }
  svg.m3.m3-badge {
    border-radius: 8px;
    height: 16px; }
  svg.m3.m3-badge > text {
    fill: var(--md-sys-color-on-error);
    font-size: var(--md-sys-typescale-label-small-font-size);
    font-weight: var(--md-sys-typescale-label-small-font-weight);
    line-height: var(--md-sys-typescale-label-small-line-height);
    font-optical-sizing: none;
    alignment-baseline: central;
    text-anchor: middle;
    display: flex;
    align-items: center;
    justify-content: center; }

@font-face {
  font-family: Material-Symbols-Rounded-Regular;
  src: url("./font/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].ttf");
  src: url("./font/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].woff2") format("woff2"); }
@font-face {
  font-family: Material-Symbols-Outlined-Regular;
  src: url("./font/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].ttf");
  src: url("./font/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].woff2") format("woff2"); }
@font-face {
  font-family: Material-Symbols-Sharp-Regular;
  src: url("./font/MaterialSymbolsSharp[FILL,GRAD,opsz,wght].ttf");
  src: url("./font/MaterialSymbolsSharp[FILL,GRAD,opsz,wght].woff2") format("woff2"); }
@font-face {
  font-family: Roboto;
  font-face-name: Thin;
  font-weight: 100;
  src: url("./font/Roboto-Thin.ttf"); }
@font-face {
  font-family: Roboto;
  font-face-name: Light;
  font-weight: 300;
  src: url("./font/Roboto-Light.ttf"); }
@font-face {
  font-family: Roboto;
  font-face-name: Regular;
  font-weight: 400;
  src: url("./font/Roboto-Regular.ttf"); }
@font-face {
  font-family: Roboto;
  font-face-name: Medium;
  font-weight: 500;
  src: url("./font/Roboto-Medium.ttf"); }
@font-face {
  font-family: Roboto;
  font-face-name: Bold;
  font-weight: 700;
  src: url("./font/Roboto-Bold.ttf"); }
@font-face {
  font-family: Roboto;
  font-face-name: Black;
  font-weight: 900;
  src: url("./font/Roboto-Black.ttf"); }
.m3.m3-ripple-domain {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 20;
  pointer-events: none; }

.m3.ripple {
  position: absolute;
  overflow: hidden;
  pointer-events: none;
  transform-origin: center;
  opacity: 0;
  z-index: 20;
  aspect-ratio: 1;
  border-radius: 50%;
  animation-name: rippleAppearanceAnimation;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  animation-duration: 0.55s;
  transition: opacity, background, background-color, 0.55s cubic-bezier(0.4, 0, 0.2, 1); }
  .m3.ripple.visible {
    opacity: 1 !important; }

@keyframes rippleAppearanceAnimation {
  0% {
    transform: scale3d(0, 0, 0); }
  100% {
    transform: scale3d(1, 1, 1); } }
hr.m3.m3-divider {
  border: none;
  outline: 0.5px solid var(--md-sys-color-outline-variant);
  position: relative;
  margin: 0; }
  hr.m3.m3-divider.vertical {
    height: auto;
    writing-mode: vertical-lr; }
    hr.m3.m3-divider.vertical.inset {
      margin-inline-start: 16px; }
    hr.m3.m3-divider.vertical.middle-inset {
      margin-inline: 16px; }
  hr.m3.m3-divider.horizontal {
    width: auto;
    writing-mode: horizontal-tb; }
    hr.m3.m3-divider.horizontal.inset {
      margin-inline-start: 16px; }
    hr.m3.m3-divider.horizontal.middle-inset {
      margin-inline: 16px; }

div.m3.m3-container {
  display: block;
  border-radius: 12px;
  position: relative;
  contain: content;
  transition: box-shadow 0.2s cubic-bezier(0.2, 0, 0, 1); }
  div.m3.m3-container.m3-container-filled {
    background-color: var(--md-sys-color-surface-container-highest); }
  div.m3.m3-container.m3-container-outlined {
    background-color: var(--md-sys-color-surface);
    outline-offset: -1px;
    outline: 1px solid var(--md-sys-color-outline-variant); }
  div.m3.m3-container.m3-container-elevated {
    box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    background-color: var(--md-sys-color-surface-container-low); }

button.m3.m3-fab {
  transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important; }
  button.m3.m3-fab > span.m3-icon {
    font-family: Material-Symbols-Outlined-Regular, sans-serif; }
  button.m3.m3-fab.m3 {
    contain: content;
    box-sizing: border-box;
    display: inline-flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-align: center;
    border: none;
    gap: 12px; }
  button.m3.m3-fab::before {
    transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
    content: "";
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: absolute;
    background: #00000000; }
  button.m3.m3-fab.surface {
    background-color: var(--md-sys-color-surface-container-high);
    color: var(--md-sys-color-primary); }
    button.m3.m3-fab.surface:not(.without-elevation) {
      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15); }
    button.m3.m3-fab.surface > svg.m3-svg-icon {
      fill: var(--md-sys-color-primary); }
    button.m3.m3-fab.surface > .m3.m3-ripple-domain > .m3.ripple {
      background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); }
  button.m3.m3-fab.primary {
    background-color: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container); }
    button.m3.m3-fab.primary:not(.without-elevation) {
      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15); }
    button.m3.m3-fab.primary > svg.m3-svg-icon {
      fill: var(--md-sys-color-on-primary-container); }
    button.m3.m3-fab.primary > .m3.m3-ripple-domain > .m3.ripple {
      background: color-mix(in srgb, var(--md-sys-color-on-primary-container) 12%, transparent); }
  button.m3.m3-fab.secondary {
    background-color: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container); }
    button.m3.m3-fab.secondary:not(.without-elevation) {
      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15); }
    button.m3.m3-fab.secondary > svg.m3-svg-icon {
      fill: var(--md-sys-color-on-secondary-container); }
    button.m3.m3-fab.secondary > .m3.m3-ripple-domain > .m3.ripple {
      background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent); }
  button.m3.m3-fab.tertiary {
    background-color: var(--md-sys-color-tertiary-container);
    color: var(--md-sys-color-on-tertiary-container); }
    button.m3.m3-fab.tertiary:not(.without-elevation) {
      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15); }
    button.m3.m3-fab.tertiary > svg.m3-svg-icon {
      fill: var(--md-sys-color-on-tertiary-container); }
    button.m3.m3-fab.tertiary > .m3.m3-ripple-domain > .m3.ripple {
      background: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 12%, transparent); }
  button.m3.m3-fab.m3-small-fab {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    padding: 11px;
    font-size: 24px; }
  button.m3.m3-fab.m3-default-fab {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    padding: 19px;
    font-size: 24px; }
  button.m3.m3-fab.m3-large-fab {
    width: 96px;
    height: 96px;
    border-radius: 28px;
    padding: 34.5px;
    font-size: 36px; }
  button.m3.m3-fab.m3-extended-fab {
    width: auto;
    height: 56px;
    border-radius: 16px;
    padding: 19px;
    font-size: 24px; }
  button.m3.m3-fab:not(.without-elevation):is(.surface, .primary, .secondary, .tertiary):hover {
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3), 0 6px 10px 4px rgba(0, 0, 0, 0.15); }
  button.m3.m3-fab:not(.without-elevation):is(.surface, .primary, .secondary, .tertiary):active {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15) !important; }
  button.m3.m3-fab:hover.surface::before {
    background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent); }
  button.m3.m3-fab:hover.primary::before {
    background-color: color-mix(in srgb, var(--md-sys-color-on-primary-container) 8%, transparent); }
  button.m3.m3-fab:hover.secondary::before {
    background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent); }
  button.m3.m3-fab:hover.tertiary::before {
    background-color: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 8%, transparent); }
  button.m3.m3-fab:focus-visible.surface::before {
    background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); }
  button.m3.m3-fab:focus-visible.primary::before {
    background-color: color-mix(in srgb, var(--md-sys-color-on-primary-container) 12%, transparent); }
  button.m3.m3-fab:focus-visible.secondary::before {
    background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent); }
  button.m3.m3-fab:focus-visible.tertiary::before {
    background-color: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 12%, transparent); }

input[type="button"].test-button {
  color: white; }
  input[type="button"].test-button:not(:checked) {
    background-color: green; }
  input[type="button"].test-button:checked {
    background-color: blue; }

button:not(.m3-fab, .m3-icon-button) {
  width: min-content;
  height: min-content;
  max-height: 40px;
  box-sizing: border-box;
  white-space: nowrap;
  font-size: var(--md-sys-typescale-label-large-font-size);
  font-weight: var(--md-sys-typescale-label-large-font-weight);
  line-height: var(--md-sys-typescale-label-large-line-height);
  font-family: var(--md-sys-typescale-label-large-font-family-name);
  transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important; }
  button:not(.m3-fab, .m3-icon-button).m3 {
    gap: 8px;
    border: none;
    contain: content;
    text-align: center;
    padding: 10px 24px;
    align-items: center;
    flex-direction: row;
    display: inline-flex;
    border-radius: 100px;
    box-sizing: border-box;
    justify-content: center; }
  button:not(.m3-fab, .m3-icon-button).filled {
    background-color: var(--md-sys-color-primary); }
    button:not(.m3-fab, .m3-icon-button).filled, button:not(.m3-fab, .m3-icon-button).filled > svg.m3-svg-icon {
      fill: var(--md-sys-color-on-primary);
      color: var(--md-sys-color-on-primary); }
  button:not(.m3-fab, .m3-icon-button).outlined {
    outline-offset: -1px;
    background-color: #00000000;
    color: var(--md-sys-color-primary);
    outline: 1px solid var(--md-sys-color-outline) !important; }
    button:not(.m3-fab, .m3-icon-button).outlined > svg.m3-svg-icon {
      fill: var(--md-sys-color-primary); }
  button:not(.m3-fab, .m3-icon-button).text {
    background-color: #00000000;
    padding: 10px 12px !important;
    color: var(--md-sys-color-primary); }
    button:not(.m3-fab, .m3-icon-button).text > svg.m3-svg-icon {
      fill: var(--md-sys-color-primary); }
  button:not(.m3-fab, .m3-icon-button).elevated {
    box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    color: var(--md-sys-color-primary);
    background-color: var(--md-sys-color-surface-container-low); }
    button:not(.m3-fab, .m3-icon-button).elevated > svg.m3-svg-icon {
      fill: var(--md-sys-color-primary); }
  button:not(.m3-fab, .m3-icon-button).tonal {
    color: var(--md-sys-color-on-secondary-container);
    background-color: var(--md-sys-color-secondary-container); }
    button:not(.m3-fab, .m3-icon-button).tonal > svg.m3-svg-icon {
      fill: var(--md-sys-color-on-secondary-container); }
  button:not(.m3-fab, .m3-icon-button)::before {
    transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
    content: "";
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: absolute;
    background: #00000000; }
  button:not(.m3-fab, .m3-icon-button).filled > .m3.m3-ripple-domain > .m3.ripple {
    background: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent); }
  button:not(.m3-fab, .m3-icon-button):is(.outlined, .text, .elevated) > .m3.m3-ripple-domain > .m3.ripple {
    background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); }
  button:not(.m3-fab, .m3-icon-button).tonal > .m3.m3-ripple-domain > .m3.ripple {
    background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent); }
  button:not(.m3-fab, .m3-icon-button):active:is(.filled, .tonal) {
    box-shadow: none !important; }
  button:not(.m3-fab, .m3-icon-button):active.elevated {
    box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3) !important; }
  button:not(.m3-fab, .m3-icon-button):active.tonal::before {
    background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent); }
  button:not(.m3-fab, .m3-icon-button):focus-visible.outlined {
    border-color: var(--md-sys-color-primary) !important; }
  button:not(.m3-fab, .m3-icon-button):focus-visible.filled::before {
    background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent); }
  button:not(.m3-fab, .m3-icon-button):focus-visible:is(.outlined, .text, .elevated)::before {
    background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); }
  button:not(.m3-fab, .m3-icon-button):focus-visible.tonal::before {
    background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent); }
  button:not(.m3-fab, .m3-icon-button):hover:is(.filled, .tonal) {
    box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); }
  button:not(.m3-fab, .m3-icon-button):hover.elevated {
    box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); }
  button:not(.m3-fab, .m3-icon-button):hover.filled::before {
    background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 8%, transparent); }
  button:not(.m3-fab, .m3-icon-button):hover:is(.outlined, .text, .elevated)::before {
    background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent); }
  button:not(.m3-fab, .m3-icon-button):hover.tonal::before {
    background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent); }
  button:not(.m3-fab, .m3-icon-button):disabled {
    pointer-events: none; }
    button:not(.m3-fab, .m3-icon-button):disabled:is(.filled, .elevated, .tonal, .outlined, .text) {
      color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent); }
    button:not(.m3-fab, .m3-icon-button):disabled:is(.filled, .elevated, .tonal) {
      background: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent); }
    button:not(.m3-fab, .m3-icon-button):disabled.elevated {
      box-shadow: none; }
    button:not(.m3-fab, .m3-icon-button):disabled.outlined {
      outline: 1px solid color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) !important; }

button.m3.m3-icon-button {
  transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
  contain: content;
  border-radius: 50%;
  position: relative;
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border: none;
  padding: 0; }
  button.m3.m3-icon-button::before {
    transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
    content: "";
    width: 100%;
    height: 100%;
    position: absolute; }
  button.m3.m3-icon-button > span.m3-icon {
    z-index: 25;
    font-size: 2em;
    font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 48; }
  button.m3.m3-icon-button.default {
    fill: var(--md-sys-color-on-surface-variant);
    background-color: #00000000; }
  button.m3.m3-icon-button.default:disabled, button.m3.m3-icon-button.default.selected:disabled, button.m3.m3-icon-button.default.selected.toggled:disabled {
    fill: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent);
    background-color: #00000000; }
  button.m3.m3-icon-button.default.selected.toggled {
    fill: var(--md-sys-color-primary); }
  button.m3.m3-icon-button.filled {
    fill: var(--md-sys-color-on-primary);
    background-color: var(--md-sys-color-primary); }
  button.m3.m3-icon-button.filled.toggled {
    fill: var(--md-sys-color-primary);
    background-color: var(--md-sys-color-surface-container-highest); }
  button.m3.m3-icon-button.filled.selected.toggled {
    fill: var(--md-sys-color-on-primary);
    background-color: var(--md-sys-color-primary); }
  button.m3.m3-icon-button.tonal.toggled {
    fill: var(--md-sys-color-on-surface-variant);
    background-color: var(--md-sys-color-surface-container-highest); }
  button.m3.m3-icon-button.tonal.selected.toggled, button.m3.m3-icon-button.tonal {
    fill: var(--md-sys-color-on-secondary-container);
    background-color: var(--md-sys-color-secondary-container); }
  button.m3.m3-icon-button:is(.tonal, .filled, .toggled.selected):disabled {
    fill: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
    background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent); }
  button.m3.m3-icon-button.outlined {
    border: 1px solid var(--md-sys-color-outline);
    fill: var(--md-sys-color-on-surface-variant);
    background-color: #00000000; }
  button.m3.m3-icon-button.outlined:disabled {
    border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 12%, transparent);
    fill: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent);
    background-color: #00000000; }
  button.m3.m3-icon-button.outlined.toggled.selected:disabled {
    border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 0%, transparent);
    fill: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
    background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent); }
  button.m3.m3-icon-button.outlined.selected.toggled {
    border: 1px solid #00000000;
    background-color: var(--md-sys-color-inverse-surface);
    fill: var(--md-sys-color-inverse-on-surface); }
  button.m3.m3-icon-button.filled:not(:disabled) > .m3.m3-ripple-domain > .m3.ripple, button.m3.m3-icon-button.filled:not(:disabled).selected.toggled > .m3.m3-ripple-domain > .m3.ripple {
    background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent); }
  button.m3.m3-icon-button.filled:not(:disabled).toggled > .m3.m3-ripple-domain > .m3.ripple {
    background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); }
  button.m3.m3-icon-button:is(.outlined, .default):not(:disabled) > .m3.m3-ripple-domain > .m3.ripple {
    background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent); }
  button.m3.m3-icon-button:is(.outlined, .default):not(:disabled):not(.outlined).toggled.selected > .m3.m3-ripple-domain > .m3.ripple {
    background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); }
  button.m3.m3-icon-button:is(.outlined, .default):not(:disabled):not(.default).toggled.selected > .m3.m3-ripple-domain > .m3.ripple {
    background-color: color-mix(in srgb, var(--md-sys-color-inverse-on-surface) 12%, transparent); }
  button.m3.m3-icon-button.tonal:not(:disabled) > .m3.m3-ripple-domain > .m3.ripple, button.m3.m3-icon-button.tonal:not(:disabled).selected.toggled > .m3.m3-ripple-domain > .m3.ripple {
    background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent); }
  button.m3.m3-icon-button.tonal:not(:disabled).toggled > .m3.m3-ripple-domain > .m3.ripple {
    background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent); }
  button.m3.m3-icon-button:hover:not(:disabled):is(.default, .outlined)::before {
    background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 8%, transparent); }
  button.m3.m3-icon-button:hover:not(:disabled).filled::before, button.m3.m3-icon-button:hover:not(:disabled).filled.toggled.selected::before {
    background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 8%, transparent); }
  button.m3.m3-icon-button:hover:not(:disabled).filled.toggled::before {
    background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent); }
  button.m3.m3-icon-button:hover:not(:disabled).tonal::before, button.m3.m3-icon-button:hover:not(:disabled).tonal.toggled.selected::before {
    background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent); }
  button.m3.m3-icon-button:hover:not(:disabled).tonal.toggled::before {
    background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 8%, transparent); }
  button.m3.m3-icon-button:focus-visible:not(:disabled):is(.default, .outlined)::before {
    background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent); }
  button.m3.m3-icon-button:focus-visible:not(:disabled).filled::before, button.m3.m3-icon-button:focus-visible:not(:disabled).filled.toggled.selected::before {
    background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent); }
  button.m3.m3-icon-button:focus-visible:not(:disabled).filled.toggled::before {
    background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); }
  button.m3.m3-icon-button:focus-visible:not(:disabled).tonal::before, button.m3.m3-icon-button:focus-visible:not(:disabled).tonal.toggled.selected::before {
    background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent); }
  button.m3.m3-icon-button:focus-visible:not(:disabled).tonal.toggled::before {
    background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent); }

div.m3.m3-segmented-buttons {
  padding: 0;
  height: 40px;
  display: flex;
  flex-direction: row;
  border-radius: 20px;
  box-sizing: border-box;
  border-collapse: collapse; }
  div.m3.m3-segmented-buttons > button.m3.m3-button-segment {
    height: 40px;
    display: flex;
    min-width: 108px;
    border-radius: 0;
    width: max-content;
    padding-inline: 10px;
    margin: 0 -0.5px 0 -0.5px;
    background-color: transparent;
    border: 1px solid var(--md-sys-color-outline); }
    div.m3.m3-segmented-buttons > button.m3.m3-button-segment:first-child {
      border-radius: 20px 0 0 20px; }
    div.m3.m3-segmented-buttons > button.m3.m3-button-segment:last-child {
      border-radius: 0 20px 20px 0; }
    div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span {
      color: var(--md-sys-color-on-surface); }
    div.m3.m3-segmented-buttons > button.m3.m3-button-segment > svg > text {
      fill: var(--md-sys-color-on-surface); }
    div.m3.m3-segmented-buttons > button.m3.m3-button-segment:disabled {
      border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 12%, transparent); }
      div.m3.m3-segmented-buttons > button.m3.m3-button-segment:disabled > * {
        opacity: 38%; }
    div.m3.m3-segmented-buttons > button.m3.m3-button-segment.selected {
      background-color: var(--md-sys-color-secondary-container); }
      div.m3.m3-segmented-buttons > button.m3.m3-button-segment.selected > span {
        color: var(--md-sys-color-on-secondary-container); }
        div.m3.m3-segmented-buttons > button.m3.m3-button-segment.selected > span > text {
          fill: var(--md-sys-color-on-secondary-container); }
    div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3.m3-button-segment-state-layer {
      position: absolute;
      width: 100%;
      height: 100%; }
    div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3.m3-button-segment-state-layer, div.m3.m3-segmented-buttons > button.m3.m3-button-segment span.m3.m3-ripple-domain {
      transition: 0.2s cubic-bezier(0.2, 0, 0, 1); }
    div.m3.m3-segmented-buttons > button.m3.m3-button-segment:hover > span.m3.m3-button-segment-state-layer {
      background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent); }
    div.m3.m3-segmented-buttons > button.m3.m3-button-segment:is(&:active, &:focus-visible) > span.m3.m3-button-segment-state-layer {
      background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent); }
    div.m3.m3-segmented-buttons > button.m3.m3-button-segment:active > span.m3.m3-ripple-domain > span.m3.ripple {
      background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent); }

div.m3.m3-radio {
  width: 20px;
  height: 20px;
  align-items: center;
  display: inline-flex;
  justify-content: center; }
  div.m3.m3-radio > span.m3-checkbox-ripple-layer, div.m3.m3-radio span.m3.m3-radio-state-layer {
    z-index: 5; }
  div.m3.m3-radio > span.m3.m3-radio-state-layer {
    width: 40px;
    aspect-ratio: 1;
    border-radius: 50%;
    position: absolute;
    pointer-events: none;
    transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1); }
  div.m3.m3-radio > input[type="radio"].m3.m3-radio {
    margin: 0;
    width: 20px;
    height: 20px;
    aspect-ratio: 1;
    cursor: pointer;
    appearance: none;
    position: absolute; }
    div.m3.m3-radio > input[type="radio"].m3.m3-radio:not(:disabled):checked:hover + span.m3.m3-radio-state-layer {
      background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent); }
    div.m3.m3-radio > input[type="radio"].m3.m3-radio:not(:disabled):is(:checked:active, :indeterminate:active) + span.m3.m3-radio-state-layer {
      background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); }
      div.m3.m3-radio > input[type="radio"].m3.m3-radio:not(:disabled):is(:checked:active, :indeterminate:active) + span.m3.m3-radio-state-layer ~ span.m3-ripple-domain > .m3.ripple {
        background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 20%, transparent); }
    div.m3.m3-radio > input[type="radio"].m3.m3-radio:not(:disabled):hover + span.m3.m3-radio-state-layer {
      background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); }
    div.m3.m3-radio > input[type="radio"].m3.m3-radio:not(:disabled):active + span.m3.m3-radio-state-layer {
      background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent); }
      div.m3.m3-radio > input[type="radio"].m3.m3-radio:not(:disabled):active + span.m3.m3-radio-state-layer ~ span.m3-ripple-domain > .m3.ripple {
        background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent); }
    div.m3.m3-radio > input[type="radio"].m3.m3-radio:disabled:is(:not(:checked), &:checked) ~ svg > circle.m3-radio-outline {
      stroke-opacity: 38%;
      stroke: var(--md-sys-color-on-surface); }
    div.m3.m3-radio > input[type="radio"].m3.m3-radio:disabled:checked ~ svg > circle.m3-radio-state {
      fill-opacity: 38%;
      fill: var(--md-sys-color-on-surface); }
    div.m3.m3-radio > input[type="radio"].m3.m3-radio:not(:checked) ~ svg > circle.m3-radio-outline {
      stroke: var(--md-sys-color-on-surface-variant); }
    div.m3.m3-radio > input[type="radio"].m3.m3-radio:not(:checked) ~ svg > circle.m3-radio-state {
      fill-opacity: 0;
      fill: var(--md-sys-color-primary); }
    div.m3.m3-radio > input[type="radio"].m3.m3-radio:checked ~ svg > circle.m3-radio-outline {
      stroke: var(--md-sys-color-primary); }
    div.m3.m3-radio > input[type="radio"].m3.m3-radio:checked ~ svg > circle.m3-radio-state {
      fill-opacity: 1;
      fill: var(--md-sys-color-primary); }
  div.m3.m3-radio svg {
    margin: 0;
    width: 20px;
    z-index: 10;
    border-radius: 50%;
    pointer-events: none;
    aspect-ratio: inherit; }
    div.m3.m3-radio svg > circle {
      transition: fill, stroke, 0.2s cubic-bezier(0.2, 0, 0, 1); }
      div.m3.m3-radio svg > circle.m3-radio-outline {
        r: 9px;
        fill: black;
        fill-opacity: 0;
        stroke-width: 2px;
        stroke: var(--md-sys-color-on-surface-variant); }
      div.m3.m3-radio svg > circle.m3-radio-state {
        r: 5px; }

input[type="range"].m3.m3-slider {
  height: 4px;
  appearance: none;
  border-radius: 2px;
  background-color: var(--md-sys-color-surface-container-highest);
  overflow: visible; }
  input[type="range"].m3.m3-slider::-webkit-slider-container {
    margin-inline: -8px; }
  input[type="range"].m3.m3-slider::-webkit-slider-thumb {
    box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    width: 20px;
    aspect-ratio: 1;
    appearance: none;
    overflow: visible;
    border-radius: 50%;
    box-sizing: border-box;
    background: var(--md-sys-color-primary); }
    input[type="range"].m3.m3-slider::-webkit-slider-thumb::after {
      width: 40px;
      aspect-ratio: 1;
      background-color: transparent; }
    input[type="range"].m3.m3-slider::-webkit-slider-thumb:hover {
      outline: 10px solid color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent); }

div.m3.m3-switch {
  margin: 4px;
  gap: 20px;
  box-sizing: content-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 32px; }
  div.m3.m3-switch > svg {
    overflow: visible;
    transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    width: 52px;
    height: 32px; }
    div.m3.m3-switch > svg > g {
      transform: translate(11.5%, 81%);
      transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
      div.m3.m3-switch > svg > g > text {
        font-family: Material-Symbols-Outlined-Regular;
        font-size: 20px; }
    div.m3.m3-switch > svg > circle.m3.m3-switch-handler-state-layer, div.m3.m3-switch > svg > circle.m3.m3-switch-handler {
      transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      cy: 50%;
      cx: 16px; }
    div.m3.m3-switch > svg > circle.m3.m3-switch-handler-state-layer {
      r: 20px;
      fill-opacity: 0; }
    div.m3.m3-switch > svg > circle.m3.m3-switch-handler {
      r: 8px; }
    div.m3.m3-switch > svg > rect.m3.m3-switch-track {
      transition: fill 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      stroke-width: 2px;
      border-radius: 16px;
      rx: 15px;
      width: 50px;
      height: 30px; }
  div.m3.m3-switch > input.m3 {
    cursor: pointer;
    appearance: none;
    opacity: 0 !important;
    margin: 0;
    width: 52px;
    height: 32px;
    position: absolute; }
    div.m3.m3-switch > input.m3:disabled {
      cursor: not-allowed; }
    div.m3.m3-switch > input.m3:not(:checked, :disabled) + svg > circle.m3.m3-switch-handler {
      fill: var(--md-sys-color-outline); }
    div.m3.m3-switch > input.m3:checked:not(:disabled) + svg > g {
      transform: translate(50%, 81%); }
    div.m3.m3-switch > input.m3:checked:not(:disabled) + svg > circle.m3.m3-switch-handler {
      fill: var(--md-sys-color-on-primary); }
    div.m3.m3-switch > input.m3:not(:disabled) + svg > g > text.m3.m3-icon-unchecked {
      fill: var(--md-sys-color-on-primary); }
    div.m3.m3-switch > input.m3:not(:disabled) + svg > g > text.m3.m3-icon-checked {
      fill: var(--md-sys-color-on-primary-container); }
    div.m3.m3-switch > input.m3:checked:disabled + svg > circle.m3.m3-switch-handler {
      fill: var(--md-sys-color-surface); }
    div.m3.m3-switch > input.m3:checked + svg > circle.m3.m3-switch-handler, div.m3.m3-switch > input.m3 + svg:has(text.m3.m3-icon-unchecked) > circle.m3.m3-switch-handler {
      r: 12px; }
    div.m3.m3-switch > input.m3:checked + svg > g > text.m3.m3-icon-unchecked {
      opacity: 0; }
    div.m3.m3-switch > input.m3:checked + svg > circle.m3:is(.m3-switch-handler, .m3-switch-handler-state-layer) {
      cx: calc(100% - 16px); }
    div.m3.m3-switch > input.m3:not(:checked) + svg > g > text.m3.m3-icon-checked {
      opacity: 0; }
    div.m3.m3-switch > input.m3:is(&:checked, &):not(:disabled):active + svg > circle.m3.m3-switch-handler {
      r: 14px; }
    div.m3.m3-switch > input.m3:not(:checked):disabled + svg > circle.m3.m3-switch-handler {
      fill: var(--md-sys-color-on-surface);
      fill-opacity: 38%; }
    div.m3.m3-switch > input.m3:hover:not(:disabled):checked + svg > circle.m3.m3-switch-handler {
      fill: var(--md-sys-color-primary-container); }
    div.m3.m3-switch > input.m3:hover:not(:disabled):checked + svg > circle.m3.m3-switch-handler-state-layer {
      fill: var(--md-sys-color-primary);
      fill-opacity: 8%; }
    div.m3.m3-switch > input.m3:hover:not(:disabled):not(:checked) + svg > circle.m3.m3-switch-handler {
      fill: var(--md-sys-color-on-surface-variant); }
    div.m3.m3-switch > input.m3:hover:not(:disabled):not(:checked) + svg > circle.m3.m3-switch-handler-state-layer {
      fill: var(--md-sys-color-on-surface);
      fill-opacity: 8%; }
    div.m3.m3-switch > input.m3:active:not(:disabled):checked + svg > circle.m3.m3-switch-handler-state-layer {
      fill: var(--md-sys-color-primary);
      fill-opacity: 12%; }
    div.m3.m3-switch > input.m3:active:not(:disabled):not(:checked) + svg > circle.m3.m3-switch-handler-state-layer {
      fill: var(--md-sys-color-on-surface);
      fill-opacity: 12%; }
    div.m3.m3-switch > input.m3:is(:checked, :checked:disabled) + svg > rect.m3.m3-switch-track {
      rx: 16px;
      width: 52px;
      height: 32px;
      stroke-width: 0; }
    div.m3.m3-switch > input.m3:is(&:not(:checked), &:not(:checked):disabled) + svg > rect.m3.m3-switch-track {
      x: 1px;
      y: 1px; }
    div.m3.m3-switch > input.m3:not(:checked) + svg > rect.m3.m3-switch-track {
      stroke: var(--md-sys-color-outline);
      fill: var(--md-sys-color-surface-container-highest); }
    div.m3.m3-switch > input.m3:checked + svg > rect.m3.m3-switch-track {
      stroke: var(--md-sys-color-primary);
      fill: var(--md-sys-color-primary); }
    div.m3.m3-switch > input.m3:disabled + svg > g > text.m3 {
      fill: color-mix(in srgb, var(--md-sys-color-surface-container-highest) 38%, transparent); }
    div.m3.m3-switch > input.m3:disabled + svg > rect.m3.m3-switch-track {
      stroke: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
      fill: color-mix(in srgb, var(--md-sys-color-surface-variant) 12%, transparent); }
    div.m3.m3-switch > input.m3:checked:disabled + svg > g > text.m3 {
      transform: translateX(38.5%);
      fill: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent); }
    div.m3.m3-switch > input.m3:checked:disabled + svg > rect.m3.m3-switch-track {
      stroke: color-mix(in srgb, var(--md-sys-color-on-surface) 0%, transparent);
      fill: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent); }

label.m3.m3-checkbox-label {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  width: 18px;
  height: 18px; }
  label.m3.m3-checkbox-label > span.m3.m3-checkbox-state-layer {
    position: absolute;
    width: 2.5rem;
    aspect-ratio: inherit;
    border-radius: 50%;
    transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1); }

span.m3.m3-checkbox-ripple-layer {
  z-index: 20;
  width: 2.5rem;
  height: 2.5rem;
  contain: content;
  border-radius: 50%;
  position: absolute; }

input[type="checkbox"].m3.m3-checkbox {
  margin: 0;
  z-index: 10;
  display: flex;
  width: 1.125rem;
  height: 1.125rem;
  appearance: none;
  position: absolute;
  align-items: center;
  border-radius: 0.14rem;
  box-sizing: content-box;
  justify-content: center;
  transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1); }
  input[type="checkbox"].m3.m3-checkbox ~ span.m3-checkbox-state {
    transition: color 0.2s cubic-bezier(0.2, 0, 0, 1);
    color: var(--md-sys-color-on-surface-variant); }
  input[type="checkbox"].m3.m3-checkbox:is(:user-invalid:is(:checked, :indeterminate), .m3.m3-error:is(:checked, :indeterminate)) {
    background: var(--md-sys-color-on-error); }
    input[type="checkbox"].m3.m3-checkbox:is(:user-invalid:is(:checked, :indeterminate), .m3.m3-error:is(:checked, :indeterminate)) ~ span.m3-checkbox-state {
      color: var(--md-sys-color-error); }
  input[type="checkbox"].m3.m3-checkbox:is(:user-invalid, .m3.m3-error):not(:checked) ~ span.m3-checkbox-state {
    color: var(--md-sys-color-error); }
  input[type="checkbox"].m3.m3-checkbox:is(:checked:is(:hover, &):not(.m3.m3-error, :disabled), :indeterminate:is(:hover, &):not(.m3.m3-error, :disabled)) {
    background: var(--md-sys-color-on-primary); }
    input[type="checkbox"].m3.m3-checkbox:is(:checked:is(:hover, &):not(.m3.m3-error, :disabled), :indeterminate:is(:hover, &):not(.m3.m3-error, :disabled)) ~ span.m3-checkbox-state {
      color: var(--md-sys-color-primary); }
  input[type="checkbox"].m3.m3-checkbox:not(:checked, :indeterminate, :disabled, :user-invalid):hover ~ span.m3-checkbox-state {
    color: var(--md-sys-color-on-surface); }
  input[type="checkbox"].m3.m3-checkbox:disabled ~ *:is(:hover, &, :checked) {
    opacity: 38%; }
  input[type="checkbox"].m3.m3-checkbox ~ span.m3-checkbox-state {
    pointer-events: none;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 24px;
    font-family: Material-Symbols-Outlined-Regular, sans-serif;
    font-weight: 700;
    font-size: 24px;
    font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; }
  input[type="checkbox"].m3.m3-checkbox:not(:indeterminate, :checked) ~ span.m3-checkbox-state::before {
    content: "check_box_outline_blank"; }
  input[type="checkbox"].m3.m3-checkbox:indeterminate ~ span.m3-checkbox-state::before {
    content: "indeterminate_check_box"; }
  input[type="checkbox"].m3.m3-checkbox:checked ~ span.m3-checkbox-state::before {
    content: "check_box"; }
  input[type="checkbox"].m3.m3-checkbox:not(:disabled):is(:user-invalid:is(:hover, :indeterminate:hover), .m3.m3-error:hover) ~ span.m3.m3-checkbox-state-layer {
    background-color: color-mix(in srgb, var(--md-sys-color-error) 8%, transparent); }
  input[type="checkbox"].m3.m3-checkbox:not(:disabled):is(:user-invalid:is(:active, :indeterminate:active), .m3.m3-error:active) ~ span.m3.m3-checkbox-state-layer {
    background-color: color-mix(in srgb, var(--md-sys-color-error) 12%, transparent); }
    input[type="checkbox"].m3.m3-checkbox:not(:disabled):is(:user-invalid:is(:active, :indeterminate:active), .m3.m3-error:active) ~ span.m3.m3-checkbox-state-layer ~ span.m3-ripple-domain > .m3.ripple {
      background-color: color-mix(in srgb, var(--md-sys-color-error) 20%, transparent); }
  input[type="checkbox"].m3.m3-checkbox:not(:disabled):is(:checked:hover, :indeterminate:hover) ~ span.m3.m3-checkbox-state-layer {
    background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent); }
  input[type="checkbox"].m3.m3-checkbox:not(:disabled):is(:checked:active, :indeterminate:active) ~ span.m3.m3-checkbox-state-layer {
    background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); }
    input[type="checkbox"].m3.m3-checkbox:not(:disabled):is(:checked:active, :indeterminate:active) ~ span.m3.m3-checkbox-state-layer ~ span.m3-ripple-domain > .m3.ripple {
      background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 20%, transparent); }
  input[type="checkbox"].m3.m3-checkbox:not(:disabled):hover ~ span.m3-checkbox-state-layer {
    background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); }
  input[type="checkbox"].m3.m3-checkbox:not(:disabled):active ~ span.m3.m3-checkbox-state-layer {
    background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent); }
    input[type="checkbox"].m3.m3-checkbox:not(:disabled):active ~ span.m3.m3-checkbox-state-layer ~ span.m3-ripple-domain > .m3.ripple {
      background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent); }

div.m3.m3-text-field {
  position: relative;
  display: flex;
  justify-content: center;
  flex-direction: column;
  box-sizing: border-box;
  margin: 0; }
  div.m3.m3-text-field span.m3-icon.icon-before {
    align-self: start; }
  div.m3.m3-text-field:is(.filled, .outlined) > input::placeholder, div.m3.m3-text-field > input, div.m3.m3-text-field > label {
    line-height: var(--md-sys-typescale-body-large-line-height);
    font-size: var(--md-sys-typescale-body-large-font-size); }
  div.m3.m3-text-field + span.m3-text-field-supporting-text {
    display: flex;
    line-height: var(--md-sys-typescale-body-small-line-height);
    font-size: var(--md-sys-typescale-body-small-font-size);
    color: var(--md-sys-color-on-surface-variant);
    margin: 4px 16px 2px 16px; }
  div.m3.m3-text-field > label {
    padding-inline: 4px;
    pointer-events: none;
    transform: translate(16px, 0);
    transition: 0.2s cubic-bezier(0.2, 0, 0, 1);
    position: absolute; }
  div.m3.m3-text-field > input {
    transition: 0.2s cubic-bezier(0.2, 0, 0, 1);
    background-color: transparent;
    border: none; }
  div.m3.m3-text-field > span.m3-icon {
    position: absolute;
    align-self: end;
    margin: 12px;
    width: 24px;
    line-height: 24px;
    font-size: 24px;
    display: inherit;
    align-items: center;
    justify-content: inherit;
    cursor: pointer;
    color: var(--md-sys-color-on-surface-variant);
    font-family: Material-Symbols-Outlined-Regular, serif; }
  div.m3.m3-text-field > span.m3-text-field-state-layer {
    width: 100%;
    height: 100%;
    pointer-events: none;
    position: absolute; }
  div.m3.m3-text-field > input, div.m3.m3-text-field > label {
    color: var(--md-sys-color-on-surface); }
  div.m3.m3-text-field:is(.filled, .outlined) > input::placeholder {
    color: var(--md-sys-color-on-surface-variant); }
  div.m3.m3-text-field:is(.filled, .outlined) > input:focus-visible {
    outline: none;
    caret-color: var(--md-sys-color-primary); }
  div.m3.m3-text-field:is(.filled, .outlined):has(input:disabled) > *, div.m3.m3-text-field:is(.filled, .outlined):has(input:disabled) + span.m3-text-field-supporting-text {
    opacity: 38%; }
  div.m3.m3-text-field.filled {
    contain: content;
    border-radius: 4px 4px 0 0; }
    div.m3.m3-text-field.filled > input {
      display: inline-flex;
      align-items: center;
      box-sizing: border-box;
      border-radius: 4px 4px 0 0;
      background-color: var(--md-sys-color-surface-container-highest);
      box-shadow: inset 0 -1px 0 var(--md-sys-color-on-surface-variant); }
      div.m3.m3-text-field.filled > input.with-after-icon {
        padding: 24px 48px 8px 16px; }
      div.m3.m3-text-field.filled > input.with-before-icon {
        padding: 24px 16px 8px 48px; }
      div.m3.m3-text-field.filled > input.with-before-icon + label {
        margin-left: 32px; }
      div.m3.m3-text-field.filled > input:not(.with-after-icon, .with-before-icon) {
        padding: 24px 16px 8px; }
      div.m3.m3-text-field.filled > input.with-after-icon.with-before-icon {
        padding: 24px 48px 8px 48px; }
    div.m3.m3-text-field.filled > label.raised {
      transform: translate(12px, -12px);
      line-height: var(--md-sys-typescale-body-small-line-height);
      font-size: var(--md-sys-typescale-body-small-font-size); }
    div.m3.m3-text-field.filled > input:required:user-invalid {
      caret-color: var(--md-sys-color-error); }
      div.m3.m3-text-field.filled > input:required:user-invalid:focus-visible {
        box-shadow: inset 0 -3px 0 var(--md-sys-color-error); }
      div.m3.m3-text-field.filled > input:required:user-invalid {
        box-shadow: inset 0 -1px 0 var(--md-sys-color-error); }
    div.m3.m3-text-field.filled:has(input:required:user-invalid) > *:not(input):nth-last-child(-n + 3), div.m3.m3-text-field.filled:has(input:required:user-invalid) + span.m3-text-field-supporting-text {
      color: var(--md-sys-color-error); }
    div.m3.m3-text-field.filled > input:focus-visible {
      outline-offset: 3px;
      box-shadow: inset 0 -3px 0 var(--md-sys-color-primary); }
    div.m3.m3-text-field.filled > input:focus-visible + label {
      color: var(--md-sys-color-primary); }
    div.m3.m3-text-field.filled:hover > input:not(:disabled) ~ span.m3-text-field-state-layer {
      transition: 0.2s cubic-bezier(0.2, 0, 0, 1);
      background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); }
  div.m3.m3-text-field.outlined > fieldset {
    margin: 0;
    position: absolute;
    border-radius: 4px;
    pointer-events: none;
    padding-inline: 12px;
    border: 1px solid var(--md-sys-color-outline);
    inset: -7.5px 0px 0px 0px;
    transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1); }
    div.m3.m3-text-field.outlined > fieldset > legend > span {
      width: 100%; }
    div.m3.m3-text-field.outlined > fieldset > legend {
      opacity: 0;
      width: 0;
      padding: 0;
      pointer-events: none;
      border: 0 solid transparent;
      transition: 0.05s cubic-bezier(0.2, 0, 0, 1); }
    div.m3.m3-text-field.outlined > fieldset > legend.raised {
      border-inline-width: 6px;
      border-style: solid;
      border-color: transparent;
      width: auto;
      visibility: visible; }
  div.m3.m3-text-field.outlined > input {
    box-sizing: border-box;
    border-radius: 4px; }
    div.m3.m3-text-field.outlined > input.with-after-icon {
      padding: 16px 48px 16px 16px; }
    div.m3.m3-text-field.outlined > input.with-before-icon {
      padding: 16px 16px 16px 48px; }
    div.m3.m3-text-field.outlined > input.with-before-icon + label {
      transform: translate(48px, 0); }
    div.m3.m3-text-field.outlined > input:not(.with-after-icon, .with-before-icon) {
      padding: 16px; }
    div.m3.m3-text-field.outlined > input.with-after-icon.with-before-icon {
      padding: 16px 48px; }
  div.m3.m3-text-field.outlined:has(input:focus-visible) > fieldset {
    border: 3px solid var(--md-sys-color-primary); }
  div.m3.m3-text-field.outlined:not(div.m3.m3-text-field.outlined:has(label.raised)):has(input:focus-visible) > fieldset > legend {
    border-top-width: 0;
    border-bottom-width: 0;
    border-inline-width: 5.5px;
    border-style: solid;
    border-color: transparent; }
  div.m3.m3-text-field.outlined:not(div.m3.m3-text-field.outlined:has(input:focus-visible)):has(label.raised) > fieldset > legend {
    border-top-width: 0;
    border-bottom-width: 0;
    border-inline-width: 7.5px;
    border-style: solid;
    border-color: transparent; }
  div.m3.m3-text-field.outlined > input:focus-visible + label {
    color: var(--md-sys-color-primary); }
  div.m3.m3-text-field.outlined > label.raised, div.m3.m3-text-field.outlined > fieldset > * {
    line-height: var(--md-sys-typescale-body-small-line-height);
    font-size: var(--md-sys-typescale-body-small-font-size); }
  div.m3.m3-text-field.outlined > label.raised {
    transform: translate(16px, -27px) !important; }
  div.m3.m3-text-field.outlined > input:required:user-invalid {
    caret-color: var(--md-sys-color-error); }
  div.m3.m3-text-field.outlined:has(input:required:user-invalid) > *:not(input):nth-last-child(-n + 3), div.m3.m3-text-field.outlined:has(input:required:user-invalid) + span.m3-text-field-supporting-text {
    color: var(--md-sys-color-error); }
  div.m3.m3-text-field.outlined:has(input:required:user-invalid) > fieldset {
    border: 3px solid var(--md-sys-color-error); }
  div.m3.m3-text-field.outlined:has(input:required:user-invalid:not(:focus-visible)) > fieldset {
    border: 1px solid var(--md-sys-color-error); }
  div.m3.m3-text-field.outlined:hover:not(div.m3.m3-text-field.outlined:hover:has(input:disabled, input:focus-visible, label.raised, input:required:user-invalid)) > fieldset {
    transition: 0.2s cubic-bezier(0.2, 0, 0, 1);
    border-color: var(--md-sys-color-on-surface); }

html {
  font-family: Roboto, serif;
  color: var(--md-sys-color-on-surface);
  background-color: var(--md-sys-color-surface-container); }

.m3 {
  user-select: none; }

.m3.m3-wrapper {
  position: relative;
  display: block;
  background-color: var(--md-sys-color-surface);
  border-radius: 25px; }

/*# sourceMappingURL=generics.css.map */