/* src/global.scss */
/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties;
@layer base, theme, preflight, ionic, components, utilities;
@layer theme, base, components, utilities;
@layer theme {
:root,
:host {
--font-sans:
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
"Helvetica Neue",
"Noto Sans",
Arial,
sans-serif,
"Apple Color Emoji",
"Segoe UI Emoji",
"Segoe UI Symbol",
"Noto Color Emoji";
--font-mono:
ui-monospace,
SFMono-Regular,
Menlo,
Monaco,
Consolas,
"Liberation Mono",
"Courier New",
monospace;
--font-weight-normal: 400;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
--default-transition-duration: 150ms;
--default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
--default-font-family: var(--font-sans);
--default-mono-font-family: var(--font-mono);
--font-default: Soehne, sans-serif;
--font-icon: "Material Symbols Outlined";
--color-icon-default: #66676b;
--color-icon-inverted: #ffffff;
--color-icon-alert-dark: #d0122f;
--color-icon-alert: #ef4444;
--color-icon-warning-dark: #b6620d;
--color-icon-warning: #f0902e;
--color-icon-success-dark: #028030;
--color-icon-success: #0fc551;
--color-icon-information: #649fda;
--color-icon-accent: #004588;
--color-icon-disabled-light: #d8d9df;
--color-icon-disabled: #c1c2c6;
--color-icon-transparent: transparent;
--color-background-default: #ffffff;
--color-background-inverted: #22252d;
--color-background-accent: #004588;
--color-background-accent-hover: #003b74;
--color-background-accent-focus: #00305f;
--color-background-highlight: #ffdd00;
--color-background-highlight-hover: #f0cc00;
--color-background-highlight-focus: #e0bb00;
--color-background-danger: #ffffff;
--color-background-danger-hover: #fdf3ed;
--color-background-danger-focus: #fce5da;
--color-background-action: #ffffff;
--color-background-action-hover: #f0f2f6;
--color-background-action-focus: #e9ebf2;
--color-background-alert: #ec1e2e;
--color-background-alert-hover: #d0122f;
--color-background-alert-focus: #aa0f32;
--color-background-alert-ultra-light: #fdf3ed;
--color-background-alert-ultra-light-hover: #f9c4b5;
--color-background-alert-ultra-light-focus: #f59f8f;
--color-background-alert-light: #fce5da;
--color-background-warning: #e67c10;
--color-background-warning-hover: #ce6f0e;
--color-background-warning-focus: #b6620d;
--color-background-warning-ultra-light: #fcebda;
--color-background-warning-ultra-light-hover: #f8cda1;
--color-background-warning-ultra-light-focus: #f6b97b;
--color-background-warning-light: #fbe1c7;
--color-background-success: #0fc551;
--color-background-success-ultra-light: #edfff4;
--color-background-success-ultra-light-hover: #acf4c6;
--color-background-success-ultra-light-focus: #7df0a6;
--color-background-success-light: #d8fbe5;
--color-background-information: #478dd3;
--color-background-information-hover: #2f7cc8;
--color-background-information-focus: #296aab;
--color-background-information-ultra-light: #f0f6fc;
--color-background-information-ultra-light-hover: #bfd7f0;
--color-background-information-ultra-light-focus: #9ec3e8;
--color-background-information-light: #e0ecf8;
--color-background-disabled: #f0f2f6;
--color-background-gray-ultra-ultra-light: #f9fafb;
--color-background-gray-ultra-light: #f0f2f6;
--color-background-gray-light: #e9ebf2;
--color-background-gray: #d8d9df;
--color-background-gray-strong: #c1c2c6;
--color-background-transparent: transparent;
--color-border-default: #a4a5a8;
--color-border-inverted: #ffffff;
--color-border-disabled: #d8d9df;
--color-border-light: #c1c2c6;
--color-border-ultra-light: #e9ebf2;
--color-border-strong: #87878c;
--color-border-accent: #004588;
--color-border-accent-light: #bfd7f0;
--color-border-alert: #ef4444;
--color-border-warning: #f0902e;
--color-border-success: #2dda6b;
--color-border-information: #649fda;
--color-border-transparent: transparent;
--color-text-default: #35383e;
--color-text-inverted: #ffffff;
--color-text-light: #66676b;
--color-text-ultra-light: #a4a5a8;
--color-text-placeholder: #c1c2c6;
--color-text-disabled: #c1c2c6;
--color-text-disabled-light: #d8d9df;
--color-text-accent: #004588;
--color-text-alert: #ef4444;
--color-text-alert-light: #f2746a;
--color-text-warning: #f0902e;
--color-text-success: #0fc551;
--color-text-information: #649fda;
--color-chart-category1-light: #74c9c9;
--color-chart-category3-light: #fff695;
--color-chart-category6-light: #bdd388;
--color-chart-category7-light: #c6d4d9;
--color-chart-category8-light: #ffa081;
--color-chart-category9-light: #86cbe4;
--color-chart-category10-light: #f5ce7b;
--color-chart-category12-light: #f6748e;
--spacing: 0.25rem;
--spacing-xs: 0.125rem;
--spacing-sm: 0.25rem;
--spacing-base: 0.5rem;
--spacing-md: 0.75rem;
--spacing-lg: 1rem;
--spacing-xl: 1.25rem;
--spacing-2xl: 1.5rem;
--spacing-3xl: 2rem;
--spacing-4xl: 3rem;
--container-xs: 0rem;
--container-sm: 39rem;
--container-md: 66rem;
--container-lg: 83rem;
--container-xl: 99rem;
--text-xs: 0.75rem;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.25rem;
--text-2xl: 1.5rem;
--text-3xl: 1.875rem;
--text-4xl: 2.25rem;
--text-5xl: 3rem;
--text-6xl: 3.75rem;
--text-icon-xs: 0.75rem;
--text-icon-sm: 0.875rem;
--text-icon-base: 1rem;
--text-icon-lg: 1.125rem;
--text-icon-xl: 1.25rem;
--text-icon-2xl: 1.5rem;
--text-icon-3xl: 1.75rem;
--text-icon-4xl: 2rem;
--text-icon-5xl: 2.25rem;
--leading-xs: 1.125rem;
--leading-sm: 1.25rem;
--leading-base: 1.5rem;
--leading-lg: 1.625rem;
--leading-xl: 1.75rem;
--leading-2xl: 2rem;
--leading-3xl: 2.25rem;
--leading-4xl: 2.5rem;
--leading-5xl: 3rem;
--leading-6xl: 3.75rem;
--leading-icon-xs: 0.75rem;
--leading-icon-sm: 0.875rem;
--leading-icon-base: 1rem;
--leading-icon-lg: 1.125rem;
--leading-icon-xl: 1.25rem;
--leading-icon-2xl: 1.5rem;
--leading-icon-3xl: 1.75rem;
--leading-icon-4xl: 2rem;
--leading-icon-5xl: 2.25rem;
--tracking-xs: 0;
--tracking-sm: 0;
--tracking-base: 0;
--tracking-lg: 0;
--tracking-xl: -0.019rem;
--tracking-2xl: -0.025rem;
--tracking-3xl: -0.031rem;
--tracking-4xl: -0.002rem;
--tracking-5xl: -0.063rem;
--tracking-6xl: -0.004rem;
--radius-xs: 0.125rem;
--radius-sm: 0.25rem;
--radius-md: 0.375rem;
--radius-lg: 0.5rem;
--radius-xl: 0.75rem;
}
}
@layer base {
*,
::after,
::before,
::backdrop,
::file-selector-button {
box-sizing: border-box;
margin: 0;
padding: 0;
border: 0 solid;
}
html,
:host {
line-height: 1.5;
-webkit-text-size-adjust: 100%;
tab-size: 4;
font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
font-feature-settings: var(--default-font-feature-settings, normal);
font-variation-settings: var(--default-font-variation-settings, normal);
-webkit-tap-highlight-color: transparent;
}
hr {
height: 0;
color: inherit;
border-top-width: 1px;
}
abbr:where([title]) {
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: inherit;
}
a {
color: inherit;
-webkit-text-decoration: inherit;
text-decoration: inherit;
}
b,
strong {
font-weight: bolder;
}
code,
kbd,
samp,
pre {
font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
font-feature-settings: var(--default-mono-font-feature-settings, normal);
font-variation-settings: var(--default-mono-font-variation-settings, normal);
font-size: 1em;
}
small {
font-size: 80%;
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
table {
text-indent: 0;
border-color: inherit;
border-collapse: collapse;
}
:-moz-focusring:where(:not(iframe)) {
outline: auto;
}
progress {
vertical-align: baseline;
}
summary {
display: list-item;
}
ol,
ul,
menu {
list-style: none;
}
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
display: block;
vertical-align: middle;
}
img,
video {
max-width: 100%;
height: auto;
}
button,
input,
select,
optgroup,
textarea,
::file-selector-button {
font: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
letter-spacing: inherit;
color: inherit;
border-radius: 0;
background-color: transparent;
opacity: 1;
}
:where(select:is([multiple], [size])) optgroup {
font-weight: bolder;
}
:where(select:is([multiple], [size])) optgroup option {
padding-inline-start: 20px;
}
::file-selector-button {
margin-inline-end: 4px;
}
::placeholder {
opacity: 1;
}
@supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
::placeholder {
color: currentcolor;
}
@supports (color: color-mix(in lab, red, red)) {
::placeholder {
color: color-mix(in oklab, currentcolor 50%, transparent);
}
}
}
textarea {
resize: vertical;
}
::-webkit-search-decoration {
-webkit-appearance: none;
}
::-webkit-date-and-time-value {
min-height: 1lh;
text-align: inherit;
}
::-webkit-datetime-edit {
display: inline-flex;
}
::-webkit-datetime-edit-fields-wrapper {
padding: 0;
}
::-webkit-datetime-edit,
::-webkit-datetime-edit-year-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-minute-field,
::-webkit-datetime-edit-second-field,
::-webkit-datetime-edit-millisecond-field,
::-webkit-datetime-edit-meridiem-field {
padding-block: 0;
}
::-webkit-calendar-picker-indicator {
line-height: 1;
}
:-moz-ui-invalid {
box-shadow: none;
}
button,
input:where([type=button], [type=reset], [type=submit]),
::file-selector-button {
appearance: button;
}
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
height: auto;
}
[hidden]:where(:not([hidden=until-found])) {
display: none !important;
}
}
@layer utilities {
.\@container {
container-type: inline-size;
}
.pointer-events-none {
pointer-events: none;
}
.visible {
visibility: visible;
}
.toast-notification {
position: relative;
display: flex;
width: calc(0.25rem * 88);
gap: var(--spacing-base);
padding: var(--spacing-lg);
border-radius: var(--radius-xs);
border-style: var(--tw-border-style);
border-width: 1px;
border-left-style: var(--tw-border-style);
border-left-width: 4px;
--tw-border-style: solid;
border-style: solid;
border-color: var(--color-border-information);
background-color: var(--color-background-information-ultra-light);
color: var(--color-text-default);
}
.toast-notification::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-lg);
font-weight: 600;
font-variation-settings: "FILL" 1, "opsz" 18;
line-height: var(--leading-icon-lg);
}
.toast-notification::before {
content: var(--tw-content);
--tw-leading: calc(0.25rem * 6);
line-height: calc(0.25rem * 6);
}
.toast-notification::before {
content: var(--tw-content);
color: var(--color-icon-information);
}
.toast-notification::before {
--tw-content: "\e88e";
content: var(--tw-content);
}
.toast-notification .toast-notification-content {
display: flex;
width: 100%;
flex-direction: column;
overflow: auto;
}
.toast-notification .toast-notification-content .toast-notification-title {
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 600;
font-style: normal;
font-size: var(--text-base);
line-height: var(--leading-base);
overflow-wrap: break-word;
color: var(--color-text-default);
}
.toast-notification .toast-notification-content .toast-notification-description {
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
overflow-wrap: break-word;
color: var(--color-text-default);
}
.toast-notification .toast-notification-close {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--color-icon-accent);
background-color: var(--color-background-transparent);
height: calc(0.25rem * 8);
width: calc(0.25rem * 8);
border-radius: var(--radius-md);
font-size: var(--text-icon-sm);
font-variation-settings: "FILL" 0, "opsz" 14;
line-height: var(--leading-icon-sm);
--tw-border-style: none;
border-style: none;
transition-property:
color,
background-color,
border-color,
outline-color,
text-decoration-color,
fill,
stroke,
--tw-gradient-from,
--tw-gradient-via,
--tw-gradient-to;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
height: calc(0.25rem * 6);
width: calc(0.25rem * 6);
border-radius: var(--radius-sm);
font-family: var(--font-icon);
font-size: var(--text-icon-xs);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 12;
line-height: var(--leading-icon-xs);
min-width: calc(0.25rem * 6);
color: var(--color-icon-default);
background-color: var(--color-background-information-ultra-light);
}
.toast-notification .toast-notification-close:focus-visible {
--tw-outline-style: none;
outline-style: none;
}
.toast-notification .toast-notification-close:disabled {
cursor: not-allowed;
}
.toast-notification .toast-notification-close:disabled {
color: var(--color-icon-disabled-light);
}
@media (hover: hover) {
.toast-notification .toast-notification-close:enabled:hover {
background-color: var(--color-background-action-hover);
}
}
.toast-notification .toast-notification-close:enabled:focus {
background-color: var(--color-background-action-focus);
}
.toast-notification .toast-notification-close:disabled {
background-color: var(--color-background-transparent);
}
.toast-notification .toast-notification-close::before {
--tw-content: "\e5cd";
content: var(--tw-content);
}
@media (hover: hover) {
.toast-notification .toast-notification-close:enabled:hover {
background-color: var(--color-background-information-ultra-light-hover);
}
}
.toast-notification .toast-notification-close:enabled:focus {
background-color: var(--color-background-information-ultra-light-focus);
}
.toast-notification.toast-notification-alert {
border-color: var(--color-border-alert);
background-color: var(--color-background-alert-ultra-light);
}
.toast-notification.toast-notification-alert::before {
content: var(--tw-content);
color: var(--color-icon-alert);
}
.toast-notification.toast-notification-alert::before {
--tw-content: "\e001";
content: var(--tw-content);
}
.toast-notification.toast-notification-alert > .toast-notification-close {
background-color: var(--color-background-alert-ultra-light);
}
@media (hover: hover) {
.toast-notification.toast-notification-alert > .toast-notification-close:enabled:hover {
background-color: var(--color-background-alert-ultra-light-hover);
}
}
.toast-notification.toast-notification-alert > .toast-notification-close:enabled:focus {
background-color: var(--color-background-alert-ultra-light-focus);
}
.toast-notification.toast-notification-warning {
border-color: var(--color-border-warning);
background-color: var(--color-background-warning-ultra-light);
}
.toast-notification.toast-notification-warning::before {
content: var(--tw-content);
color: var(--color-icon-warning);
}
.toast-notification.toast-notification-warning::before {
--tw-content: "\f083";
content: var(--tw-content);
}
.toast-notification.toast-notification-warning > .toast-notification-close {
background-color: var(--color-background-warning-ultra-light);
}
@media (hover: hover) {
.toast-notification.toast-notification-warning > .toast-notification-close:enabled:hover {
background-color: var(--color-background-warning-ultra-light-hover);
}
}
.toast-notification.toast-notification-warning > .toast-notification-close:enabled:focus {
background-color: var(--color-background-warning-ultra-light-focus);
}
.toast-notification.toast-notification-success {
border-color: var(--color-border-success);
background-color: var(--color-background-success-ultra-light);
}
.toast-notification.toast-notification-success::before {
content: var(--tw-content);
color: var(--color-icon-success);
}
.toast-notification.toast-notification-success::before {
--tw-content: "\e86c";
content: var(--tw-content);
}
.toast-notification.toast-notification-success > .toast-notification-close {
background-color: var(--color-background-success-ultra-light);
}
@media (hover: hover) {
.toast-notification.toast-notification-success > .toast-notification-close:enabled:hover {
background-color: var(--color-background-success-ultra-light-hover);
}
}
.toast-notification.toast-notification-success > .toast-notification-close:enabled:focus {
background-color: var(--color-background-success-ultra-light-focus);
}
.toast-notification.toast-notification-loading {
border-color: var(--color-border-information);
background-color: var(--color-background-information-ultra-light);
color: var(--color-text-default);
}
.toast-notification.toast-notification-loading::before {
content: var(--tw-content);
color: var(--color-icon-transparent);
}
.toast-notification.toast-notification-loading > .spinner {
height: calc(0.25rem * 3);
width: calc(0.25rem * 3);
border-color: var(--color-icon-information);
border-right-color: var(--color-border-transparent);
position: absolute;
top: calc(0.25rem * 4);
}
.absolute {
position: absolute;
}
.fixed {
position: fixed;
}
.relative {
position: relative;
}
.static {
position: static;
}
.sticky {
position: sticky;
}
.top-0 {
top: 0px;
}
.right-0 {
right: 0px;
}
.bottom-0 {
bottom: 0px;
}
.left-0 {
left: 0px;
}
.container {
width: 100%;
}
@media (min-width: 0rem) {
.container {
max-width: 0rem;
}
}
@media (min-width: 39rem) {
.container {
max-width: 39rem;
}
}
@media (min-width: 66rem) {
.container {
max-width: 66rem;
}
}
@media (min-width: 83rem) {
.container {
max-width: 83rem;
}
}
@media (min-width: 99rem) {
.container {
max-width: 99rem;
}
}
.m-auto {
margin: auto;
}
.mt-auto {
margin-top: auto;
}
.mr-0 {
margin-right: 0px;
}
.mr-\[20rem\] {
margin-right: 20rem;
}
.mr-sm {
margin-right: var(--spacing-sm);
}
.mb-0 {
margin-bottom: 0px;
}
.ml-\[20rem\] {
margin-left: 20rem;
}
.ml-base {
margin-left: var(--spacing-base);
}
.block {
display: block;
}
.flex {
display: flex;
}
.hidden {
display: none;
}
.hidden\! {
display: none !important;
}
.inline {
display: inline;
}
.table {
display: table;
}
.size-full {
width: 100%;
height: 100%;
}
.h-8 {
height: calc(var(--spacing) * 8);
}
.h-10 {
height: calc(var(--spacing) * 10);
}
.h-fit {
height: fit-content;
}
.h-full {
height: 100%;
}
.min-h-14 {
min-height: calc(var(--spacing) * 14);
}
.min-h-\[400px\] {
min-height: 400px;
}
.w-10 {
width: calc(var(--spacing) * 10);
}
.w-fit {
width: fit-content;
}
.w-full {
width: 100%;
}
.w-full\! {
width: 100% !important;
}
.max-w-none {
max-width: none;
}
.min-w-0 {
min-width: 0px;
}
.min-w-8 {
min-width: calc(var(--spacing) * 8);
}
.flex-1 {
flex: 1;
}
.shrink {
flex-shrink: 1;
}
.shrink-0 {
flex-shrink: 0;
}
.grow {
flex-grow: 1;
}
.transform {
transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
}
.tabs .tabs-tab-disabled.tabs-tab {
cursor: not-allowed;
color: var(--color-text-disabled);
border-color: var(--color-border-transparent);
}
@media (hover: hover) {
.tabs .tabs-tab-disabled.tabs-tab:hover {
border-color: var(--color-border-transparent);
}
}
.tabs .tabs-tab-disabled.tabs-tab:focus {
border-color: var(--color-border-transparent);
}
.tabs .tabs-tab-disabled.tabs-tab .tabs-tab-label {
color: var(--color-text-disabled);
}
.tabs .tabs-tab-disabled.tabs-tab .tabs-tab-icon {
color: var(--color-icon-disabled);
}
.date-picker-day-current.date-picker-day {
cursor: pointer;
background-color: var(--color-background-action-focus);
color: var(--color-text-default);
}
@media (hover: hover) {
.date-picker-day-current.date-picker-day:hover {
background-color: var(--color-background-action-focus);
}
}
.date-picker-day-current.date-picker-day:focus {
background-color: var(--color-background-action-focus);
}
.date-picker-day-disabled.date-picker-day {
cursor: not-allowed;
background-color: var(--color-background-default);
color: var(--color-text-disabled);
}
@media (hover: hover) {
.date-picker-day-disabled.date-picker-day:hover {
background-color: var(--color-background-default);
}
}
.date-picker-day-disabled.date-picker-day:focus {
background-color: var(--color-background-default);
}
.date-picker-day-outside.date-picker-day {
cursor: pointer;
background-color: var(--color-background-default);
color: var(--color-text-light);
}
@media (hover: hover) {
.date-picker-day-outside.date-picker-day:hover {
background-color: var(--color-background-default);
}
}
.date-picker-day-outside.date-picker-day:focus {
background-color: var(--color-background-default);
}
.date-picker-day-selected.date-picker-day {
cursor: pointer;
background-color: var(--color-background-accent);
color: var(--color-text-inverted);
}
@media (hover: hover) {
.date-picker-day-selected.date-picker-day:hover {
background-color: var(--color-background-accent);
}
}
.date-picker-day-selected.date-picker-day:focus {
background-color: var(--color-background-accent);
}
.cursor-not-allowed {
cursor: not-allowed;
}
.cursor-pointer {
cursor: pointer;
}
.resize {
resize: both;
}
.scrollbar-none {
scrollbar-width: none;
}
.flex-col {
flex-direction: column;
}
.flex-row {
flex-direction: row;
}
.flex-nowrap {
flex-wrap: nowrap;
}
.flex-wrap {
flex-wrap: wrap;
}
.items-baseline {
align-items: baseline;
}
.items-center {
align-items: center;
}
.items-start {
align-items: flex-start;
}
.items-stretch {
align-items: stretch;
}
.justify-between {
justify-content: space-between;
}
.justify-center {
justify-content: center;
}
.justify-end {
justify-content: flex-end;
}
.justify-start {
justify-content: flex-start;
}
.gap-base {
gap: var(--spacing-base);
}
.gap-lg {
gap: var(--spacing-lg);
}
.gap-md\! {
gap: var(--spacing-md) !important;
}
.gap-sm {
gap: var(--spacing-sm);
}
.gap-xl {
gap: var(--spacing-xl);
}
.gap-xs {
gap: var(--spacing-xs);
}
.self-center {
align-self: center;
}
.overflow-auto {
overflow: auto;
}
.overflow-hidden {
overflow: hidden;
}
.overflow-visible {
overflow: visible;
}
.overflow-x-auto {
overflow-x: auto;
}
.overflow-x-hidden {
overflow-x: hidden;
}
.overflow-y-auto {
overflow-y: auto;
}
.overflow-y-visible {
overflow-y: visible;
}
.rounded-full {
border-radius: calc(infinity * 1px);
}
.rounded-md {
border-radius: var(--radius-md);
}
.rounded-sm {
border-radius: var(--radius-sm);
}
.border {
border-style: var(--tw-border-style);
border-width: 1px;
}
.border-0 {
border-style: var(--tw-border-style);
border-width: 0px;
}
.border-2 {
border-style: var(--tw-border-style);
border-width: 2px;
}
.border-4 {
border-style: var(--tw-border-style);
border-width: 4px;
}
.border-\[1px\] {
border-style: var(--tw-border-style);
border-width: 1px;
}
.border-t-0 {
border-top-style: var(--tw-border-style);
border-top-width: 0px;
}
.border-r {
border-right-style: var(--tw-border-style);
border-right-width: 1px;
}
.border-r\! {
border-right-style: var(--tw-border-style) !important;
border-right-width: 1px !important;
}
.border-b-0 {
border-bottom-style: var(--tw-border-style);
border-bottom-width: 0px;
}
.border-b-2 {
border-bottom-style: var(--tw-border-style);
border-bottom-width: 2px;
}
.border-l {
border-left-style: var(--tw-border-style);
border-left-width: 1px;
}
.border-l\! {
border-left-style: var(--tw-border-style) !important;
border-left-width: 1px !important;
}
.border-none {
--tw-border-style: none;
border-style: none;
}
.tabs .tabs-tab-selected.tabs-tab {
border-color: var(--color-border-accent);
}
@media (hover: hover) {
.tabs .tabs-tab-selected.tabs-tab:hover {
border-color: var(--color-border-accent);
}
}
.tabs .tabs-tab-selected.tabs-tab:focus {
border-color: var(--color-border-accent);
}
.tabs .tabs-tab-selected.tabs-tab .tabs-tab-label {
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 600;
font-style: normal;
font-size: var(--text-base);
line-height: var(--leading-base);
}
.border-border-accent {
border-color: var(--color-border-accent);
}
.border-border-alert {
border-color: var(--color-border-alert);
}
.border-border-information {
border-color: var(--color-border-information);
}
.border-border-light {
border-color: var(--color-border-light);
}
.border-border-success {
border-color: var(--color-border-success);
}
.border-border-ultra-light {
border-color: var(--color-border-ultra-light);
}
.border-border-warning {
border-color: var(--color-border-warning);
}
.border-r-background-transparent {
border-right-color: var(--color-background-transparent);
}
.bg-background-accent {
background-color: var(--color-background-accent);
}
.bg-background-action-hover {
background-color: var(--color-background-action-hover);
}
.bg-background-default {
background-color: var(--color-background-default);
}
.bg-background-gray-ultra-light {
background-color: var(--color-background-gray-ultra-light);
}
.bg-background-highlight {
background-color: var(--color-background-highlight);
}
.bg-none {
background-image: none;
}
.object-cover {
object-fit: cover;
}
.object-top {
object-position: top;
}
.p-0 {
padding: 0px;
}
.p-0\! {
padding: 0px !important;
}
.p-base {
padding: var(--spacing-base);
}
.p-sm {
padding: var(--spacing-sm);
}
.p-xs {
padding: var(--spacing-xs);
}
.px-base {
padding-inline: var(--spacing-base);
}
.px-sm {
padding-inline: var(--spacing-sm);
}
.py-2xl {
padding-block: var(--spacing-2xl);
}
.py-base {
padding-block: var(--spacing-base);
}
.pt-base {
padding-top: var(--spacing-base);
}
.pr-base {
padding-right: var(--spacing-base);
}
.pr-sm {
padding-right: var(--spacing-sm);
}
.pb-0\! {
padding-bottom: 0px !important;
}
.pb-base {
padding-bottom: var(--spacing-base);
}
.pb-sm {
padding-bottom: var(--spacing-sm);
}
.pl-0 {
padding-left: 0px;
}
.pl-base {
padding-left: var(--spacing-base);
}
.pl-sm {
padding-left: var(--spacing-sm);
}
.text-left {
text-align: left;
}
.text-start {
text-align: start;
}
.align-middle {
vertical-align: middle;
}
.text-base-bold {
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 600;
font-style: normal;
font-size: var(--text-base);
line-height: var(--leading-base);
}
.tabs .tabs-tab .tabs-tab-icon {
font-family: var(--font-icon);
font-size: var(--text-icon-lg);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 18;
line-height: var(--leading-icon-lg);
color: var(--color-icon-default);
}
.\!icon-2xl {
font-family: var(--font-icon) !important;
font-size: var(--text-icon-2xl) !important;
font-weight: 400 !important;
font-variation-settings: "FILL" 0, "opsz" 24 !important;
line-height: var(--leading-icon-2xl) !important;
}
.icon-2xl {
font-family: var(--font-icon);
font-size: var(--text-icon-2xl);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 24;
line-height: var(--leading-icon-2xl);
}
.icon-3xl {
font-family: var(--font-icon);
font-size: var(--text-icon-3xl);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 28;
line-height: var(--leading-icon-3xl);
}
.icon-4xl {
font-family: var(--font-icon);
font-size: var(--text-icon-4xl);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 32;
line-height: var(--leading-icon-4xl);
}
.icon-5xl {
font-family: var(--font-icon);
font-size: var(--text-icon-5xl);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 36;
line-height: var(--leading-icon-5xl);
}
.icon-base {
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 16;
line-height: var(--leading-icon-base);
}
.icon-lg {
font-family: var(--font-icon);
font-size: var(--text-icon-lg);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 18;
line-height: var(--leading-icon-lg);
}
.icon-sm {
font-family: var(--font-icon);
font-size: var(--text-icon-sm);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 14;
line-height: var(--leading-icon-sm);
}
.icon-xl {
font-family: var(--font-icon);
font-size: var(--text-icon-xl);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 20;
line-height: var(--leading-icon-xl);
}
.icon-xs {
font-family: var(--font-icon);
font-size: var(--text-icon-xs);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 12;
line-height: var(--leading-icon-xs);
}
.text-3xl {
font-family: var(--font-default);
letter-spacing: var(--tracking-3xl);
font-weight: 600;
font-style: normal;
}
.text-base {
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
}
.text-sm {
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
}
.text-xl {
font-family: var(--font-default);
letter-spacing: var(--tracking-xl);
font-weight: 600;
font-style: normal;
}
.text-xs {
font-family: var(--font-default);
letter-spacing: var(--tracking-xs);
font-weight: 400;
font-style: normal;
}
.text-3xl {
font-size: var(--text-3xl);
line-height: var(--tw-leading, var(--leading-3xl));
}
.text-base {
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
}
.text-sm {
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
}
.text-xl {
font-size: var(--text-xl);
line-height: var(--tw-leading, var(--leading-xl));
}
.text-xs {
font-size: var(--text-xs);
line-height: var(--tw-leading, var(--leading-xs));
}
.text-icon-3xl {
font-size: var(--text-icon-3xl);
}
.font-bold {
--tw-font-weight: var(--font-weight-bold);
font-weight: var(--font-weight-bold);
}
.font-semibold {
--tw-font-weight: var(--font-weight-semibold);
font-weight: var(--font-weight-semibold);
}
.text-wrap {
text-wrap: wrap;
}
.date-picker-header-button-next.date-picker-header-button::before {
color: var(--color-icon-accent);
--tw-content: "\e5cc";
content: var(--tw-content);
}
.date-picker-header-button-previous.date-picker-header-button::before {
color: var(--color-icon-accent);
--tw-content: "\e5cb";
content: var(--tw-content);
}
.text-icon-alert {
color: var(--color-icon-alert);
}
.text-icon-alert-dark {
color: var(--color-icon-alert-dark);
}
.text-icon-success {
color: var(--color-icon-success);
}
.text-icon-success-dark {
color: var(--color-icon-success-dark);
}
.text-icon-warning {
color: var(--color-icon-warning);
}
.text-icon-warning-dark {
color: var(--color-icon-warning-dark);
}
.text-text-accent {
color: var(--color-text-accent);
}
.text-text-disabled {
color: var(--color-text-disabled);
}
.text-text-disabled\! {
color: var(--color-text-disabled) !important;
}
.text-text-light {
color: var(--color-text-light);
}
.underline {
text-decoration-line: underline;
}
.outline {
outline-style: var(--tw-outline-style);
outline-width: 1px;
}
.blur {
--tw-blur: blur(8px);
filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
}
.filter {
filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
}
.ease-in-out {
--tw-ease: var(--ease-in-out);
transition-timing-function: var(--ease-in-out);
}
.select-none {
-webkit-user-select: none;
user-select: none;
}
@media (hover: hover) {
.hover\:bg-background-default:hover {
background-color: var(--color-background-default);
}
}
@media (min-width: 39rem) {
.sm\:relative {
position: relative;
}
.sm\:flex {
display: flex;
}
.sm\:max-w-\[400px\] {
max-width: 400px;
}
.sm\:gap-lg {
gap: var(--spacing-lg);
}
.sm\:p-2xl {
padding: var(--spacing-2xl);
}
.sm\:p-lg {
padding: var(--spacing-lg);
}
.sm\:pb-2xl {
padding-bottom: var(--spacing-2xl);
}
}
@media (min-width: 66rem) {
.md\:flex {
display: flex;
}
.md\:gap-2xl {
gap: var(--spacing-2xl);
}
.md\:p-2xl {
padding: var(--spacing-2xl);
}
.md\:p-base {
padding: var(--spacing-base);
}
}
@media (orientation: portrait) {
.portrait\:gap-3xl {
gap: var(--spacing-3xl);
}
}
@media (orientation: landscape) {
.landscape\:gap-base {
gap: var(--spacing-base);
}
}
@media (min-width: 66rem) {
@media (orientation: landscape) {
.md\:landscape\:max-w-\[600px\] {
max-width: 600px;
}
}
}
@media (orientation: landscape) {
@media (min-width: 66rem) {
.landscape\:md\:gap-2xl {
gap: var(--spacing-2xl);
}
}
}
}
@layer ionic {
:root {
--ion-color-primary: #0054e9;
--ion-color-primary-rgb:
0,
84,
233;
--ion-color-primary-contrast: #fff;
--ion-color-primary-contrast-rgb:
255,
255,
255;
--ion-color-primary-shade: #004acd;
--ion-color-primary-tint: #1a65eb;
--ion-color-secondary: #0163aa;
--ion-color-secondary-rgb:
1,
99,
170;
--ion-color-secondary-contrast: #fff;
--ion-color-secondary-contrast-rgb:
255,
255,
255;
--ion-color-secondary-shade: #015796;
--ion-color-secondary-tint: #1a73b3;
--ion-color-tertiary: #6030ff;
--ion-color-tertiary-rgb:
96,
48,
255;
--ion-color-tertiary-contrast: #fff;
--ion-color-tertiary-contrast-rgb:
255,
255,
255;
--ion-color-tertiary-shade: #542ae0;
--ion-color-tertiary-tint: #7045ff;
--ion-color-success: #2dd55b;
--ion-color-success-rgb:
45,
213,
91;
--ion-color-success-contrast: #000;
--ion-color-success-contrast-rgb:
0,
0,
0;
--ion-color-success-shade: #28bb50;
--ion-color-success-tint: #42d96b;
--ion-color-warning: #ffc409;
--ion-color-warning-rgb:
255,
196,
9;
--ion-color-warning-contrast: #000;
--ion-color-warning-contrast-rgb:
0,
0,
0;
--ion-color-warning-shade: #e0ac08;
--ion-color-warning-tint: #ffca22;
--ion-color-danger: #c5000f;
--ion-color-danger-rgb:
197,
0,
15;
--ion-color-danger-contrast: #fff;
--ion-color-danger-contrast-rgb:
255,
255,
255;
--ion-color-danger-shade: #ad000d;
--ion-color-danger-tint: #cb1a27;
--ion-color-light: #f4f5f8;
--ion-color-light-rgb:
244,
245,
248;
--ion-color-light-contrast: #000;
--ion-color-light-contrast-rgb:
0,
0,
0;
--ion-color-light-shade: #d7d8da;
--ion-color-light-tint: #f5f6f9;
--ion-color-medium: #636469;
--ion-color-medium-rgb:
99,
100,
105;
--ion-color-medium-contrast: #fff;
--ion-color-medium-contrast-rgb:
255,
255,
255;
--ion-color-medium-shade: #57585c;
--ion-color-medium-tint: #737478;
--ion-color-dark: #222428;
--ion-color-dark-rgb:
34,
36,
40;
--ion-color-dark-contrast: #fff;
--ion-color-dark-contrast-rgb:
255,
255,
255;
--ion-color-dark-shade: #1e2023;
--ion-color-dark-tint: #383a3e;
}
html.ios {
--ion-default-font:
-apple-system,
BlinkMacSystemFont,
"Helvetica Neue",
"Roboto",
sans-serif;
}
html.md {
--ion-default-font:
"Roboto",
"Helvetica Neue",
sans-serif;
}
html {
--ion-dynamic-font: -apple-system-body;
--ion-font-family: var(--ion-default-font);
}
body {
background: var(--ion-background-color);
color: var(--ion-text-color);
}
body.backdrop-no-scroll {
overflow: hidden;
}
html.ios ion-modal.modal-card ion-header ion-toolbar:first-of-type,
html.ios ion-modal.modal-sheet ion-header ion-toolbar:first-of-type,
html.ios ion-modal ion-footer ion-toolbar:first-of-type,
html.ios ion-footer.modal-footer-moving ion-toolbar:first-of-type {
padding-top: 6px;
}
html.ios ion-modal.modal-card ion-header ion-toolbar:last-of-type,
html.ios ion-modal.modal-sheet ion-header ion-toolbar:last-of-type {
padding-bottom: 6px;
}
html.ios ion-modal ion-toolbar,
html.ios .modal-footer-moving ion-toolbar {
padding-right: calc(var(--ion-safe-area-right) + 8px);
padding-left: calc(var(--ion-safe-area-left) + 8px);
}
@media screen and (min-width: 768px) {
html.ios ion-modal.modal-card:first-of-type {
--backdrop-opacity: 0.18;
}
}
ion-modal.modal-default.show-modal ~ ion-modal.modal-default {
--backdrop-opacity: 0;
--box-shadow: none;
}
html.ios ion-modal.modal-card .ion-page {
border-top-left-radius: var(--border-radius);
}
.ion-color-primary {
--ion-color-base: var(--ion-color-primary, #0054e9) !important;
--ion-color-base-rgb: var(--ion-color-primary-rgb, 0, 84, 233) !important;
--ion-color-contrast: var(--ion-color-primary-contrast, #fff) !important;
--ion-color-contrast-rgb: var(--ion-color-primary-contrast-rgb, 255, 255, 255) !important;
--ion-color-shade: var(--ion-color-primary-shade, #004acd) !important;
--ion-color-tint: var(--ion-color-primary-tint, #1a65eb) !important;
}
.ion-color-secondary {
--ion-color-base: var(--ion-color-secondary, #0163aa) !important;
--ion-color-base-rgb: var(--ion-color-secondary-rgb, 1, 99, 170) !important;
--ion-color-contrast: var(--ion-color-secondary-contrast, #fff) !important;
--ion-color-contrast-rgb: var(--ion-color-secondary-contrast-rgb, 255, 255, 255) !important;
--ion-color-shade: var(--ion-color-secondary-shade, #015796) !important;
--ion-color-tint: var(--ion-color-secondary-tint, #1a73b3) !important;
}
.ion-color-tertiary {
--ion-color-base: var(--ion-color-tertiary, #6030ff) !important;
--ion-color-base-rgb: var(--ion-color-tertiary-rgb, 96, 48, 255) !important;
--ion-color-contrast: var(--ion-color-tertiary-contrast, #fff) !important;
--ion-color-contrast-rgb: var(--ion-color-tertiary-contrast-rgb, 255, 255, 255) !important;
--ion-color-shade: var(--ion-color-tertiary-shade, #542ae0) !important;
--ion-color-tint: var(--ion-color-tertiary-tint, #7045ff) !important;
}
.ion-color-success {
--ion-color-base: var(--ion-color-success, #2dd55b) !important;
--ion-color-base-rgb: var(--ion-color-success-rgb, 45, 213, 91) !important;
--ion-color-contrast: var(--ion-color-success-contrast, #000) !important;
--ion-color-contrast-rgb: var(--ion-color-success-contrast-rgb, 0, 0, 0) !important;
--ion-color-shade: var(--ion-color-success-shade, #28bb50) !important;
--ion-color-tint: var(--ion-color-success-tint, #42d96b) !important;
}
.ion-color-warning {
--ion-color-base: var(--ion-color-warning, #ffc409) !important;
--ion-color-base-rgb: var(--ion-color-warning-rgb, 255, 196, 9) !important;
--ion-color-contrast: var(--ion-color-warning-contrast, #000) !important;
--ion-color-contrast-rgb: var(--ion-color-warning-contrast-rgb, 0, 0, 0) !important;
--ion-color-shade: var(--ion-color-warning-shade, #e0ac08) !important;
--ion-color-tint: var(--ion-color-warning-tint, #ffca22) !important;
}
.ion-color-danger {
--ion-color-base: var(--ion-color-danger, #c5000f) !important;
--ion-color-base-rgb: var(--ion-color-danger-rgb, 197, 0, 15) !important;
--ion-color-contrast: var(--ion-color-danger-contrast, #fff) !important;
--ion-color-contrast-rgb: var(--ion-color-danger-contrast-rgb, 255, 255, 255) !important;
--ion-color-shade: var(--ion-color-danger-shade, #ad000d) !important;
--ion-color-tint: var(--ion-color-danger-tint, #cb1a27) !important;
}
.ion-color-light {
--ion-color-base: var(--ion-color-light, #f4f5f8) !important;
--ion-color-base-rgb: var(--ion-color-light-rgb, 244, 245, 248) !important;
--ion-color-contrast: var(--ion-color-light-contrast, #000) !important;
--ion-color-contrast-rgb: var(--ion-color-light-contrast-rgb, 0, 0, 0) !important;
--ion-color-shade: var(--ion-color-light-shade, #d7d8da) !important;
--ion-color-tint: var(--ion-color-light-tint, #f5f6f9) !important;
}
.ion-color-medium {
--ion-color-base: var(--ion-color-medium, #636469) !important;
--ion-color-base-rgb: var(--ion-color-medium-rgb, 99, 100, 105) !important;
--ion-color-contrast: var(--ion-color-medium-contrast, #fff) !important;
--ion-color-contrast-rgb: var(--ion-color-medium-contrast-rgb, 255, 255, 255) !important;
--ion-color-shade: var(--ion-color-medium-shade, #57585c) !important;
--ion-color-tint: var(--ion-color-medium-tint, #737478) !important;
}
.ion-color-dark {
--ion-color-base: var(--ion-color-dark, #222428) !important;
--ion-color-base-rgb: var(--ion-color-dark-rgb, 34, 36, 40) !important;
--ion-color-contrast: var(--ion-color-dark-contrast, #fff) !important;
--ion-color-contrast-rgb: var(--ion-color-dark-contrast-rgb, 255, 255, 255) !important;
--ion-color-shade: var(--ion-color-dark-shade, #1e2023) !important;
--ion-color-tint: var(--ion-color-dark-tint, #383a3e) !important;
}
.ion-page {
left: 0;
right: 0;
top: 0;
bottom: 0;
display: flex;
position: absolute;
flex-direction: column;
justify-content: space-between;
contain: layout size style;
z-index: 0;
}
.ion-page.ion-page-overlay-passthrough {
pointer-events: none;
}
ion-modal > .ion-page {
position: relative;
contain: layout style;
height: 100%;
}
.split-pane-visible > .ion-page.split-pane-main {
position: relative;
}
ion-route,
ion-route-redirect,
ion-router,
ion-select-option,
ion-nav-controller,
ion-menu-controller,
ion-action-sheet-controller,
ion-alert-controller,
ion-loading-controller,
ion-modal-controller,
ion-picker-controller,
ion-popover-controller,
ion-toast-controller,
.ion-page-hidden {
display: none !important;
}
.ion-page-invisible {
opacity: 0;
}
.can-go-back > ion-header ion-back-button {
display: block;
}
html.plt-ios.plt-hybrid,
html.plt-ios.plt-pwa {
--ion-statusbar-padding: 20px;
}
@supports (padding-top: 20px) {
html {
--ion-safe-area-top: var(--ion-statusbar-padding);
}
}
@supports (padding-top: env(safe-area-inset-top)) {
html {
--ion-safe-area-top: var(--safe-area-inset-top, env(safe-area-inset-top));
--ion-safe-area-bottom: var(--safe-area-inset-bottom, env(safe-area-inset-bottom));
--ion-safe-area-left: var(--safe-area-inset-left, env(safe-area-inset-left));
--ion-safe-area-right: var(--safe-area-inset-right, env(safe-area-inset-right));
}
}
ion-card.ion-color .ion-inherit-color,
ion-card-header.ion-color .ion-inherit-color {
color: inherit;
}
.menu-content {
transform: translate3d(0, 0, 0);
}
.menu-content-open {
cursor: pointer;
touch-action: manipulation;
pointer-events: none;
overflow-y: hidden;
}
.menu-content-open ion-content {
--overflow: hidden;
}
.menu-content-open .ion-content-scroll-host {
overflow: hidden;
}
.ios .menu-content-reveal {
box-shadow: -8px 0 42px rgba(0, 0, 0, .08);
}
[dir=rtl].ios .menu-content-reveal {
box-shadow: 8px 0 42px rgba(0, 0, 0, .08);
}
.md .menu-content-reveal {
box-shadow: 4px 0px 16px rgba(0, 0, 0, .18);
}
.md .menu-content-push {
box-shadow: 4px 0px 16px rgba(0, 0, 0, .18);
}
ion-accordion-group.accordion-group-expand-inset > ion-accordion:first-of-type {
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
ion-accordion-group.accordion-group-expand-inset > ion-accordion:last-of-type {
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}
ion-accordion-group > ion-accordion:last-of-type ion-item[slot=header] {
--border-width: 0px;
}
ion-accordion.accordion-animated > [slot=header] .ion-accordion-toggle-icon {
transition: 300ms transform cubic-bezier(0.25, 0.8, 0.5, 1);
}
@media (prefers-reduced-motion: reduce) {
ion-accordion .ion-accordion-toggle-icon {
transition: none !important;
}
}
ion-accordion.accordion-expanding > [slot=header] .ion-accordion-toggle-icon,
ion-accordion.accordion-expanded > [slot=header] .ion-accordion-toggle-icon {
transform: rotate(180deg);
}
ion-accordion-group.accordion-group-expand-inset.md > ion-accordion.accordion-previous ion-item[slot=header] {
--border-width: 0px;
--inner-border-width: 0px;
}
ion-accordion-group.accordion-group-expand-inset.md > ion-accordion.accordion-expanding:first-of-type,
ion-accordion-group.accordion-group-expand-inset.md > ion-accordion.accordion-expanded:first-of-type {
margin-top: 0;
}
ion-input input::-webkit-date-and-time-value {
text-align: start;
}
.ion-datetime-button-overlay {
--width: fit-content;
--height: fit-content;
}
.ion-datetime-button-overlay ion-datetime.datetime-grid {
width: 320px;
min-height: 320px;
}
[ion-last-focus],
header[tabindex="-1"]:focus,
[role=banner][tabindex="-1"]:focus,
main[tabindex="-1"]:focus,
[role=main][tabindex="-1"]:focus,
h1[tabindex="-1"]:focus,
[role=heading][aria-level="1"][tabindex="-1"]:focus {
outline: none;
}
.popover-viewport:has(> ion-content) {
overflow: hidden;
}
@supports not selector(:has(> ion-content)) {
.popover-viewport {
overflow: hidden;
}
}
* {
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
}
html {
width: 100%;
height: 100%;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
html.ion-ce body {
display: block;
}
html.plt-pwa {
height: 100vh;
}
body {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
margin-left: 0;
margin-right: 0;
margin-top: 0;
margin-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
padding-bottom: 0;
position: fixed;
width: 100%;
max-width: 100%;
height: 100%;
max-height: 100%;
transform: translateZ(0);
text-rendering: optimizeLegibility;
overflow: hidden;
touch-action: manipulation;
-webkit-user-drag: none;
-ms-content-zooming: none;
word-wrap: break-word;
overscroll-behavior-y: none;
-webkit-text-size-adjust: none;
text-size-adjust: none;
}
.ion-hide {
display: none !important;
}
.ion-hide-up {
display: none !important;
}
.ion-hide-down {
display: none !important;
}
@media (min-width: 576px) {
.ion-hide-sm-up {
display: none !important;
}
}
@media (max-width: 575.98px) {
.ion-hide-sm-down {
display: none !important;
}
}
@media (min-width: 768px) {
.ion-hide-md-up {
display: none !important;
}
}
@media (max-width: 767.98px) {
.ion-hide-md-down {
display: none !important;
}
}
@media (min-width: 992px) {
.ion-hide-lg-up {
display: none !important;
}
}
@media (max-width: 991.98px) {
.ion-hide-lg-down {
display: none !important;
}
}
@media (min-width: 1200px) {
.ion-hide-xl-up {
display: none !important;
}
}
@media (max-width: 1199.98px) {
.ion-hide-xl-down {
display: none !important;
}
}
.ion-display-none {
display: none !important;
}
@media (min-width: 576px) {
.ion-display-sm-none {
display: none !important;
}
}
@media (min-width: 768px) {
.ion-display-md-none {
display: none !important;
}
}
@media (min-width: 992px) {
.ion-display-lg-none {
display: none !important;
}
}
@media (min-width: 1200px) {
.ion-display-xl-none {
display: none !important;
}
}
.ion-display-inline {
display: inline !important;
}
@media (min-width: 576px) {
.ion-display-sm-inline {
display: inline !important;
}
}
@media (min-width: 768px) {
.ion-display-md-inline {
display: inline !important;
}
}
@media (min-width: 992px) {
.ion-display-lg-inline {
display: inline !important;
}
}
@media (min-width: 1200px) {
.ion-display-xl-inline {
display: inline !important;
}
}
.ion-display-inline-block {
display: inline-block !important;
}
@media (min-width: 576px) {
.ion-display-sm-inline-block {
display: inline-block !important;
}
}
@media (min-width: 768px) {
.ion-display-md-inline-block {
display: inline-block !important;
}
}
@media (min-width: 992px) {
.ion-display-lg-inline-block {
display: inline-block !important;
}
}
@media (min-width: 1200px) {
.ion-display-xl-inline-block {
display: inline-block !important;
}
}
.ion-display-block {
display: block !important;
}
@media (min-width: 576px) {
.ion-display-sm-block {
display: block !important;
}
}
@media (min-width: 768px) {
.ion-display-md-block {
display: block !important;
}
}
@media (min-width: 992px) {
.ion-display-lg-block {
display: block !important;
}
}
@media (min-width: 1200px) {
.ion-display-xl-block {
display: block !important;
}
}
.ion-display-flex {
display: flex !important;
}
@media (min-width: 576px) {
.ion-display-sm-flex {
display: flex !important;
}
}
@media (min-width: 768px) {
.ion-display-md-flex {
display: flex !important;
}
}
@media (min-width: 992px) {
.ion-display-lg-flex {
display: flex !important;
}
}
@media (min-width: 1200px) {
.ion-display-xl-flex {
display: flex !important;
}
}
.ion-display-inline-flex {
display: inline-flex !important;
}
@media (min-width: 576px) {
.ion-display-sm-inline-flex {
display: inline-flex !important;
}
}
@media (min-width: 768px) {
.ion-display-md-inline-flex {
display: inline-flex !important;
}
}
@media (min-width: 992px) {
.ion-display-lg-inline-flex {
display: inline-flex !important;
}
}
@media (min-width: 1200px) {
.ion-display-xl-inline-flex {
display: inline-flex !important;
}
}
.ion-display-grid {
display: grid !important;
}
@media (min-width: 576px) {
.ion-display-sm-grid {
display: grid !important;
}
}
@media (min-width: 768px) {
.ion-display-md-grid {
display: grid !important;
}
}
@media (min-width: 992px) {
.ion-display-lg-grid {
display: grid !important;
}
}
@media (min-width: 1200px) {
.ion-display-xl-grid {
display: grid !important;
}
}
.ion-display-inline-grid {
display: inline-grid !important;
}
@media (min-width: 576px) {
.ion-display-sm-inline-grid {
display: inline-grid !important;
}
}
@media (min-width: 768px) {
.ion-display-md-inline-grid {
display: inline-grid !important;
}
}
@media (min-width: 992px) {
.ion-display-lg-inline-grid {
display: inline-grid !important;
}
}
@media (min-width: 1200px) {
.ion-display-xl-inline-grid {
display: inline-grid !important;
}
}
.ion-display-table {
display: table !important;
}
@media (min-width: 576px) {
.ion-display-sm-table {
display: table !important;
}
}
@media (min-width: 768px) {
.ion-display-md-table {
display: table !important;
}
}
@media (min-width: 992px) {
.ion-display-lg-table {
display: table !important;
}
}
@media (min-width: 1200px) {
.ion-display-xl-table {
display: table !important;
}
}
.ion-display-table-cell {
display: table-cell !important;
}
@media (min-width: 576px) {
.ion-display-sm-table-cell {
display: table-cell !important;
}
}
@media (min-width: 768px) {
.ion-display-md-table-cell {
display: table-cell !important;
}
}
@media (min-width: 992px) {
.ion-display-lg-table-cell {
display: table-cell !important;
}
}
@media (min-width: 1200px) {
.ion-display-xl-table-cell {
display: table-cell !important;
}
}
.ion-display-table-row {
display: table-row !important;
}
@media (min-width: 576px) {
.ion-display-sm-table-row {
display: table-row !important;
}
}
@media (min-width: 768px) {
.ion-display-md-table-row {
display: table-row !important;
}
}
@media (min-width: 992px) {
.ion-display-lg-table-row {
display: table-row !important;
}
}
@media (min-width: 1200px) {
.ion-display-xl-table-row {
display: table-row !important;
}
}
.ion-no-padding {
--padding-start: 0;
--padding-end: 0;
--padding-top: 0;
--padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
padding-bottom: 0;
}
.ion-padding {
--padding-start: var(--ion-padding, 16px);
--padding-end: var(--ion-padding, 16px);
--padding-top: var(--ion-padding, 16px);
--padding-bottom: var(--ion-padding, 16px);
-webkit-padding-start: var(--ion-padding, 16px);
padding-inline-start: var(--ion-padding, 16px);
-webkit-padding-end: var(--ion-padding, 16px);
padding-inline-end: var(--ion-padding, 16px);
padding-top: var(--ion-padding, 16px);
padding-bottom: var(--ion-padding, 16px);
}
.ion-padding-top {
--padding-top: var(--ion-padding, 16px);
padding-top: var(--ion-padding, 16px);
}
.ion-padding-start {
--padding-start: var(--ion-padding, 16px);
-webkit-padding-start: var(--ion-padding, 16px);
padding-inline-start: var(--ion-padding, 16px);
}
.ion-padding-end {
--padding-end: var(--ion-padding, 16px);
-webkit-padding-end: var(--ion-padding, 16px);
padding-inline-end: var(--ion-padding, 16px);
}
.ion-padding-bottom {
--padding-bottom: var(--ion-padding, 16px);
padding-bottom: var(--ion-padding, 16px);
}
.ion-padding-vertical {
--padding-top: var(--ion-padding, 16px);
--padding-bottom: var(--ion-padding, 16px);
padding-top: var(--ion-padding, 16px);
padding-bottom: var(--ion-padding, 16px);
}
.ion-padding-horizontal {
--padding-start: var(--ion-padding, 16px);
--padding-end: var(--ion-padding, 16px);
-webkit-padding-start: var(--ion-padding, 16px);
padding-inline-start: var(--ion-padding, 16px);
-webkit-padding-end: var(--ion-padding, 16px);
padding-inline-end: var(--ion-padding, 16px);
}
.ion-no-margin {
--margin-start: 0;
--margin-end: 0;
--margin-top: 0;
--margin-bottom: 0;
margin-left: 0;
margin-right: 0;
margin-top: 0;
margin-bottom: 0;
}
.ion-margin {
--margin-start: var(--ion-margin, 16px);
--margin-end: var(--ion-margin, 16px);
--margin-top: var(--ion-margin, 16px);
--margin-bottom: var(--ion-margin, 16px);
-webkit-margin-start: var(--ion-margin, 16px);
margin-inline-start: var(--ion-margin, 16px);
-webkit-margin-end: var(--ion-margin, 16px);
margin-inline-end: var(--ion-margin, 16px);
margin-top: var(--ion-margin, 16px);
margin-bottom: var(--ion-margin, 16px);
}
.ion-margin-top {
--margin-top: var(--ion-margin, 16px);
margin-top: var(--ion-margin, 16px);
}
.ion-margin-start {
--margin-start: var(--ion-margin, 16px);
-webkit-margin-start: var(--ion-margin, 16px);
margin-inline-start: var(--ion-margin, 16px);
}
.ion-margin-end {
--margin-end: var(--ion-margin, 16px);
-webkit-margin-end: var(--ion-margin, 16px);
margin-inline-end: var(--ion-margin, 16px);
}
.ion-margin-bottom {
--margin-bottom: var(--ion-margin, 16px);
margin-bottom: var(--ion-margin, 16px);
}
.ion-margin-vertical {
--margin-top: var(--ion-margin, 16px);
--margin-bottom: var(--ion-margin, 16px);
margin-top: var(--ion-margin, 16px);
margin-bottom: var(--ion-margin, 16px);
}
.ion-margin-horizontal {
--margin-start: var(--ion-margin, 16px);
--margin-end: var(--ion-margin, 16px);
-webkit-margin-start: var(--ion-margin, 16px);
margin-inline-start: var(--ion-margin, 16px);
-webkit-margin-end: var(--ion-margin, 16px);
margin-inline-end: var(--ion-margin, 16px);
}
.ion-float-left {
float: left !important;
}
.ion-float-right {
float: right !important;
}
.ion-float-start {
float: left !important;
}
:host-context([dir=rtl]) .ion-float-start {
float: right !important;
}
[dir=rtl] .ion-float-start {
float: right !important;
}
@supports selector(:dir(rtl)) {
.ion-float-start:dir(rtl) {
float: right !important;
}
}
.ion-float-end {
float: right !important;
}
:host-context([dir=rtl]) .ion-float-end {
float: left !important;
}
[dir=rtl] .ion-float-end {
float: left !important;
}
@supports selector(:dir(rtl)) {
.ion-float-end:dir(rtl) {
float: left !important;
}
}
@media (min-width: 576px) {
.ion-float-sm-left {
float: left !important;
}
.ion-float-sm-right {
float: right !important;
}
.ion-float-sm-start {
float: left !important;
}
:host-context([dir=rtl]) .ion-float-sm-start {
float: right !important;
}
[dir=rtl] .ion-float-sm-start {
float: right !important;
}
@supports selector(:dir(rtl)) {
.ion-float-sm-start:dir(rtl) {
float: right !important;
}
}
.ion-float-sm-end {
float: right !important;
}
:host-context([dir=rtl]) .ion-float-sm-end {
float: left !important;
}
[dir=rtl] .ion-float-sm-end {
float: left !important;
}
@supports selector(:dir(rtl)) {
.ion-float-sm-end:dir(rtl) {
float: left !important;
}
}
}
@media (min-width: 768px) {
.ion-float-md-left {
float: left !important;
}
.ion-float-md-right {
float: right !important;
}
.ion-float-md-start {
float: left !important;
}
:host-context([dir=rtl]) .ion-float-md-start {
float: right !important;
}
[dir=rtl] .ion-float-md-start {
float: right !important;
}
@supports selector(:dir(rtl)) {
.ion-float-md-start:dir(rtl) {
float: right !important;
}
}
.ion-float-md-end {
float: right !important;
}
:host-context([dir=rtl]) .ion-float-md-end {
float: left !important;
}
[dir=rtl] .ion-float-md-end {
float: left !important;
}
@supports selector(:dir(rtl)) {
.ion-float-md-end:dir(rtl) {
float: left !important;
}
}
}
@media (min-width: 992px) {
.ion-float-lg-left {
float: left !important;
}
.ion-float-lg-right {
float: right !important;
}
.ion-float-lg-start {
float: left !important;
}
:host-context([dir=rtl]) .ion-float-lg-start {
float: right !important;
}
[dir=rtl] .ion-float-lg-start {
float: right !important;
}
@supports selector(:dir(rtl)) {
.ion-float-lg-start:dir(rtl) {
float: right !important;
}
}
.ion-float-lg-end {
float: right !important;
}
:host-context([dir=rtl]) .ion-float-lg-end {
float: left !important;
}
[dir=rtl] .ion-float-lg-end {
float: left !important;
}
@supports selector(:dir(rtl)) {
.ion-float-lg-end:dir(rtl) {
float: left !important;
}
}
}
@media (min-width: 1200px) {
.ion-float-xl-left {
float: left !important;
}
.ion-float-xl-right {
float: right !important;
}
.ion-float-xl-start {
float: left !important;
}
:host-context([dir=rtl]) .ion-float-xl-start {
float: right !important;
}
[dir=rtl] .ion-float-xl-start {
float: right !important;
}
@supports selector(:dir(rtl)) {
.ion-float-xl-start:dir(rtl) {
float: right !important;
}
}
.ion-float-xl-end {
float: right !important;
}
:host-context([dir=rtl]) .ion-float-xl-end {
float: left !important;
}
[dir=rtl] .ion-float-xl-end {
float: left !important;
}
@supports selector(:dir(rtl)) {
.ion-float-xl-end:dir(rtl) {
float: left !important;
}
}
}
.ion-text-center {
text-align: center !important;
}
.ion-text-justify {
text-align: justify !important;
}
.ion-text-start {
text-align: start !important;
}
.ion-text-end {
text-align: end !important;
}
.ion-text-left {
text-align: left !important;
}
.ion-text-right {
text-align: right !important;
}
.ion-text-nowrap {
white-space: nowrap !important;
}
.ion-text-wrap {
white-space: normal !important;
}
@media (min-width: 576px) {
.ion-text-sm-center {
text-align: center !important;
}
.ion-text-sm-justify {
text-align: justify !important;
}
.ion-text-sm-start {
text-align: start !important;
}
.ion-text-sm-end {
text-align: end !important;
}
.ion-text-sm-left {
text-align: left !important;
}
.ion-text-sm-right {
text-align: right !important;
}
.ion-text-sm-nowrap {
white-space: nowrap !important;
}
.ion-text-sm-wrap {
white-space: normal !important;
}
}
@media (min-width: 768px) {
.ion-text-md-center {
text-align: center !important;
}
.ion-text-md-justify {
text-align: justify !important;
}
.ion-text-md-start {
text-align: start !important;
}
.ion-text-md-end {
text-align: end !important;
}
.ion-text-md-left {
text-align: left !important;
}
.ion-text-md-right {
text-align: right !important;
}
.ion-text-md-nowrap {
white-space: nowrap !important;
}
.ion-text-md-wrap {
white-space: normal !important;
}
}
@media (min-width: 992px) {
.ion-text-lg-center {
text-align: center !important;
}
.ion-text-lg-justify {
text-align: justify !important;
}
.ion-text-lg-start {
text-align: start !important;
}
.ion-text-lg-end {
text-align: end !important;
}
.ion-text-lg-left {
text-align: left !important;
}
.ion-text-lg-right {
text-align: right !important;
}
.ion-text-lg-nowrap {
white-space: nowrap !important;
}
.ion-text-lg-wrap {
white-space: normal !important;
}
}
@media (min-width: 1200px) {
.ion-text-xl-center {
text-align: center !important;
}
.ion-text-xl-justify {
text-align: justify !important;
}
.ion-text-xl-start {
text-align: start !important;
}
.ion-text-xl-end {
text-align: end !important;
}
.ion-text-xl-left {
text-align: left !important;
}
.ion-text-xl-right {
text-align: right !important;
}
.ion-text-xl-nowrap {
white-space: nowrap !important;
}
.ion-text-xl-wrap {
white-space: normal !important;
}
}
.ion-text-uppercase {
text-transform: uppercase !important;
}
.ion-text-lowercase {
text-transform: lowercase !important;
}
.ion-text-capitalize {
text-transform: capitalize !important;
}
@media (min-width: 576px) {
.ion-text-sm-uppercase {
text-transform: uppercase !important;
}
.ion-text-sm-lowercase {
text-transform: lowercase !important;
}
.ion-text-sm-capitalize {
text-transform: capitalize !important;
}
}
@media (min-width: 768px) {
.ion-text-md-uppercase {
text-transform: uppercase !important;
}
.ion-text-md-lowercase {
text-transform: lowercase !important;
}
.ion-text-md-capitalize {
text-transform: capitalize !important;
}
}
@media (min-width: 992px) {
.ion-text-lg-uppercase {
text-transform: uppercase !important;
}
.ion-text-lg-lowercase {
text-transform: lowercase !important;
}
.ion-text-lg-capitalize {
text-transform: capitalize !important;
}
}
@media (min-width: 1200px) {
.ion-text-xl-uppercase {
text-transform: uppercase !important;
}
.ion-text-xl-lowercase {
text-transform: lowercase !important;
}
.ion-text-xl-capitalize {
text-transform: capitalize !important;
}
}
.ion-align-content-start {
align-content: flex-start !important;
}
.ion-align-content-end {
align-content: flex-end !important;
}
.ion-align-content-center {
align-content: center !important;
}
.ion-align-content-between {
align-content: space-between !important;
}
.ion-align-content-around {
align-content: space-around !important;
}
.ion-align-content-stretch {
align-content: stretch !important;
}
@media (min-width: 576px) {
.ion-align-content-sm-start {
align-content: flex-start !important;
}
.ion-align-content-sm-end {
align-content: flex-end !important;
}
.ion-align-content-sm-center {
align-content: center !important;
}
.ion-align-content-sm-between {
align-content: space-between !important;
}
.ion-align-content-sm-around {
align-content: space-around !important;
}
.ion-align-content-sm-stretch {
align-content: stretch !important;
}
}
@media (min-width: 768px) {
.ion-align-content-md-start {
align-content: flex-start !important;
}
.ion-align-content-md-end {
align-content: flex-end !important;
}
.ion-align-content-md-center {
align-content: center !important;
}
.ion-align-content-md-between {
align-content: space-between !important;
}
.ion-align-content-md-around {
align-content: space-around !important;
}
.ion-align-content-md-stretch {
align-content: stretch !important;
}
}
@media (min-width: 992px) {
.ion-align-content-lg-start {
align-content: flex-start !important;
}
.ion-align-content-lg-end {
align-content: flex-end !important;
}
.ion-align-content-lg-center {
align-content: center !important;
}
.ion-align-content-lg-between {
align-content: space-between !important;
}
.ion-align-content-lg-around {
align-content: space-around !important;
}
.ion-align-content-lg-stretch {
align-content: stretch !important;
}
}
@media (min-width: 1200px) {
.ion-align-content-xl-start {
align-content: flex-start !important;
}
.ion-align-content-xl-end {
align-content: flex-end !important;
}
.ion-align-content-xl-center {
align-content: center !important;
}
.ion-align-content-xl-between {
align-content: space-between !important;
}
.ion-align-content-xl-around {
align-content: space-around !important;
}
.ion-align-content-xl-stretch {
align-content: stretch !important;
}
}
.ion-align-items-start {
align-items: start !important;
}
.ion-align-items-end {
align-items: end !important;
}
.ion-align-items-center {
align-items: center !important;
}
.ion-align-items-stretch {
align-items: stretch !important;
}
.ion-align-items-baseline {
align-items: baseline !important;
}
@media (min-width: 576px) {
.ion-align-items-sm-start {
align-items: start !important;
}
.ion-align-items-sm-end {
align-items: end !important;
}
.ion-align-items-sm-center {
align-items: center !important;
}
.ion-align-items-sm-stretch {
align-items: stretch !important;
}
.ion-align-items-sm-baseline {
align-items: baseline !important;
}
}
@media (min-width: 768px) {
.ion-align-items-md-start {
align-items: start !important;
}
.ion-align-items-md-end {
align-items: end !important;
}
.ion-align-items-md-center {
align-items: center !important;
}
.ion-align-items-md-stretch {
align-items: stretch !important;
}
.ion-align-items-md-baseline {
align-items: baseline !important;
}
}
@media (min-width: 992px) {
.ion-align-items-lg-start {
align-items: start !important;
}
.ion-align-items-lg-end {
align-items: end !important;
}
.ion-align-items-lg-center {
align-items: center !important;
}
.ion-align-items-lg-stretch {
align-items: stretch !important;
}
.ion-align-items-lg-baseline {
align-items: baseline !important;
}
}
@media (min-width: 1200px) {
.ion-align-items-xl-start {
align-items: start !important;
}
.ion-align-items-xl-end {
align-items: end !important;
}
.ion-align-items-xl-center {
align-items: center !important;
}
.ion-align-items-xl-stretch {
align-items: stretch !important;
}
.ion-align-items-xl-baseline {
align-items: baseline !important;
}
}
.ion-align-self-start {
align-self: start !important;
}
.ion-align-self-end {
align-self: end !important;
}
.ion-align-self-center {
align-self: center !important;
}
.ion-align-self-stretch {
align-self: stretch !important;
}
.ion-align-self-baseline {
align-self: baseline !important;
}
.ion-align-self-auto {
align-self: auto !important;
}
@media (min-width: 576px) {
.ion-align-self-sm-start {
align-self: start !important;
}
.ion-align-self-sm-end {
align-self: end !important;
}
.ion-align-self-sm-center {
align-self: center !important;
}
.ion-align-self-sm-stretch {
align-self: stretch !important;
}
.ion-align-self-sm-baseline {
align-self: baseline !important;
}
.ion-align-self-sm-auto {
align-self: auto !important;
}
}
@media (min-width: 768px) {
.ion-align-self-md-start {
align-self: start !important;
}
.ion-align-self-md-end {
align-self: end !important;
}
.ion-align-self-md-center {
align-self: center !important;
}
.ion-align-self-md-stretch {
align-self: stretch !important;
}
.ion-align-self-md-baseline {
align-self: baseline !important;
}
.ion-align-self-md-auto {
align-self: auto !important;
}
}
@media (min-width: 992px) {
.ion-align-self-lg-start {
align-self: start !important;
}
.ion-align-self-lg-end {
align-self: end !important;
}
.ion-align-self-lg-center {
align-self: center !important;
}
.ion-align-self-lg-stretch {
align-self: stretch !important;
}
.ion-align-self-lg-baseline {
align-self: baseline !important;
}
.ion-align-self-lg-auto {
align-self: auto !important;
}
}
@media (min-width: 1200px) {
.ion-align-self-xl-start {
align-self: start !important;
}
.ion-align-self-xl-end {
align-self: end !important;
}
.ion-align-self-xl-center {
align-self: center !important;
}
.ion-align-self-xl-stretch {
align-self: stretch !important;
}
.ion-align-self-xl-baseline {
align-self: baseline !important;
}
.ion-align-self-xl-auto {
align-self: auto !important;
}
}
.ion-justify-content-start {
justify-content: flex-start !important;
}
.ion-justify-content-end {
justify-content: flex-end !important;
}
.ion-justify-content-center {
justify-content: center !important;
}
.ion-justify-content-between {
justify-content: space-between !important;
}
.ion-justify-content-around {
justify-content: space-around !important;
}
.ion-justify-content-evenly {
justify-content: space-evenly !important;
}
@media (min-width: 576px) {
.ion-justify-content-sm-start {
justify-content: flex-start !important;
}
.ion-justify-content-sm-end {
justify-content: flex-end !important;
}
.ion-justify-content-sm-center {
justify-content: center !important;
}
.ion-justify-content-sm-between {
justify-content: space-between !important;
}
.ion-justify-content-sm-around {
justify-content: space-around !important;
}
.ion-justify-content-sm-evenly {
justify-content: space-evenly !important;
}
}
@media (min-width: 768px) {
.ion-justify-content-md-start {
justify-content: flex-start !important;
}
.ion-justify-content-md-end {
justify-content: flex-end !important;
}
.ion-justify-content-md-center {
justify-content: center !important;
}
.ion-justify-content-md-between {
justify-content: space-between !important;
}
.ion-justify-content-md-around {
justify-content: space-around !important;
}
.ion-justify-content-md-evenly {
justify-content: space-evenly !important;
}
}
@media (min-width: 992px) {
.ion-justify-content-lg-start {
justify-content: flex-start !important;
}
.ion-justify-content-lg-end {
justify-content: flex-end !important;
}
.ion-justify-content-lg-center {
justify-content: center !important;
}
.ion-justify-content-lg-between {
justify-content: space-between !important;
}
.ion-justify-content-lg-around {
justify-content: space-around !important;
}
.ion-justify-content-lg-evenly {
justify-content: space-evenly !important;
}
}
@media (min-width: 1200px) {
.ion-justify-content-xl-start {
justify-content: flex-start !important;
}
.ion-justify-content-xl-end {
justify-content: flex-end !important;
}
.ion-justify-content-xl-center {
justify-content: center !important;
}
.ion-justify-content-xl-between {
justify-content: space-between !important;
}
.ion-justify-content-xl-around {
justify-content: space-around !important;
}
.ion-justify-content-xl-evenly {
justify-content: space-evenly !important;
}
}
.ion-flex-row {
flex-direction: row !important;
}
.ion-flex-row-reverse {
flex-direction: row-reverse !important;
}
.ion-flex-column {
flex-direction: column !important;
}
.ion-flex-column-reverse {
flex-direction: column-reverse !important;
}
@media (min-width: 576px) {
.ion-flex-sm-row {
flex-direction: row !important;
}
.ion-flex-sm-row-reverse {
flex-direction: row-reverse !important;
}
.ion-flex-sm-column {
flex-direction: column !important;
}
.ion-flex-sm-column-reverse {
flex-direction: column-reverse !important;
}
}
@media (min-width: 768px) {
.ion-flex-md-row {
flex-direction: row !important;
}
.ion-flex-md-row-reverse {
flex-direction: row-reverse !important;
}
.ion-flex-md-column {
flex-direction: column !important;
}
.ion-flex-md-column-reverse {
flex-direction: column-reverse !important;
}
}
@media (min-width: 992px) {
.ion-flex-lg-row {
flex-direction: row !important;
}
.ion-flex-lg-row-reverse {
flex-direction: row-reverse !important;
}
.ion-flex-lg-column {
flex-direction: column !important;
}
.ion-flex-lg-column-reverse {
flex-direction: column-reverse !important;
}
}
@media (min-width: 1200px) {
.ion-flex-xl-row {
flex-direction: row !important;
}
.ion-flex-xl-row-reverse {
flex-direction: row-reverse !important;
}
.ion-flex-xl-column {
flex-direction: column !important;
}
.ion-flex-xl-column-reverse {
flex-direction: column-reverse !important;
}
}
.ion-wrap {
flex-wrap: wrap !important;
}
.ion-nowrap {
flex-wrap: nowrap !important;
}
.ion-wrap-reverse {
flex-wrap: wrap-reverse !important;
}
.ion-flex-wrap {
flex-wrap: wrap !important;
}
.ion-flex-nowrap {
flex-wrap: nowrap !important;
}
.ion-flex-wrap-reverse {
flex-wrap: wrap-reverse !important;
}
@media (min-width: 576px) {
.ion-flex-sm-wrap {
flex-wrap: wrap !important;
}
.ion-flex-sm-nowrap {
flex-wrap: nowrap !important;
}
.ion-flex-sm-wrap-reverse {
flex-wrap: wrap-reverse !important;
}
}
@media (min-width: 768px) {
.ion-flex-md-wrap {
flex-wrap: wrap !important;
}
.ion-flex-md-nowrap {
flex-wrap: nowrap !important;
}
.ion-flex-md-wrap-reverse {
flex-wrap: wrap-reverse !important;
}
}
@media (min-width: 992px) {
.ion-flex-lg-wrap {
flex-wrap: wrap !important;
}
.ion-flex-lg-nowrap {
flex-wrap: nowrap !important;
}
.ion-flex-lg-wrap-reverse {
flex-wrap: wrap-reverse !important;
}
}
@media (min-width: 1200px) {
.ion-flex-xl-wrap {
flex-wrap: wrap !important;
}
.ion-flex-xl-nowrap {
flex-wrap: nowrap !important;
}
.ion-flex-xl-wrap-reverse {
flex-wrap: wrap-reverse !important;
}
}
.ion-flex-1 {
flex: 1 !important;
}
.ion-flex-auto {
flex: auto !important;
}
.ion-flex-initial {
flex: initial !important;
}
.ion-flex-none {
flex: none !important;
}
@media (min-width: 576px) {
.ion-flex-sm-1 {
flex: 1 !important;
}
.ion-flex-sm-auto {
flex: auto !important;
}
.ion-flex-sm-initial {
flex: initial !important;
}
.ion-flex-sm-none {
flex: none !important;
}
}
@media (min-width: 768px) {
.ion-flex-md-1 {
flex: 1 !important;
}
.ion-flex-md-auto {
flex: auto !important;
}
.ion-flex-md-initial {
flex: initial !important;
}
.ion-flex-md-none {
flex: none !important;
}
}
@media (min-width: 992px) {
.ion-flex-lg-1 {
flex: 1 !important;
}
.ion-flex-lg-auto {
flex: auto !important;
}
.ion-flex-lg-initial {
flex: initial !important;
}
.ion-flex-lg-none {
flex: none !important;
}
}
@media (min-width: 1200px) {
.ion-flex-xl-1 {
flex: 1 !important;
}
.ion-flex-xl-auto {
flex: auto !important;
}
.ion-flex-xl-initial {
flex: initial !important;
}
.ion-flex-xl-none {
flex: none !important;
}
}
.ion-flex-grow-0 {
flex-grow: 0 !important;
}
.ion-flex-grow-1 {
flex-grow: 1 !important;
}
.ion-flex-shrink-0 {
flex-shrink: 0 !important;
}
.ion-flex-shrink-1 {
flex-shrink: 1 !important;
}
@media (min-width: 576px) {
.ion-flex-sm-grow-0 {
flex-grow: 0 !important;
}
.ion-flex-sm-grow-1 {
flex-grow: 1 !important;
}
.ion-flex-sm-shrink-0 {
flex-shrink: 0 !important;
}
.ion-flex-sm-shrink-1 {
flex-shrink: 1 !important;
}
}
@media (min-width: 768px) {
.ion-flex-md-grow-0 {
flex-grow: 0 !important;
}
.ion-flex-md-grow-1 {
flex-grow: 1 !important;
}
.ion-flex-md-shrink-0 {
flex-shrink: 0 !important;
}
.ion-flex-md-shrink-1 {
flex-shrink: 1 !important;
}
}
@media (min-width: 992px) {
.ion-flex-lg-grow-0 {
flex-grow: 0 !important;
}
.ion-flex-lg-grow-1 {
flex-grow: 1 !important;
}
.ion-flex-lg-shrink-0 {
flex-shrink: 0 !important;
}
.ion-flex-lg-shrink-1 {
flex-shrink: 1 !important;
}
}
@media (min-width: 1200px) {
.ion-flex-xl-grow-0 {
flex-grow: 0 !important;
}
.ion-flex-xl-grow-1 {
flex-grow: 1 !important;
}
.ion-flex-xl-shrink-0 {
flex-shrink: 0 !important;
}
.ion-flex-xl-shrink-1 {
flex-shrink: 1 !important;
}
}
.ion-order-first {
order: -1 !important;
}
.ion-order-0 {
order: 0 !important;
}
.ion-order-1 {
order: 1 !important;
}
.ion-order-2 {
order: 2 !important;
}
.ion-order-3 {
order: 3 !important;
}
.ion-order-4 {
order: 4 !important;
}
.ion-order-5 {
order: 5 !important;
}
.ion-order-6 {
order: 6 !important;
}
.ion-order-7 {
order: 7 !important;
}
.ion-order-8 {
order: 8 !important;
}
.ion-order-9 {
order: 9 !important;
}
.ion-order-10 {
order: 10 !important;
}
.ion-order-11 {
order: 11 !important;
}
.ion-order-12 {
order: 12 !important;
}
.ion-order-last {
order: 13 !important;
}
@media (min-width: 576px) {
.ion-order-sm-first {
order: -1 !important;
}
.ion-order-sm-0 {
order: 0 !important;
}
.ion-order-sm-1 {
order: 1 !important;
}
.ion-order-sm-2 {
order: 2 !important;
}
.ion-order-sm-3 {
order: 3 !important;
}
.ion-order-sm-4 {
order: 4 !important;
}
.ion-order-sm-5 {
order: 5 !important;
}
.ion-order-sm-6 {
order: 6 !important;
}
.ion-order-sm-7 {
order: 7 !important;
}
.ion-order-sm-8 {
order: 8 !important;
}
.ion-order-sm-9 {
order: 9 !important;
}
.ion-order-sm-10 {
order: 10 !important;
}
.ion-order-sm-11 {
order: 11 !important;
}
.ion-order-sm-12 {
order: 12 !important;
}
.ion-order-sm-last {
order: 13 !important;
}
}
@media (min-width: 768px) {
.ion-order-md-first {
order: -1 !important;
}
.ion-order-md-0 {
order: 0 !important;
}
.ion-order-md-1 {
order: 1 !important;
}
.ion-order-md-2 {
order: 2 !important;
}
.ion-order-md-3 {
order: 3 !important;
}
.ion-order-md-4 {
order: 4 !important;
}
.ion-order-md-5 {
order: 5 !important;
}
.ion-order-md-6 {
order: 6 !important;
}
.ion-order-md-7 {
order: 7 !important;
}
.ion-order-md-8 {
order: 8 !important;
}
.ion-order-md-9 {
order: 9 !important;
}
.ion-order-md-10 {
order: 10 !important;
}
.ion-order-md-11 {
order: 11 !important;
}
.ion-order-md-12 {
order: 12 !important;
}
.ion-order-md-last {
order: 13 !important;
}
}
@media (min-width: 992px) {
.ion-order-lg-first {
order: -1 !important;
}
.ion-order-lg-0 {
order: 0 !important;
}
.ion-order-lg-1 {
order: 1 !important;
}
.ion-order-lg-2 {
order: 2 !important;
}
.ion-order-lg-3 {
order: 3 !important;
}
.ion-order-lg-4 {
order: 4 !important;
}
.ion-order-lg-5 {
order: 5 !important;
}
.ion-order-lg-6 {
order: 6 !important;
}
.ion-order-lg-7 {
order: 7 !important;
}
.ion-order-lg-8 {
order: 8 !important;
}
.ion-order-lg-9 {
order: 9 !important;
}
.ion-order-lg-10 {
order: 10 !important;
}
.ion-order-lg-11 {
order: 11 !important;
}
.ion-order-lg-12 {
order: 12 !important;
}
.ion-order-lg-last {
order: 13 !important;
}
}
@media (min-width: 1200px) {
.ion-order-xl-first {
order: -1 !important;
}
.ion-order-xl-0 {
order: 0 !important;
}
.ion-order-xl-1 {
order: 1 !important;
}
.ion-order-xl-2 {
order: 2 !important;
}
.ion-order-xl-3 {
order: 3 !important;
}
.ion-order-xl-4 {
order: 4 !important;
}
.ion-order-xl-5 {
order: 5 !important;
}
.ion-order-xl-6 {
order: 6 !important;
}
.ion-order-xl-7 {
order: 7 !important;
}
.ion-order-xl-8 {
order: 8 !important;
}
.ion-order-xl-9 {
order: 9 !important;
}
.ion-order-xl-10 {
order: 10 !important;
}
.ion-order-xl-11 {
order: 11 !important;
}
.ion-order-xl-12 {
order: 12 !important;
}
.ion-order-xl-last {
order: 13 !important;
}
}
}
@layer components {
.accordion {
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 600;
font-style: normal;
font-size: var(--text-base);
line-height: var(--leading-base);
color: var(--color-text-default);
background-color: var(--color-background-action);
overflow: hidden;
text-align: left;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
align-content: center;
align-items: center;
gap: var(--spacing-lg);
padding-block: var(--spacing-base);
padding-right: var(--spacing-3xl);
padding-left: var(--spacing-base);
cursor: pointer;
--tw-border-style: none;
border-style: none;
--tw-outline-style: none;
outline-style: none;
transition-property:
color,
background-color,
border-color,
outline-color,
text-decoration-color,
fill,
stroke,
--tw-gradient-from,
--tw-gradient-via,
--tw-gradient-to;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.accordion:disabled {
color: var(--color-text-disabled);
}
@media (hover: hover) {
.accordion:enabled:hover {
background-color: var(--color-background-action-hover);
}
}
.accordion:enabled:focus {
background-color: var(--color-background-action-focus);
}
@media (hover: hover) {
.accordion:disabled:hover {
background-color: var(--color-background-action);
}
}
.accordion:disabled:focus {
background-color: var(--color-background-action);
}
.accordion::after {
content: var(--tw-content);
position: absolute;
}
.accordion::after {
content: var(--tw-content);
right: var(--spacing-lg);
}
.accordion::after {
content: var(--tw-content);
float: right;
}
.accordion::after {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-xl);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 20;
line-height: var(--leading-icon-xl);
}
.accordion::after {
content: var(--tw-content);
--tw-leading: calc(0.25rem * 6);
line-height: calc(0.25rem * 6);
}
.accordion::after {
content: var(--tw-content);
color: var(--color-icon-default);
}
.accordion::after {
--tw-content: "\e5cf";
content: var(--tw-content);
}
.accordion:disabled::after {
content: var(--tw-content);
color: var(--color-icon-disabled);
}
.accordion:disabled {
cursor: not-allowed;
}
@media (forced-colors: active) {
.accordion {
outline: 2px solid transparent;
outline-offset: 2px;
}
}
.accordion-content {
background-color: var(--color-background-default);
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
color: var(--color-text-default);
display: none;
padding: var(--spacing-base);
overflow-wrap: break-word;
}
.accordion.accordion-activated::after {
--tw-content: "\e5ce";
content: var(--tw-content);
}
.accordion-item {
border-style: var(--tw-border-style);
border-width: 1px;
border-right-style: var(--tw-border-style);
border-right-width: 0px;
border-left-style: var(--tw-border-style);
border-left-width: 0px;
--tw-border-style: solid;
border-style: solid;
border-color: var(--color-border-light);
position: relative;
}
.accordion-item:has(*:is(.accordion:disabled)) {
border-color: var(--color-border-disabled);
}
.accordion-item:has(.accordion-activated) .accordion-content {
display: block;
}
.accordion-container > :first-child,
.accordion-container > :nth-child(n) {
border-bottom-style: var(--tw-border-style);
border-bottom-width: 0px;
}
.accordion-container > :last-child {
border-bottom-style: var(--tw-border-style);
border-bottom-width: 1px;
}
.action-icon {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--color-icon-accent);
background-color: var(--color-background-transparent);
height: calc(0.25rem * 8);
width: calc(0.25rem * 8);
border-radius: var(--radius-md);
font-family: var(--font-icon);
font-size: var(--text-icon-sm);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 14;
line-height: var(--leading-icon-sm);
--tw-border-style: none;
border-style: none;
transition-property:
color,
background-color,
border-color,
outline-color,
text-decoration-color,
fill,
stroke,
--tw-gradient-from,
--tw-gradient-via,
--tw-gradient-to;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.action-icon:focus-visible {
--tw-outline-style: none;
outline-style: none;
}
.action-icon:disabled {
cursor: not-allowed;
}
.action-icon:disabled {
color: var(--color-icon-disabled-light);
}
@media (hover: hover) {
.action-icon:enabled:hover {
background-color: var(--color-background-action-hover);
}
}
.action-icon:enabled:focus {
background-color: var(--color-background-action-focus);
}
.action-icon:disabled {
background-color: var(--color-background-transparent);
}
.action-icon.action-icon-small {
height: calc(0.25rem * 6);
width: calc(0.25rem * 6);
border-radius: var(--radius-sm);
font-family: var(--font-icon);
font-size: var(--text-icon-xs);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 12;
line-height: var(--leading-icon-xs);
}
.action-icon.action-icon-large {
height: 42px;
width: 42px;
font-family: var(--font-icon);
font-size: var(--text-icon-lg);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 18;
line-height: var(--leading-icon-lg);
}
.action-icon.action-icon-activated {
background-color: var(--color-background-highlight);
color: var(--color-icon-accent);
}
@media (hover: hover) {
.action-icon.action-icon-activated:enabled:hover {
background-color: var(--color-background-highlight-hover);
}
}
.action-icon.action-icon-activated:enabled:focus {
background-color: var(--color-background-highlight-focus);
}
.action-icon.action-icon-activated:disabled {
background-color: var(--color-background-disabled);
}
.action-icon.action-icon-activated:disabled {
color: var(--color-icon-disabled);
}
.action-icon-switch {
display: flex;
}
.action-icon-switch .action-icon-activated {
background-color: var(--color-background-action-hover);
}
@media (hover: hover) {
.action-icon-switch .action-icon-activated:enabled:hover {
background-color: var(--color-background-action-hover);
}
}
.action-icon-switch .action-icon-activated:enabled:focus {
background-color: var(--color-background-action-hover);
}
.action-icon-switch > :nth-child(n) {
border-style: var(--tw-border-style);
border-width: 1px;
--tw-border-style: solid;
border-style: solid;
border-color: var(--color-border-accent);
}
.action-icon-switch > :first-child {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.action-icon-switch > :last-child {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-left-style: var(--tw-border-style);
border-left-width: 0px;
}
.action-icon-switch.action-icon-switch-vertical {
flex-direction: column;
}
.action-icon-switch.action-icon-switch-vertical .action-icon,
.action-icon-switch.action-icon-switch-vertical .action-icon-large {
border-radius: var(--radius-md);
}
.action-icon-switch.action-icon-switch-vertical .action-icon-small {
border-radius: var(--radius-sm);
}
.action-icon-switch.action-icon-switch-vertical > :first-child {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.action-icon-switch.action-icon-switch-vertical > :last-child {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-top-style: var(--tw-border-style);
border-top-width: 0px;
border-left-style: var(--tw-border-style);
border-left-width: 1px;
}
.action-menu {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-sm);
padding: var(--spacing-sm);
border-radius: var(--radius-xs);
border-style: var(--tw-border-style);
border-width: 1px;
--tw-border-style: solid;
border-style: solid;
border-color: var(--color-border-transparent);
width: fit-content;
min-width: calc(0.25rem * 32);
background-color: var(--color-background-default);
--tw-shadow: 0px 4px 8px 0px var(--tw-shadow-color, rgba(0, 0, 0, 0.1));
box-shadow:
var(--tw-inset-shadow),
var(--tw-inset-ring-shadow),
var(--tw-ring-offset-shadow),
var(--tw-ring-shadow),
var(--tw-shadow);
}
.action-menu-entry {
display: flex;
width: 100%;
flex-direction: row;
align-items: center;
gap: var(--spacing-base);
padding: var(--spacing-sm);
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
--tw-border-style: none;
border-style: none;
--tw-outline-style: none;
outline-style: none;
transition-property:
color,
background-color,
border-color,
outline-color,
text-decoration-color,
fill,
stroke,
--tw-gradient-from,
--tw-gradient-via,
--tw-gradient-to;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
cursor: pointer;
}
.action-menu-entry:enabled {
color: var(--color-text-default);
}
.action-menu-entry:disabled {
color: var(--color-text-disabled);
}
.action-menu-entry:enabled {
background-color: var(--color-background-action);
}
@media (hover: hover) {
.action-menu-entry:enabled:hover {
background-color: var(--color-background-action-hover);
}
}
.action-menu-entry:enabled:focus {
background-color: var(--color-background-action-focus);
}
.action-menu-entry:disabled {
background-color: var(--color-background-default);
}
@media (hover: hover) {
.action-menu-entry:disabled:hover {
background-color: var(--color-background-default);
}
}
.action-menu-entry:disabled:focus {
background-color: var(--color-background-default);
}
@media (forced-colors: active) {
.action-menu-entry {
outline: 2px solid transparent;
outline-offset: 2px;
}
}
.action-menu-entry:disabled {
cursor: not-allowed;
}
.action-menu-entry:enabled .action-menu-entry-decoration-icon {
color: var(--color-icon-default);
}
.action-menu-entry:enabled .action-menu-entry-decoration-text {
color: var(--color-text-ultra-light);
}
.action-menu-entry:disabled .action-menu-entry-decoration-icon {
color: var(--color-icon-disabled);
}
.action-menu-entry:disabled .action-menu-entry-decoration-text {
color: var(--color-text-disabled);
}
.action-menu-entry .action-menu-entry-content {
display: flex;
flex-grow: 1;
flex-direction: row;
align-items: center;
gap: var(--spacing-sm);
}
.action-menu-entry .action-menu-entry-decoration {
flex-grow: 0;
}
.action-menu-entry .action-menu-entry-decoration.action-menu-entry-decoration-icon {
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 16;
line-height: var(--leading-icon-base);
}
.action-menu-entry .action-menu-entry-decoration.action-menu-entry-decoration-text {
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
}
.action-menu-entry.action-menu-entry-alert:enabled {
color: var(--color-text-alert);
background-color: var(--color-background-danger);
}
@media (hover: hover) {
.action-menu-entry.action-menu-entry-alert:enabled:hover {
background-color: var(--color-background-danger-hover);
}
}
.action-menu-entry.action-menu-entry-alert:enabled:focus {
background-color: var(--color-background-danger-focus);
}
.action-menu-entry.action-menu-entry-alert:enabled .action-menu-entry-decoration-icon {
color: var(--color-icon-alert);
}
.action-menu-entry.action-menu-entry-alert:enabled .action-menu-entry-decoration-text {
color: var(--color-text-alert-light);
}
.action-menu-entry.action-menu-entry-headline {
padding-inline: var(--spacing-sm);
padding-block: var(--spacing-xs);
color: var(--color-text-ultra-light);
background-color: var(--color-background-default);
}
@media (hover: hover) {
.action-menu-entry.action-menu-entry-headline:hover {
background-color: var(--color-background-default);
}
}
.action-menu-entry.action-menu-entry-seperator {
background-color: var(--color-border-disabled);
padding: calc(0.25rem * 0);
height: 0.0625rem;
}
.avatar {
position: relative;
display: inline-flex;
height: calc(0.25rem * 8);
width: calc(0.25rem * 8);
align-items: center;
justify-content: center;
overflow: hidden;
border-radius: calc(infinity * 1px);
background-color: var(--color-background-default);
object-fit: cover;
font-size: 0.875rem;
}
.avatar.avatar-placeholder {
background-color: var(--color-background-gray-ultra-light);
}
.avatar.avatar-placeholder::after {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-xl);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 20;
line-height: var(--leading-icon-xl);
}
.avatar.avatar-placeholder::after {
content: var(--tw-content);
color: var(--color-icon-disabled-light);
}
.avatar.avatar-placeholder::after {
--tw-content: "person";
content: var(--tw-content);
}
.avatar.avatar-extra-small {
height: calc(0.25rem * 5);
min-height: calc(0.25rem * 5);
width: calc(0.25rem * 5);
min-width: calc(0.25rem * 5);
}
.avatar.avatar-extra-small::after {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-sm);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 14;
line-height: var(--leading-icon-sm);
}
.avatar.avatar-medium {
height: calc(0.25rem * 12);
min-height: calc(0.25rem * 12);
width: calc(0.25rem * 12);
min-width: calc(0.25rem * 12);
}
.avatar.avatar-medium::after {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-4xl);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 32;
line-height: var(--leading-icon-4xl);
}
.avatar.avatar-large {
height: calc(0.25rem * 16);
min-height: calc(0.25rem * 16);
width: calc(0.25rem * 16);
min-width: calc(0.25rem * 16);
}
.avatar.avatar-large::after {
content: var(--tw-content);
font-size: 50px;
}
.avatar.avatar-large::after {
content: var(--tw-content);
--tw-leading: 50px;
line-height: 50px;
}
.avatar.avatar-extra-large {
height: calc(0.25rem * 24);
min-height: calc(0.25rem * 24);
width: calc(0.25rem * 24);
min-width: calc(0.25rem * 24);
}
.avatar.avatar-extra-large::after {
content: var(--tw-content);
font-size: 62px;
}
.avatar.avatar-extra-large::after {
content: var(--tw-content);
--tw-leading: 62px;
line-height: 62px;
}
.avatar.avatar-extra-extra-large {
height: calc(0.25rem * 32);
min-height: calc(0.25rem * 32);
width: calc(0.25rem * 32);
min-width: calc(0.25rem * 32);
}
.avatar.avatar-extra-extra-large::after {
content: var(--tw-content);
font-size: 96px;
}
.avatar.avatar-extra-extra-large::after {
content: var(--tw-content);
--tw-leading: 96px;
line-height: 96px;
}
.avatar.avatar-editable {
--tw-outline-style: none;
outline-style: none;
cursor: pointer;
--tw-border-style: none;
border-style: none;
align-items: unset;
}
.avatar.avatar-editable::before {
content: var(--tw-content);
position: absolute;
}
.avatar.avatar-editable::before {
content: var(--tw-content);
top: calc(0.25rem * 0);
}
.avatar.avatar-editable::before {
content: var(--tw-content);
right: calc(0.25rem * 0);
}
.avatar.avatar-editable::before {
content: var(--tw-content);
bottom: calc(0.25rem * 0);
}
.avatar.avatar-editable::before {
content: var(--tw-content);
left: calc(0.25rem * 0);
}
.avatar.avatar-editable::before {
content: var(--tw-content);
opacity: 0%;
}
.avatar.avatar-editable::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 16;
line-height: var(--leading-icon-base);
}
.avatar.avatar-editable::before {
content: var(--tw-content);
color: var(--color-icon-inverted);
}
.avatar.avatar-editable::before {
--tw-content: "edit";
content: var(--tw-content);
}
@media (hover: hover) {
.avatar.avatar-editable:hover::before {
content: var(--tw-content);
opacity: 100%;
}
}
@media (hover: hover) {
.avatar.avatar-editable:hover::before {
content: var(--tw-content);
transition-property: all;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
}
.avatar.avatar-editable::before {
content: var(--tw-content);
display: flex;
}
.avatar.avatar-editable::before {
content: var(--tw-content);
align-items: center;
}
.avatar.avatar-editable::before {
content: var(--tw-content);
justify-content: center;
}
.avatar.avatar-editable:before {
background-color: rgba(34, 39, 44, 0.6);
}
.avatar.avatar-editable.avatar-placeholder {
align-items: center;
}
.avatar.avatar-editable.avatar-extra-small::after {
content: var(--tw-content);
font-size: 8px;
}
.avatar.avatar-editable.avatar-extra-small::after {
content: var(--tw-content);
--tw-leading: 8px;
line-height: 8px;
}
.avatar-group {
display: flex;
}
.avatar-group .avatar {
margin-inline: calc(var(--spacing-sm) * -1);
border-style: var(--tw-border-style);
border-width: 1px;
--tw-border-style: solid;
border-style: solid;
border-color: var(--color-border-inverted);
}
.avatar.avatar-stack {
background-color: var(--color-background-gray-light);
font-family: var(--font-default);
letter-spacing: var(--tracking-xs);
font-weight: 400;
font-style: normal;
font-size: var(--text-xs);
line-height: var(--tw-leading, var(--leading-xs));
color: var(--color-text-light);
font-size: 14px;
--tw-leading: 18px;
line-height: 18px;
}
.avatar.avatar-stack.avatar-extra-small {
font-size: 9px;
--tw-leading: 18px;
line-height: 18px;
}
.badge {
font-family: var(--font-default);
letter-spacing: var(--tracking-xs);
font-weight: 400;
font-style: normal;
font-size: var(--text-xs);
line-height: var(--tw-leading, var(--leading-xs));
display: inline-flex;
height: calc(0.25rem * 6);
align-items: center;
border-radius: var(--radius-md);
padding-inline: var(--spacing-base);
background-color: var(--color-background-information-light);
color: var(--color-text-accent);
width: fit-content;
}
.badge .badge-icon {
font-family: var(--font-icon);
font-size: var(--text-icon-xs);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 12;
line-height: var(--leading-icon-xs);
--tw-leading: calc(0.25rem * 4.5);
line-height: calc(0.25rem * 4.5);
color: var(--color-icon-accent);
}
.badge .badge-content {
display: flex;
width: 100%;
gap: var(--spacing-sm);
}
.badge .badge-label {
overflow: hidden;
text-wrap: nowrap;
text-overflow: ellipsis;
white-space: nowrap;
}
.badge.badge-light {
color: var(--color-text-information);
}
.badge.badge-light .badge-icon {
color: var(--color-icon-information);
}
.badge.badge-neutral {
background-color: var(--color-background-gray-ultra-light);
color: var(--color-text-light);
}
.badge.badge-neutral .badge-icon {
color: var(--color-icon-default);
}
.badge.badge-primary-yellow {
background-color: var(--color-background-highlight);
color: var(--color-text-accent);
}
.badge.badge-primary-yellow .badge-icon {
color: var(--color-icon-accent);
}
.badge.badge-primary-blue {
background-color: var(--color-background-accent);
color: var(--color-text-inverted);
}
.badge.badge-primary-blue .badge-icon {
color: var(--color-icon-inverted);
}
.badge.badge-alert {
background-color: var(--color-background-alert-light);
color: var(--color-text-alert);
}
.badge.badge-alert .badge-icon {
color: var(--color-icon-alert);
}
.badge.badge-warning {
background-color: var(--color-background-warning-light);
color: var(--color-text-warning);
}
.badge.badge-warning .badge-icon {
color: var(--color-icon-warning);
}
.badge.badge-success {
background-color: var(--color-background-success-light);
color: var(--color-text-success);
}
.badge.badge-success .badge-icon {
color: var(--color-icon-success);
}
.badge.badge-small {
height: calc(0.25rem * 5);
padding-inline: var(--spacing-sm);
}
.banner {
display: flex;
gap: var(--spacing-base);
padding: var(--spacing-lg);
background-color: var(--color-background-information);
color: var(--color-text-inverted);
border-radius: var(--radius-xs);
}
.banner::before {
content: var(--tw-content);
margin-top: calc(var(--spacing-xs) * -1);
}
.banner::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-lg);
font-weight: 600;
font-variation-settings: "FILL" 1, "opsz" 18;
line-height: var(--leading-icon-lg);
}
.banner::before {
content: var(--tw-content);
--tw-leading: calc(0.25rem * 7);
line-height: calc(0.25rem * 7);
}
.banner::before {
content: var(--tw-content);
color: var(--color-icon-inverted);
}
.banner::before {
--tw-content: "\e88e";
content: var(--tw-content);
}
.banner .banner-content {
display: flex;
flex: 1;
align-items: center;
gap: var(--spacing-base);
overflow: auto;
}
.banner .banner-text {
width: 100%;
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
overflow-wrap: break-word;
color: var(--color-text-inverted);
}
.banner .banner-button {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--color-icon-accent);
background-color: var(--color-background-transparent);
height: calc(0.25rem * 8);
width: calc(0.25rem * 8);
border-radius: var(--radius-md);
font-size: var(--text-icon-sm);
font-variation-settings: "FILL" 0, "opsz" 14;
line-height: var(--leading-icon-sm);
--tw-border-style: none;
border-style: none;
transition-property:
color,
background-color,
border-color,
outline-color,
text-decoration-color,
fill,
stroke,
--tw-gradient-from,
--tw-gradient-via,
--tw-gradient-to;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
height: calc(0.25rem * 6);
width: calc(0.25rem * 6);
border-radius: var(--radius-sm);
font-family: var(--font-icon);
font-size: var(--text-icon-xs);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 12;
line-height: var(--leading-icon-xs);
min-width: calc(0.25rem * 6);
color: var(--color-icon-inverted);
background-color: var(--color-background-information);
}
.banner .banner-button:focus-visible {
--tw-outline-style: none;
outline-style: none;
}
.banner .banner-button:disabled {
cursor: not-allowed;
}
.banner .banner-button:disabled {
color: var(--color-icon-disabled-light);
}
@media (hover: hover) {
.banner .banner-button:enabled:hover {
background-color: var(--color-background-action-hover);
}
}
.banner .banner-button:enabled:focus {
background-color: var(--color-background-action-focus);
}
.banner .banner-button:disabled {
background-color: var(--color-background-transparent);
}
.banner .banner-button::before {
--tw-content: "close";
content: var(--tw-content);
}
@media (hover: hover) {
.banner .banner-button:enabled:hover {
background-color: var(--color-background-information-hover);
}
}
.banner .banner-button:enabled:focus {
background-color: var(--color-background-information-focus);
}
.banner.banner-alert {
background-color: var(--color-background-alert);
}
.banner.banner-alert::before {
--tw-content: "\e001";
content: var(--tw-content);
}
.banner.banner-alert .banner-button {
background-color: var(--color-background-alert);
}
@media (hover: hover) {
.banner.banner-alert .banner-button:enabled:hover {
background-color: var(--color-background-alert-hover);
}
}
.banner.banner-alert .banner-button:enabled:focus {
background-color: var(--color-background-alert-focus);
}
.banner.banner-warning {
background-color: var(--color-background-warning);
}
.banner.banner-warning::before {
--tw-content: "\f083";
content: var(--tw-content);
}
.banner.banner-warning .banner-button {
background-color: var(--color-background-warning);
}
@media (hover: hover) {
.banner.banner-warning .banner-button:enabled:hover {
background-color: var(--color-background-warning-hover);
}
}
.banner.banner-warning .banner-button:enabled:focus {
background-color: var(--color-background-warning-focus);
}
.breadcrumbs {
margin-block: calc(0.25rem * 0);
display: flex;
list-style-type: none;
align-items: center;
gap: var(--spacing-sm);
padding-inline-start: calc(0.25rem * 0);
}
.breadcrumbs > :nth-child(n) {
display: contents;
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
color: var(--color-text-accent);
}
.breadcrumbs > :first-child a {
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
color: var(--color-text-accent);
position: relative;
text-decoration-line: none;
transition-property:
color,
background-color,
border-color,
outline-color,
text-decoration-color,
fill,
stroke,
--tw-gradient-from,
--tw-gradient-via,
--tw-gradient-to;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
--tw-outline-style: none;
outline-style: none;
}
.breadcrumbs > :first-child a:visited {
color: var(--color-text-accent);
}
@media (hover: hover) {
.breadcrumbs > :first-child a:hover {
text-decoration-line: underline;
}
}
.breadcrumbs > :first-child a:focus {
text-decoration-line: underline;
}
@media (hover: hover) {
.breadcrumbs > :first-child a:hover {
text-decoration-line: none;
}
}
.breadcrumbs > :first-child a:focus {
text-decoration-line: none;
}
.breadcrumbs > :first-child a::before {
content: var(--tw-content);
display: block;
}
.breadcrumbs > :first-child a::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 16;
line-height: var(--leading-icon-base);
}
.breadcrumbs > :first-child a::before {
content: var(--tw-content);
color: var(--color-icon-accent);
}
.breadcrumbs > :first-child a::before {
--tw-content: "home";
content: var(--tw-content);
}
.breadcrumbs > :last-child {
display: flex;
color: var(--color-text-default);
}
.breadcrumbs > :nth-child(n):not(:last-child)::after {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-lg);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 18;
line-height: var(--leading-icon-lg);
}
.breadcrumbs > :nth-child(n):not(:last-child)::after {
content: var(--tw-content);
color: var(--color-icon-accent);
}
.breadcrumbs > :nth-child(n):not(:last-child)::after {
--tw-content: "chevron_right";
content: var(--tw-content);
}
.breadcrumbs > :nth-child(n):not(:first-child) a {
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
color: var(--color-text-accent);
position: relative;
text-decoration-line: none;
transition-property:
color,
background-color,
border-color,
outline-color,
text-decoration-color,
fill,
stroke,
--tw-gradient-from,
--tw-gradient-via,
--tw-gradient-to;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
--tw-outline-style: none;
outline-style: none;
}
.breadcrumbs > :nth-child(n):not(:first-child) a:visited {
color: var(--color-text-accent);
}
@media (hover: hover) {
.breadcrumbs > :nth-child(n):not(:first-child) a:hover {
text-decoration-line: underline;
}
}
.breadcrumbs > :nth-child(n):not(:first-child) a:focus {
text-decoration-line: underline;
}
.breadcrumbs > :nth-child(n):not(:first-child) button {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--color-icon-accent);
background-color: var(--color-background-transparent);
height: calc(0.25rem * 8);
width: calc(0.25rem * 8);
border-radius: var(--radius-md);
font-size: var(--text-icon-sm);
font-variation-settings: "FILL" 0, "opsz" 14;
line-height: var(--leading-icon-sm);
--tw-border-style: none;
border-style: none;
transition-property:
color,
background-color,
border-color,
outline-color,
text-decoration-color,
fill,
stroke,
--tw-gradient-from,
--tw-gradient-via,
--tw-gradient-to;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
height: calc(0.25rem * 6);
width: calc(0.25rem * 6);
border-radius: var(--radius-sm);
font-family: var(--font-icon);
font-size: var(--text-icon-xs);
font-variation-settings: "FILL" 0, "opsz" 12;
line-height: var(--leading-icon-xs);
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
color: var(--color-text-default);
}
.breadcrumbs > :nth-child(n):not(:first-child) button:focus-visible {
--tw-outline-style: none;
outline-style: none;
}
.breadcrumbs > :nth-child(n):not(:first-child) button:disabled {
cursor: not-allowed;
}
.breadcrumbs > :nth-child(n):not(:first-child) button:disabled {
color: var(--color-icon-disabled-light);
}
@media (hover: hover) {
.breadcrumbs > :nth-child(n):not(:first-child) button:enabled:hover {
background-color: var(--color-background-action-hover);
}
}
.breadcrumbs > :nth-child(n):not(:first-child) button:enabled:focus {
background-color: var(--color-background-action-focus);
}
.breadcrumbs > :nth-child(n):not(:first-child) button:disabled {
background-color: var(--color-background-transparent);
}
.button {
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 600;
font-style: normal;
font-size: var(--text-base);
line-height: var(--leading-base);
display: inline-flex;
align-items: baseline;
gap: var(--spacing-base);
border-radius: var(--radius-md);
padding-inline: var(--spacing-xl);
padding-block: var(--spacing-base);
cursor: pointer;
border-style: var(--tw-border-style);
border-width: 1px;
--tw-border-style: solid;
border-style: solid;
border-color: var(--color-border-transparent);
transition-property:
color,
background-color,
border-color,
outline-color,
text-decoration-color,
fill,
stroke,
--tw-gradient-from,
--tw-gradient-via,
--tw-gradient-to;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
color: var(--color-text-inverted);
background-color: var(--color-background-accent);
position: relative;
height: fit-content;
width: fit-content;
}
.button:focus-visible {
--tw-outline-style: none;
outline-style: none;
}
.button:disabled {
cursor: not-allowed;
}
@media (hover: hover) {
.button:enabled:hover {
color: var(--color-text-inverted);
}
}
.button:enabled:focus {
color: var(--color-text-inverted);
}
.button:disabled {
color: var(--color-text-disabled);
}
.button:has(*:is(.spinner)) {
color: var(--color-background-transparent);
}
@media (hover: hover) {
.button:enabled:hover {
background-color: var(--color-background-accent-hover);
}
}
.button:enabled:focus {
background-color: var(--color-background-accent-focus);
}
.button:disabled {
background-color: var(--color-background-disabled);
}
.button > span {
min-width: max-content;
}
.button .spinner {
position: absolute;
top: calc(1 / 2 * 100%);
left: calc(1 / 2 * 100%);
margin-top: calc(0.25rem * -2);
margin-left: calc(0.25rem * -2);
}
.button .button-icon {
display: flex;
align-self: center;
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 16;
line-height: var(--leading-icon-base);
}
.button:not(:has(.spinner)) .button-icon {
color: var(--color-icon-inverted);
}
.button:not(:has(.spinner)):disabled .button-icon {
color: var(--color-icon-disabled);
}
.button.button-secondary {
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
background-color: var(--color-background-action);
color: var(--color-text-accent);
border-color: var(--color-border-accent);
}
@media (hover: hover) {
.button.button-secondary:enabled:hover {
background-color: var(--color-background-action-hover);
}
}
.button.button-secondary:enabled:focus {
background-color: var(--color-background-action-focus);
}
.button.button-secondary:disabled {
background-color: var(--color-background-action);
}
@media (hover: hover) {
.button.button-secondary:enabled:hover {
color: var(--color-text-accent);
}
}
.button.button-secondary:enabled:focus {
color: var(--color-text-accent);
}
.button.button-secondary:disabled {
color: var(--color-text-disabled-light);
}
.button.button-secondary:has(*:is(.spinner)) {
color: var(--color-background-transparent);
}
.button.button-secondary:disabled {
border-color: var(--color-border-disabled);
}
.button.button-secondary:not(:has(.spinner)) .button-icon {
color: var(--color-icon-accent);
}
.button.button-secondary:not(:has(.spinner)):disabled .button-icon {
color: var(--color-icon-disabled-light);
}
.button.button-danger {
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
background-color: var(--color-background-danger);
color: var(--color-text-alert);
border-color: var(--color-border-alert);
}
@media (hover: hover) {
.button.button-danger:enabled:hover {
background-color: var(--color-background-danger-hover);
}
}
.button.button-danger:enabled:focus {
background-color: var(--color-background-danger-focus);
}
.button.button-danger:disabled {
background-color: var(--color-background-danger);
}
@media (hover: hover) {
.button.button-danger:enabled:hover {
color: var(--color-text-alert);
}
}
.button.button-danger:enabled:focus {
color: var(--color-text-alert);
}
.button.button-danger:disabled {
color: var(--color-text-disabled-light);
}
.button.button-danger:has(*:is(.spinner)) {
color: var(--color-background-transparent);
}
.button.button-danger:disabled {
border-color: var(--color-border-disabled);
}
.button.button-danger:not(:has(.spinner)) .button-icon {
color: var(--color-icon-alert);
}
.button.button-danger:not(:has(.spinner)):disabled .button-icon {
color: var(--color-icon-disabled-light);
}
.button.button-small {
padding-inline: var(--spacing-md);
padding-block: calc(0.25rem * 1.5);
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 600;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--leading-sm);
}
.button.button-secondary.button-small,
.button.button-danger.button-small {
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
}
.button-group {
display: inline-flex;
}
.button-group > :nth-child(n) {
margin-right: calc(0.25rem * -0.5);
border-radius: 0;
}
.button-group > :nth-child(n) + button:disabled {
margin-left: calc(0.25rem * 0.5);
border-left-style: var(--tw-border-style);
border-left-width: 0px;
}
.button-group > :first-child {
border-top-left-radius: var(--radius-md);
border-bottom-left-radius: var(--radius-md);
}
.button-group > :last-child {
margin-right: calc(0.25rem * 0);
border-top-right-radius: var(--radius-md);
border-bottom-right-radius: var(--radius-md);
}
.button-group.button-group.small .button {
padding-inline: var(--spacing-md);
padding-block: calc(0.25rem * 1.5);
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 600;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--leading-sm);
}
.button.button-secondary.button-activated:enabled {
background-color: var(--color-background-highlight);
}
@media (hover: hover) {
.button.button-secondary.button-activated:enabled:hover {
background-color: var(--color-background-highlight-hover);
}
}
.button.button-secondary.button-activated:enabled:focus {
background-color: var(--color-background-highlight-focus);
}
.button.button-secondary.button-activated:disabled {
background-color: var(--color-background-disabled);
color: var(--color-text-disabled);
}
.button.button-secondary.button-activated:disabled:has(:is(.button-icon)) {
color: var(--color-icon-disabled);
}
.button-selectable {
display: inline-flex;
}
.button-selectable > :nth-child(n) {
margin-right: calc(0.25rem * -0.5);
border-radius: 0;
}
.button-selectable > :nth-child(n) + button:disabled {
margin-left: calc(0.25rem * 0.5);
border-left-style: var(--tw-border-style);
border-left-width: 0px;
}
.button-selectable > :first-child {
border-top-left-radius: var(--radius-md);
border-bottom-left-radius: var(--radius-md);
}
.button-selectable > :last-child {
margin-right: calc(0.25rem * 0);
border-top-right-radius: var(--radius-md);
border-bottom-right-radius: var(--radius-md);
}
.button-selectable .button-selection {
font-weight: 600;
line-height: var(--leading-base);
display: inline-flex;
align-items: baseline;
gap: var(--spacing-base);
border-radius: var(--radius-md);
padding-inline: var(--spacing-xl);
cursor: pointer;
border-style: var(--tw-border-style);
border-width: 1px;
--tw-border-style: solid;
border-style: solid;
border-color: var(--color-border-transparent);
transition-property:
color,
background-color,
border-color,
outline-color,
text-decoration-color,
fill,
stroke,
--tw-gradient-from,
--tw-gradient-via,
--tw-gradient-to;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
color: var(--color-text-inverted);
background-color: var(--color-background-accent);
position: relative;
width: fit-content;
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
background-color: var(--color-background-action);
color: var(--color-text-accent);
border-color: var(--color-border-accent);
border-radius: 0;
border-top-right-radius: var(--radius-md);
border-bottom-right-radius: var(--radius-md);
height: fit-content;
padding-inline: var(--spacing-base);
padding-block: var(--spacing-base);
}
.button-selectable .button-selection:focus-visible {
--tw-outline-style: none;
outline-style: none;
}
.button-selectable .button-selection:disabled {
cursor: not-allowed;
}
@media (hover: hover) {
.button-selectable .button-selection:enabled:hover {
color: var(--color-text-inverted);
}
}
.button-selectable .button-selection:enabled:focus {
color: var(--color-text-inverted);
}
.button-selectable .button-selection:disabled {
color: var(--color-text-disabled);
}
.button-selectable .button-selection:has(*:is(.spinner)) {
color: var(--color-background-transparent);
}
@media (hover: hover) {
.button-selectable .button-selection:enabled:hover {
background-color: var(--color-background-accent-hover);
}
}
.button-selectable .button-selection:enabled:focus {
background-color: var(--color-background-accent-focus);
}
.button-selectable .button-selection:disabled {
background-color: var(--color-background-disabled);
}
@media (hover: hover) {
.button-selectable .button-selection:enabled:hover {
background-color: var(--color-background-action-hover);
}
}
.button-selectable .button-selection:enabled:focus {
background-color: var(--color-background-action-focus);
}
.button-selectable .button-selection:disabled {
background-color: var(--color-background-action);
}
@media (hover: hover) {
.button-selectable .button-selection:enabled:hover {
color: var(--color-text-accent);
}
}
.button-selectable .button-selection:enabled:focus {
color: var(--color-text-accent);
}
.button-selectable .button-selection:disabled {
color: var(--color-text-disabled-light);
}
.button-selectable .button-selection:has(*:is(.spinner)) {
color: var(--color-background-transparent);
}
.button-selectable .button-selection:disabled {
border-color: var(--color-border-disabled);
}
.button-selectable .button-selection::after {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-lg);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 18;
line-height: var(--leading-icon-lg);
}
.button-selectable .button-selection::after {
content: var(--tw-content);
--tw-leading: 24px;
line-height: 24px;
}
.button-selectable .button-selection::after {
--tw-content: "\e5cf";
content: var(--tw-content);
}
.button-selectable .button-selection:enabled::after {
content: var(--tw-content);
color: var(--color-icon-accent);
}
.button-selectable .button-selection:disabled::after {
content: var(--tw-content);
color: var(--color-icon-disabled-light);
}
.button-selectable:has(.button-small) .button-selection {
padding-block: var(--spacing-sm);
}
.button-selectable:disabled > :nth-child(n) {
cursor: not-allowed;
border-color: var(--color-border-disabled);
background-color: var(--color-background-action);
}
@media (hover: hover) {
.button-selectable:disabled > :nth-child(n):hover {
background-color: var(--color-background-action);
}
}
.button-selectable:disabled > :nth-child(n):focus {
background-color: var(--color-background-action);
}
.button-selectable:disabled .button-secondary {
color: var(--color-text-disabled-light);
}
@media (hover: hover) {
.button-selectable:disabled .button-secondary:hover {
color: var(--color-text-disabled-light);
}
}
.button-selectable:disabled .button-secondary:focus {
color: var(--color-text-disabled-light);
}
.button-selectable:disabled .button-secondary .button-icon {
color: var(--color-icon-disabled-light);
}
.button-selectable:disabled .button-activated.button-secondary {
background-color: var(--color-background-disabled);
color: var(--color-text-disabled);
}
@media (hover: hover) {
.button-selectable:disabled .button-activated.button-secondary:hover {
background-color: var(--color-background-disabled);
}
}
.button-selectable:disabled .button-activated.button-secondary:focus {
background-color: var(--color-background-disabled);
}
@media (hover: hover) {
.button-selectable:disabled .button-activated.button-secondary:hover {
color: var(--color-text-disabled);
}
}
.button-selectable:disabled .button-activated.button-secondary:focus {
color: var(--color-text-disabled);
}
.button-selectable:disabled .button-activated.button-secondary .button-icon {
color: var(--color-icon-disabled);
}
.button-selectable:disabled .button-selection::after {
content: var(--tw-content);
color: var(--color-icon-disabled-light);
}
.card {
box-sizing: border-box;
display: inline-flex;
align-items: flex-start;
padding: var(--spacing-base);
background-color: var(--color-background-default);
--tw-shadow: 0px 4px 8px 0px var(--tw-shadow-color, rgba(0, 0, 0, 0.1));
box-shadow:
var(--tw-inset-shadow),
var(--tw-inset-ring-shadow),
var(--tw-ring-offset-shadow),
var(--tw-ring-shadow),
var(--tw-shadow);
border-radius: var(--radius-md);
border-style: var(--tw-border-style);
border-width: 1px;
--tw-border-style: solid;
border-style: solid;
border-color: var(--color-border-transparent);
width: fit-content;
}
.card.card-selectable {
cursor: pointer;
border-color: var(--color-border-ultra-light);
--tw-outline-style: none;
outline-style: none;
transition-property:
color,
background-color,
border-color,
outline-color,
text-decoration-color,
fill,
stroke,
--tw-gradient-from,
--tw-gradient-via,
--tw-gradient-to;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
@media (hover: hover) {
.card.card-selectable:hover {
border-color: var(--color-border-accent);
}
}
.card.card-selectable:focus {
border-color: var(--color-border-accent);
}
.card.card-selectable.card-selected {
position: relative;
border-color: var(--color-border-accent);
}
@media (hover: hover) {
.card.card-selectable.card-selected:hover {
border-color: var(--color-border-accent);
}
}
.card.card-selectable.card-selected:focus {
border-color: var(--color-border-accent);
}
.card.card-selectable.card-selected::after {
content: var(--tw-content);
position: absolute;
}
.card.card-selectable.card-selected::after {
content: var(--tw-content);
top: var(--spacing-lg);
}
.card.card-selectable.card-selected::after {
content: var(--tw-content);
right: var(--spacing-lg);
}
.card.card-selectable.card-selected::after {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-xl);
font-weight: 600;
font-variation-settings: "FILL" 1, "opsz" 20;
line-height: var(--leading-icon-xl);
}
.card.card-selectable.card-selected::after {
content: var(--tw-content);
color: var(--color-icon-accent);
}
.card.card-selectable.card-selected::after {
--tw-content: "\e86c";
content: var(--tw-content);
}
.card.card-selectable.card-disabled {
cursor: not-allowed;
border-color: var(--color-border-disabled);
background-color: var(--color-background-disabled);
}
@media (hover: hover) {
.card.card-selectable.card-disabled:hover {
border-color: var(--color-border-disabled);
}
}
.card.card-selectable.card-disabled:focus {
border-color: var(--color-border-disabled);
}
.card.card-selectable.card-disabled.card-selected::after {
content: var(--tw-content);
color: var(--color-icon-disabled);
}
.card.card-clickable {
position: relative;
cursor: pointer;
border-color: var(--color-border-ultra-light);
--tw-outline-style: none;
outline-style: none;
overflow: hidden;
transition-property:
color,
background-color,
border-color,
outline-color,
text-decoration-color,
fill,
stroke,
--tw-gradient-from,
--tw-gradient-via,
--tw-gradient-to;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
@media (hover: hover) {
.card.card-clickable:hover {
border-color: var(--color-border-accent);
}
}
.card.card-clickable:focus {
border-color: var(--color-border-accent);
}
.card.card-clickable:has(*:is(.card-clickable-content, .card-clickable-action)) {
padding: calc(0.25rem * 0);
}
.card.card-clickable:has(*:is(.card-clickable-content, .card-clickable-action)) {
display: flex;
}
.card.card-clickable:has(*:is(.card-clickable-content, .card-clickable-action)) {
flex-direction: row;
}
.card.card-clickable:has(*:is(.card-clickable-content:focus, .card-clickable-action:focus)) {
border-color: var(--color-border-accent);
}
.card.card-clickable .card-clickable-content {
flex: 1;
align-self: stretch;
padding: var(--spacing-base);
--tw-outline-style: none;
outline-style: none;
--tw-border-style: none;
border-style: none;
background-color: var(--color-background-default);
}
.card.card-clickable .card-clickable-action {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--color-icon-accent);
background-color: var(--color-background-transparent);
height: calc(0.25rem * 8);
width: calc(0.25rem * 8);
border-radius: var(--radius-md);
font-size: var(--text-icon-sm);
font-variation-settings: "FILL" 0, "opsz" 14;
line-height: var(--leading-icon-sm);
--tw-border-style: none;
border-style: none;
transition-property:
color,
background-color,
border-color,
outline-color,
text-decoration-color,
fill,
stroke,
--tw-gradient-from,
--tw-gradient-via,
--tw-gradient-to;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
height: calc(0.25rem * 6);
width: calc(0.25rem * 6);
border-radius: var(--radius-sm);
font-family: var(--font-icon);
font-size: var(--text-icon-xs);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 12;
line-height: var(--leading-icon-xs);
height: auto;
align-self: stretch;
border-radius: 0;
border-top-right-radius: var(--radius-md);
border-bottom-right-radius: var(--radius-md);
border-block-style: var(--tw-border-style);
border-block-width: 0px;
border-right-style: var(--tw-border-style);
border-right-width: 0px;
border-left-style: var(--tw-border-style);
border-left-width: 1px;
--tw-border-style: solid;
border-style: solid;
border-color: var(--color-border-ultra-light);
}
.card.card-clickable .card-clickable-action:focus-visible {
--tw-outline-style: none;
outline-style: none;
}
.card.card-clickable .card-clickable-action:disabled {
cursor: not-allowed;
}
.card.card-clickable .card-clickable-action:disabled {
color: var(--color-icon-disabled-light);
}
@media (hover: hover) {
.card.card-clickable .card-clickable-action:enabled:hover {
background-color: var(--color-background-action-hover);
}
}
.card.card-clickable .card-clickable-action:enabled:focus {
background-color: var(--color-background-action-focus);
}
.card.card-clickable .card-clickable-action:disabled {
background-color: var(--color-background-transparent);
}
.card.card-clickable.card-disabled {
cursor: not-allowed;
border-color: var(--color-border-disabled);
background-color: var(--color-background-disabled);
}
@media (hover: hover) {
.card.card-clickable.card-disabled:hover {
border-color: var(--color-border-disabled);
}
}
.card.card-clickable.card-disabled:focus {
border-color: var(--color-border-disabled);
}
.card.card-clickable.card-disabled .card-clickable-action {
background-color: var(--color-background-disabled);
color: var(--color-icon-disabled);
cursor: not-allowed;
border-color: var(--color-border-disabled);
}
@media (hover: hover) {
.card.card-clickable.card-disabled .card-clickable-action:hover {
background-color: var(--color-background-disabled);
}
}
.card.card-clickable.card-disabled .card-clickable-action:focus {
background-color: var(--color-background-disabled);
}
.checkbox {
position: relative;
cursor: pointer;
margin-right: calc(0.25rem * 7);
margin-left: calc(0.25rem * 0);
appearance: none;
}
.checkbox::before {
content: var(--tw-content);
margin-top: calc(0.25rem * -0);
}
.checkbox::before {
content: var(--tw-content);
display: flex;
}
.checkbox::before {
content: var(--tw-content);
flex-direction: column;
}
.checkbox::before {
content: var(--tw-content);
justify-content: center;
}
.checkbox::before {
content: var(--tw-content);
text-align: center;
}
.checkbox::before {
content: var(--tw-content);
border-style: var(--tw-border-style);
border-width: 1px;
}
.checkbox::before {
content: var(--tw-content);
--tw-border-style: solid;
border-style: solid;
}
.checkbox:focus-visible {
--tw-outline-style: none;
outline-style: none;
}
.checkbox::before {
content: var(--tw-content);
position: absolute;
}
.checkbox::before {
content: var(--tw-content);
top: calc(0.25rem * -2);
}
.checkbox::before {
content: var(--tw-content);
height: calc(0.25rem * 4);
}
.checkbox::before {
content: var(--tw-content);
width: calc(0.25rem * 4);
}
.checkbox::before {
content: var(--tw-content);
border-color: var(--color-border-default);
}
.checkbox:focus::before {
content: var(--tw-content);
border-color: var(--color-border-accent);
}
.checkbox:disabled::before {
content: var(--tw-content);
border-color: var(--color-border-disabled);
}
.checkbox:checked::before {
content: var(--tw-content);
border-color: var(--color-border-transparent);
}
.checkbox:checked:focus::before {
content: var(--tw-content);
border-color: var(--color-border-transparent);
}
.checkbox:checked:disabled::before {
content: var(--tw-content);
border-color: var(--color-border-transparent);
}
.checkbox::before {
content: var(--tw-content);
color: var(--color-icon-transparent);
}
.checkbox:checked::before {
content: var(--tw-content);
color: var(--color-icon-inverted);
}
.checkbox:disabled:checked::before {
content: var(--tw-content);
color: var(--color-icon-disabled);
}
.checkbox::before {
content: var(--tw-content);
align-items: center;
}
.checkbox::before {
content: var(--tw-content);
text-align: center;
}
.checkbox::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 16;
line-height: var(--leading-icon-base);
}
.checkbox::before {
--tw-content: "\e876";
content: var(--tw-content);
}
.checkbox::before {
content: var(--tw-content);
background-color: var(--color-background-gray-ultra-light);
}
.checkbox:disabled::before {
content: var(--tw-content);
background-color: var(--color-background-default);
}
.checkbox:checked::before {
content: var(--tw-content);
background-color: var(--color-background-accent);
}
.checkbox:checked:focus::before {
content: var(--tw-content);
background-color: var(--color-background-accent-focus);
}
.checkbox:checked:disabled::before {
content: var(--tw-content);
background-color: var(--color-background-disabled);
}
.checkbox:disabled {
cursor: not-allowed;
}
.checkbox.checkbox-inderminate::before {
display: flex;
content: var(--tw-content);
border-color: var(--color-border-transparent);
}
.checkbox.checkbox-inderminate:focus::before {
content: var(--tw-content);
border-color: var(--color-border-transparent);
}
.checkbox.checkbox-inderminate:disabled::before {
content: var(--tw-content);
border-color: var(--color-border-transparent);
}
.checkbox.checkbox-inderminate::before {
content: var(--tw-content);
color: var(--color-icon-inverted);
}
.checkbox.checkbox-inderminate:disabled::before {
content: var(--tw-content);
color: var(--color-icon-disabled);
}
.checkbox.checkbox-inderminate::before {
position: absolute;
font-family: var(--font-icon);
font-size: var(--text-icon-xs);
font-weight: 600;
font-variation-settings: "FILL" 1, "opsz" 12;
line-height: var(--leading-icon-xs);
font-size: 0.5rem;
--tw-content: "square";
content: var(--tw-content);
background-color: var(--color-background-accent);
}
.checkbox.checkbox-inderminate:focus::before {
content: var(--tw-content);
background-color: var(--color-background-accent-focus);
}
.checkbox.checkbox-inderminate:disabled::before {
content: var(--tw-content);
background-color: var(--color-background-disabled);
}
.checkbox-container {
position: relative;
display: flex;
width: 100%;
flex-wrap: wrap;
align-items: center;
}
@media (hover: hover) {
.checkbox-container:hover {
cursor: pointer;
}
}
.checkbox-container:focus {
cursor: pointer;
}
.checkbox-container:has(*:is(.checkbox:disabled)) {
cursor: not-allowed;
}
.checkbox-container .checkbox-label {
overflow: hidden;
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
text-overflow: ellipsis;
white-space: nowrap;
color: var(--color-text-default);
max-width: calc(100% - 32px);
}
.checkbox-container .checkbox-icon {
margin-right: var(--spacing-sm);
font-family: var(--font-icon);
font-size: var(--text-icon-sm);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 14;
line-height: var(--leading-icon-sm);
--tw-leading: calc(0.25rem * 6);
line-height: calc(0.25rem * 6);
color: var(--color-icon-default);
}
.checkbox-container .checkbox-description {
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
overflow-wrap: break-word;
color: var(--color-text-ultra-light);
margin-top: calc(var(--spacing-sm) * -1);
margin-left: calc(0.25rem * 7);
flex-basis: 100%;
}
.checkbox-container .checkbox-alert-message {
display: inline-flex;
width: 100%;
overflow: auto;
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
overflow-wrap: break-word;
color: var(--color-text-alert);
margin-left: calc(0.25rem * 7);
}
.checkbox-container .checkbox-alert-message::before {
content: var(--tw-content);
padding-right: calc(0.25rem * 1);
}
.checkbox-container .checkbox-alert-message::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 16;
line-height: var(--leading-icon-base);
}
.checkbox-container .checkbox-alert-message::before {
content: var(--tw-content);
--tw-leading: 20px;
line-height: 20px;
}
.checkbox-container .checkbox-alert-message::before {
content: var(--tw-content);
color: var(--color-icon-alert);
}
.checkbox-container .checkbox-alert-message::before {
--tw-content: "error";
content: var(--tw-content);
}
.checkbox-container .checkbox-information-message {
display: inline-flex;
width: 100%;
overflow: auto;
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
overflow-wrap: break-word;
color: var(--color-text-information);
margin-left: calc(0.25rem * 7);
}
.checkbox-container .checkbox-information-message::before {
content: var(--tw-content);
padding-right: calc(0.25rem * 1);
}
.checkbox-container .checkbox-information-message::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 16;
line-height: var(--leading-icon-base);
}
.checkbox-container .checkbox-information-message::before {
content: var(--tw-content);
--tw-leading: 20px;
line-height: 20px;
}
.checkbox-container .checkbox-information-message::before {
content: var(--tw-content);
color: var(--color-icon-information);
}
.checkbox-container .checkbox-information-message::before {
--tw-content: "info";
content: var(--tw-content);
}
.checkbox-container .checkbox-warning-message {
display: inline-flex;
width: 100%;
overflow: auto;
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
overflow-wrap: break-word;
color: var(--color-text-warning);
margin-left: calc(0.25rem * 7);
}
.checkbox-container .checkbox-warning-message::before {
content: var(--tw-content);
padding-right: calc(0.25rem * 1);
}
.checkbox-container .checkbox-warning-message::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 16;
line-height: var(--leading-icon-base);
}
.checkbox-container .checkbox-warning-message::before {
content: var(--tw-content);
--tw-leading: 20px;
line-height: 20px;
}
.checkbox-container .checkbox-warning-message::before {
content: var(--tw-content);
color: var(--color-icon-warning);
}
.checkbox-container .checkbox-warning-message::before {
--tw-content: "warning";
content: var(--tw-content);
}
.checkbox-container .checkbox-success-message {
display: inline-flex;
width: 100%;
overflow: auto;
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
overflow-wrap: break-word;
color: var(--color-text-success);
margin-left: calc(0.25rem * 7);
}
.checkbox-container .checkbox-success-message::before {
content: var(--tw-content);
padding-right: calc(0.25rem * 1);
}
.checkbox-container .checkbox-success-message::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 16;
line-height: var(--leading-icon-base);
}
.checkbox-container .checkbox-success-message::before {
content: var(--tw-content);
--tw-leading: 20px;
line-height: 20px;
}
.checkbox-container .checkbox-success-message::before {
content: var(--tw-content);
color: var(--color-icon-success);
}
.checkbox-container .checkbox-success-message::before {
--tw-content: "check_circle";
content: var(--tw-content);
}
.checkbox-container:has(.checkbox:disabled) .checkbox-alert-message,
.checkbox-container:has(.checkbox:disabled) .checkbox-information-message,
.checkbox-container:has(.checkbox:disabled) .checkbox-warning-message,
.checkbox-container:has(.checkbox:disabled) .checkbox-success-message {
display: none;
}
.checkbox-container:has(.checkbox:disabled) .checkbox-label {
color: var(--color-text-disabled);
}
.checkbox-container:has(.checkbox:disabled) .checkbox-description {
color: var(--color-text-disabled);
}
.checkbox-container:has(.checkbox:checked) .checkbox-alert-message {
display: none;
}
.checkbox-container:has(.checkbox-required):not(:has(.checkbox:disabled)) .checkbox-label::after {
content: var(--tw-content);
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
}
.checkbox-container:has(.checkbox-required):not(:has(.checkbox:disabled)) .checkbox-label::after {
content: var(--tw-content);
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
}
.checkbox-container:has(.checkbox-required):not(:has(.checkbox:disabled)) .checkbox-label::after {
content: var(--tw-content);
color: var(--color-icon-alert);
}
.checkbox-container:has(.checkbox-required):not(:has(.checkbox:disabled)) .checkbox-label::after {
--tw-content: "*";
content: var(--tw-content);
}
.checkbox-container:not(:has(.checkbox:disabled, .checkbox:checked)):has(.checkbox-alert-message) .checkbox::before {
content: var(--tw-content);
border-color: var(--color-border-alert);
}
.checkbox-container .status-indicator::before {
content: var(--tw-content);
margin-top: 1px;
}
.checkbox-group {
margin: calc(0.25rem * 0);
min-width: calc(0.25rem * 0);
--tw-border-style: none;
border-style: none;
padding: calc(0.25rem * 0);
}
.checkbox-group .checkbox-group-heading {
max-width: 100%;
padding-bottom: var(--spacing-sm);
}
.checkbox-group .checkbox-group-content {
display: block;
}
.checkbox-group .checkbox-group-label {
overflow: hidden;
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
text-overflow: ellipsis;
white-space: nowrap;
color: var(--color-text-default);
display: block;
}
.checkbox-group .checkbox-group-description {
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
overflow-wrap: break-word;
color: var(--color-text-ultra-light);
margin-top: calc(var(--spacing-sm) * -1);
display: block;
}
.checkbox-group .checkbox-group-alert-message {
display: inline-flex;
width: 100%;
overflow: auto;
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
overflow-wrap: break-word;
color: var(--color-text-alert);
}
.checkbox-group .checkbox-group-alert-message::before {
content: var(--tw-content);
padding-right: calc(0.25rem * 1);
}
.checkbox-group .checkbox-group-alert-message::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 16;
line-height: var(--leading-icon-base);
}
.checkbox-group .checkbox-group-alert-message::before {
content: var(--tw-content);
--tw-leading: 20px;
line-height: 20px;
}
.checkbox-group .checkbox-group-alert-message::before {
content: var(--tw-content);
color: var(--color-icon-alert);
}
.checkbox-group .checkbox-group-alert-message::before {
--tw-content: "error";
content: var(--tw-content);
}
.checkbox-group.checkbox-group-required .checkbox-group-label::after {
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
color: var(--color-icon-alert);
--tw-content: "*";
content: var(--tw-content);
}
.chip {
display: inline-flex;
height: fit-content;
min-height: calc(0.25rem * 6);
width: fit-content;
align-items: center;
border-radius: var(--radius-sm);
background-color: var(--color-background-gray-light);
padding-inline: var(--spacing-base);
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
text-wrap: nowrap;
color: var(--color-text-default);
}
.chip .chip-action {
all: unset;
display: flex;
align-items: center;
margin-right: calc(var(--spacing-base) * -1);
margin-left: var(--spacing-sm);
border-top-right-radius: var(--radius-sm);
border-bottom-right-radius: var(--radius-sm);
padding-inline: var(--spacing-sm);
background-color: var(--color-background-gray-light);
min-height: calc(0.25rem * 6);
transition-property:
color,
background-color,
border-color,
outline-color,
text-decoration-color,
fill,
stroke,
--tw-gradient-from,
--tw-gradient-via,
--tw-gradient-to;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
@media (hover: hover) {
.chip .chip-action:hover {
background-color: var(--color-background-gray);
}
}
.chip .chip-action:focus {
background-color: var(--color-background-gray-strong);
}
@media (hover: hover) {
.chip .chip-action:hover {
cursor: pointer;
}
}
.chip .chip-action:focus {
cursor: pointer;
}
.chip .chip-action-remove {
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 16;
line-height: var(--leading-icon-base);
}
.chip .chip-action-remove::before {
content: var(--tw-content);
color: var(--color-icon-default);
}
.chip .chip-action-remove::before {
--tw-content: "\e5cd";
content: var(--tw-content);
}
.chip .chip-action-add {
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 16;
line-height: var(--leading-icon-base);
}
.chip .chip-action-add::before {
content: var(--tw-content);
color: var(--color-icon-default);
}
.chip .chip-action-add::before {
--tw-content: "\e145";
content: var(--tw-content);
}
.chip.chip-disabled {
background-color: var(--color-background-default);
color: var(--color-text-disabled);
}
:is(.chip.chip-disabled .chip-action-remove, .chip.chip-disabled .chip-action-add)::before {
content: var(--tw-content);
color: var(--color-icon-disabled);
}
.chip.chip-disabled .chip-action {
cursor: not-allowed;
background-color: var(--color-background-default);
}
.chip.chip-activated {
background-color: var(--color-background-highlight);
}
@media (hover: hover) {
.chip.chip-activated:enabled:hover {
background-color: var(--color-background-highlight-hover);
}
}
.chip.chip-activated:enabled:focus {
background-color: var(--color-background-highlight-focus);
}
.chip.chip-activated .chip-action:enabled {
background-color: var(--color-background-highlight);
}
@media (hover: hover) {
.chip.chip-activated .chip-action:enabled:hover {
background-color: var(--color-background-highlight-hover);
}
}
.chip.chip-activated .chip-action:enabled:focus {
background-color: var(--color-background-highlight-focus);
}
.chip.chip-activated:disabled {
background-color: var(--color-background-default);
color: var(--color-text-disabled);
background-color: var(--color-background-disabled);
}
:is(.chip.chip-activated:disabled .chip-action-remove, .chip.chip-activated:disabled .chip-action-add)::before {
content: var(--tw-content);
color: var(--color-icon-disabled);
}
.chip.chip-activated:disabled .chip-action {
cursor: not-allowed;
background-color: var(--color-background-default);
}
@media (hover: hover) {
.chip.chip-activated:disabled:hover {
background-color: var(--color-background-disabled);
}
}
.chip.chip-activated:disabled:focus {
background-color: var(--color-background-disabled);
}
.chip.chip-activated:disabled .chip-action {
background-color: var(--color-background-disabled);
}
@media (hover: hover) {
.chip.chip-activated:disabled .chip-action:hover {
background-color: var(--color-background-disabled);
}
}
.chip.chip-activated:disabled .chip-action:focus {
background-color: var(--color-background-disabled);
}
.chip.chip-activated.chip-disabled {
background-color: var(--color-background-default);
color: var(--color-text-disabled);
background-color: var(--color-background-disabled);
}
:is(.chip.chip-activated.chip-disabled .chip-action-remove, .chip.chip-activated.chip-disabled .chip-action-add)::before {
content: var(--tw-content);
color: var(--color-icon-disabled);
}
.chip.chip-activated.chip-disabled .chip-action {
cursor: not-allowed;
background-color: var(--color-background-default);
}
@media (hover: hover) {
.chip.chip-activated.chip-disabled:hover {
background-color: var(--color-background-disabled);
}
}
.chip.chip-activated.chip-disabled:focus {
background-color: var(--color-background-disabled);
}
.chip.chip-activated.chip-disabled .chip-action {
background-color: var(--color-background-disabled);
}
@media (hover: hover) {
.chip.chip-activated.chip-disabled .chip-action:hover {
background-color: var(--color-background-disabled);
}
}
.chip.chip-activated.chip-disabled .chip-action:focus {
background-color: var(--color-background-disabled);
}
.date-input-wrapper {
position: relative;
display: flex;
width: 100%;
}
.date-input-wrapper .date-input {
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
color: var(--color-text-default);
align-items: center;
align-self: stretch;
overflow: hidden;
text-overflow: ellipsis;
--tw-outline-style: none;
outline-style: none;
width: 100%;
padding-inline: var(--spacing-md);
padding-block: var(--spacing-base);
background-color: var(--color-background-default);
border-style: var(--tw-border-style);
border-width: 1px;
--tw-border-style: solid;
border-style: solid;
border-color: var(--color-border-default);
--tw-shadow: 0 0 #0000;
box-shadow:
var(--tw-inset-shadow),
var(--tw-inset-ring-shadow),
var(--tw-ring-offset-shadow),
var(--tw-ring-shadow),
var(--tw-shadow);
transition-property:
color,
background-color,
border-color,
outline-color,
text-decoration-color,
fill,
stroke,
--tw-gradient-from,
--tw-gradient-via,
--tw-gradient-to;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.date-input-wrapper .date-input:read-only {
color: var(--color-text-default);
}
.date-input-wrapper .date-input:disabled {
color: var(--color-text-disabled);
}
.date-input-wrapper .date-input:read-only {
background-color: var(--color-background-disabled);
}
.date-input-wrapper .date-input:disabled {
background-color: var(--color-background-disabled);
}
@media (hover: hover) {
.date-input-wrapper .date-input:enabled:hover {
border-color: var(--color-border-strong);
}
}
.date-input-wrapper .date-input:enabled:focus {
border-color: var(--color-border-accent);
}
.date-input-wrapper .date-input:read-only {
border-color: var(--color-border-disabled);
}
.date-input-wrapper .date-input:read-only:focus-within {
border-color: var(--color-border-disabled);
}
@media (hover: hover) {
.date-input-wrapper .date-input:read-only:hover {
border-color: var(--color-border-disabled);
}
}
.date-input-wrapper .date-input:disabled {
border-color: var(--color-border-disabled);
}
.date-input-wrapper .date-input:disabled {
pointer-events: none;
}
.date-input-wrapper .date-input:disabled {
cursor: not-allowed;
}
.date-input-wrapper .date-input::placeholder {
color: var(--color-text-placeholder);
}
.date-input-wrapper .date-input-button {
position: absolute;
top: calc(0.25rem * 0);
right: var(--spacing-lg);
bottom: calc(0.25rem * 0);
cursor: pointer;
display: table-cell;
background-color: var(--color-background-transparent);
padding-inline: calc(0.25rem * 1);
vertical-align: middle;
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 16;
line-height: var(--leading-icon-base);
--tw-outline-style: none;
outline-style: none;
--tw-border-style: none;
border-style: none;
--tw-font-weight: var(--font-weight-normal);
font-weight: var(--font-weight-normal);
}
.date-input-wrapper .date-input-button::before {
content: var(--tw-content);
color: var(--color-icon-default);
}
.date-input-wrapper .date-input-button::before {
--tw-content: "calendar_today";
content: var(--tw-content);
}
.date-input-container {
display: grid;
height: fit-content;
}
.date-input-container .date-input-label {
overflow: hidden;
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
text-overflow: ellipsis;
white-space: nowrap;
color: var(--color-text-default);
}
.date-input-container .date-input-description {
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
overflow-wrap: break-word;
color: var(--color-text-ultra-light);
}
.date-input-container .date-input-alert-message {
display: inline-flex;
width: 100%;
overflow: auto;
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
overflow-wrap: break-word;
color: var(--color-text-alert);
margin-top: var(--spacing-sm);
}
.date-input-container .date-input-alert-message::before {
content: var(--tw-content);
padding-right: calc(0.25rem * 1);
}
.date-input-container .date-input-alert-message::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 16;
line-height: var(--leading-icon-base);
}
.date-input-container .date-input-alert-message::before {
content: var(--tw-content);
--tw-leading: 20px;
line-height: 20px;
}
.date-input-container .date-input-alert-message::before {
content: var(--tw-content);
color: var(--color-icon-alert);
}
.date-input-container .date-input-alert-message::before {
--tw-content: "error";
content: var(--tw-content);
}
.date-input-container .date-input-warning-message {
display: inline-flex;
width: 100%;
overflow: auto;
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
overflow-wrap: break-word;
color: var(--color-text-warning);
margin-top: var(--spacing-sm);
}
.date-input-container .date-input-warning-message::before {
content: var(--tw-content);
padding-right: calc(0.25rem * 1);
}
.date-input-container .date-input-warning-message::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 16;
line-height: var(--leading-icon-base);
}
.date-input-container .date-input-warning-message::before {
content: var(--tw-content);
--tw-leading: 20px;
line-height: 20px;
}
.date-input-container .date-input-warning-message::before {
content: var(--tw-content);
color: var(--color-icon-warning);
}
.date-input-container .date-input-warning-message::before {
--tw-content: "warning";
content: var(--tw-content);
}
.date-input-container .date-input-success-message {
display: inline-flex;
width: 100%;
overflow: auto;
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
overflow-wrap: break-word;
color: var(--color-text-success);
margin-top: var(--spacing-sm);
}
.date-input-container .date-input-success-message::before {
content: var(--tw-content);
padding-right: calc(0.25rem * 1);
}
.date-input-container .date-input-success-message::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 16;
line-height: var(--leading-icon-base);
}
.date-input-container .date-input-success-message::before {
content: var(--tw-content);
--tw-leading: 20px;
line-height: 20px;
}
.date-input-container .date-input-success-message::before {
content: var(--tw-content);
color: var(--color-icon-success);
}
.date-input-container .date-input-success-message::before {
--tw-content: "check_circle";
content: var(--tw-content);
}
.date-input-container .date-input-information-message {
display: inline-flex;
width: 100%;
overflow: auto;
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
overflow-wrap: break-word;
color: var(--color-text-information);
margin-top: var(--spacing-sm);
}
.date-input-container .date-input-information-message::before {
content: var(--tw-content);
padding-right: calc(0.25rem * 1);
}
.date-input-container .date-input-information-message::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 16;
line-height: var(--leading-icon-base);
}
.date-input-container .date-input-information-message::before {
content: var(--tw-content);
--tw-leading: 20px;
line-height: 20px;
}
.date-input-container .date-input-information-message::before {
content: var(--tw-content);
color: var(--color-icon-information);
}
.date-input-container .date-input-information-message::before {
--tw-content: "info";
content: var(--tw-content);
}
.date-input-container:has(.date-input:focus-visible):not(:has(.date-input:read-only, .date-input:disabled, .date-input-alert-message)) .date-input-button::before {
content: var(--tw-content);
color: var(--color-icon-accent);
}
.date-input-container:has(.date-input:disabled) {
cursor: not-allowed;
}
.date-input-container:has(.date-input:disabled) .date-input-button {
cursor: not-allowed;
}
.date-input-container:has(.date-input:disabled) .date-input-button::before {
content: var(--tw-content);
color: var(--color-icon-disabled);
}
.date-input-container:has(.date-input:disabled) .date-input-label {
color: var(--color-text-disabled);
}
.date-input-container:has(.date-input:disabled) .date-input-description {
color: var(--color-text-disabled);
}
.date-input-container:has(.date-input:disabled) .date-input-alert-message,
.date-input-container:has(.date-input:disabled) .date-input-warning-message,
.date-input-container:has(.date-input:disabled) .date-input-success-message,
.date-input-container:has(.date-input:disabled) .date-input-information-message {
display: none;
}
.date-input-container:has(.date-input:read-only) .date-input-button {
cursor: not-allowed;
}
.date-input-container:has(.date-input:read-only) .date-input-button::before {
content: var(--tw-content);
color: var(--color-icon-disabled);
}
.date-input-container:has(.date-input:read-only) .date-input-alert-message,
.date-input-container:has(.date-input:read-only) .date-input-warning-message,
.date-input-container:has(.date-input:read-only) .date-input-success-message,
.date-input-container:has(.date-input:read-only) .date-input-information-message {
display: none;
}
.date-input-container:has(.date-input-label) .date-input {
margin-top: var(--spacing-sm);
}
.date-input-container:has(.date-input-label) .date-input-description {
margin-top: calc(var(--spacing-sm) * -1);
}
.date-input-container:has(.date-input-label) .date-input-button {
top: var(--spacing-sm);
}
.date-input-container:has(.date-input-description) .date-input {
margin-top: var(--spacing-sm);
}
.date-input-container:has(.date-input-description):not(:has(.date-input-label)) .date-input-button {
top: calc(0.25rem * 0.5);
}
.date-input-container:has(.date-input-required):not(:has(.date-input:disabled, .date-input:read-only)) .date-input-label::after {
content: var(--tw-content);
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
}
.date-input-container:has(.date-input-required):not(:has(.date-input:disabled, .date-input:read-only)) .date-input-label::after {
content: var(--tw-content);
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
}
.date-input-container:has(.date-input-required):not(:has(.date-input:disabled, .date-input:read-only)) .date-input-label::after {
content: var(--tw-content);
color: var(--color-icon-alert);
}
.date-input-container:has(.date-input-required):not(:has(.date-input:disabled, .date-input:read-only)) .date-input-label::after {
--tw-content: "*";
content: var(--tw-content);
}
@media (hover: hover) {
.date-input-container:not(:has(.date-input:disabled, .date-input:read-only)) .date-input:hover {
--tw-shadow: 0px 1px 2px 0px var(--tw-shadow-color, rgba(0, 0, 0, 0.1));
box-shadow:
var(--tw-inset-shadow),
var(--tw-inset-ring-shadow),
var(--tw-ring-offset-shadow),
var(--tw-ring-shadow),
var(--tw-shadow);
}
}
.date-input-container:not(:has(.date-input:disabled, .date-input:read-only)) .date-input:focus {
--tw-shadow: 0px 1px 2px 0px var(--tw-shadow-color, rgba(0, 0, 0, 0.1));
box-shadow:
var(--tw-inset-shadow),
var(--tw-inset-ring-shadow),
var(--tw-ring-offset-shadow),
var(--tw-ring-shadow),
var(--tw-shadow);
}
.date-input-container:not(:has(.date-input:disabled, .date-input:read-only)):has(.date-input-alert-message) .date-input {
border-color: var(--color-border-alert);
}
.date-picker {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: var(--spacing-base);
width: calc(0.25rem * 56);
gap: var(--spacing-base);
background-color: var(--color-background-default);
--tw-shadow: 0px 4px 8px 0px var(--tw-shadow-color, rgba(0, 0, 0, 0.1));
box-shadow:
var(--tw-inset-shadow),
var(--tw-inset-ring-shadow),
var(--tw-ring-offset-shadow),
var(--tw-ring-shadow),
var(--tw-shadow);
}
.date-picker .date-picker-header {
display: flex;
width: 100%;
align-items: center;
gap: var(--spacing-base);
}
.date-picker .date-picker-header-level {
width: 100%;
text-align: center;
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
color: var(--color-text-default);
--tw-outline-style: none;
outline-style: none;
background-color: var(--color-background-action);
cursor: pointer;
border-radius: var(--radius-sm);
--tw-border-style: none;
border-style: none;
transition-property:
color,
background-color,
border-color,
outline-color,
text-decoration-color,
fill,
stroke,
--tw-gradient-from,
--tw-gradient-via,
--tw-gradient-to;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
@media (hover: hover) {
.date-picker .date-picker-header-level:hover {
background-color: var(--color-background-action-hover);
}
}
.date-picker .date-picker-header-level:focus {
background-color: var(--color-background-action-focus);
}
.date-picker .date-picker-header-button {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--color-icon-accent);
background-color: var(--color-background-transparent);
height: calc(0.25rem * 8);
width: calc(0.25rem * 8);
border-radius: var(--radius-md);
font-size: var(--text-icon-sm);
font-variation-settings: "FILL" 0, "opsz" 14;
line-height: var(--leading-icon-sm);
transition-property:
color,
background-color,
border-color,
outline-color,
text-decoration-color,
fill,
stroke,
--tw-gradient-from,
--tw-gradient-via,
--tw-gradient-to;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
height: calc(0.25rem * 6);
width: calc(0.25rem * 6);
border-radius: var(--radius-sm);
font-size: var(--text-icon-xs);
font-variation-settings: "FILL" 0, "opsz" 12;
line-height: var(--leading-icon-xs);
--tw-border-style: none;
border-style: none;
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 16;
line-height: var(--leading-icon-base);
}
.date-picker .date-picker-header-button:focus-visible {
--tw-outline-style: none;
outline-style: none;
}
.date-picker .date-picker-header-button:disabled {
cursor: not-allowed;
}
.date-picker .date-picker-header-button:disabled {
color: var(--color-icon-disabled-light);
}
@media (hover: hover) {
.date-picker .date-picker-header-button:enabled:hover {
background-color: var(--color-background-action-hover);
}
}
.date-picker .date-picker-header-button:enabled:focus {
background-color: var(--color-background-action-focus);
}
.date-picker .date-picker-header-button:disabled {
background-color: var(--color-background-transparent);
}
.date-picker .date-picker-item {
list-style-type: none;
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
color: var(--color-text-default);
overflow: hidden;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
display: flex;
flex: 1;
align-content: center;
align-items: flex-start;
}
.date-picker .date-picker-weekdays {
margin-block: calc(0.25rem * 0);
display: flex;
width: 100%;
align-items: center;
padding-inline-start: calc(0.25rem * 0);
text-align: center;
}
.date-picker .date-picker-weekdays > .date-picker-item {
display: block;
}
.date-picker .date-picker-weekday {
color: var(--color-text-light);
}
.date-picker .date-picker-days {
padding-inline-start: calc(0.25rem * 0);
font-size: 0px;
}
.date-picker .date-picker-days > .date-picker-item {
display: inline-block;
width: 14.28%;
}
.date-picker .date-picker-day {
background-color: var(--color-background-action);
height: calc(0.25rem * 6);
width: 100%;
cursor: pointer;
border-radius: var(--radius-sm);
--tw-border-style: none;
border-style: none;
transition-property:
color,
background-color,
border-color,
outline-color,
text-decoration-color,
fill,
stroke,
--tw-gradient-from,
--tw-gradient-via,
--tw-gradient-to;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
@media (hover: hover) {
.date-picker .date-picker-day:hover {
background-color: var(--color-background-action-hover);
}
}
.date-picker .date-picker-day:focus {
background-color: var(--color-background-action-focus);
}
.date-picker .date-picker-months {
margin-inline: calc(var(--spacing-xs) * -1);
margin-block: calc(0.25rem * 0);
padding-inline-start: calc(0.25rem * 0);
font-size: 0px;
}
.date-picker .date-picker-months > .date-picker-item {
display: inline-block;
width: calc(33% - 4px);
padding: var(--spacing-xs);
}
.date-picker .date-picker-month {
background-color: var(--color-background-action);
height: calc(0.25rem * 6);
width: 100%;
cursor: pointer;
border-radius: var(--radius-sm);
--tw-border-style: none;
border-style: none;
transition-property:
color,
background-color,
border-color,
outline-color,
text-decoration-color,
fill,
stroke,
--tw-gradient-from,
--tw-gradient-via,
--tw-gradient-to;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
@media (hover: hover) {
.date-picker .date-picker-month:hover {
background-color: var(--color-background-action-hover);
}
}
.date-picker .date-picker-month:focus {
background-color: var(--color-background-action-focus);
}
.date-picker .date-picker-years {
margin-inline: calc(var(--spacing-xs) * -1);
margin-block: calc(0.25rem * 0);
padding-inline-start: calc(0.25rem * 0);
font-size: 0px;
}
.date-picker .date-picker-years > .date-picker-item {
display: inline-block;
width: calc(33% - 4px);
padding: var(--spacing-xs);
}
.date-picker .date-picker-year {
background-color: var(--color-background-action);
height: calc(0.25rem * 6);
width: 100%;
cursor: pointer;
border-radius: var(--radius-sm);
--tw-border-style: none;
border-style: none;
transition-property:
color,
background-color,
border-color,
outline-color,
text-decoration-color,
fill,
stroke,
--tw-gradient-from,
--tw-gradient-via,
--tw-gradient-to;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
@media (hover: hover) {
.date-picker .date-picker-year:hover {
background-color: var(--color-background-action-hover);
}
}
.date-picker .date-picker-year:focus {
background-color: var(--color-background-action-focus);
}
.date-picker-header-button-next.date-picker-header-button::before {
color: var(--color-icon-accent);
--tw-content: "\e5cc";
content: var(--tw-content);
}
.date-picker-header-button-previous.date-picker-header-button::before {
color: var(--color-icon-accent);
--tw-content: "\e5cb";
content: var(--tw-content);
}
.date-picker-day-disabled.date-picker-day {
cursor: not-allowed;
background-color: var(--color-background-default);
color: var(--color-text-disabled);
}
@media (hover: hover) {
.date-picker-day-disabled.date-picker-day:hover {
background-color: var(--color-background-default);
}
}
.date-picker-day-disabled.date-picker-day:focus {
background-color: var(--color-background-default);
}
.date-picker-day-disabled.date-picker-day-current.date-picker-day {
cursor: not-allowed;
background-color: var(--color-background-action-focus);
color: var(--color-text-disabled);
}
@media (hover: hover) {
.date-picker-day-disabled.date-picker-day-current.date-picker-day:hover {
background-color: var(--color-background-action-focus);
}
}
.date-picker-day-disabled.date-picker-day-current.date-picker-day:focus {
background-color: var(--color-background-action-focus);
}
.date-picker-day-disabled.date-picker-day-outside.date-picker-day {
cursor: not-allowed;
background-color: var(--color-background-default);
color: var(--color-text-disabled);
}
@media (hover: hover) {
.date-picker-day-disabled.date-picker-day-outside.date-picker-day:hover {
background-color: var(--color-background-default);
}
}
.date-picker-day-disabled.date-picker-day-outside.date-picker-day:focus {
background-color: var(--color-background-default);
}
.date-picker-day-current.date-picker-day {
cursor: pointer;
background-color: var(--color-background-action-focus);
color: var(--color-text-default);
}
@media (hover: hover) {
.date-picker-day-current.date-picker-day:hover {
background-color: var(--color-background-action-focus);
}
}
.date-picker-day-current.date-picker-day:focus {
background-color: var(--color-background-action-focus);
}
.date-picker-day-outside.date-picker-day {
cursor: pointer;
background-color: var(--color-background-default);
color: var(--color-text-light);
}
@media (hover: hover) {
.date-picker-day-outside.date-picker-day:hover {
background-color: var(--color-background-default);
}
}
.date-picker-day-outside.date-picker-day:focus {
background-color: var(--color-background-default);
}
.date-picker-day-selected.date-picker-day {
cursor: pointer;
background-color: var(--color-background-accent);
color: var(--color-text-inverted);
}
@media (hover: hover) {
.date-picker-day-selected.date-picker-day:hover {
background-color: var(--color-background-accent);
}
}
.date-picker-day-selected.date-picker-day:focus {
background-color: var(--color-background-accent);
}
.date-picker-month-disabled.date-picker-month {
cursor: not-allowed;
background-color: var(--color-background-default);
color: var(--color-text-disabled);
}
@media (hover: hover) {
.date-picker-month-disabled.date-picker-month:hover {
background-color: var(--color-background-default);
}
}
.date-picker-month-disabled.date-picker-month:focus {
background-color: var(--color-background-default);
}
.date-picker-month-disabled.date-picker-month-current.date-picker-month {
cursor: not-allowed;
background-color: var(--color-background-action-focus);
color: var(--color-text-disabled);
}
@media (hover: hover) {
.date-picker-month-disabled.date-picker-month-current.date-picker-month:hover {
background-color: var(--color-background-action-focus);
}
}
.date-picker-month-disabled.date-picker-month-current.date-picker-month:focus {
background-color: var(--color-background-action-focus);
}
.date-picker-month-current.date-picker-month {
cursor: pointer;
background-color: var(--color-background-action-focus);
color: var(--color-text-default);
}
@media (hover: hover) {
.date-picker-month-current.date-picker-month:hover {
background-color: var(--color-background-action-focus);
}
}
.date-picker-month-current.date-picker-month:focus {
background-color: var(--color-background-action-focus);
}
.date-picker-month-selected.date-picker-month {
cursor: pointer;
background-color: var(--color-background-accent);
color: var(--color-text-inverted);
}
@media (hover: hover) {
.date-picker-month-selected.date-picker-month:hover {
background-color: var(--color-background-accent);
}
}
.date-picker-month-selected.date-picker-month:focus {
background-color: var(--color-background-accent);
}
.date-picker-year-disabled.date-picker-year {
cursor: not-allowed;
background-color: var(--color-background-default);
color: var(--color-text-disabled);
}
@media (hover: hover) {
.date-picker-year-disabled.date-picker-year:hover {
background-color: var(--color-background-default);
}
}
.date-picker-year-disabled.date-picker-year:focus {
background-color: var(--color-background-default);
}
.date-picker-year-disabled.date-picker-year-current.date-picker-year {
cursor: not-allowed;
background-color: var(--color-background-action-focus);
color: var(--color-text-disabled);
}
@media (hover: hover) {
.date-picker-year-disabled.date-picker-year-current.date-picker-year:hover {
background-color: var(--color-background-action-focus);
}
}
.date-picker-year-disabled.date-picker-year-current.date-picker-year:focus {
background-color: var(--color-background-action-focus);
}
.date-picker-year-current.date-picker-year {
cursor: pointer;
background-color: var(--color-background-action-focus);
color: var(--color-text-default);
}
@media (hover: hover) {
.date-picker-year-current.date-picker-year:hover {
background-color: var(--color-background-action-focus);
}
}
.date-picker-year-current.date-picker-year:focus {
background-color: var(--color-background-action-focus);
}
.date-picker-year-selected.date-picker-year {
cursor: pointer;
background-color: var(--color-background-accent);
color: var(--color-text-inverted);
}
@media (hover: hover) {
.date-picker-year-selected.date-picker-year:hover {
background-color: var(--color-background-accent);
}
}
.date-picker-year-selected.date-picker-year:focus {
background-color: var(--color-background-accent);
}
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--spacing-xl);
align-self: stretch;
}
.empty-state .empty-state-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--spacing-base);
align-self: stretch;
}
.empty-state .empty-state-content .empty-state-icon {
font-family: var(--font-icon);
font-size: var(--text-icon-5xl);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 36;
line-height: var(--leading-icon-5xl);
--tw-leading: 36px;
line-height: 36px;
color: var(--color-icon-accent);
}
.empty-state .empty-state-content .empty-state-title {
overflow: hidden;
text-align: center;
font-family: var(--font-default);
letter-spacing: var(--tracking-lg);
font-weight: 600;
font-style: normal;
font-size: var(--text-lg);
line-height: var(--leading-lg);
text-overflow: ellipsis;
white-space: nowrap;
color: var(--color-text-default);
}
.empty-state .empty-state-content .empty-state-description {
text-align: center;
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
color: var(--color-text-light);
}
.empty-state.empty-state-compact {
margin-inline: calc(0.25rem * 8);
margin-block: calc(0.25rem * 10);
gap: var(--spacing-base);
}
.empty-state.empty-state-compact .empty-state-title {
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
color: var(--color-text-placeholder);
}
.empty-state.empty-state-compact .empty-state-icon {
font-family: var(--font-icon);
font-size: var(--text-icon-2xl);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 24;
line-height: var(--leading-icon-2xl);
--tw-leading: 24px;
line-height: 24px;
color: var(--color-icon-disabled);
}
.file-upload {
border-style: var(--tw-border-style);
border-width: 1px;
--tw-border-style: solid;
border-style: solid;
border-color: var(--color-border-default);
background-color: var(--color-background-default);
display: flex;
height: calc(0.25rem * 24);
align-items: center;
justify-content: center;
padding-inline: var(--spacing-md);
padding-block: var(--spacing-base);
--tw-shadow: 0 0 #0000;
box-shadow:
var(--tw-inset-shadow),
var(--tw-inset-ring-shadow),
var(--tw-ring-offset-shadow),
var(--tw-ring-shadow),
var(--tw-shadow);
}
.file-upload .file-upload-button {
font-weight: 600;
line-height: var(--leading-base);
display: inline-flex;
align-items: baseline;
gap: var(--spacing-base);
border-radius: var(--radius-md);
padding-inline: var(--spacing-xl);
padding-block: var(--spacing-base);
cursor: pointer;
border-style: var(--tw-border-style);
border-width: 1px;
--tw-border-style: solid;
border-style: solid;
border-color: var(--color-border-transparent);
transition-property:
color,
background-color,
border-color,
outline-color,
text-decoration-color,
fill,
stroke,
--tw-gradient-from,
--tw-gradient-via,
--tw-gradient-to;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
color: var(--color-text-inverted);
background-color: var(--color-background-accent);
height: fit-content;
width: fit-content;
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
background-color: var(--color-background-action);
color: var(--color-text-accent);
border-color: var(--color-border-accent);
position: relative;
align-items: center;
}
.file-upload .file-upload-button:focus-visible {
--tw-outline-style: none;
outline-style: none;
}
.file-upload .file-upload-button:disabled {
cursor: not-allowed;
}
@media (hover: hover) {
.file-upload .file-upload-button:enabled:hover {
color: var(--color-text-inverted);
}
}
.file-upload .file-upload-button:enabled:focus {
color: var(--color-text-inverted);
}
.file-upload .file-upload-button:disabled {
color: var(--color-text-disabled);
}
.file-upload .file-upload-button:has(*:is(.spinner)) {
color: var(--color-background-transparent);
}
@media (hover: hover) {
.file-upload .file-upload-button:enabled:hover {
background-color: var(--color-background-accent-hover);
}
}
.file-upload .file-upload-button:enabled:focus {
background-color: var(--color-background-accent-focus);
}
.file-upload .file-upload-button:disabled {
background-color: var(--color-background-disabled);
}
@media (hover: hover) {
.file-upload .file-upload-button:enabled:hover {
background-color: var(--color-background-action-hover);
}
}
.file-upload .file-upload-button:enabled:focus {
background-color: var(--color-background-action-focus);
}
.file-upload .file-upload-button:disabled {
background-color: var(--color-background-action);
}
@media (hover: hover) {
.file-upload .file-upload-button:enabled:hover {
color: var(--color-text-accent);
}
}
.file-upload .file-upload-button:enabled:focus {
color: var(--color-text-accent);
}
.file-upload .file-upload-button:disabled {
color: var(--color-text-disabled-light);
}
.file-upload .file-upload-button:has(*:is(.spinner)) {
color: var(--color-background-transparent);
}
.file-upload .file-upload-button:disabled {
border-color: var(--color-border-disabled);
}
.file-upload .file-upload-button::after {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 16;
line-height: var(--leading-icon-base);
}
.file-upload .file-upload-button::after {
--tw-content: "file_upload";
content: var(--tw-content);
}
.file-upload.file-upload-disabled {
cursor: not-allowed;
border-color: var(--color-border-disabled);
background-color: var(--color-background-disabled);
}
.file-upload.file-upload-disabled > .file-upload-button {
background-color: var(--color-background-transparent);
color: var(--color-text-disabled);
pointer-events: none;
cursor: not-allowed;
--tw-border-style: none;
border-style: none;
}
@media (hover: hover) {
.file-upload.file-upload-disabled > .file-upload-button:hover {
background-color: var(--color-background-transparent);
}
}
.file-upload.file-upload-disabled > .file-upload-button:focus {
background-color: var(--color-background-transparent);
}
@media (hover: hover) {
.file-upload.file-upload-disabled > .file-upload-button:hover {
color: var(--color-text-disabled);
}
}
.file-upload.file-upload-disabled > .file-upload-button:focus {
color: var(--color-text-disabled);
}
.file-upload-container {
display: grid;
height: fit-content;
}
.file-upload-container .file-upload-label {
overflow: hidden;
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
text-overflow: ellipsis;
white-space: nowrap;
color: var(--color-text-default);
}
.file-upload-container .file-upload-description {
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
overflow-wrap: break-word;
color: var(--color-text-ultra-light);
}
.file-upload-container .file-upload-alert-message {
display: inline-flex;
width: 100%;
overflow: auto;
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
overflow-wrap: break-word;
color: var(--color-text-alert);
margin-top: var(--spacing-sm);
}
.file-upload-container .file-upload-alert-message::before {
content: var(--tw-content);
padding-right: calc(0.25rem * 1);
}
.file-upload-container .file-upload-alert-message::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 16;
line-height: var(--leading-icon-base);
}
.file-upload-container .file-upload-alert-message::before {
content: var(--tw-content);
--tw-leading: 20px;
line-height: 20px;
}
.file-upload-container .file-upload-alert-message::before {
content: var(--tw-content);
color: var(--color-icon-alert);
}
.file-upload-container .file-upload-alert-message::before {
--tw-content: "error";
content: var(--tw-content);
}
.file-upload-container .file-upload-warning-message {
display: inline-flex;
width: 100%;
overflow: auto;
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
overflow-wrap: break-word;
color: var(--color-text-warning);
margin-top: var(--spacing-sm);
}
.file-upload-container .file-upload-warning-message::before {
content: var(--tw-content);
padding-right: calc(0.25rem * 1);
}
.file-upload-container .file-upload-warning-message::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 16;
line-height: var(--leading-icon-base);
}
.file-upload-container .file-upload-warning-message::before {
content: var(--tw-content);
--tw-leading: 20px;
line-height: 20px;
}
.file-upload-container .file-upload-warning-message::before {
content: var(--tw-content);
color: var(--color-icon-warning);
}
.file-upload-container .file-upload-warning-message::before {
--tw-content: "warning";
content: var(--tw-content);
}
.file-upload-container .file-upload-success-message {
display: inline-flex;
width: 100%;
overflow: auto;
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
overflow-wrap: break-word;
color: var(--color-text-success);
margin-top: var(--spacing-sm);
}
.file-upload-container .file-upload-success-message::before {
content: var(--tw-content);
padding-right: calc(0.25rem * 1);
}
.file-upload-container .file-upload-success-message::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 16;
line-height: var(--leading-icon-base);
}
.file-upload-container .file-upload-success-message::before {
content: var(--tw-content);
--tw-leading: 20px;
line-height: 20px;
}
.file-upload-container .file-upload-success-message::before {
content: var(--tw-content);
color: var(--color-icon-success);
}
.file-upload-container .file-upload-success-message::before {
--tw-content: "check_circle";
content: var(--tw-content);
}
.file-upload-container .file-upload-information-message {
display: inline-flex;
width: 100%;
overflow: auto;
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
overflow-wrap: break-word;
color: var(--color-text-information);
margin-top: var(--spacing-sm);
}
.file-upload-container .file-upload-information-message::before {
content: var(--tw-content);
padding-right: calc(0.25rem * 1);
}
.file-upload-container .file-upload-information-message::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 16;
line-height: var(--leading-icon-base);
}
.file-upload-container .file-upload-information-message::before {
content: var(--tw-content);
--tw-leading: 20px;
line-height: 20px;
}
.file-upload-container .file-upload-information-message::before {
content: var(--tw-content);
color: var(--color-icon-information);
}
.file-upload-container .file-upload-information-message::before {
--tw-content: "info";
content: var(--tw-content);
}
.file-upload-container:has(.file-upload-button:disabled) {
cursor: not-allowed;
}
.file-upload-container:has(.file-upload-button:disabled) .file-upload-alert-message,
.file-upload-container:has(.file-upload-button:disabled) .file-upload-warning-message,
.file-upload-container:has(.file-upload-button:disabled) .file-upload-success-message {
display: none;
}
.file-upload-container:has(.file-upload-disabled) {
cursor: not-allowed;
}
.file-upload-container:has(.file-upload-disabled) .file-upload-alert-message,
.file-upload-container:has(.file-upload-disabled) .file-upload-warning-message,
.file-upload-container:has(.file-upload-disabled) .file-upload-success-message,
.file-upload-container:has(.file-upload-disabled) .file-upload-information-message {
display: none;
}
.file-upload-container:has(.file-upload-disabled) .file-upload-label {
color: var(--color-text-disabled);
}
.file-upload-container:has(.file-upload-disabled) .file-upload-description {
color: var(--color-text-disabled);
}
.file-upload-container:not(:has(.file-upload-disabled, .file-upload-button:disabled)):has(.file-upload-alert-message) .file-upload {
border-color: var(--color-border-alert);
}
.file-upload-container:not(:has(.file-upload-disabled, .file-upload-button:disabled)):has(.file-upload-required) .file-upload-label::after {
content: var(--tw-content);
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
}
.file-upload-container:not(:has(.file-upload-disabled, .file-upload-button:disabled)):has(.file-upload-required) .file-upload-label::after {
content: var(--tw-content);
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
}
.file-upload-container:not(:has(.file-upload-disabled, .file-upload-button:disabled)):has(.file-upload-required) .file-upload-label::after {
content: var(--tw-content);
color: var(--color-icon-alert);
}
.file-upload-container:not(:has(.file-upload-disabled, .file-upload-button:disabled)):has(.file-upload-required) .file-upload-label::after {
--tw-content: "*";
content: var(--tw-content);
}
.file-upload-container:not(:has(.file-upload-disabled, .file-upload-button:disabled)):has(.file-upload-button:hover) .file-upload {
--tw-shadow: 0px 1px 2px 0px var(--tw-shadow-color, rgba(0, 0, 0, 0.1));
box-shadow:
var(--tw-inset-shadow),
var(--tw-inset-ring-shadow),
var(--tw-ring-offset-shadow),
var(--tw-ring-shadow),
var(--tw-shadow);
}
.file-upload-container:not(:has(.file-upload-disabled, .file-upload-button:disabled)):has(.file-upload-button:focus) .file-upload {
--tw-shadow: 0px 1px 2px 0px var(--tw-shadow-color, rgba(0, 0, 0, 0.1));
box-shadow:
var(--tw-inset-shadow),
var(--tw-inset-ring-shadow),
var(--tw-ring-offset-shadow),
var(--tw-ring-shadow),
var(--tw-shadow);
}
.file-upload-container:has(.file-upload-description) .file-upload {
margin-top: calc(0.25rem * 1);
}
.file-upload-container:has(.file-upload-label) .file-upload {
margin-top: calc(0.25rem * 1);
}
.file-upload-container:has(.file-upload-label) .file-upload-description {
margin-top: calc(0.25rem * -1);
}
.file-upload-wrapper {
display: flex;
flex-direction: column;
gap: var(--spacing-xs);
}
.file-upload-wrapper:has(.file-upload) {
gap: var(--spacing-lg);
}
.file-upload-wrapper:has(.file-upload-disabled) .file-upload-document {
cursor: not-allowed;
border-color: var(--color-border-disabled);
background-color: var(--color-background-disabled);
--tw-shadow: 0 0 #0000;
box-shadow:
var(--tw-inset-shadow),
var(--tw-inset-ring-shadow),
var(--tw-ring-offset-shadow),
var(--tw-ring-shadow),
var(--tw-shadow);
}
.file-upload-wrapper:has(.file-upload-disabled) .file-upload-document::before {
content: var(--tw-content);
color: var(--color-icon-disabled);
}
.file-upload-wrapper:has(.file-upload-disabled) .file-upload-document-clear-button {
pointer-events: none;
background-color: var(--color-background-transparent);
}
.file-upload-wrapper:has(.file-upload-disabled) .file-upload-document-clear-button::before {
content: var(--tw-content);
color: var(--color-icon-disabled);
}
.file-upload-wrapper:has(.file-upload-disabled) .file-upload-document-name {
color: var(--color-text-disabled);
}
.file-upload-wrapper:has(.file-upload-disabled) .file-upload-document-size {
color: var(--color-text-disabled);
}
.file-upload-wrapper:has(.file-upload-document-clear-button:hover) .file-upload-document {
--tw-shadow: 0 0 #0000;
box-shadow:
var(--tw-inset-shadow),
var(--tw-inset-ring-shadow),
var(--tw-ring-offset-shadow),
var(--tw-ring-shadow),
var(--tw-shadow);
}
.file-upload-document-container {
display: flex;
flex-direction: column;
gap: var(--spacing-base);
}
.file-upload-document {
position: relative;
display: flex;
width: 100%;
align-items: center;
gap: var(--spacing-base);
background-color: var(--color-background-default);
padding-inline: var(--spacing-md);
padding-block: var(--spacing-base);
--tw-outline-style: none;
outline-style: none;
border-style: var(--tw-border-style);
border-width: 1px;
--tw-border-style: solid;
border-style: solid;
border-color: var(--color-border-default);
--tw-shadow: 0 0 #0000;
box-shadow:
var(--tw-inset-shadow),
var(--tw-inset-ring-shadow),
var(--tw-ring-offset-shadow),
var(--tw-ring-shadow),
var(--tw-shadow);
}
.file-upload-document:focus {
border-color: var(--color-border-accent);
}
@media (hover: hover) {
.file-upload-document:hover {
--tw-shadow: 0px 1px 2px 0px var(--tw-shadow-color, rgba(0, 0, 0, 0.1));
box-shadow:
var(--tw-inset-shadow),
var(--tw-inset-ring-shadow),
var(--tw-ring-offset-shadow),
var(--tw-ring-shadow),
var(--tw-shadow);
}
}
.file-upload-document:focus {
--tw-shadow: 0px 1px 2px 0px var(--tw-shadow-color, rgba(0, 0, 0, 0.1));
box-shadow:
var(--tw-inset-shadow),
var(--tw-inset-ring-shadow),
var(--tw-ring-offset-shadow),
var(--tw-ring-shadow),
var(--tw-shadow);
}
.file-upload-document::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-4xl);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 32;
line-height: var(--leading-icon-4xl);
}
.file-upload-document::before {
content: var(--tw-content);
color: var(--color-icon-default);
}
.file-upload-document::before {
--tw-content: "\e24d";
content: var(--tw-content);
}
.file-upload-document .file-upload-document-information {
display: flex;
width: 100%;
flex-direction: column;
align-items: flex-start;
justify-content: center;
align-self: stretch;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.file-upload-document .file-upload-document-name {
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
color: var(--color-text-default);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.file-upload-document .file-upload-document-size {
margin-top: calc(var(--spacing-sm) * -1);
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
color: var(--color-text-light);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.file-upload-document .file-upload-document-clear-button {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--color-icon-accent);
background-color: var(--color-background-transparent);
height: calc(0.25rem * 8);
width: calc(0.25rem * 8);
border-radius: var(--radius-md);
font-family: var(--font-icon);
font-size: var(--text-icon-sm);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 14;
line-height: var(--leading-icon-sm);
--tw-border-style: none;
border-style: none;
transition-property:
color,
background-color,
border-color,
outline-color,
text-decoration-color,
fill,
stroke,
--tw-gradient-from,
--tw-gradient-via,
--tw-gradient-to;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.file-upload-document .file-upload-document-clear-button:focus-visible {
--tw-outline-style: none;
outline-style: none;
}
.file-upload-document .file-upload-document-clear-button:disabled {
cursor: not-allowed;
}
.file-upload-document .file-upload-document-clear-button:disabled {
color: var(--color-icon-disabled-light);
}
@media (hover: hover) {
.file-upload-document .file-upload-document-clear-button:enabled:hover {
background-color: var(--color-background-action-hover);
}
}
.file-upload-document .file-upload-document-clear-button:enabled:focus {
background-color: var(--color-background-action-focus);
}
.file-upload-document .file-upload-document-clear-button:disabled {
background-color: var(--color-background-transparent);
}
.file-upload-document .file-upload-document-clear-button::before {
content: var(--tw-content);
color: var(--color-icon-default);
}
.file-upload-document .file-upload-document-clear-button::before {
--tw-content: "\e872";
content: var(--tw-content);
}
.image {
border-radius: var(--radius-sm);
border-style: var(--tw-border-style);
border-width: 1px;
--tw-border-style: solid;
border-style: solid;
border-color: var(--color-border-ultra-light);
position: relative;
height: calc(0.25rem * 20);
width: calc(0.25rem * 20);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--color-background-default);
padding: calc(0.25rem * 0);
}
.image:has(*:is(.image-alert-indicator)) {
border-color: var(--color-border-alert);
}
.image .image-content {
display: flex;
aspect-ratio: 1 / 1;
height: 100%;
width: 100%;
object-fit: fill;
align-items: center;
justify-content: center;
font-family: var(--font-icon);
font-size: var(--text-icon-4xl);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 32;
line-height: var(--leading-icon-4xl);
color: var(--color-icon-default);
}
.image .image-content.image-content-success {
color: var(--color-icon-success);
}
.image .image-content.image-content-alert {
color: var(--color-icon-alert);
}
.image .image-content.image-content-warning {
color: var(--color-icon-warning);
}
.image .image-content.image-content-information {
color: var(--color-icon-information);
}
.image .image-content.image-content-placeholder {
background-color: var(--color-background-gray-ultra-light);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
background-image: url('data:image/svg+xml,');
}
.image .image-content.image-content-padded {
height: calc(100% - 16px);
width: calc(100% - 16px);
object-fit: contain;
}
.image .image-alert-indicator {
position: absolute;
top: calc(0.25rem * -0.5);
right: calc(0.25rem * -0.5);
}
.image .image-alert-indicator::before {
content: var(--tw-content);
margin-right: var(--spacing-sm);
}
.image .image-alert-indicator::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-lg);
font-weight: 600;
font-variation-settings: "FILL" 1, "opsz" 18;
line-height: var(--leading-icon-lg);
}
.image .image-alert-indicator::before {
content: var(--tw-content);
--tw-leading: calc(0.25rem * 7);
line-height: calc(0.25rem * 7);
}
.image .image-alert-indicator::before {
content: var(--tw-content);
color: var(--color-icon-alert);
}
.image .image-alert-indicator::before {
--tw-content: "error";
content: var(--tw-content);
}
.image .image-warning-indicator {
position: absolute;
top: calc(0.25rem * -0.5);
right: calc(0.25rem * -0.5);
}
.image .image-warning-indicator::before {
content: var(--tw-content);
margin-right: var(--spacing-sm);
}
.image .image-warning-indicator::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-lg);
font-weight: 600;
font-variation-settings: "FILL" 1, "opsz" 18;
line-height: var(--leading-icon-lg);
}
.image .image-warning-indicator::before {
content: var(--tw-content);
--tw-leading: calc(0.25rem * 7);
line-height: calc(0.25rem * 7);
}
.image .image-warning-indicator::before {
content: var(--tw-content);
color: var(--color-icon-warning);
}
.image .image-warning-indicator::before {
--tw-content: "warning";
content: var(--tw-content);
}
.image.image-extra-small {
height: calc(0.25rem * 8);
min-height: calc(0.25rem * 8);
width: calc(0.25rem * 8);
min-width: calc(0.25rem * 8);
}
.image.image-extra-small .image-content-padded {
padding: calc(0.25rem * 1);
}
.image.image-extra-small .image-alert-indicator {
display: none;
}
.image.image-extra-small .image-content {
font-family: var(--font-icon);
font-size: var(--text-icon-lg);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 18;
line-height: var(--leading-icon-lg);
}
.image.image-medium {
height: calc(0.25rem * 24);
min-height: calc(0.25rem * 24);
width: calc(0.25rem * 24);
min-width: calc(0.25rem * 24);
}
.image.image-medium .image-content-padded {
padding: calc(0.25rem * 2);
}
.image.image-large {
height: calc(0.25rem * 32);
min-height: calc(0.25rem * 32);
width: calc(0.25rem * 32);
min-width: calc(0.25rem * 32);
}
.image.image-large .image-content-padded {
padding: calc(0.25rem * 3);
}
.image.image-extra-large {
height: 400px;
min-height: 400px;
width: 400px;
min-width: 400px;
}
.image.image-extra-large .image-content-padded {
padding: calc(0.25rem * 6);
}
.image.image-full {
height: 100%;
width: 100%;
}
.image.image-full:has(*:is(.image-alert-indicator)) {
border-color: var(--color-border-ultra-light);
}
.image.image-full .image-content {
aspect-ratio: auto;
object-fit: contain;
}
.image.image-full .image-content-padded {
padding: calc(0.25rem * 6);
}
.image.image-full .image-alert-indicator {
display: none;
}
.image.image-zoom {
cursor: zoom-in;
}
.image.image-zoom.image-extra-large:not(:has(.image-content-placeholder)) .image-zoom-indicator {
display: inline-flex;
}
.image.image-zoom.image-full {
cursor: default;
}
.image.image-zoom .image-zoom-indicator {
position: absolute;
bottom: calc(0.25rem * 2);
left: calc(0.25rem * 2);
display: none;
font-family: var(--font-default);
letter-spacing: var(--tracking-xs);
font-weight: 400;
font-style: normal;
font-size: var(--text-xs);
line-height: var(--tw-leading, var(--leading-xs));
color: var(--color-text-accent);
height: calc(0.25rem * 6);
width: fit-content;
align-items: center;
border-radius: var(--radius-md);
padding-inline: var(--spacing-base);
background-color: rgba(255, 255, 255, 0.9);
}
.image.image-zoom .image-zoom-indicator::before {
content: var(--tw-content);
margin-right: var(--spacing-sm);
}
.image.image-zoom .image-zoom-indicator::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-xs);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 12;
line-height: var(--leading-icon-xs);
}
.image.image-zoom .image-zoom-indicator::before {
content: var(--tw-content);
color: var(--color-icon-accent);
}
.image.image-zoom .image-zoom-indicator::before {
--tw-content: "open_in_full";
content: var(--tw-content);
}
.image.image-editable {
--tw-outline-style: none;
outline-style: none;
cursor: pointer;
}
.image.image-editable::before {
content: var(--tw-content);
position: absolute;
}
.image.image-editable::before {
content: var(--tw-content);
top: calc(0.25rem * 0);
}
.image.image-editable::before {
content: var(--tw-content);
right: calc(0.25rem * 0);
}
.image.image-editable::before {
content: var(--tw-content);
bottom: calc(0.25rem * 0);
}
.image.image-editable::before {
content: var(--tw-content);
left: calc(0.25rem * 0);
}
.image.image-editable::before {
content: var(--tw-content);
opacity: 0%;
}
.image.image-editable::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 16;
line-height: var(--leading-icon-base);
}
.image.image-editable::before {
content: var(--tw-content);
color: var(--color-icon-inverted);
}
.image.image-editable::before {
--tw-content: "edit";
content: var(--tw-content);
}
@media (hover: hover) {
.image.image-editable:hover::before {
content: var(--tw-content);
opacity: 100%;
}
}
@media (hover: hover) {
.image.image-editable:hover::before {
content: var(--tw-content);
transition-property: all;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
}
.image.image-editable::before {
content: var(--tw-content);
display: flex;
}
.image.image-editable::before {
content: var(--tw-content);
align-items: center;
}
.image.image-editable::before {
content: var(--tw-content);
justify-content: center;
}
.image.image-editable:before {
background-color: rgba(34, 39, 44, 0.6);
}
.image.image-editable.image-extra-small::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-xs);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 12;
line-height: var(--leading-icon-xs);
}
.image.image-editable.image-full::before {
content: var(--tw-content);
display: none;
}
.image.image-editable:hover:has(*:is(.image-content-placeholder)) {
border-color: var(--color-border-transparent);
}
.image.image-editable:hover .image-alert-indicator::before {
content: var(--tw-content);
color: var(--color-icon-transparent);
}
.image-picker {
background-color: var(--color-background-default);
border-style: var(--tw-border-style);
border-width: 1px;
--tw-border-style: solid;
border-style: solid;
border-color: var(--color-border-default);
height: calc(0.25rem * 48);
padding-inline: var(--spacing-4xl);
padding-block: var(--spacing-lg);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--spacing-base);
position: relative;
overflow: hidden;
--tw-shadow: 0 0 #0000;
box-shadow:
var(--tw-inset-shadow),
var(--tw-inset-ring-shadow),
var(--tw-ring-offset-shadow),
var(--tw-ring-shadow),
var(--tw-shadow);
}
.image-picker .image-picker-button {
font-weight: 600;
line-height: var(--leading-base);
display: inline-flex;
align-items: baseline;
gap: var(--spacing-base);
border-radius: var(--radius-md);
padding-inline: var(--spacing-xl);
padding-block: var(--spacing-base);
cursor: pointer;
border-style: var(--tw-border-style);
border-width: 1px;
--tw-border-style: solid;
border-style: solid;
border-color: var(--color-border-transparent);
transition-property:
color,
background-color,
border-color,
outline-color,
text-decoration-color,
fill,
stroke,
--tw-gradient-from,
--tw-gradient-via,
--tw-gradient-to;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
color: var(--color-text-inverted);
background-color: var(--color-background-accent);
position: relative;
height: fit-content;
width: fit-content;
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
background-color: var(--color-background-action);
color: var(--color-text-accent);
border-color: var(--color-border-accent);
align-items: center;
}
.image-picker .image-picker-button:focus-visible {
--tw-outline-style: none;
outline-style: none;
}
.image-picker .image-picker-button:disabled {
cursor: not-allowed;
}
@media (hover: hover) {
.image-picker .image-picker-button:enabled:hover {
color: var(--color-text-inverted);
}
}
.image-picker .image-picker-button:enabled:focus {
color: var(--color-text-inverted);
}
.image-picker .image-picker-button:disabled {
color: var(--color-text-disabled);
}
.image-picker .image-picker-button:has(*:is(.spinner)) {
color: var(--color-background-transparent);
}
@media (hover: hover) {
.image-picker .image-picker-button:enabled:hover {
background-color: var(--color-background-accent-hover);
}
}
.image-picker .image-picker-button:enabled:focus {
background-color: var(--color-background-accent-focus);
}
.image-picker .image-picker-button:disabled {
background-color: var(--color-background-disabled);
}
@media (hover: hover) {
.image-picker .image-picker-button:enabled:hover {
background-color: var(--color-background-action-hover);
}
}
.image-picker .image-picker-button:enabled:focus {
background-color: var(--color-background-action-focus);
}
.image-picker .image-picker-button:disabled {
background-color: var(--color-background-action);
}
@media (hover: hover) {
.image-picker .image-picker-button:enabled:hover {
color: var(--color-text-accent);
}
}
.image-picker .image-picker-button:enabled:focus {
color: var(--color-text-accent);
}
.image-picker .image-picker-button:disabled {
color: var(--color-text-disabled-light);
}
.image-picker .image-picker-button:has(*:is(.spinner)) {
color: var(--color-background-transparent);
}
.image-picker .image-picker-button:disabled {
border-color: var(--color-border-disabled);
}
.image-picker .image-picker-preview {
max-height: 100%;
max-width: 100%;
}
.image-picker .image-picker-clear-button {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--color-icon-accent);
background-color: var(--color-background-transparent);
height: calc(0.25rem * 8);
width: calc(0.25rem * 8);
border-radius: var(--radius-md);
font-size: var(--text-icon-sm);
font-variation-settings: "FILL" 0, "opsz" 14;
line-height: var(--leading-icon-sm);
--tw-border-style: none;
border-style: none;
transition-property:
color,
background-color,
border-color,
outline-color,
text-decoration-color,
fill,
stroke,
--tw-gradient-from,
--tw-gradient-via,
--tw-gradient-to;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
height: calc(0.25rem * 6);
width: calc(0.25rem * 6);
border-radius: var(--radius-sm);
font-family: var(--font-icon);
font-size: var(--text-icon-xs);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 12;
line-height: var(--leading-icon-xs);
position: absolute;
right: var(--spacing-lg);
bottom: var(--spacing-base);
color: var(--color-icon-default);
}
.image-picker .image-picker-clear-button:focus-visible {
--tw-outline-style: none;
outline-style: none;
}
.image-picker .image-picker-clear-button:disabled {
cursor: not-allowed;
}
.image-picker .image-picker-clear-button:disabled {
color: var(--color-icon-disabled-light);
}
@media (hover: hover) {
.image-picker .image-picker-clear-button:enabled:hover {
background-color: var(--color-background-action-hover);
}
}
.image-picker .image-picker-clear-button:enabled:focus {
background-color: var(--color-background-action-focus);
}
.image-picker .image-picker-clear-button:disabled {
background-color: var(--color-background-transparent);
}
.image-picker .image-picker-clear-button::before {
--tw-content: "\e872";
content: var(--tw-content);
}
.image-picker .image-picker-placeholder {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--spacing-xs);
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
color: var(--color-text-placeholder);
}
.image-picker .image-picker-placeholder::before {
content: var(--tw-content);
margin-bottom: calc(0.25rem * 1.5);
}
.image-picker .image-picker-placeholder::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-2xl);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 24;
line-height: var(--leading-icon-2xl);
}
.image-picker .image-picker-placeholder::before {
content: var(--tw-content);
color: var(--color-icon-disabled);
}
.image-picker .image-picker-placeholder::before {
--tw-content: "\e2c6";
content: var(--tw-content);
}
.image-picker .image-picker-toolbar {
background-color: var(--color-background-gray-ultra-light);
position: absolute;
top: calc(0.25rem * 0);
left: calc(0.25rem * 0);
height: 100%;
align-items: center;
gap: var(--spacing-sm);
padding-inline: var(--spacing-sm);
padding-block: var(--spacing-base);
}
.image-picker .image-picker-toolbar .action-icon:not(.action-icon-activated) {
background-color: var(--color-background-gray-ultra-light);
}
@media (hover: hover) {
.image-picker .image-picker-toolbar .action-icon:not(.action-icon-activated):enabled:hover {
background-color: var(--color-background-gray);
}
}
.image-picker .image-picker-toolbar .action-icon:not(.action-icon-activated):enabled:focus {
background-color: var(--color-background-gray-strong);
}
.image-picker.image-picker-disabled {
background-color: var(--color-background-disabled);
border-color: var(--color-border-disabled);
cursor: not-allowed;
}
.image-picker.image-picker-disabled > .image-picker-button {
background-color: var(--color-background-transparent);
color: var(--color-text-disabled-light);
pointer-events: none;
cursor: not-allowed;
--tw-border-style: none;
border-style: none;
}
@media (hover: hover) {
.image-picker.image-picker-disabled > .image-picker-button:hover {
background-color: var(--color-background-transparent);
}
}
.image-picker.image-picker-disabled > .image-picker-button:focus {
background-color: var(--color-background-transparent);
}
@media (hover: hover) {
.image-picker.image-picker-disabled > .image-picker-button:hover {
color: var(--color-text-disabled-light);
}
}
.image-picker.image-picker-disabled > .image-picker-button:focus {
color: var(--color-text-disabled-light);
}
.image-picker.image-picker-disabled > .image-picker-placeholder {
color: var(--color-text-disabled-light);
}
.image-picker.image-picker-disabled > .image-picker-placeholder::before {
content: var(--tw-content);
color: var(--color-icon-disabled-light);
}
.image-picker-container {
display: grid;
height: fit-content;
}
.image-picker-container .image-picker-label {
overflow: hidden;
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
text-overflow: ellipsis;
white-space: nowrap;
color: var(--color-text-default);
}
.image-picker-container .image-picker-description {
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
overflow-wrap: break-word;
color: var(--color-text-ultra-light);
}
.image-picker-container .image-picker-alert-message {
display: inline-flex;
width: 100%;
overflow: auto;
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
overflow-wrap: break-word;
color: var(--color-text-alert);
margin-top: var(--spacing-sm);
}
.image-picker-container .image-picker-alert-message::before {
content: var(--tw-content);
padding-right: calc(0.25rem * 1);
}
.image-picker-container .image-picker-alert-message::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 16;
line-height: var(--leading-icon-base);
}
.image-picker-container .image-picker-alert-message::before {
content: var(--tw-content);
--tw-leading: 20px;
line-height: 20px;
}
.image-picker-container .image-picker-alert-message::before {
content: var(--tw-content);
color: var(--color-icon-alert);
}
.image-picker-container .image-picker-alert-message::before {
--tw-content: "error";
content: var(--tw-content);
}
.image-picker-container .image-picker-warning-message {
display: inline-flex;
width: 100%;
overflow: auto;
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
overflow-wrap: break-word;
color: var(--color-text-warning);
margin-top: var(--spacing-sm);
}
.image-picker-container .image-picker-warning-message::before {
content: var(--tw-content);
padding-right: calc(0.25rem * 1);
}
.image-picker-container .image-picker-warning-message::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 16;
line-height: var(--leading-icon-base);
}
.image-picker-container .image-picker-warning-message::before {
content: var(--tw-content);
--tw-leading: 20px;
line-height: 20px;
}
.image-picker-container .image-picker-warning-message::before {
content: var(--tw-content);
color: var(--color-icon-warning);
}
.image-picker-container .image-picker-warning-message::before {
--tw-content: "warning";
content: var(--tw-content);
}
.image-picker-container .image-picker-success-message {
display: inline-flex;
width: 100%;
overflow: auto;
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
overflow-wrap: break-word;
color: var(--color-text-success);
margin-top: var(--spacing-sm);
}
.image-picker-container .image-picker-success-message::before {
content: var(--tw-content);
padding-right: calc(0.25rem * 1);
}
.image-picker-container .image-picker-success-message::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 16;
line-height: var(--leading-icon-base);
}
.image-picker-container .image-picker-success-message::before {
content: var(--tw-content);
--tw-leading: 20px;
line-height: 20px;
}
.image-picker-container .image-picker-success-message::before {
content: var(--tw-content);
color: var(--color-icon-success);
}
.image-picker-container .image-picker-success-message::before {
--tw-content: "check_circle";
content: var(--tw-content);
}
.image-picker-container .image-picker-information-message {
display: inline-flex;
width: 100%;
overflow: auto;
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
overflow-wrap: break-word;
color: var(--color-text-information);
margin-top: var(--spacing-sm);
}
.image-picker-container .image-picker-information-message::before {
content: var(--tw-content);
padding-right: calc(0.25rem * 1);
}
.image-picker-container .image-picker-information-message::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 16;
line-height: var(--leading-icon-base);
}
.image-picker-container .image-picker-information-message::before {
content: var(--tw-content);
--tw-leading: 20px;
line-height: 20px;
}
.image-picker-container .image-picker-information-message::before {
content: var(--tw-content);
color: var(--color-icon-information);
}
.image-picker-container .image-picker-information-message::before {
--tw-content: "info";
content: var(--tw-content);
}
.image-picker-container:has(.image-picker-disabled) {
cursor: not-allowed;
}
.image-picker-container:has(.image-picker-disabled) .image-picker-label,
.image-picker-container:has(.image-picker-disabled) .image-picker-description {
color: var(--color-text-disabled);
}
.image-picker-container:has(.image-picker-disabled) .image-picker-alert-message,
.image-picker-container:has(.image-picker-disabled) .image-picker-information-message,
.image-picker-container:has(.image-picker-disabled) .image-picker-warning-message,
.image-picker-container:has(.image-picker-disabled) .image-picker-success-message {
display: none;
}
.image-picker-container:has(.image-picker-disabled) .image-picker-clear-button {
color: var(--color-icon-disabled);
}
.image-picker-container:not(:has(.image-picker-disabled)):has(.image-picker-button:hover) .image-picker {
--tw-shadow: 0px 1px 2px 0px var(--tw-shadow-color, rgba(0, 0, 0, 0.1));
box-shadow:
var(--tw-inset-shadow),
var(--tw-inset-ring-shadow),
var(--tw-ring-offset-shadow),
var(--tw-ring-shadow),
var(--tw-shadow);
}
.image-picker-container:not(:has(.image-picker-disabled)):has(.image-picker-button:focus) .image-picker {
--tw-shadow: 0px 1px 2px 0px var(--tw-shadow-color, rgba(0, 0, 0, 0.1));
box-shadow:
var(--tw-inset-shadow),
var(--tw-inset-ring-shadow),
var(--tw-ring-offset-shadow),
var(--tw-ring-shadow),
var(--tw-shadow);
}
.image-picker-container:not(:has(.image-picker-disabled)):has(.image-picker-required) .image-picker-label::after {
content: var(--tw-content);
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
}
.image-picker-container:not(:has(.image-picker-disabled)):has(.image-picker-required) .image-picker-label::after {
content: var(--tw-content);
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
}
.image-picker-container:not(:has(.image-picker-disabled)):has(.image-picker-required) .image-picker-label::after {
content: var(--tw-content);
color: var(--color-icon-alert);
}
.image-picker-container:not(:has(.image-picker-disabled)):has(.image-picker-required) .image-picker-label::after {
--tw-content: "*";
content: var(--tw-content);
}
.image-picker-container:not(:has(.image-picker-disabled)):has(.image-picker-alert-message) .image-picker {
border-color: var(--color-border-alert);
}
.image-picker-container:has(.image-picker-toolbar) .image-picker {
padding-left: 88px;
}
.image-picker-container:has(.image-picker-description) .image-picker {
margin-top: calc(0.25rem * 1);
}
.image-picker-container:has(.image-picker-label) .image-picker {
margin-top: calc(0.25rem * 1);
}
.image-picker-container:has(.image-picker-label) .image-picker-description {
margin-top: calc(0.25rem * -1);
}
.inline-notification {
display: flex;
gap: var(--spacing-base);
padding: var(--spacing-lg);
border-radius: var(--radius-xs);
border-style: var(--tw-border-style);
border-width: 1px;
border-left-style: var(--tw-border-style);
border-left-width: 4px;
--tw-border-style: solid;
border-style: solid;
border-color: var(--color-border-information);
background-color: var(--color-background-gray-ultra-light);
color: var(--color-text-default);
}
.inline-notification::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 600;
font-variation-settings: "FILL" 1, "opsz" 16;
line-height: var(--leading-icon-base);
}
.inline-notification::before {
content: var(--tw-content);
--tw-leading: calc(0.25rem * 6);
line-height: calc(0.25rem * 6);
}
.inline-notification::before {
content: var(--tw-content);
color: var(--color-icon-information);
}
.inline-notification::before {
--tw-content: "\e88e";
content: var(--tw-content);
}
.inline-notification .inline-notification-content {
display: table;
width: 100%;
overflow: auto;
}
.inline-notification .inline-notification-content .inline-notification-title {
margin-right: var(--spacing-sm);
display: inline-block;
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 600;
font-style: normal;
font-size: var(--text-base);
line-height: var(--leading-base);
overflow-wrap: break-word;
color: var(--color-text-default);
}
.inline-notification .inline-notification-content .inline-notification-description {
display: inline-block;
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
overflow-wrap: break-word;
color: var(--color-text-default);
}
.inline-notification .inline-notification-content-wrapper {
display: flex;
width: 100%;
flex-direction: column;
gap: var(--spacing-sm);
}
.inline-notification .inline-notification-close {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--color-icon-accent);
background-color: var(--color-background-transparent);
height: calc(0.25rem * 8);
width: calc(0.25rem * 8);
border-radius: var(--radius-md);
font-size: var(--text-icon-sm);
font-variation-settings: "FILL" 0, "opsz" 14;
line-height: var(--leading-icon-sm);
--tw-border-style: none;
border-style: none;
transition-property:
color,
background-color,
border-color,
outline-color,
text-decoration-color,
fill,
stroke,
--tw-gradient-from,
--tw-gradient-via,
--tw-gradient-to;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
height: calc(0.25rem * 6);
width: calc(0.25rem * 6);
border-radius: var(--radius-sm);
font-family: var(--font-icon);
font-size: var(--text-icon-xs);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 12;
line-height: var(--leading-icon-xs);
color: var(--color-text-default);
background-color: var(--color-background-gray-ultra-light);
}
.inline-notification .inline-notification-close:focus-visible {
--tw-outline-style: none;
outline-style: none;
}
.inline-notification .inline-notification-close:disabled {
cursor: not-allowed;
}
.inline-notification .inline-notification-close:disabled {
color: var(--color-icon-disabled-light);
}
@media (hover: hover) {
.inline-notification .inline-notification-close:enabled:hover {
background-color: var(--color-background-action-hover);
}
}
.inline-notification .inline-notification-close:enabled:focus {
background-color: var(--color-background-action-focus);
}
.inline-notification .inline-notification-close:disabled {
background-color: var(--color-background-transparent);
}
.inline-notification .inline-notification-close::before {
--tw-content: "\e5cd";
content: var(--tw-content);
}
@media (hover: hover) {
.inline-notification .inline-notification-close:enabled:hover {
background-color: var(--color-background-gray);
}
}
.inline-notification .inline-notification-close:enabled:focus {
background-color: var(--color-background-gray-strong);
}
.inline-notification.inline-notification-alert {
border-color: var(--color-border-alert);
}
.inline-notification.inline-notification-alert::before {
content: var(--tw-content);
color: var(--color-icon-alert);
}
.inline-notification.inline-notification-alert::before {
--tw-content: "\e001";
content: var(--tw-content);
}
.inline-notification.inline-notification-warning {
border-color: var(--color-border-warning);
}
.inline-notification.inline-notification-warning::before {
content: var(--tw-content);
color: var(--color-icon-warning);
}
.inline-notification.inline-notification-warning::before {
--tw-content: "\f083";
content: var(--tw-content);
}
.inline-notification.inline-notification-success {
border-color: var(--color-border-success);
}
.inline-notification.inline-notification-success::before {
content: var(--tw-content);
color: var(--color-icon-success);
}
.inline-notification.inline-notification-success::before {
--tw-content: "\e86c";
content: var(--tw-content);
}
.link {
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
color: var(--color-text-accent);
position: relative;
text-decoration-line: none;
transition-property:
color,
background-color,
border-color,
outline-color,
text-decoration-color,
fill,
stroke,
--tw-gradient-from,
--tw-gradient-via,
--tw-gradient-to;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
--tw-outline-style: none;
outline-style: none;
}
.link:visited {
color: var(--color-text-accent);
}
@media (hover: hover) {
.link:hover {
text-decoration-line: underline;
}
}
.link:focus {
text-decoration-line: underline;
}
.link .link-decoration {
position: absolute;
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 16;
line-height: var(--leading-icon-base);
--tw-leading: calc(0.25rem * 6);
line-height: calc(0.25rem * 6);
color: var(--color-icon-accent);
right: calc(0.25rem * -5);
}
.link.link-disabled {
color: var(--color-text-disabled-light);
cursor: not-allowed;
}
.link.link-disabled:visited {
color: var(--color-text-disabled-light);
}
@media (hover: hover) {
.link.link-disabled:hover {
text-decoration-line: none;
}
}
.link.link-disabled:focus {
text-decoration-line: none;
}
.link.link-disabled:active {
pointer-events: none;
}
.link.link-disabled::before {
content: var(--tw-content);
color: var(--color-icon-disabled-light);
}
.link.link-disabled::after {
content: var(--tw-content);
color: var(--color-icon-disabled-light);
}
.link.link-external {
margin-right: calc(0.25rem * 5);
display: inline-block;
}
.link.link-external::after {
content: var(--tw-content);
position: absolute;
}
.link.link-external::after {
content: var(--tw-content);
padding-left: var(--spacing-sm);
}
.link.link-external::after {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 16;
line-height: var(--leading-icon-base);
}
.link.link-external::after {
content: var(--tw-content);
--tw-leading: calc(0.25rem * 6);
line-height: calc(0.25rem * 6);
}
.link.link-external::after {
content: var(--tw-content);
color: var(--color-icon-accent);
}
.link.link-external::after {
--tw-content: "open_in_new";
content: var(--tw-content);
}
.link.link-mail {
margin-left: calc(0.25rem * 5);
display: inline-block;
}
.link.link-mail::before {
content: var(--tw-content);
position: absolute;
}
.link.link-mail::before {
content: var(--tw-content);
left: calc(0.25rem * -5);
}
.link.link-mail::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 16;
line-height: var(--leading-icon-base);
}
.link.link-mail::before {
content: var(--tw-content);
--tw-leading: calc(0.25rem * 6);
line-height: calc(0.25rem * 6);
}
.link.link-mail::before {
content: var(--tw-content);
color: var(--color-icon-accent);
}
.link.link-mail::before {
--tw-content: "mail";
content: var(--tw-content);
}
.link.link-phone {
margin-left: calc(0.25rem * 5);
display: inline-block;
}
.link.link-phone::before {
content: var(--tw-content);
position: absolute;
}
.link.link-phone::before {
content: var(--tw-content);
left: calc(0.25rem * -5);
}
.link.link-phone::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 16;
line-height: var(--leading-icon-base);
}
.link.link-phone::before {
content: var(--tw-content);
--tw-leading: calc(0.25rem * 6);
line-height: calc(0.25rem * 6);
}
.link.link-phone::before {
content: var(--tw-content);
color: var(--color-icon-accent);
}
.link.link-phone::before {
--tw-content: "phone";
content: var(--tw-content);
}
.link.link-smartphone {
margin-left: calc(0.25rem * 5);
display: inline-block;
}
.link.link-smartphone::before {
content: var(--tw-content);
position: absolute;
}
.link.link-smartphone::before {
content: var(--tw-content);
left: calc(0.25rem * -5);
}
.link.link-smartphone::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 16;
line-height: var(--leading-icon-base);
}
.link.link-smartphone::before {
content: var(--tw-content);
--tw-leading: calc(0.25rem * 6);
line-height: calc(0.25rem * 6);
}
.link.link-smartphone::before {
content: var(--tw-content);
color: var(--color-icon-accent);
}
.link.link-smartphone::before {
--tw-content: "smartphone";
content: var(--tw-content);
}
.link.link-address {
margin-left: calc(0.25rem * 5);
display: inline-block;
}
.link.link-address::before {
content: var(--tw-content);
position: absolute;
}
.link.link-address::before {
content: var(--tw-content);
left: calc(0.25rem * -5);
}
.link.link-address::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 16;
line-height: var(--leading-icon-base);
}
.link.link-address::before {
content: var(--tw-content);
--tw-leading: calc(0.25rem * 6);
line-height: calc(0.25rem * 6);
}
.link.link-address::before {
content: var(--tw-content);
color: var(--color-icon-accent);
}
.link.link-address::before {
--tw-content: "location_on";
content: var(--tw-content);
}
.link-container {
display: flex;
width: fit-content;
flex-direction: row;
gap: var(--spacing-base);
}
.link-container:hover .action-icon {
display: flex;
}
.link-container .action-icon {
display: none;
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 16;
line-height: var(--leading-icon-base);
}
.map {
display: flex;
flex: 1;
border-style: var(--tw-border-style);
border-width: 1px;
--tw-border-style: solid;
border-style: solid;
border-color: var(--color-border-ultra-light);
height: 100%;
width: 100%;
align-items: center;
justify-content: center;
border-radius: var(--radius-sm);
--tw-shadow: 0 0 #0000;
box-shadow:
var(--tw-inset-shadow),
var(--tw-inset-ring-shadow),
var(--tw-ring-offset-shadow),
var(--tw-ring-shadow),
var(--tw-shadow);
}
.map .empty-state-compact {
margin: calc(0.25rem * 0);
}
.map-container {
display: flex;
height: fit-content;
min-height: calc(0.25rem * 60);
flex-direction: column;
}
.map-container .map-label {
overflow: hidden;
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
text-overflow: ellipsis;
white-space: nowrap;
color: var(--color-text-default);
}
.map-container .map-description {
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
overflow-wrap: break-word;
color: var(--color-text-ultra-light);
}
.map-container:has(.map-description) .map {
margin-top: var(--spacing-sm);
}
.map-container:has(.map-label) .map {
margin-top: var(--spacing-sm);
}
.map-container:has(.map-label) .map-description {
margin-top: calc(var(--spacing-sm) * -1);
}
.map-marker {
display: flex;
align-items: center;
justify-content: center;
height: calc(0.25rem * 7);
width: calc(0.25rem * 7);
rotate: calc(45deg * -1);
background-color: var(--color-background-accent);
border-radius: 50% 50% 50% 0;
}
.map-marker > .map-marker-icon {
rotate: 45deg;
font-family: var(--font-icon);
font-size: var(--text-icon-xs);
font-weight: 600;
font-variation-settings: "FILL" 1, "opsz" 12;
line-height: var(--leading-icon-xs);
color: var(--color-icon-inverted);
}
.map-marker.map-marker-company {
position: relative;
background-color: var(--color-background-highlight);
}
.map-marker.map-marker-company > .map-marker-icon {
height: 100%;
width: 100%;
background-position: center;
background-repeat: no-repeat;
color: var(--color-icon-transparent);
background-image: url('data:image/svg+xml,');
}
.modal {
display: flex;
flex-direction: column;
gap: var(--spacing-base);
padding: var(--spacing-2xl);
--tw-shadow: 0px 8px 16px 0px var(--tw-shadow-color, rgba(0, 0, 0, 0.1));
box-shadow:
var(--tw-inset-shadow),
var(--tw-inset-ring-shadow),
var(--tw-ring-offset-shadow),
var(--tw-ring-shadow),
var(--tw-shadow);
height: fit-content;
width: fit-content;
max-height: 80%;
min-width: 25rem;
background-color: var(--color-background-default);
position: relative;
}
.modal .modal-header-section {
display: flex;
align-items: flex-start;
gap: var(--spacing-lg);
align-self: stretch;
}
.modal .modal-header-section .modal-header {
display: flex;
width: 100%;
flex: 1;
break-after: avoid;
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-base);
}
.modal .modal-header-section .modal-header .modal-header-content {
display: flex;
min-height: calc(0.25rem * 8);
width: 100%;
flex: 1;
flex-direction: row;
align-items: center;
gap: calc(0.25rem * 4);
}
.modal .modal-header-section .modal-header .modal-icon {
font-family: var(--font-icon);
font-size: var(--text-icon-3xl);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 28;
line-height: var(--leading-icon-3xl);
--tw-leading: 28px;
line-height: 28px;
color: var(--color-icon-accent);
}
.modal .modal-header-section .modal-header .modal-title {
font-family: var(--font-default);
letter-spacing: var(--tracking-lg);
font-weight: 600;
font-style: normal;
font-size: var(--text-lg);
line-height: var(--leading-lg);
overflow-wrap: break-word;
color: var(--color-text-default);
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
width: 100%;
}
.modal .modal-header-section .modal-header .modal-subtitle {
width: 100%;
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 600;
font-style: normal;
font-size: var(--text-base);
line-height: var(--leading-base);
text-wrap: wrap;
overflow-wrap: break-word;
color: var(--color-text-light);
}
.modal .modal-header-section .modal-header .modal-description {
width: 100%;
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
overflow-wrap: break-word;
color: var(--color-text-ultra-light);
}
.modal .modal-header-section .modal-close {
position: absolute;
right: calc(0.25rem * 6);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--color-icon-accent);
background-color: var(--color-background-transparent);
height: calc(0.25rem * 8);
width: calc(0.25rem * 8);
border-radius: var(--radius-md);
font-family: var(--font-icon);
font-size: var(--text-icon-sm);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 14;
line-height: var(--leading-icon-sm);
--tw-border-style: none;
border-style: none;
transition-property:
color,
background-color,
border-color,
outline-color,
text-decoration-color,
fill,
stroke,
--tw-gradient-from,
--tw-gradient-via,
--tw-gradient-to;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
color: var(--color-icon-default);
}
.modal .modal-header-section .modal-close:focus-visible {
--tw-outline-style: none;
outline-style: none;
}
.modal .modal-header-section .modal-close:disabled {
cursor: not-allowed;
}
.modal .modal-header-section .modal-close:disabled {
color: var(--color-icon-disabled-light);
}
@media (hover: hover) {
.modal .modal-header-section .modal-close:enabled:hover {
background-color: var(--color-background-action-hover);
}
}
.modal .modal-header-section .modal-close:enabled:focus {
background-color: var(--color-background-action-focus);
}
.modal .modal-header-section .modal-close:disabled {
background-color: var(--color-background-transparent);
}
.modal .modal-header-section .modal-close::before {
--tw-content: "\e5cd";
content: var(--tw-content);
}
.modal .modal-content-section {
display: flex;
flex-direction: column;
gap: var(--spacing-2xl);
overflow-y: hidden;
}
.modal .modal-content-section .modal-content {
overflow: auto;
}
.modal .modal-content-section .modal-footer {
display: flex;
justify-content: flex-end;
gap: var(--spacing-base);
align-self: stretch;
}
.modal:has(.modal-close) .modal-title {
margin-right: calc(0.25rem * 10);
}
.modal.modal-stepper .modal-footer {
position: relative;
align-items: center;
justify-content: flex-end;
}
.modal.modal-stepper .modal-footer:has(*:is(.button-secondary)) {
justify-content: space-between;
}
.modal.modal-stepper .modal-footer .stepper {
position: absolute;
width: 100%;
justify-content: center;
}
.modal.modal-stepper .modal-footer .button {
width: max-content;
}
.modal.modal-mobile .modal-header-content {
flex-direction: column;
align-items: center;
}
.modal.modal-mobile .button {
width: 100%;
justify-content: center;
}
.modal.modal-mobile .modal-header {
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--spacing-base);
}
.modal.modal-mobile .modal-title {
margin-right: calc(0.25rem * 0);
text-align: center;
}
.modal.modal-mobile .modal-description,
.modal.modal-mobile .modal-subtitle {
text-align: center;
}
.modal.modal-mobile:has(.modal-close) .modal-icon {
margin-inline: calc(0.25rem * 10);
}
.modal.modal-mobile:has(.modal-close):not(:has(.modal-icon)) .modal-title {
margin-inline: calc(0.25rem * 10);
}
.modal.modal-mobile .modal-footer {
flex-direction: column;
}
.modal.modal-centered .modal-header-content {
flex-direction: column;
align-items: center;
}
.modal.modal-centered .button {
width: 100%;
justify-content: center;
}
.modal.modal-centered .modal-header {
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--spacing-base);
}
.modal.modal-centered .modal-title {
margin-right: calc(0.25rem * 0);
text-align: center;
}
.modal.modal-centered .modal-description,
.modal.modal-centered .modal-subtitle {
text-align: center;
}
.modal.modal-centered:has(.modal-close) .modal-icon {
margin-inline: calc(0.25rem * 10);
}
.modal.modal-centered:has(.modal-close):not(:has(.modal-icon)) .modal-title {
margin-inline: calc(0.25rem * 10);
}
.notification-indicator {
display: inline-flex;
font-family: var(--font-default);
border-radius: calc(infinity * 1px);
background-color: var(--color-background-alert);
color: var(--color-text-inverted);
flex-shrink: 0;
align-items: center;
justify-content: center;
min-width: calc(0.25rem * 4);
padding-inline: var(--spacing-sm);
padding-block: var(--spacing-xs);
font-size: 0.6875rem;
font-style: normal;
line-height: 0.75rem;
font-weight: 600;
}
.notification-indicator.notification-indicator-small {
display: flex;
height: calc(0.25rem * 1.5);
width: calc(0.25rem * 1.5);
min-width: auto;
padding-inline: var(--spacing-xs);
}
.number-input-input {
position: relative;
display: flex;
height: fit-content;
--tw-shadow: 0 0 #0000;
box-shadow:
var(--tw-inset-shadow),
var(--tw-inset-ring-shadow),
var(--tw-ring-offset-shadow),
var(--tw-ring-shadow),
var(--tw-shadow);
border-style: var(--tw-border-style);
border-width: 1px;
--tw-border-style: solid;
border-style: solid;
border-color: var(--color-border-default);
}
.number-input-input .number-input-controls {
margin-left: -1px;
display: grid;
}
.number-input-input .number-input-controls .number-input-button {
display: table-cell;
cursor: pointer;
background-color: var(--color-background-default);
padding-inline: var(--spacing-sm);
vertical-align: middle;
font-family: var(--font-icon);
font-size: var(--text-icon-lg);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 18;
line-height: var(--leading-icon-lg);
color: var(--color-icon-default);
--tw-outline-style: none;
outline-style: none;
line-height: 18px;
}
.number-input-input .number-input-controls .number-input-button.number-input-button-increment {
border-style: var(--tw-border-style);
border-width: 0px;
border-left-style: var(--tw-border-style);
border-left-width: 1px;
--tw-border-style: solid;
border-style: solid;
border-color: var(--color-border-default);
}
.number-input-input .number-input-controls .number-input-button.number-input-button-increment::before {
--tw-content: "\e5ce";
content: var(--tw-content);
}
.number-input-input .number-input-controls .number-input-button.number-input-button-decrement {
margin-top: -1px;
border-style: var(--tw-border-style);
border-width: 0px;
border-top-style: var(--tw-border-style);
border-top-width: 1px;
border-left-style: var(--tw-border-style);
border-left-width: 1px;
--tw-border-style: solid;
border-style: solid;
border-color: var(--color-border-default);
}
.number-input-input .number-input-controls .number-input-button.number-input-button-decrement::before {
--tw-content: "\e5cf";
content: var(--tw-content);
}
.number-input-input .number-input {
width: 100%;
align-items: center;
align-self: stretch;
overflow: hidden;
padding-inline: var(--spacing-md);
padding-block: var(--spacing-base);
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
text-overflow: ellipsis;
--tw-outline-style: none;
outline-style: none;
background-color: var(--color-background-default);
color: var(--color-text-default);
--tw-border-style: solid;
border-style: solid;
border-right-color: var(--color-border-transparent);
height: fit-content;
--tw-border-style: none;
border-style: none;
-moz-appearance: textfield;
}
.number-input-input .number-input:read-only {
background-color: var(--color-background-disabled);
}
.number-input-input .number-input:disabled {
background-color: var(--color-background-disabled);
}
.number-input-input .number-input:disabled {
color: var(--color-text-disabled);
}
.number-input-input .number-input:disabled {
pointer-events: none;
}
.number-input-input .number-input:disabled {
cursor: not-allowed;
}
.number-input-input .number-input::placeholder {
color: var(--color-text-placeholder);
}
.number-input-input .number-input::-webkit-inner-spin-button,
.number-input-input .number-input::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.number-input-input .number-input-decoration {
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
color: var(--color-text-light);
padding-block: var(--spacing-base);
padding-right: calc(0.25rem * 3);
}
.number-input-container {
display: grid;
height: fit-content;
}
.number-input-container .number-input-label {
overflow: hidden;
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
text-overflow: ellipsis;
white-space: nowrap;
color: var(--color-text-default);
}
.number-input-container .number-input-description {
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
overflow-wrap: break-word;
color: var(--color-text-ultra-light);
}
.number-input-container .number-input-alert-message {
display: inline-flex;
width: 100%;
overflow: auto;
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
overflow-wrap: break-word;
color: var(--color-text-alert);
margin-top: var(--spacing-sm);
}
.number-input-container .number-input-alert-message::before {
content: var(--tw-content);
padding-right: calc(0.25rem * 1);
}
.number-input-container .number-input-alert-message::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 16;
line-height: var(--leading-icon-base);
}
.number-input-container .number-input-alert-message::before {
content: var(--tw-content);
--tw-leading: 20px;
line-height: 20px;
}
.number-input-container .number-input-alert-message::before {
content: var(--tw-content);
color: var(--color-icon-alert);
}
.number-input-container .number-input-alert-message::before {
--tw-content: "error";
content: var(--tw-content);
}
.number-input-container .number-input-warning-message {
display: inline-flex;
width: 100%;
overflow: auto;
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
overflow-wrap: break-word;
color: var(--color-text-warning);
margin-top: var(--spacing-sm);
}
.number-input-container .number-input-warning-message::before {
content: var(--tw-content);
padding-right: calc(0.25rem * 1);
}
.number-input-container .number-input-warning-message::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 16;
line-height: var(--leading-icon-base);
}
.number-input-container .number-input-warning-message::before {
content: var(--tw-content);
--tw-leading: 20px;
line-height: 20px;
}
.number-input-container .number-input-warning-message::before {
content: var(--tw-content);
color: var(--color-icon-warning);
}
.number-input-container .number-input-warning-message::before {
--tw-content: "warning";
content: var(--tw-content);
}
.number-input-container .number-input-success-message {
display: inline-flex;
width: 100%;
overflow: auto;
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
overflow-wrap: break-word;
color: var(--color-text-success);
margin-top: var(--spacing-sm);
}
.number-input-container .number-input-success-message::before {
content: var(--tw-content);
padding-right: calc(0.25rem * 1);
}
.number-input-container .number-input-success-message::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 16;
line-height: var(--leading-icon-base);
}
.number-input-container .number-input-success-message::before {
content: var(--tw-content);
--tw-leading: 20px;
line-height: 20px;
}
.number-input-container .number-input-success-message::before {
content: var(--tw-content);
color: var(--color-icon-success);
}
.number-input-container .number-input-success-message::before {
--tw-content: "check_circle";
content: var(--tw-content);
}
.number-input-container .number-input-information-message {
display: inline-flex;
width: 100%;
overflow: auto;
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
overflow-wrap: break-word;
color: var(--color-text-information);
margin-top: var(--spacing-sm);
}
.number-input-container .number-input-information-message::before {
content: var(--tw-content);
padding-right: calc(0.25rem * 1);
}
.number-input-container .number-input-information-message::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 16;
line-height: var(--leading-icon-base);
}
.number-input-container .number-input-information-message::before {
content: var(--tw-content);
--tw-leading: 20px;
line-height: 20px;
}
.number-input-container .number-input-information-message::before {
content: var(--tw-content);
color: var(--color-icon-information);
}
.number-input-container .number-input-information-message::before {
--tw-content: "info";
content: var(--tw-content);
}
.number-input-container:has(.number-input-description) .number-input-input {
margin-top: var(--spacing-sm);
}
.number-input-container:has(.number-input-label) .number-input-input {
margin-top: var(--spacing-sm);
}
.number-input-container:has(.number-input-label) .number-input-description {
margin-top: calc(var(--spacing-sm) * -1);
}
.number-input-container:has(.number-input:disabled) {
cursor: not-allowed;
}
.number-input-container:has(.number-input:disabled) .number-input-input {
border-color: var(--color-border-disabled);
}
.number-input-container:has(.number-input:disabled) .number-input-decoration {
color: var(--color-text-disabled);
}
.number-input-container:has(.number-input:disabled) .number-input-button {
cursor: not-allowed;
border-color: var(--color-border-disabled);
background-color: var(--color-background-disabled);
color: var(--color-icon-disabled);
}
.number-input-container:has(.number-input:disabled) .number-input-label,
.number-input-container:has(.number-input:disabled) .number-input-description {
color: var(--color-text-disabled);
}
.number-input-container:has(.number-input:disabled) .number-input-alert-message,
.number-input-container:has(.number-input:disabled) .number-input-warning-message,
.number-input-container:has(.number-input:disabled) .number-input-success-message,
.number-input-container:has(.number-input:disabled) .number-input-information-message {
display: none;
}
.number-input-container:has(.number-input:read-only) .number-input-input {
border-color: var(--color-border-disabled);
}
.number-input-container:has(.number-input:read-only) .number-input-decoration {
background-color: var(--color-background-disabled);
color: var(--color-text-default);
}
.number-input-container:has(.number-input:read-only) .number-input-button {
cursor: not-allowed;
border-color: var(--color-border-disabled);
background-color: var(--color-background-disabled);
color: var(--color-icon-disabled);
}
.number-input-container:has(.number-input:read-only) .number-input-alert-message,
.number-input-container:has(.number-input:read-only) .number-input-warning-message,
.number-input-container:has(.number-input:read-only) .number-input-success-message,
.number-input-container:has(.number-input:read-only) .number-input-information-message {
display: none;
}
.number-input-container:not(:has(.number-input:disabled, .number-input:read-only)):has(.number-input-required) .number-input-label::after {
content: var(--tw-content);
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
}
.number-input-container:not(:has(.number-input:disabled, .number-input:read-only)):has(.number-input-required) .number-input-label::after {
content: var(--tw-content);
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
}
.number-input-container:not(:has(.number-input:disabled, .number-input:read-only)):has(.number-input-required) .number-input-label::after {
content: var(--tw-content);
color: var(--color-icon-alert);
}
.number-input-container:not(:has(.number-input:disabled, .number-input:read-only)):has(.number-input-required) .number-input-label::after {
--tw-content: "*";
content: var(--tw-content);
}
.number-input-container:not(:has(.number-input:disabled, .number-input:read-only)):has(.number-input:hover, .number-input:focus) .number-input-input {
--tw-shadow: 0px 1px 2px 0px var(--tw-shadow-color, rgba(0, 0, 0, 0.1));
box-shadow:
var(--tw-inset-shadow),
var(--tw-inset-ring-shadow),
var(--tw-ring-offset-shadow),
var(--tw-ring-shadow),
var(--tw-shadow);
}
.number-input-container:not(:has(.number-input:disabled, .number-input:read-only)):has(.number-input-alert-message) .number-input-input {
border-color: var(--color-border-alert);
}
.number-input-container:not(:has(.number-input:disabled, .number-input:read-only)):not(:has(.number-input-alert-message)):has(.number-input:hover) .number-input-input {
border-color: var(--color-border-strong);
}
.number-input-container:not(:has(.number-input:disabled, .number-input:read-only)):not(:has(.number-input-alert-message)):has(.number-input:focus) .number-input-button {
border-color: var(--color-border-accent);
}
.number-input-container:not(:has(.number-input:disabled, .number-input:read-only)):not(:has(.number-input-alert-message)):has(.number-input:focus) .number-input-input {
border-color: var(--color-border-accent);
}
.number-input-container:not(:has(.number-input:disabled, .number-input:read-only)):not(:has(.number-input-alert-message)):has(.number-input-button:hover) .number-input-input {
border-color: var(--color-border-strong);
}
.number-input-container:not(:has(.number-input:disabled, .number-input:read-only)):not(:has(.number-input-alert-message)):has(.number-input-button:focus) .number-input-input {
border-color: var(--color-border-accent);
}
.number-input-container:not(:has(.number-input:disabled, .number-input:read-only)):not(:has(.number-input-alert-message)):has(.number-input-button:focus) .number-input-button {
border-color: var(--color-border-accent);
}
.pagination {
display: flex;
justify-content: space-between;
gap: var(--spacing-lg);
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
color: var(--color-text-default);
flex-wrap: nowrap;
text-wrap: nowrap;
justify-content: center;
}
@container (width >= 66rem) {
.pagination {
justify-content: space-between;
}
}
.pagination .pagination-items {
align-items: center;
gap: var(--spacing-base);
display: none;
}
@container (width >= 66rem) {
.pagination .pagination-items {
display: flex;
}
}
.pagination .pagination-items .select-wrapper {
width: 88px;
}
.pagination .pagination-items .select-wrapper::after {
content: var(--tw-content);
top: calc(0.25rem * 2.5);
}
.pagination .pagination-navigation {
display: flex;
align-items: center;
gap: var(--spacing-lg);
}
.pagination .pagination-navigation .pagination-navigation-group {
display: flex;
align-items: center;
gap: var(--spacing-sm);
}
.pagination .pagination-navigation .pagination-navigation-group .text-field {
width: calc(0.25rem * 14);
}
.pagination .pagination-navigation .pagination-previous::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 16;
line-height: var(--leading-icon-base);
}
.pagination .pagination-navigation .pagination-previous::before {
content: var(--tw-content);
--tw-leading: calc(0.25rem * 6);
line-height: calc(0.25rem * 6);
}
.pagination .pagination-navigation .pagination-previous::before {
--tw-content: "chevron_left";
content: var(--tw-content);
}
.pagination .pagination-navigation .pagination-next::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 16;
line-height: var(--leading-icon-base);
}
.pagination .pagination-navigation .pagination-next::before {
content: var(--tw-content);
--tw-leading: calc(0.25rem * 6);
line-height: calc(0.25rem * 6);
}
.pagination .pagination-navigation .pagination-next::before {
--tw-content: "chevron_right";
content: var(--tw-content);
}
.pagination .pagination-navigation .pagination-first {
display: none;
}
.pagination .pagination-navigation .pagination-first::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 16;
line-height: var(--leading-icon-base);
}
.pagination .pagination-navigation .pagination-first::before {
content: var(--tw-content);
--tw-leading: calc(0.25rem * 6);
line-height: calc(0.25rem * 6);
}
.pagination .pagination-navigation .pagination-first::before {
--tw-content: "keyboard_double_arrow_left";
content: var(--tw-content);
}
@container (width >= 39rem) {
.pagination .pagination-navigation .pagination-first {
display: inline-flex;
}
}
.pagination .pagination-navigation .pagination-last {
display: none;
}
.pagination .pagination-navigation .pagination-last::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 16;
line-height: var(--leading-icon-base);
}
.pagination .pagination-navigation .pagination-last::before {
content: var(--tw-content);
--tw-leading: calc(0.25rem * 6);
line-height: calc(0.25rem * 6);
}
.pagination .pagination-navigation .pagination-last::before {
--tw-content: "keyboard_double_arrow_right";
content: var(--tw-content);
}
@container (width >= 39rem) {
.pagination .pagination-navigation .pagination-last {
display: inline-flex;
}
}
.pagination .pagination-navigation .button-group .pagination-previous {
border-radius: var(--radius-md);
}
@container (width >= 39rem) {
.pagination .pagination-navigation .button-group .pagination-previous {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
}
.pagination .pagination-navigation .button-group .pagination-next {
border-radius: var(--radius-md);
}
@container (width >= 39rem) {
.pagination .pagination-navigation .button-group .pagination-next {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}
.progress-bar {
position: relative;
height: calc(0.25rem * 1);
width: 100%;
border-radius: var(--radius-xs);
background-color: var(--color-border-light);
}
.progress-bar .progress-bar-indicator {
position: absolute;
height: 100%;
border-radius: var(--radius-xs);
background-color: var(--color-background-accent);
}
.progress-bar.progress-bar-small {
height: calc(0.25rem * 0.5);
}
.progress-bar-container {
display: grid;
height: fit-content;
}
.progress-bar-container .progress-bar-label {
overflow: hidden;
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
text-overflow: ellipsis;
white-space: nowrap;
color: var(--color-text-default);
}
.progress-bar-container .progress-bar-status {
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
overflow-wrap: break-word;
color: var(--color-text-ultra-light);
margin-top: var(--spacing-sm);
}
.progress-bar-container .progress-bar-alert-message {
display: inline-flex;
width: 100%;
overflow: auto;
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
overflow-wrap: break-word;
color: var(--color-text-alert);
margin-top: var(--spacing-sm);
}
.progress-bar-container .progress-bar-alert-message::before {
content: var(--tw-content);
padding-right: calc(0.25rem * 1);
}
.progress-bar-container .progress-bar-alert-message::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 16;
line-height: var(--leading-icon-base);
}
.progress-bar-container .progress-bar-alert-message::before {
content: var(--tw-content);
--tw-leading: 20px;
line-height: 20px;
}
.progress-bar-container .progress-bar-alert-message::before {
content: var(--tw-content);
color: var(--color-icon-alert);
}
.progress-bar-container .progress-bar-alert-message::before {
--tw-content: "error";
content: var(--tw-content);
}
.progress-bar-container .progress-bar-warning-message {
display: inline-flex;
width: 100%;
overflow: auto;
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
overflow-wrap: break-word;
color: var(--color-text-warning);
margin-top: var(--spacing-sm);
}
.progress-bar-container .progress-bar-warning-message::before {
content: var(--tw-content);
padding-right: calc(0.25rem * 1);
}
.progress-bar-container .progress-bar-warning-message::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 16;
line-height: var(--leading-icon-base);
}
.progress-bar-container .progress-bar-warning-message::before {
content: var(--tw-content);
--tw-leading: 20px;
line-height: 20px;
}
.progress-bar-container .progress-bar-warning-message::before {
content: var(--tw-content);
color: var(--color-icon-warning);
}
.progress-bar-container .progress-bar-warning-message::before {
--tw-content: "warning";
content: var(--tw-content);
}
.progress-bar-container .progress-bar-success-message {
display: inline-flex;
width: 100%;
overflow: auto;
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
overflow-wrap: break-word;
color: var(--color-text-success);
margin-top: var(--spacing-sm);
}
.progress-bar-container .progress-bar-success-message::before {
content: var(--tw-content);
padding-right: calc(0.25rem * 1);
}
.progress-bar-container .progress-bar-success-message::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 16;
line-height: var(--leading-icon-base);
}
.progress-bar-container .progress-bar-success-message::before {
content: var(--tw-content);
--tw-leading: 20px;
line-height: 20px;
}
.progress-bar-container .progress-bar-success-message::before {
content: var(--tw-content);
color: var(--color-icon-success);
}
.progress-bar-container .progress-bar-success-message::before {
--tw-content: "check_circle";
content: var(--tw-content);
}
.progress-bar-container .progress-bar-information-message {
display: inline-flex;
width: 100%;
overflow: auto;
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
overflow-wrap: break-word;
color: var(--color-text-information);
margin-top: var(--spacing-sm);
}
.progress-bar-container .progress-bar-information-message::before {
content: var(--tw-content);
padding-right: calc(0.25rem * 1);
}
.progress-bar-container .progress-bar-information-message::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 16;
line-height: var(--leading-icon-base);
}
.progress-bar-container .progress-bar-information-message::before {
content: var(--tw-content);
--tw-leading: 20px;
line-height: 20px;
}
.progress-bar-container .progress-bar-information-message::before {
content: var(--tw-content);
color: var(--color-icon-information);
}
.progress-bar-container .progress-bar-information-message::before {
--tw-content: "info";
content: var(--tw-content);
}
.progress-bar-container:has(.progress-bar-alert-message) .progress-bar-indicator {
background-color: var(--color-background-alert);
}
.progress-bar-container:has(.progress-bar-label) .progress-bar {
margin-top: var(--spacing-sm);
}
.radio-button {
margin-right: var(--spacing-md);
display: grid;
appearance: none;
place-content: center;
border-style: var(--tw-border-style);
border-width: 1px;
--tw-border-style: solid;
border-style: solid;
height: calc(0.25rem * 4);
width: calc(0.25rem * 4);
border-radius: var(--radius-lg);
background-color: var(--color-background-gray-ultra-light);
border-color: var(--color-border-default);
margin-top: calc(0.25rem * 0);
margin-left: calc(0.25rem * 0);
}
.radio-button::before {
content: var(--tw-content);
--tw-scale-x: 0%;
--tw-scale-y: 0%;
--tw-scale-z: 0%;
scale: var(--tw-scale-x) var(--tw-scale-y);
}
.radio-button::before {
content: var(--tw-content);
height: calc(0.25rem * 2);
}
.radio-button::before {
content: var(--tw-content);
width: calc(0.25rem * 2);
}
.radio-button::before {
content: var(--tw-content);
border-radius: var(--radius-lg);
}
.radio-button:checked::before {
content: var(--tw-content);
--tw-scale-x: 100%;
--tw-scale-y: 100%;
--tw-scale-z: 100%;
scale: var(--tw-scale-x) var(--tw-scale-y);
}
.radio-button:focus-visible {
--tw-outline-style: none;
outline-style: none;
}
.radio-button::before {
content: var(--tw-content);
transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
}
.radio-button::before {
content: var(--tw-content);
transition-property:
color,
background-color,
border-color,
outline-color,
text-decoration-color,
fill,
stroke,
--tw-gradient-from,
--tw-gradient-via,
--tw-gradient-to,
opacity,
box-shadow,
transform,
translate,
scale,
rotate,
filter,
-webkit-backdrop-filter,
backdrop-filter,
display,
content-visibility,
overlay,
pointer-events;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.radio-button::before {
content: var(--tw-content);
--tw-duration: 150ms;
transition-duration: 150ms;
}
.radio-button::before {
content: var(--tw-content);
--tw-ease: var(--ease-in-out);
transition-timing-function: var(--ease-in-out);
}
@media (hover: hover) {
.radio-button:hover {
cursor: pointer;
}
}
.radio-button:focus {
cursor: pointer;
}
.radio-button:disabled {
cursor: not-allowed;
}
.radio-button:checked {
background-color: var(--color-background-accent);
}
.radio-button:checked:focus {
background-color: var(--color-background-accent-focus);
}
.radio-button:disabled {
background-color: var(--color-background-default);
}
.radio-button:checked:disabled {
background-color: var(--color-background-disabled);
}
.radio-button::before {
content: var(--tw-content);
background-color: var(--color-icon-inverted);
}
.radio-button:disabled::before {
content: var(--tw-content);
background-color: var(--color-icon-disabled);
}
.radio-button:checked {
border-color: var(--color-border-transparent);
}
.radio-button:enabled:focus {
border-color: var(--color-border-accent);
}
.radio-button:disabled {
border-color: var(--color-border-disabled);
}
.radio-button:checked:disabled {
border-color: var(--color-border-transparent);
}
.radio-button-container {
display: flex;
flex-wrap: wrap;
align-items: center;
}
@media (hover: hover) {
.radio-button-container:hover {
cursor: pointer;
}
}
.radio-button-container:focus {
cursor: pointer;
}
.radio-button-container .radio-button-label {
overflow: hidden;
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
text-overflow: ellipsis;
white-space: nowrap;
color: var(--color-text-default);
max-width: calc(100% - 28px);
}
.radio-button-container .radio-button-description {
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
overflow-wrap: break-word;
color: var(--color-text-ultra-light);
margin-top: calc(var(--spacing-sm) * -1);
margin-left: calc(0.25rem * 7);
flex-basis: 100%;
}
.radio-button-container .radio-button-warning-message {
display: inline-flex;
width: 100%;
overflow: auto;
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
overflow-wrap: break-word;
color: var(--color-text-warning);
margin-top: var(--spacing-sm);
margin-left: calc(0.25rem * 7);
}
.radio-button-container .radio-button-warning-message::before {
content: var(--tw-content);
padding-right: calc(0.25rem * 1);
}
.radio-button-container .radio-button-warning-message::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 16;
line-height: var(--leading-icon-base);
}
.radio-button-container .radio-button-warning-message::before {
content: var(--tw-content);
--tw-leading: 20px;
line-height: 20px;
}
.radio-button-container .radio-button-warning-message::before {
content: var(--tw-content);
color: var(--color-icon-warning);
}
.radio-button-container .radio-button-warning-message::before {
--tw-content: "warning";
content: var(--tw-content);
}
.radio-button-container .radio-button-success-message {
display: inline-flex;
width: 100%;
overflow: auto;
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
overflow-wrap: break-word;
color: var(--color-text-success);
margin-top: var(--spacing-sm);
margin-left: calc(0.25rem * 7);
}
.radio-button-container .radio-button-success-message::before {
content: var(--tw-content);
padding-right: calc(0.25rem * 1);
}
.radio-button-container .radio-button-success-message::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 16;
line-height: var(--leading-icon-base);
}
.radio-button-container .radio-button-success-message::before {
content: var(--tw-content);
--tw-leading: 20px;
line-height: 20px;
}
.radio-button-container .radio-button-success-message::before {
content: var(--tw-content);
color: var(--color-icon-success);
}
.radio-button-container .radio-button-success-message::before {
--tw-content: "check_circle";
content: var(--tw-content);
}
.radio-button-container .radio-button-information-message {
display: inline-flex;
width: 100%;
overflow: auto;
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
overflow-wrap: break-word;
color: var(--color-text-information);
margin-top: var(--spacing-sm);
margin-left: calc(0.25rem * 7);
}
.radio-button-container .radio-button-information-message::before {
content: var(--tw-content);
padding-right: calc(0.25rem * 1);
}
.radio-button-container .radio-button-information-message::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 16;
line-height: var(--leading-icon-base);
}
.radio-button-container .radio-button-information-message::before {
content: var(--tw-content);
--tw-leading: 20px;
line-height: 20px;
}
.radio-button-container .radio-button-information-message::before {
content: var(--tw-content);
color: var(--color-icon-information);
}
.radio-button-container .radio-button-information-message::before {
--tw-content: "info";
content: var(--tw-content);
}
.radio-button-container:has(.radio-button:disabled) {
cursor: not-allowed;
}
.radio-button-container:has(.radio-button:disabled) .radio-button-label,
.radio-button-container:has(.radio-button:disabled) .radio-button-description {
color: var(--color-text-disabled);
}
.radio-button-container:has(.radio-button:disabled) .radio-button-information-message,
.radio-button-container:has(.radio-button:disabled) .radio-button-warning-message,
.radio-button-container:has(.radio-button:disabled) .radio-button-success-message {
display: none;
}
.radio-button-group {
margin: calc(0.25rem * 0);
min-width: calc(0.25rem * 0);
--tw-border-style: none;
border-style: none;
padding: calc(0.25rem * 0);
}
.radio-button-group .radio-button-group-heading {
max-width: 100%;
padding-bottom: calc(0.25rem * 1);
}
.radio-button-group .radio-button-group-content {
display: block;
}
.radio-button-group .radio-button-group-label {
display: block;
overflow: hidden;
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
text-overflow: ellipsis;
white-space: nowrap;
color: var(--color-text-default);
}
.radio-button-group .radio-button-group-description {
margin-top: calc(var(--spacing-sm) * -1);
margin-bottom: var(--spacing-sm);
display: block;
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
word-break: break-all;
color: var(--color-text-ultra-light);
}
.radio-button-group.radio-button-group-required .radio-button-group-label::after {
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
color: var(--color-icon-alert);
--tw-content: "*";
content: var(--tw-content);
}
.search-field-input {
position: relative;
display: flex;
--tw-shadow: 0 0 #0000;
box-shadow:
var(--tw-inset-shadow),
var(--tw-inset-ring-shadow),
var(--tw-ring-offset-shadow),
var(--tw-ring-shadow),
var(--tw-shadow);
cursor: pointer;
}
.search-field-input::before {
content: var(--tw-content);
position: absolute;
}
.search-field-input::before {
content: var(--tw-content);
top: var(--spacing-base);
}
.search-field-input::before {
content: var(--tw-content);
left: var(--spacing-md);
}
.search-field-input::before {
content: var(--tw-content);
margin-top: 1px;
}
.search-field-input::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 16;
line-height: var(--leading-icon-base);
}
.search-field-input::before {
content: var(--tw-content);
--tw-leading: calc(0.25rem * 6);
line-height: calc(0.25rem * 6);
}
.search-field-input::before {
content: var(--tw-content);
color: var(--color-icon-default);
}
.search-field-input::before {
--tw-content: "\e8b6";
content: var(--tw-content);
}
.search-field-input .search-field-clear-button {
margin-right: 1px;
display: table-cell;
border-style: var(--tw-border-style);
border-width: 1px;
border-left-style: var(--tw-border-style);
border-left-width: 0px;
--tw-border-style: solid;
border-style: solid;
border-color: var(--color-border-default);
padding-block: var(--spacing-base);
padding-right: var(--spacing-md);
padding-left: var(--spacing-md);
text-align: center;
--tw-outline-style: none;
outline-style: none;
background-color: var(--color-background-default);
padding-block: 1px;
cursor: pointer;
}
.search-field-input .search-field-clear-button::before {
content: var(--tw-content);
top: var(--spacing-base);
}
.search-field-input .search-field-clear-button::before {
content: var(--tw-content);
left: var(--spacing-md);
}
.search-field-input .search-field-clear-button::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 16;
line-height: var(--leading-icon-base);
}
.search-field-input .search-field-clear-button::before {
content: var(--tw-content);
--tw-leading: calc(0.25rem * 6);
line-height: calc(0.25rem * 6);
}
.search-field-input .search-field-clear-button::before {
content: var(--tw-content);
color: var(--color-icon-default);
}
.search-field-input .search-field-clear-button::before {
--tw-content: "\e5cd";
content: var(--tw-content);
}
.search-field-input .search-field {
width: 100%;
align-items: center;
align-self: stretch;
overflow: hidden;
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
text-overflow: ellipsis;
--tw-outline-style: none;
outline-style: none;
padding-inline: var(--spacing-md);
padding-block: var(--spacing-base);
padding-left: calc(0.25rem * 9);
background-color: var(--color-background-default);
color: var(--color-text-default);
border-style: var(--tw-border-style);
border-width: 1px;
border-right-style: var(--tw-border-style);
border-right-width: 0px;
--tw-border-style: solid;
border-style: solid;
border-color: var(--color-border-default);
transition-property:
color,
background-color,
border-color,
outline-color,
text-decoration-color,
fill,
stroke,
--tw-gradient-from,
--tw-gradient-via,
--tw-gradient-to;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
-webkit-border-radius: 0;
}
.search-field-input .search-field:disabled {
background-color: var(--color-background-disabled);
}
.search-field-input .search-field:disabled {
color: var(--color-text-disabled);
}
@media (hover: hover) {
.search-field-input .search-field:enabled:hover {
border-color: var(--color-border-strong);
}
}
.search-field-input .search-field:enabled:focus {
border-color: var(--color-border-accent);
}
.search-field-input .search-field:disabled {
border-color: var(--color-border-disabled);
}
.search-field-input .search-field:disabled {
cursor: not-allowed;
}
.search-field-input .search-field::placeholder {
color: var(--color-text-placeholder);
}
.search-field-input .search-field::-webkit-search-cancel-button {
-webkit-appearance: none;
}
.search-field-input:has(.search-field:disabled) {
cursor: not-allowed;
}
.search-field-input:has(.search-field:disabled)::before {
content: var(--tw-content);
color: var(--color-icon-disabled);
}
.search-field-input:has(.search-field:disabled) .search-field-clear-button {
cursor: not-allowed;
border-color: var(--color-border-disabled);
background-color: var(--color-background-disabled);
}
.search-field-input:has(.search-field:disabled) .search-field-clear-button::before {
content: var(--tw-content);
color: var(--color-icon-disabled);
}
.search-field-input:has(.search-field:enabled:hover) {
--tw-shadow: 0px 1px 2px 0px var(--tw-shadow-color, rgba(0, 0, 0, 0.1));
box-shadow:
var(--tw-inset-shadow),
var(--tw-inset-ring-shadow),
var(--tw-ring-offset-shadow),
var(--tw-ring-shadow),
var(--tw-shadow);
}
.search-field-input:has(.search-field:enabled:hover) .search-field-clear-button {
border-color: var(--color-border-strong);
}
.search-field-input:has(.search-field:enabled:focus) {
--tw-shadow: 0px 1px 2px 0px var(--tw-shadow-color, rgba(0, 0, 0, 0.1));
box-shadow:
var(--tw-inset-shadow),
var(--tw-inset-ring-shadow),
var(--tw-ring-offset-shadow),
var(--tw-ring-shadow),
var(--tw-shadow);
}
.search-field-input:has(.search-field:enabled:focus) .search-field-clear-button {
border-color: var(--color-border-accent);
}
.search-field-input:has(.search-field:placeholder-shown) .search-field-clear-button::before {
content: var(--tw-content);
visibility: hidden;
}
.search-field-results-container {
margin-right: 1px;
--tw-border-style: solid;
border-style: solid;
border-color: var(--color-border-light);
padding: var(--spacing-base);
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
}
.search-field-results-container .search-field-results {
margin-block: calc(0.25rem * 0);
padding-inline-start: calc(0.25rem * 0);
}
.search-field-results-container .search-field-results .search-field-result-item {
cursor: pointer;
align-items: baseline;
align-self: stretch;
overflow: hidden;
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
text-overflow: ellipsis;
color: var(--color-text-default);
--tw-outline-style: none;
outline-style: none;
transition-property:
color,
background-color,
border-color,
outline-color,
text-decoration-color,
fill,
stroke,
--tw-gradient-from,
--tw-gradient-via,
--tw-gradient-to;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
width: 100%;
padding-inline: var(--spacing-base);
padding-block: var(--spacing-sm);
}
@media (hover: hover) {
.search-field-results-container .search-field-results .search-field-result-item:hover {
background-color: var(--color-background-action-hover);
}
}
.search-field-results-container .search-field-results .search-field-result-item .search-field-result-item-highlight {
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 600;
font-style: normal;
font-size: var(--text-base);
line-height: var(--leading-base);
}
.search-field-results-container .search-field-results .search-field-result-item:not(:last-child) {
margin-bottom: var(--spacing-sm);
}
.search-field-results-container .search-field-results .search-field-result-item.search-field-result-error {
text-align: center;
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
color: var(--color-text-placeholder);
}
@media (hover: hover) {
.search-field-results-container .search-field-results .search-field-result-item.search-field-result-error:hover {
background-color: var(--color-background-transparent);
}
}
.search-field-results-container:has(.search-field-result-item) {
border-style: var(--tw-border-style);
border-width: 1px;
border-top-style: var(--tw-border-style);
border-top-width: 0px;
--tw-shadow: 0px 4px 8px 0px var(--tw-shadow-color, rgba(0, 0, 0, 0.1));
box-shadow:
var(--tw-inset-shadow),
var(--tw-inset-ring-shadow),
var(--tw-ring-offset-shadow),
var(--tw-ring-shadow),
var(--tw-shadow);
}
.search-field-container:has(.search-field:disabled) {
cursor: not-allowed;
}
.segmented-control {
display: flex;
flex-direction: row;
overflow: hidden;
background-color: var(--color-background-action-hover);
--tw-shadow: 0 0 #0000;
box-shadow:
var(--tw-inset-shadow),
var(--tw-inset-ring-shadow),
var(--tw-ring-offset-shadow),
var(--tw-ring-shadow),
var(--tw-shadow);
transition-property: all;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
position: relative;
width: 100%;
border-radius: var(--radius-md);
padding: var(--spacing-sm);
}
.segmented-control .segmented-control-background {
position: absolute;
top: calc(0.25rem * 0);
bottom: calc(0.25rem * 0);
left: calc(0.25rem * 0);
margin-block: var(--spacing-sm);
margin-left: var(--spacing-sm);
border-radius: 4px;
background-color: var(--color-background-default);
--tw-shadow: 0px 1px 2px 0px var(--tw-shadow-color, rgba(0, 0, 0, 0.1));
box-shadow:
var(--tw-inset-shadow),
var(--tw-inset-ring-shadow),
var(--tw-ring-offset-shadow),
var(--tw-ring-shadow),
var(--tw-shadow);
transition-property: all;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
--tw-duration: 500ms;
transition-duration: 500ms;
}
.segmented-control .segmented-control-entry {
display: flex;
width: 100%;
cursor: pointer;
border-radius: 4px;
justify-content: center;
gap: var(--spacing-sm);
padding-inline: calc(0.25rem * 5);
padding-block: calc(0.25rem * 1);
overflow: hidden;
text-overflow: ellipsis;
z-index: 2;
}
.segmented-control .segmented-control-entry .segmented-control-entry-input {
display: none;
}
.segmented-control .segmented-control-entry .segmented-control-entry-label {
width: fit-content;
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
color: var(--color-text-default);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.segmented-control .segmented-control-entry .segmented-control-entry-icon {
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 16;
line-height: var(--leading-icon-base);
--tw-leading: calc(0.25rem * 6);
line-height: calc(0.25rem * 6);
color: var(--color-icon-default);
}
.segmented-control .segmented-control-entry:has(.segmented-control-entry-input:disabled) {
cursor: not-allowed;
}
.segmented-control .segmented-control-entry:has(.segmented-control-entry-input:disabled) .segmented-control-entry-label {
color: var(--color-text-disabled);
}
.segmented-control .segmented-control-entry:has(.segmented-control-entry-input:disabled) .segmented-control-entry-icon {
color: var(--color-icon-disabled);
}
@media (hover: hover) {
.segmented-control .segmented-control-entry:not(:has(.segmented-control-entry-input:checked, .segmented-control-entry-input:disabled)):hover {
background-color: var(--color-background-action-focus);
}
}
.segmented-control .segmented-control-entry:not(:has(.segmented-control-entry-input:checked, .segmented-control-entry-input:disabled)):focus {
background-color: var(--color-background-action-focus);
}
.segmented-control:has(.segmented-control-entry:nth-of-type(2)) .segmented-control-background {
width: calc(50% - 4px);
}
.segmented-control:has(.segmented-control-entry:nth-of-type(3)) .segmented-control-background {
width: calc(33.333333% - 3px);
}
.segmented-control:has(.segmented-control-entry:nth-of-type(4)) .segmented-control-background {
width: calc(25% - 2px);
}
.segmented-control:has(.segmented-control-entry:nth-of-type(1) > .segmented-control-entry-input:checked) .segmented-control-background {
--tw-translate-x: calc(0.25rem * 0);
translate: var(--tw-translate-x) var(--tw-translate-y);
}
.segmented-control:has(.segmented-control-entry:nth-of-type(2) > .segmented-control-entry-input:checked) .segmented-control-background {
--tw-translate-x: 100%;
translate: var(--tw-translate-x) var(--tw-translate-y);
}
.segmented-control:has(.segmented-control-entry:nth-of-type(3) > .segmented-control-entry-input:checked) .segmented-control-background {
--tw-translate-x: 200%;
translate: var(--tw-translate-x) var(--tw-translate-y);
}
.segmented-control:has(.segmented-control-entry:nth-of-type(4) > .segmented-control-entry-input:checked) .segmented-control-background {
--tw-translate-x: 300%;
translate: var(--tw-translate-x) var(--tw-translate-y);
}
.segmented-control:not(:has(.segmented-control-entry-input:checked)) .segmented-control-background {
display: none;
}
.segmented-control:not(:has(.segmented-control-entry-input:enabled)) .segmented-control-background {
display: none;
}
.segmented-control-container {
display: grid;
height: fit-content;
}
.segmented-control-container .segmented-control-label {
overflow: hidden;
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
text-overflow: ellipsis;
white-space: nowrap;
color: var(--color-text-default);
}
.segmented-control-container .segmented-control-description {
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
overflow-wrap: break-word;
color: var(--color-text-ultra-light);
}
.segmented-control-container .segmented-control-alert-message {
display: inline-flex;
width: 100%;
overflow: auto;
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
overflow-wrap: break-word;
color: var(--color-text-alert);
margin-top: var(--spacing-sm);
}
.segmented-control-container .segmented-control-alert-message::before {
content: var(--tw-content);
padding-right: calc(0.25rem * 1);
}
.segmented-control-container .segmented-control-alert-message::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 16;
line-height: var(--leading-icon-base);
}
.segmented-control-container .segmented-control-alert-message::before {
content: var(--tw-content);
--tw-leading: 20px;
line-height: 20px;
}
.segmented-control-container .segmented-control-alert-message::before {
content: var(--tw-content);
color: var(--color-icon-alert);
}
.segmented-control-container .segmented-control-alert-message::before {
--tw-content: "error";
content: var(--tw-content);
}
.segmented-control-container .segmented-control-warning-message {
display: inline-flex;
width: 100%;
overflow: auto;
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
overflow-wrap: break-word;
color: var(--color-text-warning);
margin-top: var(--spacing-sm);
}
.segmented-control-container .segmented-control-warning-message::before {
content: var(--tw-content);
padding-right: calc(0.25rem * 1);
}
.segmented-control-container .segmented-control-warning-message::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 16;
line-height: var(--leading-icon-base);
}
.segmented-control-container .segmented-control-warning-message::before {
content: var(--tw-content);
--tw-leading: 20px;
line-height: 20px;
}
.segmented-control-container .segmented-control-warning-message::before {
content: var(--tw-content);
color: var(--color-icon-warning);
}
.segmented-control-container .segmented-control-warning-message::before {
--tw-content: "warning";
content: var(--tw-content);
}
.segmented-control-container .segmented-control-success-message {
display: inline-flex;
width: 100%;
overflow: auto;
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
overflow-wrap: break-word;
color: var(--color-text-success);
margin-top: var(--spacing-sm);
}
.segmented-control-container .segmented-control-success-message::before {
content: var(--tw-content);
padding-right: calc(0.25rem * 1);
}
.segmented-control-container .segmented-control-success-message::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 16;
line-height: var(--leading-icon-base);
}
.segmented-control-container .segmented-control-success-message::before {
content: var(--tw-content);
--tw-leading: 20px;
line-height: 20px;
}
.segmented-control-container .segmented-control-success-message::before {
content: var(--tw-content);
color: var(--color-icon-success);
}
.segmented-control-container .segmented-control-success-message::before {
--tw-content: "check_circle";
content: var(--tw-content);
}
.segmented-control-container .segmented-control-information-message {
display: inline-flex;
width: 100%;
overflow: auto;
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
overflow-wrap: break-word;
color: var(--color-text-information);
margin-top: var(--spacing-sm);
}
.segmented-control-container .segmented-control-information-message::before {
content: var(--tw-content);
padding-right: calc(0.25rem * 1);
}
.segmented-control-container .segmented-control-information-message::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 16;
line-height: var(--leading-icon-base);
}
.segmented-control-container .segmented-control-information-message::before {
content: var(--tw-content);
--tw-leading: 20px;
line-height: 20px;
}
.segmented-control-container .segmented-control-information-message::before {
content: var(--tw-content);
color: var(--color-icon-information);
}
.segmented-control-container .segmented-control-information-message::before {
--tw-content: "info";
content: var(--tw-content);
}
.segmented-control-container:has(.segmented-control-description) .segmented-control {
margin-top: calc(0.25rem * 1);
}
.segmented-control-container:has(.segmented-control-label) .segmented-control {
margin-top: calc(0.25rem * 1);
}
.segmented-control-container:has(.segmented-control-label) .segmented-control-descrtion {
margin-top: calc(0.25rem * -1);
}
.segmented-control-container.segmented-control-container-required .segmented-control-label::after {
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
color: var(--color-icon-alert);
--tw-content: "*";
content: var(--tw-content);
}
.spinner {
display: inline-block;
border-style: var(--tw-border-style);
border-width: 2px;
--tw-border-style: solid;
border-style: solid;
border-color: var(--color-icon-disabled);
margin-block: var(--spacing-sm);
height: calc(0.25rem * 4);
width: calc(0.25rem * 4);
flex-shrink: 0;
border-radius: var(--radius-xl);
border-right-color: var(--color-border-transparent);
vertical-align: text-bottom;
animation: spin 0.75s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.select {
display: flex;
flex-grow: 1;
padding-inline: var(--spacing-md);
padding-block: var(--spacing-base);
padding-right: calc(0.25rem * 10);
--tw-shadow: 0 0 #0000;
box-shadow:
var(--tw-inset-shadow),
var(--tw-inset-ring-shadow),
var(--tw-ring-offset-shadow),
var(--tw-ring-shadow),
var(--tw-shadow);
border-style: var(--tw-border-style);
border-width: 1px;
--tw-border-style: solid;
border-style: solid;
border-color: var(--color-border-default);
background-color: var(--color-background-default);
appearance: none;
gap: var(--spacing-sm);
--tw-outline-style: none;
outline-style: none;
transition-property:
color,
background-color,
border-color,
outline-color,
text-decoration-color,
fill,
stroke,
--tw-gradient-from,
--tw-gradient-via,
--tw-gradient-to;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
}
.select:disabled {
cursor: not-allowed;
}
.select:disabled {
border-color: var(--color-border-disabled);
}
.select:disabled {
background-color: var(--color-background-disabled);
}
@media (hover: hover) {
.select:enabled:hover {
border-color: var(--color-border-strong);
}
}
.select:enabled:focus {
border-color: var(--color-border-accent);
}
@media (hover: hover) {
.select:enabled:hover {
--tw-shadow: 0px 1px 2px 0px var(--tw-shadow-color, rgba(0, 0, 0, 0.1));
box-shadow:
var(--tw-inset-shadow),
var(--tw-inset-ring-shadow),
var(--tw-ring-offset-shadow),
var(--tw-ring-shadow),
var(--tw-shadow);
}
}
.select:enabled:focus {
--tw-shadow: 0px 1px 2px 0px var(--tw-shadow-color, rgba(0, 0, 0, 0.1));
box-shadow:
var(--tw-inset-shadow),
var(--tw-inset-ring-shadow),
var(--tw-ring-offset-shadow),
var(--tw-ring-shadow),
var(--tw-shadow);
}
.select:enabled {
color: var(--color-text-default);
}
.select:disabled {
color: var(--color-text-disabled);
}
.select .select-input {
align-items: center;
align-self: stretch;
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
color: var(--color-text-default);
background-color: var(--color-background-transparent);
--tw-border-style: none;
border-style: none;
margin-top: calc(0.25rem * 0);
display: flex;
height: fit-content;
flex: 1;
--tw-outline-style: none;
outline-style: none;
overflow: hidden;
text-align: left;
text-overflow: ellipsis;
white-space: nowrap;
}
.select .select-input:disabled {
color: var(--color-text-disabled);
}
.select .select-input:disabled {
background-color: var(--color-background-disabled);
}
.select .select-input:disabled {
cursor: not-allowed;
}
.select .select-chip-container {
position: relative;
display: flex;
min-width: fit-content;
flex-wrap: wrap;
align-items: center;
gap: var(--spacing-base);
}
.select.select-readonly {
border-color: var(--color-border-disabled);
background-color: var(--color-background-disabled);
}
.select.select-disabled {
cursor: not-allowed;
border-color: var(--color-border-disabled);
background-color: var(--color-background-disabled);
}
.select-dropdown {
position: absolute;
margin-block: calc(0.25rem * 0);
list-style-type: none;
background-color: var(--color-background-default);
border-style: var(--tw-border-style);
border-width: 1px;
border-top-style: var(--tw-border-style);
border-top-width: 0px;
--tw-border-style: solid;
border-style: solid;
border-color: var(--color-border-light);
--tw-shadow: 0px 4px 8px 0px var(--tw-shadow-color, rgba(0, 0, 0, 0.1));
box-shadow:
var(--tw-inset-shadow),
var(--tw-inset-ring-shadow),
var(--tw-ring-offset-shadow),
var(--tw-ring-shadow),
var(--tw-shadow);
overflow: auto;
padding: var(--spacing-base);
}
.select-dropdown .select-dropdown-entry {
position: relative;
display: flex;
cursor: pointer;
align-items: baseline;
gap: var(--spacing-sm);
align-self: stretch;
overflow: hidden;
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
text-overflow: ellipsis;
--tw-outline-style: none;
outline-style: none;
transition-property:
color,
background-color,
border-color,
outline-color,
text-decoration-color,
fill,
stroke,
--tw-gradient-from,
--tw-gradient-via,
--tw-gradient-to;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
padding-inline: var(--spacing-base);
padding-block: var(--spacing-sm);
}
@media (hover: hover) {
.select-dropdown .select-dropdown-entry:hover {
background-color: var(--color-background-action-hover);
}
}
.select-wrapper {
position: relative;
display: flex;
flex-direction: column;
}
.select-wrapper::after {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-lg);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 18;
line-height: var(--leading-icon-lg);
}
.select-wrapper::after {
content: var(--tw-content);
color: var(--color-icon-default);
}
.select-wrapper::after {
--tw-content: "\e5cf";
content: var(--tw-content);
}
.select-wrapper::after {
content: var(--tw-content);
position: absolute;
}
.select-wrapper::after {
content: var(--tw-content);
top: var(--spacing-lg);
}
.select-wrapper::after {
content: var(--tw-content);
right: var(--spacing-lg);
}
.select-wrapper::after {
content: var(--tw-content);
--tw-leading: calc(0.25rem * 6);
line-height: calc(0.25rem * 6);
}
.select-wrapper::after {
content: var(--tw-content);
pointer-events: none;
}
.select-wrapper::after {
content: var(--tw-content);
top: calc(0.25rem * 3.5);
}
.select-container {
display: grid;
height: fit-content;
}
.select-container .select-label {
overflow: hidden;
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
text-overflow: ellipsis;
white-space: nowrap;
color: var(--color-text-default);
}
.select-container .select-description {
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
word-break: break-all;
color: var(--color-text-ultra-light);
}
.select-container .select-alert-message {
display: inline-flex;
width: 100%;
overflow: auto;
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
overflow-wrap: break-word;
color: var(--color-text-alert);
margin-top: var(--spacing-sm);
}
.select-container .select-alert-message::before {
content: var(--tw-content);
padding-right: calc(0.25rem * 1);
}
.select-container .select-alert-message::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 16;
line-height: var(--leading-icon-base);
}
.select-container .select-alert-message::before {
content: var(--tw-content);
--tw-leading: 20px;
line-height: 20px;
}
.select-container .select-alert-message::before {
content: var(--tw-content);
color: var(--color-icon-alert);
}
.select-container .select-alert-message::before {
--tw-content: "error";
content: var(--tw-content);
}
.select-container .select-warning-message {
display: inline-flex;
width: 100%;
overflow: auto;
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
overflow-wrap: break-word;
color: var(--color-text-warning);
margin-top: var(--spacing-sm);
}
.select-container .select-warning-message::before {
content: var(--tw-content);
padding-right: calc(0.25rem * 1);
}
.select-container .select-warning-message::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 16;
line-height: var(--leading-icon-base);
}
.select-container .select-warning-message::before {
content: var(--tw-content);
--tw-leading: 20px;
line-height: 20px;
}
.select-container .select-warning-message::before {
content: var(--tw-content);
color: var(--color-icon-warning);
}
.select-container .select-warning-message::before {
--tw-content: "warning";
content: var(--tw-content);
}
.select-container .select-success-message {
display: inline-flex;
width: 100%;
overflow: auto;
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
overflow-wrap: break-word;
color: var(--color-text-success);
margin-top: var(--spacing-sm);
}
.select-container .select-success-message::before {
content: var(--tw-content);
padding-right: calc(0.25rem * 1);
}
.select-container .select-success-message::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 16;
line-height: var(--leading-icon-base);
}
.select-container .select-success-message::before {
content: var(--tw-content);
--tw-leading: 20px;
line-height: 20px;
}
.select-container .select-success-message::before {
content: var(--tw-content);
color: var(--color-icon-success);
}
.select-container .select-success-message::before {
--tw-content: "check_circle";
content: var(--tw-content);
}
.select-container .select-information-message {
display: inline-flex;
width: 100%;
overflow: auto;
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
overflow-wrap: break-word;
color: var(--color-text-information);
margin-top: var(--spacing-sm);
}
.select-container .select-information-message::before {
content: var(--tw-content);
padding-right: calc(0.25rem * 1);
}
.select-container .select-information-message::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 16;
line-height: var(--leading-icon-base);
}
.select-container .select-information-message::before {
content: var(--tw-content);
--tw-leading: 20px;
line-height: 20px;
}
.select-container .select-information-message::before {
content: var(--tw-content);
color: var(--color-icon-information);
}
.select-container .select-information-message::before {
--tw-content: "info";
content: var(--tw-content);
}
.select-container .search-field-container {
margin-bottom: var(--spacing-sm);
}
.select-container:has(.select-description) .select {
margin-top: var(--spacing-sm);
}
.select-container:has(.select-label) .select {
margin-top: var(--spacing-sm);
}
.select-container:has(.select-label) .select-description {
margin-top: calc(var(--spacing-sm) * -1);
}
.select-container:not(:has(.select-label, .select-description)) .select-wrapper::after {
content: var(--tw-content);
top: 10px;
}
.select-container:has(.select-readonly) .chip {
background-color: var(--color-background-default);
color: var(--color-text-default);
}
:is(.select-container:has(.select-readonly) .chip-action-remove, .select-container:has(.select-readonly) .chip-action-add)::before {
content: var(--tw-content);
color: var(--color-icon-disabled);
}
.select-container:has(.select-readonly) .chip-action {
cursor: not-allowed;
background-color: var(--color-background-default);
}
.select-container:has(.select-readonly) .select-dropdown {
visibility: hidden;
}
.select-container:has(.select-readonly) .select-wrapper::after {
content: var(--tw-content);
color: var(--color-icon-disabled);
}
.select-container:has(.select-readonly) .select-alert-message,
.select-container:has(.select-readonly) .select-information-message,
.select-container:has(.select-readonly) .select-warning-message,
.select-container:has(.select-readonly) .select-success-message {
display: none;
}
.select-container:has(.select-disabled, .select:disabled) .chip {
background-color: var(--color-background-default);
color: var(--color-text-disabled);
}
:is(.select-container:has(.select-disabled, .select:disabled) .chip .chip-action-remove, .select-container:has(.select-disabled, .select:disabled) .chip .chip-action-add)::before {
content: var(--tw-content);
color: var(--color-icon-disabled);
}
.select-container:has(.select-disabled, .select:disabled) .chip .chip-action {
cursor: not-allowed;
background-color: var(--color-background-default);
}
.select-container:has(.select-disabled, .select:disabled) .select-label,
.select-container:has(.select-disabled, .select:disabled) .select-description {
color: var(--color-text-disabled);
}
.select-container:has(.select-disabled, .select:disabled) .select-dropdown {
visibility: hidden;
}
.select-container:has(.select-disabled, .select:disabled) .select-wrapper::after {
content: var(--tw-content);
color: var(--color-icon-disabled);
}
.select-container:has(.select-disabled, .select:disabled) .select-alert-message,
.select-container:has(.select-disabled, .select:disabled) .select-information-message,
.select-container:has(.select-disabled, .select:disabled) .select-warning-message,
.select-container:has(.select-disabled, .select:disabled) .select-success-message {
display: none;
}
.select-container:not(:has(.select-readonly, .select-disabled, select:disabled)):has(.select-required) .select-label::after {
content: var(--tw-content);
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
}
.select-container:not(:has(.select-readonly, .select-disabled, select:disabled)):has(.select-required) .select-label::after {
content: var(--tw-content);
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
}
.select-container:not(:has(.select-readonly, .select-disabled, select:disabled)):has(.select-required) .select-label::after {
content: var(--tw-content);
color: var(--color-icon-alert);
}
.select-container:not(:has(.select-readonly, .select-disabled, select:disabled)):has(.select-required) .select-label::after {
--tw-content: "*";
content: var(--tw-content);
}
.select-container:not(:has(.select-readonly, .select-disabled, select:disabled)):has(.select-input:hover, .select-input:focus) .select-dropdown {
--tw-shadow: 0px 1px 2px 0px var(--tw-shadow-color, rgba(0, 0, 0, 0.1));
box-shadow:
var(--tw-inset-shadow),
var(--tw-inset-ring-shadow),
var(--tw-ring-offset-shadow),
var(--tw-ring-shadow),
var(--tw-shadow);
}
.select-container:not(:has(.select-readonly, .select-disabled, select:disabled)):not(:has(.select-alert-message)):has(.select-input:hover) .select {
border-color: var(--color-border-strong);
}
.select-container:not(:has(.select-readonly, .select-disabled, select:disabled)):not(:has(.select-alert-message)):has(.select-input:hover) .select-wrapper::after {
content: var(--tw-content);
color: var(--color-icon-default);
}
.select-container:not(:has(.select-readonly, .select-disabled, select:disabled)):not(:has(.select-alert-message)):has(.select-input:focus) .select {
border-color: var(--color-border-accent);
}
.select-container:not(:has(.select-readonly, .select-disabled, select:disabled)):not(:has(.select-alert-message)):has(.select-input:focus) .select-wrapper::after {
content: var(--tw-content);
color: var(--color-icon-accent);
}
.select-container:not(:has(.select-readonly, .select-disabled, select:disabled)):has(.select-alert-message) .select {
border-color: var(--color-border-alert);
}
.select-container:not(:has(.select-readonly, .select-disabled, select:disabled)):has(.select-alert-message) .select-wrapper::after {
content: var(--tw-content);
color: var(--color-icon-default);
}
.slide-over {
display: flex;
flex-direction: column;
align-items: flex-start;
background-color: var(--color-background-default);
--tw-shadow: 0px 8px 16px 0px var(--tw-shadow-color, rgba(0, 0, 0, 0.1));
box-shadow:
var(--tw-inset-shadow),
var(--tw-inset-ring-shadow),
var(--tw-ring-offset-shadow),
var(--tw-ring-shadow),
var(--tw-shadow);
}
.slide-over .slide-over-body {
flex: 1;
padding-inline: var(--spacing-2xl);
padding-bottom: var(--spacing-2xl);
align-items: flex-start;
align-self: stretch;
}
.slide-over .slide-over-header {
display: flex;
height: fit-content;
align-items: flex-start;
align-self: stretch;
gap: var(--spacing-lg);
padding-inline: var(--spacing-2xl);
padding-top: var(--spacing-2xl);
padding-bottom: var(--spacing-lg);
}
.slide-over .slide-over-header .slide-over-header-content {
display: flex;
flex: 1;
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-base);
align-self: stretch;
}
.slide-over .slide-over-header .slide-over-title {
overflow: hidden;
font-family: var(--font-default);
letter-spacing: var(--tracking-lg);
font-weight: 600;
font-style: normal;
font-size: var(--text-lg);
line-height: var(--leading-lg);
text-overflow: ellipsis;
white-space: normal;
color: var(--color-text-default);
}
.slide-over .slide-over-header .slide-over-description {
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
color: var(--color-text-ultra-light);
}
.slide-over .slide-over-header .slide-over-close {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--color-icon-accent);
background-color: var(--color-background-transparent);
height: calc(0.25rem * 8);
width: calc(0.25rem * 8);
border-radius: var(--radius-md);
font-family: var(--font-icon);
font-size: var(--text-icon-sm);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 14;
line-height: var(--leading-icon-sm);
--tw-border-style: none;
border-style: none;
transition-property:
color,
background-color,
border-color,
outline-color,
text-decoration-color,
fill,
stroke,
--tw-gradient-from,
--tw-gradient-via,
--tw-gradient-to;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
color: var(--color-icon-default);
}
.slide-over .slide-over-header .slide-over-close:focus-visible {
--tw-outline-style: none;
outline-style: none;
}
.slide-over .slide-over-header .slide-over-close:disabled {
cursor: not-allowed;
}
.slide-over .slide-over-header .slide-over-close:disabled {
color: var(--color-icon-disabled-light);
}
@media (hover: hover) {
.slide-over .slide-over-header .slide-over-close:enabled:hover {
background-color: var(--color-background-action-hover);
}
}
.slide-over .slide-over-header .slide-over-close:enabled:focus {
background-color: var(--color-background-action-focus);
}
.slide-over .slide-over-header .slide-over-close:disabled {
background-color: var(--color-background-transparent);
}
.slide-over .slide-over-header .slide-over-close::before {
--tw-content: "\e5cd";
content: var(--tw-content);
}
.slide-over .slide-over-footer {
border-style: var(--tw-border-style);
border-width: 0px;
border-top-style: var(--tw-border-style);
border-top-width: 1px;
--tw-border-style: solid;
border-style: solid;
border-color: var(--color-border-light);
display: flex;
align-items: flex-end;
justify-content: flex-end;
gap: var(--spacing-base);
align-self: stretch;
padding-inline: var(--spacing-2xl);
padding-block: var(--spacing-lg);
}
.slider {
position: relative;
display: flex;
height: calc(0.25rem * 1);
width: 100%;
border-radius: var(--radius-xs);
background-color: var(--color-border-light);
}
.slider .slider-bar {
border-radius: var(--radius-xs);
background-color: var(--color-background-accent);
}
@media (hover: hover) {
.slider .slider-bar:hover {
background-color: var(--color-background-accent-hover);
}
}
.slider .slider-thumb {
height: calc(0.25rem * 4);
width: calc(0.25rem * 4);
cursor: pointer;
border-radius: calc(infinity * 1px);
--tw-border-style: none;
border-style: none;
--tw-outline-style: none;
outline-style: none;
margin-inline: -1px;
margin-top: calc(0.25rem * -1.5);
background-color: var(--color-background-accent);
}
@media (hover: hover) {
.slider .slider-thumb:hover {
background-color: var(--color-background-accent-hover);
}
}
.slider .slider-thumb:focus {
background-color: var(--color-background-accent-focus);
}
.slider.slider-disabled {
cursor: not-allowed;
background-color: var(--color-border-disabled);
}
.slider.slider-disabled > .slider-bar {
background-color: var(--color-background-gray-strong);
}
.slider.slider-disabled > .slider-thumb {
pointer-events: none;
cursor: not-allowed;
background-color: var(--color-background-gray-strong);
}
@media (hover: hover) {
.slider.slider-disabled > .slider-thumb:hover {
background-color: var(--color-background-gray-strong);
}
}
.slider.slider-disabled > .slider-thumb:focus {
background-color: var(--color-background-gray-strong);
}
.slider-container {
display: grid;
}
.slider-container .slider-label {
overflow: hidden;
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
text-overflow: ellipsis;
white-space: nowrap;
color: var(--color-text-default);
}
.slider-container .slider-description {
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
word-break: break-all;
color: var(--color-text-ultra-light);
}
.slider-container .slider-alert-message {
display: inline-flex;
width: 100%;
overflow: auto;
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
overflow-wrap: break-word;
color: var(--color-text-alert);
margin-top: var(--spacing-base);
}
.slider-container .slider-alert-message::before {
content: var(--tw-content);
padding-right: calc(0.25rem * 1);
}
.slider-container .slider-alert-message::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 16;
line-height: var(--leading-icon-base);
}
.slider-container .slider-alert-message::before {
content: var(--tw-content);
--tw-leading: 20px;
line-height: 20px;
}
.slider-container .slider-alert-message::before {
content: var(--tw-content);
color: var(--color-icon-alert);
}
.slider-container .slider-alert-message::before {
--tw-content: "error";
content: var(--tw-content);
}
.slider-container .slider-warning-message {
display: inline-flex;
width: 100%;
overflow: auto;
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
overflow-wrap: break-word;
color: var(--color-text-warning);
margin-top: var(--spacing-base);
}
.slider-container .slider-warning-message::before {
content: var(--tw-content);
padding-right: calc(0.25rem * 1);
}
.slider-container .slider-warning-message::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 16;
line-height: var(--leading-icon-base);
}
.slider-container .slider-warning-message::before {
content: var(--tw-content);
--tw-leading: 20px;
line-height: 20px;
}
.slider-container .slider-warning-message::before {
content: var(--tw-content);
color: var(--color-icon-warning);
}
.slider-container .slider-warning-message::before {
--tw-content: "warning";
content: var(--tw-content);
}
.slider-container .slider-success-message {
display: inline-flex;
width: 100%;
overflow: auto;
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
overflow-wrap: break-word;
color: var(--color-text-success);
margin-top: var(--spacing-base);
}
.slider-container .slider-success-message::before {
content: var(--tw-content);
padding-right: calc(0.25rem * 1);
}
.slider-container .slider-success-message::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 16;
line-height: var(--leading-icon-base);
}
.slider-container .slider-success-message::before {
content: var(--tw-content);
--tw-leading: 20px;
line-height: 20px;
}
.slider-container .slider-success-message::before {
content: var(--tw-content);
color: var(--color-icon-success);
}
.slider-container .slider-success-message::before {
--tw-content: "check_circle";
content: var(--tw-content);
}
.slider-container .slider-information-message {
display: inline-flex;
width: 100%;
overflow: auto;
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
overflow-wrap: break-word;
color: var(--color-text-information);
margin-top: var(--spacing-base);
}
.slider-container .slider-information-message::before {
content: var(--tw-content);
padding-right: calc(0.25rem * 1);
}
.slider-container .slider-information-message::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 16;
line-height: var(--leading-icon-base);
}
.slider-container .slider-information-message::before {
content: var(--tw-content);
--tw-leading: 20px;
line-height: 20px;
}
.slider-container .slider-information-message::before {
content: var(--tw-content);
color: var(--color-icon-information);
}
.slider-container .slider-information-message::before {
--tw-content: "info";
content: var(--tw-content);
}
.slider-container:has(.slider:disabled) {
cursor: not-allowed;
}
.slider-container:has(.slider:disabled) .slider-label,
.slider-container:has(.slider:disabled) .slider-description,
.slider-container:has(.slider:disabled) .slider.slider-range {
color: var(--color-text-disabled);
}
.slider-container:has(.slider:disabled) .slider-alert-message,
.slider-container:has(.slider:disabled) .slider-information-message,
.slider-container:has(.slider:disabled) .slider-warning-message,
.slider-container:has(.slider:disabled) .slider-success-message {
display: none;
}
.slider-container:not(:has(.slider:disabled)):has(.slider-required) .slider-label::after {
content: var(--tw-content);
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
}
.slider-container:not(:has(.slider:disabled)):has(.slider-required) .slider-label::after {
content: var(--tw-content);
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
}
.slider-container:not(:has(.slider:disabled)):has(.slider-required) .slider-label::after {
content: var(--tw-content);
color: var(--color-icon-alert);
}
.slider-container:not(:has(.slider:disabled)):has(.slider-required) .slider-label::after {
--tw-content: "*";
content: var(--tw-content);
}
.slider-container:not(:has(.slider:disabled)):has(.slider-alert-message) .slider-bar,
.slider-container:not(:has(.slider:disabled)):has(.slider-alert-message) .slider-thumb {
background-color: var(--color-background-alert);
}
.slider-container:not(:has(.slider:disabled)):has(.slider-thumb:focus) .slider-bar {
background-color: var(--color-background-accent-focus);
}
.slider-container:has(.slider-description) .slider {
margin-top: var(--spacing-md);
}
.slider-container:has(.slider-description) .slider-range {
margin-top: var(--spacing-sm);
}
.slider-container:has(.slider-label) .slider {
margin-top: var(--spacing-md);
}
.slider-container:has(.slider-label) .slider-range {
margin-top: var(--spacing-sm);
}
.slider-container:has(.slider-label) .slider-description {
margin-top: calc(var(--spacing-sm) * -1);
}
.slider-wrapper {
display: flex;
align-items: center;
gap: var(--spacing-base);
}
.slider-wrapper .slider-range {
color: var(--color-text-light);
}
.slider-wrapper .slider-range + .slider {
margin-top: var(--spacing-sm);
}
.stacked-list {
display: flex;
width: 100%;
flex-direction: column;
align-items: flex-start;
}
.stacked-list > :nth-child(n) {
border-style: var(--tw-border-style);
border-width: 0px;
border-bottom-style: var(--tw-border-style);
border-bottom-width: 1px;
--tw-border-style: solid;
border-style: solid;
border-color: var(--color-border-light);
}
.stacked-list > :last-child {
--tw-border-style: none;
border-style: none;
}
.stacked-list .stacked-list-item {
display: flex;
flex-direction: row;
align-items: center;
gap: var(--spacing-base);
align-self: stretch;
padding-block: var(--spacing-base);
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
color: var(--color-text-default);
}
.stacked-list .stacked-list-item > :first-child {
flex: 1;
}
.stacked-list .stacked-list-item .stacked-list-action-icon {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--color-icon-accent);
background-color: var(--color-background-transparent);
height: calc(0.25rem * 8);
width: calc(0.25rem * 8);
border-radius: var(--radius-md);
font-size: var(--text-icon-sm);
font-variation-settings: "FILL" 0, "opsz" 14;
line-height: var(--leading-icon-sm);
--tw-border-style: none;
border-style: none;
transition-property:
color,
background-color,
border-color,
outline-color,
text-decoration-color,
fill,
stroke,
--tw-gradient-from,
--tw-gradient-via,
--tw-gradient-to;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
height: calc(0.25rem * 6);
width: calc(0.25rem * 6);
border-radius: var(--radius-sm);
font-family: var(--font-icon);
font-size: var(--text-icon-xs);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 12;
line-height: var(--leading-icon-xs);
}
.stacked-list .stacked-list-item .stacked-list-action-icon:focus-visible {
--tw-outline-style: none;
outline-style: none;
}
.stacked-list .stacked-list-item .stacked-list-action-icon:disabled {
cursor: not-allowed;
}
.stacked-list .stacked-list-item .stacked-list-action-icon:disabled {
color: var(--color-icon-disabled-light);
}
@media (hover: hover) {
.stacked-list .stacked-list-item .stacked-list-action-icon:enabled:hover {
background-color: var(--color-background-action-hover);
}
}
.stacked-list .stacked-list-item .stacked-list-action-icon:enabled:focus {
background-color: var(--color-background-action-focus);
}
.stacked-list .stacked-list-item .stacked-list-action-icon:disabled {
background-color: var(--color-background-transparent);
}
.stacked-list .stacked-list-item .stacked-list-action-icon:enabled {
color: var(--color-icon-default);
}
.stacked-list.stacked-list-padded .stacked-list-item {
padding-inline: var(--spacing-base);
}
.status-indicator {
position: relative;
padding-left: calc(0.25rem * 3.5);
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
color: var(--color-text-default);
}
.status-indicator::before {
content: var(--tw-content);
position: absolute;
}
.status-indicator::before {
content: var(--tw-content);
top: calc(0.25rem * 2);
}
.status-indicator::before {
content: var(--tw-content);
left: calc(0.25rem * 0);
}
.status-indicator::before {
content: var(--tw-content);
height: calc(0.25rem * 1.5);
}
.status-indicator::before {
content: var(--tw-content);
width: calc(0.25rem * 1.5);
}
.status-indicator::before {
content: var(--tw-content);
border-radius: calc(infinity * 1px);
}
.status-indicator::before {
content: var(--tw-content);
background-color: var(--color-background-accent);
}
.status-indicator.status-indicator-warning::before {
content: var(--tw-content);
background-color: var(--color-background-warning);
}
.status-indicator.status-indicator-success::before {
content: var(--tw-content);
background-color: var(--color-background-success);
}
.status-indicator.status-indicator-alert::before {
content: var(--tw-content);
background-color: var(--color-background-alert);
}
.status-indicator.status-indicator-neutral::before {
content: var(--tw-content);
background-color: var(--color-background-gray-light);
}
.stepper {
margin-block: calc(0.25rem * 0);
display: flex;
height: fit-content;
flex-direction: row;
align-items: flex-start;
gap: var(--spacing-2xl);
padding-inline-start: calc(0.25rem * 0);
}
.stepper:not(.stepper-compact) > :nth-child(n):not(:last-child)::after {
content: var(--tw-content);
display: inline-block;
}
.stepper:not(.stepper-compact) > :nth-child(n):not(:last-child)::after {
content: var(--tw-content);
height: calc(0.25rem * 0.5);
}
.stepper:not(.stepper-compact) > :nth-child(n):not(:last-child)::after {
content: var(--tw-content);
width: 100%;
}
.stepper:not(.stepper-compact) > :nth-child(n):not(:last-child)::after {
content: var(--tw-content);
background-color: var(--color-border-accent);
}
.stepper:not(.stepper-compact) > :nth-child(n):not(:last-child)::after {
--tw-content: "";
content: var(--tw-content);
}
.stepper:not(.stepper-compact) > :nth-child(n):not(:last-child)::after {
content: var(--tw-content);
position: absolute;
}
.stepper:not(.stepper-compact) > :nth-child(n):not(:last-child)::after {
content: var(--tw-content);
top: calc(0.25rem * 3);
}
.stepper:not(.stepper-compact) > :nth-child(n):not(:last-child)::after {
content: var(--tw-content);
left: calc(0.25rem * 6);
}
.stepper:not(.stepper-compact) > :nth-child(n):not(:last-child) .stepper-item-content {
padding-right: var(--spacing-sm);
}
.stepper:not(.stepper-compact) > :nth-child(n):not(:first-child) .stepper-item-content {
padding-left: var(--spacing-sm);
}
.stepper:not(.stepper-compact) > :nth-child(n):last-child.stepper-item-cancel::after {
content: var(--tw-content);
background-color: var(--color-border-transparent);
}
.stepper:not(.stepper-compact) > :nth-child(n):last-child.stepper-item-cancel .stepper-item-indicator {
border-color: var(--color-border-alert);
background-color: var(--color-background-alert);
}
.stepper:not(.stepper-compact) > :nth-child(n):last-child.stepper-item-cancel .stepper-item-indicator::before {
content: var(--tw-content);
align-items: center;
}
.stepper:not(.stepper-compact) > :nth-child(n):last-child.stepper-item-cancel .stepper-item-indicator::before {
content: var(--tw-content);
justify-content: center;
}
.stepper:not(.stepper-compact) > :nth-child(n):last-child.stepper-item-cancel .stepper-item-indicator::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 600;
font-variation-settings: "FILL" 1, "opsz" 16;
line-height: var(--leading-icon-base);
}
.stepper:not(.stepper-compact) > :nth-child(n):last-child.stepper-item-cancel .stepper-item-indicator::before {
content: var(--tw-content);
color: var(--color-icon-inverted);
}
.stepper:not(.stepper-compact) > :nth-child(n):last-child.stepper-item-cancel .stepper-item-indicator::before {
--tw-content: "close";
content: var(--tw-content);
}
.stepper:not(.stepper-compact) > :nth-child(n):last-child.stepper-item-cancel .stepper-item-indicator * {
display: none;
}
.stepper:not(.stepper-compact) > :nth-child(n):last-child.stepper-item-cancel .stepper-item-content .stepper-item-content-description {
color: var(--color-text-ultra-light);
}
.stepper:not(.stepper-compact) > :nth-child(n):last-child.stepper-item-cancel .stepper-item-content .stepper-item-content-title {
color: var(--color-text-default);
}
.stepper .stepper-item {
position: relative;
display: flex;
height: 100%;
width: calc(0.25rem * 0);
flex: 1;
flex-direction: column;
flex-wrap: nowrap;
gap: var(--spacing-base);
}
.stepper .stepper-item .stepper-item-indicator {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
height: calc(0.25rem * 6);
width: calc(0.25rem * 6);
background-color: var(--color-background-default);
border-radius: calc(infinity * 1px);
border-style: var(--tw-border-style);
border-width: 2px;
--tw-border-style: solid;
border-style: solid;
border-color: var(--color-border-light);
}
.stepper .stepper-item .stepper-item-indicator::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-sm);
font-weight: 600;
font-variation-settings: "FILL" 1, "opsz" 14;
line-height: var(--leading-icon-sm);
}
.stepper .stepper-item .stepper-item-indicator::before {
content: var(--tw-content);
--tw-leading: calc(0.25rem * 6);
line-height: calc(0.25rem * 6);
}
.stepper .stepper-item .stepper-item-indicator::before {
content: var(--tw-content);
color: var(--color-icon-accent);
}
.stepper .stepper-item .stepper-item-indicator .stepper-item-indicator-number {
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
color: var(--color-text-disabled);
}
.stepper .stepper-item .stepper-item-indicator .stepper-item-indicator-icon {
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 16;
line-height: var(--leading-icon-base);
color: var(--color-icon-disabled);
}
.stepper .stepper-item .stepper-item-content {
display: flex;
width: 100%;
flex-direction: column;
align-items: flex-start;
align-self: stretch;
}
.stepper .stepper-item .stepper-item-content .stepper-item-content-title {
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
color: var(--color-text-disabled);
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
max-width: 100%;
overflow-wrap: break-word;
}
.stepper .stepper-item .stepper-item-content .stepper-item-content-description {
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
color: var(--color-text-disabled);
margin-top: calc(var(--spacing-sm) * -1);
overflow-wrap: break-word;
}
.stepper-wrapper {
display: flex;
flex-direction: row;
align-items: center;
gap: var(--spacing-md);
}
.stepper-wrapper .stepper-description {
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
overflow-wrap: break-word;
color: var(--color-text-default);
}
.stepper.stepper-vertical {
height: 100%;
width: fit-content;
flex-direction: column;
}
.stepper.stepper-vertical:not(.stepper-compact) > :nth-child(n):not(:last-child)::after {
content: var(--tw-content);
height: 100%;
}
.stepper.stepper-vertical:not(.stepper-compact) > :nth-child(n):not(:last-child)::after {
content: var(--tw-content);
width: calc(0.25rem * 0.5);
}
.stepper.stepper-vertical:not(.stepper-compact) > :nth-child(n):not(:last-child)::after {
content: var(--tw-content);
top: auto;
}
.stepper.stepper-vertical:not(.stepper-compact) > :nth-child(n):not(:last-child)::after {
content: var(--tw-content);
bottom: calc(0.25rem * -6);
}
.stepper.stepper-vertical:not(.stepper-compact) > :nth-child(n):not(:last-child)::after {
content: var(--tw-content);
left: calc(0.25rem * 3);
}
.stepper.stepper-vertical .stepper-item {
margin-inline: calc(0.25rem * 5);
height: 100%;
width: 100%;
flex-direction: row;
}
.stepper.stepper-vertical .stepper-item .stepper-item-content-title {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
}
.stepper.stepper-compact {
display: flex;
height: fit-content;
width: fit-content;
gap: var(--spacing-sm);
}
.stepper.stepper-compact .stepper-item {
border-radius: calc(infinity * 1px);
background-color: var(--color-icon-disabled);
height: calc(0.25rem * 5);
max-height: calc(0.25rem * 5);
width: calc(0.25rem * 5);
max-width: calc(0.25rem * 5);
border-style: var(--tw-border-style);
border-width: 4px;
--tw-border-style: solid;
border-style: solid;
border-color: var(--color-background-default);
}
.stepper.stepper-compact .stepper-item > * {
display: none;
}
.stepper.stepper-grow {
gap: calc(0.25rem * 0);
}
.stepper.stepper-grow:not(.stepper-compact, .stepper-vertical) > :nth-child(n):not(:last-child, :first-child) {
align-items: center;
}
.stepper.stepper-grow:not(.stepper-compact, .stepper-vertical) > :nth-child(n):not(:last-child, :first-child)::after {
content: var(--tw-content);
right: calc(0.25rem * -0);
}
.stepper.stepper-grow:not(.stepper-compact, .stepper-vertical) > :nth-child(n):not(:last-child, :first-child)::after {
content: var(--tw-content);
left: auto;
}
.stepper.stepper-grow:not(.stepper-compact, .stepper-vertical) > :nth-child(n):not(:last-child, :first-child)::after {
content: var(--tw-content);
width: calc(50% - 12px);
}
.stepper.stepper-grow:not(.stepper-compact, .stepper-vertical) > :nth-child(n):not(:last-child, :first-child)::before {
content: var(--tw-content);
display: inline-block;
}
.stepper.stepper-grow:not(.stepper-compact, .stepper-vertical) > :nth-child(n):not(:last-child, :first-child)::before {
content: var(--tw-content);
height: calc(0.25rem * 0.5);
}
.stepper.stepper-grow:not(.stepper-compact, .stepper-vertical) > :nth-child(n):not(:last-child, :first-child)::before {
content: var(--tw-content);
width: calc(50% - 12px);
}
.stepper.stepper-grow:not(.stepper-compact, .stepper-vertical) > :nth-child(n):not(:last-child, :first-child)::before {
content: var(--tw-content);
background-color: var(--color-border-light);
}
.stepper.stepper-grow:not(.stepper-compact, .stepper-vertical) > :nth-child(n):not(:last-child, :first-child)::before {
--tw-content: "";
content: var(--tw-content);
}
.stepper.stepper-grow:not(.stepper-compact, .stepper-vertical) > :nth-child(n):not(:last-child, :first-child)::before {
content: var(--tw-content);
position: absolute;
}
.stepper.stepper-grow:not(.stepper-compact, .stepper-vertical) > :nth-child(n):not(:last-child, :first-child)::before {
content: var(--tw-content);
top: calc(0.25rem * 3);
}
.stepper.stepper-grow:not(.stepper-compact, .stepper-vertical) > :nth-child(n):not(:last-child, :first-child)::before {
content: var(--tw-content);
left: calc(0.25rem * 0);
}
.stepper.stepper-grow:not(.stepper-compact, .stepper-vertical) > :nth-child(n):not(:last-child, :first-child) .stepper-item-content {
align-items: center;
}
.stepper.stepper-grow:not(.stepper-compact, .stepper-vertical) > :nth-child(n):last-child {
align-items: flex-end;
}
.stepper.stepper-grow:not(.stepper-compact, .stepper-vertical) > :nth-child(n):last-child::before {
content: var(--tw-content);
display: inline-block;
}
.stepper.stepper-grow:not(.stepper-compact, .stepper-vertical) > :nth-child(n):last-child::before {
content: var(--tw-content);
height: calc(0.25rem * 0.5);
}
.stepper.stepper-grow:not(.stepper-compact, .stepper-vertical) > :nth-child(n):last-child::before {
content: var(--tw-content);
width: 100%;
}
.stepper.stepper-grow:not(.stepper-compact, .stepper-vertical) > :nth-child(n):last-child::before {
content: var(--tw-content);
background-color: var(--color-border-light);
}
.stepper.stepper-grow:not(.stepper-compact, .stepper-vertical) > :nth-child(n):last-child::before {
--tw-content: "";
content: var(--tw-content);
}
.stepper.stepper-grow:not(.stepper-compact, .stepper-vertical) > :nth-child(n):last-child::before {
content: var(--tw-content);
position: absolute;
}
.stepper.stepper-grow:not(.stepper-compact, .stepper-vertical) > :nth-child(n):last-child::before {
content: var(--tw-content);
top: calc(0.25rem * 3);
}
.stepper.stepper-grow:not(.stepper-compact, .stepper-vertical) > :nth-child(n):last-child::before {
content: var(--tw-content);
right: calc(0.25rem * 6);
}
.stepper.stepper-grow:not(.stepper-compact, .stepper-vertical) > :nth-child(n):last-child .stepper-item-content {
align-items: flex-end;
}
.stepper:not(.stepper-compact) > :nth-child(n):not(:last-child):not(.stepper-item-done)::after {
content: var(--tw-content);
background-color: var(--color-border-light);
}
.stepper .stepper-item-done.stepper-item::after {
content: var(--tw-content);
background-color: var(--color-border-accent);
}
.stepper .stepper-item-done.stepper-item .stepper-item-indicator {
border-color: var(--color-border-accent);
background-color: var(--color-background-accent);
}
.stepper .stepper-item-done.stepper-item .stepper-item-indicator::before {
content: var(--tw-content);
align-items: center;
}
.stepper .stepper-item-done.stepper-item .stepper-item-indicator::before {
content: var(--tw-content);
justify-content: center;
}
.stepper .stepper-item-done.stepper-item .stepper-item-indicator::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 600;
font-variation-settings: "FILL" 1, "opsz" 16;
line-height: var(--leading-icon-base);
}
.stepper .stepper-item-done.stepper-item .stepper-item-indicator::before {
content: var(--tw-content);
color: var(--color-icon-inverted);
}
.stepper .stepper-item-done.stepper-item .stepper-item-indicator::before {
--tw-content: "check";
content: var(--tw-content);
}
.stepper .stepper-item-done.stepper-item .stepper-item-indicator * {
display: none;
}
.stepper .stepper-item-done.stepper-item .stepper-item-content-description {
color: var(--color-text-ultra-light);
}
.stepper .stepper-item-done.stepper-item .stepper-item-content-title {
color: var(--color-text-default);
}
.stepper.stepper-compact .stepper-item-done.stepper-item {
background-color: var(--color-icon-accent);
}
.stepper.stepper-grow:not(.stepper-compact, .stepper-vertical) > :nth-child(n of .stepper-item-done) + .stepper-item::before {
content: var(--tw-content);
background-color: var(--color-border-accent);
}
.stepper .stepper-item-current.stepper-item .stepper-item-indicator {
border-color: var(--color-border-accent);
}
.stepper .stepper-item-current.stepper-item .stepper-item-indicator-number {
color: var(--color-text-accent);
}
.stepper .stepper-item-current.stepper-item .stepper-item-indicator-icon {
color: var(--color-icon-accent);
}
.stepper .stepper-item-current.stepper-item .stepper-item-content-description {
color: var(--color-text-ultra-light);
}
.stepper .stepper-item-current.stepper-item .stepper-item-content-title {
color: var(--color-text-accent);
}
.stepper.stepper-compact .stepper-item-current.stepper-item {
border-color: var(--color-border-accent-light);
background-color: var(--color-icon-accent);
}
.tabs {
margin-bottom: var(--spacing-2xl);
display: flex;
width: 100%;
flex-wrap: nowrap;
border-style: var(--tw-border-style);
border-width: 0px;
border-bottom-style: var(--tw-border-style);
border-bottom-width: 1px;
--tw-border-style: solid;
border-style: solid;
border-color: var(--color-border-light);
}
.tabs > :nth-child(n) {
width: fit-content;
}
.tabs .tabs-tab {
display: flex;
cursor: pointer;
align-items: center;
gap: var(--spacing-sm);
padding-inline: var(--spacing-lg);
padding-bottom: var(--spacing-lg);
--tw-outline-style: none;
outline-style: none;
overflow: hidden;
text-wrap: nowrap;
text-overflow: ellipsis;
border-style: var(--tw-border-style);
border-width: 0px;
border-bottom-style: var(--tw-border-style);
border-bottom-width: 3px;
--tw-border-style: solid;
border-style: solid;
border-color: var(--color-border-transparent);
background-color: var(--color-background-default);
transition-property:
color,
background-color,
border-color,
outline-color,
text-decoration-color,
fill,
stroke,
--tw-gradient-from,
--tw-gradient-via,
--tw-gradient-to;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
@media (hover: hover) {
.tabs .tabs-tab:hover {
border-color: var(--color-border-light);
}
}
.tabs .tabs-tab:focus {
border-color: var(--color-border-default);
}
.tabs .tabs-tab .badge {
margin-left: calc(0.25rem * 1);
}
.tabs .tabs-tab .tabs-tab-label {
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
color: var(--color-text-default);
overflow: hidden;
text-wrap: nowrap;
text-overflow: ellipsis;
}
.tabs.tabs-grow > :nth-child(n) {
width: 100%;
justify-content: center;
}
.tabs.tabs-compact {
gap: var(--spacing-lg);
}
.tabs.tabs-compact > :nth-child(n) {
width: fit-content;
justify-content: center;
padding-inline: calc(0.25rem * 0);
}
.tabs.tabs-compact > :first-child {
margin-left: var(--spacing-lg);
}
.tabs .tabs-tab-selected.tabs-tab {
border-color: var(--color-border-accent);
}
@media (hover: hover) {
.tabs .tabs-tab-selected.tabs-tab:hover {
border-color: var(--color-border-accent);
}
}
.tabs .tabs-tab-selected.tabs-tab:focus {
border-color: var(--color-border-accent);
}
.tabs .tabs-tab-selected.tabs-tab .tabs-tab-label {
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 600;
font-style: normal;
font-size: var(--text-base);
line-height: var(--leading-base);
}
.tabs .tabs-tab-disabled.tabs-tab {
cursor: not-allowed;
color: var(--color-text-disabled);
border-color: var(--color-border-transparent);
}
@media (hover: hover) {
.tabs .tabs-tab-disabled.tabs-tab:hover {
border-color: var(--color-border-transparent);
}
}
.tabs .tabs-tab-disabled.tabs-tab:focus {
border-color: var(--color-border-transparent);
}
.tabs .tabs-tab-disabled.tabs-tab .tabs-tab-label {
color: var(--color-text-disabled);
}
.tabs .tabs-tab-disabled.tabs-tab .tabs-tab-icon {
color: var(--color-icon-disabled);
}
.tabs .tabs-tab .tabs-tab-icon {
font-family: var(--font-icon);
font-size: var(--text-icon-lg);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 18;
line-height: var(--leading-icon-lg);
color: var(--color-icon-default);
}
.text-area {
display: flex;
width: 100%;
resize: none;
align-self: stretch;
padding: var(--spacing-md);
--tw-outline-style: none;
outline-style: none;
background-color: var(--color-background-default);
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
color: var(--color-text-default);
border-style: var(--tw-border-style);
border-width: 1px;
--tw-border-style: solid;
border-style: solid;
border-color: var(--color-border-default);
--tw-shadow: 0 0 #0000;
box-shadow:
var(--tw-inset-shadow),
var(--tw-inset-ring-shadow),
var(--tw-ring-offset-shadow),
var(--tw-ring-shadow),
var(--tw-shadow);
transition-property:
color,
background-color,
border-color,
outline-color,
text-decoration-color,
fill,
stroke,
--tw-gradient-from,
--tw-gradient-via,
--tw-gradient-to;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.text-area:read-only {
background-color: var(--color-background-disabled);
}
.text-area:disabled {
background-color: var(--color-background-disabled);
}
.text-area:read-only {
color: var(--color-text-default);
}
.text-area:disabled {
color: var(--color-text-disabled);
}
@media (hover: hover) {
.text-area:enabled:hover {
border-color: var(--color-border-strong);
}
}
.text-area:enabled:focus {
border-color: var(--color-border-accent);
}
.text-area:read-only {
border-color: var(--color-border-disabled);
}
@media (hover: hover) {
.text-area:read-only:hover {
border-color: var(--color-border-disabled);
}
}
.text-area:read-only:focus {
border-color: var(--color-border-disabled);
}
.text-area:disabled {
border-color: var(--color-border-disabled);
}
.text-area:disabled {
pointer-events: none;
}
.text-area:disabled {
cursor: not-allowed;
}
.text-area::placeholder {
color: var(--color-text-placeholder);
}
.text-area-container {
display: grid;
height: fit-content;
}
.text-area-container .text-area-label {
overflow: hidden;
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
text-overflow: ellipsis;
white-space: nowrap;
color: var(--color-text-default);
}
.text-area-container .text-area-description {
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
overflow-wrap: break-word;
color: var(--color-text-ultra-light);
}
.text-area-container .text-area-alert-message {
display: inline-flex;
width: 100%;
overflow: auto;
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
overflow-wrap: break-word;
color: var(--color-text-alert);
margin-top: var(--spacing-sm);
}
.text-area-container .text-area-alert-message::before {
content: var(--tw-content);
padding-right: calc(0.25rem * 1);
}
.text-area-container .text-area-alert-message::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 16;
line-height: var(--leading-icon-base);
}
.text-area-container .text-area-alert-message::before {
content: var(--tw-content);
--tw-leading: 20px;
line-height: 20px;
}
.text-area-container .text-area-alert-message::before {
content: var(--tw-content);
color: var(--color-icon-alert);
}
.text-area-container .text-area-alert-message::before {
--tw-content: "error";
content: var(--tw-content);
}
.text-area-container .text-area-warning-message {
display: inline-flex;
width: 100%;
overflow: auto;
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
overflow-wrap: break-word;
color: var(--color-text-warning);
margin-top: var(--spacing-sm);
}
.text-area-container .text-area-warning-message::before {
content: var(--tw-content);
padding-right: calc(0.25rem * 1);
}
.text-area-container .text-area-warning-message::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 16;
line-height: var(--leading-icon-base);
}
.text-area-container .text-area-warning-message::before {
content: var(--tw-content);
--tw-leading: 20px;
line-height: 20px;
}
.text-area-container .text-area-warning-message::before {
content: var(--tw-content);
color: var(--color-icon-warning);
}
.text-area-container .text-area-warning-message::before {
--tw-content: "warning";
content: var(--tw-content);
}
.text-area-container .text-area-success-message {
display: inline-flex;
width: 100%;
overflow: auto;
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
overflow-wrap: break-word;
color: var(--color-text-success);
margin-top: var(--spacing-sm);
}
.text-area-container .text-area-success-message::before {
content: var(--tw-content);
padding-right: calc(0.25rem * 1);
}
.text-area-container .text-area-success-message::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 16;
line-height: var(--leading-icon-base);
}
.text-area-container .text-area-success-message::before {
content: var(--tw-content);
--tw-leading: 20px;
line-height: 20px;
}
.text-area-container .text-area-success-message::before {
content: var(--tw-content);
color: var(--color-icon-success);
}
.text-area-container .text-area-success-message::before {
--tw-content: "check_circle";
content: var(--tw-content);
}
.text-area-container .text-area-information-message {
display: inline-flex;
width: 100%;
overflow: auto;
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
overflow-wrap: break-word;
color: var(--color-text-information);
margin-top: var(--spacing-sm);
}
.text-area-container .text-area-information-message::before {
content: var(--tw-content);
padding-right: calc(0.25rem * 1);
}
.text-area-container .text-area-information-message::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 16;
line-height: var(--leading-icon-base);
}
.text-area-container .text-area-information-message::before {
content: var(--tw-content);
--tw-leading: 20px;
line-height: 20px;
}
.text-area-container .text-area-information-message::before {
content: var(--tw-content);
color: var(--color-icon-information);
}
.text-area-container .text-area-information-message::before {
--tw-content: "info";
content: var(--tw-content);
}
.text-area-container .text-area-details {
display: flex;
gap: var(--spacing-lg);
}
.text-area-container .text-area-details .text-area-counter {
visibility: hidden;
text-align: right;
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
color: var(--color-text-ultra-light);
margin-top: var(--spacing-sm);
}
.text-area-container:has(.text-area:disabled) {
cursor: not-allowed;
}
.text-area-container:has(.text-area:disabled) .text-area-label,
.text-area-container:has(.text-area:disabled) .text-area-description {
color: var(--color-text-disabled);
}
.text-area-container:has(.text-area:disabled) .text-area-alert-message,
.text-area-container:has(.text-area:disabled) .text-area-information-message,
.text-area-container:has(.text-area:disabled) .text-area-success-message,
.text-area-container:has(.text-area:disabled) .text-area-warning-message {
display: none;
}
.text-area-container:has(.text-area:read-only) .text-area-alert-message,
.text-area-container:has(.text-area:read-only) .text-area-information-message,
.text-area-container:has(.text-area:read-only) .text-area-success-message,
.text-area-container:has(.text-area:read-only) .text-area-warning-message {
display: none;
}
.text-area-container:not(:has(.text-area:disabled, .text-area:read-only)) .text-area:hover,
.text-area-container:not(:has(.text-area:disabled, .text-area:read-only)) .text-area:focus {
--tw-shadow: 0px 1px 2px 0px var(--tw-shadow-color, rgba(0, 0, 0, 0.1));
box-shadow:
var(--tw-inset-shadow),
var(--tw-inset-ring-shadow),
var(--tw-ring-offset-shadow),
var(--tw-ring-shadow),
var(--tw-shadow);
}
.text-area-container:not(:has(.text-area:disabled, .text-area:read-only)):has(.text-area-alert-message) .text-area {
border-color: var(--color-border-alert);
}
.text-area-container:not(:has(.text-area:disabled, .text-area:read-only)):has(.text-area-alert-message) .text-area-counter {
visibility: visible;
color: var(--color-text-alert);
}
.text-area-container:not(:has(.text-area:disabled, .text-area:read-only)):has(.text-area-required) .text-area-label::after {
content: var(--tw-content);
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
}
.text-area-container:not(:has(.text-area:disabled, .text-area:read-only)):has(.text-area-required) .text-area-label::after {
content: var(--tw-content);
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
}
.text-area-container:not(:has(.text-area:disabled, .text-area:read-only)):has(.text-area-required) .text-area-label::after {
content: var(--tw-content);
color: var(--color-icon-alert);
}
.text-area-container:not(:has(.text-area:disabled, .text-area:read-only)):has(.text-area-required) .text-area-label::after {
--tw-content: "*";
content: var(--tw-content);
}
.text-area-container:not(:has(.text-area:disabled, .text-area:read-only)):has(.text-area:focus) .text-area-counter {
visibility: visible;
}
.text-area-container:has(.text-area-description) .text-area {
margin-top: var(--spacing-sm);
}
.text-area-container:has(.text-area-label) .text-area {
margin-top: var(--spacing-sm);
}
.text-area-container:has(.text-area-label) .text-area-description {
margin-top: calc(var(--spacing-sm) * -1);
}
.text-area-container:not(:has(.text-area-alert-message, .text-area-information-message, .text-area-success-message, .text-area-warning-message)) .text-area-counter {
width: 100%;
}
.text-field {
display: flex;
flex-grow: 1;
align-items: center;
align-self: stretch;
overflow: hidden;
padding-inline: var(--spacing-md);
padding-block: var(--spacing-base);
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
text-overflow: ellipsis;
--tw-outline-style: none;
outline-style: none;
background-color: var(--color-background-default);
color: var(--color-text-default);
border-style: var(--tw-border-style);
border-width: 1px;
--tw-border-style: solid;
border-style: solid;
border-color: var(--color-border-default);
--tw-shadow: 0 0 #0000;
box-shadow:
var(--tw-inset-shadow),
var(--tw-inset-ring-shadow),
var(--tw-ring-offset-shadow),
var(--tw-ring-shadow),
var(--tw-shadow);
transition-property:
color,
background-color,
border-color,
outline-color,
text-decoration-color,
fill,
stroke,
--tw-gradient-from,
--tw-gradient-via,
--tw-gradient-to;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.text-field:read-only {
background-color: var(--color-background-disabled);
}
.text-field:disabled {
background-color: var(--color-background-disabled);
}
.text-field:disabled {
color: var(--color-text-disabled);
}
@media (hover: hover) {
.text-field:enabled:hover {
border-color: var(--color-border-strong);
}
}
.text-field:enabled:focus {
border-color: var(--color-border-accent);
}
.text-field:read-only {
border-color: var(--color-border-disabled);
}
@media (hover: hover) {
.text-field:read-only:hover {
border-color: var(--color-border-disabled);
}
}
.text-field:read-only:focus {
border-color: var(--color-border-disabled);
}
.text-field:disabled {
border-color: var(--color-border-disabled);
}
.text-field:disabled {
pointer-events: none;
}
.text-field:disabled {
cursor: not-allowed;
}
.text-field::placeholder {
color: var(--color-text-placeholder);
}
@media (hover: hover) {
.text-field:enabled:hover {
--tw-shadow: 0px 1px 2px 0px var(--tw-shadow-color, rgba(0, 0, 0, 0.1));
box-shadow:
var(--tw-inset-shadow),
var(--tw-inset-ring-shadow),
var(--tw-ring-offset-shadow),
var(--tw-ring-shadow),
var(--tw-shadow);
}
}
.text-field:enabled:focus {
--tw-shadow: 0px 1px 2px 0px var(--tw-shadow-color, rgba(0, 0, 0, 0.1));
box-shadow:
var(--tw-inset-shadow),
var(--tw-inset-ring-shadow),
var(--tw-ring-offset-shadow),
var(--tw-ring-shadow),
var(--tw-shadow);
}
.text-field-input {
position: relative;
display: flex;
--tw-shadow: 0 0 #0000;
box-shadow:
var(--tw-inset-shadow),
var(--tw-inset-ring-shadow),
var(--tw-ring-offset-shadow),
var(--tw-ring-shadow),
var(--tw-shadow);
}
.text-field-input .text-field-decoration {
display: table-cell;
border-style: var(--tw-border-style);
border-width: 1px;
--tw-border-style: solid;
border-style: solid;
border-color: var(--color-border-default);
padding-inline: var(--spacing-md);
padding-block: var(--spacing-base);
text-align: center;
vertical-align: middle;
white-space: nowrap;
color: var(--color-text-light);
}
.text-field-input .text-field-decoration.text-field-decoration-icon {
display: flex;
align-items: center;
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 16;
line-height: var(--leading-icon-base);
}
.text-field-input .text-field-decoration.text-field-decoration-text {
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
}
.text-field-input .text-field-decoration.text-field-decoration-dropdown {
border-right-style: var(--tw-border-style);
border-right-width: 0px;
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
--tw-outline-style: none;
outline-style: none;
}
@media (hover: hover) {
.text-field-input .text-field-decoration.text-field-decoration-dropdown:hover {
cursor: pointer;
}
}
.text-field-input .text-field-decoration.text-field-decoration-dropdown:focus {
cursor: pointer;
}
.text-field-input .text-field-decoration.text-field-decoration-dropdown:focus-visible {
--tw-outline-style: none;
outline-style: none;
}
.text-field-input .text-field-decoration.text-field-decoration-dropdown .text-field-select {
align-items: center;
align-self: stretch;
overflow: hidden;
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
text-overflow: ellipsis;
--tw-outline-style: none;
outline-style: none;
color: var(--color-text-default);
cursor: pointer;
--tw-border-style: none;
border-style: none;
background-color: var(--color-background-transparent);
}
.text-field-input .text-field-decoration.text-field-decoration-dropdown .text-field-select:disabled {
color: var(--color-text-disabled);
}
.text-field-input .text-field-decoration.text-field-decoration-dropdown .text-field-select:disabled {
background-color: var(--color-background-disabled);
}
.text-field-input .text-field-decoration.text-field-decoration-dropdown .text-field-select:disabled {
cursor: not-allowed;
}
.text-field-input .text-field-decoration.text-field-decoration-dropdown .text-field-select::after {
content: var(--tw-content);
margin-right: var(--spacing-md);
}
.text-field-input .text-field-decoration.text-field-decoration-dropdown .text-field-select-wrapper {
position: relative;
}
.text-field-input .text-field-decoration.text-field-decoration-dropdown .text-field-select-wrapper::after {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-lg);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 18;
line-height: var(--leading-icon-lg);
}
.text-field-input .text-field-decoration.text-field-decoration-dropdown .text-field-select-wrapper::after {
content: var(--tw-content);
color: var(--color-icon-default);
}
.text-field-input .text-field-decoration.text-field-decoration-dropdown .text-field-select-wrapper::after {
--tw-content: "\e5cf";
content: var(--tw-content);
}
.text-field-input .text-field-decoration.text-field-decoration-dropdown .text-field-select-wrapper::after {
content: var(--tw-content);
position: absolute;
}
.text-field-input .text-field-decoration.text-field-decoration-dropdown .text-field-select-wrapper::after {
content: var(--tw-content);
top: var(--spacing-lg);
}
.text-field-input .text-field-decoration.text-field-decoration-dropdown .text-field-select-wrapper::after {
content: var(--tw-content);
right: var(--spacing-lg);
}
.text-field-input .text-field-decoration.text-field-decoration-dropdown .text-field-select-wrapper::after {
content: var(--tw-content);
--tw-leading: calc(0.25rem * 6);
line-height: calc(0.25rem * 6);
}
.text-field-input .text-field-decoration.text-field-decoration-dropdown .text-field-select-wrapper::after {
content: var(--tw-content);
pointer-events: none;
}
@media (hover: hover) {
.text-field-input .text-field-decoration.text-field-decoration-dropdown .text-field-select-wrapper:hover {
cursor: pointer;
}
}
.text-field-input .text-field-decoration.text-field-decoration-dropdown .text-field-select-wrapper::after {
content: var(--tw-content);
top: calc(0.25rem * 0);
}
.text-field-input .text-field-decoration.text-field-decoration-dropdown .text-field-select-wrapper::after {
content: var(--tw-content);
right: calc(var(--spacing-base) * -1);
}
.text-field-container {
display: grid;
height: fit-content;
}
.text-field-container .text-field-label {
overflow: hidden;
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
text-overflow: ellipsis;
white-space: nowrap;
color: var(--color-text-default);
}
.text-field-container .text-field-description {
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
overflow-wrap: break-word;
color: var(--color-text-ultra-light);
}
.text-field-container .text-field-alert-message {
display: inline-flex;
width: 100%;
overflow: auto;
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
overflow-wrap: break-word;
color: var(--color-text-alert);
margin-top: var(--spacing-sm);
}
.text-field-container .text-field-alert-message::before {
content: var(--tw-content);
padding-right: calc(0.25rem * 1);
}
.text-field-container .text-field-alert-message::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 16;
line-height: var(--leading-icon-base);
}
.text-field-container .text-field-alert-message::before {
content: var(--tw-content);
--tw-leading: 20px;
line-height: 20px;
}
.text-field-container .text-field-alert-message::before {
content: var(--tw-content);
color: var(--color-icon-alert);
}
.text-field-container .text-field-alert-message::before {
--tw-content: "error";
content: var(--tw-content);
}
.text-field-container .text-field-warning-message {
display: inline-flex;
width: 100%;
overflow: auto;
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
overflow-wrap: break-word;
color: var(--color-text-warning);
margin-top: var(--spacing-sm);
}
.text-field-container .text-field-warning-message::before {
content: var(--tw-content);
padding-right: calc(0.25rem * 1);
}
.text-field-container .text-field-warning-message::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 16;
line-height: var(--leading-icon-base);
}
.text-field-container .text-field-warning-message::before {
content: var(--tw-content);
--tw-leading: 20px;
line-height: 20px;
}
.text-field-container .text-field-warning-message::before {
content: var(--tw-content);
color: var(--color-icon-warning);
}
.text-field-container .text-field-warning-message::before {
--tw-content: "warning";
content: var(--tw-content);
}
.text-field-container .text-field-success-message {
display: inline-flex;
width: 100%;
overflow: auto;
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
overflow-wrap: break-word;
color: var(--color-text-success);
margin-top: var(--spacing-sm);
}
.text-field-container .text-field-success-message::before {
content: var(--tw-content);
padding-right: calc(0.25rem * 1);
}
.text-field-container .text-field-success-message::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 16;
line-height: var(--leading-icon-base);
}
.text-field-container .text-field-success-message::before {
content: var(--tw-content);
--tw-leading: 20px;
line-height: 20px;
}
.text-field-container .text-field-success-message::before {
content: var(--tw-content);
color: var(--color-icon-success);
}
.text-field-container .text-field-success-message::before {
--tw-content: "check_circle";
content: var(--tw-content);
}
.text-field-container .text-field-information-message {
display: inline-flex;
width: 100%;
overflow: auto;
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
overflow-wrap: break-word;
color: var(--color-text-information);
margin-top: var(--spacing-sm);
}
.text-field-container .text-field-information-message::before {
content: var(--tw-content);
padding-right: calc(0.25rem * 1);
}
.text-field-container .text-field-information-message::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 16;
line-height: var(--leading-icon-base);
}
.text-field-container .text-field-information-message::before {
content: var(--tw-content);
--tw-leading: 20px;
line-height: 20px;
}
.text-field-container .text-field-information-message::before {
content: var(--tw-content);
color: var(--color-icon-information);
}
.text-field-container .text-field-information-message::before {
--tw-content: "info";
content: var(--tw-content);
}
.text-field-container:has(.text-field-decoration + .text-field) .text-field {
border-left-style: var(--tw-border-style);
border-left-width: 0px;
}
.text-field-container:has(.text-field + .text-field-decoration) .text-field {
border-right-style: var(--tw-border-style);
border-right-width: 0px;
}
.text-field-container:has(.text-field-decoration-icon + .text-field) .text-field-decoration {
border-right-style: var(--tw-border-style);
border-right-width: 0px;
}
.text-field-container:has(.text-field-decoration-icon + .text-field) .text-field-decoration-icon {
padding-right: var(--spacing-sm);
}
.text-field-container:has(.text-field + .text-field-decoration-icon) .text-field-decoration {
border-left-style: var(--tw-border-style);
border-left-width: 0px;
}
.text-field-container:has(.text-field-decoration + .text-field:not(:disabled):not(:read-only)) .text-field-decoration {
border-right-color: var(--color-border-default);
}
.text-field-container:has(.text-field:not(:disabled):not(:read-only) + .text-field-decoration) .text-field-decoration {
border-left-color: var(--color-border-default);
}
.text-field-container:has(.text-field-description) .text-field,
.text-field-container:has(.text-field-description) .text-field-decoration {
margin-top: var(--spacing-sm);
}
.text-field-container:has(.text-field-label) .text-field {
margin-top: var(--spacing-sm);
--tw-shadow: 0 0 #0000;
box-shadow:
var(--tw-inset-shadow),
var(--tw-inset-ring-shadow),
var(--tw-ring-offset-shadow),
var(--tw-ring-shadow),
var(--tw-shadow);
}
.text-field-container:has(.text-field-label) .text-field-decoration {
margin-top: var(--spacing-sm);
}
.text-field-container:has(.text-field-label) .text-field-description {
margin-top: calc(var(--spacing-sm) * -1);
}
.text-field-container:has(.text-field:disabled) {
cursor: not-allowed;
}
.text-field-container:has(.text-field:disabled) .text-field-select {
color: var(--color-text-disabled);
}
.text-field-container:has(.text-field:disabled) .text-field-label,
.text-field-container:has(.text-field:disabled) .text-field-description {
color: var(--color-text-disabled);
}
.text-field-container:has(.text-field:disabled) .text-field-decoration {
pointer-events: none;
cursor: not-allowed;
color: var(--color-text-disabled);
}
.text-field-container:has(.text-field:disabled, .text-field:read-only) .text-field-select {
cursor: not-allowed;
}
.text-field-container:has(.text-field:disabled, .text-field:read-only) .text-field-select-wrapper::after {
content: var(--tw-content);
color: var(--color-text-disabled);
}
@media (hover: hover) {
.text-field-container:has(.text-field:disabled, .text-field:read-only) .text-field-select-wrapper:hover {
cursor: not-allowed;
}
}
.text-field-container:has(.text-field:disabled, .text-field:read-only) .text-field-decoration {
border-color: var(--color-border-disabled);
background-color: var(--color-background-disabled);
}
.text-field-container:has(.text-field:disabled, .text-field:read-only) .text-field-alert-message,
.text-field-container:has(.text-field:disabled, .text-field:read-only) .text-field-success-message,
.text-field-container:has(.text-field:disabled, .text-field:read-only) .text-field-alert-message,
.text-field-container:has(.text-field:disabled, .text-field:read-only) .text-field-warning-message {
display: none;
}
.text-field-container:not(:has(.text-field:disabled, .text-field:read-only)):has(.text-field-alert-message) .text-field {
border-color: var(--color-border-alert);
}
.text-field-container:not(:has(.text-field:disabled, .text-field:read-only)):has(.text-field-alert-message) .text-field-decoration {
border-color: var(--color-border-alert);
}
.text-field-container:not(:has(.text-field:disabled, .text-field:read-only)):not(:has(.text-field-alert-message)):has(.text-field-select:focus) .text-field {
border-color: var(--color-border-accent);
}
.text-field-container:not(:has(.text-field:disabled, .text-field:read-only)):not(:has(.text-field-alert-message)):has(.text-field-select:focus) .text-field-decoration-dropdown {
border-color: var(--color-border-accent);
}
.text-field-container:not(:has(.text-field:disabled, .text-field:read-only)):not(:has(.text-field-alert-message)):has(.text-field-select:focus) .text-field-select-wrapper::after {
content: var(--tw-content);
color: var(--color-icon-accent);
}
.text-field-container:not(:has(.text-field:disabled, .text-field:read-only)):not(:has(.text-field-alert-message)):has(.text-field:hover) .text-field-decoration {
border-color: var(--color-border-strong);
}
.text-field-container:not(:has(.text-field:disabled, .text-field:read-only)):not(:has(.text-field-alert-message)):has(.text-field:focus) .text-field-decoration {
border-color: var(--color-border-accent);
}
.text-field-container:not(:has(.text-field:disabled, .text-field:read-only)):not(:has(.text-field-alert-message)):has(.text-field:focus) .text-field-select-wrapper::after {
content: var(--tw-content);
color: var(--color-icon-accent);
}
.text-field-container:not(:has(.text-field:disabled, .text-field:read-only)):has(.text-field-required) .text-field-label::after {
content: var(--tw-content);
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
}
.text-field-container:not(:has(.text-field:disabled, .text-field:read-only)):has(.text-field-required) .text-field-label::after {
content: var(--tw-content);
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
}
.text-field-container:not(:has(.text-field:disabled, .text-field:read-only)):has(.text-field-required) .text-field-label::after {
content: var(--tw-content);
color: var(--color-icon-alert);
}
.text-field-container:not(:has(.text-field:disabled, .text-field:read-only)):has(.text-field-required) .text-field-label::after {
--tw-content: "*";
content: var(--tw-content);
}
.text-field-container:not(:has(.text-field:disabled, .text-field:read-only)):has(.text-field:hover, .text-field:focus) .text-field-input {
--tw-shadow: 0px 1px 2px 0px var(--tw-shadow-color, rgba(0, 0, 0, 0.1));
box-shadow:
var(--tw-inset-shadow),
var(--tw-inset-ring-shadow),
var(--tw-ring-offset-shadow),
var(--tw-ring-shadow),
var(--tw-shadow);
}
.time-field {
width: 100%;
padding-inline: var(--spacing-md);
padding-block: var(--spacing-base);
background-color: var(--color-background-default);
border-style: var(--tw-border-style);
border-width: 1px;
--tw-border-style: solid;
border-style: solid;
border-color: var(--color-border-default);
display: flex;
align-items: center;
gap: var(--spacing-base);
--tw-shadow: 0 0 #0000;
box-shadow:
var(--tw-inset-shadow),
var(--tw-inset-ring-shadow),
var(--tw-ring-offset-shadow),
var(--tw-ring-shadow),
var(--tw-shadow);
transition-property:
color,
background-color,
border-color,
outline-color,
text-decoration-color,
fill,
stroke,
--tw-gradient-from,
--tw-gradient-via,
--tw-gradient-to;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
--tw-outline-style: none;
outline-style: none;
}
@media (hover: hover) {
.time-field:hover {
border-color: var(--color-border-strong);
}
}
.time-field:focus-within {
border-color: var(--color-border-accent);
}
.time-field::-webkit-calendar-picker-indicator {
display: none;
}
.time-field::-webkit-datetime-edit-hour-field:focus,
.time-field::-webkit-datetime-edit-minute-field:focus,
.time-field::-webkit-datetime-edit-second-field:focus,
.time-field::-webkit-datetime-edit-ampm-field:focus {
background-color: var(--color-background-action-focus);
color: var(--color-text-default);
}
.time-field .time-field-input-wrapper {
gap: var(--spacing-xs);
}
.time-field .time-field-input-wrapper .time-field-input {
box-sizing: border-box;
border-radius: var(--radius-xs);
--tw-border-style: none;
border-style: none;
text-align: center;
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
color: var(--color-text-default);
align-items: center;
align-self: stretch;
overflow: hidden;
text-overflow: ellipsis;
--tw-outline-style: none;
outline-style: none;
background-color: var(--color-background-action);
transition-property:
color,
background-color,
border-color,
outline-color,
text-decoration-color,
fill,
stroke,
--tw-gradient-from,
--tw-gradient-via,
--tw-gradient-to;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.time-field .time-field-input-wrapper .time-field-input:focus {
background-color: var(--color-background-action-focus);
}
.time-field .time-field-input-wrapper .time-field-input::placeholder {
color: var(--color-text-default);
}
.time-field .time-field-input-wrapper .time-field-seperator {
align-items: center;
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
color: var(--color-text-default);
}
.time-field .time-field-select-wrapper {
position: relative;
border-radius: var(--radius-xs);
}
.time-field .time-field-select-wrapper::after {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-lg);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 18;
line-height: var(--leading-icon-lg);
}
.time-field .time-field-select-wrapper::after {
content: var(--tw-content);
color: var(--color-icon-default);
}
.time-field .time-field-select-wrapper::after {
--tw-content: "\e5cf";
content: var(--tw-content);
}
.time-field .time-field-select-wrapper::after {
content: var(--tw-content);
position: absolute;
}
.time-field .time-field-select-wrapper::after {
content: var(--tw-content);
top: var(--spacing-lg);
}
.time-field .time-field-select-wrapper::after {
content: var(--tw-content);
right: var(--spacing-lg);
}
.time-field .time-field-select-wrapper::after {
content: var(--tw-content);
--tw-leading: calc(0.25rem * 6);
line-height: calc(0.25rem * 6);
}
.time-field .time-field-select-wrapper::after {
content: var(--tw-content);
pointer-events: none;
}
@media (hover: hover) {
.time-field .time-field-select-wrapper:hover {
cursor: pointer;
}
}
.time-field .time-field-select-wrapper::after {
content: var(--tw-content);
top: calc(0.25rem * 0);
}
.time-field .time-field-select-wrapper::after {
content: var(--tw-content);
right: calc(0.25rem * -0);
}
.time-field .time-field-select-wrapper:focus-within {
background-color: var(--color-background-action-focus);
}
.time-field .time-field-select-wrapper::after {
content: var(--tw-content);
}
:is():focus-within {
background-color: var(--color-background-action-focus);
}
.time-field .time-field-select-wrapper .time-field-select {
align-items: center;
align-self: stretch;
overflow: hidden;
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
text-overflow: ellipsis;
--tw-outline-style: none;
outline-style: none;
color: var(--color-text-default);
--tw-border-style: none;
border-style: none;
background-color: var(--color-background-transparent);
}
.time-field .time-field-select-wrapper .time-field-select:disabled {
color: var(--color-text-disabled);
}
.time-field .time-field-select-wrapper .time-field-select:disabled {
background-color: var(--color-background-disabled);
}
.time-field .time-field-select-wrapper .time-field-select:disabled {
cursor: not-allowed;
}
@media (hover: hover) {
.time-field .time-field-select-wrapper .time-field-select:hover {
cursor: pointer;
}
}
.time-field .time-field-select-wrapper .time-field-select::after {
content: var(--tw-content);
margin-right: 18px;
}
.time-field.time-field-readonly {
border-color: var(--color-border-disabled);
background-color: var(--color-background-disabled);
}
.time-field.time-field-readonly:focus-within {
border-color: var(--color-border-disabled);
}
@media (hover: hover) {
.time-field.time-field-readonly:hover {
border-color: var(--color-border-disabled);
}
}
.time-field.time-field-readonly::-webkit-datetime-edit-hour-field:focus,
.time-field.time-field-readonly::-webkit-datetime-edit-minute-field:focus,
.time-field.time-field-readonly::-webkit-datetime-edit-second-field:focus,
.time-field.time-field-readonly::-webkit-datetime-edit-ampm-field:focus {
background-color: var(--color-background-transparent);
}
.time-field.time-field-disabled {
border-color: var(--color-border-disabled);
background-color: var(--color-background-disabled);
cursor: not-allowed;
color: var(--color-text-disabled);
}
.time-field.time-field-disabled:focus-within {
border-color: var(--color-border-disabled);
}
@media (hover: hover) {
.time-field.time-field-disabled:hover {
border-color: var(--color-border-disabled);
}
}
.time-field-container {
display: grid;
height: fit-content;
}
.time-field-container .time-field-label {
overflow: hidden;
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
text-overflow: ellipsis;
white-space: nowrap;
color: var(--color-text-default);
}
.time-field-container .time-field-description {
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
overflow-wrap: break-word;
color: var(--color-text-ultra-light);
}
.time-field-container .time-field-alert-message {
display: inline-flex;
width: 100%;
overflow: auto;
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
overflow-wrap: break-word;
color: var(--color-text-alert);
margin-top: var(--spacing-sm);
}
.time-field-container .time-field-alert-message::before {
content: var(--tw-content);
padding-right: calc(0.25rem * 1);
}
.time-field-container .time-field-alert-message::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 16;
line-height: var(--leading-icon-base);
}
.time-field-container .time-field-alert-message::before {
content: var(--tw-content);
--tw-leading: 20px;
line-height: 20px;
}
.time-field-container .time-field-alert-message::before {
content: var(--tw-content);
color: var(--color-icon-alert);
}
.time-field-container .time-field-alert-message::before {
--tw-content: "error";
content: var(--tw-content);
}
.time-field-container .time-field-warning-message {
display: inline-flex;
width: 100%;
overflow: auto;
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
overflow-wrap: break-word;
color: var(--color-text-warning);
margin-top: var(--spacing-sm);
}
.time-field-container .time-field-warning-message::before {
content: var(--tw-content);
padding-right: calc(0.25rem * 1);
}
.time-field-container .time-field-warning-message::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 16;
line-height: var(--leading-icon-base);
}
.time-field-container .time-field-warning-message::before {
content: var(--tw-content);
--tw-leading: 20px;
line-height: 20px;
}
.time-field-container .time-field-warning-message::before {
content: var(--tw-content);
color: var(--color-icon-warning);
}
.time-field-container .time-field-warning-message::before {
--tw-content: "warning";
content: var(--tw-content);
}
.time-field-container .time-field-success-message {
display: inline-flex;
width: 100%;
overflow: auto;
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
overflow-wrap: break-word;
color: var(--color-text-success);
margin-top: var(--spacing-sm);
}
.time-field-container .time-field-success-message::before {
content: var(--tw-content);
padding-right: calc(0.25rem * 1);
}
.time-field-container .time-field-success-message::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 16;
line-height: var(--leading-icon-base);
}
.time-field-container .time-field-success-message::before {
content: var(--tw-content);
--tw-leading: 20px;
line-height: 20px;
}
.time-field-container .time-field-success-message::before {
content: var(--tw-content);
color: var(--color-icon-success);
}
.time-field-container .time-field-success-message::before {
--tw-content: "check_circle";
content: var(--tw-content);
}
.time-field-container .time-field-information-message {
display: inline-flex;
width: 100%;
overflow: auto;
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
overflow-wrap: break-word;
color: var(--color-text-information);
margin-top: var(--spacing-sm);
}
.time-field-container .time-field-information-message::before {
content: var(--tw-content);
padding-right: calc(0.25rem * 1);
}
.time-field-container .time-field-information-message::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 16;
line-height: var(--leading-icon-base);
}
.time-field-container .time-field-information-message::before {
content: var(--tw-content);
--tw-leading: 20px;
line-height: 20px;
}
.time-field-container .time-field-information-message::before {
content: var(--tw-content);
color: var(--color-icon-information);
}
.time-field-container .time-field-information-message::before {
--tw-content: "info";
content: var(--tw-content);
}
.time-field-container:has(.time-field-disabled) .time-field {
border-color: var(--color-border-disabled);
}
.time-field-container:has(.time-field-disabled) .time-field-input {
color: var(--color-text-disabled);
pointer-events: none;
cursor: not-allowed;
background-color: var(--color-background-disabled);
}
.time-field-container:has(.time-field-disabled) .time-field-input::placeholder {
color: var(--color-text-disabled);
}
.time-field-container:has(.time-field-disabled) .time-field-label,
.time-field-container:has(.time-field-disabled) .time-field-description,
.time-field-container:has(.time-field-disabled) .time-field-seperator {
color: var(--color-text-disabled);
}
.time-field-container:has(.time-field-disabled) .time-field-select-wrapper::after {
content: var(--tw-content);
color: var(--color-icon-disabled);
}
.time-field-container:has(.time-field-disabled) .time-field-select {
pointer-events: none;
cursor: not-allowed;
color: var(--color-text-disabled);
}
.time-field-container:has(.time-field-disabled) .time-field-alert-message,
.time-field-container:has(.time-field-disabled) .time-field-success-message,
.time-field-container:has(.time-field-disabled) .time-field-information-message,
.time-field-container:has(.time-field-disabled) .time-field-warning-message {
display: none;
}
.time-field-container:has(.time-field-readonly) .time-field-input {
background-color: var(--color-background-disabled);
}
.time-field-container:has(.time-field-readonly) .time-field-select-wrapper::after {
content: var(--tw-content);
color: var(--color-icon-disabled);
}
.time-field-container:has(.time-field-readonly) .time-field-select {
background-color: var(--color-background-disabled);
}
.time-field-container:has(.time-field-readonly) .time-field-select::after {
content: var(--tw-content);
background-color: var(--color-background-disabled);
}
.time-field-container:has(.time-field-readonly) .time-field-alert-message,
.time-field-container:has(.time-field-readonly) .time-field-success-message,
.time-field-container:has(.time-field-readonly) .time-field-information-message,
.time-field-container:has(.time-field-readonly) .time-field-warning-message {
display: none;
}
.time-field-container:not(:has(.time-field-disabled, .time-field-readonly)):has(.time-field-required) .time-field-label::after {
content: var(--tw-content);
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
}
.time-field-container:not(:has(.time-field-disabled, .time-field-readonly)):has(.time-field-required) .time-field-label::after {
content: var(--tw-content);
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
}
.time-field-container:not(:has(.time-field-disabled, .time-field-readonly)):has(.time-field-required) .time-field-label::after {
content: var(--tw-content);
color: var(--color-icon-alert);
}
.time-field-container:not(:has(.time-field-disabled, .time-field-readonly)):has(.time-field-required) .time-field-label::after {
--tw-content: "*";
content: var(--tw-content);
}
:is(.time-field-container:not(:has(.time-field-disabled, .time-field-readonly)):has(.time-field-input:hover), .time-field-container:not(:has(.time-field-disabled, .time-field-readonly)):has(.time-field-input:focus)) .time-field {
--tw-shadow: 0px 1px 2px 0px var(--tw-shadow-color, rgba(0, 0, 0, 0.1));
box-shadow:
var(--tw-inset-shadow),
var(--tw-inset-ring-shadow),
var(--tw-ring-offset-shadow),
var(--tw-ring-shadow),
var(--tw-shadow);
}
.time-field-container:not(:has(.time-field-disabled, .time-field-readonly)):has(.time-field-alert-message) .time-field {
border-color: var(--color-border-alert);
}
.time-field-container:not(:has(.time-field-disabled, .time-field-readonly)):has(.time-field-alert-message) .time-field-select::after {
content: var(--tw-content);
color: var(--color-text-default);
}
.time-field-container:not(:has(.time-field-disabled, .time-field-readonly)):not(:has(.time-field-alert-message)):has(.time-field:focus-within) .time-field-select-wrapper::after {
content: var(--tw-content);
color: var(--color-icon-accent);
}
.time-field-container:has(.time-field-description) .time-field {
margin-top: var(--spacing-sm);
}
.time-field-container:has(.time-field-label) .time-field {
margin-top: var(--spacing-sm);
}
.time-field-container:has(.time-field-label) .time-field-description {
margin-top: calc(var(--spacing-sm) * -1);
}
.toast-notification {
position: relative;
display: flex;
width: calc(0.25rem * 88);
gap: var(--spacing-base);
padding: var(--spacing-lg);
border-radius: var(--radius-xs);
border-style: var(--tw-border-style);
border-width: 1px;
border-left-style: var(--tw-border-style);
border-left-width: 4px;
--tw-border-style: solid;
border-style: solid;
border-color: var(--color-border-information);
background-color: var(--color-background-information-ultra-light);
color: var(--color-text-default);
}
.toast-notification::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-lg);
font-weight: 600;
font-variation-settings: "FILL" 1, "opsz" 18;
line-height: var(--leading-icon-lg);
}
.toast-notification::before {
content: var(--tw-content);
--tw-leading: calc(0.25rem * 6);
line-height: calc(0.25rem * 6);
}
.toast-notification::before {
content: var(--tw-content);
color: var(--color-icon-information);
}
.toast-notification::before {
--tw-content: "\e88e";
content: var(--tw-content);
}
.toast-notification .toast-notification-content {
display: flex;
width: 100%;
flex-direction: column;
overflow: auto;
}
.toast-notification .toast-notification-content .toast-notification-title {
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 600;
font-style: normal;
font-size: var(--text-base);
line-height: var(--leading-base);
overflow-wrap: break-word;
color: var(--color-text-default);
}
.toast-notification .toast-notification-content .toast-notification-description {
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
overflow-wrap: break-word;
color: var(--color-text-default);
}
.toast-notification .toast-notification-close {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--color-icon-accent);
background-color: var(--color-background-transparent);
height: calc(0.25rem * 8);
width: calc(0.25rem * 8);
border-radius: var(--radius-md);
font-size: var(--text-icon-sm);
font-variation-settings: "FILL" 0, "opsz" 14;
line-height: var(--leading-icon-sm);
--tw-border-style: none;
border-style: none;
transition-property:
color,
background-color,
border-color,
outline-color,
text-decoration-color,
fill,
stroke,
--tw-gradient-from,
--tw-gradient-via,
--tw-gradient-to;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
height: calc(0.25rem * 6);
width: calc(0.25rem * 6);
border-radius: var(--radius-sm);
font-family: var(--font-icon);
font-size: var(--text-icon-xs);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 12;
line-height: var(--leading-icon-xs);
min-width: calc(0.25rem * 6);
color: var(--color-icon-default);
background-color: var(--color-background-information-ultra-light);
}
.toast-notification .toast-notification-close:focus-visible {
--tw-outline-style: none;
outline-style: none;
}
.toast-notification .toast-notification-close:disabled {
cursor: not-allowed;
}
.toast-notification .toast-notification-close:disabled {
color: var(--color-icon-disabled-light);
}
@media (hover: hover) {
.toast-notification .toast-notification-close:enabled:hover {
background-color: var(--color-background-action-hover);
}
}
.toast-notification .toast-notification-close:enabled:focus {
background-color: var(--color-background-action-focus);
}
.toast-notification .toast-notification-close:disabled {
background-color: var(--color-background-transparent);
}
.toast-notification .toast-notification-close::before {
--tw-content: "\e5cd";
content: var(--tw-content);
}
@media (hover: hover) {
.toast-notification .toast-notification-close:enabled:hover {
background-color: var(--color-background-information-ultra-light-hover);
}
}
.toast-notification .toast-notification-close:enabled:focus {
background-color: var(--color-background-information-ultra-light-focus);
}
.toast-notification.toast-notification-alert {
border-color: var(--color-border-alert);
background-color: var(--color-background-alert-ultra-light);
}
.toast-notification.toast-notification-alert::before {
content: var(--tw-content);
color: var(--color-icon-alert);
}
.toast-notification.toast-notification-alert::before {
--tw-content: "\e001";
content: var(--tw-content);
}
.toast-notification.toast-notification-alert > .toast-notification-close {
background-color: var(--color-background-alert-ultra-light);
}
@media (hover: hover) {
.toast-notification.toast-notification-alert > .toast-notification-close:enabled:hover {
background-color: var(--color-background-alert-ultra-light-hover);
}
}
.toast-notification.toast-notification-alert > .toast-notification-close:enabled:focus {
background-color: var(--color-background-alert-ultra-light-focus);
}
.toast-notification.toast-notification-warning {
border-color: var(--color-border-warning);
background-color: var(--color-background-warning-ultra-light);
}
.toast-notification.toast-notification-warning::before {
content: var(--tw-content);
color: var(--color-icon-warning);
}
.toast-notification.toast-notification-warning::before {
--tw-content: "\f083";
content: var(--tw-content);
}
.toast-notification.toast-notification-warning > .toast-notification-close {
background-color: var(--color-background-warning-ultra-light);
}
@media (hover: hover) {
.toast-notification.toast-notification-warning > .toast-notification-close:enabled:hover {
background-color: var(--color-background-warning-ultra-light-hover);
}
}
.toast-notification.toast-notification-warning > .toast-notification-close:enabled:focus {
background-color: var(--color-background-warning-ultra-light-focus);
}
.toast-notification.toast-notification-success {
border-color: var(--color-border-success);
background-color: var(--color-background-success-ultra-light);
}
.toast-notification.toast-notification-success::before {
content: var(--tw-content);
color: var(--color-icon-success);
}
.toast-notification.toast-notification-success::before {
--tw-content: "\e86c";
content: var(--tw-content);
}
.toast-notification.toast-notification-success > .toast-notification-close {
background-color: var(--color-background-success-ultra-light);
}
@media (hover: hover) {
.toast-notification.toast-notification-success > .toast-notification-close:enabled:hover {
background-color: var(--color-background-success-ultra-light-hover);
}
}
.toast-notification.toast-notification-success > .toast-notification-close:enabled:focus {
background-color: var(--color-background-success-ultra-light-focus);
}
.toast-notification.toast-notification-loading {
border-color: var(--color-border-information);
background-color: var(--color-background-information-ultra-light);
color: var(--color-text-default);
}
.toast-notification.toast-notification-loading::before {
content: var(--tw-content);
color: var(--color-icon-transparent);
}
.toast-notification.toast-notification-loading > .spinner {
height: calc(0.25rem * 3);
width: calc(0.25rem * 3);
border-color: var(--color-icon-information);
border-right-color: var(--color-border-transparent);
position: absolute;
top: calc(0.25rem * 4);
}
.toggle {
margin-right: var(--spacing-2xl);
width: calc(0.25rem * 3);
appearance: none;
margin-left: calc(0.25rem * 0);
}
.toggle::before {
content: var(--tw-content);
position: absolute;
}
.toggle::before {
content: var(--tw-content);
top: calc(0.25rem * 1);
}
.toggle::before {
content: var(--tw-content);
left: 1px;
}
.toggle::before {
content: var(--tw-content);
height: calc(0.25rem * 4);
}
.toggle::before {
content: var(--tw-content);
width: calc(0.25rem * 7);
}
.toggle::before {
content: var(--tw-content);
border-radius: var(--radius-lg);
}
.toggle::before {
content: var(--tw-content);
transition-property: all;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.toggle::after {
content: var(--tw-content);
position: absolute;
}
.toggle::after {
content: var(--tw-content);
top: calc(0.25rem * 1.5);
}
.toggle::after {
content: var(--tw-content);
left: var(--spacing-xs);
}
.toggle::after {
content: var(--tw-content);
margin-top: -1px;
}
.toggle::after {
content: var(--tw-content);
height: calc(0.25rem * 3.5);
}
.toggle::after {
content: var(--tw-content);
width: calc(0.25rem * 3.5);
}
.toggle::after {
content: var(--tw-content);
border-radius: var(--radius-lg);
}
.toggle::after {
content: var(--tw-content);
background-color: var(--color-background-default);
}
.toggle::after {
content: var(--tw-content);
transition-property: all;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
@media (hover: hover) {
.toggle:hover {
cursor: pointer;
}
}
.toggle:focus {
cursor: pointer;
}
.toggle:checked::after {
content: var(--tw-content);
left: calc(0.25rem * 3.5);
}
.toggle::before {
content: var(--tw-content);
background-color: var(--color-border-light);
}
.toggle:checked::before {
content: var(--tw-content);
background-color: var(--color-background-accent);
}
.toggle:focus::before {
content: var(--tw-content);
background-color: var(--color-border-default);
}
.toggle:focus:checked::before {
content: var(--tw-content);
background-color: var(--color-background-accent-focus);
}
.toggle:disabled::before {
content: var(--tw-content);
background-color: var(--color-border-disabled);
}
.toggle:disabled {
cursor: not-allowed;
}
.toggle.toggle-right::before {
right: 1px;
content: var(--tw-content);
left: auto;
}
.toggle.toggle-right::after {
right: var(--spacing-xs);
content: var(--tw-content);
left: auto;
}
.toggle.toggle-right:checked::after {
right: calc(0.25rem * 3.5);
content: var(--tw-content);
left: auto;
}
.toggle-container {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: baseline;
}
@media (hover: hover) {
.toggle-container:hover {
cursor: pointer;
}
}
.toggle-container:focus {
cursor: pointer;
}
.toggle-container .toggle-label {
overflow: hidden;
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
text-overflow: ellipsis;
white-space: nowrap;
color: var(--color-text-default);
max-width: calc(100% - 28px);
}
.toggle-container .toggle-icon {
display: flex;
align-self: center;
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 16;
line-height: var(--leading-icon-base);
color: var(--color-icon-default);
margin-right: calc(0.25rem * 1);
max-width: calc(0.25rem * 4);
}
.toggle-container .toggle-description {
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
overflow-wrap: break-word;
color: var(--color-text-ultra-light);
margin-top: calc(var(--spacing-sm) * -1);
margin-left: calc(0.25rem * 9);
flex-basis: 100%;
}
.toggle-container .toggle-alert-message {
display: inline-flex;
width: 100%;
overflow: auto;
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
overflow-wrap: break-word;
color: var(--color-text-alert);
margin-left: calc(0.25rem * 9);
}
.toggle-container .toggle-alert-message::before {
content: var(--tw-content);
padding-right: calc(0.25rem * 1);
}
.toggle-container .toggle-alert-message::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 16;
line-height: var(--leading-icon-base);
}
.toggle-container .toggle-alert-message::before {
content: var(--tw-content);
--tw-leading: 20px;
line-height: 20px;
}
.toggle-container .toggle-alert-message::before {
content: var(--tw-content);
color: var(--color-icon-alert);
}
.toggle-container .toggle-alert-message::before {
--tw-content: "error";
content: var(--tw-content);
}
.toggle-container .toggle-warning-message {
display: inline-flex;
width: 100%;
overflow: auto;
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
overflow-wrap: break-word;
color: var(--color-text-warning);
margin-left: calc(0.25rem * 9);
}
.toggle-container .toggle-warning-message::before {
content: var(--tw-content);
padding-right: calc(0.25rem * 1);
}
.toggle-container .toggle-warning-message::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 16;
line-height: var(--leading-icon-base);
}
.toggle-container .toggle-warning-message::before {
content: var(--tw-content);
--tw-leading: 20px;
line-height: 20px;
}
.toggle-container .toggle-warning-message::before {
content: var(--tw-content);
color: var(--color-icon-warning);
}
.toggle-container .toggle-warning-message::before {
--tw-content: "warning";
content: var(--tw-content);
}
.toggle-container .toggle-success-message {
display: inline-flex;
width: 100%;
overflow: auto;
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
overflow-wrap: break-word;
color: var(--color-text-success);
margin-left: calc(0.25rem * 9);
}
.toggle-container .toggle-success-message::before {
content: var(--tw-content);
padding-right: calc(0.25rem * 1);
}
.toggle-container .toggle-success-message::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 16;
line-height: var(--leading-icon-base);
}
.toggle-container .toggle-success-message::before {
content: var(--tw-content);
--tw-leading: 20px;
line-height: 20px;
}
.toggle-container .toggle-success-message::before {
content: var(--tw-content);
color: var(--color-icon-success);
}
.toggle-container .toggle-success-message::before {
--tw-content: "check_circle";
content: var(--tw-content);
}
.toggle-container .toggle-information-message {
display: inline-flex;
width: 100%;
overflow: auto;
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
overflow-wrap: break-word;
color: var(--color-text-information);
margin-left: calc(0.25rem * 9);
}
.toggle-container .toggle-information-message::before {
content: var(--tw-content);
padding-right: calc(0.25rem * 1);
}
.toggle-container .toggle-information-message::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 16;
line-height: var(--leading-icon-base);
}
.toggle-container .toggle-information-message::before {
content: var(--tw-content);
--tw-leading: 20px;
line-height: 20px;
}
.toggle-container .toggle-information-message::before {
content: var(--tw-content);
color: var(--color-icon-information);
}
.toggle-container .toggle-information-message::before {
--tw-content: "info";
content: var(--tw-content);
}
.toggle-container:not(:has(.toggle:disabled)):has(.toggle-alert-message) .toggle::before {
content: var(--tw-content);
background-color: var(--color-background-alert);
}
.toggle-container:not(:has(.toggle:disabled)):has(.toggle-alert-message) .toggle:checked::before {
content: var(--tw-content);
background-color: var(--color-background-alert);
}
.toggle-container:not(:has(.toggle:disabled)):has(.toggle-alert-message) .toggle:focus::before {
content: var(--tw-content);
background-color: var(--color-background-alert);
}
.toggle-container:has(.toggle:disabled) .toggle-label,
.toggle-container:has(.toggle:disabled) .toggle-description {
cursor: not-allowed;
color: var(--color-text-disabled);
}
.toggle-container:has(.toggle:disabled) .toggle-icon {
cursor: not-allowed;
color: var(--color-icon-disabled);
}
.toggle-container:has(.toggle:disabled) .toggle-alert-message,
.toggle-container:has(.toggle:disabled) .toggle-information-message,
.toggle-container:has(.toggle:disabled) .toggle-success-message,
.toggle-container:has(.toggle:disabled) .toggle-warning-message {
display: none;
}
.toggle-container:has(.toggle-right) .toggle-description,
.toggle-container:has(.toggle-right) .toggle-alert-message,
.toggle-container:has(.toggle-right) .toggle-information-message,
.toggle-container:has(.toggle-right) .toggle-success-message,
.toggle-container:has(.toggle-right) .toggle-warning-message {
margin-right: calc(0.25rem * 9);
}
.toggle-container:has(.toggle-right) .toggle-label {
max-width: calc(100% - 36px);
}
.toggle-container:has(.toggle-right):has(.toggle-icon) .toggle-description,
.toggle-container:has(.toggle-right):has(.toggle-icon) .toggle-alert-message,
.toggle-container:has(.toggle-right):has(.toggle-icon) .toggle-information-message,
.toggle-container:has(.toggle-right):has(.toggle-icon) .toggle-success-message,
.toggle-container:has(.toggle-right):has(.toggle-icon) .toggle-warning-message {
margin-left: calc(0.25rem * 4);
}
.toggle-container:has(.toggle-right):has(.toggle-icon) .toggle-label {
max-width: calc(100% - 52px);
}
.tooltip {
position: absolute;
display: inline-flex;
flex-direction: column;
align-items: center;
text-align: center;
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
background-color: var(--color-background-inverted);
color: var(--color-text-inverted);
padding-inline: var(--spacing-base);
padding-block: var(--spacing-xs);
border-radius: var(--radius-xs);
border-style: var(--tw-border-style);
border-width: 1px;
--tw-border-style: solid;
border-style: solid;
}
.tooltip::after {
content: var(--tw-content);
position: absolute;
}
.tooltip::after {
--tw-content: "";
content: var(--tw-content);
}
.tooltip::after {
content: var(--tw-content);
top: 100%;
}
.tooltip::after {
content: var(--tw-content);
left: calc(1 / 2 * 100%);
}
.tooltip::after {
content: var(--tw-content);
margin-left: calc(var(--spacing-sm) * -1);
}
.tooltip::after {
content: var(--tw-content);
border-style: var(--tw-border-style);
border-width: 4px;
}
.tooltip::after {
content: var(--tw-content);
--tw-border-style: solid;
border-style: solid;
}
.tooltip::after {
content: var(--tw-content);
border-inline-color: var(--color-background-transparent);
}
.tooltip::after {
content: var(--tw-content);
border-top-color: var(--color-background-inverted);
}
.tooltip::after {
content: var(--tw-content);
border-bottom-color: var(--color-background-transparent);
}
.tooltip .breadcrumbs {
margin-block: calc(0.25rem * 0);
display: flex;
list-style-type: none;
align-items: center;
gap: var(--spacing-sm);
padding-inline-start: calc(0.25rem * 0);
}
.tooltip .breadcrumbs > :nth-child(n) {
display: contents;
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
color: var(--color-text-inverted);
}
.tooltip .breadcrumbs > :nth-child(n):not(:last-child)::after {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-sm);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 14;
line-height: var(--leading-icon-sm);
}
.tooltip .breadcrumbs > :nth-child(n):not(:last-child)::after {
content: var(--tw-content);
color: var(--color-icon-inverted);
}
.tooltip .breadcrumbs > :nth-child(n):not(:last-child)::after {
--tw-content: "chevron_right";
content: var(--tw-content);
}
.tooltip.tooltip-right {
align-items: flex-start;
text-align: left;
}
.tooltip.tooltip-right::after {
content: var(--tw-content);
top: calc(1 / 2 * 100%);
}
.tooltip.tooltip-right::after {
content: var(--tw-content);
right: 100%;
}
.tooltip.tooltip-right::after {
content: var(--tw-content);
margin-top: calc(var(--spacing-sm) * -1);
}
.tooltip.tooltip-right::after {
content: var(--tw-content);
border-block-color: var(--color-background-transparent);
}
.tooltip.tooltip-right::after {
content: var(--tw-content);
border-right-color: var(--color-background-inverted);
}
.tooltip.tooltip-right::after {
content: var(--tw-content);
border-left-color: var(--color-background-transparent);
}
.tooltip.tooltip-right::after {
left: unset;
}
.tooltip.tooltip-bottom::after {
bottom: 100%;
left: calc(1 / 2 * 100%);
margin-left: calc(var(--spacing-sm) * -1);
border-inline-color: var(--color-background-transparent);
border-top-color: var(--color-background-transparent);
content: var(--tw-content);
border-bottom-color: var(--color-background-inverted);
top: unset;
}
.tooltip.tooltip-left {
align-items: flex-start;
justify-content: flex-end;
text-align: right;
}
.tooltip.tooltip-left::after {
content: var(--tw-content);
top: calc(1 / 2 * 100%);
}
.tooltip.tooltip-left::after {
content: var(--tw-content);
left: 100%;
}
.tooltip.tooltip-left::after {
content: var(--tw-content);
margin-top: calc(var(--spacing-sm) * -1);
}
.tooltip.tooltip-left::after {
content: var(--tw-content);
margin-left: calc(0.25rem * 0);
}
.tooltip.tooltip-left::after {
content: var(--tw-content);
border-block-color: var(--color-background-transparent);
}
.tooltip.tooltip-left::after {
content: var(--tw-content);
border-right-color: var(--color-background-transparent);
}
.tooltip.tooltip-left::after {
content: var(--tw-content);
border-left-color: var(--color-background-inverted);
}
.tooltip.tooltip-preview {
height: fit-content;
width: fit-content;
border-color: var(--color-border-light);
background-color: var(--color-background-default);
padding: var(--spacing-xs);
--tw-shadow: 0px 4px 8px 0px var(--tw-shadow-color, rgba(0, 0, 0, 0.1));
box-shadow:
var(--tw-inset-shadow),
var(--tw-inset-ring-shadow),
var(--tw-ring-offset-shadow),
var(--tw-ring-shadow),
var(--tw-shadow);
}
.tooltip.tooltip-preview::after {
content: var(--tw-content);
display: none;
}
.tooltip.tooltip-custom {
height: fit-content;
width: fit-content;
border-color: var(--color-border-light);
background-color: var(--color-background-default);
padding: var(--spacing-base);
--tw-shadow: 0px 4px 8px 0px var(--tw-shadow-color, rgba(0, 0, 0, 0.1));
box-shadow:
var(--tw-inset-shadow),
var(--tw-inset-ring-shadow),
var(--tw-ring-offset-shadow),
var(--tw-ring-shadow),
var(--tw-shadow);
}
.tooltip.tooltip-custom::after {
content: var(--tw-content);
display: none;
}
.treeview {
align-items: stretch;
}
.treeview > .treeview-items {
margin-block: calc(0.25rem * 0);
padding-inline-start: calc(0.25rem * 0);
}
.treeview > .treeview-items > :nth-child(n) {
border-style: var(--tw-border-style);
border-width: 0px;
border-top-style: var(--tw-border-style);
border-top-width: 1px;
--tw-border-style: solid;
border-style: solid;
border-color: var(--color-border-light);
}
.treeview > .treeview-items > :last-child {
border-bottom-style: var(--tw-border-style);
border-bottom-width: 1px;
--tw-border-style: solid;
border-style: solid;
border-color: var(--color-border-light);
}
.treeview-item {
position: relative;
display: flex;
list-style-type: none;
flex-direction: column;
}
.treeview-item .treeview-item-content {
flex-grow: 1;
cursor: pointer;
padding-block: var(--spacing-sm);
padding-right: var(--spacing-2xl);
padding-left: var(--spacing-base);
--tw-outline-style: none;
outline-style: none;
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 600;
font-style: normal;
font-size: var(--text-base);
line-height: var(--leading-base);
color: var(--color-text-default);
background-color: var(--color-background-action);
display: flex;
align-items: flex-start;
--tw-border-style: none;
border-style: none;
transition-property:
color,
background-color,
border-color,
outline-color,
text-decoration-color,
fill,
stroke,
--tw-gradient-from,
--tw-gradient-via,
--tw-gradient-to;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.treeview-item .treeview-item-content:disabled {
color: var(--color-text-disabled);
}
@media (hover: hover) {
.treeview-item .treeview-item-content:enabled:hover {
background-color: var(--color-background-action-hover);
}
}
.treeview-item .treeview-item-content:enabled:focus {
background-color: var(--color-background-action-focus);
}
@media (hover: hover) {
.treeview-item .treeview-item-content:disabled:hover {
background-color: var(--color-background-action);
}
}
.treeview-item .treeview-item-content:disabled:focus {
background-color: var(--color-background-action);
}
.treeview-item .treeview-item-content .checkbox-label {
max-width: 100%;
}
.treeview-item .treeview-item-content .checkbox-description {
text-align: left;
}
.treeview-item .treeview-items {
display: none;
}
.treeview-item .treeview-items {
padding-inline-start: calc(0.25rem * 0);
}
.treeview-item .treeview-items .treeview-item-content {
padding-left: calc(0.25rem * 8);
}
.treeview-item .treeview-items .treeview-items .treeview-item-content {
padding-left: calc(0.25rem * 16);
}
.treeview-item:has(.checkbox:disabled) .treeview-item-content {
cursor: not-allowed;
}
.treeview-item:has(.checkbox:disabled) .treeview-item-content::after {
content: var(--tw-content);
color: var(--color-icon-disabled);
}
@media (hover: hover) {
.treeview-item:has(.checkbox:disabled) .treeview-item-content:hover {
background-color: var(--color-background-action);
}
}
.treeview-item:has(.checkbox:disabled) .treeview-item-content:focus {
background-color: var(--color-background-action);
}
.treeview .treeview-item.treeview-item-expanded.treeview-item > .treeview-item-content::after {
--tw-content: "\e5ce";
content: var(--tw-content);
}
.treeview .treeview-item.treeview-item-expanded.treeview-item .treeview-items {
display: block;
}
.treeview .treeview-item.treeview-item-expandable.treeview-item > .treeview-item-content::after {
position: absolute;
top: calc(0.25rem * 1);
right: var(--spacing-base);
font-family: var(--font-icon);
font-size: var(--text-icon-xl);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 20;
line-height: var(--leading-icon-xl);
color: var(--color-icon-default);
--tw-content: "\e5cf";
content: var(--tw-content);
}
.treeview .treeview-item.treeview-item-expandable.treeview-item > .treeview-item-content:disabled::after {
content: var(--tw-content);
color: var(--color-icon-disabled);
}
.footer {
height: fit-content;
width: 100%;
gap: var(--spacing-base);
background-color: var(--color-background-gray-light);
container-type: inline-size;
display: flex;
min-width: 320px;
}
.footer .footer-content {
padding-inline: var(--spacing-2xl);
padding-block: var(--spacing-base);
display: flex;
flex: 1;
flex-direction: column;
align-items: center;
text-align: start;
justify-content: space-between;
}
@container (width >= 66rem) {
.footer .footer-content {
flex-direction: row;
}
}
.footer .footer-content > :nth-child(n) {
font-family: var(--font-default);
letter-spacing: var(--tracking-xs);
font-weight: 400;
font-style: normal;
font-size: var(--text-xs);
line-height: var(--tw-leading, var(--leading-xs));
text-wrap: nowrap;
color: var(--color-text-default);
display: flex;
flex-wrap: wrap;
align-items: baseline;
}
.footer .footer-linklist {
flex-wrap: nowrap;
justify-content: center;
}
@container (width >= 66rem) {
.footer .footer-linklist {
justify-content: flex-start;
}
}
.footer .footer-linklist > :nth-child(n) {
position: relative;
margin-right: calc(0.25rem * 4);
cursor: pointer;
text-decoration-line: none;
}
@media (hover: hover) {
.footer .footer-linklist > :nth-child(n):hover {
text-decoration-line: underline;
}
}
.footer .footer-linklist > :nth-child(n):focus {
text-decoration-line: underline;
}
.footer .footer-linklist > :nth-child(n)::after {
content: var(--tw-content);
position: absolute;
}
.footer .footer-linklist > :nth-child(n)::after {
content: var(--tw-content);
cursor: default;
}
.footer .footer-linklist > :nth-child(n)::after {
content: var(--tw-content);
padding-left: calc(0.25rem * 1.5);
}
.footer .footer-linklist > :nth-child(n)::after {
content: var(--tw-content);
font-family: var(--font-default);
letter-spacing: var(--tracking-xs);
font-weight: 400;
font-style: normal;
}
.footer .footer-linklist > :nth-child(n)::after {
content: var(--tw-content);
font-size: var(--text-xs);
line-height: var(--tw-leading, var(--leading-xs));
}
.footer .footer-linklist > :nth-child(n)::after {
content: var(--tw-content);
color: var(--color-text-default);
}
.footer .footer-linklist > :nth-child(n)::after {
--tw-content: "|";
content: var(--tw-content);
}
.footer .footer-linklist > :last-child::after {
content: var(--tw-content);
display: none;
}
.footer .footer-information > :nth-child(n) {
position: relative;
margin-right: calc(0.25rem * 3);
}
.footer .footer-information > :nth-child(n)::after {
content: var(--tw-content);
position: absolute;
}
.footer .footer-information > :nth-child(n)::after {
content: var(--tw-content);
padding-left: calc(0.25rem * 1.5);
}
.footer .footer-information > :nth-child(n)::after {
content: var(--tw-content);
font-family: var(--font-default);
letter-spacing: var(--tracking-xs);
font-weight: 400;
font-style: normal;
}
.footer .footer-information > :nth-child(n)::after {
content: var(--tw-content);
font-size: var(--text-xs);
line-height: var(--tw-leading, var(--leading-xs));
}
.footer .footer-information > :nth-child(n)::after {
content: var(--tw-content);
color: var(--color-text-default);
}
.footer .footer-information > :nth-child(n)::after {
--tw-content: "|";
content: var(--tw-content);
}
.footer .footer-information > :last-child::after {
content: var(--tw-content);
display: none;
}
.sidebar {
display: flex;
width: calc(0.25rem * 80);
flex-direction: column;
align-items: stretch;
background-color: var(--color-background-gray-ultra-ultra-light);
padding-inline: var(--spacing-lg);
padding-block: var(--spacing-2xl);
position: relative;
transition-property: all;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
--tw-duration: 300ms;
transition-duration: 300ms;
}
.sidebar .sidebar-button {
display: flex;
height: calc(0.25rem * 8);
width: calc(0.25rem * 5);
align-items: center;
justify-content: center;
border-top-right-radius: var(--radius-md);
border-bottom-right-radius: var(--radius-md);
background-color: var(--color-background-gray-ultra-ultra-light);
position: absolute;
top: calc(0.25rem * 5);
right: calc(0.25rem * -5);
cursor: pointer;
--tw-border-style: none;
border-style: none;
transition-property:
color,
background-color,
border-color,
outline-color,
text-decoration-color,
fill,
stroke,
--tw-gradient-from,
--tw-gradient-via,
--tw-gradient-to;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
--tw-outline-style: none;
outline-style: none;
}
@media (hover: hover) {
.sidebar .sidebar-button:hover {
background-color: var(--color-background-action-hover);
}
}
.sidebar .sidebar-button:focus {
background-color: var(--color-background-action-focus);
}
.sidebar .sidebar-button::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-sm);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 14;
line-height: var(--leading-icon-sm);
}
.sidebar .sidebar-button::before {
content: var(--tw-content);
color: var(--color-icon-accent);
}
.sidebar .sidebar-button::before {
--tw-content: "keyboard_double_arrow_left";
content: var(--tw-content);
}
.sidebar .sidebar-items {
margin-block: calc(0.25rem * 0);
list-style-type: none;
gap: calc(0.25rem * 0);
padding-inline-start: calc(0.25rem * 0);
}
.sidebar .sidebar-items > .sidebar-title:first-child {
margin-top: calc(0.25rem * 0);
}
.sidebar .sidebar-items .sidebar-title {
margin-top: calc(0.25rem * 8);
display: flex;
height: calc(0.25rem * 8);
width: 100%;
flex-direction: column;
align-items: flex-start;
justify-content: center;
padding-inline: var(--spacing-2xl);
overflow: hidden;
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
text-overflow: ellipsis;
white-space: nowrap;
color: var(--color-text-light);
}
.sidebar .sidebar-item {
position: relative;
width: 100%;
background-color: var(--color-background-gray-ultra-ultra-light);
--tw-outline-style: none;
outline-style: none;
}
.sidebar .sidebar-item .sidebar-item-link {
display: flex;
align-items: flex-start;
border-radius: var(--radius-md);
--tw-outline-style: none;
outline-style: none;
gap: calc(0.25rem * 1);
padding-block: calc(0.25rem * 3);
padding-right: calc(0.25rem * 12);
padding-left: calc(0.25rem * 6);
text-decoration-line: none;
transition-property:
color,
background-color,
border-color,
outline-color,
text-decoration-color,
fill,
stroke,
--tw-gradient-from,
--tw-gradient-via,
--tw-gradient-to;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
@media (hover: hover) {
.sidebar .sidebar-item .sidebar-item-link:hover {
background-color: var(--color-background-default);
}
}
.sidebar .sidebar-item .sidebar-item-link:focus {
background-color: var(--color-background-gray-light);
}
.sidebar .sidebar-item .sidebar-item-link .badge {
margin-top: calc(0.25rem * 0.5);
margin-left: calc(0.25rem * 3);
}
.sidebar .sidebar-item .sidebar-item-link .sidebar-item-link-icon {
display: flex;
width: calc(0.25rem * 6);
flex-direction: column;
align-items: center;
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 16;
line-height: var(--leading-icon-base);
--tw-leading: calc(0.25rem * 6);
line-height: calc(0.25rem * 6);
color: var(--color-icon-accent);
}
.sidebar .sidebar-item .sidebar-item-link .sidebar-item-link-text {
width: 100%;
overflow: hidden;
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 600;
font-style: normal;
font-size: var(--text-base);
line-height: var(--leading-base);
text-overflow: ellipsis;
white-space: nowrap;
color: var(--color-text-accent);
}
.sidebar .sidebar-item.sidebar-item-selected .sidebar-item-link {
background-color: var(--color-background-highlight);
}
@media (hover: hover) {
.sidebar .sidebar-item.sidebar-item-selected .sidebar-item-link:hover {
background-color: var(--color-background-highlight-hover);
}
}
.sidebar .sidebar-item.sidebar-item-selected .sidebar-item-link:focus {
background-color: var(--color-background-highlight-focus);
}
.sidebar .sidebar-item.sidebar-item-expandable .sidebar-item {
display: none;
}
.sidebar .sidebar-item.sidebar-item-expandable .sidebar-item > .sidebar-item-link {
width: 100%;
padding-left: calc(0.25rem * 10);
background-color: var(--color-background-gray-ultra-ultra-light);
}
@media (hover: hover) {
.sidebar .sidebar-item.sidebar-item-expandable .sidebar-item > .sidebar-item-link:hover {
background-color: var(--color-background-default);
}
}
.sidebar .sidebar-item.sidebar-item-expandable .sidebar-item > .sidebar-item-link:focus {
background-color: var(--color-background-gray-light);
}
.sidebar .sidebar-item.sidebar-item-expandable .sidebar-item > .sidebar-item-link .sidebar-item-link-text {
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
}
.sidebar .sidebar-item.sidebar-item-expandable .sidebar-item.sidebar-item-selected > .sidebar-item-link {
background-color: var(--color-background-highlight);
}
@media (hover: hover) {
.sidebar .sidebar-item.sidebar-item-expandable .sidebar-item.sidebar-item-selected > .sidebar-item-link:hover {
background-color: var(--color-background-highlight-hover);
}
}
.sidebar .sidebar-item.sidebar-item-expandable .sidebar-item.sidebar-item-selected > .sidebar-item-link:focus {
background-color: var(--color-background-highlight-focus);
}
.sidebar .sidebar-item.sidebar-item-expandable > .sidebar-item-link::after {
content: var(--tw-content);
position: absolute;
}
.sidebar .sidebar-item.sidebar-item-expandable > .sidebar-item-link::after {
content: var(--tw-content);
top: calc(0.25rem * 3);
}
.sidebar .sidebar-item.sidebar-item-expandable > .sidebar-item-link::after {
content: var(--tw-content);
right: calc(0.25rem * 4);
}
.sidebar .sidebar-item.sidebar-item-expandable > .sidebar-item-link::after {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-xl);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 20;
line-height: var(--leading-icon-xl);
}
.sidebar .sidebar-item.sidebar-item-expandable > .sidebar-item-link::after {
content: var(--tw-content);
--tw-leading: calc(0.25rem * 6);
line-height: calc(0.25rem * 6);
}
.sidebar .sidebar-item.sidebar-item-expandable > .sidebar-item-link::after {
content: var(--tw-content);
color: var(--color-icon-accent);
}
.sidebar .sidebar-item.sidebar-item-expandable > .sidebar-item-link::after {
--tw-content: "keyboard_arrow_down";
content: var(--tw-content);
}
.sidebar .sidebar-item.sidebar-item-expaned .sidebar-item {
display: flex;
}
.sidebar .sidebar-item.sidebar-item-expaned > .sidebar-item-link::after {
--tw-content: "keyboard_arrow_up";
content: var(--tw-content);
}
.sidebar .sidebar-item.sidebar-item-selectable .sidebar-item {
display: none;
}
.sidebar .sidebar-item.sidebar-item-selectable .sidebar-item > .sidebar-item-link {
padding-left: calc(0.25rem * 10);
background-color: var(--color-background-gray-ultra-ultra-light);
}
@media (hover: hover) {
.sidebar .sidebar-item.sidebar-item-selectable .sidebar-item > .sidebar-item-link:hover {
background-color: var(--color-background-default);
}
}
.sidebar .sidebar-item.sidebar-item-selectable .sidebar-item > .sidebar-item-link:focus {
background-color: var(--color-background-gray-light);
}
.sidebar .sidebar-item.sidebar-item-selectable .sidebar-item > .sidebar-item-link .sidebar-item-link-text {
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
}
.sidebar .sidebar-item.sidebar-item-selectable .sidebar-item.sidebar-item-selected > .sidebar-item-link {
background-color: var(--color-background-highlight);
}
@media (hover: hover) {
.sidebar .sidebar-item.sidebar-item-selectable .sidebar-item.sidebar-item-selected > .sidebar-item-link:hover {
background-color: var(--color-background-highlight-hover);
}
}
.sidebar .sidebar-item.sidebar-item-selectable .sidebar-item.sidebar-item-selected > .sidebar-item-link:focus {
background-color: var(--color-background-highlight-focus);
}
.sidebar .sidebar-item.sidebar-item-selectable > .sidebar-item-link::after {
content: var(--tw-content);
position: absolute;
}
.sidebar .sidebar-item.sidebar-item-selectable > .sidebar-item-link::after {
content: var(--tw-content);
top: calc(0.25rem * 2.5);
}
.sidebar .sidebar-item.sidebar-item-selectable > .sidebar-item-link::after {
content: var(--tw-content);
right: calc(0.25rem * 4);
}
.sidebar .sidebar-item.sidebar-item-selectable > .sidebar-item-link::after {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-xl);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 20;
line-height: var(--leading-icon-xl);
}
.sidebar .sidebar-item.sidebar-item-selectable > .sidebar-item-link::after {
content: var(--tw-content);
--tw-leading: calc(0.25rem * 6);
line-height: calc(0.25rem * 6);
}
.sidebar .sidebar-item.sidebar-item-selectable > .sidebar-item-link::after {
content: var(--tw-content);
color: var(--color-icon-accent);
}
.sidebar .sidebar-item.sidebar-item-selectable > .sidebar-item-link::after {
--tw-content: "keyboard_arrow_right";
content: var(--tw-content);
}
.sidebar.sidebar-collapsed {
width: calc(0.25rem * 2);
padding: calc(0.25rem * 0);
}
.sidebar.sidebar-collapsed .sidebar-items {
display: none;
}
.sidebar.sidebar-collapsed .sidebar-button::before {
--tw-content: "keyboard_double_arrow_right";
content: var(--tw-content);
}
.sidebar.sidebar-treeview .sidebar-title {
padding-inline: var(--spacing-lg);
}
.sidebar.sidebar-treeview .sidebar-item .sidebar-item-link {
height: auto;
align-items: flex-start;
padding-right: calc(0.25rem * 4);
padding-left: calc(0.25rem * 10);
}
.sidebar.sidebar-treeview .sidebar-item .sidebar-item-link::after {
content: var(--tw-content);
display: none;
}
.sidebar.sidebar-treeview .sidebar-item .sidebar-item-link .sidebar-item-link-text {
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
overflow: auto;
text-wrap: wrap;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.sidebar.sidebar-treeview .sidebar-item .sidebar-item.sidebar-item-disabled .sidebar-item-link {
background-color: var(--color-background-gray-ultra-ultra-light);
cursor: not-allowed;
color: var(--color-text-disabled);
}
@media (hover: hover) {
.sidebar.sidebar-treeview .sidebar-item .sidebar-item.sidebar-item-disabled .sidebar-item-link:hover {
background-color: var(--color-background-gray-ultra-ultra-light);
}
}
.sidebar.sidebar-treeview .sidebar-item .sidebar-item.sidebar-item-disabled .sidebar-item-link:focus {
background-color: var(--color-background-gray-ultra-ultra-light);
}
.sidebar.sidebar-treeview .sidebar-item .sidebar-item.sidebar-item-expandable {
flex-direction: column;
}
.sidebar.sidebar-treeview .sidebar-item .sidebar-item.sidebar-item-expandable .sidebar-items {
display: none;
}
.sidebar.sidebar-treeview .sidebar-item .sidebar-item.sidebar-item-expandable .sidebar-item > .sidebar-item-link {
padding-left: calc(0.25rem * 14);
}
.sidebar.sidebar-treeview .sidebar-item .sidebar-item.sidebar-item-expandable .sidebar-item.sidebar-item-expandable > .sidebar-item-link::before {
content: var(--tw-content);
left: calc(0.25rem * 8);
}
.sidebar.sidebar-treeview .sidebar-item .sidebar-item.sidebar-item-expandable .sidebar-item .sidebar-item > .sidebar-item-link {
padding-left: 72px;
}
.sidebar.sidebar-treeview .sidebar-item .sidebar-item.sidebar-item-expandable .sidebar-item .sidebar-item.sidebar-item-expandable > .sidebar-item-link::before {
content: var(--tw-content);
left: calc(0.25rem * 12);
}
.sidebar.sidebar-treeview .sidebar-item .sidebar-item.sidebar-item-expandable .sidebar-item .sidebar-item .sidebar-item > .sidebar-item-link {
padding-left: 88px;
}
.sidebar.sidebar-treeview .sidebar-item .sidebar-item.sidebar-item-expandable .sidebar-item .sidebar-item .sidebar-item.sidebar-item-expandable > .sidebar-item-link::before {
content: var(--tw-content);
left: calc(0.25rem * 16);
}
.sidebar.sidebar-treeview .sidebar-item .sidebar-item.sidebar-item-expandable .sidebar-item .sidebar-item .sidebar-item .sidebar-item > .sidebar-item-link {
padding-left: 104px;
}
.sidebar.sidebar-treeview .sidebar-item .sidebar-item.sidebar-item-expandable .sidebar-item .sidebar-item .sidebar-item .sidebar-item.sidebar-item-expandable > .sidebar-item-link::before {
content: var(--tw-content);
left: calc(0.25rem * 20);
}
.sidebar.sidebar-treeview .sidebar-item .sidebar-item.sidebar-item-expandable > .sidebar-item-link::before {
content: var(--tw-content);
position: absolute;
}
.sidebar.sidebar-treeview .sidebar-item .sidebar-item.sidebar-item-expandable > .sidebar-item-link::before {
content: var(--tw-content);
top: calc(0.25rem * 3);
}
.sidebar.sidebar-treeview .sidebar-item .sidebar-item.sidebar-item-expandable > .sidebar-item-link::before {
content: var(--tw-content);
left: calc(0.25rem * 4);
}
.sidebar.sidebar-treeview .sidebar-item .sidebar-item.sidebar-item-expandable > .sidebar-item-link::before {
content: var(--tw-content);
width: calc(0.25rem * 3);
}
.sidebar.sidebar-treeview .sidebar-item .sidebar-item.sidebar-item-expandable > .sidebar-item-link::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-lg);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 18;
line-height: var(--leading-icon-lg);
}
.sidebar.sidebar-treeview .sidebar-item .sidebar-item.sidebar-item-expandable > .sidebar-item-link::before {
content: var(--tw-content);
color: var(--color-icon-accent);
}
.sidebar.sidebar-treeview .sidebar-item .sidebar-item.sidebar-item-expandable > .sidebar-item-link::before {
--tw-content: "expand_more";
content: var(--tw-content);
}
.sidebar.sidebar-treeview .sidebar-item .sidebar-item.sidebar-item-expandable > .sidebar-item-link::before {
content: var(--tw-content);
margin-top: calc(0.25rem * 0.5);
}
.sidebar.sidebar-treeview .sidebar-item .sidebar-item.sidebar-item-expaned > .sidebar-items {
display: block;
}
.sidebar.sidebar-treeview .sidebar-item .sidebar-item.sidebar-item-expaned > .sidebar-item-link::before {
--tw-content: "expand_less";
content: var(--tw-content);
}
.page {
display: flex;
min-height: 614px;
min-width: 320px;
flex-direction: column;
height: 100vh;
width: 100%;
container-type: inline-size;
}
.page:has(.inbox) .page-content {
display: none;
}
@container (width >= 66rem) {
.page:has(.inbox) .page-content {
display: flex;
}
}
@container (width >= 66rem) {
.page .bottom-navigation {
display: none;
}
}
.page-wrapper {
container-type: inline-size;
display: flex;
flex-direction: column;
overflow-y: auto;
height: 100vh;
}
.page-layout {
display: flex;
flex: 1;
flex-direction: row;
}
@container (width >= 0rem) {
.page-layout {
height: fit-content;
}
}
@container (width >= 0rem) {
.page-layout {
min-height: 100vh;
}
}
@container (width >= 66rem) {
.page-layout {
height: 100%;
}
}
@container (width >= 66rem) {
.page-layout {
min-height: calc(0.25rem * 0);
}
}
.page-layout .sidebar {
display: none;
}
@container (width >= 66rem) {
.page-layout .sidebar {
display: flex;
}
}
@container (width >= 0rem) {
.page-layout .sidebar {
width: 100%;
}
}
@container (width >= 39rem) {
.page-layout .sidebar {
width: calc(0.25rem * 88);
}
}
@container (width >= 66rem) {
.page-layout .sidebar {
width: 304px;
}
}
@container (width >= 83rem) {
.page-layout .sidebar {
width: calc(0.25rem * 80);
}
}
@container (width >= 99rem) {
.page-layout .sidebar {
width: calc(0.25rem * 80);
}
}
@container (width >= 0rem) {
.page-layout .sidebar.sidebar-collapsed {
width: 100%;
}
}
@container (width >= 66rem) {
.page-layout .sidebar.sidebar-collapsed {
width: calc(0.25rem * 2);
}
}
.page-layout .inbox {
height: 100%;
}
@container (width >= 0rem) {
.page-layout .inbox {
width: 100%;
}
}
@container (width >= 39rem) {
.page-layout .inbox {
width: 100%;
}
}
@container (width >= 66rem) {
.page-layout .inbox {
width: 336px;
}
}
@container (width >= 83rem) {
.page-layout .inbox {
width: 464px;
}
}
@container (width >= 99rem) {
.page-layout .inbox {
width: 464px;
}
}
@container (width >= 0rem) {
.page-layout .inbox {
border-right-style: var(--tw-border-style);
border-right-width: 0px;
}
}
@container (width >= 66rem) {
.page-layout .inbox {
border-right-style: var(--tw-border-style);
border-right-width: 1px;
}
}
@container (width >= 66rem) {
.page-layout .inbox {
--tw-border-style: solid;
border-style: solid;
}
}
.page-layout.page-layout-split .page-content {
display: flex;
flex: 1;
justify-content: center;
overflow-x: hidden;
}
@container (width >= 0rem) {
.page-layout.page-layout-split .page-content {
padding-block: var(--spacing-2xl);
}
}
@container (width >= 39rem) {
.page-layout.page-layout-split .page-content {
padding-block: var(--spacing-4xl);
}
}
@container (width >= 66rem) {
.page-layout.page-layout-split .page-content {
padding-block: var(--spacing-4xl);
}
}
@container (width >= 83rem) {
.page-layout.page-layout-split .page-content {
padding-block: var(--spacing-4xl);
}
}
@container (width >= 99rem) {
.page-layout.page-layout-split .page-content {
padding-block: var(--spacing-4xl);
}
}
@container (width >= 0rem) {
.page-layout.page-layout-split .page-content {
padding-inline: var(--spacing-base);
}
}
@container (width >= 39rem) {
.page-layout.page-layout-split .page-content {
padding-inline: var(--spacing-4xl);
}
}
@container (width >= 66rem) {
.page-layout.page-layout-split .page-content {
padding-inline: var(--spacing-4xl);
}
}
@container (width >= 83rem) {
.page-layout.page-layout-split .page-content {
padding-inline: calc(0.25rem * 16);
}
}
@container (width >= 99rem) {
.page-layout.page-layout-split .page-content {
padding-inline: calc(0.25rem * 16);
}
}
@container (width >= 0rem) {
.page-layout.page-layout-split .page-content {
width: 100%;
}
}
@container (width >= 39rem) {
.page-layout.page-layout-split .page-content {
width: 100%;
}
}
@container (width >= 66rem) {
.page-layout.page-layout-split .page-content {
width: calc(2 / 5 * 100%);
}
}
@container (width >= 83rem) {
.page-layout.page-layout-split .page-content {
width: calc(2 / 5 * 100%);
}
}
@container (width >= 99rem) {
.page-layout.page-layout-split .page-content {
width: 37%;
}
}
.page-layout.page-layout-split .page-content-gray {
background-color: var(--color-background-default);
}
.page-layout.page-layout-split .page-content-wrapper {
height: fit-content;
min-height: 100%;
width: 100%;
max-width: 100%;
}
@container (width >= 39rem) {
.page-layout.page-layout-split .page-content-wrapper {
width: 416px;
}
}
@container (width >= 66rem) {
.page-layout.page-layout-split .page-content-wrapper {
width: 100%;
}
}
@container (width >= 0rem) {
.page-layout.page-layout-split .page-content-wrapper {
min-width: 304px;
}
}
@container (width >= 39rem) {
.page-layout.page-layout-split .page-content-wrapper {
min-width: 416px;
}
}
@container (width >= 66rem) {
.page-layout.page-layout-split .page-content-wrapper {
min-width: 336px;
}
}
@container (width >= 83rem) {
.page-layout.page-layout-split .page-content-wrapper {
min-width: 432px;
}
}
@container (width >= 99rem) {
.page-layout.page-layout-split .page-content-wrapper {
min-width: 464px;
}
}
@container (width >= 0rem) {
.page-layout.page-layout-split .page-content-wrapper {
max-width: 400px;
}
}
@container (width >= 39rem) {
.page-layout.page-layout-split .page-content-wrapper {
max-width: 416px;
}
}
@container (width >= 66rem) {
.page-layout.page-layout-split .page-content-wrapper {
max-width: 440px;
}
}
@container (width >= 83rem) {
.page-layout.page-layout-split .page-content-wrapper {
max-width: 464px;
}
}
@container (width >= 99rem) {
.page-layout.page-layout-split .page-content-wrapper {
max-width: 496px;
}
}
@container (width >= 0rem) {
.page-layout.page-layout-split .page-decoration {
display: none;
}
}
@container (width >= 66rem) {
.page-layout.page-layout-split .page-decoration {
display: flex;
}
}
@container (width >= 0rem) {
.page-layout.page-layout-split .page-decoration {
width: calc(0.25rem * 0);
}
}
@container (width >= 66rem) {
.page-layout.page-layout-split .page-decoration {
width: calc(3 / 5 * 100%);
}
}
@container (width >= 83rem) {
.page-layout.page-layout-split .page-decoration {
width: calc(3 / 5 * 100%);
}
}
@container (width >= 99rem) {
.page-layout.page-layout-split .page-decoration {
width: 63%;
}
}
.page-layout.page-layout-split .page-decoration .page-decoration-image {
width: 100%;
object-fit: cover;
}
.page-content {
display: flex;
height: auto;
flex: 1;
flex-grow: 1;
overflow-y: auto;
padding-block: var(--spacing-2xl);
justify-content: center;
background-color: var(--color-background-default);
}
@container (width >= 0rem) {
.page-content {
padding-inline: var(--spacing-base);
}
}
@container (width >= 39rem) {
.page-content {
padding-inline: var(--spacing-2xl);
}
}
.page-content .page-content-wrapper {
height: fit-content;
width: 100%;
max-width: 1680px;
}
.page-content-gray.page-content {
background-color: var(--color-background-gray-ultra-light);
}
.data-table {
width: 100%;
border-collapse: collapse;
}
.data-table > :last-child {
border-bottom-style: var(--tw-border-style);
border-bottom-width: 2px;
border-color: var(--color-border-strong);
}
.data-table .data-table-header > .data-table-row {
font-weight: 400;
line-height: var(--tw-leading, var(--leading-base));
color: var(--color-text-default);
border-style: var(--tw-border-style);
border-width: 0px;
border-bottom-width: 1px;
--tw-border-style: solid;
border-style: solid;
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 600;
font-style: normal;
font-size: var(--text-base);
line-height: var(--leading-base);
border-bottom-style: var(--tw-border-style);
border-bottom-width: 2px;
border-color: var(--color-border-strong);
}
.data-table .data-table-header > .data-table-row > :first-child {
padding-left: calc(0.25rem * 0);
}
.data-table .data-table-header > .data-table-row > :last-child {
padding-right: calc(0.25rem * 0);
}
.data-table .data-table-header > .data-table-row .data-table-row-selectable {
padding-right: var(--spacing-lg);
}
.data-table .data-table-header > .data-table-row .data-table-row-selectable .table-select-checkbox {
margin-inline: var(--spacing-lg);
}
.data-table .data-table-header > .data-table-row .data-table-row-selectable > :last-child {
padding-right: var(--spacing-lg);
}
.data-table .data-table-header.data-table-header-sticky {
position: sticky;
top: calc(0.25rem * 0);
z-index: 10;
background-color: var(--color-background-default);
}
.data-table .data-table-footer > .data-table-row {
font-weight: 400;
line-height: var(--tw-leading, var(--leading-base));
color: var(--color-text-default);
border-style: var(--tw-border-style);
border-width: 0px;
border-bottom-style: var(--tw-border-style);
border-bottom-width: 1px;
--tw-border-style: solid;
border-style: solid;
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 600;
font-style: normal;
font-size: var(--text-base);
line-height: var(--leading-base);
border-top-style: var(--tw-border-style);
border-top-width: 2px;
border-color: var(--color-border-strong);
}
.data-table .data-table-footer > .data-table-row > :first-child {
padding-left: calc(0.25rem * 0);
}
.data-table .data-table-footer > .data-table-row > :last-child {
padding-right: calc(0.25rem * 0);
}
.data-table .data-table-footer > .data-table-row .data-table-row-selectable {
padding-right: var(--spacing-lg);
}
.data-table .data-table-footer > .data-table-row .data-table-row-selectable .table-select-checkbox {
margin-inline: var(--spacing-lg);
}
.data-table .data-table-footer > .data-table-row .data-table-row-selectable > :last-child {
padding-right: var(--spacing-lg);
}
.data-table .data-table-footer.data-table-footer-sticky {
position: sticky;
bottom: calc(0.25rem * 0);
z-index: 10;
background-color: var(--color-background-default);
}
.data-table .data-table-body > .data-table-row {
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
color: var(--color-text-default);
border-style: var(--tw-border-style);
border-width: 0px;
--tw-border-style: solid;
border-style: solid;
border-bottom-style: var(--tw-border-style);
border-bottom-width: 1px;
border-color: var(--color-border-light);
}
.data-table .data-table-body > .data-table-row > :first-child {
padding-left: calc(0.25rem * 0);
}
.data-table .data-table-body > .data-table-row > :last-child {
padding-right: calc(0.25rem * 0);
}
.data-table .data-table-body > .data-table-row .data-table-row-selectable {
padding-right: var(--spacing-lg);
}
.data-table .data-table-body > .data-table-row .data-table-row-selectable .table-select-checkbox {
margin-inline: var(--spacing-lg);
}
.data-table .data-table-body > .data-table-row .data-table-row-selectable > :last-child {
padding-right: var(--spacing-lg);
}
.data-table .data-table-body > .data-table-row:has(+ .data-table-row-detail) {
border-bottom-style: var(--tw-border-style);
border-bottom-width: 0px;
}
.data-table .data-table-body > .data-table-row-selectable {
--tw-shadow: inset 2px 0 0 0 var(--tw-shadow-color, currentcolor);
box-shadow:
var(--tw-inset-shadow),
var(--tw-inset-ring-shadow),
var(--tw-ring-offset-shadow),
var(--tw-ring-shadow),
var(--tw-shadow);
--tw-shadow-color: transparent;
}
@supports (color: color-mix(in lab, red, red)) {
.data-table .data-table-body > .data-table-row-selectable {
--tw-shadow-color: color-mix( in oklab, var(--color-border-transparent) var(--tw-shadow-alpha), transparent );
}
}
.data-table .data-table-body > .data-table-row-selectable:has(*:is(.data-table-select-checkbox:checked)) {
background-color: var(--color-background-gray-light);
}
.data-table .data-table-body > .data-table-row-selectable:has(*:is(.data-table-select-checkbox:checked)) {
--tw-shadow-color: #004588;
}
@supports (color: color-mix(in lab, red, red)) {
.data-table .data-table-body > .data-table-row-selectable:has(*:is(.data-table-select-checkbox:checked)) {
--tw-shadow-color: color-mix( in oklab, var(--color-border-accent) var(--tw-shadow-alpha), transparent );
}
}
.data-table .data-table-body > .data-table-row-selectable.data-table-row-clickable {
cursor: pointer;
}
@media (hover: hover) {
.data-table .data-table-body > .data-table-row-selectable.data-table-row-clickable:hover {
background-color: var(--color-background-action-hover);
}
}
.data-table .data-table-body > .data-table-row-selectable.data-table-row-clickable:focus {
background-color: var(--color-background-action-focus);
}
.data-table .data-table-body > .data-table-row-clickable {
cursor: pointer;
}
@media (hover: hover) {
.data-table .data-table-body > .data-table-row-clickable:hover {
background-color: var(--color-background-action-hover);
}
}
.data-table .data-table-body > .data-table-row-clickable:focus {
background-color: var(--color-background-action-focus);
}
.data-table .data-table-body > .data-table-row-detail {
background-color: var(--color-background-gray-ultra-light);
}
.data-table .data-table-body > .data-table-row-detail .data-table > :last-child {
border-color: var(--color-border-transparent);
}
.data-table .data-table-body > .data-table-row-detail > .data-table-cell {
padding-inline: var(--spacing-lg);
padding-block: calc(0.25rem * 0);
}
.data-table .data-table-cell {
margin-left: auto;
padding-block: var(--spacing-lg);
padding-right: var(--spacing-base);
padding-left: calc(0.25rem * 0);
text-align: left;
}
.data-table .data-table-cell:has(.data-table-select-checkbox) {
position: relative;
min-width: calc(0.25rem * 12);
}
.data-table .data-table-cell .data-table-cell-content {
display: inline-flex;
}
.data-table .data-table-cell .data-table-sort-action-icon {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--color-icon-accent);
background-color: var(--color-background-transparent);
height: calc(0.25rem * 8);
width: calc(0.25rem * 8);
border-radius: var(--radius-md);
font-size: var(--text-icon-sm);
font-variation-settings: "FILL" 0, "opsz" 14;
line-height: var(--leading-icon-sm);
--tw-border-style: none;
border-style: none;
transition-property:
color,
background-color,
border-color,
outline-color,
text-decoration-color,
fill,
stroke,
--tw-gradient-from,
--tw-gradient-via,
--tw-gradient-to;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
height: calc(0.25rem * 6);
width: calc(0.25rem * 6);
border-radius: var(--radius-sm);
font-family: var(--font-icon);
font-size: var(--text-icon-xs);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 12;
line-height: var(--leading-icon-xs);
margin-left: var(--spacing-base);
color: var(--color-icon-transparent);
}
.data-table .data-table-cell .data-table-sort-action-icon:focus-visible {
--tw-outline-style: none;
outline-style: none;
}
.data-table .data-table-cell .data-table-sort-action-icon:disabled {
cursor: not-allowed;
}
.data-table .data-table-cell .data-table-sort-action-icon:disabled {
color: var(--color-icon-disabled-light);
}
@media (hover: hover) {
.data-table .data-table-cell .data-table-sort-action-icon:enabled:hover {
background-color: var(--color-background-action-hover);
}
}
.data-table .data-table-cell .data-table-sort-action-icon:enabled:focus {
background-color: var(--color-background-action-focus);
}
.data-table .data-table-cell .data-table-sort-action-icon:disabled {
background-color: var(--color-background-transparent);
}
@media (hover: hover) {
.data-table .data-table-cell .data-table-sort-action-icon:hover {
color: var(--color-icon-default);
}
}
.data-table .data-table-cell .data-table-sort-action-icon:focus {
color: var(--color-icon-default);
}
.data-table .data-table-cell .data-table-sort-action-icon.data-table-sort-action-icon-activated {
background-color: var(--color-background-highlight);
color: var(--color-icon-accent);
}
@media (hover: hover) {
.data-table .data-table-cell .data-table-sort-action-icon.data-table-sort-action-icon-activated:enabled:hover {
background-color: var(--color-background-highlight-hover);
}
}
.data-table .data-table-cell .data-table-sort-action-icon.data-table-sort-action-icon-activated:enabled:focus {
background-color: var(--color-background-highlight-focus);
}
.data-table .data-table-cell .data-table-sort-action-icon.data-table-sort-action-icon-activated:disabled {
background-color: var(--color-background-disabled);
}
.data-table .data-table-cell .data-table-sort-action-icon.data-table-sort-action-icon-activated:disabled {
color: var(--color-icon-disabled);
}
.data-table .data-table-cell .data-table-select-checkbox {
position: relative;
cursor: pointer;
margin-right: calc(0.25rem * 7);
margin-left: calc(0.25rem * 0);
appearance: none;
position: absolute;
top: calc(1 / 2 * 100%);
margin-inline: var(--spacing-lg);
}
.data-table .data-table-cell .data-table-select-checkbox::before {
content: var(--tw-content);
margin-top: calc(0.25rem * -0);
}
.data-table .data-table-cell .data-table-select-checkbox::before {
content: var(--tw-content);
display: flex;
}
.data-table .data-table-cell .data-table-select-checkbox::before {
content: var(--tw-content);
flex-direction: column;
}
.data-table .data-table-cell .data-table-select-checkbox::before {
content: var(--tw-content);
justify-content: center;
}
.data-table .data-table-cell .data-table-select-checkbox::before {
content: var(--tw-content);
text-align: center;
}
.data-table .data-table-cell .data-table-select-checkbox::before {
content: var(--tw-content);
border-style: var(--tw-border-style);
border-width: 1px;
}
.data-table .data-table-cell .data-table-select-checkbox::before {
content: var(--tw-content);
--tw-border-style: solid;
border-style: solid;
}
.data-table .data-table-cell .data-table-select-checkbox:focus-visible {
--tw-outline-style: none;
outline-style: none;
}
.data-table .data-table-cell .data-table-select-checkbox::before {
content: var(--tw-content);
position: absolute;
}
.data-table .data-table-cell .data-table-select-checkbox::before {
content: var(--tw-content);
top: calc(0.25rem * -2);
}
.data-table .data-table-cell .data-table-select-checkbox::before {
content: var(--tw-content);
height: calc(0.25rem * 4);
}
.data-table .data-table-cell .data-table-select-checkbox::before {
content: var(--tw-content);
width: calc(0.25rem * 4);
}
.data-table .data-table-cell .data-table-select-checkbox::before {
content: var(--tw-content);
border-color: var(--color-border-default);
}
.data-table .data-table-cell .data-table-select-checkbox:focus::before {
content: var(--tw-content);
border-color: var(--color-border-accent);
}
.data-table .data-table-cell .data-table-select-checkbox:disabled::before {
content: var(--tw-content);
border-color: var(--color-border-disabled);
}
.data-table .data-table-cell .data-table-select-checkbox:checked::before {
content: var(--tw-content);
border-color: var(--color-border-transparent);
}
.data-table .data-table-cell .data-table-select-checkbox:checked:focus::before {
content: var(--tw-content);
border-color: var(--color-border-transparent);
}
.data-table .data-table-cell .data-table-select-checkbox:checked:disabled::before {
content: var(--tw-content);
border-color: var(--color-border-transparent);
}
.data-table .data-table-cell .data-table-select-checkbox::before {
content: var(--tw-content);
color: var(--color-icon-transparent);
}
.data-table .data-table-cell .data-table-select-checkbox:checked::before {
content: var(--tw-content);
color: var(--color-icon-inverted);
}
.data-table .data-table-cell .data-table-select-checkbox:disabled:checked::before {
content: var(--tw-content);
color: var(--color-icon-disabled);
}
.data-table .data-table-cell .data-table-select-checkbox::before {
content: var(--tw-content);
align-items: center;
}
.data-table .data-table-cell .data-table-select-checkbox::before {
content: var(--tw-content);
text-align: center;
}
.data-table .data-table-cell .data-table-select-checkbox::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 16;
line-height: var(--leading-icon-base);
}
.data-table .data-table-cell .data-table-select-checkbox::before {
--tw-content: "\e876";
content: var(--tw-content);
}
.data-table .data-table-cell .data-table-select-checkbox::before {
content: var(--tw-content);
background-color: var(--color-background-gray-ultra-light);
}
.data-table .data-table-cell .data-table-select-checkbox:disabled::before {
content: var(--tw-content);
background-color: var(--color-background-default);
}
.data-table .data-table-cell .data-table-select-checkbox:checked::before {
content: var(--tw-content);
background-color: var(--color-background-accent);
}
.data-table .data-table-cell .data-table-select-checkbox:checked:focus::before {
content: var(--tw-content);
background-color: var(--color-background-accent-focus);
}
.data-table .data-table-cell .data-table-select-checkbox:checked:disabled::before {
content: var(--tw-content);
background-color: var(--color-background-disabled);
}
.data-table .data-table-cell .data-table-select-checkbox:disabled {
cursor: not-allowed;
}
.data-table .data-table-cell .data-table-select-checkbox.data-table-select-checkbox-inderminate::before {
content: var(--tw-content);
display: flex;
}
.data-table .data-table-cell .data-table-select-checkbox.data-table-select-checkbox-inderminate::before {
content: var(--tw-content);
border-color: var(--color-border-transparent);
}
.data-table .data-table-cell .data-table-select-checkbox.data-table-select-checkbox-inderminate:focus::before {
content: var(--tw-content);
border-color: var(--color-border-transparent);
}
.data-table .data-table-cell .data-table-select-checkbox.data-table-select-checkbox-inderminate:disabled::before {
content: var(--tw-content);
border-color: var(--color-border-transparent);
}
.data-table .data-table-cell .data-table-select-checkbox.data-table-select-checkbox-inderminate::before {
content: var(--tw-content);
color: var(--color-icon-inverted);
}
.data-table .data-table-cell .data-table-select-checkbox.data-table-select-checkbox-inderminate:disabled::before {
content: var(--tw-content);
color: var(--color-icon-disabled);
}
.data-table .data-table-cell .data-table-select-checkbox.data-table-select-checkbox-inderminate::before {
content: var(--tw-content);
position: absolute;
}
.data-table .data-table-cell .data-table-select-checkbox.data-table-select-checkbox-inderminate::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-xs);
font-weight: 600;
font-variation-settings: "FILL" 1, "opsz" 12;
line-height: var(--leading-icon-xs);
}
.data-table .data-table-cell .data-table-select-checkbox.data-table-select-checkbox-inderminate::before {
content: var(--tw-content);
font-size: 0.5rem;
}
.data-table .data-table-cell .data-table-select-checkbox.data-table-select-checkbox-inderminate::before {
--tw-content: "square";
content: var(--tw-content);
}
.data-table .data-table-cell .data-table-select-checkbox.data-table-select-checkbox-inderminate::before {
content: var(--tw-content);
background-color: var(--color-background-accent);
}
.data-table .data-table-cell .data-table-select-checkbox.data-table-select-checkbox-inderminate:focus::before {
content: var(--tw-content);
background-color: var(--color-background-accent-focus);
}
.data-table .data-table-cell .data-table-select-checkbox.data-table-select-checkbox-inderminate:disabled::before {
content: var(--tw-content);
background-color: var(--color-background-disabled);
}
.data-table .data-table-cell.data-table-cell-revert {
text-align: right;
}
.data-table .data-table-cell.data-table-cell-revert .data-table-sort-action-icon {
margin-right: var(--spacing-base);
margin-left: calc(0.25rem * 0);
}
.data-table .data-table-cell.data-table-cell-narrow {
padding-block: var(--spacing-base);
}
.data-table:has(.data-table-header-sticky, .data-table-footer-sticky) {
border-collapse: separate;
--tw-border-spacing-x: calc(0.25rem * 0);
--tw-border-spacing-y: calc(0.25rem * 0);
border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
}
.data-table:has(.data-table-header-sticky, .data-table-footer-sticky) .data-table-body > .data-table-row > .data-table-cell {
border-style: var(--tw-border-style);
border-width: 0px;
border-bottom-style: var(--tw-border-style);
border-bottom-width: 1px;
--tw-border-style: solid;
border-style: solid;
border-color: var(--color-border-light);
}
.data-table:has(.data-table-header-sticky, .data-table-footer-sticky) .data-table-header > .data-table-row > .data-table-cell {
border-style: var(--tw-border-style);
border-width: 0px;
border-bottom-style: var(--tw-border-style);
border-bottom-width: 2px;
border-color: var(--color-border-strong);
}
.data-table:has(.data-table-header-sticky, .data-table-footer-sticky) .data-table-footer > .data-table-row > .data-table-cell {
border-style: var(--tw-border-style);
border-width: 0px;
border-block-style: var(--tw-border-style);
border-block-width: 2px;
--tw-border-style: solid;
border-style: solid;
border-color: var(--color-border-strong);
}
.data-table:has(.data-table-header-sticky):not(:has(.data-table-footer)) .data-table-body > :last-child .data-table-cell {
border-bottom-style: var(--tw-border-style);
border-bottom-width: 2px;
--tw-border-style: solid;
border-style: solid;
border-color: var(--color-border-strong);
}
.inbox {
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: center;
align-self: stretch;
width: 464px;
min-width: calc(0.25rem * 80);
padding: var(--spacing-2xl);
gap: var(--spacing-lg);
border-style: var(--tw-border-style);
border-width: 0px;
border-right-style: var(--tw-border-style);
border-right-width: 1px;
--tw-border-style: solid;
border-style: solid;
border-color: var(--color-border-light);
}
.inbox .inbox-bar {
display: flex;
flex-direction: row;
align-items: center;
gap: var(--spacing-base);
align-self: stretch;
}
.inbox .inbox-bar > :first-child {
flex: 1;
}
.inbox .inbox-entries {
flex: 1;
align-self: stretch;
overflow-y: auto;
}
.inbox .inbox-entries > :nth-child(n):not(.inbox-entry-group) {
border-style: var(--tw-border-style);
border-width: 0px;
border-top-style: var(--tw-border-style);
border-top-width: 1px;
--tw-border-style: solid;
border-style: solid;
border-color: var(--color-border-light);
}
.inbox .inbox-entries > .inbox-entry-group:not(:first-child) {
margin-top: calc(0.25rem * 8);
}
.inbox .inbox-entries .inbox-entry {
background-color: var(--color-background-action);
display: flex;
width: 100%;
cursor: pointer;
position: relative;
--tw-border-style: none;
border-style: none;
transition-property:
color,
background-color,
border-color,
outline-color,
text-decoration-color,
fill,
stroke,
--tw-gradient-from,
--tw-gradient-via,
--tw-gradient-to;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
--tw-outline-style: none;
outline-style: none;
}
@media (hover: hover) {
.inbox .inbox-entries .inbox-entry:enabled:hover {
background-color: var(--color-background-action-hover);
}
}
.inbox .inbox-entries .inbox-entry:enabled:focus {
background-color: var(--color-background-action-focus);
}
.inbox .inbox-entries .inbox-entry.inbox-entry-selected {
--tw-shadow: inset 2px 0 0 0 var(--tw-shadow-color, currentcolor);
box-shadow:
var(--tw-inset-shadow),
var(--tw-inset-ring-shadow),
var(--tw-ring-offset-shadow),
var(--tw-ring-shadow),
var(--tw-shadow);
--tw-shadow-color: #004588;
background-color: var(--color-background-gray-ultra-ultra-light);
}
@supports (color: color-mix(in lab, red, red)) {
.inbox .inbox-entries .inbox-entry.inbox-entry-selected {
--tw-shadow-color: color-mix(in oklab, var(--color-border-accent) var(--tw-shadow-alpha), transparent);
}
}
.inbox .inbox-entries .inbox-entry.inbox-entry-registration {
display: flex;
width: 100%;
flex-direction: row;
align-items: center;
gap: var(--spacing-base);
padding: var(--spacing-lg);
}
.inbox .inbox-entries .inbox-entry.inbox-entry-registration > :first-child {
flex: 1;
overflow: hidden;
}
.inbox .inbox-entries .inbox-entry.inbox-entry-registration > :last-child {
width: fit-content;
align-items: flex-end;
}
.inbox .inbox-entries .inbox-entry.inbox-entry-registration .inbox-entry-registration-section {
display: flex;
flex-direction: column;
}
.inbox .inbox-entries .inbox-entry.inbox-entry-registration .inbox-entry-registration-requestor {
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
color: var(--color-text-default);
overflow: hidden;
text-align: left;
text-overflow: ellipsis;
white-space: nowrap;
}
.inbox .inbox-entries .inbox-entry.inbox-entry-registration .inbox-entry-registration-editor {
display: flex;
flex-direction: row;
align-items: center;
gap: var(--spacing-base);
}
.inbox .inbox-entries .inbox-entry.inbox-entry-registration .inbox-entry-registration-editor .inbox-entry-registration-editor-name {
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
color: var(--color-text-light);
overflow: hidden;
text-align: left;
text-overflow: ellipsis;
white-space: nowrap;
}
.inbox .inbox-entries .inbox-entry.inbox-entry-registration .inbox-entry-registration-timestamp {
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
color: var(--color-text-light);
overflow: hidden;
text-align: left;
text-overflow: ellipsis;
white-space: nowrap;
}
.inbox .inbox-entries .inbox-entry.inbox-entry-registration.inbox-entry-registration-unread > .inbox-entry-registration-section > .inbox-entry-registration-requestor {
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 600;
font-style: normal;
font-size: var(--text-base);
line-height: var(--leading-base);
}
.inbox .inbox-entries .inbox-entry.inbox-entry-group {
padding-inline: var(--spacing-lg);
padding-block: var(--spacing-base);
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
color: var(--color-text-light);
overflow: hidden;
text-align: left;
text-overflow: ellipsis;
white-space: nowrap;
}
.inbox .inbox-entries .inbox-entry.inbox-entry-group::after {
content: var(--tw-content);
position: absolute;
}
.inbox .inbox-entries .inbox-entry.inbox-entry-group::after {
content: var(--tw-content);
right: var(--spacing-lg);
}
.inbox .inbox-entries .inbox-entry.inbox-entry-group::after {
content: var(--tw-content);
float: right;
}
.inbox .inbox-entries .inbox-entry.inbox-entry-group::after {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-xl);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 20;
line-height: var(--leading-icon-xl);
}
.inbox .inbox-entries .inbox-entry.inbox-entry-group::after {
content: var(--tw-content);
color: var(--color-icon-default);
}
.inbox .inbox-entries .inbox-entry.inbox-entry-group::after {
--tw-content: "\e5cf";
content: var(--tw-content);
}
.inbox .inbox-entries .inbox-entry.inbox-entry-group.inbox-entry-group-activated::after {
--tw-content: "\e5ce";
content: var(--tw-content);
}
.inbox .inbox-empty {
display: flex;
width: 100%;
align-items: center;
justify-content: center;
padding: calc(0.25rem * 8);
padding-top: calc(0.25rem * 20);
}
.inbox .inbox-empty .inbox-empty-label {
position: relative;
width: 100%;
text-align: center;
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
color: var(--color-text-placeholder);
}
.inbox .inbox-empty .inbox-empty-label::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-2xl);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 24;
line-height: var(--leading-icon-2xl);
}
.inbox .inbox-empty .inbox-empty-label::before {
content: var(--tw-content);
color: var(--color-icon-disabled);
}
.inbox .inbox-empty .inbox-empty-label::before {
--tw-content: "\e156";
content: var(--tw-content);
}
.inbox .inbox-empty .inbox-empty-label::before {
content: var(--tw-content);
position: absolute;
}
.inbox .inbox-empty .inbox-empty-label::before {
content: var(--tw-content);
top: calc(0.25rem * -9);
}
.inbox .inbox-empty .inbox-empty-label::before {
content: var(--tw-content);
right: calc(1 / 2 * 100%);
}
.inbox .inbox-empty .inbox-empty-label::before {
content: var(--tw-content);
width: calc(0.25rem * 3);
}
.toolbar {
height: fit-content;
width: fit-content;
padding-inline: var(--spacing-sm);
padding-block: var(--spacing-base);
--tw-shadow: 0px 4px 8px 0px var(--tw-shadow-color, rgba(0, 0, 0, 0.1));
box-shadow:
var(--tw-inset-shadow),
var(--tw-inset-ring-shadow),
var(--tw-ring-offset-shadow),
var(--tw-ring-shadow),
var(--tw-shadow);
position: relative;
background-color: var(--color-background-default);
overflow: hidden;
}
.toolbar .toolbar-items {
display: inline-flex;
flex-direction: column;
margin-block: calc(0.25rem * 0);
gap: var(--spacing-sm);
padding-inline-start: calc(0.25rem * 0);
}
.toolbar .toolbar-items .toolbar-items-seperator {
width: 100%;
border-bottom-style: var(--tw-border-style);
border-bottom-width: 1px;
--tw-border-style: solid;
border-style: solid;
border-color: var(--color-border-light);
}
.toolbar .toolbar-gradient {
pointer-events: none;
position: absolute;
top: calc(0.25rem * 0);
left: calc(0.25rem * 0);
height: 100%;
width: 100%;
background:
linear-gradient(
90deg,
rgba(255, 255, 255, 1) 0px,
rgba(255, 255, 255, 0) 48px,
rgba(255, 255, 255, 0) calc(100% - 48px),
rgba(255, 255, 255, 1) 100%);
}
.toolbar .toolbar-gradient.toolbar-gradient-left {
background:
linear-gradient(
90deg,
rgba(255, 255, 255, 1) 0px,
rgba(255, 255, 255, 0) 48px);
}
.toolbar .toolbar-gradient.toolbar-gradient-right {
background:
linear-gradient(
90deg,
rgba(255, 255, 255, 0) calc(100% - 48px),
rgba(255, 255, 255, 1) 100%);
}
.toolbar.toolbar-horizontal {
padding-inline: var(--spacing-base);
padding-block: var(--spacing-sm);
}
.toolbar.toolbar-horizontal .toolbar-items {
flex-direction: row;
}
.toolbar.toolbar-horizontal .toolbar-items .toolbar-items-seperator {
height: auto;
width: calc(0.25rem * 0);
}
.filter-panel {
display: flex;
flex-direction: column;
gap: var(--spacing-lg);
}
.filter-panel .filter-panel-section {
display: flex;
flex-direction: column;
padding-top: var(--spacing-lg);
gap: var(--spacing-lg);
}
.filter-panel .filter-panel-section .filter-panel-title {
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 600;
font-style: normal;
font-size: var(--text-base);
line-height: var(--leading-base);
color: var(--color-text-default);
}
.filter-panel .filter-panel-section .filter-panel-title + * {
margin-top: calc(var(--spacing-base) * -1);
}
.filter-panel .slider-container {
padding-bottom: var(--spacing-base);
}
.filter-panel .filter-panel-range-container {
display: flex;
flex-direction: column;
}
.filter-panel .filter-panel-range-container:has(.filter-panel-range-description) .filter-panel-range-inputs {
margin-top: var(--spacing-sm);
}
.filter-panel .filter-panel-range-container:has(.filter-panel-range-label) .filter-panel-range-inputs {
margin-top: var(--spacing-sm);
}
.filter-panel .filter-panel-range-container:has(.filter-panel-range-label) .filter-panel-range-description {
margin-top: calc(var(--spacing-sm) * -1);
}
.filter-panel .filter-panel-range-label {
overflow: hidden;
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
text-overflow: ellipsis;
white-space: nowrap;
color: var(--color-text-default);
}
.filter-panel .filter-panel-range-description {
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
overflow-wrap: break-word;
color: var(--color-text-ultra-light);
}
.filter-panel .filter-panel-range-inputs {
display: flex;
align-items: flex-end;
gap: var(--spacing-xl);
}
.filter-panel .filter-panel-range-inputs > :nth-child(n):not(:last-child)::after {
content: var(--tw-content);
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
}
.filter-panel .filter-panel-range-inputs > :nth-child(n):not(:last-child)::after {
content: var(--tw-content);
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
}
.filter-panel .filter-panel-range-inputs > :nth-child(n):not(:last-child)::after {
content: var(--tw-content);
color: var(--color-text-default);
}
.filter-panel .filter-panel-range-inputs > :nth-child(n):not(:last-child)::after {
--tw-content: "-";
content: var(--tw-content);
}
.filter-panel .filter-panel-range-inputs > :nth-child(n):not(:last-child)::after {
content: var(--tw-content);
position: absolute;
}
.filter-panel .filter-panel-range-inputs > :nth-child(n):not(:last-child)::after {
content: var(--tw-content);
right: calc(0.25rem * -3.5);
}
.filter-panel .filter-panel-range-inputs > :nth-child(n):not(:last-child)::after {
content: var(--tw-content);
bottom: calc(0.25rem * 2);
}
.filter-bar-container {
display: flex;
flex-direction: column;
gap: var(--spacing-lg);
}
.filter-bar-container:has(.filter-bar-filter) {
border-bottom-style: var(--tw-border-style);
border-bottom-width: 1px;
border-color: var(--color-border-light);
padding-block: var(--spacing-md);
}
.filter-bar-container:has(.filter-bar-filter) .filter-bar {
flex-wrap: wrap;
gap: var(--spacing-base);
}
.filter-bar-container .filter-bar {
display: flex;
flex-direction: row;
align-items: center;
gap: var(--spacing-lg);
}
.filter-bar-container .filter-bar .search-field-container {
width: 100%;
}
.filter-bar-container .filter-bar .filter-bar-range-inputs {
display: flex;
align-items: flex-end;
gap: var(--spacing-xl);
}
.filter-bar-container .filter-bar .filter-bar-range-inputs > :nth-child(n) {
width: fit-content;
}
.filter-bar-container .filter-bar .filter-bar-range-inputs > :nth-child(n):not(:last-child)::after {
content: var(--tw-content);
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
}
.filter-bar-container .filter-bar .filter-bar-range-inputs > :nth-child(n):not(:last-child)::after {
content: var(--tw-content);
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
}
.filter-bar-container .filter-bar .filter-bar-range-inputs > :nth-child(n):not(:last-child)::after {
content: var(--tw-content);
color: var(--color-text-default);
}
.filter-bar-container .filter-bar .filter-bar-range-inputs > :nth-child(n):not(:last-child)::after {
--tw-content: "-";
content: var(--tw-content);
}
.filter-bar-container .filter-bar .filter-bar-range-inputs > :nth-child(n):not(:last-child)::after {
content: var(--tw-content);
position: absolute;
}
.filter-bar-container .filter-bar .filter-bar-range-inputs > :nth-child(n):not(:last-child)::after {
content: var(--tw-content);
right: calc(0.25rem * -3.5);
}
.filter-bar-container .filter-bar .filter-bar-range-inputs > :nth-child(n):not(:last-child)::after {
content: var(--tw-content);
bottom: calc(0.25rem * 2);
}
.filter-bar-container .filter-bar .filter-bar-range-inputs .date-input-wrapper {
min-width: calc(0.25rem * 32);
}
.filter-bar-container .filter-bar .filter-bar-filter {
margin-right: calc(0.25rem * 5);
display: inline-block;
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
color: var(--color-text-accent);
position: relative;
text-decoration-line: none;
transition-property:
color,
background-color,
border-color,
outline-color,
text-decoration-color,
fill,
stroke,
--tw-gradient-from,
--tw-gradient-via,
--tw-gradient-to;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
--tw-outline-style: none;
outline-style: none;
--tw-border-style: none;
border-style: none;
background-color: var(--color-background-transparent);
padding-inline: var(--spacing-base);
padding-block: calc(0.25rem * 0);
text-wrap: nowrap;
}
.filter-bar-container .filter-bar .filter-bar-filter::after {
content: var(--tw-content);
position: absolute;
}
.filter-bar-container .filter-bar .filter-bar-filter::after {
content: var(--tw-content);
padding-left: var(--spacing-sm);
}
.filter-bar-container .filter-bar .filter-bar-filter::after {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 16;
line-height: var(--leading-icon-base);
}
.filter-bar-container .filter-bar .filter-bar-filter::after {
content: var(--tw-content);
--tw-leading: calc(0.25rem * 6);
line-height: calc(0.25rem * 6);
}
.filter-bar-container .filter-bar .filter-bar-filter::after {
content: var(--tw-content);
color: var(--color-icon-accent);
}
.filter-bar-container .filter-bar .filter-bar-filter:visited {
color: var(--color-text-accent);
}
@media (hover: hover) {
.filter-bar-container .filter-bar .filter-bar-filter:hover {
text-decoration-line: underline;
}
}
.filter-bar-container .filter-bar .filter-bar-filter:focus {
text-decoration-line: underline;
}
.filter-bar-container .filter-bar .filter-bar-filter::after {
--tw-content: "keyboard_arrow_down";
content: var(--tw-content);
}
.filter-bar-container .filter-bar.filter-bar-padded {
padding-left: var(--spacing-lg);
}
.filter-bar-container .filter-bar-list {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: var(--spacing-base);
}
.filter-bar-container .filter-bar-reset-button {
margin-left: calc(0.25rem * 5);
display: inline-block;
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
color: var(--color-text-accent);
position: relative;
text-decoration-line: none;
transition-property:
color,
background-color,
border-color,
outline-color,
text-decoration-color,
fill,
stroke,
--tw-gradient-from,
--tw-gradient-via,
--tw-gradient-to;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
--tw-outline-style: none;
outline-style: none;
--tw-border-style: none;
border-style: none;
background-color: var(--color-background-transparent);
padding: calc(0.25rem * 0);
text-wrap: nowrap;
}
.filter-bar-container .filter-bar-reset-button::before {
content: var(--tw-content);
position: absolute;
}
.filter-bar-container .filter-bar-reset-button::before {
content: var(--tw-content);
left: calc(0.25rem * -5);
}
.filter-bar-container .filter-bar-reset-button::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 16;
line-height: var(--leading-icon-base);
}
.filter-bar-container .filter-bar-reset-button::before {
content: var(--tw-content);
--tw-leading: calc(0.25rem * 6);
line-height: calc(0.25rem * 6);
}
.filter-bar-container .filter-bar-reset-button::before {
content: var(--tw-content);
color: var(--color-icon-accent);
}
.filter-bar-container .filter-bar-reset-button:visited {
color: var(--color-text-accent);
}
@media (hover: hover) {
.filter-bar-container .filter-bar-reset-button:hover {
text-decoration-line: underline;
}
}
.filter-bar-container .filter-bar-reset-button:focus {
text-decoration-line: underline;
}
.filter-bar-container .filter-bar-reset-button::before {
--tw-content: "replay";
content: var(--tw-content);
}
.bulk-action {
display: flex;
flex-direction: row;
align-items: center;
width: fit-content;
gap: var(--spacing-3xl);
border-radius: var(--radius-lg);
padding-block: var(--spacing-sm);
padding-right: var(--spacing-sm);
padding-left: var(--spacing-2xl);
background-color: var(--color-background-accent);
}
.bulk-action .bulk-action-counter {
display: flex;
gap: var(--spacing-sm);
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
color: var(--color-text-inverted);
}
.bulk-action .bulk-action-counter .bulk-action-counter-highlight {
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 600;
font-style: normal;
font-size: var(--text-base);
line-height: var(--leading-base);
}
.bulk-action .bulk-action-actions {
display: flex;
gap: var(--spacing-base);
}
.content-header {
display: flex;
flex-direction: row;
gap: var(--spacing-lg);
overflow-y: hidden;
}
.content-header .content-header-info {
display: block;
overflow-x: hidden;
overflow-y: clip;
overflow-wrap: break-word;
}
.content-header .content-header-info:has(.content-header-context) .content-header-headline {
padding-right: calc(0.25rem * 1.5);
}
.content-header .content-header-headline {
font-family: var(--font-default);
letter-spacing: var(--tracking-4xl);
font-weight: 600;
font-style: normal;
font-size: var(--text-4xl);
line-height: var(--tw-leading, var(--leading-4xl));
text-wrap: wrap;
overflow-wrap: break-word;
color: var(--color-text-default);
}
.content-header .content-header-context {
font-family: var(--font-default);
letter-spacing: var(--tracking-4xl);
font-weight: 400;
font-style: normal;
font-size: var(--text-4xl);
line-height: var(--leading-4xl);
color: var(--color-text-default);
}
.content-header .content-header-subline {
margin-top: var(--spacing-sm);
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: baseline;
gap: var(--spacing-base);
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
color: var(--color-text-light);
}
.content-header .content-header-actions {
display: flex;
flex: 1;
flex-direction: row;
justify-content: flex-end;
gap: var(--spacing-base);
}
.content-header-wrapper {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
gap: var(--spacing-sm);
}
.content-header-wrapper .content-header-navigation {
margin-left: calc(0.25rem * 5);
display: inline-block;
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
color: var(--color-text-accent);
position: relative;
text-decoration-line: none;
transition-property:
color,
background-color,
border-color,
outline-color,
text-decoration-color,
fill,
stroke,
--tw-gradient-from,
--tw-gradient-via,
--tw-gradient-to;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
--tw-outline-style: none;
outline-style: none;
}
.content-header-wrapper .content-header-navigation::before {
content: var(--tw-content);
position: absolute;
}
.content-header-wrapper .content-header-navigation::before {
content: var(--tw-content);
left: calc(0.25rem * -5);
}
.content-header-wrapper .content-header-navigation::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 16;
line-height: var(--leading-icon-base);
}
.content-header-wrapper .content-header-navigation::before {
content: var(--tw-content);
--tw-leading: calc(0.25rem * 6);
line-height: calc(0.25rem * 6);
}
.content-header-wrapper .content-header-navigation::before {
content: var(--tw-content);
color: var(--color-icon-accent);
}
.content-header-wrapper .content-header-navigation:visited {
color: var(--color-text-accent);
}
@media (hover: hover) {
.content-header-wrapper .content-header-navigation:hover {
text-decoration-line: underline;
}
}
.content-header-wrapper .content-header-navigation:focus {
text-decoration-line: underline;
}
.content-header-wrapper .content-header-navigation::before {
--tw-content: "arrow_back";
content: var(--tw-content);
}
.meta-header {
display: flex;
flex-direction: column;
overflow: hidden;
border-radius: var(--radius-sm);
border-style: var(--tw-border-style);
border-width: 1px;
--tw-border-style: solid;
border-style: solid;
border-color: var(--color-border-ultra-light);
}
.meta-header.card {
width: 100%;
align-items: stretch;
padding: calc(0.25rem * 0);
}
.meta-header .meta-header-header {
position: relative;
margin-block: calc(0.25rem * 0);
display: flex;
height: calc(0.25rem * 28);
overflow: hidden;
--tw-border-style: none;
border-style: none;
padding: calc(0.25rem * 0);
}
.meta-header .meta-header-header > :nth-child(n) {
aspect-ratio: 1 / 1;
flex: 1;
object-fit: cover;
}
.meta-header .meta-header-header.meta-header-header-editable {
--tw-outline-style: none;
outline-style: none;
}
.meta-header .meta-header-header.meta-header-header-editable::before {
content: var(--tw-content);
position: absolute;
}
.meta-header .meta-header-header.meta-header-header-editable::before {
content: var(--tw-content);
top: calc(0.25rem * 0);
}
.meta-header .meta-header-header.meta-header-header-editable::before {
content: var(--tw-content);
right: calc(0.25rem * 0);
}
.meta-header .meta-header-header.meta-header-header-editable::before {
content: var(--tw-content);
bottom: calc(0.25rem * 0);
}
.meta-header .meta-header-header.meta-header-header-editable::before {
content: var(--tw-content);
left: calc(0.25rem * 0);
}
.meta-header .meta-header-header.meta-header-header-editable::before {
content: var(--tw-content);
opacity: 0%;
}
.meta-header .meta-header-header.meta-header-header-editable::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 16;
line-height: var(--leading-icon-base);
}
.meta-header .meta-header-header.meta-header-header-editable::before {
content: var(--tw-content);
color: var(--color-icon-inverted);
}
.meta-header .meta-header-header.meta-header-header-editable::before {
--tw-content: "edit";
content: var(--tw-content);
}
@media (hover: hover) {
.meta-header .meta-header-header.meta-header-header-editable:hover::before {
content: var(--tw-content);
opacity: 100%;
}
}
@media (hover: hover) {
.meta-header .meta-header-header.meta-header-header-editable:hover::before {
content: var(--tw-content);
transition-property: all;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
}
.meta-header .meta-header-header.meta-header-header-editable::before {
content: var(--tw-content);
display: flex;
}
.meta-header .meta-header-header.meta-header-header-editable::before {
content: var(--tw-content);
align-items: center;
}
.meta-header .meta-header-header.meta-header-header-editable::before {
content: var(--tw-content);
justify-content: center;
}
.meta-header .meta-header-header.meta-header-header-editable:before {
background-color: rgba(34, 39, 44, 0.6);
}
.meta-header .meta-header-body {
margin-top: calc(0.25rem * -4);
display: flex;
flex-direction: row;
align-items: stretch;
gap: var(--spacing-lg);
padding-inline: var(--spacing-lg);
padding-bottom: calc(0.25rem * 6);
}
.meta-header .meta-header-body .meta-header-body-content {
margin-top: calc(0.25rem * 8);
display: flex;
flex: 1;
flex-direction: column;
gap: var(--spacing-lg);
align-self: stretch;
overflow-x: hidden;
}
.meta-header .meta-header-body .meta-header-body-content .meta-header-body-content-section {
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
color: var(--color-text-light);
}
.meta-header .meta-header-body .meta-header-body-content .meta-header-body-content-section .link {
width: fit-content;
}
.meta-header .meta-header-body .meta-header-body-content .meta-header-body-content-section .meta-header-body-content-section-headline {
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 600;
font-style: normal;
font-size: var(--text-base);
line-height: var(--leading-base);
color: var(--color-text-default);
}
.meta-header .meta-header-body .meta-header-body-content .meta-header-body-content-section .meta-header-body-content-section-icon {
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 16;
line-height: var(--leading-icon-base);
color: var(--color-icon-default);
}
.meta-header .meta-header-body .meta-header-body-content .meta-header-body-content-section .meta-header-body-content-section-line {
display: flex;
flex-direction: row;
gap: var(--spacing-sm);
}
.carousel-container {
position: relative;
height: fit-content;
width: 100%;
}
.carousel-container .carousel-button-right {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--color-icon-accent);
background-color: var(--color-background-transparent);
height: calc(0.25rem * 8);
width: calc(0.25rem * 8);
border-radius: var(--radius-md);
font-family: var(--font-icon);
font-size: var(--text-icon-sm);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 14;
line-height: var(--leading-icon-sm);
--tw-border-style: none;
border-style: none;
transition-property:
color,
background-color,
border-color,
outline-color,
text-decoration-color,
fill,
stroke,
--tw-gradient-from,
--tw-gradient-via,
--tw-gradient-to;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
--tw-shadow: 0px 8px 16px 0px var(--tw-shadow-color, rgba(0, 0, 0, 0.1));
box-shadow:
var(--tw-inset-shadow),
var(--tw-inset-ring-shadow),
var(--tw-ring-offset-shadow),
var(--tw-ring-shadow),
var(--tw-shadow);
position: absolute;
top: calc(50% - 8px);
right: calc(0.25rem * 3);
border-radius: calc(infinity * 1px);
background-color: var(--color-background-default);
}
.carousel-container .carousel-button-right:focus-visible {
--tw-outline-style: none;
outline-style: none;
}
.carousel-container .carousel-button-right:disabled {
cursor: not-allowed;
}
.carousel-container .carousel-button-right:disabled {
color: var(--color-icon-disabled-light);
}
@media (hover: hover) {
.carousel-container .carousel-button-right:enabled:hover {
background-color: var(--color-background-action-hover);
}
}
.carousel-container .carousel-button-right:enabled:focus {
background-color: var(--color-background-action-focus);
}
.carousel-container .carousel-button-right:disabled {
background-color: var(--color-background-transparent);
}
.carousel-container .carousel-button-right::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 16;
line-height: var(--leading-icon-base);
}
.carousel-container .carousel-button-right::before {
content: var(--tw-content);
color: var(--color-icon-accent);
}
.carousel-container .carousel-button-right::before {
--tw-content: "chevron_right";
content: var(--tw-content);
}
.carousel-container .carousel-button-left {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--color-icon-accent);
background-color: var(--color-background-transparent);
height: calc(0.25rem * 8);
width: calc(0.25rem * 8);
border-radius: var(--radius-md);
font-family: var(--font-icon);
font-size: var(--text-icon-sm);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 14;
line-height: var(--leading-icon-sm);
--tw-border-style: none;
border-style: none;
transition-property:
color,
background-color,
border-color,
outline-color,
text-decoration-color,
fill,
stroke,
--tw-gradient-from,
--tw-gradient-via,
--tw-gradient-to;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
--tw-shadow: 0px 8px 16px 0px var(--tw-shadow-color, rgba(0, 0, 0, 0.1));
box-shadow:
var(--tw-inset-shadow),
var(--tw-inset-ring-shadow),
var(--tw-ring-offset-shadow),
var(--tw-ring-shadow),
var(--tw-shadow);
position: absolute;
top: calc(50% - 8px);
left: calc(0.25rem * 3);
border-radius: calc(infinity * 1px);
background-color: var(--color-background-default);
}
.carousel-container .carousel-button-left:focus-visible {
--tw-outline-style: none;
outline-style: none;
}
.carousel-container .carousel-button-left:disabled {
cursor: not-allowed;
}
.carousel-container .carousel-button-left:disabled {
color: var(--color-icon-disabled-light);
}
@media (hover: hover) {
.carousel-container .carousel-button-left:enabled:hover {
background-color: var(--color-background-action-hover);
}
}
.carousel-container .carousel-button-left:enabled:focus {
background-color: var(--color-background-action-focus);
}
.carousel-container .carousel-button-left:disabled {
background-color: var(--color-background-transparent);
}
.carousel-container .carousel-button-left::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 16;
line-height: var(--leading-icon-base);
}
.carousel-container .carousel-button-left::before {
content: var(--tw-content);
color: var(--color-icon-accent);
}
.carousel-container .carousel-button-left::before {
--tw-content: "chevron_left";
content: var(--tw-content);
}
.carousel-container .carousel-gradient {
pointer-events: none;
position: absolute;
top: calc(0.25rem * 0);
left: calc(0.25rem * 0);
height: 100%;
width: 100%;
background:
linear-gradient(
90deg,
rgba(255, 255, 255, 1) 0px,
rgba(255, 255, 255, 0) 48px,
rgba(255, 255, 255, 0) calc(100% - 48px),
rgba(255, 255, 255, 1) 100%);
}
.carousel-container .carousel-gradient.carousel-gradient-left {
background:
linear-gradient(
90deg,
rgba(255, 255, 255, 1) 0px,
rgba(255, 255, 255, 0) 48px);
}
.carousel-container .carousel-gradient.carousel-gradient-right {
background:
linear-gradient(
90deg,
rgba(255, 255, 255, 0) calc(100% - 48px),
rgba(255, 255, 255, 1) 100%);
}
.bottom-navigation {
display: flex;
min-height: 44px;
flex-direction: row;
gap: var(--spacing-xs);
align-self: stretch;
background-color: var(--color-background-gray-ultra-light);
padding-inline: var(--spacing-base);
padding-block: var(--spacing-sm);
}
.bottom-navigation .bottom-navigation-item {
position: relative;
display: flex;
width: 100%;
align-items: center;
justify-content: center;
}
.bottom-navigation .bottom-navigation-item .bottom-navigation-item-content {
display: flex;
height: fit-content;
max-height: 36px;
min-height: 36px;
width: 100%;
align-items: center;
border-radius: var(--radius-md);
padding-inline: var(--spacing-base);
background-color: var(--color-background-gray-ultra-light);
font-family: var(--font-icon);
font-size: var(--text-icon-xl);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 20;
line-height: var(--leading-icon-xl);
color: var(--color-icon-accent);
cursor: pointer;
justify-content: center;
--tw-outline-style: none;
outline-style: none;
transition-property:
color,
background-color,
border-color,
outline-color,
text-decoration-color,
fill,
stroke,
--tw-gradient-from,
--tw-gradient-via,
--tw-gradient-to;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
@media (hover: hover) {
.bottom-navigation .bottom-navigation-item .bottom-navigation-item-content:hover {
background-color: var(--color-background-default);
}
}
.bottom-navigation .bottom-navigation-item .bottom-navigation-item-content:focus {
background-color: var(--color-background-gray);
}
.bottom-navigation .bottom-navigation-item .notification-indicator {
position: absolute;
top: calc(0.25rem * 1);
right: calc(50% - 22px);
}
.bottom-navigation .bottom-navigation-item.bottom-navigation-item-active .bottom-navigation-item-content {
background-color: var(--color-background-highlight);
}
@media (hover: hover) {
.bottom-navigation .bottom-navigation-item.bottom-navigation-item-active .bottom-navigation-item-content:hover {
background-color: var(--color-background-highlight-hover);
}
}
.bottom-navigation .bottom-navigation-item.bottom-navigation-item-active .bottom-navigation-item-content:focus {
background-color: var(--color-background-highlight-focus);
}
.bottom-navigation .bottom-navigation-item.bottom-navigation-item-accent .bottom-navigation-item-content {
height: fit-content;
max-height: calc(0.25rem * 8);
min-height: calc(0.25rem * 8);
max-width: calc(0.25rem * 8);
min-width: calc(0.25rem * 8);
border-radius: calc(infinity * 1px);
padding: calc(0.25rem * 0);
color: var(--color-icon-inverted);
background-color: var(--color-background-accent);
}
@media (hover: hover) {
.bottom-navigation .bottom-navigation-item.bottom-navigation-item-accent .bottom-navigation-item-content:hover {
background-color: var(--color-background-accent-hover);
}
}
.bottom-navigation .bottom-navigation-item.bottom-navigation-item-accent .bottom-navigation-item-content:focus {
background-color: var(--color-background-accent-focus);
}
.headerbar {
height: fit-content;
width: 100%;
min-width: calc(0.25rem * 80);
background-color: var(--color-background-highlight);
container-type: inline-size;
}
.headerbar .headerbar-content {
padding-left: var(--spacing-md);
height: calc(0.25rem * 14);
position: relative;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
@container (width >= 39rem) {
.headerbar .headerbar-content {
height: calc(0.25rem * 16);
}
}
.headerbar .headerbar-content .headerbar-search {
display: none;
flex: auto;
align-items: center;
padding-inline: 48px;
}
@container (width >= 39rem) {
.headerbar .headerbar-content .headerbar-search {
display: block;
}
}
@container (width >= 83rem) {
.headerbar .headerbar-content .headerbar-search {
padding-inline: calc(0.25rem * 0);
}
}
.headerbar .headerbar-content .headerbar-search .search-field-container {
margin-inline: auto;
max-width: 600px;
}
.headerbar .headerbar-content .scope-selector {
flex: auto;
}
.headerbar .headerbar-content:has:not(.headerbar-search) .headerbar-section {
flex: auto;
}
.headerbar .headerbar-logo {
height: 42px;
width: 140px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-image: url('data:image/svg+xml,');
}
@container (width >= 39rem) {
.headerbar .headerbar-logo {
height: calc(0.25rem * 12);
}
}
@container (width >= 39rem) {
.headerbar .headerbar-logo {
width: calc(0.25rem * 40);
}
}
.headerbar .headerbar-title {
text-align: center;
font-family: var(--font-default);
letter-spacing: var(--tracking-xl);
font-weight: 600;
font-style: normal;
font-size: var(--text-xl);
line-height: var(--tw-leading, var(--leading-xl));
color: var(--color-text-accent);
position: absolute;
inset: calc(0.25rem * 0);
left: calc(0.25rem * 0);
align-self: center;
padding-inline: calc(0.25rem * 20);
overflow: hidden;
text-wrap: nowrap;
text-overflow: ellipsis;
white-space: nowrap;
}
.headerbar .headerbar-section {
display: flex;
justify-content: flex-end;
}
.headerbar .headerbar-section .headerbar-button {
font-weight: 600;
line-height: var(--leading-base);
display: inline-flex;
align-items: baseline;
gap: var(--spacing-base);
border-radius: var(--radius-md);
padding-inline: var(--spacing-xl);
padding-block: var(--spacing-base);
cursor: pointer;
border-style: var(--tw-border-style);
border-width: 1px;
--tw-border-style: solid;
border-style: solid;
border-color: var(--color-border-transparent);
transition-property:
color,
background-color,
border-color,
outline-color,
text-decoration-color,
fill,
stroke,
--tw-gradient-from,
--tw-gradient-via,
--tw-gradient-to;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
color: var(--color-text-inverted);
background-color: var(--color-background-accent);
position: relative;
height: fit-content;
width: fit-content;
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
background-color: var(--color-background-action);
color: var(--color-text-accent);
border-color: var(--color-border-accent);
margin-right: var(--spacing-md);
background-color: var(--color-background-highlight);
}
.headerbar .headerbar-section .headerbar-button:focus-visible {
--tw-outline-style: none;
outline-style: none;
}
.headerbar .headerbar-section .headerbar-button:disabled {
cursor: not-allowed;
}
@media (hover: hover) {
.headerbar .headerbar-section .headerbar-button:enabled:hover {
color: var(--color-text-inverted);
}
}
.headerbar .headerbar-section .headerbar-button:enabled:focus {
color: var(--color-text-inverted);
}
.headerbar .headerbar-section .headerbar-button:disabled {
color: var(--color-text-disabled);
}
.headerbar .headerbar-section .headerbar-button:has(*:is(.spinner)) {
color: var(--color-background-transparent);
}
@media (hover: hover) {
.headerbar .headerbar-section .headerbar-button:enabled:hover {
background-color: var(--color-background-accent-hover);
}
}
.headerbar .headerbar-section .headerbar-button:enabled:focus {
background-color: var(--color-background-accent-focus);
}
.headerbar .headerbar-section .headerbar-button:disabled {
background-color: var(--color-background-disabled);
}
@media (hover: hover) {
.headerbar .headerbar-section .headerbar-button:enabled:hover {
background-color: var(--color-background-action-hover);
}
}
.headerbar .headerbar-section .headerbar-button:enabled:focus {
background-color: var(--color-background-action-focus);
}
.headerbar .headerbar-section .headerbar-button:disabled {
background-color: var(--color-background-action);
}
@media (hover: hover) {
.headerbar .headerbar-section .headerbar-button:enabled:hover {
color: var(--color-text-accent);
}
}
.headerbar .headerbar-section .headerbar-button:enabled:focus {
color: var(--color-text-accent);
}
.headerbar .headerbar-section .headerbar-button:disabled {
color: var(--color-text-disabled-light);
}
.headerbar .headerbar-section .headerbar-button:has(*:is(.spinner)) {
color: var(--color-background-transparent);
}
.headerbar .headerbar-section .headerbar-button:disabled {
border-color: var(--color-border-disabled);
}
@media (hover: hover) {
.headerbar .headerbar-section .headerbar-button:enabled:hover {
background-color: var(--color-background-highlight-hover);
}
}
.headerbar .headerbar-section .headerbar-button:enabled:focus {
background-color: var(--color-background-highlight-focus);
}
.headerbar .headerbar-action {
height: calc(0.25rem * 14);
width: calc(0.25rem * 14);
background-color: var(--color-background-highlight);
position: relative;
justify-content: center;
--tw-outline-style: none;
outline-style: none;
display: flex;
cursor: pointer;
align-content: center;
align-items: center;
transition-property:
color,
background-color,
border-color,
outline-color,
text-decoration-color,
fill,
stroke,
--tw-gradient-from,
--tw-gradient-via,
--tw-gradient-to;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
@container (width >= 39rem) {
.headerbar .headerbar-action {
height: calc(0.25rem * 16);
}
}
@container (width >= 39rem) {
.headerbar .headerbar-action {
width: calc(0.25rem * 16);
}
}
@media (hover: hover) {
.headerbar .headerbar-action:hover {
background-color: var(--color-background-highlight-hover);
}
}
.headerbar .headerbar-action:focus {
background-color: var(--color-background-highlight-focus);
}
.headerbar .headerbar-action:has(*:is(.headerbar-action-select)) {
width: fit-content;
}
.headerbar .headerbar-action .headerbar-action-icon {
font-family: var(--font-icon);
font-size: var(--text-icon-xl);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 20;
line-height: var(--leading-icon-xl);
color: var(--color-icon-accent);
}
.headerbar .headerbar-action .headerbar-action-select-wrapper {
position: relative;
height: 100%;
}
.headerbar .headerbar-action .headerbar-action-select-wrapper::after {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-lg);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 18;
line-height: var(--leading-icon-lg);
}
.headerbar .headerbar-action .headerbar-action-select-wrapper::after {
content: var(--tw-content);
color: var(--color-icon-default);
}
.headerbar .headerbar-action .headerbar-action-select-wrapper::after {
--tw-content: "\e5cf";
content: var(--tw-content);
}
.headerbar .headerbar-action .headerbar-action-select-wrapper::after {
content: var(--tw-content);
position: absolute;
}
.headerbar .headerbar-action .headerbar-action-select-wrapper::after {
content: var(--tw-content);
top: var(--spacing-lg);
}
.headerbar .headerbar-action .headerbar-action-select-wrapper::after {
content: var(--tw-content);
right: var(--spacing-lg);
}
.headerbar .headerbar-action .headerbar-action-select-wrapper::after {
content: var(--tw-content);
--tw-leading: calc(0.25rem * 6);
line-height: calc(0.25rem * 6);
}
.headerbar .headerbar-action .headerbar-action-select-wrapper::after {
content: var(--tw-content);
pointer-events: none;
}
.headerbar .headerbar-action .headerbar-action-select-wrapper::after {
content: var(--tw-content);
top: calc(0.25rem * 4);
}
.headerbar .headerbar-action .headerbar-action-select-wrapper::after {
content: var(--tw-content);
right: calc(var(--spacing-base) * -1);
}
.headerbar .headerbar-action .headerbar-action-select-wrapper::after {
content: var(--tw-content);
color: var(--color-icon-accent);
}
@container (width >= 39rem) {
.headerbar .headerbar-action .headerbar-action-select-wrapper::after {
content: var(--tw-content);
top: calc(0.25rem * 5);
}
}
.headerbar .headerbar-action .headerbar-action-select-wrapper::after {
content: var(--tw-content);
right: calc(0.25rem * 3);
}
.headerbar .headerbar-action .headerbar-action-select-wrapper .headerbar-action-select {
align-items: center;
align-self: stretch;
overflow: hidden;
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
text-overflow: ellipsis;
--tw-outline-style: none;
outline-style: none;
color: var(--color-text-default);
background-color: var(--color-background-transparent);
height: 100%;
color: var(--color-text-accent);
padding-right: calc(0.25rem * 4.5);
padding-left: calc(0.25rem * 4);
cursor: pointer;
--tw-border-style: none;
border-style: none;
}
.headerbar .headerbar-action .headerbar-action-select-wrapper .headerbar-action-select:disabled {
color: var(--color-text-disabled);
}
.headerbar .headerbar-action .headerbar-action-select-wrapper .headerbar-action-select:disabled {
background-color: var(--color-background-disabled);
}
.headerbar .headerbar-action .headerbar-action-select-wrapper .headerbar-action-select:disabled {
cursor: not-allowed;
}
.headerbar .headerbar-action .headerbar-action-select-wrapper .headerbar-action-select::after {
content: var(--tw-content);
margin-right: var(--spacing-md);
}
.headerbar .headerbar-action .notification-indicator {
position: absolute;
top: calc(0.25rem * 3);
right: calc(0.25rem * 2);
}
@container (width >= 39rem) {
.headerbar .headerbar-action .notification-indicator {
top: calc(0.25rem * 4);
}
}
@container (width >= 39rem) {
.headerbar .headerbar-action .notification-indicator {
right: calc(0.25rem * 3);
}
}
.headerbar .headerbar-action.headerbar-action-active {
background-color: var(--color-background-default);
}
@media (hover: hover) {
.headerbar .headerbar-action.headerbar-action-active:hover {
background-color: var(--color-background-default);
}
}
.headerbar .headerbar-action.headerbar-action-active:focus {
background-color: var(--color-background-default);
}
.headerbar .headerbar-action.headerbar-burger-menu {
visibility: visible;
}
@container (width >= 66rem) {
.headerbar .headerbar-action.headerbar-burger-menu {
display: none;
}
}
.user-context-menu {
display: flex;
width: fit-content;
min-width: calc(0.25rem * 80);
flex-direction: column;
background-color: var(--color-background-default);
--tw-shadow: 0px 4px 8px 0px var(--tw-shadow-color, rgba(0, 0, 0, 0.1));
box-shadow:
var(--tw-inset-shadow),
var(--tw-inset-ring-shadow),
var(--tw-ring-offset-shadow),
var(--tw-ring-shadow),
var(--tw-shadow);
}
.user-context-menu .user-context-menu-header {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--spacing-base);
padding: var(--spacing-lg);
border-style: var(--tw-border-style);
border-width: 0px;
border-bottom-style: var(--tw-border-style);
border-bottom-width: 1px;
--tw-border-style: solid;
border-style: solid;
border-color: var(--color-border-ultra-light);
}
.user-context-menu .user-context-menu-header .user-context-menu-header-information {
display: flex;
flex-direction: column;
align-items: center;
}
.user-context-menu .user-context-menu-header .user-context-menu-header-information > :nth-child(n) {
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
color: var(--color-text-default);
}
.user-context-menu .user-context-menu-header .user-context-menu-header-information > :first-child {
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 600;
font-style: normal;
font-size: var(--text-base);
line-height: var(--leading-base);
}
.user-context-menu .user-context-menu-entry {
display: flex;
width: 100%;
flex: 1;
align-items: center;
gap: var(--spacing-base);
padding: var(--spacing-base);
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
color: var(--color-text-default);
background-color: var(--color-background-default);
cursor: pointer;
--tw-outline-style: none;
outline-style: none;
--tw-border-style: none;
border-style: none;
transition-property:
color,
background-color,
border-color,
outline-color,
text-decoration-color,
fill,
stroke,
--tw-gradient-from,
--tw-gradient-via,
--tw-gradient-to;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.user-context-menu .user-context-menu-entry:disabled {
color: var(--color-text-disabled);
}
@media (hover: hover) {
.user-context-menu .user-context-menu-entry:enabled:hover {
background-color: var(--color-background-action-hover);
}
}
.user-context-menu .user-context-menu-entry:enabled:focus {
background-color: var(--color-background-action-focus);
}
.user-context-menu .user-context-menu-entry:disabled {
cursor: not-allowed;
}
.user-context-menu .user-context-menu-entry:disabled > .user-context-menu-entry-icon {
color: var(--color-icon-disabled);
}
.user-context-menu .user-context-menu-entry .user-context-menu-entry-icon {
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 16;
line-height: var(--leading-icon-base);
color: var(--color-icon-default);
}
.notification-panel {
display: flex;
height: fit-content;
width: calc(0.25rem * 80);
flex-direction: column;
background-color: var(--color-background-default);
--tw-shadow: 0px 4px 8px 0px var(--tw-shadow-color, rgba(0, 0, 0, 0.1));
box-shadow:
var(--tw-inset-shadow),
var(--tw-inset-ring-shadow),
var(--tw-ring-offset-shadow),
var(--tw-ring-shadow),
var(--tw-shadow);
max-height: 456px;
overflow-x: hidden;
overflow-y: auto;
}
@container (width >= 39rem) {
.notification-panel {
max-height: 768px;
}
}
@container (width >= 66rem) {
.notification-panel {
max-height: 616px;
}
}
@container (width >= 83rem) {
.notification-panel {
max-height: 696px;
}
}
@container (width >= 99rem) {
.notification-panel {
max-height: 768px;
}
}
.notification-panel .notification-panel-empty {
display: flex;
justify-content: center;
padding: calc(0.25rem * 8);
padding-top: calc(0.25rem * 20);
}
.notification-panel .notification-panel-empty .notification-panel-empty-label {
position: relative;
width: 100%;
text-align: center;
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
color: var(--color-text-placeholder);
}
.notification-panel .notification-panel-empty .notification-panel-empty-label::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-2xl);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 24;
line-height: var(--leading-icon-2xl);
}
.notification-panel .notification-panel-empty .notification-panel-empty-label::before {
content: var(--tw-content);
color: var(--color-icon-disabled);
}
.notification-panel .notification-panel-empty .notification-panel-empty-label::before {
--tw-content: "\e7f6";
content: var(--tw-content);
}
.notification-panel .notification-panel-empty .notification-panel-empty-label::before {
content: var(--tw-content);
position: absolute;
}
.notification-panel .notification-panel-empty .notification-panel-empty-label::before {
content: var(--tw-content);
top: calc(0.25rem * -9);
}
.notification-panel .notification-panel-empty .notification-panel-empty-label::before {
content: var(--tw-content);
right: calc(1 / 2 * 100%);
}
.notification-panel .notification-panel-empty .notification-panel-empty-label::before {
content: var(--tw-content);
width: calc(0.25rem * 3);
}
.notification-panel .notification-panel-header {
display: flex;
justify-content: space-between;
gap: var(--spacing-sm);
padding-inline: var(--spacing-lg);
padding-block: var(--spacing-base);
}
.notification-panel .notification-panel-header .notification-panel-header-label {
font-family: var(--font-default);
letter-spacing: var(--tracking-lg);
font-weight: 400;
font-style: normal;
font-size: var(--text-lg);
line-height: var(--tw-leading, var(--leading-lg));
color: var(--color-text-default);
}
.notification-panel .notification-panel-header .notification-panel-header-button {
cursor: pointer;
--tw-border-style: none;
border-style: none;
background-color: var(--color-background-transparent);
padding-inline: calc(0.25rem * 0);
margin-left: calc(0.25rem * 5);
display: inline-block;
letter-spacing: var(--tracking-base);
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
color: var(--color-text-accent);
position: relative;
text-decoration-line: none;
transition-property:
color,
background-color,
border-color,
outline-color,
text-decoration-color,
fill,
stroke,
--tw-gradient-from,
--tw-gradient-via,
--tw-gradient-to;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
--tw-outline-style: none;
outline-style: none;
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
}
.notification-panel .notification-panel-header .notification-panel-header-button::before {
content: var(--tw-content);
position: absolute;
}
.notification-panel .notification-panel-header .notification-panel-header-button::before {
content: var(--tw-content);
left: calc(0.25rem * -5);
}
.notification-panel .notification-panel-header .notification-panel-header-button::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 16;
line-height: var(--leading-icon-base);
}
.notification-panel .notification-panel-header .notification-panel-header-button::before {
content: var(--tw-content);
--tw-leading: calc(0.25rem * 6);
line-height: calc(0.25rem * 6);
}
.notification-panel .notification-panel-header .notification-panel-header-button::before {
content: var(--tw-content);
color: var(--color-icon-accent);
}
.notification-panel .notification-panel-header .notification-panel-header-button:visited {
color: var(--color-text-accent);
}
@media (hover: hover) {
.notification-panel .notification-panel-header .notification-panel-header-button:hover {
text-decoration-line: underline;
}
}
.notification-panel .notification-panel-header .notification-panel-header-button:focus {
text-decoration-line: underline;
}
.notification-panel .notification-panel-header .notification-panel-header-button::before {
--tw-content: "done_all";
content: var(--tw-content);
}
.notification-panel .notification-panel-header .notification-panel-header-button:disabled {
color: var(--color-text-disabled-light);
cursor: not-allowed;
}
.notification-panel .notification-panel-header .notification-panel-header-button:disabled:visited {
color: var(--color-text-disabled-light);
}
@media (hover: hover) {
.notification-panel .notification-panel-header .notification-panel-header-button:disabled:hover {
text-decoration-line: none;
}
}
.notification-panel .notification-panel-header .notification-panel-header-button:disabled:focus {
text-decoration-line: none;
}
.notification-panel .notification-panel-header .notification-panel-header-button:disabled:active {
pointer-events: none;
}
.notification-panel .notification-panel-header .notification-panel-header-button:disabled::before {
content: var(--tw-content);
color: var(--color-icon-disabled-light);
}
.notification-panel .notification-panel-header .notification-panel-header-button:disabled::after {
content: var(--tw-content);
color: var(--color-icon-disabled-light);
}
.notification-panel .notification-panel-items > :nth-child(n) {
border-style: var(--tw-border-style);
border-width: 0px;
border-top-style: var(--tw-border-style);
border-top-width: 1px;
--tw-border-style: solid;
border-style: solid;
border-color: var(--color-border-light);
}
.notification-panel .notification-panel-items .notification-panel-group {
display: flex;
padding-inline: var(--spacing-lg);
padding-block: var(--spacing-sm);
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
color: var(--color-text-ultra-light);
}
.notification-panel .notification-panel-items .notification-panel-item-wrapper {
display: flex;
align-items: stretch;
}
.notification-panel .notification-panel-items .notification-panel-item-wrapper .notification-panel-item {
position: relative;
display: flex;
width: 100%;
align-items: flex-start;
gap: var(--spacing-md);
padding-block: calc(0.25rem * 2.5);
padding-right: var(--spacing-3xl);
padding-left: var(--spacing-lg);
background-color: var(--color-background-action);
flex: 1;
cursor: pointer;
--tw-border-style: none;
border-style: none;
transition-property:
color,
background-color,
border-color,
outline-color,
text-decoration-color,
fill,
stroke,
--tw-gradient-from,
--tw-gradient-via,
--tw-gradient-to;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
--tw-outline-style: none;
outline-style: none;
}
@media (hover: hover) {
.notification-panel .notification-panel-items .notification-panel-item-wrapper .notification-panel-item:hover {
padding-right: var(--spacing-base);
}
}
.notification-panel .notification-panel-items .notification-panel-item-wrapper .notification-panel-item:focus {
padding-right: var(--spacing-base);
}
.notification-panel .notification-panel-items .notification-panel-item-wrapper .notification-panel-item:has(*:is(.notification-indicator)) {
background-color: var(--color-background-gray-ultra-ultra-light);
}
@media (hover: hover) {
.notification-panel .notification-panel-items .notification-panel-item-wrapper .notification-panel-item:hover {
background-color: var(--color-background-action-hover);
}
}
.notification-panel .notification-panel-items .notification-panel-item-wrapper .notification-panel-item:focus {
background-color: var(--color-background-action-focus);
}
.notification-panel .notification-panel-items .notification-panel-item-wrapper .notification-panel-item .avatar {
margin-top: calc(0.25rem * 1);
}
.notification-panel .notification-panel-items .notification-panel-item-wrapper .notification-panel-item .avatar-plans.avatar {
background-color: var(--color-chart-category7-light);
color: var(--color-text-default);
}
.notification-panel .notification-panel-items .notification-panel-item-wrapper .notification-panel-item .avatar-plans.avatar::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-lg);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 18;
line-height: var(--leading-icon-lg);
}
.notification-panel .notification-panel-items .notification-panel-item-wrapper .notification-panel-item .avatar-plans.avatar::before {
--tw-content: "note_stack";
content: var(--tw-content);
}
.notification-panel .notification-panel-items .notification-panel-item-wrapper .notification-panel-item .avatar-deliveries.avatar {
background-color: var(--color-chart-category10-light);
color: var(--color-text-default);
}
.notification-panel .notification-panel-items .notification-panel-item-wrapper .notification-panel-item .avatar-deliveries.avatar::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-lg);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 18;
line-height: var(--leading-icon-lg);
}
.notification-panel .notification-panel-items .notification-panel-item-wrapper .notification-panel-item .avatar-deliveries.avatar::before {
--tw-content: "local_shipping";
content: var(--tw-content);
}
.notification-panel .notification-panel-items .notification-panel-item-wrapper .notification-panel-item .avatar-return-deliveries.avatar {
background-color: var(--color-chart-category3-light);
color: var(--color-text-default);
}
.notification-panel .notification-panel-items .notification-panel-item-wrapper .notification-panel-item .avatar-return-deliveries.avatar::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-lg);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 18;
line-height: var(--leading-icon-lg);
}
.notification-panel .notification-panel-items .notification-panel-item-wrapper .notification-panel-item .avatar-return-deliveries.avatar::before {
--tw-content: "share_windows";
content: var(--tw-content);
}
.notification-panel .notification-panel-items .notification-panel-item-wrapper .notification-panel-item .avatar-reconditioning.avatar {
background-color: var(--color-chart-category9-light);
color: var(--color-text-default);
}
.notification-panel .notification-panel-items .notification-panel-item-wrapper .notification-panel-item .avatar-reconditioning.avatar::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-lg);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 18;
line-height: var(--leading-icon-lg);
}
.notification-panel .notification-panel-items .notification-panel-item-wrapper .notification-panel-item .avatar-reconditioning.avatar::before {
--tw-content: "reset_wrench";
content: var(--tw-content);
}
.notification-panel .notification-panel-items .notification-panel-item-wrapper .notification-panel-item .avatar-inspection.avatar {
background-color: var(--color-chart-category8-light);
color: var(--color-text-default);
}
.notification-panel .notification-panel-items .notification-panel-item-wrapper .notification-panel-item .avatar-inspection.avatar::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-lg);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 18;
line-height: var(--leading-icon-lg);
}
.notification-panel .notification-panel-items .notification-panel-item-wrapper .notification-panel-item .avatar-inspection.avatar::before {
--tw-content: "frame_inspect";
content: var(--tw-content);
}
.notification-panel .notification-panel-items .notification-panel-item-wrapper .notification-panel-item .avatar-invoices.avatar {
background-color: var(--color-chart-category1-light);
color: var(--color-text-default);
}
.notification-panel .notification-panel-items .notification-panel-item-wrapper .notification-panel-item .avatar-invoices.avatar::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-lg);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 18;
line-height: var(--leading-icon-lg);
}
.notification-panel .notification-panel-items .notification-panel-item-wrapper .notification-panel-item .avatar-invoices.avatar::before {
--tw-content: "description";
content: var(--tw-content);
}
.notification-panel .notification-panel-items .notification-panel-item-wrapper .notification-panel-item .avatar-sensors.avatar {
background-color: var(--color-chart-category6-light);
color: var(--color-text-default);
}
.notification-panel .notification-panel-items .notification-panel-item-wrapper .notification-panel-item .avatar-sensors.avatar::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-lg);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 18;
line-height: var(--leading-icon-lg);
}
.notification-panel .notification-panel-items .notification-panel-item-wrapper .notification-panel-item .avatar-sensors.avatar::before {
--tw-content: "sensors";
content: var(--tw-content);
}
.notification-panel .notification-panel-items .notification-panel-item-wrapper .notification-panel-item .avatar-instructions.avatar {
background-color: var(--color-chart-category12-light);
background-position: center;
background-repeat: no-repeat;
background-image: url('data:image/svg+xml,');
}
.notification-panel .notification-panel-items .notification-panel-item-wrapper .notification-panel-item .avatar-orders.avatar {
background-color: var(--color-chart-category10-light);
color: var(--color-text-default);
}
.notification-panel .notification-panel-items .notification-panel-item-wrapper .notification-panel-item .avatar-orders.avatar::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-lg);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 18;
line-height: var(--leading-icon-lg);
}
.notification-panel .notification-panel-items .notification-panel-item-wrapper .notification-panel-item .avatar-orders.avatar::before {
--tw-content: "playlist_add_check";
content: var(--tw-content);
}
.notification-panel .notification-panel-items .notification-panel-item-wrapper .notification-panel-item .avatar-general.avatar {
background-color: var(--color-background-highlight);
background-position: center;
background-repeat: no-repeat;
background-image: url('data:image/svg+xml,');
}
.notification-panel .notification-panel-items .notification-panel-item-wrapper .notification-panel-item .avatar-transfers.avatar {
background-color: var(--color-chart-category3-light);
color: var(--color-text-default);
}
.notification-panel .notification-panel-items .notification-panel-item-wrapper .notification-panel-item .avatar-transfers.avatar::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-lg);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 18;
line-height: var(--leading-icon-lg);
}
.notification-panel .notification-panel-items .notification-panel-item-wrapper .notification-panel-item .avatar-transfers.avatar::before {
--tw-content: "swap_horiz";
content: var(--tw-content);
}
.notification-panel .notification-panel-items .notification-panel-item-wrapper .notification-panel-item .notification-panel-item-content {
display: flex;
flex: 1;
flex-direction: column;
align-items: flex-start;
}
.notification-panel .notification-panel-items .notification-panel-item-wrapper .notification-panel-item .notification-indicator {
position: absolute;
top: calc(0.25rem * 4);
left: calc(0.25rem * 4);
height: calc(0.25rem * 2);
width: calc(0.25rem * 2);
border-style: var(--tw-border-style);
border-width: 1px;
--tw-border-style: solid;
border-style: solid;
border-color: var(--color-border-inverted);
}
.notification-panel .notification-panel-items .notification-panel-item-wrapper .notification-panel-item .notification-panel-item-title {
text-align: left;
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 600;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--leading-sm);
color: var(--color-text-default);
}
.notification-panel .notification-panel-items .notification-panel-item-wrapper .notification-panel-item .notification-panel-item-description {
text-align: left;
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
color: var(--color-text-default);
}
.notification-panel .notification-panel-items .notification-panel-item-wrapper .notification-panel-item .notification-panel-item-date {
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
color: var(--color-text-ultra-light);
}
.notification-panel .notification-panel-items .notification-panel-item-wrapper .notification-panel-item-button {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--color-icon-accent);
background-color: var(--color-background-transparent);
height: calc(0.25rem * 8);
width: calc(0.25rem * 8);
border-radius: var(--radius-md);
font-size: var(--text-icon-sm);
font-variation-settings: "FILL" 0, "opsz" 14;
line-height: var(--leading-icon-sm);
--tw-border-style: none;
border-style: none;
transition-property:
color,
background-color,
border-color,
outline-color,
text-decoration-color,
fill,
stroke,
--tw-gradient-from,
--tw-gradient-via,
--tw-gradient-to;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
height: calc(0.25rem * 6);
width: calc(0.25rem * 6);
border-radius: var(--radius-sm);
font-family: var(--font-icon);
font-size: var(--text-icon-xs);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 12;
line-height: var(--leading-icon-xs);
height: auto;
align-self: stretch;
border-radius: 0;
display: none;
}
.notification-panel .notification-panel-items .notification-panel-item-wrapper .notification-panel-item-button:focus-visible {
--tw-outline-style: none;
outline-style: none;
}
.notification-panel .notification-panel-items .notification-panel-item-wrapper .notification-panel-item-button:disabled {
cursor: not-allowed;
}
.notification-panel .notification-panel-items .notification-panel-item-wrapper .notification-panel-item-button:disabled {
color: var(--color-icon-disabled-light);
}
@media (hover: hover) {
.notification-panel .notification-panel-items .notification-panel-item-wrapper .notification-panel-item-button:enabled:hover {
background-color: var(--color-background-action-hover);
}
}
.notification-panel .notification-panel-items .notification-panel-item-wrapper .notification-panel-item-button:enabled:focus {
background-color: var(--color-background-action-focus);
}
.notification-panel .notification-panel-items .notification-panel-item-wrapper .notification-panel-item-button:disabled {
background-color: var(--color-background-transparent);
}
.notification-panel .notification-panel-items .notification-panel-item-wrapper .notification-panel-item-button::before {
--tw-content: "\e5cd";
content: var(--tw-content);
}
@media (hover: hover) {
.notification-panel .notification-panel-items .notification-panel-item-wrapper .notification-panel-item-button:hover {
display: flex;
}
}
.notification-panel .notification-panel-items .notification-panel-item-wrapper .notification-panel-item-button:focus {
display: flex;
}
.notification-panel .notification-panel-items .notification-panel-item-wrapper:has(.notification-panel-item:hover, .notification-panel-item:focus) .notification-panel-item-button {
display: flex;
}
.notification-panel .notification-panel-items .notification-panel-item-wrapper:has(.notification-panel-item-button:hover, .notification-panel-item-button:focus) .notification-panel-item {
padding-right: var(--spacing-base);
}
.notification-panel .notification-panel-button {
height: calc(0.25rem * 10);
width: calc(0.25rem * 80);
cursor: pointer;
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
color: var(--color-text-accent);
background-color: var(--color-background-action);
transition-property:
color,
background-color,
border-color,
outline-color,
text-decoration-color,
fill,
stroke,
--tw-gradient-from,
--tw-gradient-via,
--tw-gradient-to;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
@media (hover: hover) {
.notification-panel .notification-panel-button:hover {
background-color: var(--color-background-action-hover);
}
}
.notification-panel .notification-panel-button:focus {
background-color: var(--color-background-action-focus);
}
.scope-selector {
display: none;
}
@container (width >= 66rem) {
.scope-selector {
margin-left: 212px;
}
}
@container (width >= 66rem) {
.scope-selector {
display: flex;
}
}
@container (width >= 83rem) {
.scope-selector {
margin-left: 228px;
}
}
.scope-selector-drawer {
height: fit-content;
max-height: 90%;
min-height: calc(0.25rem * 48);
width: 100%;
background-color: var(--color-background-default);
align-items: center;
container-type: inline-size;
}
.scope-selector-drawer .scope-selector-drawer-content {
display: flex;
flex-direction: column;
gap: calc(0.25rem * 6);
padding-top: var(--spacing-2xl);
}
@container (width >= 66rem) {
.scope-selector-drawer .scope-selector-drawer-content {
padding-inline: calc(0.25rem * 32);
}
}
@container (width >= 83rem) {
.scope-selector-drawer .scope-selector-drawer-content {
padding-inline: 264px;
}
}
@container (width >= 99rem) {
.scope-selector-drawer .scope-selector-drawer-content {
padding-right: 384px;
}
}
@container (width >= 99rem) {
.scope-selector-drawer .scope-selector-drawer-content {
padding-left: 424px;
}
}
.scope-selector-drawer .scope-selector-drawer-content .scope-selector-drawer-content-header {
display: flex;
flex-direction: row;
}
.scope-selector-drawer .scope-selector-drawer-content .scope-selector-drawer-content-header .scope-selector-drawer-title {
width: 100%;
flex-grow: 1;
font-family: var(--font-default);
letter-spacing: var(--tracking-2xl);
font-weight: 600;
font-style: normal;
font-size: var(--text-2xl);
line-height: var(--tw-leading, var(--leading-2xl));
color: var(--color-text-default);
}
.scope-selector-drawer .scope-selector-drawer-content .scope-selector-drawer-content-header .scope-selector-drawer-close {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--color-icon-accent);
background-color: var(--color-background-transparent);
height: calc(0.25rem * 8);
width: calc(0.25rem * 8);
border-radius: var(--radius-md);
font-family: var(--font-icon);
font-size: var(--text-icon-sm);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 14;
line-height: var(--leading-icon-sm);
--tw-border-style: none;
border-style: none;
transition-property:
color,
background-color,
border-color,
outline-color,
text-decoration-color,
fill,
stroke,
--tw-gradient-from,
--tw-gradient-via,
--tw-gradient-to;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
color: var(--color-icon-default);
}
.scope-selector-drawer .scope-selector-drawer-content .scope-selector-drawer-content-header .scope-selector-drawer-close:focus-visible {
--tw-outline-style: none;
outline-style: none;
}
.scope-selector-drawer .scope-selector-drawer-content .scope-selector-drawer-content-header .scope-selector-drawer-close:disabled {
cursor: not-allowed;
}
.scope-selector-drawer .scope-selector-drawer-content .scope-selector-drawer-content-header .scope-selector-drawer-close:disabled {
color: var(--color-icon-disabled-light);
}
@media (hover: hover) {
.scope-selector-drawer .scope-selector-drawer-content .scope-selector-drawer-content-header .scope-selector-drawer-close:enabled:hover {
background-color: var(--color-background-action-hover);
}
}
.scope-selector-drawer .scope-selector-drawer-content .scope-selector-drawer-content-header .scope-selector-drawer-close:enabled:focus {
background-color: var(--color-background-action-focus);
}
.scope-selector-drawer .scope-selector-drawer-content .scope-selector-drawer-content-header .scope-selector-drawer-close:disabled {
background-color: var(--color-background-transparent);
}
.scope-selector-drawer .scope-selector-drawer-content .scope-selector-drawer-content-header .scope-selector-drawer-close::before {
--tw-content: "\e5cd";
content: var(--tw-content);
}
.scope-selector-drawer .scope-selector-drawer-content .scope-selector-drawer-content-results {
height: fit-content;
}
.scope-selector-drawer .scope-selector-drawer-content .scope-selector-drawer-content-results:empty {
display: flex;
height: calc(0.25rem * 60);
width: 100%;
align-items: center;
justify-content: center;
border-style: var(--tw-border-style);
border-width: 1px;
--tw-border-style: dashed;
border-style: dashed;
border-color: var(--color-border-accent);
background-color: #e6ecf3;
}
.scope-selector-drawer .scope-selector-drawer-content .scope-selector-drawer-content-results:empty:before {
color: var(--color-text-accent);
content: "Replace Me";
}
.scope-selector-item {
display: flex;
height: calc(0.25rem * 16);
max-width: calc(0.25rem * 72);
flex-direction: column;
align-items: flex-start;
--tw-outline-style: none;
outline-style: none;
background-color: var(--color-background-highlight);
pointer-events: none;
cursor: default;
--tw-border-style: none;
border-style: none;
transition-property:
color,
background-color,
border-color,
outline-color,
text-decoration-color,
fill,
stroke,
--tw-gradient-from,
--tw-gradient-via,
--tw-gradient-to;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
@media (hover: hover) {
.scope-selector-item:hover {
background-color: var(--color-background-highlight);
}
}
.scope-selector-item:focus {
background-color: var(--color-background-highlight);
}
@media (hover: hover) {
.scope-selector-item:has(*:is(.scope-selector-item-name-selectable)):hover {
background-color: var(--color-background-highlight-hover);
}
}
.scope-selector-item:has(*:is(.scope-selector-item-name-selectable)):focus {
background-color: var(--color-background-highlight-focus);
}
.scope-selector-item:has(*:is(.scope-selector-item-name-selectable)) {
cursor: pointer;
}
.scope-selector-item:has(*:is(.scope-selector-item-name-selectable)) {
pointer-events: auto;
}
.scope-selector-item .scope-selector-item-content {
display: flex;
width: 100%;
flex-direction: column;
align-items: flex-start;
padding-inline: var(--spacing-2xl);
padding-top: var(--spacing-md);
}
.scope-selector-item .scope-selector-item-content .scope-selector-item-label {
width: 100%;
overflow: hidden;
text-align: start;
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
text-overflow: ellipsis;
white-space: nowrap;
color: var(--color-text-accent);
}
.scope-selector-item .scope-selector-item-content .scope-selector-item-name {
display: flex;
width: fit-content;
max-width: 100%;
position: relative;
margin-top: calc(0.25rem * -1);
overflow: hidden;
}
.scope-selector-item .scope-selector-item-content .scope-selector-item-name .scope-selector-item-name-placeholder {
width: fit-content;
max-width: 100%;
overflow: hidden;
text-align: start;
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
text-overflow: ellipsis;
white-space: nowrap;
color: var(--color-text-accent);
}
.scope-selector-item .scope-selector-item-content .scope-selector-item-name .scope-selector-item-name-value {
width: fit-content;
max-width: 100%;
padding-bottom: var(--spacing-sm);
overflow: hidden;
text-align: start;
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 600;
font-style: normal;
font-size: var(--text-base);
line-height: var(--leading-base);
text-overflow: ellipsis;
white-space: nowrap;
color: var(--color-text-accent);
}
.scope-selector-item .scope-selector-item-name.scope-selector-item-name-selectable::after {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-lg);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 18;
line-height: var(--leading-icon-lg);
}
.scope-selector-item .scope-selector-item-name.scope-selector-item-name-selectable::after {
content: var(--tw-content);
color: var(--color-icon-accent);
}
.scope-selector-item .scope-selector-item-name.scope-selector-item-name-selectable::after {
--tw-content: "keyboard_arrow_down";
content: var(--tw-content);
}
.scope-selector-item .scope-selector-item-name.scope-selector-item-name-selectable::after {
content: var(--tw-content);
position: absolute;
}
.scope-selector-item .scope-selector-item-name.scope-selector-item-name-selectable::after {
content: var(--tw-content);
right: calc(0.25rem * 0);
}
.scope-selector-item .scope-selector-item-name.scope-selector-item-name-selectable .scope-selector-item-name-value {
margin-right: calc(0.25rem * 5);
}
.scope-selector-item .scope-selector-item-name.scope-selector-item-name-selectable .scope-selector-item-name-placeholder {
margin-right: calc(0.25rem * 5);
}
.scope-selector-item.scope-selector-item-current .scope-selector-item-name-value:after {
position: absolute;
right: calc(0.25rem * 0);
bottom: calc(0.25rem * 0);
left: calc(0.25rem * 0);
height: calc(0.25rem * 1);
border-radius: var(--radius-xs);
background-color: var(--color-icon-inverted);
--tw-content: "";
content: var(--tw-content);
}
.scope-selector-item.scope-selector-item-current .scope-selector-item-name-selectable .scope-selector-item-name-value:after {
right: calc(0.25rem * 5);
}
.scope-selector-item.scope-selector-item-active {
background-color: var(--color-background-default);
}
@media (hover: hover) {
.scope-selector-item.scope-selector-item-active:has(*:is(.scope-selector-item-name-selectable)):hover {
background-color: var(--color-background-default);
}
}
.scope-selector-item.scope-selector-item-active:has(*:is(.scope-selector-item-name-selectable)):focus {
background-color: var(--color-background-default);
}
.scope-selector-item.scope-selector-item-active .scope-selector-item-name-selectable::after {
--tw-content: "keyboard_arrow_up";
content: var(--tw-content);
}
.scope-selector-company-card {
display: flex;
width: calc(0.25rem * 64);
flex-direction: column;
}
.scope-selector-company-card .scope-selector-company-card-image-wrapper {
height: calc(0.25rem * 32);
width: calc(0.25rem * 60);
border-radius: 0;
display: flex;
align-items: center;
justify-content: center;
}
.scope-selector-company-card .scope-selector-company-card-image-wrapper:has(*:is(.scope-selector-company-card-image-placeholder)) {
background-color: var(--color-background-gray-ultra-light);
}
.scope-selector-company-card .scope-selector-company-card-image-wrapper .scope-selector-company-card-image {
height: calc(0.25rem * 14);
object-fit: contain;
}
.scope-selector-company-card .scope-selector-company-card-image-wrapper .scope-selector-company-card-image.scope-selector-company-card-image-placeholder {
height: calc(0.25rem * 16);
width: calc(0.25rem * 20);
border-radius: var(--radius-xs);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
background-image: url('data:image/svg+xml,');
}
.scope-selector-company-card .scope-selector-company-card-content {
display: flex;
width: 100%;
flex-direction: column;
padding: var(--spacing-lg);
}
.scope-selector-company-card .scope-selector-company-card-content .scope-selector-company-card-name {
width: 100%;
overflow: hidden;
text-align: start;
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 600;
font-style: normal;
font-size: var(--text-base);
line-height: var(--leading-base);
text-overflow: ellipsis;
white-space: nowrap;
color: var(--color-text-default);
}
.scope-selector-company-card .scope-selector-company-card-content .scope-selector-company-card-address {
width: 100%;
overflow: hidden;
text-align: start;
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
text-overflow: ellipsis;
white-space: nowrap;
color: var(--color-text-light);
}
.scope-selector-company-card .scope-selector-company-card-content .scope-selector-company-card-number {
overflow: hidden;
text-align: start;
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
text-overflow: ellipsis;
white-space: nowrap;
color: var(--color-text-ultra-light);
}
.scope-selector-project-card {
width: 100%;
}
.scope-selector-project-card .scope-selector-project-card-content {
display: flex;
width: 100%;
flex-direction: column;
gap: var(--spacing-xs);
padding-block: var(--spacing-base);
padding-right: var(--spacing-base);
padding-left: var(--spacing-lg);
}
.scope-selector-project-card .scope-selector-project-card-content .scope-selector-project-card-content-section {
display: flex;
width: 100%;
flex-direction: row;
gap: var(--spacing-base);
}
.scope-selector-project-card .scope-selector-project-card-content .scope-selector-project-card-content-section:has(*:is(.scope-selector-project-card-company-name)) {
gap: var(--spacing-sm);
}
.scope-selector-project-card .scope-selector-project-card-content .scope-selector-project-card-content-section .scope-selector-project-card-number {
overflow: hidden;
text-align: start;
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
text-overflow: ellipsis;
white-space: nowrap;
color: var(--color-text-ultra-light);
}
.scope-selector-project-card .scope-selector-project-card-content .scope-selector-project-card-content-section .scope-selector-project-card-company-name {
position: relative;
overflow: hidden;
padding-left: calc(0.25rem * 2);
text-align: start;
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
text-overflow: ellipsis;
white-space: nowrap;
color: var(--color-text-ultra-light);
}
.scope-selector-project-card .scope-selector-project-card-content .scope-selector-project-card-content-section .scope-selector-project-card-company-name::before {
content: var(--tw-content);
position: absolute;
}
.scope-selector-project-card .scope-selector-project-card-content .scope-selector-project-card-content-section .scope-selector-project-card-company-name::before {
content: var(--tw-content);
left: calc(0.25rem * 0);
}
.scope-selector-project-card .scope-selector-project-card-content .scope-selector-project-card-content-section .scope-selector-project-card-company-name::before {
content: var(--tw-content);
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
}
.scope-selector-project-card .scope-selector-project-card-content .scope-selector-project-card-content-section .scope-selector-project-card-company-name::before {
content: var(--tw-content);
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
}
.scope-selector-project-card .scope-selector-project-card-content .scope-selector-project-card-content-section .scope-selector-project-card-company-name::before {
content: var(--tw-content);
color: var(--color-text-ultra-light);
}
.scope-selector-project-card .scope-selector-project-card-content .scope-selector-project-card-content-section .scope-selector-project-card-company-name::before {
--tw-content: "\b7";
content: var(--tw-content);
}
.scope-selector-project-card .scope-selector-project-card-content .scope-selector-project-card-content-section .scope-selector-project-card-name {
overflow: hidden;
text-align: start;
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 600;
font-style: normal;
font-size: var(--text-base);
line-height: var(--leading-base);
text-overflow: ellipsis;
white-space: nowrap;
color: var(--color-text-default);
}
.scope-selector-project-card .scope-selector-project-card-content .scope-selector-project-card-content-section .scope-selector-project-card-address {
position: relative;
width: 100%;
overflow: hidden;
padding-left: calc(0.25rem * 3);
text-align: start;
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
text-overflow: ellipsis;
white-space: nowrap;
color: var(--color-text-light);
}
.scope-selector-project-card .scope-selector-project-card-content .scope-selector-project-card-content-section .scope-selector-project-card-address::before {
content: var(--tw-content);
position: absolute;
}
.scope-selector-project-card .scope-selector-project-card-content .scope-selector-project-card-content-section .scope-selector-project-card-address::before {
content: var(--tw-content);
left: calc(0.25rem * -0.5);
}
.scope-selector-project-card .scope-selector-project-card-content .scope-selector-project-card-content-section .scope-selector-project-card-address::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-sm);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 14;
line-height: var(--leading-icon-sm);
}
.scope-selector-project-card .scope-selector-project-card-content .scope-selector-project-card-content-section .scope-selector-project-card-address::before {
content: var(--tw-content);
color: var(--color-text-light);
}
.scope-selector-project-card .scope-selector-project-card-content .scope-selector-project-card-content-section .scope-selector-project-card-address::before {
--tw-content: "location_on";
content: var(--tw-content);
}
.scope-selector-project-card .scope-selector-project-card-content .scope-selector-project-card-content-section .scope-selector-project-card-date {
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
text-wrap: nowrap;
color: var(--color-text-light);
}
.scope-selector-project-card .scope-selector-project-card-content > :nth-child(n):not(:last-child) {
padding-right: calc(0.25rem * 11);
}
.watchlist-panel {
display: flex;
height: fit-content;
width: calc(0.25rem * 80);
flex-direction: column;
background-color: var(--color-background-default);
--tw-shadow: 0px 4px 8px 0px var(--tw-shadow-color, rgba(0, 0, 0, 0.1));
box-shadow:
var(--tw-inset-shadow),
var(--tw-inset-ring-shadow),
var(--tw-ring-offset-shadow),
var(--tw-ring-shadow),
var(--tw-shadow);
max-height: 456px;
overflow-x: hidden;
overflow-y: auto;
}
@container (width >= 39rem) {
.watchlist-panel {
max-height: 768px;
}
}
@container (width >= 66rem) {
.watchlist-panel {
max-height: 616px;
}
}
@container (width >= 83rem) {
.watchlist-panel {
max-height: 696px;
}
}
@container (width >= 99rem) {
.watchlist-panel {
max-height: 768px;
}
}
.watchlist-panel .watchlist-panel-empty {
display: flex;
justify-content: center;
padding: calc(0.25rem * 8);
padding-top: calc(0.25rem * 20);
}
.watchlist-panel .watchlist-panel-empty .watchlist-panel-empty-label {
position: relative;
width: 100%;
text-align: center;
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
color: var(--color-text-placeholder);
}
.watchlist-panel .watchlist-panel-empty .watchlist-panel-empty-label::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-2xl);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 24;
line-height: var(--leading-icon-2xl);
}
.watchlist-panel .watchlist-panel-empty .watchlist-panel-empty-label::before {
content: var(--tw-content);
color: var(--color-icon-disabled);
}
.watchlist-panel .watchlist-panel-empty .watchlist-panel-empty-label::before {
--tw-content: "content_paste";
content: var(--tw-content);
}
.watchlist-panel .watchlist-panel-empty .watchlist-panel-empty-label::before {
content: var(--tw-content);
position: absolute;
}
.watchlist-panel .watchlist-panel-empty .watchlist-panel-empty-label::before {
content: var(--tw-content);
top: calc(0.25rem * -9);
}
.watchlist-panel .watchlist-panel-empty .watchlist-panel-empty-label::before {
content: var(--tw-content);
right: calc(1 / 2 * 100%);
}
.watchlist-panel .watchlist-panel-empty .watchlist-panel-empty-label::before {
content: var(--tw-content);
width: calc(0.25rem * 3);
}
.watchlist-panel .watchlist-panel-header {
display: flex;
justify-content: space-between;
gap: var(--spacing-sm);
padding-inline: var(--spacing-lg);
padding-block: var(--spacing-base);
}
.watchlist-panel .watchlist-panel-header .watchlist-panel-header-label {
font-family: var(--font-default);
letter-spacing: var(--tracking-lg);
font-weight: 400;
font-style: normal;
font-size: var(--text-lg);
line-height: var(--tw-leading, var(--leading-lg));
color: var(--color-text-default);
}
.watchlist-panel .watchlist-panel-header .watchlist-panel-header-button {
cursor: pointer;
--tw-border-style: none;
border-style: none;
background-color: var(--color-background-transparent);
padding-inline: calc(0.25rem * 0);
margin-left: calc(0.25rem * 5);
display: inline-block;
letter-spacing: var(--tracking-base);
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
color: var(--color-text-accent);
position: relative;
text-decoration-line: none;
transition-property:
color,
background-color,
border-color,
outline-color,
text-decoration-color,
fill,
stroke,
--tw-gradient-from,
--tw-gradient-via,
--tw-gradient-to;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
--tw-outline-style: none;
outline-style: none;
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
}
.watchlist-panel .watchlist-panel-header .watchlist-panel-header-button::before {
content: var(--tw-content);
position: absolute;
}
.watchlist-panel .watchlist-panel-header .watchlist-panel-header-button::before {
content: var(--tw-content);
left: calc(0.25rem * -5);
}
.watchlist-panel .watchlist-panel-header .watchlist-panel-header-button::before {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 16;
line-height: var(--leading-icon-base);
}
.watchlist-panel .watchlist-panel-header .watchlist-panel-header-button::before {
content: var(--tw-content);
--tw-leading: calc(0.25rem * 6);
line-height: calc(0.25rem * 6);
}
.watchlist-panel .watchlist-panel-header .watchlist-panel-header-button::before {
content: var(--tw-content);
color: var(--color-icon-accent);
}
.watchlist-panel .watchlist-panel-header .watchlist-panel-header-button:visited {
color: var(--color-text-accent);
}
@media (hover: hover) {
.watchlist-panel .watchlist-panel-header .watchlist-panel-header-button:hover {
text-decoration-line: underline;
}
}
.watchlist-panel .watchlist-panel-header .watchlist-panel-header-button:focus {
text-decoration-line: underline;
}
.watchlist-panel .watchlist-panel-header .watchlist-panel-header-button::before {
--tw-content: "close";
content: var(--tw-content);
}
.watchlist-panel .watchlist-panel-header .watchlist-panel-header-button:disabled {
color: var(--color-text-disabled-light);
cursor: not-allowed;
}
.watchlist-panel .watchlist-panel-header .watchlist-panel-header-button:disabled:visited {
color: var(--color-text-disabled-light);
}
@media (hover: hover) {
.watchlist-panel .watchlist-panel-header .watchlist-panel-header-button:disabled:hover {
text-decoration-line: none;
}
}
.watchlist-panel .watchlist-panel-header .watchlist-panel-header-button:disabled:focus {
text-decoration-line: none;
}
.watchlist-panel .watchlist-panel-header .watchlist-panel-header-button:disabled:active {
pointer-events: none;
}
.watchlist-panel .watchlist-panel-header .watchlist-panel-header-button:disabled::before {
content: var(--tw-content);
color: var(--color-icon-disabled-light);
}
.watchlist-panel .watchlist-panel-header .watchlist-panel-header-button:disabled::after {
content: var(--tw-content);
color: var(--color-icon-disabled-light);
}
.watchlist-panel .watchlist-panel-items > :nth-child(n) {
border-style: var(--tw-border-style);
border-width: 0px;
border-top-style: var(--tw-border-style);
border-top-width: 1px;
--tw-border-style: solid;
border-style: solid;
border-color: var(--color-border-light);
}
.watchlist-panel .watchlist-panel-items .watchlist-panel-item-wrapper {
display: flex;
align-items: stretch;
}
.watchlist-panel .watchlist-panel-items .watchlist-panel-item-wrapper .watchlist-panel-item {
position: relative;
display: flex;
width: 100%;
align-items: flex-start;
gap: var(--spacing-md);
padding-block: calc(0.25rem * 2.5);
padding-right: var(--spacing-3xl);
padding-left: var(--spacing-lg);
background-color: var(--color-background-action);
flex: 1;
cursor: pointer;
--tw-border-style: none;
border-style: none;
transition-property:
color,
background-color,
border-color,
outline-color,
text-decoration-color,
fill,
stroke,
--tw-gradient-from,
--tw-gradient-via,
--tw-gradient-to;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
--tw-outline-style: none;
outline-style: none;
}
@media (hover: hover) {
.watchlist-panel .watchlist-panel-items .watchlist-panel-item-wrapper .watchlist-panel-item:hover {
padding-right: var(--spacing-base);
}
}
.watchlist-panel .watchlist-panel-items .watchlist-panel-item-wrapper .watchlist-panel-item:focus {
padding-right: var(--spacing-base);
}
@media (hover: hover) {
.watchlist-panel .watchlist-panel-items .watchlist-panel-item-wrapper .watchlist-panel-item:hover {
background-color: var(--color-background-action-hover);
}
}
.watchlist-panel .watchlist-panel-items .watchlist-panel-item-wrapper .watchlist-panel-item:focus {
background-color: var(--color-background-action-focus);
}
.watchlist-panel .watchlist-panel-items .watchlist-panel-item-wrapper .watchlist-panel-item .watchlist-panel-item-content {
display: flex;
flex: 1;
flex-direction: column;
align-items: flex-start;
}
.watchlist-panel .watchlist-panel-items .watchlist-panel-item-wrapper .watchlist-panel-item .watchlist-panel-item-title {
text-align: left;
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
color: var(--color-text-default);
}
.watchlist-panel .watchlist-panel-items .watchlist-panel-item-wrapper .watchlist-panel-item .watchlist-panel-item-details {
text-align: left;
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
color: var(--color-text-light);
}
.watchlist-panel .watchlist-panel-items .watchlist-panel-item-wrapper .watchlist-panel-item-button {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--color-icon-accent);
background-color: var(--color-background-transparent);
height: calc(0.25rem * 8);
width: calc(0.25rem * 8);
border-radius: var(--radius-md);
font-size: var(--text-icon-sm);
font-variation-settings: "FILL" 0, "opsz" 14;
line-height: var(--leading-icon-sm);
--tw-border-style: none;
border-style: none;
transition-property:
color,
background-color,
border-color,
outline-color,
text-decoration-color,
fill,
stroke,
--tw-gradient-from,
--tw-gradient-via,
--tw-gradient-to;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
height: calc(0.25rem * 6);
width: calc(0.25rem * 6);
border-radius: var(--radius-sm);
font-family: var(--font-icon);
font-size: var(--text-icon-xs);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 12;
line-height: var(--leading-icon-xs);
height: auto;
align-self: stretch;
border-radius: 0;
display: none;
}
.watchlist-panel .watchlist-panel-items .watchlist-panel-item-wrapper .watchlist-panel-item-button:focus-visible {
--tw-outline-style: none;
outline-style: none;
}
.watchlist-panel .watchlist-panel-items .watchlist-panel-item-wrapper .watchlist-panel-item-button:disabled {
cursor: not-allowed;
}
.watchlist-panel .watchlist-panel-items .watchlist-panel-item-wrapper .watchlist-panel-item-button:disabled {
color: var(--color-icon-disabled-light);
}
@media (hover: hover) {
.watchlist-panel .watchlist-panel-items .watchlist-panel-item-wrapper .watchlist-panel-item-button:enabled:hover {
background-color: var(--color-background-action-hover);
}
}
.watchlist-panel .watchlist-panel-items .watchlist-panel-item-wrapper .watchlist-panel-item-button:enabled:focus {
background-color: var(--color-background-action-focus);
}
.watchlist-panel .watchlist-panel-items .watchlist-panel-item-wrapper .watchlist-panel-item-button:disabled {
background-color: var(--color-background-transparent);
}
.watchlist-panel .watchlist-panel-items .watchlist-panel-item-wrapper .watchlist-panel-item-button::before {
--tw-content: "\e5cd";
content: var(--tw-content);
}
@media (hover: hover) {
.watchlist-panel .watchlist-panel-items .watchlist-panel-item-wrapper .watchlist-panel-item-button:hover {
display: flex;
}
}
.watchlist-panel .watchlist-panel-items .watchlist-panel-item-wrapper .watchlist-panel-item-button:focus {
display: flex;
}
.watchlist-panel .watchlist-panel-items .watchlist-panel-item-wrapper:has(.watchlist-panel-item:hover, .watchlist-panel-item:focus) .watchlist-panel-item-button {
display: flex;
}
.watchlist-panel .watchlist-panel-items .watchlist-panel-item-wrapper:has(.watchlist-panel-item-button:hover, .watchlist-panel-item-button:focus) .watchlist-panel-item {
padding-right: var(--spacing-base);
}
.watchlist-panel .watchlist-panel-items .watchlist-panel-button {
height: calc(0.25rem * 10);
width: calc(0.25rem * 80);
cursor: pointer;
font-family: var(--font-default);
letter-spacing: var(--tracking-sm);
font-weight: 400;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--leading-sm));
color: var(--color-text-accent);
--tw-outline-style: none;
outline-style: none;
background-color: var(--color-background-action);
transition-property:
color,
background-color,
border-color,
outline-color,
text-decoration-color,
fill,
stroke,
--tw-gradient-from,
--tw-gradient-via,
--tw-gradient-to;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
@media (hover: hover) {
.watchlist-panel .watchlist-panel-items .watchlist-panel-button:hover {
background-color: var(--color-background-action-hover);
}
}
.watchlist-panel .watchlist-panel-items .watchlist-panel-button:focus {
background-color: var(--color-background-action-focus);
}
.dropdown {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: var(--spacing-sm);
border-radius: var(--radius-xs);
border-style: var(--tw-border-style);
border-width: 1px;
--tw-border-style: solid;
border-style: solid;
border-color: var(--color-border-transparent);
background-color: var(--color-background-default);
--tw-shadow: 0px 4px 8px 0px var(--tw-shadow-color, rgba(0, 0, 0, 0.1));
box-shadow:
var(--tw-inset-shadow),
var(--tw-inset-ring-shadow),
var(--tw-ring-offset-shadow),
var(--tw-ring-shadow),
var(--tw-shadow);
width: fit-content;
min-width: calc(0.25rem * 40);
}
.dropdown > :nth-child(n):not(:first-child) {
border-style: var(--tw-border-style);
border-width: 0px;
border-top-style: var(--tw-border-style);
border-top-width: 1px;
--tw-border-style: solid;
border-style: solid;
border-color: var(--color-border-light);
}
.dropdown .dropdown-entry {
align-items: center;
align-self: stretch;
padding: var(--spacing-base);
padding-right: calc(0.25rem * 7);
text-align: left;
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
color: var(--color-text-default);
background-color: var(--color-background-action);
position: relative;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
transition-property:
color,
background-color,
border-color,
outline-color,
text-decoration-color,
fill,
stroke,
--tw-gradient-from,
--tw-gradient-via,
--tw-gradient-to;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
--tw-outline-style: none;
outline-style: none;
}
@media (hover: hover) {
.dropdown .dropdown-entry:hover {
background-color: var(--color-background-action-hover);
}
}
.dropdown .dropdown-entry:focus {
background-color: var(--color-background-action-focus);
}
@media (hover: hover) {
.dropdown .dropdown-entry:hover {
cursor: pointer;
}
}
.dropdown .dropdown-entry.dropdown-entry-selected {
color: var(--color-text-disabled);
background-color: var(--color-background-default);
}
@media (hover: hover) {
.dropdown .dropdown-entry.dropdown-entry-selected:hover {
background-color: var(--color-background-default);
}
}
.dropdown .dropdown-entry.dropdown-entry-selected:focus {
background-color: var(--color-background-default);
}
.dropdown .dropdown-entry.dropdown-entry-selected::after {
content: var(--tw-content);
position: absolute;
}
.dropdown .dropdown-entry.dropdown-entry-selected::after {
content: var(--tw-content);
right: calc(0.25rem * 1);
}
.dropdown .dropdown-entry.dropdown-entry-selected::after {
content: var(--tw-content);
font-family: var(--font-icon);
font-size: var(--text-icon-base);
font-weight: 400;
font-variation-settings: "FILL" 0, "opsz" 16;
line-height: var(--leading-icon-base);
}
.dropdown .dropdown-entry.dropdown-entry-selected::after {
content: var(--tw-content);
color: var(--color-icon-disabled);
}
.dropdown .dropdown-entry.dropdown-entry-selected::after {
--tw-content: "check";
content: var(--tw-content);
}
}
@layer theme;
@font-face {
font-family: "Soehne";
font-weight: 400;
src: url("./media/soehne-buch.woff2") format("woff2");
}
@font-face {
font-family: "Soehne";
font-weight: 600;
src: url("./media/soehne-halbfett.woff2") format("woff2");
}
@font-face {
font-family: "Material Symbols Outlined";
font-style: normal;
font-weight: 100 700;
font-display: block;
src: url("./media/material-symbols-outlined.woff2") format("woff2");
}
.material-symbols-outlined {
font-family: "Material Symbols Outlined";
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-feature-settings: "liga";
}
@font-face {
font-family: "Material Symbols Rounded";
font-style: normal;
font-weight: 100 700;
font-display: block;
src: url("./media/material-symbols-rounded.woff2") format("woff2");
}
.material-symbols-rounded {
font-family: "Material Symbols Rounded";
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-feature-settings: "liga";
}
@font-face {
font-family: "Material Symbols Sharp";
font-style: normal;
font-weight: 100 700;
font-display: block;
src: url("./media/material-symbols-sharp.woff2") format("woff2");
}
.material-symbols-sharp {
font-family: "Material Symbols Sharp";
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-feature-settings: "liga";
}
:root {
--color-background-menu: #333333;
--bp-sm: 640px;
--bp-md: 768px;
--bp-lg: 1024px;
--bp-xl: 1280px;
--bp-xxl: 1536px;
}
.match-item-action-sheet .action-sheet-title {
background: var(--ion-color-secondary);
color: Black;
font-family: var(--font-default);
letter-spacing: var(--tracking-xl);
font-weight: 600;
font-style: normal;
font-size: var(--text-xl);
line-height: var(--tw-leading, var(--leading-xl));
}
.match-item-action-sheet .action-sheet-sub-title {
color: grey;
padding-top: 0px;
}
.match-item-action-sheet .action-sheet-group:first-of-type {
border-radius: 4px 4px 0px 0px;
}
.match-item-action-sheet .action-sheet-button {
border-bottom: 1px solid var(--ion-color-medium);
padding: 16px;
}
.match-item-action-sheet .action-sheet-cancel {
color: var(--ion-color-danger);
}
ion-modal.auto-height.bottom {
align-items: flex-end;
}
ion-modal.auto-height.no-limit {
--max-width: 100vw;
}
ion-modal.auto-height::part(content) {
border-radius: 4px;
}
@media only screen and (orientation: landscape) {
ion-modal.auto-height {
--height: auto;
--width: auto;
--min-width: 400px;
--max-width: calc(60% - 1px);
}
ion-modal.auto-height.big {
--max-width: calc(80% - 1px);
}
}
@media only screen and (orientation: portrait) {
ion-modal.auto-height {
--height: auto;
--width: auto;
--max-width: calc(100% - 32px);
}
}
ion-modal.auto-height .ion-page {
position: relative;
display: block;
contain: content;
}
ion-modal.auto-height .ion-page .inner-content {
overflow-y: hidden;
padding: var(--spacing-base);
}
@media screen and (max-width: 640px) {
ion-modal.modal-wrapper::part(content) {
--height: calc(100% - 1px + 1px);
--width: calc(100% - 1px + 1px);
--max-width: calc(100% - 1px + 1px);
--max-height: calc(100% - 1px + 1px);
}
}
ion-modal.modal-wrapper::part(content) {
--height: auto;
--width: auto;
--max-width: calc(100% - 32px);
--max-height: calc(80% - 1px + 1px);
--border-raidus: 4px;
flex-direction: column;
display: flex;
}
ion-modal.modal-wrapper {
overflow-y: auto;
}
ion-modal.modal-wrapper .ion-page {
overflow-y: auto;
display: flex;
flex-direction: column;
}
@media screen and (max-width: 640px) {
ion-modal.select-modal-wrapper::part(content) {
--height: calc(100% - 1px + 1px);
--width: calc(100% - 1px + 1px);
--max-width: calc(100% - 1px + 1px);
--max-height: calc(100% - 1px + 1px);
}
}
ion-modal.select-modal-wrapper::part(content) {
--height: auto;
--width: auto;
--max-width: calc(100% - 32px);
--max-height: calc(80% - 1px + 1px);
--border-raidus: 4px;
flex-direction: column;
display: flex;
}
ion-modal.select-modal-wrapper {
overflow-y: auto;
}
ion-modal.select-modal-wrapper .ion-page {
overflow-y: auto;
display: flex;
flex-direction: column;
}
@media screen and (max-width: 640px) {
ion-modal.alert-wrapper::part(content) {
--max-width: calc(100% - 32px);
}
}
ion-modal.alert-wrapper::part(content) {
--max-width: 500px;
--max-height: 350px;
--height: auto;
--width: auto;
--border-radius: 0px;
display: flex;
flex-direction: column;
}
ion-modal.alert-wrapper {
overflow-y: auto;
}
ion-modal.alert-wrapper .ion-page {
overflow-y: auto;
display: flex;
flex-direction: column;
}
ion-modal.modal-page-wrapper::part(content) {
--height: calc(100% - 1px + 1px);
--width: calc(100% - 1px + 1px);
--max-width: calc(100% - 1px + 1px);
--max-height: calc(100% - 1px + 1px);
flex-direction: column;
display: flex;
}
ion-modal.modal-page-wrapper {
overflow-y: auto;
}
ion-modal.modal-page-wrapper .ion-page {
overflow-y: auto;
display: flex;
flex-direction: column;
}
ion-modal.modal-page-wrapper .page-wrapper {
height: 100%;
width: 100%;
}
ion-modal.modal-slide-over-wrapper::part(content) {
--max-width: 100%;
--max-width: min(90vw, 640px);
--width: max-content;
--max-height: 100%;
--height: 100%;
position: absolute;
border-radius: 0px;
top: 0px;
right: 0px;
bottom: 0px;
opacity: 1;
display: flex;
}
ion-modal.modal-slide-over-wrapper .ion-page {
overflow-y: auto;
display: flex;
flex: 1;
flex-direction: column;
}
ion-modal.modal-slide-over-wrapper.show-modal::part(content) {
transform: translateX(0) !important;
}
ion-modal.modal-bottom-sheet-wrapper::part(content) {
--width: 100%;
--max-height: calc(80% - 1px + 1px);
--height: 80%;
position: absolute;
border-radius: 0px;
right: 0px;
left: 0px;
bottom: 0px;
opacity: 1;
display: flex;
}
ion-modal.modal-bottom-sheet-wrapper .ion-page {
overflow-y: auto;
display: flex;
flex: 1;
flex-direction: column;
}
ion-modal.modal-bottom-sheet-wrapper.show-modal::part(content) {
transform: translateY(0) !important;
}
ion-modal.date-picker-modal::part(content) {
border-radius: 4px;
}
@media only screen and (orientation: landscape) {
ion-modal.date-picker-modal::part(content) {
--height: calc(80% - 0.1px);
--width: calc(50% - 0.1px);
}
}
@media only screen and (orientation: portrait) and (max-width: 640px) {
ion-modal.date-picker-modal::part(content) {
--height: calc(100% - 1px + 1px);
--width: calc(100% - 1px + 1px);
}
}
@media only screen and (orientation: portrait) and (min-width: 640px) {
ion-modal.date-picker-modal::part(content) {
--height: calc(50% - 1px + 1px);
--width: calc(80% - 1px + 1px);
}
}
ion-modal.date-picker-modal .ion-page {
position: relative;
height: 100%;
width: 100%;
display: block;
contain: content;
}
ion-modal.date-picker-modal .ion-page .inner-content {
overflow-y: hidden;
padding: var(--spacing-base);
}
ion-modal.modal-default.show-modal:last-of-type {
--box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4);
--backdrop-opacity: var(--ion-backdrop-opacity, 0.32);
}
.headerbar-action-select {
padding-right: 1.875rem !important;
}
@layer base {
:root {
--tw-inset-shadow: 0 0 #0000;
--tw-inset-ring-shadow: 0 0 #0000;
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
}
}
ion-app {
top: env(safe-area-inset-top);
bottom: env(safe-area-inset-bottom);
left: env(safe-area-inset-left);
right: env(safe-area-inset-right);
}
ion-modal.errorModal::part(content) {
border: 2px solid var(--color-border-alert);
border-radius: 5px;
}
ion-modal.errorModal {
--height: auto;
--width: auto;
--min-width: 400px;
--min-height: 200px;
--max-width: 90vw;
--max-height: calc(100vh - 112px - (2 * var(--spacing-base)));
}
ion-modal.small-modal {
--max-width: calc(100vw - 24px);
}
@media (min-width: 640px) {
ion-modal.small-modal {
--max-width: 25rem;
}
}
.doka-modal-description li {
list-style-type: "- ";
margin-left: 10px;
}
.doka-button-danger,
.doka-button-secondary {
border-style: solid;
}
h1 {
font-family: var(--font-default);
letter-spacing: var(--tracking-6xl);
font-weight: 600;
font-style: normal;
font-size: var(--text-6xl);
line-height: var(--tw-leading, var(--leading-6xl));
}
h2 {
font-family: var(--font-default);
letter-spacing: var(--tracking-5xl);
font-weight: 600;
font-style: normal;
font-size: var(--text-5xl);
line-height: var(--tw-leading, var(--leading-5xl));
}
h3 {
font-family: var(--font-default);
letter-spacing: var(--tracking-4xl);
font-weight: 600;
font-style: normal;
font-size: var(--text-4xl);
line-height: var(--tw-leading, var(--leading-4xl));
}
h4 {
font-family: var(--font-default);
letter-spacing: var(--tracking-3xl);
font-weight: 600;
font-style: normal;
font-size: var(--text-3xl);
line-height: var(--tw-leading, var(--leading-3xl));
}
h5 {
font-family: var(--font-default);
letter-spacing: var(--tracking-2xl);
font-weight: 600;
font-style: normal;
font-size: var(--text-2xl);
line-height: var(--tw-leading, var(--leading-2xl));
}
h6 {
font-family: var(--font-default);
letter-spacing: var(--tracking-xl);
font-weight: 600;
font-style: normal;
font-size: var(--text-xl);
line-height: var(--tw-leading, var(--leading-xl));
}
body {
font-family: var(--font-default);
letter-spacing: var(--tracking-base);
font-weight: 400;
font-style: normal;
font-size: var(--text-base);
line-height: var(--tw-leading, var(--leading-base));
}
html,
body {
min-height: 100%;
margin: 0;
padding: 0;
}
* :where:not(.sb-unstyled) {
font-family: Soehne, sans-serif;
}
.bold {
font-weight: 600;
}
.doka-action-sheet .action-sheet-container {
border-radius: 4px 4px 0px 0px;
overflow: hidden;
}
.doka-action-sheet .action-sheet-cancel {
color: var(--color-text-alert);
}
.doka-action-sheet .action-sheet-cancel:hover {
color: var(--color-text-alert) !important;
}
.overlay-hidden {
display: none !important;
}
:root {
--sm: 40rem;
--md: 48rem;
--lg: 64rem;
--xl: 80rem;
--2xl: 96rem;
}
ion-popover.date-picker-popover {
--width: fit-content;
--height: auto;
}
@layer components {
.data-table.synthetic-details-table:has(.data-table-header-sticky):not(:has(.data-table-footer)) .data-table-body > :last-child .data-table-cell {
border-bottom: 0 !important;
}
.data-table.synthetic-details-table .data-table-body > .data-table-row:has(+ .data-table-row-detail) {
border-bottom: 0 !important;
font-weight: bold;
}
.data-table.synthetic-details-table .data-table-body > .data-table-row-detail {
font-weight: 400;
}
.data-table.synthetic-details-table:has(.data-table-header-sticky, .data-table-footer-sticky) .data-table-body > .data-table-row:not(.data-table-row-detail) > .data-table-detail-card {
border-bottom: 0;
}
.data-table.synthetic-details-table .data-table-row-detail > .data-table-cell {
padding-inline: 0 !important;
}
.data-table.synthetic-details-table .data-table-row-detail .data-table-header .data-table-cell {
font-weight: var(--font-weight-normal);
}
.data-table.synthetic-details-table .data-table-body > .data-table-row-detail {
background-color: var(--color-background-gray-ultra-ultra-light);
}
.data-table.synthetic-details-table .data-table-detail-card {
border: 2px solid var(--color-border-light) !important;
border-radius: var(--radius-md);
background: var(--color-background-gray-ultra-ultra-light);
padding-inline: var(--spacing-lg);
}
.data-table.synthetic-details-table:has(.data-table-header-sticky, .data-table-footer-sticky) .data-table-body > .data-table-row > .data-table-cell {
border-bottom: 0 !important;
}
.data-table.synthetic-details-table .data-table-body .data-table-row .data-table-cell {
border-bottom: 0px;
}
.data-table.synthetic-details-table .data-table-header > .data-table-row {
border-bottom: 0;
}
.data-table.synthetic-details-table .data-table-detail-card .data-table-cell-virtual-scroll-sticky {
background: unset;
z-index: unset;
}
}
@property --tw-rotate-x { syntax: "*"; inherits: false; }
@property --tw-rotate-y { syntax: "*"; inherits: false; }
@property --tw-rotate-z { syntax: "*"; inherits: false; }
@property --tw-skew-x { syntax: "*"; inherits: false; }
@property --tw-skew-y { syntax: "*"; inherits: false; }
@property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; }
@property --tw-font-weight { syntax: "*"; inherits: false; }
@property --tw-outline-style { syntax: "*"; inherits: false; initial-value: solid; }
@property --tw-blur { syntax: "*"; inherits: false; }
@property --tw-brightness { syntax: "*"; inherits: false; }
@property --tw-contrast { syntax: "*"; inherits: false; }
@property --tw-grayscale { syntax: "*"; inherits: false; }
@property --tw-hue-rotate { syntax: "*"; inherits: false; }
@property --tw-invert { syntax: "*"; inherits: false; }
@property --tw-opacity { syntax: "*"; inherits: false; }
@property --tw-saturate { syntax: "*"; inherits: false; }
@property --tw-sepia { syntax: "*"; inherits: false; }
@property --tw-drop-shadow { syntax: "*"; inherits: false; }
@property --tw-drop-shadow-color { syntax: "*"; inherits: false; }
@property --tw-drop-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; }
@property --tw-drop-shadow-size { syntax: "*"; inherits: false; }
@property --tw-ease { syntax: "*"; inherits: false; }
@keyframes spin {
to {
transform: rotate(360deg);
}
}
@layer properties {
@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
*,
::before,
::after,
::backdrop {
--tw-rotate-x: initial;
--tw-rotate-y: initial;
--tw-rotate-z: initial;
--tw-skew-x: initial;
--tw-skew-y: initial;
--tw-border-style: solid;
--tw-font-weight: initial;
--tw-outline-style: solid;
--tw-blur: initial;
--tw-brightness: initial;
--tw-contrast: initial;
--tw-grayscale: initial;
--tw-hue-rotate: initial;
--tw-invert: initial;
--tw-opacity: initial;
--tw-saturate: initial;
--tw-sepia: initial;
--tw-drop-shadow: initial;
--tw-drop-shadow-color: initial;
--tw-drop-shadow-alpha: 100%;
--tw-drop-shadow-size: initial;
--tw-ease: initial;
}
}
}
/* src/theme/variables.scss */
/* angular:styles/global:styles */
/*# sourceMappingURL=styles.css.map */