/* Colors / Brand */
:root {
/* iAML */
/* color */
--br-transparent: transparent;
--br-logo-color-dark: var(--br-primary-700, #432ae7);
--br-logo-color-light: var(--ui-other-white, #ffffff);
--br-logo-mono-dark: var(--ui-other-black, #000000);
--br-logo-mono-light: var(--ui-other-white, #ffffff);
--br-neutral-0: #fafafa;
--br-neutral-100: #f5f5f5;
--br-neutral-1000: #212121;
--br-neutral-1100: #1a1a1a;
--br-neutral-200: #e3e3e3;
--br-neutral-300: #d1d1d1;
--br-neutral-400: #c4c4c4;
--br-neutral-500: #adadad;
--br-neutral-600: #8f8f8f;
--br-neutral-700: #707070;
--br-neutral-800: #525252;
--br-neutral-900: #383838;
--br-neutral-100-opacity-0: #f5f5f500;
--br-neutral-100-opacity-40: #f5f5f566;
--br-neutral-100-opacity-55: #f5f5f58c;
--br-neutral-100-opacity-71: #f5f5f5b5;
--br-neutral-1000-opacity-0: #21212100;
--br-neutral-1000-opacity-10: #2121211a;
--br-neutral-1000-opacity-15: #21212126;
--br-neutral-1000-opacity-20: #21212133;
--br-neutral-1000-opacity-35: #21212159;
--br-neutral-1000-opacity-45: #21212173;
--br-neutral-1000-opacity-5: #2121210d;
--br-neutral-1000-opacity-50: #21212180;
--br-neutral-1000-opacity-55: #2121218c;
--br-neutral-1000-opacity-63: #212121a1;
--br-neutral-1000-opacity-77: #212121c4;
--br-neutral-1100-opacity-0: #1a1a1a00;
--br-neutral-1100-opacity-40: #1a1a1a66;
--br-neutral-1100-opacity-60: #1a1a1a99;
--br-neutral-200-opacity-92: #e3e3e3eb;
--br-primary-0: #f2f5ff;
--br-primary-100: #e1e7fa;
--br-primary-1000: #142571;
--br-primary-1100: #071659;
--br-primary-200: #d0d8f7;
--br-primary-300: #a3b8ff;
--br-primary-400: #7a98ff;
--br-primary-500: #4f74f3;
--br-primary-600: #234fe6;
--br-primary-700: #2349cd;
--br-primary-800: #1e3dae;
--br-primary-900: #1a3294;
--br-primary-1000-opacity-10: #1425711a;
--br-primary-1000-opacity-20: #14257133;
--br-primary-1000-opacity-45: #14257173;
--br-primary-200-opacity-10: #d0d8f71a;
--br-primary-200-opacity-20: #d0d8f733;
--br-primary-300-opacity-10: #a3b8ff1a;
--br-primary-300-opacity-20: #a3b8ff33;
--br-primary-600-opacity-10: #234fe61a;
--br-primary-600-opacity-20: #234fe633;
--br-primary-700-opacity-5: #2349cd0d;
--br-primary-900-opacity-10: #1a32941a;
--br-primary-900-opacity-20: #1a329433;
--br-primary-900-opacity-30: #1a32944d;
--br-primary-900-opacity-40: #1a329466;
--br-primary-900-opacity-50: #1a329480;
--br-primary-900-opacity-60: #1a329499;
--br-primary-900-opacity-70: #1a3294b2;
--br-primary-900-opacity-80: #1a3294cc;
--br-primary-900-opacity-90: #1a3294e5;
--br-secondary-0: #f0ffff;
--br-secondary-100: #d7f1f7;
--br-secondary-1000: #0b424c;
--br-secondary-1100: #042f35;
--br-secondary-200: #bee9f1;
--br-secondary-300: #a3dfeb;
--br-secondary-400: #78ccdb;
--br-secondary-500: #4bbacf;
--br-secondary-600: #20aac3;
--br-secondary-700: #1d96ac;
--br-secondary-800: #177b8e;
--br-secondary-900: #145e6c;
--br-secondary-400-opacity-10: #78ccdb1a;
--br-secondary-400-opacity-20: #78ccdb33;
--br-secondary-700-opacity-10: #1d96ac1a;
--br-secondary-900-opacity-10: #145e6c1a;
--br-secondary-900-opacity-20: #145e6c33;
--br-tertiary-0: #f4f0fc;
--br-tertiary-100: #e7dff2;
--br-tertiary-1000: #281246;
--br-tertiary-1100: #190a2c;
--br-tertiary-200: #d8cde5;
--br-tertiary-300: #c1b2d5;
--br-tertiary-400: #a892c5;
--br-tertiary-500: #8c72af;
--br-tertiary-600: #73549d;
--br-tertiary-700: #5a3a85;
--br-tertiary-800: #45276c;
--br-tertiary-900: #382057;
--br-tertiary-300-opacity-10: #c1b2d51a;
--br-tertiary-300-opacity-20: #c1b2d533;
--br-tertiary-300-opacity-30: #c1b2d54d;
--br-tertiary-300-opacity-40: #c1b2d566;
--br-tertiary-300-opacity-50: #c1b2d580;
--br-tertiary-300-opacity-60: #c1b2d599;
--br-tertiary-300-opacity-70: #c1b2d5b2;
--br-tertiary-300-opacity-80: #c1b2d5cc;
--br-tertiary-300-opacity-90: #c1b2d5e5;
--br-tertiary-700-opacity-10: #5a3a851a;
--br-tertiary-700-opacity-20: #5a3a8533;
}
/* Colors / Tokens */
:root {
/* Light */
/* color */
--tk-border-solid-0: var(--br-neutral-100, #f5f5f2);
--tk-border-solid-1: var(--br-neutral-200, #e3e2dd);
--tk-border-solid-2: var(--br-neutral-300, #d2d2d2);
--tk-border-solid-3: var(--br-neutral-500, #b3b1b2);
--tk-border-translucent-1: var(--br-neutral-1000-opacity-15, #26222326);
--tk-border-translucent-2: var(--br-neutral-1000-opacity-20, #26222333);
--tk-border-translucent-3: var(--br-neutral-1000-opacity-45, #26222373);
--tk-border-translucent-contrast-1: var(--ui-other-white-opacity-15, #ffffff26);
--tk-border-translucent-contrast-2: var(--ui-other-white-opacity-20, #ffffff33);
--tk-border-translucent-contrast-3: var(--ui-other-white-opacity-35, #ffffff59);
--tk-control-danger-clear-content: var(--ui-danger-700, #c10007);
--tk-control-danger-clear-fill: var(--tk-surface-elevated, #ffffff);
--tk-control-danger-clear-outline: var(--ui-danger-300, #ffa2a2);
--tk-control-danger-filled-content: var(--ui-other-white, #ffffff);
--tk-control-danger-filled-fill: var(--ui-danger-600, #e7000b);
--tk-control-danger-ghost-content: var(--ui-danger-700, #c10007);
--tk-control-danger-outlined-content: var(--ui-danger-700, #c10007);
--tk-control-danger-outlined-outline: var(--ui-danger-600, #e7000b);
--tk-control-danger-state-active-alt-content: var(--ui-other-black, #000000);
--tk-control-danger-state-active-alt-fill: var(--ui-danger-200, #ffc9c9);
--tk-control-danger-state-active-alt-outline: var(--ui-danger-400, #ff6467);
--tk-control-danger-state-active-main-content: var(--ui-other-white, #ffffff);
--tk-control-danger-state-active-main-fill: var(--ui-danger-500, #fb2c36);
--tk-control-danger-state-active-translucent-fill: var(--ui-danger-700-opacity-20, #c1000733);
--tk-control-danger-state-hover-alt-content: var(--ui-other-black, #000000);
--tk-control-danger-state-hover-alt-fill: var(--ui-danger-300, #ffa2a2);
--tk-control-danger-state-hover-main-content: var(--ui-other-white, #ffffff);
--tk-control-danger-state-hover-main-fill: var(--ui-danger-700, #c10007);
--tk-control-danger-state-hover-translucent-fill: var(--ui-danger-700-opacity-10, #c100071a);
--tk-control-danger-subtle-content: var(--ui-danger-700, #c10007);
--tk-control-danger-subtle-fill: var(--ui-danger-100, #ffe2e2);
--tk-control-danger-subtle-outline: var(--ui-danger-300, #ffa2a2);
--tk-control-disabled-clear-content: var(--br-neutral-600, #949091);
--tk-control-disabled-clear-outline: var(--br-neutral-500, #b3b1b2);
--tk-control-disabled-filled-content: var(--br-neutral-700, #757172);
--tk-control-disabled-filled-fill: var(--br-neutral-300, #d2d2d2);
--tk-control-disabled-ghost-content: var(--br-neutral-600, #949091);
--tk-control-disabled-outlined-content: var(--br-neutral-600, #949091);
--tk-control-disabled-outlined-outline: var(--br-neutral-500, #b3b1b2);
--tk-control-disabled-subtle-content: var(--br-neutral-600, #949091);
--tk-control-disabled-subtle-outline: var(--br-neutral-500, #b3b1b2);
--tk-control-focus-outline: var(--tk-ink-main-primary, #262223);
--tk-control-inactive-content: var(--br-neutral-800, #545051);
--tk-control-inactive-fill: var(--tk-surface-elevated, #ffffff);
--tk-control-inactive-outline: var(--tk-border-translucent-1, #26222326);
--tk-control-info-clear-content: var(--ui-info-700, #432ae7);
--tk-control-info-clear-fill: var(--tk-surface-elevated, #ffffff);
--tk-control-info-clear-outline: var(--ui-info-300, #b2b0fd);
--tk-control-info-filled-content: var(--ui-other-white, #ffffff);
--tk-control-info-filled-fill: var(--ui-info-600, #6147fb);
--tk-control-info-ghost-content: var(--ui-info-700, #432ae7);
--tk-control-info-outlined-content: var(--ui-info-700, #432ae7);
--tk-control-info-outlined-outline: var(--ui-info-600, #6147fb);
--tk-control-info-state-active-alt-content: var(--ui-other-black, #000000);
--tk-control-info-state-active-alt-fill: var(--ui-info-100, #e8e8fe);
--tk-control-info-state-active-alt-outline: var(--ui-info-400, #8b84fc);
--tk-control-info-state-active-main-content: var(--ui-other-white, #ffffff);
--tk-control-info-state-active-main-fill: var(--ui-info-500, #6555fb);
--tk-control-info-state-active-translucent-fill: var(--ui-info-1000-opacity-20, #190f6c33);
--tk-control-info-state-hover-alt-content: var(--ui-other-black, #000000);
--tk-control-info-state-hover-alt-fill: var(--ui-info-200, #d2d3fe);
--tk-control-info-state-hover-main-content: var(--ui-other-white, #ffffff);
--tk-control-info-state-hover-main-fill: var(--ui-info-700, #432ae7);
--tk-control-info-state-hover-translucent-fill: var(--ui-info-1000-opacity-10, #190f6c1a);
--tk-control-info-subtle-content: var(--ui-info-700, #432ae7);
--tk-control-info-subtle-fill: var(--ui-info-0, #f2f2ff);
--tk-control-info-subtle-outline: var(--ui-info-300, #b2b0fd);
--tk-control-neutral-clear-content: var(--br-neutral-900, #3d393a);
--tk-control-neutral-clear-fill: var(--tk-surface-elevated, #ffffff);
--tk-control-neutral-clear-outline: var(--tk-border-translucent-1, #26222326);
--tk-control-neutral-filled-content: var(--br-neutral-100, #f5f5f2);
--tk-control-neutral-filled-fill: var(--br-neutral-1000, #262223);
--tk-control-neutral-ghost-content: var(--br-neutral-1000, #262223);
--tk-control-neutral-outlined-content: var(--br-neutral-1000, #262223);
--tk-control-neutral-outlined-outline: var(--br-neutral-1000, #262223);
--tk-control-neutral-sneaky-content: var(--br-neutral-700, #757172);
--tk-control-neutral-state-active-alt-content: var(--ui-other-black, #000000);
--tk-control-neutral-state-active-alt-fill: var(--br-primary-100, #e8e8fe);
--tk-control-neutral-state-active-alt-outline: var(--br-primary-400, #8b84fc);
--tk-control-neutral-state-active-main-content: var(--ui-other-white, #ffffff);
--tk-control-neutral-state-active-main-fill: var(--br-primary-500, #6555fb);
--tk-control-neutral-state-active-translucent-fill: var(--br-primary-600-opacity-20, #6147fb33);
--tk-control-neutral-state-hover-alt-content: var(--ui-other-black, #000000);
--tk-control-neutral-state-hover-alt-fill: var(--br-primary-200, #d2d3fe);
--tk-control-neutral-state-hover-main-content: var(--ui-other-white, #ffffff);
--tk-control-neutral-state-hover-main-fill: var(--br-primary-800, #3822c2);
--tk-control-neutral-state-hover-translucent-fill: var(--br-primary-600-opacity-10, #6147fb1a);
--tk-control-neutral-subtle-content: var(--br-neutral-900, #3d393a);
--tk-control-neutral-subtle-fill: var(--tk-surface-elevated, #ffffff);
--tk-control-neutral-subtle-outline: var(--tk-border-translucent-1, #26222326);
--tk-control-primary-clear-content: var(--br-primary-700, #432ae7);
--tk-control-primary-clear-fill: var(--tk-surface-elevated, #ffffff);
--tk-control-primary-clear-outline: var(--br-primary-300, #b2b0fd);
--tk-control-primary-filled-content: var(--ui-other-white, #ffffff);
--tk-control-primary-filled-fill: var(--br-primary-600, #6147fb);
--tk-control-primary-ghost-content: var(--br-primary-700, #432ae7);
--tk-control-primary-outlined-content: var(--br-primary-700, #432ae7);
--tk-control-primary-outlined-outline: var(--br-primary-600, #6147fb);
--tk-control-primary-state-active-alt-content: var(--ui-other-black, #000000);
--tk-control-primary-state-active-alt-fill: var(--br-primary-100, #e8e8fe);
--tk-control-primary-state-active-alt-outline: var(--br-primary-400, #8b84fc);
--tk-control-primary-state-active-main-content: var(--ui-other-white, #ffffff);
--tk-control-primary-state-active-main-fill: var(--br-primary-500, #6555fb);
--tk-control-primary-state-active-translucent-fill: var(--br-primary-600-opacity-20, #6147fb33);
--tk-control-primary-state-hover-alt-content: var(--ui-other-black, #000000);
--tk-control-primary-state-hover-alt-fill: var(--br-primary-200, #d2d3fe);
--tk-control-primary-state-hover-main-content: var(--ui-other-white, #ffffff);
--tk-control-primary-state-hover-main-fill: var(--br-primary-800, #3822c2);
--tk-control-primary-state-hover-translucent-fill: var(--br-primary-600-opacity-10, #6147fb1a);
--tk-control-primary-subtle-content: var(--br-primary-700, #432ae7);
--tk-control-primary-subtle-fill: var(--br-primary-0, #f2f2ff);
--tk-control-primary-subtle-outline: var(--br-primary-300, #b2b0fd);
--tk-control-secondary-clear-content: var(--br-secondary-900, #11554c);
--tk-control-secondary-clear-fill: var(--tk-surface-elevated, #ffffff);
--tk-control-secondary-clear-outline: var(--br-secondary-400, #30e6c1);
--tk-control-secondary-filled-content: var(--ui-other-black, #000000);
--tk-control-secondary-filled-fill: var(--br-secondary-400, #30e6c1);
--tk-control-secondary-ghost-content: var(--br-secondary-900, #11554c);
--tk-control-secondary-outlined-content: var(--br-secondary-900, #11554c);
--tk-control-secondary-outlined-outline: var(--br-secondary-800, #11675b);
--tk-control-secondary-state-active-alt-content: var(--ui-other-black, #000000);
--tk-control-secondary-state-active-alt-fill: var(--br-secondary-200, #93fee4);
--tk-control-secondary-state-active-alt-outline: var(--br-secondary-600, #18a48b);
--tk-control-secondary-state-active-main-content: var(--ui-other-black, #000000);
--tk-control-secondary-state-active-main-fill: var(--br-secondary-300, #58f9d5);
--tk-control-secondary-state-active-translucent-fill: var(--br-secondary-900-opacity-20, #11554c33);
--tk-control-secondary-state-hover-alt-content: var(--ui-other-black, #000000);
--tk-control-secondary-state-hover-alt-fill: var(--br-secondary-300, #58f9d5);
--tk-control-secondary-state-hover-main-content: var(--ui-other-black, #000000);
--tk-control-secondary-state-hover-main-fill: var(--br-secondary-500, #1ebd9e);
--tk-control-secondary-state-hover-translucent-fill: var(--br-secondary-900-opacity-10, #11554c1a);
--tk-control-secondary-subtle-content: var(--br-secondary-900, #11554c);
--tk-control-secondary-subtle-fill: var(--br-secondary-0, #effffa);
--tk-control-secondary-subtle-outline: var(--br-secondary-400, #30e6c1);
--tk-control-success-clear-content: var(--ui-success-800, #016538);
--tk-control-success-clear-fill: var(--tk-surface-elevated, #ffffff);
--tk-control-success-clear-outline: var(--ui-success-400, #00dc82);
--tk-control-success-filled-content: var(--ui-other-black, #000000);
--tk-control-success-filled-fill: var(--ui-success-400, #00dc82);
--tk-control-success-ghost-content: var(--ui-success-700, #007f45);
--tk-control-success-outlined-content: var(--ui-success-700, #007f45);
--tk-control-success-outlined-outline: var(--ui-success-700, #007f45);
--tk-control-success-state-active-alt-content: var(--ui-other-black, #000000);
--tk-control-success-state-active-alt-fill: var(--ui-success-200, #b3f5d1);
--tk-control-success-state-active-alt-outline: var(--ui-success-500, #00c16a);
--tk-control-success-state-active-main-content: var(--ui-other-black, #000000);
--tk-control-success-state-active-main-fill: var(--ui-success-300, #75edae);
--tk-control-success-state-active-translucent-fill: var(--ui-success-700-opacity-20, #007f4533);
--tk-control-success-state-hover-alt-content: var(--ui-other-black, #000000);
--tk-control-success-state-hover-alt-fill: var(--ui-success-300, #75edae);
--tk-control-success-state-hover-main-content: var(--ui-other-black, #000000);
--tk-control-success-state-hover-main-fill: var(--ui-success-500, #00c16a);
--tk-control-success-state-hover-translucent-fill: var(--ui-success-700-opacity-10, #007f451a);
--tk-control-success-subtle-content: var(--ui-success-800, #016538);
--tk-control-success-subtle-fill: var(--ui-success-100, #cffae2);
--tk-control-success-subtle-outline: var(--ui-success-400, #00dc82);
--tk-control-tertiary-clear-content: var(--br-tertiary-600, #97af21);
--tk-control-tertiary-clear-fill: var(--tk-surface-elevated, #ffffff);
--tk-control-tertiary-clear-outline: var(--br-tertiary-300, #f1ff66);
--tk-control-tertiary-filled-content: var(--ui-other-white, #ffffff);
--tk-control-tertiary-filled-fill: var(--br-tertiary-600, #97af21);
--tk-control-tertiary-ghost-content: var(--br-tertiary-800, #5a6816);
--tk-control-tertiary-outlined-content: var(--br-tertiary-600, #97af21);
--tk-control-tertiary-outlined-outline: var(--br-tertiary-500, #c1d92e);
--tk-control-tertiary-state-active-alt-content: var(--ui-other-black, #000000);
--tk-control-tertiary-state-active-alt-fill: var(--br-tertiary-100, #fcfeca);
--tk-control-tertiary-state-active-alt-outline: var(--br-tertiary-300, #f1ff66);
--tk-control-tertiary-state-active-main-content: var(--ui-other-white, #ffffff);
--tk-control-tertiary-state-active-main-fill: var(--br-tertiary-500, #c1d92e);
--tk-control-tertiary-state-active-translucent-fill: var(--br-tertiary-700-opacity-20, #71841a33);
--tk-control-tertiary-state-hover-alt-content: var(--ui-other-black, #000000);
--tk-control-tertiary-state-hover-alt-fill: var(--br-tertiary-200, #f7fe9b);
--tk-control-tertiary-state-hover-main-content: var(--ui-other-white, #ffffff);
--tk-control-tertiary-state-hover-main-fill: var(--br-tertiary-700, #71841a);
--tk-control-tertiary-state-hover-translucent-fill: var(--br-tertiary-700-opacity-10, #71841a1a);
--tk-control-tertiary-subtle-content: var(--br-tertiary-600, #97af21);
--tk-control-tertiary-subtle-fill: var(--br-tertiary-0, #ffffe6);
--tk-control-tertiary-subtle-outline: var(--br-tertiary-300, #f1ff66);
--tk-control-warning-clear-content: var(--ui-warning-800, #9e4700);
--tk-control-warning-clear-fill: var(--tk-surface-elevated, #ffffff);
--tk-control-warning-clear-outline: var(--ui-warning-300, #ffb96a);
--tk-control-warning-filled-content: var(--ui-other-black, #000000);
--tk-control-warning-filled-fill: var(--ui-warning-400, #ff931f);
--tk-control-warning-ghost-content: var(--ui-warning-700, #b55400);
--tk-control-warning-outlined-content: var(--ui-warning-700, #b55400);
--tk-control-warning-outlined-outline: var(--ui-warning-500, #f57a00);
--tk-control-warning-state-active-alt-content: var(--ui-other-black, #000000);
--tk-control-warning-state-active-alt-fill: var(--ui-warning-200, #ffd8a8);
--tk-control-warning-state-active-alt-outline: var(--ui-warning-400, #ff931f);
--tk-control-warning-state-active-main-content: var(--ui-other-black, #000000);
--tk-control-warning-state-active-main-fill: var(--ui-warning-300, #ffb96a);
--tk-control-warning-state-active-translucent-fill: var(--ui-warning-600-opacity-20, #cc630033);
--tk-control-warning-state-hover-alt-content: var(--ui-other-black, #000000);
--tk-control-warning-state-hover-alt-fill: var(--ui-warning-300, #ffb96a);
--tk-control-warning-state-hover-main-content: var(--ui-other-black, #000000);
--tk-control-warning-state-hover-main-fill: var(--ui-warning-500, #f57a00);
--tk-control-warning-state-hover-translucent-fill: var(--ui-warning-600-opacity-10, #cc63001a);
--tk-control-warning-subtle-content: var(--ui-warning-800, #9e4700);
--tk-control-warning-subtle-fill: var(--ui-warning-100, #ffecd4);
--tk-control-warning-subtle-outline: var(--ui-warning-300, #ffb96a);
--tk-danger-accent: var(--ui-danger-0, #fef2f2);
--tk-danger-base: var(--ui-danger-700, #c10007);
--tk-danger-muted: var(--ui-danger-300, #ffa2a2);
--tk-danger-strong: var(--ui-danger-900, #82181a);
--tk-danger-subtle: var(--ui-danger-100, #ffe2e2);
--tk-danger-toned: var(--ui-danger-500, #fb2c36);
--tk-info-accent: var(--tk-primary-accent, #f2f2ff);
--tk-info-base: var(--tk-primary-base, #6147fb);
--tk-info-muted: var(--tk-primary-muted, #b2b0fd);
--tk-info-strong: var(--tk-primary-strong, #3822c2);
--tk-info-subtle: var(--tk-primary-subtle, #e8e8fe);
--tk-info-toned: var(--tk-primary-toned, #8b84fc);
--tk-ink-contrast-muted: var(--br-neutral-100-opacity-40, #f5f5f266);
--tk-ink-contrast-primary: var(--br-neutral-100, #f5f5f2);
--tk-ink-contrast-secondary: var(--br-neutral-100-opacity-71, #f5f5f2b5);
--tk-ink-contrast-toned: var(--br-neutral-100-opacity-55, #f5f5f28c);
--tk-ink-main-muted: var(--br-neutral-1000-opacity-50, #26222380);
--tk-ink-main-primary: var(--br-neutral-1000, #262223);
--tk-ink-main-secondary: var(--br-neutral-1000-opacity-77, #262223c4);
--tk-ink-main-toned: var(--br-neutral-1000-opacity-63, #262223a1);
--tk-ink-other-accent: var(--br-primary-700, #432ae7);
--tk-ink-other-danger: var(--ui-danger-700, #c10007);
--tk-ink-other-highlight: var(--br-primary-800, #3822c2);
--tk-ink-other-info: var(--ui-info-700, #432ae7);
--tk-ink-other-link: var(--ui-info-600, #6147fb);
--tk-ink-other-success: var(--ui-success-700, #007f45);
--tk-ink-other-warning: var(--ui-warning-700, #b55400);
--tk-other-graph-10: var(--br-tertiary-300-opacity-10, #f1ff661a);
--tk-other-graph-100: var(--br-tertiary-300, #f1ff66);
--tk-other-graph-20: var(--br-tertiary-300-opacity-20, #f1ff6633);
--tk-other-graph-30: var(--br-tertiary-300-opacity-30, #f1ff664d);
--tk-other-graph-40: var(--br-tertiary-300-opacity-40, #f1ff6666);
--tk-other-graph-50: var(--br-tertiary-300-opacity-50, #f1ff6680);
--tk-other-graph-60: var(--br-tertiary-300-opacity-60, #f1ff6699);
--tk-other-graph-70: var(--br-tertiary-300-opacity-70, #f1ff66b2);
--tk-other-graph-80: var(--br-tertiary-300-opacity-80, #f1ff66cc);
--tk-other-graph-90: var(--br-tertiary-300-opacity-90, #f1ff66e5);
--tk-other-logo-dark: var(--br-logo-color-dark, #262223);
--tk-other-logo-light: var(--br-logo-color-light, #fffcf3);
--tk-other-logo-mono-dark: var(--br-logo-mono-dark, #262223);
--tk-other-logo-mono-light: var(--br-logo-mono-light, #fffcf3);
--tk-other-logo-mono-theme: var(--br-logo-mono-dark, #262223);
--tk-other-logo-theme: var(--br-logo-color-dark, #262223);
--tk-primary-accent: var(--br-primary-0, #f2f2ff);
--tk-primary-base: var(--br-primary-600, #6147fb);
--tk-primary-muted: var(--br-primary-300, #b2b0fd);
--tk-primary-strong: var(--br-primary-800, #3822c2);
--tk-primary-subtle: var(--br-primary-100, #e8e8fe);
--tk-primary-toned: var(--br-primary-400, #8b84fc);
--tk-secondary-accent: var(--br-secondary-0, #effffa);
--tk-secondary-base: var(--br-secondary-700, #138270);
--tk-secondary-muted: var(--br-secondary-400, #30e6c1);
--tk-secondary-strong: var(--br-secondary-900, #11554c);
--tk-secondary-subtle: var(--br-secondary-200, #93fee4);
--tk-secondary-toned: var(--br-secondary-500, #1ebd9e);
--tk-success-accent: var(--ui-success-0, #effdf5);
--tk-success-base: var(--ui-success-600, #009951);
--tk-success-muted: var(--ui-success-300, #75edae);
--tk-success-strong: var(--ui-success-900, #0a5331);
--tk-success-subtle: var(--ui-success-100, #cffae2);
--tk-success-toned: var(--ui-success-500, #00c16a);
--tk-surface-accent: var(--br-neutral-0, #fffcf3);
--tk-surface-base: var(--br-neutral-100, #f5f5f2);
--tk-surface-elevated: var(--ui-other-white, #ffffff);
--tk-surface-highlight-1: var(--br-primary-100, #e8e8fe);
--tk-surface-highlight-2: var(--br-primary-200, #d2d3fe);
--tk-surface-muted: var(--br-neutral-400, #c7c7c7);
--tk-surface-overlay-1: var(--br-neutral-1000-opacity-20, #26222333);
--tk-surface-overlay-2: var(--br-neutral-1000-opacity-45, #26222373);
--tk-surface-selection: var(--br-primary-0, #f2f2ff);
--tk-surface-strong: var(--br-neutral-1000, #262223);
--tk-surface-toned: var(--br-neutral-200, #e3e2dd);
--tk-surface-underline-1: var(--br-primary-200, #d2d3fe);
--tk-surface-underline-2: var(--br-tertiary-800, #5a6816);
--tk-surface-base-opacity-0: var(--br-neutral-100-opacity-0, #f5f5f200);
--tk-surface-elevated-opacity-0: var(--ui-other-white-opacity-0, #ffffff00);
--tk-tertiary-accent: var(--br-tertiary-0, #ffffe6);
--tk-tertiary-base: var(--br-tertiary-600, #97af21);
--tk-tertiary-muted: var(--br-tertiary-400, #dff341);
--tk-tertiary-strong: var(--br-tertiary-800, #5a6816);
--tk-tertiary-subtle: var(--br-tertiary-200, #f7fe9b);
--tk-tertiary-toned: var(--br-tertiary-500, #c1d92e);
--tk-warning-accent: var(--ui-warning-0, #fff7ed);
--tk-warning-base: var(--ui-warning-600, #cc6300);
--tk-warning-muted: var(--ui-warning-300, #ffb96a);
--tk-warning-strong: var(--ui-warning-900, #73380b);
--tk-warning-subtle: var(--ui-warning-100, #ffecd4);
--tk-warning-toned: var(--ui-warning-500, #f57a00);
}
/* Colors / UI */
:root {
/* iAML */
/* color */
--ui-danger-0: #fef2f2;
--ui-danger-100: #ffe2e2;
--ui-danger-1000: #460809;
--ui-danger-200: #ffc9c9;
--ui-danger-300: #ffa2a2;
--ui-danger-400: #ff6467;
--ui-danger-500: #fb2c36;
--ui-danger-600: #e7000b;
--ui-danger-700: #c10007;
--ui-danger-800: #9f0712;
--ui-danger-900: #82181a;
--ui-danger-300-opacity-10: #ffa2a21a;
--ui-danger-300-opacity-20: #ffa2a233;
--ui-danger-700-opacity-10: #c100071a;
--ui-danger-700-opacity-20: #c1000733;
--ui-info-0: var(--br-primary-0, #f2f2ff);
--ui-info-100: var(--br-primary-100, #e8e8fe);
--ui-info-1000: var(--br-primary-1000, #190f6c);
--ui-info-200: var(--br-primary-200, #d2d3fe);
--ui-info-300: var(--br-primary-300, #b2b0fd);
--ui-info-400: var(--br-primary-400, #8b84fc);
--ui-info-500: var(--br-primary-500, #6555fb);
--ui-info-600: var(--br-primary-600, #6147fb);
--ui-info-700: var(--br-primary-700, #432ae7);
--ui-info-800: var(--br-primary-800, #3822c2);
--ui-info-900: var(--br-primary-900, #2f1c9e);
--ui-info-1000-opacity-10: var(--br-primary-1000-opacity-10, #190f6c1a);
--ui-info-1000-opacity-20: var(--br-primary-1000-opacity-20, #190f6c33);
--ui-info-200-opacity-10: var(--br-primary-200-opacity-10, #d2d3fe1a);
--ui-info-200-opacity-20: var(--br-primary-200-opacity-20, #d2d3fe33);
--ui-other-black: #000000;
--ui-other-white: #ffffff;
--ui-other-white-opacity-0: #ffffff00;
--ui-other-white-opacity-10: #ffffff1a;
--ui-other-white-opacity-15: #ffffff26;
--ui-other-white-opacity-20: #ffffff33;
--ui-other-white-opacity-35: #ffffff59;
--ui-other-white-opacity-45: #ffffff73;
--ui-success-0: #effdf5;
--ui-success-100: #cffae2;
--ui-success-1000: #052e16;
--ui-success-200: #b3f5d1;
--ui-success-300: #75edae;
--ui-success-400: #00dc82;
--ui-success-500: #00c16a;
--ui-success-600: #009951;
--ui-success-700: #007f45;
--ui-success-800: #016538;
--ui-success-900: #0a5331;
--ui-success-300-opacity-10: #75edae1a;
--ui-success-300-opacity-20: #75edae33;
--ui-success-700-opacity-10: #007f451a;
--ui-success-700-opacity-20: #007f4533;
--ui-warning-0: #fff7ed;
--ui-warning-100: #ffecd4;
--ui-warning-1000: #442006;
--ui-warning-200: #ffd8a8;
--ui-warning-300: #ffb96a;
--ui-warning-400: #ff931f;
--ui-warning-500: #f57a00;
--ui-warning-600: #cc6300;
--ui-warning-700: #b55400;
--ui-warning-800: #9e4700;
--ui-warning-900: #73380b;
--ui-warning-300-opacity-10: #ffb96a1a;
--ui-warning-300-opacity-20: #ffb96a33;
--ui-warning-600-opacity-10: #cc63001a;
--ui-warning-600-opacity-20: #cc630033;
--logo-color: #2349CD;
}
/* Fonts */
:root {
/* iAML */
/* string */
--font-main: DM Sans;
--font-mono: Fragment Mono;
}
/* Typography */
:root {
/* iAML */
/* number */
--tg-scale-2xs: 1.2rem;
--tg-scale-xs: 1.4rem;
--tg-scale-s: 1.6rem;
--tg-scale-m: 1.8rem;
--tg-scale-l: 2rem;
--tg-scale-xl: 2.4rem;
--tg-scale-2xl: 3.2rem;
--tg-scale-3xl: 4.2rem;
--tg-scale-4xl: 5.6rem;
--tg-scale-5xl: 7.6rem;
--tg-scale-6xl: 10rem;
--tg-scale-7xl: 13.2rem;
--tg-scale-8xl: 17.6rem;
--tg-scale-9xl: 23.4rem;
--tg-styles-avatar-ps: 0rem;
--tg-styles-avatar-ls: 0.012rem;
--tg-styles-avatar-size: var(--tg-scale-2xs, 1.2rem);
--tg-styles-avatar-lh: 1.6rem;
--tg-styles-avatar-w: 600;
--tg-styles-badge-2xs-ps: 0rem;
--tg-styles-badge-2xs-ls: 0.032rem;
--tg-styles-badge-2xs-size: var(--tg-scale-s, 1.6rem);
--tg-styles-badge-2xs-lh: 2.8rem;
--tg-styles-badge-2xs-w: 700;
--tg-styles-badge-3xs-ps: 0rem;
--tg-styles-badge-3xs-ls: 0.028rem;
--tg-styles-badge-3xs-size: var(--tg-scale-xs, 1.4rem);
--tg-styles-badge-3xs-lh: 2.4rem;
--tg-styles-badge-3xs-w: 700;
--tg-styles-badge-4xs-ps: 0rem;
--tg-styles-badge-4xs-ls: 0.024rem;
--tg-styles-badge-4xs-size: var(--tg-scale-2xs, 1.2rem);
--tg-styles-badge-4xs-lh: 2rem;
--tg-styles-badge-4xs-w: 700;
--tg-styles-body-l-ls: 0.02rem;
--tg-styles-body-l-size: var(--tg-scale-l, 2rem);
--tg-styles-body-l-lh: 3rem;
--tg-styles-body-l-ps: var(--tg-styles-body-l-lh, 3rem);
--tg-styles-body-l-w: 400;
--tg-styles-body-m-ls: 0.018rem;
--tg-styles-body-m-size: var(--tg-scale-m, 1.8rem);
--tg-styles-body-m-lh: 2.8rem;
--tg-styles-body-m-ps: var(--tg-styles-body-m-lh, 2.8rem);
--tg-styles-body-m-w: 400;
--tg-styles-body-s-ls: 0.016rem;
--tg-styles-body-s-size: var(--tg-scale-s, 1.6rem);
--tg-styles-body-s-lh: 2.4rem;
--tg-styles-body-s-ps: var(--tg-styles-body-s-lh, 2.4rem);
--tg-styles-body-s-w: 400;
--tg-styles-body-xl-ls: 0.024rem;
--tg-styles-body-xl-size: var(--tg-scale-xl, 2.4rem);
--tg-styles-body-xl-lh: 3.6rem;
--tg-styles-body-xl-ps: var(--tg-styles-body-xl-lh, 3.6rem);
--tg-styles-body-xl-w: 400;
--tg-styles-body-xs-ls: 0.014rem;
--tg-styles-body-xs-size: var(--tg-scale-xs, 1.4rem);
--tg-styles-body-xs-lh: 2.2rem;
--tg-styles-body-xs-ps: var(--tg-styles-body-xs-lh, 2.2rem);
--tg-styles-body-xs-w: 400;
--tg-styles-button-m-ps: 0rem;
--tg-styles-button-m-ls: 0.036rem;
--tg-styles-button-m-size: var(--tg-scale-m, 1.8rem);
--tg-styles-button-m-lh: 2.4rem;
--tg-styles-button-m-w: 500;
--tg-styles-button-s-ps: 0rem;
--tg-styles-button-s-ls: 0.032rem;
--tg-styles-button-s-size: var(--tg-scale-s, 1.6rem);
--tg-styles-button-s-lh: 2.4rem;
--tg-styles-button-s-w: 500;
--tg-styles-button-xs-ps: 0rem;
--tg-styles-button-xs-ls: 0.028rem;
--tg-styles-button-xs-size: var(--tg-scale-xs, 1.4rem);
--tg-styles-button-xs-lh: 2rem;
--tg-styles-button-xs-w: 500;
--tg-styles-heading-h1-ls: -0.1rem;
--tg-styles-heading-h1-lh: 10rem;
--tg-styles-heading-h1-ps: var(--tg-styles-heading-h1-lh, 10rem);
--tg-styles-heading-h1-size: var(--tg-scale-6xl, 10rem);
--tg-styles-heading-h1-w: 500;
--tg-styles-heading-h2-ls: 0rem;
--tg-styles-heading-h2-size: var(--tg-scale-5xl, 7.6rem);
--tg-styles-heading-h2-lh: 8rem;
--tg-styles-heading-h2-ps: var(--tg-styles-heading-h2-lh, 8rem);
--tg-styles-heading-h2-w: 500;
--tg-styles-heading-h3-ls: 0.056rem;
--tg-styles-heading-h3-size: var(--tg-scale-4xl, 5.6rem);
--tg-styles-heading-h3-lh: 6rem;
--tg-styles-heading-h3-ps: var(--tg-styles-heading-h3-lh, 6rem);
--tg-styles-heading-h3-w: 500;
--tg-styles-heading-h4-ls: 0.084rem;
--tg-styles-heading-h4-size: var(--tg-scale-3xl, 4.2rem);
--tg-styles-heading-h4-lh: 4.8rem;
--tg-styles-heading-h4-ps: var(--tg-styles-heading-h4-lh, 4.8rem);
--tg-styles-heading-h4-w: 500;
--tg-styles-heading-h5-ls: 0.064rem;
--tg-styles-heading-h5-size: var(--tg-scale-2xl, 3.2rem);
--tg-styles-heading-h5-lh: 3.6rem;
--tg-styles-heading-h5-ps: var(--tg-styles-heading-h5-lh, 3.6rem);
--tg-styles-heading-h5-w: 500;
--tg-styles-heading-h6-ls: -0.024rem;
--tg-styles-heading-h6-size: var(--tg-scale-xl, 2.4rem);
--tg-styles-heading-h6-lh: 3.2rem;
--tg-styles-heading-h6-ps: var(--tg-styles-heading-h6-lh, 3.2rem);
--tg-styles-heading-h6-w: 600;
--tg-styles-heading-h7-ls: 0rem;
--tg-styles-heading-h7-size: var(--tg-scale-l, 2rem);
--tg-styles-heading-h7-lh: 2.4rem;
--tg-styles-heading-h7-ps: var(--tg-styles-heading-h7-lh, 2.4rem);
--tg-styles-heading-h7-w: 600;
--tg-styles-heading-h8-ls: 0.018rem;
--tg-styles-heading-h8-size: var(--tg-scale-m, 1.8rem);
--tg-styles-heading-h8-lh: 2.2rem;
--tg-styles-heading-h8-ps: var(--tg-styles-heading-h8-lh, 2.2rem);
--tg-styles-heading-h8-w: 600;
--tg-styles-key-ps: 0rem;
--tg-styles-key-ls: 0.038rem;
--tg-styles-key-lh: var(--tg-styles-key-size, 1.8rem);
--tg-styles-key-size: var(--tg-scale-m, 1.8rem);
--tg-styles-key-w: 500;
--tg-styles-mono-l-ls: -0.04rem;
--tg-styles-mono-l-size: var(--tg-styles-body-l-size, 2rem);
--tg-styles-mono-l-lh: var(--tg-styles-body-l-lh, 3rem);
--tg-styles-mono-l-ps: var(--tg-styles-body-l-ps, 3rem);
--tg-styles-mono-l-w: var(--tg-styles-body-l-w, 400);
--tg-styles-mono-m-ls: -0.036rem;
--tg-styles-mono-m-size: var(--tg-styles-body-m-size, 1.8rem);
--tg-styles-mono-m-lh: var(--tg-styles-body-m-lh, 2.8rem);
--tg-styles-mono-m-ps: var(--tg-styles-body-m-ps, 2.8rem);
--tg-styles-mono-m-w: var(--tg-styles-body-m-w, 400);
--tg-styles-mono-s-ls: -0.032rem;
--tg-styles-mono-s-size: var(--tg-styles-body-s-size, 1.6rem);
--tg-styles-mono-s-lh: var(--tg-styles-body-s-lh, 2.4rem);
--tg-styles-mono-s-ps: var(--tg-styles-body-s-ps, 2.4rem);
--tg-styles-mono-s-w: var(--tg-styles-body-s-w, 400);
--tg-styles-mono-xl-ls: -0.072rem;
--tg-styles-mono-xl-size: var(--tg-styles-body-xl-size, 2.4rem);
--tg-styles-mono-xl-lh: var(--tg-styles-body-xl-lh, 3.6rem);
--tg-styles-mono-xl-ps: var(--tg-styles-body-xl-ps, 3.6rem);
--tg-styles-mono-xl-w: var(--tg-styles-body-xl-w, 400);
--tg-styles-mono-xs-ls: -0.028rem;
--tg-styles-mono-xs-size: var(--tg-styles-body-xs-size, 1.4rem);
--tg-styles-mono-xs-lh: var(--tg-styles-body-xs-lh, 2.2rem);
--tg-styles-mono-xs-ps: var(--tg-styles-body-xs-ps, 2.2rem);
--tg-styles-mono-xs-w: var(--tg-styles-body-xs-w, 400);
--tg-styles-navlink-ls: 0rem;
--tg-styles-navlink-ps: 0rem;
--tg-styles-navlink-size: var(--tg-scale-s, 1.6rem);
--tg-styles-navlink-lh: 2.4rem;
--tg-styles-navlink-w: 400;
--tg-styles-overline-ls: 0.196rem;
--tg-styles-overline-size: var(--tg-scale-xs, 1.4rem);
--tg-styles-overline-lh: 2.4rem;
--tg-styles-overline-ps: var(--tg-styles-overline-lh, 2.4rem);
--tg-styles-overline-w: 600;
--tg-styles-small-ls: 0.048rem;
--tg-styles-small-size: var(--tg-scale-2xs, 1.2rem);
--tg-styles-small-lh: 1.6rem;
--tg-styles-small-ps: var(--tg-styles-small-lh, 1.6rem);
--tg-styles-small-w: 500;
}
/* Numbers / Tokens */
:root {
/* iAML */
/* number */
--nb-atom-badge-2xs-padding-h: 0.8rem;
--nb-atom-badge-3xs-padding-h: 0.7rem;
--nb-atom-badge-4xs-padding-h: 0.6rem;
--nb-atom-badge-dot-size: 0.8rem;
--nb-atom-button-l-badge-mask-margin: -0.4rem;
--nb-atom-button-l-icon-mask-margin: -0.4rem;
--nb-atom-button-l-gap: 1rem;
--nb-atom-button-l-padding-v: 1.4rem;
--nb-atom-button-l-padding-h-ghost: 1.6rem;
--nb-atom-button-l-icon-size: 2.4rem;
--nb-atom-button-l-padding-h: 2.8rem;
--nb-atom-button-m-badge-mask-margin: -0.4rem;
--nb-atom-button-m-icon-mask-margin: -0.2rem;
--nb-atom-button-m-gap: 0.8rem;
--nb-atom-button-m-padding-v: 1rem;
--nb-atom-button-m-padding-h-ghost: 1.2rem;
--nb-atom-button-m-icon-size: 2rem;
--nb-atom-button-m-padding-h: 2rem;
--nb-atom-button-s-badge-mask-margin: -0.4rem;
--nb-atom-button-s-icon-mask-margin: -0.2rem;
--nb-atom-button-s-gap: 0.8rem;
--nb-atom-button-s-padding-h-ghost: 0.8rem;
--nb-atom-button-s-padding-v: 0.8rem;
--nb-atom-button-s-padding-h: 1.6rem;
--nb-atom-button-s-icon-size: 1.8rem;
--nb-atom-chip-2xs-avatar-mask-margin: -0.7rem;
--nb-atom-chip-2xs-icon-mask-margin: -0.2rem;
--nb-atom-chip-2xs-padding-v: 0.2rem;
--nb-atom-chip-2xs-gap: 0.6rem;
--nb-atom-chip-2xs-padding-h: 1rem;
--nb-atom-chip-2xs-icon-size: 1.8rem;
--nb-atom-chip-xs-avatar-mask-margin: -0.8rem;
--nb-atom-chip-xs-icon-mask-margin: -0.2rem;
--nb-atom-chip-xs-padding-v: 0.4rem;
--nb-atom-chip-xs-gap: 0.6rem;
--nb-atom-chip-xs-padding-h: 1.2rem;
--nb-atom-chip-xs-icon-size: 1.8rem;
--nb-atom-icon-stroke: 0.15rem;
--nb-atom-icon-button-l-icon-size: 2.8rem;
--nb-atom-icon-button-m-icon-size: 2.4rem;
--nb-atom-icon-button-s-icon-size: 2rem;
--nb-atom-input-l-icon-mask-margin: -0.4rem;
--nb-atom-input-l-gap: 1.2rem;
--nb-atom-input-l-padding-v: 1.4rem;
--nb-atom-input-l-padding-h: 2rem;
--nb-atom-input-l-icon-size: 2.4rem;
--nb-atom-input-l-multi-line-min-height: 10rem;
--nb-atom-input-xl-icon-mask-margin: -0.4rem;
--nb-atom-input-xl-padding-v: 1.4rem;
--nb-atom-input-xl-gap: 1.6rem;
--nb-atom-input-xl-padding-h: 2rem;
--nb-atom-input-xl-icon-size: 2.4rem;
--nb-atom-input-xl-multi-line-min-height: 11.2rem;
--nb-common-control-size-4xs: 2rem;
--nb-common-control-size-3xs: 2.4rem;
--nb-common-control-size-2xs: 2.8rem;
--nb-common-control-size-xs: 3.2rem;
--nb-common-control-size-s: 3.6rem;
--nb-common-control-size-m: 4.4rem;
--nb-common-control-size-l: 5.2rem;
--nb-common-control-size-xl: 5.6rem;
--nb-common-control-size-2xl: 6.8rem;
--nb-common-control-size-3xl: 8rem;
--nb-common-grid-gap: 2.4rem;
--nb-common-radius-control-sharp: 0.4rem;
--nb-common-radius-layout-sharp: 0.4rem;
--nb-common-radius-control: 0.8rem;
--nb-common-radius-outline-control-sharp: 0.8rem;
--nb-common-radius-control-soft: 1.2rem;
--nb-common-radius-layout: 1.2rem;
--nb-common-radius-outline-control: 1.2rem;
--nb-common-radius-outline-control-soft: 1.6rem;
--nb-common-radius-layout-soft: 2rem;
--nb-common-radius-control-pill: 100rem;
--nb-common-stroke-s: 0.1rem;
--nb-common-stroke-m: 0.15rem;
--nb-common-stroke-l: 0.2rem;
--nb-molecule-buttons-row-gap-2xs: 0.2rem;
--nb-molecule-buttons-row-gap-xs: 0.4rem;
--nb-molecule-buttons-row-gap-s: 0.8rem;
--nb-molecule-buttons-row-gap-m: 1.2rem;
--nb-molecule-buttons-row-gap-l: 1.6rem;
--nb-molecule-buttons-row-gap-xl: 2.4rem;
--nb-molecule-buttons-row-gap-2xl: 3.2rem;
--nb-molecule-forms-gap-m: 1.6rem;
--nb-molecule-forms-gap-l: 2.4rem;
--nb-molecule-lists-gap-s: 1.2rem;
--nb-molecule-lists-gap-m: 1.6rem;
--nb-molecule-lists-gap-l: 2.4rem;
--nb-molecule-lists-gap-xl: 3.2rem;
--nb-molecule-subtitles-gap: 2.4rem;
--nb-organism-card-gap-xs: 1.2rem;
--nb-organism-card-gap-s: 1.6rem;
--nb-organism-card-gap-m: 2.4rem;
--nb-organism-card-gap-l: 3.2rem;
--nb-organism-card-gap-xl: 4.8rem;
--nb-organism-card-padding-xs: 1.2rem;
--nb-organism-card-padding-s: 1.6rem;
--nb-organism-card-padding-m: 2rem;
--nb-organism-card-padding-l: 2.4rem;
--nb-organism-card-padding-xl: 4.8rem;
--nb-organism-card-padding-2xl: 7.2rem;
--nb-organism-nav-size-rail: 6.8rem;
--nb-organism-nav-size-full: 28.8rem;
--nb-template-gap-s: 2.4rem;
--nb-template-gap-m: 3.2rem;
--nb-template-gap-l: 4.8rem;
--nb-template-gap-xl: 7.2rem;
--nb-template-gap-2xl: 9.6rem;
/* string */
--head: Small table row head;
--value: Row value;
--input-width: 39.7rem;
--input-icon-space: 1.6rem;
--input-content-space: 5.2rem;
--input-label-padding: 0.8rem ;
}
/* Numbers / Space */
:root {
/* Default */
/* number */
--minus-32: -32rem;
--minus-31: -25.6rem;
--minus-30: -22.4rem;
--minus-29: -19.2rem;
--minus-28: -16rem;
--minus-27: -12.8rem;
--minus-26: -11.2rem;
--minus-25: -9.6rem;
--minus-24: -8.8rem;
--minus-23: -8rem;
--minus-22: -7.2rem;
--minus-21: -6.8rem;
--minus-20: -6.4rem;
--minus-19: -6rem;
--minus-18: -5.6rem;
--minus-17: -5.2rem;
--minus-16: -4.8rem;
--minus-15: -4.4rem;
--minus-14: -4rem;
--minus-13: -3.6rem;
--minus-12: -3.2rem;
--minus-11: -2.8rem;
--minus-10: -2.4rem;
--minus-9: -2rem;
--minus-8: -1.6rem;
--minus-7: -1.4rem;
--minus-6: -1.2rem;
--minus-5: -1rem;
--minus-4: -0.8rem;
--minus-3: -0.6rem;
--minus-2: -0.4rem;
--minus-1: -0.2rem;
--space-1: 0.2rem;
--space-2: 0.4rem;
--space-3: 0.6rem;
--space-4: 0.8rem;
--space-5: 1rem;
--space-6: 1.2rem;
--space-7: 1.4rem;
--space-8: 1.6rem;
--space-9: 2rem;
--space-10: 2.4rem;
--space-11: 2.8rem;
--space-12: 3.2rem;
--space-13: 3.6rem;
--space-14: 4rem;
--space-15: 4.4rem;
--space-16: 4.8rem;
--space-17: 5.2rem;
--space-18: 5.6rem;
--space-19: 6rem;
--space-20: 6.4rem;
--space-21: 6.8rem;
--space-22: 7.2rem;
--space-23: 8rem;
--space-24: 8.8rem;
--space-25: 9.6rem;
--space-26: 11.2rem;
--space-27: 12.8rem;
--space-28: 16rem;
--space-29: 19.2rem;
--space-30: 22.4rem;
--space-31: 25.6rem;
--space-32: 32rem;
}
/* Numbers / Grid */
:root {
/* Uninav-Apps */
/* number */
--grid-column-count: 1.2rem;
--grid-margin: 4.8rem;
--grid-breakout: 156rem;
--grid-gutter-0: 2.4rem;
--grid-gutter-1: 15.2rem;
--grid-gutter-2: 28rem;
--grid-gutter-3: 40.8rem;
--grid-gutter-4: 53.6rem;
--grid-gutter-5: 66.4rem;
--grid-gutter-6: 79.2rem;
--grid-gutter-7: 92rem;
--grid-gutter-8: 104.8rem;
--grid-gutter-9: 117.6rem;
--grid-gutter-10: 130.4rem;
--grid-indent-0: 0rem;
--grid-indent-1: 12.8rem;
--grid-indent-2: 25.6rem;
--grid-indent-3: 38.4rem;
--grid-indent-4: 51.2rem;
--grid-indent-5: 64rem;
--grid-indent-6: 76.8rem;
--grid-indent-7: 89.6rem;
--grid-indent-8: 102.4rem;
--grid-indent-9: 115.2rem;
--grid-indent-10: 128rem;
--grid-indent-11: 140.8rem;
--grid-indent-12: 153.6rem;
--grid-span-1: 10.4rem;
--grid-span-2: 23.2rem;
--grid-span-3: 36rem;
--grid-span-4: 48.8rem;
--grid-span-5: 61.6rem;
--grid-span-6: 74.4rem;
--grid-span-7: 87.2rem;
--grid-span-8: 100rem;
--grid-span-9: 112.8rem;
--grid-span-10: 125.6rem;
--grid-span-11: 138.4rem;
--grid-span-12: 151.2rem;
}
:root {
--only-desktop: 1;
--is-container: 1;
--container-w: $container-w;
--container-w1: $container-w1;
--container-w2: $container-w2;
--container-org-w: $container-org-w;
--boundary-container-max-width2: $boundary-container-max-width2;
--tablet-org-w: $tablet-org-w;
--mobile-org-w: $mobile-org-w;
--container-padd: 2.4rem;
--container-padd-in: 0;
--def-trans-time: 0.3s;
--def-trans-prop: all;
--def-trans-delay: 0s;
--def-trans-type: ease-out;
--grid-gap: 3.2rem;
--anim-time: 0.3s;
--gap-1: 0.2rem;
--gap-2: 0.4rem;
--gap-3: 0.6rem;
--gap-4: 0.8rem;
--gap-5: 1.2rem;
--gap-6: 1.4rem;
--gap-7: 1.8rem;
--gap-8: 2.2rem;
--gap-9: 2.4rem;
--gap-10: 3.2rem;
--gap-11: 4.8rem;
--gap-12: 1.6rem;
--gap-13: 4rem;
--gap-14: 2rem;
--gap-15: 1rem;
--gap-16: 4.8rem;
--gap-17: 3.6rem;
--nav-width: 28.8rem;
--nav-padding-sides: 2.4rem;
--breadcrumbs-height: 6.8rem;
--nav-menuLink-gap: 1.2rem;
--nav-footer-height: 6.8rem;
--top-navbar-scanner-height: 5.6rem;
--main-content-side-left: 4.8rem;
--main-content-side-right: 2.4rem;
--main-content-side-bottom: 2.4rem;
--main-content-side-top: 2.4rem;
--header-type-2-side-bottom: 4rem;
--header-type-2-side-top: 4.8rem;
--header-type-side-top: 4rem;
--main-content-body-bottom: 1.6rem;
--main-content-in-top: 4.8rem;
--main-content-in-bottom: 2.4rem;
--main-content-in-left: 4.8rem;
--main-content-in-right: 2.4rem;
--dashborad-content-side-left: 4.8rem;
--dashborad-content-side-right: 2.4rem;
--dashborad-content-side-bottom: 2.4rem;
--dashborad-content-side-top: 2.4rem;
--table-padding-top-bottom: 1rem;
--table-padding-top-bottom-header: 1.4rem;
--table-padding-sides: 1.2rem;
--table-row-edit-cell-padd: 0.6rem;
--table-row-edit-cell-right: 5.4rem;
--form-width-1: 82.4rem;
--modal-padding: 4.8rem;
--ts-select-left-padd: 4.4rem;
--checkbox-size: 2rem;
--scanner-layer-1: #D0D8F7;
--scanner-layer-2: #A5B5EB;
--scanner-layer-3: #506FD9;
--scanner-layer-4: #2349CD;
--scanner-layer-5: #142571;
--nb-atom-badge-2xs-sides: 0.8rem;
--nb-atom-badge-3xs-sides: 0.7rem;
--nb-atom-button-l-sides: 2.8rem;
--nb-atom-button-m-sides: 2rem;
--nb-atom-button-s-sides: 1.6rem;
--nb-atom-chip-2xs-sides: 1rem;
--nb-atom-chip-xs-sides: 1.2rem;
--global-padding: 1.2rem;
--tg-styles-badge-s-size: var(--tg-scale-xs, 1.4rem);
--tg-styles-badge-s-lh: 2.4rem;
--tg-styles-badge-s-ls: 0.048rem;
--tk-control-neutral-DEPRECATED_inactive-outline: rgba(33, 33, 33, 0.15);
--tk-surface-highlight-3: var(--br-neutral-200-opacity-92);
--tk-control-neutral-outlined-background: var(var(--br-neutral-100-opacity-71));
--color-surface: var(--tk-control-neutral-subtle-fill);
--color-neutral-0: var(--br-neutral-0);
--tab-options-padding-left: var(--space-4);
}
:root.trusive-brand {
--br-logo-color-dark: var(--br-neutral-1000, #262223);
--br-logo-color-light: var(--br-neutral-0, #fffcf3);
--br-logo-mono-dark: var(--br-neutral-1000, #262223);
--br-logo-mono-light: var(--br-neutral-0, #fffcf3);
--br-neutral-0: #fffcf3;
--br-neutral-100: #f5f5f2;
--br-neutral-1000: #262223;
--br-neutral-1100: #1f1b1c;
--br-neutral-200: #e3e2dd;
--br-neutral-300: #d2d2d2;
--br-neutral-400: #c7c7c7;
--br-neutral-500: #b3b1b2;
--br-neutral-600: #949091;
--br-neutral-700: #757172;
--br-neutral-800: #545051;
--br-neutral-900: #3d393a;
--br-neutral-100-opacity-0: #f5f5f200;
--br-neutral-1000-opacity-0: #26222300;
--br-neutral-1000-opacity-10: #2622231a;
--br-neutral-1000-opacity-15: #26222326;
--br-neutral-1000-opacity-20: #26222333;
--br-neutral-1000-opacity-35: #26222359;
--br-neutral-1000-opacity-45: #26222373;
--br-neutral-1000-opacity-5: #2622230d;
--br-neutral-1000-opacity-55: #2622238c;
--br-neutral-1100-opacity-0: #1f1b1c00;
--br-neutral-1100-opacity-40: #1f1b1c66;
--br-neutral-1100-opacity-60: #1f1b1c99;
--br-neutral-200-opacity-92: #e3e2ddeb;
--br-primary-0: #f2f2ff;
--br-primary-100: #e8e8fe;
--br-primary-1000: #190f6c;
--br-primary-1100: #140e47;
--br-primary-200: #d2d3fe;
--br-primary-300: #b2b0fd;
--br-primary-400: #8b84fc;
--br-primary-500: #6555fb;
--br-primary-600: #6147fb;
--br-primary-700: #432ae7;
--br-primary-800: #3822c2;
--br-primary-900: #2f1c9e;
--br-primary-1000-opacity-10: #190f6c1a;
--br-primary-1000-opacity-20: #190f6c33;
--br-primary-1000-opacity-45: #190f6c73;
--br-primary-200-opacity-10: #d2d3fe1a;
--br-primary-200-opacity-20: #d2d3fe33;
--br-primary-300-opacity-10: #b2b0fd1a;
--br-primary-300-opacity-20: #b2b0fd33;
--br-primary-600-opacity-10: #6147fb1a;
--br-primary-600-opacity-20: #6147fb33;
--br-primary-700-opacity-5: #432ae70d;
--br-primary-900-opacity-10: #2f1c9e1a;
--br-primary-900-opacity-20: #2f1c9e33;
--br-primary-900-opacity-30: #2f1c9e4d;
--br-primary-900-opacity-40: #2f1c9e66;
--br-primary-900-opacity-50: #2f1c9e80;
--br-primary-900-opacity-60: #2f1c9e99;
--br-primary-900-opacity-70: #2f1c9eb2;
--br-primary-900-opacity-80: #2f1c9ecc;
--br-primary-900-opacity-90: #2f1c9ee5;
--br-secondary-0: #effffa;
--br-secondary-100: #c9fff1;
--br-secondary-1000: #0a453e;
--br-secondary-1100: #033430;
--br-secondary-200: #93fee4;
--br-secondary-300: #58f9d5;
--br-secondary-400: #30e6c1;
--br-secondary-500: #1ebd9e;
--br-secondary-600: #18a48b;
--br-secondary-700: #138270;
--br-secondary-800: #11675b;
--br-secondary-900: #11554c;
--br-secondary-400-opacity-10: #30e6c11a;
--br-secondary-400-opacity-20: #30e6c133;
--br-secondary-700-opacity-10: #1382701a;
--br-secondary-900-opacity-10: #11554c1a;
--br-secondary-900-opacity-20: #11554c33;
--br-tertiary-0: #ffffe6;
--br-tertiary-100: #fcfeca;
--br-tertiary-1000: #39440e;
--br-tertiary-1100: #273105;
--br-tertiary-200: #f7fe9b;
--br-tertiary-300: #f1ff66;
--br-tertiary-400: #dff341;
--br-tertiary-500: #c1d92e;
--br-tertiary-600: #97af21;
--br-tertiary-700: #71841a;
--br-tertiary-800: #5a6816;
--br-tertiary-900: #4a5716;
--br-tertiary-300-opacity-10: #f1ff661a;
--br-tertiary-300-opacity-20: #f1ff6633;
--br-tertiary-300-opacity-30: #f1ff664d;
--br-tertiary-300-opacity-40: #f1ff6666;
--br-tertiary-300-opacity-50: #f1ff6680;
--br-tertiary-300-opacity-60: #f1ff6699;
--br-tertiary-300-opacity-70: #f1ff66b2;
--br-tertiary-300-opacity-80: #f1ff66cc;
--br-tertiary-300-opacity-90: #f1ff66e5;
--br-tertiary-700-opacity-10: #71841a1a;
--br-tertiary-700-opacity-20: #71841a33;
}
html.custom-dd-html.dark-mode {
--tk-border-solid-0: var(--br-neutral-900, #3d393a);
--tk-border-solid-1: var(--br-neutral-900, #3d393a);
--tk-border-solid-2: var(--br-neutral-800, #545051);
--tk-border-solid-3: var(--br-neutral-700, #757172);
--tk-border-translucent-1: var(--ui-other-white-opacity-15, #ffffff26);
--tk-border-translucent-2: var(--ui-other-white-opacity-20, #ffffff33);
--tk-border-translucent-3: var(--ui-other-white-opacity-35, #ffffff59);
--tk-border-translucent-contrast-1: var(--br-neutral-1000-opacity-15, #26222326);
--tk-border-translucent-contrast-2: var(--br-neutral-1000-opacity-20, #26222333);
--tk-border-translucent-contrast-3: var(--br-neutral-1000-opacity-45, #26222373);
--tk-control-danger-filled-content: var(--ui-other-black, #000000);
--tk-control-danger-filled-fill: var(--ui-danger-500, #fb2c36);
--tk-control-danger-ghost-content: var(--ui-danger-400, #ff6467);
--tk-control-danger-outlined-content: var(--ui-danger-400, #ff6467);
--tk-control-danger-outlined-outline: var(--ui-danger-500, #fb2c36);
--tk-control-danger-state-active-outline: #ffffff;
--tk-control-danger-state-active-alt-content: var(--ui-other-white, #ffffff);
--tk-control-danger-state-active-alt-fill: var(--ui-danger-1000, #460809);
--tk-control-danger-state-active-main-content: var(--ui-other-black, #000000);
--tk-control-danger-state-active-main-fill: var(--ui-danger-700, #c10007);
--tk-control-danger-state-active-translucent-fill: var(--ui-danger-300-opacity-20, #ffa2a233);
--tk-control-danger-state-hover-alt-content: var(--ui-other-white, #ffffff);
--tk-control-danger-state-hover-alt-fill: var(--ui-danger-900, #82181a);
--tk-control-danger-state-hover-main-content: var(--ui-other-black, #000000);
--tk-control-danger-state-hover-main-fill: var(--ui-danger-600, #e7000b);
--tk-control-danger-state-hover-translucent-fill: var(--ui-danger-300-opacity-10, #ffa2a21a);
--tk-control-danger-subtle-content: var(--ui-danger-400, #ff6467);
--tk-control-danger-subtle-fill: var(--ui-danger-1000, #460809);
--tk-control-danger-subtle-outline: var(--ui-danger-800, #9f0712);
--tk-control-disabled-filled-content: var(--br-neutral-600, #949091);
--tk-control-disabled-filled-fill: var(--br-neutral-900, #3d393a);
--tk-control-disabled-ghost-content: var(--br-neutral-700, #757172);
--tk-control-disabled-outlined-content: var(--br-neutral-700, #757172);
--tk-control-disabled-outlined-outline: var(--br-neutral-800, #545051);
--tk-control-disabled-subtle-content: var(--br-neutral-700, #757172);
--tk-control-disabled-subtle-outline: var(--br-neutral-800, #545051);
--tk-control-info-filled-content: var(--ui-other-black, #000000);
--tk-control-info-filled-fill: var(--ui-info-300, #b2b0fd);
--tk-control-info-ghost-content: var(--ui-info-300, #b2b0fd);
--tk-control-info-outlined-content: var(--ui-info-300, #b2b0fd);
--tk-control-info-outlined-outline: var(--ui-info-300, #b2b0fd);
--tk-control-info-state-active-outline: #ffffff;
--tk-control-info-state-active-alt-content: var(--ui-other-white, #ffffff);
--tk-control-info-state-active-alt-fill: var(--ui-info-1000, #190f6c);
--tk-control-info-state-active-main-content: var(--ui-other-black, #000000);
--tk-control-info-state-active-main-fill: var(--ui-info-500, #6555fb);
--tk-control-info-state-active-translucent-fill: var(--ui-info-200-opacity-20, #d2d3fe33);
--tk-control-info-state-hover-alt-content: var(--ui-other-white, #ffffff);
--tk-control-info-state-hover-alt-fill: var(--ui-info-900, #2f1c9e);
--tk-control-info-state-hover-main-content: var(--ui-other-black, #000000);
--tk-control-info-state-hover-main-fill: var(--ui-info-400, #8b84fc);
--tk-control-info-state-hover-translucent-fill: var(--ui-info-200-opacity-10, #d2d3fe1a);
--tk-control-info-subtle-content: var(--ui-info-300, #b2b0fd);
--tk-control-info-subtle-fill: var(--ui-info-1000, #190f6c);
--tk-control-info-subtle-outline: var(--ui-info-700, #432ae7);
--tk-control-neutral-filled-content: var(--br-neutral-1000, #262223);
--tk-control-neutral-filled-fill: var(--br-neutral-200, #e3e2dd);
--tk-control-neutral-ghost-content: var(--br-neutral-200, #e3e2dd);
--tk-control-neutral-outlined-content: var(--br-neutral-200, #e3e2dd);
--tk-control-neutral-outlined-outline: var(--br-neutral-200, #e3e2dd);
--tk-control-neutral-sneaky-content: var(--br-neutral-200, #e3e2dd);
--tk-control-neutral-state-active-outline: #ffffff;
--tk-control-neutral-state-active-alt-content: var(--ui-other-white, #ffffff);
--tk-control-neutral-state-active-alt-fill: var(--br-neutral-900, #3d393a);
--tk-control-neutral-state-active-main-content: var(--ui-other-black, #000000);
--tk-control-neutral-state-active-main-fill: var(--br-neutral-600, #949091);
--tk-control-neutral-state-active-translucent-fill: var(--ui-other-white-opacity-20, #ffffff33);
--tk-control-neutral-state-hover-alt-content: var(--ui-other-white, #ffffff);
--tk-control-neutral-state-hover-alt-fill: var(--br-neutral-800, #545051);
--tk-control-neutral-state-hover-main-content: var(--ui-other-black, #000000);
--tk-control-neutral-state-hover-main-fill: var(--br-neutral-500, #b3b1b2);
--tk-control-neutral-state-hover-translucent-fill: var(--ui-other-white-opacity-10, #ffffff1a);
--tk-control-neutral-state-inactive-content: var(--br-neutral-400, #c7c7c7);
--tk-control-neutral-subtle-content: var(--br-neutral-200, #e3e2dd);
--tk-control-neutral-subtle-fill: var(--tk-surface-elevated, #262223);
--tk-control-neutral-subtle-outline: var(--tk-border-translucent-2, #ffffff33);
--tk-control-primary-filled-content: var(--ui-other-black, #000000);
--tk-control-primary-filled-fill: var(--br-primary-300, #b2b0fd);
--tk-control-primary-ghost-content: var(--br-primary-300, #b2b0fd);
--tk-control-primary-outlined-content: var(--br-primary-300, #b2b0fd);
--tk-control-primary-outlined-outline: var(--br-primary-300, #b2b0fd);
--tk-control-primary-state-active-outline: #ffffff;
--tk-control-primary-state-active-alt-content: var(--ui-other-white, #ffffff);
--tk-control-primary-state-active-alt-fill: var(--br-primary-1000, #190f6c);
--tk-control-primary-state-active-main-content: var(--ui-other-black, #000000);
--tk-control-primary-state-active-main-fill: var(--br-primary-500, #6555fb);
--tk-control-primary-state-active-translucent-fill: var(--br-primary-300-opacity-20, #b2b0fd33);
--tk-control-primary-state-hover-alt-content: var(--ui-other-white, #ffffff);
--tk-control-primary-state-hover-alt-fill: var(--br-primary-900, #2f1c9e);
--tk-control-primary-state-hover-main-content: var(--ui-other-black, #000000);
--tk-control-primary-state-hover-main-fill: var(--br-primary-400, #8b84fc);
--tk-control-primary-state-hover-translucent-fill: var(--br-primary-300-opacity-10, #b2b0fd1a);
--tk-control-primary-subtle-content: var(--br-primary-300, #b2b0fd);
--tk-control-primary-subtle-fill: var(--br-primary-1000, #190f6c);
--tk-control-primary-subtle-outline: var(--br-primary-700, #432ae7);
--tk-control-secondary-filled-content: var(--ui-other-black, #000000);
--tk-control-secondary-filled-fill: var(--br-secondary-400, #30e6c1);
--tk-control-secondary-ghost-content: var(--br-secondary-300, #58f9d5);
--tk-control-secondary-outlined-content: var(--br-secondary-300, #58f9d5);
--tk-control-secondary-outlined-outline: var(--br-secondary-300, #58f9d5);
--tk-control-secondary-state-active-outline: #ffffff;
--tk-control-secondary-state-active-alt-content: var(--ui-other-white, #ffffff);
--tk-control-secondary-state-active-alt-fill: var(--br-secondary-1100, #033430);
--tk-control-secondary-state-active-main-content: var(--ui-other-black, #000000);
--tk-control-secondary-state-active-main-fill: var(--br-secondary-600, #18a48b);
--tk-control-secondary-state-active-translucent-fill: var(--br-secondary-400-opacity-20, #30e6c133);
--tk-control-secondary-state-hover-alt-content: var(--ui-other-white, #ffffff);
--tk-control-secondary-state-hover-alt-fill: var(--br-secondary-900, #11554c);
--tk-control-secondary-state-hover-main-content: var(--ui-other-black, #000000);
--tk-control-secondary-state-hover-main-fill: var(--br-secondary-500, #1ebd9e);
--tk-control-secondary-state-hover-translucent-fill: var(--br-secondary-400-opacity-10, #30e6c11a);
--tk-control-secondary-subtle-content: var(--br-secondary-300, #58f9d5);
--tk-control-secondary-subtle-fill: var(--br-secondary-1100, #033430);
--tk-control-secondary-subtle-outline: var(--br-secondary-800, #11675b);
--tk-control-success-filled-content: var(--ui-other-black, #000000);
--tk-control-success-filled-fill: var(--ui-success-500, #00c16a);
--tk-control-success-ghost-content: var(--ui-success-400, #00dc82);
--tk-control-success-outlined-content: var(--ui-success-400, #00dc82);
--tk-control-success-outlined-outline: var(--ui-success-400, #00dc82);
--tk-control-success-state-active-outline: #ffffff;
--tk-control-success-state-active-alt-content: var(--ui-other-white, #ffffff);
--tk-control-success-state-active-alt-fill: var(--ui-success-900, #0a5331);
--tk-control-success-state-active-main-content: var(--ui-other-black, #000000);
--tk-control-success-state-active-main-fill: var(--ui-success-700, #007f45);
--tk-control-success-state-active-translucent-fill: var(--ui-success-300-opacity-20, #75edae33);
--tk-control-success-state-hover-alt-content: var(--ui-other-white, #ffffff);
--tk-control-success-state-hover-alt-fill: var(--ui-success-800, #016538);
--tk-control-success-state-hover-main-content: var(--ui-other-black, #000000);
--tk-control-success-state-hover-main-fill: var(--ui-success-600, #009951);
--tk-control-success-state-hover-translucent-fill: var(--ui-success-300-opacity-10, #75edae1a);
--tk-control-success-subtle-content: var(--ui-success-400, #00dc82);
--tk-control-success-subtle-fill: var(--ui-success-1000, #052e16);
--tk-control-success-subtle-outline: var(--ui-success-800, #016538);
--tk-control-tertiary-filled-content: var(--ui-other-black, #000000);
--tk-control-tertiary-filled-fill: var(--br-tertiary-500, #c1d92e);
--tk-control-tertiary-ghost-content: var(--br-tertiary-200, #f7fe9b);
--tk-control-tertiary-outlined-content: var(--br-tertiary-200, #f7fe9b);
--tk-control-tertiary-outlined-outline: var(--br-tertiary-200, #f7fe9b);
--tk-control-tertiary-state-active-outline: #ffffff;
--tk-control-tertiary-state-active-alt-content: var(--ui-other-white, #ffffff);
--tk-control-tertiary-state-active-alt-fill: var(--br-tertiary-900, #4a5716);
--tk-control-tertiary-state-active-main-content: var(--ui-other-black, #000000);
--tk-control-tertiary-state-active-main-fill: var(--br-tertiary-700, #71841a);
--tk-control-tertiary-state-active-translucent-fill: var(--br-tertiary-300-opacity-20, #f1ff6633);
--tk-control-tertiary-state-hover-alt-content: var(--ui-other-white, #ffffff);
--tk-control-tertiary-state-hover-alt-fill: var(--br-tertiary-800, #5a6816);
--tk-control-tertiary-state-hover-main-content: var(--ui-other-black, #000000);
--tk-control-tertiary-state-hover-main-fill: var(--br-tertiary-600, #97af21);
--tk-control-tertiary-state-hover-translucent-fill: var(--br-tertiary-300-opacity-10, #f1ff661a);
--tk-control-tertiary-subtle-content: var(--br-tertiary-200, #f7fe9b);
--tk-control-tertiary-subtle-fill: var(--br-tertiary-1100, #273105);
--tk-control-tertiary-subtle-outline: var(--br-tertiary-800, #5a6816);
--tk-control-warning-filled-content: var(--ui-other-black, #000000);
--tk-control-warning-filled-fill: var(--ui-warning-500, #f57a00);
--tk-control-warning-ghost-content: var(--ui-warning-300, #ffb96a);
--tk-control-warning-outlined-content: var(--ui-warning-300, #ffb96a);
--tk-control-warning-outlined-outline: var(--ui-warning-400, #ff931f);
--tk-control-warning-state-active-outline: #ffffff;
--tk-control-warning-state-active-alt-content: var(--ui-other-white, #ffffff);
--tk-control-warning-state-active-alt-fill: var(--ui-warning-1000, #442006);
--tk-control-warning-state-active-main-content: var(--ui-other-black, #000000);
--tk-control-warning-state-active-main-fill: var(--ui-warning-700, #b55400);
--tk-control-warning-state-active-translucent-fill: var(--ui-warning-300-opacity-20, #ffb96a33);
--tk-control-warning-state-hover-alt-content: var(--ui-other-white, #ffffff);
--tk-control-warning-state-hover-alt-fill: var(--ui-warning-900, #73380b);
--tk-control-warning-state-hover-main-content: var(--ui-other-black, #000000);
--tk-control-warning-state-hover-main-fill: var(--ui-warning-600, #cc6300);
--tk-control-warning-state-hover-translucent-fill: var(--ui-warning-300-opacity-10, #ffb96a1a);
--tk-control-warning-subtle-content: var(--ui-warning-300, #ffb96a);
--tk-control-warning-subtle-fill: var(--ui-warning-1000, #442006);
--tk-control-warning-subtle-outline: var(--ui-warning-800, #9e4700);
--tk-danger-accent: var(--ui-danger-1000, #460809);
--tk-danger-base: var(--ui-danger-300, #ffa2a2);
--tk-danger-muted: var(--ui-danger-700, #c10007);
--tk-danger-strong: var(--ui-danger-100, #ffe2e2);
--tk-danger-subtle: var(--ui-danger-900, #82181a);
--tk-danger-toned: var(--ui-danger-500, #fb2c36);
--tk-info-accent: var(--tk-primary-accent, #140e47);
--tk-info-base: var(--tk-primary-base, #8b84fc);
--tk-info-muted: var(--tk-primary-muted, #3822c2);
--tk-info-strong: var(--tk-primary-strong, #b2b0fd);
--tk-info-subtle: var(--tk-primary-subtle, #190f6c);
--tk-info-toned: var(--tk-primary-toned, #6147fb);
--tk-ink-contrast-muted: var(--br-neutral-600, #949091);
--tk-ink-contrast-primary: var(--br-neutral-1000, #262223);
--tk-ink-contrast-secondary: var(--br-neutral-800, #545051);
--tk-ink-contrast-toned: var(--br-neutral-700, #757172);
--tk-ink-main-muted: var(--br-neutral-700, #757172);
--tk-ink-main-primary: var(--br-neutral-100, #f5f5f2);
--tk-ink-main-secondary: var(--br-neutral-500, #b3b1b2);
--tk-ink-main-toned: var(--br-neutral-600, #949091);
--tk-ink-other-accent: var(--br-primary-400, #8b84fc);
--tk-ink-other-danger: var(--ui-danger-500, #fb2c36);
--tk-ink-other-highlight: var(--br-primary-200, #d2d3fe);
--tk-ink-other-info: var(--ui-info-400, #8b84fc);
--tk-ink-other-link: var(--ui-info-400, #8b84fc);
--tk-ink-other-success: var(--ui-success-500, #00c16a);
--tk-ink-other-warning: var(--ui-warning-400, #ff931f);
--tk-other-graph-10: var(--br-primary-900-opacity-10, #2f1c9e1a);
--tk-other-graph-100: var(--br-primary-700, #432ae7);
--tk-other-graph-20: var(--br-primary-900-opacity-20, #2f1c9e33);
--tk-other-graph-30: var(--br-primary-900-opacity-30, #2f1c9e4d);
--tk-other-graph-40: var(--br-primary-900-opacity-40, #2f1c9e66);
--tk-other-graph-50: var(--br-primary-900-opacity-50, #2f1c9e80);
--tk-other-graph-60: var(--br-primary-900-opacity-60, #2f1c9e99);
--tk-other-graph-70: var(--br-primary-900-opacity-70, #2f1c9eb2);
--tk-other-graph-80: var(--br-primary-900-opacity-80, #2f1c9ecc);
--tk-other-graph-90: var(--br-primary-900-opacity-90, #2f1c9ee5);
--tk-other-logo-dark: var(--br-logo-color-dark, #262223);
--tk-other-logo-light: var(--br-logo-color-light, #fffcf3);
--tk-other-logo-mono-dark: var(--br-logo-mono-dark, #262223);
--tk-other-logo-mono-light: var(--br-logo-mono-light, #fffcf3);
--tk-other-logo-mono-theme: var(--br-logo-mono-light, #fffcf3);
--tk-other-logo-theme: var(--br-logo-color-light, #fffcf3);
--tk-primary-accent: var(--br-primary-1100, #140e47);
--tk-primary-base: var(--br-primary-400, #8b84fc);
--tk-primary-muted: var(--br-primary-800, #3822c2);
--tk-primary-strong: var(--br-primary-300, #b2b0fd);
--tk-primary-subtle: var(--br-primary-1000, #190f6c);
--tk-primary-toned: var(--br-primary-600, #6147fb);
--tk-secondary-accent: var(--br-secondary-1100, #033430);
--tk-secondary-base: var(--br-secondary-300, #58f9d5);
--tk-secondary-muted: var(--br-secondary-700, #138270);
--tk-secondary-strong: var(--br-secondary-100, #c9fff1);
--tk-secondary-subtle: var(--br-secondary-900, #11554c);
--tk-secondary-toned: var(--br-secondary-500, #1ebd9e);
--tk-success-accent: var(--ui-success-1000, #052e16);
--tk-success-base: var(--ui-success-300, #75edae);
--tk-success-muted: var(--ui-success-700, #007f45);
--tk-success-strong: var(--ui-success-100, #cffae2);
--tk-success-subtle: var(--ui-success-900, #0a5331);
--tk-success-toned: var(--ui-success-500, #00c16a);
--tk-surface-accent: var(--br-secondary-1100, #033430);
--tk-surface-base: var(--br-neutral-1100, #1f1b1c);
--tk-surface-elevated: var(--br-neutral-1000, #262223);
--tk-surface-highlight-1: var(--br-primary-1000, #190f6c);
--tk-surface-highlight-2: var(--br-primary-900, #2f1c9e);
--tk-surface-muted: var(--br-neutral-800, #545051);
--tk-surface-overlay-1: var(--br-neutral-1100-opacity-40, #1f1b1c66);
--tk-surface-overlay-2: var(--br-neutral-1100-opacity-60, #1f1b1c99);
--tk-surface-selection: var(--br-primary-1100, #140e47);
--tk-surface-strong: var(--br-neutral-100, #f5f5f2);
--tk-surface-toned: var(--br-neutral-900, #3d393a);
--tk-surface-underline-1: var(--br-primary-800, #3822c2);
--tk-surface-underline-2: var(--br-primary-800, #3822c2);
--tk-surface-base-opacity-0: var(--br-neutral-1100-opacity-0, #1f1b1c00);
--tk-surface-elevated-opacity-0: var(--br-neutral-1000-opacity-0, #26222300);
--tk-tertiary-accent: var(--br-tertiary-1100, #273105);
--tk-tertiary-base: var(--br-tertiary-300, #f1ff66);
--tk-tertiary-muted: var(--br-tertiary-700, #71841a);
--tk-tertiary-strong: var(--br-tertiary-100, #fcfeca);
--tk-tertiary-subtle: var(--br-tertiary-900, #4a5716);
--tk-tertiary-toned: var(--br-tertiary-500, #c1d92e);
--tk-warning-accent: var(--ui-warning-1000, #442006);
--tk-warning-base: var(--ui-warning-300, #ffb96a);
--tk-warning-muted: var(--ui-warning-700, #b55400);
--tk-warning-strong: var(--ui-warning-100, #ffecd4);
--tk-warning-subtle: var(--ui-warning-900, #73380b);
--tk-warning-toned: var(--ui-warning-500, #f57a00);
--logo-color: #ffffff;
--scanner-layer-1: #1E3DAE;
--scanner-layer-2: #2349CD;
--scanner-layer-3: #506FD9;
--scanner-layer-4: #7D94E4;
--scanner-layer-5: #A5B5EB;
}
@font-face {
font-family: "Host Grotesk";
src: url("/assets/Host_Grotesk/static/HostGrotesk-Regular-75907cd3.woff2") format("woff2");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "Host Grotesk";
src: url("/assets/Host_Grotesk/static/HostGrotesk-Medium-93063708.woff2") format("woff2");
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: "Host Grotesk";
src: url("/assets/Host_Grotesk/static/HostGrotesk-SemiBold-61c44430.woff2") format("woff2");
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: "Host Grotesk";
src: url("/assets/Host_Grotesk/static/HostGrotesk-Bold-38cad68f.woff2") format("woff2");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "Host Grotesk";
src: url("/assets/Host_Grotesk/static/HostGrotesk-ExtraBold-95217622.woff2") format("woff2");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: "DM Sans";
src: url("/assets/DM_Sans/static/DMSans-Regular-97070946.woff2") format("woff2");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "DM Sans";
src: url("/assets/DM_Sans/static/DMSans-Medium-f01c69b7.woff2") format("woff2");
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: "DM Sans";
src: url("/assets/DM_Sans/static/DMSans-SemiBold-b91249f5.woff2") format("woff2");
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: "DM Sans";
src: url("/assets/DM_Sans/static/DMSans-Bold-e93c74f0.woff2") format("woff2");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "DM Sans";
src: url("/assets/DM_Sans/static/DMSans-Black-91415b37.woff2") format("woff2");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: "Fragment Mono";
src: url("/assets/Fragment_Mono/FragmentMono-Regular-cee7e6e9.woff2") format("woff2");
font-weight: 300, 400, 500;
font-style: normal;
}
.custom-dd-html .custom-dd-body h1, .custom-dd-html .custom-dd-body h2, .custom-dd-html .custom-dd-body h3, .custom-dd-html .custom-dd-body h4, .custom-dd-html .custom-dd-body h5, .custom-dd-html .custom-dd-body h6 {
color: inherit;
}
.custom-dd-html .custom-dd-body .h8-text, .custom-dd-html .custom-dd-body .h7-text, .custom-dd-html .custom-dd-body .h6-text, .custom-dd-html .custom-dd-body h6, .custom-dd-html .custom-dd-body .h5-text, .custom-dd-html .custom-dd-body h5, .custom-dd-html .custom-dd-body .h4-text, .custom-dd-html .custom-dd-body h4, .custom-dd-html .custom-dd-body .h3-text, .custom-dd-html .custom-dd-body h3, .custom-dd-html .custom-dd-body .h2-text, .custom-dd-html .custom-dd-body h2, .custom-dd-html .custom-dd-body .h1-text, .custom-dd-html .custom-dd-body h1 {
color: var(--tk-ink-main-primary, #262223);
font-style: normal;
}
.custom-dd-html .custom-dd-body .h1-text, .custom-dd-html .custom-dd-body h1 {
font-size: var(--tg-styles-heading-h1-size, 10rem);
font-weight: var(--tg-styles-heading-h1-w, 500);
line-height: 1em; /* 100% */
letter-spacing: -0.02em;
}
.custom-dd-html .custom-dd-body .h2-text, .custom-dd-html .custom-dd-body h2 {
font-size: var(--tg-styles-heading-h2-size, 7.6rem);
font-weight: var(--tg-styles-heading-h2-w, 500);
line-height: 1.05em; /* 105.263% */
letter-spacing: -0.02em;
}
.custom-dd-html .custom-dd-body .h3-text, .custom-dd-html .custom-dd-body h3 {
font-size: var(--tg-styles-heading-h3-size, 5.6rem);
font-weight: var(--tg-styles-heading-h3-w, 500);
line-height: 1.07em; /* 107.143% */
letter-spacing: -0.01em;
}
.custom-dd-html .custom-dd-body .h4-text, .custom-dd-html .custom-dd-body h4 {
font-size: var(--tg-styles-heading-h4-size, 4.2rem);
font-weight: var(--tg-styles-heading-h4-w, 500);
line-height: 1.14em; /* 114.286% */
letter-spacing: -0.01em;
}
.custom-dd-html .custom-dd-body .h5-text, .custom-dd-html .custom-dd-body h5 {
font-size: var(--tg-styles-heading-h5-size, 3.2rem);
font-weight: var(--tg-styles-heading-h5-w, 500);
line-height: 1.1em; /* 110% */
letter-spacing: -0.01em;
}
.custom-dd-html .custom-dd-body .h6-text, .custom-dd-html .custom-dd-body h6 {
font-size: var(--tg-styles-heading-h6-size, 2.4rem);
font-weight: var(--tg-styles-heading-h6-w, 600);
line-height: 1.33em; /* 133.333% */
letter-spacing: 0em;
}
.custom-dd-html .custom-dd-body .h7-text {
font-size: var(--tg-styles-heading-h7-size, 2rem);
font-weight: var(--tg-styles-heading-h7-w, 600);
line-height: 1.2em; /* 120% */
letter-spacing: 0.01em;
}
.custom-dd-html .custom-dd-body .h8-text {
font-size: var(--tg-styles-heading-h8-size, 1.8rem);
font-weight: var(--tg-styles-heading-h8-w, 600);
line-height: 1.22em; /* 122.222% */
letter-spacing: 0.02em;
}
.custom-dd-body .u-view.u-view--results .sanction-header-wrap .sanction-header, .custom-dd-body .tabs-container .tab, .custom-dd-body #bullet-footer, .custom-dd-body .fav-container .includes .filters-container .filters-wrap .open-close-link, .custom-dd-body .fav-container .includes .filters-container .filters-content .single-filter, .custom-dd-body label,
.custom-dd-body .label, .custom-dd-body .input-field .err-container,
.custom-dd-body .field-unit .err-container, .custom-dd-body .input-field .support-container,
.custom-dd-body .field-unit .support-container, .custom-dd-body .field-unit__field[data-controller=collapsible-locales] > div label, .custom-dd-html .custom-dd-body .body-xs-text, .custom-dd-body .flash-error, .custom-dd-body .single-body .custom-section-card .h7-text span:not(.translation_missing), .custom-dd-body .global-search-component .content-part .result-container .results-in .result-group, .custom-dd-body .main-content__header .search .input-container input.search__input,
.custom-dd-body .search-form-container .search .input-container input.search__input, .custom-dd-body .custom-pagination, .custom-dd-body table, .custom-dd-html .custom-dd-body .body-s-text, .custom-dd-body label.checkbox-label,
.custom-dd-body .label.checkbox-label, .custom-dd-html .custom-dd-body .body-m-text, .custom-dd-html .custom-dd-body .body-l-text, .custom-dd-html .custom-dd-body .body-xl-text {
color: var(--tk-ink-main-primary, #262223);
font-style: normal;
font-weight: var(--tg-styles-body-xl-w, 400);
}
.custom-dd-body .u-view.u-view--results .sanction-header-wrap .sanction-header strong, .custom-dd-body .tabs-container .tab strong, .custom-dd-body #bullet-footer strong, .custom-dd-body .fav-container .includes .filters-container .filters-wrap .open-close-link strong, .custom-dd-body .fav-container .includes .filters-container .filters-content .single-filter strong, .custom-dd-body label strong,
.custom-dd-body .label strong, .custom-dd-body .input-field .err-container strong,
.custom-dd-body .field-unit .err-container strong, .custom-dd-body .input-field .support-container strong,
.custom-dd-body .field-unit .support-container strong, .custom-dd-body .field-unit__field[data-controller=collapsible-locales] > div label strong, .custom-dd-html .custom-dd-body .body-xs-text strong, .custom-dd-body .flash-error strong, .custom-dd-body .single-body .custom-section-card .h7-text span:not(.translation_missing) strong, .custom-dd-body .global-search-component .content-part .result-container .results-in .result-group strong, .custom-dd-body .main-content__header .search .input-container input.search__input strong,
.custom-dd-body .search-form-container .search .input-container input.search__input strong, .custom-dd-body .custom-pagination strong, .custom-dd-body table strong, .custom-dd-html .custom-dd-body .body-s-text strong, .custom-dd-body label.checkbox-label strong, .custom-dd-html .custom-dd-body .body-m-text strong, .custom-dd-html .custom-dd-body .body-l-text strong, .custom-dd-html .custom-dd-body .body-xl-text strong {
font-weight: 700;
}
.custom-dd-body .u-view.u-view--results .sanction-header-wrap .sanction-header a:not(.button, .row-action-btn, .popup-link, .action-chip), .custom-dd-body .tabs-container .tab a:not(.button, .row-action-btn, .popup-link, .action-chip), .custom-dd-body #bullet-footer a:not(.button, .row-action-btn, .popup-link, .action-chip), .custom-dd-body .fav-container .includes .filters-container .filters-wrap .open-close-link a:not(.button, .row-action-btn, .popup-link, .action-chip), .custom-dd-body .fav-container .includes .filters-container .filters-content .single-filter a:not(.button, .row-action-btn, .popup-link, .action-chip), .custom-dd-body label a:not(.button, .row-action-btn, .popup-link, .action-chip),
.custom-dd-body .label a:not(.button, .row-action-btn, .popup-link, .action-chip), .custom-dd-body .input-field .err-container a:not(.button, .row-action-btn, .popup-link, .action-chip),
.custom-dd-body .field-unit .err-container a:not(.button, .row-action-btn, .popup-link, .action-chip), .custom-dd-body .input-field .support-container a:not(.button, .row-action-btn, .popup-link, .action-chip),
.custom-dd-body .field-unit .support-container a:not(.button, .row-action-btn, .popup-link, .action-chip), .custom-dd-body .field-unit__field[data-controller=collapsible-locales] > div label a:not(.button, .row-action-btn, .popup-link, .action-chip), .custom-dd-html .custom-dd-body .body-xs-text a:not(.button, .row-action-btn, .popup-link, .action-chip), .custom-dd-body .flash-error a:not(.button, .row-action-btn, .popup-link, .action-chip), .custom-dd-body .single-body .custom-section-card .h7-text span:not(.translation_missing) a:not(.button, .row-action-btn, .popup-link, .action-chip), .custom-dd-body .global-search-component .content-part .result-container .results-in .result-group a:not(.button, .row-action-btn, .popup-link, .action-chip), .custom-dd-body .main-content__header .search .input-container input.search__input a:not(.button, .row-action-btn, .popup-link, .action-chip),
.custom-dd-body .search-form-container .search .input-container input.search__input a:not(.button, .row-action-btn, .popup-link, .action-chip), .custom-dd-body .custom-pagination a:not(.button, .row-action-btn, .popup-link, .action-chip), .custom-dd-body table a:not(.button, .row-action-btn, .popup-link, .action-chip), .custom-dd-html .custom-dd-body .body-s-text a:not(.button, .row-action-btn, .popup-link, .action-chip), .custom-dd-html .custom-dd-body .body-m-text a:not(.button, .row-action-btn, .popup-link, .action-chip), .custom-dd-html .custom-dd-body .body-l-text a:not(.button, .row-action-btn, .popup-link, .action-chip), .custom-dd-html .custom-dd-body .body-xl-text a:not(.button, .row-action-btn, .popup-link, .action-chip) {
-webkit-transition: var(--def-trans-prop) var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
transition: var(--def-trans-prop) var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
color: var(--br-primary-1000);
text-decoration: underline;
line-break: auto;
word-break: break-word;
}
@media (min-width: 1025px) {
.custom-dd-body .u-view.u-view--results .sanction-header-wrap .sanction-header a:not(.button, .row-action-btn, .popup-link, .action-chip):hover, .custom-dd-body .tabs-container .tab a:not(.button, .row-action-btn, .popup-link, .action-chip):hover, .custom-dd-body #bullet-footer a:not(.button, .row-action-btn, .popup-link, .action-chip):hover, .custom-dd-body .fav-container .includes .filters-container .filters-wrap .open-close-link a:not(.button, .row-action-btn, .popup-link, .action-chip):hover, .custom-dd-body .fav-container .includes .filters-container .filters-content .single-filter a:not(.button, .row-action-btn, .popup-link, .action-chip):hover, .custom-dd-body label a:not(.button, .row-action-btn, .popup-link, .action-chip):hover,
.custom-dd-body .label a:not(.button, .row-action-btn, .popup-link, .action-chip):hover, .custom-dd-body .input-field .err-container a:not(.button, .row-action-btn, .popup-link, .action-chip):hover,
.custom-dd-body .field-unit .err-container a:not(.button, .row-action-btn, .popup-link, .action-chip):hover, .custom-dd-body .input-field .support-container a:not(.button, .row-action-btn, .popup-link, .action-chip):hover,
.custom-dd-body .field-unit .support-container a:not(.button, .row-action-btn, .popup-link, .action-chip):hover, .custom-dd-html .custom-dd-body .body-xs-text a:not(.button, .row-action-btn, .popup-link, .action-chip):hover, .custom-dd-body .flash-error a:not(.button, .row-action-btn, .popup-link, .action-chip):hover, .custom-dd-body .single-body .custom-section-card .h7-text span:not(.translation_missing) a:not(.button, .row-action-btn, .popup-link, .action-chip):hover, .custom-dd-body .global-search-component .content-part .result-container .results-in .result-group a:not(.button, .row-action-btn, .popup-link, .action-chip):hover, .custom-dd-body .main-content__header .search .input-container input.search__input a:not(.button, .row-action-btn, .popup-link, .action-chip):hover,
.custom-dd-body .search-form-container .search .input-container input.search__input a:not(.button, .row-action-btn, .popup-link, .action-chip):hover, .custom-dd-body .custom-pagination a:not(.button, .row-action-btn, .popup-link, .action-chip):hover, .custom-dd-body table a:not(.button, .row-action-btn, .popup-link, .action-chip):hover, .custom-dd-html .custom-dd-body .body-s-text a:not(.button, .row-action-btn, .popup-link, .action-chip):hover, .custom-dd-html .custom-dd-body .body-m-text a:not(.button, .row-action-btn, .popup-link, .action-chip):hover, .custom-dd-html .custom-dd-body .body-l-text a:not(.button, .row-action-btn, .popup-link, .action-chip):hover, .custom-dd-html .custom-dd-body .body-xl-text a:not(.button, .row-action-btn, .popup-link, .action-chip):hover {
opacity: 0.7;
color: var(--br-primary-500);
}
}
.custom-dd-html .custom-dd-body .body-xl-text {
font-size: var(--tg-styles-body-xl-size, 2.4rem);
font-style: normal;
font-weight: var(--tg-styles-body-xl-w, 400);
line-height: var(--tg-styles-body-xl-lh, 3.6rem); /* 150% */
letter-spacing: var(--tg-styles-body-xl-ls, 0.048rem);
}
.custom-dd-html .custom-dd-body .body-l-text {
font-size: var(--tg-styles-body-l-size, 2rem);
font-weight: var(--tg-styles-body-l-w, 400);
line-height: var(--tg-styles-body-l-lh, 3rem); /* 150% */
letter-spacing: var(--tg-styles-body-l-ls, 0.04rem);
}
.custom-dd-body label.checkbox-label,
.custom-dd-body .label.checkbox-label, .custom-dd-html .custom-dd-body .body-m-text {
font-size: var(--tg-styles-body-m-size, 1.8rem);
font-weight: var(--tg-styles-body-m-w, 400);
line-height: var(--tg-styles-body-m-lh, 2.8rem); /* 155.556% */
letter-spacing: var(--tg-styles-body-m-ls, 0.036rem);
}
.custom-dd-body .flash-error, .custom-dd-body .single-body .custom-section-card .h7-text span:not(.translation_missing), .custom-dd-body .global-search-component .content-part .result-container .results-in .result-group, .custom-dd-body .main-content__header .search .input-container input.search__input,
.custom-dd-body .search-form-container .search .input-container input.search__input, .custom-dd-body .custom-pagination, .custom-dd-body table, .custom-dd-html .custom-dd-body .body-s-text {
font-size: var(--tg-styles-body-s-size, 1.6rem);
font-weight: var(--tg-styles-body-s-w, 400);
line-height: var(--tg-styles-body-s-lh, 2.4rem); /* 150% */
letter-spacing: var(--tg-styles-body-s-ls, 0.032rem);
}
.custom-dd-body .u-view.u-view--results .sanction-header-wrap .sanction-header, .custom-dd-body .tabs-container .tab, .custom-dd-body #bullet-footer, .custom-dd-body .fav-container .includes .filters-container .filters-wrap .open-close-link, .custom-dd-body .fav-container .includes .filters-container .filters-content .single-filter, .custom-dd-body label,
.custom-dd-body .label, .custom-dd-body .input-field .err-container,
.custom-dd-body .field-unit .err-container, .custom-dd-body .input-field .support-container,
.custom-dd-body .field-unit .support-container, .custom-dd-body .field-unit__field[data-controller=collapsible-locales] > div label, .custom-dd-html .custom-dd-body .body-xs-text {
font-size: var(--tg-styles-body-xs-size, 1.4rem);
font-weight: var(--tg-styles-body-xs-w, 400);
line-height: var(--tg-styles-body-xs-lh, 2.2rem); /* 157.143% */
letter-spacing: var(--tg-styles-body-xs-ls, 0.028rem);
}
.custom-dd-html .custom-dd-body .menulink, .custom-dd-html .custom-dd-body .navlink {
color: var(--tk-ink-main-primary, #262223);
font-size: var(--tg-styles-body-xs-size, 1.4rem);
font-style: normal;
font-weight: var(--tg-styles-body-xs-w, 400);
line-height: var(--tg-styles-body-xs-lh, 2.2rem); /* 157.143% */
letter-spacing: var(--tg-styles-body-xs-ls, 0.028rem);
}
.custom-dd-body .global-search-open-button, .custom-dd-body nav.navigation-version2 .navigation-section a, .custom-dd-body nav.navigation-version2 .header-controls a,
.custom-dd-body nav.navigation-version2 .header-controls .nav-footer-link, .custom-dd-body nav.navigation .navigation-section a, .custom-dd-body nav.navigation .header-controls a,
.custom-dd-body nav.navigation .header-controls .nav-footer-link, .custom-dd-body .user-profile-wrapper {
color: var(--tk-ink-main-primary, #262223);
font-size: var(--tg-styles-navlink-size, 1.6rem);
font-style: normal;
font-weight: var(--tg-styles-body-xs-w, 400);
line-height: var(--tg-styles-navlink-lh, 2.4rem);
letter-spacing: var(--tg-styles-navlink-ls, 0);
}
.custom-dd-body .global-search-component .content-part .result-container .results-in .result-group .category, .custom-dd-html .custom-dd-body .overline-text {
color: var(--tk-ink-main-primary, #262223);
font-size: var(--tg-styles-overline-size, 1.4rem);
font-style: normal;
font-weight: 500;
line-height: var(--tg-styles-overline-lh, 2.4rem); /* 171.429% */
letter-spacing: var(--tg-styles-overline-ls, 0.212rem);
text-transform: uppercase;
}
.custom-dd-html .custom-dd-body .button-base-text, .custom-dd-html .custom-dd-body .button-m-text, .custom-dd-body .add-progress-container, .custom-dd-html .custom-dd-body .button-xs-text, .custom-dd-html .custom-dd-body .button-s-text {
color: var(--tk-ink-main-primary, #262223);
font-size: var(--tg-styles-button-m-size, 1.8rem);
font-style: normal;
font-weight: var(--tg-styles-button-m-w, 500);
line-height: var(--tg-styles-button-m-lh, 2.4rem); /* 133.333% */
letter-spacing: var(--tg-styles-button-m-ls, 0.036rem);
}
.custom-dd-html .custom-dd-body .button-s-text {
font-size: var(--tg-styles-button-s-size, 1.6rem);
letter-spacing: var(--tg-styles-button-s-ls, 0.032rem);
}
.custom-dd-body .add-progress-container, .custom-dd-html .custom-dd-body .button-xs-text {
font-size: var(--tg-styles-button-xs-size, 1.4rem);
letter-spacing: var(--tg-styles-button-xs-ls, 0.028rem);
}
.custom-dd-body .context-button .btn-badge, .custom-dd-body .toggle-button .btn-badge, .custom-dd-html .custom-dd-body .badge-text {
color: var(--tk-ink-main-primary, #262223);
font-size: var(--tg-styles-badge-s-size, 1.4rem);
font-style: normal;
font-weight: 700;
line-height: var(--tg-styles-badge-s-lh, 2.4rem); /* 171.429% */
letter-spacing: var(--tg-styles-badge-s-ls, 0.048rem);
}
.custom-dd-html .custom-dd-body .avatar-text {
color: var(--tk-ink-main-primary, #262223);
font-size: var(--tg-styles-avatar-size, 1.2rem);
font-style: normal;
font-weight: var(--tg-styles-avatar-w, 500);
line-height: var(--tg-styles-avatar-lh, 1.6rem); /* 133.333% */
letter-spacing: var(--tg-styles-avatar-ls, 0.048rem);
}
.custom-dd-body .global-search-component .content-part .result-container .buttons-info .buttons-wrap-label, .custom-dd-html .custom-dd-body .keys-text {
color: var(--tk-ink-main-primary, #262223);
font-size: var(--tg-styles-key-size, 1.8rem);
font-style: normal;
font-weight: var(--tg-styles-body-l-w, 400);
line-height: var(--tg-styles-key-lh, 1.8rem); /* 100% */
letter-spacing: var(--tg-styles-key-ls, 0.038rem);
}
.custom-dd-html .custom-dd-body span[style*="text-decoration:"], .custom-dd-html .custom-dd-body span.underline-decoration {
text-decoration: none !important;
white-space: nowrap;
position: relative;
z-index: 1;
}
.custom-dd-html .custom-dd-body span[style*="text-decoration:"]::after, .custom-dd-html .custom-dd-body span.underline-decoration::after {
content: "";
position: absolute;
background: var(--tk-surface-highlight-2);
height: 0.5em;
width: calc(100% + 0.3em);
left: -0.15em;
bottom: 0;
z-index: -1;
}
html.border-radius.custom-dd-html .custom-dd-body span[style*="text-decoration:"]::after, html.border-radius.custom-dd-html .custom-dd-body span.underline-decoration::after {
border-radius: var(--nb-common-radius-layout, 12px);
}
html.custom-dd-html {
font-size: 10px;
background-color: var(--tk-surface-base);
min-width: 1023px;
}
html.custom-dd-html * {
scrollbar-color: var(--br-neutral-300) transparent;
scrollbar-width: thin;
}
html.custom-dd-html ::-webkit-scrollbar {
width: 1rem;
}
html.custom-dd-html ::-webkit-scrollbar-track {
background: transparent;
}
html.custom-dd-html ::-webkit-scrollbar-thumb {
background-color: var(--br-neutral-300);
border-radius: 1rem;
border: 0.2rem solid #f1f1f1;
}
body.custom-dd-body {
margin: 0;
background-color: var(--tk-surface-base);
-moz-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent;
color: var(--tk-ink-main-primary, #262223);
font-family: var(--font-main);
font-size: var(--tg-styles-body-s-size, 1.6rem);
font-style: normal;
font-weight: var(--tg-styles-body-s-w, 400);
line-height: var(--tg-styles-body-s-lh, 2.4rem);
/* 150% */
letter-spacing: var(--tg-styles-body-s-ls, 0.032rem);
padding-top: var(--main-content-side-top);
}
body.custom-dd-body .content-global {
max-height: calc(100vh - (var(--main-content-side-top) + var(--breadcrumbs-height) + 1px));
height: calc(100vh - (var(--main-content-side-top) + var(--breadcrumbs-height) + 1px));
overflow-x: auto;
scrollbar-gutter: stable;
margin-right: -1.9rem;
padding-right: 0.8rem;
padding-bottom: var(--main-content-side-bottom);
position: relative;
scroll-behavior: smooth;
}
@media (max-width: 1220px) {
body.custom-dd-body .content-global {
margin-right: -2.2rem;
}
}
body.custom-dd-body .content-global .main-content__header__body {
padding-left: var(--main-content-side-left);
padding-right: var(--main-content-side-right);
padding-top: var(--main-content-in-top);
padding-bottom: var(--main-content-in-bottom);
}
*,
.custom-dd-body * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font-family: var(--font-main);
}
.custom-dd-body .container, body.custom-dd-body {
margin-left: auto;
margin-right: auto;
display: block;
width: 100%;
max-width: var(--container-w);
padding-left: var(--container-padd);
padding-right: var(--container-padd);
}
.custom-dd-body .no-padd-l-r.container, body.no-padd-l-r.custom-dd-body {
padding-left: 0;
padding-right: 0;
}
.custom-dd-body .no-max-width.container, body.no-max-width.custom-dd-body {
max-width: none;
}
.custom-dd-body .container-in {
padding-left: var(--container-padd-in);
padding-right: var(--container-padd-in);
}
.custom-dd-body a {
color: inherit;
outline: none;
cursor: pointer !important;
text-decoration: none;
-webkit-transition: var(--def-trans-prop) var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
transition: var(--def-trans-prop) var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
}
.custom-dd-body a img {
border: none;
}
.custom-dd-body h1,
.custom-dd-body h2,
.custom-dd-body h3,
.custom-dd-body h4,
.custom-dd-body h5,
.custom-dd-body h6,
.custom-dd-body p,
.custom-dd-body ul,
.custom-dd-body ol {
margin: 0;
}
.custom-dd-body ol,
.custom-dd-body ul {
padding: 1.1em 0 1.2em 1.3em;
}
.custom-dd-body svg,
.custom-dd-body img:not(.x2) {
max-width: 100%;
width: auto;
height: auto;
}
.custom-dd-body .d-table {
display: table;
width: 100%;
height: 100%;
table-layout: fixed;
border-collapse: collapse;
}
.custom-dd-body .d-table > * {
display: table-cell;
vertical-align: middle;
}
.custom-dd-body .clr {
clear: both !important;
float: none !important;
display: block !important;
width: auto !important;
height: auto !important;
padding: 0 !important;
margin: 0 !important;
}
.custom-dd-body main {
display: block;
}
.custom-dd-body iframe {
max-width: 100%;
}
.custom-dd-body [hidden] {
display: none !important;
}
.custom-dd-body hr {
margin: 5.6rem 0 !important;
display: block;
height: 1px;
width: 100%;
padding: 0;
border: none;
border-top: 1px solid var(--color-surface);
}
@media (max-width: 599px) {
.custom-dd-body hr {
margin: 3rem 0 !important;
}
}
.custom-dd-body main {
position: relative;
-webkit-transition: opacity 0.5s var(--def-trans-type) var(--def-trans-delay);
transition: opacity 0.5s var(--def-trans-type) var(--def-trans-delay);
flex-grow: 1;
}
.custom-dd-body .js .anim-block {
-webkit-transition: var(--def-trans-prop) var(--anim-time) var(--def-trans-type) var(--def-trans-delay);
transition: var(--def-trans-prop) var(--anim-time) var(--def-trans-type) var(--def-trans-delay);
-webkit-transform: translateX(-20px);
transform: translateX(-20px);
opacity: 0;
}
.custom-dd-body .js .anim-block.active.step-1 {
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.custom-dd-body .js .anim-block.active.step-2 {
-webkit-transition-delay: 0.8s;
transition-delay: 0.8s;
}
.custom-dd-body .js .anim-block.active.step-3 {
-webkit-transition-delay: 1.3s;
transition-delay: 1.3s;
}
.custom-dd-body .js .anim-block.active.step-4 {
-webkit-transition-delay: 1.8s;
transition-delay: 1.8s;
}
.custom-dd-body .js .anim-block.active.step-5 {
-webkit-transition-delay: 2.3s;
transition-delay: 2.3s;
}
.custom-dd-body .js .anim-block.active.step-6 {
-webkit-transition-delay: 2.8s;
transition-delay: 2.8s;
}
.custom-dd-body .js .anim-block.active.step-7 {
-webkit-transition-delay: 3.3s;
transition-delay: 3.3s;
}
.custom-dd-body .js .anim-block.active.step-8 {
-webkit-transition-delay: 3.8s;
transition-delay: 3.8s;
}
.custom-dd-body .js .anim-block.active.step-9 {
-webkit-transition-delay: 4.3s;
transition-delay: 4.3s;
}
.custom-dd-body .js .anim-block.active.step-10 {
-webkit-transition-delay: 4.8s;
transition-delay: 4.8s;
}
.custom-dd-body .js .anim-block-rev {
-webkit-transform: translateX(10rem);
transform: translateX(10rem);
}
.custom-dd-body .js .anim-block-top {
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
.custom-dd-body .js .anim-block-bottom {
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
.custom-dd-body .js .anim-block-opac {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 0;
}
.custom-dd-body .js .anim-block-bright {
transform: none;
-webkit-transform: none;
filter: brightness(0.3);
-webkit-filter: brightness(0.3);
opacity: 1;
}
.custom-dd-body .js .anim-block-bright.active {
filter: brightness(1);
-webkit-filter: brightness(1);
}
.custom-dd-body .js .anim-block.active {
-webkit-transform: translateX(0px) translateY(0px) scale(1);
transform: translateX(0px) translateY(0px) scale(1);
opacity: 1;
}
.custom-dd-body .js .anim-block-scale > * {
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0;
-webkit-transition: var(--def-trans-prop) var(--anim-time) var(--def-trans-type) var(--def-trans-delay);
transition: var(--def-trans-prop) var(--anim-time) var(--def-trans-type) var(--def-trans-delay);
}
.custom-dd-body .js .anim-block-scale.active > * {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
.custom-dd-body .parallax-window {
position: relative;
overflow: hidden;
}
.custom-dd-body .parallax-window img {
display: block;
max-width: 100%;
width: auto;
}
.custom-dd-body .parallax-window .parallax-window-in {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 110%;
z-index: 0;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: var(--def-trans-prop) var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
transition: var(--def-trans-prop) var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
}
.custom-dd-body .parallax-window .parallax-window-in.no-anim {
-webkit-transition: none;
transition: none;
}
.custom-dd-body .parallax-window .parallax-window-in img,
.custom-dd-body .parallax-window .parallax-window-in svg,
.custom-dd-body .parallax-window .parallax-window-in video {
display: block;
object-fit: cover;
object-position: 50% 50%;
width: 100%;
height: 100%;
max-width: none;
max-height: none;
}
.custom-dd-body .line-break {
display: block;
width: 40px;
height: 2px;
background-color: var(--color-surface);
margin: 1.1rem 0;
}
.custom-dd-body .button-container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
}
.custom-dd-body .only-tablet {
display: none;
}
@media (max-width: 1024px) {
.custom-dd-body .only-tablet {
display: block;
}
}
.custom-dd-body .text {
white-space: normal !important;
}
.custom-dd-body .display-none {
display: none !important;
}
.opened-el {
overflow-y: clip;
opacity: 1;
}
.closed-el {
max-height: 0;
overflow-y: clip;
}
.closed-el .wrap-in {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.text-align-left {
text-align: left !important;
}
.text-align-right {
text-align: right !important;
}
.text-align-center {
text-align: center !important;
}
.app-container {
max-width: unset;
padding: unset;
}
.app-container nav {
flex: unset;
padding: unset;
}
.app-container .main-content {
flex: unset;
min-width: unset;
padding-bottom: 0;
background-color: unset;
box-shadow: none;
position: relative;
}
.custom-dd-body .app-container {
display: flex;
flex-direction: row;
align-items: flex-start;
min-height: unset;
max-width: unset;
padding: 0 !important;
}
.custom-dd-body .app-container .main-content {
flex: 1;
min-width: 0;
}
.custom-dd-body .search__eyeglass-icon {
width: 25px;
}
.custom-dd-body td.cell-data--localized-string-field {
text-align: center;
}
.custom-dd-body .overflow-1 {
display: block;
overflow-x: auto;
white-space: nowrap;
}
.custom-dd-body button,
.custom-dd-body .button,
.custom-dd-body .btn,
.custom-dd-body .context-button,
.custom-dd-body .toggle-button,
.custom-dd-body textarea {
outline: 1px solid transparent !important;
outline-offset: 1px;
}
.custom-dd-body button:focus,
.custom-dd-body .button:focus,
.custom-dd-body .btn:focus,
.custom-dd-body .context-button:focus,
.custom-dd-body .toggle-button:focus,
.custom-dd-body textarea:focus {
outline: 1px solid var(--tk-control-neutral-filled-fill) !important;
outline-offset: 2px;
}
.custom-dd-body .drag-handle {
cursor: grab;
}
.custom-dd-body .user-profile-wrapper {
display: flex;
gap: 0.8rem;
align-items: center;
}
.custom-dd-body .user-profile-wrapper .user-initials {
width: 2.4rem;
aspect-ratio: 1;
display: flex;
align-self: center;
justify-content: center;
font-size: var(--tg-styles-avatar-size);
font-weight: 500;
line-height: 1;
padding: 0.5rem 0;
}
.custom-dd-body .user-profile-wrapper.circle .user-initials {
border-radius: 100rem;
}
.custom-dd-body .no-click {
pointer-events: none;
}
.custom-dd-body .cursor-pointer {
cursor: pointer;
}
.custom-dd-body .u-view {
display: block;
width: 100%;
}
@keyframes spinner-rotate {
to {
transform: rotate(360deg);
}
}
.custom-dd-body .spinner-border.spinner-border-sm {
display: inline-block;
width: 1rem;
height: 1rem;
vertical-align: -0.125em;
border: 0.15em solid currentColor;
border-right-color: transparent;
border-radius: 50%;
animation: spinner-rotate 0.75s linear infinite;
}
.switcher-container-new {
position: fixed;
bottom: 2.4rem;
right: 2.4rem;
display: flex;
min-height: 4.4rem;
padding: 0.4rem 0.8rem 0.4rem 1.2rem;
justify-content: center;
align-items: center;
gap: 0.4rem;
border-radius: 1000px;
border: 1px solid var(--tk-control-neutral-subtle-outline, rgba(33, 33, 33, 0.15));
background: var(--tk-control-neutral-subtle-fill, #FFF);
color: var(--tk-ink-main-secondary, rgba(33, 33, 33, 0.77));
font-size: var(--tg-styles-body-xs-size, 14px);
}
.switcher-container-new button {
display: flex !important;
}
.custom-dd-body .grid-el, .custom-dd-body .grid-el-12 {
display: grid;
grid-column-gap: var(--grid-gap);
grid-row-gap: var(--grid-gap);
width: 100%;
-webkit-transition: var(--def-trans-prop) var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
transition: var(--def-trans-prop) var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
}
.custom-dd-body .grid-el-12 {
grid-template-columns: repeat(12, minmax(0, 1fr));
}
@media (max-width: 767px) {
.custom-dd-body .grid-el-12 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.custom-dd-body .no-padd-l-r {
padding-left: 0;
padding-right: 0;
}
.custom-dd-body .no-padd-l {
padding-left: 0;
}
.custom-dd-body .no-padd-r {
padding-right: 0;
}
@media (max-width: 1024px) {
.custom-dd-body .no-padd-l-r-tab {
padding-left: 0;
padding-right: 0;
}
}
@media (max-width: 599px) {
.custom-dd-body .no-padd-l-r-mobs {
padding-left: 0;
padding-right: 0;
}
}
.custom-dd-body .no-max-width {
max-width: none;
}
.custom-dd-body .d-flex {
display: -ms-flexbox !important;
display: flex !important;
}
.custom-dd-body .flex-column {
flex-direction: column !important;
}
.custom-dd-body .flex-row {
flex-direction: row !important;
}
.custom-dd-body .flex-row-reverse {
flex-direction: row-reverse !important;
}
.custom-dd-body .flex-column-reverse {
flex-direction: column-reverse !important;
}
.custom-dd-body .flex-wrap {
flex-wrap: wrap !important;
}
.custom-dd-body .flex-nowrap {
flex-wrap: nowrap !important;
}
.custom-dd-body .flex-wrap-reverse {
flex-wrap: wrap-reverse !important;
}
.custom-dd-body .flex-fill {
flex: 1 1 auto !important;
}
.custom-dd-body .flex-grow-0 {
flex-grow: 0 !important;
}
.custom-dd-body .flex-grow-1 {
flex-grow: 1 !important;
}
.custom-dd-body .flex-grow-1000 {
flex-grow: 1000 !important;
}
.custom-dd-body .flex-grow-1 {
flex-grow: 1 !important;
}
.custom-dd-body .flex-shrink-0 {
flex-shrink: 0 !important;
}
.custom-dd-body .flex-shrink-1 {
flex-shrink: 1 !important;
}
.custom-dd-body .justify-content-start {
justify-content: flex-start !important;
}
.custom-dd-body .justify-content-end {
justify-content: flex-end !important;
}
.custom-dd-body .justify-content-center {
justify-content: center !important;
}
.custom-dd-body .justify-content-between {
justify-content: space-between !important;
}
.custom-dd-body .justify-content-around {
justify-content: space-around !important;
}
.custom-dd-body .justify-content-stretch {
justify-content: stretch !important;
}
.custom-dd-body .align-items-start {
align-items: flex-start !important;
}
.custom-dd-body .align-items-end {
align-items: flex-end !important;
}
.custom-dd-body .align-items-center {
align-items: center !important;
}
.custom-dd-body .align-items-baseline {
align-items: baseline !important;
}
.custom-dd-body .align-items-stretch {
align-items: stretch !important;
}
.custom-dd-body .align-content-start {
align-content: flex-start !important;
}
.custom-dd-body .align-content-end {
align-content: flex-end !important;
}
.custom-dd-body .align-content-center {
align-content: center !important;
}
.custom-dd-body .align-content-between {
align-content: space-between !important;
}
.custom-dd-body .align-content-around {
align-content: space-around !important;
}
.custom-dd-body .align-content-stretch {
align-content: stretch !important;
}
.custom-dd-body .align-self-auto {
align-self: auto !important;
}
.custom-dd-body .align-self-start {
align-self: flex-start !important;
}
.custom-dd-body .align-self-end {
align-self: flex-end !important;
}
.custom-dd-body .align-self-center {
align-self: center !important;
}
.custom-dd-body .align-self-baseline {
align-self: baseline !important;
}
.custom-dd-body .align-self-stretch {
align-self: stretch !important;
}
.custom-dd-body .w-100 {
width: 100%;
}
.custom-dd-body .h-100 {
height: 100%;
}
.custom-dd-body .common-gap {
gap: var(--nb-common-grid-gap);
}
.custom-dd-body .grid-gap {
gap: var(--grid-gap);
}
.custom-dd-body .mt-auto {
margin-top: auto !important;
}
.custom-dd-body .mb-auto {
margin-bottom: auto !important;
}
.custom-dd-body .mb-0 {
margin-bottom: 0 !important;
}
.custom-dd-body .mt-0 {
margin-top: 0 !important;
}
.custom-dd-body .ml-auto {
margin-left: auto !important;
}
.custom-dd-body .mr-auto {
margin-right: auto !important;
}
.custom-dd-body .ml-0 {
margin-left: 0 !important;
}
.custom-dd-body .mr-0 {
margin-right: 0 !important;
}
.custom-dd-body .mx-auto {
margin-left: auto !important;
margin-right: auto !important;
}
.custom-dd-body .my-auto {
margin-top: auto !important;
margin-bottom: auto !important;
}
.custom-dd-body .pl-0 {
padding-left: 0 !important;
}
.custom-dd-body .pr-0 {
margin-right: 0 !important;
}
.custom-dd-body .pb-0 {
padding-bottom: 0 !important;
}
.custom-dd-body .pt-0 {
padding-top: 0 !important;
}
.custom-dd-body .p-0 {
padding: 0 !important;
}
.custom-dd-body .gap-1 {
gap: var(--gap-1);
}
.custom-dd-body .gap-1-1 {
gap: var(--gap-1) var(--gap-1);
}
.custom-dd-body .gap-1-2 {
gap: var(--gap-1) var(--gap-2);
}
.custom-dd-body .gap-1-3 {
gap: var(--gap-1) var(--gap-3);
}
.custom-dd-body .gap-1-4 {
gap: var(--gap-1) var(--gap-4);
}
.custom-dd-body .gap-1-5 {
gap: var(--gap-1) var(--gap-5);
}
.custom-dd-body .gap-1-6 {
gap: var(--gap-1) var(--gap-6);
}
.custom-dd-body .gap-1-7 {
gap: var(--gap-1) var(--gap-7);
}
.custom-dd-body .gap-1-8 {
gap: var(--gap-1) var(--gap-8);
}
.custom-dd-body .gap-1-9 {
gap: var(--gap-1) var(--gap-9);
}
.custom-dd-body .gap-1-10 {
gap: var(--gap-1) var(--gap-10);
}
.custom-dd-body .gap-1-11 {
gap: var(--gap-1) var(--gap-11);
}
.custom-dd-body .gap-1-12 {
gap: var(--gap-1) var(--gap-12);
}
.custom-dd-body .gap-1-13 {
gap: var(--gap-1) var(--gap-13);
}
.custom-dd-body .gap-1-14 {
gap: var(--gap-1) var(--gap-14);
}
.custom-dd-body .gap-1-15 {
gap: var(--gap-1) var(--gap-15);
}
.custom-dd-body .gap-1-16 {
gap: var(--gap-1) var(--gap-16);
}
.custom-dd-body .gap-1-17 {
gap: var(--gap-1) var(--gap-17);
}
.custom-dd-body .p-1 {
padding: var(--gap-1);
}
.custom-dd-body .pt-1 {
padding-top: var(--gap-1);
}
.custom-dd-body .pb-1 {
padding-bottom: var(--gap-1);
}
.custom-dd-body .pl-1 {
padding-left: var(--gap-1);
}
.custom-dd-body .pr-1 {
padding-right: var(--gap-1);
}
.custom-dd-body .px-1 {
padding-left: var(--gap-1);
padding-right: var(--gap-1);
}
.custom-dd-body .py-1 {
padding-top: var(--gap-1);
padding-bottom: var(--gap-1);
}
.custom-dd-body .m-1 {
margin: var(--gap-1);
}
.custom-dd-body .mt-1 {
margin-top: var(--gap-1);
}
.custom-dd-body .mb-1 {
margin-bottom: var(--gap-1);
}
.custom-dd-body .ml-1 {
margin-left: var(--gap-1);
}
.custom-dd-body .mr-1 {
margin-right: var(--gap-1);
}
.custom-dd-body .mx-1 {
margin-left: var(--gap-1);
margin-right: var(--gap-1);
}
.custom-dd-body .my-1 {
margin-top: var(--gap-1);
margin-bottom: var(--gap-1);
}
.custom-dd-body .gap-2 {
gap: var(--gap-2);
}
.custom-dd-body .gap-2-1 {
gap: var(--gap-2) var(--gap-1);
}
.custom-dd-body .gap-2-2 {
gap: var(--gap-2) var(--gap-2);
}
.custom-dd-body .gap-2-3 {
gap: var(--gap-2) var(--gap-3);
}
.custom-dd-body .gap-2-4 {
gap: var(--gap-2) var(--gap-4);
}
.custom-dd-body .gap-2-5 {
gap: var(--gap-2) var(--gap-5);
}
.custom-dd-body .gap-2-6 {
gap: var(--gap-2) var(--gap-6);
}
.custom-dd-body .gap-2-7 {
gap: var(--gap-2) var(--gap-7);
}
.custom-dd-body .gap-2-8 {
gap: var(--gap-2) var(--gap-8);
}
.custom-dd-body .gap-2-9 {
gap: var(--gap-2) var(--gap-9);
}
.custom-dd-body .gap-2-10 {
gap: var(--gap-2) var(--gap-10);
}
.custom-dd-body .gap-2-11 {
gap: var(--gap-2) var(--gap-11);
}
.custom-dd-body .gap-2-12 {
gap: var(--gap-2) var(--gap-12);
}
.custom-dd-body .gap-2-13 {
gap: var(--gap-2) var(--gap-13);
}
.custom-dd-body .gap-2-14 {
gap: var(--gap-2) var(--gap-14);
}
.custom-dd-body .gap-2-15 {
gap: var(--gap-2) var(--gap-15);
}
.custom-dd-body .gap-2-16 {
gap: var(--gap-2) var(--gap-16);
}
.custom-dd-body .gap-2-17 {
gap: var(--gap-2) var(--gap-17);
}
.custom-dd-body .p-2 {
padding: var(--gap-2);
}
.custom-dd-body .pt-2 {
padding-top: var(--gap-2);
}
.custom-dd-body .pb-2 {
padding-bottom: var(--gap-2);
}
.custom-dd-body .pl-2 {
padding-left: var(--gap-2);
}
.custom-dd-body .pr-2 {
padding-right: var(--gap-2);
}
.custom-dd-body .px-2 {
padding-left: var(--gap-2);
padding-right: var(--gap-2);
}
.custom-dd-body .py-2 {
padding-top: var(--gap-2);
padding-bottom: var(--gap-2);
}
.custom-dd-body .m-2 {
margin: var(--gap-2);
}
.custom-dd-body .mt-2 {
margin-top: var(--gap-2);
}
.custom-dd-body .mb-2 {
margin-bottom: var(--gap-2);
}
.custom-dd-body .ml-2 {
margin-left: var(--gap-2);
}
.custom-dd-body .mr-2 {
margin-right: var(--gap-2);
}
.custom-dd-body .mx-2 {
margin-left: var(--gap-2);
margin-right: var(--gap-2);
}
.custom-dd-body .my-2 {
margin-top: var(--gap-2);
margin-bottom: var(--gap-2);
}
.custom-dd-body .gap-3 {
gap: var(--gap-3);
}
.custom-dd-body .gap-3-1 {
gap: var(--gap-3) var(--gap-1);
}
.custom-dd-body .gap-3-2 {
gap: var(--gap-3) var(--gap-2);
}
.custom-dd-body .gap-3-3 {
gap: var(--gap-3) var(--gap-3);
}
.custom-dd-body .gap-3-4 {
gap: var(--gap-3) var(--gap-4);
}
.custom-dd-body .gap-3-5 {
gap: var(--gap-3) var(--gap-5);
}
.custom-dd-body .gap-3-6 {
gap: var(--gap-3) var(--gap-6);
}
.custom-dd-body .gap-3-7 {
gap: var(--gap-3) var(--gap-7);
}
.custom-dd-body .gap-3-8 {
gap: var(--gap-3) var(--gap-8);
}
.custom-dd-body .gap-3-9 {
gap: var(--gap-3) var(--gap-9);
}
.custom-dd-body .gap-3-10 {
gap: var(--gap-3) var(--gap-10);
}
.custom-dd-body .gap-3-11 {
gap: var(--gap-3) var(--gap-11);
}
.custom-dd-body .gap-3-12 {
gap: var(--gap-3) var(--gap-12);
}
.custom-dd-body .gap-3-13 {
gap: var(--gap-3) var(--gap-13);
}
.custom-dd-body .gap-3-14 {
gap: var(--gap-3) var(--gap-14);
}
.custom-dd-body .gap-3-15 {
gap: var(--gap-3) var(--gap-15);
}
.custom-dd-body .gap-3-16 {
gap: var(--gap-3) var(--gap-16);
}
.custom-dd-body .gap-3-17 {
gap: var(--gap-3) var(--gap-17);
}
.custom-dd-body .p-3 {
padding: var(--gap-3);
}
.custom-dd-body .pt-3 {
padding-top: var(--gap-3);
}
.custom-dd-body .pb-3 {
padding-bottom: var(--gap-3);
}
.custom-dd-body .pl-3 {
padding-left: var(--gap-3);
}
.custom-dd-body .pr-3 {
padding-right: var(--gap-3);
}
.custom-dd-body .px-3 {
padding-left: var(--gap-3);
padding-right: var(--gap-3);
}
.custom-dd-body .py-3 {
padding-top: var(--gap-3);
padding-bottom: var(--gap-3);
}
.custom-dd-body .m-3 {
margin: var(--gap-3);
}
.custom-dd-body .mt-3 {
margin-top: var(--gap-3);
}
.custom-dd-body .mb-3 {
margin-bottom: var(--gap-3);
}
.custom-dd-body .ml-3 {
margin-left: var(--gap-3);
}
.custom-dd-body .mr-3 {
margin-right: var(--gap-3);
}
.custom-dd-body .mx-3 {
margin-left: var(--gap-3);
margin-right: var(--gap-3);
}
.custom-dd-body .my-3 {
margin-top: var(--gap-3);
margin-bottom: var(--gap-3);
}
.custom-dd-body .gap-4 {
gap: var(--gap-4);
}
.custom-dd-body .gap-4-1 {
gap: var(--gap-4) var(--gap-1);
}
.custom-dd-body .gap-4-2 {
gap: var(--gap-4) var(--gap-2);
}
.custom-dd-body .gap-4-3 {
gap: var(--gap-4) var(--gap-3);
}
.custom-dd-body .gap-4-4 {
gap: var(--gap-4) var(--gap-4);
}
.custom-dd-body .gap-4-5 {
gap: var(--gap-4) var(--gap-5);
}
.custom-dd-body .gap-4-6 {
gap: var(--gap-4) var(--gap-6);
}
.custom-dd-body .gap-4-7 {
gap: var(--gap-4) var(--gap-7);
}
.custom-dd-body .gap-4-8 {
gap: var(--gap-4) var(--gap-8);
}
.custom-dd-body .gap-4-9 {
gap: var(--gap-4) var(--gap-9);
}
.custom-dd-body .gap-4-10 {
gap: var(--gap-4) var(--gap-10);
}
.custom-dd-body .gap-4-11 {
gap: var(--gap-4) var(--gap-11);
}
.custom-dd-body .gap-4-12 {
gap: var(--gap-4) var(--gap-12);
}
.custom-dd-body .gap-4-13 {
gap: var(--gap-4) var(--gap-13);
}
.custom-dd-body .gap-4-14 {
gap: var(--gap-4) var(--gap-14);
}
.custom-dd-body .gap-4-15 {
gap: var(--gap-4) var(--gap-15);
}
.custom-dd-body .gap-4-16 {
gap: var(--gap-4) var(--gap-16);
}
.custom-dd-body .gap-4-17 {
gap: var(--gap-4) var(--gap-17);
}
.custom-dd-body .p-4 {
padding: var(--gap-4);
}
.custom-dd-body .pt-4 {
padding-top: var(--gap-4);
}
.custom-dd-body .pb-4 {
padding-bottom: var(--gap-4);
}
.custom-dd-body .pl-4 {
padding-left: var(--gap-4);
}
.custom-dd-body .pr-4 {
padding-right: var(--gap-4);
}
.custom-dd-body .px-4 {
padding-left: var(--gap-4);
padding-right: var(--gap-4);
}
.custom-dd-body .py-4 {
padding-top: var(--gap-4);
padding-bottom: var(--gap-4);
}
.custom-dd-body .m-4 {
margin: var(--gap-4);
}
.custom-dd-body .mt-4 {
margin-top: var(--gap-4);
}
.custom-dd-body .mb-4 {
margin-bottom: var(--gap-4);
}
.custom-dd-body .ml-4 {
margin-left: var(--gap-4);
}
.custom-dd-body .mr-4 {
margin-right: var(--gap-4);
}
.custom-dd-body .mx-4 {
margin-left: var(--gap-4);
margin-right: var(--gap-4);
}
.custom-dd-body .my-4 {
margin-top: var(--gap-4);
margin-bottom: var(--gap-4);
}
.custom-dd-body .gap-5 {
gap: var(--gap-5);
}
.custom-dd-body .gap-5-1 {
gap: var(--gap-5) var(--gap-1);
}
.custom-dd-body .gap-5-2 {
gap: var(--gap-5) var(--gap-2);
}
.custom-dd-body .gap-5-3 {
gap: var(--gap-5) var(--gap-3);
}
.custom-dd-body .gap-5-4 {
gap: var(--gap-5) var(--gap-4);
}
.custom-dd-body .gap-5-5 {
gap: var(--gap-5) var(--gap-5);
}
.custom-dd-body .gap-5-6 {
gap: var(--gap-5) var(--gap-6);
}
.custom-dd-body .gap-5-7 {
gap: var(--gap-5) var(--gap-7);
}
.custom-dd-body .gap-5-8 {
gap: var(--gap-5) var(--gap-8);
}
.custom-dd-body .gap-5-9 {
gap: var(--gap-5) var(--gap-9);
}
.custom-dd-body .gap-5-10 {
gap: var(--gap-5) var(--gap-10);
}
.custom-dd-body .gap-5-11 {
gap: var(--gap-5) var(--gap-11);
}
.custom-dd-body .gap-5-12 {
gap: var(--gap-5) var(--gap-12);
}
.custom-dd-body .gap-5-13 {
gap: var(--gap-5) var(--gap-13);
}
.custom-dd-body .gap-5-14 {
gap: var(--gap-5) var(--gap-14);
}
.custom-dd-body .gap-5-15 {
gap: var(--gap-5) var(--gap-15);
}
.custom-dd-body .gap-5-16 {
gap: var(--gap-5) var(--gap-16);
}
.custom-dd-body .gap-5-17 {
gap: var(--gap-5) var(--gap-17);
}
.custom-dd-body .p-5 {
padding: var(--gap-5);
}
.custom-dd-body .pt-5 {
padding-top: var(--gap-5);
}
.custom-dd-body .pb-5 {
padding-bottom: var(--gap-5);
}
.custom-dd-body .pl-5 {
padding-left: var(--gap-5);
}
.custom-dd-body .pr-5 {
padding-right: var(--gap-5);
}
.custom-dd-body .px-5 {
padding-left: var(--gap-5);
padding-right: var(--gap-5);
}
.custom-dd-body .py-5 {
padding-top: var(--gap-5);
padding-bottom: var(--gap-5);
}
.custom-dd-body .m-5 {
margin: var(--gap-5);
}
.custom-dd-body .mt-5 {
margin-top: var(--gap-5);
}
.custom-dd-body .mb-5 {
margin-bottom: var(--gap-5);
}
.custom-dd-body .ml-5 {
margin-left: var(--gap-5);
}
.custom-dd-body .mr-5 {
margin-right: var(--gap-5);
}
.custom-dd-body .mx-5 {
margin-left: var(--gap-5);
margin-right: var(--gap-5);
}
.custom-dd-body .my-5 {
margin-top: var(--gap-5);
margin-bottom: var(--gap-5);
}
.custom-dd-body .gap-6 {
gap: var(--gap-6);
}
.custom-dd-body .gap-6-1 {
gap: var(--gap-6) var(--gap-1);
}
.custom-dd-body .gap-6-2 {
gap: var(--gap-6) var(--gap-2);
}
.custom-dd-body .gap-6-3 {
gap: var(--gap-6) var(--gap-3);
}
.custom-dd-body .gap-6-4 {
gap: var(--gap-6) var(--gap-4);
}
.custom-dd-body .gap-6-5 {
gap: var(--gap-6) var(--gap-5);
}
.custom-dd-body .gap-6-6 {
gap: var(--gap-6) var(--gap-6);
}
.custom-dd-body .gap-6-7 {
gap: var(--gap-6) var(--gap-7);
}
.custom-dd-body .gap-6-8 {
gap: var(--gap-6) var(--gap-8);
}
.custom-dd-body .gap-6-9 {
gap: var(--gap-6) var(--gap-9);
}
.custom-dd-body .gap-6-10 {
gap: var(--gap-6) var(--gap-10);
}
.custom-dd-body .gap-6-11 {
gap: var(--gap-6) var(--gap-11);
}
.custom-dd-body .gap-6-12 {
gap: var(--gap-6) var(--gap-12);
}
.custom-dd-body .gap-6-13 {
gap: var(--gap-6) var(--gap-13);
}
.custom-dd-body .gap-6-14 {
gap: var(--gap-6) var(--gap-14);
}
.custom-dd-body .gap-6-15 {
gap: var(--gap-6) var(--gap-15);
}
.custom-dd-body .gap-6-16 {
gap: var(--gap-6) var(--gap-16);
}
.custom-dd-body .gap-6-17 {
gap: var(--gap-6) var(--gap-17);
}
.custom-dd-body .p-6 {
padding: var(--gap-6);
}
.custom-dd-body .pt-6 {
padding-top: var(--gap-6);
}
.custom-dd-body .pb-6 {
padding-bottom: var(--gap-6);
}
.custom-dd-body .pl-6 {
padding-left: var(--gap-6);
}
.custom-dd-body .pr-6 {
padding-right: var(--gap-6);
}
.custom-dd-body .px-6 {
padding-left: var(--gap-6);
padding-right: var(--gap-6);
}
.custom-dd-body .py-6 {
padding-top: var(--gap-6);
padding-bottom: var(--gap-6);
}
.custom-dd-body .m-6 {
margin: var(--gap-6);
}
.custom-dd-body .mt-6 {
margin-top: var(--gap-6);
}
.custom-dd-body .mb-6 {
margin-bottom: var(--gap-6);
}
.custom-dd-body .ml-6 {
margin-left: var(--gap-6);
}
.custom-dd-body .mr-6 {
margin-right: var(--gap-6);
}
.custom-dd-body .mx-6 {
margin-left: var(--gap-6);
margin-right: var(--gap-6);
}
.custom-dd-body .my-6 {
margin-top: var(--gap-6);
margin-bottom: var(--gap-6);
}
.custom-dd-body .gap-7 {
gap: var(--gap-7);
}
.custom-dd-body .gap-7-1 {
gap: var(--gap-7) var(--gap-1);
}
.custom-dd-body .gap-7-2 {
gap: var(--gap-7) var(--gap-2);
}
.custom-dd-body .gap-7-3 {
gap: var(--gap-7) var(--gap-3);
}
.custom-dd-body .gap-7-4 {
gap: var(--gap-7) var(--gap-4);
}
.custom-dd-body .gap-7-5 {
gap: var(--gap-7) var(--gap-5);
}
.custom-dd-body .gap-7-6 {
gap: var(--gap-7) var(--gap-6);
}
.custom-dd-body .gap-7-7 {
gap: var(--gap-7) var(--gap-7);
}
.custom-dd-body .gap-7-8 {
gap: var(--gap-7) var(--gap-8);
}
.custom-dd-body .gap-7-9 {
gap: var(--gap-7) var(--gap-9);
}
.custom-dd-body .gap-7-10 {
gap: var(--gap-7) var(--gap-10);
}
.custom-dd-body .gap-7-11 {
gap: var(--gap-7) var(--gap-11);
}
.custom-dd-body .gap-7-12 {
gap: var(--gap-7) var(--gap-12);
}
.custom-dd-body .gap-7-13 {
gap: var(--gap-7) var(--gap-13);
}
.custom-dd-body .gap-7-14 {
gap: var(--gap-7) var(--gap-14);
}
.custom-dd-body .gap-7-15 {
gap: var(--gap-7) var(--gap-15);
}
.custom-dd-body .gap-7-16 {
gap: var(--gap-7) var(--gap-16);
}
.custom-dd-body .gap-7-17 {
gap: var(--gap-7) var(--gap-17);
}
.custom-dd-body .p-7 {
padding: var(--gap-7);
}
.custom-dd-body .pt-7 {
padding-top: var(--gap-7);
}
.custom-dd-body .pb-7 {
padding-bottom: var(--gap-7);
}
.custom-dd-body .pl-7 {
padding-left: var(--gap-7);
}
.custom-dd-body .pr-7 {
padding-right: var(--gap-7);
}
.custom-dd-body .px-7 {
padding-left: var(--gap-7);
padding-right: var(--gap-7);
}
.custom-dd-body .py-7 {
padding-top: var(--gap-7);
padding-bottom: var(--gap-7);
}
.custom-dd-body .m-7 {
margin: var(--gap-7);
}
.custom-dd-body .mt-7 {
margin-top: var(--gap-7);
}
.custom-dd-body .mb-7 {
margin-bottom: var(--gap-7);
}
.custom-dd-body .ml-7 {
margin-left: var(--gap-7);
}
.custom-dd-body .mr-7 {
margin-right: var(--gap-7);
}
.custom-dd-body .mx-7 {
margin-left: var(--gap-7);
margin-right: var(--gap-7);
}
.custom-dd-body .my-7 {
margin-top: var(--gap-7);
margin-bottom: var(--gap-7);
}
.custom-dd-body .gap-8 {
gap: var(--gap-8);
}
.custom-dd-body .gap-8-1 {
gap: var(--gap-8) var(--gap-1);
}
.custom-dd-body .gap-8-2 {
gap: var(--gap-8) var(--gap-2);
}
.custom-dd-body .gap-8-3 {
gap: var(--gap-8) var(--gap-3);
}
.custom-dd-body .gap-8-4 {
gap: var(--gap-8) var(--gap-4);
}
.custom-dd-body .gap-8-5 {
gap: var(--gap-8) var(--gap-5);
}
.custom-dd-body .gap-8-6 {
gap: var(--gap-8) var(--gap-6);
}
.custom-dd-body .gap-8-7 {
gap: var(--gap-8) var(--gap-7);
}
.custom-dd-body .gap-8-8 {
gap: var(--gap-8) var(--gap-8);
}
.custom-dd-body .gap-8-9 {
gap: var(--gap-8) var(--gap-9);
}
.custom-dd-body .gap-8-10 {
gap: var(--gap-8) var(--gap-10);
}
.custom-dd-body .gap-8-11 {
gap: var(--gap-8) var(--gap-11);
}
.custom-dd-body .gap-8-12 {
gap: var(--gap-8) var(--gap-12);
}
.custom-dd-body .gap-8-13 {
gap: var(--gap-8) var(--gap-13);
}
.custom-dd-body .gap-8-14 {
gap: var(--gap-8) var(--gap-14);
}
.custom-dd-body .gap-8-15 {
gap: var(--gap-8) var(--gap-15);
}
.custom-dd-body .gap-8-16 {
gap: var(--gap-8) var(--gap-16);
}
.custom-dd-body .gap-8-17 {
gap: var(--gap-8) var(--gap-17);
}
.custom-dd-body .p-8 {
padding: var(--gap-8);
}
.custom-dd-body .pt-8 {
padding-top: var(--gap-8);
}
.custom-dd-body .pb-8 {
padding-bottom: var(--gap-8);
}
.custom-dd-body .pl-8 {
padding-left: var(--gap-8);
}
.custom-dd-body .pr-8 {
padding-right: var(--gap-8);
}
.custom-dd-body .px-8 {
padding-left: var(--gap-8);
padding-right: var(--gap-8);
}
.custom-dd-body .py-8 {
padding-top: var(--gap-8);
padding-bottom: var(--gap-8);
}
.custom-dd-body .m-8 {
margin: var(--gap-8);
}
.custom-dd-body .mt-8 {
margin-top: var(--gap-8);
}
.custom-dd-body .mb-8 {
margin-bottom: var(--gap-8);
}
.custom-dd-body .ml-8 {
margin-left: var(--gap-8);
}
.custom-dd-body .mr-8 {
margin-right: var(--gap-8);
}
.custom-dd-body .mx-8 {
margin-left: var(--gap-8);
margin-right: var(--gap-8);
}
.custom-dd-body .my-8 {
margin-top: var(--gap-8);
margin-bottom: var(--gap-8);
}
.custom-dd-body .gap-9 {
gap: var(--gap-9);
}
.custom-dd-body .gap-9-1 {
gap: var(--gap-9) var(--gap-1);
}
.custom-dd-body .gap-9-2 {
gap: var(--gap-9) var(--gap-2);
}
.custom-dd-body .gap-9-3 {
gap: var(--gap-9) var(--gap-3);
}
.custom-dd-body .gap-9-4 {
gap: var(--gap-9) var(--gap-4);
}
.custom-dd-body .gap-9-5 {
gap: var(--gap-9) var(--gap-5);
}
.custom-dd-body .gap-9-6 {
gap: var(--gap-9) var(--gap-6);
}
.custom-dd-body .gap-9-7 {
gap: var(--gap-9) var(--gap-7);
}
.custom-dd-body .gap-9-8 {
gap: var(--gap-9) var(--gap-8);
}
.custom-dd-body .gap-9-9 {
gap: var(--gap-9) var(--gap-9);
}
.custom-dd-body .gap-9-10 {
gap: var(--gap-9) var(--gap-10);
}
.custom-dd-body .gap-9-11 {
gap: var(--gap-9) var(--gap-11);
}
.custom-dd-body .gap-9-12 {
gap: var(--gap-9) var(--gap-12);
}
.custom-dd-body .gap-9-13 {
gap: var(--gap-9) var(--gap-13);
}
.custom-dd-body .gap-9-14 {
gap: var(--gap-9) var(--gap-14);
}
.custom-dd-body .gap-9-15 {
gap: var(--gap-9) var(--gap-15);
}
.custom-dd-body .gap-9-16 {
gap: var(--gap-9) var(--gap-16);
}
.custom-dd-body .gap-9-17 {
gap: var(--gap-9) var(--gap-17);
}
.custom-dd-body .p-9 {
padding: var(--gap-9);
}
.custom-dd-body .pt-9 {
padding-top: var(--gap-9);
}
.custom-dd-body .pb-9 {
padding-bottom: var(--gap-9);
}
.custom-dd-body .pl-9 {
padding-left: var(--gap-9);
}
.custom-dd-body .pr-9 {
padding-right: var(--gap-9);
}
.custom-dd-body .px-9 {
padding-left: var(--gap-9);
padding-right: var(--gap-9);
}
.custom-dd-body .py-9 {
padding-top: var(--gap-9);
padding-bottom: var(--gap-9);
}
.custom-dd-body .m-9 {
margin: var(--gap-9);
}
.custom-dd-body .mt-9 {
margin-top: var(--gap-9);
}
.custom-dd-body .mb-9 {
margin-bottom: var(--gap-9);
}
.custom-dd-body .ml-9 {
margin-left: var(--gap-9);
}
.custom-dd-body .mr-9 {
margin-right: var(--gap-9);
}
.custom-dd-body .mx-9 {
margin-left: var(--gap-9);
margin-right: var(--gap-9);
}
.custom-dd-body .my-9 {
margin-top: var(--gap-9);
margin-bottom: var(--gap-9);
}
.custom-dd-body .gap-10 {
gap: var(--gap-10);
}
.custom-dd-body .gap-10-1 {
gap: var(--gap-10) var(--gap-1);
}
.custom-dd-body .gap-10-2 {
gap: var(--gap-10) var(--gap-2);
}
.custom-dd-body .gap-10-3 {
gap: var(--gap-10) var(--gap-3);
}
.custom-dd-body .gap-10-4 {
gap: var(--gap-10) var(--gap-4);
}
.custom-dd-body .gap-10-5 {
gap: var(--gap-10) var(--gap-5);
}
.custom-dd-body .gap-10-6 {
gap: var(--gap-10) var(--gap-6);
}
.custom-dd-body .gap-10-7 {
gap: var(--gap-10) var(--gap-7);
}
.custom-dd-body .gap-10-8 {
gap: var(--gap-10) var(--gap-8);
}
.custom-dd-body .gap-10-9 {
gap: var(--gap-10) var(--gap-9);
}
.custom-dd-body .gap-10-10 {
gap: var(--gap-10) var(--gap-10);
}
.custom-dd-body .gap-10-11 {
gap: var(--gap-10) var(--gap-11);
}
.custom-dd-body .gap-10-12 {
gap: var(--gap-10) var(--gap-12);
}
.custom-dd-body .gap-10-13 {
gap: var(--gap-10) var(--gap-13);
}
.custom-dd-body .gap-10-14 {
gap: var(--gap-10) var(--gap-14);
}
.custom-dd-body .gap-10-15 {
gap: var(--gap-10) var(--gap-15);
}
.custom-dd-body .gap-10-16 {
gap: var(--gap-10) var(--gap-16);
}
.custom-dd-body .gap-10-17 {
gap: var(--gap-10) var(--gap-17);
}
.custom-dd-body .p-10 {
padding: var(--gap-10);
}
.custom-dd-body .pt-10 {
padding-top: var(--gap-10);
}
.custom-dd-body .pb-10 {
padding-bottom: var(--gap-10);
}
.custom-dd-body .pl-10 {
padding-left: var(--gap-10);
}
.custom-dd-body .pr-10 {
padding-right: var(--gap-10);
}
.custom-dd-body .px-10 {
padding-left: var(--gap-10);
padding-right: var(--gap-10);
}
.custom-dd-body .py-10 {
padding-top: var(--gap-10);
padding-bottom: var(--gap-10);
}
.custom-dd-body .m-10 {
margin: var(--gap-10);
}
.custom-dd-body .mt-10 {
margin-top: var(--gap-10);
}
.custom-dd-body .mb-10 {
margin-bottom: var(--gap-10);
}
.custom-dd-body .ml-10 {
margin-left: var(--gap-10);
}
.custom-dd-body .mr-10 {
margin-right: var(--gap-10);
}
.custom-dd-body .mx-10 {
margin-left: var(--gap-10);
margin-right: var(--gap-10);
}
.custom-dd-body .my-10 {
margin-top: var(--gap-10);
margin-bottom: var(--gap-10);
}
.custom-dd-body .gap-11 {
gap: var(--gap-11);
}
.custom-dd-body .gap-11-1 {
gap: var(--gap-11) var(--gap-1);
}
.custom-dd-body .gap-11-2 {
gap: var(--gap-11) var(--gap-2);
}
.custom-dd-body .gap-11-3 {
gap: var(--gap-11) var(--gap-3);
}
.custom-dd-body .gap-11-4 {
gap: var(--gap-11) var(--gap-4);
}
.custom-dd-body .gap-11-5 {
gap: var(--gap-11) var(--gap-5);
}
.custom-dd-body .gap-11-6 {
gap: var(--gap-11) var(--gap-6);
}
.custom-dd-body .gap-11-7 {
gap: var(--gap-11) var(--gap-7);
}
.custom-dd-body .gap-11-8 {
gap: var(--gap-11) var(--gap-8);
}
.custom-dd-body .gap-11-9 {
gap: var(--gap-11) var(--gap-9);
}
.custom-dd-body .gap-11-10 {
gap: var(--gap-11) var(--gap-10);
}
.custom-dd-body .gap-11-11 {
gap: var(--gap-11) var(--gap-11);
}
.custom-dd-body .gap-11-12 {
gap: var(--gap-11) var(--gap-12);
}
.custom-dd-body .gap-11-13 {
gap: var(--gap-11) var(--gap-13);
}
.custom-dd-body .gap-11-14 {
gap: var(--gap-11) var(--gap-14);
}
.custom-dd-body .gap-11-15 {
gap: var(--gap-11) var(--gap-15);
}
.custom-dd-body .gap-11-16 {
gap: var(--gap-11) var(--gap-16);
}
.custom-dd-body .gap-11-17 {
gap: var(--gap-11) var(--gap-17);
}
.custom-dd-body .p-11 {
padding: var(--gap-11);
}
.custom-dd-body .pt-11 {
padding-top: var(--gap-11);
}
.custom-dd-body .pb-11 {
padding-bottom: var(--gap-11);
}
.custom-dd-body .pl-11 {
padding-left: var(--gap-11);
}
.custom-dd-body .pr-11 {
padding-right: var(--gap-11);
}
.custom-dd-body .px-11 {
padding-left: var(--gap-11);
padding-right: var(--gap-11);
}
.custom-dd-body .py-11 {
padding-top: var(--gap-11);
padding-bottom: var(--gap-11);
}
.custom-dd-body .m-11 {
margin: var(--gap-11);
}
.custom-dd-body .mt-11 {
margin-top: var(--gap-11);
}
.custom-dd-body .mb-11 {
margin-bottom: var(--gap-11);
}
.custom-dd-body .ml-11 {
margin-left: var(--gap-11);
}
.custom-dd-body .mr-11 {
margin-right: var(--gap-11);
}
.custom-dd-body .mx-11 {
margin-left: var(--gap-11);
margin-right: var(--gap-11);
}
.custom-dd-body .my-11 {
margin-top: var(--gap-11);
margin-bottom: var(--gap-11);
}
.custom-dd-body .gap-12 {
gap: var(--gap-12);
}
.custom-dd-body .gap-12-1 {
gap: var(--gap-12) var(--gap-1);
}
.custom-dd-body .gap-12-2 {
gap: var(--gap-12) var(--gap-2);
}
.custom-dd-body .gap-12-3 {
gap: var(--gap-12) var(--gap-3);
}
.custom-dd-body .gap-12-4 {
gap: var(--gap-12) var(--gap-4);
}
.custom-dd-body .gap-12-5 {
gap: var(--gap-12) var(--gap-5);
}
.custom-dd-body .gap-12-6 {
gap: var(--gap-12) var(--gap-6);
}
.custom-dd-body .gap-12-7 {
gap: var(--gap-12) var(--gap-7);
}
.custom-dd-body .gap-12-8 {
gap: var(--gap-12) var(--gap-8);
}
.custom-dd-body .gap-12-9 {
gap: var(--gap-12) var(--gap-9);
}
.custom-dd-body .gap-12-10 {
gap: var(--gap-12) var(--gap-10);
}
.custom-dd-body .gap-12-11 {
gap: var(--gap-12) var(--gap-11);
}
.custom-dd-body .gap-12-12 {
gap: var(--gap-12) var(--gap-12);
}
.custom-dd-body .gap-12-13 {
gap: var(--gap-12) var(--gap-13);
}
.custom-dd-body .gap-12-14 {
gap: var(--gap-12) var(--gap-14);
}
.custom-dd-body .gap-12-15 {
gap: var(--gap-12) var(--gap-15);
}
.custom-dd-body .gap-12-16 {
gap: var(--gap-12) var(--gap-16);
}
.custom-dd-body .gap-12-17 {
gap: var(--gap-12) var(--gap-17);
}
.custom-dd-body .p-12 {
padding: var(--gap-12);
}
.custom-dd-body .pt-12 {
padding-top: var(--gap-12);
}
.custom-dd-body .pb-12 {
padding-bottom: var(--gap-12);
}
.custom-dd-body .pl-12 {
padding-left: var(--gap-12);
}
.custom-dd-body .pr-12 {
padding-right: var(--gap-12);
}
.custom-dd-body .px-12 {
padding-left: var(--gap-12);
padding-right: var(--gap-12);
}
.custom-dd-body .py-12 {
padding-top: var(--gap-12);
padding-bottom: var(--gap-12);
}
.custom-dd-body .m-12 {
margin: var(--gap-12);
}
.custom-dd-body .mt-12 {
margin-top: var(--gap-12);
}
.custom-dd-body .mb-12 {
margin-bottom: var(--gap-12);
}
.custom-dd-body .ml-12 {
margin-left: var(--gap-12);
}
.custom-dd-body .mr-12 {
margin-right: var(--gap-12);
}
.custom-dd-body .mx-12 {
margin-left: var(--gap-12);
margin-right: var(--gap-12);
}
.custom-dd-body .my-12 {
margin-top: var(--gap-12);
margin-bottom: var(--gap-12);
}
.custom-dd-body .gap-13 {
gap: var(--gap-13);
}
.custom-dd-body .gap-13-1 {
gap: var(--gap-13) var(--gap-1);
}
.custom-dd-body .gap-13-2 {
gap: var(--gap-13) var(--gap-2);
}
.custom-dd-body .gap-13-3 {
gap: var(--gap-13) var(--gap-3);
}
.custom-dd-body .gap-13-4 {
gap: var(--gap-13) var(--gap-4);
}
.custom-dd-body .gap-13-5 {
gap: var(--gap-13) var(--gap-5);
}
.custom-dd-body .gap-13-6 {
gap: var(--gap-13) var(--gap-6);
}
.custom-dd-body .gap-13-7 {
gap: var(--gap-13) var(--gap-7);
}
.custom-dd-body .gap-13-8 {
gap: var(--gap-13) var(--gap-8);
}
.custom-dd-body .gap-13-9 {
gap: var(--gap-13) var(--gap-9);
}
.custom-dd-body .gap-13-10 {
gap: var(--gap-13) var(--gap-10);
}
.custom-dd-body .gap-13-11 {
gap: var(--gap-13) var(--gap-11);
}
.custom-dd-body .gap-13-12 {
gap: var(--gap-13) var(--gap-12);
}
.custom-dd-body .gap-13-13 {
gap: var(--gap-13) var(--gap-13);
}
.custom-dd-body .gap-13-14 {
gap: var(--gap-13) var(--gap-14);
}
.custom-dd-body .gap-13-15 {
gap: var(--gap-13) var(--gap-15);
}
.custom-dd-body .gap-13-16 {
gap: var(--gap-13) var(--gap-16);
}
.custom-dd-body .gap-13-17 {
gap: var(--gap-13) var(--gap-17);
}
.custom-dd-body .p-13 {
padding: var(--gap-13);
}
.custom-dd-body .pt-13 {
padding-top: var(--gap-13);
}
.custom-dd-body .pb-13 {
padding-bottom: var(--gap-13);
}
.custom-dd-body .pl-13 {
padding-left: var(--gap-13);
}
.custom-dd-body .pr-13 {
padding-right: var(--gap-13);
}
.custom-dd-body .px-13 {
padding-left: var(--gap-13);
padding-right: var(--gap-13);
}
.custom-dd-body .py-13 {
padding-top: var(--gap-13);
padding-bottom: var(--gap-13);
}
.custom-dd-body .m-13 {
margin: var(--gap-13);
}
.custom-dd-body .mt-13 {
margin-top: var(--gap-13);
}
.custom-dd-body .mb-13 {
margin-bottom: var(--gap-13);
}
.custom-dd-body .ml-13 {
margin-left: var(--gap-13);
}
.custom-dd-body .mr-13 {
margin-right: var(--gap-13);
}
.custom-dd-body .mx-13 {
margin-left: var(--gap-13);
margin-right: var(--gap-13);
}
.custom-dd-body .my-13 {
margin-top: var(--gap-13);
margin-bottom: var(--gap-13);
}
.custom-dd-body .gap-14 {
gap: var(--gap-14);
}
.custom-dd-body .gap-14-1 {
gap: var(--gap-14) var(--gap-1);
}
.custom-dd-body .gap-14-2 {
gap: var(--gap-14) var(--gap-2);
}
.custom-dd-body .gap-14-3 {
gap: var(--gap-14) var(--gap-3);
}
.custom-dd-body .gap-14-4 {
gap: var(--gap-14) var(--gap-4);
}
.custom-dd-body .gap-14-5 {
gap: var(--gap-14) var(--gap-5);
}
.custom-dd-body .gap-14-6 {
gap: var(--gap-14) var(--gap-6);
}
.custom-dd-body .gap-14-7 {
gap: var(--gap-14) var(--gap-7);
}
.custom-dd-body .gap-14-8 {
gap: var(--gap-14) var(--gap-8);
}
.custom-dd-body .gap-14-9 {
gap: var(--gap-14) var(--gap-9);
}
.custom-dd-body .gap-14-10 {
gap: var(--gap-14) var(--gap-10);
}
.custom-dd-body .gap-14-11 {
gap: var(--gap-14) var(--gap-11);
}
.custom-dd-body .gap-14-12 {
gap: var(--gap-14) var(--gap-12);
}
.custom-dd-body .gap-14-13 {
gap: var(--gap-14) var(--gap-13);
}
.custom-dd-body .gap-14-14 {
gap: var(--gap-14) var(--gap-14);
}
.custom-dd-body .gap-14-15 {
gap: var(--gap-14) var(--gap-15);
}
.custom-dd-body .gap-14-16 {
gap: var(--gap-14) var(--gap-16);
}
.custom-dd-body .gap-14-17 {
gap: var(--gap-14) var(--gap-17);
}
.custom-dd-body .p-14 {
padding: var(--gap-14);
}
.custom-dd-body .pt-14 {
padding-top: var(--gap-14);
}
.custom-dd-body .pb-14 {
padding-bottom: var(--gap-14);
}
.custom-dd-body .pl-14 {
padding-left: var(--gap-14);
}
.custom-dd-body .pr-14 {
padding-right: var(--gap-14);
}
.custom-dd-body .px-14 {
padding-left: var(--gap-14);
padding-right: var(--gap-14);
}
.custom-dd-body .py-14 {
padding-top: var(--gap-14);
padding-bottom: var(--gap-14);
}
.custom-dd-body .m-14 {
margin: var(--gap-14);
}
.custom-dd-body .mt-14 {
margin-top: var(--gap-14);
}
.custom-dd-body .mb-14 {
margin-bottom: var(--gap-14);
}
.custom-dd-body .ml-14 {
margin-left: var(--gap-14);
}
.custom-dd-body .mr-14 {
margin-right: var(--gap-14);
}
.custom-dd-body .mx-14 {
margin-left: var(--gap-14);
margin-right: var(--gap-14);
}
.custom-dd-body .my-14 {
margin-top: var(--gap-14);
margin-bottom: var(--gap-14);
}
.custom-dd-body .gap-15 {
gap: var(--gap-15);
}
.custom-dd-body .gap-15-1 {
gap: var(--gap-15) var(--gap-1);
}
.custom-dd-body .gap-15-2 {
gap: var(--gap-15) var(--gap-2);
}
.custom-dd-body .gap-15-3 {
gap: var(--gap-15) var(--gap-3);
}
.custom-dd-body .gap-15-4 {
gap: var(--gap-15) var(--gap-4);
}
.custom-dd-body .gap-15-5 {
gap: var(--gap-15) var(--gap-5);
}
.custom-dd-body .gap-15-6 {
gap: var(--gap-15) var(--gap-6);
}
.custom-dd-body .gap-15-7 {
gap: var(--gap-15) var(--gap-7);
}
.custom-dd-body .gap-15-8 {
gap: var(--gap-15) var(--gap-8);
}
.custom-dd-body .gap-15-9 {
gap: var(--gap-15) var(--gap-9);
}
.custom-dd-body .gap-15-10 {
gap: var(--gap-15) var(--gap-10);
}
.custom-dd-body .gap-15-11 {
gap: var(--gap-15) var(--gap-11);
}
.custom-dd-body .gap-15-12 {
gap: var(--gap-15) var(--gap-12);
}
.custom-dd-body .gap-15-13 {
gap: var(--gap-15) var(--gap-13);
}
.custom-dd-body .gap-15-14 {
gap: var(--gap-15) var(--gap-14);
}
.custom-dd-body .gap-15-15 {
gap: var(--gap-15) var(--gap-15);
}
.custom-dd-body .gap-15-16 {
gap: var(--gap-15) var(--gap-16);
}
.custom-dd-body .gap-15-17 {
gap: var(--gap-15) var(--gap-17);
}
.custom-dd-body .p-15 {
padding: var(--gap-15);
}
.custom-dd-body .pt-15 {
padding-top: var(--gap-15);
}
.custom-dd-body .pb-15 {
padding-bottom: var(--gap-15);
}
.custom-dd-body .pl-15 {
padding-left: var(--gap-15);
}
.custom-dd-body .pr-15 {
padding-right: var(--gap-15);
}
.custom-dd-body .px-15 {
padding-left: var(--gap-15);
padding-right: var(--gap-15);
}
.custom-dd-body .py-15 {
padding-top: var(--gap-15);
padding-bottom: var(--gap-15);
}
.custom-dd-body .m-15 {
margin: var(--gap-15);
}
.custom-dd-body .mt-15 {
margin-top: var(--gap-15);
}
.custom-dd-body .mb-15 {
margin-bottom: var(--gap-15);
}
.custom-dd-body .ml-15 {
margin-left: var(--gap-15);
}
.custom-dd-body .mr-15 {
margin-right: var(--gap-15);
}
.custom-dd-body .mx-15 {
margin-left: var(--gap-15);
margin-right: var(--gap-15);
}
.custom-dd-body .my-15 {
margin-top: var(--gap-15);
margin-bottom: var(--gap-15);
}
.custom-dd-body .gap-16 {
gap: var(--gap-16);
}
.custom-dd-body .gap-16-1 {
gap: var(--gap-16) var(--gap-1);
}
.custom-dd-body .gap-16-2 {
gap: var(--gap-16) var(--gap-2);
}
.custom-dd-body .gap-16-3 {
gap: var(--gap-16) var(--gap-3);
}
.custom-dd-body .gap-16-4 {
gap: var(--gap-16) var(--gap-4);
}
.custom-dd-body .gap-16-5 {
gap: var(--gap-16) var(--gap-5);
}
.custom-dd-body .gap-16-6 {
gap: var(--gap-16) var(--gap-6);
}
.custom-dd-body .gap-16-7 {
gap: var(--gap-16) var(--gap-7);
}
.custom-dd-body .gap-16-8 {
gap: var(--gap-16) var(--gap-8);
}
.custom-dd-body .gap-16-9 {
gap: var(--gap-16) var(--gap-9);
}
.custom-dd-body .gap-16-10 {
gap: var(--gap-16) var(--gap-10);
}
.custom-dd-body .gap-16-11 {
gap: var(--gap-16) var(--gap-11);
}
.custom-dd-body .gap-16-12 {
gap: var(--gap-16) var(--gap-12);
}
.custom-dd-body .gap-16-13 {
gap: var(--gap-16) var(--gap-13);
}
.custom-dd-body .gap-16-14 {
gap: var(--gap-16) var(--gap-14);
}
.custom-dd-body .gap-16-15 {
gap: var(--gap-16) var(--gap-15);
}
.custom-dd-body .gap-16-16 {
gap: var(--gap-16) var(--gap-16);
}
.custom-dd-body .gap-16-17 {
gap: var(--gap-16) var(--gap-17);
}
.custom-dd-body .p-16 {
padding: var(--gap-16);
}
.custom-dd-body .pt-16 {
padding-top: var(--gap-16);
}
.custom-dd-body .pb-16 {
padding-bottom: var(--gap-16);
}
.custom-dd-body .pl-16 {
padding-left: var(--gap-16);
}
.custom-dd-body .pr-16 {
padding-right: var(--gap-16);
}
.custom-dd-body .px-16 {
padding-left: var(--gap-16);
padding-right: var(--gap-16);
}
.custom-dd-body .py-16 {
padding-top: var(--gap-16);
padding-bottom: var(--gap-16);
}
.custom-dd-body .m-16 {
margin: var(--gap-16);
}
.custom-dd-body .mt-16 {
margin-top: var(--gap-16);
}
.custom-dd-body .mb-16 {
margin-bottom: var(--gap-16);
}
.custom-dd-body .ml-16 {
margin-left: var(--gap-16);
}
.custom-dd-body .mr-16 {
margin-right: var(--gap-16);
}
.custom-dd-body .mx-16 {
margin-left: var(--gap-16);
margin-right: var(--gap-16);
}
.custom-dd-body .my-16 {
margin-top: var(--gap-16);
margin-bottom: var(--gap-16);
}
.custom-dd-body .gap-17 {
gap: var(--gap-17);
}
.custom-dd-body .gap-17-1 {
gap: var(--gap-17) var(--gap-1);
}
.custom-dd-body .gap-17-2 {
gap: var(--gap-17) var(--gap-2);
}
.custom-dd-body .gap-17-3 {
gap: var(--gap-17) var(--gap-3);
}
.custom-dd-body .gap-17-4 {
gap: var(--gap-17) var(--gap-4);
}
.custom-dd-body .gap-17-5 {
gap: var(--gap-17) var(--gap-5);
}
.custom-dd-body .gap-17-6 {
gap: var(--gap-17) var(--gap-6);
}
.custom-dd-body .gap-17-7 {
gap: var(--gap-17) var(--gap-7);
}
.custom-dd-body .gap-17-8 {
gap: var(--gap-17) var(--gap-8);
}
.custom-dd-body .gap-17-9 {
gap: var(--gap-17) var(--gap-9);
}
.custom-dd-body .gap-17-10 {
gap: var(--gap-17) var(--gap-10);
}
.custom-dd-body .gap-17-11 {
gap: var(--gap-17) var(--gap-11);
}
.custom-dd-body .gap-17-12 {
gap: var(--gap-17) var(--gap-12);
}
.custom-dd-body .gap-17-13 {
gap: var(--gap-17) var(--gap-13);
}
.custom-dd-body .gap-17-14 {
gap: var(--gap-17) var(--gap-14);
}
.custom-dd-body .gap-17-15 {
gap: var(--gap-17) var(--gap-15);
}
.custom-dd-body .gap-17-16 {
gap: var(--gap-17) var(--gap-16);
}
.custom-dd-body .gap-17-17 {
gap: var(--gap-17) var(--gap-17);
}
.custom-dd-body .p-17 {
padding: var(--gap-17);
}
.custom-dd-body .pt-17 {
padding-top: var(--gap-17);
}
.custom-dd-body .pb-17 {
padding-bottom: var(--gap-17);
}
.custom-dd-body .pl-17 {
padding-left: var(--gap-17);
}
.custom-dd-body .pr-17 {
padding-right: var(--gap-17);
}
.custom-dd-body .px-17 {
padding-left: var(--gap-17);
padding-right: var(--gap-17);
}
.custom-dd-body .py-17 {
padding-top: var(--gap-17);
padding-bottom: var(--gap-17);
}
.custom-dd-body .m-17 {
margin: var(--gap-17);
}
.custom-dd-body .mt-17 {
margin-top: var(--gap-17);
}
.custom-dd-body .mb-17 {
margin-bottom: var(--gap-17);
}
.custom-dd-body .ml-17 {
margin-left: var(--gap-17);
}
.custom-dd-body .mr-17 {
margin-right: var(--gap-17);
}
.custom-dd-body .mx-17 {
margin-left: var(--gap-17);
margin-right: var(--gap-17);
}
.custom-dd-body .my-17 {
margin-top: var(--gap-17);
margin-bottom: var(--gap-17);
}
@media (max-width: 1220px) {
html.custom-dd-html {
font-size: 8px;
}
}
.custom-dd-body nav.navigation {
width: var(--nav-width);
min-width: var(--nav-width);
max-width: var(--nav-width);
background-color: var(--tk-surface-elevated);
border: 1px solid var(--tk-border-solid-2);
min-height: calc(100vh - (var(--main-content-side-bottom) + var(--main-content-side-top)));
display: flex;
flex-direction: column;
}
.custom-dd-body nav.navigation hr {
display: none;
}
.custom-dd-body nav.navigation .logo-container {
padding: 0 var(--nav-padding-sides);
height: var(--breadcrumbs-height);
min-height: var(--breadcrumbs-height);
display: flex;
align-items: center;
justify-content: center;
border-bottom: 1px solid var(--tk-border-solid-2);
}
.custom-dd-body nav.navigation .logo-container img {
display: block;
width: 14.2rem;
height: 2.8rem;
object-fit: cover;
}
.custom-dd-body nav.navigation .navigation-container {
padding: 2.4rem var(--nav-padding-sides);
display: flex;
flex-direction: column;
gap: 1.6rem;
flex: 1;
max-height: calc(100vh - (var(--main-content-side-bottom) + var(--main-content-side-top) + var(--breadcrumbs-height) + 2px + var(--nav-footer-height)));
overflow-y: auto;
overflow-x: clip;
}
.custom-dd-body nav.navigation .navigation-link {
position: relative;
-webkit-transition: var(--def-trans-prop) var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
transition: var(--def-trans-prop) var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
display: flex;
gap: 0.8rem;
width: fit-content;
}
@media (hover: hover) {
.custom-dd-body nav.navigation .navigation-link:hover {
z-index: 1;
}
.custom-dd-body nav.navigation .navigation-link:hover:after {
opacity: 1;
}
}
.custom-dd-body nav.navigation .navigation-link::after {
height: 3.6rem;
width: var(--nav-width);
content: "";
display: block;
background: var(--tk-surface-highlight-1);
left: calc(var(--nav-padding-sides) * -1);
top: -0.6rem;
position: absolute;
z-index: -1;
opacity: 0;
pointer-events: none;
-webkit-transition: opacity var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
transition: opacity var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
}
.custom-dd-body nav.navigation .navigation-link.active {
z-index: 1;
}
.custom-dd-body nav.navigation .navigation-link.active:after {
opacity: 1;
}
.custom-dd-body nav.navigation .navigation-link .fav-cat {
color: var(--tk-ink-main-toned);
}
.custom-dd-body nav.navigation .wrap-in {
padding-top: 0.8rem;
padding-bottom: 0.8rem;
display: flex;
flex-direction: column;
gap: var(--nav-menuLink-gap);
padding-left: 2.8rem;
position: relative;
-webkit-transition: var(--def-trans-prop) var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
transition: var(--def-trans-prop) var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
}
.custom-dd-body nav.navigation .wrap-in::before {
content: "";
display: block;
position: absolute;
background-color: var(--tk-surface-strong);
width: 2px;
height: calc(100% - 2.8rem);
top: 0.8rem;
left: 0.9rem;
z-index: 2;
}
.custom-dd-body nav.navigation .wrap-in .star-link {
display: flex;
gap: 0.8rem;
}
.custom-dd-body nav.navigation .wrap-in .navigation-link::before,
.custom-dd-body nav.navigation .wrap-in .navigation-link .decor {
content: "";
display: block;
position: absolute;
background-color: var(--br-transparent);
width: 0.8rem;
height: 0.8rem;
top: 50%;
transform: translateY(-50%);
left: -2.2rem;
-webkit-transition: var(--def-trans-prop) var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
transition: var(--def-trans-prop) var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
}
.custom-dd-body nav.navigation .wrap-in .navigation-link:after {
left: -4.6rem;
}
.custom-dd-body nav.navigation .wrap-in .navigation-link.active {
z-index: 1;
}
.custom-dd-body nav.navigation .wrap-in .navigation-link.active::before {
background-color: var(--tk-surface-strong);
}
.custom-dd-body nav.navigation .wrap-in .navigation-link .fav-cat {
color: var(--tk-ink-main-toned);
}
.custom-dd-body nav.navigation .wrap-in .delete-fav {
background-color: var(--br-neutral-600);
display: block;
width: 2rem;
height: 2rem;
-webkit-mask-image: url("/icons/small-star.svg");
mask-image: url("/icons/small-star.svg");
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
margin-left: auto;
cursor: pointer;
}
@media (hover: hover) {
.custom-dd-body nav.navigation .wrap-in .delete-fav:hover {
background-color: var(--ui-danger-600);
}
}
.custom-dd-body nav.navigation .navigation-section .navigation-header {
display: flex;
align-items: center;
gap: 0.8rem;
cursor: pointer;
width: fit-content;
}
.custom-dd-body nav.navigation .navigation-section .navigation-header span, .custom-dd-body nav.navigation .navigation-section .navigation-header .icon {
-webkit-transition: opacity var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
transition: opacity var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
}
.custom-dd-body nav.navigation .navigation-section .navigation-header .arrow-icon {
margin-left: 0.4rem;
}
.custom-dd-body nav.navigation .navigation-section .navigation-header img, .custom-dd-body nav.navigation .navigation-section .navigation-header svg {
display: block;
width: 2rem;
height: 2rem;
-webkit-transition: var(--def-trans-prop) var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
transition: var(--def-trans-prop) var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
}
.custom-dd-body nav.navigation .navigation-section.is-empty .navigation-header {
pointer-events: none;
cursor: default;
}
.custom-dd-body nav.navigation .navigation-section.is-empty .arrow-icon {
display: none;
}
.custom-dd-body nav.navigation .navigation-section a {
padding: unset;
margin: unset;
}
@media (hover: hover) {
.custom-dd-body nav.navigation .navigation-section .navigation-header:hover span, .custom-dd-body nav.navigation .navigation-section .navigation-header:hover .icon {
opacity: 0.7;
}
.custom-dd-body nav.navigation .navigation-section .navigation-header:hover .arrow-icon svg {
margin-top: -0.3em;
}
}
.custom-dd-body nav.navigation .navigation-section.opened .arrow-icon svg {
transform: rotate(180deg);
}
.custom-dd-body nav.navigation .header-controls {
padding: var(--nav-padding-sides);
background-color: var(--tk-surface-highlight-2);
border-top: 1px solid var(--tk-border-solid-2);
display: flex;
flex-direction: column;
gap: 0.8rem;
}
.custom-dd-body nav.navigation .header-controls a,
.custom-dd-body nav.navigation .header-controls .nav-footer-link {
cursor: pointer;
display: flex;
gap: 0.8rem;
align-items: center;
text-decoration: underline;
text-decoration-color: transparent;
width: fit-content;
}
@media (hover: hover) {
.custom-dd-body nav.navigation .header-controls a:hover,
.custom-dd-body nav.navigation .header-controls .nav-footer-link:hover {
text-decoration-color: inherit;
}
.custom-dd-body nav.navigation .header-controls a:hover .user-initials,
.custom-dd-body nav.navigation .header-controls .nav-footer-link:hover .user-initials {
text-decoration: none !important;
display: inline-flex;
}
}
.custom-dd-body nav.navigation .header-controls a .icon,
.custom-dd-body nav.navigation .header-controls .nav-footer-link .icon {
width: 2.4rem;
height: 2.4rem;
display: block;
display: flex;
align-items: center;
justify-content: center;
}
.custom-dd-body nav.navigation .header-controls a .icon svg,
.custom-dd-body nav.navigation .header-controls .nav-footer-link .icon svg {
width: 2rem;
height: 2rem;
display: block;
}
.custom-dd-body nav.navigation .header-controls a .value,
.custom-dd-body nav.navigation .header-controls .nav-footer-link .value {
color: var(--tk-ink-main-secondary, #545051);
}
.custom-dd-body nav.navigation .header-controls .user-profile-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.8rem;
width: 100%;
}
.custom-dd-body nav.navigation .header-controls .logout-form {
margin: 0;
padding: 0;
display: flex;
}
.custom-dd-body nav.navigation .header-controls .logout-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 3.6rem;
min-width: 3.6rem;
height: 3.6rem;
min-height: 3.6rem;
padding: 0;
background: transparent;
border: none;
border-radius: 100rem;
color: var(--tk-ink-main-primary, #262223);
cursor: pointer;
text-decoration: none;
margin-top: -0.8rem;
margin-bottom: -0.8rem;
}
.custom-dd-body nav.navigation .header-controls .logout-button svg {
width: 2rem;
height: 2rem;
display: block;
}
@media (hover: hover) {
.custom-dd-body nav.navigation .header-controls .logout-button:hover {
background-color: var(--tk-surface-highlight-3, rgba(0, 0, 0, 0.06));
}
}
.custom-dd-body .locale-form {
width: 100%;
}
.custom-dd-body .locale-form .select-wrap {
width: 100%;
}
.custom-dd-body nav.navigation-version2 {
width: var(--nav-width);
min-width: var(--nav-width);
max-width: var(--nav-width);
background-color: var(--tk-surface-elevated);
border: 1px solid var(--tk-border-solid-2);
min-height: calc(100vh - (var(--main-content-side-bottom) + var(--main-content-side-top)));
display: flex;
flex-direction: column;
-webkit-transition: var(--def-trans-prop) var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
transition: var(--def-trans-prop) var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
position: relative;
}
.custom-dd-body nav.navigation-version2 hr {
display: none;
}
.custom-dd-body nav.navigation-version2 .logo-container {
padding: 0 var(--nav-padding-sides);
height: var(--breadcrumbs-height);
min-height: var(--breadcrumbs-height);
display: flex;
align-items: center;
justify-content: left;
border-bottom: 1px solid var(--tk-border-solid-2);
display: flex;
flex-direction: row;
gap: var(--gap-7);
-webkit-transition: var(--def-trans-prop) var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
transition: var(--def-trans-prop) var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
}
.custom-dd-body nav.navigation-version2 .logo-container .popup-button {
width: 2.4rem;
height: 2.4rem;
flex-shrink: 0;
}
.custom-dd-body nav.navigation-version2 .logo-container .logo-in {
display: block;
height: 2.8rem;
}
.custom-dd-body nav.navigation-version2 .logo-container .logo-in svg path {
fill: var(--logo-color);
}
.custom-dd-body nav.navigation-version2 .logo-container img {
display: block;
width: 14.2rem;
height: 2.8rem;
object-fit: cover;
}
.custom-dd-body nav.navigation-version2 .collapsed-logo-container {
padding: 0 var(--nav-padding-sides);
-webkit-transition: var(--def-trans-prop) var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
transition: var(--def-trans-prop) var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
}
.custom-dd-body nav.navigation-version2 .collapsed-logo-container .logo-in {
display: block;
width: 3.4rem;
max-height: 0rem;
overflow: clip;
-webkit-transition: var(--def-trans-prop) var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
transition: var(--def-trans-prop) var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
}
.custom-dd-body nav.navigation-version2 .collapsed-logo-container .logo-in svg path {
fill: var(--logo-color);
}
.custom-dd-body nav.navigation-version2 .navigation-container {
padding: 2.4rem var(--nav-padding-sides);
display: flex;
flex-direction: column;
gap: 1.2rem;
flex: 1;
max-height: calc(100vh - (var(--main-content-side-bottom) + var(--main-content-side-top) + var(--breadcrumbs-height) + 2px + var(--nav-footer-height)));
overflow-y: auto;
overflow-x: clip;
-webkit-transition: var(--def-trans-prop) var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
transition: var(--def-trans-prop) var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
}
.custom-dd-body nav.navigation-version2 .navigation-link {
position: relative;
-webkit-transition: var(--def-trans-prop) var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
transition: var(--def-trans-prop) var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
display: flex;
gap: 0.8rem;
width: 100%;
}
.custom-dd-body nav.navigation-version2 .navigation-link span:nth-child(n+2) {
flex-shrink: 0;
max-width: calc(var(--nav-width) - 2 * var(--nav-padding-sides));
-webkit-transition: var(--def-trans-prop) var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
transition: var(--def-trans-prop) var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
}
.custom-dd-body nav.navigation-version2 .navigation-link .badge {
margin-left: auto;
margin-top: var(--gap-1);
}
.custom-dd-body nav.navigation-version2 .navigation-link::after {
height: calc(1.2rem + 100%);
width: calc(var(--nav-width) - 2px);
content: "";
display: block;
left: calc(var(--nav-padding-sides) * -1);
top: -0.6rem;
position: absolute;
z-index: -1;
opacity: 0;
pointer-events: none;
-webkit-transition: opacity var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
transition: opacity var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
}
.custom-dd-body nav.navigation-version2 .navigation-link.is-active {
z-index: 1;
}
.custom-dd-body nav.navigation-version2 .navigation-link.is-active:after {
opacity: 1;
background: var(--tk-surface-highlight-1);
}
@media (hover: hover) {
.custom-dd-body nav.navigation-version2 .navigation-link:hover {
z-index: 1;
}
.custom-dd-body nav.navigation-version2 .navigation-link:hover:after {
opacity: 1;
background: var(--tk-surface-highlight-2);
}
}
.custom-dd-body nav.navigation-version2 .navigation-link.visible {
z-index: 1;
}
.custom-dd-body nav.navigation-version2 .navigation-link.visible:after {
opacity: 1;
background: var(--tk-surface-highlight-2);
}
.custom-dd-body nav.navigation-version2 .navigation-link .fav-cat {
color: var(--tk-ink-main-toned);
}
.custom-dd-body nav.navigation-version2 .wrap-in {
padding-top: 1.4rem;
padding-bottom: 0.6rem;
display: flex;
flex-direction: column;
gap: var(--nav-menuLink-gap);
padding-left: 2.4rem;
position: relative;
margin-bottom: -0.6rem;
margin-top: -0.2rem;
-webkit-transition: var(--def-trans-prop) var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
transition: var(--def-trans-prop) var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
}
.custom-dd-body nav.navigation-version2 .wrap-in .star-link {
display: flex;
gap: 0.8rem;
}
.custom-dd-body nav.navigation-version2 .wrap-in .navigation-link:after {
left: -4.8rem;
}
.custom-dd-body nav.navigation-version2 .wrap-in .navigation-link.active {
z-index: 1;
}
.custom-dd-body nav.navigation-version2 .wrap-in .navigation-link.active::before {
background-color: var(--tk-surface-strong);
}
.custom-dd-body nav.navigation-version2 .wrap-in .navigation-link .fav-cat {
color: var(--tk-ink-main-toned);
}
.custom-dd-body nav.navigation-version2 .wrap-in .delete-fav {
background-color: var(--br-neutral-600);
display: block;
width: 2rem;
height: 2rem;
-webkit-mask-image: url("/icons/small-star.svg");
mask-image: url("/icons/small-star.svg");
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
margin-left: auto;
cursor: pointer;
}
@media (hover: hover) {
.custom-dd-body nav.navigation-version2 .wrap-in .delete-fav:hover {
background-color: var(--ui-danger-600);
}
}
.custom-dd-body nav.navigation-version2 .wrap-in .wrap-in .navigation-link:after {
left: -7.2rem !important;
}
.custom-dd-body nav.navigation-version2 .wrap-in .wrap-in .wrap-in .navigation-link:after {
left: -9.6rem !important;
}
.custom-dd-body nav.navigation-version2 .wrap-in .wrap-in .wrap-in .wrap-in .navigation-link:after {
left: -12rem !important;
}
.custom-dd-body nav.navigation-version2 .wrap-in .wrap-in .wrap-in .wrap-in .wrap-in .navigation-link:after {
left: -14.4rem !important;
}
.custom-dd-body nav.navigation-version2 .navigation-section {
position: relative;
}
.custom-dd-body nav.navigation-version2 .navigation-section .navigation-header {
display: flex;
align-items: flex-start;
gap: 0.8rem;
cursor: pointer;
width: 100%;
}
.custom-dd-body nav.navigation-version2 .navigation-section .navigation-header .icon-slide-container {
height: 2.4rem;
overflow: clip;
}
.custom-dd-body nav.navigation-version2 .navigation-section .navigation-header .icon-slide-container .slide-in {
display: grid;
grid-template-columns: 2.4rem;
grid-template-rows: 2.4rem 2.4rem;
align-items: center;
justify-content: center;
transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}
.custom-dd-body nav.navigation-version2 .navigation-section .navigation-header .icon-slide-container .slide-in .icon {
grid-column: 1;
grid-row: 1;
flex-shrink: 0;
}
.custom-dd-body nav.navigation-version2 .navigation-section .navigation-header .icon-slide-container .slide-in .arrow-icon {
grid-column: 1;
grid-row: 2;
flex-shrink: 0;
}
.custom-dd-body nav.navigation-version2 .navigation-section .navigation-header .icon {
-webkit-transition: opacity var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
transition: opacity var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
}
.custom-dd-body nav.navigation-version2 .navigation-section .navigation-header .icon {
flex-shrink: 0;
}
.custom-dd-body nav.navigation-version2 .navigation-section img,
.custom-dd-body nav.navigation-version2 .navigation-section svg {
display: block;
width: 2.4rem;
height: 2.4rem;
-webkit-transition: var(--def-trans-prop) var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
transition: var(--def-trans-prop) var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
}
.custom-dd-body nav.navigation-version2 .navigation-section.is-empty .navigation-header {
pointer-events: none;
cursor: default;
}
.custom-dd-body nav.navigation-version2 .navigation-section.is-empty .arrow-icon {
display: none;
}
.custom-dd-body nav.navigation-version2 .navigation-section a {
padding: unset;
margin: unset;
}
@media (hover: hover) {
.custom-dd-body nav.navigation-version2 .navigation-section .navigation-header.with-children:hover .slide-in {
transform: translateY(-50%);
}
}
.custom-dd-body nav.navigation-version2 .navigation-section.opened .arrow-icon svg {
transform: rotate(180deg);
}
.custom-dd-body nav.navigation-version2 .header-controls {
padding: var(--nav-padding-sides);
background-color: var(--tk-surface-highlight-2);
border-top: 1px solid var(--tk-border-solid-2);
display: flex;
flex-direction: column;
gap: 0.8rem;
}
.custom-dd-body nav.navigation-version2 .header-controls a,
.custom-dd-body nav.navigation-version2 .header-controls .nav-footer-link {
cursor: pointer;
display: flex;
gap: 0.8rem;
align-items: center;
text-decoration: underline;
text-decoration-color: transparent;
width: fit-content;
}
@media (hover: hover) {
.custom-dd-body nav.navigation-version2 .header-controls a:hover,
.custom-dd-body nav.navigation-version2 .header-controls .nav-footer-link:hover {
text-decoration-color: inherit;
}
.custom-dd-body nav.navigation-version2 .header-controls a:hover .user-initials,
.custom-dd-body nav.navigation-version2 .header-controls .nav-footer-link:hover .user-initials {
text-decoration: none !important;
display: inline-flex;
}
}
.custom-dd-body nav.navigation-version2 .header-controls a .icon,
.custom-dd-body nav.navigation-version2 .header-controls .nav-footer-link .icon {
width: 2.4rem;
height: 2.4rem;
display: block;
display: flex;
align-items: center;
justify-content: center;
}
.custom-dd-body nav.navigation-version2 .header-controls a .icon svg,
.custom-dd-body nav.navigation-version2 .header-controls .nav-footer-link .icon svg {
width: 2rem;
height: 2rem;
display: block;
}
.custom-dd-body nav.navigation-version2 .header-controls a .value,
.custom-dd-body nav.navigation-version2 .header-controls .nav-footer-link .value {
color: var(--tk-ink-main-secondary, #545051);
}
.custom-dd-body nav.navigation-version2 .header-controls .user-profile-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.8rem;
width: 100%;
}
.custom-dd-body nav.navigation-version2 .header-controls .logout-form {
margin: 0;
padding: 0;
display: flex;
}
.custom-dd-body nav.navigation-version2 .header-controls .logout-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 3.6rem;
min-width: 3.6rem;
height: 3.6rem;
min-height: 3.6rem;
padding: 0;
background: transparent;
border: none;
border-radius: 100rem;
color: var(--tk-ink-main-primary, #262223);
cursor: pointer;
text-decoration: none;
margin-top: -0.8rem;
margin-bottom: -0.8rem;
}
.custom-dd-body nav.navigation-version2 .header-controls .logout-button svg {
width: 2rem;
height: 2rem;
display: block;
}
@media (hover: hover) {
.custom-dd-body nav.navigation-version2 .header-controls .logout-button:hover {
background-color: var(--tk-surface-highlight-3, rgba(0, 0, 0, 0.06));
}
}
.custom-dd-body nav.navigation-version2 .nav-footer .nav-footer-in {
padding: var(--gap-8);
gap: var(--gap-6);
}
.custom-dd-body nav.navigation-version2 .nav-footer .nav-footer-in .ico-button {
width: 2.4rem;
height: 2.4rem;
cursor: pointer;
}
.custom-dd-body nav.navigation-version2 .collapsed-sidebar-menu-container {
position: absolute;
top: 0;
left: 0;
z-index: 1;
opacity: 0;
transform: translateY(-1.2rem);
pointer-events: none;
padding-left: var(--gap-5);
-webkit-transition: opacity 0.2s var(--def-trans-type) var(--def-trans-delay);
transition: opacity 0.2s var(--def-trans-type) var(--def-trans-delay);
}
.custom-dd-body nav.navigation-version2 .collapsed-sidebar-menu-container .collapsed-sidebar-menu-container-in {
background-color: var(--tk-surface-elevated);
box-shadow: 0 1px 8px 0 rgba(35, 31, 32, 0.16);
border-radius: var(--nb-common-radius-control-soft);
overflow: clip;
}
.custom-dd-body nav.navigation-version2 .collapsed-sidebar-menu-container .collapsed-sidebar-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--gap-5);
padding: var(--gap-5) var(--gap-5) var(--gap-5) var(--gap-12);
background-color: var(--tk-surface-highlight-2);
}
.custom-dd-body nav.navigation-version2 .collapsed-sidebar-menu-container .collapsed-sidebar-header span, .custom-dd-body nav.navigation-version2 .collapsed-sidebar-menu-container .collapsed-sidebar-header svg {
color: var(--tk-ink-main-primary);
}
.custom-dd-body nav.navigation-version2 .collapsed-sidebar-menu-container .collapsed-sidebar-header .arrow-icon {
flex-shrink: 0;
width: 1.9rem;
height: 1.8rem;
}
.custom-dd-body nav.navigation-version2 .collapsed-sidebar-menu-container .collapsed-sidebar-content {
padding: var(--space-4);
display: flex;
flex-direction: column;
}
.custom-dd-body nav.navigation-version2 .collapsed-sidebar-menu-container .collapsed-sidebar-content .collapsed-link {
display: flex;
flex-direction: row;
align-items: center;
gap: var(--gap-15);
padding: var(--gap-3) var(--gap-4) var(--gap-3) var(--gap-15);
border-radius: var(--nb-common-radius-control-soft);
}
.custom-dd-body nav.navigation-version2 .collapsed-sidebar-menu-container .collapsed-sidebar-content .collapsed-link:hover {
background-color: var(--tk-surface-highlight-2);
}
.custom-dd-body nav.navigation-version2 .collapsed-sidebar-menu-container .collapsed-sidebar-content .collapsed-wrap-in .collapsed-link {
padding-left: calc(var(--gap-15) + 2.4rem * (1 - 1));
}
.custom-dd-body nav.navigation-version2 .collapsed-sidebar-menu-container .collapsed-sidebar-content .collapsed-wrap-in .collapsed-wrap-in .collapsed-link {
padding-left: calc(var(--gap-15) + 2.4rem * (2 - 1));
}
.custom-dd-body nav.navigation-version2 .collapsed-sidebar-menu-container .collapsed-sidebar-content .collapsed-wrap-in .collapsed-wrap-in .collapsed-wrap-in .collapsed-link {
padding-left: calc(var(--gap-15) + 2.4rem * (3 - 1));
}
.custom-dd-body nav.navigation-version2 .collapsed-sidebar-menu-container .collapsed-sidebar-content .collapsed-wrap-in .collapsed-wrap-in .collapsed-wrap-in .collapsed-wrap-in .collapsed-link {
padding-left: calc(var(--gap-15) + 2.4rem * (4 - 1));
}
.custom-dd-body nav.navigation-version2 .collapsed-sidebar-menu-container .collapsed-sidebar-content .collapsed-wrap-in .collapsed-wrap-in .collapsed-wrap-in .collapsed-wrap-in .collapsed-wrap-in .collapsed-link {
padding-left: calc(var(--gap-15) + 2.4rem * (5 - 1));
}
.custom-dd-body nav.navigation-version2 .collapsed-sidebar-menu-container::before {
content: "";
position: absolute;
top: 0;
left: -2.4rem;
width: 2.4rem;
height: 5.2rem;
background: transparent;
}
.custom-dd-body nav.navigation-version2 .collapsed-sidebar-menu-container.visible, .custom-dd-body nav.navigation-version2 .collapsed-sidebar-menu-container.test {
opacity: 1;
pointer-events: auto;
}
html.sidebar-collapsed .custom-dd-body nav.navigation-version2 {
max-width: 7rem;
min-width: 7rem;
}
html.sidebar-collapsed .custom-dd-body nav.navigation-version2 .logo-container {
max-height: 2rem;
height: 2rem;
min-height: 2rem;
max-width: 0rem;
width: 0rem;
min-width: 0rem;
}
@media (hover: hover) {
html.sidebar-collapsed .custom-dd-body nav.navigation-version2 .navigation-header.with-children:hover .slide-in {
transform: translateY(0);
}
}
html.sidebar-collapsed .custom-dd-body nav.navigation-version2 .navigation-container {
padding-left: 2rem;
padding-right: 2rem;
gap: var(--gap-8);
max-height: calc(100vh - (var(--main-content-side-bottom) + var(--main-content-side-top) + 5.4rem + 2px + var(--nav-footer-height)));
}
html.sidebar-collapsed .custom-dd-body nav.navigation-version2 .collapsed-logo-container {
padding-left: 1.6rem;
padding-right: 1.6rem;
}
html.sidebar-collapsed .custom-dd-body nav.navigation-version2 .logo-container {
border-color: transparent;
padding-left: 2.2rem;
padding-right: 2.2rem;
}
html.sidebar-collapsed .custom-dd-body nav.navigation-version2 .collapsed-logo-container .logo-in {
max-height: 3.4rem;
}
html.sidebar-collapsed .custom-dd-body nav.navigation-version2 .slide-in {
grid-template-columns: 2.8rem !important;
grid-template-rows: 2.8rem 2.8rem !important;
}
html.sidebar-collapsed .custom-dd-body nav.navigation-version2 .icon,
html.sidebar-collapsed .custom-dd-body nav.navigation-version2 .icon-slide-container {
width: 2.8rem !important;
height: 2.8rem !important;
}
html.sidebar-collapsed .custom-dd-body nav.navigation-version2 .icon > svg,
html.sidebar-collapsed .custom-dd-body nav.navigation-version2 .icon-slide-container > svg {
width: 2.8rem !important;
height: 2.8rem !important;
}
html.sidebar-collapsed .custom-dd-body nav.navigation-version2 .navigation-content {
max-height: 0px !important;
}
html.sidebar-collapsed .custom-dd-body nav.navigation-version2 .navigation-link span:nth-child(n+2) {
opacity: 0;
}
html.sidebar-collapsed .custom-dd-body nav.navigation-version2 .navigation-link:after {
width: 5.2rem;
height: 5.2rem;
left: -1.2rem;
top: -1.2rem;
border-radius: 50%;
}
html.sidebar-collapsed .custom-dd-body nav.navigation-version2 .nav-footer-in {
flex-direction: column-reverse !important;
}
.custom-dd-body .locale-form {
width: 100%;
}
.custom-dd-body .locale-form .select-wrap {
width: 100%;
}
.custom-dd-body .nav-footer--animating {
opacity: 0 !important;
transition: none !important;
}
.custom-dd-body .main-content__header {
padding-left: var(--main-content-side-left);
padding-right: var(--main-content-side-right);
padding-top: var(--header-type-side-top);
padding-bottom: 1.6rem;
border: none;
display: flex;
flex-direction: column;
gap: 2.6rem;
align-items: flex-start;
}
.custom-dd-body .main-content__header .main-content__page-title {
display: flex;
flex-direction: row;
gap: 3.2rem;
align-items: flex-end;
}
.custom-dd-body .main-content__header .title-container {
display: flex;
flex-direction: row;
gap: 1.6rem;
align-items: center;
}
.custom-dd-body .main-content__header .title-container .icon, .custom-dd-body .main-content__header .title-container svg {
width: 4.8rem;
height: 4.8rem;
}
.custom-dd-body .main-content__header .ammount-of-total {
color: var(--tk-ink-main-toned);
}
.custom-dd-body .main-content__body {
padding-left: var(--main-content-side-left);
padding-right: var(--main-content-side-right);
padding-top: 0;
padding-bottom: var(--main-content-body-bottom);
}
.custom-dd-body .breadcrumbs {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
gap: 2.4rem;
width: 100%;
min-width: 0;
}
.custom-dd-body .breadcrumbs:not(.type-clear) {
padding-left: var(--main-content-side-left);
padding-right: var(--gap-5);
height: calc(var(--breadcrumbs-height) + 1px);
border-bottom: 1px solid var(--tk-border-solid-2);
border-top: 1px solid var(--tk-border-solid-2);
border-right: 1px solid var(--tk-border-solid-2);
background-color: var(--tk-surface-elevated);
}
.custom-dd-body .breadcrumbs .right-content {
margin-left: auto;
display: flex;
flex-direction: row;
align-items: center;
gap: 2.4rem;
}
.custom-dd-body .breadcrumbs .breadcrumbs-nav {
display: flex;
height: 100%;
align-items: center;
flex: 1;
min-width: 0;
}
.custom-dd-body .breadcrumbs .icon,
.custom-dd-body .breadcrumbs svg {
display: block;
width: 2.8rem;
height: 2.8rem;
-webkit-transition: var(--def-trans-prop) var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
transition: var(--def-trans-prop) var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
}
.custom-dd-body .breadcrumbs .icon.subpage-standalone svg path,
.custom-dd-body .breadcrumbs svg.subpage-standalone svg path {
fill: var(--br-neutral-700);
}
.custom-dd-body .breadcrumbs .breadcrumbs-item {
display: flex;
align-items: center;
gap: 0.8rem;
flex-shrink: 1;
min-width: 0;
}
.custom-dd-body .breadcrumbs .breadcrumbs-item a,
.custom-dd-body .breadcrumbs .breadcrumbs-item span {
display: block;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
min-width: 0;
max-width: 100%;
}
.custom-dd-body .breadcrumbs .breadcrumbs-item a {
text-decoration-color: transparent !important;
color: inherit !important;
}
@media (hover: hover) {
.custom-dd-body .breadcrumbs .breadcrumbs-item a:hover {
text-decoration-color: var(--tk-ink-other-link) !important;
color: var(--tk-ink-other-link) !important;
opacity: 1 !important;
}
}
.custom-dd-body .breadcrumbs .breadcrumbs-list {
height: 100%;
color: var(--tk-ink-main-toned);
display: flex;
flex-direction: row;
align-items: center;
gap: 2.4rem;
min-width: 0;
width: 100%;
}
.custom-dd-body .breadcrumbs .breadcrumbs-list li {
min-width: 0;
flex-shrink: 1;
}
.custom-dd-body .breadcrumbs .breadcrumbs-list li:first-child {
flex-shrink: 0;
}
.custom-dd-body .breadcrumbs .breadcrumbs-list li:last-child {
color: var(--tk-ink-main-primary);
flex-shrink: 100;
}
.custom-dd-body .breadcrumbs .breadcrumbs-list li:not(:first-child) {
position: relative;
}
.custom-dd-body .breadcrumbs .breadcrumbs-list li:not(:first-child)::before {
content: "";
position: absolute;
display: block;
left: -1.5rem;
top: 50%;
transform: translateY(-50%);
width: 0.6rem;
height: 0.6rem;
background-color: var(--tk-ink-main-toned);
}
.custom-dd-body .breadcrumbs ol,
.custom-dd-body .breadcrumbs li {
padding: 0;
}
.custom-dd-body .breadcrumbs.type-2 .breadcrumbs-list {
gap: var(--gap-4);
}
.custom-dd-body .breadcrumbs.type-2 li:not(:first-child):before {
display: none;
}
.custom-dd-body .breadcrumbs.type-2 .icon,
.custom-dd-body .breadcrumbs.type-2 svg {
width: 2.4rem;
height: 2.4rem;
}
.custom-dd-body .breadcrumbs .addional-buttons-container {
padding-left: var(--gap-5);
border-left: 1px solid var(--tk-border-solid-2);
height: 100%;
}
.custom-dd-body .breadcrumbs .addional-buttons-container .ico-button-container {
width: 4.4rem;
height: 4.4rem;
position: relative;
}
.custom-dd-body .breadcrumbs .addional-buttons-container .ico-button-container .dot {
position: absolute;
right: 0;
top: 0;
}
.custom-dd-body .breadcrumbs .addional-buttons-container .ico-button-container svg {
display: block;
}
.custom-dd-body .breadcrumbs .addional-buttons-container .ico-button-container .ico-in svg {
width: 2.4rem;
height: 2.4rem;
}
.custom-dd-body .breadcrumbs .addional-buttons-container .ico-button-container.show-dot .dot {
display: flex;
}
.custom-dd-body .breadcrumb-add-buttons {
display: flex;
flex-direction: row;
gap: var(--nb-molecule-buttons-row-gap-s, 8px);
}
.custom-dd-body .breadcrumb-add-buttons:empty {
display: none;
}
.custom-dd-body .breadcrumb-add-buttons:not(:has(*)) {
display: none;
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn), .custom-dd-body .button:not(.arrow):not(.clear-btn), .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn), .custom-dd-body button.link:not(.arrow):not(.clear-btn), .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn),
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn),
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn),
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn),
.custom-dd-body .button:not(.arrow):not(.clear-btn) {
display: inline-flex;
justify-content: center;
align-items: center;
position: relative;
font-family: var(--font-main, sans-serif);
font-weight: 500;
text-decoration: none;
white-space: nowrap;
line-height: 1;
border-style: solid;
border-radius: var(--nb-common-radius-control-pill, 100rem);
cursor: pointer;
transition: all var(--def-trans-time, 0.2s) ease-in-out, outline-width 0s;
-webkit-appearance: none;
outline: 0 solid transparent;
outline-offset: 2px;
box-sizing: border-box;
background-color: var(--btn-bg);
color: var(--btn-col);
border-color: var(--btn-bd);
}
@media (hover: hover) {
.custom-dd-body .btn:not(.arrow):not(.clear-btn):hover, .custom-dd-body .button:not(.arrow):not(.clear-btn):hover, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn):hover, .custom-dd-body button.link:not(.arrow):not(.clear-btn):hover, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn):hover,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn):hover,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn):hover,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn):hover,
.custom-dd-body .button:not(.arrow):not(.clear-btn):hover {
background-color: var(--btn-h-bg);
color: var(--btn-h-col);
border-color: var(--btn-h-bd);
opacity: 1;
}
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn):active, .custom-dd-body .btn:not(.arrow):not(.clear-btn).is-active, .custom-dd-body .button:not(.arrow):not(.clear-btn):active, .custom-dd-body .button:not(.arrow):not(.clear-btn).is-active, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn):active, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).is-active, .custom-dd-body button.link:not(.arrow):not(.clear-btn):active, .custom-dd-body button.link:not(.arrow):not(.clear-btn).is-active, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn):active, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).is-active,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn):active,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).is-active,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn):active,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).is-active,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn):active,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).is-active,
.custom-dd-body .button:not(.arrow):not(.clear-btn):active,
.custom-dd-body .button:not(.arrow):not(.clear-btn).is-active {
background-color: var(--btn-a-bg);
color: var(--btn-a-col);
border-color: var(--btn-a-bd);
opacity: 1;
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn):focus, .custom-dd-body .btn:not(.arrow):not(.clear-btn):focus-visible, .custom-dd-body .button:not(.arrow):not(.clear-btn):focus, .custom-dd-body .button:not(.arrow):not(.clear-btn):focus-visible, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn):focus, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn):focus-visible, .custom-dd-body button.link:not(.arrow):not(.clear-btn):focus, .custom-dd-body button.link:not(.arrow):not(.clear-btn):focus-visible, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn):focus, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn):focus-visible,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn):focus,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn):focus-visible,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn):focus,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn):focus-visible,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn):focus,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn):focus-visible,
.custom-dd-body .button:not(.arrow):not(.clear-btn):focus,
.custom-dd-body .button:not(.arrow):not(.clear-btn):focus-visible {
background-color: var(--btn-h-bg);
color: var(--btn-h-col);
border-color: var(--btn-h-bd);
outline: var(--nb-common-stroke-m, 1.5px) solid var(--btn-focus-ring);
opacity: 1;
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn):disabled, .custom-dd-body .btn:not(.arrow):not(.clear-btn).is-disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn):disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).is-disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn):disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).is-disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn):disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).is-disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn):disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).is-disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn):disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).is-disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn):disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).is-disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn):disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).is-disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn):disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).is-disabled {
cursor: not-allowed;
pointer-events: none;
box-shadow: none;
opacity: 0.5;
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn) svg, .custom-dd-body .button:not(.arrow):not(.clear-btn) svg, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn) svg, .custom-dd-body button.link:not(.arrow):not(.clear-btn) svg, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn) svg,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn) svg,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn) svg,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn) svg,
.custom-dd-body .button:not(.arrow):not(.clear-btn) svg {
fill: currentColor;
flex-shrink: 0;
display: block;
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--size-l, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--size-l, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--size-l, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--size-l, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--size-l,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--size-l,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--size-l,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--size-l,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--size-l {
height: var(--nb-common-control-size-l, 5.2rem);
padding: 0 var(--nb-atom-button-l-sides, 2.8rem);
gap: var(--nb-atom-button-l-gap, 1rem);
font-size: var(--tg-styles-button-m-size, 1.8rem);
--btn-border-width: var(--nb-common-stroke-m, 1.5px);
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--size-l svg, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--size-l svg, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--size-l svg, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--size-l svg, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--size-l svg,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--size-l svg,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--size-l svg,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--size-l svg,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--size-l svg {
width: var(--nb-atom-button-l-icon-size, 2.4rem);
min-width: var(--nb-atom-button-l-icon-size, 2.4rem);
max-width: var(--nb-atom-button-l-icon-size, 2.4rem);
height: var(--nb-atom-button-l-icon-size, 2.4rem);
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--size-l svg:first-child, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--size-l svg:first-child, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--size-l svg:first-child, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--size-l svg:first-child, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--size-l svg:first-child,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--size-l svg:first-child,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--size-l svg:first-child,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--size-l svg:first-child,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--size-l svg:first-child {
margin-left: -4px;
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--size-l svg:last-child, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--size-l svg:last-child, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--size-l svg:last-child, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--size-l svg:last-child, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--size-l svg:last-child,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--size-l svg:last-child,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--size-l svg:last-child,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--size-l svg:last-child,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--size-l svg:last-child {
margin-right: -4px;
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--size-l.btn--compact, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--size-l.btn--compact, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--size-l.btn--compact, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--size-l.btn--compact, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--size-l.btn--compact,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--size-l.btn--compact,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--size-l.btn--compact,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--size-l.btn--compact,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--size-l.btn--compact {
padding-left: 0;
padding-right: 0;
min-height: auto;
height: auto;
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--size-m, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--size-m, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--size-m, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--size-m, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--size-m,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--size-m,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--size-m,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--size-m,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--size-m {
height: var(--nb-common-control-size-m, 4.4rem);
padding: 0 var(--nb-atom-button-m-sides, 2rem);
gap: var(--nb-atom-button-m-gap, 0.8rem);
font-size: var(--tg-styles-button-s-size, 1.8rem);
--btn-border-width: var(--nb-common-stroke-m, 1.5px);
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--size-m svg, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--size-m svg, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--size-m svg, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--size-m svg, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--size-m svg,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--size-m svg,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--size-m svg,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--size-m svg,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--size-m svg {
width: var(--nb-atom-button-m-icon-size, 2rem);
min-width: var(--nb-atom-button-m-icon-size, 2rem);
max-width: var(--nb-atom-button-m-icon-size, 2rem);
height: var(--nb-atom-button-m-icon-size, 2rem);
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--size-m svg:first-child, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--size-m svg:first-child, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--size-m svg:first-child, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--size-m svg:first-child, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--size-m svg:first-child,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--size-m svg:first-child,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--size-m svg:first-child,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--size-m svg:first-child,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--size-m svg:first-child {
margin-left: -2px;
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--size-m svg:last-child, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--size-m svg:last-child, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--size-m svg:last-child, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--size-m svg:last-child, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--size-m svg:last-child,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--size-m svg:last-child,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--size-m svg:last-child,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--size-m svg:last-child,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--size-m svg:last-child {
margin-right: -2px;
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--size-m.btn--compact, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--size-m.btn--compact, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--size-m.btn--compact, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--size-m.btn--compact, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--size-m.btn--compact,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--size-m.btn--compact,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--size-m.btn--compact,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--size-m.btn--compact,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--size-m.btn--compact {
padding-left: 0;
padding-right: 0;
min-height: auto;
height: auto;
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--size-s, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--size-s, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--size-s, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--size-s, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--size-s,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--size-s,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--size-s,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--size-s,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--size-s {
height: var(--nb-common-control-size-s, 3.6rem);
padding: 0 var(--nb-atom-button-s-sides, 1.6rem);
gap: var(--nb-atom-button-s-gap, 0.8rem);
font-size: var(--tg-styles-button-xs-size, 1.6rem);
--btn-border-width: var(--nb-common-stroke-m, 1.5px);
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--size-s svg, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--size-s svg, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--size-s svg, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--size-s svg, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--size-s svg,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--size-s svg,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--size-s svg,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--size-s svg,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--size-s svg {
width: var(--nb-atom-button-s-icon-size, 1.8rem);
min-width: var(--nb-atom-button-s-icon-size, 1.8rem);
max-width: var(--nb-atom-button-s-icon-size, 1.8rem);
height: var(--nb-atom-button-s-icon-size, 1.8rem);
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--size-s svg:first-child, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--size-s svg:first-child, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--size-s svg:first-child, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--size-s svg:first-child, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--size-s svg:first-child,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--size-s svg:first-child,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--size-s svg:first-child,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--size-s svg:first-child,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--size-s svg:first-child {
margin-left: -2px;
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--size-s svg:last-child, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--size-s svg:last-child, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--size-s svg:last-child, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--size-s svg:last-child, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--size-s svg:last-child,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--size-s svg:last-child,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--size-s svg:last-child,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--size-s svg:last-child,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--size-s svg:last-child {
margin-right: -2px;
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--size-s.btn--compact, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--size-s.btn--compact, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--size-s.btn--compact, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--size-s.btn--compact, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--size-s.btn--compact,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--size-s.btn--compact,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--size-s.btn--compact,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--size-s.btn--compact,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--size-s.btn--compact {
padding-left: 0;
padding-right: 0;
min-height: auto;
height: auto;
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--neutral, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--neutral, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--neutral, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--neutral {
--btn-focus-ring: var(--tk-control-neutral-filled-fill);
--btn-bg: var(--tk-control-neutral-filled-fill);
--btn-col: var(--tk-control-neutral-filled-content);
--btn-bd: transparent;
border-width: var(--btn-border-width);
--btn-h-bg: var(--tk-control-neutral-state-hover-main-fill);
--btn-h-col: var(--tk-control-neutral-state-hover-main-content);
--btn-h-bd: var(--tk-control-neutral-state-hover-main-fill);
--btn-a-bg: var(--tk-control-neutral-state-active-main-fill);
--btn-a-col: var(--tk-control-neutral-state-active-main-content);
--btn-a-bd: var(--tk-control-neutral-state-active-main-fill);
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--neutral:disabled, .custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--neutral.is-disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--neutral:disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--neutral.is-disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral:disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral.is-disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--neutral:disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--neutral.is-disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral:disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral.is-disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral:disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral.is-disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral:disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral.is-disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral:disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral.is-disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--neutral:disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--neutral.is-disabled {
--btn-bg: var(--tk-control-disabled-filled-fill);
--btn-col: var(--tk-control-disabled-filled-content);
--btn-bd: transparent;
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--neutral-filled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--neutral-filled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral-filled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--neutral-filled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral-filled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral-filled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral-filled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral-filled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--neutral-filled {
--btn-focus-ring: var(--tk-control-neutral-filled-fill);
--btn-bg: var(--tk-control-neutral-filled-fill);
--btn-col: var(--tk-control-neutral-filled-content);
--btn-bd: transparent;
border-width: var(--btn-border-width);
--btn-h-bg: var(--tk-control-neutral-state-hover-main-fill);
--btn-h-col: var(--tk-control-neutral-state-hover-main-content);
--btn-h-bd: var(--tk-control-neutral-state-hover-main-fill);
--btn-a-bg: var(--tk-control-neutral-state-active-main-fill);
--btn-a-col: var(--tk-control-neutral-state-active-main-content);
--btn-a-bd: var(--tk-control-neutral-state-active-main-fill);
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--neutral-filled:disabled, .custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--neutral-filled.is-disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--neutral-filled:disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--neutral-filled.is-disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral-filled:disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral-filled.is-disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--neutral-filled:disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--neutral-filled.is-disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral-filled:disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral-filled.is-disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral-filled:disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral-filled.is-disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral-filled:disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral-filled.is-disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral-filled:disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral-filled.is-disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--neutral-filled:disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--neutral-filled.is-disabled {
--btn-bg: var(--tk-control-disabled-filled-fill);
--btn-col: var(--tk-control-disabled-filled-content);
--btn-bd: transparent;
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--neutral-outlined, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--neutral-outlined, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral-outlined, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--neutral-outlined, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral-outlined,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral-outlined,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral-outlined,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral-outlined,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--neutral-outlined {
--btn-focus-ring: var(--tk-control-neutral-filled-fill);
--btn-bg: transparent;
--btn-col: var(--tk-control-neutral-outlined-content);
--btn-bd: var(--tk-control-neutral-outlined-outline);
border-width: var(--btn-border-width);
--btn-h-bg: var(--tk-control-neutral-state-hover-alt-fill);
--btn-h-col: var(--tk-control-neutral-state-hover-alt-content);
--btn-h-bd: var(--tk-control-neutral-state-hover-alt-fill);
--btn-a-bg: var(--tk-control-neutral-state-active-alt-fill);
--btn-a-col: var(--tk-control-neutral-state-active-alt-content);
--btn-a-bd: var(--tk-control-neutral-state-active-alt-fill);
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--neutral-outlined:disabled, .custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--neutral-outlined.is-disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--neutral-outlined:disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--neutral-outlined.is-disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral-outlined:disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral-outlined.is-disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--neutral-outlined:disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--neutral-outlined.is-disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral-outlined:disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral-outlined.is-disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral-outlined:disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral-outlined.is-disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral-outlined:disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral-outlined.is-disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral-outlined:disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral-outlined.is-disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--neutral-outlined:disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--neutral-outlined.is-disabled {
--btn-bg: transparent;
--btn-col: var(--tk-control-disabled-outlined-content);
--btn-bd: var(--tk-control-disabled-outlined-outline);
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--neutral-subtle, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--neutral-subtle, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral-subtle, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--neutral-subtle, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral-subtle,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral-subtle,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral-subtle,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral-subtle,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--neutral-subtle {
--btn-focus-ring: var(--tk-control-neutral-filled-fill);
--btn-bg: var(--tk-control-neutral-subtle-fill);
--btn-col: var(--tk-control-neutral-subtle-content);
--btn-bd: var(--tk-control-neutral-subtle-outline, transparent);
border-width: var(--btn-border-width);
--btn-h-bg: var(--tk-control-neutral-state-hover-alt-fill);
--btn-h-col: var(--tk-control-neutral-state-hover-alt-content);
--btn-h-bd: var(--tk-control-neutral-state-hover-alt-fill);
--btn-a-bg: var(--tk-control-neutral-state-active-alt-fill);
--btn-a-col: var(--tk-control-neutral-state-active-alt-content);
--btn-a-bd: var(--tk-control-neutral-state-active-alt-fill);
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--neutral-subtle:disabled, .custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--neutral-subtle.is-disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--neutral-subtle:disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--neutral-subtle.is-disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral-subtle:disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral-subtle.is-disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--neutral-subtle:disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--neutral-subtle.is-disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral-subtle:disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral-subtle.is-disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral-subtle:disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral-subtle.is-disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral-subtle:disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral-subtle.is-disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral-subtle:disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral-subtle.is-disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--neutral-subtle:disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--neutral-subtle.is-disabled {
--btn-bg: transparent;
--btn-col: var(--tk-control-disabled-subtle-content);
--btn-bd: var(--tk-control-disabled-subtle-outline);
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--neutral-ghost, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--neutral-ghost, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral-ghost, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--neutral-ghost, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral-ghost,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral-ghost,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral-ghost,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral-ghost,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--neutral-ghost {
--btn-focus-ring: var(--tk-control-neutral-filled-fill);
--btn-bg: transparent;
--btn-col: var(--tk-control-neutral-ghost-content);
--btn-bd: transparent;
border-width: var(--btn-border-width);
--btn-h-bg: var(--tk-control-neutral-state-hover-alt-fill);
--btn-h-col: var(--tk-control-neutral-state-hover-alt-content);
--btn-h-bd: var(--tk-control-neutral-state-hover-alt-fill);
--btn-a-bg: var(--tk-control-neutral-state-active-alt-fill);
--btn-a-col: var(--tk-control-neutral-state-active-alt-content);
--btn-a-bd: var(--tk-control-neutral-state-active-alt-fill);
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--neutral-ghost:disabled, .custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--neutral-ghost.is-disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--neutral-ghost:disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--neutral-ghost.is-disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral-ghost:disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral-ghost.is-disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--neutral-ghost:disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--neutral-ghost.is-disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral-ghost:disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral-ghost.is-disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral-ghost:disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral-ghost.is-disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral-ghost:disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral-ghost.is-disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral-ghost:disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral-ghost.is-disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--neutral-ghost:disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--neutral-ghost.is-disabled {
--btn-bg: transparent;
--btn-col: var(--tk-control-disabled-ghost-content);
--btn-bd: transparent;
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--neutral-compact, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--neutral-compact, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral-compact, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--neutral-compact, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral-compact,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral-compact,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral-compact,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral-compact,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--neutral-compact {
--btn-focus-ring: var(--tk-control-neutral-filled-fill);
--btn-bg: transparent;
--btn-col: var(--tk-control-neutral-ghost-content);
--btn-bd: transparent;
border-width: var(--btn-border-width);
--btn-h-bg: var(--tk-control-neutral-state-hover-alt-fill);
--btn-h-col: var(--tk-control-neutral-state-hover-alt-content);
--btn-h-bd: var(--tk-control-neutral-state-hover-alt-fill);
--btn-a-bg: var(--tk-control-neutral-state-active-alt-fill);
--btn-a-col: var(--tk-control-neutral-state-active-alt-content);
--btn-a-bd: var(--tk-control-neutral-state-active-alt-fill);
min-height: unset;
height: auto;
padding-left: 0;
padding-right: 0;
border-radius: 0 !important;
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--neutral-compact:disabled, .custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--neutral-compact.is-disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--neutral-compact:disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--neutral-compact.is-disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral-compact:disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral-compact.is-disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--neutral-compact:disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--neutral-compact.is-disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral-compact:disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral-compact.is-disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral-compact:disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral-compact.is-disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral-compact:disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral-compact.is-disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral-compact:disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral-compact.is-disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--neutral-compact:disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--neutral-compact.is-disabled {
--btn-bg: transparent;
--btn-col: var(--tk-control-disabled-ghost-content);
--btn-bd: transparent;
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--neutral-clear, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--neutral-clear, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral-clear, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--neutral-clear, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral-clear,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral-clear,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral-clear,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral-clear,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--neutral-clear {
--btn-focus-ring: var(--tk-control-neutral-filled-fill);
--btn-bg: var(--tk-control-neutral-clear-fill);
--btn-col: var(--tk-control-neutral-clear-content);
--btn-bd: var(--tk-control-neutral-clear-outline, transparent);
border-width: var(--btn-border-width);
--btn-h-bg: var(--tk-control-neutral-state-hover-alt-fill);
--btn-h-col: var(--tk-control-neutral-state-hover-alt-content);
--btn-h-bd: var(--tk-control-neutral-state-hover-alt-fill);
--btn-a-bg: var(--tk-control-neutral-state-active-alt-fill);
--btn-a-col: var(--tk-control-neutral-state-active-alt-content);
--btn-a-bd: var(--tk-control-neutral-state-active-alt-fill);
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--neutral-clear:disabled, .custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--neutral-clear.is-disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--neutral-clear:disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--neutral-clear.is-disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral-clear:disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral-clear.is-disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--neutral-clear:disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--neutral-clear.is-disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral-clear:disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral-clear.is-disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral-clear:disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral-clear.is-disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral-clear:disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral-clear.is-disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral-clear:disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--neutral-clear.is-disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--neutral-clear:disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--neutral-clear.is-disabled {
--btn-bg: transparent;
--btn-col: var(--tk-control-disabled-clear-content);
--btn-bd: var(--tk-control-disabled-clear-outline);
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--primary, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--primary, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--primary, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--primary, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--primary,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--primary,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--primary,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--primary,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--primary {
--btn-focus-ring: var(--tk-control-neutral-filled-fill);
--btn-bg: var(--tk-control-primary-filled-fill);
--btn-col: var(--tk-control-primary-filled-content);
--btn-bd: transparent;
border-width: var(--btn-border-width);
--btn-h-bg: var(--tk-control-primary-state-hover-main-fill);
--btn-h-col: var(--tk-control-primary-state-hover-main-content);
--btn-h-bd: var(--tk-control-primary-state-hover-main-fill);
--btn-a-bg: var(--tk-control-primary-state-active-main-fill);
--btn-a-col: var(--tk-control-primary-state-active-main-content);
--btn-a-bd: var(--tk-control-primary-state-active-main-fill);
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--primary:disabled, .custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--primary.is-disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--primary:disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--primary.is-disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--primary:disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--primary.is-disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--primary:disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--primary.is-disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--primary:disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--primary.is-disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--primary:disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--primary.is-disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--primary:disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--primary.is-disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--primary:disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--primary.is-disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--primary:disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--primary.is-disabled {
--btn-bg: var(--tk-control-disabled-filled-fill);
--btn-col: var(--tk-control-disabled-filled-content);
--btn-bd: transparent;
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--primary-filled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--primary-filled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--primary-filled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--primary-filled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--primary-filled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--primary-filled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--primary-filled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--primary-filled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--primary-filled {
--btn-focus-ring: var(--tk-control-neutral-filled-fill);
--btn-bg: var(--tk-control-primary-filled-fill);
--btn-col: var(--tk-control-primary-filled-content);
--btn-bd: transparent;
border-width: var(--btn-border-width);
--btn-h-bg: var(--tk-control-primary-state-hover-main-fill);
--btn-h-col: var(--tk-control-primary-state-hover-main-content);
--btn-h-bd: var(--tk-control-primary-state-hover-main-fill);
--btn-a-bg: var(--tk-control-primary-state-active-main-fill);
--btn-a-col: var(--tk-control-primary-state-active-main-content);
--btn-a-bd: var(--tk-control-primary-state-active-main-fill);
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--primary-filled:disabled, .custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--primary-filled.is-disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--primary-filled:disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--primary-filled.is-disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--primary-filled:disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--primary-filled.is-disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--primary-filled:disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--primary-filled.is-disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--primary-filled:disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--primary-filled.is-disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--primary-filled:disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--primary-filled.is-disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--primary-filled:disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--primary-filled.is-disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--primary-filled:disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--primary-filled.is-disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--primary-filled:disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--primary-filled.is-disabled {
--btn-bg: var(--tk-control-disabled-filled-fill);
--btn-col: var(--tk-control-disabled-filled-content);
--btn-bd: transparent;
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--primary-outlined, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--primary-outlined, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--primary-outlined, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--primary-outlined, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--primary-outlined,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--primary-outlined,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--primary-outlined,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--primary-outlined,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--primary-outlined {
--btn-focus-ring: var(--tk-control-neutral-filled-fill);
--btn-bg: transparent;
--btn-col: var(--tk-control-primary-outlined-content);
--btn-bd: var(--tk-control-primary-outlined-outline);
border-width: var(--btn-border-width);
--btn-h-bg: var(--tk-control-primary-state-hover-alt-fill);
--btn-h-col: var(--tk-control-primary-state-hover-alt-content);
--btn-h-bd: var(--tk-control-primary-state-hover-alt-fill);
--btn-a-bg: var(--tk-control-primary-state-active-alt-fill);
--btn-a-col: var(--tk-control-primary-state-active-alt-content);
--btn-a-bd: var(--tk-control-primary-state-active-alt-fill);
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--primary-outlined:disabled, .custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--primary-outlined.is-disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--primary-outlined:disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--primary-outlined.is-disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--primary-outlined:disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--primary-outlined.is-disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--primary-outlined:disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--primary-outlined.is-disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--primary-outlined:disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--primary-outlined.is-disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--primary-outlined:disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--primary-outlined.is-disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--primary-outlined:disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--primary-outlined.is-disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--primary-outlined:disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--primary-outlined.is-disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--primary-outlined:disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--primary-outlined.is-disabled {
--btn-bg: transparent;
--btn-col: var(--tk-control-disabled-outlined-content);
--btn-bd: var(--tk-control-disabled-outlined-outline);
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--primary-subtle, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--primary-subtle, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--primary-subtle, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--primary-subtle, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--primary-subtle,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--primary-subtle,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--primary-subtle,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--primary-subtle,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--primary-subtle {
--btn-focus-ring: var(--tk-control-neutral-filled-fill);
--btn-bg: var(--tk-control-primary-subtle-fill);
--btn-col: var(--tk-control-primary-subtle-content);
--btn-bd: var(--tk-control-primary-subtle-outline, transparent);
border-width: var(--btn-border-width);
--btn-h-bg: var(--tk-control-primary-state-hover-alt-fill);
--btn-h-col: var(--tk-control-primary-state-hover-alt-content);
--btn-h-bd: var(--tk-control-primary-state-hover-alt-fill);
--btn-a-bg: var(--tk-control-primary-state-active-alt-fill);
--btn-a-col: var(--tk-control-primary-state-active-alt-content);
--btn-a-bd: var(--tk-control-primary-state-active-alt-fill);
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--primary-subtle:disabled, .custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--primary-subtle.is-disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--primary-subtle:disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--primary-subtle.is-disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--primary-subtle:disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--primary-subtle.is-disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--primary-subtle:disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--primary-subtle.is-disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--primary-subtle:disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--primary-subtle.is-disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--primary-subtle:disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--primary-subtle.is-disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--primary-subtle:disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--primary-subtle.is-disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--primary-subtle:disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--primary-subtle.is-disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--primary-subtle:disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--primary-subtle.is-disabled {
--btn-bg: transparent;
--btn-col: var(--tk-control-disabled-subtle-content);
--btn-bd: var(--tk-control-disabled-subtle-outline);
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--primary-ghost, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--primary-ghost, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--primary-ghost, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--primary-ghost, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--primary-ghost,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--primary-ghost,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--primary-ghost,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--primary-ghost,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--primary-ghost {
--btn-focus-ring: var(--tk-control-neutral-filled-fill);
--btn-bg: transparent;
--btn-col: var(--tk-control-primary-ghost-content);
--btn-bd: transparent;
border-width: var(--btn-border-width);
--btn-h-bg: var(--tk-control-primary-state-hover-alt-fill);
--btn-h-col: var(--tk-control-primary-state-hover-alt-content);
--btn-h-bd: var(--tk-control-primary-state-hover-alt-fill);
--btn-a-bg: var(--tk-control-primary-state-active-alt-fill);
--btn-a-col: var(--tk-control-primary-state-active-alt-content);
--btn-a-bd: var(--tk-control-primary-state-active-alt-fill);
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--primary-ghost:disabled, .custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--primary-ghost.is-disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--primary-ghost:disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--primary-ghost.is-disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--primary-ghost:disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--primary-ghost.is-disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--primary-ghost:disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--primary-ghost.is-disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--primary-ghost:disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--primary-ghost.is-disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--primary-ghost:disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--primary-ghost.is-disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--primary-ghost:disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--primary-ghost.is-disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--primary-ghost:disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--primary-ghost.is-disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--primary-ghost:disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--primary-ghost.is-disabled {
--btn-bg: transparent;
--btn-col: var(--tk-control-disabled-ghost-content);
--btn-bd: transparent;
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--primary-compact, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--primary-compact, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--primary-compact, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--primary-compact, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--primary-compact,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--primary-compact,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--primary-compact,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--primary-compact,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--primary-compact {
--btn-focus-ring: var(--tk-control-neutral-filled-fill);
--btn-bg: transparent;
--btn-col: var(--tk-control-primary-ghost-content);
--btn-bd: transparent;
border-width: var(--btn-border-width);
--btn-h-bg: var(--tk-control-primary-state-hover-alt-fill);
--btn-h-col: var(--tk-control-primary-state-hover-alt-content);
--btn-h-bd: var(--tk-control-primary-state-hover-alt-fill);
--btn-a-bg: var(--tk-control-primary-state-active-alt-fill);
--btn-a-col: var(--tk-control-primary-state-active-alt-content);
--btn-a-bd: var(--tk-control-primary-state-active-alt-fill);
min-height: unset;
height: auto;
padding-left: 0;
padding-right: 0;
border-radius: 0 !important;
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--primary-compact:disabled, .custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--primary-compact.is-disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--primary-compact:disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--primary-compact.is-disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--primary-compact:disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--primary-compact.is-disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--primary-compact:disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--primary-compact.is-disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--primary-compact:disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--primary-compact.is-disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--primary-compact:disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--primary-compact.is-disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--primary-compact:disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--primary-compact.is-disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--primary-compact:disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--primary-compact.is-disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--primary-compact:disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--primary-compact.is-disabled {
--btn-bg: transparent;
--btn-col: var(--tk-control-disabled-ghost-content);
--btn-bd: transparent;
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--primary-clear, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--primary-clear, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--primary-clear, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--primary-clear, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--primary-clear,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--primary-clear,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--primary-clear,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--primary-clear,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--primary-clear {
--btn-focus-ring: var(--tk-control-neutral-filled-fill);
--btn-bg: var(--tk-control-primary-clear-fill);
--btn-col: var(--tk-control-primary-clear-content);
--btn-bd: var(--tk-control-primary-clear-outline, transparent);
border-width: var(--btn-border-width);
--btn-h-bg: var(--tk-control-primary-state-hover-alt-fill);
--btn-h-col: var(--tk-control-primary-state-hover-alt-content);
--btn-h-bd: var(--tk-control-primary-state-hover-alt-fill);
--btn-a-bg: var(--tk-control-primary-state-active-alt-fill);
--btn-a-col: var(--tk-control-primary-state-active-alt-content);
--btn-a-bd: var(--tk-control-primary-state-active-alt-fill);
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--primary-clear:disabled, .custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--primary-clear.is-disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--primary-clear:disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--primary-clear.is-disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--primary-clear:disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--primary-clear.is-disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--primary-clear:disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--primary-clear.is-disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--primary-clear:disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--primary-clear.is-disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--primary-clear:disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--primary-clear.is-disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--primary-clear:disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--primary-clear.is-disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--primary-clear:disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--primary-clear.is-disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--primary-clear:disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--primary-clear.is-disabled {
--btn-bg: transparent;
--btn-col: var(--tk-control-disabled-clear-content);
--btn-bd: var(--tk-control-disabled-clear-outline);
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--secondary, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--secondary, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--secondary, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--secondary {
--btn-focus-ring: var(--tk-control-neutral-filled-fill);
--btn-bg: var(--tk-control-secondary-filled-fill);
--btn-col: var(--tk-control-secondary-filled-content);
--btn-bd: transparent;
border-width: var(--btn-border-width);
--btn-h-bg: var(--tk-control-secondary-state-hover-main-fill);
--btn-h-col: var(--tk-control-secondary-state-hover-main-content);
--btn-h-bd: var(--tk-control-secondary-state-hover-main-fill);
--btn-a-bg: var(--tk-control-secondary-state-active-main-fill);
--btn-a-col: var(--tk-control-secondary-state-active-main-content);
--btn-a-bd: var(--tk-control-secondary-state-active-main-fill);
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--secondary:disabled, .custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--secondary.is-disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--secondary:disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--secondary.is-disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary:disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary.is-disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--secondary:disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--secondary.is-disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary:disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary.is-disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary:disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary.is-disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary:disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary.is-disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary:disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary.is-disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--secondary:disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--secondary.is-disabled {
--btn-bg: var(--tk-control-disabled-filled-fill);
--btn-col: var(--tk-control-disabled-filled-content);
--btn-bd: transparent;
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--secondary-filled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--secondary-filled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary-filled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--secondary-filled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary-filled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary-filled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary-filled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary-filled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--secondary-filled {
--btn-focus-ring: var(--tk-control-neutral-filled-fill);
--btn-bg: var(--tk-control-secondary-filled-fill);
--btn-col: var(--tk-control-secondary-filled-content);
--btn-bd: transparent;
border-width: var(--btn-border-width);
--btn-h-bg: var(--tk-control-secondary-state-hover-main-fill);
--btn-h-col: var(--tk-control-secondary-state-hover-main-content);
--btn-h-bd: var(--tk-control-secondary-state-hover-main-fill);
--btn-a-bg: var(--tk-control-secondary-state-active-main-fill);
--btn-a-col: var(--tk-control-secondary-state-active-main-content);
--btn-a-bd: var(--tk-control-secondary-state-active-main-fill);
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--secondary-filled:disabled, .custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--secondary-filled.is-disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--secondary-filled:disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--secondary-filled.is-disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary-filled:disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary-filled.is-disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--secondary-filled:disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--secondary-filled.is-disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary-filled:disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary-filled.is-disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary-filled:disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary-filled.is-disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary-filled:disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary-filled.is-disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary-filled:disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary-filled.is-disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--secondary-filled:disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--secondary-filled.is-disabled {
--btn-bg: var(--tk-control-disabled-filled-fill);
--btn-col: var(--tk-control-disabled-filled-content);
--btn-bd: transparent;
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--secondary-outlined, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--secondary-outlined, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary-outlined, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--secondary-outlined, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary-outlined,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary-outlined,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary-outlined,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary-outlined,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--secondary-outlined {
--btn-focus-ring: var(--tk-control-neutral-filled-fill);
--btn-bg: transparent;
--btn-col: var(--tk-control-secondary-outlined-content);
--btn-bd: var(--tk-control-secondary-outlined-outline);
border-width: var(--btn-border-width);
--btn-h-bg: var(--tk-control-secondary-state-hover-alt-fill);
--btn-h-col: var(--tk-control-secondary-state-hover-alt-content);
--btn-h-bd: var(--tk-control-secondary-state-hover-alt-fill);
--btn-a-bg: var(--tk-control-secondary-state-active-alt-fill);
--btn-a-col: var(--tk-control-secondary-state-active-alt-content);
--btn-a-bd: var(--tk-control-secondary-state-active-alt-fill);
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--secondary-outlined:disabled, .custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--secondary-outlined.is-disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--secondary-outlined:disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--secondary-outlined.is-disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary-outlined:disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary-outlined.is-disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--secondary-outlined:disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--secondary-outlined.is-disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary-outlined:disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary-outlined.is-disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary-outlined:disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary-outlined.is-disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary-outlined:disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary-outlined.is-disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary-outlined:disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary-outlined.is-disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--secondary-outlined:disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--secondary-outlined.is-disabled {
--btn-bg: transparent;
--btn-col: var(--tk-control-disabled-outlined-content);
--btn-bd: var(--tk-control-disabled-outlined-outline);
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--secondary-subtle, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--secondary-subtle, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary-subtle, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--secondary-subtle, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary-subtle,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary-subtle,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary-subtle,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary-subtle,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--secondary-subtle {
--btn-focus-ring: var(--tk-control-neutral-filled-fill);
--btn-bg: var(--tk-control-secondary-subtle-fill);
--btn-col: var(--tk-control-secondary-subtle-content);
--btn-bd: var(--tk-control-secondary-subtle-outline, transparent);
border-width: var(--btn-border-width);
--btn-h-bg: var(--tk-control-secondary-state-hover-alt-fill);
--btn-h-col: var(--tk-control-secondary-state-hover-alt-content);
--btn-h-bd: var(--tk-control-secondary-state-hover-alt-fill);
--btn-a-bg: var(--tk-control-secondary-state-active-alt-fill);
--btn-a-col: var(--tk-control-secondary-state-active-alt-content);
--btn-a-bd: var(--tk-control-secondary-state-active-alt-fill);
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--secondary-subtle:disabled, .custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--secondary-subtle.is-disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--secondary-subtle:disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--secondary-subtle.is-disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary-subtle:disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary-subtle.is-disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--secondary-subtle:disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--secondary-subtle.is-disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary-subtle:disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary-subtle.is-disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary-subtle:disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary-subtle.is-disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary-subtle:disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary-subtle.is-disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary-subtle:disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary-subtle.is-disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--secondary-subtle:disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--secondary-subtle.is-disabled {
--btn-bg: transparent;
--btn-col: var(--tk-control-disabled-subtle-content);
--btn-bd: var(--tk-control-disabled-subtle-outline);
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--secondary-ghost, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--secondary-ghost, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary-ghost, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--secondary-ghost, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary-ghost,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary-ghost,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary-ghost,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary-ghost,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--secondary-ghost {
--btn-focus-ring: var(--tk-control-neutral-filled-fill);
--btn-bg: transparent;
--btn-col: var(--tk-control-secondary-ghost-content);
--btn-bd: transparent;
border-width: var(--btn-border-width);
--btn-h-bg: var(--tk-control-secondary-state-hover-alt-fill);
--btn-h-col: var(--tk-control-secondary-state-hover-alt-content);
--btn-h-bd: var(--tk-control-secondary-state-hover-alt-fill);
--btn-a-bg: var(--tk-control-secondary-state-active-alt-fill);
--btn-a-col: var(--tk-control-secondary-state-active-alt-content);
--btn-a-bd: var(--tk-control-secondary-state-active-alt-fill);
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--secondary-ghost:disabled, .custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--secondary-ghost.is-disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--secondary-ghost:disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--secondary-ghost.is-disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary-ghost:disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary-ghost.is-disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--secondary-ghost:disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--secondary-ghost.is-disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary-ghost:disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary-ghost.is-disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary-ghost:disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary-ghost.is-disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary-ghost:disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary-ghost.is-disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary-ghost:disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary-ghost.is-disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--secondary-ghost:disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--secondary-ghost.is-disabled {
--btn-bg: transparent;
--btn-col: var(--tk-control-disabled-ghost-content);
--btn-bd: transparent;
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--secondary-compact, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--secondary-compact, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary-compact, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--secondary-compact, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary-compact,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary-compact,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary-compact,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary-compact,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--secondary-compact {
--btn-focus-ring: var(--tk-control-neutral-filled-fill);
--btn-bg: transparent;
--btn-col: var(--tk-control-secondary-ghost-content);
--btn-bd: transparent;
border-width: var(--btn-border-width);
--btn-h-bg: var(--tk-control-secondary-state-hover-alt-fill);
--btn-h-col: var(--tk-control-secondary-state-hover-alt-content);
--btn-h-bd: var(--tk-control-secondary-state-hover-alt-fill);
--btn-a-bg: var(--tk-control-secondary-state-active-alt-fill);
--btn-a-col: var(--tk-control-secondary-state-active-alt-content);
--btn-a-bd: var(--tk-control-secondary-state-active-alt-fill);
min-height: unset;
height: auto;
padding-left: 0;
padding-right: 0;
border-radius: 0 !important;
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--secondary-compact:disabled, .custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--secondary-compact.is-disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--secondary-compact:disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--secondary-compact.is-disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary-compact:disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary-compact.is-disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--secondary-compact:disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--secondary-compact.is-disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary-compact:disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary-compact.is-disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary-compact:disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary-compact.is-disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary-compact:disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary-compact.is-disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary-compact:disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary-compact.is-disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--secondary-compact:disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--secondary-compact.is-disabled {
--btn-bg: transparent;
--btn-col: var(--tk-control-disabled-ghost-content);
--btn-bd: transparent;
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--secondary-clear, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--secondary-clear, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary-clear, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--secondary-clear, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary-clear,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary-clear,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary-clear,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary-clear,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--secondary-clear {
--btn-focus-ring: var(--tk-control-neutral-filled-fill);
--btn-bg: var(--tk-control-secondary-clear-fill);
--btn-col: var(--tk-control-secondary-clear-content);
--btn-bd: var(--tk-control-secondary-clear-outline, transparent);
border-width: var(--btn-border-width);
--btn-h-bg: var(--tk-control-secondary-state-hover-alt-fill);
--btn-h-col: var(--tk-control-secondary-state-hover-alt-content);
--btn-h-bd: var(--tk-control-secondary-state-hover-alt-fill);
--btn-a-bg: var(--tk-control-secondary-state-active-alt-fill);
--btn-a-col: var(--tk-control-secondary-state-active-alt-content);
--btn-a-bd: var(--tk-control-secondary-state-active-alt-fill);
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--secondary-clear:disabled, .custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--secondary-clear.is-disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--secondary-clear:disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--secondary-clear.is-disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary-clear:disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary-clear.is-disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--secondary-clear:disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--secondary-clear.is-disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary-clear:disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary-clear.is-disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary-clear:disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary-clear.is-disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary-clear:disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary-clear.is-disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary-clear:disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--secondary-clear.is-disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--secondary-clear:disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--secondary-clear.is-disabled {
--btn-bg: transparent;
--btn-col: var(--tk-control-disabled-clear-content);
--btn-bd: var(--tk-control-disabled-clear-outline);
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--tertiary, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--tertiary, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--tertiary, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--tertiary {
--btn-focus-ring: var(--tk-control-neutral-filled-fill);
--btn-bg: var(--tk-control-tertiary-filled-fill);
--btn-col: var(--tk-control-tertiary-filled-content);
--btn-bd: transparent;
border-width: var(--btn-border-width);
--btn-h-bg: var(--tk-control-tertiary-state-hover-main-fill);
--btn-h-col: var(--tk-control-tertiary-state-hover-main-content);
--btn-h-bd: var(--tk-control-tertiary-state-hover-main-fill);
--btn-a-bg: var(--tk-control-tertiary-state-active-main-fill);
--btn-a-col: var(--tk-control-tertiary-state-active-main-content);
--btn-a-bd: var(--tk-control-tertiary-state-active-main-fill);
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--tertiary:disabled, .custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--tertiary.is-disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--tertiary:disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--tertiary.is-disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary:disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary.is-disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--tertiary:disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--tertiary.is-disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary:disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary.is-disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary:disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary.is-disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary:disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary.is-disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary:disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary.is-disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--tertiary:disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--tertiary.is-disabled {
--btn-bg: var(--tk-control-disabled-filled-fill);
--btn-col: var(--tk-control-disabled-filled-content);
--btn-bd: transparent;
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--tertiary-filled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--tertiary-filled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary-filled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--tertiary-filled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary-filled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary-filled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary-filled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary-filled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--tertiary-filled {
--btn-focus-ring: var(--tk-control-neutral-filled-fill);
--btn-bg: var(--tk-control-tertiary-filled-fill);
--btn-col: var(--tk-control-tertiary-filled-content);
--btn-bd: transparent;
border-width: var(--btn-border-width);
--btn-h-bg: var(--tk-control-tertiary-state-hover-main-fill);
--btn-h-col: var(--tk-control-tertiary-state-hover-main-content);
--btn-h-bd: var(--tk-control-tertiary-state-hover-main-fill);
--btn-a-bg: var(--tk-control-tertiary-state-active-main-fill);
--btn-a-col: var(--tk-control-tertiary-state-active-main-content);
--btn-a-bd: var(--tk-control-tertiary-state-active-main-fill);
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--tertiary-filled:disabled, .custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--tertiary-filled.is-disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--tertiary-filled:disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--tertiary-filled.is-disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary-filled:disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary-filled.is-disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--tertiary-filled:disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--tertiary-filled.is-disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary-filled:disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary-filled.is-disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary-filled:disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary-filled.is-disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary-filled:disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary-filled.is-disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary-filled:disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary-filled.is-disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--tertiary-filled:disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--tertiary-filled.is-disabled {
--btn-bg: var(--tk-control-disabled-filled-fill);
--btn-col: var(--tk-control-disabled-filled-content);
--btn-bd: transparent;
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--tertiary-outlined, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--tertiary-outlined, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary-outlined, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--tertiary-outlined, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary-outlined,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary-outlined,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary-outlined,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary-outlined,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--tertiary-outlined {
--btn-focus-ring: var(--tk-control-neutral-filled-fill);
--btn-bg: transparent;
--btn-col: var(--tk-control-tertiary-outlined-content);
--btn-bd: var(--tk-control-tertiary-outlined-outline);
border-width: var(--btn-border-width);
--btn-h-bg: var(--tk-control-tertiary-state-hover-alt-fill);
--btn-h-col: var(--tk-control-tertiary-state-hover-alt-content);
--btn-h-bd: var(--tk-control-tertiary-state-hover-alt-fill);
--btn-a-bg: var(--tk-control-tertiary-state-active-alt-fill);
--btn-a-col: var(--tk-control-tertiary-state-active-alt-content);
--btn-a-bd: var(--tk-control-tertiary-state-active-alt-fill);
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--tertiary-outlined:disabled, .custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--tertiary-outlined.is-disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--tertiary-outlined:disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--tertiary-outlined.is-disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary-outlined:disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary-outlined.is-disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--tertiary-outlined:disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--tertiary-outlined.is-disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary-outlined:disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary-outlined.is-disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary-outlined:disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary-outlined.is-disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary-outlined:disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary-outlined.is-disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary-outlined:disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary-outlined.is-disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--tertiary-outlined:disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--tertiary-outlined.is-disabled {
--btn-bg: transparent;
--btn-col: var(--tk-control-disabled-outlined-content);
--btn-bd: var(--tk-control-disabled-outlined-outline);
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--tertiary-subtle, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--tertiary-subtle, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary-subtle, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--tertiary-subtle, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary-subtle,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary-subtle,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary-subtle,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary-subtle,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--tertiary-subtle {
--btn-focus-ring: var(--tk-control-neutral-filled-fill);
--btn-bg: var(--tk-control-tertiary-subtle-fill);
--btn-col: var(--tk-control-tertiary-subtle-content);
--btn-bd: var(--tk-control-tertiary-subtle-outline, transparent);
border-width: var(--btn-border-width);
--btn-h-bg: var(--tk-control-tertiary-state-hover-alt-fill);
--btn-h-col: var(--tk-control-tertiary-state-hover-alt-content);
--btn-h-bd: var(--tk-control-tertiary-state-hover-alt-fill);
--btn-a-bg: var(--tk-control-tertiary-state-active-alt-fill);
--btn-a-col: var(--tk-control-tertiary-state-active-alt-content);
--btn-a-bd: var(--tk-control-tertiary-state-active-alt-fill);
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--tertiary-subtle:disabled, .custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--tertiary-subtle.is-disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--tertiary-subtle:disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--tertiary-subtle.is-disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary-subtle:disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary-subtle.is-disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--tertiary-subtle:disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--tertiary-subtle.is-disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary-subtle:disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary-subtle.is-disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary-subtle:disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary-subtle.is-disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary-subtle:disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary-subtle.is-disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary-subtle:disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary-subtle.is-disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--tertiary-subtle:disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--tertiary-subtle.is-disabled {
--btn-bg: transparent;
--btn-col: var(--tk-control-disabled-subtle-content);
--btn-bd: var(--tk-control-disabled-subtle-outline);
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--tertiary-ghost, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--tertiary-ghost, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary-ghost, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--tertiary-ghost, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary-ghost,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary-ghost,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary-ghost,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary-ghost,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--tertiary-ghost {
--btn-focus-ring: var(--tk-control-neutral-filled-fill);
--btn-bg: transparent;
--btn-col: var(--tk-control-tertiary-ghost-content);
--btn-bd: transparent;
border-width: var(--btn-border-width);
--btn-h-bg: var(--tk-control-tertiary-state-hover-alt-fill);
--btn-h-col: var(--tk-control-tertiary-state-hover-alt-content);
--btn-h-bd: var(--tk-control-tertiary-state-hover-alt-fill);
--btn-a-bg: var(--tk-control-tertiary-state-active-alt-fill);
--btn-a-col: var(--tk-control-tertiary-state-active-alt-content);
--btn-a-bd: var(--tk-control-tertiary-state-active-alt-fill);
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--tertiary-ghost:disabled, .custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--tertiary-ghost.is-disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--tertiary-ghost:disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--tertiary-ghost.is-disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary-ghost:disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary-ghost.is-disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--tertiary-ghost:disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--tertiary-ghost.is-disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary-ghost:disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary-ghost.is-disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary-ghost:disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary-ghost.is-disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary-ghost:disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary-ghost.is-disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary-ghost:disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary-ghost.is-disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--tertiary-ghost:disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--tertiary-ghost.is-disabled {
--btn-bg: transparent;
--btn-col: var(--tk-control-disabled-ghost-content);
--btn-bd: transparent;
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--tertiary-compact, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--tertiary-compact, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary-compact, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--tertiary-compact, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary-compact,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary-compact,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary-compact,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary-compact,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--tertiary-compact {
--btn-focus-ring: var(--tk-control-neutral-filled-fill);
--btn-bg: transparent;
--btn-col: var(--tk-control-tertiary-ghost-content);
--btn-bd: transparent;
border-width: var(--btn-border-width);
--btn-h-bg: var(--tk-control-tertiary-state-hover-alt-fill);
--btn-h-col: var(--tk-control-tertiary-state-hover-alt-content);
--btn-h-bd: var(--tk-control-tertiary-state-hover-alt-fill);
--btn-a-bg: var(--tk-control-tertiary-state-active-alt-fill);
--btn-a-col: var(--tk-control-tertiary-state-active-alt-content);
--btn-a-bd: var(--tk-control-tertiary-state-active-alt-fill);
min-height: unset;
height: auto;
padding-left: 0;
padding-right: 0;
border-radius: 0 !important;
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--tertiary-compact:disabled, .custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--tertiary-compact.is-disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--tertiary-compact:disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--tertiary-compact.is-disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary-compact:disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary-compact.is-disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--tertiary-compact:disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--tertiary-compact.is-disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary-compact:disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary-compact.is-disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary-compact:disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary-compact.is-disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary-compact:disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary-compact.is-disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary-compact:disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary-compact.is-disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--tertiary-compact:disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--tertiary-compact.is-disabled {
--btn-bg: transparent;
--btn-col: var(--tk-control-disabled-ghost-content);
--btn-bd: transparent;
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--tertiary-clear, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--tertiary-clear, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary-clear, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--tertiary-clear, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary-clear,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary-clear,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary-clear,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary-clear,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--tertiary-clear {
--btn-focus-ring: var(--tk-control-neutral-filled-fill);
--btn-bg: var(--tk-control-tertiary-clear-fill);
--btn-col: var(--tk-control-tertiary-clear-content);
--btn-bd: var(--tk-control-tertiary-clear-outline, transparent);
border-width: var(--btn-border-width);
--btn-h-bg: var(--tk-control-tertiary-state-hover-alt-fill);
--btn-h-col: var(--tk-control-tertiary-state-hover-alt-content);
--btn-h-bd: var(--tk-control-tertiary-state-hover-alt-fill);
--btn-a-bg: var(--tk-control-tertiary-state-active-alt-fill);
--btn-a-col: var(--tk-control-tertiary-state-active-alt-content);
--btn-a-bd: var(--tk-control-tertiary-state-active-alt-fill);
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--tertiary-clear:disabled, .custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--tertiary-clear.is-disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--tertiary-clear:disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--tertiary-clear.is-disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary-clear:disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary-clear.is-disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--tertiary-clear:disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--tertiary-clear.is-disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary-clear:disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary-clear.is-disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary-clear:disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary-clear.is-disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary-clear:disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary-clear.is-disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary-clear:disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--tertiary-clear.is-disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--tertiary-clear:disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--tertiary-clear.is-disabled {
--btn-bg: transparent;
--btn-col: var(--tk-control-disabled-clear-content);
--btn-bd: var(--tk-control-disabled-clear-outline);
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--danger, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--danger, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--danger, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--danger, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--danger,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--danger,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--danger,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--danger,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--danger {
--btn-focus-ring: var(--tk-control-neutral-filled-fill);
--btn-bg: var(--tk-control-danger-filled-fill);
--btn-col: var(--tk-control-danger-filled-content);
--btn-bd: transparent;
border-width: var(--btn-border-width);
--btn-h-bg: var(--tk-control-danger-state-hover-main-fill);
--btn-h-col: var(--tk-control-danger-state-hover-main-content);
--btn-h-bd: var(--tk-control-danger-state-hover-main-fill);
--btn-a-bg: var(--tk-control-danger-state-active-main-fill);
--btn-a-col: var(--tk-control-danger-state-active-main-content);
--btn-a-bd: var(--tk-control-danger-state-active-main-fill);
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--danger:disabled, .custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--danger.is-disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--danger:disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--danger.is-disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--danger:disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--danger.is-disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--danger:disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--danger.is-disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--danger:disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--danger.is-disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--danger:disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--danger.is-disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--danger:disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--danger.is-disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--danger:disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--danger.is-disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--danger:disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--danger.is-disabled {
--btn-bg: var(--tk-control-disabled-filled-fill);
--btn-col: var(--tk-control-disabled-filled-content);
--btn-bd: transparent;
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--danger-filled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--danger-filled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--danger-filled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--danger-filled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--danger-filled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--danger-filled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--danger-filled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--danger-filled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--danger-filled {
--btn-focus-ring: var(--tk-control-neutral-filled-fill);
--btn-bg: var(--tk-control-danger-filled-fill);
--btn-col: var(--tk-control-danger-filled-content);
--btn-bd: transparent;
border-width: var(--btn-border-width);
--btn-h-bg: var(--tk-control-danger-state-hover-main-fill);
--btn-h-col: var(--tk-control-danger-state-hover-main-content);
--btn-h-bd: var(--tk-control-danger-state-hover-main-fill);
--btn-a-bg: var(--tk-control-danger-state-active-main-fill);
--btn-a-col: var(--tk-control-danger-state-active-main-content);
--btn-a-bd: var(--tk-control-danger-state-active-main-fill);
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--danger-filled:disabled, .custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--danger-filled.is-disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--danger-filled:disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--danger-filled.is-disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--danger-filled:disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--danger-filled.is-disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--danger-filled:disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--danger-filled.is-disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--danger-filled:disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--danger-filled.is-disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--danger-filled:disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--danger-filled.is-disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--danger-filled:disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--danger-filled.is-disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--danger-filled:disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--danger-filled.is-disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--danger-filled:disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--danger-filled.is-disabled {
--btn-bg: var(--tk-control-disabled-filled-fill);
--btn-col: var(--tk-control-disabled-filled-content);
--btn-bd: transparent;
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--danger-outlined, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--danger-outlined, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--danger-outlined, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--danger-outlined, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--danger-outlined,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--danger-outlined,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--danger-outlined,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--danger-outlined,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--danger-outlined {
--btn-focus-ring: var(--tk-control-neutral-filled-fill);
--btn-bg: transparent;
--btn-col: var(--tk-control-danger-outlined-content);
--btn-bd: var(--tk-control-danger-outlined-outline);
border-width: var(--btn-border-width);
--btn-h-bg: var(--tk-control-danger-state-hover-alt-fill);
--btn-h-col: var(--tk-control-danger-state-hover-alt-content);
--btn-h-bd: var(--tk-control-danger-state-hover-alt-fill);
--btn-a-bg: var(--tk-control-danger-state-active-alt-fill);
--btn-a-col: var(--tk-control-danger-state-active-alt-content);
--btn-a-bd: var(--tk-control-danger-state-active-alt-fill);
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--danger-outlined:disabled, .custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--danger-outlined.is-disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--danger-outlined:disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--danger-outlined.is-disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--danger-outlined:disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--danger-outlined.is-disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--danger-outlined:disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--danger-outlined.is-disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--danger-outlined:disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--danger-outlined.is-disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--danger-outlined:disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--danger-outlined.is-disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--danger-outlined:disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--danger-outlined.is-disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--danger-outlined:disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--danger-outlined.is-disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--danger-outlined:disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--danger-outlined.is-disabled {
--btn-bg: transparent;
--btn-col: var(--tk-control-disabled-outlined-content);
--btn-bd: var(--tk-control-disabled-outlined-outline);
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--danger-subtle, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--danger-subtle, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--danger-subtle, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--danger-subtle, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--danger-subtle,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--danger-subtle,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--danger-subtle,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--danger-subtle,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--danger-subtle {
--btn-focus-ring: var(--tk-control-neutral-filled-fill);
--btn-bg: var(--tk-control-danger-subtle-fill);
--btn-col: var(--tk-control-danger-subtle-content);
--btn-bd: var(--tk-control-danger-subtle-outline, transparent);
border-width: var(--btn-border-width);
--btn-h-bg: var(--tk-control-danger-state-hover-alt-fill);
--btn-h-col: var(--tk-control-danger-state-hover-alt-content);
--btn-h-bd: var(--tk-control-danger-state-hover-alt-fill);
--btn-a-bg: var(--tk-control-danger-state-active-alt-fill);
--btn-a-col: var(--tk-control-danger-state-active-alt-content);
--btn-a-bd: var(--tk-control-danger-state-active-alt-fill);
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--danger-subtle:disabled, .custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--danger-subtle.is-disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--danger-subtle:disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--danger-subtle.is-disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--danger-subtle:disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--danger-subtle.is-disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--danger-subtle:disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--danger-subtle.is-disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--danger-subtle:disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--danger-subtle.is-disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--danger-subtle:disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--danger-subtle.is-disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--danger-subtle:disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--danger-subtle.is-disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--danger-subtle:disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--danger-subtle.is-disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--danger-subtle:disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--danger-subtle.is-disabled {
--btn-bg: transparent;
--btn-col: var(--tk-control-disabled-subtle-content);
--btn-bd: var(--tk-control-disabled-subtle-outline);
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--danger-ghost, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--danger-ghost, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--danger-ghost, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--danger-ghost, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--danger-ghost,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--danger-ghost,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--danger-ghost,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--danger-ghost,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--danger-ghost {
--btn-focus-ring: var(--tk-control-neutral-filled-fill);
--btn-bg: transparent;
--btn-col: var(--tk-control-danger-ghost-content);
--btn-bd: transparent;
border-width: var(--btn-border-width);
--btn-h-bg: var(--tk-control-danger-state-hover-alt-fill);
--btn-h-col: var(--tk-control-danger-state-hover-alt-content);
--btn-h-bd: var(--tk-control-danger-state-hover-alt-fill);
--btn-a-bg: var(--tk-control-danger-state-active-alt-fill);
--btn-a-col: var(--tk-control-danger-state-active-alt-content);
--btn-a-bd: var(--tk-control-danger-state-active-alt-fill);
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--danger-ghost:disabled, .custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--danger-ghost.is-disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--danger-ghost:disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--danger-ghost.is-disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--danger-ghost:disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--danger-ghost.is-disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--danger-ghost:disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--danger-ghost.is-disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--danger-ghost:disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--danger-ghost.is-disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--danger-ghost:disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--danger-ghost.is-disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--danger-ghost:disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--danger-ghost.is-disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--danger-ghost:disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--danger-ghost.is-disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--danger-ghost:disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--danger-ghost.is-disabled {
--btn-bg: transparent;
--btn-col: var(--tk-control-disabled-ghost-content);
--btn-bd: transparent;
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--danger-compact, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--danger-compact, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--danger-compact, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--danger-compact, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--danger-compact,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--danger-compact,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--danger-compact,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--danger-compact,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--danger-compact {
--btn-focus-ring: var(--tk-control-neutral-filled-fill);
--btn-bg: transparent;
--btn-col: var(--tk-control-danger-ghost-content);
--btn-bd: transparent;
border-width: var(--btn-border-width);
--btn-h-bg: var(--tk-control-danger-state-hover-alt-fill);
--btn-h-col: var(--tk-control-danger-state-hover-alt-content);
--btn-h-bd: var(--tk-control-danger-state-hover-alt-fill);
--btn-a-bg: var(--tk-control-danger-state-active-alt-fill);
--btn-a-col: var(--tk-control-danger-state-active-alt-content);
--btn-a-bd: var(--tk-control-danger-state-active-alt-fill);
min-height: unset;
height: auto;
padding-left: 0;
padding-right: 0;
border-radius: 0 !important;
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--danger-compact:disabled, .custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--danger-compact.is-disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--danger-compact:disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--danger-compact.is-disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--danger-compact:disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--danger-compact.is-disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--danger-compact:disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--danger-compact.is-disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--danger-compact:disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--danger-compact.is-disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--danger-compact:disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--danger-compact.is-disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--danger-compact:disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--danger-compact.is-disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--danger-compact:disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--danger-compact.is-disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--danger-compact:disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--danger-compact.is-disabled {
--btn-bg: transparent;
--btn-col: var(--tk-control-disabled-ghost-content);
--btn-bd: transparent;
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--danger-clear, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--danger-clear, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--danger-clear, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--danger-clear, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--danger-clear,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--danger-clear,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--danger-clear,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--danger-clear,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--danger-clear {
--btn-focus-ring: var(--tk-control-neutral-filled-fill);
--btn-bg: var(--tk-control-danger-clear-fill);
--btn-col: var(--tk-control-danger-clear-content);
--btn-bd: var(--tk-control-danger-clear-outline, transparent);
border-width: var(--btn-border-width);
--btn-h-bg: var(--tk-control-danger-state-hover-alt-fill);
--btn-h-col: var(--tk-control-danger-state-hover-alt-content);
--btn-h-bd: var(--tk-control-danger-state-hover-alt-fill);
--btn-a-bg: var(--tk-control-danger-state-active-alt-fill);
--btn-a-col: var(--tk-control-danger-state-active-alt-content);
--btn-a-bd: var(--tk-control-danger-state-active-alt-fill);
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--danger-clear:disabled, .custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--danger-clear.is-disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--danger-clear:disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--danger-clear.is-disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--danger-clear:disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--danger-clear.is-disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--danger-clear:disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--danger-clear.is-disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--danger-clear:disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--danger-clear.is-disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--danger-clear:disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--danger-clear.is-disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--danger-clear:disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--danger-clear.is-disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--danger-clear:disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--danger-clear.is-disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--danger-clear:disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--danger-clear.is-disabled {
--btn-bg: transparent;
--btn-col: var(--tk-control-disabled-clear-content);
--btn-bd: var(--tk-control-disabled-clear-outline);
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--warning, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--warning, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--warning, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--warning, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--warning,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--warning,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--warning,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--warning,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--warning {
--btn-focus-ring: var(--tk-control-neutral-filled-fill);
--btn-bg: var(--tk-control-warning-filled-fill);
--btn-col: var(--tk-control-warning-filled-content);
--btn-bd: transparent;
border-width: var(--btn-border-width);
--btn-h-bg: var(--tk-control-warning-state-hover-main-fill);
--btn-h-col: var(--tk-control-warning-state-hover-main-content);
--btn-h-bd: var(--tk-control-warning-state-hover-main-fill);
--btn-a-bg: var(--tk-control-warning-state-active-main-fill);
--btn-a-col: var(--tk-control-warning-state-active-main-content);
--btn-a-bd: var(--tk-control-warning-state-active-main-fill);
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--warning:disabled, .custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--warning.is-disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--warning:disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--warning.is-disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--warning:disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--warning.is-disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--warning:disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--warning.is-disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--warning:disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--warning.is-disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--warning:disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--warning.is-disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--warning:disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--warning.is-disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--warning:disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--warning.is-disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--warning:disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--warning.is-disabled {
--btn-bg: var(--tk-control-disabled-filled-fill);
--btn-col: var(--tk-control-disabled-filled-content);
--btn-bd: transparent;
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--warning-filled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--warning-filled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--warning-filled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--warning-filled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--warning-filled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--warning-filled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--warning-filled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--warning-filled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--warning-filled {
--btn-focus-ring: var(--tk-control-neutral-filled-fill);
--btn-bg: var(--tk-control-warning-filled-fill);
--btn-col: var(--tk-control-warning-filled-content);
--btn-bd: transparent;
border-width: var(--btn-border-width);
--btn-h-bg: var(--tk-control-warning-state-hover-main-fill);
--btn-h-col: var(--tk-control-warning-state-hover-main-content);
--btn-h-bd: var(--tk-control-warning-state-hover-main-fill);
--btn-a-bg: var(--tk-control-warning-state-active-main-fill);
--btn-a-col: var(--tk-control-warning-state-active-main-content);
--btn-a-bd: var(--tk-control-warning-state-active-main-fill);
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--warning-filled:disabled, .custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--warning-filled.is-disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--warning-filled:disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--warning-filled.is-disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--warning-filled:disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--warning-filled.is-disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--warning-filled:disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--warning-filled.is-disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--warning-filled:disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--warning-filled.is-disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--warning-filled:disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--warning-filled.is-disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--warning-filled:disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--warning-filled.is-disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--warning-filled:disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--warning-filled.is-disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--warning-filled:disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--warning-filled.is-disabled {
--btn-bg: var(--tk-control-disabled-filled-fill);
--btn-col: var(--tk-control-disabled-filled-content);
--btn-bd: transparent;
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--warning-outlined, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--warning-outlined, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--warning-outlined, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--warning-outlined, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--warning-outlined,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--warning-outlined,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--warning-outlined,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--warning-outlined,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--warning-outlined {
--btn-focus-ring: var(--tk-control-neutral-filled-fill);
--btn-bg: transparent;
--btn-col: var(--tk-control-warning-outlined-content);
--btn-bd: var(--tk-control-warning-outlined-outline);
border-width: var(--btn-border-width);
--btn-h-bg: var(--tk-control-warning-state-hover-alt-fill);
--btn-h-col: var(--tk-control-warning-state-hover-alt-content);
--btn-h-bd: var(--tk-control-warning-state-hover-alt-fill);
--btn-a-bg: var(--tk-control-warning-state-active-alt-fill);
--btn-a-col: var(--tk-control-warning-state-active-alt-content);
--btn-a-bd: var(--tk-control-warning-state-active-alt-fill);
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--warning-outlined:disabled, .custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--warning-outlined.is-disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--warning-outlined:disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--warning-outlined.is-disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--warning-outlined:disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--warning-outlined.is-disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--warning-outlined:disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--warning-outlined.is-disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--warning-outlined:disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--warning-outlined.is-disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--warning-outlined:disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--warning-outlined.is-disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--warning-outlined:disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--warning-outlined.is-disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--warning-outlined:disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--warning-outlined.is-disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--warning-outlined:disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--warning-outlined.is-disabled {
--btn-bg: transparent;
--btn-col: var(--tk-control-disabled-outlined-content);
--btn-bd: var(--tk-control-disabled-outlined-outline);
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--warning-subtle, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--warning-subtle, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--warning-subtle, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--warning-subtle, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--warning-subtle,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--warning-subtle,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--warning-subtle,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--warning-subtle,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--warning-subtle {
--btn-focus-ring: var(--tk-control-neutral-filled-fill);
--btn-bg: var(--tk-control-warning-subtle-fill);
--btn-col: var(--tk-control-warning-subtle-content);
--btn-bd: var(--tk-control-warning-subtle-outline, transparent);
border-width: var(--btn-border-width);
--btn-h-bg: var(--tk-control-warning-state-hover-alt-fill);
--btn-h-col: var(--tk-control-warning-state-hover-alt-content);
--btn-h-bd: var(--tk-control-warning-state-hover-alt-fill);
--btn-a-bg: var(--tk-control-warning-state-active-alt-fill);
--btn-a-col: var(--tk-control-warning-state-active-alt-content);
--btn-a-bd: var(--tk-control-warning-state-active-alt-fill);
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--warning-subtle:disabled, .custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--warning-subtle.is-disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--warning-subtle:disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--warning-subtle.is-disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--warning-subtle:disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--warning-subtle.is-disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--warning-subtle:disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--warning-subtle.is-disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--warning-subtle:disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--warning-subtle.is-disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--warning-subtle:disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--warning-subtle.is-disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--warning-subtle:disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--warning-subtle.is-disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--warning-subtle:disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--warning-subtle.is-disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--warning-subtle:disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--warning-subtle.is-disabled {
--btn-bg: transparent;
--btn-col: var(--tk-control-disabled-subtle-content);
--btn-bd: var(--tk-control-disabled-subtle-outline);
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--warning-ghost, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--warning-ghost, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--warning-ghost, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--warning-ghost, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--warning-ghost,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--warning-ghost,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--warning-ghost,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--warning-ghost,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--warning-ghost {
--btn-focus-ring: var(--tk-control-neutral-filled-fill);
--btn-bg: transparent;
--btn-col: var(--tk-control-warning-ghost-content);
--btn-bd: transparent;
border-width: var(--btn-border-width);
--btn-h-bg: var(--tk-control-warning-state-hover-alt-fill);
--btn-h-col: var(--tk-control-warning-state-hover-alt-content);
--btn-h-bd: var(--tk-control-warning-state-hover-alt-fill);
--btn-a-bg: var(--tk-control-warning-state-active-alt-fill);
--btn-a-col: var(--tk-control-warning-state-active-alt-content);
--btn-a-bd: var(--tk-control-warning-state-active-alt-fill);
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--warning-ghost:disabled, .custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--warning-ghost.is-disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--warning-ghost:disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--warning-ghost.is-disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--warning-ghost:disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--warning-ghost.is-disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--warning-ghost:disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--warning-ghost.is-disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--warning-ghost:disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--warning-ghost.is-disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--warning-ghost:disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--warning-ghost.is-disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--warning-ghost:disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--warning-ghost.is-disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--warning-ghost:disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--warning-ghost.is-disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--warning-ghost:disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--warning-ghost.is-disabled {
--btn-bg: transparent;
--btn-col: var(--tk-control-disabled-ghost-content);
--btn-bd: transparent;
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--warning-compact, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--warning-compact, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--warning-compact, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--warning-compact, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--warning-compact,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--warning-compact,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--warning-compact,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--warning-compact,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--warning-compact {
--btn-focus-ring: var(--tk-control-neutral-filled-fill);
--btn-bg: transparent;
--btn-col: var(--tk-control-warning-ghost-content);
--btn-bd: transparent;
border-width: var(--btn-border-width);
--btn-h-bg: var(--tk-control-warning-state-hover-alt-fill);
--btn-h-col: var(--tk-control-warning-state-hover-alt-content);
--btn-h-bd: var(--tk-control-warning-state-hover-alt-fill);
--btn-a-bg: var(--tk-control-warning-state-active-alt-fill);
--btn-a-col: var(--tk-control-warning-state-active-alt-content);
--btn-a-bd: var(--tk-control-warning-state-active-alt-fill);
min-height: unset;
height: auto;
padding-left: 0;
padding-right: 0;
border-radius: 0 !important;
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--warning-compact:disabled, .custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--warning-compact.is-disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--warning-compact:disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--warning-compact.is-disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--warning-compact:disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--warning-compact.is-disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--warning-compact:disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--warning-compact.is-disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--warning-compact:disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--warning-compact.is-disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--warning-compact:disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--warning-compact.is-disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--warning-compact:disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--warning-compact.is-disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--warning-compact:disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--warning-compact.is-disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--warning-compact:disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--warning-compact.is-disabled {
--btn-bg: transparent;
--btn-col: var(--tk-control-disabled-ghost-content);
--btn-bd: transparent;
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--warning-clear, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--warning-clear, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--warning-clear, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--warning-clear, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--warning-clear,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--warning-clear,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--warning-clear,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--warning-clear,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--warning-clear {
--btn-focus-ring: var(--tk-control-neutral-filled-fill);
--btn-bg: var(--tk-control-warning-clear-fill);
--btn-col: var(--tk-control-warning-clear-content);
--btn-bd: var(--tk-control-warning-clear-outline, transparent);
border-width: var(--btn-border-width);
--btn-h-bg: var(--tk-control-warning-state-hover-alt-fill);
--btn-h-col: var(--tk-control-warning-state-hover-alt-content);
--btn-h-bd: var(--tk-control-warning-state-hover-alt-fill);
--btn-a-bg: var(--tk-control-warning-state-active-alt-fill);
--btn-a-col: var(--tk-control-warning-state-active-alt-content);
--btn-a-bd: var(--tk-control-warning-state-active-alt-fill);
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--warning-clear:disabled, .custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--warning-clear.is-disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--warning-clear:disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--warning-clear.is-disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--warning-clear:disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--warning-clear.is-disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--warning-clear:disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--warning-clear.is-disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--warning-clear:disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--warning-clear.is-disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--warning-clear:disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--warning-clear.is-disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--warning-clear:disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--warning-clear.is-disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--warning-clear:disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--warning-clear.is-disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--warning-clear:disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--warning-clear.is-disabled {
--btn-bg: transparent;
--btn-col: var(--tk-control-disabled-clear-content);
--btn-bd: var(--tk-control-disabled-clear-outline);
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--success, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--success, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--success, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--success, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--success,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--success,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--success,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--success,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--success {
--btn-focus-ring: var(--tk-control-neutral-filled-fill);
--btn-bg: var(--tk-control-success-filled-fill);
--btn-col: var(--tk-control-success-filled-content);
--btn-bd: transparent;
border-width: var(--btn-border-width);
--btn-h-bg: var(--tk-control-success-state-hover-main-fill);
--btn-h-col: var(--tk-control-success-state-hover-main-content);
--btn-h-bd: var(--tk-control-success-state-hover-main-fill);
--btn-a-bg: var(--tk-control-success-state-active-main-fill);
--btn-a-col: var(--tk-control-success-state-active-main-content);
--btn-a-bd: var(--tk-control-success-state-active-main-fill);
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--success:disabled, .custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--success.is-disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--success:disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--success.is-disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--success:disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--success.is-disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--success:disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--success.is-disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--success:disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--success.is-disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--success:disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--success.is-disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--success:disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--success.is-disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--success:disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--success.is-disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--success:disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--success.is-disabled {
--btn-bg: var(--tk-control-disabled-filled-fill);
--btn-col: var(--tk-control-disabled-filled-content);
--btn-bd: transparent;
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--success-filled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--success-filled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--success-filled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--success-filled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--success-filled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--success-filled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--success-filled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--success-filled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--success-filled {
--btn-focus-ring: var(--tk-control-neutral-filled-fill);
--btn-bg: var(--tk-control-success-filled-fill);
--btn-col: var(--tk-control-success-filled-content);
--btn-bd: transparent;
border-width: var(--btn-border-width);
--btn-h-bg: var(--tk-control-success-state-hover-main-fill);
--btn-h-col: var(--tk-control-success-state-hover-main-content);
--btn-h-bd: var(--tk-control-success-state-hover-main-fill);
--btn-a-bg: var(--tk-control-success-state-active-main-fill);
--btn-a-col: var(--tk-control-success-state-active-main-content);
--btn-a-bd: var(--tk-control-success-state-active-main-fill);
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--success-filled:disabled, .custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--success-filled.is-disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--success-filled:disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--success-filled.is-disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--success-filled:disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--success-filled.is-disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--success-filled:disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--success-filled.is-disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--success-filled:disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--success-filled.is-disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--success-filled:disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--success-filled.is-disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--success-filled:disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--success-filled.is-disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--success-filled:disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--success-filled.is-disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--success-filled:disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--success-filled.is-disabled {
--btn-bg: var(--tk-control-disabled-filled-fill);
--btn-col: var(--tk-control-disabled-filled-content);
--btn-bd: transparent;
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--success-outlined, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--success-outlined, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--success-outlined, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--success-outlined, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--success-outlined,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--success-outlined,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--success-outlined,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--success-outlined,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--success-outlined {
--btn-focus-ring: var(--tk-control-neutral-filled-fill);
--btn-bg: transparent;
--btn-col: var(--tk-control-success-outlined-content);
--btn-bd: var(--tk-control-success-outlined-outline);
border-width: var(--btn-border-width);
--btn-h-bg: var(--tk-control-success-state-hover-alt-fill);
--btn-h-col: var(--tk-control-success-state-hover-alt-content);
--btn-h-bd: var(--tk-control-success-state-hover-alt-fill);
--btn-a-bg: var(--tk-control-success-state-active-alt-fill);
--btn-a-col: var(--tk-control-success-state-active-alt-content);
--btn-a-bd: var(--tk-control-success-state-active-alt-fill);
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--success-outlined:disabled, .custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--success-outlined.is-disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--success-outlined:disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--success-outlined.is-disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--success-outlined:disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--success-outlined.is-disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--success-outlined:disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--success-outlined.is-disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--success-outlined:disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--success-outlined.is-disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--success-outlined:disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--success-outlined.is-disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--success-outlined:disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--success-outlined.is-disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--success-outlined:disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--success-outlined.is-disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--success-outlined:disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--success-outlined.is-disabled {
--btn-bg: transparent;
--btn-col: var(--tk-control-disabled-outlined-content);
--btn-bd: var(--tk-control-disabled-outlined-outline);
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--success-subtle, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--success-subtle, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--success-subtle, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--success-subtle, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--success-subtle,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--success-subtle,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--success-subtle,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--success-subtle,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--success-subtle {
--btn-focus-ring: var(--tk-control-neutral-filled-fill);
--btn-bg: var(--tk-control-success-subtle-fill);
--btn-col: var(--tk-control-success-subtle-content);
--btn-bd: var(--tk-control-success-subtle-outline, transparent);
border-width: var(--btn-border-width);
--btn-h-bg: var(--tk-control-success-state-hover-alt-fill);
--btn-h-col: var(--tk-control-success-state-hover-alt-content);
--btn-h-bd: var(--tk-control-success-state-hover-alt-fill);
--btn-a-bg: var(--tk-control-success-state-active-alt-fill);
--btn-a-col: var(--tk-control-success-state-active-alt-content);
--btn-a-bd: var(--tk-control-success-state-active-alt-fill);
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--success-subtle:disabled, .custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--success-subtle.is-disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--success-subtle:disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--success-subtle.is-disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--success-subtle:disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--success-subtle.is-disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--success-subtle:disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--success-subtle.is-disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--success-subtle:disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--success-subtle.is-disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--success-subtle:disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--success-subtle.is-disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--success-subtle:disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--success-subtle.is-disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--success-subtle:disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--success-subtle.is-disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--success-subtle:disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--success-subtle.is-disabled {
--btn-bg: transparent;
--btn-col: var(--tk-control-disabled-subtle-content);
--btn-bd: var(--tk-control-disabled-subtle-outline);
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--success-ghost, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--success-ghost, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--success-ghost, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--success-ghost, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--success-ghost,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--success-ghost,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--success-ghost,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--success-ghost,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--success-ghost {
--btn-focus-ring: var(--tk-control-neutral-filled-fill);
--btn-bg: transparent;
--btn-col: var(--tk-control-success-ghost-content);
--btn-bd: transparent;
border-width: var(--btn-border-width);
--btn-h-bg: var(--tk-control-success-state-hover-alt-fill);
--btn-h-col: var(--tk-control-success-state-hover-alt-content);
--btn-h-bd: var(--tk-control-success-state-hover-alt-fill);
--btn-a-bg: var(--tk-control-success-state-active-alt-fill);
--btn-a-col: var(--tk-control-success-state-active-alt-content);
--btn-a-bd: var(--tk-control-success-state-active-alt-fill);
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--success-ghost:disabled, .custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--success-ghost.is-disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--success-ghost:disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--success-ghost.is-disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--success-ghost:disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--success-ghost.is-disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--success-ghost:disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--success-ghost.is-disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--success-ghost:disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--success-ghost.is-disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--success-ghost:disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--success-ghost.is-disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--success-ghost:disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--success-ghost.is-disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--success-ghost:disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--success-ghost.is-disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--success-ghost:disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--success-ghost.is-disabled {
--btn-bg: transparent;
--btn-col: var(--tk-control-disabled-ghost-content);
--btn-bd: transparent;
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--success-compact, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--success-compact, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--success-compact, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--success-compact, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--success-compact,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--success-compact,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--success-compact,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--success-compact,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--success-compact {
--btn-focus-ring: var(--tk-control-neutral-filled-fill);
--btn-bg: transparent;
--btn-col: var(--tk-control-success-ghost-content);
--btn-bd: transparent;
border-width: var(--btn-border-width);
--btn-h-bg: var(--tk-control-success-state-hover-alt-fill);
--btn-h-col: var(--tk-control-success-state-hover-alt-content);
--btn-h-bd: var(--tk-control-success-state-hover-alt-fill);
--btn-a-bg: var(--tk-control-success-state-active-alt-fill);
--btn-a-col: var(--tk-control-success-state-active-alt-content);
--btn-a-bd: var(--tk-control-success-state-active-alt-fill);
min-height: unset;
height: auto;
padding-left: 0;
padding-right: 0;
border-radius: 0 !important;
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--success-compact:disabled, .custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--success-compact.is-disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--success-compact:disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--success-compact.is-disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--success-compact:disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--success-compact.is-disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--success-compact:disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--success-compact.is-disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--success-compact:disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--success-compact.is-disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--success-compact:disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--success-compact.is-disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--success-compact:disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--success-compact.is-disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--success-compact:disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--success-compact.is-disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--success-compact:disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--success-compact.is-disabled {
--btn-bg: transparent;
--btn-col: var(--tk-control-disabled-ghost-content);
--btn-bd: transparent;
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--success-clear, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--success-clear, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--success-clear, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--success-clear, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--success-clear,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--success-clear,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--success-clear,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--success-clear,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--success-clear {
--btn-focus-ring: var(--tk-control-neutral-filled-fill);
--btn-bg: var(--tk-control-success-clear-fill);
--btn-col: var(--tk-control-success-clear-content);
--btn-bd: var(--tk-control-success-clear-outline, transparent);
border-width: var(--btn-border-width);
--btn-h-bg: var(--tk-control-success-state-hover-alt-fill);
--btn-h-col: var(--tk-control-success-state-hover-alt-content);
--btn-h-bd: var(--tk-control-success-state-hover-alt-fill);
--btn-a-bg: var(--tk-control-success-state-active-alt-fill);
--btn-a-col: var(--tk-control-success-state-active-alt-content);
--btn-a-bd: var(--tk-control-success-state-active-alt-fill);
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--success-clear:disabled, .custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--success-clear.is-disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--success-clear:disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--success-clear.is-disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--success-clear:disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--success-clear.is-disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--success-clear:disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--success-clear.is-disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--success-clear:disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--success-clear.is-disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--success-clear:disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--success-clear.is-disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--success-clear:disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--success-clear.is-disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--success-clear:disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--success-clear.is-disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--success-clear:disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--success-clear.is-disabled {
--btn-bg: transparent;
--btn-col: var(--tk-control-disabled-clear-content);
--btn-bd: var(--tk-control-disabled-clear-outline);
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--info, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--info, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--info, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--info, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--info,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--info,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--info,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--info,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--info {
--btn-focus-ring: var(--tk-control-neutral-filled-fill);
--btn-bg: var(--tk-control-info-filled-fill);
--btn-col: var(--tk-control-info-filled-content);
--btn-bd: transparent;
border-width: var(--btn-border-width);
--btn-h-bg: var(--tk-control-info-state-hover-main-fill);
--btn-h-col: var(--tk-control-info-state-hover-main-content);
--btn-h-bd: var(--tk-control-info-state-hover-main-fill);
--btn-a-bg: var(--tk-control-info-state-active-main-fill);
--btn-a-col: var(--tk-control-info-state-active-main-content);
--btn-a-bd: var(--tk-control-info-state-active-main-fill);
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--info:disabled, .custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--info.is-disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--info:disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--info.is-disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--info:disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--info.is-disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--info:disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--info.is-disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--info:disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--info.is-disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--info:disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--info.is-disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--info:disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--info.is-disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--info:disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--info.is-disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--info:disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--info.is-disabled {
--btn-bg: var(--tk-control-disabled-filled-fill);
--btn-col: var(--tk-control-disabled-filled-content);
--btn-bd: transparent;
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--info-filled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--info-filled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--info-filled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--info-filled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--info-filled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--info-filled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--info-filled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--info-filled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--info-filled {
--btn-focus-ring: var(--tk-control-neutral-filled-fill);
--btn-bg: var(--tk-control-info-filled-fill);
--btn-col: var(--tk-control-info-filled-content);
--btn-bd: transparent;
border-width: var(--btn-border-width);
--btn-h-bg: var(--tk-control-info-state-hover-main-fill);
--btn-h-col: var(--tk-control-info-state-hover-main-content);
--btn-h-bd: var(--tk-control-info-state-hover-main-fill);
--btn-a-bg: var(--tk-control-info-state-active-main-fill);
--btn-a-col: var(--tk-control-info-state-active-main-content);
--btn-a-bd: var(--tk-control-info-state-active-main-fill);
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--info-filled:disabled, .custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--info-filled.is-disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--info-filled:disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--info-filled.is-disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--info-filled:disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--info-filled.is-disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--info-filled:disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--info-filled.is-disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--info-filled:disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--info-filled.is-disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--info-filled:disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--info-filled.is-disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--info-filled:disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--info-filled.is-disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--info-filled:disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--info-filled.is-disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--info-filled:disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--info-filled.is-disabled {
--btn-bg: var(--tk-control-disabled-filled-fill);
--btn-col: var(--tk-control-disabled-filled-content);
--btn-bd: transparent;
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--info-outlined, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--info-outlined, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--info-outlined, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--info-outlined, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--info-outlined,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--info-outlined,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--info-outlined,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--info-outlined,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--info-outlined {
--btn-focus-ring: var(--tk-control-neutral-filled-fill);
--btn-bg: transparent;
--btn-col: var(--tk-control-info-outlined-content);
--btn-bd: var(--tk-control-info-outlined-outline);
border-width: var(--btn-border-width);
--btn-h-bg: var(--tk-control-info-state-hover-alt-fill);
--btn-h-col: var(--tk-control-info-state-hover-alt-content);
--btn-h-bd: var(--tk-control-info-state-hover-alt-fill);
--btn-a-bg: var(--tk-control-info-state-active-alt-fill);
--btn-a-col: var(--tk-control-info-state-active-alt-content);
--btn-a-bd: var(--tk-control-info-state-active-alt-fill);
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--info-outlined:disabled, .custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--info-outlined.is-disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--info-outlined:disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--info-outlined.is-disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--info-outlined:disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--info-outlined.is-disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--info-outlined:disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--info-outlined.is-disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--info-outlined:disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--info-outlined.is-disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--info-outlined:disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--info-outlined.is-disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--info-outlined:disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--info-outlined.is-disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--info-outlined:disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--info-outlined.is-disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--info-outlined:disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--info-outlined.is-disabled {
--btn-bg: transparent;
--btn-col: var(--tk-control-disabled-outlined-content);
--btn-bd: var(--tk-control-disabled-outlined-outline);
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--info-subtle, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--info-subtle, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--info-subtle, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--info-subtle, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--info-subtle,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--info-subtle,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--info-subtle,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--info-subtle,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--info-subtle {
--btn-focus-ring: var(--tk-control-neutral-filled-fill);
--btn-bg: var(--tk-control-info-subtle-fill);
--btn-col: var(--tk-control-info-subtle-content);
--btn-bd: var(--tk-control-info-subtle-outline, transparent);
border-width: var(--btn-border-width);
--btn-h-bg: var(--tk-control-info-state-hover-alt-fill);
--btn-h-col: var(--tk-control-info-state-hover-alt-content);
--btn-h-bd: var(--tk-control-info-state-hover-alt-fill);
--btn-a-bg: var(--tk-control-info-state-active-alt-fill);
--btn-a-col: var(--tk-control-info-state-active-alt-content);
--btn-a-bd: var(--tk-control-info-state-active-alt-fill);
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--info-subtle:disabled, .custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--info-subtle.is-disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--info-subtle:disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--info-subtle.is-disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--info-subtle:disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--info-subtle.is-disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--info-subtle:disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--info-subtle.is-disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--info-subtle:disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--info-subtle.is-disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--info-subtle:disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--info-subtle.is-disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--info-subtle:disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--info-subtle.is-disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--info-subtle:disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--info-subtle.is-disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--info-subtle:disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--info-subtle.is-disabled {
--btn-bg: transparent;
--btn-col: var(--tk-control-disabled-subtle-content);
--btn-bd: var(--tk-control-disabled-subtle-outline);
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--info-ghost, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--info-ghost, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--info-ghost, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--info-ghost, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--info-ghost,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--info-ghost,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--info-ghost,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--info-ghost,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--info-ghost {
--btn-focus-ring: var(--tk-control-neutral-filled-fill);
--btn-bg: transparent;
--btn-col: var(--tk-control-info-ghost-content);
--btn-bd: transparent;
border-width: var(--btn-border-width);
--btn-h-bg: var(--tk-control-info-state-hover-alt-fill);
--btn-h-col: var(--tk-control-info-state-hover-alt-content);
--btn-h-bd: var(--tk-control-info-state-hover-alt-fill);
--btn-a-bg: var(--tk-control-info-state-active-alt-fill);
--btn-a-col: var(--tk-control-info-state-active-alt-content);
--btn-a-bd: var(--tk-control-info-state-active-alt-fill);
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--info-ghost:disabled, .custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--info-ghost.is-disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--info-ghost:disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--info-ghost.is-disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--info-ghost:disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--info-ghost.is-disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--info-ghost:disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--info-ghost.is-disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--info-ghost:disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--info-ghost.is-disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--info-ghost:disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--info-ghost.is-disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--info-ghost:disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--info-ghost.is-disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--info-ghost:disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--info-ghost.is-disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--info-ghost:disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--info-ghost.is-disabled {
--btn-bg: transparent;
--btn-col: var(--tk-control-disabled-ghost-content);
--btn-bd: transparent;
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--info-compact, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--info-compact, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--info-compact, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--info-compact, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--info-compact,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--info-compact,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--info-compact,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--info-compact,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--info-compact {
--btn-focus-ring: var(--tk-control-neutral-filled-fill);
--btn-bg: transparent;
--btn-col: var(--tk-control-info-ghost-content);
--btn-bd: transparent;
border-width: var(--btn-border-width);
--btn-h-bg: var(--tk-control-info-state-hover-alt-fill);
--btn-h-col: var(--tk-control-info-state-hover-alt-content);
--btn-h-bd: var(--tk-control-info-state-hover-alt-fill);
--btn-a-bg: var(--tk-control-info-state-active-alt-fill);
--btn-a-col: var(--tk-control-info-state-active-alt-content);
--btn-a-bd: var(--tk-control-info-state-active-alt-fill);
min-height: unset;
height: auto;
padding-left: 0;
padding-right: 0;
border-radius: 0 !important;
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--info-compact:disabled, .custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--info-compact.is-disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--info-compact:disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--info-compact.is-disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--info-compact:disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--info-compact.is-disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--info-compact:disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--info-compact.is-disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--info-compact:disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--info-compact.is-disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--info-compact:disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--info-compact.is-disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--info-compact:disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--info-compact.is-disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--info-compact:disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--info-compact.is-disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--info-compact:disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--info-compact.is-disabled {
--btn-bg: transparent;
--btn-col: var(--tk-control-disabled-ghost-content);
--btn-bd: transparent;
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--info-clear, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--info-clear, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--info-clear, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--info-clear, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--info-clear,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--info-clear,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--info-clear,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--info-clear,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--info-clear {
--btn-focus-ring: var(--tk-control-neutral-filled-fill);
--btn-bg: var(--tk-control-info-clear-fill);
--btn-col: var(--tk-control-info-clear-content);
--btn-bd: var(--tk-control-info-clear-outline, transparent);
border-width: var(--btn-border-width);
--btn-h-bg: var(--tk-control-info-state-hover-alt-fill);
--btn-h-col: var(--tk-control-info-state-hover-alt-content);
--btn-h-bd: var(--tk-control-info-state-hover-alt-fill);
--btn-a-bg: var(--tk-control-info-state-active-alt-fill);
--btn-a-col: var(--tk-control-info-state-active-alt-content);
--btn-a-bd: var(--tk-control-info-state-active-alt-fill);
}
.custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--info-clear:disabled, .custom-dd-body .btn:not(.arrow):not(.clear-btn).btn--info-clear.is-disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--info-clear:disabled, .custom-dd-body .button:not(.arrow):not(.clear-btn).btn--info-clear.is-disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--info-clear:disabled, .custom-dd-body button:not(.button-chip):not(.arrow):not(.clear-btn).btn--info-clear.is-disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--info-clear:disabled, .custom-dd-body button.link:not(.arrow):not(.clear-btn).btn--info-clear.is-disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--info-clear:disabled, .custom-dd-body button:not(.link):not(.button-chip):not(.arrow):not(.clear-btn).btn--info-clear.is-disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--info-clear:disabled,
.custom-dd-body button[type=button]:not(.button-chip):not(.arrow):not(.clear-btn).btn--info-clear.is-disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--info-clear:disabled,
.custom-dd-body button[type=reset]:not(.button-chip):not(.arrow):not(.clear-btn).btn--info-clear.is-disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--info-clear:disabled,
.custom-dd-body button[type=submit]:not(.button-chip):not(.arrow):not(.clear-btn).btn--info-clear.is-disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--info-clear:disabled,
.custom-dd-body .button:not(.arrow):not(.clear-btn).btn--info-clear.is-disabled {
--btn-bg: transparent;
--btn-col: var(--tk-control-disabled-clear-content);
--btn-bd: var(--tk-control-disabled-clear-outline);
}
.custom-dd-body .toggle-button {
display: inline-flex;
justify-content: center;
align-items: center;
position: relative;
font-family: var(--font-main, sans-serif);
font-weight: 600;
text-decoration: none;
white-space: nowrap;
line-height: 1;
border-style: solid;
border-width: var(--nb-common-stroke-m, 1.5px);
border-radius: 3rem;
cursor: pointer;
transition: all var(--def-trans-time, 0.2s) ease-in-out, outline-width 0s;
-webkit-appearance: none;
outline: 0 solid transparent;
outline-offset: 2px;
box-sizing: border-box;
background-color: var(--btn-bg);
color: var(--btn-col);
border-color: var(--btn-bd);
}
@media (hover: hover) {
.custom-dd-body .toggle-button:hover {
background-color: var(--btn-h-bg);
color: var(--btn-h-col);
border-color: var(--btn-h-bd);
opacity: 1;
}
}
.custom-dd-body .toggle-button:active, .custom-dd-body .toggle-button.is-active {
background-color: var(--btn-a-bg);
color: var(--btn-a-col);
border-color: var(--btn-a-bd);
opacity: 1;
}
.custom-dd-body .toggle-button:focus, .custom-dd-body .toggle-button:focus-visible {
background-color: var(--btn-h-bg);
color: var(--btn-h-col);
border-color: var(--btn-h-bd);
outline: var(--nb-common-stroke-m, 1.5px) solid var(--btn-focus-ring);
opacity: 1;
}
.custom-dd-body .toggle-button:disabled, .custom-dd-body .toggle-button.is-disabled {
cursor: not-allowed;
pointer-events: none;
box-shadow: none;
opacity: 1;
--btn-bg: transparent;
--btn-col: var(--tk-control-disabled-subtle-outline) !important;
--btn-bd: var(--tk-control-disabled-subtle-content) !important;
}
.custom-dd-body .toggle-button:disabled .btn-badge, .custom-dd-body .toggle-button.is-disabled .btn-badge {
display: none !important;
}
.custom-dd-body .toggle-button svg {
fill: currentColor;
flex-shrink: 0;
display: block;
}
.custom-dd-body .toggle-button svg path {
fill: currentColor;
}
.custom-dd-body .toggle-button .btn-badge {
height: var(--nb-common-control-size-3xs, 2.4rem);
min-width: var(--nb-common-control-size-3xs, 2.4rem);
border-radius: var(--nb-common-radius-control-pill, 100rem);
padding: var(--nb-atom-badge-3xs-sides);
color: var(--tk-ink-contrast-primary);
background-color: var(--btn-badge-bg, var(--tk-surface-strong));
display: none;
align-items: center;
justify-content: center;
}
.custom-dd-body .toggle-button.btn-on, .custom-dd-body .toggle-button.active {
border-radius: var(--nb-common-radius-control-soft, 0.8rem);
background-color: var(--btn-on-bg);
color: var(--btn-on-col);
border-color: var(--btn-on-bd);
}
.custom-dd-body .toggle-button.btn-on .btn-badge, .custom-dd-body .toggle-button.active .btn-badge {
display: flex;
background-color: var(--btn-on-badge-bg, var(--btn-badge-bg));
color: var(--btn-on-badge-col);
}
@media (hover: hover) {
.custom-dd-body .toggle-button.btn-on:hover, .custom-dd-body .toggle-button.active:hover {
background-color: var(--btn-on-h-bg, var(--btn-on-bg));
color: var(--btn-on-h-col, var(--btn-on-col));
border-color: var(--btn-on-h-bd, var(--btn-on-bd));
}
}
.custom-dd-body .toggle-button.btn--size-l {
height: var(--nb-common-control-size-l, 5.2rem);
padding: 0 var(--nb-atom-button-l-sides, 2.8rem);
gap: var(--nb-atom-button-l-gap, 1rem);
font-size: var(--tg-styles-button-m-size, 1.8rem);
}
.custom-dd-body .toggle-button.btn--size-l svg {
width: var(--nb-atom-button-l-icon-size, 2.4rem);
min-width: var(--nb-atom-button-l-icon-size, 2.4rem);
max-width: var(--nb-atom-button-l-icon-size, 2.4rem);
height: var(--nb-atom-button-l-icon-size, 2.4rem);
margin-left: -4px;
}
.custom-dd-body .toggle-button.btn--size-l .btn-badge {
margin-right: -4px;
}
.custom-dd-body .toggle-button.btn--size-m {
height: var(--nb-common-control-size-m, 4.4rem);
padding: 0 var(--nb-atom-button-m-sides, 2rem);
gap: var(--nb-atom-button-m-gap, 0.8rem);
font-size: var(--tg-styles-button-s-size, 1.6rem);
}
.custom-dd-body .toggle-button.btn--size-m svg {
width: var(--nb-atom-button-m-icon-size, 2rem);
min-width: var(--nb-atom-button-m-icon-size, 2rem);
max-width: var(--nb-atom-button-m-icon-size, 2rem);
height: var(--nb-atom-button-m-icon-size, 2rem);
margin-left: -2px;
}
.custom-dd-body .toggle-button.btn--size-m .btn-badge {
margin-right: -2px;
}
.custom-dd-body .toggle-button.btn--size-s {
height: var(--nb-common-control-size-s, 3.6rem);
padding: 0 var(--nb-atom-button-s-sides, 1.6rem);
gap: var(--nb-atom-button-s-gap, 0.8rem);
font-size: var(--tg-styles-button-xs-size, 1.4rem);
}
.custom-dd-body .toggle-button.btn--size-s svg {
width: var(--nb-atom-button-s-icon-size, 1.8rem);
min-width: var(--nb-atom-button-s-icon-size, 1.8rem);
max-width: var(--nb-atom-button-s-icon-size, 1.8rem);
height: var(--nb-atom-button-s-icon-size, 1.8rem);
margin-left: -2px;
}
.custom-dd-body .toggle-button.btn--size-s .btn-badge {
margin-right: -2px;
}
.custom-dd-body .toggle-button.btn--neutral {
--btn-focus-ring: var(--tk-control-neutral-filled-fill, var(--tk-control-neutral-filled-fill));
--btn-bg: var(--tk-control-inactive-fill);
--btn-col: var(--tk-control-inactive-content);
--btn-bd: var(--tk-control-inactive-outline);
--btn-h-bg: var(--tk-control-neutral-state-hover-alt-fill, var(--tk-control-neutral-subtle-fill));
--btn-h-col: var(--tk-control-neutral-state-hover-alt-content, var(--tk-control-neutral-subtle-content));
--btn-h-bd: var(--tk-control-neutral-state-hover-alt-fill, var(--tk-control-neutral-subtle-content));
--btn-a-bg: var(--tk-control-neutral-state-active-alt-fill, var(--tk-control-neutral-state-active-alt-fill));
--btn-a-col: var(--tk-control-neutral-state-active-alt-content, var(--tk-control-neutral-state-active-alt-content));
--btn-a-bd: var(--tk-control-neutral-state-active-alt-fill, var(--tk-control-neutral-state-active-alt-fill));
--btn-badge-bg: var(--tk-surface-strong);
--btn-badge-col: var(--tk-control-neutral-filled-content, var(--tk-control-neutral-filled-content));
--btn-on-bg: var(--tk-control-neutral-subtle-fill);
--btn-on-col: var(--tk-control-neutral-outlined-content);
--btn-on-bd: var(--tk-control-neutral-outlined-outline);
--btn-on-h-bg: var(--tk-control-neutral-state-hover-alt-fill);
--btn-on-h-col: var(--tk-control-neutral-state-hover-alt-content);
--btn-on-h-bd: var(--tk-control-neutral-state-hover-alt-fill);
--btn-on-badge-bg: var(--tk-control-neutral-filled-fill);
--btn-on-badge-col: var(--tk-control-neutral-filled-content);
}
.custom-dd-body .toggle-button.btn--primary {
--btn-focus-ring: var(--tk-control-primary-filled-fill, var(--tk-control-neutral-filled-fill));
--btn-bg: var(--tk-control-inactive-fill);
--btn-col: var(--tk-control-inactive-content);
--btn-bd: var(--tk-control-inactive-outline);
--btn-h-bg: var(--tk-control-primary-state-hover-alt-fill, var(--tk-control-neutral-subtle-fill));
--btn-h-col: var(--tk-control-primary-state-hover-alt-content, var(--tk-control-neutral-subtle-content));
--btn-h-bd: var(--tk-control-primary-state-hover-alt-fill, var(--tk-control-neutral-subtle-content));
--btn-a-bg: var(--tk-control-primary-state-active-alt-fill, var(--tk-control-neutral-state-active-alt-fill));
--btn-a-col: var(--tk-control-primary-state-active-alt-content, var(--tk-control-neutral-state-active-alt-content));
--btn-a-bd: var(--tk-control-primary-state-active-alt-fill, var(--tk-control-neutral-state-active-alt-fill));
--btn-badge-bg: var(--tk-surface-strong);
--btn-badge-col: var(--tk-control-primary-filled-content, var(--tk-control-neutral-filled-content));
--btn-on-bg: var(--tk-control-neutral-subtle-fill);
--btn-on-col: var(--tk-control-primary-subtle-content);
--btn-on-bd: var(--tk-control-primary-subtle-outline);
--btn-on-h-bg: var(--tk-control-primary-state-hover-alt-fill);
--btn-on-h-col: var(--tk-control-primary-state-hover-alt-content);
--btn-on-h-bd: var(--tk-control-primary-state-hover-alt-fill);
--btn-on-badge-bg: var(--tk-control-primary-filled-fill);
--btn-on-badge-col: var(--tk-control-primary-filled-content);
}
.custom-dd-body .toggle-button.btn--secondary {
--btn-focus-ring: var(--tk-control-secondary-filled-fill, var(--tk-control-neutral-filled-fill));
--btn-bg: var(--tk-control-inactive-fill);
--btn-col: var(--tk-control-inactive-content);
--btn-bd: var(--tk-control-inactive-outline);
--btn-h-bg: var(--tk-control-secondary-state-hover-alt-fill, var(--tk-control-neutral-subtle-fill));
--btn-h-col: var(--tk-control-secondary-state-hover-alt-content, var(--tk-control-neutral-subtle-content));
--btn-h-bd: var(--tk-control-secondary-state-hover-alt-fill, var(--tk-control-neutral-subtle-content));
--btn-a-bg: var(--tk-control-secondary-state-active-alt-fill, var(--tk-control-neutral-state-active-alt-fill));
--btn-a-col: var(--tk-control-secondary-state-active-alt-content, var(--tk-control-neutral-state-active-alt-content));
--btn-a-bd: var(--tk-control-secondary-state-active-alt-fill, var(--tk-control-neutral-state-active-alt-fill));
--btn-badge-bg: var(--tk-surface-strong);
--btn-badge-col: var(--tk-control-secondary-filled-content, var(--tk-control-neutral-filled-content));
--btn-on-bg: var(--tk-control-neutral-subtle-fill);
--btn-on-col: var(--tk-control-secondary-subtle-content);
--btn-on-bd: var(--tk-control-secondary-subtle-outline);
--btn-on-h-bg: var(--tk-control-secondary-state-hover-alt-fill);
--btn-on-h-col: var(--tk-control-secondary-state-hover-alt-content);
--btn-on-h-bd: var(--tk-control-secondary-state-hover-alt-fill);
--btn-on-badge-bg: var(--tk-control-secondary-filled-fill);
--btn-on-badge-col: var(--tk-control-secondary-filled-content);
}
.custom-dd-body .toggle-button.btn--tertiary {
--btn-focus-ring: var(--tk-control-tertiary-filled-fill, var(--tk-control-neutral-filled-fill));
--btn-bg: var(--tk-control-inactive-fill);
--btn-col: var(--tk-control-inactive-content);
--btn-bd: var(--tk-control-inactive-outline);
--btn-h-bg: var(--tk-control-tertiary-state-hover-alt-fill, var(--tk-control-neutral-subtle-fill));
--btn-h-col: var(--tk-control-tertiary-state-hover-alt-content, var(--tk-control-neutral-subtle-content));
--btn-h-bd: var(--tk-control-tertiary-state-hover-alt-fill, var(--tk-control-neutral-subtle-content));
--btn-a-bg: var(--tk-control-tertiary-state-active-alt-fill, var(--tk-control-neutral-state-active-alt-fill));
--btn-a-col: var(--tk-control-tertiary-state-active-alt-content, var(--tk-control-neutral-state-active-alt-content));
--btn-a-bd: var(--tk-control-tertiary-state-active-alt-fill, var(--tk-control-neutral-state-active-alt-fill));
--btn-badge-bg: var(--tk-surface-strong);
--btn-badge-col: var(--tk-control-tertiary-filled-content, var(--tk-control-neutral-filled-content));
--btn-on-bg: var(--tk-control-neutral-subtle-fill);
--btn-on-col: var(--tk-control-tertiary-subtle-content);
--btn-on-bd: var(--tk-control-tertiary-subtle-outline);
--btn-on-h-bg: var(--tk-control-tertiary-state-hover-alt-fill);
--btn-on-h-col: var(--tk-control-tertiary-state-hover-alt-content);
--btn-on-h-bd: var(--tk-control-tertiary-state-hover-alt-fill);
--btn-on-badge-bg: var(--tk-control-tertiary-filled-fill);
--btn-on-badge-col: var(--tk-control-tertiary-filled-content);
}
.custom-dd-body .toggle-button.btn--danger {
--btn-focus-ring: var(--tk-control-danger-filled-fill, var(--tk-control-neutral-filled-fill));
--btn-bg: var(--tk-control-inactive-fill);
--btn-col: var(--tk-control-inactive-content);
--btn-bd: var(--tk-control-inactive-outline);
--btn-h-bg: var(--tk-control-danger-state-hover-alt-fill, var(--tk-control-neutral-subtle-fill));
--btn-h-col: var(--tk-control-danger-state-hover-alt-content, var(--tk-control-neutral-subtle-content));
--btn-h-bd: var(--tk-control-danger-state-hover-alt-fill, var(--tk-control-neutral-subtle-content));
--btn-a-bg: var(--tk-control-danger-state-active-alt-fill, var(--tk-control-neutral-state-active-alt-fill));
--btn-a-col: var(--tk-control-danger-state-active-alt-content, var(--tk-control-neutral-state-active-alt-content));
--btn-a-bd: var(--tk-control-danger-state-active-alt-fill, var(--tk-control-neutral-state-active-alt-fill));
--btn-badge-bg: var(--tk-surface-strong);
--btn-badge-col: var(--tk-control-danger-filled-content, var(--tk-control-neutral-filled-content));
--btn-on-bg: var(--tk-control-neutral-subtle-fill);
--btn-on-col: var(--tk-control-danger-subtle-content);
--btn-on-bd: var(--tk-control-danger-subtle-outline);
--btn-on-h-bg: var(--tk-control-danger-state-hover-alt-fill);
--btn-on-h-col: var(--tk-control-danger-state-hover-alt-content);
--btn-on-h-bd: var(--tk-control-danger-state-hover-alt-fill);
--btn-on-badge-bg: var(--tk-control-danger-filled-fill);
--btn-on-badge-col: var(--tk-control-danger-filled-content);
}
.custom-dd-body .toggle-button.btn--warning {
--btn-focus-ring: var(--tk-control-warning-filled-fill, var(--tk-control-neutral-filled-fill));
--btn-bg: var(--tk-control-inactive-fill);
--btn-col: var(--tk-control-inactive-content);
--btn-bd: var(--tk-control-inactive-outline);
--btn-h-bg: var(--tk-control-warning-state-hover-alt-fill, var(--tk-control-neutral-subtle-fill));
--btn-h-col: var(--tk-control-warning-state-hover-alt-content, var(--tk-control-neutral-subtle-content));
--btn-h-bd: var(--tk-control-warning-state-hover-alt-fill, var(--tk-control-neutral-subtle-content));
--btn-a-bg: var(--tk-control-warning-state-active-alt-fill, var(--tk-control-neutral-state-active-alt-fill));
--btn-a-col: var(--tk-control-warning-state-active-alt-content, var(--tk-control-neutral-state-active-alt-content));
--btn-a-bd: var(--tk-control-warning-state-active-alt-fill, var(--tk-control-neutral-state-active-alt-fill));
--btn-badge-bg: var(--tk-surface-strong);
--btn-badge-col: var(--tk-control-warning-filled-content, var(--tk-control-neutral-filled-content));
--btn-on-bg: var(--tk-control-neutral-subtle-fill);
--btn-on-col: var(--tk-control-warning-subtle-content);
--btn-on-bd: var(--tk-control-warning-subtle-outline);
--btn-on-h-bg: var(--tk-control-warning-state-hover-alt-fill);
--btn-on-h-col: var(--tk-control-warning-state-hover-alt-content);
--btn-on-h-bd: var(--tk-control-warning-state-hover-alt-fill);
--btn-on-badge-bg: var(--tk-control-warning-filled-fill);
--btn-on-badge-col: var(--tk-control-warning-filled-content);
}
.custom-dd-body .toggle-button.btn--success {
--btn-focus-ring: var(--tk-control-success-filled-fill, var(--tk-control-neutral-filled-fill));
--btn-bg: var(--tk-control-inactive-fill);
--btn-col: var(--tk-control-inactive-content);
--btn-bd: var(--tk-control-inactive-outline);
--btn-h-bg: var(--tk-control-success-state-hover-alt-fill, var(--tk-control-neutral-subtle-fill));
--btn-h-col: var(--tk-control-success-state-hover-alt-content, var(--tk-control-neutral-subtle-content));
--btn-h-bd: var(--tk-control-success-state-hover-alt-fill, var(--tk-control-neutral-subtle-content));
--btn-a-bg: var(--tk-control-success-state-active-alt-fill, var(--tk-control-neutral-state-active-alt-fill));
--btn-a-col: var(--tk-control-success-state-active-alt-content, var(--tk-control-neutral-state-active-alt-content));
--btn-a-bd: var(--tk-control-success-state-active-alt-fill, var(--tk-control-neutral-state-active-alt-fill));
--btn-badge-bg: var(--tk-surface-strong);
--btn-badge-col: var(--tk-control-success-filled-content, var(--tk-control-neutral-filled-content));
--btn-on-bg: var(--tk-control-neutral-subtle-fill);
--btn-on-col: var(--tk-control-success-subtle-content);
--btn-on-bd: var(--tk-control-success-subtle-outline);
--btn-on-h-bg: var(--tk-control-success-state-hover-alt-fill);
--btn-on-h-col: var(--tk-control-success-state-hover-alt-content);
--btn-on-h-bd: var(--tk-control-success-state-hover-alt-fill);
--btn-on-badge-bg: var(--tk-control-success-filled-fill);
--btn-on-badge-col: var(--tk-control-success-filled-content);
}
.custom-dd-body .toggle-button.btn--info {
--btn-focus-ring: var(--tk-control-info-filled-fill, var(--tk-control-neutral-filled-fill));
--btn-bg: var(--tk-control-inactive-fill);
--btn-col: var(--tk-control-inactive-content);
--btn-bd: var(--tk-control-inactive-outline);
--btn-h-bg: var(--tk-control-info-state-hover-alt-fill, var(--tk-control-neutral-subtle-fill));
--btn-h-col: var(--tk-control-info-state-hover-alt-content, var(--tk-control-neutral-subtle-content));
--btn-h-bd: var(--tk-control-info-state-hover-alt-fill, var(--tk-control-neutral-subtle-content));
--btn-a-bg: var(--tk-control-info-state-active-alt-fill, var(--tk-control-neutral-state-active-alt-fill));
--btn-a-col: var(--tk-control-info-state-active-alt-content, var(--tk-control-neutral-state-active-alt-content));
--btn-a-bd: var(--tk-control-info-state-active-alt-fill, var(--tk-control-neutral-state-active-alt-fill));
--btn-badge-bg: var(--tk-surface-strong);
--btn-badge-col: var(--tk-control-info-filled-content, var(--tk-control-neutral-filled-content));
--btn-on-bg: var(--tk-control-neutral-subtle-fill);
--btn-on-col: var(--tk-control-info-subtle-content);
--btn-on-bd: var(--tk-control-info-subtle-outline);
--btn-on-h-bg: var(--tk-control-info-state-hover-alt-fill);
--btn-on-h-col: var(--tk-control-info-state-hover-alt-content);
--btn-on-h-bd: var(--tk-control-info-state-hover-alt-fill);
--btn-on-badge-bg: var(--tk-control-info-filled-fill);
--btn-on-badge-col: var(--tk-control-info-filled-content);
}
.custom-dd-body .context-button {
display: inline-flex;
justify-content: center;
align-items: center;
position: relative;
font-family: var(--font-main, sans-serif);
font-weight: 600;
text-decoration: none;
white-space: nowrap;
line-height: 1;
border-style: solid;
border-width: var(--nb-common-stroke-m, 1.5px);
border-radius: var(--nb-common-radius-control-pill, 100rem);
cursor: pointer;
transition: all var(--def-trans-time, 0.2s) ease-in-out, outline-width 0s;
-webkit-appearance: none;
outline: 0 solid transparent;
outline-offset: 2px;
box-sizing: border-box;
background-color: var(--btn-bg);
color: var(--btn-col);
border-color: var(--btn-bd);
}
@media (hover: hover) {
.custom-dd-body .context-button:hover {
background-color: var(--btn-h-bg);
color: var(--btn-h-col);
border-color: var(--btn-h-bd);
opacity: 1;
}
}
.custom-dd-body .context-button:active, .custom-dd-body .context-button.is-active {
background-color: var(--btn-a-bg);
color: var(--btn-a-col);
border-color: var(--btn-a-bd);
opacity: 1;
}
.custom-dd-body .context-button:focus, .custom-dd-body .context-button:focus-visible {
background-color: var(--btn-h-bg);
color: var(--btn-h-col);
border-color: var(--btn-h-bd);
outline: var(--nb-common-stroke-m, 1.5px) solid var(--btn-focus-ring);
opacity: 1;
}
.custom-dd-body .context-button:disabled, .custom-dd-body .context-button.is-disabled {
cursor: not-allowed;
pointer-events: none;
box-shadow: none;
opacity: 1;
--btn-bg: transparent;
--btn-col: var(--tk-control-disabled-subtle-outline) !important;
--btn-bd: var(--tk-control-disabled-subtle-content) !important;
}
.custom-dd-body .context-button:disabled .btn-badge, .custom-dd-body .context-button.is-disabled .btn-badge {
display: none !important;
}
.custom-dd-body .context-button svg {
fill: currentColor;
flex-shrink: 0;
display: block;
}
.custom-dd-body .context-button svg path {
fill: currentColor;
}
.custom-dd-body .context-button .btn-badge {
height: var(--nb-common-control-size-3xs, 2.4rem);
min-width: var(--nb-common-control-size-3xs, 2.4rem);
border-radius: var(--nb-common-radius-control-pill, 100rem);
padding: var(--nb-atom-badge-3xs-padding-h);
color: var(--btn-badge-col);
background-color: var(--btn-badge-bg);
display: inline-flex;
align-items: center;
justify-content: center;
}
.custom-dd-body .context-button.btn-on, .custom-dd-body .context-button.active {
border-radius: var(--nb-common-radius-control-soft, 0.8rem);
background-color: var(--btn-on-bg);
color: var(--btn-on-col);
border-color: var(--btn-on-bd);
}
@media (hover: hover) {
.custom-dd-body .context-button.btn-on:hover, .custom-dd-body .context-button.active:hover {
background-color: var(--btn-on-h-bg, var(--btn-on-bg));
color: var(--btn-on-h-col, var(--btn-on-col));
border-color: var(--btn-on-h-bd, var(--btn-on-bd));
}
}
.custom-dd-body .context-button.btn--size-l {
height: var(--nb-common-control-size-l, 5.2rem);
padding: 0 var(--nb-atom-button-l-sides, 2.8rem);
gap: var(--nb-atom-button-l-gap, 1rem);
font-size: var(--tg-styles-button-m-size, 1.8rem);
}
.custom-dd-body .context-button.btn--size-l svg {
width: var(--nb-atom-button-l-icon-size, 2.4rem);
min-width: var(--nb-atom-button-l-icon-size, 2.4rem);
max-width: var(--nb-atom-button-l-icon-size, 2.4rem);
height: var(--nb-atom-button-l-icon-size, 2.4rem);
}
.custom-dd-body .context-button.btn--size-l .btn-badge {
margin-right: -0.4rem;
}
.custom-dd-body .context-button.btn--size-m {
height: var(--nb-common-control-size-m, 4.4rem);
padding: 0 var(--nb-atom-button-m-sides, 2rem);
gap: var(--nb-atom-button-m-gap, 0.8rem);
font-size: var(--tg-styles-button-s-size, 1.6rem);
}
.custom-dd-body .context-button.btn--size-m svg {
width: var(--nb-atom-button-m-icon-size, 2rem);
min-width: var(--nb-atom-button-m-icon-size, 2rem);
max-width: var(--nb-atom-button-m-icon-size, 2rem);
height: var(--nb-atom-button-m-icon-size, 2rem);
}
.custom-dd-body .context-button.btn--size-m .btn-badge {
margin-right: -0.4rem;
}
.custom-dd-body .context-button.btn--size-s {
height: var(--nb-common-control-size-s, 3.6rem);
padding: 0 var(--nb-atom-button-s-sides, 1.6rem);
gap: var(--nb-atom-button-s-gap, 0.8rem);
font-size: var(--tg-styles-button-xs-size, 1.4rem);
}
.custom-dd-body .context-button.btn--size-s svg {
width: var(--nb-atom-button-s-icon-size, 1.8rem);
min-width: var(--nb-atom-button-s-icon-size, 1.8rem);
max-width: var(--nb-atom-button-s-icon-size, 1.8rem);
height: var(--nb-atom-button-s-icon-size, 1.8rem);
}
.custom-dd-body .context-button.btn--size-s .btn-badge {
margin-right: -0.4rem;
}
.custom-dd-body .context-button.btn--surface {
--btn-focus-ring: var(--tk-control-surface-filled-fill, var(--tk-control-neutral-filled-fill));
--btn-bg: var(--tk-control-inactive-fill);
--btn-col: var(--tk-control-inactive-content);
--btn-bd: var(--tk-control-inactive-outline);
--btn-h-bg: var(--tk-control-surface-state-hover-alt-fill, var(--tk-control-neutral-subtle-fill));
--btn-h-col: var(--tk-control-surface-state-hover-alt-content, var(--tk-control-neutral-subtle-content));
--btn-h-bd: var(--tk-control-surface-state-hover-alt-fill, var(--tk-control-neutral-subtle-content));
--btn-a-bg: var(--tk-control-surface-state-active-alt-fill, var(--tk-control-neutral-state-active-alt-fill));
--btn-a-col: var(--tk-control-surface-state-active-alt-content, var(--tk-control-neutral-state-active-alt-content));
--btn-a-bd: var(--tk-control-surface-state-active-alt-fill, var(--tk-control-neutral-state-active-alt-fill));
--btn-badge-bg: var(--tk-control-neutral-filled-fill);
--btn-badge-col: var(--tk-control-neutral-filled-content);
--btn-on-bg: var(--tk-control-neutral-subtle-fill);
--btn-on-col: var(--tk-control-neutral-outlined-content);
--btn-on-bd: var(--tk-control-neutral-outlined-outline);
--btn-on-h-bg: var(--tk-control-neutral-state-hover-alt-fill);
--btn-on-h-col: var(--tk-control-neutral-state-hover-alt-content);
--btn-on-h-bd: var(--tk-control-neutral-state-hover-alt-fill);
}
.custom-dd-body .context-button.btn--neutral {
--btn-focus-ring: var(--tk-control-neutral-filled-fill, var(--tk-control-neutral-filled-fill));
--btn-bg: var(--tk-control-inactive-fill);
--btn-col: var(--tk-control-inactive-content);
--btn-bd: var(--tk-control-inactive-outline);
--btn-h-bg: var(--tk-control-neutral-state-hover-alt-fill, var(--tk-control-neutral-subtle-fill));
--btn-h-col: var(--tk-control-neutral-state-hover-alt-content, var(--tk-control-neutral-subtle-content));
--btn-h-bd: var(--tk-control-neutral-state-hover-alt-fill, var(--tk-control-neutral-subtle-content));
--btn-a-bg: var(--tk-control-neutral-state-active-alt-fill, var(--tk-control-neutral-state-active-alt-fill));
--btn-a-col: var(--tk-control-neutral-state-active-alt-content, var(--tk-control-neutral-state-active-alt-content));
--btn-a-bd: var(--tk-control-neutral-state-active-alt-fill, var(--tk-control-neutral-state-active-alt-fill));
--btn-badge-bg: var(--tk-control-neutral-filled-fill);
--btn-badge-col: var(--tk-control-neutral-filled-content);
--btn-on-bg: var(--tk-control-neutral-subtle-fill);
--btn-on-col: var(--tk-control-neutral-outlined-content);
--btn-on-bd: var(--tk-control-neutral-outlined-outline);
--btn-on-h-bg: var(--tk-control-neutral-state-hover-alt-fill);
--btn-on-h-col: var(--tk-control-neutral-state-hover-alt-content);
--btn-on-h-bd: var(--tk-control-neutral-state-hover-alt-fill);
}
.custom-dd-body .context-button.btn--primary {
--btn-focus-ring: var(--tk-control-primary-filled-fill, var(--tk-control-neutral-filled-fill));
--btn-bg: var(--tk-control-inactive-fill);
--btn-col: var(--tk-control-inactive-content);
--btn-bd: var(--tk-control-inactive-outline);
--btn-h-bg: var(--tk-control-primary-state-hover-alt-fill, var(--tk-control-neutral-subtle-fill));
--btn-h-col: var(--tk-control-primary-state-hover-alt-content, var(--tk-control-neutral-subtle-content));
--btn-h-bd: var(--tk-control-primary-state-hover-alt-fill, var(--tk-control-neutral-subtle-content));
--btn-a-bg: var(--tk-control-primary-state-active-alt-fill, var(--tk-control-neutral-state-active-alt-fill));
--btn-a-col: var(--tk-control-primary-state-active-alt-content, var(--tk-control-neutral-state-active-alt-content));
--btn-a-bd: var(--tk-control-primary-state-active-alt-fill, var(--tk-control-neutral-state-active-alt-fill));
--btn-badge-bg: var(--tk-control-primary-filled-fill);
--btn-badge-col: var(--tk-control-primary-filled-content);
--btn-on-bg: var(--tk-control-neutral-subtle-fill);
--btn-on-col: var(--tk-control-primary-subtle-content);
--btn-on-bd: var(--tk-control-primary-subtle-outline);
--btn-on-h-bg: var(--tk-control-primary-state-hover-alt-fill);
--btn-on-h-col: var(--tk-control-primary-state-hover-alt-content);
--btn-on-h-bd: var(--tk-control-primary-state-hover-alt-fill);
}
.custom-dd-body .context-button.btn--secondary {
--btn-focus-ring: var(--tk-control-secondary-filled-fill, var(--tk-control-neutral-filled-fill));
--btn-bg: var(--tk-control-inactive-fill);
--btn-col: var(--tk-control-inactive-content);
--btn-bd: var(--tk-control-inactive-outline);
--btn-h-bg: var(--tk-control-secondary-state-hover-alt-fill, var(--tk-control-neutral-subtle-fill));
--btn-h-col: var(--tk-control-secondary-state-hover-alt-content, var(--tk-control-neutral-subtle-content));
--btn-h-bd: var(--tk-control-secondary-state-hover-alt-fill, var(--tk-control-neutral-subtle-content));
--btn-a-bg: var(--tk-control-secondary-state-active-alt-fill, var(--tk-control-neutral-state-active-alt-fill));
--btn-a-col: var(--tk-control-secondary-state-active-alt-content, var(--tk-control-neutral-state-active-alt-content));
--btn-a-bd: var(--tk-control-secondary-state-active-alt-fill, var(--tk-control-neutral-state-active-alt-fill));
--btn-badge-bg: var(--tk-control-secondary-filled-fill);
--btn-badge-col: var(--tk-control-secondary-filled-content);
--btn-on-bg: var(--tk-control-neutral-subtle-fill);
--btn-on-col: var(--tk-control-secondary-subtle-content);
--btn-on-bd: var(--tk-control-secondary-subtle-outline);
--btn-on-h-bg: var(--tk-control-secondary-state-hover-alt-fill);
--btn-on-h-col: var(--tk-control-secondary-state-hover-alt-content);
--btn-on-h-bd: var(--tk-control-secondary-state-hover-alt-fill);
}
.custom-dd-body .context-button.btn--tertiary {
--btn-focus-ring: var(--tk-control-tertiary-filled-fill, var(--tk-control-neutral-filled-fill));
--btn-bg: var(--tk-control-inactive-fill);
--btn-col: var(--tk-control-inactive-content);
--btn-bd: var(--tk-control-inactive-outline);
--btn-h-bg: var(--tk-control-tertiary-state-hover-alt-fill, var(--tk-control-neutral-subtle-fill));
--btn-h-col: var(--tk-control-tertiary-state-hover-alt-content, var(--tk-control-neutral-subtle-content));
--btn-h-bd: var(--tk-control-tertiary-state-hover-alt-fill, var(--tk-control-neutral-subtle-content));
--btn-a-bg: var(--tk-control-tertiary-state-active-alt-fill, var(--tk-control-neutral-state-active-alt-fill));
--btn-a-col: var(--tk-control-tertiary-state-active-alt-content, var(--tk-control-neutral-state-active-alt-content));
--btn-a-bd: var(--tk-control-tertiary-state-active-alt-fill, var(--tk-control-neutral-state-active-alt-fill));
--btn-badge-bg: var(--tk-tertiary-toned);
--btn-badge-col: var(--tk-ink-main-primary);
--btn-on-bg: var(--tk-control-neutral-subtle-fill);
--btn-on-col: var(--tk-control-tertiary-subtle-content);
--btn-on-bd: var(--tk-control-tertiary-subtle-outline);
--btn-on-h-bg: var(--tk-control-tertiary-state-hover-alt-fill);
--btn-on-h-col: var(--tk-control-tertiary-state-hover-alt-content);
--btn-on-h-bd: var(--tk-control-tertiary-state-hover-alt-fill);
}
.custom-dd-body .context-button.btn--danger {
--btn-focus-ring: var(--tk-control-danger-filled-fill, var(--tk-control-neutral-filled-fill));
--btn-bg: var(--tk-control-inactive-fill);
--btn-col: var(--tk-control-inactive-content);
--btn-bd: var(--tk-control-inactive-outline);
--btn-h-bg: var(--tk-control-danger-state-hover-alt-fill, var(--tk-control-neutral-subtle-fill));
--btn-h-col: var(--tk-control-danger-state-hover-alt-content, var(--tk-control-neutral-subtle-content));
--btn-h-bd: var(--tk-control-danger-state-hover-alt-fill, var(--tk-control-neutral-subtle-content));
--btn-a-bg: var(--tk-control-danger-state-active-alt-fill, var(--tk-control-neutral-state-active-alt-fill));
--btn-a-col: var(--tk-control-danger-state-active-alt-content, var(--tk-control-neutral-state-active-alt-content));
--btn-a-bd: var(--tk-control-danger-state-active-alt-fill, var(--tk-control-neutral-state-active-alt-fill));
--btn-badge-bg: var(--tk-control-danger-filled-fill);
--btn-badge-col: var(--tk-control-danger-filled-content);
--btn-on-bg: var(--tk-control-neutral-subtle-fill);
--btn-on-col: var(--tk-control-danger-subtle-content);
--btn-on-bd: var(--tk-control-danger-subtle-outline);
--btn-on-h-bg: var(--tk-control-danger-state-hover-alt-fill);
--btn-on-h-col: var(--tk-control-danger-state-hover-alt-content);
--btn-on-h-bd: var(--tk-control-danger-state-hover-alt-fill);
}
.custom-dd-body .context-button.btn--warning {
--btn-focus-ring: var(--tk-control-warning-filled-fill, var(--tk-control-neutral-filled-fill));
--btn-bg: var(--tk-control-inactive-fill);
--btn-col: var(--tk-control-inactive-content);
--btn-bd: var(--tk-control-inactive-outline);
--btn-h-bg: var(--tk-control-warning-state-hover-alt-fill, var(--tk-control-neutral-subtle-fill));
--btn-h-col: var(--tk-control-warning-state-hover-alt-content, var(--tk-control-neutral-subtle-content));
--btn-h-bd: var(--tk-control-warning-state-hover-alt-fill, var(--tk-control-neutral-subtle-content));
--btn-a-bg: var(--tk-control-warning-state-active-alt-fill, var(--tk-control-neutral-state-active-alt-fill));
--btn-a-col: var(--tk-control-warning-state-active-alt-content, var(--tk-control-neutral-state-active-alt-content));
--btn-a-bd: var(--tk-control-warning-state-active-alt-fill, var(--tk-control-neutral-state-active-alt-fill));
--btn-badge-bg: var(--tk-control-warning-filled-fill);
--btn-badge-col: var(--tk-control-warning-filled-content);
--btn-on-bg: var(--tk-control-neutral-subtle-fill);
--btn-on-col: var(--tk-control-warning-subtle-content);
--btn-on-bd: var(--tk-control-warning-subtle-outline);
--btn-on-h-bg: var(--tk-control-warning-state-hover-alt-fill);
--btn-on-h-col: var(--tk-control-warning-state-hover-alt-content);
--btn-on-h-bd: var(--tk-control-warning-state-hover-alt-fill);
}
.custom-dd-body .context-button.btn--success {
--btn-focus-ring: var(--tk-control-success-filled-fill, var(--tk-control-neutral-filled-fill));
--btn-bg: var(--tk-control-inactive-fill);
--btn-col: var(--tk-control-inactive-content);
--btn-bd: var(--tk-control-inactive-outline);
--btn-h-bg: var(--tk-control-success-state-hover-alt-fill, var(--tk-control-neutral-subtle-fill));
--btn-h-col: var(--tk-control-success-state-hover-alt-content, var(--tk-control-neutral-subtle-content));
--btn-h-bd: var(--tk-control-success-state-hover-alt-fill, var(--tk-control-neutral-subtle-content));
--btn-a-bg: var(--tk-control-success-state-active-alt-fill, var(--tk-control-neutral-state-active-alt-fill));
--btn-a-col: var(--tk-control-success-state-active-alt-content, var(--tk-control-neutral-state-active-alt-content));
--btn-a-bd: var(--tk-control-success-state-active-alt-fill, var(--tk-control-neutral-state-active-alt-fill));
--btn-badge-bg: var(--tk-control-success-filled-fill);
--btn-badge-col: var(--tk-control-success-filled-content);
--btn-on-bg: var(--tk-control-neutral-subtle-fill);
--btn-on-col: var(--tk-control-success-subtle-content);
--btn-on-bd: var(--tk-control-success-subtle-outline);
--btn-on-h-bg: var(--tk-control-success-state-hover-alt-fill);
--btn-on-h-col: var(--tk-control-success-state-hover-alt-content);
--btn-on-h-bd: var(--tk-control-success-state-hover-alt-fill);
}
.custom-dd-body .context-button.btn--info {
--btn-focus-ring: var(--tk-control-info-filled-fill, var(--tk-control-neutral-filled-fill));
--btn-bg: var(--tk-control-inactive-fill);
--btn-col: var(--tk-control-inactive-content);
--btn-bd: var(--tk-control-inactive-outline);
--btn-h-bg: var(--tk-control-info-state-hover-alt-fill, var(--tk-control-neutral-subtle-fill));
--btn-h-col: var(--tk-control-info-state-hover-alt-content, var(--tk-control-neutral-subtle-content));
--btn-h-bd: var(--tk-control-info-state-hover-alt-fill, var(--tk-control-neutral-subtle-content));
--btn-a-bg: var(--tk-control-info-state-active-alt-fill, var(--tk-control-neutral-state-active-alt-fill));
--btn-a-col: var(--tk-control-info-state-active-alt-content, var(--tk-control-neutral-state-active-alt-content));
--btn-a-bd: var(--tk-control-info-state-active-alt-fill, var(--tk-control-neutral-state-active-alt-fill));
--btn-badge-bg: var(--tk-control-info-filled-fill);
--btn-badge-col: var(--tk-control-info-filled-content);
--btn-on-bg: var(--tk-control-neutral-subtle-fill);
--btn-on-col: var(--tk-control-info-subtle-content);
--btn-on-bd: var(--tk-control-info-subtle-outline);
--btn-on-h-bg: var(--tk-control-info-state-hover-alt-fill);
--btn-on-h-col: var(--tk-control-info-state-hover-alt-content);
--btn-on-h-bd: var(--tk-control-info-state-hover-alt-fill);
}
.custom-dd-body .chip {
display: inline-flex;
justify-content: center;
align-items: center;
position: relative;
font-family: var(--font-main, sans-serif);
font-weight: 500;
text-decoration: none;
white-space: nowrap !important;
line-height: 1;
border-style: solid;
border-width: var(--nb-common-stroke-m, 1.5px);
border-radius: var(--nb-common-radius-control-soft, 0.8rem);
cursor: default;
transition: all var(--def-trans-time, 0.2s) ease-in-out;
-webkit-appearance: none;
flex-shrink: 0;
height: var(--nb-common-control-size-2xs, 2.8rem);
padding: 0 var(--nb-atom-chip-2xs-sides, 1rem);
background-color: var(--chip-bg);
color: var(--chip-col);
border-color: var(--chip-bd);
}
.custom-dd-body .chip svg {
fill: currentColor;
flex-shrink: 0;
display: block;
}
.custom-dd-body .chip svg path {
fill: currentColor;
}
.custom-dd-body .chip.action-chip {
cursor: pointer;
}
.custom-dd-body .chip.action-chip:focus {
background-color: var(--chip-h-bg, var(--chip-bg));
color: var(--chip-h-col, var(--chip-col));
border-color: var(--chip-h-bd, var(--chip-bd));
outline: 0.2rem solid var(--tk-ink-main-primary);
outline-offset: 0.2rem;
}
.custom-dd-body .chip.action-chip:active, .custom-dd-body .chip.action-chip.btn-on, .custom-dd-body .chip.action-chip.active {
background-color: var(--chip-a-bg, var(--chip-bg));
color: var(--chip-a-col, var(--chip-col));
border-color: var(--chip-a-bd, var(--chip-bd));
}
@media (hover: hover) {
.custom-dd-body .chip.action-chip:hover {
background-color: var(--chip-h-bg, var(--chip-bg));
color: var(--chip-h-col, var(--chip-col));
border-color: var(--chip-h-bd, var(--chip-bd));
}
}
.custom-dd-body .chip:disabled, .custom-dd-body .chip.is-disabled {
cursor: not-allowed;
pointer-events: none;
box-shadow: none;
opacity: 1;
}
.custom-dd-body .chip:disabled[class*=chip-], .custom-dd-body .chip.is-disabled[class*=chip-] {
background-color: var(--tk-control-disabled-filled-fill);
border-color: var(--tk-control-disabled-filled-fill);
color: var(--tk-control-disabled-filled-content);
}
.custom-dd-body .chip:disabled[class*=chip-][class*=-subtle], .custom-dd-body .chip.is-disabled[class*=chip-][class*=-subtle] {
background-color: var(--tk-control-neutral-subtle-fill);
border-color: var(--tk-control-disabled-subtle-outline);
color: var(--tk-control-disabled-subtle-content);
}
.custom-dd-body .chip.chip--size-xs {
height: var(--nb-common-control-size-xs, 3.2rem);
padding: 0 var(--nb-atom-chip-xs-sides, 1.2rem);
gap: var(--nb-atom-chip-xs-gap, 1rem);
font-size: var(--tg-styles-button-s-size, 1.6rem);
}
.custom-dd-body .chip.chip--size-xs svg {
width: var(--nb-atom-chip-xs-icon-size, 1.8rem);
min-width: var(--nb-atom-chip-xs-icon-size, 1.8rem);
max-width: var(--nb-atom-chip-xs-icon-size, 1.8rem);
height: var(--nb-atom-chip-xs-icon-size, 1.8rem);
}
.custom-dd-body .chip.chip--size-xs svg:first-child:not(:last-child) {
margin-left: -0.2rem;
}
.custom-dd-body .chip.chip--size-xs svg:last-child:not(:first-child) {
margin-right: -0.2rem;
}
.custom-dd-body .chip.chip--size-2xs {
height: var(--nb-common-control-size-2xs, 2.8rem);
padding: 0 var(--nb-atom-chip-2xs-sides, 1rem);
gap: var(--nb-atom-chip-2xs-gap, 0.6rem);
font-size: var(--tg-styles-button-xs-size, 1.6rem);
}
.custom-dd-body .chip.chip--size-2xs svg {
width: var(--nb-atom-chip-2xs-icon-size, 2rem);
min-width: var(--nb-atom-chip-2xs-icon-size, 2rem);
max-width: var(--nb-atom-chip-2xs-icon-size, 2rem);
height: var(--nb-atom-chip-2xs-icon-size, 2rem);
}
.custom-dd-body .chip.chip--size-2xs svg:first-child:not(:last-child) {
margin-left: -0.2rem;
}
.custom-dd-body .chip.chip--size-2xs svg:last-child:not(:first-child) {
margin-right: -0.2rem;
}
.custom-dd-body .chip.chip--neutral {
--chip-bg: var(--tk-control-neutral-filled-fill);
--chip-col: var(--tk-control-neutral-filled-content);
--chip-bd: var(--tk-control-neutral-filled-fill);
--chip-h-bg: var(--tk-control-neutral-state-hover-main-fill);
--chip-h-col: var(--tk-control-neutral-state-hover-main-content);
--chip-h-bd: var(--tk-control-neutral-state-hover-main-fill);
--chip-a-bg: var(--tk-control-neutral-state-active-main-fill);
--chip-a-col: var(--tk-control-neutral-state-active-main-content);
--chip-a-bd: var(--tk-control-neutral-state-active-main-fill);
}
.custom-dd-body .chip.chip--neutral-filled {
--chip-bg: var(--tk-control-neutral-filled-fill);
--chip-col: var(--tk-control-neutral-filled-content);
--chip-bd: var(--tk-control-neutral-filled-fill);
--chip-h-bg: var(--tk-control-neutral-state-hover-main-fill);
--chip-h-col: var(--tk-control-neutral-state-hover-main-content);
--chip-h-bd: var(--tk-control-neutral-state-hover-main-fill);
--chip-a-bg: var(--tk-control-neutral-state-active-main-fill);
--chip-a-col: var(--tk-control-neutral-state-active-main-content);
--chip-a-bd: var(--tk-control-neutral-state-active-main-fill);
}
.custom-dd-body .chip.chip--neutral-subtle {
--chip-bg: var(--tk-control-neutral-subtle-fill);
--chip-col: var(--tk-control-neutral-subtle-content);
--chip-bd: var(--tk-control-neutral-subtle-outline);
--chip-h-bg: var(--tk-control-neutral-state-hover-alt-fill);
--chip-h-col: var(--tk-control-neutral-state-hover-alt-content);
--chip-h-bd: transparent;
--chip-a-bg: var(--tk-control-neutral-state-active-alt-fill);
--chip-a-col: var(--tk-control-neutral-state-active-alt-content);
--chip-a-bd: transparent;
}
.custom-dd-body .chip.chip--neutral-clear {
--chip-bg: var(--tk-control-neutral-clear-fill);
--chip-col: var(--tk-control-neutral-clear-content);
--chip-bd: var(--tk-control-neutral-clear-outline);
--chip-h-bg: var(--tk-control-neutral-state-hover-alt-fill);
--chip-h-col: var(--tk-control-neutral-state-hover-alt-content);
--chip-h-bd: transparent;
--chip-a-bg: var(--tk-control-neutral-state-active-alt-fill);
--chip-a-col: var(--tk-control-neutral-state-active-alt-content);
--chip-a-bd: transparent;
}
.custom-dd-body .chip.chip--primary {
--chip-bg: var(--tk-control-primary-filled-fill);
--chip-col: var(--tk-control-primary-filled-content);
--chip-bd: var(--tk-control-primary-filled-fill);
--chip-h-bg: var(--tk-control-primary-state-hover-main-fill);
--chip-h-col: var(--tk-control-primary-state-hover-main-content);
--chip-h-bd: var(--tk-control-primary-state-hover-main-fill);
--chip-a-bg: var(--tk-control-primary-state-active-main-fill);
--chip-a-col: var(--tk-control-primary-state-active-main-content);
--chip-a-bd: var(--tk-control-primary-state-active-main-fill);
}
.custom-dd-body .chip.chip--primary-filled {
--chip-bg: var(--tk-control-primary-filled-fill);
--chip-col: var(--tk-control-primary-filled-content);
--chip-bd: var(--tk-control-primary-filled-fill);
--chip-h-bg: var(--tk-control-primary-state-hover-main-fill);
--chip-h-col: var(--tk-control-primary-state-hover-main-content);
--chip-h-bd: var(--tk-control-primary-state-hover-main-fill);
--chip-a-bg: var(--tk-control-primary-state-active-main-fill);
--chip-a-col: var(--tk-control-primary-state-active-main-content);
--chip-a-bd: var(--tk-control-primary-state-active-main-fill);
}
.custom-dd-body .chip.chip--primary-subtle {
--chip-bg: var(--tk-control-primary-subtle-fill);
--chip-col: var(--tk-control-primary-subtle-content);
--chip-bd: var(--tk-control-primary-subtle-outline);
--chip-h-bg: var(--tk-control-primary-state-hover-alt-fill);
--chip-h-col: var(--tk-control-primary-state-hover-alt-content);
--chip-h-bd: transparent;
--chip-a-bg: var(--tk-control-primary-state-active-alt-fill);
--chip-a-col: var(--tk-control-primary-state-active-alt-content);
--chip-a-bd: transparent;
}
.custom-dd-body .chip.chip--primary-clear {
--chip-bg: var(--tk-control-primary-clear-fill);
--chip-col: var(--tk-control-primary-clear-content);
--chip-bd: var(--tk-control-primary-clear-outline);
--chip-h-bg: var(--tk-control-primary-state-hover-alt-fill);
--chip-h-col: var(--tk-control-primary-state-hover-alt-content);
--chip-h-bd: transparent;
--chip-a-bg: var(--tk-control-primary-state-active-alt-fill);
--chip-a-col: var(--tk-control-primary-state-active-alt-content);
--chip-a-bd: transparent;
}
.custom-dd-body .chip.chip--secondary {
--chip-bg: var(--tk-control-secondary-filled-fill);
--chip-col: var(--tk-control-secondary-filled-content);
--chip-bd: var(--tk-control-secondary-filled-fill);
--chip-h-bg: var(--tk-control-secondary-state-hover-main-fill);
--chip-h-col: var(--tk-control-secondary-state-hover-main-content);
--chip-h-bd: var(--tk-control-secondary-state-hover-main-fill);
--chip-a-bg: var(--tk-control-secondary-state-active-main-fill);
--chip-a-col: var(--tk-control-secondary-state-active-main-content);
--chip-a-bd: var(--tk-control-secondary-state-active-main-fill);
}
.custom-dd-body .chip.chip--secondary-filled {
--chip-bg: var(--tk-control-secondary-filled-fill);
--chip-col: var(--tk-control-secondary-filled-content);
--chip-bd: var(--tk-control-secondary-filled-fill);
--chip-h-bg: var(--tk-control-secondary-state-hover-main-fill);
--chip-h-col: var(--tk-control-secondary-state-hover-main-content);
--chip-h-bd: var(--tk-control-secondary-state-hover-main-fill);
--chip-a-bg: var(--tk-control-secondary-state-active-main-fill);
--chip-a-col: var(--tk-control-secondary-state-active-main-content);
--chip-a-bd: var(--tk-control-secondary-state-active-main-fill);
}
.custom-dd-body .chip.chip--secondary-subtle {
--chip-bg: var(--tk-control-secondary-subtle-fill);
--chip-col: var(--tk-control-secondary-subtle-content);
--chip-bd: var(--tk-control-secondary-subtle-outline);
--chip-h-bg: var(--tk-control-secondary-state-hover-alt-fill);
--chip-h-col: var(--tk-control-secondary-state-hover-alt-content);
--chip-h-bd: transparent;
--chip-a-bg: var(--tk-control-secondary-state-active-alt-fill);
--chip-a-col: var(--tk-control-secondary-state-active-alt-content);
--chip-a-bd: transparent;
}
.custom-dd-body .chip.chip--secondary-clear {
--chip-bg: var(--tk-control-secondary-clear-fill);
--chip-col: var(--tk-control-secondary-clear-content);
--chip-bd: var(--tk-control-secondary-clear-outline);
--chip-h-bg: var(--tk-control-secondary-state-hover-alt-fill);
--chip-h-col: var(--tk-control-secondary-state-hover-alt-content);
--chip-h-bd: transparent;
--chip-a-bg: var(--tk-control-secondary-state-active-alt-fill);
--chip-a-col: var(--tk-control-secondary-state-active-alt-content);
--chip-a-bd: transparent;
}
.custom-dd-body .chip.chip--tertiary {
--chip-bg: var(--tk-control-tertiary-filled-fill);
--chip-col: var(--tk-control-tertiary-filled-content);
--chip-bd: var(--tk-control-tertiary-filled-fill);
--chip-h-bg: var(--tk-control-tertiary-state-hover-main-fill);
--chip-h-col: var(--tk-control-tertiary-state-hover-main-content);
--chip-h-bd: var(--tk-control-tertiary-state-hover-main-fill);
--chip-a-bg: var(--tk-control-tertiary-state-active-main-fill);
--chip-a-col: var(--tk-control-tertiary-state-active-main-content);
--chip-a-bd: var(--tk-control-tertiary-state-active-main-fill);
}
.custom-dd-body .chip.chip--tertiary-filled {
--chip-bg: var(--tk-control-tertiary-filled-fill);
--chip-col: var(--tk-control-tertiary-filled-content);
--chip-bd: var(--tk-control-tertiary-filled-fill);
--chip-h-bg: var(--tk-control-tertiary-state-hover-main-fill);
--chip-h-col: var(--tk-control-tertiary-state-hover-main-content);
--chip-h-bd: var(--tk-control-tertiary-state-hover-main-fill);
--chip-a-bg: var(--tk-control-tertiary-state-active-main-fill);
--chip-a-col: var(--tk-control-tertiary-state-active-main-content);
--chip-a-bd: var(--tk-control-tertiary-state-active-main-fill);
}
.custom-dd-body .chip.chip--tertiary-subtle {
--chip-bg: var(--tk-control-tertiary-subtle-fill);
--chip-col: var(--tk-control-tertiary-subtle-content);
--chip-bd: var(--tk-control-tertiary-subtle-outline);
--chip-h-bg: var(--tk-control-tertiary-state-hover-alt-fill);
--chip-h-col: var(--tk-control-tertiary-state-hover-alt-content);
--chip-h-bd: transparent;
--chip-a-bg: var(--tk-control-tertiary-state-active-alt-fill);
--chip-a-col: var(--tk-control-tertiary-state-active-alt-content);
--chip-a-bd: transparent;
}
.custom-dd-body .chip.chip--tertiary-clear {
--chip-bg: var(--tk-control-tertiary-clear-fill);
--chip-col: var(--tk-control-tertiary-clear-content);
--chip-bd: var(--tk-control-tertiary-clear-outline);
--chip-h-bg: var(--tk-control-tertiary-state-hover-alt-fill);
--chip-h-col: var(--tk-control-tertiary-state-hover-alt-content);
--chip-h-bd: transparent;
--chip-a-bg: var(--tk-control-tertiary-state-active-alt-fill);
--chip-a-col: var(--tk-control-tertiary-state-active-alt-content);
--chip-a-bd: transparent;
}
.custom-dd-body .chip.chip--danger {
--chip-bg: var(--tk-control-danger-filled-fill);
--chip-col: var(--tk-control-danger-filled-content);
--chip-bd: var(--tk-control-danger-filled-fill);
--chip-h-bg: var(--tk-control-danger-state-hover-main-fill);
--chip-h-col: var(--tk-control-danger-state-hover-main-content);
--chip-h-bd: var(--tk-control-danger-state-hover-main-fill);
--chip-a-bg: var(--tk-control-danger-state-active-main-fill);
--chip-a-col: var(--tk-control-danger-state-active-main-content);
--chip-a-bd: var(--tk-control-danger-state-active-main-fill);
}
.custom-dd-body .chip.chip--danger-filled {
--chip-bg: var(--tk-control-danger-filled-fill);
--chip-col: var(--tk-control-danger-filled-content);
--chip-bd: var(--tk-control-danger-filled-fill);
--chip-h-bg: var(--tk-control-danger-state-hover-main-fill);
--chip-h-col: var(--tk-control-danger-state-hover-main-content);
--chip-h-bd: var(--tk-control-danger-state-hover-main-fill);
--chip-a-bg: var(--tk-control-danger-state-active-main-fill);
--chip-a-col: var(--tk-control-danger-state-active-main-content);
--chip-a-bd: var(--tk-control-danger-state-active-main-fill);
}
.custom-dd-body .chip.chip--danger-subtle {
--chip-bg: var(--tk-control-danger-subtle-fill);
--chip-col: var(--tk-control-danger-subtle-content);
--chip-bd: var(--tk-control-danger-subtle-outline);
--chip-h-bg: var(--tk-control-danger-state-hover-alt-fill);
--chip-h-col: var(--tk-control-danger-state-hover-alt-content);
--chip-h-bd: transparent;
--chip-a-bg: var(--tk-control-danger-state-active-alt-fill);
--chip-a-col: var(--tk-control-danger-state-active-alt-content);
--chip-a-bd: transparent;
}
.custom-dd-body .chip.chip--danger-clear {
--chip-bg: var(--tk-control-danger-clear-fill);
--chip-col: var(--tk-control-danger-clear-content);
--chip-bd: var(--tk-control-danger-clear-outline);
--chip-h-bg: var(--tk-control-danger-state-hover-alt-fill);
--chip-h-col: var(--tk-control-danger-state-hover-alt-content);
--chip-h-bd: transparent;
--chip-a-bg: var(--tk-control-danger-state-active-alt-fill);
--chip-a-col: var(--tk-control-danger-state-active-alt-content);
--chip-a-bd: transparent;
}
.custom-dd-body .chip.chip--warning {
--chip-bg: var(--tk-control-warning-filled-fill);
--chip-col: var(--tk-control-warning-filled-content);
--chip-bd: var(--tk-control-warning-filled-fill);
--chip-h-bg: var(--tk-control-warning-state-hover-main-fill);
--chip-h-col: var(--tk-control-warning-state-hover-main-content);
--chip-h-bd: var(--tk-control-warning-state-hover-main-fill);
--chip-a-bg: var(--tk-control-warning-state-active-main-fill);
--chip-a-col: var(--tk-control-warning-state-active-main-content);
--chip-a-bd: var(--tk-control-warning-state-active-main-fill);
}
.custom-dd-body .chip.chip--warning-filled {
--chip-bg: var(--tk-control-warning-filled-fill);
--chip-col: var(--tk-control-warning-filled-content);
--chip-bd: var(--tk-control-warning-filled-fill);
--chip-h-bg: var(--tk-control-warning-state-hover-main-fill);
--chip-h-col: var(--tk-control-warning-state-hover-main-content);
--chip-h-bd: var(--tk-control-warning-state-hover-main-fill);
--chip-a-bg: var(--tk-control-warning-state-active-main-fill);
--chip-a-col: var(--tk-control-warning-state-active-main-content);
--chip-a-bd: var(--tk-control-warning-state-active-main-fill);
}
.custom-dd-body .chip.chip--warning-subtle {
--chip-bg: var(--tk-control-warning-subtle-fill);
--chip-col: var(--tk-control-warning-subtle-content);
--chip-bd: var(--tk-control-warning-subtle-outline);
--chip-h-bg: var(--tk-control-warning-state-hover-alt-fill);
--chip-h-col: var(--tk-control-warning-state-hover-alt-content);
--chip-h-bd: transparent;
--chip-a-bg: var(--tk-control-warning-state-active-alt-fill);
--chip-a-col: var(--tk-control-warning-state-active-alt-content);
--chip-a-bd: transparent;
}
.custom-dd-body .chip.chip--warning-clear {
--chip-bg: var(--tk-control-warning-clear-fill);
--chip-col: var(--tk-control-warning-clear-content);
--chip-bd: var(--tk-control-warning-clear-outline);
--chip-h-bg: var(--tk-control-warning-state-hover-alt-fill);
--chip-h-col: var(--tk-control-warning-state-hover-alt-content);
--chip-h-bd: transparent;
--chip-a-bg: var(--tk-control-warning-state-active-alt-fill);
--chip-a-col: var(--tk-control-warning-state-active-alt-content);
--chip-a-bd: transparent;
}
.custom-dd-body .chip.chip--success {
--chip-bg: var(--tk-control-success-filled-fill);
--chip-col: var(--tk-control-success-filled-content);
--chip-bd: var(--tk-control-success-filled-fill);
--chip-h-bg: var(--tk-control-success-state-hover-main-fill);
--chip-h-col: var(--tk-control-success-state-hover-main-content);
--chip-h-bd: var(--tk-control-success-state-hover-main-fill);
--chip-a-bg: var(--tk-control-success-state-active-main-fill);
--chip-a-col: var(--tk-control-success-state-active-main-content);
--chip-a-bd: var(--tk-control-success-state-active-main-fill);
}
.custom-dd-body .chip.chip--success-filled {
--chip-bg: var(--tk-control-success-filled-fill);
--chip-col: var(--tk-control-success-filled-content);
--chip-bd: var(--tk-control-success-filled-fill);
--chip-h-bg: var(--tk-control-success-state-hover-main-fill);
--chip-h-col: var(--tk-control-success-state-hover-main-content);
--chip-h-bd: var(--tk-control-success-state-hover-main-fill);
--chip-a-bg: var(--tk-control-success-state-active-main-fill);
--chip-a-col: var(--tk-control-success-state-active-main-content);
--chip-a-bd: var(--tk-control-success-state-active-main-fill);
}
.custom-dd-body .chip.chip--success-subtle {
--chip-bg: var(--tk-control-success-subtle-fill);
--chip-col: var(--tk-control-success-subtle-content);
--chip-bd: var(--tk-control-success-subtle-outline);
--chip-h-bg: var(--tk-control-success-state-hover-alt-fill);
--chip-h-col: var(--tk-control-success-state-hover-alt-content);
--chip-h-bd: transparent;
--chip-a-bg: var(--tk-control-success-state-active-alt-fill);
--chip-a-col: var(--tk-control-success-state-active-alt-content);
--chip-a-bd: transparent;
}
.custom-dd-body .chip.chip--success-clear {
--chip-bg: var(--tk-control-success-clear-fill);
--chip-col: var(--tk-control-success-clear-content);
--chip-bd: var(--tk-control-success-clear-outline);
--chip-h-bg: var(--tk-control-success-state-hover-alt-fill);
--chip-h-col: var(--tk-control-success-state-hover-alt-content);
--chip-h-bd: transparent;
--chip-a-bg: var(--tk-control-success-state-active-alt-fill);
--chip-a-col: var(--tk-control-success-state-active-alt-content);
--chip-a-bd: transparent;
}
.custom-dd-body .chip.chip--info {
--chip-bg: var(--tk-control-info-filled-fill);
--chip-col: var(--tk-control-info-filled-content);
--chip-bd: var(--tk-control-info-filled-fill);
--chip-h-bg: var(--tk-control-info-state-hover-main-fill);
--chip-h-col: var(--tk-control-info-state-hover-main-content);
--chip-h-bd: var(--tk-control-info-state-hover-main-fill);
--chip-a-bg: var(--tk-control-info-state-active-main-fill);
--chip-a-col: var(--tk-control-info-state-active-main-content);
--chip-a-bd: var(--tk-control-info-state-active-main-fill);
}
.custom-dd-body .chip.chip--info-filled {
--chip-bg: var(--tk-control-info-filled-fill);
--chip-col: var(--tk-control-info-filled-content);
--chip-bd: var(--tk-control-info-filled-fill);
--chip-h-bg: var(--tk-control-info-state-hover-main-fill);
--chip-h-col: var(--tk-control-info-state-hover-main-content);
--chip-h-bd: var(--tk-control-info-state-hover-main-fill);
--chip-a-bg: var(--tk-control-info-state-active-main-fill);
--chip-a-col: var(--tk-control-info-state-active-main-content);
--chip-a-bd: var(--tk-control-info-state-active-main-fill);
}
.custom-dd-body .chip.chip--info-subtle {
--chip-bg: var(--tk-control-info-subtle-fill);
--chip-col: var(--tk-control-info-subtle-content);
--chip-bd: var(--tk-control-info-subtle-outline);
--chip-h-bg: var(--tk-control-info-state-hover-alt-fill);
--chip-h-col: var(--tk-control-info-state-hover-alt-content);
--chip-h-bd: transparent;
--chip-a-bg: var(--tk-control-info-state-active-alt-fill);
--chip-a-col: var(--tk-control-info-state-active-alt-content);
--chip-a-bd: transparent;
}
.custom-dd-body .chip.chip--info-clear {
--chip-bg: var(--tk-control-info-clear-fill);
--chip-col: var(--tk-control-info-clear-content);
--chip-bd: var(--tk-control-info-clear-outline);
--chip-h-bg: var(--tk-control-info-state-hover-alt-fill);
--chip-h-col: var(--tk-control-info-state-hover-alt-content);
--chip-h-bd: transparent;
--chip-a-bg: var(--tk-control-info-state-active-alt-fill);
--chip-a-col: var(--tk-control-info-state-active-alt-content);
--chip-a-bd: transparent;
}
.custom-dd-body .chip.button-chip {
border-radius: var(--nb-common-radius-control-soft, 0.8rem);
}
.custom-dd-body .chip.no-margin svg {
margin-left: 0 !important;
margin-right: 0 !important;
}
/**
* COMPONENT: Custom Search Input Field
* -----------------------------------------------------------------------------
* A flexible input component supporting icons, clear buttons, and validation states.
*
* HTML STRUCTURE:
*
*
* STATE CLASSES (apply to .input-field):
* .req - Adds a required asterisk (*) to the label.
* .err - Error state. Shows error icon, red text, and shifts clear button.
* .war - Warning state. Shows warning icon and orange text.
* .search-input - Main modifier for search style (includes glass and clear icons).
*
* BEHAVIOR:
* - Clear Button: Automatically appears when the input is not empty (via :not(:placeholder-shown)).
* - Icons Layout: If an error or warning is present, the clear button shifts left
* automatically to avoid overlapping with the status icon.
* - Sizing: Default is XL. Apply .size-l to the for a smaller variant.
*
* DEPENDENCIES:
* - Requires SVG icons in /icons/: search.svg, remove.svg, error-icon.svg, warning-icon.svg.
* - Uses CSS Variables for theming (tk-ink, nb-atom, etc.).
* -----------------------------------------------------------------------------
*/
.custom-dd-body .form-width-1 {
width: 100%;
max-width: var(--form-width-1);
}
.custom-dd-body .form-part-background {
border: 1px solid var(--tk-border-solid-3);
background: var(--tk-surface-base);
padding: 2rem;
}
.custom-dd-body input,
.custom-dd-body textarea,
.custom-dd-body select,
.custom-dd-body button {
font-family: inherit;
font-size: inherit;
font-weight: inherit;
outline: none;
color: inherit;
border-radius: 0;
box-shadow: none;
display: block;
}
.custom-dd-body input::placeholder,
.custom-dd-body textarea::placeholder,
.custom-dd-body select::placeholder,
.custom-dd-body button::placeholder {
font-style: normal;
}
.custom-dd-body input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([id*=tomselected]),
.custom-dd-body textarea {
height: var(--nb-common-control-size-xl);
padding: 0 var(--nb-atom-input-xl-padding-h);
border: 1px solid var(--tk-border-solid-2);
border-radius: var(--nb-common-radius-control-soft);
color: var(--tk-ink-main-primary);
font-size: var(--tg-styles-body-m-size, 1.8rem);
transition: all var(--def-trans-time, 0.2s) ease-in-out;
background-color: var(--tk-surface-elevated);
}
@media (hover: hover) {
.custom-dd-body input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([id*=tomselected]):hover,
.custom-dd-body textarea:hover {
border-color: var(--tk-border-solid-3);
}
}
.custom-dd-body input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([id*=tomselected]):focus, .custom-dd-body input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([id*=tomselected]).focus,
.custom-dd-body textarea:focus,
.custom-dd-body textarea.focus {
border-color: var(--tk-control-primary-state-active-outline);
outline: none;
}
.custom-dd-body input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([id*=tomselected])::placeholder,
.custom-dd-body textarea::placeholder {
color: var(--tk-ink-main-toned);
font-size: inherit;
}
.custom-dd-body input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([id*=tomselected]),
.custom-dd-body textarea {
width: 100%;
}
.custom-dd-body input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([id*=tomselected]).size-l,
.custom-dd-body textarea.size-l {
font-size: var(--tg-styles-body-s-size, 1.6rem);
height: var(--nb-common-control-size-l);
}
.custom-dd-body input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([id*=tomselected]):focus::placeholder,
.custom-dd-body textarea:focus::placeholder {
opacity: 0;
}
.custom-dd-body textarea {
padding: var(--nb-atom-input-xl-gap) var(--nb-atom-input-xl-padding-h);
}
.custom-dd-body input[type=checkbox] {
width: var(--checkbox-size);
height: var(--checkbox-size);
margin: 0;
box-sizing: border-box;
position: relative;
appearance: none;
text-decoration: none;
border: 1px solid var(--tk-border-solid-3);
border-radius: var(--nb-common-radius-control-sharp);
cursor: pointer;
background-repeat: no-repeat;
background-position: center;
background-size: 1.6rem 1.6rem;
-webkit-transition: var(--def-trans-prop) var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
transition: var(--def-trans-prop) var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
}
.custom-dd-body input[type=checkbox]:checked {
border: 1px solid var(--tk-primary-base);
background-color: var(--tk-primary-base);
background-image: url('data:image/svg+xml;utf8,');
}
.custom-dd-body input[type=checkbox]:indeterminate {
border: 1px solid var(--tk-primary-base);
background-color: var(--tk-primary-base);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='2' viewBox='0 0 15 2' fill='none'%3E%3Cpath d='M15 1.25L0 1.25V0L15 0V1.25Z' fill='%23F5F5F2'/%3E%3C/svg%3E");
}
.custom-dd-body input[type=checkbox]:focus {
outline: none;
}
.custom-dd-body input[type=checkbox].single-chcekbox-organization {
margin-right: var(--gap-2);
}
.custom-dd-body .field-unit--select {
position: relative;
width: 100%;
}
.custom-dd-body .ts-wrapper {
height: auto;
width: 100%;
}
.custom-dd-body .ts-wrapper .item {
width: auto;
flex-shrink: 0;
}
.custom-dd-body .ts-wrapper .ts-control {
height: var(--nb-common-control-size-xl);
padding: 0 var(--nb-atom-input-xl-padding-h);
border: 1px solid var(--tk-border-solid-2);
border-radius: var(--nb-common-radius-control-soft);
color: var(--tk-ink-main-primary);
font-size: var(--tg-styles-body-m-size, 1.8rem);
transition: all var(--def-trans-time, 0.2s) ease-in-out;
background-color: var(--tk-surface-elevated);
}
@media (hover: hover) {
.custom-dd-body .ts-wrapper .ts-control:hover {
border-color: var(--tk-border-solid-3);
}
}
.custom-dd-body .ts-wrapper .ts-control:focus, .custom-dd-body .ts-wrapper .ts-control.focus {
border-color: var(--tk-control-primary-state-active-outline);
outline: none;
}
.custom-dd-body .ts-wrapper .ts-control::placeholder {
color: var(--tk-ink-main-toned);
font-size: inherit;
}
.custom-dd-body .ts-wrapper .ts-control {
display: flex;
align-items: center;
width: 100%;
box-shadow: none;
background-image: none;
position: relative;
}
.custom-dd-body .ts-wrapper .ts-control.focus {
box-shadow: none;
}
.custom-dd-body .ts-wrapper .ts-control input {
font-size: inherit !important;
color: inherit !important;
height: 100% !important;
border: none !important;
border-radius: 0 !important;
background: transparent !important;
padding: 0 calc(var(--nb-atom-input-xl-padding-h) * 2) 0 0 !important;
margin: 0 !important;
box-shadow: none !important;
width: 100% !important;
position: relative !important;
left: 0 !important;
opacity: 1 !important;
display: none !important;
}
.custom-dd-body .ts-wrapper.dropdown-active .ts-control {
border-radius: var(--nb-common-radius-control-soft) var(--nb-common-radius-control-soft) 0 0;
flex-wrap: wrap;
}
.custom-dd-body .ts-wrapper.dropdown-active .ts-control input {
display: flex !important;
width: auto !important;
flex-grow: 1 !important;
}
.custom-dd-body .ts-wrapper.input-active .ts-control {
display: flex;
flex-wrap: wrap;
}
.custom-dd-body .ts-wrapper.input-active .ts-control input {
display: block !important;
width: auto !important;
flex-grow: 1 !important;
}
.custom-dd-body .ts-wrapper .ts-dropdown {
background: var(--tk-surface-elevated);
border: 1px solid var(--tk-border-solid-2);
border-top: none;
border-radius: 0 0 var(--nb-common-radius-control-soft) var(--nb-common-radius-control-soft);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
margin: 0;
z-index: 1000;
width: 100% !important;
}
.custom-dd-body .ts-wrapper .ts-dropdown .ts-dropdown-content {
padding: 0.4rem 0;
max-height: 300px;
overflow-y: auto;
}
.custom-dd-body .ts-wrapper .ts-dropdown .option {
padding: var(--nb-atom-input-xl-gap) var(--nb-atom-input-xl-padding-h);
font-size: var(--tg-styles-body-m-size, 1.8rem);
color: var(--tk-ink-main-primary);
cursor: pointer;
}
.custom-dd-body .ts-wrapper .ts-dropdown .option.active {
background-color: var(--tk-control-neutral-filled-content);
color: var(--tk-ink-main-primary);
}
.custom-dd-body .ts-wrapper .ts-dropdown .option.selected {
font-weight: 600;
background-color: var(--br-neutral-200);
}
.custom-dd-body .ts-wrapper.ts-invalid .ts-control {
border-color: var(--tk-ink-other-danger);
}
.custom-dd-body .input-container {
position: relative;
width: fit-content;
height: fit-content;
}
.custom-dd-body label,
.custom-dd-body .label {
display: block;
color: var(--tk-ink-main-toned);
position: relative;
width: fit-content;
}
.custom-dd-body label.checkbox-label,
.custom-dd-body .label.checkbox-label {
display: flex;
flex-direction: row;
align-items: center;
gap: 2rem;
color: var(--tk-ink-main-primary);
cursor: pointer;
}
.custom-dd-body label.checkbox-label.disabled,
.custom-dd-body .label.checkbox-label.disabled {
pointer-events: none;
opacity: 0.5;
}
.custom-dd-body .input-field,
.custom-dd-body .field-unit {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
gap: 0.2rem;
}
.custom-dd-body .input-field svg,
.custom-dd-body .field-unit svg {
display: block;
}
.custom-dd-body .input-field.field-unit--error label, .custom-dd-body .input-field.field-unit--error .label, .custom-dd-body .input-field.field-unit--error .field-unit__label,
.custom-dd-body .field-unit.field-unit--error label,
.custom-dd-body .field-unit.field-unit--error .label,
.custom-dd-body .field-unit.field-unit--error .field-unit__label {
color: var(--tk-ink-other-danger);
}
.custom-dd-body .input-field.field-unit--error input, .custom-dd-body .input-field.field-unit--error select, .custom-dd-body .input-field.field-unit--error textarea, .custom-dd-body .input-field.field-unit--error .ts-control, .custom-dd-body .input-field.field-unit--error .list-field-input,
.custom-dd-body .field-unit.field-unit--error input,
.custom-dd-body .field-unit.field-unit--error select,
.custom-dd-body .field-unit.field-unit--error textarea,
.custom-dd-body .field-unit.field-unit--error .ts-control,
.custom-dd-body .field-unit.field-unit--error .list-field-input {
border-color: var(--tk-ink-other-danger) !important;
}
.custom-dd-body .input-field label,
.custom-dd-body .input-field .label,
.custom-dd-body .field-unit label,
.custom-dd-body .field-unit .label {
padding: 0 0 0.2rem var(--input-label-padding);
text-align: left;
}
.custom-dd-body .input-field .err-container,
.custom-dd-body .field-unit .err-container {
padding-left: var(--input-label-padding);
color: var(--tk-ink-other-danger);
display: none;
}
.custom-dd-body .input-field .support-container,
.custom-dd-body .field-unit .support-container {
padding-left: var(--input-label-padding);
display: block;
color: var(--tk-ink-main-toned);
}
.custom-dd-body .input-field.req > label::after,
.custom-dd-body .input-field.req > .label::after,
.custom-dd-body .input-field.req > .field-unit__label > label::after,
.custom-dd-body .input-field.req > .field-unit__label > .label::after,
.custom-dd-body .input-field.req .field-unit__label > .field_with_errors > label::after,
.custom-dd-body .input-field.req .field-unit__label > .field_with_errors > .label::after, .custom-dd-body .input-field.war > label::after,
.custom-dd-body .input-field.war > .label::after,
.custom-dd-body .input-field.war > .field-unit__label > label::after,
.custom-dd-body .input-field.war > .field-unit__label > .label::after,
.custom-dd-body .input-field.war .field-unit__label > .field_with_errors > label::after,
.custom-dd-body .input-field.war .field-unit__label > .field_with_errors > .label::after, .custom-dd-body .input-field.err > label::after,
.custom-dd-body .input-field.err > .label::after,
.custom-dd-body .input-field.err > .field-unit__label > label::after,
.custom-dd-body .input-field.err > .field-unit__label > .label::after,
.custom-dd-body .input-field.err .field-unit__label > .field_with_errors > label::after,
.custom-dd-body .input-field.err .field-unit__label > .field_with_errors > .label::after, .custom-dd-body .input-field:has(.field_with_errors) > label::after,
.custom-dd-body .input-field:has(.field_with_errors) > .label::after,
.custom-dd-body .input-field:has(.field_with_errors) > .field-unit__label > label::after,
.custom-dd-body .input-field:has(.field_with_errors) > .field-unit__label > .label::after,
.custom-dd-body .input-field:has(.field_with_errors) .field-unit__label > .field_with_errors > label::after,
.custom-dd-body .input-field:has(.field_with_errors) .field-unit__label > .field_with_errors > .label::after,
.custom-dd-body .field-unit.req > label::after,
.custom-dd-body .field-unit.req > .label::after,
.custom-dd-body .field-unit.req > .field-unit__label > label::after,
.custom-dd-body .field-unit.req > .field-unit__label > .label::after,
.custom-dd-body .field-unit.req .field-unit__label > .field_with_errors > label::after,
.custom-dd-body .field-unit.req .field-unit__label > .field_with_errors > .label::after,
.custom-dd-body .field-unit.war > label::after,
.custom-dd-body .field-unit.war > .label::after,
.custom-dd-body .field-unit.war > .field-unit__label > label::after,
.custom-dd-body .field-unit.war > .field-unit__label > .label::after,
.custom-dd-body .field-unit.war .field-unit__label > .field_with_errors > label::after,
.custom-dd-body .field-unit.war .field-unit__label > .field_with_errors > .label::after,
.custom-dd-body .field-unit.err > label::after,
.custom-dd-body .field-unit.err > .label::after,
.custom-dd-body .field-unit.err > .field-unit__label > label::after,
.custom-dd-body .field-unit.err > .field-unit__label > .label::after,
.custom-dd-body .field-unit.err .field-unit__label > .field_with_errors > label::after,
.custom-dd-body .field-unit.err .field-unit__label > .field_with_errors > .label::after,
.custom-dd-body .field-unit:has(.field_with_errors) > label::after,
.custom-dd-body .field-unit:has(.field_with_errors) > .label::after,
.custom-dd-body .field-unit:has(.field_with_errors) > .field-unit__label > label::after,
.custom-dd-body .field-unit:has(.field_with_errors) > .field-unit__label > .label::after,
.custom-dd-body .field-unit:has(.field_with_errors) .field-unit__label > .field_with_errors > label::after,
.custom-dd-body .field-unit:has(.field_with_errors) .field-unit__label > .field_with_errors > .label::after {
content: "*";
margin-left: 0.4rem;
color: var(--tk-ink-other-danger);
}
.custom-dd-body .input-field.err .input-container,
.custom-dd-body .input-field.err .field-unit__field, .custom-dd-body .input-field:has(.field_with_errors) .input-container,
.custom-dd-body .input-field:has(.field_with_errors) .field-unit__field,
.custom-dd-body .field-unit.err .input-container,
.custom-dd-body .field-unit.err .field-unit__field,
.custom-dd-body .field-unit:has(.field_with_errors) .input-container,
.custom-dd-body .field-unit:has(.field_with_errors) .field-unit__field {
position: relative;
}
.custom-dd-body .input-field.err .input-container::after,
.custom-dd-body .input-field.err .field-unit__field::after, .custom-dd-body .input-field:has(.field_with_errors) .input-container::after,
.custom-dd-body .input-field:has(.field_with_errors) .field-unit__field::after,
.custom-dd-body .field-unit.err .input-container::after,
.custom-dd-body .field-unit.err .field-unit__field::after,
.custom-dd-body .field-unit:has(.field_with_errors) .input-container::after,
.custom-dd-body .field-unit:has(.field_with_errors) .field-unit__field::after {
content: "";
display: block;
position: absolute;
right: var(--input-icon-space);
top: 50%;
transform: translateY(-50%);
background-image: url("/icons/error-icon.svg");
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
width: var(--nb-atom-button-l-icon-size);
height: var(--nb-atom-button-l-icon-size);
z-index: 1;
}
.custom-dd-body .input-field.err .input-container input:not([type=checkbox]):not([type=radio]),
.custom-dd-body .input-field.err .input-container select,
.custom-dd-body .input-field.err .input-container textarea,
.custom-dd-body .input-field.err .input-container .ts-control,
.custom-dd-body .input-field.err .field-unit__field input:not([type=checkbox]):not([type=radio]),
.custom-dd-body .input-field.err .field-unit__field select,
.custom-dd-body .input-field.err .field-unit__field textarea,
.custom-dd-body .input-field.err .field-unit__field .ts-control, .custom-dd-body .input-field:has(.field_with_errors) .input-container input:not([type=checkbox]):not([type=radio]),
.custom-dd-body .input-field:has(.field_with_errors) .input-container select,
.custom-dd-body .input-field:has(.field_with_errors) .input-container textarea,
.custom-dd-body .input-field:has(.field_with_errors) .input-container .ts-control,
.custom-dd-body .input-field:has(.field_with_errors) .field-unit__field input:not([type=checkbox]):not([type=radio]),
.custom-dd-body .input-field:has(.field_with_errors) .field-unit__field select,
.custom-dd-body .input-field:has(.field_with_errors) .field-unit__field textarea,
.custom-dd-body .input-field:has(.field_with_errors) .field-unit__field .ts-control,
.custom-dd-body .field-unit.err .input-container input:not([type=checkbox]):not([type=radio]),
.custom-dd-body .field-unit.err .input-container select,
.custom-dd-body .field-unit.err .input-container textarea,
.custom-dd-body .field-unit.err .input-container .ts-control,
.custom-dd-body .field-unit.err .field-unit__field input:not([type=checkbox]):not([type=radio]),
.custom-dd-body .field-unit.err .field-unit__field select,
.custom-dd-body .field-unit.err .field-unit__field textarea,
.custom-dd-body .field-unit.err .field-unit__field .ts-control,
.custom-dd-body .field-unit:has(.field_with_errors) .input-container input:not([type=checkbox]):not([type=radio]),
.custom-dd-body .field-unit:has(.field_with_errors) .input-container select,
.custom-dd-body .field-unit:has(.field_with_errors) .input-container textarea,
.custom-dd-body .field-unit:has(.field_with_errors) .input-container .ts-control,
.custom-dd-body .field-unit:has(.field_with_errors) .field-unit__field input:not([type=checkbox]):not([type=radio]),
.custom-dd-body .field-unit:has(.field_with_errors) .field-unit__field select,
.custom-dd-body .field-unit:has(.field_with_errors) .field-unit__field textarea,
.custom-dd-body .field-unit:has(.field_with_errors) .field-unit__field .ts-control {
padding-right: calc(var(--input-content-space) + var(--nb-atom-button-l-icon-size) + 0.4rem);
border-color: var(--tk-ink-other-danger) !important;
}
.custom-dd-body .input-field.err > label,
.custom-dd-body .input-field.err > .label,
.custom-dd-body .input-field.err > .field-unit__label label,
.custom-dd-body .input-field.err > .field-unit__label .label, .custom-dd-body .input-field:has(.field_with_errors) > label,
.custom-dd-body .input-field:has(.field_with_errors) > .label,
.custom-dd-body .input-field:has(.field_with_errors) > .field-unit__label label,
.custom-dd-body .input-field:has(.field_with_errors) > .field-unit__label .label,
.custom-dd-body .field-unit.err > label,
.custom-dd-body .field-unit.err > .label,
.custom-dd-body .field-unit.err > .field-unit__label label,
.custom-dd-body .field-unit.err > .field-unit__label .label,
.custom-dd-body .field-unit:has(.field_with_errors) > label,
.custom-dd-body .field-unit:has(.field_with_errors) > .label,
.custom-dd-body .field-unit:has(.field_with_errors) > .field-unit__label label,
.custom-dd-body .field-unit:has(.field_with_errors) > .field-unit__label .label {
color: var(--tk-ink-other-danger);
}
.custom-dd-body .input-field.err .err-container, .custom-dd-body .input-field:has(.field_with_errors) .err-container,
.custom-dd-body .field-unit.err .err-container,
.custom-dd-body .field-unit:has(.field_with_errors) .err-container {
display: block;
}
.custom-dd-body .input-field .field_with_errors,
.custom-dd-body .field-unit .field_with_errors {
display: contents;
}
.custom-dd-body .input-field.search-input,
.custom-dd-body .field-unit.search-input {
width: fit-content;
}
.custom-dd-body .input-field.search-input .input-container input.search__input,
.custom-dd-body .field-unit.search-input .input-container input.search__input {
padding: 0 var(--input-content-space);
}
.custom-dd-body .input-field.search-input .input-container .input-clear-button,
.custom-dd-body .field-unit.search-input .input-container .input-clear-button {
display: none;
position: absolute;
right: var(--input-icon-space);
top: 50%;
transform: translateY(-50%);
width: var(--nb-atom-button-l-icon-size);
height: var(--nb-atom-button-l-icon-size);
background-image: url("/icons/remove.svg");
background-size: contain;
cursor: pointer;
z-index: 2;
}
.custom-dd-body .input-field.search-input .input-container::before,
.custom-dd-body .field-unit.search-input .input-container::before {
content: "";
display: block;
position: absolute;
left: var(--input-icon-space);
top: 50%;
transform: translateY(-50%);
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
width: var(--nb-atom-button-l-icon-size);
height: var(--nb-atom-button-l-icon-size);
z-index: 1;
}
.custom-dd-body .input-field.search-input:has(input:not(:placeholder-shown)) .input-clear-button,
.custom-dd-body .field-unit.search-input:has(input:not(:placeholder-shown)) .input-clear-button {
display: block;
}
.custom-dd-body .input-field.search-input.err .input-clear-button,
.custom-dd-body .field-unit.search-input.err .input-clear-button {
right: calc(var(--input-icon-space) + var(--nb-atom-button-l-icon-size) + 0.4rem);
}
.custom-dd-body .input-field.search-input.war .input-container::after,
.custom-dd-body .field-unit.search-input.war .input-container::after {
content: "";
display: block;
position: absolute;
right: var(--input-icon-space);
top: 50%;
transform: translateY(-50%);
background-image: url("/icons/warning-icon.svg");
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
width: var(--nb-atom-button-l-icon-size);
height: var(--nb-atom-button-l-icon-size);
z-index: 1;
}
.custom-dd-body .input-field.search-input.war .err-container,
.custom-dd-body .field-unit.search-input.war .err-container {
display: block;
color: var(--tk-ink-other-warning);
}
.custom-dd-body .input-field .field-unit__label,
.custom-dd-body .input-field .field-unit__field,
.custom-dd-body .field-unit .field-unit__label,
.custom-dd-body .field-unit .field-unit__field {
margin-left: 0;
width: 100%;
}
.custom-dd-body .input-field .field-unit__label, .custom-dd-body .input-field .field-unit__field,
.custom-dd-body .field-unit .field-unit__label,
.custom-dd-body .field-unit .field-unit__field {
margin-left: 0;
}
.custom-dd-body .field-unit {
margin-bottom: unset;
}
.custom-dd-body .field-unit {
margin-bottom: unset;
}
.custom-dd-body .field-unit.field-unit--has-many .field-unit__field .ts-control {
height: auto;
min-height: var(--nb-common-control-size-xl);
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: var(--gap-5);
padding: var(--gap-4) var(--gap-11) var(--gap-4) var(--gap-4);
}
.custom-dd-body .field-unit.field-unit--has-many .field-unit__field .ts-control > .item {
background: unset;
-webkit-box-shadow: unset;
box-shadow: unset;
margin: 0;
display: inline-flex;
justify-content: center;
align-items: center;
position: relative;
font-family: var(--font-main, sans-serif);
font-weight: 500;
text-decoration: none;
white-space: nowrap !important;
line-height: 1;
border-style: solid;
border-width: var(--nb-common-stroke-m, 1.5px);
border-radius: var(--nb-common-radius-control-soft, 0.8rem);
cursor: default;
transition: all var(--def-trans-time, 0.2s) ease-in-out;
-webkit-appearance: none;
flex-shrink: 0;
height: var(--nb-common-control-size-2xs, 2.8rem);
padding: 0 var(--nb-atom-chip-2xs-sides, 1rem);
background-color: var(--chip-bg);
color: var(--chip-col);
border-color: var(--chip-bd);
}
.custom-dd-body .field-unit.field-unit--has-many .field-unit__field .ts-control > .item svg {
fill: currentColor;
flex-shrink: 0;
display: block;
}
.custom-dd-body .field-unit.field-unit--has-many .field-unit__field .ts-control > .item svg path {
fill: currentColor;
}
.custom-dd-body .field-unit.field-unit--has-many .field-unit__field .ts-control > .item.action-chip {
cursor: pointer;
}
.custom-dd-body .field-unit.field-unit--has-many .field-unit__field .ts-control > .item.action-chip:focus {
background-color: var(--chip-h-bg, var(--chip-bg));
color: var(--chip-h-col, var(--chip-col));
border-color: var(--chip-h-bd, var(--chip-bd));
outline: 0.2rem solid var(--tk-ink-main-primary);
outline-offset: 0.2rem;
}
.custom-dd-body .field-unit.field-unit--has-many .field-unit__field .ts-control > .item.action-chip:active, .custom-dd-body .field-unit.field-unit--has-many .field-unit__field .ts-control > .item.action-chip.btn-on, .custom-dd-body .field-unit.field-unit--has-many .field-unit__field .ts-control > .item.action-chip.active {
background-color: var(--chip-a-bg, var(--chip-bg));
color: var(--chip-a-col, var(--chip-col));
border-color: var(--chip-a-bd, var(--chip-bd));
}
@media (hover: hover) {
.custom-dd-body .field-unit.field-unit--has-many .field-unit__field .ts-control > .item.action-chip:hover {
background-color: var(--chip-h-bg, var(--chip-bg));
color: var(--chip-h-col, var(--chip-col));
border-color: var(--chip-h-bd, var(--chip-bd));
}
}
.custom-dd-body .field-unit.field-unit--has-many .field-unit__field .ts-control > .item:disabled, .custom-dd-body .field-unit.field-unit--has-many .field-unit__field .ts-control > .item.is-disabled {
cursor: not-allowed;
pointer-events: none;
box-shadow: none;
opacity: 1;
}
.custom-dd-body .field-unit.field-unit--has-many .field-unit__field .ts-control > .item:disabled[class*=chip-], .custom-dd-body .field-unit.field-unit--has-many .field-unit__field .ts-control > .item.is-disabled[class*=chip-] {
background-color: var(--tk-control-disabled-filled-fill);
border-color: var(--tk-control-disabled-filled-fill);
color: var(--tk-control-disabled-filled-content);
}
.custom-dd-body .field-unit.field-unit--has-many .field-unit__field .ts-control > .item:disabled[class*=chip-][class*=-subtle], .custom-dd-body .field-unit.field-unit--has-many .field-unit__field .ts-control > .item.is-disabled[class*=chip-][class*=-subtle] {
background-color: var(--tk-control-neutral-subtle-fill);
border-color: var(--tk-control-disabled-subtle-outline);
color: var(--tk-control-disabled-subtle-content);
}
.custom-dd-body .field-unit.field-unit--has-many .field-unit__field .ts-control > .item {
--chip-bg: var(--tk-control-neutral-subtle-fill);
--chip-col: var(--tk-control-neutral-subtle-content);
--chip-bd: var(--tk-control-neutral-subtle-outline);
--chip-h-bg: var(--tk-control-neutral-state-hover-alt-fill);
--chip-h-col: var(--tk-control-neutral-state-hover-alt-content);
--chip-h-bd: transparent;
--chip-a-bg: var(--tk-control-neutral-state-active-alt-fill);
--chip-a-col: var(--tk-control-neutral-state-active-alt-content);
--chip-a-bd: transparent;
height: var(--nb-common-control-size-xs, 3.2rem);
padding: 0 var(--nb-atom-chip-xs-sides, 1.2rem);
gap: var(--nb-atom-chip-xs-gap, 1rem);
font-size: var(--tg-styles-button-s-size, 1.6rem);
}
.custom-dd-body .field-unit.field-unit--has-many .field-unit__field .ts-control > .item svg {
width: var(--nb-atom-chip-xs-icon-size, 1.8rem);
min-width: var(--nb-atom-chip-xs-icon-size, 1.8rem);
max-width: var(--nb-atom-chip-xs-icon-size, 1.8rem);
height: var(--nb-atom-chip-xs-icon-size, 1.8rem);
}
.custom-dd-body .field-unit.field-unit--has-many .field-unit__field .ts-control > .item svg:first-child:not(:last-child) {
margin-left: -0.2rem;
}
.custom-dd-body .field-unit.field-unit--has-many .field-unit__field .ts-control > .item svg:last-child:not(:first-child) {
margin-right: -0.2rem;
}
.custom-dd-body .field-unit.field-unit--has-many .field-unit__field .ts-control > .item {
width: fit-content;
overflow: unset;
}
.custom-dd-body .field-unit.field-unit--has-many .field-unit__field .ts-control.not-full input {
width: auto !important;
flex-grow: 1;
}
.custom-dd-body .field-unit.field-unit--has-many .field-unit__field .ts-control.has-items input {
width: auto !important;
flex-grow: 1;
}
.custom-dd-body .field-unit__field {
margin-left: 0;
}
.custom-dd-body .field-unit__field[data-controller=collapsible-locales] {
display: flex;
flex-direction: column;
width: 100%;
align-items: stretch;
justify-content: flex-start;
}
.custom-dd-body .field-unit__field[data-controller=collapsible-locales] .collapsible-item {
margin-bottom: var(--gap-12);
}
.custom-dd-body .field-unit__field[data-controller=collapsible-locales] > div[data-collapsible-locales-target=other] {
display: none;
margin-left: 8.7%;
overflow: hidden;
}
.custom-dd-body .field-unit__field[data-controller=collapsible-locales] > div label {
font-size: 1.2rem;
}
.custom-dd-body .field-unit__field[data-controller=collapsible-locales] button {
align-self: flex-start;
margin-bottom: var(--gap-12);
}
.custom-dd-body select {
height: var(--nb-common-control-size-xl);
padding: 0 var(--nb-atom-input-xl-padding-h);
border: 1px solid var(--tk-border-solid-2);
border-radius: var(--nb-common-radius-control-soft);
color: var(--tk-ink-main-primary);
font-size: var(--tg-styles-body-m-size, 1.8rem);
transition: all var(--def-trans-time, 0.2s) ease-in-out;
background-color: var(--tk-surface-elevated);
}
@media (hover: hover) {
.custom-dd-body select:hover {
border-color: var(--tk-border-solid-3);
}
}
.custom-dd-body select:focus, .custom-dd-body select.focus {
border-color: var(--tk-control-primary-state-active-outline);
outline: none;
}
.custom-dd-body select::placeholder {
color: var(--tk-ink-main-toned);
font-size: inherit;
}
.custom-dd-body select {
display: flex;
align-items: center;
width: 100%;
appearance: none;
min-width: 10rem;
cursor: pointer;
padding-right: 4rem;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3Cpath fill='%23333' d='M7.53027 8.59082L0 1.06055L1.06055 0L7.53027 6.46973L14 5.65602e-07L15.0605 1.06055L7.53027 8.59082Z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 2rem center;
background-size: 16px 9px;
-webkit-transition: var(--def-trans-prop) var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
transition: var(--def-trans-prop) var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
}
.custom-dd-body input[type=radio] {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
width: 2rem;
height: 2rem;
border: 1px solid var(--tk-border-solid-3);
border-radius: 50%;
background: var(--tk-surface-elevated);
cursor: pointer;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
vertical-align: middle;
transition: all 0.2s ease-in-out;
margin: 0 var(--gap-4) 0 0;
outline: none;
flex-shrink: 0;
}
.custom-dd-body input[type=radio]:before {
content: "";
width: 1rem;
height: 1rem;
border-radius: 50%;
background: var(--tk-primary-base);
-webkit-transform: scale(0);
transform: scale(0);
transition: all 0.2s ease-in-out;
}
.custom-dd-body input[type=radio]:checked {
border-color: var(--tk-primary-base);
border: 1.5px solid var(--tk-primary-base);
}
.custom-dd-body input[type=radio]:checked:before {
-webkit-transform: scale(1);
transform: scale(1);
}
@media (hover: hover) {
.custom-dd-body input[type=radio]:hover:not(:checked) {
border-color: var(--tk-primary-strong);
}
}
.custom-dd-body input[type=radio]:focus-visible {
box-shadow: 0 0 0 2px rgba(var(--tk-primary-strong), 0.4);
border-color: var(--tk-primary-strong);
}
.custom-dd-body input[type=radio]:disabled {
background: var(--tk-control-disabled-filled-fill);
border-color: var(--tk-control-disabled-filled-content);
cursor: not-allowed;
}
.custom-dd-body input[type=radio]:disabled:before {
background: var(--tk-control-disabled-ghost-content);
}
.custom-dd-body input[type=search]::-webkit-search-decoration,
.custom-dd-body input[type=search]::-webkit-search-cancel-button,
.custom-dd-body input[type=search]::-webkit-search-results-button,
.custom-dd-body input[type=search]::-webkit-search-results-decoration {
-webkit-appearance: none !important;
appearance: none !important;
display: none !important;
}
.custom-dd-body label {
cursor: pointer;
user-select: none;
vertical-align: middle;
}
.inline-error-box {
border-left: 3px solid var(--tk-ink-other-danger);
padding-left: var(--global-padding);
}
.inline-error-box__title {
color: var(--tk-ink-other-danger);
}
.inline-warning-box {
border-left: 3px solid var(--tk-ink-other-warning);
padding-left: var(--global-padding);
}
.inline-warning-box__title {
color: var(--tk-ink-other-warning);
}
.custom-dd-body .arrow {
display: inline-flex;
justify-content: center;
align-items: center;
position: relative;
font-family: var(--font-main, sans-serif);
font-weight: 600;
text-decoration: none;
white-space: nowrap;
line-height: 1;
border-style: solid;
border-radius: 50%;
cursor: pointer;
transition: all var(--def-trans-time, 0.2s) ease-in-out;
-webkit-appearance: none;
flex-shrink: 0;
background-color: var(--arrow-bg);
color: var(--arrow-col);
border-color: var(--arrow-bd);
}
.custom-dd-body .arrow .btn-state-wrap {
display: grid;
grid-template-columns: 1;
grid-template-rows: 1;
}
.custom-dd-body .arrow .btn-state-wrap > div,
.custom-dd-body .arrow .btn-state-wrap > img,
.custom-dd-body .arrow .btn-state-wrap > svg {
grid-column: 1;
grid-row: 1;
}
.custom-dd-body .arrow .btn-state-wrap > div.state-on,
.custom-dd-body .arrow .btn-state-wrap > img.state-on,
.custom-dd-body .arrow .btn-state-wrap > svg.state-on {
opacity: 0;
pointer-events: none;
}
.custom-dd-body .arrow.btn-on, .custom-dd-body .arrow.active {
border-radius: var(--nb-common-radius-control-soft, 0.8rem);
}
.custom-dd-body .arrow.btn-on .btn-state-wrap > div,
.custom-dd-body .arrow.btn-on .btn-state-wrap > img,
.custom-dd-body .arrow.btn-on .btn-state-wrap > svg, .custom-dd-body .arrow.active .btn-state-wrap > div,
.custom-dd-body .arrow.active .btn-state-wrap > img,
.custom-dd-body .arrow.active .btn-state-wrap > svg {
grid-column: 1;
grid-row: 1;
}
.custom-dd-body .arrow.btn-on .btn-state-wrap > div.state-on,
.custom-dd-body .arrow.btn-on .btn-state-wrap > img.state-on,
.custom-dd-body .arrow.btn-on .btn-state-wrap > svg.state-on, .custom-dd-body .arrow.active .btn-state-wrap > div.state-on,
.custom-dd-body .arrow.active .btn-state-wrap > img.state-on,
.custom-dd-body .arrow.active .btn-state-wrap > svg.state-on {
opacity: 1;
pointer-events: auto;
}
.custom-dd-body .arrow.btn-on .btn-state-wrap > div.state-off,
.custom-dd-body .arrow.btn-on .btn-state-wrap > img.state-off,
.custom-dd-body .arrow.btn-on .btn-state-wrap > svg.state-off, .custom-dd-body .arrow.active .btn-state-wrap > div.state-off,
.custom-dd-body .arrow.active .btn-state-wrap > img.state-off,
.custom-dd-body .arrow.active .btn-state-wrap > svg.state-off {
opacity: 0;
pointer-events: none;
}
.custom-dd-body .arrow:active, .custom-dd-body .arrow.btn-on, .custom-dd-body .arrow.active {
background-color: var(--arrow-a-bg);
color: var(--arrow-a-col);
border-color: var(--arrow-a-bd);
}
.custom-dd-body .arrow:focus {
background-color: var(--arrow-h-bg);
color: var(--arrow-h-col);
border-color: var(--arrow-h-bd);
outline: 0.2rem solid var(--tk-ink-main-primary);
outline-offset: 0.4rem;
}
@media (hover: hover) {
.custom-dd-body .arrow:hover {
background-color: var(--arrow-h-bg);
color: var(--arrow-h-col);
border-color: var(--arrow-h-bd);
opacity: 1;
}
}
.custom-dd-body .arrow:disabled, .custom-dd-body .arrow.is-disabled {
cursor: not-allowed;
pointer-events: none;
box-shadow: none;
opacity: 1;
}
.custom-dd-body .arrow svg {
fill: currentColor;
flex-shrink: 0;
display: block;
}
.custom-dd-body .arrow.arrow--size-l {
height: var(--nb-common-control-size-l, 5.2rem);
width: var(--nb-common-control-size-l, 5.2rem);
--arrow-border-width: var(--nb-common-stroke-m, 1.5px);
}
.custom-dd-body .arrow.arrow--size-l svg {
width: var(--nb-atom-button-l-icon-size, 2.8rem);
min-width: var(--nb-atom-button-l-icon-size, 2.8rem);
max-width: var(--nb-atom-button-l-icon-size, 2.8rem);
height: var(--nb-atom-button-l-icon-size, 2.8rem);
}
.custom-dd-body .arrow.arrow--size-m {
height: var(--nb-common-control-size-m, 4.4rem);
width: var(--nb-common-control-size-m, 4.4rem);
--arrow-border-width: var(--nb-common-stroke-m, 1.5px);
}
.custom-dd-body .arrow.arrow--size-m svg {
width: var(--nb-atom-button-m-icon-size, 2rem);
min-width: var(--nb-atom-button-m-icon-size, 2rem);
max-width: var(--nb-atom-button-m-icon-size, 2rem);
height: var(--nb-atom-button-m-icon-size, 2rem);
}
.custom-dd-body .arrow.arrow--size-s {
height: var(--nb-common-control-size-s, 3.6rem);
width: var(--nb-common-control-size-s, 3.6rem);
--arrow-border-width: var(--nb-common-stroke-m, 1.5px);
}
.custom-dd-body .arrow.arrow--size-s svg {
width: var(--nb-atom-button-s-icon-size, 1.8rem);
min-width: var(--nb-atom-button-s-icon-size, 1.8rem);
max-width: var(--nb-atom-button-s-icon-size, 1.8rem);
height: var(--nb-atom-button-s-icon-size, 1.8rem);
}
.custom-dd-body .arrow.arrow--neutral {
border-width: var(--arrow-border-width);
--arrow-bg: var(--tk-control-neutral-filled-fill);
--arrow-col: var(--tk-control-neutral-filled-content);
--arrow-bd: transparent;
--arrow-h-bg: var(--tk-control-neutral-state-hover-main-fill);
--arrow-h-col: var(--tk-control-neutral-state-hover-main-content);
--arrow-h-bd: transparent;
--arrow-a-bg: var(--tk-control-neutral-state-active-main-fill);
--arrow-a-col: var(--tk-control-neutral-state-active-main-content);
--arrow-a-bd: transparent;
}
.custom-dd-body .arrow.arrow--neutral:disabled, .custom-dd-body .arrow.arrow--neutral.is-disabled {
--arrow-bg: var(--tk-control-disabled-filled-fill);
--arrow-col: var(--tk-control-disabled-filled-content);
--arrow-bd: transparent;
}
.custom-dd-body .arrow.arrow--neutral-filled {
border-width: var(--arrow-border-width);
--arrow-bg: var(--tk-control-neutral-filled-fill);
--arrow-col: var(--tk-control-neutral-filled-content);
--arrow-bd: transparent;
--arrow-h-bg: var(--tk-control-neutral-state-hover-main-fill);
--arrow-h-col: var(--tk-control-neutral-state-hover-main-content);
--arrow-h-bd: transparent;
--arrow-a-bg: var(--tk-control-neutral-state-active-main-fill);
--arrow-a-col: var(--tk-control-neutral-state-active-main-content);
--arrow-a-bd: transparent;
}
.custom-dd-body .arrow.arrow--neutral-filled:disabled, .custom-dd-body .arrow.arrow--neutral-filled.is-disabled {
--arrow-bg: var(--tk-control-disabled-filled-fill);
--arrow-col: var(--tk-control-disabled-filled-content);
--arrow-bd: transparent;
}
.custom-dd-body .arrow.arrow--neutral-outlined {
border-width: var(--arrow-border-width);
--arrow-bg: transparent;
--arrow-col: var(--tk-control-neutral-outlined-content);
--arrow-bd: var(--tk-control-neutral-outlined-outline);
--arrow-h-bg: var(--tk-control-neutral-state-hover-alt-fill);
--arrow-h-col: var(--tk-control-neutral-state-hover-alt-content);
--arrow-h-bd: transparent;
--arrow-a-bg: var(--tk-control-neutral-state-active-alt-fill);
--arrow-a-col: var(--tk-control-neutral-state-active-alt-content);
--arrow-a-bd: transparent;
}
.custom-dd-body .arrow.arrow--neutral-outlined:disabled, .custom-dd-body .arrow.arrow--neutral-outlined.is-disabled {
--arrow-bg: transparent;
--arrow-col: var(--tk-control-disabled-outlined-content);
--arrow-bd: var(--tk-control-disabled-outlined-outline);
}
.custom-dd-body .arrow.arrow--neutral-subtle {
border-width: var(--arrow-border-width);
--arrow-bg: var(--tk-control-neutral-subtle-fill);
--arrow-col: var(--tk-control-neutral-subtle-content);
--arrow-bd: var(--tk-control-neutral-subtle-outline, transparent);
--arrow-h-bg: var(--tk-control-neutral-state-hover-alt-fill);
--arrow-h-col: var(--tk-control-neutral-state-hover-alt-content);
--arrow-h-bd: transparent;
--arrow-a-bg: var(--tk-control-neutral-state-active-alt-fill);
--arrow-a-col: var(--tk-control-neutral-state-active-alt-content);
--arrow-a-bd: transparent;
}
.custom-dd-body .arrow.arrow--neutral-subtle.btn-on {
--arrow-bd: var(--tk-control-neutral-outlined-outline);
}
.custom-dd-body .arrow.arrow--neutral-subtle:disabled, .custom-dd-body .arrow.arrow--neutral-subtle.is-disabled {
--arrow-bg: transparent;
--arrow-col: var(--tk-control-disabled-subtle-content);
--arrow-bd: var(--tk-control-disabled-subtle-outline);
}
.custom-dd-body .arrow.arrow--neutral-ghost {
border-width: var(--arrow-border-width);
--arrow-bg: transparent;
--arrow-col: var(--tk-control-neutral-ghost-content);
--arrow-bd: transparent;
--arrow-h-bg: var(--tk-control-neutral-state-hover-alt-fill);
--arrow-h-col: var(--tk-control-neutral-state-hover-alt-content);
--arrow-h-bd: transparent;
--arrow-a-bg: var(--tk-control-neutral-state-active-alt-fill);
--arrow-a-col: var(--tk-control-neutral-state-active-alt-content);
--arrow-a-bd: transparent;
}
.custom-dd-body .arrow.arrow--neutral-ghost:disabled, .custom-dd-body .arrow.arrow--neutral-ghost.is-disabled {
--arrow-bg: transparent;
--arrow-col: var(--tk-control-disabled-ghost-content);
--arrow-bd: transparent;
}
.custom-dd-body .arrow.arrow--neutral-clear {
border-width: var(--arrow-border-width);
--arrow-bg: var(--tk-control-neutral-clear-fill);
--arrow-col: var(--tk-control-neutral-clear-content);
--arrow-bd: transparent;
--arrow-h-bg: var(--tk-control-neutral-state-hover-alt-fill);
--arrow-h-col: var(--tk-control-neutral-state-hover-alt-content);
--arrow-h-bd: transparent;
--arrow-a-bg: var(--tk-control-neutral-state-active-alt-fill);
--arrow-a-col: var(--tk-control-neutral-state-active-alt-content);
--arrow-a-bd: transparent;
}
.custom-dd-body .arrow.arrow--neutral-clear:disabled, .custom-dd-body .arrow.arrow--neutral-clear.is-disabled {
--arrow-bg: var(--tk-control-disabled-filled-fill);
--arrow-col: var(--tk-control-disabled-clear-content);
--arrow-bd: transparent;
}
.custom-dd-body .arrow.arrow--primary {
border-width: var(--arrow-border-width);
--arrow-bg: var(--tk-control-primary-filled-fill);
--arrow-col: var(--tk-control-primary-filled-content);
--arrow-bd: transparent;
--arrow-h-bg: var(--tk-control-primary-state-hover-main-fill);
--arrow-h-col: var(--tk-control-primary-state-hover-main-content);
--arrow-h-bd: transparent;
--arrow-a-bg: var(--tk-control-primary-state-active-main-fill);
--arrow-a-col: var(--tk-control-primary-state-active-main-content);
--arrow-a-bd: transparent;
}
.custom-dd-body .arrow.arrow--primary:disabled, .custom-dd-body .arrow.arrow--primary.is-disabled {
--arrow-bg: var(--tk-control-disabled-filled-fill);
--arrow-col: var(--tk-control-disabled-filled-content);
--arrow-bd: transparent;
}
.custom-dd-body .arrow.arrow--primary-filled {
border-width: var(--arrow-border-width);
--arrow-bg: var(--tk-control-primary-filled-fill);
--arrow-col: var(--tk-control-primary-filled-content);
--arrow-bd: transparent;
--arrow-h-bg: var(--tk-control-primary-state-hover-main-fill);
--arrow-h-col: var(--tk-control-primary-state-hover-main-content);
--arrow-h-bd: transparent;
--arrow-a-bg: var(--tk-control-primary-state-active-main-fill);
--arrow-a-col: var(--tk-control-primary-state-active-main-content);
--arrow-a-bd: transparent;
}
.custom-dd-body .arrow.arrow--primary-filled:disabled, .custom-dd-body .arrow.arrow--primary-filled.is-disabled {
--arrow-bg: var(--tk-control-disabled-filled-fill);
--arrow-col: var(--tk-control-disabled-filled-content);
--arrow-bd: transparent;
}
.custom-dd-body .arrow.arrow--primary-outlined {
border-width: var(--arrow-border-width);
--arrow-bg: transparent;
--arrow-col: var(--tk-control-primary-outlined-content);
--arrow-bd: var(--tk-control-primary-outlined-outline);
--arrow-h-bg: var(--tk-control-primary-state-hover-alt-fill);
--arrow-h-col: var(--tk-control-primary-state-hover-alt-content);
--arrow-h-bd: transparent;
--arrow-a-bg: var(--tk-control-primary-state-active-alt-fill);
--arrow-a-col: var(--tk-control-primary-state-active-alt-content);
--arrow-a-bd: transparent;
}
.custom-dd-body .arrow.arrow--primary-outlined:disabled, .custom-dd-body .arrow.arrow--primary-outlined.is-disabled {
--arrow-bg: transparent;
--arrow-col: var(--tk-control-disabled-outlined-content);
--arrow-bd: var(--tk-control-disabled-outlined-outline);
}
.custom-dd-body .arrow.arrow--primary-subtle {
border-width: var(--arrow-border-width);
--arrow-bg: var(--tk-control-primary-subtle-fill);
--arrow-col: var(--tk-control-primary-subtle-content);
--arrow-bd: var(--tk-control-primary-subtle-outline, transparent);
--arrow-h-bg: var(--tk-control-primary-state-hover-alt-fill);
--arrow-h-col: var(--tk-control-primary-state-hover-alt-content);
--arrow-h-bd: transparent;
--arrow-a-bg: var(--tk-control-primary-state-active-alt-fill);
--arrow-a-col: var(--tk-control-primary-state-active-alt-content);
--arrow-a-bd: transparent;
}
.custom-dd-body .arrow.arrow--primary-subtle.btn-on {
--arrow-bd: var(--tk-control-neutral-outlined-outline);
}
.custom-dd-body .arrow.arrow--primary-subtle:disabled, .custom-dd-body .arrow.arrow--primary-subtle.is-disabled {
--arrow-bg: transparent;
--arrow-col: var(--tk-control-disabled-subtle-content);
--arrow-bd: var(--tk-control-disabled-subtle-outline);
}
.custom-dd-body .arrow.arrow--primary-ghost {
border-width: var(--arrow-border-width);
--arrow-bg: transparent;
--arrow-col: var(--tk-control-primary-ghost-content);
--arrow-bd: transparent;
--arrow-h-bg: var(--tk-control-primary-state-hover-alt-fill);
--arrow-h-col: var(--tk-control-primary-state-hover-alt-content);
--arrow-h-bd: transparent;
--arrow-a-bg: var(--tk-control-primary-state-active-alt-fill);
--arrow-a-col: var(--tk-control-primary-state-active-alt-content);
--arrow-a-bd: transparent;
}
.custom-dd-body .arrow.arrow--primary-ghost:disabled, .custom-dd-body .arrow.arrow--primary-ghost.is-disabled {
--arrow-bg: transparent;
--arrow-col: var(--tk-control-disabled-ghost-content);
--arrow-bd: transparent;
}
.custom-dd-body .arrow.arrow--primary-clear {
border-width: var(--arrow-border-width);
--arrow-bg: var(--tk-control-primary-clear-fill);
--arrow-col: var(--tk-control-primary-clear-content);
--arrow-bd: transparent;
--arrow-h-bg: var(--tk-control-primary-state-hover-alt-fill);
--arrow-h-col: var(--tk-control-primary-state-hover-alt-content);
--arrow-h-bd: transparent;
--arrow-a-bg: var(--tk-control-primary-state-active-alt-fill);
--arrow-a-col: var(--tk-control-primary-state-active-alt-content);
--arrow-a-bd: transparent;
}
.custom-dd-body .arrow.arrow--primary-clear:disabled, .custom-dd-body .arrow.arrow--primary-clear.is-disabled {
--arrow-bg: var(--tk-control-disabled-filled-fill);
--arrow-col: var(--tk-control-disabled-clear-content);
--arrow-bd: transparent;
}
.custom-dd-body .arrow.arrow--secondary {
border-width: var(--arrow-border-width);
--arrow-bg: var(--tk-control-secondary-filled-fill);
--arrow-col: var(--tk-control-secondary-filled-content);
--arrow-bd: transparent;
--arrow-h-bg: var(--tk-control-secondary-state-hover-main-fill);
--arrow-h-col: var(--tk-control-secondary-state-hover-main-content);
--arrow-h-bd: transparent;
--arrow-a-bg: var(--tk-control-secondary-state-active-main-fill);
--arrow-a-col: var(--tk-control-secondary-state-active-main-content);
--arrow-a-bd: transparent;
}
.custom-dd-body .arrow.arrow--secondary:disabled, .custom-dd-body .arrow.arrow--secondary.is-disabled {
--arrow-bg: var(--tk-control-disabled-filled-fill);
--arrow-col: var(--tk-control-disabled-filled-content);
--arrow-bd: transparent;
}
.custom-dd-body .arrow.arrow--secondary-filled {
border-width: var(--arrow-border-width);
--arrow-bg: var(--tk-control-secondary-filled-fill);
--arrow-col: var(--tk-control-secondary-filled-content);
--arrow-bd: transparent;
--arrow-h-bg: var(--tk-control-secondary-state-hover-main-fill);
--arrow-h-col: var(--tk-control-secondary-state-hover-main-content);
--arrow-h-bd: transparent;
--arrow-a-bg: var(--tk-control-secondary-state-active-main-fill);
--arrow-a-col: var(--tk-control-secondary-state-active-main-content);
--arrow-a-bd: transparent;
}
.custom-dd-body .arrow.arrow--secondary-filled:disabled, .custom-dd-body .arrow.arrow--secondary-filled.is-disabled {
--arrow-bg: var(--tk-control-disabled-filled-fill);
--arrow-col: var(--tk-control-disabled-filled-content);
--arrow-bd: transparent;
}
.custom-dd-body .arrow.arrow--secondary-outlined {
border-width: var(--arrow-border-width);
--arrow-bg: transparent;
--arrow-col: var(--tk-control-secondary-outlined-content);
--arrow-bd: var(--tk-control-secondary-outlined-outline);
--arrow-h-bg: var(--tk-control-secondary-state-hover-alt-fill);
--arrow-h-col: var(--tk-control-secondary-state-hover-alt-content);
--arrow-h-bd: transparent;
--arrow-a-bg: var(--tk-control-secondary-state-active-alt-fill);
--arrow-a-col: var(--tk-control-secondary-state-active-alt-content);
--arrow-a-bd: transparent;
}
.custom-dd-body .arrow.arrow--secondary-outlined:disabled, .custom-dd-body .arrow.arrow--secondary-outlined.is-disabled {
--arrow-bg: transparent;
--arrow-col: var(--tk-control-disabled-outlined-content);
--arrow-bd: var(--tk-control-disabled-outlined-outline);
}
.custom-dd-body .arrow.arrow--secondary-subtle {
border-width: var(--arrow-border-width);
--arrow-bg: var(--tk-control-secondary-subtle-fill);
--arrow-col: var(--tk-control-secondary-subtle-content);
--arrow-bd: var(--tk-control-secondary-subtle-outline, transparent);
--arrow-h-bg: var(--tk-control-secondary-state-hover-alt-fill);
--arrow-h-col: var(--tk-control-secondary-state-hover-alt-content);
--arrow-h-bd: transparent;
--arrow-a-bg: var(--tk-control-secondary-state-active-alt-fill);
--arrow-a-col: var(--tk-control-secondary-state-active-alt-content);
--arrow-a-bd: transparent;
}
.custom-dd-body .arrow.arrow--secondary-subtle.btn-on {
--arrow-bd: var(--tk-control-neutral-outlined-outline);
}
.custom-dd-body .arrow.arrow--secondary-subtle:disabled, .custom-dd-body .arrow.arrow--secondary-subtle.is-disabled {
--arrow-bg: transparent;
--arrow-col: var(--tk-control-disabled-subtle-content);
--arrow-bd: var(--tk-control-disabled-subtle-outline);
}
.custom-dd-body .arrow.arrow--secondary-ghost {
border-width: var(--arrow-border-width);
--arrow-bg: transparent;
--arrow-col: var(--tk-control-secondary-ghost-content);
--arrow-bd: transparent;
--arrow-h-bg: var(--tk-control-secondary-state-hover-alt-fill);
--arrow-h-col: var(--tk-control-secondary-state-hover-alt-content);
--arrow-h-bd: transparent;
--arrow-a-bg: var(--tk-control-secondary-state-active-alt-fill);
--arrow-a-col: var(--tk-control-secondary-state-active-alt-content);
--arrow-a-bd: transparent;
}
.custom-dd-body .arrow.arrow--secondary-ghost:disabled, .custom-dd-body .arrow.arrow--secondary-ghost.is-disabled {
--arrow-bg: transparent;
--arrow-col: var(--tk-control-disabled-ghost-content);
--arrow-bd: transparent;
}
.custom-dd-body .arrow.arrow--secondary-clear {
border-width: var(--arrow-border-width);
--arrow-bg: var(--tk-control-secondary-clear-fill);
--arrow-col: var(--tk-control-secondary-clear-content);
--arrow-bd: transparent;
--arrow-h-bg: var(--tk-control-secondary-state-hover-alt-fill);
--arrow-h-col: var(--tk-control-secondary-state-hover-alt-content);
--arrow-h-bd: transparent;
--arrow-a-bg: var(--tk-control-secondary-state-active-alt-fill);
--arrow-a-col: var(--tk-control-secondary-state-active-alt-content);
--arrow-a-bd: transparent;
}
.custom-dd-body .arrow.arrow--secondary-clear:disabled, .custom-dd-body .arrow.arrow--secondary-clear.is-disabled {
--arrow-bg: var(--tk-control-disabled-filled-fill);
--arrow-col: var(--tk-control-disabled-clear-content);
--arrow-bd: transparent;
}
.custom-dd-body .arrow.arrow--tertiary {
border-width: var(--arrow-border-width);
--arrow-bg: var(--tk-control-tertiary-filled-fill);
--arrow-col: var(--tk-control-tertiary-filled-content);
--arrow-bd: transparent;
--arrow-h-bg: var(--tk-control-tertiary-state-hover-main-fill);
--arrow-h-col: var(--tk-control-tertiary-state-hover-main-content);
--arrow-h-bd: transparent;
--arrow-a-bg: var(--tk-control-tertiary-state-active-main-fill);
--arrow-a-col: var(--tk-control-tertiary-state-active-main-content);
--arrow-a-bd: transparent;
}
.custom-dd-body .arrow.arrow--tertiary:disabled, .custom-dd-body .arrow.arrow--tertiary.is-disabled {
--arrow-bg: var(--tk-control-disabled-filled-fill);
--arrow-col: var(--tk-control-disabled-filled-content);
--arrow-bd: transparent;
}
.custom-dd-body .arrow.arrow--tertiary-filled {
border-width: var(--arrow-border-width);
--arrow-bg: var(--tk-control-tertiary-filled-fill);
--arrow-col: var(--tk-control-tertiary-filled-content);
--arrow-bd: transparent;
--arrow-h-bg: var(--tk-control-tertiary-state-hover-main-fill);
--arrow-h-col: var(--tk-control-tertiary-state-hover-main-content);
--arrow-h-bd: transparent;
--arrow-a-bg: var(--tk-control-tertiary-state-active-main-fill);
--arrow-a-col: var(--tk-control-tertiary-state-active-main-content);
--arrow-a-bd: transparent;
}
.custom-dd-body .arrow.arrow--tertiary-filled:disabled, .custom-dd-body .arrow.arrow--tertiary-filled.is-disabled {
--arrow-bg: var(--tk-control-disabled-filled-fill);
--arrow-col: var(--tk-control-disabled-filled-content);
--arrow-bd: transparent;
}
.custom-dd-body .arrow.arrow--tertiary-outlined {
border-width: var(--arrow-border-width);
--arrow-bg: transparent;
--arrow-col: var(--tk-control-tertiary-outlined-content);
--arrow-bd: var(--tk-control-tertiary-outlined-outline);
--arrow-h-bg: var(--tk-control-tertiary-state-hover-alt-fill);
--arrow-h-col: var(--tk-control-tertiary-state-hover-alt-content);
--arrow-h-bd: transparent;
--arrow-a-bg: var(--tk-control-tertiary-state-active-alt-fill);
--arrow-a-col: var(--tk-control-tertiary-state-active-alt-content);
--arrow-a-bd: transparent;
}
.custom-dd-body .arrow.arrow--tertiary-outlined:disabled, .custom-dd-body .arrow.arrow--tertiary-outlined.is-disabled {
--arrow-bg: transparent;
--arrow-col: var(--tk-control-disabled-outlined-content);
--arrow-bd: var(--tk-control-disabled-outlined-outline);
}
.custom-dd-body .arrow.arrow--tertiary-subtle {
border-width: var(--arrow-border-width);
--arrow-bg: var(--tk-control-tertiary-subtle-fill);
--arrow-col: var(--tk-control-tertiary-subtle-content);
--arrow-bd: var(--tk-control-tertiary-subtle-outline, transparent);
--arrow-h-bg: var(--tk-control-tertiary-state-hover-alt-fill);
--arrow-h-col: var(--tk-control-tertiary-state-hover-alt-content);
--arrow-h-bd: transparent;
--arrow-a-bg: var(--tk-control-tertiary-state-active-alt-fill);
--arrow-a-col: var(--tk-control-tertiary-state-active-alt-content);
--arrow-a-bd: transparent;
}
.custom-dd-body .arrow.arrow--tertiary-subtle.btn-on {
--arrow-bd: var(--tk-control-neutral-outlined-outline);
}
.custom-dd-body .arrow.arrow--tertiary-subtle:disabled, .custom-dd-body .arrow.arrow--tertiary-subtle.is-disabled {
--arrow-bg: transparent;
--arrow-col: var(--tk-control-disabled-subtle-content);
--arrow-bd: var(--tk-control-disabled-subtle-outline);
}
.custom-dd-body .arrow.arrow--tertiary-ghost {
border-width: var(--arrow-border-width);
--arrow-bg: transparent;
--arrow-col: var(--tk-control-tertiary-ghost-content);
--arrow-bd: transparent;
--arrow-h-bg: var(--tk-control-tertiary-state-hover-alt-fill);
--arrow-h-col: var(--tk-control-tertiary-state-hover-alt-content);
--arrow-h-bd: transparent;
--arrow-a-bg: var(--tk-control-tertiary-state-active-alt-fill);
--arrow-a-col: var(--tk-control-tertiary-state-active-alt-content);
--arrow-a-bd: transparent;
}
.custom-dd-body .arrow.arrow--tertiary-ghost:disabled, .custom-dd-body .arrow.arrow--tertiary-ghost.is-disabled {
--arrow-bg: transparent;
--arrow-col: var(--tk-control-disabled-ghost-content);
--arrow-bd: transparent;
}
.custom-dd-body .arrow.arrow--tertiary-clear {
border-width: var(--arrow-border-width);
--arrow-bg: var(--tk-control-tertiary-clear-fill);
--arrow-col: var(--tk-control-tertiary-clear-content);
--arrow-bd: transparent;
--arrow-h-bg: var(--tk-control-tertiary-state-hover-alt-fill);
--arrow-h-col: var(--tk-control-tertiary-state-hover-alt-content);
--arrow-h-bd: transparent;
--arrow-a-bg: var(--tk-control-tertiary-state-active-alt-fill);
--arrow-a-col: var(--tk-control-tertiary-state-active-alt-content);
--arrow-a-bd: transparent;
}
.custom-dd-body .arrow.arrow--tertiary-clear:disabled, .custom-dd-body .arrow.arrow--tertiary-clear.is-disabled {
--arrow-bg: var(--tk-control-disabled-filled-fill);
--arrow-col: var(--tk-control-disabled-clear-content);
--arrow-bd: transparent;
}
.custom-dd-body .arrow.arrow--danger {
border-width: var(--arrow-border-width);
--arrow-bg: var(--tk-control-danger-filled-fill);
--arrow-col: var(--tk-control-danger-filled-content);
--arrow-bd: transparent;
--arrow-h-bg: var(--tk-control-danger-state-hover-main-fill);
--arrow-h-col: var(--tk-control-danger-state-hover-main-content);
--arrow-h-bd: transparent;
--arrow-a-bg: var(--tk-control-danger-state-active-main-fill);
--arrow-a-col: var(--tk-control-danger-state-active-main-content);
--arrow-a-bd: transparent;
}
.custom-dd-body .arrow.arrow--danger:disabled, .custom-dd-body .arrow.arrow--danger.is-disabled {
--arrow-bg: var(--tk-control-disabled-filled-fill);
--arrow-col: var(--tk-control-disabled-filled-content);
--arrow-bd: transparent;
}
.custom-dd-body .arrow.arrow--danger-filled {
border-width: var(--arrow-border-width);
--arrow-bg: var(--tk-control-danger-filled-fill);
--arrow-col: var(--tk-control-danger-filled-content);
--arrow-bd: transparent;
--arrow-h-bg: var(--tk-control-danger-state-hover-main-fill);
--arrow-h-col: var(--tk-control-danger-state-hover-main-content);
--arrow-h-bd: transparent;
--arrow-a-bg: var(--tk-control-danger-state-active-main-fill);
--arrow-a-col: var(--tk-control-danger-state-active-main-content);
--arrow-a-bd: transparent;
}
.custom-dd-body .arrow.arrow--danger-filled:disabled, .custom-dd-body .arrow.arrow--danger-filled.is-disabled {
--arrow-bg: var(--tk-control-disabled-filled-fill);
--arrow-col: var(--tk-control-disabled-filled-content);
--arrow-bd: transparent;
}
.custom-dd-body .arrow.arrow--danger-outlined {
border-width: var(--arrow-border-width);
--arrow-bg: transparent;
--arrow-col: var(--tk-control-danger-outlined-content);
--arrow-bd: var(--tk-control-danger-outlined-outline);
--arrow-h-bg: var(--tk-control-danger-state-hover-alt-fill);
--arrow-h-col: var(--tk-control-danger-state-hover-alt-content);
--arrow-h-bd: transparent;
--arrow-a-bg: var(--tk-control-danger-state-active-alt-fill);
--arrow-a-col: var(--tk-control-danger-state-active-alt-content);
--arrow-a-bd: transparent;
}
.custom-dd-body .arrow.arrow--danger-outlined:disabled, .custom-dd-body .arrow.arrow--danger-outlined.is-disabled {
--arrow-bg: transparent;
--arrow-col: var(--tk-control-disabled-outlined-content);
--arrow-bd: var(--tk-control-disabled-outlined-outline);
}
.custom-dd-body .arrow.arrow--danger-subtle {
border-width: var(--arrow-border-width);
--arrow-bg: var(--tk-control-danger-subtle-fill);
--arrow-col: var(--tk-control-danger-subtle-content);
--arrow-bd: var(--tk-control-danger-subtle-outline, transparent);
--arrow-h-bg: var(--tk-control-danger-state-hover-alt-fill);
--arrow-h-col: var(--tk-control-danger-state-hover-alt-content);
--arrow-h-bd: transparent;
--arrow-a-bg: var(--tk-control-danger-state-active-alt-fill);
--arrow-a-col: var(--tk-control-danger-state-active-alt-content);
--arrow-a-bd: transparent;
}
.custom-dd-body .arrow.arrow--danger-subtle.btn-on {
--arrow-bd: var(--tk-control-neutral-outlined-outline);
}
.custom-dd-body .arrow.arrow--danger-subtle:disabled, .custom-dd-body .arrow.arrow--danger-subtle.is-disabled {
--arrow-bg: transparent;
--arrow-col: var(--tk-control-disabled-subtle-content);
--arrow-bd: var(--tk-control-disabled-subtle-outline);
}
.custom-dd-body .arrow.arrow--danger-ghost {
border-width: var(--arrow-border-width);
--arrow-bg: transparent;
--arrow-col: var(--tk-control-danger-ghost-content);
--arrow-bd: transparent;
--arrow-h-bg: var(--tk-control-danger-state-hover-alt-fill);
--arrow-h-col: var(--tk-control-danger-state-hover-alt-content);
--arrow-h-bd: transparent;
--arrow-a-bg: var(--tk-control-danger-state-active-alt-fill);
--arrow-a-col: var(--tk-control-danger-state-active-alt-content);
--arrow-a-bd: transparent;
}
.custom-dd-body .arrow.arrow--danger-ghost:disabled, .custom-dd-body .arrow.arrow--danger-ghost.is-disabled {
--arrow-bg: transparent;
--arrow-col: var(--tk-control-disabled-ghost-content);
--arrow-bd: transparent;
}
.custom-dd-body .arrow.arrow--danger-clear {
border-width: var(--arrow-border-width);
--arrow-bg: var(--tk-control-danger-clear-fill);
--arrow-col: var(--tk-control-danger-clear-content);
--arrow-bd: transparent;
--arrow-h-bg: var(--tk-control-danger-state-hover-alt-fill);
--arrow-h-col: var(--tk-control-danger-state-hover-alt-content);
--arrow-h-bd: transparent;
--arrow-a-bg: var(--tk-control-danger-state-active-alt-fill);
--arrow-a-col: var(--tk-control-danger-state-active-alt-content);
--arrow-a-bd: transparent;
}
.custom-dd-body .arrow.arrow--danger-clear:disabled, .custom-dd-body .arrow.arrow--danger-clear.is-disabled {
--arrow-bg: var(--tk-control-disabled-filled-fill);
--arrow-col: var(--tk-control-disabled-clear-content);
--arrow-bd: transparent;
}
.custom-dd-body .arrow.arrow--warning {
border-width: var(--arrow-border-width);
--arrow-bg: var(--tk-control-warning-filled-fill);
--arrow-col: var(--tk-control-warning-filled-content);
--arrow-bd: transparent;
--arrow-h-bg: var(--tk-control-warning-state-hover-main-fill);
--arrow-h-col: var(--tk-control-warning-state-hover-main-content);
--arrow-h-bd: transparent;
--arrow-a-bg: var(--tk-control-warning-state-active-main-fill);
--arrow-a-col: var(--tk-control-warning-state-active-main-content);
--arrow-a-bd: transparent;
}
.custom-dd-body .arrow.arrow--warning:disabled, .custom-dd-body .arrow.arrow--warning.is-disabled {
--arrow-bg: var(--tk-control-disabled-filled-fill);
--arrow-col: var(--tk-control-disabled-filled-content);
--arrow-bd: transparent;
}
.custom-dd-body .arrow.arrow--warning-filled {
border-width: var(--arrow-border-width);
--arrow-bg: var(--tk-control-warning-filled-fill);
--arrow-col: var(--tk-control-warning-filled-content);
--arrow-bd: transparent;
--arrow-h-bg: var(--tk-control-warning-state-hover-main-fill);
--arrow-h-col: var(--tk-control-warning-state-hover-main-content);
--arrow-h-bd: transparent;
--arrow-a-bg: var(--tk-control-warning-state-active-main-fill);
--arrow-a-col: var(--tk-control-warning-state-active-main-content);
--arrow-a-bd: transparent;
}
.custom-dd-body .arrow.arrow--warning-filled:disabled, .custom-dd-body .arrow.arrow--warning-filled.is-disabled {
--arrow-bg: var(--tk-control-disabled-filled-fill);
--arrow-col: var(--tk-control-disabled-filled-content);
--arrow-bd: transparent;
}
.custom-dd-body .arrow.arrow--warning-outlined {
border-width: var(--arrow-border-width);
--arrow-bg: transparent;
--arrow-col: var(--tk-control-warning-outlined-content);
--arrow-bd: var(--tk-control-warning-outlined-outline);
--arrow-h-bg: var(--tk-control-warning-state-hover-alt-fill);
--arrow-h-col: var(--tk-control-warning-state-hover-alt-content);
--arrow-h-bd: transparent;
--arrow-a-bg: var(--tk-control-warning-state-active-alt-fill);
--arrow-a-col: var(--tk-control-warning-state-active-alt-content);
--arrow-a-bd: transparent;
}
.custom-dd-body .arrow.arrow--warning-outlined:disabled, .custom-dd-body .arrow.arrow--warning-outlined.is-disabled {
--arrow-bg: transparent;
--arrow-col: var(--tk-control-disabled-outlined-content);
--arrow-bd: var(--tk-control-disabled-outlined-outline);
}
.custom-dd-body .arrow.arrow--warning-subtle {
border-width: var(--arrow-border-width);
--arrow-bg: var(--tk-control-warning-subtle-fill);
--arrow-col: var(--tk-control-warning-subtle-content);
--arrow-bd: var(--tk-control-warning-subtle-outline, transparent);
--arrow-h-bg: var(--tk-control-warning-state-hover-alt-fill);
--arrow-h-col: var(--tk-control-warning-state-hover-alt-content);
--arrow-h-bd: transparent;
--arrow-a-bg: var(--tk-control-warning-state-active-alt-fill);
--arrow-a-col: var(--tk-control-warning-state-active-alt-content);
--arrow-a-bd: transparent;
}
.custom-dd-body .arrow.arrow--warning-subtle.btn-on {
--arrow-bd: var(--tk-control-neutral-outlined-outline);
}
.custom-dd-body .arrow.arrow--warning-subtle:disabled, .custom-dd-body .arrow.arrow--warning-subtle.is-disabled {
--arrow-bg: transparent;
--arrow-col: var(--tk-control-disabled-subtle-content);
--arrow-bd: var(--tk-control-disabled-subtle-outline);
}
.custom-dd-body .arrow.arrow--warning-ghost {
border-width: var(--arrow-border-width);
--arrow-bg: transparent;
--arrow-col: var(--tk-control-warning-ghost-content);
--arrow-bd: transparent;
--arrow-h-bg: var(--tk-control-warning-state-hover-alt-fill);
--arrow-h-col: var(--tk-control-warning-state-hover-alt-content);
--arrow-h-bd: transparent;
--arrow-a-bg: var(--tk-control-warning-state-active-alt-fill);
--arrow-a-col: var(--tk-control-warning-state-active-alt-content);
--arrow-a-bd: transparent;
}
.custom-dd-body .arrow.arrow--warning-ghost:disabled, .custom-dd-body .arrow.arrow--warning-ghost.is-disabled {
--arrow-bg: transparent;
--arrow-col: var(--tk-control-disabled-ghost-content);
--arrow-bd: transparent;
}
.custom-dd-body .arrow.arrow--warning-clear {
border-width: var(--arrow-border-width);
--arrow-bg: var(--tk-control-warning-clear-fill);
--arrow-col: var(--tk-control-warning-clear-content);
--arrow-bd: transparent;
--arrow-h-bg: var(--tk-control-warning-state-hover-alt-fill);
--arrow-h-col: var(--tk-control-warning-state-hover-alt-content);
--arrow-h-bd: transparent;
--arrow-a-bg: var(--tk-control-warning-state-active-alt-fill);
--arrow-a-col: var(--tk-control-warning-state-active-alt-content);
--arrow-a-bd: transparent;
}
.custom-dd-body .arrow.arrow--warning-clear:disabled, .custom-dd-body .arrow.arrow--warning-clear.is-disabled {
--arrow-bg: var(--tk-control-disabled-filled-fill);
--arrow-col: var(--tk-control-disabled-clear-content);
--arrow-bd: transparent;
}
.custom-dd-body .arrow.arrow--success {
border-width: var(--arrow-border-width);
--arrow-bg: var(--tk-control-success-filled-fill);
--arrow-col: var(--tk-control-success-filled-content);
--arrow-bd: transparent;
--arrow-h-bg: var(--tk-control-success-state-hover-main-fill);
--arrow-h-col: var(--tk-control-success-state-hover-main-content);
--arrow-h-bd: transparent;
--arrow-a-bg: var(--tk-control-success-state-active-main-fill);
--arrow-a-col: var(--tk-control-success-state-active-main-content);
--arrow-a-bd: transparent;
}
.custom-dd-body .arrow.arrow--success:disabled, .custom-dd-body .arrow.arrow--success.is-disabled {
--arrow-bg: var(--tk-control-disabled-filled-fill);
--arrow-col: var(--tk-control-disabled-filled-content);
--arrow-bd: transparent;
}
.custom-dd-body .arrow.arrow--success-filled {
border-width: var(--arrow-border-width);
--arrow-bg: var(--tk-control-success-filled-fill);
--arrow-col: var(--tk-control-success-filled-content);
--arrow-bd: transparent;
--arrow-h-bg: var(--tk-control-success-state-hover-main-fill);
--arrow-h-col: var(--tk-control-success-state-hover-main-content);
--arrow-h-bd: transparent;
--arrow-a-bg: var(--tk-control-success-state-active-main-fill);
--arrow-a-col: var(--tk-control-success-state-active-main-content);
--arrow-a-bd: transparent;
}
.custom-dd-body .arrow.arrow--success-filled:disabled, .custom-dd-body .arrow.arrow--success-filled.is-disabled {
--arrow-bg: var(--tk-control-disabled-filled-fill);
--arrow-col: var(--tk-control-disabled-filled-content);
--arrow-bd: transparent;
}
.custom-dd-body .arrow.arrow--success-outlined {
border-width: var(--arrow-border-width);
--arrow-bg: transparent;
--arrow-col: var(--tk-control-success-outlined-content);
--arrow-bd: var(--tk-control-success-outlined-outline);
--arrow-h-bg: var(--tk-control-success-state-hover-alt-fill);
--arrow-h-col: var(--tk-control-success-state-hover-alt-content);
--arrow-h-bd: transparent;
--arrow-a-bg: var(--tk-control-success-state-active-alt-fill);
--arrow-a-col: var(--tk-control-success-state-active-alt-content);
--arrow-a-bd: transparent;
}
.custom-dd-body .arrow.arrow--success-outlined:disabled, .custom-dd-body .arrow.arrow--success-outlined.is-disabled {
--arrow-bg: transparent;
--arrow-col: var(--tk-control-disabled-outlined-content);
--arrow-bd: var(--tk-control-disabled-outlined-outline);
}
.custom-dd-body .arrow.arrow--success-subtle {
border-width: var(--arrow-border-width);
--arrow-bg: var(--tk-control-success-subtle-fill);
--arrow-col: var(--tk-control-success-subtle-content);
--arrow-bd: var(--tk-control-success-subtle-outline, transparent);
--arrow-h-bg: var(--tk-control-success-state-hover-alt-fill);
--arrow-h-col: var(--tk-control-success-state-hover-alt-content);
--arrow-h-bd: transparent;
--arrow-a-bg: var(--tk-control-success-state-active-alt-fill);
--arrow-a-col: var(--tk-control-success-state-active-alt-content);
--arrow-a-bd: transparent;
}
.custom-dd-body .arrow.arrow--success-subtle.btn-on {
--arrow-bd: var(--tk-control-neutral-outlined-outline);
}
.custom-dd-body .arrow.arrow--success-subtle:disabled, .custom-dd-body .arrow.arrow--success-subtle.is-disabled {
--arrow-bg: transparent;
--arrow-col: var(--tk-control-disabled-subtle-content);
--arrow-bd: var(--tk-control-disabled-subtle-outline);
}
.custom-dd-body .arrow.arrow--success-ghost {
border-width: var(--arrow-border-width);
--arrow-bg: transparent;
--arrow-col: var(--tk-control-success-ghost-content);
--arrow-bd: transparent;
--arrow-h-bg: var(--tk-control-success-state-hover-alt-fill);
--arrow-h-col: var(--tk-control-success-state-hover-alt-content);
--arrow-h-bd: transparent;
--arrow-a-bg: var(--tk-control-success-state-active-alt-fill);
--arrow-a-col: var(--tk-control-success-state-active-alt-content);
--arrow-a-bd: transparent;
}
.custom-dd-body .arrow.arrow--success-ghost:disabled, .custom-dd-body .arrow.arrow--success-ghost.is-disabled {
--arrow-bg: transparent;
--arrow-col: var(--tk-control-disabled-ghost-content);
--arrow-bd: transparent;
}
.custom-dd-body .arrow.arrow--success-clear {
border-width: var(--arrow-border-width);
--arrow-bg: var(--tk-control-success-clear-fill);
--arrow-col: var(--tk-control-success-clear-content);
--arrow-bd: transparent;
--arrow-h-bg: var(--tk-control-success-state-hover-alt-fill);
--arrow-h-col: var(--tk-control-success-state-hover-alt-content);
--arrow-h-bd: transparent;
--arrow-a-bg: var(--tk-control-success-state-active-alt-fill);
--arrow-a-col: var(--tk-control-success-state-active-alt-content);
--arrow-a-bd: transparent;
}
.custom-dd-body .arrow.arrow--success-clear:disabled, .custom-dd-body .arrow.arrow--success-clear.is-disabled {
--arrow-bg: var(--tk-control-disabled-filled-fill);
--arrow-col: var(--tk-control-disabled-clear-content);
--arrow-bd: transparent;
}
.custom-dd-body .arrow.arrow--info {
border-width: var(--arrow-border-width);
--arrow-bg: var(--tk-control-info-filled-fill);
--arrow-col: var(--tk-control-info-filled-content);
--arrow-bd: transparent;
--arrow-h-bg: var(--tk-control-info-state-hover-main-fill);
--arrow-h-col: var(--tk-control-info-state-hover-main-content);
--arrow-h-bd: transparent;
--arrow-a-bg: var(--tk-control-info-state-active-main-fill);
--arrow-a-col: var(--tk-control-info-state-active-main-content);
--arrow-a-bd: transparent;
}
.custom-dd-body .arrow.arrow--info:disabled, .custom-dd-body .arrow.arrow--info.is-disabled {
--arrow-bg: var(--tk-control-disabled-filled-fill);
--arrow-col: var(--tk-control-disabled-filled-content);
--arrow-bd: transparent;
}
.custom-dd-body .arrow.arrow--info-filled {
border-width: var(--arrow-border-width);
--arrow-bg: var(--tk-control-info-filled-fill);
--arrow-col: var(--tk-control-info-filled-content);
--arrow-bd: transparent;
--arrow-h-bg: var(--tk-control-info-state-hover-main-fill);
--arrow-h-col: var(--tk-control-info-state-hover-main-content);
--arrow-h-bd: transparent;
--arrow-a-bg: var(--tk-control-info-state-active-main-fill);
--arrow-a-col: var(--tk-control-info-state-active-main-content);
--arrow-a-bd: transparent;
}
.custom-dd-body .arrow.arrow--info-filled:disabled, .custom-dd-body .arrow.arrow--info-filled.is-disabled {
--arrow-bg: var(--tk-control-disabled-filled-fill);
--arrow-col: var(--tk-control-disabled-filled-content);
--arrow-bd: transparent;
}
.custom-dd-body .arrow.arrow--info-outlined {
border-width: var(--arrow-border-width);
--arrow-bg: transparent;
--arrow-col: var(--tk-control-info-outlined-content);
--arrow-bd: var(--tk-control-info-outlined-outline);
--arrow-h-bg: var(--tk-control-info-state-hover-alt-fill);
--arrow-h-col: var(--tk-control-info-state-hover-alt-content);
--arrow-h-bd: transparent;
--arrow-a-bg: var(--tk-control-info-state-active-alt-fill);
--arrow-a-col: var(--tk-control-info-state-active-alt-content);
--arrow-a-bd: transparent;
}
.custom-dd-body .arrow.arrow--info-outlined:disabled, .custom-dd-body .arrow.arrow--info-outlined.is-disabled {
--arrow-bg: transparent;
--arrow-col: var(--tk-control-disabled-outlined-content);
--arrow-bd: var(--tk-control-disabled-outlined-outline);
}
.custom-dd-body .arrow.arrow--info-subtle {
border-width: var(--arrow-border-width);
--arrow-bg: var(--tk-control-info-subtle-fill);
--arrow-col: var(--tk-control-info-subtle-content);
--arrow-bd: var(--tk-control-info-subtle-outline, transparent);
--arrow-h-bg: var(--tk-control-info-state-hover-alt-fill);
--arrow-h-col: var(--tk-control-info-state-hover-alt-content);
--arrow-h-bd: transparent;
--arrow-a-bg: var(--tk-control-info-state-active-alt-fill);
--arrow-a-col: var(--tk-control-info-state-active-alt-content);
--arrow-a-bd: transparent;
}
.custom-dd-body .arrow.arrow--info-subtle.btn-on {
--arrow-bd: var(--tk-control-neutral-outlined-outline);
}
.custom-dd-body .arrow.arrow--info-subtle:disabled, .custom-dd-body .arrow.arrow--info-subtle.is-disabled {
--arrow-bg: transparent;
--arrow-col: var(--tk-control-disabled-subtle-content);
--arrow-bd: var(--tk-control-disabled-subtle-outline);
}
.custom-dd-body .arrow.arrow--info-ghost {
border-width: var(--arrow-border-width);
--arrow-bg: transparent;
--arrow-col: var(--tk-control-info-ghost-content);
--arrow-bd: transparent;
--arrow-h-bg: var(--tk-control-info-state-hover-alt-fill);
--arrow-h-col: var(--tk-control-info-state-hover-alt-content);
--arrow-h-bd: transparent;
--arrow-a-bg: var(--tk-control-info-state-active-alt-fill);
--arrow-a-col: var(--tk-control-info-state-active-alt-content);
--arrow-a-bd: transparent;
}
.custom-dd-body .arrow.arrow--info-ghost:disabled, .custom-dd-body .arrow.arrow--info-ghost.is-disabled {
--arrow-bg: transparent;
--arrow-col: var(--tk-control-disabled-ghost-content);
--arrow-bd: transparent;
}
.custom-dd-body .arrow.arrow--info-clear {
border-width: var(--arrow-border-width);
--arrow-bg: var(--tk-control-info-clear-fill);
--arrow-col: var(--tk-control-info-clear-content);
--arrow-bd: transparent;
--arrow-h-bg: var(--tk-control-info-state-hover-alt-fill);
--arrow-h-col: var(--tk-control-info-state-hover-alt-content);
--arrow-h-bd: transparent;
--arrow-a-bg: var(--tk-control-info-state-active-alt-fill);
--arrow-a-col: var(--tk-control-info-state-active-alt-content);
--arrow-a-bd: transparent;
}
.custom-dd-body .arrow.arrow--info-clear:disabled, .custom-dd-body .arrow.arrow--info-clear.is-disabled {
--arrow-bg: var(--tk-control-disabled-filled-fill);
--arrow-col: var(--tk-control-disabled-clear-content);
--arrow-bd: transparent;
}
.custom-dd-body .badge {
display: inline-flex;
justify-content: center;
align-items: center;
position: relative;
font-family: var(--font-main, sans-serif);
font-weight: 700;
text-decoration: none;
white-space: nowrap;
line-height: 1;
border-radius: var(--nb-common-radius-control-pill, 1000px);
border: 0 solid transparent;
cursor: default;
transition: all var(--def-trans-time, 0.2s) ease-in-out;
-webkit-appearance: none;
box-sizing: border-box;
}
.custom-dd-body .badge.badge--size-l {
height: var(--nb-common-control-size-2xs, 2.8rem);
min-width: var(--nb-common-control-size-2xs, 2.8rem);
padding: 0 var(--nb-atom-badge-2xs-sides, 0.8rem);
font-size: var(--tg-styles-badge-2xs-size, 1.6rem);
}
.custom-dd-body .badge.badge--size-m {
height: var(--nb-common-control-size-3xs, 2.4rem);
min-width: var(--nb-common-control-size-3xs, 2.4rem);
padding: 0 var(--nb-atom-badge-3xs-sides, 0.7rem);
font-size: var(--tg-styles-badge-3xs-size, 1.4rem);
}
.custom-dd-body .badge.badge--size-s {
height: var(--nb-common-control-size-4xs, 2rem);
min-width: var(--nb-common-control-size-4xs, 2rem);
padding: 0 var(--nb-atom-badge-4xs-padding-h, 0.4rem);
font-size: var(--tg-styles-badge-4xs-size, 1.2rem);
}
.custom-dd-body .badge.badge--surface {
color: var(--tk-ink-contrast-primary);
background-color: var(--tk-control-neutral-filled-fill);
border-color: transparent;
}
.custom-dd-body .badge.badge--primary {
color: var(--tk-ink-contrast-primary);
background-color: var(--tk-control-primary-filled-fill);
border-color: transparent;
}
.custom-dd-body .badge.badge--secondary {
color: var(--tk-ink-main-primary);
background-color: var(--tk-control-secondary-filled-fill);
border-color: transparent;
}
.custom-dd-body .badge.badge--tertiary {
color: var(--tk-ink-contrast-primary);
background-color: var(--tk-control-tertiary-filled-fill);
border-color: transparent;
}
.custom-dd-body .badge.badge--danger {
color: var(--tk-ink-contrast-primary);
background-color: var(--tk-control-danger-filled-fill);
border-color: transparent;
}
.custom-dd-body .badge.badge--warning {
color: var(--tk-ink-main-primary);
background-color: var(--tk-control-warning-filled-fill);
border-color: transparent;
}
.custom-dd-body .badge.badge--success {
color: var(--tk-ink-main-primary);
background-color: var(--tk-control-success-filled-fill);
border-color: transparent;
}
.custom-dd-body .badge.badge--info {
color: var(--tk-ink-main-primary);
background-color: var(--tk-control-info-filled-fill);
border-color: transparent;
}
.custom-dd-body .badge.badge--disabled {
color: var(--tk-control-disabled-filled-content);
background-color: var(--tk-control-disabled-filled-fill);
border-color: transparent;
}
.custom-dd-body .badge.badge--subtle-surface {
color: var(--tk-control-neutral-subtle-content);
background-color: var(--tk-control-neutral-subtle-fill);
border-width: var(--nb-common-stroke-m, 1px);
border-style: solid;
border-color: var(--tk-control-neutral-subtle-outline);
}
.custom-dd-body .badge.badge--subtle-primary {
color: var(--tk-control-primary-subtle-content);
background-color: var(--tk-control-primary-subtle-fill);
border-width: var(--nb-common-stroke-m, 1px);
border-style: solid;
border-color: var(--tk-control-primary-subtle-outline);
}
.custom-dd-body .badge.badge--subtle-secondary {
color: var(--tk-control-secondary-subtle-content);
background-color: var(--tk-control-secondary-subtle-fill);
border-width: var(--nb-common-stroke-m, 1px);
border-style: solid;
border-color: var(--tk-control-secondary-subtle-outline);
}
.custom-dd-body .badge.badge--subtle-tertiary {
color: var(--tk-control-tertiary-subtle-content);
background-color: var(--tk-control-tertiary-subtle-fill);
border-width: var(--nb-common-stroke-m, 1px);
border-style: solid;
border-color: var(--tk-control-tertiary-subtle-outline);
}
.custom-dd-body .badge.badge--subtle-danger {
color: var(--tk-control-danger-subtle-content);
background-color: var(--tk-control-danger-subtle-fill);
border-width: var(--nb-common-stroke-m, 1px);
border-style: solid;
border-color: var(--tk-control-danger-subtle-outline);
}
.custom-dd-body .badge.badge--subtle-warning {
color: var(--tk-control-warning-subtle-content);
background-color: var(--tk-control-warning-subtle-fill);
border-width: var(--nb-common-stroke-m, 1px);
border-style: solid;
border-color: var(--tk-control-warning-subtle-outline);
}
.custom-dd-body .badge.badge--subtle-success {
color: var(--tk-control-success-subtle-content);
background-color: var(--tk-control-success-subtle-fill);
border-width: var(--nb-common-stroke-m, 1px);
border-style: solid;
border-color: var(--tk-control-success-subtle-outline);
}
.custom-dd-body .badge.badge--subtle-info {
color: var(--tk-control-info-subtle-content);
background-color: var(--tk-control-info-subtle-fill);
border-width: var(--nb-common-stroke-m, 1px);
border-style: solid;
border-color: var(--tk-control-info-subtle-outline);
}
.custom-dd-body .badge.badge--subtle-disabled {
color: var(--tk-control-disabled-filled-content);
background-color: var(--tk-control-disabled-filled-fill);
border-width: var(--nb-common-stroke-m, 1px);
border-style: solid;
border-color: var(--tk-control-disabled-subtle-outline);
}
@keyframes popover-fade-in {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes modal-fade-in {
from {
opacity: 0;
transform: scale(0.95);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes modal-slide-in-right {
from {
transform: translateX(100%);
}
to {
transform: translateX(0);
}
}
.custom-dd-body .modal-base {
max-width: 100vw;
max-height: 100vh;
background-color: unset;
border: unset;
box-shadow: unset;
-webkit-box-shadow: unset;
padding: 0;
overflow: visible;
}
.custom-dd-body .modal-base::backdrop {
background: var(--tk-surface-overlay-1);
transition: opacity 0.3s ease;
}
.custom-dd-body .modal-base .center-peek-btn,
.custom-dd-body .modal-base .side-peek-btn,
.custom-dd-body .modal-base .minimize-btn,
.custom-dd-body .modal-base .expand-btn {
display: none !important;
}
.custom-dd-body .modal-base .toggle-side-peek-btn {
width: var(--nb-common-control-size-l, 5.2rem);
min-width: var(--nb-common-control-size-l, 5.2rem);
min-height: var(--nb-common-control-size-l, 5.2rem);
justify-content: center;
align-items: center;
border-radius: var(--nb-common-radius-control-soft, 0.8rem) 0 0 var(--nb-common-radius-control-soft, 0.8rem);
border-color: transparent;
background: var(--tk-surface-elevated, #FFF);
align-items: center;
gap: 0.8rem;
display: none !important;
padding: 0;
z-index: 1;
position: relative;
margin-bottom: calc(var(--nb-common-control-size-l, 5.2rem) * -1);
}
.custom-dd-body .modal-base .toggle-side-peek-btn img,
.custom-dd-body .modal-base .toggle-side-peek-btn svg {
width: 2.8rem;
height: 2.8rem;
aspect-ratio: 1/1;
color: var(--tk-ink-main-primary, #262223);
}
@media (hover: hover) {
.custom-dd-body .modal-base .toggle-side-peek-btn:hover {
border-radius: var(--nb-common-radius-control-soft, 0.8rem) 0 0 var(--nb-common-radius-control-soft, 0.8rem);
border-color: transparent;
background: var(--tk-surface-elevated, #FFF);
opacity: 1;
padding-right: 0.4rem;
}
}
.custom-dd-body .modal-base .toggle-side-peek-btn:focus {
outline: none !important;
}
.custom-dd-body .modal-base.modal-base--center .modal-content.type-1, .custom-dd-body .modal-base.modal-base--sidebar .modal-content.type-1, .custom-dd-body .modal-base.modal-base--full .modal-content.type-1 {
width: 100%;
max-width: 100%;
padding: 0;
gap: 0;
}
.custom-dd-body .modal-base.modal-base--center .modal-content.type-1 .modal-header, .custom-dd-body .modal-base.modal-base--sidebar .modal-content.type-1 .modal-header, .custom-dd-body .modal-base.modal-base--full .modal-content.type-1 .modal-header {
position: relative;
padding: 1.2rem;
}
.custom-dd-body .modal-base.modal-base--center .modal-content.type-1 .modal-header:after, .custom-dd-body .modal-base.modal-base--sidebar .modal-content.type-1 .modal-header:after, .custom-dd-body .modal-base.modal-base--full .modal-content.type-1 .modal-header:after {
content: "";
display: block;
height: 1px;
background-color: var(--tk-border-solid-2);
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
.custom-dd-body .modal-base.modal-base--center .modal-content.type-1 .modal-body, .custom-dd-body .modal-base.modal-base--sidebar .modal-content.type-1 .modal-body, .custom-dd-body .modal-base.modal-base--full .modal-content.type-1 .modal-body {
flex-grow: 1;
overflow-y: auto;
overflow-x: hidden;
width: 100%;
display: block;
background: var(--tk-surface-elevated, #FFF);
display: flex;
flex-direction: column;
}
.custom-dd-body .modal-base.modal-base--center .modal-content.type-1 .modal-body .main-content__header, .custom-dd-body .modal-base.modal-base--sidebar .modal-content.type-1 .modal-body .main-content__header, .custom-dd-body .modal-base.modal-base--full .modal-content.type-1 .modal-body .main-content__header {
flex-wrap: wrap;
overflow: hidden;
padding: var(--main-content-side-top) var(--main-content-side-left) var(--main-content-side-bottom) var(--main-content-side-left);
}
.custom-dd-body .modal-base.modal-base--center .modal-content.type-1 .modal-body .main-content__header .section-title-container, .custom-dd-body .modal-base.modal-base--sidebar .modal-content.type-1 .modal-body .main-content__header .section-title-container, .custom-dd-body .modal-base.modal-base--full .modal-content.type-1 .modal-body .main-content__header .section-title-container {
flex-wrap: wrap;
}
.custom-dd-body .modal-base.modal-base--center .modal-content.type-1 .modal-body .content-global, .custom-dd-body .modal-base.modal-base--sidebar .modal-content.type-1 .modal-body .content-global, .custom-dd-body .modal-base.modal-base--full .modal-content.type-1 .modal-body .content-global {
height: auto;
max-height: unset;
margin-right: 0;
padding-right: 0;
scrollbar-gutter: unset;
flex-grow: 1;
}
.custom-dd-body .modal-base.modal-base--center .modal-content.type-1 .modal-body .single-body table,
.custom-dd-body .modal-base.modal-base--center .modal-content.type-1 .modal-body .main-content__body table, .custom-dd-body .modal-base.modal-base--sidebar .modal-content.type-1 .modal-body .single-body table,
.custom-dd-body .modal-base.modal-base--sidebar .modal-content.type-1 .modal-body .main-content__body table, .custom-dd-body .modal-base.modal-base--full .modal-content.type-1 .modal-body .single-body table,
.custom-dd-body .modal-base.modal-base--full .modal-content.type-1 .modal-body .main-content__body table {
word-break: break-word;
}
.custom-dd-body .modal-base.modal-base--center .main-content__body, .custom-dd-body .modal-base.modal-base--sidebar .main-content__body, .custom-dd-body .modal-base.modal-base--full .main-content__body {
padding-left: var(--main-content-side-left);
padding-right: var(--main-content-side-left);
}
.custom-dd-body .modal-base.modal-base--sidebar .modal-content.type-1 .modal-body {
display: flex;
flex-direction: column;
}
.custom-dd-body .modal-base.modal-base--sidebar .modal-content.type-1 .modal-body .content-global {
flex-grow: 1;
}
.custom-dd-body .modal-base.modal-base--sidebar .modal-content.type-1 .modal-body .main-content__header .main-content__page-title {
word-break: break-word;
}
.custom-dd-body .modal-base.modal-base--sidebar .modal-content.type-1 .modal-body .single-body .custom-section-card .section-header,
.custom-dd-body .modal-base.modal-base--sidebar .modal-content.type-1 .modal-body .main-content__body .custom-section-card .section-header {
flex-wrap: wrap;
}
.custom-dd-body .modal-base.modal-base--sidebar .modal-content.type-1 .modal-body .single-body .custom-table-wrapper,
.custom-dd-body .modal-base.modal-base--sidebar .modal-content.type-1 .modal-body .single-body .tables-flex-container,
.custom-dd-body .modal-base.modal-base--sidebar .modal-content.type-1 .modal-body .main-content__body .custom-table-wrapper,
.custom-dd-body .modal-base.modal-base--sidebar .modal-content.type-1 .modal-body .main-content__body .tables-flex-container {
width: 100%;
overflow-x: auto;
}
.custom-dd-body .modal-base.modal-base--sidebar .modal-content.type-1 .modal-body .single-body .custom-table-wrapper .empty-state,
.custom-dd-body .modal-base.modal-base--sidebar .modal-content.type-1 .modal-body .single-body .tables-flex-container .empty-state,
.custom-dd-body .modal-base.modal-base--sidebar .modal-content.type-1 .modal-body .main-content__body .custom-table-wrapper .empty-state,
.custom-dd-body .modal-base.modal-base--sidebar .modal-content.type-1 .modal-body .main-content__body .tables-flex-container .empty-state {
flex-wrap: wrap;
}
.custom-dd-body .modal-base.modal-base--sidebar .modal-content.type-1 .modal-body .single-body .custom-table-wrapper .empty-state .header-for-empty,
.custom-dd-body .modal-base.modal-base--sidebar .modal-content.type-1 .modal-body .single-body .tables-flex-container .empty-state .header-for-empty,
.custom-dd-body .modal-base.modal-base--sidebar .modal-content.type-1 .modal-body .main-content__body .custom-table-wrapper .empty-state .header-for-empty,
.custom-dd-body .modal-base.modal-base--sidebar .modal-content.type-1 .modal-body .main-content__body .tables-flex-container .empty-state .header-for-empty {
width: 100%;
flex: unset;
}
.custom-dd-body .modal-base.modal-base--sidebar .modal-content.type-1 .modal-body .single-body .tables-flex-container,
.custom-dd-body .modal-base.modal-base--sidebar .modal-content.type-1 .modal-body .main-content__body .tables-flex-container {
flex-direction: column;
}
.custom-dd-body .modal-base.modal-base--sidebar .modal-content.type-1 .modal-body .single-body table,
.custom-dd-body .modal-base.modal-base--sidebar .modal-content.type-1 .modal-body .main-content__body table {
table-layout: fixed !important;
width: 100%;
}
.custom-dd-body .modal-base.modal-base--sidebar .modal-content.type-1 .modal-body .single-body table.personal-data-table,
.custom-dd-body .modal-base.modal-base--sidebar .modal-content.type-1 .modal-body .main-content__body table.personal-data-table {
min-width: 420px;
}
.custom-dd-body .modal-base.modal-base--sidebar .modal-content.type-1 .modal-body .single-body table.custom-sources-pep_person, .custom-dd-body .modal-base.modal-base--sidebar .modal-content.type-1 .modal-body .single-body table.data-table, .custom-dd-body .modal-base.modal-base--sidebar .modal-content.type-1 .modal-body .single-body table.custom-pep_sources-url, .custom-dd-body .modal-base.modal-base--sidebar .modal-content.type-1 .modal-body .single-body table.custom-pep_sources-organization, .custom-dd-body .modal-base.modal-base--sidebar .modal-content.type-1 .modal-body .single-body table.custom-peps-rca_person, .custom-dd-body .modal-base.modal-base--sidebar .modal-content.type-1 .modal-body .single-body table.custom-rca_pep_connections-rca_url, .custom-dd-body .modal-base.modal-base--sidebar .modal-content.type-1 .modal-body .single-body table.pep-people-unified-table, .custom-dd-body .modal-base.modal-base--sidebar .modal-content.type-1 .modal-body .single-body table.custom-rcas-pep_person, .custom-dd-body .modal-base.modal-base--sidebar .modal-content.type-1 .modal-body .single-body table.custom-rca_pep_connections-company, .custom-dd-body .modal-base.modal-base--sidebar .modal-content.type-1 .modal-body .single-body table.custom-page-title-announcement,
.custom-dd-body .modal-base.modal-base--sidebar .modal-content.type-1 .modal-body .main-content__body table.custom-sources-pep_person,
.custom-dd-body .modal-base.modal-base--sidebar .modal-content.type-1 .modal-body .main-content__body table.data-table,
.custom-dd-body .modal-base.modal-base--sidebar .modal-content.type-1 .modal-body .main-content__body table.custom-pep_sources-url,
.custom-dd-body .modal-base.modal-base--sidebar .modal-content.type-1 .modal-body .main-content__body table.custom-pep_sources-organization,
.custom-dd-body .modal-base.modal-base--sidebar .modal-content.type-1 .modal-body .main-content__body table.custom-peps-rca_person,
.custom-dd-body .modal-base.modal-base--sidebar .modal-content.type-1 .modal-body .main-content__body table.custom-rca_pep_connections-rca_url,
.custom-dd-body .modal-base.modal-base--sidebar .modal-content.type-1 .modal-body .main-content__body table.pep-people-unified-table,
.custom-dd-body .modal-base.modal-base--sidebar .modal-content.type-1 .modal-body .main-content__body table.custom-rcas-pep_person,
.custom-dd-body .modal-base.modal-base--sidebar .modal-content.type-1 .modal-body .main-content__body table.custom-rca_pep_connections-company,
.custom-dd-body .modal-base.modal-base--sidebar .modal-content.type-1 .modal-body .main-content__body table.custom-page-title-announcement {
min-width: 900px;
}
.custom-dd-body .modal-base.modal-base--sidebar .modal-content.type-1 .modal-body .single-body table.custom-rca_pep_connections-rca_url .cell-data--select a,
.custom-dd-body .modal-base.modal-base--sidebar .modal-content.type-1 .modal-body .single-body table.custom-rca_pep_connections-rca_url td:nth-child(1) a,
.custom-dd-body .modal-base.modal-base--sidebar .modal-content.type-1 .modal-body .single-body table.custom-rca_pep_connections-rca_url td:nth-child(2) a,
.custom-dd-body .modal-base.modal-base--sidebar .modal-content.type-1 .modal-body .main-content__body table.custom-rca_pep_connections-rca_url .cell-data--select a,
.custom-dd-body .modal-base.modal-base--sidebar .modal-content.type-1 .modal-body .main-content__body table.custom-rca_pep_connections-rca_url td:nth-child(1) a,
.custom-dd-body .modal-base.modal-base--sidebar .modal-content.type-1 .modal-body .main-content__body table.custom-rca_pep_connections-rca_url td:nth-child(2) a {
word-break: break-word;
}
.custom-dd-body .modal-base.modal-base--sidebar .modal-content.type-1 .modal-body .single-body table.custom-page-title-directive_category .cell-data--string a,
.custom-dd-body .modal-base.modal-base--sidebar .modal-content.type-1 .modal-body .main-content__body table.custom-page-title-directive_category .cell-data--string a {
word-break: break-word;
}
.custom-dd-body .modal-base.modal-base--sidebar .modal-content.type-1 .modal-body .single-body .custom-pagination,
.custom-dd-body .modal-base.modal-base--sidebar .modal-content.type-1 .modal-body .main-content__body .custom-pagination {
flex-wrap: wrap;
}
.custom-dd-body .modal-base .modal-content {
border: 1px solid var(--tk-border-solid-2);
background: var(--tk-surface-elevated, #FFF);
box-shadow: 0 4px 64px 0 rgba(35, 31, 32, 0.4);
padding: var(--modal-padding);
display: flex;
flex-direction: column;
gap: var(--nb-common-grid-gap, 2.4rem);
}
.custom-dd-body .modal-base .modal-header {
display: flex;
justify-content: space-between;
align-items: center;
flex-shrink: 0;
}
.custom-dd-body .modal-base .modal-subheader {
color: var(--tk-ink-main-secondary);
}
.custom-dd-body .modal-base .modal-body {
flex-grow: 1;
}
.custom-dd-body .modal-base .modal-footer {
flex-shrink: 0;
padding-top: 1.6rem;
}
.custom-dd-body .modal-base .modal-footer .button-container {
display: flex;
gap: 0.8rem;
}
.custom-dd-body .modal-base .modal-footer .button-container .btn {
width: 100%;
flex: 1;
}
.custom-dd-body .modal-base.type-dialog .modal-footer {
padding-top: 1.6rem;
}
.custom-dd-body .modal-base.modal-toggle-size.modal-base--sidebar .center-peek-btn,
.custom-dd-body .modal-base.modal-toggle-size.modal-base--sidebar .minimize-btn {
display: inline-flex !important;
}
.custom-dd-body .modal-base.modal-toggle-size.modal-base--full .side-peek-btn,
.custom-dd-body .modal-base.modal-toggle-size.modal-base--full .minimize-btn {
display: inline-flex !important;
}
.custom-dd-body .modal-base.modal-toggle-size.modal-base--minimized .expand-btn {
display: inline-flex !important;
}
.custom-dd-body .modal-base.modal-scroll {
--modal-padding: 2.4rem;
--buttons-container-height: 5.2rem;
--outside-modal-gap: 6.4rem;
}
.custom-dd-body .modal-base.modal-scroll .breadcrumbs-container-modal-scroll span {
color: var(--tk-ink-main-toned) !important;
}
.custom-dd-body .modal-base.modal-scroll .modal-content {
gap: 0;
}
.custom-dd-body .modal-base.modal-scroll .modal-scrolled-wrap {
display: flex;
flex-direction: column;
gap: var(--modal-padding);
padding-bottom: var(--nb-organism-card-padding-l, 24px);
max-height: calc(100vh - 3 * var(--modal-padding) - var(--buttons-container-height) - 2 * var(--outside-modal-gap));
overflow: auto;
}
.custom-dd-body .modal-base.modal-scroll .modal-body div {
color: var(--tk-ink-main-toned);
}
.custom-dd-body .modal-base.modal-scroll .modal-body ul {
padding-bottom: 0px;
padding-top: 0px;
}
.custom-dd-body .modal-base.modal-scroll .modal-body img {
display: block;
border-radius: var(--nb-common-radius-layout-sharp, 4px);
box-shadow: 0 0 16px 0 rgba(33, 33, 33, 0.12) inset;
}
.custom-dd-body .modal-base.modal-scroll .modal-footer {
padding-top: var(--modal-padding);
position: relative;
}
.custom-dd-body .modal-base.modal-scroll .modal-footer::before {
content: "";
display: block;
position: absolute;
height: 1px;
width: calc(100% + 2 * var(--modal-padding));
left: calc(var(--modal-padding) * -1);
top: 0;
background-color: var(--tk-border-solid-1);
}
.custom-dd-body .modal-base.modal-scroll .modal-footer .button-container .btn {
width: fit-content;
flex: unset !important;
}
.custom-dd-body .modal-base--center[open] {
animation: modal-fade-in 0.2s ease forwards;
}
.custom-dd-body .modal-base--sidebar {
margin-right: 0;
margin-left: auto;
height: 100vh;
max-height: 100vh;
}
.custom-dd-body .modal-base--sidebar .modal-content {
height: 100%;
}
.custom-dd-body .modal-base--sidebar[open] {
animation: modal-slide-in-right 0.3s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
.custom-dd-body .modal-base--popover {
margin: 0 !important;
overflow: visible;
}
.custom-dd-body .modal-base--popover[open] {
animation: popover-fade-in 0.2s ease forwards;
}
.custom-dd-body .modal-w-s {
width: 40rem;
}
.custom-dd-body .modal-w-m {
width: 60rem;
}
.custom-dd-body .modal-w-xm {
width: 66rem;
}
.custom-dd-body .modal-w-l {
width: 84.5rem;
}
.custom-dd-body .modal-w-xl {
width: 110rem;
}
.custom-dd-body .modal-w-half {
width: 50vw;
}
.custom-dd-body .modal-base--full {
margin: auto;
width: calc(100% - var(--gap-11) * 2);
height: calc(100% - var(--gap-11) * 2);
}
.custom-dd-body .modal-base--full .modal-content {
height: 100%;
padding: var(--gap-11);
}
.custom-dd-body .modal-base--full[open] {
animation: modal-fade-in 0.2s ease forwards;
}
.custom-dd-body .modal-base--minimized {
margin-right: 0;
margin-left: auto;
width: 5.2rem !important;
height: 100vh;
overflow: visible;
position: fixed;
top: 12.8rem;
max-height: calc(100vh - 12.8rem);
z-index: 999;
}
.custom-dd-body .modal-base--minimized::backdrop {
opacity: 0;
display: none;
pointer-events: none;
}
.custom-dd-body .modal-base--minimized .toggle-side-peek-btn {
display: flex !important;
}
.custom-dd-body .modal-base--minimized .modal-content {
max-width: 2.4rem !important;
margin-left: auto;
background: var(--tk-surface-elevated, #FFF);
border: none;
}
.custom-dd-body .modal-base--minimized .modal-content * {
opacity: 0;
pointer-events: none;
}
.custom-dd-body .modal-base--minimized .expand-btn {
display: flex;
position: absolute;
left: -3.2rem;
top: 4.8rem;
width: 3.2rem;
height: 4rem;
background: var(--tk-surface-elevated, #FFF);
border: 1px solid var(--tk-border-solid-2);
border-right: none;
border-radius: 0.8rem 0 0 0.8rem;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: -4px 0 16px rgba(0, 0, 0, 0.1);
}
.custom-dd-body .modal-help .link-ico, .custom-dd-body .modal-help svg {
width: 2.4rem;
height: 2.4rem;
}
.custom-dd-body .modal-help .link-content {
color: var(--tk-ink-other-link) !important;
text-decoration: none !important;
}
.custom-dd-body .modal-help .label {
color: var(--tk-ink-main-toned);
}
.custom-dd-body table {
background-color: var(--tk-surface-elevated);
table-layout: auto;
width: 100%;
border-collapse: collapse;
border: 1px solid var(--tk-border-solid-2);
}
.custom-dd-body table a:not(.button, .row-action-btn, .btn) {
color: var(--tk-ink-main-primary) !important;
text-decoration-color: var(--br-transparent) !important;
word-break: break-word;
white-space: normal;
}
.custom-dd-body table a:not(.button, .row-action-btn, .btn).clicked {
color: var(--br-primary-700) !important;
}
.custom-dd-body table .cell-label--action-button {
text-align: center;
}
.custom-dd-body table .cell-label--action-button a {
word-break: normal;
}
.custom-dd-body table .cell-data--localized-string-field,
.custom-dd-body table .cell-label--action-button {
width: 1px;
}
.custom-dd-body table th,
.custom-dd-body table td {
padding: var(--table-padding-top-bottom) var(--table-padding-sides);
border: 1px solid var(--tk-border-solid-2);
width: auto;
text-align: left;
background-clip: padding-box;
}
.custom-dd-body table .cell-ghost {
width: 0;
padding: 0;
border: 0;
border-top: 1px solid var(--tk-border-solid-2);
border-bottom: 1px solid var(--tk-border-solid-2);
position: relative;
}
.custom-dd-body table .cell-ghost + th,
.custom-dd-body table .cell-ghost + td {
border-left: none;
}
.custom-dd-body table th:empty:not(.cell-ghost) {
display: none;
}
.custom-dd-body table th {
padding: var(--table-padding-top-bottom-header) var(--table-padding-sides);
}
.custom-dd-body table th.cell-label--pep_duplicate_id, .custom-dd-body table th.cell-label--rca_duplicate_id {
width: 4rem;
}
.custom-dd-body table th.cell-lp {
width: 1px;
}
.custom-dd-body table tr:hover {
background-color: inherit !important;
}
.custom-dd-body table tr:focus {
outline: none;
}
.custom-dd-body table td .chip {
margin-top: -0.2rem;
margin-bottom: -0.2rem;
}
.custom-dd-body table .table-chip {
cursor: default;
width: 100%;
}
.custom-dd-body table thead tr th {
font-weight: 600;
}
.custom-dd-body table thead tr th a {
display: flex;
flex-direction: row;
align-items: center;
word-break: normal !important;
}
.custom-dd-body table thead tr th .cell-label__sort-indicator svg,
.custom-dd-body table thead tr th .cell-label__sort-indicator use {
display: none;
}
.custom-dd-body table thead tr th .cell-label__sort-indicator {
float: none;
display: block;
margin-left: 0.8rem;
height: var(--nb-atom-input-xl-icon-size);
width: var(--nb-atom-input-xl-icon-size);
background-image: url('data:image/svg+xml;utf8,');
background-size: 2.4rem 2.4rem;
background-repeat: no-repeat;
background-position: bottom center;
cursor: pointer;
-webkit-transition: var(--def-trans-prop) var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
transition: var(--def-trans-prop) var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
}
.custom-dd-body table.vertical-align-top td,
.custom-dd-body table.vertical-align-top th {
vertical-align: top;
}
.custom-dd-body table .arrow {
box-shadow: 0 1px 0.8rem 0 rgba(35, 31, 32, 0.16);
}
.custom-dd-body table.type-1 .new-column {
border-left: 0.2rem solid var(--tk-ink-other-warning);
border-right: 0.2rem solid var(--tk-ink-other-warning);
}
.custom-dd-body table.type-1 .new-column.has-content {
background-color: var(--tk-warning-subtle);
}
.custom-dd-body table.type-1 .source-column {
vertical-align: top;
}
.custom-dd-body table.type-1 .source-column button {
margin-top: var(--gap-7);
display: flex;
}
.custom-dd-body table.type-1 .bold {
font-weight: 600;
}
.custom-dd-body table.type-1 tr:first-child .new-column {
border-top: 0.2rem solid var(--tk-ink-other-warning);
}
.custom-dd-body table.type-1 tr:last-of-type .new-column {
border-bottom: 0.2rem solid var(--tk-ink-other-warning);
}
.custom-dd-body table .action-row {
position: relative;
transition: background-color 0.2s;
}
.custom-dd-body table .action-row.row-visited td:not(.cell-ghost),
.custom-dd-body table .action-row.row-visited th:not(.cell-ghost) {
background-color: var(--tk-surface-toned);
color: var(--tk-ink-main-secondary);
}
.custom-dd-body table .action-row .cell-ghost {
position: static;
}
.custom-dd-body table .action-row .row-stretched-link {
position: absolute;
inset: 0;
z-index: 1;
}
.custom-dd-body table .action-row .cell-data {
position: relative;
}
.custom-dd-body table .action-row .cell-data a, .custom-dd-body table .action-row .cell-data button {
position: relative;
z-index: 2;
}
.custom-dd-body table .action-row .row-actions-indicator {
position: absolute;
z-index: 2;
display: flex;
flex-direction: row;
align-items: center;
height: calc(100% + 2 * var(--nb-common-stroke-s));
top: -0.1rem;
left: 0;
transform: translateX(-100%);
background-color: var(--tk-control-neutral-subtle-fill);
border: var(--nb-common-stroke-s) solid var(--tk-border-solid-2);
border-top-left-radius: var(--nb-common-radius-control-soft);
border-bottom-left-radius: var(--nb-common-radius-control-soft);
opacity: 0;
pointer-events: none;
cursor: pointer;
overflow: clip;
}
.custom-dd-body table .action-row .row-actions-indicator .row-action-btn {
display: flex;
justify-content: center;
align-items: center;
width: 4rem;
height: 100%;
position: relative;
color: var(--tk-ink-main-primary);
padding-left: 1rem;
padding-right: 1rem;
-webkit-transition: var(--def-trans-prop) var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
transition: var(--def-trans-prop) var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
}
.custom-dd-body table .action-row .row-actions-indicator .row-action-btn:before {
content: "";
display: block;
position: absolute;
}
@media (hover: hover) {
.custom-dd-body table .action-row .row-actions-indicator .row-action-btn:hover {
background-color: var(--tk-ink-main-primary);
color: var(--tk-control-neutral-subtle-fill);
}
}
.custom-dd-body table .action-row .row-actions-indicator .row-action-btn svg {
display: block;
width: 2rem;
height: 2rem;
}
.custom-dd-body table .action-row:hover:not(.is-editing) th:not(.cell-ghost),
.custom-dd-body table .action-row:hover:not(.is-editing) td:not(.cell-ghost) {
background-color: var(--tk-surface-highlight-1) !important;
}
.custom-dd-body table .action-row:hover:not(.is-editing) .row-actions-indicator {
opacity: 1;
pointer-events: auto;
}
.custom-dd-body table.expand-table {
table-layout: fixed;
}
.custom-dd-body table.expand-table td:not(.cell-ghost) {
vertical-align: top;
}
.custom-dd-body table.expand-table td:not(.cell-ghost):not(.no-expand) {
overflow: hidden;
position: relative;
vertical-align: top;
white-space: nowrap;
}
.custom-dd-body table.expand-table td:not(.cell-ghost):not(.no-expand) a {
white-space: nowrap;
}
.custom-dd-body table.expand-table td:not(.cell-ghost):not(.no-expand)::after {
content: "";
display: block;
position: absolute;
height: 100%;
width: 2.4rem;
background: linear-gradient(to right, transparent, var(--tk-surface-elevated) 80%);
top: 0;
right: 0;
z-index: 2;
}
.custom-dd-body table.expand-table td:not(.cell-ghost):not(.no-expand) .d-flex {
flex-wrap: nowrap !important;
gap: 1rem var(--gap-3);
}
.custom-dd-body table.expand-table td:not(.cell-ghost):not(.no-expand) .chip {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
height: unset;
line-height: 1.143;
}
.custom-dd-body table.expand-table td:not(.cell-ghost):not(.no-expand).cell-data--date::after {
display: none;
}
.custom-dd-body table.expand-table.expanded td:not(.cell-ghost):not(.no-expand) {
white-space: wrap;
}
.custom-dd-body table.expand-table.expanded td:not(.cell-ghost):not(.no-expand) a {
white-space: wrap;
}
.custom-dd-body table.expand-table.expanded td:not(.cell-ghost):not(.no-expand) .d-flex {
flex-wrap: wrap !important;
}
.custom-dd-body table.expand-table.expanded td:not(.cell-ghost):not(.no-expand) .chip {
white-space: normal !important;
}
.custom-dd-body table.expand-table.expanded td:not(.cell-ghost):not(.no-expand)::after {
display: none;
}
.custom-dd-body table.expand-table tr.action-row:hover td:not(.cell-ghost):not(.no-expand)::after {
background: linear-gradient(to right, transparent, var(--tk-surface-highlight-1) 80%);
}
.custom-dd-body table.expand-table tr.action-row.row-visited td:not(.cell-ghost):not(.no-expand)::after {
background: linear-gradient(to right, transparent, var(--tk-surface-toned) 80%);
}
.custom-dd-body table.expand-table tr.action-row.row-visited:hover td:not(.cell-ghost):not(.no-expand)::after {
background: linear-gradient(to right, transparent, var(--tk-surface-highlight-1) 80%);
}
.custom-dd-body table.expand-table.custom-page-title-plan_package .cell-label--plan_package_name {
width: 15rem;
}
.custom-dd-body table.checkbox-table colgroup .col-checkbox {
width: 4rem;
}
.custom-dd-body table.checkbox-table .cell-data--checkbox {
padding-right: 0;
}
.custom-dd-body table.checkbox-table .cell-data--checkbox::after {
display: none !important;
}
.custom-dd-body table.checkbox-table .cell-data--checkbox input[type=checkbox] {
position: relative;
z-index: 2;
}
.custom-dd-body table.checkbox-table .checkbox-row.checked th:not(.cell-ghost),
.custom-dd-body table.checkbox-table .checkbox-row.checked td:not(.cell-ghost) {
background-color: var(--tk-primary-accent) !important;
}
.custom-dd-body table.checkbox-table .checkbox-row.checked th:not(.cell-ghost)::after,
.custom-dd-body table.checkbox-table .checkbox-row.checked td:not(.cell-ghost)::after {
background: linear-gradient(to right, transparent, var(--tk-primary-accent) 80%);
}
.custom-dd-body table.table-nested {
table-layout: fixed;
}
.custom-dd-body table.table-nested th {
font-weight: 600;
}
.custom-dd-body table.table-fixed {
table-layout: fixed;
}
.custom-dd-body table.row-edit-table td {
position: relative;
padding: var(--table-row-edit-cell-padd) var(--table-padding-sides);
}
.custom-dd-body table.row-edit-table td .actions-hover-buttons {
right: 0.4rem;
z-index: 10;
}
.custom-dd-body table.row-edit-table td .during-edit-btn {
display: none;
}
.custom-dd-body table.row-edit-table td .inline-edit-container {
width: 100%;
}
.custom-dd-body table.row-edit-table td .inline-edit-container .binary-toggle-container {
padding-right: var(--table-row-edit-cell-right);
}
.custom-dd-body table.row-edit-table td .inline-edit-container .input-value {
width: 100%;
}
.custom-dd-body table.row-edit-table td .inline-edit-container .input-value.is-readonly {
pointer-events: none;
}
.custom-dd-body table.row-edit-table td .inline-edit-container .input-value.is-readonly input:not([type=checkbox]),
.custom-dd-body table.row-edit-table td .inline-edit-container .input-value.is-readonly select,
.custom-dd-body table.row-edit-table td .inline-edit-container .input-value.is-readonly textarea,
.custom-dd-body table.row-edit-table td .inline-edit-container .input-value.is-readonly .ts-wrapper .ts-control {
background: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
padding-left: 0 !important;
appearance: none !important;
}
.custom-dd-body table.row-edit-table td .inline-edit-container .input-value.is-readonly .ts-wrapper::after {
display: none !important;
}
.custom-dd-body table.row-edit-table td .inline-edit-container .input-value .field-unit, .custom-dd-body table.row-edit-table td .inline-edit-container .input-value .field-unit__field {
padding: 0;
margin: 0;
border: none;
width: 100%;
}
.custom-dd-body table.row-edit-table td .inline-edit-container .input-value input, .custom-dd-body table.row-edit-table td .inline-edit-container .input-value select, .custom-dd-body table.row-edit-table td .inline-edit-container .input-value textarea {
width: 100%;
margin: 0;
box-sizing: border-box;
}
.custom-dd-body table.row-edit-table td input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([id*=tomselected]),
.custom-dd-body table.row-edit-table td textarea,
.custom-dd-body table.row-edit-table td .ts-wrapper .ts-control {
border: none;
background: transparent;
height: auto;
min-height: 2.8rem;
padding: 0;
transition: all 0.1s ease-in-out;
}
.custom-dd-body table.row-edit-table td.checkbox-cell .ts-wrapper .ts-dropdown {
border: none;
width: calc(100% + 2px + var(--gap-4) + var(--table-row-edit-cell-padd) + var(--table-row-edit-cell-padd) + var(--checkbox-size)) !important;
left: calc((1px + var(--table-row-edit-cell-padd) + var(--checkbox-size) + var(--gap-4)) * -1) !important;
top: calc(100% + var(--table-row-edit-cell-padd) + 2px);
}
.custom-dd-body table.row-edit-table td .ts-wrapper .ts-dropdown .option {
padding-top: var(--gap-4);
padding-bottom: var(--gap-4);
}
.custom-dd-body table.row-edit-table .is-editing-cell {
outline: 1px solid var(--tk-ink-other-accent);
z-index: 10;
}
.custom-dd-body table.row-edit-table .is-editing-cell .during-edit-btn {
display: flex;
}
.custom-dd-body table.row-edit-table .is-editing-cell .before-edit-btn {
display: none;
}
.custom-dd-body table.row-edit-table .is-editing-cell .input-value.is-readonly {
pointer-events: auto;
}
@media (hover: hover) {
.custom-dd-body table.row-edit-table .is-editing-row:hover td:not(.cell-ghost) {
background: var(--tk-primary-subtle) !important;
}
.custom-dd-body table.row-edit-table .is-editing-row:hover td.is-editing-cell {
background-color: transparent !important;
}
}
.custom-dd-body table.row-edit-table .field-unit__field,
.custom-dd-body table.row-edit-table .input-value,
.custom-dd-body table.row-edit-table .binary-toggle-container {
display: flex;
align-items: center;
justify-content: stretch;
width: 100%;
gap: var(--gap-5);
}
.custom-dd-body table.row-edit-table .field-unit__field .btn-toggle-option,
.custom-dd-body table.row-edit-table .input-value .btn-toggle-option,
.custom-dd-body table.row-edit-table .binary-toggle-container .btn-toggle-option {
background: transparent;
cursor: pointer;
white-space: nowrap;
border: var(--nb-common-stroke-m, 1.5px) solid transparent;
border-radius: var(--nb-common-radius-control-pill);
padding: 0.55rem 0.8rem;
height: auto;
outline: none !important;
flex: 1;
-webkit-transition: var(--def-trans-prop) var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
transition: var(--def-trans-prop) var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
}
.custom-dd-body table.row-edit-table .field-unit__field .btn-toggle-option.is-active,
.custom-dd-body table.row-edit-table .input-value .btn-toggle-option.is-active,
.custom-dd-body table.row-edit-table .binary-toggle-container .btn-toggle-option.is-active {
border-color: var(--tk-control-neutral-outlined-outline);
background: var(--tk-control-neutral-outlined-background);
}
.custom-dd-body table.row-edit-table .field-unit__field .btn-toggle-option:hover:not(.is-active),
.custom-dd-body table.row-edit-table .input-value .btn-toggle-option:hover:not(.is-active),
.custom-dd-body table.row-edit-table .binary-toggle-container .btn-toggle-option:hover:not(.is-active) {
background: rgba(0, 0, 0, 0.05);
}
.custom-dd-body table.row-edit-table .is-hidden-select {
display: none !important;
}
.custom-dd-body table.row-edit-table .action-row:hover .row-actions-indicator {
opacity: 0 !important;
pointer-events: none !important;
}
.custom-dd-body table.row-edit-table .action-row.is-editing-row:hover .row-actions-indicator {
opacity: 1 !important;
pointer-events: auto !important;
}
.custom-dd-body .custom-table-wrapper .top-table-header {
padding: var(--table-padding-top-bottom) var(--table-padding-sides);
border: 1px solid var(--tk-border-solid-2);
border-bottom: none;
background-color: var(--tk-surface-elevated);
width: 100%;
}
.custom-dd-body .custom-table-wrapper .top-table-header .selected {
color: var(--tk-ink-other-accent);
display: none;
}
.custom-dd-body .custom-table-wrapper .top-table-header .none-selected {
color: var(--tk-ink-main-toned);
}
.custom-dd-body .custom-table-wrapper .top-table-header.partly-selected .none-selected, .custom-dd-body .custom-table-wrapper .top-table-header.all-selected .none-selected {
display: none;
}
.custom-dd-body .custom-table-wrapper .top-table-header.partly-selected .selected, .custom-dd-body .custom-table-wrapper .top-table-header.all-selected .selected {
display: block;
}
.custom-dd-body .custom-table-wrapper .empty-state {
margin-top: 1.6rem;
padding: 1.6rem 2.4rem;
display: flex;
flex-direction: row;
align-items: center;
gap: 0.8rem;
background-color: var(--tk-surface-toned);
border: 1px solid var(--tk-border-solid-3);
}
.custom-dd-body .custom-table-wrapper .empty-state .header-for-empty {
flex: 1;
color: var(--tk-ink-main-secondary);
}
.custom-dd-body .custom-pagination {
padding: 1.2rem 0;
display: flex;
flex-direction: row;
gap: 4.8rem;
align-items: center;
justify-content: flex-end;
}
.custom-dd-body .custom-pagination .pagination-per-page {
display: flex;
flex-direction: row;
align-items: center;
gap: 1.6rem;
}
.custom-dd-body .custom-pagination .pagination-info .separator,
.custom-dd-body .custom-pagination .pagination-info .total {
color: var(--tk-ink-main-toned);
}
.custom-dd-body .custom-pagination .pagination-info .separator {
margin: 0 0.5rem;
}
.custom-dd-body .custom-pagination nav.pagination {
margin-top: 0;
display: flex;
flex-direction: row;
gap: 2rem;
align-items: center;
padding: 0 1rem;
}
.custom-dd-body .custom-pagination nav.pagination span {
margin: 0 !important;
}
.custom-dd-body .custom-pagination nav.pagination span.disabled {
pointer-events: none;
opacity: 0.7;
}
.custom-dd-body .custom-pagination nav.pagination a {
display: block;
text-indent: -99999px;
overflow: clip;
width: 2.4rem;
height: 2.4rem;
color: var(--tk-control-disabled-ghost-content);
background-color: currentColor;
-webkit-mask-position: center center;
mask-position: center center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 2.4rem;
mask-size: 2.4rem;
}
.custom-dd-body .custom-pagination nav.pagination .first a {
-webkit-mask-image: url("/assets/icons/pagination-arrow-first-44a1e288.svg");
mask-image: url("/assets/icons/pagination-arrow-first-44a1e288.svg");
}
.custom-dd-body .custom-pagination nav.pagination .prev a {
-webkit-mask-image: url("/assets/icons/pagination-arrow-prev-70c7f45a.svg");
mask-image: url("/assets/icons/pagination-arrow-prev-70c7f45a.svg");
}
.custom-dd-body .custom-pagination nav.pagination .next a {
-webkit-mask-image: url("/assets/icons/pagination-arrow-next-0c534951.svg");
mask-image: url("/assets/icons/pagination-arrow-next-0c534951.svg");
}
.custom-dd-body .custom-pagination nav.pagination .last a {
-webkit-mask-image: url("/assets/icons/pagination-arrow-last-d7e36c2c.svg");
mask-image: url("/assets/icons/pagination-arrow-last-d7e36c2c.svg");
}
.custom-dd-body .per-page-select-wrapper {
position: relative;
}
.custom-dd-body .per-page-select-wrapper::after {
content: "";
position: absolute;
top: 50%;
right: 1.4rem;
transform: translateY(-50%);
width: 1.8rem;
height: 1.8rem;
pointer-events: none;
background-color: currentColor;
-webkit-mask-image: url("/assets/icons/select-arrow-22b2e637.svg");
mask-image: url("/assets/icons/select-arrow-22b2e637.svg");
-webkit-mask-position: center center;
mask-position: center center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 1.8rem;
mask-size: 1.8rem;
}
.custom-dd-body .per-page-select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image: none;
background-color: var(--tk-control-neutral-subtle-fill);
border: var(--nb-common-stroke-m) solid var(--tk-control-neutral-subtle-outline);
border-radius: var(--nb-common-radius-control-soft);
padding: 0.6rem 3.8rem 0.6rem 1.6rem;
font-size: 14px;
color: var(--tk-control-neutral-subtle-content);
cursor: pointer;
height: 3.6rem;
min-width: unset;
}
.custom-dd-body .main-content__header .search,
.custom-dd-body .search-form-container .search {
margin-left: 0;
max-width: unset;
margin-right: unset;
display: flex;
flex-direction: row;
gap: 0.8rem;
}
.custom-dd-body .main-content__header .search label,
.custom-dd-body .main-content__header .search .search__clear-link,
.custom-dd-body .search-form-container .search label,
.custom-dd-body .search-form-container .search .search__clear-link {
display: none;
}
.custom-dd-body .main-content__header .search .input-container,
.custom-dd-body .search-form-container .search .input-container {
-webkit-transition: var(--def-trans-prop) var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
transition: var(--def-trans-prop) var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
}
.custom-dd-body .main-content__header .search .input-container input.search__input,
.custom-dd-body .search-form-container .search .input-container input.search__input {
width: 14rem;
padding-left: 2rem;
padding-right: 4.2rem;
height: 4.4rem;
border-radius: var(--nb-common-radius-control-pill);
-webkit-transition: var(--def-trans-prop) var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
transition: var(--def-trans-prop) var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
font-size: 1.5rem;
}
.custom-dd-body .main-content__header .search .input-container.size-l input,
.custom-dd-body .search-form-container .search .input-container.size-l input {
width: 40rem;
}
.custom-dd-body .main-content__header .search .input-container.size-xl input,
.custom-dd-body .search-form-container .search .input-container.size-xl input {
width: 52rem;
}
.custom-dd-body .main-content__header .search .input-container.large input,
.custom-dd-body .search-form-container .search .input-container.large input {
height: 5.2rem;
font-size: 1.8rem;
}
.custom-dd-body .main-content__header .search .input-container.small input,
.custom-dd-body .search-form-container .search .input-container.small input {
height: 3.6rem;
font-size: 1.4rem;
}
.custom-dd-body .main-content__header .search .input-container .buttons-wrap,
.custom-dd-body .search-form-container .search .input-container .buttons-wrap {
position: absolute;
right: 0.4rem;
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
}
.custom-dd-body .main-content__header .search .input-container button,
.custom-dd-body .main-content__header .search .input-container .button,
.custom-dd-body .search-form-container .search .input-container button,
.custom-dd-body .search-form-container .search .input-container .button {
padding: 0;
border-color: transparent;
height: 3.6rem;
width: 3.6rem;
}
.custom-dd-body .main-content__header .search .input-container button svg,
.custom-dd-body .main-content__header .search .input-container .button svg,
.custom-dd-body .search-form-container .search .input-container button svg,
.custom-dd-body .search-form-container .search .input-container .button svg {
width: 2rem;
min-width: 2rem;
height: 2rem;
min-height: 2rem;
}
.custom-dd-body .main-content__header .search .input-container .arrow-clear,
.custom-dd-body .search-form-container .search .input-container .arrow-clear {
display: none;
}
.custom-dd-body .main-content__header .search .input-container.is-filled input.search__input,
.custom-dd-body .search-form-container .search .input-container.is-filled input.search__input {
border-color: var(--tk-control-primary-outlined-outline);
width: 21rem;
padding-right: 7.8rem;
}
.custom-dd-body .main-content__header .search .input-container.is-filled .arrow-submit,
.custom-dd-body .search-form-container .search .input-container.is-filled .arrow-submit {
background-color: var(--tk-control-primary-outlined-outline);
color: var(--tk-control-neutral-filled-content);
}
.custom-dd-body .main-content__header .search .input-container.is-filled .arrow-clear,
.custom-dd-body .search-form-container .search .input-container.is-filled .arrow-clear {
display: inline-flex;
color: var(--tk-control-primary-outlined-outline);
}
.custom-dd-body .main-content__header .search .input-container.is-focused,
.custom-dd-body .search-form-container .search .input-container.is-focused {
width: max-content;
}
.custom-dd-body .main-content__header .search .input-container.is-focused input.search__input,
.custom-dd-body .search-form-container .search .input-container.is-focused input.search__input {
width: 74rem;
padding-right: 7.8rem;
}
.custom-dd-body .main-content__header .search .input-container.is-focused .arrow-submit,
.custom-dd-body .search-form-container .search .input-container.is-focused .arrow-submit {
background-color: var(--tk-control-primary-outlined-outline);
color: var(--tk-control-neutral-filled-content);
}
.custom-dd-body .main-content__header .search .input-container.is-focused .arrow-clear,
.custom-dd-body .search-form-container .search .input-container.is-focused .arrow-clear {
display: inline-flex;
color: var(--tk-control-primary-outlined-outline);
}
.custom-dd-body .main-content__header .filters-deprecated,
.custom-dd-body .search-form-container .filters-deprecated {
position: relative !important;
left: 0 !important;
top: 0 !important;
}
.custom-dd-body .global-search-component .content-part .result-container, .custom-dd-body .global-search-component .content-part:has(input:focus)::before {
box-shadow: 0 0.4rem 6.4rem 0 rgba(35, 31, 32, 0.4);
}
.custom-dd-body .global-search-open-button {
display: flex;
flex-direction: row;
gap: 1.2rem;
height: 5.2rem;
border: var(--nb-common-stroke-m) solid var(--tk-border-solid-2);
border-radius: var(--nb-common-radius-control-soft);
padding: 0 1.2rem;
align-items: center;
cursor: pointer;
}
.custom-dd-body .global-search-open-button .text {
margin-right: 1.5rem;
}
.custom-dd-body .global-search-open-button .shortcut .mac,
.custom-dd-body .global-search-open-button .shortcut .pc {
display: flex;
gap: 0.4rem;
}
.custom-dd-body .global-search-open-button .shortcut .key-container {
min-width: 2.8rem;
height: 2.8rem;
border-radius: 0.4rem;
background-color: var(--tk-surface-toned);
display: flex;
align-items: center;
justify-content: center;
}
.custom-dd-body .global-search-open-button .shortcut .key-container > svg {
min-width: 1.8rem;
width: 1.8rem;
height: 1.8rem;
display: block;
}
.custom-dd-body .global-search-open-button .shortcut .key-container > svg.pc-svg {
min-width: 4rem;
width: 4rem;
}
.custom-dd-body .global-search-open-button .shortcut.mac .pc {
display: none;
}
.custom-dd-body .global-search-open-button .shortcut.pc .mac {
display: none;
}
.custom-dd-body .global-search-component {
position: absolute;
align-items: center;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
gap: 2.4rem;
padding-left: var(--main-content-side-left);
padding-right: var(--main-content-side-right);
background-color: var(--tk-surface-highlight-1);
opacity: 0;
visibility: none;
z-index: 10;
pointer-events: none;
transition: all var(--def-trans-time) var(--def-trans-type);
}
.custom-dd-body .global-search-component .button-part {
display: flex;
flex-direction: row;
gap: 1.6rem;
align-items: center;
}
.custom-dd-body .global-search-component .button-part .arrow-back,
.custom-dd-body .global-search-component .button-part svg {
flex-shrink: 0;
width: 4rem;
height: 4rem;
display: block;
cursor: pointer;
-webkit-transition: var(--def-trans-prop) var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
transition: var(--def-trans-prop) var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
}
@media (hover: hover) {
.custom-dd-body .global-search-component .button-part .arrow-back:hover {
transform: translateX(-0.4rem);
}
}
.custom-dd-body .global-search-component .content-part {
max-width: 74rem;
width: 100%;
margin-left: auto;
position: relative;
transition: opacity var(--def-trans-time) var(--def-trans-type);
}
.custom-dd-body .global-search-component .content-part .search-icon {
position: absolute;
left: 1.2rem;
top: 50%;
transform: translateY(-50%);
}
.custom-dd-body .global-search-component .content-part .search-icon svg,
.custom-dd-body .global-search-component .content-part .search-icon img {
width: 2.4rem;
height: 2.4rem;
display: block;
}
.custom-dd-body .global-search-component .content-part input {
padding: 0 4.8rem !important;
}
.custom-dd-body .global-search-component .content-part::before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: var(--nb-common-radius-control-soft);
z-index: -1;
-webkit-transition: var(--def-trans-prop) var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
transition: var(--def-trans-prop) var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
}
.custom-dd-body .global-search-component .content-part .clear-button {
position: absolute;
right: 1.2rem;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
-webkit-transition: var(--def-trans-prop) var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
transition: var(--def-trans-prop) var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
}
.custom-dd-body .global-search-component .content-part .clear-button svg,
.custom-dd-body .global-search-component .content-part .clear-button img {
width: 2.4rem;
height: 2.4rem;
display: block;
}
@media (hover: hover) {
.custom-dd-body .global-search-component .content-part .clear-button:hover {
opacity: 0.7;
}
}
.custom-dd-body .global-search-component .content-part .result-container {
position: absolute;
width: 100%;
top: calc(100% - 0.8rem);
left: 0;
padding: 3.2rem 2rem 2.4rem 0.8rem;
background-color: var(--ui-other-white);
border-left: var(--nb-common-stroke-m) solid var(--tk-border-solid-2);
border-right: var(--nb-common-stroke-m) solid var(--tk-border-solid-2);
border-bottom: var(--nb-common-stroke-m) solid var(--tk-border-solid-2);
border-bottom-left-radius: var(--nb-common-radius-control-soft);
border-bottom-right-radius: var(--nb-common-radius-control-soft);
z-index: -1;
transition: opacity var(--def-trans-time) var(--def-trans-type);
opacity: 0;
pointer-events: none;
visibility: none;
max-height: calc(100vh - 5.8rem - 2 * var(--container-padd));
}
.custom-dd-body .global-search-component .content-part .result-container .empty-state {
display: none;
padding: 0 0.4rem 0 1.6rem;
}
.custom-dd-body .global-search-component .content-part .result-container .results-in {
max-height: calc(100vh - 18.3rem - 2 * var(--container-padd));
overflow: auto;
display: flex;
flex-direction: column;
gap: 2.4rem;
}
.custom-dd-body .global-search-component .content-part .result-container .results-in .result-group {
display: flex;
flex-direction: column;
}
.custom-dd-body .global-search-component .content-part .result-container .results-in .result-group .category {
color: var(--tk-ink-main-secondary);
padding: 0 0.4rem 0.6rem 1.6rem;
}
.custom-dd-body .global-search-component .content-part .result-container .results-in .result-group a.single-resource,
.custom-dd-body .global-search-component .content-part .result-container .results-in .result-group .single-resource {
display: flex;
flex-direction: row;
gap: 2.4rem;
cursor: pointer;
text-decoration: none;
color: inherit;
min-height: 4rem;
align-items: center;
position: relative;
padding: 0.6rem 0.4rem 0.6rem 1.6rem;
line-height: 1.2;
}
.custom-dd-body .global-search-component .content-part .result-container .results-in .result-group a.single-resource::before,
.custom-dd-body .global-search-component .content-part .result-container .results-in .result-group .single-resource::before {
content: "";
width: 100%;
height: 100%;
position: absolute;
display: block;
left: 0;
background-color: var(--tk-surface-highlight-1);
z-index: -1;
opacity: 0;
-webkit-transition: var(--def-trans-prop) var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
transition: var(--def-trans-prop) var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
}
.custom-dd-body .global-search-component .content-part .result-container .results-in .result-group a.single-resource .name,
.custom-dd-body .global-search-component .content-part .result-container .results-in .result-group .single-resource .name {
-webkit-transition: var(--def-trans-prop) var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
transition: var(--def-trans-prop) var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
}
.custom-dd-body .global-search-component .content-part .result-container .results-in .result-group a.single-resource .modal-link,
.custom-dd-body .global-search-component .content-part .result-container .results-in .result-group .single-resource .modal-link {
margin-top: -0.4rem;
margin-bottom: -0.4rem;
}
.custom-dd-body .global-search-component .content-part .result-container .results-in .result-group a.single-resource.is-selected::before,
.custom-dd-body .global-search-component .content-part .result-container .results-in .result-group .single-resource.is-selected::before {
opacity: 1;
background-color: var(--tk-surface-highlight-2);
}
.custom-dd-body .global-search-component .content-part .result-container .results-in .result-group a.single-resource.is-selected .modal-link,
.custom-dd-body .global-search-component .content-part .result-container .results-in .result-group .single-resource.is-selected .modal-link {
opacity: 1;
pointer-events: auto;
}
.custom-dd-body .global-search-component .content-part .result-container .results-in .result-group a.single-resource > div,
.custom-dd-body .global-search-component .content-part .result-container .results-in .result-group .single-resource > div {
flex: 1;
}
.custom-dd-body .global-search-component .content-part .result-container .results-in .result-group a.single-resource .icon,
.custom-dd-body .global-search-component .content-part .result-container .results-in .result-group .single-resource .icon {
width: 2.4rem;
min-width: 2.4rem;
height: 2.4rem;
flex-grow: unset;
}
.custom-dd-body .global-search-component .content-part .result-container .results-in .result-group a.single-resource .icon img,
.custom-dd-body .global-search-component .content-part .result-container .results-in .result-group a.single-resource .icon svg,
.custom-dd-body .global-search-component .content-part .result-container .results-in .result-group .single-resource .icon img,
.custom-dd-body .global-search-component .content-part .result-container .results-in .result-group .single-resource .icon svg {
width: 2.4rem;
height: 2.4rem;
display: block;
}
.custom-dd-body .global-search-component .content-part .result-container .results-in .result-group a.single-resource .modal-link,
.custom-dd-body .global-search-component .content-part .result-container .results-in .result-group .single-resource .modal-link {
opacity: 0;
pointer-events: none;
-webkit-transition: var(--def-trans-prop) var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
transition: var(--def-trans-prop) var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
flex: 0;
aspect-ratio: 1;
box-shadow: 0 1px 0.8rem 0 rgba(35, 31, 32, 0.16);
}
.custom-dd-body .global-search-component .content-part .result-container .results-in .result-group a.single-resource .modal-link svg,
.custom-dd-body .global-search-component .content-part .result-container .results-in .result-group .single-resource .modal-link svg {
width: 2rem;
height: 2rem;
display: block;
}
.custom-dd-body .global-search-component .content-part .result-container .results-in .result-group a.single-resource:hover,
.custom-dd-body .global-search-component .content-part .result-container .results-in .result-group .single-resource:hover {
opacity: 1 !important;
color: inherit !important;
}
.custom-dd-body .global-search-component .content-part .result-container .results-in .result-group a.single-resource:hover::before,
.custom-dd-body .global-search-component .content-part .result-container .results-in .result-group .single-resource:hover::before {
opacity: 1;
}
.custom-dd-body .global-search-component .content-part .result-container .results-in .result-group a.single-resource:hover .modal-link,
.custom-dd-body .global-search-component .content-part .result-container .results-in .result-group .single-resource:hover .modal-link {
opacity: 1;
pointer-events: auto;
}
.custom-dd-body .global-search-component .content-part .result-container .separator {
width: calc(100% - 1.6rem);
height: 0.1rem;
background-color: var(--tk-border-solid-1);
margin: 2rem 0 2rem 1.6rem;
}
.custom-dd-body .global-search-component .content-part .result-container .buttons-info {
height: 2.8rem;
display: flex;
flex-direction: row;
gap: 2.4rem;
padding: 0 0.4rem 0 1.6rem;
}
.custom-dd-body .global-search-component .content-part .result-container .buttons-info .buttons-wrap-label {
display: flex;
flex-direction: row;
gap: 0.6rem;
align-items: center;
}
.custom-dd-body .global-search-component .content-part .result-container .buttons-info .buttons-wrap-label .icon-container {
min-width: 2.8rem;
height: 2.8rem;
border-radius: 0.4rem;
background-color: var(--tk-surface-toned);
display: flex;
align-items: center;
justify-content: center;
padding: 0.5rem;
}
.custom-dd-body .global-search-component .content-part .result-container .buttons-info .buttons-wrap-label .icon-container.text-icon {
padding: 0 0.85rem;
}
.custom-dd-body .global-search-component .content-part .result-container .buttons-info .buttons-wrap-label .icon-container > svg {
min-width: 1.8rem;
width: 1.8rem;
height: 1.8rem;
display: block;
}
.custom-dd-body .global-search-component .content-part .result-container .buttons-info .buttons-wrap-label .text {
margin-left: 0.6rem;
}
.custom-dd-body .global-search-component .content-part .result-container.results-visible {
opacity: 1;
pointer-events: auto;
visibility: visible;
}
.custom-dd-body .global-search-component .content-part .result-container.no-results .empty-state {
display: block;
}
.custom-dd-body .global-search-component .content-part .result-container.no-results .results-in {
display: none;
}
.custom-dd-body .global-search-component.is-open {
opacity: 1;
pointer-events: auto;
visibility: visible;
}
.custom-dd-body .fav-container .fav-button {
height: var(--nb-common-control-size-m);
width: var(--nb-common-control-size-m);
border: var(--nb-common-stroke-m) solid var(--tk-control-disabled-subtle-outline);
border-radius: var(--nb-common-radius-control-pill);
background-image: url("/icons/fav-disabled.svg");
background-size: 2.4rem 2.4rem;
background-repeat: no-repeat;
background-position: center center;
cursor: pointer;
-webkit-transition: var(--def-trans-prop) var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
transition: var(--def-trans-prop) var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
}
.custom-dd-body .fav-container .fav-button.is-fav {
border-radius: var(--nb-common-radius-control-soft);
border-color: var(--tk-control-neutral-outlined-outline);
background-image: url("/icons/fav-enabled.svg");
}
.custom-dd-body .fav-container #fav-name-label {
display: block !important;
}
.custom-dd-body .fav-container #checkbox-label {
display: flex !important;
}
.custom-dd-body .fav-container .input-field {
width: 100%;
padding-bottom: 3.2rem;
}
.custom-dd-body .fav-container .input-container {
width: 100%;
}
.custom-dd-body .fav-container .input-container::before {
display: none !important;
}
.custom-dd-body .fav-container .input-container #fav-name-input {
height: 5.6rem;
width: 100%;
border-radius: var(--nb-common-radius-control-soft);
padding-left: 2rem;
}
.custom-dd-body .fav-container .includes {
padding-bottom: 3.2rem;
display: flex;
flex-direction: column;
gap: 1.6rem;
}
.custom-dd-body .fav-container .includes .filter-value {
color: var(--tk-ink-main-secondary);
}
.custom-dd-body .fav-container .includes .filters-container .filters-wrap {
display: flex;
flex-direction: row;
gap: 2rem;
}
.custom-dd-body .fav-container .includes .filters-container .filters-wrap .open-close-link {
color: var(--tk-control-primary-ghost-content);
}
.custom-dd-body .fav-container .includes .filters-container .filters-content {
padding: 0 4rem;
}
.custom-dd-body .fav-container .includes .filters-container .filters-content .single-filter {
padding: 0.8rem 0;
border-bottom: 1px solid var(--tk-border-translucent-1);
display: flex;
flex-direction: row;
gap: 1rem;
}
.custom-dd-body .fav-container .includes .filters-container .filters-content .single-filter span {
flex: 1;
}
.custom-dd-body .fav-container .includes .filters-container .filters-content .single-filter .text {
color: var(--tk-ink-main-secondary);
}
.custom-dd-body .fav-container .includes .filters-container.disabled {
pointer-events: none;
opacity: 0.5;
}
.custom-dd-body .fav-container .includes .filters-container .open-close-link {
display: flex;
flex-direction: row;
gap: 0.8rem;
align-items: center;
cursor: pointer;
}
.custom-dd-body .fav-container .includes .filters-container .open-close-link img {
display: block;
width: 1.8rem;
height: 1.8rem;
-webkit-transition: var(--def-trans-prop) var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
transition: var(--def-trans-prop) var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
}
.custom-dd-body .fav-container .includes .filters-container.closed .closed {
display: none;
}
.custom-dd-body .fav-container .includes .filters-container.opened img {
transform: rotate(180deg);
}
.custom-dd-body .fav-container .includes .filters-container.opened .opened {
display: none;
}
.custom-dd-body .single-header {
flex-direction: row;
align-items: flex-end;
gap: 3.2rem;
background-color: var(--tk-surface-elevated);
border-bottom: 1px solid var(--tk-border-solid-2);
border-right: 1px solid var(--tk-border-solid-2);
padding-bottom: 2.4rem;
}
.custom-dd-body .single-header .breadcrumbs-item {
gap: 0.8rem;
align-items: center;
}
.custom-dd-body .single-header .breadcrumbs-item img,
.custom-dd-body .single-header .breadcrumbs-item .icon {
display: block;
width: 2.4rem;
height: 2.4rem;
}
.custom-dd-body .single-header .breadcrumbs-item .breadcrumbs-category {
color: var(--tk-ink-main-toned);
}
.custom-dd-body .single-header .header-wrap {
gap: 0.8rem;
flex: 1;
}
.custom-dd-body .single-header .main-content__page-title a {
-webkit-transition: var(--def-trans-prop) var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
transition: var(--def-trans-prop) var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
display: flex;
flex-direction: row;
text-decoration: underline;
text-decoration-color: transparent;
gap: var(--gap-9);
}
.custom-dd-body .single-header .main-content__page-title a::after {
content: "";
display: block;
width: 3.6rem;
height: 3.6rem;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36' fill='none'%3E%3Cpath d='M15 3.375V5.625H5.625V30.375H30.375V21H32.625V32.625H3.375V3.375H15ZM32.625 15H30.375V7.21582L12.7954 24.7954L11.2046 23.2046L28.7842 5.625H21V3.375H32.625V15Z' fill='%236147FB'/%3E%3C/svg%3E");
opacity: 0;
-webkit-transition: var(--def-trans-prop) var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
transition: var(--def-trans-prop) var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
}
@media (hover: hover) {
.custom-dd-body .single-header .main-content__page-title a:hover {
text-decoration-color: var(--tk-ink-other-link);
color: var(--tk-ink-other-link);
}
.custom-dd-body .single-header .main-content__page-title a:hover::after {
opacity: 1;
}
}
.custom-dd-body .single-header.header-type-2 {
align-items: flex-start;
flex-wrap: wrap;
row-gap: 0;
width: 100%;
}
.custom-dd-body .single-header.header-type-2 .header-wrap {
width: 100%;
}
@media (max-width: 1400px) {
.custom-dd-body .single-header.header-type-2 {
flex-direction: column;
row-gap: 2.4rem;
}
}
.custom-dd-body .single-header.header-type-2 .header-wrap {
min-width: 0;
}
.custom-dd-body .single-header.header-type-2 .header-wrap .main-content__page-title {
min-width: 0;
width: 100%;
flex-shrink: 1;
}
.custom-dd-body .single-header.header-type-2 .header-wrap .main-content__page-title a {
min-width: 0;
}
.custom-dd-body .single-header.header-type-2 .header-wrap .main-content__page-title a span {
flex: 1;
min-width: 0;
width: 100%;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.custom-dd-body .single-header.header-type-3.word-break {
word-break: break-all;
}
.custom-dd-body .single-header:not(.modal-base *).header-type-2 {
background-color: transparent;
border-bottom: none;
border-right: none;
padding-top: var(--header-type-2-side-bottom);
padding-bottom: 0;
}
.custom-dd-body .single-header:not(.modal-base *).header-type-3 {
background-color: transparent;
border-bottom: none;
border-right: none;
padding-bottom: 0;
}
.custom-dd-body .modal-base--sidebar .header-type-2 {
flex-direction: column;
row-gap: 2.4rem;
}
.custom-dd-body .modal-base--sidebar .header-type-2 .changes-counter {
width: 100%;
}
.custom-dd-body .modal-actions {
display: none;
}
.custom-dd-body .modal-base--sidebar .modal-actions, .custom-dd-body .modal-base--full .modal-actions {
display: block;
}
.custom-dd-body .single-body .custom-section-card {
padding-top: 4.8rem;
}
.custom-dd-body .single-body .custom-section-card.no-padding {
padding-top: 0;
}
.custom-dd-body .single-body .custom-section-card .section-header {
gap: var(--nb-common-grid-gap);
align-items: flex-end;
}
.custom-dd-body .single-body .custom-section-card .section-header .h7-text {
flex: 1;
}
.custom-dd-body .single-body .custom-section-card .section-header .header-actions {
display: flex;
gap: 0.8rem;
}
.custom-dd-body .single-body .custom-section-card .tables-flex-container {
padding-top: 1.6rem;
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 2.4rem;
}
.custom-dd-body .single-body .custom-section-card .custom-table-wrapper {
padding-top: 1.6rem;
}
.custom-dd-body .single-body .custom-section-card .empty-state {
margin-top: 1.6rem;
padding: 1.6rem 2.4rem;
display: flex;
flex-direction: row;
align-items: center;
gap: 0.8rem;
background-color: var(--tk-surface-toned);
border: 1px solid var(--tk-border-solid-3);
}
.custom-dd-body .single-body .custom-section-card .empty-state .header-for-empty {
flex: 1;
color: var(--tk-ink-main-secondary);
}
.custom-dd-body .single-body .custom-section-card .h7-text {
display: flex;
flex-direction: row;
gap: 2rem;
align-items: center;
}
.custom-dd-body .single-body .custom-section-card .h7-text span:not(.translation_missing) {
color: --tk-ink-main-toned;
}
.custom-dd-body .flash-error {
background-color: transparent;
padding: 0;
text-align: left;
color: var(--tk-ink-other-danger);
}
.custom-dd-body .custom-flashes {
position: fixed;
width: 100%;
bottom: 0;
margin-bottom: 0;
z-index: 9999;
pointer-events: none;
left: 0;
padding-left: var(--main-content-side-left);
padding-right: var(--main-content-side-right);
}
.custom-dd-body .custom-flashes .flash {
pointer-events: auto;
position: relative;
background-color: var(--tk-surface-elevated, #fff);
margin: 1.6rem 0 2.4rem auto;
width: fit-content;
min-width: 48.8rem;
max-width: 100%;
box-shadow: 0 0.4rem 1.2rem rgba(35, 31, 32, 0.2);
border-radius: 0.4rem;
overflow: hidden;
transition: opacity 0.4s ease, transform 0.4s ease;
padding: 1.6rem;
border: 1.5px solid transparent;
color: var(--tk-ink-main-primary);
}
.custom-dd-body .custom-flashes .flash.no-visible {
opacity: 0;
transform: translateY(1rem);
}
.custom-dd-body .custom-flashes .flash .flash-text .title {
color: inherit;
text-align: left;
padding-right: 2.2rem;
}
.custom-dd-body .custom-flashes .flash .flash-text .body-xs-text {
color: inherit;
}
.custom-dd-body .custom-flashes .flash .ico-container {
width: 2.2rem;
height: 2.2rem;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22' fill='none'%3E%3Cpath d='M11.2265 0V9.85685H21.0833V11.2319H12.2013L17.4417 16.4722L16.4696 17.4444L11.2265 12.2013V21.0833H9.85148V11.2319H0V9.85685H8.882L3.63623 4.61108L4.6084 3.63892L9.85148 8.882V0H11.2265ZM7.3584 14.6944L4.6084 17.4444L3.63623 16.4714L6.38623 13.7214L7.3584 14.6944ZM17.4417 4.61108L14.6917 7.36108L13.7196 6.38892L16.4696 3.63892L17.4417 4.61108Z' fill='%23000'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22' fill='none'%3E%3Cpath d='M11.2265 0V9.85685H21.0833V11.2319H12.2013L17.4417 16.4722L16.4696 17.4444L11.2265 12.2013V21.0833H9.85148V11.2319H0V9.85685H8.882L3.63623 4.61108L4.6084 3.63892L9.85148 8.882V0H11.2265ZM7.3584 14.6944L4.6084 17.4444L3.63623 16.4714L6.38623 13.7214L7.3584 14.6944ZM17.4417 4.61108L14.6917 7.36108L13.7196 6.38892L16.4696 3.63892L17.4417 4.61108Z' fill='%23000'/%3E%3C/svg%3E");
background-color: var(--tk-ink-main-primary);
}
.custom-dd-body .custom-flashes .flash .flash-progress-container {
margin-top: 1.6rem;
height: 0.3rem;
width: 100%;
background: rgba(0, 0, 0, 0.05);
}
.custom-dd-body .custom-flashes .flash .flash-progress-bar {
height: 100%;
width: 100%;
background-color: var(--tk-ink-main-primary);
transform-origin: left;
transform: scaleX(0);
}
.custom-dd-body .custom-flashes .flash .button-close {
cursor: pointer;
margin-left: auto;
width: 2rem;
height: 2rem;
display: block;
}
.custom-dd-body .custom-flashes .flash.flash-notice {
border: 1.5px solid var(--tk-success-muted);
color: var(--tk-ink-other-success);
}
.custom-dd-body .custom-flashes .flash.flash-notice .ico-container {
background-color: var(--tk-ink-other-success);
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18.3802 9.34185C18.4995 9.87547 18.5625 10.4304 18.5625 11C18.5625 15.1767 15.1767 18.5625 11 18.5625C6.82335 18.5625 3.4375 15.1767 3.4375 11C3.4375 6.82335 6.82335 3.4375 11 3.4375C12.563 3.4375 14.0152 3.91165 15.2207 4.72396L16.2085 3.73619C14.742 2.68279 12.9434 2.0625 11 2.0625C6.06395 2.0625 2.0625 6.06395 2.0625 11C2.0625 15.936 6.06395 19.9375 11 19.9375C15.936 19.9375 19.9375 15.936 19.9375 11C19.9375 10.0309 19.7833 9.09784 19.498 8.22401L18.3802 9.34185Z' fill='%23000'/%3E%3Cpath d='M20.6528 4.15275L10.0833 14.7222L5.93058 10.5694L6.90275 9.59725L10.0833 12.7778L19.6806 3.18058L20.6528 4.15275Z' fill='%23000'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18.3802 9.34185C18.4995 9.87547 18.5625 10.4304 18.5625 11C18.5625 15.1767 15.1767 18.5625 11 18.5625C6.82335 18.5625 3.4375 15.1767 3.4375 11C3.4375 6.82335 6.82335 3.4375 11 3.4375C12.563 3.4375 14.0152 3.91165 15.2207 4.72396L16.2085 3.73619C14.742 2.68279 12.9434 2.0625 11 2.0625C6.06395 2.0625 2.0625 6.06395 2.0625 11C2.0625 15.936 6.06395 19.9375 11 19.9375C15.936 19.9375 19.9375 15.936 19.9375 11C19.9375 10.0309 19.7833 9.09784 19.498 8.22401L18.3802 9.34185Z' fill='%23000'/%3E%3Cpath d='M20.6528 4.15275L10.0833 14.7222L5.93058 10.5694L6.90275 9.59725L10.0833 12.7778L19.6806 3.18058L20.6528 4.15275Z' fill='%23000'/%3E%3C/svg%3E");
}
.custom-dd-body .custom-flashes .flash.flash-notice .flash-progress-bar {
background-color: var(--tk-ink-other-success);
}
.custom-dd-body .custom-flashes .flash.flash-alert, .custom-dd-body .custom-flashes .flash.flash-warning {
border: 1.5px solid var(--tk-warning-muted);
color: var(--tk-ink-other-warning);
}
.custom-dd-body .custom-flashes .flash.flash-alert .ico-container, .custom-dd-body .custom-flashes .flash.flash-warning .ico-container {
background-color: var(--tk-ink-other-warning);
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22' fill='none'%3E%3Cpath d='M20.9231 19.4805H1.0769L11 2.29297L20.9231 19.4805ZM3.45809 18.1055H18.5419L11 5.04207L3.45809 18.1055ZM10.3125 15.3465H11.6875V16.7305H10.3125V15.3465ZM10.3125 9.39714H11.6875V13.7513H10.3125V9.39714Z' fill='%23000'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22' fill='none'%3E%3Cpath d='M20.9231 19.4805H1.0769L11 2.29297L20.9231 19.4805ZM3.45809 18.1055H18.5419L11 5.04207L3.45809 18.1055ZM10.3125 15.3465H11.6875V16.7305H10.3125V15.3465ZM10.3125 9.39714H11.6875V13.7513H10.3125V9.39714Z' fill='%23000'/%3E%3C/svg%3E");
}
.custom-dd-body .custom-flashes .flash.flash-alert .flash-progress-bar, .custom-dd-body .custom-flashes .flash.flash-warning .flash-progress-bar {
background-color: var(--tk-ink-other-warning);
}
.custom-dd-body .custom-flashes .flash.flash-error, .custom-dd-body .custom-flashes .flash.flash-danger {
border: 1.5px solid var(--tk-danger-muted);
color: var(--tk-ink-other-danger);
}
.custom-dd-body .custom-flashes .flash.flash-error .ico-container, .custom-dd-body .custom-flashes .flash.flash-danger .ico-container {
background-color: var(--tk-ink-other-danger);
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22' fill='none'%3E%3Cpath d='M18.5625 11C18.5625 6.82335 15.1767 3.4375 11 3.4375C6.82335 3.4375 3.4375 6.82335 3.4375 11C3.4375 15.1767 6.82335 18.5625 11 18.5625C15.1767 18.5625 18.5625 15.1767 18.5625 11ZM10.3125 14.8869H11.6875V16.2708H10.3125V14.8869ZM10.3125 5.72917H11.6875V12.8333H10.3125V5.72917ZM19.9375 11C19.9375 15.936 15.936 19.9375 11 19.9375C6.06395 19.9375 2.0625 15.936 2.0625 11C2.0625 6.06395 6.06395 2.0625 11 2.0625C15.936 2.0625 19.9375 6.06395 19.9375 11Z' fill='%23000'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22' fill='none'%3E%3Cpath d='M18.5625 11C18.5625 6.82335 15.1767 3.4375 11 3.4375C6.82335 3.4375 3.4375 6.82335 3.4375 11C3.4375 15.1767 6.82335 18.5625 11 18.5625C15.1767 18.5625 18.5625 15.1767 18.5625 11ZM10.3125 14.8869H11.6875V16.2708H10.3125V14.8869ZM10.3125 5.72917H11.6875V12.8333H10.3125V5.72917ZM19.9375 11C19.9375 15.936 15.936 19.9375 11 19.9375C6.06395 19.9375 2.0625 15.936 2.0625 11C2.0625 6.06395 6.06395 2.0625 11 2.0625C15.936 2.0625 19.9375 6.06395 19.9375 11Z' fill='%23000'/%3E%3C/svg%3E");
}
.custom-dd-body .custom-flashes .flash.flash-error .flash-progress-bar, .custom-dd-body .custom-flashes .flash.flash-danger .flash-progress-bar {
background-color: var(--tk-ink-other-danger);
}
.custom-dd-body .custom-flashes .flash.flash-info {
border: 1.5px solid var(--tk-info-muted);
color: var(--tk-ink-other-info);
}
.custom-dd-body .custom-flashes .flash.flash-info .ico-container {
background-color: var(--tk-ink-other-info);
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22' fill='none'%3E%3Cpath d='M18.5625 11C18.5625 6.82335 15.1767 3.4375 11 3.4375C6.82335 3.4375 3.4375 6.82335 3.4375 11C3.4375 15.1767 6.82335 18.5625 11 18.5625C15.1767 18.5625 18.5625 15.1767 18.5625 11ZM10.3125 10.0833H11.6875V15.3542H10.3125V10.0833ZM10.3125 6.64583H11.6875V8.02979H10.3125V6.64583ZM19.9375 11C19.9375 15.936 15.936 19.9375 11 19.9375C6.06395 19.9375 2.0625 15.936 2.0625 11C2.0625 6.06395 6.06395 2.0625 11 2.0625C15.936 2.0625 19.9375 6.06395 19.9375 11Z' fill='%23000'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22' fill='none'%3E%3Cpath d='M18.5625 11C18.5625 6.82335 15.1767 3.4375 11 3.4375C6.82335 3.4375 3.4375 6.82335 3.4375 11C3.4375 15.1767 6.82335 18.5625 11 18.5625C15.1767 18.5625 18.5625 15.1767 18.5625 11ZM10.3125 10.0833H11.6875V15.3542H10.3125V10.0833ZM10.3125 6.64583H11.6875V8.02979H10.3125V6.64583ZM19.9375 11C19.9375 15.936 15.936 19.9375 11 19.9375C6.06395 19.9375 2.0625 15.936 2.0625 11C2.0625 6.06395 6.06395 2.0625 11 2.0625C15.936 2.0625 19.9375 6.06395 19.9375 11Z' fill='%23000'/%3E%3C/svg%3E");
}
.custom-dd-body .custom-flashes .flash.flash-info .flash-progress-bar {
background-color: var(--tk-ink-other-info);
}
.custom-dd-body .main-content__body.single-body .input-table-form {
position: relative;
margin: calc(0px - var(--table-padding-top-bottom)) calc(0px - var(--table-padding-sides));
max-height: 4.5rem;
}
.custom-dd-body .main-content__body.single-body .input-table-form .chip {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 0.6rem;
border-radius: var(--nb-common-radius-control-soft);
margin-top: 0;
margin-bottom: 0;
}
.custom-dd-body .main-content__body.single-body .input-table-form .chip svg {
margin-right: 0;
}
.custom-dd-body .main-content__body.single-body .input-table-form input.text-input {
height: 4.4rem;
max-height: 4.4rem;
border-radius: 0;
width: 100%;
border-color: transparent;
padding: 0 1.1rem;
font-size: var(--tg-styles-body-s-size, 1.6rem);
border-color: var(--tk-primary-muted);
letter-spacing: var(--tg-styles-body-s-ls);
}
@media (hover: hover) {
.custom-dd-body .main-content__body.single-body .input-table-form input.text-input:hover {
border-color: var(--tk-primary-base);
}
}
.custom-dd-body .main-content__body.single-body .input-table-form input.text-input:focus {
border-color: var(--tk-primary-base);
}
.custom-dd-body #bullet-footer {
border-radius: 0;
border: var(--nb-common-stroke-m, 1.5px) solid var(--tk-control-danger-subtle-outline, #FFA2A2);
background: var(--tk-control-danger-subtle-fill);
color: var(--tk-control-danger-subtle-content, #C10007);
cursor: unset;
}
.custom-dd-body #bullet-footer summary {
font-weight: var(--tg-styles-heading-h8-w);
cursor: pointer;
-webkit-transition: var(--def-trans-prop) var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
transition: var(--def-trans-prop) var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
}
@media (hover: hover) {
.custom-dd-body #bullet-footer summary:hover {
background: var(--tk-control-danger-subtle-outline);
}
}
.custom-dd-body #bullet-footer div {
cursor: unset;
}
.custom-dd-body .tabs-container {
display: flex;
flex-direction: row;
padding: 0.45rem;
border-radius: var(--nb-common-radius-control-pill);
border: var(--nb-common-stroke-m) solid var(--tk-control-neutral-subtle-outline);
position: relative;
background-color: var(--tk-control-neutral-subtle-fill);
}
.custom-dd-body .tabs-container .tab {
color: var(--tk-control-neutral-outlined-content);
padding: 0.4rem 1.2rem;
cursor: pointer;
-webkit-transition: var(--def-trans-prop) var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
transition: var(--def-trans-prop) var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
}
@media (hover: hover) {
.custom-dd-body .tabs-container .tab:hover {
opacity: 0.7;
}
}
.custom-dd-body .tabs-container .outline-element {
border: var(--nb-common-stroke-m) solid var(--tk-control-neutral-outlined-outline);
border-radius: var(--nb-common-radius-control-pill);
position: absolute;
width: 0;
height: 0;
top: 0.45rem;
left: 0;
pointer-events: none;
-webkit-transition: var(--def-trans-prop) var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
transition: var(--def-trans-prop) var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
}
.custom-dd-body .add-progress-wrap {
width: 100%;
}
.custom-dd-body .add-progress-container {
display: flex;
width: 80%;
color: var(--tk-control-disabled-outlined-content);
gap: var(--gap-12);
}
@media (max-width: 1220px) {
.custom-dd-body .add-progress-container {
width: 100%;
}
}
.custom-dd-body .add-progress-container .step {
display: flex;
gap: var(--gap-4);
align-items: center;
position: relative;
}
.custom-dd-body .add-progress-container .step:not(:first-child) {
flex-grow: 1;
max-width: 22rem;
}
.custom-dd-body .add-progress-container .step:not(:first-child)::before {
content: "";
display: block;
width: 100%;
border: 1.5px dashed var(--tk-control-disabled-outlined-content);
height: 1.5px;
margin-right: var(--gap-4);
}
.custom-dd-body .add-progress-container .step .step-number {
height: 2.4rem;
min-width: 2.4rem;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--tk-surface-elevated);
color: var(--tk-control-disabled-outlined-content);
border: 1.5px solid var(--tk-control-disabled-outlined-content);
}
.custom-dd-body .add-progress-container .step .step-text {
white-space: nowrap;
}
.custom-dd-body .add-progress-container .step.active, .custom-dd-body .add-progress-container .step.valid-ok, .custom-dd-body .add-progress-container .step.done {
color: var(--tk-primary-base);
}
.custom-dd-body .add-progress-container .step.active .step-number, .custom-dd-body .add-progress-container .step.valid-ok .step-number, .custom-dd-body .add-progress-container .step.done .step-number {
border-color: var(--tk-primary-base);
}
.custom-dd-body .add-progress-container .step.valid-ok .step-number, .custom-dd-body .add-progress-container .step.done .step-number {
color: var(--tk-primary-base);
background-color: var(--tk-surface-elevated);
}
.custom-dd-body .add-progress-container .step.valid-ok::before, .custom-dd-body .add-progress-container .step.done::before {
border: 1.5px solid var(--tk-primary-muted);
}
.custom-dd-body .add-progress-container .step.active .step-number {
color: var(--tk-surface-elevated);
background-color: var(--tk-primary-base);
}
.custom-dd-body .add-progress-container .step.active::before {
border: 1.5px solid var(--tk-primary-base);
}
.custom-dd-body .modal-base--sidebar .add-progress-container {
width: 100%;
}
.custom-dd-body .nested-has-many-fieldset.has-records .empty-state-wrapper {
display: none;
}
.custom-dd-body .nested-has-many-fieldset.has-records .has-content-state-wrapper, .custom-dd-body .nested-has-many-fieldset.has-records .counter, .custom-dd-body .nested-has-many-fieldset.has-records .bottom-add-button {
display: block;
}
.custom-dd-body .nested-has-many-fieldset .empty-state-wrapper {
display: block;
}
.custom-dd-body .nested-has-many-fieldset .has-content-state-wrapper, .custom-dd-body .nested-has-many-fieldset .counter, .custom-dd-body .nested-has-many-fieldset .bottom-add-button {
display: none;
}
.custom-dd-body .nested-has-many-fieldset tr.nested-fields .field-unit__label {
display: none;
}
.custom-dd-body .nested-has-many-fieldset .empty-state-container {
border: var(--nb-common-stroke-s, 1px) solid var(--tk-border-solid-3);
background: var(--tk-surface-toned);
padding: 1.6rem 2.4rem;
}
.custom-dd-body .nested-has-many-fieldset .empty-state-container .empty-msg.body-l-text {
color: var(--tk-ink-main-secondary);
}
.custom-dd-body .two-views-wrap .boxes-container {
display: none;
grid-template-columns: repeat(3, 1fr);
gap: var(--gap-9);
}
.custom-dd-body .two-views-wrap .boxes-container .single-box {
border: 1px solid var(--tk-border-translucent-2, rgba(38, 34, 35, 0.2));
background: var(--tk-surface-elevated, #FFF);
padding: var(--gap-9);
display: flex;
flex-direction: column;
}
.custom-dd-body .two-views-wrap .boxes-container .single-box .box-label {
color: var(--tk-ink-main-toned);
}
.custom-dd-body .two-views-wrap .boxes-container .single-box .progress-bar {
width: calc(100% - 0.8rem);
height: 0.6rem;
background-color: var(--tk-border-translucent-1);
position: relative;
margin-left: 0.4rem;
}
.custom-dd-body .two-views-wrap .boxes-container .single-box .progress-bar::before, .custom-dd-body .two-views-wrap .boxes-container .single-box .progress-bar::after {
position: absolute;
height: 100%;
content: "";
display: block;
width: 0.4rem;
top: 0;
left: -0.4rem;
background-color: var(--tk-primary-base);
z-index: 2;
}
.custom-dd-body .two-views-wrap .boxes-container .single-box .progress-bar::after {
left: unset;
right: -0.4rem;
}
.custom-dd-body .two-views-wrap .boxes-container .single-box .progress-bar .bar-in {
position: absolute;
height: 100%;
background-color: var(--tk-primary-base);
left: 0;
top: 0;
}
.custom-dd-body .two-views-wrap.box-view table {
display: none;
}
.custom-dd-body .two-views-wrap.box-view .boxes-container {
display: grid;
}
.custom-dd-body .two-views-wrap.box-view .wrap-button {
display: none;
}
html.custom-dd-html.no-breadcrumbs .breadcrumbs-global-container {
display: none;
}
html.custom-dd-html.no-breadcrumbs .content-global {
max-height: calc(100vh - (var(--main-content-side-top) + 1px));
height: calc(100vh - (var(--main-content-side-top) + 1px));
}
html.custom-dd-html.no-sidebar .navigation-container {
display: none;
}
html.custom-dd-html.no-sidebar nav.navigation {
min-height: calc(var(--breadcrumbs-height) + 1px);
max-height: calc(var(--breadcrumbs-height) + 1px);
border-bottom-right-radius: 0px !important;
}
html.custom-dd-html.no-sidebar nav.navigation .logo-container {
border-bottom: none;
}
html.custom-dd-html.border-radius nav.navigation,
html.custom-dd-html.border-radius nav.navigation-version2 {
border-top-left-radius: var(--nb-common-radius-layout-soft);
border-bottom-left-radius: var(--nb-common-radius-layout-soft);
border-bottom-right-radius: var(--nb-common-radius-layout-soft);
}
html.custom-dd-html.border-radius .breadcrumbs-global-container {
border-top-right-radius: var(--nb-common-radius-layout-soft);
border-bottom-right-radius: var(--nb-common-radius-layout-soft);
}
html.custom-dd-html.border-radius.no-breadcrumbs nav.navigation {
border-top-right-radius: var(--nb-common-radius-layout-soft);
}
html.custom-dd-html.border-radius .user-profile-wrapper .user-initials {
border-radius: var(--nb-common-radius-layout-sharp);
}
html.custom-dd-html.border-radius .modal-content {
border-radius: var(--nb-common-radius-layout-soft);
}
html.custom-dd-html.border-radius .login-page .login-form .form-header,
html.custom-dd-html.border-radius .login-page .login-form .form-content {
border-radius: var(--nb-common-radius-layout-soft);
}
html.custom-dd-html.border-radius .login-page .login-form .form-content .content-title::after {
border-radius: var(--nb-common-radius-layout-sharp, 4px);
}
html.custom-dd-html.border-radius {
--table-radius: var(--nb-common-radius-layout, 12px);
}
html.custom-dd-html.border-radius table {
border-collapse: separate;
border-spacing: 0;
width: 100%;
border: none;
border-radius: var(--table-radius);
overflow: clip;
}
html.custom-dd-html.border-radius table.radius-sharp {
--table-radius: var(--nb-common-radius-layout-sharp);
}
html.custom-dd-html.border-radius table.radius-soft {
--table-radius: var(--nb-common-radius-layout-soft);
}
html.custom-dd-html.border-radius table thead,
html.custom-dd-html.border-radius table tbody,
html.custom-dd-html.border-radius table tr,
html.custom-dd-html.border-radius table th,
html.custom-dd-html.border-radius table td {
border: none;
border-radius: 0;
}
html.custom-dd-html.border-radius table th,
html.custom-dd-html.border-radius table td {
border-top: var(--nb-common-stroke-s, 1px) solid var(--tk-border-solid-2, #D1D1D1);
border-left: var(--nb-common-stroke-s, 1px) solid var(--tk-border-solid-2, #D1D1D1);
}
html.custom-dd-html.border-radius table th:last-child,
html.custom-dd-html.border-radius table td:last-child {
border-right: var(--nb-common-stroke-s, 1px) solid var(--tk-border-solid-2, #D1D1D1);
}
html.custom-dd-html.border-radius table tbody tr:last-child td {
border-bottom: var(--nb-common-stroke-s, 1px) solid var(--tk-border-solid-2, #D1D1D1);
}
html.custom-dd-html.border-radius table > thead:first-child tr:first-child th:first-child,
html.custom-dd-html.border-radius table > thead:first-child tr:first-child td:first-child,
html.custom-dd-html.border-radius table > tbody:first-child tr:first-child th:first-child,
html.custom-dd-html.border-radius table > tbody:first-child tr:first-child td:first-child {
border-top-left-radius: var(--table-radius);
}
html.custom-dd-html.border-radius table > thead:first-child tr:first-child th:last-child,
html.custom-dd-html.border-radius table > thead:first-child tr:first-child td:last-child,
html.custom-dd-html.border-radius table > tbody:first-child tr:first-child th:last-child,
html.custom-dd-html.border-radius table > tbody:first-child tr:first-child td:last-child {
border-top-right-radius: var(--table-radius);
}
html.custom-dd-html.border-radius table tbody tr:last-child td:first-child {
border-bottom-left-radius: var(--table-radius);
}
html.custom-dd-html.border-radius table tbody tr:last-child td:last-child {
border-bottom-right-radius: var(--table-radius);
}
html.custom-dd-html table.no-border-radius {
border-radius: 0px !important;
}
html.custom-dd-html table.no-border-radius th,
html.custom-dd-html table.no-border-radius td {
border-top-left-radius: 0px !important;
border-top-right-radius: 0px !important;
border-bottom-left-radius: 0px !important;
border-bottom-right-radius: 0px !important;
}
.custom-dd-body .dot {
display: inline-flex;
justify-content: center;
align-items: center;
width: 2.4rem;
height: 2.4rem;
}
.custom-dd-body .dot::after {
content: "";
display: block;
width: 0.8rem;
height: 0.8rem;
border-radius: 100%;
border: 0.3rem solid var(--tk-surface-elevated);
background-color: var(--dot-bg);
}
.custom-dd-body .dot.dot--neutral:after {
--dot-bg: var(--tk-control-neutral-filled-fill);
}
.custom-dd-body .dot.dot--primary:after {
--dot-bg: var(--tk-control-primary-filled-fill);
}
.custom-dd-body .dot.dot--secondary:after {
--dot-bg: var(--tk-control-secondary-filled-fill);
}
.custom-dd-body .dot.dot--tertiary:after {
--dot-bg: var(--tk-control-tertiary-filled-fill);
}
.custom-dd-body .dot.dot--danger:after {
--dot-bg: var(--tk-control-danger-filled-fill);
}
.custom-dd-body .dot.dot--warning:after {
--dot-bg: var(--tk-control-warning-filled-fill);
}
.custom-dd-body .dot.dot--success:after {
--dot-bg: var(--tk-control-success-filled-fill);
}
.custom-dd-body .dot.dot--info:after {
--dot-bg: var(--tk-control-info-filled-fill);
}
.custom-dd-body .popup-wrap {
position: relative;
}
.custom-dd-body .popup-wrap .popup-content.min-width-1 {
min-width: 31.8rem;
}
.custom-dd-body .popup-wrap .popup-content {
cursor: default;
position: absolute;
top: calc(100% + 0.8rem);
right: 0;
z-index: 100;
padding: var(--space-2);
background-color: var(--tk-surface-elevated);
border-radius: var(--nb-common-radius-control);
box-shadow: 0 0.4rem 1.2rem 0 rgba(35, 31, 32, 0.2);
display: flex;
flex-direction: column;
-webkit-transition: var(--def-trans-prop) var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
transition: var(--def-trans-prop) var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
opacity: 0;
visibility: hidden;
}
.custom-dd-body .popup-wrap .popup-content .popup-link {
cursor: pointer;
display: flex;
flex-direction: row;
gap: var(--space-4);
padding: var(--gap-5) var(--gap-15);
align-items: center;
border-radius: var(--nb-common-radius-control-sharp);
color: var(--tk-ink-main-primary, #262223);
-webkit-transition: var(--def-trans-prop) var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
transition: var(--def-trans-prop) var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
}
.custom-dd-body .popup-wrap .popup-content .popup-link svg,
.custom-dd-body .popup-wrap .popup-content .popup-link .popup-icon {
width: 2.4rem;
height: 2.4rem;
display: block;
}
.custom-dd-body .popup-wrap .popup-content .popup-link:hover {
background-color: var(--tk-control-primary-state-hover-alt-fill);
}
.custom-dd-body .popup-wrap.open .popup-content {
opacity: 1 !important;
visibility: visible !important;
}
.custom-dd-html.login-page {
min-width: unset;
}
@media (max-width: 1440px) {
.custom-dd-html.login-page {
font-size: 8px;
}
}
.custom-dd-body.login-page {
width: 100vw;
height: 100vh;
position: relative;
--label-header-padding: 2.6rem;
padding: 0;
}
.custom-dd-body.login-page .login-form {
display: grid;
grid-template-columns: 37.7258235919fr 60.4675876727fr;
width: 100%;
height: 100%;
gap: var(--space-10);
padding-bottom: var(--main-content-side-bottom);
padding-top: var(--main-content-side-bottom);
padding-left: var(--container-padd);
padding-right: var(--container-padd);
overflow: auto;
min-width: 1023px;
}
.custom-dd-body.login-page .login-form .container-form {
padding: var(--nb-template-gap-s);
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 2.4rem;
}
.custom-dd-body.login-page .login-form .form-header {
display: flex;
flex-direction: row;
gap: var(--space-16);
align-items: center;
background: var(--tk-surface-base);
}
.custom-dd-body.login-page .login-form .form-header svg path {
fill: var(--logo-color);
}
.custom-dd-body.login-page .login-form .form-header .label {
padding: var(--label-header-padding) 0;
}
.custom-dd-body.login-page .login-form .form-content {
background: var(--tk-surface-base);
display: flex;
flex-direction: column;
gap: var(--nb-template-gap-m);
position: relative;
max-width: var(--grid-span-4, 488px);
margin: 0 auto;
}
.custom-dd-body.login-page .login-form .form-content .overline-text.blue {
color: var(--tk-ink-other-accent, #2349CD);
}
.custom-dd-body.login-page .login-form .form-content .label {
padding-left: var(--gap-4);
padding-bottom: var(--gap-2);
}
.custom-dd-body.login-page .login-form .form-content .content-title {
position: relative;
z-index: 10;
width: fit-content;
}
.custom-dd-body.login-page .login-form .form-content .content-title::after {
content: "";
position: absolute;
background-color: var(--tk-surface-highlight-1);
height: 0.4em;
width: calc(100% + 0.3em);
left: -0.15em;
bottom: 0em;
z-index: -1;
}
.custom-dd-body.login-page .login-form .form-content .content-in {
display: flex;
flex-direction: column;
gap: var(--nb-molecule-forms-gap-m);
}
.custom-dd-body.login-page .login-form .form-content .content-in .container-password .password-input-in {
position: relative;
}
.custom-dd-body.login-page .login-form .form-content .content-in .container-password .password-input-in .icon {
position: absolute;
width: 2.4rem;
height: 2.4rem;
display: block;
right: var(--nb-atom-input-xl-padding-h);
top: calc(var(--nb-atom-input-xl-padding-v) + 1px);
cursor: pointer;
}
.custom-dd-body.login-page .login-form .form-content .content-in .container-password .password-input-in input {
padding-right: calc(var(--gap-13) + var(--nb-atom-input-xl-padding-h));
}
.custom-dd-body.login-page .login-form .form-content .content-in .container-password .password-input-in .show-pass-icon {
display: none;
}
.custom-dd-body.login-page .login-form .form-content .content-in .container-password .password-input-in.show .show-pass-icon {
display: block;
}
.custom-dd-body.login-page .login-form .form-content .content-in .container-password .password-input-in.show .hide-pass-icon {
display: none;
}
.custom-dd-body.login-page .login-form .form-content .content-in .remember-me-container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: var(--gap-4);
}
.custom-dd-body.login-page .login-form .form-content .content-in .remember-me-container .remember-in {
display: flex;
flex-direction: row;
align-items: center;
gap: var(--gap-12);
}
.custom-dd-body.login-page .login-form .form-content .content-in .remember-me-container .remember-in .remember-label {
color: var(--tk-ink-main-primary);
}
.custom-dd-body.login-page .login-form .form-content .content-in button {
margin-top: var(--gap-4);
}
.custom-dd-body.login-page .login-form .form-content .content-footer {
display: flex;
flex-direction: column;
gap: var(--gap-5);
align-items: flex-start;
}
.custom-dd-body.login-page .login-form .container-slider {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
}
.custom-dd-body.login-page .login-form .container-slider > div.slide-in {
grid-column: 1;
grid-row: 1;
opacity: 0;
-webkit-transition: var(--def-trans-prop) var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
transition: var(--def-trans-prop) var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
}
.custom-dd-body.login-page .login-form .container-slider > div.slide-in.active {
opacity: 1;
z-index: 10;
}
.custom-dd-body.login-page .login-form .container-slider .rails-container {
width: fit-content;
height: fit-content;
grid-column: 1;
grid-row: 1;
margin-top: auto;
margin-left: auto;
margin-right: 0.8rem;
margin-bottom: 0.8rem;
padding: 0.3rem 0.4rem;
z-index: 50;
}
.custom-dd-body.login-page .login-form .container-slider .rails-container .tab-marker {
height: calc(100% - 0.6rem);
top: 0.3rem;
left: -0.1rem;
}
.custom-dd-body.login-page .login-form .container-slider .rails-container .btn {
width: 4.4rem;
height: 4.4rem !important;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.custom-dd-body.login-page .login-form .container-slider .rails-container .btn:focus {
outline: none !important;
}
.custom-dd-body.login-page .login-form .container-slider .rails-container .btn > span {
position: relative;
z-index: 1;
color: var(--tk-ink-main-primary, #142571);
}
.custom-dd-body.login-page .login-form .container-slider .rails-container .btn .progress-bar {
position: absolute;
top: 0;
left: 0;
width: 0%;
height: 100%;
background-color: var(--tk-control-primary-outlined-outline);
z-index: 2;
overflow: hidden;
display: flex;
align-items: center;
}
.custom-dd-body.login-page .login-form .container-slider .rails-container .btn .progress-bar span {
position: absolute;
width: 4.4rem;
text-align: center;
color: #ffffff;
}
.custom-dd-body.login-page .login-form .container-slider .slide-in {
position: relative;
border-radius: 3.2rem;
overflow: clip;
position: relative;
z-index: 1;
}
.custom-dd-body.login-page .login-form .container-slider .slide-in .slide-content-bg {
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
}
.custom-dd-body.login-page .login-form .container-slider .slide-in .slide-content-bg img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.custom-dd-body.login-page .login-form .container-slider .slide-in .slide-content {
width: 100%;
height: 100%;
}
.custom-dd-body.login-page .login-form .container-slider .slide-in .slide-content:not(.slide-content-has-bg) {
background: linear-gradient(0deg, var(--tk-surface-elevated, #FFF) 0%, var(--tk-primary-muted, #A3B8FF) 100%), var(--tk-surface-elevated, #FFF);
}
.custom-dd-body.login-page .login-form .container-slider .slide-in .slide-content:not(.slide-content-has-bg).dark {
background: linear-gradient(0deg, var(--br-primary-700) 0%, var(--br-primary-1100) 100%), var(--tk-surface-elevated, #FFF);
}
.custom-dd-body.login-page .login-form .container-slider .slide-in .slide-content .slide-content-body {
padding: 2.4rem;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
@media (max-width: 1440px) {
.custom-dd-body.login-page .login-form .container-slider .slide-in .slide-content .slide-content-body {
padding: 4.8rem;
}
}
.custom-dd-body.login-page .login-form .container-slider .slide-in .slide-content .slide-content-body .slide-content-body-in {
padding-top: 4rem;
padding-bottom: 4rem;
}
.custom-dd-body.login-page .login-form .container-slider .slide-in.type1 .slide-content-body .slide-content-body-in {
max-width: var(--grid-span-6, 744px);
display: flex;
flex-direction: column;
gap: var(--space-13, 36px);
}
.custom-dd-body.login-page .login-form .container-slider .slide-in.type1 .slide-content-body .slide-content-small-title {
color: var(--br-secondary-500);
}
.custom-dd-body.login-page .login-form .container-slider .slide-in.type1 .slide-content-body .slide-content-heading {
display: flex;
flex-direction: column;
}
.custom-dd-body.login-page .login-form .container-slider .slide-in.type1 .slide-content-body .slide-content-heading .slide-content-title-white {
color: var(--br-neutral-100, #F5F5F5);
letter-spacing: -0.02em;
}
.custom-dd-body.login-page .login-form .container-slider .slide-in.type1 .slide-content-body .slide-content-heading .slide-content-title-blue {
color: var(--br-primary-400, #7A98FF);
letter-spacing: -0.02em;
}
.custom-dd-body.login-page .login-form .container-slider .slide-in.type1 .slide-content-body .slide-content-description {
color: var(--br-neutral-100-opacity-71, rgba(245, 245, 245, 0.71));
}
.custom-dd-body.login-page .login-form .container-slider .slide-in.type1 .slide-content-body .slide-content-chips {
display: flex;
flex-wrap: wrap;
gap: var(--gap-4);
}
.custom-dd-body.login-page .login-form .container-slider .slide-in.type1 .slide-content-body .slide-content-chips .chip {
border: var(--nb-common-stroke-m, 1.5px) solid var(--br-primary-700, #2349CD);
background: var(--br-primary-1000, #142571);
color: var(--br-primary-300, #A3B8FF);
}
.custom-dd-body.login-page .login-form .container-slider .slide-in.type1 .slide-content-body .slide-content-actions .button {
background: linear-gradient(180deg, var(--br-primary-200, #D0D8F7) 0%, var(--br-primary-400, #7A98FF) 100%), var(--tk-control-primary-filled-fill, #A3B8FF);
border: none;
color: var(--ui-other-black, #000);
}
@media (hover: hover) {
.custom-dd-body.login-page .login-form .container-slider .slide-in.type1 .slide-content-body .slide-content-actions .button:hover {
opacity: 0.7;
}
}
.custom-dd-body.login-page .login-form .container-slider .slide-in.type2 .slide-content-body .slide-content-body-in {
max-width: var(--grid-span-6, 744px);
display: flex;
flex-direction: column;
align-items: center;
gap: 2.4rem;
}
.custom-dd-body.login-page .login-form .container-slider .slide-in.type2 .slide-content-body .slide-content-graphic {
width: 36rem;
aspect-ratio: 1;
}
.custom-dd-body.login-page .login-form .container-slider .slide-in.type2 .slide-content-body .slide-content-graphic img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: 2.7rem;
}
.custom-dd-body.login-page .login-form .container-slider .slide-in.type2 .slide-content-body blockquote {
margin: 0;
text-align: center;
padding-top: 2.4rem;
}
.custom-dd-body.login-page .login-form .container-slider .slide-in.type2 .slide-content-body .slide-content-quote-author {
color: var(--tk-ink-other-accent, #2349CD);
}
.custom-dd-body.login-page .login-form .container-slider .slide-in.type3 .slide-content-body-in {
max-width: var(--grid-span-8, 1000px);
display: flex;
flex-direction: column;
gap: 3.2rem;
}
.custom-dd-body.login-page .login-form .container-slider .slide-in.type3 .slide-content-small-title {
color: var(--br-primary-400, #7A98FF);
}
.custom-dd-body.login-page .login-form .container-slider .slide-in.type3 .slide-content-heading {
color: var(--br-neutral-100, #F5F5F5);
margin-top: -2rem;
}
.custom-dd-body.login-page .login-form .container-slider .slide-in.type3 .slide-content-description {
color: var(--br-neutral-100, #F5F5F5);
max-width: 49rem;
}
.custom-dd-body.login-page .login-form .container-slider .slide-in.type3 .image-compare-container {
position: relative;
overflow: hidden;
user-select: none;
container-type: inline-size;
border-radius: var(--nb-common-radius-layout, 12px);
}
.custom-dd-body.login-page .login-form .container-slider .slide-in.type3 .image-compare-after img {
display: block;
width: 100%;
height: auto;
pointer-events: none;
}
.custom-dd-body.login-page .login-form .container-slider .slide-in.type3 .image-compare-before {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: var(--compare-pos, 50%);
overflow: hidden;
z-index: 1;
}
.custom-dd-body.login-page .login-form .container-slider .slide-in.type3 .image-compare-before::after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(7, 22, 89, 0.1215686275);
}
.custom-dd-body.login-page .login-form .container-slider .slide-in.type3 .image-compare-before img {
display: block;
width: 100cqw;
max-width: none;
height: 100%;
object-fit: cover;
pointer-events: none;
}
.custom-dd-body.login-page .login-form .container-slider .slide-in.type3 .image-compare-divider {
position: absolute;
top: 0;
bottom: 0;
left: var(--compare-pos, 50%);
width: 2px;
background-color: var(--tk-control-primary-filled-fill, #234FE6);
pointer-events: none;
transform: translateX(-50%);
z-index: 2;
}
.custom-dd-body.login-page .login-form .container-slider .slide-in.type3 .image-compare-divider::before {
content: "";
display: block;
position: absolute;
width: 4rem;
height: var(--nb-common-control-size-3xl, 80px);
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 1000px;
border: var(--nb-common-stroke-l, 2px) solid var(--tk-primary-base, #234FE6);
background: #FFF;
box-shadow: 0 4px 12px 0 rgba(35, 31, 32, 0.2);
}
.custom-dd-body.login-page .login-form .container-slider .slide-in.type3 .image-compare-divider .divider-in {
position: absolute;
height: 100%;
}
.custom-dd-body.login-page .login-form .container-slider .slide-in.type3 .image-compare-divider .divider-in .divider-arrow {
position: absolute;
color: var(--tk-primary-base);
width: 2.8rem;
height: 2.8rem;
top: 50%;
transform: translateY(-50%);
}
.custom-dd-body.login-page .login-form .container-slider .slide-in.type3 .image-compare-divider .divider-in .divider-arrow.divider-arrow-prev {
left: -2.1rem;
}
.custom-dd-body.login-page .login-form .container-slider .slide-in.type3 .image-compare-divider .divider-in .divider-arrow.divider-arrow-next {
left: -0.5rem;
}
.custom-dd-body.login-page .login-form .container-slider .slide-in.type3 .image-compare-slider {
position: absolute;
top: 0;
left: -2rem;
width: calc(100% + 4rem);
height: 100%;
opacity: 0;
margin: 0;
z-index: 10;
padding: 0;
appearance: none;
-webkit-appearance: none;
cursor: default;
}
.custom-dd-body.login-page .login-form .container-slider .slide-in.type3 .image-compare-slider::-webkit-slider-thumb {
appearance: none;
-webkit-appearance: none;
width: 4rem;
height: 2000px;
cursor: grab;
}
.custom-dd-body.login-page .login-form .container-slider .slide-in.type3 .image-compare-slider::-moz-range-thumb {
width: 24px;
height: 2000px;
cursor: grab;
border: none;
background: transparent;
}
.custom-dd-body.login-page .login-form .container-slider .slide-in.type3 .image-compare-slider:active::-webkit-slider-thumb {
cursor: grabbing;
}
.custom-dd-body.login-page .login-form .container-slider .slide-in.type3 .image-compare-slider:active::-moz-range-thumb {
cursor: grabbing;
}
@media (hover: hover) {
.custom-dd-body.login-page .login-form .container-slider .slide-in.type3 .image-compare-container:hover .image-compare-divider::before {
background: var(--tk-primary-base);
}
.custom-dd-body.login-page .login-form .container-slider .slide-in.type3 .image-compare-container:hover .image-compare-divider .divider-arrow {
color: #FFF;
}
}
.custom-dd-body.login-page .login-form .container-slider .slide-in.type4 .slide-content-body-in {
max-width: var(--grid-span-6, 744px);
display: flex;
flex-direction: column;
gap: 2.4rem;
}
.custom-dd-body.login-page .login-form .container-slider .slide-in.type4 .slide-content-small-title {
color: var(--br-primary-400, #7A98FF);
}
.custom-dd-body.login-page .login-form .container-slider .slide-in.type4 .slide-content-heading {
color: var(--br-neutral-100, #F5F5F5);
margin-top: -1.2rem;
}
.custom-dd-body.login-page .login-form .container-slider .slide-in.type4 .slide-content-boxes {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px var(--grid-gutter-0, 24px);
}
.custom-dd-body.login-page .login-form .container-slider .slide-in.type4 .slide-content-boxes .slide-box.slide-box-image {
width: 100%;
aspect-ratio: 1;
}
.custom-dd-body.login-page .login-form .container-slider .slide-in.type4 .slide-content-boxes .slide-box.slide-box-image img {
width: 100%;
height: 100%;
display: block;
border-radius: 1.6rem;
}
.custom-dd-body.login-page .login-form .container-slider .slide-in.type4 .slide-content-boxes .slide-box.slide-box-card {
grid-column: span 2;
border-radius: 1.6rem;
border: 1px solid #D1D1D1;
background: #FFF;
padding: 2.4rem;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.custom-dd-body.login-page .login-form .container-slider .slide-in.type4 .slide-content-boxes .slide-box.slide-box-card .h5-text {
color: var(--tk-ink-other-accent, #2349CD);
}
.custom-dd-body.login-page .login-form .container-slider .slide-in.type4 .slide-content-boxes .slide-box.slide-box-card .slide-box-chips {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 0.8rem;
}
.custom-dd-body.login-page .login-form .container-slider .slide-in.type5 .slide-content-body-in {
max-width: var(--grid-span-8, 1000px);
display: flex;
flex-direction: column;
gap: 2.4rem;
}
.custom-dd-body.login-page .login-form .container-slider .slide-in.type5 .slide-content-small-title {
color: var(--tk-ink-other-accent, #2349CD);
}
.custom-dd-body.login-page .login-form .container-slider .slide-in.type5 .slide-content-heading {
color: var(--tk-ink-main-primary, #212121);
margin-top: -1.2rem;
}
.custom-dd-body.login-page .login-form .container-slider .slide-in.type5 .slide-content-single-image img {
width: 100%;
display: block;
border-radius: var(--nb-common-radius-layout-soft, 20px);
box-shadow: 0 4px 12px 0 rgba(7, 22, 89, 0.2);
}
.custom-dd-body.login-page .login-form .container-slider .slide-in.type5 .slide-content-description {
max-width: 49rem;
}
.custom-dd-body.login-page .login-form .container-slider .slide-in.type5 .slide-content-actions .button {
background: linear-gradient(180deg, var(--br-primary-500, #4F74F3) 0%, var(--br-primary-900, #1A3294) 100%), var(--tk-control-primary-filled-fill, #234FE6);
border: none;
}
@media (hover: hover) {
.custom-dd-body.login-page .login-form .container-slider .slide-in.type5 .slide-content-actions .button:hover {
opacity: 0.8;
}
}
.custom-dd-body.login-page .login-form .container-slider .slide-in.type6 .slide-content-body-in {
max-width: var(--grid-span-6, 744px);
display: flex;
flex-direction: column;
gap: 2.4rem;
}
.custom-dd-body.login-page .login-form .container-slider .slide-in.type6 .slide-content-small-title {
color: var(--tk-ink-other-accent, #2349CD);
}
.custom-dd-body.login-page .login-form .container-slider .slide-in.type6 .slide-content-heading {
color: var(--tk-ink-main-primary, #212121);
margin-top: -1.2rem;
}
.custom-dd-body.login-page .login-form .container-slider .slide-in.type6 .slide-content-info-boxes {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2.4rem;
}
.custom-dd-body.login-page .login-form .container-slider .slide-in.type6 .slide-content-info-boxes .slide-info-box {
padding: var(--nb-organism-card-padding-l, 24px);
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 5.6rem;
border-radius: var(--nb-common-radius-layout, 12px);
}
.custom-dd-body.login-page .login-form .container-slider .slide-in.type6 .slide-content-info-boxes .slide-info-box:nth-child(4n+1) {
background: linear-gradient(180deg, var(--br-primary-600, #234FE6) 0%, var(--br-primary-1000, #142571) 100%);
}
.custom-dd-body.login-page .login-form .container-slider .slide-in.type6 .slide-content-info-boxes .slide-info-box:nth-child(4n+1) .h3-text,
.custom-dd-body.login-page .login-form .container-slider .slide-in.type6 .slide-content-info-boxes .slide-info-box:nth-child(4n+1) .body-s-text {
color: var(--tk-ink-contrast-primary, #F5F5F5);
}
.custom-dd-body.login-page .login-form .container-slider .slide-in.type6 .slide-content-info-boxes .slide-info-box:nth-child(4n+2), .custom-dd-body.login-page .login-form .container-slider .slide-in.type6 .slide-content-info-boxes .slide-info-box:nth-child(4n+3) {
background: var(--tk-surface-elevated, #FFF);
}
.custom-dd-body.login-page .login-form .container-slider .slide-in.type6 .slide-content-info-boxes .slide-info-box:nth-child(4n+2) .h3-text,
.custom-dd-body.login-page .login-form .container-slider .slide-in.type6 .slide-content-info-boxes .slide-info-box:nth-child(4n+2) .body-s-text, .custom-dd-body.login-page .login-form .container-slider .slide-in.type6 .slide-content-info-boxes .slide-info-box:nth-child(4n+3) .h3-text,
.custom-dd-body.login-page .login-form .container-slider .slide-in.type6 .slide-content-info-boxes .slide-info-box:nth-child(4n+3) .body-s-text {
color: var(--tk-ink-other-accent, #2349CD);
}
.custom-dd-body.login-page .login-form .container-slider .slide-in.type6 .slide-content-info-boxes .slide-info-box:nth-child(4n+4) {
background: linear-gradient(0deg, var(--tk-primary-muted, #A3B8FF) 0%, var(--tk-surface-elevated, #FFF) 100%), var(--tk-primary-subtle, #E1E7FA);
}
.custom-dd-body.login-page .login-form .container-slider .slide-in.type6 .slide-content-info-boxes .slide-info-box:nth-child(4n+4) .h3-text,
.custom-dd-body.login-page .login-form .container-slider .slide-in.type6 .slide-content-info-boxes .slide-info-box:nth-child(4n+4) .body-s-text {
color: var(--tk-ink-other-accent, #2349CD);
}
@keyframes progress-fill {
from {
width: 0%;
}
to {
width: 100%;
}
}
.custom-dd-body.login-page .login-form .container-slider.auto .rails-container .btn.active-rail .progress-bar {
animation: progress-fill var(--progress-time) linear forwards;
}
.custom-dd-body.login-page .login-form .container-slider.auto.is-paused .rails-container .btn.active-rail .progress-bar {
animation-play-state: paused;
}
.custom-dd-body .apps-tiles-section:not(:first-child) {
margin-top: 7.2rem;
}
.custom-dd-body .apps-tiles-section .app-tile {
grid-column: span 4;
border-radius: var(--nb-common-radius-layout, 1.2rem);
border: 1px solid var(--tk-border-translucent-1, rgba(33, 33, 33, 0.15));
background: var(--tk-surface-elevated, #FFF);
}
@media (max-width: 1220px) {
.custom-dd-body .apps-tiles-section .app-tile {
grid-column: span 6;
}
}
@media (max-width: 767px) {
.custom-dd-body .apps-tiles-section .app-tile {
grid-column: span 4;
}
}
.custom-dd-body .apps-tiles-section .app-tile .icon-container {
width: 7.2rem;
height: 7.2rem;
aspect-ratio: 1/1;
}
.custom-dd-body .apps-tiles-section .app-tile .icon-container img, .custom-dd-body .apps-tiles-section .app-tile .icon-container svg {
width: 100%;
height: 100%;
object-fit: contain;
}
.custom-dd-body .apps-tiles-section .app-tile .app-title {
color: var(--tk-ink-other-accent, #2349CD);
}
.custom-dd-body .apps-tiles-section .app-tile .app-description {
color: var(--tk-ink-main-secondary, #525252);
}
.custom-dd-body .apps-tiles-section .app-tile .buttons-container {
gap: var(--space-8, 1.6rem);
}
.custom-dd-body .apps-tiles-section .app-tile.inactive .app-title {
color: var(--tk-ink-main-primary, #212121);
}
.custom-dd-body .apps-tiles-section .app-tile.inactive .icon-container {
-webkit-filter: grayscale(100%) brightness(1.1);
filter: grayscale(100%) brightness(1.1);
opacity: 0.6;
}
.dark-mode .custom-dd-body .apps-tiles-section .app-tile.inactive .icon-container {
-webkit-filter: grayscale(100%) brightness(1.3);
filter: grayscale(100%) brightness(1.3);
opacity: 1;
}
.custom-dd-body .main-content__header__body-in .main-content__page-title {
display: flex;
flex-direction: row;
gap: var(--space-8, 16px);
align-items: flex-end;
padding-bottom: var(--space-8, 16px);
}
.custom-dd-body .main-content__header__body-in .title-container {
display: flex;
flex-direction: row;
gap: 1.6rem;
align-items: center;
}
.custom-dd-body .main-content__header__body-in .title-container .icon, .custom-dd-body .main-content__header__body-in .title-container svg {
width: 4.8rem;
height: 4.8rem;
}
.rails-container {
display: flex;
padding: 0.5rem;
align-items: center;
border-radius: var(--nb-common-radius-control-pill, 1000px);
border: 1px solid var(--tk-control-inactive-outline, );
background: var(--tk-control-inactive-fill);
position: relative;
}
.rails-container .tab-marker {
position: absolute;
display: block;
left: 0;
top: 0.5rem;
border: var(--nb-common-stroke-m, 1.5px) solid var(--tk-control-primary-outlined-outline);
border-radius: var(--nb-common-radius-control-pill, 1000px);
height: calc(100% - 1rem);
width: 0;
opacity: 0;
pointer-events: none;
-webkit-transition: var(--def-trans-prop) var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
transition: var(--def-trans-prop) var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
}
.rails-container .btn:not(.active-rail) {
color: var(--tk-control-neutral-state-inactive-content) !important;
}
.rails-container .btn {
border-color: transparent !important;
color: var(--tk-control-neutral-state-inactive-content) !important;
height: 3.2rem !important;
}
@media (hover: hover) {
.rails-container .btn:hover {
background-color: transparent !important;
color: var(--tk-control-primary-outlined-outline) !important;
}
}
.rails-container .btn.active-rail {
color: var(--tk-control-primary-outlined-outline) !important;
}
.custom-dd-body dialog.modal-scroll .breadcrumbs-container-modal-scroll .ico, .custom-dd-body dialog.modal-scroll .breadcrumbs-container-modal-scroll svg {
display: block;
}
.custom-dd-body dialog.modal-scroll .breadcrumbs-container-modal-scroll .breadrcrum-modal-scroll-item .title {
color: var(--tk-ink-main-toned);
}
.custom-dd-body dialog.modal-scroll .breadcrumbs-container-modal-scroll .breadrcrum-modal-scroll-item:last-child .title {
color: var(--tk-ink-main-primary);
}
.custom-dd-body .universal-progress-bar {
width: calc(100% - 0.4rem);
height: 0.4rem;
background-color: var(--tk-border-translucent-1);
position: relative;
margin-left: 0.4rem;
}
.custom-dd-body .universal-progress-bar::before, .custom-dd-body .universal-progress-bar::after {
position: absolute;
height: 100%;
content: "";
display: block;
width: 0.2rem;
top: 0;
left: -0.2rem;
background-color: var(--tk-primary-base);
z-index: 2;
}
.custom-dd-body .universal-progress-bar::after {
left: unset;
right: -0.2rem;
}
.custom-dd-body .universal-progress-bar .bar-in {
position: absolute;
height: 100%;
background-color: var(--tk-primary-base);
left: 0;
top: 0;
}
html.border-radius .universal-progress-bar::before {
border-top-left-radius: var(--nb-common-radius-layout-sharp, 4px);
border-bottom-left-radius: var(--nb-common-radius-layout-sharp, 4px);
}
html.border-radius .universal-progress-bar::after {
border-top-right-radius: var(--nb-common-radius-layout-sharp, 4px);
border-bottom-right-radius: var(--nb-common-radius-layout-sharp, 4px);
}
.sneaky-btn {
display: inline-flex;
justify-content: center;
align-items: center;
position: relative;
border: none;
background: transparent;
padding: 0;
cursor: pointer;
border-radius: var(--nb-common-radius-control-pill, 100rem);
transition: all var(--def-trans-time, 0.2s) ease-in-out;
outline: 0 solid transparent;
outline-offset: calc((var(--sneaky-box-size) - var(--sneaky-icon-size)) / 2 + 3px);
box-sizing: border-box;
--sneaky-col: var(--tk-ink-main-toned, currentColor);
--sneaky-bg: transparent;
--sneaky-h-col: var(--tk-ink-main-primary);
--sneaky-h-bg: var(--tk-control-neutral-state-hover-alt-fill);
--sneaky-a-col: var(--tk-ink-main-toned);
--sneaky-a-bg: var(--tk-control-neutral-state-active-alt-fill);
--sneaky-focus-ring: var(--tk-ink-main-primary);
}
.sneaky-btn::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: var(--sneaky-box-size, 4.4rem);
height: var(--sneaky-box-size, 4.4rem);
border-radius: 50%;
background-color: var(--sneaky-bg);
transition: background-color var(--def-trans-time, 0.2s) ease-in-out;
z-index: 1;
}
.sneaky-btn::after {
content: "";
display: block;
position: relative;
z-index: 2;
width: 100%;
height: 100%;
background-color: var(--sneaky-col);
transition: background-color var(--def-trans-time, 0.3s) ease-in-out;
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center/contain;
mask: url('data:image/svg+xml;utf8,') no-repeat center/contain;
}
.sneaky-btn.active, .sneaky-btn.btn-on {
--sneaky-bg: var(--sneaky-h-bg);
--sneaky-col: var(--sneaky-h-col);
}
.sneaky-btn:focus, .sneaky-btn:focus-visible {
--sneaky-bg: var(--sneaky-h-bg);
--sneaky-col: var(--sneaky-h-col);
outline: var(--nb-common-stroke-l, 2px) solid var(--sneaky-focus-ring);
}
.sneaky-btn:active, .sneaky-btn.is-active {
--sneaky-bg: var(--sneaky-a-bg);
--sneaky-col: var(--sneaky-a-col);
}
@media (hover: hover) {
.sneaky-btn:hover {
--sneaky-bg: var(--sneaky-h-bg);
--sneaky-col: var(--sneaky-h-col);
}
}
.sneaky-btn:disabled, .sneaky-btn.is-disabled {
cursor: not-allowed;
pointer-events: none;
opacity: 0.5;
--sneaky-bg: transparent;
}
.sneaky-btn {
width: var(--nb-common-control-size-3xs, 2.4rem);
height: var(--nb-common-control-size-3xs, 2.4rem);
--sneaky-icon-size: var(--nb-common-control-size-3xs, 2.4rem);
--sneaky-box-size: var(--nb-common-control-size-m, 4.4rem);
}
.sneaky-btn--size-l {
width: var(--nb-common-control-size-2xs, 2.8rem);
height: var(--nb-common-control-size-2xs, 2.8rem);
--sneaky-icon-size: var(--nb-common-control-size-2xs, 2.8rem);
--sneaky-box-size: var(--nb-common-control-size-l, 5.2rem);
}
.sneaky-btn--size-m {
width: var(--nb-common-control-size-3xs, 2.4rem);
height: var(--nb-common-control-size-3xs, 2.4rem);
--sneaky-icon-size: var(--nb-common-control-size-3xs, 2.4rem);
--sneaky-box-size: var(--nb-common-control-size-m, 4.4rem);
}
.sneaky-btn--size-s {
width: var(--nb-common-control-size-4xs, 2rem);
height: var(--nb-common-control-size-4xs, 2rem);
--sneaky-icon-size: var(--nb-common-control-size-4xs, 2rem);
--sneaky-box-size: var(--nb-common-control-size-s, 3.6rem);
}
.sneaky-btn--size-xs {
width: var(--nb-common-control-size-4xs, 2rem);
height: var(--nb-common-control-size-4xs, 2rem);
--sneaky-icon-size: var(--nb-common-control-size-4xs, 2rem);
--sneaky-box-size: var(--nb-common-control-size-xs, 32px);
}
.sneaky-btn--size-2xs {
width: var(--nb-common-control-size-4xs, 2rem);
height: var(--nb-common-control-size-4xs, 2rem);
--sneaky-icon-size: var(--nb-common-control-size-4xs, 2rem);
--sneaky-box-size: var(--nb-common-control-size-2xs, 28px);
}
.custom-dd-body select[multiple] optgroup {
opacity: 0;
}
.custom-dd-body select.ts-hidden-accessible {
border: 0 !important;
clip: rect(0 0 0 0) !important;
clip-path: inset(50%) !important;
height: 1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
width: 1px !important;
white-space: nowrap !important;
}
.custom-dd-body .ts-wrapper.multi {
position: relative;
}
.custom-dd-body .ts-wrapper.multi .ts-dropdown {
position: absolute !important;
top: 100% !important;
left: 0 !important;
right: 0 !important;
z-index: 1050 !important;
}
.custom-dd-body .ts-wrapper.multi .ts-dropdown-content .optgroup-header,
.custom-dd-body .ts-wrapper.multi .ts-dropdown-content .no-results {
padding-left: 0.8rem;
}
.custom-dd-body .ts-wrapper.multi .ts-control {
overflow: clip;
gap: 0.8rem;
padding-top: 1.4rem;
padding-bottom: 1.4rem;
min-height: var(--nb-common-control-size-xl);
height: unset;
}
.custom-dd-body .ts-wrapper.multi .ts-control input {
width: 100% !important;
display: block !important;
}
.custom-dd-body .ts-wrapper.multi .item {
cursor: pointer;
display: flex;
gap: var(--gap-3);
color: var(--tk-control-primary-subtle-content, #2349CD);
font-family: var(--font-main, "DM Sans");
font-size: var(--tg-styles-button-xs-size, 14px);
font-style: normal;
font-weight: var(--tg-styles-button-xs-w, 500);
line-height: var(--tg-styles-button-xs-lh, 20px);
letter-spacing: var(--tg-styles-button-xs-ls, 0.28px);
border-radius: var(--nb-common-radius-control-soft, 12px);
border: var(--nb-common-stroke-m, 1.5px) solid var(--tk-control-primary-subtle-outline, #A3B8FF);
background: var(--tk-control-primary-subtle-fill, #F2F5FF);
padding: 0 var(--nb-atom-chip-2xs-padding-h, 10px);
align-items: center;
}
.custom-dd-body .ts-wrapper.multi.dropdown-active input {
width: unset !important;
}
.custom-dd-body .ts-wrapper.multi.input-hidden .ts-control input {
opacity: 0 !important;
}
.custom-dd-body .tab-options {
display: inline-flex;
justify-content: center;
align-items: center;
position: relative;
font-family: var(--font-main, sans-serif);
font-weight: 600;
text-decoration: none;
white-space: nowrap;
line-height: 1;
border-style: solid;
border-radius: var(--nb-common-radius-control-pill, 100rem);
cursor: pointer;
transition: all var(--def-trans-time, 0.2s) ease-in-out, outline-width 0s;
-webkit-appearance: none;
outline: 0 solid transparent;
outline-offset: 2px;
box-sizing: border-box;
background-color: var(--tab-bg);
color: var(--tab-col);
border-color: var(--tab-bd);
}
@media (hover: hover) {
.custom-dd-body .tab-options:hover {
background-color: var(--tab-h-bg) !important;
color: var(--tab-h-col) !important;
border-color: var(--tab-h-bd) !important;
opacity: 1;
}
}
.custom-dd-body .tab-options:active, .custom-dd-body .tab-options.active, .custom-dd-body .tab-options.is-active {
background-color: var(--tab-a-bg);
color: var(--tab-a-col);
border-color: var(--tab-a-bd);
opacity: 1;
}
.custom-dd-body .tab-options:focus, .custom-dd-body .tab-options:focus-visible {
background-color: var(--tab-h-bg);
color: var(--tab-h-col);
border-color: var(--tab-h-bd);
outline: var(--nb-common-stroke-m, 1.5px) solid var(--tab-focus-ring);
opacity: 1;
}
.custom-dd-body .tab-options:disabled, .custom-dd-body .tab-options.is-disabled {
cursor: not-allowed;
pointer-events: none;
box-shadow: none;
opacity: 1;
--tab-bg: transparent;
--tab-col: var(--tk-control-disabled-subtle-outline) !important;
--tab-bd: var(--tk-control-disabled-subtle-content) !important;
}
.custom-dd-body .tab-options:disabled .tab-badge, .custom-dd-body .tab-options.is-disabled .tab-badge {
background-color: var(--tk-control-disabled-subtle-content);
}
.custom-dd-body .tab-options svg {
fill: currentColor;
flex-shrink: 0;
display: block;
}
.custom-dd-body .tab-options svg path {
fill: currentColor;
}
.custom-dd-body .tab-options .tab-badge {
position: absolute;
top: var(--tab-badge-top);
right: var(--tab-badge-right);
width: 0.8rem;
height: 0.8rem;
border-radius: 50%;
background-color: var(--tk-control-primary-filled-fill);
border: 0.3rem solid var(--tk-surface-elevated);
box-sizing: content-box;
pointer-events: none;
}
.custom-dd-body .tab-options.tab--size-l {
height: var(--nb-common-control-size-m, 4.4rem);
padding: 0 1.6rem;
gap: 0.8rem;
font-size: var(--tg-styles-button-m-size, 1.8rem);
--tab-border-width: var(--nb-common-stroke-m, 1.5px);
--tab-badge-top: 0.1rem;
--tab-badge-right: 0.1rem;
}
.custom-dd-body .tab-options.tab--size-l svg {
width: var(--nb-atom-button-l-icon-size, 2.4rem);
min-width: var(--nb-atom-button-l-icon-size, 2.4rem);
max-width: var(--nb-atom-button-l-icon-size, 2.4rem);
height: var(--nb-atom-button-l-icon-size, 2.4rem);
}
.custom-dd-body .tab-options.tab--size-m {
height: var(--nb-common-control-size-xs, 3.2rem);
padding: 0 1.2rem;
gap: var(--nb-atom-button-m-gap, 0.8rem);
font-size: var(--tg-styles-button-s-size, 1.6rem);
--tab-border-width: var(--nb-common-stroke-m, 1.5px);
--tab-badge-top: -0.3rem;
--tab-badge-right: -0.3rem;
}
.custom-dd-body .tab-options.tab--size-m svg {
width: var(--nb-atom-button-m-icon-size, 2rem);
min-width: var(--nb-atom-button-m-icon-size, 2rem);
max-width: var(--nb-atom-button-m-icon-size, 2rem);
height: var(--nb-atom-button-m-icon-size, 2rem);
}
.custom-dd-body .tab-options.tab--size-s {
height: var(--nb-common-control-size-2xs, 2.8rem);
padding: 0 1rem;
gap: var(--nb-atom-button-s-gap, 0.8rem);
font-size: var(--tg-styles-button-xs-size, 1.4rem);
--tab-border-width: var(--nb-common-stroke-m, 1.5px);
--tab-badge-top: -0.3rem;
--tab-badge-right: -0.3rem;
}
.custom-dd-body .tab-options.tab--size-s svg {
width: var(--nb-atom-button-s-icon-size, 1.8rem);
min-width: var(--nb-atom-button-s-icon-size, 1.8rem);
max-width: var(--nb-atom-button-s-icon-size, 1.8rem);
height: var(--nb-atom-button-s-icon-size, 1.8rem);
}
.custom-dd-body .tab-options.tab--surface {
--tab-focus-ring: var(--tk-control-surface-filled-fill, var(--tk-control-neutral-filled-fill));
--tab-bg: transparent;
--tab-col: var(--tk-control-inactive-content);
--tab-bd: transparent;
border-width: var(--tab-border-width);
--tab-h-bg: var(--tk-control-surface-state-hover-alt-fill, var(--tk-control-neutral-subtle-fill));
--tab-h-col: var(--tk-control-surface-state-hover-alt-content, var(--tk-control-neutral-subtle-content));
--tab-h-bd: var(--tk-control-surface-state-hover-alt-fill, var(--tk-control-neutral-subtle-content));
--tab-a-bg: var(--tk-control-surface-state-active-alt-fill, var(--tk-control-neutral-state-active-alt-fill));
--tab-a-col: var(--tk-control-surface-state-active-alt-content, var(--tk-control-neutral-state-active-alt-content));
--tab-a-bd: var(--tk-control-surface-state-active-alt-fill, var(--tk-control-neutral-state-active-alt-fill));
}
.custom-dd-body .tab-options.tab--surface-outlined {
--tab-focus-ring: var(--tk-control-surface-filled-fill, var(--tk-control-neutral-filled-fill));
--tab-bg: transparent;
--tab-col: var(--tk-control-surface-outlined-content);
--tab-bd: transparent;
border-width: var(--tab-border-width);
--tab-h-bg: var(--tk-control-surface-state-hover-alt-fill);
--tab-h-col: var(--tk-control-surface-state-hover-alt-content);
--tab-h-bd: var(--tk-control-surface-state-hover-alt-fill);
--tab-a-bg: var(--tk-control-surface-state-active-alt-fill);
--tab-a-col: var(--tk-control-surface-state-active-alt-content);
--tab-a-bd: var(--tk-control-surface-state-active-alt-outline);
}
.custom-dd-body .tab-options.tab--neutral {
--tab-focus-ring: var(--tk-control-neutral-filled-fill, var(--tk-control-neutral-filled-fill));
--tab-bg: transparent;
--tab-col: var(--tk-control-inactive-content);
--tab-bd: transparent;
border-width: var(--tab-border-width);
--tab-h-bg: var(--tk-control-neutral-state-hover-alt-fill, var(--tk-control-neutral-subtle-fill));
--tab-h-col: var(--tk-control-neutral-state-hover-alt-content, var(--tk-control-neutral-subtle-content));
--tab-h-bd: var(--tk-control-neutral-state-hover-alt-fill, var(--tk-control-neutral-subtle-content));
--tab-a-bg: var(--tk-control-neutral-state-active-alt-fill, var(--tk-control-neutral-state-active-alt-fill));
--tab-a-col: var(--tk-control-neutral-state-active-alt-content, var(--tk-control-neutral-state-active-alt-content));
--tab-a-bd: var(--tk-control-neutral-state-active-alt-fill, var(--tk-control-neutral-state-active-alt-fill));
}
.custom-dd-body .tab-options.tab--neutral-outlined {
--tab-focus-ring: var(--tk-control-neutral-filled-fill, var(--tk-control-neutral-filled-fill));
--tab-bg: transparent;
--tab-col: var(--tk-control-neutral-outlined-content);
--tab-bd: transparent;
border-width: var(--tab-border-width);
--tab-h-bg: var(--tk-control-neutral-state-hover-alt-fill);
--tab-h-col: var(--tk-control-neutral-state-hover-alt-content);
--tab-h-bd: var(--tk-control-neutral-state-hover-alt-fill);
--tab-a-bg: var(--tk-control-neutral-state-active-alt-fill);
--tab-a-col: var(--tk-control-neutral-state-active-alt-content);
--tab-a-bd: var(--tk-control-neutral-state-active-alt-outline);
}
.custom-dd-body .tab-options.tab--primary {
--tab-focus-ring: var(--tk-control-primary-filled-fill, var(--tk-control-neutral-filled-fill));
--tab-bg: transparent;
--tab-col: var(--tk-control-inactive-content);
--tab-bd: transparent;
border-width: var(--tab-border-width);
--tab-h-bg: var(--tk-control-primary-state-hover-alt-fill, var(--tk-control-neutral-subtle-fill));
--tab-h-col: var(--tk-control-primary-state-hover-alt-content, var(--tk-control-neutral-subtle-content));
--tab-h-bd: var(--tk-control-primary-state-hover-alt-fill, var(--tk-control-neutral-subtle-content));
--tab-a-bg: var(--tk-control-primary-state-active-alt-fill, var(--tk-control-neutral-state-active-alt-fill));
--tab-a-col: var(--tk-control-primary-state-active-alt-content, var(--tk-control-neutral-state-active-alt-content));
--tab-a-bd: var(--tk-control-primary-state-active-alt-fill, var(--tk-control-neutral-state-active-alt-fill));
}
.custom-dd-body .tab-options.tab--primary-outlined {
--tab-focus-ring: var(--tk-control-primary-filled-fill, var(--tk-control-neutral-filled-fill));
--tab-bg: transparent;
--tab-col: var(--tk-control-primary-outlined-content);
--tab-bd: transparent;
border-width: var(--tab-border-width);
--tab-h-bg: var(--tk-control-primary-state-hover-alt-fill);
--tab-h-col: var(--tk-control-primary-state-hover-alt-content);
--tab-h-bd: var(--tk-control-primary-state-hover-alt-fill);
--tab-a-bg: var(--tk-control-primary-state-active-alt-fill);
--tab-a-col: var(--tk-control-primary-state-active-alt-content);
--tab-a-bd: var(--tk-control-primary-state-active-alt-outline);
}
.custom-dd-body .tab-options.tab--secondary {
--tab-focus-ring: var(--tk-control-secondary-filled-fill, var(--tk-control-neutral-filled-fill));
--tab-bg: transparent;
--tab-col: var(--tk-control-inactive-content);
--tab-bd: transparent;
border-width: var(--tab-border-width);
--tab-h-bg: var(--tk-control-secondary-state-hover-alt-fill, var(--tk-control-neutral-subtle-fill));
--tab-h-col: var(--tk-control-secondary-state-hover-alt-content, var(--tk-control-neutral-subtle-content));
--tab-h-bd: var(--tk-control-secondary-state-hover-alt-fill, var(--tk-control-neutral-subtle-content));
--tab-a-bg: var(--tk-control-secondary-state-active-alt-fill, var(--tk-control-neutral-state-active-alt-fill));
--tab-a-col: var(--tk-control-secondary-state-active-alt-content, var(--tk-control-neutral-state-active-alt-content));
--tab-a-bd: var(--tk-control-secondary-state-active-alt-fill, var(--tk-control-neutral-state-active-alt-fill));
}
.custom-dd-body .tab-options.tab--secondary-outlined {
--tab-focus-ring: var(--tk-control-secondary-filled-fill, var(--tk-control-neutral-filled-fill));
--tab-bg: transparent;
--tab-col: var(--tk-control-secondary-outlined-content);
--tab-bd: transparent;
border-width: var(--tab-border-width);
--tab-h-bg: var(--tk-control-secondary-state-hover-alt-fill);
--tab-h-col: var(--tk-control-secondary-state-hover-alt-content);
--tab-h-bd: var(--tk-control-secondary-state-hover-alt-fill);
--tab-a-bg: var(--tk-control-secondary-state-active-alt-fill);
--tab-a-col: var(--tk-control-secondary-state-active-alt-content);
--tab-a-bd: var(--tk-control-secondary-state-active-alt-outline);
}
.custom-dd-body .tab-options.tab--tertiary {
--tab-focus-ring: var(--tk-control-tertiary-filled-fill, var(--tk-control-neutral-filled-fill));
--tab-bg: transparent;
--tab-col: var(--tk-control-inactive-content);
--tab-bd: transparent;
border-width: var(--tab-border-width);
--tab-h-bg: var(--tk-control-tertiary-state-hover-alt-fill, var(--tk-control-neutral-subtle-fill));
--tab-h-col: var(--tk-control-tertiary-state-hover-alt-content, var(--tk-control-neutral-subtle-content));
--tab-h-bd: var(--tk-control-tertiary-state-hover-alt-fill, var(--tk-control-neutral-subtle-content));
--tab-a-bg: var(--tk-control-tertiary-state-active-alt-fill, var(--tk-control-neutral-state-active-alt-fill));
--tab-a-col: var(--tk-control-tertiary-state-active-alt-content, var(--tk-control-neutral-state-active-alt-content));
--tab-a-bd: var(--tk-control-tertiary-state-active-alt-fill, var(--tk-control-neutral-state-active-alt-fill));
}
.custom-dd-body .tab-options.tab--tertiary-outlined {
--tab-focus-ring: var(--tk-control-tertiary-filled-fill, var(--tk-control-neutral-filled-fill));
--tab-bg: transparent;
--tab-col: var(--tk-control-tertiary-outlined-content);
--tab-bd: transparent;
border-width: var(--tab-border-width);
--tab-h-bg: var(--tk-control-tertiary-state-hover-alt-fill);
--tab-h-col: var(--tk-control-tertiary-state-hover-alt-content);
--tab-h-bd: var(--tk-control-tertiary-state-hover-alt-fill);
--tab-a-bg: var(--tk-control-tertiary-state-active-alt-fill);
--tab-a-col: var(--tk-control-tertiary-state-active-alt-content);
--tab-a-bd: var(--tk-control-tertiary-state-active-alt-outline);
}
.custom-dd-body .tab-options.tab--danger {
--tab-focus-ring: var(--tk-control-danger-filled-fill, var(--tk-control-neutral-filled-fill));
--tab-bg: transparent;
--tab-col: var(--tk-control-inactive-content);
--tab-bd: transparent;
border-width: var(--tab-border-width);
--tab-h-bg: var(--tk-control-danger-state-hover-alt-fill, var(--tk-control-neutral-subtle-fill));
--tab-h-col: var(--tk-control-danger-state-hover-alt-content, var(--tk-control-neutral-subtle-content));
--tab-h-bd: var(--tk-control-danger-state-hover-alt-fill, var(--tk-control-neutral-subtle-content));
--tab-a-bg: var(--tk-control-danger-state-active-alt-fill, var(--tk-control-neutral-state-active-alt-fill));
--tab-a-col: var(--tk-control-danger-state-active-alt-content, var(--tk-control-neutral-state-active-alt-content));
--tab-a-bd: var(--tk-control-danger-state-active-alt-fill, var(--tk-control-neutral-state-active-alt-fill));
}
.custom-dd-body .tab-options.tab--danger-outlined {
--tab-focus-ring: var(--tk-control-danger-filled-fill, var(--tk-control-neutral-filled-fill));
--tab-bg: transparent;
--tab-col: var(--tk-control-danger-outlined-content);
--tab-bd: transparent;
border-width: var(--tab-border-width);
--tab-h-bg: var(--tk-control-danger-state-hover-alt-fill);
--tab-h-col: var(--tk-control-danger-state-hover-alt-content);
--tab-h-bd: var(--tk-control-danger-state-hover-alt-fill);
--tab-a-bg: var(--tk-control-danger-state-active-alt-fill);
--tab-a-col: var(--tk-control-danger-state-active-alt-content);
--tab-a-bd: var(--tk-control-danger-state-active-alt-outline);
}
.custom-dd-body .tab-options.tab--warning {
--tab-focus-ring: var(--tk-control-warning-filled-fill, var(--tk-control-neutral-filled-fill));
--tab-bg: transparent;
--tab-col: var(--tk-control-inactive-content);
--tab-bd: transparent;
border-width: var(--tab-border-width);
--tab-h-bg: var(--tk-control-warning-state-hover-alt-fill, var(--tk-control-neutral-subtle-fill));
--tab-h-col: var(--tk-control-warning-state-hover-alt-content, var(--tk-control-neutral-subtle-content));
--tab-h-bd: var(--tk-control-warning-state-hover-alt-fill, var(--tk-control-neutral-subtle-content));
--tab-a-bg: var(--tk-control-warning-state-active-alt-fill, var(--tk-control-neutral-state-active-alt-fill));
--tab-a-col: var(--tk-control-warning-state-active-alt-content, var(--tk-control-neutral-state-active-alt-content));
--tab-a-bd: var(--tk-control-warning-state-active-alt-fill, var(--tk-control-neutral-state-active-alt-fill));
}
.custom-dd-body .tab-options.tab--warning-outlined {
--tab-focus-ring: var(--tk-control-warning-filled-fill, var(--tk-control-neutral-filled-fill));
--tab-bg: transparent;
--tab-col: var(--tk-control-warning-outlined-content);
--tab-bd: transparent;
border-width: var(--tab-border-width);
--tab-h-bg: var(--tk-control-warning-state-hover-alt-fill);
--tab-h-col: var(--tk-control-warning-state-hover-alt-content);
--tab-h-bd: var(--tk-control-warning-state-hover-alt-fill);
--tab-a-bg: var(--tk-control-warning-state-active-alt-fill);
--tab-a-col: var(--tk-control-warning-state-active-alt-content);
--tab-a-bd: var(--tk-control-warning-state-active-alt-outline);
}
.custom-dd-body .tab-options.tab--success {
--tab-focus-ring: var(--tk-control-success-filled-fill, var(--tk-control-neutral-filled-fill));
--tab-bg: transparent;
--tab-col: var(--tk-control-inactive-content);
--tab-bd: transparent;
border-width: var(--tab-border-width);
--tab-h-bg: var(--tk-control-success-state-hover-alt-fill, var(--tk-control-neutral-subtle-fill));
--tab-h-col: var(--tk-control-success-state-hover-alt-content, var(--tk-control-neutral-subtle-content));
--tab-h-bd: var(--tk-control-success-state-hover-alt-fill, var(--tk-control-neutral-subtle-content));
--tab-a-bg: var(--tk-control-success-state-active-alt-fill, var(--tk-control-neutral-state-active-alt-fill));
--tab-a-col: var(--tk-control-success-state-active-alt-content, var(--tk-control-neutral-state-active-alt-content));
--tab-a-bd: var(--tk-control-success-state-active-alt-fill, var(--tk-control-neutral-state-active-alt-fill));
}
.custom-dd-body .tab-options.tab--success-outlined {
--tab-focus-ring: var(--tk-control-success-filled-fill, var(--tk-control-neutral-filled-fill));
--tab-bg: transparent;
--tab-col: var(--tk-control-success-outlined-content);
--tab-bd: transparent;
border-width: var(--tab-border-width);
--tab-h-bg: var(--tk-control-success-state-hover-alt-fill);
--tab-h-col: var(--tk-control-success-state-hover-alt-content);
--tab-h-bd: var(--tk-control-success-state-hover-alt-fill);
--tab-a-bg: var(--tk-control-success-state-active-alt-fill);
--tab-a-col: var(--tk-control-success-state-active-alt-content);
--tab-a-bd: var(--tk-control-success-state-active-alt-outline);
}
.custom-dd-body .tab-options.tab--info {
--tab-focus-ring: var(--tk-control-info-filled-fill, var(--tk-control-neutral-filled-fill));
--tab-bg: transparent;
--tab-col: var(--tk-control-inactive-content);
--tab-bd: transparent;
border-width: var(--tab-border-width);
--tab-h-bg: var(--tk-control-info-state-hover-alt-fill, var(--tk-control-neutral-subtle-fill));
--tab-h-col: var(--tk-control-info-state-hover-alt-content, var(--tk-control-neutral-subtle-content));
--tab-h-bd: var(--tk-control-info-state-hover-alt-fill, var(--tk-control-neutral-subtle-content));
--tab-a-bg: var(--tk-control-info-state-active-alt-fill, var(--tk-control-neutral-state-active-alt-fill));
--tab-a-col: var(--tk-control-info-state-active-alt-content, var(--tk-control-neutral-state-active-alt-content));
--tab-a-bd: var(--tk-control-info-state-active-alt-fill, var(--tk-control-neutral-state-active-alt-fill));
}
.custom-dd-body .tab-options.tab--info-outlined {
--tab-focus-ring: var(--tk-control-info-filled-fill, var(--tk-control-neutral-filled-fill));
--tab-bg: transparent;
--tab-col: var(--tk-control-info-outlined-content);
--tab-bd: transparent;
border-width: var(--tab-border-width);
--tab-h-bg: var(--tk-control-info-state-hover-alt-fill);
--tab-h-col: var(--tk-control-info-state-hover-alt-content);
--tab-h-bd: var(--tk-control-info-state-hover-alt-fill);
--tab-a-bg: var(--tk-control-info-state-active-alt-fill);
--tab-a-col: var(--tk-control-info-state-active-alt-content);
--tab-a-bd: var(--tk-control-info-state-active-alt-outline);
}
.custom-dd-body .tab-options-vertical {
display: flex;
width: 100%;
justify-content: flex-start;
align-items: center;
position: relative;
font-family: var(--font-main, sans-serif);
font-weight: 600;
text-decoration: none;
white-space: nowrap;
border-style: solid;
border-radius: var(--nb-common-radius-control, 8px);
cursor: pointer;
transition: all var(--def-trans-time, 0.2s) ease-in-out, outline-width 0s;
-webkit-appearance: none;
outline: 0 solid transparent;
outline-offset: 2px;
box-sizing: border-box;
background-color: var(--tov-tab-bg);
color: var(--tov-tab-col);
border-color: var(--tov-tab-bd);
}
@media (hover: hover) {
.custom-dd-body .tab-options-vertical:hover {
background-color: var(--tov-tab-h-bg) !important;
color: var(--tov-tab-h-col) !important;
border-color: var(--tov-tab-h-bd) !important;
opacity: 1;
}
}
.custom-dd-body .tab-options-vertical:active, .custom-dd-body .tab-options-vertical.active, .custom-dd-body .tab-options-vertical.is-active {
background-color: var(--tov-tab-a-bg);
color: var(--tov-tab-a-col);
border-color: var(--tov-tab-a-bd);
opacity: 1;
}
.custom-dd-body .tab-options-vertical:focus, .custom-dd-body .tab-options-vertical:focus-visible {
background-color: var(--tov-tab-h-bg);
color: var(--tov-tab-h-col);
border-color: var(--tov-tab-h-bd);
outline: var(--nb-common-stroke-m, 1.5px) solid var(--tov-tab-focus-ring);
opacity: 1;
}
.custom-dd-body .tab-options-vertical:disabled, .custom-dd-body .tab-options-vertical.is-disabled {
cursor: not-allowed;
pointer-events: none;
box-shadow: none;
opacity: 1;
--tov-tab-bg: transparent;
--tov-tab-col: var(--tk-control-disabled-subtle-outline) !important;
--tov-tab-bd: var(--tk-control-disabled-subtle-content) !important;
}
.custom-dd-body .tab-options-vertical:disabled .tov-tab-badge, .custom-dd-body .tab-options-vertical.is-disabled .tov-tab-badge {
background-color: var(--tk-control-disabled-subtle-content);
}
.custom-dd-body .tab-options-vertical svg {
fill: currentColor;
flex-shrink: 0;
display: block;
}
.custom-dd-body .tab-options-vertical svg path {
fill: currentColor;
}
.custom-dd-body .tab-options-vertical .tov-tab-badge {
position: relative;
margin-left: auto;
flex-shrink: 0;
width: 0.8rem;
height: 0.8rem;
border-radius: 50%;
background-color: var(--tk-control-primary-filled-fill);
border: 0.3rem solid var(--tk-surface-elevated);
box-sizing: content-box;
pointer-events: none;
}
.custom-dd-body .tab-options-vertical.tov-tab--size-m {
height: var(--nb-common-control-size-m, 4.4rem);
padding: 1rem 1.6rem;
gap: var(--space-6, 1.2rem);
font-size: var(--tg-styles-button-s-size, 1.6rem);
font-weight: var(--tg-styles-button-s-w, 500);
line-height: var(--tg-styles-button-s-lh);
letter-spacing: var(--tg-styles-button-s-ls, 0.032rem);
--tov-tab-border-width: var(--nb-common-stroke-m, 1.5px);
}
.custom-dd-body .tab-options-vertical.tov-tab--size-m svg {
width: 2.4rem;
min-width: 2.4rem;
max-width: 2.4rem;
height: 2.4rem;
}
.custom-dd-body .tab-options-vertical.tov-tab--size-s {
height: var(--nb-common-control-size-s, 3.6rem);
padding: 0.8rem 1.2rem;
gap: var(--nb-atom-button-s-gap, 0.8rem);
font-size: var(--tg-styles-button-xs-size, 1.4rem);
font-weight: var(--tg-styles-button-xs-w, 500);
line-height: var(--tg-styles-button-xs-lh);
letter-spacing: var(--tg-styles-button-xs-ls, 0.028rem);
--tov-tab-border-width: var(--nb-common-stroke-m, 1.5px);
}
.custom-dd-body .tab-options-vertical.tov-tab--size-s svg {
width: 2rem;
min-width: 2rem;
max-width: 2rem;
height: 2rem;
}
.custom-dd-body .tab-options-vertical.tov-tab--size-xs {
height: var(--nb-common-control-size-xs, 3.2rem);
padding: 0.6rem 1rem;
gap: var(--space-4, 0.8rem);
font-size: var(--tg-styles-button-xs-size, 1.4rem);
font-weight: var(--tg-styles-button-xs-w, 500);
line-height: var(--tg-styles-button-xs-lh);
letter-spacing: var(--tg-styles-button-xs-ls, 0.028rem);
--tov-tab-border-width: var(--nb-common-stroke-m, 1.5px);
}
.custom-dd-body .tab-options-vertical.tov-tab--size-xs svg {
width: 2rem;
min-width: 2rem;
max-width: 2rem;
height: 2rem;
}
.custom-dd-body .tab-options-vertical.tov-tab--surface {
--tov-tab-focus-ring: var(--tk-control-surface-filled-fill, var(--tk-control-neutral-filled-fill));
--tov-tab-bg: transparent;
--tov-tab-col: var(--tk-control-inactive-content);
--tov-tab-bd: transparent;
border-width: var(--tov-tab-border-width);
--tov-tab-h-bg: var(--tk-control-surface-state-hover-alt-fill, var(--tk-control-neutral-subtle-fill));
--tov-tab-h-col: var(--tk-control-surface-state-hover-alt-content, var(--tk-control-neutral-subtle-content));
--tov-tab-h-bd: var(--tk-control-surface-state-hover-alt-fill, var(--tk-control-neutral-subtle-content));
--tov-tab-a-bg: var(--tk-control-surface-state-active-alt-fill, var(--tk-control-neutral-state-active-alt-fill));
--tov-tab-a-col: var(--tk-control-surface-state-active-alt-content, var(--tk-control-neutral-state-active-alt-content));
--tov-tab-a-bd: var(--tk-control-surface-state-active-alt-fill, var(--tk-control-neutral-state-active-alt-fill));
}
.custom-dd-body .tab-options-vertical.tov-tab--surface-outlined {
--tov-tab-focus-ring: var(--tk-control-surface-filled-fill, var(--tk-control-neutral-filled-fill));
--tov-tab-bg: transparent;
--tov-tab-col: var(--tk-control-surface-outlined-content);
--tov-tab-bd: transparent;
border-width: var(--tov-tab-border-width);
--tov-tab-h-bg: var(--tk-control-surface-state-hover-alt-fill);
--tov-tab-h-col: var(--tk-control-surface-state-hover-alt-content);
--tov-tab-h-bd: var(--tk-control-surface-state-hover-alt-fill);
--tov-tab-a-bg: var(--tk-control-surface-state-active-alt-fill);
--tov-tab-a-col: var(--tk-control-surface-state-active-alt-content);
--tov-tab-a-bd: var(--tk-control-surface-state-active-alt-outline);
}
.custom-dd-body .tab-options-vertical.tov-tab--neutral {
--tov-tab-focus-ring: var(--tk-control-neutral-filled-fill, var(--tk-control-neutral-filled-fill));
--tov-tab-bg: transparent;
--tov-tab-col: var(--tk-control-inactive-content);
--tov-tab-bd: transparent;
border-width: var(--tov-tab-border-width);
--tov-tab-h-bg: var(--tk-control-neutral-state-hover-alt-fill, var(--tk-control-neutral-subtle-fill));
--tov-tab-h-col: var(--tk-control-neutral-state-hover-alt-content, var(--tk-control-neutral-subtle-content));
--tov-tab-h-bd: var(--tk-control-neutral-state-hover-alt-fill, var(--tk-control-neutral-subtle-content));
--tov-tab-a-bg: var(--tk-control-neutral-state-active-alt-fill, var(--tk-control-neutral-state-active-alt-fill));
--tov-tab-a-col: var(--tk-control-neutral-state-active-alt-content, var(--tk-control-neutral-state-active-alt-content));
--tov-tab-a-bd: var(--tk-control-neutral-state-active-alt-fill, var(--tk-control-neutral-state-active-alt-fill));
}
.custom-dd-body .tab-options-vertical.tov-tab--neutral-outlined {
--tov-tab-focus-ring: var(--tk-control-neutral-filled-fill, var(--tk-control-neutral-filled-fill));
--tov-tab-bg: transparent;
--tov-tab-col: var(--tk-control-neutral-outlined-content);
--tov-tab-bd: transparent;
border-width: var(--tov-tab-border-width);
--tov-tab-h-bg: var(--tk-control-neutral-state-hover-alt-fill);
--tov-tab-h-col: var(--tk-control-neutral-state-hover-alt-content);
--tov-tab-h-bd: var(--tk-control-neutral-state-hover-alt-fill);
--tov-tab-a-bg: var(--tk-control-neutral-state-active-alt-fill);
--tov-tab-a-col: var(--tk-control-neutral-state-active-alt-content);
--tov-tab-a-bd: var(--tk-control-neutral-state-active-alt-outline);
}
.custom-dd-body .tab-options-vertical.tov-tab--primary {
--tov-tab-focus-ring: var(--tk-control-primary-filled-fill, var(--tk-control-neutral-filled-fill));
--tov-tab-bg: transparent;
--tov-tab-col: var(--tk-control-inactive-content);
--tov-tab-bd: transparent;
border-width: var(--tov-tab-border-width);
--tov-tab-h-bg: var(--tk-control-primary-state-hover-alt-fill, var(--tk-control-neutral-subtle-fill));
--tov-tab-h-col: var(--tk-control-primary-state-hover-alt-content, var(--tk-control-neutral-subtle-content));
--tov-tab-h-bd: var(--tk-control-primary-state-hover-alt-fill, var(--tk-control-neutral-subtle-content));
--tov-tab-a-bg: var(--tk-control-primary-state-active-alt-fill, var(--tk-control-neutral-state-active-alt-fill));
--tov-tab-a-col: var(--tk-control-primary-state-active-alt-content, var(--tk-control-neutral-state-active-alt-content));
--tov-tab-a-bd: var(--tk-control-primary-state-active-alt-fill, var(--tk-control-neutral-state-active-alt-fill));
}
.custom-dd-body .tab-options-vertical.tov-tab--primary-outlined {
--tov-tab-focus-ring: var(--tk-control-primary-filled-fill, var(--tk-control-neutral-filled-fill));
--tov-tab-bg: transparent;
--tov-tab-col: var(--tk-control-primary-outlined-content);
--tov-tab-bd: transparent;
border-width: var(--tov-tab-border-width);
--tov-tab-h-bg: var(--tk-control-primary-state-hover-alt-fill);
--tov-tab-h-col: var(--tk-control-primary-state-hover-alt-content);
--tov-tab-h-bd: var(--tk-control-primary-state-hover-alt-fill);
--tov-tab-a-bg: var(--tk-control-primary-state-active-alt-fill);
--tov-tab-a-col: var(--tk-control-primary-state-active-alt-content);
--tov-tab-a-bd: var(--tk-control-primary-state-active-alt-outline);
}
.custom-dd-body .tab-options-vertical.tov-tab--secondary {
--tov-tab-focus-ring: var(--tk-control-secondary-filled-fill, var(--tk-control-neutral-filled-fill));
--tov-tab-bg: transparent;
--tov-tab-col: var(--tk-control-inactive-content);
--tov-tab-bd: transparent;
border-width: var(--tov-tab-border-width);
--tov-tab-h-bg: var(--tk-control-secondary-state-hover-alt-fill, var(--tk-control-neutral-subtle-fill));
--tov-tab-h-col: var(--tk-control-secondary-state-hover-alt-content, var(--tk-control-neutral-subtle-content));
--tov-tab-h-bd: var(--tk-control-secondary-state-hover-alt-fill, var(--tk-control-neutral-subtle-content));
--tov-tab-a-bg: var(--tk-control-secondary-state-active-alt-fill, var(--tk-control-neutral-state-active-alt-fill));
--tov-tab-a-col: var(--tk-control-secondary-state-active-alt-content, var(--tk-control-neutral-state-active-alt-content));
--tov-tab-a-bd: var(--tk-control-secondary-state-active-alt-fill, var(--tk-control-neutral-state-active-alt-fill));
}
.custom-dd-body .tab-options-vertical.tov-tab--secondary-outlined {
--tov-tab-focus-ring: var(--tk-control-secondary-filled-fill, var(--tk-control-neutral-filled-fill));
--tov-tab-bg: transparent;
--tov-tab-col: var(--tk-control-secondary-outlined-content);
--tov-tab-bd: transparent;
border-width: var(--tov-tab-border-width);
--tov-tab-h-bg: var(--tk-control-secondary-state-hover-alt-fill);
--tov-tab-h-col: var(--tk-control-secondary-state-hover-alt-content);
--tov-tab-h-bd: var(--tk-control-secondary-state-hover-alt-fill);
--tov-tab-a-bg: var(--tk-control-secondary-state-active-alt-fill);
--tov-tab-a-col: var(--tk-control-secondary-state-active-alt-content);
--tov-tab-a-bd: var(--tk-control-secondary-state-active-alt-outline);
}
.custom-dd-body .tab-options-vertical.tov-tab--tertiary {
--tov-tab-focus-ring: var(--tk-control-tertiary-filled-fill, var(--tk-control-neutral-filled-fill));
--tov-tab-bg: transparent;
--tov-tab-col: var(--tk-control-inactive-content);
--tov-tab-bd: transparent;
border-width: var(--tov-tab-border-width);
--tov-tab-h-bg: var(--tk-control-tertiary-state-hover-alt-fill, var(--tk-control-neutral-subtle-fill));
--tov-tab-h-col: var(--tk-control-tertiary-state-hover-alt-content, var(--tk-control-neutral-subtle-content));
--tov-tab-h-bd: var(--tk-control-tertiary-state-hover-alt-fill, var(--tk-control-neutral-subtle-content));
--tov-tab-a-bg: var(--tk-control-tertiary-state-active-alt-fill, var(--tk-control-neutral-state-active-alt-fill));
--tov-tab-a-col: var(--tk-control-tertiary-state-active-alt-content, var(--tk-control-neutral-state-active-alt-content));
--tov-tab-a-bd: var(--tk-control-tertiary-state-active-alt-fill, var(--tk-control-neutral-state-active-alt-fill));
}
.custom-dd-body .tab-options-vertical.tov-tab--tertiary-outlined {
--tov-tab-focus-ring: var(--tk-control-tertiary-filled-fill, var(--tk-control-neutral-filled-fill));
--tov-tab-bg: transparent;
--tov-tab-col: var(--tk-control-tertiary-outlined-content);
--tov-tab-bd: transparent;
border-width: var(--tov-tab-border-width);
--tov-tab-h-bg: var(--tk-control-tertiary-state-hover-alt-fill);
--tov-tab-h-col: var(--tk-control-tertiary-state-hover-alt-content);
--tov-tab-h-bd: var(--tk-control-tertiary-state-hover-alt-fill);
--tov-tab-a-bg: var(--tk-control-tertiary-state-active-alt-fill);
--tov-tab-a-col: var(--tk-control-tertiary-state-active-alt-content);
--tov-tab-a-bd: var(--tk-control-tertiary-state-active-alt-outline);
}
.custom-dd-body .tab-options-vertical.tov-tab--danger {
--tov-tab-focus-ring: var(--tk-control-danger-filled-fill, var(--tk-control-neutral-filled-fill));
--tov-tab-bg: transparent;
--tov-tab-col: var(--tk-control-inactive-content);
--tov-tab-bd: transparent;
border-width: var(--tov-tab-border-width);
--tov-tab-h-bg: var(--tk-control-danger-state-hover-alt-fill, var(--tk-control-neutral-subtle-fill));
--tov-tab-h-col: var(--tk-control-danger-state-hover-alt-content, var(--tk-control-neutral-subtle-content));
--tov-tab-h-bd: var(--tk-control-danger-state-hover-alt-fill, var(--tk-control-neutral-subtle-content));
--tov-tab-a-bg: var(--tk-control-danger-state-active-alt-fill, var(--tk-control-neutral-state-active-alt-fill));
--tov-tab-a-col: var(--tk-control-danger-state-active-alt-content, var(--tk-control-neutral-state-active-alt-content));
--tov-tab-a-bd: var(--tk-control-danger-state-active-alt-fill, var(--tk-control-neutral-state-active-alt-fill));
}
.custom-dd-body .tab-options-vertical.tov-tab--danger-outlined {
--tov-tab-focus-ring: var(--tk-control-danger-filled-fill, var(--tk-control-neutral-filled-fill));
--tov-tab-bg: transparent;
--tov-tab-col: var(--tk-control-danger-outlined-content);
--tov-tab-bd: transparent;
border-width: var(--tov-tab-border-width);
--tov-tab-h-bg: var(--tk-control-danger-state-hover-alt-fill);
--tov-tab-h-col: var(--tk-control-danger-state-hover-alt-content);
--tov-tab-h-bd: var(--tk-control-danger-state-hover-alt-fill);
--tov-tab-a-bg: var(--tk-control-danger-state-active-alt-fill);
--tov-tab-a-col: var(--tk-control-danger-state-active-alt-content);
--tov-tab-a-bd: var(--tk-control-danger-state-active-alt-outline);
}
.custom-dd-body .tab-options-vertical.tov-tab--warning {
--tov-tab-focus-ring: var(--tk-control-warning-filled-fill, var(--tk-control-neutral-filled-fill));
--tov-tab-bg: transparent;
--tov-tab-col: var(--tk-control-inactive-content);
--tov-tab-bd: transparent;
border-width: var(--tov-tab-border-width);
--tov-tab-h-bg: var(--tk-control-warning-state-hover-alt-fill, var(--tk-control-neutral-subtle-fill));
--tov-tab-h-col: var(--tk-control-warning-state-hover-alt-content, var(--tk-control-neutral-subtle-content));
--tov-tab-h-bd: var(--tk-control-warning-state-hover-alt-fill, var(--tk-control-neutral-subtle-content));
--tov-tab-a-bg: var(--tk-control-warning-state-active-alt-fill, var(--tk-control-neutral-state-active-alt-fill));
--tov-tab-a-col: var(--tk-control-warning-state-active-alt-content, var(--tk-control-neutral-state-active-alt-content));
--tov-tab-a-bd: var(--tk-control-warning-state-active-alt-fill, var(--tk-control-neutral-state-active-alt-fill));
}
.custom-dd-body .tab-options-vertical.tov-tab--warning-outlined {
--tov-tab-focus-ring: var(--tk-control-warning-filled-fill, var(--tk-control-neutral-filled-fill));
--tov-tab-bg: transparent;
--tov-tab-col: var(--tk-control-warning-outlined-content);
--tov-tab-bd: transparent;
border-width: var(--tov-tab-border-width);
--tov-tab-h-bg: var(--tk-control-warning-state-hover-alt-fill);
--tov-tab-h-col: var(--tk-control-warning-state-hover-alt-content);
--tov-tab-h-bd: var(--tk-control-warning-state-hover-alt-fill);
--tov-tab-a-bg: var(--tk-control-warning-state-active-alt-fill);
--tov-tab-a-col: var(--tk-control-warning-state-active-alt-content);
--tov-tab-a-bd: var(--tk-control-warning-state-active-alt-outline);
}
.custom-dd-body .tab-options-vertical.tov-tab--success {
--tov-tab-focus-ring: var(--tk-control-success-filled-fill, var(--tk-control-neutral-filled-fill));
--tov-tab-bg: transparent;
--tov-tab-col: var(--tk-control-inactive-content);
--tov-tab-bd: transparent;
border-width: var(--tov-tab-border-width);
--tov-tab-h-bg: var(--tk-control-success-state-hover-alt-fill, var(--tk-control-neutral-subtle-fill));
--tov-tab-h-col: var(--tk-control-success-state-hover-alt-content, var(--tk-control-neutral-subtle-content));
--tov-tab-h-bd: var(--tk-control-success-state-hover-alt-fill, var(--tk-control-neutral-subtle-content));
--tov-tab-a-bg: var(--tk-control-success-state-active-alt-fill, var(--tk-control-neutral-state-active-alt-fill));
--tov-tab-a-col: var(--tk-control-success-state-active-alt-content, var(--tk-control-neutral-state-active-alt-content));
--tov-tab-a-bd: var(--tk-control-success-state-active-alt-fill, var(--tk-control-neutral-state-active-alt-fill));
}
.custom-dd-body .tab-options-vertical.tov-tab--success-outlined {
--tov-tab-focus-ring: var(--tk-control-success-filled-fill, var(--tk-control-neutral-filled-fill));
--tov-tab-bg: transparent;
--tov-tab-col: var(--tk-control-success-outlined-content);
--tov-tab-bd: transparent;
border-width: var(--tov-tab-border-width);
--tov-tab-h-bg: var(--tk-control-success-state-hover-alt-fill);
--tov-tab-h-col: var(--tk-control-success-state-hover-alt-content);
--tov-tab-h-bd: var(--tk-control-success-state-hover-alt-fill);
--tov-tab-a-bg: var(--tk-control-success-state-active-alt-fill);
--tov-tab-a-col: var(--tk-control-success-state-active-alt-content);
--tov-tab-a-bd: var(--tk-control-success-state-active-alt-outline);
}
.custom-dd-body .tab-options-vertical.tov-tab--info {
--tov-tab-focus-ring: var(--tk-control-info-filled-fill, var(--tk-control-neutral-filled-fill));
--tov-tab-bg: transparent;
--tov-tab-col: var(--tk-control-inactive-content);
--tov-tab-bd: transparent;
border-width: var(--tov-tab-border-width);
--tov-tab-h-bg: var(--tk-control-info-state-hover-alt-fill, var(--tk-control-neutral-subtle-fill));
--tov-tab-h-col: var(--tk-control-info-state-hover-alt-content, var(--tk-control-neutral-subtle-content));
--tov-tab-h-bd: var(--tk-control-info-state-hover-alt-fill, var(--tk-control-neutral-subtle-content));
--tov-tab-a-bg: var(--tk-control-info-state-active-alt-fill, var(--tk-control-neutral-state-active-alt-fill));
--tov-tab-a-col: var(--tk-control-info-state-active-alt-content, var(--tk-control-neutral-state-active-alt-content));
--tov-tab-a-bd: var(--tk-control-info-state-active-alt-fill, var(--tk-control-neutral-state-active-alt-fill));
}
.custom-dd-body .tab-options-vertical.tov-tab--info-outlined {
--tov-tab-focus-ring: var(--tk-control-info-filled-fill, var(--tk-control-neutral-filled-fill));
--tov-tab-bg: transparent;
--tov-tab-col: var(--tk-control-info-outlined-content);
--tov-tab-bd: transparent;
border-width: var(--tov-tab-border-width);
--tov-tab-h-bg: var(--tk-control-info-state-hover-alt-fill);
--tov-tab-h-col: var(--tk-control-info-state-hover-alt-content);
--tov-tab-h-bd: var(--tk-control-info-state-hover-alt-fill);
--tov-tab-a-bg: var(--tk-control-info-state-active-alt-fill);
--tov-tab-a-col: var(--tk-control-info-state-active-alt-content);
--tov-tab-a-bd: var(--tk-control-info-state-active-alt-outline);
}
.custom-dd-body .card {
background-color: var(--tk-surface-elevated);
border: var(--nb-common-stroke-s, 1px) solid var(--tk-border-solid-2, #D1D1D1);
}
.custom-dd-body .card.translucent {
border: 1px solid var(--tk-border-translucent-1, rgba(33, 33, 33, 0.15));
}
html.custom-dd-html.border-radius {
--card-radius: var(--nb-common-radius-layout, 12px);
}
html.custom-dd-html.border-radius .custom-dd-body .card {
border-radius: var(--card-radius);
}
html.custom-dd-html.border-radius .custom-dd-body .card.radius-sharp {
--card-radius: var(--nb-common-radius-layout-sharp);
}
html.custom-dd-html.border-radius .custom-dd-body .card.radius-soft {
--card-radius: var(--nb-common-radius-layout-soft) ;
}
.custom-dd-body .feature-toggle {
background: none;
border: 0;
padding: 0;
line-height: 0;
cursor: pointer;
}
.custom-dd-body .feature-toggle.is-locked {
cursor: not-allowed;
}
.custom-dd-body .feature-toggle .feature-toggle__track {
display: block;
position: relative;
width: 4.4rem;
height: 2.4rem;
border-radius: var(--nb-common-radius-control-pill, 100rem);
background-color: var(--tk-control-neutral-DEPRECATED_inactive-outline, rgba(33, 33, 33, 0.15));
transition: background-color var(--def-trans-time, 0.2s) ease-in-out;
}
.custom-dd-body .feature-toggle .feature-toggle__knob {
position: absolute;
top: 0.2rem;
left: 0.2rem;
width: 2rem;
height: 2rem;
border-radius: 50%;
background-color: var(--tk-surface-elevated, #fff);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
transition: transform var(--def-trans-time, 0.2s) ease-in-out;
}
.custom-dd-body .feature-toggle.is-on .feature-toggle__track {
background-color: var(--tk-primary-base);
}
.custom-dd-body .feature-toggle.is-on .feature-toggle__knob {
transform: translateX(2rem);
}
.custom-dd-body .modal-session-timeout .label {
color: var(--tk-ink-main-toned);
}
.custom-dd-body .modal-session-timeout .session-timeout-countdown {
margin: 0;
text-align: center;
font-variant-numeric: tabular-nums;
color: var(--tk-control-warning-outlined-content);
}
.custom-dd-body.login-page .pending-session .pending-session-message,
.custom-dd-body.login-page .pending-session .pending-session-timer {
margin: 0;
color: var(--tk-ink-main-toned);
}
.custom-dd-body.login-page .pending-session .pending-session-countdown {
font-variant-numeric: tabular-nums;
font-weight: 600;
color: var(--tk-control-warning-outlined-content);
}
.custom-dd-body.login-page .pending-session form {
width: 100%;
}
.custom-dd-body .main-content__header__body-in .custom-files-table div[data-controller=dialog] {
display: flex;
}
.custom-dd-body .main-content__header__body-in .custom-files-table .date-column {
width: 12rem;
}
.custom-dd-body .main-content__header__body-in .custom-files-table .date-column svg {
display: block;
}
.custom-dd-body .authorisation-key-modal .authorisation-key-wrap {
padding: var(--nb-organism-card-padding-xs, 12px);
border-radius: var(--nb-common-radius-layout, 12px);
border: 1px solid var(--tk-border-translucent-1, rgba(33, 33, 33, 0.15));
}
.custom-dd-body .authorisation-key-modal .filters {
color: var(--tk-ink-main-secondary);
}
.custom-dd-body .authorisation-key-modal .filters div {
color: inherit;
}
.custom-dd-body .authorisation-key-modal .filters .key {
color: var(--tk-ink-main-primary);
}
.custom-dd-body .u-view--scanner {
max-width: 74.4rem;
margin: 0 auto;
}
.custom-dd-body .u-view--scanner textarea {
height: 11.2rem;
resize: none;
}
.custom-dd-body .color-main-primary {
color: var(--tk-ink-main-primary) !important;
}
.custom-dd-body .color-main-toned {
color: var(--tk-ink-main-toned) !important;
}
.custom-dd-body .color-other-accent {
color: var(--tk-ink-other-accent) !important;
}
.custom-dd-body .color-tk-other-danger {
color: var(--tk-ink-other-danger) !important;
}
.custom-dd-body .color-tk-other-warning {
color: var(--tk-ink-other-warning) !important;
}
.custom-dd-body .collapse-button {
display: flex;
flex-direction: row;
gap: 1rem;
align-items: center;
cursor: pointer;
}
.custom-dd-body .collapse-button::before {
content: "";
width: 2rem;
height: 2rem;
color: var(--tk-ink-other-accent);
background-color: currentColor;
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-position: center;
mask-position: center;
flex-shrink: 0;
-webkit-transition: var(--def-trans-prop) var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
transition: var(--def-trans-prop) var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
}
.custom-dd-body .collapse-wrapper.show > .results > div > .collapse-button::before {
transform: rotate(90deg);
}
.custom-dd-body table.scanner-data-in-table .table-label.width-small {
width: 35rem;
}
.custom-dd-body table.scanner-data-in-table .table-label.width-medium {
width: 41rem;
}
.custom-dd-body table.scanner-data-in-table .table-label.bold {
font-weight: 600;
}
.custom-dd-body .no-child-padding-top > div {
padding-top: 0px !important;
}
.custom-dd-body .top-navbar-scanner {
padding: var(--gap-4) var(--gap-9);
color: var(--tk-control-primary-subtle-content, #2349CD);
border-radius: 12px;
border: 1px solid var(--tk-control-primary-subtle-outline, #A3B8FF);
background: var(--tk-control-primary-subtle-fill, #F2F5FF);
display: flex;
flex-direction: row;
gap: var(--gap-5);
position: sticky;
top: var(--gap-9);
height: var(--top-navbar-scanner-height);
width: calc(100% - 30rem);
margin-left: calc(0px - var(--main-content-side-right));
-webkit-transition: var(--def-trans-prop) var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
transition: var(--def-trans-prop) var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
opacity: 0;
pointer-events: none;
z-index: -10;
}
.custom-dd-body .top-navbar-scanner svg {
flex-shrink: 0;
}
.custom-dd-body .top-navbar-scanner.show {
opacity: 1;
pointer-events: auto;
z-index: 100;
}
.custom-dd-body .top-navbar-scanner a {
display: inline-block;
-webkit-transition: var(--def-trans-prop) var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
transition: var(--def-trans-prop) var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
}
@media (hover: hover) {
.custom-dd-body .top-navbar-scanner a:hover {
color: var(--tk-control-primary-state-active-alt-outline);
}
}
.custom-dd-body .top-navbar-scanner .top-navbar-content {
display: grid;
grid-template-columns: 1;
grid-template-rows: 1;
font-size: var(--tg-styles-small-size, 12px);
font-style: normal;
font-weight: var(--tg-styles-small-w, 500);
line-height: var(--tg-styles-small-lh, 18px);
letter-spacing: var(--tg-styles-small-ls, 0.48px);
}
.custom-dd-body .top-navbar-scanner .top-navbar-content .navbar-in {
display: flex;
flex-direction: row;
gap: 0.8rem;
min-width: 0;
}
.custom-dd-body .top-navbar-scanner .top-navbar-content .navbar-in * {
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex-shrink: 0;
}
.custom-dd-body .top-navbar-scanner .top-navbar-content .navbar-in :last-child {
flex-shrink: 100;
}
.custom-dd-body .top-navbar-scanner .top-navbar-content .navbar-last {
min-width: 0;
max-width: 100%;
width: fit-content;
}
.custom-dd-body .top-navbar-scanner .top-navbar-content .navbar-last a {
font-size: var(--tg-styles-heading-h8-size, 18px);
font-style: normal;
font-weight: var(--tg-styles-heading-h8-w, 600);
line-height: 1.2;
letter-spacing: 0.02em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
width: 100%;
display: block;
}
.custom-dd-body .scanner-results-header {
margin-top: calc(0px - var(--top-navbar-scanner-height));
}
.custom-dd-body .u-scanner .u-match-mode .is-disabled {
color: var(--tk-control-disabled-subtle-outline) !important;
}
.custom-dd-body .u-scanner .u-match-mode .u-match-mode__buttons .toggle-button {
cursor: pointer;
}
.custom-dd-body .u-scanner .u-match-mode .u-match-mode__buttons .toggle-button .on {
display: none;
}
.custom-dd-body .u-scanner .u-match-mode .u-match-mode__buttons .toggle-button.active .off {
display: none;
}
.custom-dd-body .u-scanner .u-match-mode .u-match-mode__buttons .toggle-button.active .on {
display: block;
}
.custom-dd-body .u-scanner .u-match-mode input[type=range] {
--slider-track-h: 1.2rem;
--slider-thumb-w: 0.6rem;
--slider-thumb-h: 4.4rem;
--slider-fill: var(--tk-control-primary-filled-fill);
--slider-track: var(--tk-surface-overlay-1, rgba(33, 33, 33, 0.20));
--slider-radius: var(--nb-commons-radius-control-pill, 1000px);
-webkit-appearance: none;
appearance: none;
width: 100%;
height: var(--slider-thumb-h);
margin: 0;
background: transparent;
outline: none;
padding: 0 !important;
min-height: var(--slider-thumb-h) !important;
max-height: var(--slider-thumb-h);
cursor: pointer;
border: none !important;
background-color: transparent !important;
}
.custom-dd-body .u-scanner .u-match-mode input[type=range]::-webkit-slider-runnable-track {
height: var(--slider-track-h);
border-radius: var(--slider-radius);
background: linear-gradient(to right, var(--slider-fill) 0%, var(--slider-fill) var(--progress, 0%), var(--slider-track) var(--progress, 0%), var(--slider-track) 100%);
}
.custom-dd-body .u-scanner .u-match-mode input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: var(--slider-thumb-w);
height: var(--slider-thumb-h);
margin-top: calc((var(--slider-track-h) - var(--slider-thumb-h)) / 2);
border: 0;
border-radius: var(--slider-radius);
background: var(--slider-fill);
cursor: grab;
}
.custom-dd-body .u-scanner .u-match-mode input[type=range]::-moz-range-track {
height: var(--slider-track-h);
border-radius: var(--slider-radius);
background: var(--slider-track);
}
.custom-dd-body .u-scanner .u-match-mode input[type=range]::-moz-range-progress {
height: var(--slider-track-h);
border-radius: var(--slider-radius) 0 0 var(--slider-radius);
background: var(--slider-fill);
}
.custom-dd-body .u-scanner .u-match-mode input[type=range]::-moz-range-thumb {
width: var(--slider-thumb-w);
height: var(--slider-thumb-h);
border: 0;
border-radius: var(--slider-radius);
background: var(--slider-fill);
cursor: grab;
}
.custom-dd-body .u-scanner .u-match-mode input[type=range]:disabled {
--slider-fill: var(--tk-surface-muted);
--slider-track: var(--tk-surface-muted);
cursor: default;
}
.custom-dd-body .u-scanner .u-match-mode .fuzziness-range {
display: flex;
flex-direction: column;
gap: var(--space-4, 0.8rem);
padding: var(--space-8, 1.6rem);
border: 1px solid var(--tk-border-solid-1);
border-radius: var(--nb-common-radius-layout, 1.2rem);
}
.custom-dd-body .u-scanner .u-match-mode .fuzziness-range__header {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: var(--space-4, 0.8rem);
}
.custom-dd-body .u-scanner .u-form__actions {
position: sticky;
bottom: 0;
width: fit-content;
border-radius: var(--nb-common-radius-control-pill, 1000px);
border: var(--nb-common-stroke-s, 1px) solid var(--tk-control-neutral-subtle-outline, rgba(33, 33, 33, 0.15));
background: var(--tk-control-neutral-subtle-fill, #FFF);
box-shadow: 0 4px 12px 0 rgba(35, 31, 32, 0.2);
padding: var(--space-4, 8px);
margin-left: auto;
margin-right: auto;
}
.custom-dd-body .scanner-header-in .logo {
display: block;
width: 6.8rem;
aspect-ratio: 1;
object-fit: contain;
}
.custom-dd-body .scanner-header-in .logo.dark {
display: none;
}
.custom-dd-body .scanner-header-in .header-text {
color: var(--br-primary-1000);
}
html.dark-mode .custom-dd-body .scanner-header-in .logo.light {
display: none;
}
html.dark-mode .custom-dd-body .scanner-header-in .logo.dark {
display: block;
}
.custom-dd-body .scanner-counter svg {
display: block;
width: 2.4rem;
aspect-ratio: 1;
object-fit: contain;
}
.custom-dd-body .scanner-counter .logo-icon.dark {
display: none;
}
.custom-dd-body .scanner-counter .counter {
font-weight: 600;
color: var(--tk-ink-main-muted, #8F8F8F);
}
.custom-dd-body .scanner-counter .counter .used-counter {
color: var(--tk-ink-other-accent, #2349CD);
}
.custom-dd-body .scanner-counter .reset-date {
color: var(--tk-ink-main-toned);
}
.custom-dd-body .scanner-counter .reset-date .info-date {
font-weight: 600;
color: var(--tk-ink-main-primary, #212121);
}
html.dark-mode .custom-dd-body .scanner-counter .logo-icon {
display: none;
}
html.dark-mode .custom-dd-body .scanner-counter .logo-icon.dark {
display: block;
}
.custom-dd-body .u-view.u-view--results .sanction-header-wrap .line-header, .custom-dd-body .u-view.u-view--results .sanction-table-wrap > .line-grid-wrap, .custom-dd-body .u-view.u-view--results .collapse-wrapper .result-grid-wrap > .line-grid-wrap {
position: absolute;
width: 1.7rem;
height: 3.1rem;
background-color: var(--tk-border-solid-2);
mask-image: url('data:image/svg+xml;utf8,');
mask-repeat: no-repeat;
mask-size: contain;
-webkit-mask-image: url('data:image/svg+xml;utf8,');
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: contain;
cursor: pointer;
-webkit-transition: var(--def-trans-prop) var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
transition: var(--def-trans-prop) var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
}
.custom-dd-body .u-view.u-view--results .sanction-header-wrap .is-hover.line-header, .custom-dd-body .u-view.u-view--results .sanction-table-wrap > .is-hover.line-grid-wrap, .custom-dd-body .u-view.u-view--results .collapse-wrapper .result-grid-wrap > .is-hover.line-grid-wrap {
background-color: var(--tk-control-neutral-state-hover-main-fill);
}
.custom-dd-body .u-view.u-view--results .row-grid-wrapper .row-grid {
display: grid;
grid-template-columns: repeat(2, 50%);
padding: 0 1.2rem;
min-height: 4.4rem;
align-items: center;
border: 1px solid var(--tk-border-solid-2);
position: relative;
margin-top: -1px;
}
.custom-dd-body .u-view.u-view--results .row-grid-wrapper .type-2.row-grid {
grid-template-columns: 24rem 1fr;
}
.custom-dd-body .u-view.u-view--results .row-grid-wrapper .type-3.row-grid {
grid-template-columns: 20.8rem 1fr;
}
.custom-dd-body .u-view.u-view--results .row-grid-wrapper .row-grid > div {
padding: 1rem 0rem;
height: 100%;
display: inline-table;
align-items: center;
gap: var(--gap-4);
}
.custom-dd-body .u-view.u-view--results .row-grid-wrapper .row-grid > div.bold {
font-weight: 600;
}
.custom-dd-body .u-view.u-view--results .row-grid-wrapper .row-grid > div.bold .collapse-button {
font-weight: 600;
}
.custom-dd-body .u-view.u-view--results .row-grid-wrapper .row-grid > div:not(:first-child) {
border-left: 1px solid var(--tk-border-solid-2);
padding-left: 1.2rem;
}
.custom-dd-body .u-view.u-view--results .row-grid-wrapper .labels.row-grid {
font-weight: 600;
min-height: 5.2rem;
}
.custom-dd-body .u-view.u-view--results .row-grid-wrapper .clear.row-grid {
border-left: none;
border-right: none;
border-top: none;
border-bottom: none;
min-height: 3.6rem;
}
.custom-dd-body .u-view.u-view--results .row-grid-wrapper .clear.row-grid::after {
display: none !important;
}
.custom-dd-body .u-view.u-view--results .row-grid-wrapper .clear.row-grid > div {
padding: 0.6rem 0rem;
border-top: none;
border-left: none;
}
.custom-dd-body .u-view.u-view--results .u-results {
margin-right: calc(0px - var(--main-content-side-right));
}
.custom-dd-body .u-view.u-view--results .u-results .scanner-results-header {
margin-left: calc(0px - var(--main-content-side-right));
}
.custom-dd-body .u-view.u-view--results .collapse {
display: none;
}
.custom-dd-body .u-view.u-view--results .collapse.show {
display: block;
}
.custom-dd-body .u-view.u-view--results table .relation-table__action {
width: 1px;
}
.custom-dd-body .u-view.u-view--results table .relation-table__action .btn {
margin-left: -0.8rem;
margin-right: -0.8rem;
}
.custom-dd-body .u-view.u-view--results hr {
display: inline;
margin: 0 !important;
}
.custom-dd-body .u-view.u-view--results [id] {
scroll-margin-top: calc(var(--gap-9) + var(--top-navbar-scanner-height) + 1rem);
}
.custom-dd-body .u-view.u-view--results .collapse-wrapper {
padding-left: 0;
}
.custom-dd-body .u-view.u-view--results .collapse-wrapper .result-content-wrap {
padding-bottom: var(--space-12);
padding-left: var(--space-12);
}
.custom-dd-body .u-view.u-view--results .collapse-wrapper .result-content-wrap > .collapse-wrapper:not(:last-child) > .results {
position: relative;
}
.custom-dd-body .u-view.u-view--results .collapse-wrapper .result-content-wrap > .collapse-wrapper:not(:last-child) > .results > .line-result {
position: absolute;
height: 100%;
width: 0.1rem;
background-color: var(--tk-border-solid-2);
left: -2.5rem;
top: 1rem;
cursor: pointer;
-webkit-transition: var(--def-trans-prop) var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
transition: var(--def-trans-prop) var(--def-trans-time) var(--def-trans-type) var(--def-trans-delay);
}
.custom-dd-body .u-view.u-view--results .collapse-wrapper .result-content-wrap > .collapse-wrapper:not(:last-child) > .results > .line-result.is-hover {
background-color: var(--tk-control-neutral-state-hover-main-fill);
}
.custom-dd-body .u-view.u-view--results .collapse-wrapper .result-content-wrap > .collapse-wrapper:not(:last-child) > .results > .line-result:after {
content: "";
position: absolute;
height: 100%;
width: 1.7rem;
left: 0;
top: 0;
}
.custom-dd-body .u-view.u-view--results .collapse-wrapper .result-content-wrap .result-content-wrap {
padding-bottom: var(--gap-12);
}
.custom-dd-body .u-view.u-view--results .collapse-wrapper .result-content-wrap .results-in {
padding-top: var(--space-8);
}
.custom-dd-body .u-view.u-view--results .collapse-wrapper .result-grid-wrap {
padding-left: var(--space-12);
position: relative;
}
.custom-dd-body .u-view.u-view--results .collapse-wrapper .result-grid-wrap > .line-grid-wrap {
left: 0.8rem;
top: 0.6rem;
}
.custom-dd-body .u-view.u-view--results .collapse-wrapper .result-grid-wrap .results-in {
padding-top: var(--space-8);
}
.custom-dd-body .u-view.u-view--results .collapse-wrapper .result-grid-wrap > .row-grid:last-child {
border-bottom: none;
}
.custom-dd-body .u-view.u-view--results .sanction-table-wrap {
position: relative;
margin-top: var(--space-8);
}
.custom-dd-body .u-view.u-view--results .sanction-table-wrap > .line-grid-wrap {
left: 0.8rem;
top: -1rem;
}
.custom-dd-body .u-view.u-view--results .sanction-header-wrap {
position: relative;
}
.custom-dd-body .u-view.u-view--results .sanction-header-wrap .line-header {
left: -2.5rem;
top: -1rem;
}
.custom-dd-body .u-view.u-view--results .sanction-header-wrap.card .line-header {
left: calc(-2.5rem - 1px);
}
.custom-dd-body .u-view.u-view--results .sanction-header-wrap .sanction-header {
display: flex;
flex-direction: row;
gap: var(--space-4);
align-items: center;
}
.custom-dd-body .u-view.u-view--results .has-row-grid-wrapper:has(.row-grid-wrapper) {
padding-top: 0px !important;
}
html.custom-dd-html.border-radius {
--row-grid-radius: var(--nb-common-radius-layout, 12px);
}
html.custom-dd-html.border-radius .custom-dd-body .row-grid-wrapper > .row-grid:first-child {
border-top-left-radius: var(--row-grid-radius);
border-top-right-radius: var(--row-grid-radius);
}
html.custom-dd-html.border-radius .custom-dd-body .row-grid-wrapper > .row-grid:last-child {
border-bottom-left-radius: var(--row-grid-radius);
border-bottom-right-radius: var(--row-grid-radius);
}
html.custom-dd-html.border-radius .custom-dd-body .row-grid-wrapper.radius-sharp {
--row-grid-radius: var(--nb-common-radius-layout-sharp);
}
html.custom-dd-html.border-radius .custom-dd-body .row-grid-wrapper.radius-soft {
--row-grid-radius: var(--nb-common-radius-layout-soft) ;
}
html.custom-dd-html.border-radius .custom-dd-body .row-grid-wrapper.no-border-radius {
--row-grid-radius: 0px;
}
.custom-dd-body .u-view.u-view--results .scanner-results-sticky-menu {
max-width: 36rem;
min-width: 30rem;
top: calc(var(--gap-9));
position: sticky;
}
.custom-dd-body .u-view.u-view--results .scanner-results-sticky-menu .list-title {
color: var(--tk-ink-other-accent);
text-transform: uppercase;
}
.custom-dd-body .u-view.u-view--results .scanner-results-sticky-menu .list-container {
height: 100%;
overflow-y: auto;
max-height: calc(100vh - var(--main-content-side-top) - var(--breadcrumbs-height) - var(--gap-9) - var(--gap-6) - var(--gap-5) - 6.4rem);
}
.custom-dd-body .u-view.u-view--results .scanner-results-sticky-menu ul {
list-style: none;
padding: 0;
margin: 0;
}
.custom-dd-body .u-view.u-view--results .scanner-results-sticky-menu ul li::marker {
content: "";
display: none;
}
.custom-dd-body .u-view.u-view--results .scanner-results-sticky-menu ul {
--indent-level: 0;
}
.custom-dd-body .u-view.u-view--results .scanner-results-sticky-menu ul ul {
--indent-level: calc(var(--parent-indent, 0) + 1);
}
.custom-dd-body .u-view.u-view--results .scanner-results-sticky-menu ul li {
padding-left: 0;
--parent-indent: var(--indent-level);
}
.custom-dd-body .u-view.u-view--results .scanner-results-sticky-menu .tab-options-vertical {
display: flex;
width: 100%;
padding-left: calc(var(--tab-options-padding-left, var(--space-4)) + var(--space-6) * var(--indent-level, 0));
}
.custom-dd-body .u-view.u-view--results .scanner-results-sticky-menu .tab-options-vertical .tab-text {
width: 100%;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.custom-dd-body .footer-wrapper .nb-template-gap-2xl.padding-top {
padding-top: var(--nb-template-gap-2xl);
}
.custom-dd-body .footer-wrapper .nb-template-gap-2xl.margin-top {
margin-top: var(--nb-template-gap-2xl);
}
.custom-dd-body .footer-wrapper .separator {
border-top: 1px solid var(--tk-border-translucent-2, rgba(33, 33, 33, 0.2));
}
.custom-dd-body .footer-law-declarations-container {
display: grid;
grid-template-columns: repeat(9, 1fr);
gap: var(--gap-9);
}
.custom-dd-body .footer-law-declarations-container .footer-law-declarations-title {
grid-column: 1/span 3;
}
.custom-dd-body .footer-law-declarations-container .footer-law-declarations-content {
grid-column: 4/span 6;
color: var(--tk-ink-main-secondary);
}
.custom-dd-body .scanner-data-in-table.lp-table tbody td:first-child {
text-align: center;
}
.custom-dd-body .analytics-empty-state {
display: flex;
flex-direction: column;
align-items: flex-end;
padding-right: var(--analytics-empty-state-offset, 22rem);
}
.custom-dd-body .analytics-empty-state__arrow {
width: 9.6rem;
height: 12.8rem;
margin-top: -10.4rem;
margin-right: 4rem;
color: var(--tk-primary-base);
}
.custom-dd-body .analytics-empty-state__card {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-4, 8px);
max-width: 48rem;
padding: var(--nb-organism-card-padding-l, 32px);
margin-top: var(--space-4, 8px);
text-align: center;
background-color: var(--tk-surface-elevated);
border: 1px dashed var(--tk-border-solid-2);
border-radius: var(--nb-common-radius-layout, 12px);
}
.custom-dd-body .analytics-empty-state__icon {
display: flex;
align-items: center;
justify-content: center;
width: 6.4rem;
height: 6.4rem;
margin-bottom: var(--space-4, 8px);
border-radius: var(--nb-common-radius-control-pill, 999px);
background-color: var(--tk-primary-subtle);
color: var(--tk-primary-base);
}
.custom-dd-body .analytics-empty-state__icon svg {
width: 3.2rem;
height: 3.2rem;
}
.custom-dd-body .analytics-empty-state__title {
margin: 0;
color: var(--tk-ink-main-primary);
}
.custom-dd-body .analytics-empty-state__description {
margin: 0;
color: var(--tk-ink-main-secondary);
}
@media (max-width: 767px) {
.custom-dd-body .analytics-empty-state {
align-items: stretch;
padding-right: 0;
}
.custom-dd-body .analytics-empty-state__arrow {
display: none;
}
.custom-dd-body .analytics-empty-state__card {
max-width: none;
}
}
.custom-dd-body .analytics-new {
max-width: var(--form-width-1);
margin: 0 auto;
}
.custom-dd-body .analytics-new .u-icon {
width: 2.4rem;
height: 2.4rem;
flex-shrink: 0;
}
.custom-dd-body .analytics-new .input-field input[type=file].analytics-new__file {
padding-top: calc((var(--nb-common-control-size-xl) - 3.4rem) / 2);
padding-bottom: 0;
cursor: pointer;
}
.custom-dd-body .analytics-new .input-field input[type=file].analytics-new__file::file-selector-button {
height: 3.2rem;
margin-right: var(--space-8, 16px);
padding: 0 var(--space-8, 16px);
border: 1px solid var(--tk-border-solid-2);
border-radius: var(--nb-common-radius-control-pill, 100rem);
background-color: var(--tk-surface-toned);
color: var(--tk-ink-main-primary);
font: inherit;
line-height: 1;
cursor: pointer;
}
.custom-dd-body .analytics-import-help__formats {
display: flex;
flex-direction: column;
gap: var(--space-8, 16px);
margin-bottom: var(--space-8, 16px);
}
.custom-dd-body .analytics-import-help__heading {
display: flex;
align-items: center;
gap: var(--space-4, 8px);
margin-bottom: var(--space-4, 8px);
color: var(--tk-ink-main-primary);
}
.custom-dd-body .analytics-import-help .label {
margin-bottom: var(--space-2, 4px);
color: var(--tk-ink-main-toned);
}
.custom-dd-body .analytics-import-help pre,
.custom-dd-body .analytics-import-help code.d-block {
display: block;
margin: 0 0 var(--space-6, 12px);
padding: var(--space-5, 10px) var(--space-7, 14px);
background-color: var(--tk-surface-toned);
border: 1px solid var(--tk-border-solid-2);
border-radius: var(--nb-common-radius-control-soft, 0.8rem);
font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
font-size: 1.4rem;
line-height: 1.6;
color: var(--tk-ink-main-primary);
white-space: pre;
overflow-x: auto;
}
.custom-dd-body .analytics-import-help pre code {
font: inherit;
color: inherit;
}
.custom-dd-body .analytics-show {
display: flex;
flex-direction: column;
gap: var(--space-8, 16px);
padding-bottom: var(--space-10, 24px);
}
.custom-dd-body .analytics-show .u-icon {
width: 2rem;
height: 2rem;
flex-shrink: 0;
}
.custom-dd-body .analytics-show__title {
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-end;
}
.custom-dd-body .analytics-show__title .badge {
align-self: center;
}
.custom-dd-body .analytics-show__title-main {
display: flex;
flex-direction: column;
gap: var(--space-4, 8px);
min-width: 0;
}
.custom-dd-body .analytics-show__meta {
display: flex;
flex-wrap: wrap;
gap: var(--space-4, 8px) var(--space-10, 24px);
margin: 0;
color: var(--tk-ink-main-toned);
}
.custom-dd-body .analytics-show__meta span {
display: inline-flex;
align-items: center;
gap: var(--space-3, 6px);
}
.custom-dd-body .analytics-show__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: var(--space-4, 8px);
}
.custom-dd-body .analytics-show__actions form {
margin: 0;
}
.custom-dd-body .analytics-show__section {
min-width: 0;
overflow-x: auto;
}
.custom-dd-body .analytics-show__section-head {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-4, 8px) var(--space-8, 16px);
margin-bottom: var(--space-8, 16px);
}
.custom-dd-body .analytics-show__section-head form {
margin: 0;
}
.custom-dd-body .analytics-show__section-head > .analytics-show__actions {
flex: 1 1 auto;
}
.custom-dd-body .analytics-show__section-title {
display: flex;
align-items: center;
gap: var(--space-4, 8px);
margin: 0 0 var(--space-8, 16px);
}
.custom-dd-body .analytics-show__section-title .u-icon {
width: 2.4rem;
height: 2.4rem;
}
.custom-dd-body .analytics-show .analytics-show__section-head .analytics-show__section-title {
margin-bottom: 0;
}
.custom-dd-body .analytics-show__muted {
color: var(--tk-ink-main-toned);
}
.custom-dd-body .analytics-show__nowrap {
white-space: nowrap;
}
.custom-dd-body .analytics-show__center {
text-align: center;
}
.custom-dd-body .analytics-show__overview {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(36rem, 1fr));
gap: var(--space-8, 16px);
}
.custom-dd-body .analytics-show__frame {
display: block;
min-width: 0;
}
.custom-dd-body .analytics-show__chart {
position: relative;
height: 25rem;
}
.custom-dd-body .analytics-show__progress-head {
display: flex;
justify-content: space-between;
margin-bottom: var(--space-4, 8px);
color: var(--tk-ink-main-toned);
}
.custom-dd-body .analytics-show__filters {
display: flex;
flex-wrap: wrap;
gap: var(--space-4, 8px);
margin-bottom: var(--space-8, 16px);
}
.custom-dd-body .analytics-show__filters .chip {
gap: var(--space-2, 4px);
text-decoration: none;
}
.custom-dd-body .analytics-show__filters .u-icon {
width: 1.6rem;
height: 1.6rem;
}
.custom-dd-body .analytics-show__search {
flex: 0 1 28rem;
min-width: 16rem;
margin: 0;
}
.custom-dd-body .analytics-show__row:hover td {
background-color: var(--tk-surface-highlight-1);
}
.custom-dd-body .analytics-show__entity {
display: flex;
align-items: flex-start;
gap: var(--space-4, 8px);
}
.custom-dd-body .analytics-show__badges {
display: flex;
flex-wrap: wrap;
gap: var(--space-2, 4px);
}
.custom-dd-body .analytics-show__cell-actions {
width: 1px;
white-space: nowrap;
}
.custom-dd-body .analytics-show__cell-actions .analytics-show__actions {
flex-wrap: nowrap;
}
.custom-dd-body .analytics-show th a {
display: inline-flex;
align-items: center;
}
.custom-dd-body .analytics-show .visually-hidden {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.custom-dd-body .analytics-notice--warning {
background-color: var(--tk-warning-subtle);
border-color: var(--tk-warning-muted);
}
.custom-dd-body .analytics-notice--warning .analytics-show__section-title {
color: var(--tk-ink-other-warning);
}
.custom-dd-body .analytics-notice--danger {
background-color: var(--tk-danger-subtle);
border-color: var(--tk-danger-muted);
}
.custom-dd-body .analytics-notice--danger .analytics-show__section-title {
color: var(--tk-ink-other-danger);
}
.custom-dd-body .analytics-results__summary {
display: flex;
align-items: center;
gap: var(--space-4, 8px);
margin: 0 0 var(--space-8, 16px);
padding: var(--space-6, 12px) var(--space-8, 16px);
border-radius: var(--nb-common-radius-control-soft, 0.8rem);
}
.custom-dd-body .analytics-results__summary .u-icon {
width: 2rem;
height: 2rem;
flex-shrink: 0;
}
.custom-dd-body .analytics-results__summary--success {
background-color: var(--tk-success-subtle);
color: var(--tk-ink-other-success);
}
.custom-dd-body .analytics-results__summary--danger {
background-color: var(--tk-danger-subtle);
color: var(--tk-ink-other-danger);
}
.custom-dd-body .analytics-duplicates__resolved summary {
cursor: pointer;
color: var(--tk-ink-main-toned);
}
.custom-dd-body .analytics-duplicates__resolved[open] summary {
margin-bottom: var(--space-8, 16px);
}
.custom-dd-body .analytics-pagination {
display: flex;
justify-content: flex-end;
margin-top: var(--space-8, 16px);
}
.custom-dd-body .analytics-pagination .pagy.nav {
display: flex;
flex-wrap: wrap;
gap: var(--space-2, 4px);
}
.custom-dd-body .analytics-pagination .pagy.nav a {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 3.2rem;
height: 3.2rem;
padding: 0 var(--space-5, 10px);
border-radius: var(--nb-common-radius-control-pill, 100rem);
color: var(--tk-ink-main-primary);
text-decoration: none;
}
.custom-dd-body .analytics-pagination .pagy.nav a:not([aria-disabled]):hover {
background-color: var(--tk-surface-highlight-1);
}
.custom-dd-body .analytics-pagination .pagy.nav a.current {
background-color: var(--tk-primary-base);
color: var(--tk-ink-contrast-primary);
}
.custom-dd-body .analytics-pagination .pagy.nav a[aria-disabled]:not(.current) {
color: var(--tk-ink-main-toned);
opacity: 0.6;
}
.custom-dd-body .analytics-entity__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(36rem, 1fr));
gap: var(--space-8, 16px);
align-items: start;
}
.custom-dd-body .analytics-entity__details {
display: grid;
grid-template-columns: max-content 1fr;
gap: var(--space-5, 10px) var(--space-10, 24px);
margin: 0;
}
.custom-dd-body .analytics-entity__details dt {
color: var(--tk-ink-main-toned);
font-weight: 400;
}
.custom-dd-body .analytics-entity__details dd {
margin: 0;
color: var(--tk-ink-main-primary);
word-break: break-word;
}
.custom-dd-body .analytics-entity__flags {
display: flex;
flex-wrap: wrap;
gap: var(--space-5, 10px) var(--space-10, 24px);
margin: 0;
padding: 0;
border: 0;
}
.custom-dd-body .analytics-entity__flags legend {
width: 100%;
margin-bottom: var(--space-3, 6px);
float: none;
padding: 0;
}
.custom-dd-body .analytics-entity__flags .checkbox-label {
gap: var(--space-4, 8px);
}
.custom-dd-body .analytics-entity__suggestion {
padding: var(--space-8, 16px);
border-radius: var(--nb-common-radius-control-soft, 0.8rem);
background-color: var(--tk-surface-toned);
}
.custom-dd-body .analytics-entity__changes {
display: flex;
flex-direction: column;
gap: var(--space-2, 4px);
}
.custom-dd-body .analytics-entity .chip {
gap: var(--space-2, 4px);
text-decoration: none;
}
.custom-dd-body .analytics-entity .chip .u-icon {
width: 1.4rem;
height: 1.4rem;
}
.custom-dd-body .analytics-risk-levels tbody tr {
cursor: grab;
}
.custom-dd-body .analytics-risk-levels__color-cell {
width: 1px;
}
.custom-dd-body .analytics-risk-levels__swatch {
display: block;
width: 2.4rem;
height: 2.4rem;
border-radius: var(--nb-common-radius-control-soft, 0.8rem);
border: 1px solid var(--tk-border-translucent-1);
}
.custom-dd-body .analytics-risk-levels .sortable-dragging {
opacity: 0.5;
}
.custom-dd-body .analytics-risk-levels .sortable-drop-before td {
box-shadow: inset 0 2px 0 var(--tk-primary-base);
}
.custom-dd-body .analytics-risk-levels .sortable-drop-after td {
box-shadow: inset 0 -2px 0 var(--tk-primary-base);
}
.custom-dd-body .analytics-new .input-field input.analytics-risk-levels__color-input[type=color] {
width: 8rem;
padding: 0.4rem;
cursor: pointer;
}
/*# sourceMappingURL=/assets/universe/application-996213e8.css.map */