.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

/**
 * Animation 
 */
@keyframes rotation {
  to {
    rotate: 360deg;
  }
}
/**
 * Helpers
 */
.-accessible-helper,
.accessible-helper {
  opacity: 0;
  height: 0;
}

/**
 * Components
 */
.accordion {
  box-sizing: border-box;
  display: block;
}
.accordion .accordion-item {
  align-self: stretch;
  border-bottom: 1px solid var(--surface-primary-border);
}
.accordion .accordion-item > a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  cursor: pointer;
  text-decoration: none;
  padding: var(--space-300) 0px;
  color: var(--surface-primary-foreground, #111);
  font-size: var(--font-size-100);
  font-weight: var(--font-weight-medium);
}
.accordion .accordion-item > a .accordion-toggle-icon {
  order: 2;
  width: var(--space-300);
  height: var(--space-300);
  color: var(--surface-primary-muted-foreground, #777);
}
.accordion .accordion-item > a span:not(.material-symbols-outlined) {
  order: 0;
  flex-grow: 1;
}
.accordion .accordion-item > a .accordion-icon {
  margin-inline-end: 0.5em;
}
.accordion .accordion-item [role=tabpanel] {
  padding-block-end: var(--space-300);
  font-size: var(--font-size-100);
  transition: var(--tx-m) ease-in-out;
}

.alert {
  color: var(--color);
}
.alert.-default {
  --color: var(--surface-primary-foreground);
  --border-color: var(--surface-primary-border);
}
.alert.-destructive {
  --color: var(--feedback-destructive-background);
  --border-color: var(--feedback-destructive-background);
}
.alert.-wrapper {
  display: flex;
  padding: 0.75em 1em;
  align-items: center;
  justify-content: flex-start;
  gap: 0.25em;
  border: 1px solid var(--border-color);
  border-radius: var(--corner-radius-200);
}
.alert.-item {
  flex-grow: 1;
  display: flex;
  align-items: center; /* Vertically center the content */
  justify-content: flex-start;
  gap: 0.25em;
  font-size: var(--font-size-100);
}
.alert.-item .-icon {
  align-self: flex-start;
  width: 1em;
  height: 1em;
  font-size: var(--font-size-200);
  aspect-ratio: 1/1;
  flex-basis: 1em; /* Ensures the icon maintains its size */
  flex-shrink: 1;
}
.alert.-item .-title {
  font-weight: var(--font-weight-medium);
  margin-block-end: 0.25em;
}

:root {
  --avatar-border-radius: 50%;
  --avatar-background: var(--surface-primary-background);
  --avatar-text-color: var(--surface-primary-background);
  --avatar-fallback-background: var(--surface-primary-muted-foreground-color, #777);
}

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 2rem;
  height: 2rem;
  background-color: var(--avatar-fallback-background);
  color: var(--avatar-text-color);
  font-weight: var(--font-weight-regular);
  text-transform: uppercase;
  border-radius: var(--avatar-border-radius);
}
.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: var(--avatar-background);
}
.avatar span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.breadcrumbs.-wrapper {
  display: inline-flex;
  align-items: center;
  align-content: center;
  gap: 0.75em;
  flex-wrap: wrap;
}
.breadcrumbs .breadcrumb.-item,
.breadcrumbs .breadcrumb .link.-wrapper {
  color: var(--surface-primary-muted-foreground);
}
.breadcrumbs .breadcrumb.-item {
  font-size: var(--font-size-100);
  display: flex;
  align-items: center;
}
.breadcrumbs .breadcrumb.-item .material-symbols-outlined {
  font-size: var(--font-size-300);
  padding-inline-end: 0.25em;
}
.breadcrumbs .breadcrumb.-item .link.-wrapper {
  text-decoration: none;
}
.breadcrumbs .breadcrumb.-item .link.-wrapper.active {
  color: initial;
}
.breadcrumbs .breadcrumb.-item:not(:last-child)::after {
  font-family: "Material Symbols Outlined";
  content: "\e5cc";
  font-size: var(--font-size-300);
  color: var(--surface-primary-muted-foreground);
  padding-inline-start: 0.75em;
}

/**
 * border needs to be defined as a variable
 * box-shadow needs to be defined as a variable
 * outline hover should be transparent
 * link should probably have some sort of hover affect
 */
.button, .toggle-button {
  --bkg-active: var(--bkg);
  font-size: var(--font-size-100);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 0.5em;
  flex-shrink: 0;
}
[isdisabled].button, [isdisabled].toggle-button, [disabled].button, [disabled].toggle-button, [aria-disabled=true].button, [aria-disabled=true].toggle-button, [aria-busy=true].button, [aria-busy=true].toggle-button {
  opacity: var(--disabled);
  cursor: not-allowed;
  --bkg-hover: var(--bkg);
  text-decoration: none;
}

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-400, 24px);
  padding: var(--space-400, 24px);
  border-radius: var(--corner-radius-radius-400, 12px);
  border: 1px solid var(--surface-primary-border, #e9e9e9);
  background: var(--surface-primary-background, #fff);
  box-shadow: var(--shadow-default);
}

.card-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-75, 4px);
}

.card-title {
  color: var(--surface-primary-foreground, #111);
  font-size: var(--font-size-200);
  font-weight: var(--font-weight-medium);
  margin: 0;
}

.card-description {
  color: var(--surface-primary-muted-foreground, #777);
  font-size: var(--font-size-100);
}

.card-content {
  display: flex;
}

.card-footer {
  display: flex;
  flex-direction: column;
  gap: var(--space-400);
}

.-disabled .checkbox.-wrapper {
  cursor: initial;
}

.-wrapper.checkbox {
  box-sizing: border-box;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  width: 1em;
  min-width: 1em;
  height: 1em;
  flex-shrink: 0;
}
.-wrapper.checkbox:focus {
  outline: none;
}
.-wrapper.checkbox:focus-visible .-box {
  outline: 2px solid var(--focus-color);
  outline-offset: 2px;
}
.-wrapper.checkbox:not(.-empty) .-box.-active {
  background: var(--control-selected-background);
}
.-box.checkbox {
  position: absolute;
  cursor: pointer;
  inset: 0;
  display: flex;
  width: 1em;
  height: 1em;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  border-radius: var(--corner-radius-75);
  border: 1px solid var(--control-unselected-border);
  box-shadow: var(--shadow-default);
}
.-box.checkbox:hover:not(.-disabled) {
  border-width: 2px;
}
.-box.checkbox > span.material-symbols-outlined {
  vertical-align: middle;
  font-size: 1rem;
}
.-box.-disabled.checkbox {
  cursor: initial;
  opacity: var(--disabled);
}

.select, .multiselect, .textbox, .textarea, .dropdown-menu .menu-trigger, .combobox.-trigger {
  --bkg: var(--control-background, #fff);
  --border: var(--control-border, #ababab);
  --text: var(--surface-primary-foreground);
  --focus-border: var(--control-selected-border, #111);
  --focus-ring: var(--control-selected-background);
  --placeholder: var(--surface-primary-muted-foreground);
  display: inline-flex;
  box-sizing: border-box;
  border-radius: var(--corner-radius-75);
  border: 1px solid var(--border);
  background-color: var(--bkg);
  padding: var(--space-100) var(--space-200);
  font-size: var(--font-size-100);
  outline: none;
  transition: var(--tx-m) ease-in-out;
  color: var(--text);
  font-weight: var(--font-weight-regular);
  position: relative;
  text-align: start;
}
.select:not(:disabled):focus, .multiselect:not(:disabled):focus, .textbox:not(:disabled):focus, .textarea:not(:disabled):focus, .dropdown-menu .menu-trigger:not(:disabled):focus, .combobox.-trigger:not(:disabled):focus, .select:not(.-disabled):focus, .multiselect:not(.-disabled):focus, .textbox:not(.-disabled):focus, .textarea:not(.-disabled):focus, .dropdown-menu .menu-trigger:not(.-disabled):focus, .combobox.-trigger:not(.-disabled):focus {
  background-color: var(--bkg);
  border: 1px solid var(--focus-border);
  color: var(--text);
}
.select:not(:disabled):focus-visible, .multiselect:not(:disabled):focus-visible, .textbox:not(:disabled):focus-visible, .textarea:not(:disabled):focus-visible, .dropdown-menu .menu-trigger:not(:disabled):focus-visible, .combobox.-trigger:not(:disabled):focus-visible, .select:not(.-disabled):focus-visible, .multiselect:not(.-disabled):focus-visible, .textbox:not(.-disabled):focus-visible, .textarea:not(.-disabled):focus-visible, .dropdown-menu .menu-trigger:not(.-disabled):focus-visible, .combobox.-trigger:not(.-disabled):focus-visible {
  outline: none;
  border-color: var(--focus-border);
}
.select:-webkit-autofill, .multiselect:-webkit-autofill, .textbox:-webkit-autofill, .textarea:-webkit-autofill, .dropdown-menu .menu-trigger:-webkit-autofill, .combobox.-trigger:-webkit-autofill {
  background-color: var(--bkg);
  border: 1px solid var(--border);
}
.select::placeholder, .multiselect::placeholder, .textbox::placeholder, .textarea::placeholder, .dropdown-menu .menu-trigger::placeholder, .combobox.-trigger::placeholder {
  color: var(--placeholder);
}
.select:disabled, .multiselect:disabled, .textbox:disabled, .textarea:disabled, .dropdown-menu .menu-trigger:disabled, .combobox.-trigger:disabled, .-disabled.select, .-disabled.multiselect, .-disabled.textbox, .-disabled.textarea, .dropdown-menu .-disabled.menu-trigger, .-disabled.combobox.-trigger {
  cursor: not-allowed;
  opacity: var(--disabled);
}

.dropdown-menu .menu-trigger, .combobox.-trigger {
  --border: var(--action-outline-border);
  --bkg: var(--combobox-background);
  padding: var(--space-100) var(--space-300);
  gap: var(--space-100);
  align-self: stretch;
  align-items: center;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  min-width: 8rem;
  cursor: pointer;
}
.-disabled .dropdown-menu .menu-trigger, .dropdown-menu .-disabled .menu-trigger, .-disabled .combobox.-trigger {
  cursor: not-allowed;
  opacity: var(--disabled);
}
.-disabled .dropdown-menu .menu-trigger input, .dropdown-menu .-disabled .menu-trigger input, .-disabled .combobox.-trigger input {
  cursor: not-allowed;
}
.-disabled .dropdown-menu .menu-trigger input::placeholder, .dropdown-menu .-disabled .menu-trigger input::placeholder, .-disabled .combobox.-trigger input::placeholder {
  --combobox-placeholder: var(--surface-primary-foreground);
}
.-disabled .dropdown-menu .menu-trigger:focus, .dropdown-menu .-disabled .menu-trigger:focus, .-disabled .combobox.-trigger:focus, .-disabled .dropdown-menu .menu-trigger:focus-within, .dropdown-menu .-disabled .menu-trigger:focus-within, .-disabled .combobox.-trigger:focus-within, .-disabled .dropdown-menu .menu-trigger:focus-visible, .dropdown-menu .-disabled .menu-trigger:focus-visible, .-disabled .combobox.-trigger:focus-visible {
  outline: none;
  box-shadow: none;
  border-color: var(--action-outline-border);
}

.select-panel, .multiselect .multiselect-panel, .dropdown-menu .menu-popup, .combobox.-panel {
  --interactive-panel-background: var(--surface-primary-background);
  --interactive-panel-border-radius: var(--corner-radius-200);
  --interactive-panel-border: var(--surface-primary-border);
  --interactive-panel-shadow: var(--shadow-md);
  position: absolute;
  background-color: var(--interactive-panel-background);
  border-radius: var(--interactive-panel-border-radius);
  border: var(--interactive-panel-border);
  box-shadow: var(--interactive-panel-shadow);
}

.multiselect .multiselect-item, .select-item, .multiselect .multiselect-items li, .select-items li, .dropdown-menu .menu-popup li, .combobox.-items li {
  padding: 0.375em 0.75em;
  transition: var(--tr-m);
  cursor: pointer;
  font-size: var(--font-size-100);
  display: flex;
  align-items: center;
}
.multiselect .-highlight.multiselect-item, .-highlight.select-item, .multiselect .multiselect-items li.-highlight, .select-items li.-highlight, .dropdown-menu .menu-popup li.-highlight, .combobox.-items li.-highlight, .multiselect .-focused.multiselect-item, .-focused.select-item, .multiselect .multiselect-items li.-focused, .select-items li.-focused, .dropdown-menu .menu-popup li.-focused, .combobox.-items li.-focused, .multiselect .-selected.multiselect-item, .-selected.select-item, .multiselect .multiselect-items li.-selected, .select-items li.-selected, .dropdown-menu .menu-popup li.-selected, .combobox.-items li.-selected {
  background-color: var(--action-selected-background);
  color: var(--action-focus-foreground);
  border-radius: var(--corner-radius-200);
}
.multiselect .-highlight.multiselect-item:hover, .-highlight.select-item:hover, .multiselect .multiselect-items li.-highlight:hover, .select-items li.-highlight:hover, .dropdown-menu .menu-popup li.-highlight:hover, .combobox.-items li.-highlight:hover, .multiselect .-focused.multiselect-item:hover, .-focused.select-item:hover, .multiselect .multiselect-items li.-focused:hover, .select-items li.-focused:hover, .dropdown-menu .menu-popup li.-focused:hover, .combobox.-items li.-focused:hover, .multiselect .-selected.multiselect-item:hover, .-selected.select-item:hover, .multiselect .multiselect-items li.-selected:hover, .select-items li.-selected:hover, .dropdown-menu .menu-popup li.-selected:hover, .combobox.-items li.-selected:hover {
  background-color: var(--action-selected-background);
  color: var(--action-focus-foreground);
}
.multiselect .-disabled.multiselect-item, .-disabled.select-item, .multiselect .multiselect-items li.-disabled, .select-items li.-disabled, .dropdown-menu .menu-popup li.-disabled, .combobox.-items li.-disabled {
  opacity: var(--disabled);
  cursor: initial;
}
.multiselect .multiselect-item > span, .select-item > span, .multiselect .multiselect-items li > span, .select-items li > span, .dropdown-menu .menu-popup li > span, .combobox.-items li > span {
  line-height: 24px;
}
.multiselect .multiselect-item > span:where(:not(.material-symbols-outlined)), .select-item > span:where(:not(.material-symbols-outlined)), .multiselect .multiselect-items li > span:where(:not(.material-symbols-outlined)), .select-items li > span:where(:not(.material-symbols-outlined)), .dropdown-menu .menu-popup li > span:where(:not(.material-symbols-outlined)), .combobox.-items li > span:where(:not(.material-symbols-outlined)) {
  flex-grow: 1;
}
.multiselect .multiselect-item > span:where(.material-symbols-outlined), .select-item > span:where(.material-symbols-outlined), .multiselect .multiselect-items li > span:where(.material-symbols-outlined), .select-items li > span:where(.material-symbols-outlined), .dropdown-menu .menu-popup li > span:where(.material-symbols-outlined), .combobox.-items li > span:where(.material-symbols-outlined) {
  flex-shrink: 0;
}
.multiselect .multiselect-item:hover, .select-item:hover, .multiselect .multiselect-items li:hover, .select-items li:hover, .dropdown-menu .menu-popup li:hover, .combobox.-items li:hover {
  background-color: var(--action-selected-background);
  color: var(--action-focus-foreground);
  border-radius: var(--corner-radius-200);
}

.multiselect .multiselect-items, .select-items, .dropdown-menu .menu-popup, .combobox.-items {
  list-style: none;
  margin: 0;
  padding-inline-start: 0;
}
.combobox {
  --combobox-background: var(--action-outline-background);
  --combobox-placeholder: var(--surface-primary-muted-foreground);
}
.combobox.-wrapper {
  display: inline-block;
}
.combobox.-trigger {
  min-width: 8rem;
}
.-wrapper:not(.-disabled) .combobox.-trigger:hover {
  --bkg: var(--action-outline-hover-background);
}
.combobox.-trigger-text {
  flex-grow: 1;
}
.combobox.-trigger-icon {
  flex-shrink: 1;
  opacity: var(--opacity-50);
  font-size: var(--spacing-300);
}
.combobox.-panel {
  box-sizing: content-box;
  overflow-y: scroll;
}
.combobox.-panel input {
  border: none;
  background: transparent;
  font-size: var(--font-size-100);
  width: 100%;
  border-block-end: 1px solid var(--action-outline-border);
  border-radius: var(--corner-radius-00);
  padding: var(--space-100);
}
.combobox.-panel input::placeholder {
  color: var(--combobox-placeholder);
}
.combobox.-items {
  padding: var(--space-100);
}

.data-grid .grid.-table td, .data-grid .grid.-table th .column.-title {
  font-family: var(--font-family);
  font-size: var(--font-size-100);
  font-style: normal;
}

.data-grid.-data {
  border: 1px solid var(--surface-primary-border);
  border-radius: var(--corner-radius-75, 4px);
}
.data-grid.datatable {
  display: flex;
  flex-direction: column;
  gap: 1em;
}
.data-grid .grid.-table {
  border-collapse: collapse;
}
.data-grid .grid.-table th,
.data-grid .grid.-table td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-inline: var(--space-100);
}
.data-grid .grid.-table tr:not(:last-child) td {
  border-bottom: 1px solid var(--surface-primary-border);
}
.data-grid .grid.-table tr:hover {
  background-color: var(--surface-secondary-bg);
  cursor: pointer;
}
.data-grid .grid.-table th {
  padding-block: var(--space-200);
  border-bottom: 1px solid var(--surface-primary-border);
}
.data-grid .grid.-table th:hover {
  background-color: var(--surface-secondary-bg);
}
.data-grid .grid.-table th > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.data-grid .grid.-table th .column.-title {
  color: var(--surface-primary-muted-foreground);
  font-weight: var(--font-weight-medium);
  display: flex;
  align-items: center;
  gap: 0.25em;
}
.data-grid .grid.-table th.-sortable-column .-title-content {
  cursor: pointer;
}
.data-grid .grid.-table th .material-symbols-outlined {
  font-size: 1em;
}
.data-grid .grid.-table th .-filter-icon {
  cursor: pointer;
}
.data-grid .grid.-table td {
  padding-block: var(--space-300);
}
.data-grid .pagination.-wrapper {
  justify-content: flex-end;
}
.data-grid .-unselectable-text {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.dialog, .sheet,
.drawer {
  --dialog-z-index: 1000;
}
.-grabbing.dialog, .-grabbing.sheet,
.-grabbing.drawer {
  user-select: none;
}
.-open.dialog, .-open.sheet,
.-open.drawer {
  opacity: 1;
}
.dialog .dialog-container, .sheet .dialog-container,
.drawer .dialog-container {
  border-radius: var(--corner-radius-200);
}
.dialog .dialog-description, .sheet .dialog-description,
.drawer .dialog-description,
.dialog .dialog-content,
.sheet .dialog-content,
.drawer .dialog-content {
  font-size: var(--font-size-100);
}
.dialog .dialog-titlebar, .sheet .dialog-titlebar,
.drawer .dialog-titlebar {
  display: flex;
  justify-content: space-between;
}
.dialog .dialog-titlebar .dialog-title, .sheet .dialog-titlebar .dialog-title,
.drawer .dialog-titlebar .dialog-title {
  color: var(--surface-primary-foreground, #111);
}
.dialog .dialog-titlebar .dialog-description, .sheet .dialog-titlebar .dialog-description,
.drawer .dialog-titlebar .dialog-description {
  margin-block-start: var(--space-75);
  color: var(--surface-primary-muted-foreground);
  font-size: var(--font-size-100);
  font-weight: var(--font-weight-regular);
}
.dialog .dialog-titlebar .dialog-titlebar-close, .sheet .dialog-titlebar .dialog-titlebar-close,
.drawer .dialog-titlebar .dialog-titlebar-close {
  cursor: pointer;
  color: var(--action-secondary-foreground, #111);
}
.dialog .dialog-confirm-buttons, .sheet .dialog-confirm-buttons,
.drawer .dialog-confirm-buttons {
  display: flex;
  gap: var(--space-100);
  justify-content: flex-end;
  margin-block-start: var(--space-300);
}

.dialog-mask {
  position: fixed;
  z-index: calc(var(--dialog-z-index) - 1);
  width: 100%;
  height: 100%;
  inset-block-start: 0;
  inset-inline-start: 0;
  background-color: var(--surface-modal-background);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--tx-m) ease-in-out, visibility var(--tx-m) ease-in-out;
}
.dialog-mask.-open {
  opacity: var(--opacity-80);
  visibility: visible;
}

.dialog-container,
.sheet,
.drawer {
  box-sizing: border-box;
  position: absolute;
  overflow: hidden;
  display: flex;
  min-width: 150px;
  max-height: 100%;
  min-height: 150px;
  z-index: calc(var(--dialog-z-index) + 1);
  opacity: 1;
  padding: var(--space-300);
  flex-direction: column;
  gap: var(--space-300);
  border: 1px solid var(--surface-primary-border);
  background: var(--surface-primary-background);
  box-shadow: var(--shadow-lrg);
}

.sheet,
.drawer {
  transition: var(--tx-m) ease-in-out;
  opacity: 0;
}

.drawer {
  align-items: center;
  justify-content: center;
  transition: transform var(--tx-l) ease-in-out;
  overflow: visible;
  bottom: 0;
  min-height: 150px;
  width: 100%;
  border-radius: var(--corner-radius-200) var(--corner-radius-200) 0 0;
}
.drawer::after {
  content: "";
  position: absolute;
  background: var(--surface-primary-background);
  top: 100%;
  bottom: initial;
  left: 0;
  right: 0;
  height: 200%;
  z-index: 999;
}
.drawer .dialog-grab-bar {
  display: block;
  margin: 0 auto;
  height: var(--space-100);
  width: 120px;
  border-radius: var(--corner-radius-9999);
  background: var(--surface-primary-muted-foreground);
  margin-block-end: var(--space-100);
  cursor: pointer;
}
.drawer .dialog-header,
.drawer .dialog-content {
  width: 100%;
  max-width: 400px;
}
.drawer .dialog-title {
  font-size: var(--font-size-300);
  font-weight: var(--font-weight-medium);
}
.drawer .dialog-description {
  margin-block-start: var(--space-75);
  color: var(--surface-primary-muted-foreground);
}

.sheet.-end {
  inset-inline-end: 0;
  right: 0;
  min-width: 150px;
  max-width: 100%;
  height: 100%;
  transform: translateX(100%);
  border-radius: var(--corner-radius-200) 0 0 var(--corner-radius-200);
}
.sheet.-start {
  inset-inline-start: 0;
  left: 0;
  min-width: 150px;
  max-width: 100%;
  height: 100%;
  transform: translateX(-100%);
  border-radius: 0 var(--corner-radius-200) var(--corner-radius-200) 0;
}
.sheet.-top {
  top: 0;
  min-height: 150px;
  width: 100%;
  transform: translateY(-100%);
  border-radius: 0 0 var(--corner-radius-200) var(--corner-radius-200);
}
.sheet.-bottom {
  bottom: 0;
  min-height: 150px;
  width: 100%;
  transform: translateY(100%);
  border-radius: var(--corner-radius-200) var(--corner-radius-200) 0 0;
}
.sheet.-open.-start {
  transform: translateX(0);
}
.sheet.-open.-end {
  transform: translateX(0);
}
.sheet.-open.-top {
  transform: translateY(0);
}
.sheet.-open.-bottom {
  transform: translateY(0);
}

.dialog {
  box-sizing: border-box;
  display: flex;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  z-index: var(--dialog-z-index);
  align-items: center;
  justify-content: center;
}
.dialog .dialog-title {
  font-size: var(--font-size-400);
}

.dropdown-menu {
  list-style-type: none;
  padding-inline-start: 0;
  display: inline-block;
}
.dropdown-menu .menu-trigger .trigger-text {
  flex-grow: 1;
}
.dropdown-menu .menu-trigger .trigger-icon {
  flex-shrink: 1;
  opacity: var(--opacity-50);
  font-size: var(--spacing-300);
}
.dropdown-menu .menu-trigger:hover {
  --bkg: var(--action-outline-hover-background);
}
.dropdown-menu .menu-popup {
  min-width: 10rem;
}
.dropdown-menu .menu-popup .menu-item-icon {
  font-size: var(--font-size-200);
  padding-inline-end: var(--space-100);
  font-variation-settings: "FILL" 1, "wght" 300, "GRAD" 0, "opsz" 24;
}
.dropdown-menu .menu-popup .menu-item-label {
  cursor: default;
  font-weight: var(--font-weight-medium);
  border-block-end: 1px solid var(--surface-primary-muted-background, #f5f5f5);
}
.dropdown-menu .menu-popup .menu-item-label:hover {
  background-color: initial;
}
.dropdown-menu .menu-popup .menu-item-separator {
  border-block-end: 1px solid var(--surface-primary-muted-background, #f5f5f5);
}
.dropdown-menu .menu-popup .menu-item-shortcut {
  color: var(--surface-primary-muted-foreground);
  font-size: var(--font-size-75);
  flex-grow: 0;
  flex-shrink: 0;
}
.dropdown-menu .menu-item {
  position: relative;
}
.dropdown-menu .menu-item.-has-submenu {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.dropdown-menu .menu-item.-has-submenu .menu-item-submenu-icon {
  margin-inline-start: var(--space-100);
  font-size: var(--font-size-200);
  color: var(--surface-primary-muted-foreground);
}
.dropdown-menu .menu-item.-has-submenu .menu-submenu {
  position: absolute;
  left: 100%;
  top: 0;
  display: none; /* Hidden by default */
  z-index: 1000; /* Ensure it shows above other elements */
  min-width: 10rem;
  margin-top: 0;
  box-shadow: var(--shadow-md);
  background-color: var(--surface-primary-background, #fff);
  border-radius: var(--corner-radius-75);
  padding: var(--space-100);
}
.dropdown-menu .menu-item.-has-submenu.-expanded > .menu-submenu {
  display: block;
}
.dropdown-menu:not(.-disabled) .dropdown-menu .menu-trigger:hover {
  --bkg: var(--action-outline-hover-background);
}

.textbox {
  text-overflow: ellipsis;
}
.textbox::placeholder {
  text-overflow: ellipsis;
}

label {
  color: var(--surface-primary-foreground);
  font-size: var(--font-size-100);
}

.pagination {
  display: flex;
  align-items: center;
  color: var(--surface-primary-foreground, #111);
}
.pagination .pagination-items {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25em;
  font-weight: var(--font-weight-medium);
  flex-wrap: wrap;
}
.pagination .pagination-items:focus {
  outline: none;
}
.pagination .pagination-item {
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--corner-radius-200);
  font-size: var(--font-size-100);
  color: var(--surface-primary-foreground, #111);
  cursor: pointer;
}
.pagination .pagination-item.-prev {
  padding: 0.5em 1em 0.5em 0.75em;
}
.pagination .pagination-item.-next {
  padding: 0.5em 0.75em 0.5em 1em;
}
.pagination .pagination-item.-page {
  padding: 0.75em 1em;
}
.pagination .pagination-item:not(.-disabled):hover, .pagination .pagination-item:not(.-disabled):focus, .pagination .pagination-item:not(.-disabled):focus-within, .pagination .pagination-item:not(.-disabled).-focused {
  background: var(--action-outline-hover-background);
}
.pagination .pagination-item.-active {
  border: 1px solid var(--action-outline-border);
}
.pagination .pagination-item.-disabled {
  opacity: var(--disabled);
  cursor: not-allowed;
}
.pagination .pagesize-selector {
  max-width: 80px;
  min-width: 50px;
}
.pagination.-pagesize-text {
  font-size: var(--font-size-100);
  font-weight: var(--font-weight-regular);
  margin-inline-start: 0.25em;
}

.popup-content {
  display: none;
  visibility: hidden;
  background: var(--surface-primary-background);
  box-shadow: var(--shadow-md);
  border-radius: var(--corner-radius-75);
  padding: var(--space-300);
}
.popup-content.-popup {
  display: flex;
  visibility: visible;
  position: absolute;
  margin-top: var(--space-100);
}

.progressbar {
  display: flex;
  align-items: center;
  width: 100%;
  height: 1rem;
  background-color: var(--surface-secondary-background);
  border-radius: var(--corner-radius-9999);
  overflow: hidden;
  position: relative;
}
.progressbar-value {
  height: 100%;
  background-color: var(--surface-primary-foreground);
  transition: width 0.3s ease;
  width: var(--progressbar-value);
}
.progressbar-label {
  position: absolute;
  width: 100%;
  text-align: center;
  mix-blend-mode: difference;
  color: var(--surface-bg);
  font-size: var(--font-size-100);
  font-weight: var(--font-weight-light);
  pointer-events: none;
}

.-determinate {
  position: relative;
}

.-indeterminate + .progressbar-value,
.progressbar.-indeterminate .progressbar-value {
  width: 30%;
  animation: progressbar-indeterminate 1.5s infinite;
}

@keyframes progressbar-indeterminate {
  0% {
    transform: translateX(-100%);
  }
  50% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}
.radio-button-list.-horizontal {
  display: flex;
  flex-direction: row;
  gap: 1em;
  align-items: center;
}
.radio-button-list.-vertical {
  display: flex;
  flex-direction: column;
  gap: 1em;
  align-items: flex-start;
}
.radio-button-list.-disabled {
  pointer-events: none;
  opacity: var(--disabled);
  cursor: not-allowed;
}

.radiobutton.-wrapper {
  display: flex;
  align-items: center;
  gap: 0.25em;
}
.radiobutton.-button {
  border-radius: var(--corner-radius-9999);
  outline-offset: 1px;
  cursor: pointer;
}
.radiobutton.-label {
  font-size: var(--font-size-100);
  font-weight: var(--font-weight-regular);
  color: var(--surface-primary-foreground);
}
.radiobutton.-box {
  line-height: 0;
}
.radiobutton.-icon::before {
  content: "radio_button_unchecked";
}
.-active .radiobutton.-icon::before {
  content: "radio_button_checked";
}

.multiselect, .select {
  flex-direction: column;
  overflow: hidden;
  cursor: pointer;
}
.multiselect:focus:not(.-disabled), .select:focus:not(.-disabled), .multiselect:focus-within:not(.-disabled), .select:focus-within:not(.-disabled) {
  outline: 1px solid var(--focus-color);
  outline-offset: 2px;
}
.multiselect .-placeholder, .select .-placeholder {
  color: var(--surface-primary-muted-foreground);
}

.multiselect .multiselect-trigger, .select .select-trigger {
  position: absolute;
  display: flex;
  align-items: center;
  inset-inline-end: 0.75em;
  inset-block-start: 0;
  inset-block-end: 0;
}

.select {
  align-items: flex-start;
}
.select::after {
  content: none;
}
.select .select-clear-icon {
  position: absolute;
  inset-inline-end: 1.5em;
  inset-block-start: 0;
  height: 100%;
  display: flex;
  align-items: center;
  opacity: var(--opacity-40);
}
.select .select-clear-icon:hover {
  opacity: var(--opacity-100);
}
.-disabled > .select .select-clear-icon {
  display: none;
}
.select .-chips {
  height: inherit;
  padding-block: var(--rz-dropdown-chips-padding-block);
  padding-inline: var(--rz-dropdown-chips-padding-inline);
}
.select .-chips .-chips-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25em;
  margin-inline-end: 3em;
}

.select-panel {
  box-sizing: content-box;
  padding: 0.5em;
}

.multiselect .multiselect-panel {
  box-sizing: content-box;
}
.multiselect .multiselect-panel .checkbox.-wrapper {
  margin-block: var(--rz-multiselect-checkbox-margin-block);
  margin-inline: var(--rz-multiselect-checkbox-margin-inline);
}
.multiselect .multiselect-items-wrapper {
  overflow: auto;
}
.multiselect .multiselect-header {
  display: flex;
  align-items: center;
}
.multiselect .multiselect-close {
  display: none;
}
.multiselect .multiselect-filter-container {
  flex: auto;
  border-bottom: var(--surface-primary-border);
}
.multiselect .multiselect-filter-container .-inputtext {
  padding: 0;
}
.multiselect .multiselect-item {
  display: flex;
  align-items: center;
}
.multiselect .multiselect-item-content {
  flex: 1;
}

.select-items-wrapper,
.multiselect-items-wrapper {
  overflow: auto;
}

.multiselect .multiselect-filter-container .-inputtext,
.select-filter {
  background-color: transparent;
}

.multiselect-label-container,
.select-label {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin: 0;
}

.clear .multiselect-label-container,
.clear .select-label {
  padding-inline-end: 3em;
}

.slider.-wrapper {
  --thumb-size: var(--space-300);
  --range-height: var(--space-100);
  box-sizing: border-box;
  position: relative;
  display: inline-block;
  border-radius: var(--corner-radius-9999);
  background: var(--action-secondary-active-background);
  height: var(--range-height);
  width: 100%;
}
.slider.-wrapper.-disabled {
  opacity: var(--disabled);
  cursor: not-allowed;
}
.slider.-wrapper:not(.-disabled) .-handle:hover, .slider.-wrapper:not(.-disabled) .-handle:focus, .slider.-wrapper:not(.-disabled) .-handle:active {
  background-color: var(--action-outline-hover-background);
  cursor: pointer;
  outline: none;
}
.slider.-wrapper:not(.-disabled):focus-visible {
  outline: 1px solid var(--focus-color);
  outline-offset: 2px;
}
.slider.-range {
  position: absolute;
  background: var(--surface-primary-foreground);
  transition: var(--tx-s);
  inset-block-start: -1px;
  inset-block-end: -1px;
  inset-inline-start: -1px;
  border-start-start-radius: var(--corner-radius-9999);
  border-end-start-radius: var(--corner-radius-9999);
}
.slider.-handle {
  position: absolute;
  border-radius: var(--corner-radius-9999, 9999px);
  border: 1px solid var(--surface-primary-foreground);
  background: var(--surface-primary-background);
  box-shadow: var(--shadow-default);
  transition: var(--tx-s);
  top: 50%;
  transform: translateY(-50%);
  margin-inline-start: calc(var(--thumb-size) / -2);
  width: var(--thumb-size);
  height: var(--thumb-size);
}

.switch {
  --bkg: var(--control-switch-background);
  --thumb: var(--control-background);
  --position: 0.25em;
  width: min-content;
}
.switch.-checked {
  --bkg: var(--surface-primary-foreground);
  --thumb: var(--control-background);
  --position: calc(100% - 1.25em);
}
.switch [type=checkbox] {
  appearance: none;
}
.switch .switch-graphic {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--bkg);
  width: 2.25em;
  height: 1.5em;
  border-radius: 1em;
  transition: var(--tx-m);
}
.switch .switch-graphic::before {
  content: "";
  width: 1em;
  height: 1em;
  border-radius: 1em;
  display: flex;
  background: var(--thumb);
  position: absolute;
  left: var(--position);
  transition: var(--tx-m);
}

.tabview {
  display: flex;
  flex-direction: column;
  gap: var(--space-100, 0.5rem);
}
.tabview:focus {
  outline: none;
}

.tabview-nav {
  display: flex;
  list-style: none;
  margin: 0;
  padding: var(--space-75, 0.25rem);
  gap: var(--space-100, 0.5rem);
  border-radius: var(--corner-radius-radius-100, 0.375rem);
  background: var(--surface-primary-muted-background, #f5f5f5);
}
.tabview-nav li {
  position: relative;
  flex: 1;
  min-width: 0;
}
.tabview-nav li.-selected {
  border-radius: var(--corner-radius-radius-75, 0.25rem);
  background: var(--action-outline-background, #fff);
  box-shadow: var(--shadow-default);
}
.tabview-nav li.-selected .tabview-title {
  color: var(--surface-primary-foreground, #111);
}
.tabview-nav li:hover:not(.-selected):not(.-disabled) .tabview-title {
  color: var(--surface-primary-foreground, #111);
}
.tabview-nav li.-disabled {
  opacity: 0.38;
  pointer-events: none;
}
.tabview-nav li.-focused a {
  outline: 2px solid var(--focus-color);
  outline-offset: 2px;
  border-radius: 4px;
}
.tabview-nav li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: var(--space-75, 0.25rem) var(--space-200, 0.75rem);
  text-decoration: none;
  color: var(--surface-primary-muted-foreground, #777);
  font-size: var(--font-size-100, 0.875rem);
  font-style: normal;
  font-weight: var(--font-weight-medium, 500);
  cursor: pointer;
  text-align: center;
}
.tabview-nav li a:focus {
  outline: none;
}

.tabview-title {
  font-size: var(--font-size-100, 0.875rem);
  line-height: 1.25rem;
  font-weight: var(--font-weight-medium, 500);
  color: var(--surface-primary-muted-foreground, #777);
  transition: color 0.15s ease-in-out;
  letter-spacing: 0.1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  width: 100%;
}

.tabview-panels {
  flex: 1;
  min-height: 0;
}

.tabview-panel {
  height: 100%;
  padding: var(--space-100, 0.5rem);
}

.tabview-icon {
  font-size: 1.5rem;
  margin-inline: -0.25rem 0.25rem;
}

.tabnav {
  display: flex;
  flex-direction: column;
  gap: var(--space-100);
}
.tabnav:focus {
  outline: none;
}

.tabnav-nav {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: var(--space-100);
  border-bottom: 1px solid var(--surface-primary-border);
}
.tabnav-nav li {
  position: relative;
  min-width: 0;
  background: none;
  border: none;
  padding: 0;
}
.tabnav-nav li.-selected .tabnav-title {
  color: var(--surface-primary-foreground);
  font-weight: var(--font-weight-medium);
}
.tabnav-nav li.-selected a {
  border-bottom: 2px solid var(--surface-primary-foreground);
}
.tabnav-nav li:hover:not(.-disabled) .tabnav-title {
  background: var(--action-ghost-hover-background);
  color: var(--surface-primary-foreground);
  padding: var(--space-100) var(--space-200);
  border-radius: var(--corner-radius-100);
}
.tabnav-nav li.-disabled a {
  opacity: var(--disabled);
  pointer-events: none;
}
.tabnav-nav li.-disabled .tabnav-title {
  color: var(--surface-primary-muted-foreground);
}
.tabnav-nav a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-100) var(--space-200);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: background var(--tx-s), color var(--tx-s), border-bottom var(--tx-s);
  outline: none;
}

.tabnav-title {
  font-size: var(--font-size-100);
  line-height: var(--lineHeight-100);
  font-weight: var(--font-weight-regular);
  color: var(--surface-primary-muted-foreground);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  padding: var(--space-100) var(--space-200);
}

.textarea {
  min-height: 3em;
}

.toggle-button {
  gap: 0;
  --bkg: transparent;
  --text: var(--action-secondary-foreground);
  --border: transparent;
  --bkg-hover: var(--action-outline-hover-background);
  --bkg-active: var(--action-outline-selected-background);
}
.toggle-button.state-active {
  --bkg: var(--action-secondary-background);
  --text: var(--action-secondary-foreground);
  --border: var(--action-secondary-background);
  --bkg-hover: var(--action-secondary-hover-background);
  --bkg-active: var(--action-secondary-selected-background);
}

.helper-hidden-accessible {
  opacity: 0;
  height: 0;
}
.helper-hidden-accessible input {
  width: 100%;
  height: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

.button-box {
  display: inline-flex;
  gap: 0.25rem;
  justify-content: center;
  align-items: center;
  vertical-align: top;
  line-height: 1.25rem;
}

.button-text {
  vertical-align: top;
}

.szi {
  vertical-align: top;
}

.state-disabled {
  pointer-events: none;
  opacity: var(--disabled);
  cursor: not-allowed;
}

.tooltip {
  box-sizing: border-box;
  position: absolute;
  transition: top var(--tx-m), left var(--tx-m);
  top: 0;
  left: 0;
}

.tooltip-content {
  display: inline-flex;
  padding: var(--space-75) var(--space-200);
  justify-content: center;
  align-items: center;
  gap: var(--space-200);
  border-radius: var(--corner-radius-75);
  background: var(--feedback-default-background);
  color: var(--feedback-default-foreground);
  font-size: var(--font-size-75);
  line-height: 1.4em;
  white-space: nowrap;
}
.tooltip-content.-top {
  margin-block-end: var(--space-300);
}
.tooltip-content.-bottom {
  margin-block-start: var(--space-100);
}
.tooltip-content.-left {
  margin-inline-end: var(--space-100);
}
.tooltip-content.-right {
  margin-inline-start: 0;
}

.tree {
  box-sizing: border-box;
  display: inline-block;
  overflow: auto;
}

.tree .treenode.treenode-leaf > .treenode-content > .tree-toggler {
  visibility: hidden;
}

.treenode {
  padding-inline-start: var(--space-400, 1.5rem);
}

.tree-toggler {
  cursor: pointer;
  margin-inline-start: calc(var(--space-400, 1.5rem) * -1);
  width: var(--space-400, 1.5rem);
  height: 1.5rem;
  font-size: var(--font-size-100, 0.875rem);
  line-height: 1.5rem;
  text-align: center;
  color: var(--surface-primary-muted-foreground, #777);
  transition: var(--tx-m, 0.1s linear);
}
.tree-toggler:hover {
  color: var(--surface-primary-foreground, #111);
}

.treenode-content {
  display: flex;
  align-items: center;
  cursor: pointer;
  margin: var(--space-75, 0.25rem);
}
.treenode-content .treenode-label {
  display: flex;
  align-items: center;
  cursor: inherit;
  padding: var(--space-75, 0.25rem);
  font-size: var(--font-size-100, 0.875rem);
  font-weight: var(--font-weight-regular, 400);
  color: var(--surface-primary-foreground, #111);
}
.tree:focus-visible .treenode-content.state-focused .treenode-label {
  outline: 2px solid var(--focus-color);
  outline-offset: 2px;
}
.treenode-content:not(.treenode-content-selected):hover .treenode-label {
  background-color: var(--action-outline-hover-background, #f5f5f5);
  color: var(--action-focus-foreground, #111);
  border-radius: var(--corner-radius-75, 0.25rem);
}
.treenode-content .chkbox {
  margin-inline-end: var(--space-75, 0.25rem);
}

.treenode-content-selected .treenode-label {
  font-weight: var(--font-weight-medium, 500);
  color: var(--action-focus-foreground, #111);
  background: var(--action-selected-background, #e3e7fd);
  border-radius: var(--corner-radius-75, 0.25rem);
}

.tree-container,
.treenode-children {
  list-style: none;
  padding: 0;
  margin: 0;
}

.treenode-children {
  border-left: 1px solid var(--surface-secondary-border);
  margin-left: -0.5em;
}
.treenode-children > .treenode {
  margin-left: 0.5em;
}

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