@font-face {
    font-family: "Fluent Emoji";
    src: url("fonts/fluent-emoji.ttf") format("trueType");
}

:root {
    --color-tata-blue: #3d7fdb;
    --color-direct-red: #c73502;
    --color-brand-white: #fff;
    --color-brand-black: #000;
    --color-subtle-silver: #f0f0f0;
    --color-pale-silver: #e0e0e0;
    --color-brand-violet: #5a245a;
    --color-brand-violet-70: #8c668c;
    --color-brand-violet-40: #bda7bd;
    --color-brand-red: #ed2939;
    --color-brand-red-70: #f26a76;
    --color-brand-red-40: #f8abaf;
    --color-brand-yellow: #ffa100;
    --color-brand-yellow-70: #e2be4c;
    --color-brand-yellow-40: #e2da9a;
    --color-brand-green: #34b233;
    --color-brand-green-70: #72d372;
    --color-brand-green-40: #afe1af;
    --color-brand-marine: #0083a9;
    --color-brand-marine-70: #4caac4;
    --color-brand-marine-40: #9acede;
    --color-brand-deep-blue: #002b45;
    --color-brand-deep-blue-70: #4c6b7e;
    --color-brand-deep-blue-40: #9aacb6;
    --color-brand-silver: #999;
    --color-brand-silver-70: #b9b9b9;
    --color-brand-silver-40: #d7d7d7;
    --color-brand-neutral: #beb9a6;
    --color-brand-neutral-70: #d3cfc2;
    --color-brand-neutral-40: #e6e4dc;
    --color-static-red: #fe2e2e;
    --color-static-red-background: #fe8181;
    --color-static-red-foreground: #cb2424;
    --color-static-salmon: #f66;
    --color-static-salmon-background: #fcc;
    --color-static-salmon-foreground: #f66;
    --color-static-sun: #ffa500;
    --color-static-sun-background: #ffc04d;
    --color-static-sun-foreground: #cc8400;
    --color-static-orange: #ff6f00;
    --color-static-orange-background: #ff9a4d;
    --color-static-orange-foreground: #b34e00;
    --color-static-tangerine: #ffd27f;
    --color-static-tangerine-background: #ffdb99;
    --color-static-tangerine-foreground: #cca866;
    --color-static-eggshell: #e7dcac;
    --color-static-eggshell-background: #eee7c5;
    --color-static-eggshell-foreground: #a29a78;
    --color-static-yellow: #f8ed62;
    --color-static-yellow-background: #faf291;
    --color-static-yellow-foreground: #958e3b;
    --color-static-gold: #a98600;
    --color-static-gold-background: #cbb666;
    --color-static-gold-foreground: #765e00;
    --color-static-swamp: #828c51;
    --color-static-swamp-background: #a8af85;
    --color-static-swamp-foreground: #4e5431;
    --color-static-brown: #8b5a2b;
    --color-static-brown-background: #ae8c6b;
    --color-static-brown-foreground: #53361a;
    --color-static-forest: #2d9e30;
    --color-static-forest-background: #6cbb6e;
    --color-static-forest-foreground: #1b5f1d;
    --color-static-waz-water: #4d7f17;
    --color-static-waz-water-background: #94b274;
    --color-static-waz-water-foreground: #2e4c0e;
    --color-static-green: #0c3;
    --color-static-green-background: #66e085;
    --color-static-green-foreground: #00661a;
    --color-static-turqouise: #91f9e5;
    --color-static-turqouise-background: #b2fbed;
    --color-static-turqouise-foreground: #3a645c;
    --color-static-light-blue: #3abeff;
    --color-static-light-blue-background: #9ddfff;
    --color-static-light-blue-foreground: #1d5f80;
    --color-static-blue: #3c59ff;
    --color-static-blue-background: #9eacff;
    --color-static-blue-foreground: #243599;
    --color-static-dark-blue: #1a1a97;
    --color-static-dark-blue-background: #5f5fb6;
    --color-static-dark-blue-foreground: #151579;
    --color-static-light-purple: #a48bbf;
    --color-static-light-purple-background: #bfaed2;
    --color-static-light-purple-foreground: #625373;
    --color-static-purple: #be29ec;
    --color-static-purple-background: #d87ff4;
    --color-static-purple-foreground: #5f1576;
    --color-static-dark-purple: #606;
    --color-static-dark-purple-background: #b380b3;
    --color-static-dark-purple-foreground: #3d003d;
    --color-static-pink: #f9c;
    --color-static-pink-background: #ffc2e0;
    --color-static-pink-foreground: #804d66;
    --color-static-dark-pink: #f37;
    --color-static-dark-pink-background: #ff85ad;
    --color-static-dark-pink-foreground: #801a3c;
    --color-static-metal: #ccc;
    --color-static-metal-background: #e0e0e0;
    --color-static-metal-foreground: #666;
    --color-static-iron: #aaa;
    --color-static-iron-background: #ccc;
    --color-static-iron-foreground: #444;
    --color-accent: #3d7fdb;
    --color-accent-hover: #3771c5;
    --color-accent-pressed: #3165af;
    --color-accent-selected: #346bba;
    --color-accent-parent-background: #3d7fdb;
    --color-accent-parent-background-hover: #3771c5;
    --color-accent-parent-background-pressed: #3165af;
    --color-accent-parent-background-selected: #346bba;
    --color-accent-background-static: #3d7fdb;
    --color-accent-background-light: #6d9fe4;
    --color-accent-background-lighter: #a9c6ef;
    --color-accent-background-lightest: #f4f7fd;
    --color-accent-background-thickest: #266fd6;
    --color-on-accent-stroke: #fff;
    --color-accent-text: #3d7fdb;
    --color-on-accent-text: #fff;
    --color-on-accent-link: #fff;
    --color-on-accent-link-hover: #fff;
    --color-on-accent-link-pressed: #fff;
    --color-on-accent-link-selected: #fff;
    --color-neutral-background: #fbfbfb;
    --color-neutral-background-hover: #eee;
    --color-neutral-background-pressed: #e2e2e2;
    --color-neutral-background-selected: #eee;
    --color-neutral-background-disabled: #e0e0e0;
    --color-neutral-background-2: #f7f7f7;
    --color-neutral-background-2-hover: #ebebeb;
    --color-neutral-background-2-pressed: #dedede;
    --color-neutral-background-2-selected: #ebebeb;
    --color-neutral-background-3: #f2f2f2;
    --color-neutral-background-3-hover: #e6e6e6;
    --color-neutral-background-3-pressed: #dadada;
    --color-neutral-background-3-selected: #e6e6e6;
    --color-neutral-background-4: #eaeaea;
    --color-neutral-background-4-hover: #dedede;
    --color-neutral-background-4-pressed: #d3d3d3;
    --color-neutral-background-4-selected: #dedede;
    --color-neutral-parent-background: #fbfbfb;
    --color-neutral-parent-background-hover: #eee;
    --color-neutral-parent-background-pressed: #e2e2e2;
    --color-neutral-parent-background-selected: #eee;
    --color-neutral-parent-background-disabled: #e0e0e0;
    --color-neutral-parent-background-2: #fbfbfb;
    --color-neutral-parent-background-2-hover: #eee;
    --color-neutral-parent-background-2-pressed: #e2e2e2;
    --color-neutral-parent-background-2-selected: #eee;
    --color-neutral-parent-background-2-disabled: #e0e0e0;
    --color-neutral-stroke: #d1d1d1;
    --color-neutral-stroke-2: #ededed;
    --color-neutral-stroke-3: #d2d2d2;
    --color-neutral-stroke-4: #dadada;
    --color-neutral-stroke-disabled: #e0e0e0;
    --color-neutral-text: #151515;
    --color-neutral-text-2: #252525;
    --color-neutral-text-3: #404040;
    --color-neutral-text-4: #606060;
    --color-neutral-link: #3d7fdb;
    --color-neutral-link-hover: #266fd6;
    --color-neutral-link-pressed: #0d5fd1;
    --color-neutral-link-selected: #266fd6;
    --color-neutral-text-subtle: #919191;
    --color-neutral-text-disabled: #aaa;
    --color-neutral-text-disabled-2: #bdbdbd;
    --color-gap-background: #dedede;
    --color-gap-background-disabled: #eee;
    --color-gap-background-disabled-checked: #dedede;
    --color-gap-foreground: #fff;
    --color-gap-foreground-disabled: #fafafa;
    --color-required-text: #fe2e2e;
    --color-nav-bar-background: #3d7fdb;
    --color-nav-bar-background-hover: #266fd6;
    --color-nav-bar-background-pressed: #0d5fd1;
    --color-nav-bar-background-selected: #266fd6;
    --color-nav-bar-stroke: #3d7fdb;
    --color-on-nav-text: #fff;
    --color-on-nav-accent-text: #fff;
    --color-on-nav-link: #fff;
    --color-on-nav-link-hover: #fff;
    --color-on-nav-link-pressed: #fff;
    --color-on-nav-link-selected: #fff;
    --color-on-nav-logo: #fff;
    --color-footer-background: #eaeaea;
    --color-footer-background-hover: #dedede;
    --color-footer-background-pressed: #d3d3d3;
    --color-footer-background-selected: #dedede;
    --color-footer-stroke: #d1d1d1;
    --color-on-footer-text: #606060;
    --color-on-footer-accent-text: #3d7fdb;
    --color-on-footer-link: #606060;
    --color-on-footer-link-hover: #606060;
    --color-on-footer-link-pressed: #606060;
    --color-on-footer-link-selected: #606060;
    --color-on-footer-logo: #606060;
    --color-menu-background: #f7f7f7;
    --color-menu-background-hover: #f0f0f0;
    --color-menu-background-pressed: #e7e7e7;
    --color-menu-background-selected: #ececec;
    --color-on-menu-text: #151515;
    --color-on-menu-accent-text: #3d7fdb;
    --color-on-menu-link: #151515;
    --color-on-menu-link-hover: #151515;
    --color-on-menu-link-pressed: #151515;
    --color-on-menu-link-selected: #151515;
    --color-toolbar-background-tab: #25282d;
    --color-toolbar-background-tab-hover: #2a2e34;
    --color-toolbar-background-tab-pressed: #202327;
    --color-toolbar-background-tab-selected: #353a41;
    --color-toolbar-tab-text: #ddd;
    --color-toolbar-background: #353a41;
    --color-toolbar-background-hover: #3c4149;
    --color-toolbar-background-pressed: #31363c;
    --color-toolbar-background-selected: #4e5560;
    --color-toolbar-background-disabled: #353a41;
    --color-toolbar-border: #404040;
    --color-toolbar-stroke: #575f6b;
    --color-toolbar-text: #ddd;
    --color-toolbar-text-disabled: #697381;
    --color-transparent-background: transparent;
    --color-transparent-background-hover: transparent;
    --color-transparent-background-pressed: transparent;
    --color-transparent-background-selected: transparent;
    --color-border-glass: 1px solid rgba(255, 255, 255, 0.25);
    --color-border-intense: 1px solid rgba(255, 255, 255, 0.25);
    --color-overlay-dialog: rgba(0, 0, 0, 0.5);
    --color-overlay-lesser: rgba(0, 0, 0, 0.25);
    --color-overlay-least: rgba(0, 0, 0, 0.10);
    --color-scroll-background: #f1f1f1;
    --color-scroll-thumb: #888;
    --color-scroll-thumb-hover: #555;
    --filter-image-nav: brightness(0) invert(1);
    --filter-image-menu: brightness(0) invert(1);
    --backdrop-filter-glass: blur(5px);
    --backdrop-webkit-filter-glass: blur(5);
    --backdrop-filter-glass-intense: blur(15px);
    --backdrop-webkit-filter-glass-intese: blur(15);
    --webkit-filter-drop-shadow-icon: drop-shadow(10px 5px 5px #222 88);
    --filter-drop-shadow-icon: drop-shadow(10px 5px 5px #222 88);
    --webkit-filter-drop-shadow-icon-zoom: drop-shadow(20px 15px 10px #222 88);
    --filter-drop-shadow-icon-zoom: drop-shadow(20px 15px 10px #222 88);
    --border-radius-none: 0px;
    --border-radius-small-corner: 3px;
    --border-radius-normal-corner: 5px;
    --border-radius-large-corner: 10px;
    --border-radius-circular: 50000px;
    --border-width-negative-normal: -1px;
    --border-width-normal: 1px;
    --border-width-thin: 2px;
    --border-width-large: 3px;
    --border-width-largest: 5px;
    --stroke-width-normal: 1px;
    --stroke-width-thick: 2px;
    --stroke-width-thicker: 3px;
    --stroke-width-thickest: 4px;
    --spacing-xs-negative: -5px;
    --spacing-m-negative: -10px;
    --spacing-none: 0px;
    --spacing-thin: 2px;
    --spacing-xxs: 3px;
    --spacing-xs: 5px;
    --spacing-s: 7px;
    --spacing-m: 10px;
    --spacing-l: 15px;
    --spacing-xl: 20px;
    --spacing-xxl: 25px;
    --spacing-xxxl: 30px;
    --animation-duration-ultra-fast: 0.05s;
    --animation-duration-super-fast: 0.1s;
    --animation-duration-fast: 0.2s;
    --animation-duration-normal: 0.3s;
    --animation-duration-slow: 0.4s;
    --animation-duration-super-slow: 0.5s;
    --animation-duration-ultra-slow: 1s;
    --animation-duration-loading: 1.2s;
    --animation-duration-loading-bar: 3s;
    --box-shadow-paper: 0px 5px 15px rgba(0, 0, 0, 0.25);
    --box-shadow-normal: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.30) 0px 1px 3px -1px;
    --box-shadow-thicker: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.30) 0px 3px 7px -3px;
    --box-shadow-lined-thick: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
    --box-shadow-lined-thicker: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
    --font-family-base: Arial, "Fluent Emoji", sans-serif, Helvetica;
    --font-family-doc: Arial, "Fluent Emoji";
    --font-family-monospace: Consolas, 'Courier New', Arial;
    --character-spacing: -25px;
    --font-size-super-small: 8px;
    --font-size-very-small: 10px;
    --font-size-small: 12px;
    --font-size-base: 14px;
    --font-size-head-small: 16px;
    --font-size-head-normal: 20px;
    --font-size-head-large: 24px;
    --font-size-title-small: 28px;
    --font-size-title-normal: 32px;
    --font-size-title-large: 40px;
    --font-size-largest: 72px;
    --font-size-doc-base: 11pt;
    --font-size-doc-title: 22pt;
    --font-size-doc-h1: 16pt;
    --font-size-doc-h2: 14pt;
    --font-size-doc-h3: 13pt;
    --tab-size-doc: 4;
    --responsive-mobile-width: 500px;
    --responsive-max-width: 1820px;
    --responsive-max-width-normal: 1750px;
    --responsive-max-width-lesser: 1400px;
    --responsive-max-width-even-lesser: 1250px;
}

[direct-mode="dark"] {
    --color-accent-background-light: #3570bf;
    --color-accent-background-lighter: #234a7f;
    --color-accent-background-lightest: #0f1f36;
    --color-neutral-background: #171717;
    --color-neutral-background-hover: #262626;
    --color-neutral-background-pressed: #101010;
    --color-neutral-background-selected: #2e2e2e;
    --color-neutral-background-disabled: #101010;
    --color-neutral-background-2: #202020;
    --color-neutral-background-2-hover: #303030;
    --color-neutral-background-2-pressed: #1a1a1a;
    --color-neutral-background-2-selected: #303030;
    --color-neutral-background-3: #2d2d2d;
    --color-neutral-background-3-hover: #3d3d3d;
    --color-neutral-background-3-pressed: #1f1f1f;
    --color-neutral-background-3-selected: #3d3d3d;
    --color-neutral-background-4: #474747;
    --color-neutral-background-4-hover: #535353;
    --color-neutral-background-4-pressed: #3d3d3d;
    --color-neutral-background-4-selected: #535353;
    --color-neutral-parent-background: #2d2d2d;
    --color-neutral-parent-background-hover: #3d3d3d;
    --color-neutral-parent-background-pressed: #1f1f1f;
    --color-neutral-parent-background-selected: #3d3d3d;
    --color-neutral-parent-background-disabled: #101010;
    --color-neutral-parent-background-2: #202020;
    --color-neutral-parent-background-2-hover: #303030;
    --color-neutral-parent-background-2-pressed: #1a1a1a;
    --color-neutral-parent-background-2-selected: #303030;
    --color-neutral-parent-background-2-disabled: #202020;
    --color-neutral-stroke: #404040;
    --color-neutral-stroke-2: #323232;
    --color-neutral-stroke-3: #747474;
    --color-neutral-stroke-4: #505050;
    --color-neutral-stroke-disabled: #424242;
    --color-neutral-text: #efefef;
    --color-neutral-text-2: #ddd;
    --color-neutral-text-3: #bebebe;
    --color-neutral-text-4: #c1c1c1;
    --color-neutral-text-subtle: #808080;
    --color-neutral-text-disabled: #565656;
    --color-neutral-text-disabled-2: #424242;
    --color-gap-background: #474747;
    --color-gap-background-disabled: #373737;
    --color-gap-background-disabled-checked: #404040;
    --color-gap-foreground: #efefef;
    --color-gap-foreground-disabled: #9f9f9f;
    --color-nav-bar-background: #202020;
    --color-nav-bar-background-hover: #303030;
    --color-nav-bar-background-pressed: #1a1a1a;
    --color-nav-bar-background-selected: #303030;
    --color-nav-bar-stroke: #404040;
    --color-on-nav-text: #efefef;
    --color-on-nav-accent-text: #3570bf;
    --color-on-nav-link: #efefef;
    --color-on-nav-link-hover: #efefef;
    --color-on-nav-link-pressed: #efefef;
    --color-on-nav-link-selected: #efefef;
    --color-footer-background: #040404;
    --color-footer-background-hover: #080808;
    --color-footer-background-pressed: #000;
    --color-footer-background-selected: #080808;
    --color-footer-stroke: #404040;
    --color-on-footer-text: #efefef;
    --color-on-footer-accent-text: #3d7fdb;
    --color-on-footer-link: #efefef;
    --color-on-footer-link-hover: #efefef;
    --color-on-footer-link-pressed: #efefef;
    --color-on-footer-link-selected: #efefef;
    --color-on-footer-logo: #efefef;
    --color-menu-background: #202020;
    --color-menu-background-hover: #303030;
    --color-menu-background-pressed: #1a1a1a;
    --color-menu-background-selected: #303030;
    --color-on-menu-text: #efefef;
    --color-on-menu-link: #efefef;
    --color-on-menu-link-hover: #efefef;
    --color-on-menu-link-pressed: #efefef;
    --color-on-menu-link-selected: #efefef;
    --color-toolbar-background-tab: #202020;
    --color-toolbar-background-tab-hover: #2a2a2a;
    --color-toolbar-background-tab-pressed: #242424;
    --color-toolbar-background-tab-selected: #2d2d2d;
    --color-toolbar-tab-text: #ddd;
    --color-toolbar-background: #2d2d2d;
    --color-toolbar-background-hover: #404040;
    --color-toolbar-background-pressed: #303030;
    --color-toolbar-background-selected: #474747;
    --color-toolbar-background-disabled: #2d2d2d;
    --color-toolbar-border: #404040;
    --color-toolbar-stroke: #505050;
    --color-toolbar-text: #ddd;
    --color-toolbar-text-disabled: #808080;
    --color-border-glass: 1px solid rgba(0, 0, 0, 0.25);
    --color-border-intense: 1px solid rgba(0, 0, 0, 0.25);
    --color-scroll-background: #121212;
    --color-scroll-thumb: #646464;
    --color-scroll-thumb-hover: #747474;
    --filter-image-nav: brightness(0) invert(1);
    --filter-image-menu: brightness(0) invert(1);
    --box-shadow-paper: 0px 5px 15px rgba(0, 0, 0, 0.50);
    --box-shadow-normal: rgba(0, 0, 0, 0.50) 0px 2px 5px -1px, rgba(0, 0, 0, 0.60) 0px 1px 3px -1px;
    --box-shadow-thicker: rgba(0, 0, 0, 0.50) 0px 6px 12px -2px, rgba(0, 0, 0, 0.60) 0px 3px 7px -3px;
    --box-shadow-lined-thick: rgba(0, 0, 0, 0.10) 0px 6px 24px 0px, rgba(0, 0, 0, 0.16) 0px 0px 0px 1px;
    --box-shadow-lined-thicker: rgba(0, 0, 0, 0.32) 0px 10px 36px 0px, rgba(0, 0, 0, 0.12) 0px 0px 0px 1px;
}

.direct-scroll-bar::-webkit-scrollbar {
    width: var(--spacing-l);
    height: var(--spacing-l);
    transition: var(--animation-duration-normal);
}

.direct-scroll-bar::-webkit-scrollbar-track {
    background-color: var(--color-transparent-background);
    transition: var(--animation-duration-normal);
}

.direct-scroll-bar::-webkit-scrollbar-thumb {
    border: solid var(--border-width-largest) transparent;
    min-height: 50px;
    min-width: 50px;
    background-clip: padding-box;
    background-color: var(--color-scroll-thumb);
    border-radius: var(--border-radius-circular);
    transition: var(--animation-duration-normal);
}

    .direct-scroll-bar::-webkit-scrollbar-thumb:hover {
        background-color: var(--color-scroll-thumb-hover);
    }

.direct-scroll-bar::-webkit-scrollbar-corner {
    background-color: var(--color-transparent-background);
}

.direct-scroll-bar-shell::-webkit-scrollbar {
    width: var(--spacing-l);
    height: var(--spacing-l);
    box-sizing: border-box;
    transition: var(--animation-duration-normal);
}

.direct-scroll-bar-shell::-webkit-scrollbar-track {
    background-color: var(--color-scroll-background);
    transition: var(--animation-duration-normal);
}

.direct-scroll-bar-shell::-webkit-scrollbar-thumb {
    border: solid var(--border-width-largest) transparent;
    min-height: 50px;
    min-width: 50px;
    background-clip: padding-box;
    background-color: var(--color-scroll-thumb);
    border-radius: var(--border-radius-circular);
    transition: var(--animation-duration-normal);
}

    .direct-scroll-bar-shell::-webkit-scrollbar-thumb:hover {
        background-color: var(--color-scroll-thumb-hover);
    }

.direct-scroll-bar-shell::-webkit-scrollbar-corner {
    background-color: var(--color-scroll-background);
}

.direct-overlay-backdrop {
    background-color: var(--color-overlay-dialog);
}

.direct-overlay-backdrop-no-header {
    background-color: var(--color-overlay-dialog);
    margin-top: 50px;
}

.direct-overlay-panel {
    height: 100%;
}

.direct-overlay-panel-no-header {
    height: calc(100% - 50px);
}

.direct-overlay-panel-horizontal {
    width: 100%;
}

.cdk-overlay-backdrop {
    transition: opacity var(--animation-duration-normal) cubic-bezier(0.25, 0.8, 0.25, 1);
}

.rotate-cursor {
    cursor: url("cursors/rotate-cursor.svg"), grab;
}

::highlight(direct-find-highlight) {
    background-color: #3d7fdb;
    color: #fff;
}