:root {
    --font-body-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial,
    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
    --font-mono-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console',
    'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono',
    'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace;
    --main-bg-color: #EFEFF4;

    --font-color: #333;
    --font-inv-color: #f3f3f3;
    --brand-color: #1C1C29;

    --app-logo-color-first: #242729;
    --app-logo-color-second: #ed1c24;

    --menu-accent: #ed1c24;

    --body: #ececec;
    --paper: #f5f5f5;
    --ink: #383838;
    --action-color: #197bfe;
    --warning-color: #ed1c24;
    --light-green-color: #69c688;

    --app-background: var(--body);
    --app-font-color: var(--ink);
    --stage-background: var(--paper);

    /* UI lib styles*/
    --btn-background: transparent;
    --btn-border: #ccc;
    --btn-color: var(--ink);

    --btn-primary-background: var(--action-color);
    --btn-primary-border: var(--action-color);
    --btn-primary-color: var(--paper);

    --btn-warning-border: var(--warning-color);
    --btn-warning-background: var(--warning-color);
    --btn-warning-color: var(--paper);

    --btn-light-green-border: var(--light-green-color);
    --btn-light-green-background: none;
    --btn-light-green-color: var(--light-green-color);

    /* specific styles*/

    --icon-color: var(--ink);
    --icon-top: 0;

    --layout-max-width: 75rem;

    --modal-backdrop-background: rgba(51, 52, 72, 0.96);
    --modal-color: var(--font-inv-color);
    --modal-background: #3c3d52;
    --modal-border: 1px solid #696977;
    --modal-dashed-border: 1px dashed #696977;
    --modal-border-radius: 0.375rem;

    --otp-label-color: #76768a;
    --otp-label-font-size: 0.875rem;
    --otp-value-background: #1f1b202b;

    --otp-value-font-size: 0.875rem;

    --pass-border-color: var(--btn-border);
    --pass-background-color: #f2f2f2;

    --control-animation-time: 200ms;
    --control-font-size: 13px;
    --control-label-color: #333;
    --control-label-weight: 700;
    --control-value-color: #333;
    --control-hint-color: #333;
    --control-background: #fcfcfc;
    --control-border-color: #b3b3b3;
    --control-border-width: 1px;
    --control-border-radius: 6px;
    --control-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.07);
    --control-margin-bottom: 16px;

    --control-border-color--hover: #c4c4c4;
    --control-shadow--hover: 0 2px 6px 0 rgba(0, 0, 0, 0.12);

    --control-background--focus: #faffe1;
    --control-border-color--focus: #d7dcbe;

    --control-background--checked: transparent;

    --control-label-color--disabled: #979797;
    --control-value-color--disabled: #979797;

    --switcher-bg-color-selected: var(--action-color);
    --fui-selectbox-search-input_default-normal--background: var(--ink, #e7e7ec);

    /* colors ---------------------------------------------------------------------------------- */
    --gray-01: oklch(1.000 0 none);
    --gray-02: oklch(0.973 0 none);
    --gray-03: oklch(0.946 0 none);
    --gray-04: oklch(0.919 0 none);
    --gray-05: oklch(0.892 0 none);
    --gray-06: oklch(0.865 0 none);
    --gray-07: oklch(0.838 0 none);
    --gray-08: oklch(0.812 0 none);
    --gray-09: oklch(0.785 0 none);
    --gray-10: oklch(0.758 0 none);
    --gray-11: oklch(0.731 0 none);
    --gray-12: oklch(0.704 0 none);
    --gray-13: oklch(0.677 0 none);
    --gray-14: oklch(0.650 0 none);
    --gray-15: oklch(0.623 0 none);
    --gray-16: oklch(0.579 0 none);
    --gray-17: oklch(0.556 0 none);
    --gray-18: oklch(0.534 0 none);
    --gray-19: oklch(0.490 0 none);
    --gray-20: oklch(0.445 0 none);
    --gray-21: oklch(0.401 0 none);
    --gray-22: oklch(0.356 0 none);
    --gray-23: oklch(0.312 0 none);
    --gray-24: oklch(0.267 0 none);
    --gray-25: oklch(0.223 0 none);
    --gray-26: oklch(0.178 0 none);
    --gray-27: oklch(0.134 0 none);
    --gray-28: oklch(0.089 0 none);
    --gray-29: oklch(0.044 0 none);
    --gray-30: oklch(0.000 0 none);

    /* main declarations ----------------------------------------------------------------------- */
    --app--background: var(--theme--background, #f6f6fb); /* #f6f6fb or #302F36 */
    --app-background--secondary: var(--theme-secondary--background, #fff);
    --app--color: var(--theme--color, #636169); /* #636169 or A9A7AF */
    --app-accent--color: var(--theme-accent--color, #5972f2); /*  */
    --app-error-color: var(--theme-error-color, #e43742);
    --app-success--color: var(--theme-success--color, #089c3e);
    --app-warning--color: var(--theme-warning--color, #db8300);
    --app-brand--color: var(--theme-brand--color, #ed1c24); /*  */
    --app-brand--text-color: var(--theme-brand--text-color, #564f59); /* # 564F59 or #A095A4 */
    --app--font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
    --app--mono--font: ui-monospace, Menlo, Monaco, Cascadia Mono, Segoe UI Mono, Roboto Mono, Oxygen Mono,
    "Ubuntu Monospace", Source Code Pro, Fira Mono, Droid Sans Mono, Courier New, monospace;
    --app--root-size: 16px;
    --app--medium-font-size: 0.75rem;
    --app-icon--color: var(--theme-icon--color, #b5b7c9);

    --app--base-padding: 1rem;
    --app--half-padding: 0.5rem;
    --app--quoter-padding: 0.25rem;
    --app--doble-padding: 2rem;
    --app--triple-padding: 3rem;

    --app-backdrop--background: var(--theme-backdrop--background, rgba(246, 246, 251, 0.6));

    --app--z-index-max: 10000;

    /* shadows --------------------------------------------------------------------------------- */

    /* component declarations ------------------------------------------------------------------ */
    --app-header--background: transparent;
    --app-footer--background: transparent;

    --app-content-header--background: var(
        --theme-content-header--background,
        linear-gradient(180deg, rgba(246, 246, 251, 1) 0%, rgba(246, 246, 251, 0.6) 100%)
    );
    --app-content-footer--background: var(
        --theme-content-footer--background,
        linear-gradient(0deg, rgba(238, 238, 243, 1) 0%, rgba(238, 238, 243, 0.6) 100%)
    );
    --app-content-footer--radius: var(--theme-content-footer--radius);

    /*navigation*/
    --app-nav--color: var(--theme-nav--color); /* #636169 or #9B99A2 */
    --app-nav--background: var(--theme-nav--background, #efeff5); /* #efeff5 or #36363D */
    --app-nav-links--color: var(--theme-nav-links--color);
    --app-nav-link-secondary--color: var(--theme-nav-link-secondary--color);
    --app-nav-link-secondary--background: var(--theme-nav-link-secondary--background);
    --app-nav-icon--color: var(--theme-nav-icon--color, #b4b7cb);
    --app-nav-icon--font-size: 0.875rem;
    --app-nav-headers--color: var(--theme-nav-headers--color, #a3a3a3); /*  */
    --app-nav-headers--font-size: 12px; /*  */
    --app-nav-headers--height: 2rem; /*  */
    --app-nav-headers--border-color: var(--theme-nav-headers--border-color, #484848); /* #484848 */
    --app-nav-resizer--color: var(--theme-nav-resizer--color, #e2e5ff); /* #e2e5ff */
    --app-nav-box--background: transparent;
    --app-nav-box-active--background: var(
        --theme-nav-box-active--background,
        #dfe3f6
    ); /* #DFE3F6 or #43434d */
    --app-nav-box--radius: var(--theme--radius, 0.75rem); /*  */

    --app-separators: var(--theme-separators, #e4e6ef); /* #e4e6ef or #35353d */
    --app-separators-hover: var(--theme-separators-hover, #e4e6ef);

    /*new-table-fui*/
    --fds-table-cell-padding: 0.75rem 1rem;
    --fds-container-bg: var(--theme-fds-container-bg, #f4f4f4);
    --fds-container-section-bg: var(--theme-fds-container-section-bg, #f4f4f4);
    --fds-table-row-even-bg: var(--theme-fds-table-row-even-bg, #fafafa);
    --fds-table-cell-border-color: var(--theme-fds-table-cell-border-color, #eee);
    --fds-table-header-border-color: var(--theme-fds-table-cell-border-color, #eee);
    --fds-container-section-border-color: var(--theme-fds-table-cell-border-color, #eee);
    --fds-table-row-hover-bg: var(--theme-fds-table-row-hover-bg, #f5f5f5);
    --fds-table-skeleton-bar-bg: var(--theme-fds-table-skeleton-bar-bg, #e0e0e0);
    --fds-table-skeleton-bar-height: var(--theme-fds-table-skeleton-bar-height, 1rem);
    --fds-table-skeleton-bar-border-radius: var(--theme-fds-table-skeleton-bar-border-radius, 4px);
    --fds-table-skeleton-shimmer-color: var(
        --theme-fds-table-skeleton-shimmer-color,
        rgba(255, 255, 255, 0.4)
    );
    --fds-container-shadow: none;
    --fds-container-border-width: none;
    --fds-table-row-focus-outline-color: var(--app-accent--color, #eee);

    --fudo-filter-text: var(--app--color, #777);
    --fudo-filter-bg: var(--theme-fudo-filter-bg, #f4f4f4);
    --fudo-filter-border: var(--theme-fds-table-cell-border-color, #eee);
    --fudo-filter-bg-hover: var(--theme-fudo-filter-bg, #f4f4f4);
    --fudo-filter-border-hover: var(--theme-fds-table-cell-border-color, #eee);
    --fudo-filter-dropdown-bg: var(--theme-fudo-filter-bg, #f4f4f4);
    --fudo-filter-dropdown-border: var(--theme-fds-table-cell-border-color, #eee);
    --fudo-filter-separator: var(--theme-fds-table-cell-border-color, #eee);
    --fudo-filter-option-hover: var(--theme-fds-table-row-hover-bg, #f5f5f5);
    --fudo-filter-border-active: var(--app-accent--color, #eee);
    --fudo-filter-bg-active: var(--app-accent-op--color, rgba(61, 94, 255, 0.1));
    --fudo-filter-input-bg: var(--fui-input_background, #fff);
    --fudo-filter-input-border: var(--fui-input_border-color, #ccc);

    --fudo-search-text-color: var(--app--color, #777);
    --fudo-search-bg: var(--theme-fudo-filter-bg, #f4f4f4);
    --fudo-search-bg-focus: var(--theme-fudo-filter-bg, #f4f4f4);
    --fudo-search-border: var(--theme-fds-table-cell-border-color, #eee);
    --fudo-search-border-focus: var(--app-accent--color, #eee);
    --fudo-search-toggle-bg: var(--theme-fudo-filter-bg, #f4f4f4);
    --fudo-search-toggle-color: var(--app--color, #777);
    --fudo-search-toggle-border: var(--theme-fds-table-cell-border-color, #eee);
    --fudo-search-toggle-hover-bg: transparent;
    --fudo-search-toggle-hover-border: var(--app-accent--color, #eee);
    --fudo-search-toggle-active-hover-bg: transparent;
    --fudo-search-toggle-active-hover-border: var(--app-accent--color, #eee);
    --fudo-search-toggle-active-bg: transparent;
    --fudo-search-toggle-active-border: var(--app-accent--color, #eee);
    --fudo-search-toggle-active-color: var(--app--color, #777);

    --fds-visibility-text: var(--app--color, #777);
    --fds-visibility-button-bg: var(--theme-fudo-filter-bg, #f4f4f4);
    --fds-visibility-button-border: var(--theme-fds-table-cell-border-color, #eee);
    --fds-visibility-panel-bg: var(--theme-fudo-filter-bg, #f4f4f4);
    --fds-visibility-panel-border: var(--theme-fds-table-cell-border-color, #eee);
    --fds-visibility-separator: var(--theme-fds-table-cell-border-color, #eee);
    --fds-visibility-button-hover-bg: var(--theme-fds-table-row-even-bg, #f5f5f5);
    --fds-visibility-item-hover-bg: var(--theme-fds-table-row-hover-bg, #f5f5f5);

    --fds-pagination-button-bg: var(--theme-fudo-filter-bg, #f4f4f4);
    --fds-pagination-text: var(--app--color, #777);
    --fds-pagination-button-border: var(--theme-fds-table-cell-border-color, #eee);
    --fds-pagination-current-bg: var(--theme-fudo-filter-bg, #f4f4f4);
    --fds-pagination-current-text: var(--app--color, #777);
    --fds-pagination-current-border: var(--app-accent--color, #eee);

    --fds-pagination-input-bg: var(--theme-fudo-filter-bg, #f4f4f4);
}