@unifiedsoftware/styles 1.1.8 → 2.0.0-alpha.1

package/css/fci.css

@@ -1,19 +1,13 @@
 .us-theme-fci .us-accordion {
+  --us-accordion-border-radius: 10px;
   --us-accordion-border-width: 1px;
   --us-accordion-border-style: solid;
-  --us-accordion-border-color: rgba(9, 30, 66, 0.14);
-}
-.us-theme-fci .us-accordion-header {
+  --us-accordion-border-color: var(--us-border-color);
   --us-accordion-header-border-color: var(--us-accordion-border-color);
   --us-accordion-header-title-font-weight: 500;
-  --us-accordion-header-title-color: var(--us-title-color);
   --us-accordion-header-subtitle-font-weight: 400;
-  --us-accordion-header-subtitle-color: var(--us-subtitle-color);
-}
-.us-theme-fci .us-accordion-body {
-  --us-accordion-body-color: var(--us-body-color);
 }
-.us-theme-fci .us-accordion--sm .us-accordion-header {
+.us-theme-fci .us-accordion--xs .us-accordion-header {
   --us-accordion-header-min-height: 36px;
   --us-accordion-header-padding-y: 0.685rem;
   --us-accordion-header-padding-x: 1rem;
@@ -25,49 +19,196 @@
   --us-accordion-header-subtitle-font-size: 11px;
   --us-accordion-header-title-line-height: 14px;
 }
-.us-theme-fci .us-accordion--sm .us-accordion-body {
+.us-theme-fci .us-accordion--xs .us-accordion-body {
   --us-accordion-body-padding-y: 1rem;
   --us-accordion-body-padding-x: 1rem;
   --us-accordion-body-font-size: 0.75rem;
   --us-accordion-body-line-height: 18px;
-  --us-accordion-body-color: var(--us-body-color);
 }
-.us-theme-fci .us-accordion--md .us-accordion-header {
-  --us-accordion-header-min-height: 2.5rem;
+.us-theme-fci .us-accordion--sm .us-accordion-header {
+  --us-accordion-header-min-height: 48px;
   --us-accordion-header-padding-y: 0.625rem;
   --us-accordion-header-padding-x: 1rem;
   --us-accordion-header-padding-level: 1.25rem;
   --us-accordion-header-gap: 1rem;
-  --us-accordion-header-title-font-size: 0.8125rem;
+  --us-accordion-header-title-font-size: 0.875rem;
   --us-accordion-header-title-line-height: 20px;
   --us-accordion-header-subtitle-font-size: 0.75rem;
   --us-accordion-header-subtitle-line-height: 16px;
 }
-.us-theme-fci .us-accordion--md .us-accordion-body {
+.us-theme-fci .us-accordion--sm .us-accordion-body {
   --us-accordion-body-padding-y: 1.25rem;
   --us-accordion-body-padding-x: 1rem;
   --us-accordion-body-font-size: 0.875rem;
   --us-accordion-body-line-height: 20px;
-  --us-accordion-body-color: var(--us-body-color);
 }
-.us-theme-fci .us-accordion--lg .us-accordion-header {
-  --us-accordion-header-min-height: 2.75rem;
+.us-theme-fci .us-accordion--md {
+  --us-accordion-splitted-gap: 0.5rem;
+}
+.us-theme-fci .us-accordion--md .us-accordion-header {
+  --us-accordion-header-min-height: 56px;
   --us-accordion-header-padding-y: 0.625rem;
   --us-accordion-header-padding-x: 1rem;
   --us-accordion-header-padding-level: 1.25rem;
   --us-accordion-header-font-size: 0.75rem;
   --us-accordion-header-gap: 1rem;
+  --us-accordion-header-content-gap: 0.5rem;
   --us-accordion-header-title-font-size: 0.875rem;
   --us-accordion-header-title-line-height: 24px;
   --us-accordion-header-subtitle-font-size: 0.8125rem;
   --us-accordion-header-subtitle-line-height: 18px;
 }
+.us-theme-fci .us-accordion--md .us-accordion-header .us-icon:not(.us-button .us-icon) {
+  --us-icon-font-size-default: 24px;
+}
+.us-theme-fci .us-accordion--md .us-accordion-body {
+  --us-accordion-body-padding-y: 1.5rem;
+  --us-accordion-body-padding-x: 1rem;
+  --us-accordion-body-font-size: 1rem;
+  --us-accordion-body-line-height: 24px;
+}
+.us-theme-fci .us-accordion--lg .us-accordion-header {
+  --us-accordion-header-min-height: 64px;
+  --us-accordion-header-padding-y: 0.625rem;
+  --us-accordion-header-padding-x: 1rem;
+  --us-accordion-header-padding-level: 1.25rem;
+  --us-accordion-header-font-size: 0.75rem;
+  --us-accordion-header-gap: 1rem;
+  --us-accordion-header-title-font-size: 1rem;
+  --us-accordion-header-title-line-height: 24px;
+  --us-accordion-header-subtitle-font-size: 0.8125rem;
+  --us-accordion-header-subtitle-line-height: 18px;
+}
 .us-theme-fci .us-accordion--lg .us-accordion-body {
   --us-accordion-body-padding-y: 1.5rem;
   --us-accordion-body-padding-x: 1rem;
   --us-accordion-body-font-size: 1rem;
   --us-accordion-body-line-height: 24px;
-  --us-accordion-body-color: var(--us-body-color);
+}
+.us-theme-fci .us-accordion--xl .us-accordion-header {
+  --us-accordion-header-min-height: 3.5rem;
+  --us-accordion-header-padding-y: 0.625rem;
+  --us-accordion-header-padding-x: 1rem;
+  --us-accordion-header-padding-level: 1.25rem;
+  --us-accordion-header-font-size: 0.75rem;
+  --us-accordion-header-gap: 1rem;
+  --us-accordion-header-title-font-size: 1rem;
+  --us-accordion-header-title-line-height: 24px;
+  --us-accordion-header-subtitle-font-size: 0.8125rem;
+  --us-accordion-header-subtitle-line-height: 18px;
+}
+.us-theme-fci .us-accordion--xl .us-accordion-body {
+  --us-accordion-body-padding-y: 1.5rem;
+  --us-accordion-body-padding-x: 1rem;
+  --us-accordion-body-font-size: 1rem;
+  --us-accordion-body-line-height: 24px;
+}
+.us-theme-fci .us-accordion-item--selected {
+  --us-accordion-header-title-font-weight: 700;
+}
+.us-theme-fci .us-accordion--plain.us-accordion--primary .us-accordion-body {
+  --us-accordion-body-color: var(--us-primary-color);
+}
+.us-theme-fci .us-accordion--plain.us-accordion--primary .us-accordion-body > .us-surface {
+  --us-surface-color: var(--us-white-color);
+}
+.us-theme-fci .us-accordion-header--plain.us-accordion-header--primary {
+  --us-accordion-header-color: var(--us-primary-color);
+}
+.us-theme-fci .us-accordion-header--plain.us-accordion-header--primary > .us-surface {
+  --us-surface-color: var(--us-white-color);
+}
+.us-theme-fci .us-accordion--plain.us-accordion--secondary .us-accordion-body {
+  --us-accordion-body-color: inherit;
+}
+.us-theme-fci .us-accordion--plain.us-accordion--secondary .us-accordion-body > .us-surface {
+  --us-surface-color: var(--us-white-color);
+}
+.us-theme-fci .us-accordion-header--plain.us-accordion-header--secondary {
+  --us-accordion-header-color: var(--us-secondary-color);
+}
+.us-theme-fci .us-accordion-header--plain.us-accordion-header--secondary > .us-surface {
+  --us-surface-color: var(--us-white-color);
+}
+.us-theme-fci .us-accordion--flat.us-accordion--primary .us-accordion-body {
+  --us-accordion-body-color: var(--us-primary-color);
+}
+.us-theme-fci .us-accordion--flat.us-accordion--primary .us-accordion-body > .us-surface {
+  --us-surface-color: var(--us-primary-color);
+  --us-surface-opacity: 0.16;
+}
+.us-theme-fci .us-accordion-header--flat.us-accordion-header--primary {
+  --us-accordion-header-color: var(--us-primary-color);
+}
+.us-theme-fci .us-accordion-header--flat.us-accordion-header--primary > .us-surface {
+  --us-surface-color: var(--us-primary-color);
+  --us-surface-opacity: 0.16;
+}
+.us-theme-fci .us-accordion--flat.us-accordion--secondary .us-accordion-body {
+  --us-accordion-body-color: inherit;
+}
+.us-theme-fci .us-accordion--flat.us-accordion--secondary .us-accordion-body > .us-surface {
+  --us-surface-color: var(--us-secondary-color);
+  --us-surface-opacity: 0.08;
+}
+.us-theme-fci .us-accordion-header--flat.us-accordion-header--secondary {
+  --us-accordion-header-color: var(--us-secondary-color);
+}
+.us-theme-fci .us-accordion-header--flat.us-accordion-header--secondary > .us-surface {
+  --us-surface-color: var(--us-secondary-color);
+  --us-surface-opacity: 0.08;
+}
+.us-theme-fci .us-accordion--tonal.us-accordion--primary .us-accordion-body {
+  --us-accordion-body-color: inherit;
+}
+.us-theme-fci .us-accordion--tonal.us-accordion--primary .us-accordion-body > .us-surface {
+  --us-surface-color: var(--us-primary-color);
+  --us-surface-opacity: 0.16;
+}
+.us-theme-fci .us-accordion-header--tonal.us-accordion-header--primary {
+  --us-accordion-header-color: var(--us-secondary-color);
+}
+.us-theme-fci .us-accordion-header--tonal.us-accordion-header--primary > .us-surface {
+  --us-surface-color: var(--us-primary-color);
+  --us-surface-opacity: 0.16;
+}
+.us-theme-fci .us-accordion--tonal.us-accordion--secondary .us-accordion-body {
+  --us-accordion-body-color: inherit;
+}
+.us-theme-fci .us-accordion--tonal.us-accordion--secondary .us-accordion-body > .us-surface {
+  --us-surface-color: var(--us-secondary-color);
+  --us-surface-opacity: 0.08;
+}
+.us-theme-fci .us-accordion-header--tonal.us-accordion-header--secondary {
+  --us-accordion-header-color: var(--us-secondary-color);
+}
+.us-theme-fci .us-accordion-header--tonal.us-accordion-header--secondary > .us-surface {
+  --us-surface-color: var(--us-secondary-color);
+  --us-surface-opacity: 0.08;
+}
+.us-theme-fci .us-accordion--filled.us-accordion--primary .us-accordion-body {
+  --us-accordion-body-color: #fff;
+}
+.us-theme-fci .us-accordion--filled.us-accordion--primary .us-accordion-body > .us-surface {
+  --us-surface-color: var(--us-primary-color);
+}
+.us-theme-fci .us-accordion-header--filled.us-accordion-header--primary {
+  --us-accordion-header-color: var(--us-white-color);
+}
+.us-theme-fci .us-accordion-header--filled.us-accordion-header--primary > .us-surface {
+  --us-surface-color: var(--us-primary-color);
+}
+.us-theme-fci .us-accordion--filled.us-accordion--secondary .us-accordion-body {
+  --us-accordion-body-color: #fff;
+}
+.us-theme-fci .us-accordion--filled.us-accordion--secondary .us-accordion-body > .us-surface {
+  --us-surface-color: var(--us-secondary-color);
+}
+.us-theme-fci .us-accordion-header--filled.us-accordion-header--secondary {
+  --us-accordion-header-color: var(--us-white-color);
+}
+.us-theme-fci .us-accordion-header--filled.us-accordion-header--secondary > .us-surface {
+  --us-surface-color: var(--us-secondary-color);
 }
 
 .us-theme-fci .us-toolbar {
@@ -90,11 +231,16 @@
   --us-toolbar-min-height: 56px;
   --us-toolbar-padding-y: 0.5rem;
   --us-toolbar-padding-x: 1rem;
+  --us-toolbar-gap: 1rem;
+  --us-toolbar-content-gap: 0.5rem;
   --us-toolbar-title-font-size: 1rem;
   --us-toolbar-title-line-height: 20px;
   --us-toolbar-subtitle-font-size: 0.75rem;
   --us-toolbar-subtitle-line-height: 16px;
 }
+.us-theme-fci .us-toolbar--md .us-icon:not(.us-button .us-icon) {
+  --us-icon-font-size-default: 24px;
+}
 .us-theme-fci .us-toolbar--lg {
   --us-toolbar-min-height: 64px;
   --us-toolbar-padding-y: 0.75rem;
@@ -283,18 +429,6 @@
 .us-theme-fci .us-chip--text.us-chip--secondary {
   --us-chip-color: var(--us-secondary-color);
 }
-.us-theme-fci .us-chip--filled.us-chip--secondary {
-  --us-chip-color: var(--us-black-color);
-}
-.us-theme-fci .us-chip--outlined.us-chip--secondary {
-  --us-chip-color: var(--us-black-color);
-}
-.us-theme-fci .us-chip--flat.us-chip--secondary {
-  --us-chip-color: var(--us-black-color);
-}
-.us-theme-fci .us-chip--text.us-chip--secondary {
-  --us-chip-color: var(--us-black-color);
-}
 .us-theme-fci .us-chip--filled.us-chip--success {
   --us-chip-background: var(--us-success-color);
 }
@@ -344,8 +478,14 @@
   --us-chip-color: var(--us-danger-color);
 }
 
+html {
+  -webkit-text-size-adjust: 100%;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+}
+
 .us-theme-fci .us-button {
-  --us-button-font-weight: 400;
+  --us-button-font-weight: 500;
   --us-button-font-family: var(--us-font-sans);
   --us-button-divider-width: 1px;
   --us-button-divider-color: #fff;
@@ -373,11 +513,11 @@
   --us-icon-font-size: 1rem;
 }
 .us-theme-fci .us-button--md {
-  --us-button-height: 32px;
+  --us-button-height: 36px;
   --us-button-padding-y: 0;
-  --us-button-padding-x: 0.875rem;
+  --us-button-padding-x: 1rem;
   --us-button-font-size: 0.875rem;
-  --us-button-border-radius: 6px;
+  --us-button-border-radius: 8px;
   --us-button-gap: 0.375rem;
 }
 .us-theme-fci .us-button--md .us-icon {
@@ -413,10 +553,10 @@
 .us-theme-fci .us-button--filled > .us-overlay {
   --us-overlay-color: inherit;
   --us-overlay-opacity: 0;
-  --us-_hover-overlay-opacity: 0.12;
-  --us-_active-overlay-opacity: 0.24;
-  --us-_focus-hover-overlay-opacity: 0.12;
-  --us-_focus-active-overlay-opacity: 0.24;
+  --us-_hover-overlay-opacity: 0.24;
+  --us-_active-overlay-opacity: 0.32;
+  --us-_focus-hover-overlay-opacity: 0.24;
+  --us-_focus-active-overlay-opacity: 0.32;
 }
 .us-theme-fci .us-button--filled > .us-outline {
   --us-outline-border-width: 1px;
@@ -434,16 +574,16 @@
   --us-_focus-active-overlay-opacity: 0.24;
 }
 .us-theme-fci .us-button--outlined > .us-outline {
-  --us-outline-border-width: 1px;
+  --us-outline-border-width: 2px;
   --us-outline-border-color: currentColor;
 }
 .us-theme-fci .us-button--flat > .us-overlay {
   --us-overlay-color: inherit;
-  --us-overlay-opacity: 0.08;
-  --us-_hover-overlay-opacity: 0.12;
-  --us-_active-overlay-opacity: 0.24;
-  --us-_focus-hover-overlay-opacity: 0.12;
-  --us-_focus-active-overlay-opacity: 0.24;
+  --us-overlay-opacity: 0.12;
+  --us-_hover-overlay-opacity: 0.24;
+  --us-_active-overlay-opacity: 0.32;
+  --us-_focus-hover-overlay-opacity: 0.24;
+  --us-_focus-active-overlay-opacity: 0.32;
 }
 .us-theme-fci .us-button--flat > .us-outline {
   --us-outline-border-width: 1px;
@@ -497,18 +637,6 @@
 .us-theme-fci .us-button--text.us-button--secondary {
   --us-button-color: var(--us-secondary-color);
 }
-.us-theme-fci .us-button--filled.us-button--secondary {
-  --us-button-color: var(--us-secondary-action-color);
-}
-.us-theme-fci .us-button--outlined.us-button--secondary {
-  --us-button-color: var(--us-secondary-action-color);
-}
-.us-theme-fci .us-button--flat.us-button--secondary {
-  --us-button-color: var(--us-secondary-action-color);
-}
-.us-theme-fci .us-button--text.us-button--secondary {
-  --us-button-color: var(--us-secondary-action-color);
-}
 .us-theme-fci .us-button--filled.us-button--success {
   --us-button-background: var(--us-success-color);
 }
@@ -1127,33 +1255,42 @@
   --us-_active-overlay-opacity: 0;
 }
 
-.us-theme-fci .us-tab {
-  --us-tab-color: var(--us-secondary-action-color);
-  --us-tab-padding-y: 0px;
-  --us-tab-padding-x: 16px;
-  --us-tab-font-size: 0.8125rem;
-  --us-tab-font-weight: 500;
-  --us-tab-border-radius: 6px 6px 0px 0px;
-  --us-tab-closable-color: var(--us-secondary-action-color);
+.us-theme-fci .us-tabs--underlined {
+  --us-tab-indicator-color: var(--us-primary-action-color);
+  --us-tab-indicator-height: 3px;
+  --us-tab-indicator-border-radius: 3px 3px 0px 0px;
+}
+.us-theme-fci .us-tabs--underlined .us-tab {
   --us-tab-indicator-color: var(--us-primary-action-color);
   --us-tab-indicator-height: 3px;
   --us-tab-indicator-border-radius: 3px 3px 0px 0px;
+  --us-tab-border-radius: 0px;
 }
-.us-theme-fci .us-tab > .us-overlay {
+.us-theme-fci .us-tabs--underlined .us-tab > .us-overlay {
   --us-overlay-opacity: 0;
   --us-overlay-color: inherit;
   --us-_hover-overlay-opacity: 0.08;
   --us-_active-overlay-opacity: 0.12;
 }
-.us-theme-fci .us-tab--selected {
+.us-theme-fci .us-tabs--underlined .us-tab--selected {
   --us-tab-color: var(--us-primary-action-color);
 }
+.us-theme-fci .us-tab {
+  --us-tab-color: var(--us-secondary-action-color);
+  --us-tab-padding-y: 0px;
+  --us-tab-padding-x: 16px;
+  --us-tab-font-size: 0.8125rem;
+  --us-tab-font-weight: 500;
+  --us-tab-closable-color: var(--us-secondary-action-color);
+}
 
 .us-theme-fci .us-card {
-  --us-card-border-width: 1px;
+  --us-card-border-width: 0px;
   --us-card-border-style: solid;
-  --us-card-border-color: rgba(9, 30, 66, 0.14);
-  --us-card-border-radius: 6px;
+  --us-card-border-color: var(--us-border-color);
+  --us-card-border-radius: 10px;
+  --us-card-box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px, rgba(51, 65, 85, 0.1) 0px 0px 0px 1px,
+  	rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
 }
 .us-theme-fci .us-card > .us-overlay {
   --us-overlay-color: inherit;
@@ -1187,7 +1324,7 @@
   --us-card-footer-padding-x: 1rem;
   --us-card-footer-border-color: rgba(9, 30, 66, 0.14);
 }
-.us-theme-fci .us-card--sm .us-card-header {
+.us-theme-fci .us-card--xs .us-card-header {
   --us-card-header-min-height: 36px;
   --us-card-header-padding-y: 0.685rem;
   --us-card-header-padding-x: 1rem;
@@ -1199,33 +1336,55 @@
   --us-card-header-subtitle-font-size: 11px;
   --us-card-header-subtitle-line-height: 14px;
 }
-.us-theme-fci .us-card--sm .us-card-body {
+.us-theme-fci .us-card--xs .us-card-body {
   --us-card-body-padding-y: 1rem;
   --us-card-body-padding-x: 1rem;
   --us-card-body-font-size: 0.75rem;
   --us-card-body-line-height: 18px;
   --us-card-body-color: var(--us-body-color);
 }
-.us-theme-fci .us-card--md .us-card-header {
-  --us-card-header-min-height: 2.5rem;
+.us-theme-fci .us-card--sm .us-card-header {
+  --us-card-header-min-height: 48px;
   --us-card-header-padding-y: 0.625rem;
   --us-card-header-padding-x: 1rem;
   --us-card-header-padding-level: 1.25rem;
   --us-card-header-gap: 1rem;
-  --us-card-header-title-font-size: 0.8125rem;
+  --us-card-header-title-font-size: 0.875rem;
   --us-card-header-title-line-height: 20px;
   --us-card-header-subtitle-font-size: 0.75rem;
   --us-card-header-subtitle-line-height: 16px;
 }
-.us-theme-fci .us-card--md .us-card-body {
+.us-theme-fci .us-card--sm .us-card-body {
   --us-card-body-padding-y: 1.25rem;
   --us-card-body-padding-x: 1rem;
   --us-card-body-font-size: 0.875rem;
   --us-card-body-line-height: 20px;
   --us-card-body-color: var(--us-body-color);
 }
+.us-theme-fci .us-card--md .us-card-header {
+  --us-card-header-min-height: 56px;
+  --us-card-header-padding-y: 0.625rem;
+  --us-card-header-padding-x: 1rem;
+  --us-card-header-padding-level: 1.25rem;
+  --us-card-header-font-size: 0.75rem;
+  --us-card-header-gap: 1rem;
+  --us-card-header-title-font-size: 1rem;
+  --us-card-header-title-line-height: 24px;
+  --us-card-header-subtitle-font-size: 0.8125rem;
+  --us-card-header-subtitle-line-height: 18px;
+}
+.us-theme-fci .us-card--md .us-card-header .us-icon:not(.us-button .us-icon) {
+  --us-icon-font-size-default: 24px;
+}
+.us-theme-fci .us-card--md .us-card-body {
+  --us-card-body-padding-y: 1.5rem;
+  --us-card-body-padding-x: 1rem;
+  --us-card-body-font-size: 1rem;
+  --us-card-body-line-height: 24px;
+  --us-card-body-color: var(--us-body-color);
+}
 .us-theme-fci .us-card--lg .us-card-header {
-  --us-card-header-min-height: 2.75rem;
+  --us-card-header-min-height: 64px;
   --us-card-header-padding-y: 0.625rem;
   --us-card-header-padding-x: 1rem;
   --us-card-header-padding-level: 1.25rem;
@@ -1233,7 +1392,7 @@
   --us-card-header-gap: 1rem;
   --us-card-header-title-font-size: 0.875rem;
   --us-card-header-title-line-height: 24px;
-  --us-card-header-subtitle-font-size: 0.8125rem;
+  --us-card-header-subtitle-font-size: 1rem;
   --us-card-header-subtitle-line-height: 18px;
 }
 .us-theme-fci .us-card--lg .us-card-body {
@@ -1243,6 +1402,25 @@
   --us-card-body-line-height: 24px;
   --us-card-body-color: var(--us-body-color);
 }
+.us-theme-fci .us-card--xl .us-card-header {
+  --us-card-header-min-height: 72px;
+  --us-card-header-padding-y: 0.625rem;
+  --us-card-header-padding-x: 1rem;
+  --us-card-header-padding-level: 1.25rem;
+  --us-card-header-font-size: 0.75rem;
+  --us-card-header-gap: 1rem;
+  --us-card-header-title-font-size: 1rem;
+  --us-card-header-title-line-height: 24px;
+  --us-card-header-subtitle-font-size: 0.8125rem;
+  --us-card-header-subtitle-line-height: 18px;
+}
+.us-theme-fci .us-card--xl .us-card-body {
+  --us-card-body-padding-y: 1.5rem;
+  --us-card-body-padding-x: 1rem;
+  --us-card-body-font-size: 1rem;
+  --us-card-body-line-height: 24px;
+  --us-card-body-color: var(--us-body-color);
+}
 
 .us-theme-fci .us-result--sm {
   --us-result-padding-y: 1rem;
@@ -1296,21 +1474,106 @@
   --us-icon-color: var(--us-danger-color);
 }
 
+.us-theme-fci .us-nav-rail {
+  --us-nav-rail-border-color: var(--us-border-color);
+  --us-nav-rail-start-content-padding-y: 0.5rem;
+  --us-nav-rail-start-content-gap: 0.5rem;
+  --us-nav-rail-content-padding-y: 0.5rem;
+  --us-nav-rail-content-gap: 0.5rem;
+  --us-nav-rail-end-content-padding-y: 0.5rem;
+  --us-nav-rail-end-content-gap: 0.5rem;
+}
+.us-theme-fci .us-nav-rail > .us-surface {
+  --us-surface-color: #fff;
+  --us-surface-opacity: 1;
+}
+.us-theme-fci .us-nav-rail-item {
+  --us-nav-rail-item-border-radius: 6px;
+  --us-nav-rail-item-gap: 0.75rem;
+  --us-nav-rail-item-padding-y: 1rem;
+  --us-nav-rail-item-label-font-size: 11px;
+  --us-nav-rail-item-label-font-weight: 700;
+  --us-nav-rail-item-label-line-height: 16px;
+  --us-nav-rail-item-indicator-size: 4px;
+  --us-nav-rail-item-indicator-border-radius: 4px;
+  --us-nav-rail-item-indicator-color: currentColor;
+  --us-nav-rail-item-media-width: 48px;
+  --us-nav-rail-item-media-height: 48px;
+  --us-nav-rail-item-media-border-radius: 1rem;
+  --us-nav-rail-item-icon-font-size: 1.5rem;
+  --us-nav-rail-item-color: var(--us-secondary-action-color);
+  --us-_active-nav-rail-item-color: var(--us-primary-color);
+  --us-_active-nav-rail-item-indicator-color: var(--us-primary-color);
+}
+.us-theme-fci .us-nav-rail-item > .us-surface {
+  --us-surface-opacity: 0;
+}
+.us-theme-fci .us-nav-rail-item > .us-overlay {
+  --us-overlay-opacity: 0;
+}
+.us-theme-fci .us-nav-rail-item__icon > .us-overlay, .us-theme-fci .us-nav-rail-item__media > .us-overlay {
+  --us-overlay-opacity: 0;
+}
+
+.light-scroll::-webkit-scrollbar,
+.us-viewer .k-overflow-auto::-webkit-scrollbar {
+  width: 6px !important;
+  height: 6px !important;
+}
+
+.light-scroll ::-webkit-scrollbar-thumb,
+.us-viewer .k-overflow-auto::-webkit-scrollbar-thumb {
+  border-radius: 20px;
+  background-color: rgba(0, 0, 0, 0.2);
+}
+
+.light-scroll::-webkit-scrollbar-track,
+.us-viewer .k-overflow-auto::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.us-viewer .k-toolbar {
+  background-color: #fff;
+  border-color: rgba(0, 0, 0, 0.12);
+}
+
+.us-viewer {
+  height: 100%;
+}
+
+.us-viewer .k-pdf-viewer {
+  border: none;
+}
+
+.us-viewer .k-button-md {
+  border-radius: 8px;
+}
+
+.us-viewer .k-input-md {
+  border-radius: 8px;
+}
+
+.us-viewer .k-button-solid-base.k-selected {
+  border-color: var(--us-primary-color);
+  background-color: var(--us-primary-color);
+}
+
 .us-theme-fci {
   --us-primary-rgb: 153 0 0;
-  --us-primary-color: #990000;
-  --us-secondary-color: #dde4eb;
-  --us-success-color: #e1ae30;
-  --us-info-color: #8862e0;
-  --us-warning-color: #ffaf00;
-  --us-danger-color: #ff0017;
+  --us-primary-color: hsl(0, 100%, 30%);
+  --us-secondary-color: hsl(217, 33%, 17%);
+  --us-success-color: hsl(150, 100%, 30%);
+  --us-info-color: rgb(120, 40, 200);
+  --us-warning-color: rgb(245, 165, 36);
+  --us-danger-color: rgb(243, 18, 18);
   --us-black-color: #000;
   --us-white-color: #fff;
+  --us-border-color: rgba(0, 0, 0, 0.12);
   --us-title-color: #171717;
   --us-subtitle-color: #737373;
   --us-body-color: #404040;
   --us-primary-action-color: var(--us-primary-color);
-  --us-secondary-action-color: #334155;
+  --us-secondary-action-color: #475569;
   --us-font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
   	Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
   --us-font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,