html {
--os-black-hsl: 240, 3%, 17%;
--os-color-black: hsl(var(--os-black-hsl));
--os-white-hsl: 0, 0%, 99%;
--os-color-white: hsl(var(--os-white-hsl));
--os-background-1: var(--os-color-white);
--os-background-2: var(--os-color-grey-100);
--os-background-3: var(--os-color-grey-200);
--os-background-4: var(--os-color-grey-300);
--os-foreground-1: var(--os-color-black);
--os-foreground-2: var(--os-color-grey-700);
--os-foreground-3: var(--os-color-grey-500);
--os-foreground-4: var(--os-color-grey-300);
--os-grey-hs: 240, 4%;
--os-color-grey-100: hsl(var(--os-grey-hs), 97%);
--os-color-grey-200: hsl(var(--os-grey-hs), 94%);
--os-color-grey-300: hsl(var(--os-grey-hs), 90%);
--os-color-grey-400: hsl(var(--os-grey-hs), 85%);
--os-color-grey-500: hsl(var(--os-grey-hs), 75%);
--os-color-grey-600: hsl(var(--os-grey-hs), 60%);
--os-color-grey-700: hsl(var(--os-grey-hs), 50%);
--os-color-grey-800: hsl(var(--os-grey-hs), 40%);
--os-color-grey-900: hsl(var(--os-grey-hs), 30%);
--os-primary-hs: 240, 60%;
--os-color-primary-100: hsl(var(--os-primary-hs), 98%);
--os-color-primary-200: hsl(var(--os-primary-hs), 94%);
--os-color-primary-300: hsl(var(--os-primary-hs), 84%);
--os-color-primary-400: hsl(var(--os-primary-hs), 73%);
--os-color-primary-500: hsl(var(--os-primary-hs), 64%);
--os-color-primary-600: hsl(var(--os-primary-hs), 55%);
--os-color-primary-700: hsl(var(--os-primary-hs), 50%);
--os-color-primary-800: hsl(var(--os-primary-hs), 45%);
--os-color-primary-900: hsl(var(--os-primary-hs), 40%);
--os-color-primary-05pct: hsla(var(--os-primary-hs), 60%, 0.05);
--os-color-primary-10pct: hsla(var(--os-primary-hs), 60%, 0.1);
--os-color-primary-20pct: hsla(var(--os-primary-hs), 60%, 0.2);
--os-color-primary-30pct: hsla(var(--os-primary-hs), 60%, 0.3);
--os-color-primary-40pct: hsla(var(--os-primary-hs), 60%, 0.4);
--os-color-primary-50pct: hsla(var(--os-primary-hs), 60%, 0.5);
--os-color-primary-60pct: hsla(var(--os-primary-hs), 60%, 0.6);
--os-color-primary-70pct: hsla(var(--os-primary-hs), 60%, 0.7);
--os-color-primary-80pct: hsla(var(--os-primary-hs), 60%, 0.8);
--os-color-primary-90pct: hsla(var(--os-primary-hs), 60%, 0.9);
--os-color-primary-98pct: hsla(var(--os-primary-hs), 60%, 0.98);
--os-accent-hs: 35, 80%;
--os-color-accent-100: hsl(var(--os-accent-hs), 98%);
--os-color-accent-200: hsl(var(--os-accent-hs), 94%);
--os-color-accent-300: hsl(var(--os-accent-hs), 84%);
--os-color-accent-400: hsl(var(--os-accent-hs), 73%);
--os-color-accent-500: hsl(var(--os-accent-hs), 60%);
--os-color-accent-600: hsl(var(--os-accent-hs), 55%);
--os-color-accent-700: hsl(var(--os-accent-hs), 50%);
--os-color-accent-800: hsl(var(--os-accent-hs), 45%);
--os-color-accent-900: hsl(var(--os-accent-hs), 40%);
--os-color-accent-05pct: hsla(var(--os-accent-hs), 60%, 0.05);
--os-color-accent-10pct: hsla(var(--os-accent-hs), 60%, 0.1);
--os-color-accent-20pct: hsla(var(--os-accent-hs), 60%, 0.2);
--os-color-accent-30pct: hsla(var(--os-accent-hs), 60%, 0.3);
--os-color-accent-40pct: hsla(var(--os-accent-hs), 60%, 0.4);
--os-color-accent-50pct: hsla(var(--os-accent-hs), 60%, 0.5);
--os-color-accent-60pct: hsla(var(--os-accent-hs), 60%, 0.6);
--os-color-accent-70pct: hsla(var(--os-accent-hs), 60%, 0.7);
--os-color-accent-80pct: hsla(var(--os-accent-hs), 60%, 0.8);
--os-color-accent-90pct: hsla(var(--os-accent-hs), 60%, 0.9);
--os-color-accent-98pct: hsla(var(--os-accent-hs), 60%, 0.98);
--os-warning-hs: 60, 70%;
--os-color-warning-100: hsl(var(--os-warning-hs), 98%);
--os-color-warning-200: hsl(var(--os-warning-hs), 94%);
--os-color-warning-300: hsl(var(--os-warning-hs), 84%);
--os-color-warning-400: hsl(var(--os-warning-hs), 74%);
--os-color-warning-500: hsl(var(--os-warning-hs), 60%);
--os-color-warning-600: hsl(var(--os-warning-hs), 55%);
--os-color-warning-700: hsl(var(--os-warning-hs), 50%);
--os-color-warning-800: hsl(var(--os-warning-hs), 45%);
--os-color-warning-900: hsl(var(--os-warning-hs), 40%);
--os-color-warning-05pct: hsla(var(--os-warning-hs), 60%, 0.05);
--os-color-warning-10pct: hsla(var(--os-warning-hs), 60%, 0.1);
--os-color-warning-20pct: hsla(var(--os-warning-hs), 60%, 0.2);
--os-color-warning-30pct: hsla(var(--os-warning-hs), 60%, 0.3);
--os-color-warning-40pct: hsla(var(--os-warning-hs), 60%, 0.4);
--os-color-warning-50pct: hsla(var(--os-warning-hs), 60%, 0.5);
--os-color-warning-60pct: hsla(var(--os-warning-hs), 60%, 0.6);
--os-color-warning-70pct: hsla(var(--os-warning-hs), 60%, 0.7);
--os-color-warning-80pct: hsla(var(--os-warning-hs), 60%, 0.8);
--os-color-warning-90pct: hsla(var(--os-warning-hs), 60%, 0.9);
--os-color-warning-98pct: hsla(var(--os-warning-hs), 60%, 0.98);
--os-danger-hs: 350, 70%;
--os-color-danger-100: hsl(var(--os-danger-hs), 98%);
--os-color-danger-200: hsl(var(--os-danger-hs), 94%);
--os-color-danger-300: hsl(var(--os-danger-hs), 84%);
--os-color-danger-400: hsl(var(--os-danger-hs), 74%);
--os-color-danger-500: hsl(var(--os-danger-hs), 60%);
--os-color-danger-600: hsl(var(--os-danger-hs), 55%);
--os-color-danger-700: hsl(var(--os-danger-hs), 50%);
--os-color-danger-800: hsl(var(--os-danger-hs), 45%);
--os-color-danger-900: hsl(var(--os-danger-hs), 40%);
--os-color-danger-05pct: hsla(var(--os-danger-hs), 50%, 0.05);
--os-color-danger-10pct: hsla(var(--os-danger-hs), 50%, 0.1);
--os-color-danger-20pct: hsla(var(--os-danger-hs), 50%, 0.2);
--os-color-danger-30pct: hsla(var(--os-danger-hs), 50%, 0.3);
--os-color-danger-40pct: hsla(var(--os-danger-hs), 50%, 0.4);
--os-color-danger-50pct: hsla(var(--os-danger-hs), 50%, 0.5);
--os-color-danger-60pct: hsla(var(--os-danger-hs), 50%, 0.6);
--os-color-danger-70pct: hsla(var(--os-danger-hs), 50%, 0.7);
--os-color-danger-80pct: hsla(var(--os-danger-hs), 50%, 0.8);
--os-color-danger-90pct: hsla(var(--os-danger-hs), 50%, 0.9);
--os-color-danger-98pct: hsla(var(--os-danger-hs), 50%, 0.98);
--os-error-color: var(--os-text-danger-color);
--os-success-hs: 150, 70%;
--os-color-success-100: hsl(var(--os-success-hs), 95%);
--os-color-success-200: hsl(var(--os-success-hs), 90%);
--os-color-success-300: hsl(var(--os-success-hs), 80%);
--os-color-success-400: hsl(var(--os-success-hs), 68%);
--os-color-success-500: hsl(var(--os-success-hs), 60%);
--os-color-success-600: hsl(var(--os-success-hs), 52%);
--os-color-success-700: hsl(var(--os-success-hs), 40%);
--os-color-success-800: hsl(var(--os-success-hs), 25%);
--os-color-success-900: hsl(var(--os-success-hs), 15%);
--os-color-success-05pct: hsla(var(--os-success-hs), 55%, 0.05);
--os-color-success-10pct: hsla(var(--os-success-hs), 55%, 0.1);
--os-color-success-20pct: hsla(var(--os-success-hs), 55%, 0.2);
--os-color-success-30pct: hsla(var(--os-success-hs), 55%, 0.3);
--os-color-success-40pct: hsla(var(--os-success-hs), 55%, 0.4);
--os-color-success-50pct: hsla(var(--os-success-hs), 55%, 0.5);
--os-color-success-60pct: hsla(var(--os-success-hs), 55%, 0.6);
--os-color-success-70pct: hsla(var(--os-success-hs), 55%, 0.7);
--os-color-success-80pct: hsla(var(--os-success-hs), 55%, 0.8);
--os-color-success-90pct: hsla(var(--os-success-hs), 55%, 0.9);
--os-color-success-98pct: hsla(var(--os-success-hs), 55%, 0.98);
--os-color-shade-05pct: hsla(var(--os-black-hsl), 0.05);
--os-color-shade-10pct: hsla(var(--os-black-hsl), 0.1);
--os-color-shade-20pct: hsla(var(--os-black-hsl), 0.2);
--os-color-shade-30pct: hsla(var(--os-black-hsl), 0.3);
--os-color-shade-40pct: hsla(var(--os-black-hsl), 0.4);
--os-color-shade-50pct: hsla(var(--os-black-hsl), 0.5);
--os-color-shade-60pct: hsla(var(--os-black-hsl), 0.6);
--os-color-shade-70pct: hsla(var(--os-black-hsl), 0.7);
--os-color-shade-80pct: hsla(var(--os-black-hsl), 0.8);
--os-color-shade-90pct: hsla(var(--os-black-hsl), 0.9);
--os-color-shade-98pct: hsla(var(--os-black-hsl), 0.98);
--os-color-tint-05pct: hsla(var(--os-white-hsl), 0.05);
--os-color-tint-10pct: hsla(var(--os-white-hsl), 0.1);
--os-color-tint-20pct: hsla(var(--os-white-hsl), 0.2);
--os-color-tint-30pct: hsla(var(--os-white-hsl), 0.3);
--os-color-tint-40pct: hsla(var(--os-white-hsl), 0.4);
--os-color-tint-50pct: hsla(var(--os-white-hsl), 0.5);
--os-color-tint-60pct: hsla(var(--os-white-hsl), 0.6);
--os-color-tint-70pct: hsla(var(--os-white-hsl), 0.7);
--os-color-tint-80pct: hsla(var(--os-white-hsl), 0.8);
--os-color-tint-90pct: hsla(var(--os-white-hsl), 0.9);
--os-color-tint-98pct: hsla(var(--os-white-hsl), 0.98);
--os-text-color: var(--os-foreground-1);
--os-text-contrast-color: var(--os-color-white);
--os-text-primary-color: var(--os-color-primary-600);
--os-text-secondary-color: var(--os-foreground-2);
--os-text-tertiary-color: var(--os-foreground-3);
--os-text-danger-color: var(--os-color-danger-600);
--os-text-success-color: var(--os-color-success-600);
--os-text-warning-color: var(--os-color-warning-900);
}
:root {
--os-font-family:
"Roboto", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji",
"Segoe UI Emoji", "Segoe UI Symbol";
--os-font-weight: 400;
--os-heading-font-family:
"Roboto", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji",
"Segoe UI Emoji", "Segoe UI Symbol";
--os-heading-font-weight: 500;
--os-font-size-2xs: 0.625rem;
--os-font-size-xs: 0.75rem;
--os-font-size-sm: 0.875rem;
--os-font-size-md: 1rem;
--os-font-size-lg: 1.125rem;
--os-font-size-xl: 1.25rem;
--os-font-size-2xl: 1.5rem;
--os-font-size-3xl: 1.875rem;
--os-font-size-4xl: 2.25rem;
--os-font-size-5xl: 3rem;
--os-font-size-6xl: 3.75rem;
--os-font-size-7xl: 4.5rem;
--os-font-size-8xl: 6rem;
--os-font-size-9xl: 8rem;
--os-line-height-1: 100%;
--os-line-height-2: 110%;
--os-line-height-3: 125%;
--os-line-height-4: 150%;
--os-line-height-5: 175%;
--os-line-height-6: 200%;
--os-line-height-7: 250%;
--os-line-height-8: 300%;
--os-icon-size: 1em;
--os-transition-duration: 0.2s;
--os-form-element-transition:
background-color var(--os-transition-duration),
color var(--os-transition-duration),
border-color var(--os-transition-duration),
box-shadow var(--os-transition-duration);
--os-list-item-transition:
background-color var(--os-transition-duration),
border-color var(--os-transition-duration),
box-shadow var(--os-transition-duration);
--os-acion-icon-transition:
background-color var(--os-transition-duration),
color var(--os-transition-duration),
box-shadow var(--os-transition-duration);
--os-mask-background: hsla(var(--os-black-hsl), 0.04);
--os-inputList-Item-focus-shadow: inset 0 0 0 0.15rem
var(--os-focus-outline-color);
--os-focus-outline-color: var(--os-color-primary-50pct);
--os-action-icon-width: 2rem;
--os-action-icon-height: 2rem;
--os-action-icon-color: var(--os-text-secondary-color);
--os-action-icon-border: 0 none;
--os-action-icon-background: transparent;
--os-action-icon-border-radius: 50%;
--os-action-icon-transition:
background-color var(--os-transition-duration),
color var(--os-transition-duration),
box-shadow var(--os-transition-duration);
--os-action-icon-hover-color: var(--os-foreground-1);
--os-action-icon-hover-border-color: transparent;
--os-action-icon-hover-background: var(--os-shade-10pct);
--os-loading-icon-font-size: 2rem;
--os-base-unit: 1rem;
--os-size-4xs: 0.125rem;
--os-size-3xs: 0.25rem;
--os-size-2xs: 0.375rem;
--os-size-xs: 0.5rem;
--os-size-sm: 0.75rem;
--os-size-md: 1rem;
--os-size-lg: 1.5rem;
--os-size-xl: 2rem;
--os-size-2xl: 2.5rem;
--os-size-3xl: 3rem;
--os-size-4xl: 4rem;
--os-size-5xl: 5rem;
--os-size-6xl: 8rem;
--os-core-component-height-xs: calc(var(--os-base-unit) * 1.875);
--os-core-component-height-sm: calc(var(--os-base-unit) * 2.25);
--os-core-component-height-md: calc(var(--os-base-unit) * 2.5);
--os-core-component-height-lg: calc(var(--os-base-unit) * 3);
--os-core-component-height-xl: calc(var(--os-base-unit) * 3.75);
--os-space-4xs: var(--os-size-4xs);
--os-space-3xs: var(--os-size-3xs);
--os-space-2xs: var(--os-size-2xs);
--os-space-xs: var(--os-size-xs);
--os-space-sm: var(--os-size-sm);
--os-space-md: var(--os-size-md);
--os-space-lg: var(--os-size-lg);
--os-space-xl: var(--os-size-xl);
--os-space-2xl: var(--os-size-2xl);
--os-space-3xl: var(--os-size-3xl);
--os-space-4xl: var(--os-size-4xl);
--os-space-5xl: var(--os-size-5xl);
--os-space-6xl: var(--os-size-6xl);
--space-16-24-32: 32px;
--os-inline-spacing: 0.5em;
--os-border-radius: 0.375rem;
--os-border-radius-xs: calc(var(--os-border-radius) * 0.3334);
--os-border-radius-sm: calc(var(--os-border-radius) * 0.6664);
--os-border-radius-md: var(--os-border-radius);
--os-border-radius-lg: calc(var(--os-border-radius) * 1.3334);
--os-border-radius-xl: calc(var(--os-border-radius) * 1.6664);
--os-border-radius-round: 2000px;
--os-border-radius-100: 100%;
--os-link-decoration: none;
--os-link-font-weight: 500;
--os-link-color: var(--os-text-primary-color);
--os-link-font-family: var(--os-font-family);
--os-focus-ring-thickness: 0.2rem;
--os-focus-ring-color: var(--os-color-primary-40pct);
--os-disabled-opacity: 0.5;
--os-submenu-header-margin: 0;
--os-submenu-header-padding: 0.75rem 1rem;
--os-submenu-header-text-color: var(--os-foreground-1);
--os-submenu-header-background: var(--os-background-1);
--os-submenu-header-font-weight: 700;
--os-submenu-header-font-size: 0.875em;
--os-outer-header-height: calc(var(--os-base-unit) * 4);
--os-highlight-text-color: currentColor;
--os-highlight-background: var(--os-color-primary-10pct);
--os-divider: 1px solid var(--os-text-secondary-color);
--os-shadow-2xs: 0 0 2px 0 var(--os-color-shade-10pct);
--os-shadow-xs: 0 1px 3px 0 var(--os-color-shade-10pct);
--os-shadow-sm: 0 1px 6px 1px var(--os-color-shade-10pct);
--os-shadow-md: 0 2px 12px 1px var(--os-color-shade-10pct);
--os-shadow-lg: 0 2px 16px 1px var(--os-color-shade-10pct);
--os-shadow-xl: 0 2px 24px 1px var(--os-color-shade-10pct);
--os-shadow-2xl: 0 1px 48px 1px var(--os-color-shade-10pct);
--os-toggle-background: var(--os-background-3);
--os-toggle-active-background: var(--os-color-primary-500);
--os-toggle-knob-color: var(--os-background-1);
}
.grid {
grid-template-rows: repeat(auto-fill, 1fr);
grid-template-columns: repeat(4, 1fr);
gap: 24px;
padding: 24px;
display: grid;
}
.item-placement-dense {
grid-auto-flow: dense;
}
.order-0 {
order: 0;
}
.order-7 {
order: 7;
}
.order-8 {
order: 8;
}
@media screen and (min-width: 992px) {
.grid {
gap: 24px;
padding: 24px;
}
.xl-row-span-1 {
grid-row: span 1;
}
.xl-row-span-2 {
grid-row: span 2;
}
.xl-row-span-3 {
grid-row: span 3;
}
.xl-row-span-4 {
grid-row: span 4;
}
.xl-row-span-5 {
grid-row: span 5;
}
.xl-row-span-6 {
grid-row: span 6;
}
.xl-col-span-1 {
grid-column: span 1;
}
.xl-col-span-2 {
grid-column: span 2;
}
.xl-col-span-3 {
grid-column: span 3;
}
.xl-col-span-4 {
grid-column: span 4;
}
.xl-order-0 {
order: 0;
}
.xl-order-1 {
order: 1;
}
.xl-order-2 {
order: 2;
}
.xl-order-3 {
order: 3;
}
.xl-order-4 {
order: 4;
}
.xl-order-5 {
order: 5;
}
.xl-order-6 {
order: 6;
}
.xl-order-7 {
order: 7;
}
.xl-order-8 {
order: 8;
}
}
@media (max-width: 991px) {
.grid {
gap: 20px;
padding: 20px;
}
.lg-row-span-1 {
grid-row: span 1;
}
.lg-row-span-2 {
grid-row: span 2;
}
.lg-row-span-3 {
grid-row: span 3;
}
.lg-row-span-4 {
grid-row: span 4;
}
.lg-row-span-5 {
grid-row: span 5;
}
.lg-row-span-6 {
grid-row: span 6;
}
.lg-col-span-1 {
grid-column: span 1;
}
.lg-col-span-2 {
grid-column: span 2;
}
.lg-col-span-3 {
grid-column: span 3;
}
.lg-col-span-4 {
grid-column: span 4;
}
.lg-order-0 {
order: 0;
}
.lg-order-1 {
order: 1;
}
.lg-order-2 {
order: 2;
}
.lg-order-3 {
order: 3;
}
.lg-order-4 {
order: 4;
}
.lg-order-5 {
order: 5;
}
.lg-order-6 {
order: 6;
}
.lg-order-7 {
order: 7;
}
.lg-order-8 {
order: 8;
}
}
@media (max-width: 767px) {
.grid {
gap: 16px;
padding: 16px;
}
.md-row-span-1 {
grid-row: span 1;
}
.md-row-span-2 {
grid-row: span 2;
}
.md-row-span-3 {
grid-row: span 3;
}
.md-row-span-4 {
grid-row: span 4;
}
.md-row-span-5 {
grid-row: span 5;
}
.md-row-span-6 {
grid-row: span 6;
}
.md-col-span-1 {
grid-column: span 1;
}
.md-col-span-2 {
grid-column: span 2;
}
.md-col-span-3 {
grid-column: span 3;
}
.md-col-span-4 {
grid-column: span 4;
}
.md-order-0 {
order: 0;
}
.md-order-1 {
order: 1;
}
.md-order-2 {
order: 2;
}
.md-order-3 {
order: 3;
}
.md-order-4 {
order: 4;
}
.md-order-5 {
order: 5;
}
.md-order-6 {
order: 6;
}
.md-order-7 {
order: 7;
}
.md-order-8 {
order: 8;
}
}
@media (max-width: 577px) {
.grid {
gap: 16px;
padding: 16px;
}
.sm-row-span-1 {
grid-row: span 1;
}
.sm-row-span-2 {
grid-row: span 2;
}
.sm-row-span-3 {
grid-row: span 3;
}
.sm-row-span-4 {
grid-row: span 4;
}
.sm-row-span-5 {
grid-row: span 5;
}
.sm-row-span-6 {
grid-row: span 6;
}
.sm-col-span-1 {
grid-column: span 1;
}
.sm-col-span-2 {
grid-column: span 2;
}
.sm-col-span-3 {
grid-column: span 3;
}
.sm-col-span-4 {
grid-column: span 4;
}
.sm-order-0 {
order: 0;
}
.sm-order-1 {
order: 1;
}
.sm-order-2 {
order: 2;
}
.sm-order-3 {
order: 3;
}
.sm-order-4 {
order: 4;
}
.sm-order-5 {
order: 5;
}
.sm-order-6 {
order: 6;
}
.sm-order-7 {
order: 7;
}
.sm-order-8 {
order: 8;
}
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.outer-header {
min-height: var(--os-outer-header-height);
padding-right: var(--os-space-xl);
padding-left: var(--os-space-xl);
box-shadow: var(--os-shadow-lg);
background: var(--os-background-1);
z-index: 9999;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 1rem;
width: 100%;
display: flex;
}
.outer-header .title {
flex-direction: column;
display: flex;
}
.outer-header .title img {
width: 6.25rem;
height: 50px;
margin-top: -10px;
margin-bottom: -10px;
}
.outer-header nav {
width: 100%;
padding-left: var(--os-space-lg);
flex-direction: row;
justify-content: space-between;
margin-bottom: 0;
display: flex;
}
.nav-links {
gap: var(--os-space-md);
list-style: none;
display: inline-flex;
}
.user-profile {
flex-shrink: 0;
margin-left: auto;
}
.user-profile img {
border-radius: 50%;
width: 2rem;
height: 2rem;
}
.dropdown-button {
display: none !important;
}
.dropdown-button i:after {
content: "menu";
}
.dropdown .dropdown-button i:after {
content: "close";
}
.outer-header-content {
display: flex;
}
.outer-header.dropdown nav {
background-color: var(--os-background-1);
left: 0;
top: var(--os-outer-header-height);
z-index: 999;
width: 100%;
height: auto;
padding: var(--os-space-md);
gap: var(--os-space-md);
box-shadow: 0 16px 16px 1px var(--os-color-shade-10pct);
flex-direction: column;
align-items: flex-start;
margin-bottom: 1rem;
transition: margin 0.15s ease-out;
display: flex;
position: absolute;
}
.outer-header.dropdown nav .nav-links {
align-items: flex-start;
gap: var(--os-space-md);
flex-direction: column;
display: flex;
}
.nav-links.open {
flex-direction: column;
align-items: flex-start;
display: flex;
}
@media (max-width: 1200px) {
.dropdown-button {
display: block !important;
}
.outer-header nav {
display: none;
}
.nav-links.open {
flex-direction: column;
align-items: flex-start;
display: flex;
}
}
@media only screen and (max-width: 580px) {
.outer-header .nav-links,
.outer-header .nav-links li {
width: 100%;
}
.outer-header .nav-links .button {
justify-content: start;
}
}
:root {
--os-sidenavigation-width: 20rem;
}
#app {
padding-left: var(--os-sidenavigation-width, 15rem);
will-change: transform;
transition: all 0.1s ease-in-out;
}
#app.menu-visibility-toggle {
padding-left: 0;
}
#app.menu-visibility-toggle .sidenavigation {
opacity: 0;
transform: translateX(-120%);
}
.menu-toggle-btn i:after {
content: "menu";
}
.sidenavigation {
width: var(--os-sidenavigation-width, 15rem);
background: var(--os-background-1);
will-change: transform;
transition: all 0.4s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
position: fixed;
top: 0;
bottom: 0;
left: 0;
}
a.button.nav-item-active {
background: var(--os-color-primary-05pct) !important;
color: var(--os-text-primary-color) !important;
}
@media only screen and (max-width: 900px) and (min-width: 581px) {
#app:not(.menu-visibility-toggle) .sidenavigation {
opacity: 0;
transform: translateX(-120%);
}
#app:not(.menu-visibility-toggle) {
padding-left: 0;
}
.sidenavigation {
z-index: 100;
}
#app.menu-visibility-toggle .sidenavigation {
opacity: 1;
transform: translateX(0%);
}
#app.menu-visibility-toggle .menu-toggle-btn {
z-index: 99;
color: var(--os-color-shade-60pct);
background: var(--os-color-shade-10pct);
border-radius: 0;
font-size: 1.5rem;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding-left: var(--os-sidenavigation-width, 15rem) !important;
}
#app.menu-visibility-toggle .menu-toggle-btn i:after {
content: "close";
}
#app.menu-visibility-toggle .menu-toggle-btn:hover {
color: var(--os-color-shade-90pct);
}
#app.menu-visibility-toggle .menu-toggle-btn:focus-visible {
box-shadow: none;
color: var(--os-color-shade-90pct);
outline: none;
}
}
@media only screen and (max-width: 580px) {
#app:not(.menu-visibility-toggle),
#app {
padding-left: 0;
}
.sidenavigation {
z-index: 100;
width: 100%;
}
#app:not(.menu-visibility-toggle) .sidenavigation {
opacity: 0;
transform: translateY(-120%);
}
#app.menu-visibility-toggle .sidenavigation {
opacity: 1;
transform: translateY(0%);
}
#app.menu-visibility-toggle .menu-toggle-btn {
z-index: 1000;
top: 1rem;
left: var(--space-16-24-32);
background: var(--os-background-1);
position: absolute;
}
#app.menu-visibility-toggle .menu-toggle-btn i:after {
content: "close";
}
.select,
.select-label,
.sidenavigation__footer,
.sidenavigation__footer .button {
width: 100%;
}
}
:root {
--os-drawer-width: 30rem;
}
.drawer {
max-width: 100vw;
height: 100%;
width: var(--os-drawer-width, 30rem);
background: var(--os-background-2);
box-shadow: var(--os-shadow-md);
z-index: 9;
will-change: transform;
transition: all 0.4s ease-in-out;
visibility: hidden;
flex-direction: column;
-webkit-transition: all 0.3s ease-in-out;
display: flex;
position: fixed;
top: 0;
bottom: 0;
right: 0;
overflow: hidden;
transform: translateX(120%);
}
.drawer-right-visibility-toggle .drawer-right {
visibility: visible;
transform: translateX(0%);
}
.drawer-left {
left: 0;
right: auto;
transform: translateX(-120%);
}
.drawer-left-visibility-toggle .drawer-left {
visibility: visible;
transform: translateX(0%);
}
.drawer__header,
.drawer__footer {
justify-content: space-between;
align-items: center;
gap: var(--os-space-sm);
padding: var(--os-space-sm) var(--os-space-lg);
background: var(--os-background-1);
flex-grow: 0;
width: 100%;
display: flex;
overflow: hidden;
}
.drawer__header {
border-bottom: 1px solid var(--os-color-shade-10pct);
}
.drawer__footer {
border-top: 1px solid var(--os-color-shade-10pct);
}
.drawer__content {
width: 100%;
padding: var(--os-space-sm) var(--os-space-lg);
flex-direction: column;
flex-grow: 1;
display: flex;
overflow-y: auto;
}
.drawer__content > section {
padding: var(--os-space-lg) 0;
width: 100%;
}
.drawer__content > section:not(:last-child) {
border-bottom: 1px solid var(--os-color-shade-10pct);
}
.accordion-panel {
background-color: var(--os-background-2);
border: 1px solid var(--os-color-grey-400);
border-radius: var(--os-border-radius);
padding: var(--os-space-md);
flex-direction: column;
display: flex;
overflow: hidden;
}
.accordion-panel .container {
gap: var(--os-space-lg);
padding-top: var(--os-space-sm);
padding-bottom: var(--os-space-sm);
grid-template-columns: repeat(4, 1fr);
transition: margin 2s ease-out;
display: grid;
}
.accordion-panel .buttons {
justify-content: flex-end;
gap: var(--os-space-md);
flex-direction: row;
grid-column: span 3;
width: 100%;
height: fit-content;
display: flex;
}
.accordion-panel-content {
height: 0;
margin-top: 0;
transition: margin 0.15s ease-out;
overflow: hidden;
}
.accordion-panel-content.show {
height: auto;
margin-bottom: 1rem;
}
.accordion-panel-footer {
justify-content: space-between;
gap: var(--os-space-md);
display: flex;
}
@media (max-width: 991px) {
.accordion-item {
grid-column: span 2;
}
.accordion-panel .buttons {
flex-wrap: wrap;
grid-column: span 4;
justify-content: flex-start;
}
}
@media (max-width: 577px) {
.accordion-item {
grid-column: span 4;
}
.accordion-panel-footer {
gap: var(--os-space-md);
flex-direction: column;
align-items: flex-start;
}
}
:root {
--os-button-border-width: 1px;
--os-button-border-color: var(--os-button-secondary-border-color);
--os-button-border-color-hover: var(--os-button-secondary-border-color-hover);
--os-button-border-color-active: var(
--os-button-secondary-border-color-active
);
--os-button-line-height: var(--os-line-height-md);
--os-button-border-radius: var(--os-border-radius-md);
--os-button-background: var(--os-button-secondary-background);
--os-button-background-hover: var(--os-button-secondary-background-hover);
--os-button-background-active: var(--os-button-secondary-background-active);
--os-button-text: var(--os-button-secondary-text);
--os-button-text-hover: var(--os-button-secondary-text-hover);
--os-button-text-active: var(--os-button-secondary-text-active);
--os-button-icon-color: var(--os-text-color);
--os-button-icon-hover-color: var(--os-text-color);
--os-button-shadow: none;
--os-button-font-family: var(--os-font-family);
--os-button-font-weight: 500;
--os-button-horizontal-padding: 1em;
--os-button-animation:
background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
--os-button-primary-background: var(--os-color-primary-500);
--os-button-primary-border-color: var(--os-color-primary-600);
--os-button-primary-background-hover: var(--os-color-primary-700);
--os-button-primary-border-color-hover: var(--os-color-primary-800);
--os-button-primary-background-active: var(--os-color-primary-800);
--os-button-primary-border-color-active: var(--os-color-primary-900);
--os-button-primary-text: var(--os-text-contrast-color);
--os-button-primary-text-hover: var(--os-text-contrast-color);
--os-button-primary-text-active: var(--os-text-contrast-color);
--os-button-primary-icon-color: var(--os-text-contrast-color);
--os-button-primary-icon-hover-color: var(--os-text-contrast-color);
--os-button-primary-badge-background: var(--os-color-grey-400);
--os-button-primary-badge-background-hover: var(--os-color-grey-500);
--os-button-primary-shadow: var(--os-button-shadow);
--os-button-secondary-background: var(--os-background-3);
--os-button-secondary-background-hover: var(--os-color-grey-300);
--os-button-secondary-background-active: var(--os-color-grey-400);
--os-button-secondary-border-color: var(--os-color-grey-300);
--os-button-secondary-border-color-hover: var(--os-color-grey-400);
--os-button-secondary-border-color-active: var(--os-color-grey-400);
--os-button-secondary-text: var(--os-text-color);
--os-button-secondary-text-hover: var(--os-text-color);
--os-button-secondary-text-active: var(--os-text-color);
--os-button-secondary-icon-color: var(--os-text-color);
--os-button-secondary-icon-hover-color: var(--os-text-color);
--os-button-secondary-badge-background: var(--os-color-shade-10pct);
--os-button-secondary-badge-background-hover: var(--os-color-shade-10pct);
--os-button-secondary-shadow: var(--os-button-shadow);
--os-button-success-background: var(--os-color-success-500);
--os-button-success-background-hover: var(--os-color-success-600);
--os-button-success-background-active: var(--os-color-success-700);
--os-button-success-border-color: var(--os-color-success-600);
--os-button-success-border-color-hover: var(--os-color-success-700);
--os-button-success-border-color-active: var(--os-color-success-700);
--os-button-success-text: var(--os-button-text);
--os-button-success-text-hover: var(--os-button-text-hover);
--os-button-success-text-active: var(--os-button-text-active);
--os-button-success-icon-color: var(--os-button-icon-color);
--os-button-success-icon-hover-color: var(--os-button-icon-hover-color);
--os-button-success-badge-background: var(--os-color-success-700);
--os-button-success-badge-background-hover: var(--os-color-success-800);
--os-button-success-shadow: var(--os-button-shadow);
--os-button-danger-background: var(--os-color-danger-700);
--os-button-danger-background-hover: var(--os-color-danger-800);
--os-button-danger-background-active: var(--os-color-danger-900);
--os-button-danger-border-color: var(--os-color-danger-800);
--os-button-danger-border-color-hover: var(--os-color-danger-900);
--os-button-danger-border-color-active: var(--os-color-danger-900);
--os-button-danger-text: var(--os-text-contrast-color);
--os-button-danger-text-hover: var(--os-text-contrast-color);
--os-button-danger-text-active: var(--os-text-contrast-color);
--os-button-danger-icon-color: var(--os-text-contrast-color);
--os-button-danger-icon-hover-color: var(--os-text-contrast-color);
--os-button-danger-badge-background: var(--os-color-danger-800);
--os-button-danger-badge-background-hover: var(--os-color-danger-900);
--os-button-danger-shadow: var(--os-button-shadow);
--os-button-warning-background: var(--os-color-warning-500);
--os-button-warning-background-hover: var(--os-color-warning-600);
--os-button-warning-background-active: var(--os-color-warning-700);
--os-button-warning-border-color: var(--os-color-warning-600);
--os-button-warning-border-color-hover: var(--os-color-warning-700);
--os-button-warning-border-color-active: var(--os-color-warning-800);
--os-button-warning-text: var(--os-text-color);
--os-button-warning-text-hover: var(--os-text-color);
--os-button-warning-text-active: var(--os-text-color);
--os-button-warning-icon-color: var(--os-text-color);
--os-button-warning-icon-hover-color: var(--os-text-color);
--os-button-warning-badge-background: var(--os-color-warning-600);
--os-button-warning-badge-background-hover: var(--os-color-warning-700);
--os-button-warning-shadow: var(--os-button-shadow);
--os-button-outline-background: transparent;
--os-button-outline-background-hover: var(--os-color-shade-05pct);
--os-button-outline-background-active: var(--os-color-shade-10pct);
--os-button-outline-border-color: var(--os-color-shade-60pct);
--os-button-outline-border-color-hover: var(--os-color-shade-80pct);
--os-button-outline-border-color-actice: var(--os-text-color);
--os-button-outline-text: var(--os-text-color);
--os-button-outline-text-hover: var(--os-text-color);
--os-button-outline-text-actice: var(--os-text-color);
--os-button-outline-icon-color: var(--os-text-color);
--os-button-outline-icon-hover-color: var(--os-text-color);
--os-button-outline-badge-background: var(--os-badge-background);
--os-button-outline-badge-background-hover: var(--os-badge-background);
--os-button-text-background-hover: var(--os-color-shade-05pct);
--os-button-text-background-active: var(--os-color-shade-10pct);
--os-button-text-text: var(--os-text-color);
--os-button-text-text-hover: var(--os-text-color);
--os-button-text-text-actice: var(--os-text-color);
--os-button-text-icon-color: var(--os-text-color);
--os-button-text-icon-hover-color: var(--os-text-color);
--os-button-text-badge-background: var(--os-color-primary-10pct);
--os-button-text-badge-background-hover: var(--os-color-primary-10pct);
--os-button-text-decoration-hover: underline;
}
button,
.button {
color: var(--os-button-text);
background: var(--os-button-background);
border: var(--os-button-border-width) solid var(--os-button-border-color);
padding: 0.25em var(--os-button-horizontal-padding);
font-size: var(--os-font-size-md);
font-family: var(--os-button-font-family);
font-weight: var(--os-button-font-weight);
transition: var(--os-button-animation);
border-radius: var(--os-button-border-radius);
line-height: var(--os-button-line-height);
min-height: var(--os-core-component-height-md);
min-width: var(--os-core-component-height-md);
box-shadow: var(--os-button-shadow);
font-weight: var(--os-button-font-weight);
justify-content: center;
align-items: center;
gap: 0.5em;
display: flex;
}
button[disabled],
.button[disabled] {
opacity: 0.5;
pointer-events: none;
}
button label,
.button label {
font-weight: var(--os-button-font-weight);
}
button:hover,
.button:hover {
background: var(--os-button-background-hover);
color: var(--os-button-text-hover);
border-color: var(--os-button-border-color-hover);
}
button:active,
.button:active {
background: var(--os-button-background-active);
color: var(--os-button-text-active);
border-color: var(--os-button-border-color-active);
}
button:focus-visible {
box-shadow: 0 0 0 var(--os-focus-ring-thickness) var(--os-focus-ring-color);
outline: none;
}
.button:focus-visible {
box-shadow: 0 0 0 var(--os-focus-ring-thickness) var(--os-focus-ring-color);
outline: none;
}
.button-raised:focus-visible {
box-shadow: 0 0 0 var(--os-focus-ring-thickness) var(--os-focus-ring-color);
outline: none;
}
button.button-outlined,
.button.button-outlined,
.button-outlined button,
.button-outlined .button {
background-color: var(--os-button-outline-background);
color: var(--os-button-outline-text);
border: var(--os-button-border-width) solid
var(--os-button-outline-border-color);
}
button.button-outlined:hover,
.button.button-outlined:hover,
.button-outlined .button:hover,
.button-outlined button:hover {
background: var(--os-button-outline-background-hover);
color: var(--os-button-outline-text-hover);
border-color: var(--os-button-outline-border-color-hover);
}
button.button-outlined:active,
.button.button-outlined:active .button-outlined .button:active,
.button-outlined button:active {
background: var(--os-button-outline-background-active);
color: var(--os-button-outline-text-actice);
border-color: var(--os-button-outline-border-color-actice);
}
button.button-text,
button.button-tertiary,
.button.button-text,
.button.button-tertiary,
.button-text > .button,
.button-tertiary > .button,
.button-text > button,
.button-tertiary > button {
color: var(--os-button-text-text);
background-color: rgba(0, 0, 0, 0);
border-color: rgba(0, 0, 0, 0);
}
button.button-text:hover,
button.button-tertiary:hover,
.button.button-text:hover,
.button.button-tertiary:hover,
.button-text .button:hover,
.button-tertiary .button:hover,
.button-text button:hover,
.button-tertiary button:hover {
background: var(--os-button-text-background-hover);
color: var(--os-button-text-text-hover);
border-color: rgba(0, 0, 0, 0);
}
button.button-text:active,
button.button-tertiary:active,
.button.button-text:active,
.button.button-tertiary:active,
.button-text .button:active,
.button-tertiary .button:active,
.button-text button:active,
.button-tertiary button:active {
background: var(--os-button-text-background-active);
color: var(--os-button-text-text-active);
border-color: rgba(0, 0, 0, 0);
}
.button.button-icon-only,
button.button-icon-only {
padding: 0 !important;
}
.badge {
color: var(--os-text);
background-color: var(--os-color-shade-10pct);
}
.button-raised {
box-shadow: var(--os-shadow-sm);
}
button.button-rounded,
.button.button-rounded,
.button-rounded button,
.button-rounded .button {
border-radius: var(--os-border-radius-round);
}
.button.button-xs,
button.button-xs {
font-size: var(--os-font-size-xs);
min-height: var(--os-core-component-height-xs);
min-width: var(--os-core-component-height-xs);
}
.button.button-sm,
button.button-sm {
font-size: var(--os-font-size-sm);
min-height: var(--os-core-component-height-sm);
min-width: var(--os-core-component-height-sm);
}
.button.button-lg,
button.button-lg {
font-size: var(--os-font-size-lg);
min-height: var(--os-core-component-height-lg);
min-width: var(--os-core-component-height-lg);
}
button.button-xl,
.button.button-xl {
font-size: var(--os-font-size-xl);
min-height: var(--os-core-component-height-xl);
min-width: var(--os-core-component-height-xl);
}
button.button-primary,
.button.button-primary,
.button-primary button,
.button-primary .button {
color: var(--os-button-primary-text);
background: var(--os-button-primary-background);
border-color: var(--os-button-primary-border-color);
--os-button-shadow: var(--os-button-primary-shadow);
}
button.button-primary:hover,
.button.button-primary:hover,
.button-primary button:hover,
.button-primary .button:hover {
background: var(--os-button-primary-background-hover);
color: var(--os-button-primary-text-hover);
border-color: var(--os-button-primary-border-color-hover);
}
button.button-primary:focus-visible {
box-shadow: 0 0 0 var(--os-focus-ring-thickness) var(--os-focus-ring-color);
outline: none;
}
.button.button-primary:focus-visible {
box-shadow: 0 0 0 var(--os-focus-ring-thickness) var(--os-focus-ring-color);
outline: none;
}
.button-primary button:focus-visible {
box-shadow: 0 0 0 var(--os-focus-ring-thickness) var(--os-focus-ring-color);
outline: none;
}
.button-primary .button:focus-visible {
box-shadow: 0 0 0 var(--os-focus-ring-thickness) var(--os-focus-ring-color);
outline: none;
}
button.button-primary:active,
.button.button-primary:active,
.button-primary button:active,
.button-primary .button:active {
background: var(--os-button-primary-background-active);
color: var(--os-button-primary-text-active);
border-color: var(--os-button-primary-border-color-active);
}
button.button-primary.button-outlined,
.button.button-primary.button-outlined,
.button-primary.button-outlined button,
.button-primary.button-outlined .button {
color: var(--os-text-primary-color);
border-color: var(--os-text-primary-color);
background-color: rgba(0, 0, 0, 0);
}
button.button-primary.button-outlined:hover,
.button.button-primary.button-outlined:hover,
.button-primary.button-outlined button:hover,
.button-primary.button-outlined .button:hover {
background: var(--os-color-primary-05pct);
color: var(--os-text-primary-color);
border-color: var(--os-text-primary-color);
}
button.button-primary.button-outlined:active,
.button.button-primary.button-outlined:active,
.button-primary.button-outlined button:active,
.button-primary.button-outlined .button:active {
background: var(--os-color-primary-10pct);
color: var(--os-text-primary-color);
border-color: var(--os-text-primary-color);
}
button.button-primary.button-text,
.button.button-primary.button-text,
.button-primary.button-text button,
.button-primary.button-text .button {
color: var(--os-text-primary-color);
background-color: rgba(0, 0, 0, 0);
border-color: rgba(0, 0, 0, 0);
}
button.button-primary.button-text:hover,
.button.button-primary.button-text:hover,
.button-primary.button-text button:hover,
.button-primary.button-text .button:hover {
background: var(--os-color-primary-05pct);
color: var(--os-text-primary-color);
border-color: rgba(0, 0, 0, 0);
}
button.button-primary.button-text:active,
.button.button-primary.button-text:active,
.button-primary.button-text button:active,
.button-primary.button-text .button:active {
background: var(--os-color-primary-10pct);
color: var(--os-text-primary-color);
border-color: rgba(0, 0, 0, 0);
}
button.button-success,
.button.button-success,
.button-success button,
.button-success .button {
color: var(--os-button-success-text);
background: var(--os-button-success-background);
border-color: var(--os-button-success-border-color);
--os-button-shadow: var(--os-button-success-shadow);
}
button.button-success:hover,
.button.button-success:hover,
.button-success button:hover,
.button-success .button:hover {
background: var(--os-button-success-background-hover);
color: var(--os-button-success-text-hover);
border-color: var(--os-button-success-border-color-hover);
}
button.button-success:focus-visible {
--os-focus-ring-color: var(--os-color-success-40pct);
box-shadow: 0 0 0 var(--os-focus-ring-thickness) var(--os-focus-ring-color);
outline: none;
}
.button.button-success:focus-visible {
--os-focus-ring-color: var(--os-color-success-40pct);
box-shadow: 0 0 0 var(--os-focus-ring-thickness) var(--os-focus-ring-color);
outline: none;
}
.button-success button:focus-visible {
--os-focus-ring-color: var(--os-color-success-40pct);
box-shadow: 0 0 0 var(--os-focus-ring-thickness) var(--os-focus-ring-color);
outline: none;
}
.button-success .button:focus-visible {
--os-focus-ring-color: var(--os-color-success-40pct);
box-shadow: 0 0 0 var(--os-focus-ring-thickness) var(--os-focus-ring-color);
outline: none;
}
button.button-success:active,
.button.button-success:active,
.button-success button:active,
.button-success .button:active {
background: var(--os-button-success-background-hover);
color: var(--os-button-success-text-active);
border-color: var(--os-button-success-border-color-active);
}
button.button-success.button-outlined,
.button.button-success.button-outlined,
.button-success.button-outlined > button,
.button-success.button-outlined > .button {
color: var(--os-text-success-color);
border-color: var(--os-text-success-color);
background-color: rgba(0, 0, 0, 0);
}
button.button-success.button-outlined:hover,
.button.button-success.button-outlined:hover,
.button-success.button-outlined button:hover,
.button-success.button-outlined .button:hover {
background: var(--os-color-success-05pct);
color: var(--os-text-success-color);
border-color: var(--os-text-success-color);
}
button.button-success.button-outlined:active,
.button.button-success.button-outlined:active,
.button-success.button-outlined > button:active,
.button-success.button-outlined > .button:active {
background: var(--os-color-success-10pct);
color: var(--os-text-success-color);
border-color: var(--os-text-success-color);
}
button.button-success.button-text,
.button.button-success.button-text,
.button-success.button-text > button,
.button-success.button-text > .button {
color: var(--os-text-success-color);
background-color: rgba(0, 0, 0, 0);
border-color: rgba(0, 0, 0, 0);
}
button.button-success.button-text:hover,
.button.button-success.button-text:hover,
.button-success.button-text > button:hover,
.button-success.button-text > .button:hover {
background: var(--os-color-success-05pct);
color: var(--os-text-success-color);
border-color: rgba(0, 0, 0, 0);
}
button.button-success.button-text:active,
.button.button-success.button-text:active,
.button-success.button-text > button:active,
.button-success.button-text > .button:active {
background: var(--os-color-success-10pct);
color: var(--os-text-success-color);
border-color: rgba(0, 0, 0, 0);
}
button.button-warning,
.button.button-warning,
.button-warning > button,
.button-warning > .button {
color: var(--os-button-warning-text);
background: var(--os-button-warning-background);
border-color: var(--os-button-warning-border-color);
--os-button-shadow: var(--os-button-warning-shadow);
}
button.button-warning:hover,
.button.button-warning:hover,
.button-warning > button:hover,
.button-warning > .button:hover {
background: var(--os-button-warning-background-hover);
color: var(--os-button-warning-text-hover);
border-color: var(--os-button-warning-border-color-hover);
}
button.button-warning:focus-visible {
--os-focus-ring-color: var(--os-color-warning-40pct);
box-shadow: 0 0 0 var(--os-focus-ring-thickness) var(--os-focus-ring-color);
outline: none;
}
.button.button-warning:focus-visible {
--os-focus-ring-color: var(--os-color-warning-40pct);
box-shadow: 0 0 0 var(--os-focus-ring-thickness) var(--os-focus-ring-color);
outline: none;
}
.button-warning > button:focus-visible {
--os-focus-ring-color: var(--os-color-warning-40pct);
box-shadow: 0 0 0 var(--os-focus-ring-thickness) var(--os-focus-ring-color);
outline: none;
}
.button-warning > .button:focus-visible {
--os-focus-ring-color: var(--os-color-warning-40pct);
box-shadow: 0 0 0 var(--os-focus-ring-thickness) var(--os-focus-ring-color);
outline: none;
}
button.button-warning:active,
.button.button-warning:active,
.button-warning > button:active,
.button-warning > .button:active {
background: var(--os-button-warning-background-active);
color: var(--os-button-warning-text-active);
border-color: var(--os-button-warning-border-color-active);
}
button.button-warning.button-outlined,
.button.button-warning.button-outlined,
.button-warning.button-outlined > button,
.button-warning.button-outlined > .button {
color: var(--os-text-warning-color);
border-color: var(--os-text-warning-color);
background-color: rgba(0, 0, 0, 0);
}
button.button-warning.button-outlined:hover,
.button.button-warning.button-outlined:hover,
.button-warning.button-outlined > button:hover,
.button-warning.button-outlined > .button:hover {
background: var(--os-color-warning-05pct);
color: var(--os-text-warning-color);
border-color: var(--os-text-warning-color);
}
button.button-warning.button-outlined:active,
.button.button-warning.button-outlined:active,
.button-warning.button-outlined > button:active,
.button-warning.button-outlined > .button:active {
background: var(--os-color-warning-10pct);
color: var(--os-text-warning-color);
border-color: var(--os-text-warning-color);
}
button.button-warning.button-text,
.button.button-warning.button-text,
.button-warning.button-text > button,
.button-warning.button-text > .button {
color: var(--os-text-warning-color);
background-color: rgba(0, 0, 0, 0);
border-color: rgba(0, 0, 0, 0);
}
button.button-warning.button-text:hover,
.button.button-warning.button-text:hover,
.button-warning.button-text > button:hover,
.button-warning.button-text > .button:hover {
background: var(--os-color-warning-05pct);
color: var(--os-text-warning-color);
border-color: rgba(0, 0, 0, 0);
}
button.button-warning.button-text:active,
.button.button-warning.button-text:active,
.button-warning.button-text > button:active,
.button-warning.button-text > .button:active {
background: var(--os-color-warning-10pct);
color: var(--os-text-warning-color);
border-color: rgba(0, 0, 0, 0);
}
button.button-danger,
.button.button-danger,
.button-danger > button,
.button-danger > .button {
color: var(--os-button-danger-text);
background: var(--os-button-danger-background);
border-color: var(--os-button-danger-border-color);
--os-button-shadow: var(--os-button-danger-shadow);
}
button.button-danger:hover,
.button.button-danger:hover,
.button-danger > button:hover,
.button-danger > .button:hover {
background: var(--os-button-danger-background-hover);
color: var(--os-button-danger-text-hover);
border-color: var(--os-button-danger-border-color-hover);
}
button.button-danger:focus-visible {
--os-focus-ring-color: var(--os-color-danger-40pct);
box-shadow: 0 0 0 var(--os-focus-ring-thickness) var(--os-focus-ring-color);
outline: none;
}
.button.button-danger:focus-visible {
--os-focus-ring-color: var(--os-color-danger-40pct);
box-shadow: 0 0 0 var(--os-focus-ring-thickness) var(--os-focus-ring-color);
outline: none;
}
.button-danger > button:focus-visible {
--os-focus-ring-color: var(--os-color-danger-40pct);
box-shadow: 0 0 0 var(--os-focus-ring-thickness) var(--os-focus-ring-color);
outline: none;
}
.button-danger > .button:focus-visible {
--os-focus-ring-color: var(--os-color-danger-40pct);
box-shadow: 0 0 0 var(--os-focus-ring-thickness) var(--os-focus-ring-color);
outline: none;
}
button.button-danger:active,
.button.button-danger:active,
.button-danger > button:active,
.button-danger > .button:active {
background: var(--os-button-danger-background-active);
color: var(--os-button-danger-text-active);
border-color: var(--os-button-danger-border-color-active);
}
button.button-danger.button-outlined,
.button.button-danger.button-outlined,
.button-danger.button-outlined button,
.button-danger.button-outlined .button {
color: var(--os-text-danger-color);
border-color: var(--os-text-danger-color);
background-color: rgba(0, 0, 0, 0);
}
button.button-danger.button-outlined:hover,
.button.button-danger.button-outlined:hover,
.button-danger.button-outlined button:hover,
.button-danger.button-outlined .button:hover {
background: var(--os-color-danger-05pct);
color: var(--os-text-danger-color);
border-color: var(--os-text-danger-color);
}
button.button-danger.button-outlined:active,
.button.button-danger.button-outlined:active,
.button-danger.button-outlined button:active,
.button-danger.button-outlined .button:active {
background: var(--os-color-danger-10pct);
color: var(--os-text-danger-color);
border-color: var(--os-text-danger-color);
}
button.button-danger.button-text,
.button.button-danger.button-text,
.button-danger.button-text button,
.button-danger.button-text .button {
color: var(--os-text-danger-color);
background: none;
border-color: rgba(0, 0, 0, 0);
}
button.button-danger.button-text:hover,
.button.button-danger.button-text:hover,
.button-danger.button-text button:hover,
.button-danger.button-text .button:hover {
background: var(--os-color-danger-05pct);
color: var(--os-text-danger-color);
border-color: rgba(0, 0, 0, 0);
}
button.button-danger.button-text:active,
.button.button-danger.button-text:active,
.button-danger.button-text button:active,
.button-danger.button-text .button:active {
background: var(--os-color-danger-10pct);
color: var(--os-text-danger-color);
border-color: rgba(0, 0, 0, 0);
}
.button.button-link,
button.button-link {
color: var(--os-text-primary-color);
background: none;
border: rgba(0, 0, 0, 0);
}
.button.button-link:hover,
button.button-link:hover {
color: var(--os-text-primary-color);
background: none;
border-color: rgba(0, 0, 0, 0);
}
.button.button-link:hover .button-label,
button.button-link:hover .button-label {
-webkit-text-decoration: var(--os-button-text-decoration-hover);
text-decoration: var(--os-button-text-decoration-hover);
}
.button.button-link:focus-visible {
box-shadow: 0 0 0 var(--os-focus-ring-thickness) var(--os-focus-ring-color);
background: none;
border-color: rgba(0, 0, 0, 0);
outline: none;
}
button.button-link:focus-visible {
box-shadow: 0 0 0 var(--os-focus-ring-thickness) var(--os-focus-ring-color);
background: none;
border-color: rgba(0, 0, 0, 0);
outline: none;
}
.button.button-link:active,
button.button-link:active {
color: var(--os-color-primar-800);
background: none;
border-color: rgba(0, 0, 0, 0);
}
a.button {
text-decoration: none;
}
.button-group {
display: flex;
}
.button-group > button:not(:last-child),
.button-group > .button:not(:last-child) {
border-right: none;
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
.button-group > button:not(:first-child),
.button-group > .button:not(:first-child) {
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important;
}
.button-select-group {
align-items: center;
display: flex;
}
.button-select-group button,
.button-select-group .button {
color: var(--os-text-primary-color);
background-color: rgba(0, 0, 0, 0);
border-color: rgba(0, 0, 0, 0);
}
.button-select-group button:hover,
.button-select-group .button:hover {
background: var(--os-color-primary-05pct);
color: var(--os-text-primary-color);
border-color: rgba(0, 0, 0, 0);
}
.button-select-group button:active,
.button-select-group .button:active,
.button-select-group button.active,
.button-select-group .button.active {
background: var(--os-color-primary-10pct);
color: var(--os-text-primary-color);
border-color: rgba(0, 0, 0, 0);
}
.card {
border-radius: var(--os-border-radius);
background: var(--os-background-1);
}
:root {
--os-badge-background: var(--os-color-shade-10pct);
--os-badge-text: currentColor;
--os-badge-font-size: 0.875em;
--os-badge-font-weight: 500;
--os-badge-height: 1.875em;
--os-badge-min-widht: var(--os-badge-height);
--os-badge-padding: 0 0.75em;
}
.overlay-badge {
--os-badge-background: var(--os-button-primary-background);
--os-badge-text: var(--os-button-primary-text);
--os-badge-font-size: 0.425em;
}
.badge-dot {
--os-badge-height: 0.5rem;
--os-badge-min-widht: 0.5rem;
}
.badge {
background: var(--os-badge-background);
color: var(--os-badge-text);
font-size: var(--os-badge-font-size);
font-weight: var(--os-badge-font-weight);
min-width: var(--os-badge-min-widht);
height: var(--os-badge-height);
line-height: var(--os-badge-height);
border-radius: var(--os-border-radius-round);
padding: var(--os-badge-padding);
align-items: center;
gap: 0.358em;
display: inline-flex;
}
.badge.badge-secondary,
.badge-secondary .badge {
background-color: var(--os-button-background);
color: var(--os-foreground-1);
}
.badge.badge-primary,
.badge-primary .badge {
background-color: var(--os-button-primary-background);
color: var(--os-button-primary-text);
}
.badge.badge-success,
.badge-success .badge {
background-color: var(--os-button-success-background);
color: var(--os-button-success-text);
}
.badge.badge-warning,
.badge-warning .badge {
background-color: var(--os-button-warning-background);
color: var(--os-button-warning-text);
}
.badge.badge-danger,
.badge-danger .badge {
background-color: var(--os-button-danger-background);
color: var(--os-button-danger-text);
}
.badge.badge-dark,
.badge-dark .badge {
background-color: var(--os-foreground-1);
color: var(--os-text-contrast-color);
}
.badge.badge-xs,
.badge-xs .badge {
font-size: calc(0.65 * var(--os-badge-font-size));
}
.badge.badge-sm,
.badge-sm .badge {
font-size: calc(0.85 * var(--os-badge-font-size));
}
.badge.badge-lg,
.badge-lg .badge {
font-size: calc(1.25 * var(--os-badge-font-size));
}
.badge.badge-xl,
.badge-xl .badge {
font-size: calc(1.5 * var(--os-badge-font-size));
}
button .badge,
.button .badge {
font-size: 0.75em;
}
.chip {
background-color: var(--os-color-primary-200);
color: var(--os-color-primary-600);
border-radius: var(--os-border-radius-sm);
padding: var(--os-space-xs) var(--os-space-sm);
align-items: center;
gap: var(--os-space-sm);
flex-direction: row;
display: inline-flex;
}
.chip.chip-warning {
background-color: var(--os-color-warning-300);
color: var(--os-color-warning-600);
}
.chip.chip-danger {
background-color: var(--os-color-danger-300);
color: var(--os-color-danger-600);
}
.chip.chip-success {
background-color: var(--os-color-success-300);
color: var(--os-color-success-600);
}
.chip .label-value-wrapper {
gap: var(--os-space-4xs);
flex-direction: column;
display: flex;
}
.chip .label {
font-size: 0.75rem;
color: var(--os-text-color) !important;
}
.chip .value {
font-size: 0.875rem;
color: var(--os-text-color) !important;
}
a:not(.button) {
color: var(--os-text-primary-color);
border-radius: var(--os-border-radius-xs);
font-weight: 500;
text-decoration: none;
transition:
color 0.2s,
box-shadow 0.2s;
}
a:hover:not(.button) {
text-decoration: underline;
}
a:visited:not(.button) {
color: var(--os-color-primary-60pct);
}
a:not(.button):focus-visible {
box-shadow: 0 0 0 var(--os-focus-ring-thickness) var(--os-focus-ring-color);
outline: none;
}
:root {
--os-progressbar-color: var(--os-color-primary-500);
--os-progressbar-background: var(--os-color-grey-200);
--os-progressbar-height: var(--os-size-md);
--os-progressbar-min-width: calc(var(--os-progressbar-height) * 3);
--os-progressbar-border-radius: var(--os-border-radius-md);
}
progress {
-ms-appearance: none;
appearance: none;
height: var(--os-progressbar-height);
min-width: var(--os-progressbar-min-width);
}
progress::-webkit-progress-bar {
background-color: var(--os-progressbar-background);
border-radius: var(--os-progressbar-border-radius);
}
progress::-webkit-progress-value {
background-color: var(--os-progressbar-color);
border-radius: var(--os-progressbar-border-radius) 0 0
var(--os-progressbar-border-radius);
}
progress[value="100"]::-webkit-progress-value {
border-radius: var(--os-progressbar-border-radius);
}
progress.progressbar-xs {
height: var(--os-size-xs);
min-width: calc(var(--os-size-xs) * 3);
}
progress.progressbar-sm {
height: var(--os-size-sm);
min-width: calc(var(--os-size-sm) * 3);
}
progress.progressbar-lg {
height: var(--os-size-lg);
min-width: calc(var(--os-size-lg) * 3);
}
progress.progressbar-xl {
height: var(--os-size-xl);
min-width: calc(var(--os-size-xl) * 3);
}
.progress-percent {
color: var(--os-text-primary-color);
font-size: var(--os-font-size-md);
}
:root {
--os-toast-min-w: 16rem;
--os-toast-border-radius: var(--os-border-radius);
--os-toast-background-primary: rgba(231, 231, 249, 0.95);
--os-toast-color-primary: var(--os-color-primary-500);
--os-toast-border-primary: 1px solid var(--os-color-primary-40pct);
--os-toast-background-danger: rgba(250, 229, 233, 0.95);
--os-toast-color-danger: var(--os-color-danger-500);
--os-toast-border-danger: 1px solid var(--os-color-danger-40pct);
--os-toast-background-warning: rgba(250, 250, 229, 0.95);
--os-toast-color-warning: var(--os-color-warning-900);
--os-toast-border-warning: 1px solid var(--os-color-warning-700);
--os-toast-background-success: rgba(212, 247, 230, 0.95);
--os-toast-color-success: var(--os-color-success-700);
--os-toast-border-success: 1px solid var(--os-color-success-40pct);
}
.toast {
min-width: var(--os-toast-min-w);
background-color: var(--os-toast-background-primary);
border: var(--os-toast-border-primary);
border-radius: var(--os-toast-border-radius);
justify-content: space-around;
display: flex;
}
.toast-content {
padding: var(--os-space-sm) 0;
flex-direction: column;
flex: 1;
justify-content: center;
display: flex;
}
.toast span:first-child,
.toast i {
color: var(--os-toast-color-primary);
margin-top: 0;
}
.toast span:first-child {
font-weight: 700;
}
.toast i {
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
.toast.toast-danger {
background-color: var(--os-toast-background-danger);
border: var(--os-toast-border-danger);
}
.toast.toast-danger span:first-child,
.toast.toast-danger i {
color: var(--os-toast-color-danger);
}
.toast.toast-warning {
background-color: var(--os-toast-background-warning);
border: var(--os-toast-border-warning);
}
.toast.toast-warning span:first-child,
.toast.toast-warning i {
color: var(--os-toast-color-warning);
}
.toast.toast-success {
background-color: var(--os-toast-background-success);
border: var(--os-toast-border-success);
}
.toast.toast-success span:first-child,
.toast.toast-success i {
color: var(--os-toast-color-success);
}
.toast-close-button,
.toast-icon {
padding: var(--os-space-sm);
}
.toast-close-button {
cursor: pointer;
height: fit-content;
}
:root {
--os-breadcrumb-color: var(--os-color-primary-500);
--os-breadcrumb-p: var(--os-space-sm);
}
.breadcrumbs {
display: flex;
}
.breadcrumbs a {
align-items: center;
display: flex;
text-decoration: none !important;
}
.breadcrumbs a:after {
color: var(--os-color-grey-500);
content: "/";
pointer-events: none;
padding: 0 var(--os-breadcrumb-p);
display: inline-block;
text-decoration: none !important;
}
.breadcrumb {
color: var(--os-breadcrumb-color);
cursor: pointer;
}
.breadcrumb.active {
color: var(--os-text-secondary-color);
cursor: default;
font-weight: 500;
}
.breadcrumb:hover {
text-decoration: underline !important;
}
.breadcrumb.active:hover,
.breadcrumbs a:hover:after {
text-decoration: none !important;
}
input[type="text"] {
font-family: var(--os-font-family);
font-size: var(--os-font-size-md);
color: var(--os-foreground-1);
background: var(--os-input-background);
padding: 0.375em var(--os-input-horizontal-padding);
border: var(--os-input-border-width) solid var(--os-input-border-color);
transition: var(--os-form-element-transition);
-ms-appearance: none;
appearance: none;
border-radius: var(--os-input-border-radius);
min-height: var(--os-core-component-height-md);
}
input[type="password"] {
font-family: var(--os-font-family);
font-size: var(--os-font-size-md);
color: var(--os-foreground-1);
background: var(--os-input-background);
padding: 0.375em var(--os-input-horizontal-padding);
border: var(--os-input-border-width) solid var(--os-input-border-color);
transition: var(--os-form-element-transition);
-ms-appearance: none;
appearance: none;
border-radius: var(--os-input-border-radius);
min-height: var(--os-core-component-height-md);
}
input[type="search"] {
font-family: var(--os-font-family);
font-size: var(--os-font-size-md);
color: var(--os-foreground-1);
background: var(--os-input-background);
padding: 0.375em var(--os-input-horizontal-padding);
border: var(--os-input-border-width) solid var(--os-input-border-color);
transition: var(--os-form-element-transition);
-ms-appearance: none;
appearance: none;
border-radius: var(--os-input-border-radius);
min-height: var(--os-core-component-height-md);
}
input[type="text"]:hover {
border-color: var(--os-input-border-color-hover);
}
input[type="password"]:hover {
border-color: var(--os-input-border-color-hover);
}
input[type="search"]:hover {
border-color: var(--os-input-border-color-hover);
}
input[type="text"]:focus-visible {
box-shadow: 0 0 0 var(--os-focus-ring-thickness) var(--os-focus-ring-color);
border-color: var(--os-input-border-color-focus);
outline: none;
}
input[type="password"]:focus-visible {
box-shadow: 0 0 0 var(--os-focus-ring-thickness) var(--os-focus-ring-color);
border-color: var(--os-input-border-color-focus);
outline: none;
}
input[type="search"]:focus-visible {
box-shadow: 0 0 0 var(--os-focus-ring-thickness) var(--os-focus-ring-color);
border-color: var(--os-input-border-color-focus);
outline: none;
}
input[type="text"].invalid {
border-color: var(--os-invalid-input-border-color);
}
input[type="password"].invalid {
border-color: var(--os-invalid-input-border-color);
}
input[type="search"].invalid {
border-color: var(--os-invalid-input-border-color);
}
input[type="text"][disabled] {
opacity: 0.5;
pointer-events: none;
background-color: var(--os-background-3);
}
input[type="password"][disabled] {
opacity: 0.5;
pointer-events: none;
background-color: var(--os-background-3);
}
input[type="search"][disabled] {
opacity: 0.5;
pointer-events: none;
background-color: var(--os-background-3);
}
input[type="text"].inputtext-xs {
font-size: var(--os-font-size-xs);
min-height: var(--os-core-component-height-xs);
}
input[type="password"].inputtext-xs {
font-size: var(--os-font-size-xs);
min-height: var(--os-core-component-height-xs);
}
input[type="search"].inputtext-xs {
font-size: var(--os-font-size-xs);
min-height: var(--os-core-component-height-xs);
}
input[type="text"].inputtext-sm {
font-size: var(--os-font-size-sm);
min-height: var(--os-core-component-height-sm);
}
input[type="password"].inputtext-sm {
font-size: var(--os-font-size-sm);
min-height: var(--os-core-component-height-sm);
}
input[type="search"].inputtext-sm {
font-size: var(--os-font-size-sm);
min-height: var(--os-core-component-height-sm);
}
input[type="text"].inputtext-lg {
font-size: var(--os-font-size-lg);
min-height: var(--os-core-component-height-lg);
}
input[type="password"].inputtext-lg {
font-size: var(--os-font-size-lg);
min-height: var(--os-core-component-height-lg);
}
input[type="search"].inputtext-lg {
font-size: var(--os-font-size-lg);
min-height: var(--os-core-component-height-lg);
}
input[type="text"].inputtext-xl {
font-size: var(--os-font-size-xl);
min-height: var(--os-core-component-height-xl);
}
input[type="password"].inputtext-xl {
font-size: var(--os-font-size-xl);
min-height: var(--os-core-component-height-xl);
}
input[type="search"].inputtext-xl {
font-size: var(--os-font-size-xl);
min-height: var(--os-core-component-height-xl);
}
.input-icon-left,
.input-icon-right {
align-items: center;
display: flex;
position: relative;
}
.input-icon-left > i:first-of-type {
text-align: center;
width: 1em;
color: var(--os-input-icon-color);
font-size: 1.25em;
position: absolute;
left: 0.5em;
}
.input-icon-left > input[type="text"] {
padding-left: 2em;
}
.input-icon-left > input[type="search"] {
padding-left: 2em;
}
.input-icon-right > i:last-of-type {
text-align: center;
width: 1em;
color: var(--os-input-icon-color);
font-size: 1.25em;
position: absolute;
right: 0.5em;
}
.input-icon-right > input[type="text"] {
padding-right: 2em;
}
.input-icon-right > input[type="password"] {
padding-right: 2em;
}
.input-icon-right > input[type="search"] {
padding-right: 2em;
}
.inputtext-xs {
font-size: var(--os-font-size-xs);
}
.inputtext-xs input[type="text"] {
min-height: var(--os-core-component-height-xs);
font-size: 1em;
}
.inputtext-xs input[type="search"] {
min-height: var(--os-core-component-height-xs);
font-size: 1em;
}
.inputtext-sm {
font-size: var(--os-font-size-sm);
}
.inputtext-sm input[type="text"] {
min-height: var(--os-core-component-height-sm);
font-size: 1em;
}
.inputtext-sm input[type="search"] {
min-height: var(--os-core-component-height-sm);
font-size: 1em;
}
.inputtext-lg {
font-size: var(--os-font-size-lg);
}
.inputtext-lg input[type="text"] {
min-height: var(--os-core-component-height-lg);
font-size: 1em;
}
.inputtext-lg input[type="search"] {
min-height: var(--os-core-component-height-lg);
font-size: 1em;
}
.inputtext-xl {
font-size: var(--os-font-size-xl);
}
.inputtext-xl input[type="text"] {
min-height: var(--os-core-component-height-xl);
font-size: 1em;
}
.inputtext-xl input[type="search"] {
min-height: var(--os-core-component-height-xl);
font-size: 1em;
}
.number-input {
flex-direction: row;
display: flex;
}
.number-input-field {
order: 1;
margin: 0;
padding: 0;
}
.number-input.b-around .number-input-field {
order: 2;
}
.number-input[disabled] * {
opacity: 0.5;
pointer-events: none;
background-color: var(--os-background-3);
}
input[type="number"] {
-ms-appearance: none;
appearance: none;
text-align: center;
width: 100%;
font-family: var(--os-font-family);
font-size: var(--os-font-size-md);
color: var(--os-foreground-1);
background: var(--os-input-background);
padding: 0;
padding: 0.375em var(--os-input-horizontal-padding);
border: var(--os-input-border-width) solid var(--os-input-border-color);
border-radius: var(--os-input-border-radius);
transition: var(--os-form-element-transition);
min-height: var(--os-core-component-height-md);
display: block;
top: 0;
}
input[type="number"].button-input {
padding: 0.375em var(--os-input-horizontal-padding);
border-radius: var(--os-input-border-radius) 0 0 var(--os-input-border-radius);
}
.number-input.b-around input[type="number"] {
border-radius: 0;
}
input[type="number"]:hover {
border-color: var(--os-input-border-color-hover);
}
input[type="number"]:focus-visible {
box-shadow: 0 0 0 var(--os-focus-ring-thickness) var(--os-focus-ring-color);
border-color: var(--os-input-border-color-focus);
outline: none;
}
input[type="number"].invalid {
border-color: var(--os-invalid-input-border-color);
}
input[type="number"].inputnumber-xs {
font-size: var(--os-font-size-xs);
min-height: var(--os-core-component-height-xs);
}
.inputnumber-xs ~ .number-input-button-minus,
.inputnumber-xs ~ .number-input-button-plus {
font-size: var(--os-font-size-xs) !important;
}
input[type="number"].inputnumber-sm {
font-size: var(--os-font-size-sm);
min-height: var(--os-core-component-height-sm);
}
.inputnumber-sm ~ .number-input-button-minus,
.inputnumber-sm ~ .number-input-button-plus {
font-size: var(--os-font-size-sm) !important;
}
input[type="number"].inputnumber-lg {
font-size: var(--os-font-size-lg);
min-height: var(--os-core-component-height-lg);
}
.inputnumber-lg ~ .number-input-button-minus,
.inputnumber-lg ~ .number-input-button-plus {
font-size: var(--os-font-size-lg) !important;
}
input[type="number"].inputnumber-xl {
font-size: var(--os-font-size-xl);
min-height: var(--os-core-component-height-xl);
}
.inputnumber-xl ~ .number-input-button-minus,
.inputnumber-xl ~ .number-input-button-plus {
font-size: var(--os-font-size-xl) !important;
padding: 0 0.75em !important;
}
input[type="number"] {
-ms-appearance: textfield;
appearance: textfield;
}
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
}
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
}
.number-input-button-minus,
.number-input-button-plus {
text-align: center;
border: none;
border: var(--os-input-border-width) solid var(--os-input-border-color);
background: none;
min-height: 100%;
top: 0;
padding: 0 !important;
font-size: 1em !important;
}
.number-input-button-minus:disabled,
.number-input-button-plus:disabled {
background-color: var(--os-background-3);
z-index: 0;
}
.number-input-button-minus {
border-left: 0;
border-radius: 0;
order: 2;
left: 0;
}
.number-input-button-plus {
border-radius: 0 var(--os-button-border-radius) var(--os-button-border-radius)
0;
border-left: 0;
order: 3;
right: 0;
}
.number-input.b-around .number-input-button-minus {
border-radius: var(--os-button-border-radius) 0 0
var(--os-button-border-radius);
border-right: 0;
border-left: var(--os-input-border-width) solid var(--os-input-border-color);
order: 1;
}
.number-input.b-around .number-input-button-plus {
border-radius: 0 var(--os-button-border-radius) var(--os-button-border-radius)
0;
border-left: 0;
}
.number-input-button-minus:hover,
.number-input-button-plus:hover {
border: var(--os-input-border-width) solid var(--os-input-border-color);
border-left: 0;
}
.number-input-button-minus.button-primary:hover:after,
.number-input-button-plus.button-primary:hover:after {
color: var(--os-button-primary-text-hover);
}
.number-input-button-minus:hover:after,
.number-input-button-plus:hover:after {
color: var(--os-button-text-hover);
}
.number-input-button-minus:after,
.number-input-button-plus:after {
color: var(--os-foreground-3);
-webkit-text-decoration: inherit;
text-decoration: inherit;
font-variant: normal;
text-transform: none;
-webkit-font-smoothing: antialiased;
vertical-align: middle;
text-align: center;
pointer-events: none;
font-family: Material Symbols Outlined;
font-size: 1.5em;
font-style: normal;
font-weight: 400;
display: inline-block;
}
.number-input-button-minus:after {
content: "remove";
font-size: 1.5em;
}
.number-input-button-plus:after {
content: "add";
font-size: 1.5em;
}
:root {
--os-input-background: var(--os-background-1);
--os-input-background-disabled: var(--os-background-3);
--os-input-background-filled: var(--os-background-2);
--os-input-background-filled-hover: var(--os-background-3);
--os-input-border-width: 1px;
--os-input-border-color: var(--os-foreground-3);
--os-input-border-color-hover: var(--os-color-primary-500);
--os-input-border-color-focus: var(--os-color-primary-500);
--os-input-border-color-invalid: var(--os-color-danger-500);
--os-input-horizontal-padding: 1em;
--os-input-shadow: none;
--os-input-border-radius: var(--os-border-radius-md);
--os-input-icon-color: var(--os-foreground-2);
--os-input-placeholder-color: var(--os-foreground-2);
--os-input-overlay-background: var(--os-color-black);
--os-input-overlay-border: 0 none;
--os-input-overlay-shadow: var(--os-shadow-md);
--os-input-overlay-header-background: var(--os-input-background);
--os-invalid-input-border-color: var(--os-text-danger-color);
}
textarea {
font-family: var(--os-font-family);
font-size: var(--os-font-size-md);
color: var(--os-foreground-1);
background: var(--os-input-background);
padding: 0.375em var(--os-input-horizontal-padding);
border: var(--os-input-border-width) solid var(--os-input-border-color);
transition: var(--os-form-element-transition);
-ms-appearance: none;
appearance: none;
border-radius: var(--os-input-border-radius);
min-height: var(--os-core-component-height-md);
}
textarea:hover {
border-color: var(--os-input-border-color-hover);
}
textarea:focus-visible {
box-shadow: 0 0 0 var(--os-focus-ring-thickness) var(--os-focus-ring-color);
border-color: var(--os-input-border-color-focus);
outline: none;
}
textarea.invalid {
border-color: var(--os-invalid-input-border-color);
}
textarea[disabled] {
opacity: 0.5;
pointer-events: none;
background-color: var(--os-background-3);
}
textarea.inputtext-xs {
font-size: var(--os-font-size-xs);
}
textarea.inputtext-sm {
font-size: var(--os-font-size-sm);
}
textarea.inputtext-lg {
font-size: var(--os-font-size-lg);
}
textarea.inputtext-xl {
font-size: var(--os-font-size-xl);
}
::-webkit-input-placeholder {
color: var(--os-input-placeholder-color);
}
:-moz-placeholder {
color: var(--os-input-placeholder-color);
}
::-moz-placeholder {
color: var(--os-input-placeholder-color);
}
:-ms-input-placeholder {
color: var(--os-input-placeholder-color);
}
.inputtext-xs textarea,
.inputtext-xs i {
font-size: var(--os-font-size-xs);
}
.inputtext-sm textarea,
.inputtext-sm i {
font-size: var(--os-font-size-sm);
}
.inputtext-lg textarea,
.inputtext-lg i,
.inputtext-xl textarea {
font-size: var(--os-font-size-lg);
}
.inputtext-xl i {
font-size: var(--os-font-size-xl);
}
:root {
--os-radio-width: 1.25rem;
--os-radio-height: 1.25rem;
--os-radio-border-width: 2px;
--os-radio-border: var(--os-radio-border-width) solid
var(--os-input-border-color);
--os-radio-background: var(--os-input-background);
--os-radio-background-active: var(--os-color-primary-500);
--os-radio-border-color-active: var(--os-color-primary-500);
--os-radio-dot-color: var(--os-text-contrast-color);
--os-radio-dot-width: 0.375em;
--os-radio-dot-height: 0.375em;
--os-radio-border-color-active-hover: var(--os-color-primary-700);
--os-radio-background-active-hover: var(--os-color-primary-700);
}
.radio {
cursor: pointer;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
align-items: center;
gap: 0.5em;
display: flex;
position: relative;
}
.radio input {
opacity: 0;
cursor: pointer;
width: 0;
height: 0;
position: absolute;
left: 50px;
}
.radio .radio-box {
border: var(--os-radio-border);
background: var(--os-radio-background);
width: var(--os-radio-width);
height: var(--os-radio-height);
color: var(--os-foreground-1);
transition: var(--os-form-element-transition);
border-radius: 50%;
justify-content: center;
align-items: center;
display: flex;
}
.radio-box:after {
transition-duration: var(--os-transition-duration);
content: "";
background: var(--os-radio-dot-color);
width: var(--os-radio-dot-width);
height: var(--os-radio-dot-height);
border-radius: 50%;
display: block;
}
.radio input:not(:checked) ~ .radio-box:after {
opacity: 0;
}
.radio input:checked ~ .radio-box {
border-color: var(--os-radio-border-color-active);
background: var(--os-radio-background-active);
}
.radio:hover .radio-box {
border-color: var(--os-input-border-color-hover);
}
.radio input:focus-visible ~ .radio-box {
box-shadow: 0 0 0 var(--os-focus-ring-thickness) var(--os-focus-ring-color);
border-color: var(--os-input-border-color-hover);
outline: none;
}
.radio input:checked ~ .radio-box:hover {
border-color: var(--os-radio-border-color-active-hover);
background: var(--os-radio-border-color-active-hover);
color: var(--os-radio-icon-color-active-hover);
}
.radio.invalid > .radio-box {
border-color: var(--os-invalid-input-border-color);
}
:root {
--os-dropdown-border-radius: var(--os-input-border-radius);
--os-dropdown-background: var(--os-background-3);
--os-dropdown-border-width: var(--os-input-border-width);
--os-dropdown-border-color: var(--os-input-border-color);
--os-dropdown-border-color-hover: var(--os-input-border-color-hover);
}
select {
-ms-appearance: none;
appearance: none;
width: 100%;
font-family: inherit;
font-size: inherit;
cursor: inherit;
color: var(--os-foreground-1);
line-height: inherit;
padding: 0;
padding: 0.375em 2em 0.375em var(--os-input-horizontal-padding);
min-height: var(--os-core-component-height-md);
border-radius: var(--os-dropdown-border-radius);
background-color: rgba(0, 0, 0, 0);
border: none;
margin: 0;
}
.select {
background: var(--os-dropdown-background);
border: var(--os-dropdown-border-width) solid var(--os-input-border-color);
transition: var(--os-form-element-transition);
border-radius: var(--os-dropdown-border-radius);
font-family: var(--os-font-family);
font-size: var(--os-font-size-md);
border: var(--os-input-border-width) solid var(--os-input-border-color);
transition: var(--os-form-element-transition);
position: relative;
}
.select:after {
content: "expand_more";
width: 1.5em;
color: var(--os-foreground-3);
-webkit-text-decoration: inherit;
text-decoration: inherit;
font-variant: normal;
text-transform: none;
font-family: Material Symbols Outlined;
font-style: normal;
font-weight: 400;
line-height: var(--os-core-component-height-md);
-webkit-font-smoothing: antialiased;
vertical-align: middle;
text-align: center;
pointer-events: none;
font-size: 1.5em;
display: inline-block;
position: absolute;
top: 0;
bottom: 0;
right: 0;
}
select:not([disabled]):hover {
border-color: var(--os-dropdown-border-color-hover);
outline: none;
}
select:not([disabled]):focus-visible {
box-shadow: 0 0 0 var(--os-focus-ring-thickness) var(--os-focus-ring-color);
outline: none;
}
:root {
--os-check-box-width: 1.25rem;
--os-check-box-height: 1.25rem;
--os-check-box-border-width: 2px;
--os-check-box-border: var(--os-check-box-border-width) solid
var(--os-input-border-color);
--os-check-box-border-radius: var(--os-border-radius-sm);
--os-check-box-background: var(--os-input-background);
--os-check-box-background-active: var(--os-color-primary-500);
--os-check-box-border-color-active: var(--os-color-primary-500);
--os-check-box-icon-font-size: 0.875rem;
--os-check-box-icon-color-active: var(--os-text-contrast-color);
--os-check-box-border-color-active-hover: var(--os-color-primary-700);
--os-check-box-background-active-hover: var(--os-color-primary-700);
--os-check-box-icon-color-active-hover: var(--os-text-contrast-color);
}
.checkbox {
cursor: pointer;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
align-items: center;
gap: 0.5em;
display: flex;
position: relative;
}
.checkbox input {
color: var(--os-color-white);
opacity: 0;
cursor: pointer;
width: 0;
height: 0;
position: absolute;
left: 50px;
}
.checkbox .checkbox-box {
border: var(--os-check-box-border);
background: var(--os-check-box-background);
width: var(--os-check-box-width);
height: var(--os-check-box-height);
color: var(--os-foreground-1);
border-radius: var(--os-check-box-border-radius);
transition: var(--os-form-element-transition);
justify-content: center;
align-items: center;
display: flex;
position: relative;
}
.checkbox-box .checkbox-icon {
transition-duration: var(--os-transition-duration);
color: var(--os-check-box-icon-color-active);
font-size: var(--os-check-box-icon-font-size);
font-size: 1rem;
line-height: 1rem;
}
.checkbox input:not(:checked) ~ .checkbox-icon {
opacity: 0;
}
.checkbox-box .checkbox-icon:after {
width: var(--os-check-box-width);
line-height: var(--os-check-box-height);
}
.checkbox input:checked ~ .checkbox-box {
border-color: var(--os-check-box-border-color-active);
background: var(--os-check-box-background-active);
}
.checkbox:hover .checkbox-box {
border-color: var(--os-input-border-color-hover);
}
.checkbox input:focus-visible ~ .checkbox-box {
box-shadow: 0 0 0 var(--os-focus-ring-thickness) var(--os-focus-ring-color);
border-color: var(--os-input-border-color-hover);
outline: none;
}
.checkbox input:checked ~ .checkbox-box:hover {
border-color: var(--os-check-box-border-color-active-hover);
background: var(--os-check-box-border-color-active-hover);
color: var(--os-check-box-icon-color-active-hover);
}
.checkbox.invalid > .checkbox-box {
border-color: var(--os-invalid-input-border-color);
}
input[type="file"]::-ms-browse {
color: var(--os-button-text);
background: var(--os-button-background);
border: var(--os-button-border-width) solid var(--os-button-border-color);
padding: 0.25em var(--os-button-horizontal-padding);
font-size: var(--os-font-size-md);
font-family: var(--os-button-font-family);
font-weight: var(--os-button-font-weight);
transition: var(--os-button-animation);
border-radius: var(--os-button-border-radius);
line-height: var(--os-button-line-height);
min-height: var(--os-core-component-height-md);
min-width: var(--os-core-component-height-md);
box-shadow: var(--os-button-shadow);
font-weight: var(--os-button-font-weight);
transition: var(--os-button-animation);
margin-right: var(--os-space-md);
justify-content: center;
align-items: center;
gap: 0.5em;
}
input[type="file"]::file-selector-button {
color: var(--os-button-text);
background: var(--os-button-background);
border: var(--os-button-border-width) solid var(--os-button-border-color);
padding: 0.25em var(--os-button-horizontal-padding);
font-size: var(--os-font-size-md);
font-family: var(--os-button-font-family);
font-weight: var(--os-button-font-weight);
transition: var(--os-button-animation);
border-radius: var(--os-button-border-radius);
line-height: var(--os-button-line-height);
min-height: var(--os-core-component-height-md);
min-width: var(--os-core-component-height-md);
box-shadow: var(--os-button-shadow);
font-weight: var(--os-button-font-weight);
transition: var(--os-button-animation);
margin-right: var(--os-space-md);
justify-content: center;
align-items: center;
gap: 0.5em;
}
input[type="file"].file-upload-primary::-ms-browse {
color: var(--os-button-primary-text);
background: var(--os-button-primary-background);
border-color: var(--os-button-primary-border-color);
--os-button-shadow: var(--os-button-primary-shadow);
}
input[type="file"].file-upload-primary::file-selector-button {
color: var(--os-button-primary-text);
background: var(--os-button-primary-background);
border-color: var(--os-button-primary-border-color);
--os-button-shadow: var(--os-button-primary-shadow);
}
input[type="file"]::-ms-browse:hover {
background: var(--os-button-background-hover);
color: var(--os-button-text-hover);
border-color: var(--os-button-border-color-hover);
}
input[type="file"]::file-selector-button:hover {
background: var(--os-button-background-hover);
color: var(--os-button-text-hover);
border-color: var(--os-button-border-color-hover);
}
input[type="file"].file-upload-primary::-ms-browse:hover {
background: var(--os-button-primary-background-hover);
color: var(--os-button-primary-text-hover);
border-color: var(--os-button-primary-border-color-hover);
}
input[type="file"].file-upload-primary::file-selector-button:hover {
background: var(--os-button-primary-background-hover);
color: var(--os-button-primary-text-hover);
border-color: var(--os-button-primary-border-color-hover);
}
.file-drop-area {
justify-content: center;
align-items: center;
gap: var(--os-space-md);
width: 100%;
padding: var(--os-space-xl);
border: 2px dashed var(--os-color-primary-300);
border-radius: var(--os-button-border-radius);
background-color: var(--os-color-primary-200);
flex-direction: column;
display: flex;
}
.file-drop-area p {
color: var(--os-text-secondary-color);
font-size: 1.25em;
}
.file-list {
gap: var(--os-space-xs);
flex-direction: column;
justify-content: center;
align-items: flex-start;
display: flex;
}
.file-list li {
color: var(--os-text-secondary-color);
justify-content: space-between;
align-items: center;
gap: var(--os-space-xs);
width: 100%;
display: flex;
margin: 0 !important;
list-style-type: none !important;
}
.file-drop-area.highlight {
border-color: var(--os-color-primary-400);
background-color: var(--os-color-primary-300);
}
#file-input-hidden,
.upload-button {
display: none;
}
.remove-button:before {
content: "delete";
}
.toggle {
cursor: pointer;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
align-items: center;
gap: 0.5em;
display: inline-flex;
}
.toggle input[type="checkbox"] {
opacity: 0;
width: 0;
height: 0;
position: absolute;
}
.toggle-slider {
background: var(--os-toggle-background);
border-radius: 1em;
width: 2.5em;
height: 1.3em;
transition: background 0.2s;
position: relative;
}
.toggle-slider:before {
content: "";
background: var(--os-toggle-knob-color);
border-radius: 50%;
width: 0.9em;
height: 0.9em;
transition: transform 0.2s;
position: absolute;
top: 0.2em;
left: 0.2em;
}
.toggle input[type="checkbox"]:checked + .toggle-slider {
background: var(--os-toggle-active-background);
}
.toggle input[type="checkbox"]:checked + .toggle-slider:before {
transform: translateX(1.2em);
}
:root {
--os-details-background: var(--os-background-2);
--os-details-border: 1px solid var(--os-color-shade-10pct);
--os-details-border-radius: var(--os-border-radius);
}
details {
background: var(--os-details-background);
border: var(--os-details-border);
border-radius: var(--os-details-border-radius);
}
details summary {
padding: var(--os-space-md);
border-radius: var(--os-details-border-radius);
cursor: pointer;
justify-content: space-between;
align-items: center;
list-style: none;
transition: margin 0.15s ease-out;
display: flex;
position: relative;
}
details[open] summary {
margin-bottom: 1rem;
}
summary + div {
border-bottom-left-radius: var(--os-details-border-radius);
border-bottom-right-radius: var(--os-details-border-radius);
margin-top: -1rem;
overflow: hidden;
}
summary::-webkit-details-marker {
display: none;
}
details summary > * {
display: inline;
}
details .summary-mark {
color: var(--os-text-tertiary-color);
font-size: 1.5rem;
}
details[open] .summary-mark {
transform: rotate(180deg);
}
summary:not(.button):focus-visible {
box-shadow: 0 0 0 var(--os-focus-ring-thickness) var(--os-focus-ring-color);
outline: none;
}
.pagination {
background-color: var(--os-background-1);
gap: var(--os-space-xs);
justify-content: center;
align-items: center;
width: 100%;
list-style: none;
display: flex;
}
.pagination a {
height: var(--os-size-xl);
width: var(--os-size-xl);
padding: var(--os-size-sm);
border-radius: var(--os-border-radius-round);
justify-content: center;
align-items: center;
margin: 0 4px;
display: flex;
color: var(--os-text-secondary-color) !important;
text-decoration: none !important;
}
.pagination a.active {
background-color: var(--os-color-primary-600);
color: var(--os-color-white) !important;
}
.pagination a:hover {
background-color: var(--os-color-primary-400);
color: var(--os-color-white) !important;
}
.pagination a:disabled {
color: var(--os-color-secondary-400) !important;
}
:root {
--os-backdrop-shade: var(--os-color-shade-20pct);
}
dialog {
border-radius: var(--os-border-radius);
border: 1px solid var(--os-color-grey-400);
box-shadow: var(--os-shadow-2xl);
width: 800px;
max-width: 96vw;
height: 600px;
max-height: 96vh;
position: fixed;
top: 50%;
left: 50%;
overflow: hidden;
transform: translate(-50%, -50%);
}
.modal-content {
flex-direction: column;
max-width: 96vw;
height: 100%;
max-height: 96vh;
display: flex;
}
.modal-header {
background-color: var(--os-background-1);
padding: var(--os-size-md);
border-width: 1px;
border-bottom: 1px solid var(--os-color-grey-200);
justify-content: space-between;
align-items: center;
display: flex;
}
.modal-header.draggable {
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: move;
}
.modal-body {
padding: var(--os-size-md);
background-color: var(--os-color-grey-100);
flex: 1;
overflow-y: auto;
}
.modal-footer {
background-color: var(--os-background-1);
padding: var(--os-size-md);
border-top: 1px solid var(--os-color-grey-200);
justify-content: flex-end;
gap: var(--os-size-md);
flex-shrink: 0;
display: flex;
}
body.modal-active {
pointer-events: none;
overflow: hidden;
}
body.modal-active dialog {
pointer-events: auto;
}
.modal-xs {
width: 500px;
height: 200px;
}
.modal-sm {
width: 500px;
height: 400px;
}
.modal-md {
width: 800px;
height: 640px;
}
.modal-lg {
width: 1000px;
height: 800px;
}
.modal-xl {
width: 1400px;
height: 1120px;
}
.modal-full {
width: 96vw;
height: 96vh;
}
dialog::-ms-backdrop {
background-color: var(--os-backdrop-shade);
}
dialog::backdrop {
background-color: var(--os-backdrop-shade);
}
:root {
--os-table-cell-content-alignment: left;
--os-table-border-width: 1px;
--os-table-header-background: var(--os-background-2);
--os-table-header-text-color: var(--os-foreground-1);
--os-table-header-border: var(--os-table-border-width) solid
var(--os-color-shade-10pct);
--os-table-header-border-width: 0 0 var(--os-table-border-width) 0;
--os-table-header-padding: 1rem 1rem;
--os-table-header-font-weight: 600;
--os-table-header-cell-padding: 1rem 1rem;
--os-table-header-cell-border: var(--os-table-border-width) solid
var(--os-color-shade-10pct);
--os-table-header-cell-border-width: 0 0 var(--os-table-border-width) 0;
--os-table-header-cell-font-weigh: 600;
--os-table-header-cell-text-color: var(--os-foreground-1);
--os-table-header-cell-background: var(--os-background-2);
--os-table-header-cell-icon-color: var(--os-text-secondary-color);
--os-table-header-cell-hover-background: var(--os-color-shade-10pct);
--os-table-header-cell-text-hover-color: var(--os-foreground-1);
--os-table-header-cell-icon-hover-color: var(--os-text-secondary-color);
--os-table-header-cell-highlight-text-color: var(--os-text-primary-color);
--os-table-header-cell-highlight-background: var(--os-color-primary-200);
--os-table-header-cell-highlight-hover-background: var(
--os-color-primary-200
);
--os-table-body-row-background: var(--os-background-1);
--os-table-body-row-text-color: var(--os-foreground-1);
--os-table-body-cell-border: var(--os-table-border-width) solid
var(--os-color-shade-10pct);
--os-table-body-cell-border-width: 0 0 var(--os-table-border-width) 0;
--os-table-body-cell-padding: 1rem 1rem;
--os-table-body-row-hover-background: var(--os-color-shade-10pct);
--os-table-body-row-text-hover-color: var(--os-foreground-1);
}
table {
border-collapse: collapse;
}
tr th {
background: var(--os-table-header-background);
color: var(--os-table-header-text-color);
text-align: var(--os-table-cell-content-alignment);
padding: var(--os-table-header-cell-padding);
border: var(--os-table-header-cell-border);
border-width: var(--os-table-header-cell-border-width);
font-weight: var(--os-table-header-cell-font-weigh);
transition: var(--os-list-item-transition);
}
tr {
background: var(--os-table-body-row-background);
color: var(--os-table-body-row-text-color);
transition: var(--os-list-item-transition);
}
tr td {
text-align: var(--os-table-cell-content-alignment);
border: var(--os-table-body-cell-border);
border-width: var(--os-table-body-cell-border-width);
padding: var(--os-table-body-cell-padding);
}
table:not(.horiz-headings) tr:last-child td {
border-bottom: none;
}
table .table-sm {
--os-table-header-padding: 0.5rem 0.5rem;
--os-table-header-cell-padding: 0.5rem 0.5rem;
--os-table-body-cell-padding: 0.5rem 0.5rem;
--os-table-footer-padding: 0.5rem 0.5rem;
}
table .table-lg {
--os-table-header-padding: 1.25rem 1.25rem;
--os-table-header-cell-padding: 1.25rem 1.25rem;
--os-table-body-cell-padding: 1.25rem 1.25rem;
--os-table-footer-padding: 1.25rem 1.25rem;
}
th.sortable {
cursor: pointer;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
th.sortable:hover {
background: var(--os-table-header-cell-hover-background);
color: var(--os-table-header-cell-text-hover-color);
}
th.sortable a,
th.sortable a:hover {
color: inherit;
text-decoration: none;
}
th.sortable .sort-icon {
color: var(--os-table-header-cell-icon-color);
vertical-align: middle;
margin-left: var(--os-size-2xs);
opacity: 0;
transition: var(--os-list-item-transition);
font-size: 1.25rem;
}
th.sortable:hover .sort-icon {
opacity: 0.5;
color: var(--os-table-header-cell-icon-hover-color);
}
th.sortable.sort-asc,
th.sortable.sort-desc {
background: var(--os-table-header-cell-highlight-background);
color: var(--os-table-header-cell-highlight-text-color);
}
th.sortable.sort-asc:hover,
th.sortable.sort-desc:hover {
background: var(--os-table-header-cell-highlight-hover-background);
}
th.sortable.sort-asc .sort-icon,
th.sortable.sort-desc .sort-icon {
opacity: 1;
color: var(--os-table-header-cell-highlight-text-color);
}
th.sortable.sort-desc .sort-icon {
transform: rotate(180deg);
}
html {
font-family: var(--os-font-family);
}
.component {
font-family: var(--os-font-family);
font-size: var(--os-font-size-md);
font-weight: var(--os-font-weight);
}
.component-overlay {
background-color: var(--os-mask-background);
transition-duration: var(--os-transition-duration);
}
.disabled,
.component:disabled {
opacity: var(--os-disabled-opacity);
}
.danger {
color: var(--os-error-color);
}
.text-secondary {
color: var(--os-text-secondary-color);
}
.link {
font-size: var(--os-font-size-md);
font-family: var(--os-font-family);
border-radius: var(--os-border-radius);
}
.link:focus-visible {
box-shadow: 0 0 0 var(--os-focus-ring-thickness) var(--os-focus-ring-color);
outline: none;
}
.component-overlay-enter {
animation: 0.15s forwards component-overlay-enter-animation;
}
.component-overlay-leave {
animation: 0.15s forwards component-overlay-leave-animation;
}
@media (max-width: 1024px) {
:root {
--space-16-24-32: 24px;
font-size: 15px;
}
}
@media (max-width: 580px) {
:root {
--space-16-24-32: 16px;
font-size: 14px;
}
}
.login {
background: url("../assets/img/pexels-pixabay-159213.jpg") center / cover;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
display: flex;
}
.login__panel {
width: 30rem;
max-width: 90%;
max-height: 90%;
}
.display-none {
display: none !important;
}
.display-block {
display: block !important;
}
.display-inline-block {
display: inline-block !important;
}
.display-inline {
display: inline !important;
}
.flex,
.display-flex {
display: flex !important;
}
.display-inline-flex {
display: inline-flex !important;
}
.display-table {
display: table !important;
}
.display-inline-table {
display: inline-table !important;
}
.display-table-caption {
display: table-caption !important;
}
.visibility-visible {
visibility: visible;
}
.visibility-hidden {
visibility: hidden;
}
.resize-none {
resize: none;
}
.resize-vertical {
resize: vertical;
}
.resize-horizontal {
resize: horizontal;
}
.resize-both {
resize: both;
}
.list-style-disc {
list-style-type: disc;
}
.list-style-circle {
list-style-type: circle;
}
.list-style-square {
list-style-type: square;
}
.list-position-outside {
list-style-position: outside !important;
}
.list-position-inside {
list-style-position: inside !important;
}
.white-space-normal {
white-space: normal;
}
.white-space-nowrap {
white-space: nowrap;
}
.overflow-auto {
overflow: auto;
}
.overflow-hidden {
overflow: hidden;
}
.overflow-clip {
overflow: clip;
}
.overflow-visible {
overflow: visible;
}
.overflow-scroll {
overflow: scroll;
}
.overflow-x-auto {
overflow-x: auto;
}
.overflow-y-auto {
overflow-y: auto;
}
.overflow-x-hidden {
overflow-x: hidden;
}
.overflow-y-hidden {
overflow-y: hidden;
}
.overflow-x-clip {
overflow-x: clip;
}
.overflow-y-clip {
overflow-y: clip;
}
.overflow-x-visible {
overflow-x: visible;
}
.overflow-y-visible {
overflow-y: visible;
}
.overflow-x-scroll {
overflow-x: scroll;
}
.overflow-y-scroll {
overflow-y: scroll;
}
.static {
position: static;
}
.fixed {
position: fixed;
}
.absolute {
position: absolute;
}
.relative {
position: relative;
}
.sticky {
position: sticky;
}
.p-4xs {
padding: var(--os-space-4xs);
}
.py-4xs {
padding-top: var(--os-space-4xs);
padding-bottom: var(--os-space-4xs);
}
.px-4xs {
padding-right: var(--os-space-4xs);
padding-left: var(--os-space-4xs);
}
.pt-4xs {
padding-top: var(--os-space-4xs);
}
.pr-4xs {
padding-right: var(--os-space-4xs);
}
.pb-4xs {
padding-bottom: var(--os-space-4xs);
}
.pl-4xs {
padding-left: var(--os-space-4xs);
}
.p-3xs {
padding: var(--os-space-3xs);
}
.py-3xs {
padding-top: var(--os-space-3xs);
padding-bottom: var(--os-space-3xs);
}
.px-3xs {
padding-right: var(--os-space-3xs);
padding-left: var(--os-space-3xs);
}
.pt-3xs {
padding-top: var(--os-space-3xs);
}
.pr-3xs {
padding-right: var(--os-space-3xs);
}
.pb-3xs {
padding-bottom: var(--os-space-3xs);
}
.pl-3xs {
padding-left: var(--os-space-3xs);
}
.p-2xs {
padding: var(--os-space-2xs);
}
.py-2xs {
padding-top: var(--os-space-2xs);
padding-bottom: var(--os-space-2xs);
}
.px-2xs {
padding-right: var(--os-space-2xs);
padding-left: var(--os-space-2xs);
}
.pt-2xs {
padding-top: var(--os-space-2xs);
}
.pr-2xs {
padding-right: var(--os-space-2xs);
}
.pb-2xs {
padding-bottom: var(--os-space-2xs);
}
.pl-2xs {
padding-left: var(--os-space-2xs);
}
.p-xs {
padding: var(--os-space-xs);
}
.py-xs {
padding-top: var(--os-space-xs);
padding-bottom: var(--os-space-xs);
}
.px-xs {
padding-right: var(--os-space-xs);
padding-left: var(--os-space-xs);
}
.pt-xs {
padding-top: var(--os-space-xs);
}
.pr-xs {
padding-right: var(--os-space-xs);
}
.pb-xs {
padding-bottom: var(--os-space-xs);
}
.pl-xs {
padding-left: var(--os-space-xs);
}
.p-sm {
padding: var(--os-space-sm);
}
.py-sm {
padding-top: var(--os-space-sm);
padding-bottom: var(--os-space-sm);
}
.px-sm {
padding-right: var(--os-space-sm);
padding-left: var(--os-space-sm);
}
.pt-sm {
padding-top: var(--os-space-sm);
}
.pr-sm {
padding-right: var(--os-space-sm);
}
.pb-sm {
padding-bottom: var(--os-space-sm);
}
.pl-sm {
padding-left: var(--os-space-sm);
}
.p-md {
padding: var(--os-space-md);
}
.py-md {
padding-top: var(--os-space-md);
padding-bottom: var(--os-space-md);
}
.px-md {
padding-right: var(--os-space-md);
padding-left: var(--os-space-md);
}
.pt-md {
padding-top: var(--os-space-md);
}
.pr-md {
padding-right: var(--os-space-md);
}
.pb-md {
padding-bottom: var(--os-space-md);
}
.pl-md {
padding-left: var(--os-space-md);
}
.p-lg {
padding: var(--os-space-lg);
}
.py-lg {
padding-top: var(--os-space-lg);
padding-bottom: var(--os-space-lg);
}
.px-lg {
padding-right: var(--os-space-lg);
padding-left: var(--os-space-lg);
}
.pt-lg {
padding-top: var(--os-space-lg);
}
.pr-lg {
padding-right: var(--os-space-lg);
}
.pb-lg {
padding-bottom: var(--os-space-lg);
}
.pl-lg {
padding-left: var(--os-space-lg);
}
.p-xl {
padding: var(--os-space-xl);
}
.py-xl {
padding-top: var(--os-space-xl);
padding-bottom: var(--os-space-xl);
}
.px-xl {
padding-right: var(--os-space-xl);
padding-left: var(--os-space-xl);
}
.pt-xl {
padding-top: var(--os-space-xl);
}
.pr-xl {
padding-right: var(--os-space-xl);
}
.pb-xl {
padding-bottom: var(--os-space-xl);
}
.pl-xl {
padding-left: var(--os-space-xl);
}
.p-2xl {
padding: var(--os-space-2xl);
}
.py-2xl {
padding-top: var(--os-space-2xl);
padding-bottom: var(--os-space-2xl);
}
.px-2xl {
padding-right: var(--os-space-2xl);
padding-left: var(--os-space-2xl);
}
.pt-2xl {
padding-top: var(--os-space-2xl);
}
.pr-2xl {
padding-right: var(--os-space-2xl);
}
.pb-2xl {
padding-bottom: var(--os-space-2xl);
}
.pl-2xl {
padding-left: var(--os-space-2xl);
}
.p-3xl {
padding: var(--os-space-3xl);
}
.py-3xl {
padding-top: var(--os-space-3xl);
padding-bottom: var(--os-space-3xl);
}
.px-3xl {
padding-right: var(--os-space-3xl);
padding-left: var(--os-space-3xl);
}
.pt-3xl {
padding-top: var(--os-space-3xl);
}
.pr-3xl {
padding-right: var(--os-space-3xl);
}
.pb-3xl {
padding-bottom: var(--os-space-3xl);
}
.pl-3xl {
padding-left: var(--os-space-3xl);
}
.p-4xl {
padding: var(--os-space-4xl);
}
.py-4xl {
padding-top: var(--os-space-4xl);
padding-bottom: var(--os-space-4xl);
}
.px-4xl {
padding-right: var(--os-space-4xl);
padding-left: var(--os-space-4xl);
}
.pt-4xl {
padding-top: var(--os-space-4xl);
}
.pr-4xl {
padding-right: var(--os-space-4xl);
}
.pb-4xl {
padding-bottom: var(--os-space-4xl);
}
.pl-4xl {
padding-left: var(--os-space-4xl);
}
.p-5xl {
padding: var(--os-space-5xl);
}
.py-5xl {
padding-top: var(--os-space-5xl);
padding-bottom: var(--os-space-5xl);
}
.px-5xl {
padding-right: var(--os-space-5xl);
padding-left: var(--os-space-5xl);
}
.pt-5xl {
padding-top: var(--os-space-5xl);
}
.pr-5xl {
padding-right: var(--os-space-5xl);
}
.pb-5xl {
padding-bottom: var(--os-space-5xl);
}
.pl-5xl {
padding-left: var(--os-space-5xl);
}
.p-6xl {
padding: var(--os-space-6xl);
}
.py-6xl {
padding-top: var(--os-space-6xl);
padding-bottom: var(--os-space-6xl);
}
.px-6xl {
padding-right: var(--os-space-6xl);
padding-left: var(--os-space-6xl);
}
.pt-6xl {
padding-top: var(--os-space-6xl);
}
.pr-6xl {
padding-right: var(--os-space-6xl);
}
.pb-6xl {
padding-bottom: var(--os-space-6xl);
}
.pl-6xl {
padding-left: var(--os-space-6xl);
}
.p-16-24-32 {
padding: var(--space-16-24-32);
}
.py-16-24-32 {
padding-top: var(--space-16-24-32);
padding-bottom: var(--space-16-24-32);
}
.px-16-24-32 {
padding-right: var(--space-16-24-32);
padding-left: var(--space-16-24-32);
}
.p-0 {
padding: 0;
}
.py-0 {
padding-top: 0;
padding-bottom: 0;
}
.px-0 {
padding-left: 0;
padding-right: 0;
}
.pt-0 {
padding-top: 0;
}
.pr-0 {
padding-right: 0;
}
.pb-0 {
padding-bottom: 0;
}
.pl-0 {
padding-left: 0;
}
.m-4xs {
margin: var(--os-space-4xs);
}
.my-4xs {
margin-top: var(--os-space-4xs);
margin-bottom: var(--os-space-4xs);
}
.mx-4xs {
margin-right: var(--os-space-4xs);
margin-left: var(--os-space-4xs);
}
.mt-4xs {
margin-top: var(--os-space-4xs);
}
.mr-4xs {
margin-right: var(--os-space-4xs);
}
.mb-4xs {
margin-bottom: var(--os-space-4xs);
}
.ml-4xs {
margin-left: var(--os-space-4xs);
}
.m-3xs {
margin: var(--os-space-3xs);
}
.my-3xs {
margin-top: var(--os-space-3xs);
margin-bottom: var(--os-space-3xs);
}
.mx-3xs {
margin-right: var(--os-space-3xs);
margin-left: var(--os-space-3xs);
}
.mt-3xs {
margin-top: var(--os-space-3xs);
}
.mr-3xs {
margin-right: var(--os-space-3xs);
}
.mb-3xs {
margin-bottom: var(--os-space-3xs);
}
.ml-3xs {
margin-left: var(--os-space-3xs);
}
.m-2xs {
margin: var(--os-space-2xs);
}
.my-2xs {
margin-top: var(--os-space-2xs);
margin-bottom: var(--os-space-2xs);
}
.mx-2xs {
margin-right: var(--os-space-2xs);
margin-left: var(--os-space-2xs);
}
.mt-2xs {
margin-top: var(--os-space-2xs);
}
.mr-2xs {
margin-right: var(--os-space-2xs);
}
.mb-2xs {
margin-bottom: var(--os-space-2xs);
}
.ml-2xs {
margin-left: var(--os-space-2xs);
}
.m-xs {
margin: var(--os-space-xs);
}
.my-xs {
margin-top: var(--os-space-xs);
margin-bottom: var(--os-space-xs);
}
.mx-xs {
margin-right: var(--os-space-xs);
margin-left: var(--os-space-xs);
}
.mt-xs {
margin-top: var(--os-space-xs);
}
.mr-xs {
margin-right: var(--os-space-xs);
}
.mb-xs {
margin-bottom: var(--os-space-xs);
}
.ml-xs {
margin-left: var(--os-space-xs);
}
.m-sm {
margin: var(--os-space-sm);
}
.my-sm {
margin-top: var(--os-space-sm);
margin-bottom: var(--os-space-sm);
}
.mx-sm {
margin-right: var(--os-space-sm);
margin-left: var(--os-space-sm);
}
.mt-sm {
margin-top: var(--os-space-sm);
}
.mr-sm {
margin-right: var(--os-space-sm);
}
.mb-sm {
margin-bottom: var(--os-space-sm);
}
.ml-sm {
margin-left: var(--os-space-sm);
}
.m-md {
margin: var(--os-space-md);
}
.my-md {
margin-top: var(--os-space-md);
margin-bottom: var(--os-space-md);
}
.mx-md {
margin-right: var(--os-space-md);
margin-left: var(--os-space-md);
}
.mt-md {
margin-top: var(--os-space-md);
}
.mr-md {
margin-right: var(--os-space-md);
}
.mb-md {
margin-bottom: var(--os-space-md);
}
.ml-md {
margin-left: var(--os-space-md);
}
.m-lg {
margin: var(--os-space-lg);
}
.my-lg {
margin-top: var(--os-space-lg);
margin-bottom: var(--os-space-lg);
}
.mx-lg {
margin-right: var(--os-space-lg);
margin-left: var(--os-space-lg);
}
.mt-lg {
margin-top: var(--os-space-lg);
}
.mr-lg {
margin-right: var(--os-space-lg);
}
.mb-lg {
margin-bottom: var(--os-space-lg);
}
.ml-lg {
margin-left: var(--os-space-lg);
}
.m-xl {
margin: var(--os-space-xl);
}
.my-xl {
margin-top: var(--os-space-xl);
margin-bottom: var(--os-space-xl);
}
.mx-xl {
margin-right: var(--os-space-xl);
margin-left: var(--os-space-xl);
}
.mt-xl {
margin-top: var(--os-space-xl);
}
.mr-xl {
margin-right: var(--os-space-xl);
}
.mb-xl {
margin-bottom: var(--os-space-xl);
}
.ml-xl {
margin-left: var(--os-space-xl);
}
.m-2xl {
margin: var(--os-space-2xl);
}
.my-2xl {
margin-top: var(--os-space-2xl);
margin-bottom: var(--os-space-2xl);
}
.mx-2xl {
margin-right: var(--os-space-2xl);
margin-left: var(--os-space-2xl);
}
.mt-2xl {
margin-top: var(--os-space-2xl);
}
.mr-2xl {
margin-right: var(--os-space-2xl);
}
.mb-2xl {
margin-bottom: var(--os-space-2xl);
}
.ml-2xl {
margin-left: var(--os-space-2xl);
}
.m-3xl {
margin: var(--os-space-3xl);
}
.my-3xl {
margin-top: var(--os-space-3xl);
margin-bottom: var(--os-space-3xl);
}
.mx-3xl {
margin-right: var(--os-space-3xl);
margin-left: var(--os-space-3xl);
}
.mt-3xl {
margin-top: var(--os-space-3xl);
}
.mr-3xl {
margin-right: var(--os-space-3xl);
}
.mb-3xl {
margin-bottom: var(--os-space-3xl);
}
.ml-3xl {
margin-left: var(--os-space-3xl);
}
.m-4xl {
margin: var(--os-space-4xl);
}
.my-4xl {
margin-top: var(--os-space-4xl);
margin-bottom: var(--os-space-4xl);
}
.mx-4xl {
margin-right: var(--os-space-4xl);
margin-left: var(--os-space-4xl);
}
.mt-4xl {
margin-top: var(--os-space-4xl);
}
.mr-4xl {
margin-right: var(--os-space-4xl);
}
.mb-4xl {
margin-bottom: var(--os-space-4xl);
}
.ml-4xl {
margin-left: var(--os-space-4xl);
}
.m-5xl {
margin: var(--os-space-5xl);
}
.my-5xl {
margin-top: var(--os-space-5xl);
margin-bottom: var(--os-space-5xl);
}
.mx-5xl {
margin-right: var(--os-space-5xl);
margin-left: var(--os-space-5xl);
}
.mt-5xl {
margin-top: var(--os-space-5xl);
}
.mr-5xl {
margin-right: var(--os-space-5xl);
}
.mb-5xl {
margin-bottom: var(--os-space-5xl);
}
.ml-5xl {
margin-left: var(--os-space-5xl);
}
.m-6xl {
margin: var(--os-space-6xl);
}
.my-6xl {
margin-top: var(--os-space-6xl);
margin-bottom: var(--os-space-6xl);
}
.mx-6xl {
margin-right: var(--os-space-6xl);
margin-left: var(--os-space-6xl);
}
.mt-6xl {
margin-top: var(--os-space-6xl);
}
.mr-6xl {
margin-right: var(--os-space-6xl);
}
.mb-6xl {
margin-bottom: var(--os-space-6xl);
}
.ml-6xl {
margin-left: var(--os-space-6xl);
}
.m-16-24-32 {
margin: var(--space-16-24-32);
}
.my-16-24-32 {
margin-top: var(--space-16-24-32);
margin-bottom: var(--space-16-24-32);
}
.mx-16-24-32 {
margin-right: var(--space-16-24-32);
margin-left: var(--space-16-24-32);
}
.m-0 {
margin: 0;
}
.my-0 {
margin-top: 0;
margin-bottom: 0;
}
.mx-0 {
margin-left: 0;
margin-right: 0;
}
.mt-0 {
margin-top: 0;
}
.mr-0 {
margin-right: 0;
}
.mb-0 {
margin-bottom: 0;
}
.ml-0 {
margin-left: 0;
}
.m-auto {
margin: auto;
}
.my-auto {
margin-top: auto;
margin-bottom: auto;
}
.mx-auto {
margin-left: auto;
margin-right: auto;
}
.mt-auto {
margin-top: auto;
}
.mr-auto {
margin-right: auto;
}
.mb-auto {
margin-bottom: auto;
}
.ml-auto {
margin-left: auto;
}
.basis-12 {
flex-basis: 12.5%;
}
.basis-25 {
flex-basis: 25%;
}
.basis-33 {
flex-basis: 33%;
}
.basis-50 {
flex-basis: 50%;
}
.basis-75 {
flex-basis: 75%;
}
.basis-100 {
flex-basis: 100%;
}
.flex-row {
flex-direction: row;
}
.flex-row-reverse {
flex-direction: row-reverse;
}
.flex-col {
flex-direction: column;
}
.flex-col-reverse {
flex-direction: column-reverse;
}
.flex-wrap {
flex-wrap: wrap;
}
.flex-wrap-reverse {
flex-wrap: wrap-reverse;
}
.flex-nowrap {
flex-wrap: nowrap;
}
.flex-1 {
flex: 1;
}
.flex-auto {
flex: auto;
}
.flex-initial {
flex: 0 auto;
}
.flex-none {
flex: none;
}
.flex-shrink {
flex-shrink: 1;
}
.flex-shrink-0 {
flex-shrink: 0;
}
.shrink {
flex-shrink: 1;
}
.shrink-0 {
flex-shrink: 0;
}
.flex-grow {
flex-grow: 1;
}
.flex-grow-0 {
flex-grow: 0;
}
.grow {
flex-grow: 1;
}
.grow-0 {
flex-grow: 0;
}
.order-1 {
order: 1;
}
.order-2 {
order: 2;
}
.order-3 {
order: 3;
}
.order-4 {
order: 4;
}
.order-5 {
order: 5;
}
.order-6 {
order: 6;
}
.order-first {
order: -9999;
}
.order-last {
order: 9999;
}
.order-none {
order: 0;
}
.grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid-cols-5 {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.grid-cols-6 {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.grid-cols-7 {
grid-template-columns: repeat(7, minmax(0, 1fr));
}
.grid-cols-8 {
grid-template-columns: repeat(8, minmax(0, 1fr));
}
.grid-cols-9 {
grid-template-columns: repeat(9, minmax(0, 1fr));
}
.grid-cols-10 {
grid-template-columns: repeat(10, minmax(0, 1fr));
}
.grid-cols-11 {
grid-template-columns: repeat(11, minmax(0, 1fr));
}
.grid-cols-12 {
grid-template-columns: repeat(12, minmax(0, 1fr));
}
.grid-cols-none {
grid-template-columns: none;
}
.col-auto {
grid-column: auto;
}
.col-span-1 {
grid-column: span 1 / span 1;
}
.col-span-2 {
grid-column: span 2 / span 2;
}
.col-span-3 {
grid-column: span 3 / span 3;
}
.col-span-4 {
grid-column: span 4 / span 4;
}
.col-span-5 {
grid-column: span 5 / span 5;
}
.col-span-6 {
grid-column: span 6 / span 6;
}
.col-span-7 {
grid-column: span 7 / span 7;
}
.col-span-8 {
grid-column: span 8 / span 8;
}
.col-span-9 {
grid-column: span 9 / span 9;
}
.col-span-10 {
grid-column: span 10 / span 10;
}
.col-span-11 {
grid-column: span 11 / span 11;
}
.col-span-12 {
grid-column: span 12 / span 12;
}
.col-span-full {
grid-column: 1 / -1;
}
.col-start-1 {
grid-column-start: 1;
}
.col-start-2 {
grid-column-start: 2;
}
.col-start-3 {
grid-column-start: 3;
}
.col-start-4 {
grid-column-start: 4;
}
.col-start-5 {
grid-column-start: 5;
}
.col-start-6 {
grid-column-start: 6;
}
.col-start-7 {
grid-column-start: 7;
}
.col-start-8 {
grid-column-start: 8;
}
.col-start-9 {
grid-column-start: 9;
}
.col-start-10 {
grid-column-start: 10;
}
.col-start-11 {
grid-column-start: 11;
}
.col-start-12 {
grid-column-start: 12;
}
.col-start-13 {
grid-column-start: 13;
}
.col-start-auto {
grid-column-start: auto;
}
.col-end-1 {
grid-column-end: 1;
}
.col-end-2 {
grid-column-end: 2;
}
.col-end-3 {
grid-column-end: 3;
}
.col-end-4 {
grid-column-end: 4;
}
.col-end-5 {
grid-column-end: 5;
}
.col-end-6 {
grid-column-end: 6;
}
.col-end-7 {
grid-column-end: 7;
}
.col-end-8 {
grid-column-end: 8;
}
.col-end-9 {
grid-column-end: 9;
}
.col-end-10 {
grid-column-end: 10;
}
.col-end-11 {
grid-column-end: 11;
}
.col-end-12 {
grid-column-end: 12;
}
.col-end-13 {
grid-column-end: 13;
}
.col-end-auto {
grid-column-end: auto;
}
.grid-rows-1 {
grid-template-rows: repeat(1, minmax(0, 1fr));
}
.grid-rows-2 {
grid-template-rows: repeat(2, minmax(0, 1fr));
}
.grid-rows-3 {
grid-template-rows: repeat(3, minmax(0, 1fr));
}
.grid-rows-4 {
grid-template-rows: repeat(4, minmax(0, 1fr));
}
.grid-rows-5 {
grid-template-rows: repeat(5, minmax(0, 1fr));
}
.grid-rows-6 {
grid-template-rows: repeat(6, minmax(0, 1fr));
}
.grid-rows-none {
grid-template-rows: none;
}
.row-auto {
grid-row: auto;
}
.row-span-1 {
grid-row: span 1 / span 1;
}
.row-span-2 {
grid-row: span 2 / span 2;
}
.row-span-3 {
grid-row: span 3 / span 3;
}
.row-span-4 {
grid-row: span 4 / span 4;
}
.row-span-5 {
grid-row: span 5 / span 5;
}
.row-span-6 {
grid-row: span 6 / span 6;
}
.row-span-full {
grid-row: 1 / -1;
}
.row-start-1 {
grid-row-start: 1;
}
.row-start-2 {
grid-row-start: 2;
}
.row-start-3 {
grid-row-start: 3;
}
.row-start-4 {
grid-row-start: 4;
}
.row-start-5 {
grid-row-start: 5;
}
.row-start-6 {
grid-row-start: 6;
}
.row-start-7 {
grid-row-start: 7;
}
.row-start-auto {
grid-row-start: auto;
}
.row-end-1 {
grid-row-end: 1;
}
.row-end-2 {
grid-row-end: 2;
}
.row-end-3 {
grid-row-end: 3;
}
.row-end-4 {
grid-row-end: 4;
}
.row-end-5 {
grid-row-end: 5;
}
.row-end-6 {
grid-row-end: 6;
}
.row-end-7 {
grid-row-end: 7;
}
.row-end-auto {
grid-row-end: auto;
}
.grid-flow-row {
grid-auto-flow: row;
}
.grid-flow-col {
grid-auto-flow: column;
}
.grid-flow-dense {
grid-auto-flow: dense;
}
.grid-flow-row-dense {
grid-auto-flow: row dense;
}
.grid-flow-col-dense {
grid-auto-flow: column dense;
}
.auto-cols-auto {
grid-auto-columns: auto;
}
.auto-cols-min {
grid-auto-columns: min-content;
}
.auto-cols-max {
grid-auto-columns: max-content;
}
.auto-cols-fr {
grid-auto-columns: minmax(0, 1fr);
}
.auto-rows-auto {
grid-auto-rows: auto;
}
.auto-rows-min {
grid-auto-rows: min-content;
}
.auto-rows-max {
grid-auto-rows: max-content;
}
.auto-rows-fr {
grid-auto-rows: minmax(0, 1fr);
}
.gap-4xs {
gap: var(--os-space-4xs);
}
.gap-y-4xs {
row-gap: var(--os-space-4xs);
}
.gap-x-4xs {
column-gap: var(--os-space-4xs);
}
.gap-3xs {
gap: var(--os-space-3xs);
}
.gap-y-3xs {
row-gap: var(--os-space-3xs);
}
.gap-x-3xs {
column-gap: var(--os-space-3xs);
}
.gap-2xs {
gap: var(--os-space-2xs);
}
.gap-y-2xs {
row-gap: var(--os-space-2xs);
}
.gap-xs {
gap: var(--os-space-2xs);
}
.gap-y-xs {
row-gap: var(--os-space-2xs);
}
.gap-x-xs {
column-gap: var(--os-space-2xs);
}
.gap-sm {
gap: var(--os-space-sm);
}
.gap-y-sm {
row-gap: var(--os-space-sm);
}
.gap-x-sm {
column-gap: var(--os-space-sm);
}
.gap-md {
gap: var(--os-space-md);
}
.gap-y-md {
row-gap: var(--os-space-md);
}
.gap-x-md {
column-gap: var(--os-space-md);
}
.gap-lg {
gap: var(--os-space-lg);
}
.gap-y-lg {
row-gap: var(--os-space-lg);
}
.gap-x-lg {
column-gap: var(--os-space-lg);
}
.gap-xl {
gap: var(--os-space-xl);
}
.gap-y-xl {
row-gap: var(--os-space-xl);
}
.gap-x-xl {
column-gap: var(--os-space-xl);
}
.gap-2xl {
gap: var(--os-space-2xl);
}
.gap-y-2xl {
row-gap: var(--os-space-2xl);
}
.gap-x-2xl {
column-gap: var(--os-space-2xl);
}
.gap-3xl {
gap: var(--os-space-3xl);
}
.gap-y-3xl {
row-gap: var(--os-space-3xl);
}
.gap-x-3xl {
column-gap: var(--os-space-3xl);
}
.gap-4xl {
gap: var(--os-space-4xl);
}
.gap-y-4xl {
row-gap: var(--os-space-4xl);
}
.gap-x-4xl {
column-gap: var(--os-space-4xl);
}
.gap-5xl {
gap: var(--os-space-5xl);
}
.gap-y-5xl {
row-gap: var(--os-space-5xl);
}
.gap-x-5xl {
column-gap: var(--os-space-5xl);
}
.gap-6xl {
gap: var(--os-space-6xl);
}
.gap-y-6xl {
row-gap: var(--os-space-6xl);
}
.gap-x-6xl {
column-gap: var(--os-space-6xl);
}
.gap-16-24-32 {
gap: var(--space-16-24-32);
}
.gap-y-16-24-32 {
row-gap: var(--space-16-24-32);
}
.gap-x-16-24-32 {
column-gap: var(--space-16-24-32);
}
.justify-normal {
justify-content: normal !important;
}
.justify-start {
justify-content: flex-start !important;
}
.justify-end {
justify-content: flex-end !important;
}
.justify-center {
justify-content: center !important;
}
.justify-between {
justify-content: space-between !important;
}
.justify-around {
justify-content: space-around !important;
}
.justify-evenly {
justify-content: space-evenly !important;
}
.justify-stretch {
justify-content: stretch !important;
}
.justify-items-start {
justify-items: start !important;
}
.justify-items-end {
justify-items: end !important;
}
.justify-items-center {
justify-items: center !important;
}
.justify-items-stretch {
justify-items: stretch !important;
}
.justify-self-auto {
justify-self: auto !important;
}
.justify-self-start {
justify-self: start !important;
}
.justify-self-end {
justify-self: end !important;
}
.justify-self-center {
justify-self: center !important;
}
.justify-self-stretch {
justify-self: stretch !important;
}
.content-normal {
align-content: normal !important;
}
.content-center {
align-content: center !important;
}
.content-start {
align-content: flex-start !important;
}
.content-end {
align-content: flex-end !important;
}
.content-between {
align-content: space-between !important;
}
.content-around {
align-content: space-around !important;
}
.content-evenly {
align-content: space-evenly !important;
}
.content-baseline {
align-content: baseline !important;
}
.content-stretch {
align-content: stretch !important;
}
.items-start {
align-items: flex-start !important;
}
.items-end {
align-items: flex-end !important;
}
.items-center {
align-items: center !important;
}
.items-baseline {
align-items: baseline !important;
}
.items-stretch {
align-items: stretch !important;
}
.self-auto {
align-self: auto !important;
}
.self-start {
align-self: flex-start !important;
}
.self-end {
align-self: flex-end !important;
}
.self-center {
align-self: center !important;
}
.self-stretch {
align-self: stretch !important;
}
.self-baseline {
align-self: baseline !important;
}
.place-content-center {
align-content: center !important;
justify-content: center !important;
}
.place-content-start {
align-content: start !important;
justify-content: start !important;
}
.place-content-end {
align-content: end !important;
justify-content: end !important;
}
.place-content-between {
align-content: space-between !important;
justify-content: space-between !important;
}
.place-content-around {
align-content: space-around !important;
justify-content: space-around !important;
}
.place-content-evenly {
align-content: space-evenly !important;
justify-content: space-evenly !important;
}
.place-content-baseline {
align-content: baseline !important;
justify-content: start !important;
}
.place-content-stretch {
align-content: stretch !important;
justify-content: stretch !important;
}
.place-items-start {
align-items: start !important;
justify-items: start !important;
}
.place-items-end {
align-items: end !important;
justify-items: end !important;
}
.place-items-center {
align-items: center !important;
justify-items: center !important;
}
.place-items-baseline {
align-items: baseline !important;
justify-items: baseline !important;
}
.place-items-stretch {
align-items: stretch !important;
justify-items: stretch !important;
}
.place-self-auto {
align-self: auto !important;
justify-self: auto !important;
}
.place-self-start {
align-self: start !important;
justify-self: start !important;
}
.place-self-end {
align-self: end !important;
justify-self: end !important;
}
.place-self-center {
align-self: center !important;
justify-self: center !important;
}
.place-self-stretch {
align-self: stretch !important;
justify-self: stretch !important;
}
.w-0 {
width: 0;
}
.w-1px {
width: 1px;
}
.w-auto {
width: auto;
}
.w-10 {
width: 10%;
}
.w-25 {
width: 25%;
}
.w-33 {
width: 33.33%;
}
.w-50 {
width: 50%;
}
.w-66 {
width: 66.66%;
}
.w-75 {
width: 75%;
}
.w-100,
.w-full {
width: 100%;
}
.w-4xs {
width: var(--os-size-4xs);
}
.w-3xs {
width: var(--os-size-3xs);
}
.w-2xs {
width: var(--os-size-2xs);
}
.w-xs {
width: var(--os-size-xs);
}
.w-sm {
width: var(--os-size-sm);
}
.w-md {
width: var(--os-size-md);
}
.w-lg {
width: var(--os-size-lg);
}
.w-xl {
width: var(--os-size-xl);
}
.w-2xl {
width: var(--os-size-2xl);
}
.w-3xl {
width: var(--os-size-3xl);
}
.w-4xl {
width: var(--os-size-4xl);
}
.w-5xl {
width: var(--os-size-5xl);
}
.w-6xl {
width: var(--os-size-6xl);
}
.w-screen {
width: 100vw;
}
.w-min {
width: min-content;
}
.w-max {
width: max-content;
}
.w-fit {
width: fit-content;
}
.min-w-0 {
min-width: 0;
}
.min-w-full {
min-width: 100%;
}
.min-w-min {
min-width: min-content;
}
.min-w-max {
min-width: max-content;
}
.min-w-fit {
min-width: fit-content;
}
.min-w-xs4,
.min-w-xs3,
.min-w-xs2 {
width: var(--os-size-xs2);
}
.min-w-xs {
width: var(--os-size-xs);
}
.min-w-sm {
width: var(--os-size-sm);
}
.min-w-md {
width: var(--os-size-md);
}
.min-w-lg {
width: var(--os-size-lg);
}
.min-w-xl {
width: var(--os-size-xl);
}
.min-w-2xl {
width: var(--os-size-2xl);
}
.min-w-3xl {
width: var(--os-size-3xl);
}
.min-w-4xl {
width: var(--os-size-4xl);
}
.min-w-5xl {
width: var(--os-size-5xl);
}
.min-w-6xl {
width: var(--os-size-6xl);
}
.max-w-0 {
max-width: 0;
}
.max-w-none {
max-width: none;
}
.max-w-full {
max-width: 100%;
}
.max-w-min {
max-width: min-content;
}
.max-w-max {
max-width: max-content;
}
.max-w-fit {
max-width: fit-content;
}
.max-w-xs4,
.max-w-xs3,
.max-w-xs2 {
width: var(--os-size-xs2);
}
.max-w-xs {
width: var(--os-size-xs);
}
.max-w-sm {
width: var(--os-size-sm);
}
.max-w-md {
width: var(--os-size-md);
}
.max-w-lg {
width: var(--os-size-lg);
}
.max-w-xl {
width: var(--os-size-xl);
}
.max-w-2xl {
width: var(--os-size-2xl);
}
.max-w-3xl {
width: var(--os-size-3xl);
}
.max-w-4xl {
width: var(--os-size-4xl);
}
.max-w-5xl {
width: var(--os-size-5xl);
}
.max-w-6xl {
width: var(--os-size-6xl);
}
.h-0 {
height: 0;
}
.h-1px {
height: 1px;
}
.h-auto {
height: auto;
}
.h-10 {
height: 10%;
}
.h-25 {
height: 25%;
}
.h-33 {
height: 33.33%;
}
.h-50 {
height: 50%;
}
.h-66 {
height: 66.66%;
}
.h-75 {
height: 75%;
}
.h-100,
.h-full {
height: 100%;
}
.h-4xs {
height: var(--os-size-4xs);
}
.h-3xs {
height: var(--os-size-3xs);
}
.h-2xs {
height: var(--os-size-2xs);
}
.h-xs {
height: var(--os-size-xs);
}
.h-sm {
height: var(--os-size-sm);
}
.h-md {
height: var(--os-size-md);
}
.h-lg {
height: var(--os-size-lg);
}
.h-xl {
height: var(--os-size-xl);
}
.h-2xl {
height: var(--os-size-2xl);
}
.h-3xl {
height: var(--os-size-3xl);
}
.h-4xl {
height: var(--os-size-4xl);
}
.h-5xl {
height: var(--os-size-5xl);
}
.h-6xl {
height: var(--os-size-6xl);
}
.h-screen {
height: 100vw;
}
.h-min {
height: min-content;
}
.h-max {
height: max-content;
}
.h-fit {
height: fit-content;
}
.min-h-0 {
min-height: 0;
}
.min-h-full {
min-height: 100%;
}
.min-h-xs4,
.min-h-xs3,
.min-h-xs2 {
width: var(--os-size-xs2);
}
.min-h-xs {
width: var(--os-size-xs);
}
.min-h-sm {
width: var(--os-size-sm);
}
.min-h-md {
width: var(--os-size-md);
}
.min-h-lg {
width: var(--os-size-lg);
}
.min-h-xl {
width: var(--os-size-xl);
}
.min-h-2xl {
width: var(--os-size-2xl);
}
.min-h-3xl {
width: var(--os-size-3xl);
}
.min-h-4xl {
width: var(--os-size-4xl);
}
.min-h-5xl {
width: var(--os-size-5xl);
}
.min-h-6xl {
width: var(--os-size-6xl);
}
.min-h-screen {
min-height: 100vh;
}
.min-h-min {
min-height: min-content;
}
.min-h-max {
min-height: max-content;
}
.min-h-fit {
min-height: fit-content;
}
.max-h-0 {
max-height: 0;
}
.max-h-none {
max-height: none;
}
.max-h-xs4,
.max-h-xs3,
.max-h-xs2 {
width: var(--os-size-xs2);
}
.max-h-xs {
width: var(--os-size-xs);
}
.max-h-sm {
width: var(--os-size-sm);
}
.max-h-md {
width: var(--os-size-md);
}
.max-h-lg {
width: var(--os-size-lg);
}
.max-h-xl {
width: var(--os-size-xl);
}
.max-h-2xl {
width: var(--os-size-2xl);
}
.max-h-3xl {
width: var(--os-size-3xl);
}
.max-h-4xl {
width: var(--os-size-4xl);
}
.max-h-5xl {
width: var(--os-size-5xl);
}
.max-h-6xl {
width: var(--os-size-6xl);
}
.max-h-full {
max-height: 100%;
}
.max-h-min {
max-height: min-content;
}
.max-h-max {
max-height: max-content;
}
.max-h-fit {
max-height: fit-content;
}
.shadow-2xs {
box-shadow: var(--os-shadow-2xs);
}
.shadow-xs {
box-shadow: var(--os-shadow-xs);
}
.shadow-sm {
box-shadow: var(--os-shadow-sm);
}
.shadow-md {
box-shadow: var(--os-shadow-md);
}
.shadow-lg {
box-shadow: var(--os-shadow-lg);
}
.shadow-xl {
box-shadow: var(--os-shadow-xl);
}
.shadow-2xl {
box-shadow: var(--os-shadow-2xl);
}
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
font-family: var(--os-heading-font-family);
font-weight: var(--os-heading-font-weight);
}
h1,
.h1 {
font-size: var(--os-font-size-3xl);
}
h2,
.h2 {
font-size: var(--os-font-size-2xl);
}
h3,
.h3 {
font-size: var(--os-font-size-xl);
}
h4,
.h4 {
font-size: var(--os-font-size-lg);
}
h5,
.h5 {
font-size: var(--os-font-size-md);
}
h6,
.h6 {
font-size: var(--os-font-size-sm);
}
.text-xs {
font-size: 0.75rem;
}
.text-sm {
font-size: 0.875rem;
}
.text-base {
font-size: 1rem;
}
.text-lg {
font-size: 1.125rem;
}
.text-xl {
font-size: 1.25rem;
}
.text-2xl {
font-size: 1.5rem;
}
.text-3xl {
font-size: 1.75rem;
}
.text-4xl {
font-size: 2rem;
}
.text-5xl {
font-size: 2.5rem;
}
.text-left {
text-align: left !important;
}
.text-center {
text-align: center !important;
}
.text-right {
text-align: right !important;
}
.text-justify {
text-align: justify !important;
}
.text-start:not(
:is(
:lang(ae),
:lang(ar),
:lang(arc),
:lang(bcc),
:lang(bqi),
:lang(ckb),
:lang(dv),
:lang(fa),
:lang(glk),
:lang(he),
:lang(ku),
:lang(mzn),
:lang(nqo),
:lang(pnb),
:lang(ps),
:lang(sd),
:lang(ug),
:lang(ur),
:lang(yi)
)
) {
text-align: left;
}
.text-start:is(
:lang(ae),
:lang(ar),
:lang(arc),
:lang(bcc),
:lang(bqi),
:lang(ckb),
:lang(dv),
:lang(fa),
:lang(glk),
:lang(he),
:lang(ku),
:lang(mzn),
:lang(nqo),
:lang(pnb),
:lang(ps),
:lang(sd),
:lang(ug),
:lang(ur),
:lang(yi)
) {
text-align: right;
}
.text-end:not(
:is(
:lang(ae),
:lang(ar),
:lang(arc),
:lang(bcc),
:lang(bqi),
:lang(ckb),
:lang(dv),
:lang(fa),
:lang(glk),
:lang(he),
:lang(ku),
:lang(mzn),
:lang(nqo),
:lang(pnb),
:lang(ps),
:lang(sd),
:lang(ug),
:lang(ur),
:lang(yi)
)
) {
text-align: right;
}
.text-end:is(
:lang(ae),
:lang(ar),
:lang(arc),
:lang(bcc),
:lang(bqi),
:lang(ckb),
:lang(dv),
:lang(fa),
:lang(glk),
:lang(he),
:lang(ku),
:lang(mzn),
:lang(nqo),
:lang(pnb),
:lang(ps),
:lang(sd),
:lang(ug),
:lang(ur),
:lang(yi)
) {
text-align: left;
}
.text-white {
color: var(--os-color-white) !important;
}
.text-contrast {
color: var(--os-text-contrast-color);
}
.text-color {
color: var(--os-text-color) !important;
}
.text-color-primary {
color: var(--os-text-primary-color) !important;
}
.text-color-secondary {
color: var(--os-text-secondary-color) !important;
}
.text-color-tertiary {
color: var(--os-text-tertiary-color) !important;
}
.text-color-danger {
color: var(--os-text-danger-color) !important;
}
.text-color-success {
color: var(--os-text-success-color) !important;
}
.text-color-warning {
color: var(--os-text-warning-color) !important;
}
.font-weight-100 {
font-weight: 100;
}
.font-weight-200 {
font-weight: 200;
}
.font-weight-300 {
font-weight: 300;
}
.font-weight-400 {
font-weight: 400;
}
.font-weight-500 {
font-weight: 500;
}
.font-weight-600 {
font-weight: 600;
}
.font-weight-700 {
font-weight: 700;
}
.font-weight-800 {
font-weight: 800;
}
.font-weight-900 {
font-weight: 900;
}
.bg-black {
background: var(--os-color-black);
}
.bg-white {
background: var(--os-color-white);
}
.bg-grey-100 {
background-color: var(--os-color-grey-100);
}
.bg-grey-200 {
background-color: var(--os-color-grey-200);
}
.bg-grey-300 {
background-color: var(--os-color-grey-300);
}
.bg-grey-400 {
background-color: var(--os-color-grey-400);
}
.bg-grey-500 {
background-color: var(--os-color-grey-500);
}
.bg-grey-600 {
background-color: var(--os-color-grey-600);
}
.bg-grey-700 {
background-color: var(--os-color-grey-700);
}
.bg-grey-800 {
background-color: var(--os-color-grey-800);
}
.bg-grey-900 {
background-color: var(--os-color-grey-900);
}
.bg-1 {
background: var(--os-background-1);
}
.bg-2 {
background: var(--os-background-2);
}
.bg-3 {
background: var(--os-background-3);
}
.bg-4 {
background: var(--os-background-4);
}
.bg-primary {
background: var(--os-color-primary-500);
}
.bg-primary-100 {
background-color: var(--os-color-primary-100);
}
.bg-primary-200 {
background-color: var(--os-color-primary-200);
}
.bg-primary-300 {
background-color: var(--os-color-primary-300);
}
.bg-primary-400 {
background-color: var(--os-color-primary-400);
}
.bg-primary-500 {
background-color: var(--os-color-primary-500);
}
.bg-primary-600 {
background-color: var(--os-color-primary-600);
}
.bg-primary-700 {
background-color: var(--os-color-primary-700);
}
.bg-primary-800 {
background-color: var(--os-color-primary-800);
}
.bg-primary-900 {
background-color: var(--os-color-primary-900);
}
.bg-primary-05pct {
background-color: var(--os-color-primary-05pct);
}
.bg-primary-10pct {
background-color: var(--os-color-primary-10pct);
}
.bg-primary-20pct {
background-color: var(--os-color-primary-20pct);
}
.bg-primary-30pct {
background-color: var(--os-color-primary-30pct);
}
.bg-primary-40pct {
background-color: var(--os-color-primary-40pct);
}
.bg-primary-50pct {
background-color: var(--os-color-primary-50pct);
}
.bg-primary-60pct {
background-color: var(--os-color-primary-60pct);
}
.bg-primary-70pct {
background-color: var(--os-color-primary-70pct);
}
.bg-primary-80pct {
background-color: var(--os-color-primary-80pct);
}
.bg-primary-90pct {
background-color: var(--os-color-primary-90pct);
}
.bg-primary-98pct {
background-color: var(--os-color-primary-98pct);
}
.bg-accent-100 {
background-color: var(--os-color-accent-100);
}
.bg-accent-200 {
background-color: var(--os-color-accent-200);
}
.bg-accent-300 {
background-color: var(--os-color-accent-300);
}
.bg-accent-400 {
background-color: var(--os-color-accent-400);
}
.bg-accent-500 {
background-color: var(--os-color-accent-500);
}
.bg-accent-600 {
background-color: var(--os-color-accent-600);
}
.bg-accent-700 {
background-color: var(--os-color-accent-700);
}
.bg-accent-800 {
background-color: var(--os-color-accent-800);
}
.bg-accent-900 {
background-color: var(--os-color-accent-900);
}
.bg-accent-05pct {
background-color: var(--os-color-accent-05pct);
}
.bg-accent-10pct {
background-color: var(--os-color-accent-10pct);
}
.bg-accent-20pct {
background-color: var(--os-color-accent-20pct);
}
.bg-accent-30pct {
background-color: var(--os-color-accent-30pct);
}
.bg-accent-40pct {
background-color: var(--os-color-accent-40pct);
}
.bg-accent-50pct {
background-color: var(--os-color-accent-50pct);
}
.bg-accent-60pct {
background-color: var(--os-color-accent-60pct);
}
.bg-accent-70pct {
background-color: var(--os-color-accent-70pct);
}
.bg-accent-80pct {
background-color: var(--os-color-accent-80pct);
}
.bg-accent-90pct {
background-color: var(--os-color-accent-90pct);
}
.bg-accent-98pct {
background-color: var(--os-color-accent-98pct);
}
.bg-warning-100 {
background-color: var(--os-color-warning-100);
}
.bg-warning-200 {
background-color: var(--os-color-warning-200);
}
.bg-warning-300 {
background-color: var(--os-color-warning-300);
}
.bg-warning-400 {
background-color: var(--os-color-warning-400);
}
.bg-warning-500 {
background-color: var(--os-color-warning-500);
}
.bg-warning-600 {
background-color: var(--os-color-warning-600);
}
.bg-warning-700 {
background-color: var(--os-color-warning-700);
}
.bg-warning-800 {
background-color: var(--os-color-warning-800);
}
.bg-warning-900 {
background-color: var(--os-color-warning-900);
}
.bg-warning-05pct {
background-color: var(--os-color-warning-05pct);
}
.bg-warning-10pct {
background-color: var(--os-color-warning-10pct);
}
.bg-warning-20pct {
background-color: var(--os-color-warning-20pct);
}
.bg-warning-30pct {
background-color: var(--os-color-warning-30pct);
}
.bg-warning-40pct {
background-color: var(--os-color-warning-40pct);
}
.bg-warning-50pct {
background-color: var(--os-color-warning-50pct);
}
.bg-warning-60pct {
background-color: var(--os-color-warning-60pct);
}
.bg-warning-70pct {
background-color: var(--os-color-warning-70pct);
}
.bg-warning-80pct {
background-color: var(--os-color-warning-80pct);
}
.bg-warning-90pct {
background-color: var(--os-color-warning-90pct);
}
.bg-warning-98pct {
background-color: var(--os-color-warning-98pct);
}
.bg-danger-100 {
background-color: var(--os-color-danger-100);
}
.bg-danger-200 {
background-color: var(--os-color-danger-200);
}
.bg-danger-300 {
background-color: var(--os-color-danger-300);
}
.bg-danger-400 {
background-color: var(--os-color-danger-400);
}
.bg-danger-500 {
background-color: var(--os-color-danger-500);
}
.bg-danger-600 {
background-color: var(--os-color-danger-600);
}
.bg-danger-700 {
background-color: var(--os-color-danger-700);
}
.bg-danger-800 {
background-color: var(--os-color-danger-800);
}
.bg-danger-900 {
background-color: var(--os-color-danger-900);
}
.bg-danger-05pct {
background-color: var(--os-color-danger-05pct);
}
.bg-danger-10pct {
background-color: var(--os-color-danger-10pct);
}
.bg-danger-20pct {
background-color: var(--os-color-danger-20pct);
}
.bg-danger-30pct {
background-color: var(--os-color-danger-30pct);
}
.bg-danger-40pct {
background-color: var(--os-color-danger-40pct);
}
.bg-danger-50pct {
background-color: var(--os-color-danger-50pct);
}
.bg-danger-60pct {
background-color: var(--os-color-danger-60pct);
}
.bg-danger-70pct {
background-color: var(--os-color-danger-70pct);
}
.bg-danger-80pct {
background-color: var(--os-color-danger-80pct);
}
.bg-danger-90pct {
background-color: var(--os-color-danger-90pct);
}
.bg-danger-98pct {
background-color: var(--os-color-danger-98pct);
}
.bg-success-100 {
background-color: var(--os-color-success-100);
}
.bg-success-200 {
background-color: var(--os-color-success-200);
}
.bg-success-300 {
background-color: var(--os-color-success-300);
}
.bg-success-400 {
background-color: var(--os-color-success-400);
}
.bg-success-500 {
background-color: var(--os-color-success-500);
}
.bg-success-600 {
background-color: var(--os-color-success-600);
}
.bg-success-700 {
background-color: var(--os-color-success-700);
}
.bg-success-800 {
background-color: var(--os-color-success-800);
}
.bg-success-900 {
background-color: var(--os-color-success-900);
}
.bg-success-05pct {
background-color: var(--os-color-success-05pct);
}
.bg-success-10pct {
background-color: var(--os-color-success-10pct);
}
.bg-success-20pct {
background-color: var(--os-color-success-20pct);
}
.bg-success-30pct {
background-color: var(--os-color-success-30pct);
}
.bg-success-40pct {
background-color: var(--os-color-success-40pct);
}
.bg-success-50pct {
background-color: var(--os-color-success-50pct);
}
.bg-success-60pct {
background-color: var(--os-color-success-60pct);
}
.bg-success-70pct {
background-color: var(--os-color-success-70pct);
}
.bg-success-80pct {
background-color: var(--os-color-success-80pct);
}
.bg-success-90pct {
background-color: var(--os-color-success-90pct);
}
.bg-success-98pct {
background-color: var(--os-color-success-98pct);
}
.bg-shade-05pct {
background-color: var(--os-color-shade-05pct);
}
.bg-shade-10pct {
background-color: var(--os-color-shade-10pct);
}
.bg-shade-20pct {
background-color: var(--os-color-shade-20pct);
}
.bg-shade-30pct {
background-color: var(--os-color-shade-30pct);
}
.bg-shade-40pct {
background-color: var(--os-color-shade-40pct);
}
.bg-shade-50pct {
background-color: var(--os-color-shade-50pct);
}
.bg-shade-60pct {
background-color: var(--os-color-shade-60pct);
}
.bg-shade-70pct {
background-color: var(--os-color-shade-70pct);
}
.bg-shade-80pct {
background-color: var(--os-color-shade-80pct);
}
.bg-shade-90pct {
background-color: var(--os-color-shade-90pct);
}
.bg-shade-98pct {
background-color: var(--os-color-shade-98pct);
}
.bg-tint-05pct {
background-color: var(--os-color-tint-05pct);
}
.bg-tint-10pct {
background-color: var(--os-color-tint-10pct);
}
.bg-tint-20pct {
background-color: var(--os-color-tint-20pct);
}
.bg-tint-30pct {
background-color: var(--os-color-tint-30pct);
}
.bg-tint-40pct {
background-color: var(--os-color-tint-40pct);
}
.bg-tint-50pct {
background-color: var(--os-color-tint-50pct);
}
.bg-tint-60pct {
background-color: var(--os-color-tint-60pct);
}
.bg-tint-70pct {
background-color: var(--os-color-tint-70pct);
}
.bg-tint-80pct {
background-color: var(--os-color-tint-80pct);
}
.bg-tint-90pct {
background-color: var(--os-color-tint-90pct);
}
.bg-tint-98pct {
background-color: var(--os-color-tint-98pct);
}
.bg-danger {
background: var(--os-color-danger-500);
}
.bg-success {
background: var(--os-color-success-500);
}
.bg-0,
.bg-transparent {
background: none;
}
.border-radius {
border-radius: var(--os-border-radius);
}
.border-radius-xs,
.border-radius-sm {
border-radius: var(--os-border-radius-xs);
}
.border-radius-md {
border-radius: var(--os-border-radius-md);
}
.border-radius-lg {
border-radius: var(--os-border-radius-lg);
}
.border-radius-xl {
border-radius: var(--os-border-radius-xl);
}
.border-radius-round {
border-radius: var(--os-border-radius-round);
}
.border-radius-100 {
border-radius: var(--os-border-radius-100);
}
.pointer {
cursor: pointer;
}
.list-style-none {
list-style-type: none;
}
.list-item-reset {
padding-left: 0;
list-style: none inside;
}
.pointer-events-none {
pointer-events: none;
}
.no-border tbody tr:last-child td {
border-bottom: none;
}
hr {
background-color: var(--os-color-grey-400);
height: 1px;
margin: var(--os-size-sm) 0;
border: 0;
}
.material-symbols-outlined.icon-sm {
font-size: 1rem !important;
}
.material-symbols-outlined.icon-md {
font-size: 1.25rem !important;
}
.material-symbols-outlined.icon-lg {
font-size: 1.5rem !important;
}
.material-symbols-outlined.icon-xl {
font-size: 2.5rem !important;
}
.material-symbols-outlined {
font-weight: 400;
font-size: 1.25em !important;
}
.material-symbols-outlined.icon-dark {
color: var(--os-color-black);
}
.material-symbols-outlined.icon-light {
color: var(--os-color-white);
}
.material-symbols-outlined.icon-inactive {
color: var(--os-color-grey-600);
}
.material-symbols-outlined.icon-primary {
color: var(--os-text-primary-color);
}
.material-symbols-outlined.icon-warning {
color: var(--os-text-warning-color);
}
.material-symbols-outlined.icon-danger {
color: var(--os-text-danger-color);
}
* {
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
margin: 0;
}
*,
:before,
:after {
box-sizing: border-box;
}
* {
border: none;
margin: 0;
}
img {
max-width: 100%;
display: block;
}
a {
text-underline-position: under;
}
html {
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
text-size-adjust: none;
}
button,
select,
summary {
cursor: pointer;
}
[type="radio"] {
cursor: pointer;
}
[type="submit"] {
cursor: pointer;
}
[type="checkbox"] {
cursor: pointer;
}
@media (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
}
:focus:not(:focus-visible) {
outline: none;
}
span.material-symbols-outlined,
i.material-symbols-outlined {
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
pointer-events: none;
}