:root {
    font-family: "Inter", sans-serif !important;
}

@supports (font-variation-settings: normal) {
    :root {
        font-family: "InterVariable", sans-serif !important;
        font-optical-sizing: auto;
    }
}

:root {

    --electric-purple: #4600B4;
    --charged-purple: #5F00FA;
    --omnidocs-gray: #323232;

    /* Primary colors */
    --white: #FFFFFF;
    --white-dimmed: rgba(255, 255, 255, 0.9);
    --black-rock: #0F0E32;
    --black-rock-80: #3F3E5B;
    --black-rock-60: #6F6E84;
    --black-rock-30: #B7B7C2;
    --black-rock-10: #E7E7EB;
    --electric-violet: #8f3AFC;
    --electric-violet-80: #A561FD;
    --electric-violet-60: #BC89FD;
    --electric-violet-30: #DEC4FF;
    --electric-violet-10: #F4ECFF;
    --violet-red: #FD4186;
    --violet-red-80: #FD679E;
    --violet-red-60: #FE8DB6;
    --violet-red-30: #FFC6DB;
    --violet-red-10: #FFECF3;
    --crusta-dark: #cc4b00;
    --crusta: #FF7629;
    --crusta-80: #FF9154;
    --crusta-60: #FFAD7F;
    --crusta-30: #FFD6BF;
    --crusta-10: #FFF2EA;
    --lightning-yellow: #FEBC14;
    --lightning-yellow-80: #FECA43;
    --lightning-yellow-60: #FED772;
    --lightning-yellow-30: #FFECB9;
    --lightning-yellow-10: #FFF9E8;
    /* Secondary colors */
    --royal-blue: #3D7BF9;
    --royal-blue-80: #6495FA;
    --royal-blue-60: #8BB0FB;
    --royal-blue-30: #C5D8FE;
    --royal-blue-10: #ECF2FF;
    --malibu: #76BEFF;
    --malibu-80: #91CBFF;
    --malibu-60: #ADD8FF;
    --malibu-30: #D6ECFF;
    --malibu-10: #F2F9FF;
    --mint-green: #7FFF8E;
    --mint-green-80: #99FFA5;
    --mint-green-60: #B2FFBB;
    --mint-green-30: #D9FFDE;
    --mint-green-10: #F3FFF4;
    /* Neutral colors */

    --green2: #6CDB00;

    --word-blue: #185abd;
    --powerPoint-orange: #c43f1d;
    --excel-green: #107a40;

    --light1: #fff;
    --light2: #e6e6e6;
    --light3: rgb(242, 243, 245);
    --light4: rgb(235, 237, 239);
    --light5: rgb(227, 229, 232);
    --light6: rgb(245, 246, 248);

    --dark1: #191B1F;
    --dark2: #282B31;
    --dark3: rgb(59, 66, 84);
    --dark4: rgb(30, 32, 36);
    --dark5: rgb(40, 42, 46);
    --dark6: rgb(52, 54, 58);
    --dark7: rgba(52, 54, 58, 0.40);
    --dark-selected: rgb(60 67 103);

    --dark1-tinted: rgb(23, 24, 33);
    --dark2-tinted: rgb(35, 36, 49);
    --dark3-tinted: rgb(47, 48, 66);

    --dark4-tinted: rgb(40, 41, 58);


    /* Drop shadow */
    --dropshadow-level-one: 0px 2px 1px -1px rgba(0,0,0,0.2), 0px 1px 1px 0px rgba(0,0,0,0.14), 0px 1px 3px 0px rgba(0,0,0, 0.12);
    --dropshadow-level-two: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --dropshadow-level-three: 0 11px 15px -7px rgba(0,0,0,0.2), 0 24px 38px 3px rgba(0,0,0,0.14), 0 9px 46px 8px rgba(0,0,0, 0.12);
    --dropshadow-level-four: 0px 4px 10px rgba(0, 0, 0, 0.10);
    --dropshadow-level-one-alternate: 0px 10px 20px rgb(0 0 0 / 0.1);
    --dropshadow-level-three-alternate: 0px 7px 18px rgba(0, 0, 0, 0.15), 0px 10px 30px rgba(0, 0, 0, 0.13);
}


html {

    /* Neutrals */
    --ods-Z0: initial;
    --ods-Z1: initial;
    --ods-Z2: initial;
    --ods-Z3: initial;
    --ods-Z4: initial;
    --ods-Z5: initial;
    --ods-Z6: initial;
    --ods-Z7: initial;
    --ods-Z8: initial;
    --ods-Z9: initial;
    --ods-Z10: initial;

    --ods-T1: initial;
    --ods-T2: initial;
    --ods-T3: initial;
    --ods-T4: initial;
    --ods-T5: initial;
    --ods-T6: initial;
    --ods-T7: initial;
    --ods-T8: initial;
    --ods-T9: initial;
    --ods-T10: initial;

    /* General colors */
    --ods-teal-Z1: ;
    --ods-teal-Z2: ;
    --ods-teal-Z3: ;
    --ods-teal-Z4: ;
    --ods-teal-Z5: ;
    --ods-teal-Z6: ;
    --ods-teal-Z7: ;
    --ods-teal-Z8: ;
    --ods-teal-Z9: ;
    --ods-teal-Z10: ;
    --ods-teal-Z11: ;
    --ods-teal-Z12: ;

    --ods-teal-T1: ;
    --ods-teal-T2: ;
    --ods-teal-T3: ;
    --ods-teal-T4: ;
    --ods-teal-T5: ;
    --ods-teal-T6: ;
    --ods-teal-T7: ;
    --ods-teal-T8: ;
    --ods-teal-T9: ;
    --ods-teal-T10: ;
    --ods-teal-T11: ;
    --ods-teal-T12: ;

    /* Semantics */
    --ods-success-default: initial;
    --ods-success-hover: initial;

    --ods-success-Z1: initial;
    --ods-success-Z2: initial;
    --ods-success-Z3: initial;
    --ods-success-Z4: initial;
    --ods-success-Z5: initial;
    --ods-success-Z6: initial;
    --ods-success-Z7: initial;
    --ods-success-Z8: initial;
    --ods-success-Z9: initial;
    --ods-success-Z10: initial;
    --ods-success-Z11: initial;
    --ods-success-Z12: initial;

    --ods-success-T1: initial;
    --ods-success-T2: initial;
    --ods-success-T3: initial;
    --ods-success-T4: initial;
    --ods-success-T5: initial;
    --ods-success-T6: initial;
    --ods-success-T7: initial;
    --ods-success-T8: initial;
    --ods-success-T9: initial;
    --ods-success-T10: initial;
    --ods-success-T11: initial;
    --ods-success-T12: initial;


    --ods-warning-default: initial;
    --ods-warning-hover: initial;

    --ods-warning-Z1: initial;
    --ods-warning-Z2: initial;
    --ods-warning-Z3: initial;
    --ods-warning-Z4: initial;
    --ods-warning-Z5: initial;
    --ods-warning-Z6: initial;
    --ods-warning-Z7: initial;
    --ods-warning-Z8: initial;
    --ods-warning-Z9: initial;
    --ods-warning-Z10: initial;
    --ods-warning-Z11: initial;
    --ods-warning-Z12: initial;

    --ods-warning-T1: initial;
    --ods-warning-T2: initial;
    --ods-warning-T3: initial;
    --ods-warning-T4: initial;
    --ods-warning-T5: initial;
    --ods-warning-T6: initial;
    --ods-warning-T7: initial;
    --ods-warning-T8: initial;
    --ods-warning-T9: initial;
    --ods-warning-T10: initial;
    --ods-warning-T11: initial;
    --ods-warning-T12: initial;


    --ods-error-default: initial;
    --ods-error-hover: initial;

    --ods-error-Z1: initial;
    --ods-error-Z2: initial;
    --ods-error-Z3: initial;
    --ods-error-Z4: initial;
    --ods-error-Z5: initial;
    --ods-error-Z6: initial;
    --ods-error-Z7: initial;
    --ods-error-Z8: initial;
    --ods-error-Z9: initial;
    --ods-error-Z10: initial;
    --ods-error-Z11: initial;
    --ods-error-Z12: initial;

    --ods-error-T1: initial;
    --ods-error-T2: initial;
    --ods-error-T3: initial;
    --ods-error-T4: initial;
    --ods-error-T5: initial;
    --ods-error-T6: initial;
    --ods-error-T7: initial;
    --ods-error-T8: initial;
    --ods-error-T9: initial;
    --ods-error-T10: initial;
    --ods-error-T11: initial;
    --ods-error-T12: initial;


    --ods-info-default: initial;
    --ods-info-hover: initial;

    --ods-info-Z1: initial;
    --ods-info-Z2: initial;
    --ods-info-Z3: initial;
    --ods-info-Z4: initial;
    --ods-info-Z5: initial;
    --ods-info-Z6: initial;
    --ods-info-Z7: initial;
    --ods-info-Z8: initial;
    --ods-info-Z9: initial;
    --ods-info-Z10: initial;
    --ods-info-Z11: initial;
    --ods-info-Z12: initial;

    --ods-info-T1: initial;
    --ods-info-T2: initial;
    --ods-info-T3: initial;
    --ods-info-T4: initial;
    --ods-info-T5: initial;
    --ods-info-T6: initial;
    --ods-info-T7: initial;
    --ods-info-T8: initial;
    --ods-info-T9: initial;
    --ods-info-T10: initial;
    --ods-info-T11: initial;
    --ods-info-T12: initial;

    /* Accent */
    --ods-accent-contrast: initial;
    --ods-accent-contrast-hover: initial;

    /* Core */
    --ods-bg-primary: initial;
    --ods-bg-panel-primary: initial;
    --ods-bg-menu-primary: initial;
    --ods-bg-hover: initial;
    --ods-bg-selected: initial;
    --ods-bg-form: initial;
    --ods-bg-document: initial;
    --ods-bg-app-nav: initial;
    --ods-bg-deep: initial;

    --ods-border-primary: initial;
    --ods-border-panel-primary: initial;
    --ods-border-menu-primary: initial;

    --ods-color-text: initial;
    --ods-color-text-inactive: initial;
    --ods-color-text-faded: initial;
    --ods-color-text-contrast: initial;

    --ods-border-radius: 6px;
    --ods-border-radius-large: 12px;

    /* Shadows */
    --ods-drop-shadow-01: initial;
    --ods-drop-shadow-02: initial;
    --ods-drop-shadow-03: initial;

    /* Conversions */
    --ods-Z1-Z0: initial;

    /* --- Old --- */

    --bg-primary: initial;
    --bg-component-primary: initial;
    --bg-component-secondary: initial;
    --bg-component-3: initial;
    --bg-component-4: initial;
    --bg-highlight-primary: initial;
    --bg-highlight-secondary: initial;
    --bg-highlight-faded: initial;
    --bg-highlight-selected: initial;
    --bg-overlay: initial;
    --color-text: initial;
    --color-text-inactive: initial;
    --color-text-faded: initial;
    --color-text-faded-none-alpha: initial;
    --border-color: initial;
    --border-color-secondary: initial;
    --brand-color: initial;
    --brand-color-light: initial;
    --brand-color-variation-1: initial;
    --organization-color: initial;
    --unit-color: initial;
    --location-bar-color: initial;
    --success-color: initial;
    --error-color: initial;
    --error-color-calm: initial;
    --warning-color: initial;
    --data-viewer-scope-line: initial;
    --data-viewer-number-font: initial;
    --data-viewer-string-font: initial;
    --data-viewer-enabled-font: initial;
    --data-viewer-disabled-font: initial;
}

html[data-theme='light'] {

    /* Neutrals */
    --ods-Z0: #FFFFFF;
    --ods-Z1: #F5F5F5;
    --ods-Z2: #F0F0F0;
    --ods-Z3: #EBEBEB;
    --ods-Z4: #E0E0E0;
    --ods-Z5: #D6D6D6;
    --ods-Z6: #BFBFBF;
    --ods-Z7: #808080;
    --ods-Z8: #4D4D4D;
    --ods-Z9: #1A1A1A;
    --ods-Z10: #000000;

    --ods-T1: rgba(0, 0, 0, 0.04);
    --ods-T2: rgba(0, 0, 0, 0.06);
    --ods-T3: rgba(0, 0, 0, 0.08);
    --ods-T4: rgba(0, 0, 0, 0.12);
    --ods-T5: rgba(0, 0, 0, 0.16);
    --ods-T6: rgba(0, 0, 0, 0.25);
    --ods-T7: rgba(0, 0, 0, 0.50);
    --ods-T8: rgba(0, 0, 0, 0.70);
    --ods-T9: rgba(0, 0, 0, 0.90);
    --ods-T10: rgb(0, 0, 0);

    /* General colors */
    --ods-teal-Z1: #FAFEFD;
    --ods-teal-Z2: #F3FBF9;
    --ods-teal-Z3: #DFF8F3;
    --ods-teal-Z4: #CCF3EB;
    --ods-teal-Z5: #B7EBE1;
    --ods-teal-Z6: #A1DED3;
    --ods-teal-Z7: #83CDC0;
    --ods-teal-Z8: #54B9A9;
    --ods-teal-Z9: #12A594;
    --ods-teal-Z10: #009888;
    --ods-teal-Z11: #008071;
    --ods-teal-Z12: #0F3D36;

    --ods-teal-T1: rgba(0, 204, 153, 0.0196);
    --ods-teal-T2: rgba(0, 170, 128, 0.0471);
    --ods-teal-T3: rgba(0, 200, 160, 0.1255);
    --ods-teal-T4: rgba(0, 195, 155, 0.20);
    --ods-teal-T5: rgba(0, 185, 149, 0.2824);
    --ods-teal-T6: rgba(0, 166, 136, 0.3686);
    --ods-teal-T7: rgba(0, 153, 126, 0.4863);
    --ods-teal-T8: rgba(0, 151, 127, 0.6706);
    --ods-teal-T9: rgba(0, 158, 140, 0.9294);
    --ods-teal-T10: #009888;
    --ods-teal-T11: #008071;
    --ods-teal-T12: rgba(0, 49, 41, 0.9212);

    /* Semantics */
    --ods-success-default: var(--ods-success-Z9);
    --ods-success-hover: var(--ods-success-Z10);

    --ods-success-Z1: #FBFEFC;
    --ods-success-Z2: #F4FBF7;
    --ods-success-Z3: #E5F6EB;
    --ods-success-Z4: #D6F1DF;
    --ods-success-Z5: #C4E8D1;
    --ods-success-Z6: #ADDDC0;
    --ods-success-Z7: #8FCEA8;
    --ods-success-Z8: #60B887;
    --ods-success-Z9: #30A46C;
    --ods-success-Z10: #289662;
    --ods-success-Z11: #00814C;
    --ods-success-Z12: #1D3B2A;

    --ods-success-T1: rgba(0, 192, 64, 0.0157);
    --ods-success-T2: rgba(0, 163, 70, 0.0431);
    --ods-success-T3: rgba(0, 167, 59, 0.102);
    --ods-success-T4: rgba(0, 168, 56, 0.1608);
    --ods-success-T5: rgba(1, 156, 57, 0.2314);
    --ods-success-T6: rgba(0, 150, 60, 0.3216);
    --ods-success-T7: rgba(0, 144, 57, 0.4392);
    --ods-success-T8: rgba(0, 141, 63, 0.6235);
    --ods-success-T9: rgba(0, 143, 74, 0.8118);
    --ods-success-T10: rgba(0, 131, 69, 0.8431);
    --ods-success-T11: rgb(0, 129, 76);
    --ods-success-T12: rgba(0, 34, 15, 0.8863);


    --ods-warning-default: var(--ods-warning-Z9);
    --ods-warning-hover: var(--ods-warning-Z10);

    --ods-warning-Z1: #FEFDFB;
    --ods-warning-Z2: #FFFAEA;
    --ods-warning-Z3: #FFF2C3;
    --ods-warning-Z4: #FFE9A0;
    --ods-warning-Z5: #FFDE7F;
    --ods-warning-Z6: #FCD27A;
    --ods-warning-Z7: #E9C16E;
    --ods-warning-Z8: #D7A944;
    --ods-warning-Z9: #FFCA2F;
    --ods-warning-Z10: #FAC137;
    --ods-warning-Z11: #9B6F00;
    --ods-warning-Z12: #463A20;

    --ods-warning-T1: rgba(192, 128, 0, 0.0157);
    --ods-warning-T2: rgba(255, 195, 0, 0.0824);
    --ods-warning-T3: rgba(255, 200, 0, 0.2353);
    --ods-warning-T4: rgba(255, 196, 0, 0.3725);
    --ods-warning-T5: rgba(255, 190, 0, 0.502);
    --ods-warning-T6: rgba(250, 169, 0, 0.5216);
    --ods-warning-T7: rgba(217, 146, 0, 0.5686);
    --ods-warning-T8: rgba(201, 138, 0, 0.7333);
    --ods-warning-T9: rgba(255, 190, 0, 0.8157);
    --ods-warning-T10: rgba(249, 176, 0, 0.7843);
    --ods-warning-T11: rgb(155, 111, 0);
    --ods-warning-T12: rgba(44, 30, 0, 0.8745);


    --ods-error-default: var(--ods-error-Z9);
    --ods-error-hover: var(--ods-error-Z10);

    --ods-error-Z1: #FFFCFC;
    --ods-error-Z2: #FFF7F7;
    --ods-error-Z3: #FFEBEA;
    --ods-error-Z4: #FFDCD9;
    --ods-error-Z5: #FFCDCA;
    --ods-error-Z6: #FEBDB9;
    --ods-error-Z7: #F5A9A5;
    --ods-error-Z8: #EB8F8B;
    --ods-error-Z9: #E5484D;
    --ods-error-Z10: #D73840;
    --ods-error-Z11: #CC2E39;
    --ods-error-Z12: #64181B;

    --ods-error-T1: rgba(255, 0, 0, 0.0118);
    --ods-error-T2: rgba(255, 0, 0, 0.0314);
    --ods-error-T3: rgba(255, 13, 0, 0.0824);
    --ods-error-T4: rgba(255, 21, 0, 0.149);
    --ods-error-T5: rgba(255, 15, 0, 0.2078);
    --ods-error-T6: rgba(255, 15, 0, 0.2745);
    --ods-error-T7: rgba(227, 12, 1, 0.3529);
    --ods-error-T8: rgba(212, 9, 0, 0.4549);
    --ods-error-T9: rgba(219, 0, 7, 0.7176);
    --ods-error-T10: rgba(204, 0, 10, 0.7804);
    --ods-error-T11: rgba(193, 0, 14, 0.8196);
    --ods-error-T12: rgba(84, 0, 3, 0.9059);


    --ods-info-default: var(--ods-info-Z9);
    --ods-info-hover: var(--ods-info-Z10);

    --ods-info-Z1: #FCFDFF;
    --ods-info-Z2: #F6F9FF;
    --ods-info-Z3: #EBF2FF;
    --ods-info-Z4: #DDEBFF;
    --ods-info-Z5: #CDE1FF;
    --ods-info-Z6: #BAD3FF;
    --ods-info-Z7: #A1C1FB;
    --ods-info-Z8: #7FA8F6;
    --ods-info-Z9: #3D7BF9;
    --ods-info-Z10: #346EE6;
    --ods-info-Z11: #2D67DF;
    --ods-info-Z12: #163064;

    --ods-info-T1: rgba(0, 85, 255, 0.0118);
    --ods-info-T2: rgba(0, 85, 255, 0.0353);
    --ods-info-T3: rgba(0, 90, 255, 0.0784);
    --ods-info-T4: rgba(0, 105, 255, 0.1333);
    --ods-info-T5: rgba(0, 102, 255, 0.1961);
    --ods-info-T6: rgba(0, 93, 255, 0.2706);
    --ods-info-T7: rgba(0, 87, 245, 0.3686);
    --ods-info-T8: rgba(0, 82, 238, 0.502);
    --ods-info-T9: rgba(0, 082, 247, 0.7608);
    --ods-info-T10: rgba(0, 73, 224, 0.7961);
    --ods-info-T11: rgba(0, 71, 216, 0.8235);
    --ods-info-T12: rgba(0, 29, 85, 0.9137);

    /* Accent */
    --ods-accent-contrast: var(--ods-Z9);
    --ods-accent-contrast-hover: var(--ods-T8);

    /* Core */
    --ods-bg-primary: var(--ods-Z0);
    --ods-bg-panel-primary: var(--ods-Z0);
    --ods-bg-menu-primary: var(--ods-Z0);
    --ods-bg-hover: var(--ods-T2);
    --ods-bg-selected: var(--ods-T3);
    --ods-bg-form: #FCFCFC;
    --ods-bg-document: var(--ods-Z1);
    --ods-bg-app-nav: rgb(252, 252, 252);
    --ods-bg-deep: var(--ods-Z1);

    --ods-border-primary: var(--ods-Z2);
    --ods-border-panel-primary: var(--ods-Z3);
    --ods-border-menu-primary: var(--ods-Z3);

    --ods-color-text: var(--ods-T9);
    --ods-color-text-inactive: var(--ods-T8);
    --ods-color-text-faded: var(--ods-T7);
    --ods-color-text-contrast: #FFFFFF;

    /* Shadows */
    --ods-drop-shadow-01: 0 4px 12px rgba(0, 0, 0, 0.06);
    --ods-drop-shadow-02: 0 6px 16px rgba(0, 0, 0, 0.06);
    --ods-drop-shadow-03: 0 8px 32px rgba(0, 0, 0, 0.06);

    /* Conversions */
    --ods-Z1-Z0: var(--ods-Z1);

    /* --- Old --- */

    --bg-primary: var(--light6);
    --bg-component-primary: var(--light1);
    --bg-component-secondary: var(--light3);
    --bg-component-3: initial;
    --bg-component-4: initial;
    --bg-highlight-primary: #EBEDEF;
    --bg-highlight-secondary: var(--light5);
    --bg-highlight-faded: rgb(250, 251, 253);
    --bg-highlight-selected: var(--bg-highlight-primary);
    --bg-overlay: rgba(245, 245, 245, 0.8);
    --color-text: var(--black-rock);
    --color-text-inactive: rgba(15, 14, 50, 0.70);
    --color-text-faded: rgba(15, 14, 50, 0.50);
    --color-text-faded-none-alpha: #BFC1C6;
    --border-color: #eeeeee /* e9e9e9 */ /*#D9D9D9*/;
    --border-color-secondary: var(--bg-primary);
    --brand-color: #5046E5;
    --brand-color-light: initial;
    --brand-color-variation-1: initial;
    --brand-color-faded: #9690EF;
    --organization-color: var(--electric-violet);
    --unit-color: var(--royal-blue);
    --location-bar-color: var(--dark1);
    --success-color: #198F51;
    --error-color: #DD0000;
    --error-color-calm: rgb(229, 97, 62);
    --warning-color: initial;
    --data-viewer-scope-line: var(--black-rock-60);
    --data-viewer-number-font: #4cadad;
    --data-viewer-string-font: #ce9178;
    --data-viewer-enabled-font: var(--color-text);
    --data-viewer-disabled-font: rgb(200, 200, 200);
}


html[data-theme='dark'] {

    color-scheme: dark;

    /* Neutrals */
    --ods-Z0: #121212;
    --ods-Z1: #1B1B1B;
    --ods-Z2: #252525;
    --ods-Z3: #2E2E2E;
    --ods-Z4: #383838;
    --ods-Z5: #414141;
    --ods-Z6: #595959;
    --ods-Z7: #888888;
    --ods-Z8: #B8B8B8;
    --ods-Z9: #E7E7E7;
    --ods-Z10: #FFFFFF;

    --ods-T1: rgba(255, 255, 255, 0.04);
    --ods-T2: rgba(255, 255, 255, 0.08);
    --ods-T3: rgba(255, 255, 255, 0.12);
    --ods-T4: rgba(255, 255, 255, 0.16);
    --ods-T5: rgba(255, 255, 255, 0.20);
    --ods-T6: rgba(255, 255, 255, 0.30);
    --ods-T7: rgba(255, 255, 255, 0.50);
    --ods-T8: rgba(255, 255, 255, 0.70);
    --ods-T9: rgba(255, 255, 255, 0.90);
    --ods-T10: #FFFFFF;

    /* General colors */
    --ods-teal-Z1: #0C1412;
    --ods-teal-Z2: #111C1A;
    --ods-teal-Z3: #0E2D29;
    --ods-teal-Z4: #043B34;
    --ods-teal-Z5: #0B4840;
    --ods-teal-Z6: #16574E;
    --ods-teal-Z7: #1E695F;
    --ods-teal-Z8: #217F72;
    --ods-teal-Z9: #12A594;
    --ods-teal-Z10: #009888;
    --ods-teal-Z11: #55D2C0;
    --ods-teal-Z12: #AAF0E3;

    --ods-teal-T1: rgba(0, 188, 18, 0.0118);
    --ods-teal-T2: rgba(0, 250, 204, 0.0431);
    --ods-teal-T3: rgba(0, 248, 214, 0.1176);
    --ods-teal-T4: rgba(0, 251, 211, 0.1765);
    --ods-teal-T5: rgba(0, 252, 217, 0.2314);
    --ods-teal-T6: rgba(32, 253, 222, 0.2941);
    --ods-teal-T7: rgba(51, 255, 227, 0.3686);
    --ods-teal-T8: rgba(50, 253, 225, 0.4627);
    --ods-teal-T9: rgba(18, 254, 226, 0.6235);
    --ods-teal-T10: rgba(0, 254, 225, 0.5686);
    --ods-teal-T11: rgba(101, 255, 233, 0.8118);
    --ods-teal-T12: rgba(180, 255, 241, 0.9373);

    /* Semantics */
    --ods-success-default: var(--ods-success-Z9);
    --ods-success-hover: var(--ods-success-Z10);

    --ods-success-Z1: #0D1410;
    --ods-success-Z2: #131B16;
    --ods-success-Z3: #152C1F;
    --ods-success-Z4: #143B27;
    --ods-success-Z5: #1B4931;
    --ods-success-Z6: #23573B;
    --ods-success-Z7: #2B6848;
    --ods-success-Z8: #327C55;
    --ods-success-Z9: #30A46C;
    --ods-success-Z10: #1D9760;
    --ods-success-Z11: #63D196;
    --ods-success-Z12: #B2F1CB;

    --ods-success-T1: rgba(0, 188, 0, 0.0118);
    --ods-success-T2: rgba(44, 248, 121, 0.0392);
    --ods-success-T3: rgba(46, 255, 137, 0.1098);
    --ods-success-T4: rgba(30, 251, 137, 0.1765);
    --ods-success-T5: rgba(57, 252, 150, 0.2353);
    --ods-success-T6: rgba(76, 252, 158, 0.2941);
    --ods-success-T7: rgba(87, 254, 167, 0.3647);
    --ods-success-T8: rgba(89, 253, 167, 0.451);
    --ods-success-T9: rgba(66, 254, 163, 0.6196);
    --ods-success-T10: rgba(38, 254, 156, 0.5647);
    --ods-success-T11: rgba(119, 255, 182, 0.8078);
    --ods-success-T12: rgba(188, 255, 215, 0.9412);


    --ods-warning-default: var(--ods-warning-Z9);
    --ods-warning-hover: var(--ods-warning-Z10);

    --ods-warning-Z1: #14120D;
    --ods-warning-Z2: #1C1810;
    --ods-warning-Z3: #2C220C;
    --ods-warning-Z4: #3B2900;
    --ods-warning-Z5: #483300;
    --ods-warning-Z6: #554112;
    --ods-warning-Z7: #695323;
    --ods-warning-Z8: #84692E;
    --ods-warning-Z9: #FFC53D;
    --ods-warning-Z10: #F4BB2E;
    --ods-warning-Z11: #FFCC4C;
    --ods-warning-Z12: #FEE7BA;

    --ods-warning-T1: rgba(188, 18, 0, 0.0118);
    --ods-warning-T2: rgba(250, 158, 0, 0.0431);
    --ods-warning-T3: rgba(255, 164, 0, 0.1098);
    --ods-warning-T4: rgba(251, 149, 0, 0.1765);
    --ods-warning-T5: rgba(252, 161, 0, 0.2314);
    --ods-warning-T6: rgba(253, 183, 18, 0.2863);
    --ods-warning-T7: rgba(255, 195, 65, 0.3686);
    --ods-warning-T8: rgba(255, 199, 77, 0.4824);
    --ods-warning-T9: rgb(255, 197, 61);
    --ods-warning-T10: rgba(254, 194, 47, 0.9569);
    --ods-warning-T11: rgb(255, 204, 76);
    --ods-warning-T12: rgba(255, 232, 187, 0.9961);


    --ods-error-default: var(--ods-error-Z9);
    --ods-error-hover: var(--ods-error-Z10);

    --ods-error-Z1: #18100F;
    --ods-error-Z2: #201312;
    --ods-error-Z3: #3B1312;
    --ods-error-Z4: #510F13;
    --ods-error-Z5: #61171A;
    --ods-error-Z6: #732425;
    --ods-error-Z7: #8C3434;
    --ods-error-Z8: #B54546;
    --ods-error-Z9: #E5484D;
    --ods-error-Z10: #D63941;
    --ods-error-Z11: #FF8F8B;
    --ods-error-Z12: #FFD2CE;

    --ods-error-T1: rgba(236, 0, 0, 0.0275);
    --ods-error-T2: rgba(242, 34, 18, 0.0627);
    --ods-error-T3: rgba(251, 23, 19, 0.1765);
    --ods-error-T4: rgba(255, 7, 22, 0.2667);
    --ods-error-T5: rgba(255, 33, 42, 0.3333);
    --ods-error-T6: rgba(253, 61, 64, 0.4118);
    --ods-error-T7: rgba(254, 84, 84, 0.5176);
    --ods-error-T8: rgba(254, 92, 93, 0.6902);
    --ods-error-T9: rgba(254, 78, 84, 0.8941);
    --ods-error-T10: rgba(255, 65, 75, 0.8275);
    --ods-error-T11: rgb(255, 143, 139);
    --ods-error-T12: rgb(255, 210, 206);


    --ods-info-default: var(--ods-info-Z9);
    --ods-info-hover: var(--ods-info-Z10);

    --ods-info-Z1: #0B121F;
    --ods-info-Z2: #0F1828;
    --ods-info-Z3: #11254D;
    --ods-info-Z4: #112E69;
    --ods-info-Z5: #18397C;
    --ods-info-Z6: #21458E;
    --ods-info-Z7: #2B53A4;
    --ods-info-Z8: #3262C2;
    --ods-info-Z9: #3D7BF9;
    --ods-info-Z10: #316DEA;
    --ods-info-Z11: #86B4FF;
    --ods-info-Z12: #CFE2FF;

    --ods-info-T1: rgba(0, 18, 255, 0.0549);
    --ods-info-T2: rgba(0, 82, 252, 0.0941);
    --ods-info-T3: rgba(15, 94, 254, 0.251);
    --ods-info-T4: rgba(16, 94, 255, 0.3686);
    --ods-info-T5: rgba(32, 105, 253, 0.451);
    --ods-info-T6: rgba(46, 115, 254, 0.5255);
    --ods-info-T7: rgba(58, 123, 254, 0.6196);
    --ods-info-T8: rgba(61, 125, 254, 0.7451);
    --ods-info-T9: rgba(62, 126, 255, 0.9765);
    --ods-info-T10: rgba(51, 117, 254, 0.9137);
    --ods-info-T11: rgb(134, 180, 255);
    --ods-info-T12: rgb(207, 226, 255);

    /* Accent */
    --ods-accent-contrast: var(--ods-Z10);
    --ods-accent-contrast-hover: var(--ods-T8);

    /* Core */
    --ods-bg-primary: var(--ods-Z0);
    --ods-bg-panel-primary: var(--ods-Z1);
    --ods-bg-menu-primary: var(--ods-Z3);
    --ods-bg-hover: var(--ods-T2);
    --ods-bg-selected: var(--ods-T3);
    --ods-bg-form: var(--ods-Z0);
    --ods-bg-document: #070707;
    --ods-bg-app-nav: rgb(7, 7, 7);
    --ods-bg-deep: rgb(0, 0, 0);

    --ods-border-primary: var(--ods-Z2);
    --ods-border-panel-primary: var(--ods-Z3);
    --ods-border-menu-primary: var(--ods-Z4);

    --ods-color-text: var(--ods-T10);
    --ods-color-text-inactive: var(--ods-T8);
    --ods-color-text-faded: var(--ods-T7);
    --ods-color-text-contrast: #000000;

    /* Shadows */
    --ods-drop-shadow-01: 0 4px 12px rgba(0, 0, 0, 0.25);
    --ods-drop-shadow-02: 0 6px 16px rgba(0, 0, 0, 0.25);
    --ods-drop-shadow-03: 0 8px 32px rgba(0, 0, 0, 0.25);

    /* Conversions */
    --ods-Z1-Z0: var(--ods-Z0);

    /* --- Old --- */

    --bg-primary: var(--dark4);
    --bg-component-primary: var(--dark5);
    --bg-component-secondary: var(--dark4);
    --bg-component-3: initial;
    --bg-component-4: initial;
    --bg-highlight-primary: #34363A;
    --bg-highlight-secondary: rgba(255, 255, 255, 0.10);
    --bg-highlight-faded: var(--dark7);
    --bg-highlight-selected: #34363A;
    --bg-overlay: rgba(0, 0, 0, 0.8);
    --color-text: var(--white-dimmed);
    --color-text-inactive: rgba(255, 255, 255, 0.7);
    --color-text-faded: rgba(255, 255, 255, 0.5);
    --color-text-faded-none-alpha: #BFC1C6;
    --border-color: var(--dark6);
    --border-color-secondary: var(--bg-primary);
    --brand-color: #6259E6;
    --brand-color-light: initial;
    --brand-color-variation-1: initial;
    --brand-color-faded: #4B469C;
    --organization-color: var(--electric-violet);
    --unit-color: var(--royal-blue);
    --location-bar-color: var(--dark1);
    --success-color: var(--green2);
    --error-color: #DD0000;
    --error-color-calm: rgb(229, 97, 62);
    --warning-color: initial;
    --data-viewer-scope-line: var(--black-rock-60);
    --data-viewer-number-font: #4cadad;
    --data-viewer-string-font: #ce9178;
    --data-viewer-enabled-font: var(--color-text);
    --data-viewer-disabled-font: rgb(200, 200, 200);
}

.hidden {
    display: none !important;
}

body {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -ms-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -o-text-size-adjust: none;
    -webkit-text-size-adjust: 100%;
}

body.ods-layout-with-scrollbar,
body.ods-layout-with-scrollbar * {
    scrollbar-width: thin;
    scrollbar-color: var(--color-text-faded) transparent;
}

/* ods text styles */

.ods-heading1 {
    font-size: 60px;
    line-height: 72px;
    font-weight: 500;
    color: var(--ods-color-text);
}

.ods-heading2 {
    font-size: 48px;
    line-height: 57.6px;
    font-weight: 500;
    color: var(--ods-color-text);
}

.ods-heading3 {
    font-size: 36px;
    line-height: 43.2px;
    font-weight: 500;
    color: var(--ods-color-text);
}

.ods-heading4 {
    font-size: 24px;
    line-height: 32px;
    font-weight: 500;
    color: var(--ods-color-text);
}

.ods-heading5 {
    font-size: 20px;
    line-height: normal;
    font-weight: 500;
    color: var(--ods-color-text);
}

.ods-heading6 {
    font-size: 18px;
    line-height: normal;
    font-weight: 500;
    color: var(--ods-color-text);
}

.ods-text-title {
    font-size: 14px;
    line-height: normal;
    font-weight: 600;
    color: var(--ods-color-text);
}

.ods-text-default {
    font-size: 13px;
    line-height: normal;
    font-weight: 500;
}

.ods-text-paragraph {
    font-size: 13px;
    line-height: 19.5px;
    font-weight: 500;
    color: var(--ods-color-text-faded);
}

.ods-text-label {
    font-size: 12px;
    line-height: normal;
    font-weight: 500;
    color: var(--ods-color-text-faded);
}

.ods-text-description {
    font-size: 12px;
    line-height: normal;
    font-weight: 400;
    color: var(--ods-color-text-faded);
}

.ods-text-overflow {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ods-text-inactive {
    color: var(--ods-color-text-inactive);
}

.ods-text-faded {
    color: var(--ods-color-text-faded);
}

/* ods bg styles */

.ods-bg-primary {
    background-color: var(--ods-bg-primary);
}

.ods-bg-panel {
    background-color: var(--ods-bg-panel-primary);
}

.ods-bg-menu {
    background-color: var(--ods-bg-menu-primary);
}

.ods-bg-active,
.ods-bg-selected {
    background-color: var(--ods-bg-selected);
}

.ods-bg-hover {
    background-color: var(--ods-bg-hover);
}

/* Skeleton styling */

.oui-skeleton {
    animation: pulse 2s cubic-bezier(.4,0,.6,1) infinite;
}

/* Global icon styling */

.oui-icon.checkmark {
    margin-left: auto;
}

.oui-icon.none-alpha-faded {
    color: var(--color-text-faded-none-alpha);
}

/* Global button styling */

.button.icon, button.icon {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

button.icon:not([disabled]):hover {
    background-color: var(--ods-T2);
    color: var(--ods-color-text);
}

.oui-button {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    gap: 8px;
    position: relative;
    height: 32px;
    padding: 0 10px;
    font-size: 13px;
    font-weight: 500;
    line-height: 32px;
    color: var(--ods-color-text);
    border-radius: var(--ods-border-radius);
    cursor: pointer;
    position: relative;
}

.oui-button.fill {
    background-color: var(--ods-T1);
    border: 1px solid var(--ods-T1);
}

.oui-button:hover {
    background-color: var(--ods-bg-hover);
}

.oui-button.active,
.oui-button.selected {
    background-color: var(--ods-bg-selected);
}

.oui-button.disabled {
    opacity: 0.6;
    pointer-events: none;
}

.oui-button.icon {
    width: 32px;
    padding: 0;
}

.oui-button.primary {
    background-color: var(--ods-accent-contrast);
    color: var(--ods-color-text-contrast);
    flex-shrink: 0;
}

.oui-button.primary:not([disabled]):hover {
    background-color: var(--ods-accent-contrast-hover);
}

.oui-button.primary .oui-icon {
    color: var(--ods-color-text-contrast);
}

.oui-button.error {
    border: 1px solid var(--ods-error-Z6);
    background-color: var(--ods-error-Z3);
    color: var(--ods-error-Z11);
}

.oui-button.error .oui-icon {
    color: var(--ods-error-Z11);
}

.oui-button.error:hover {
    background-color: var(--ods-error-Z4);
}

.oui-button.warning {
    border: 1px solid var(--ods-warning-Z6);
    background-color: var(--ods-warning-Z3);
    color: var(--ods-warning-Z11);
}

.oui-button.warning .oui-icon {
    color: var(--ods-warning-Z11);
}

.oui-button.warning:hover {
    background-color: var(--ods-warning-Z4);
}

.oui-button.success {
    border: 1px solid var(--ods-success-Z6);
    background-color: var(--ods-success-Z3);
    color: var(--ods-success-Z11);
}

.oui-button.success .oui-icon {
    color: var(--ods-success-Z11);
}

.oui-button.success:hover {
    background-color: var(--ods-success-Z4);
}

.oui-button.information {
    border: 1px solid var(--ods-info-Z6);
    background-color: var(--ods-info-Z3);
    color: var(--ods-info-Z11);
}

.oui-button.information .oui-icon {
    color: var(--ods-info-Z11);
}

.oui-button.information:hover {
    background-color: var(--ods-info-Z4);
}

.oui-button.outline {
    border: 1px solid var(--ods-T2);
}

.oui-button.slim {
    padding: 0;
}

.oui-button.small-icon .oui-icon {
    width: 12px;
    height: 12px;
}

.oui-button .container-loader .loader {
    width: 16px;
    height: 16px;
    border-width: 1px;
}

.oui-button.secondary {
    background-color: inherit;
    color: var(--color-text);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    /*outline: none;*/
    box-shadow: none;
    gap: 8px;
    overflow: hidden;
}

.oui-button.secondary .oui-icon {
    color: var(--color-text-faded);
}

.oui-button.secondary:hover {
    background-color: inherit;
    /*outline: none;*/
    /*text-decoration: underline;*/
}

.oui-button.upload .oui-icon {
    width: 12px;
    height: 12px;
}

.icon-container {
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--ods-T1);
    border-radius: var(--ods-border-radius);
}

@keyframes indeterminateAnimation {
    0% {
        transform: translateX(0) scaleX(0);
    }

    30% {
        transform: translateX(0) scaleX(0.4);
    }

    100% {
        transform: translateX(100%) scaleX(0.5);
    }
}

@keyframes pulse {
    50% {
        opacity: .5;
    }
}

.location .breadcrumb {
    display: flex;
    flex: 1;
    align-items: center;
    padding: 0px 10px 3px 5px;
    font-size: 12px;
    overflow-x: scroll;
    height: calc(100% + 5px);
    z-index: 1;
    box-sizing: unset;
}

.breadcrumb {
    container-type: inline-size;
    container-name: breadcrumbs;
}

@container breadcrumbs (max-width: 600px) {
    .breadcrumb-header .title {
        display: none;
    }
}

.location ul.breadcrumb svg {
    width: 12px;
    height: 12px;
}

.location ul.breadcrumb .breadcrumb-header > svg:last-of-type {
    width: 10px;
    height: 10px;
    color: var(--color-text-inactive);
    margin-top: 0px;
}

.location ul.breadcrumb .breadcrumb-separator {
    color: var(--color-text-faded);
    margin: 0 4px;
    height: 100%;
    display: flex;
    align-items: center;
    padding-bottom: 0px;
}

    .location ul.breadcrumb .breadcrumb-separator .oui-icon {
        width: 14px;
        height: 14px;
    }

.location ul.breadcrumb li:last-of-type .location-item {
    color: var(--color-text);
}

.location-item {
    text-decoration: none;
    color: var(--color-text-inactive);
    display: flex;
    gap: 4px;
    height: 100%;
    align-items: center;
    padding: 0 6px;
    font-weight: 500;
    border: 1px solid var(--bg-primary);
    border-radius: 5px;
}

    .location-item:hover {
        background-color: var(--bg-highlight-primary);
        /*border-color: var(--bg-primary);*/
    }

    .location-item i {
        margin-right: 2px;
    }

    .location-item .oui-menu-header {
        padding: 0;
        height: 100%;
        border-radius: 0;
    }

.viewport {
    align-items: center;
    background-color: var(--bg-primary);
    position: relative;
    overflow: auto;
    flex: 1;
}

.scroll {
    width: 100%;
    height: 100%;
    overflow: auto;
}

.scroll:active::-webkit-scrollbar-thumb,
.scroll:focus::-webkit-scrollbar-thumb,
.scroll:hover::-webkit-scrollbar-thumb {
    visibility: visible;
}

.scroll::-webkit-scrollbar-thumb {
    visibility: hidden;
}

.gutter {
    background-color: var(--border-color);
    background-repeat: no-repeat;
    background-position: 50%;
    cursor: ew-resize;
}

    .gutter:hover {
        background-color: var(--brand-color);
        transition: background-color 500ms ease 150ms;
    }

    .gutter.gutter-horizontal:before {
        content: "|";
        height: 100%;
        background-color: var(--ods-T2);
        display: block;
        width: 1px;
        margin-left: 50%;
        color: transparent;
    }

    .gutter.gutter-horizontal:hover:before {
        background-color: var(--brand-color);
        transition: background-color 500ms ease 150ms;
    }

    .gutter.gutter-vertical {
        cursor: n-resize;
    }

        .gutter.gutter-vertical:before {
            cursor: row-resize;
            content: "-";
            height: 1px;
            background-color: var(--ods-T2);
            display: block;
            width: 100%;
            margin-top: 1px;
            color: transparent;
        }

        .gutter.gutter-vertical:hover:before {
            background: none;
        }

    .gutter.gutter-horizontal {
        width: 4px;
        background-color: transparent;
        z-index: 103;
        margin: 0px -2px;
    }

        .gutter.gutter-horizontal:hover {
            background-color: var(--brand-color);
        }

    .gutter.gutter-vertical {
        cursor: n-resize;
        height: 4px;
        background-color: transparent;
        margin: -2px 0px;
        z-index: 103;
    }

        .gutter.gutter-vertical:hover {
            background-color: var(--brand-color);
        }


.oui-menu-header {
    cursor: pointer;
    border-radius: 6px;
    display: flex;
    align-items: center;
    height: 32px;
}

    /*.oui-menu-header:hover {
        background-color: var(--bg-highlight-primary);
        border-color: transparent;
    }*/

        .oui-menu-header:hover .header-expand {
            color: var(--brand-color);
        }

.header-dropdown-container {
    /*padding: 4px;*/
    display: flex;
    flex-direction: column
}

    .header-dropdown-container > .header-dropdown-container-content > button {
        height: 33px;
        line-height: 1;
        border-radius: 5px;
        text-align: left;
        border: none;
        font-size: 13px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        color: var(--color-text);
        font-weight: 500;
    }

        .header-dropdown-container > .header-dropdown-container-content > button .oui-icon {
            width: 14px;
            height: 14px;
            color: var(--color-text-faded);
        }

        .header-dropdown-container > .header-dropdown-container-content > button:not([disabled]):hover {
            background-color: var(--bg-highlight-primary);
            color: var(--color-text);
            border: none;
            outline: none;
        }

.header-dropdown-container-toggle {
    /*margin-bottom: 5px;*/
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
}

.header-dropdown-container-content {
    max-height: 300px;
    display: flex;
    flex-direction: column;
    overflow: auto;
    padding: 4px;
}

    .header-dropdown-container-content .bi,
    .header-dropdown-container-content .oui-icon {
        margin-right: 8px;
        margin-left: 2px;
    }

/* Base page */

.base-page-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: scroll;
}

.base-page-header {
    /*max-width: 845px;*/
    width: 100%;
    /*height: 100px;*/
    flex-shrink: 0;
    display: flex;
    align-items: center;
    margin-top: 60px;
    margin-bottom: 40px;
    /*height: 30px;*/
    padding: 0 60px;
}

.base-page-header-left {
    display: flex;
    gap: 10px;
    font-size: 28px;
    align-items: center;
    flex-basis: 80%;
    height: 100%;
    flex-shrink: 0;
    padding-right: 10px;
    font-weight: 500;
}

    .base-page-header-left .oui-icon {
        width: 20px;
        height: 20px;
        color: var(--brand-color);
    }

    .base-page-header-left .snippet-button {
        width: 30px;
        height: 30px;
        border-radius: 5px;
        font-size: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--color-text);
    }

        .base-page-header-left .snippet-button .oui-icon {
            color: var(--color-text);
        }

        .base-page-header-left .snippet-button .oui-icon {
            width: 16px;
            height: 16px;
        }

        .base-page-header-left .snippet-button:not([disabled]):hover {
            background-color: var(--bg-component-secondary);
            border: none;
            outline: none;
        }

.base-page-header-middle {
    flex-basis: 30%;
    position: relative;
    display: flex;
    height: 100%;
    align-items: center;
}

    .base-page-header-middle i {
        position: absolute;
        top: 43px;
        left: 10px;
        font-size: 14px;
        color: #5f6368;
    }

    .base-page-actions input,
    .base-page-header-middle input {
        /*width: 100%;*/
        outline: none;
        border: 1px solid var(--border-color-secondary);
        border-radius: 5px;
        height: 32px;
        font-size: 13px;
        padding: 0px 10px 0px 32px;
        box-sizing: border-box;
        color: var(--color-text);
        background-color: var(--bg-primary);
    }

        .base-page-actions input:hover,
        .base-page-actions input:active,
        .base-page-actions input:focus,
        .base-page-header-middle input:hover,
        .base-page-header-middle input:active,
        .base-page-header-middle input:focus {
            border-color: var(--border-color);
        }

.base-page-header-right {
    display: flex;
    flex-basis: 35%;
    height: 100%;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
}

    .base-page-header-right .add-button {
        font-size: 20px;
        width: 30px;
        height: 30px;
        background-color: var(--brand-color);
        color: var(--color-text);
        border-radius: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

.add-button.floating {
    font-size: 20px;
    width: 30px;
    height: 30px;
    background-color: var(--brand-color);
    color: var(--color-text);
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: -65px;
    right: 0px;
}

/*.base-page-header-right .add-button:not([disabled]):hover {
    background-color: var(--brand-color-light);
    border: none;
    outline: none;
    color: var(--brand-color);
}*/

.base-page-content {
    /*max-width: 845px;*/
    width: 100%;
    margin-bottom: 100px;
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0 32px;
}

.base-page-actions {
    display: flex;
    justify-content: space-between;
    height: 32px;
    align-items: center;
    /*margin-bottom: 24px;*/
}

.actions-left {
    display: flex;
    gap: 10px;
    height: 100%;
}

    .actions-left > button {
        height: 100%;
        border-radius: 5px;
        /*border: 1px solid var(--border-color);*/
        font-size: 13px;
        gap: 8px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 10px;
        color: var(--color-text);
        /*box-shadow: var(--dropshadow-level-one);*/
    }

        .actions-left > button:hover {
            /*background-color: var(--bg-highlight-primary);*/
        }


    .actions-left > .add-button::after {
        content: "+";
        /*font-family: "bootstrap-icons";*/
        font-size: 16px;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 12px;
        height: 12px;
    }

    .actions-left > button.icon:not([disabled]):hover {
        /*border: 1px solid var(--border-color);*/
        background-color: var(--bg-highlight-primary);
        color: var(--color-text);
        outline: none;
    }

    .actions-left > button.icon:not([disabled]).primary:hover {
        background-color: var(--brand-color);
        color: var(--white);
    }

    .actions-left span {
        font-size: 13px;
        font-weight: 500;
    }

    .actions-left i {
        color: var(--brand-color);
        font-size: 16px;
    }

    .actions-left .folder i {
        color: var(--lightning-yellow);
    }

    .actions-left svg {
        width: 16px;
        height: 16px;
        color: var(--brand-color);
    }

.actions-right {
    position: relative;
}

    .actions-right .oui-icon {
        position: absolute;
        top: 7px;
        left: 10px;
    }

.base-page-collection {
    width: 100%;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    overflow: hidden;
    /*box-shadow: var(--dropshadow-level-two);*/
}

.base-page-collection-header {
    padding: 4px 16px;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;
    background-color: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
}

.header-item {
    font-weight: 500;
    color: var(--black-rock-30);
}

    .header-item.name {
        flex: 1;
    }

    .header-item.permissions {
        flex-basis: 40%;
    }

    .header-item.actions {
        width: 100px;
    }

.base-page-collection-item {
    padding: 12px 20px;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 40px;
}

    .base-page-collection-item .collection-item-menu .oui-icon {
        width: 13px;
        height: 13px;
        vertical-align: middle;
    }

    .base-page-collection-item:hover {
        cursor: pointer;
        background-color: var(--bg-highlight-primary);
    }

    .base-page-collection-item + .base-page-collection-item {
        border-top: 1px solid var(--border-color);
    }

.base-page-collection-item-name {
    display: flex;
    align-items: center;
    font-size: 0;
    /*line-height: 1;*/
    flex: 1;
}

    .base-page-collection-item-name .oui-icon {
        vertical-align: bottom;
        /*margin-right: 8px;*/
        color: var(--color-text-faded);
        color: var(--color-text-inactive);
        /*color: var(--brand-color);*/
    }

    .base-page-collection-item-name span {
        margin-left: 10px;
        font-size: 13px;
        font-weight: 500;
    }

.base-page-collection-item .status {
    width: 16px;
    height: 16px;
    margin-right: 24px;
    margin-left: 8px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.status.new {
    animation: -webkit-animation: spin 1.5s linear infinite; /* Safari */
    animation: spin 1.5s linear infinite;
}

    .status.new .oui-icon {
        color: var(--royal-blue-60);
    }

.status.generated {
    width: 16px;
    height: 16px;
    background-color: rgba(0, 255, 0, 0.1);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .status.generated::before {
        content: "";
        display: block;
        width: 8px;
        height: 8px;
        background-color: var(--mint-green);
        border-radius: 50%
    }

.status.failed {
    width: 16px;
    height: 16px;
    background-color: rgba(255, 0, 0, 0.1);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .status.failed::before {
        content: "";
        display: block;
        width: 8px;
        height: 8px;
        background-color: var(--error-color);
        border-radius: 50%
    }

.base-page-collection-item:hover .yamlpipeline::after {
    font-family: "bootstrap-icons";
    content: "\F1C5";
    font-size: 14px;
    vertical-align: bottom;
    margin-left: 8px;
    color: var(--color-text-inactive);
}

.base-page-collection-item-permissions {
    flex-basis: 40%;
}

.base-page-collection-item-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100px;
    justify-content: flex-end;
    flex-shrink: 0;
}

    .base-page-collection-item-actions button {
        width: 30px;
        height: 30px;
        border-radius: 5px;
    }

        .base-page-collection-item-actions button.icon:not([disabled]):hover {
            outline: none;
            border: none;
            background-color: var(--bg-component-4);
            color: var(--color-text);
        }

.breadcrumb-header {
    display: flex;
    gap: 4px;
    align-items: center;
}

    .breadcrumb-header .breadcrumb-badge {
        width: 20px;
        height: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid var(--border-color);
        border-radius: 5px;
        background-color: var(--bg-component-primary);
    }

        .breadcrumb-header .breadcrumb-badge .oui-icon {
            width: 10px;
            height: 10px;
        }

    .breadcrumb-header .oui-icon {
        /*color: var(--brand-color);*/
    }

    .breadcrumb-header.org .bi,
    .breadcrumb-header.org .oui-icon {
        /*color: var(--organization-color);*/
    }

    .breadcrumb-header.org .breadcrumb-badge {
        border: 1px solid var(--organization-color);
        background-color: var(--electric-violet-30);
    }

        .breadcrumb-header.org .breadcrumb-badge .oui-icon {
            color: var(--organization-color);
        }

    /*@container location (min-width: 500px) {

    .title {
        display: none;
    }
}*/

    .breadcrumb-header.unit .bi,
    .breadcrumb-header.unit .oui-icon {
        /*color: var(--unit-color);*/
    }

    .breadcrumb-header.unit .breadcrumb-badge {
        border: 1px solid var(--unit-color);
        background-color: var(--royal-blue-30);
    }

        .breadcrumb-header.unit .breadcrumb-badge .oui-icon {
            color: var(--unit-color);
        }

.breadcrumb-dropdown-header {
    display: flex;
    font-size: 13px;
    background-color: var(--brand-color);
    color: #fff;
    border-radius: 5px;
    padding: 5px 11px 5px 3px;
    height: 30px;
    align-items: center;
    line-height: 1;
}

    .breadcrumb-dropdown-header.org {
        background-color: var(--organization-color);
    }

    .breadcrumb-dropdown-header.unit {
        background-color: var(--unit-color);
    }

    .breadcrumb-dropdown-header .oui-icon {
        margin-left: 5px;
        margin-right: 8px;
        width: 13px;
        height: 13px;
    }

.header-dropdown-container > .header-dropdown-container-content > button.menu-item-breadcrumb {
    font-size: 13px;
    padding-right: 11px;
}

/*ul.breadcrumb li + li::before {
    padding: 1px 2px 0px 2px;
    content: ">";
    vertical-align: text-bottom;
    color: var(--color-text);
}*/
.location ul.breadcrumb li {
    display: flex;
    height: 100%;
    align-items: center;
    cursor: inherit;
}

.section-loader {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    border: 3px solid;
    border-color: #8F3AFC #8F3AFC #FD4186 #FF5E00;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.page-actions button:not([disabled]) {
    width: 30px;
    height: 30px;
    border-radius: 5px;
}

.page-actions button .label {
    display: none;
}

.page-actions button.execute {
    width: initial;
    border: 1px solid var(--border-color);
    margin-right: 8px;
}

    .page-actions button.execute .oui-icon {
        width: 24px;
        height: 24px;
        /*color: var(--mint-green);*/
    }

    .page-actions button.execute .label {
        display: initial;
        font-size: 12px;
        color: var(--color-text);
        padding-right: 4px;
    }


.page-actions .transform {
    background-color: var(--crusta);
}

    .page-actions .transform::after {
        content: "Transform";
        display: initial;
        font-size: 13px;
        color: var(--color-text);
        padding-right: 8px;
        line-height: 1;
        font-weight: 500;
    }

.page-actions .template {
    background-color: var(--royal-blue);
}

    .page-actions .template::after {
        content: "Preview";
        display: initial;
        font-size: 13px;
        color: var(--color-text);
        padding-right: 8px;
        line-height: 1;
        font-weight: 500;
    }

.page-actions .history {
    background-color: #6CDB00;
}

    .page-actions .history::after {
        content: "Generate";
        display: initial;
        font-size: 13px;
        color: var(--color-text);
        padding-right: 8px;
        line-height: 1;
        font-weight: 500;
    }

/* componentbox */

.componentbox {
    background-color: var(--bg-component-primary);
    display: flex;
    flex-direction: column;
    overflow: auto;
    flex: 1;
    position: relative;
}

.componentbox-header {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    height: 50px;
    border-bottom: 1px solid var(--border-color);
    font-weight: 500;
    line-height: 1;
    margin: 0 15px;
}

.componentbox-header-left {
    display: flex;
    flex: 1 1;
    justify-content: flex-start;
    /*padding-left: 5px;*/
    gap: 5px;
}

.componentbox-header-center {
    display: flex;
    flex: 2 1;
    justify-content: center;
}

.componentbox-header-right {
    display: flex;
    flex: 1 1;
    justify-content: flex-end;
    /*padding-right: 5px;*/
    gap: 5px;
}

.componentbox-header .button.icon,
.componentbox-header button.icon {
    width: 30px;
    height: 30px;
    border-radius: 5px;
}

    .componentbox-header .button.icon > .oui-icon,
    .componentbox-header button.icon > .oui-icon {
        width: 14px;
        height: 14px;
    }

    .componentbox-header button.icon.active {
        background-color: var(--brand-color);
        color: #fff;
    }


.componentbox-content {
    flex: 1;
    overflow: auto;
    display: flex;
    flex-direction: column;
    /*background-color: #fff;*/
    position: relative;
}

    .componentbox-content .code-box {
        margin: 0;
        border-radius: 0;
        height: 100%;
    }

    .componentbox-content .viewport {
        overflow: auto;
        flex: 1;
    }

    .componentbox-content > .toolbar {
        border-bottom: 1px solid var(--border-color);
        display: flex;
        justify-content: space-between;
        flex-shrink: 0;
        padding: 0 5px;
    }

        .componentbox-content > .toolbar button {
            font-size: 12px;
        }

        .componentbox-content > .toolbar .group {
            height: 100%;
            display: flex;
            align-items: center;
        }

        .componentbox-content > .toolbar button {
            border: none;
            outline: none;
            height: 100%
        }

/* code editor */
.code-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin: 10px;
    box-shadow: var(--dropshadow-level-two);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    overflow: clip;
}

    .code-box > .viewport {
        flex: 1;
    }

.default .float-content .code-box {
    margin: 0;
}

.viewport .code-editor {
    width: 100%;
    height: 100%;
}

.code-box .toolbar::-webkit-scrollbar-thumb {
    background: var(--brand-color);
}

.code-box .toolbar::-webkit-scrollbar {
    width: 1px;
    height: 1px;
}

/* Input */

.oui-input {
    display: flex;
    flex-direction: column;
    position: relative;
    flex: 1;
}

    .oui-input + .oui-input {
        margin-top: 30px;
    }

    .oui-input > select,
    .oui-input > input {
        outline: 0;
        height: 32px;
        padding: 0 10px;
        font-size: 13px;
        background-color: var(--ods-Z3);
        color: var(--color-text);
        /*border: 1px solid var(--border-color-secondary);*/
        border: none;
        border-radius: 6px;
    }

    .oui-input > select {
        --background-image: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiPjxwYXRoIGQ9Im0xIDIuNzUgMyAzIDMtMyIgZmlsbD0idHJhbnNwYXJlbnQiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2U9IiM5OTk5OTkiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPg==);
        background-position: center;
        background-position-x: calc(100% - 10px);
        background-repeat: no-repeat;
        background-image: var(--background-image);
        -webkit-appearance: none;
        padding-right: 24px;
    }

    .oui-input > label {
        font-size: 12px;
        color: var(--ods-color-text-faded);
        margin-bottom: 8px;
        user-select: none;
        pointer-events: none;
        font-weight: 500;
    }

    .oui-input > input ~ button.action {
        position: absolute;
        width: 32px;
        height: 32px;
        bottom: 0px;
        right: 0px;
        border: none;
        border-top-right-radius: 6px;
        border-bottom-right-radius: 6px;
        display: flex;
        justify-content: center;
        align-items: center;
        /*top: 26.5px;*/
    }

        .oui-input > input ~ button.action:not([disabled]):hover {
            background-color: var(--ods-bg-hover);
        }


    .oui-input > input:not([readonly]):focus,
    .oui-input > select:not([readonly]):focus {
        /*border-color: var(--border-color);*/
        outline: 1px solid var(--ods-T10);
    }

    .oui-input > input[readonly],
    .oui-input > input[readonly],
    .oui-input > input[readonly]:focus,
    .oui-input > input[readonly]:hover,
    .oui-input > select[readonly]:focus,
    .oui-input > select[readonly]:hover {
        background-color: var(--ods-Z3);
        border-color: var(--ods-Z3);
    }

    .oui-input.error .input-error-message {
        color: var(--ods-error-default);
        font-size: 12px;
        padding-top: 5px;
        font-weight: 500;
        /*position: absolute;
    bottom: -22px;*/
    }

    .oui-input.warning .input-warning-message {
        color: var(--ods-warning-Z10);
        font-size: 12px;
        padding-top: 5px;
        font-weight: 500;
    }

    .oui-input.error > input {
        outline: 1px solid var(--ods-error-default);
    }

    .oui-input > input:has(+ button) {
        padding-right: 40px;
    }

/* Data Viewer */

.viewport > .data-viewer {
    height: 100%;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.data-viewer > .data {
    flex: 1;
    overflow: auto;
    padding: 10px 0;
}

    .data-viewer > .data:active::-webkit-scrollbar-thumb,
    .data-viewer > .data:hover::-webkit-scrollbar-thumb,
    .data-viewer > .data:hover::-webkit-scrollbar-thumb {
        visibility: visible;
    }

    .data-viewer > .data::-webkit-scrollbar-thumb {
        visibility: hidden;
    }

.data-viewer .toolbar {
    display: flex;
    align-items: stretch;
    height: 32px;
    /*font-size: 14px;*/
    border-top: 1px solid var(--ods-T2);
}

    .data-viewer .toolbar button {
        border: none;
        /*padding: 2px 10px 0 10px;*/
    }

        .data-viewer .toolbar button:not(:hover) {
            /*color:var(--color-primary);*/
        }

    .data-viewer .toolbar label.button {
        border: none;
        /*padding: 6px 10px 0 10px;*/
        display: flex;
        justify-content: center;
        align-items: center;
    }

        .data-viewer .toolbar label.button:not(:hover) {
            /*color: var(--color-primary);*/
        }

    .data-viewer .toolbar .jsonpath {
        flex: 1;
        /*line-height: 25px;*/
        padding: 0 5px;
        overflow-x: auto;
        overflow-y: hidden;
        font-size: 13px;
        display: flex;
        align-items: center;
        color: var(--color-text);
        border-left: 1px solid var(--ods-T2);
    }

.jsonpath.no-value {
    color: var(--color-text-inactive); /*TODO VAR*/
    user-select: none;
}

.jsonpath::-webkit-scrollbar-thumb {
    background: var(--brand-color);
}

.jsonpath::-webkit-scrollbar {
    width: 1px;
    height: 1px;
}

.data-viewer {
    background-color: var(--ods-bg-primary);
    overflow: auto;
}

    .data-viewer ul {
        list-style: none;
        margin: 0;
        padding: 0 0 0 20px;
    }

    .data-viewer li {
        /*margin: 8px 0;*/
        padding: 0px 0;
        font-size: 12px;
        white-space: nowrap;
    }

    .data-viewer .key {
        font-weight: 500;
        line-height: 24px;
    }

        .data-viewer .key:not(:empty) + .value {
            margin-left: 0px;
        }

    .data-viewer .array.value {
        color: var(--ods-color-text-faded);
    }

    .data-viewer .object > ul {
        border-left: 1px solid var(--ods-T6);
    }

    .data-viewer .array > ul {
        border-left: 1px dashed var(--ods-T6);
    }

    .data-viewer li.array:has(>.key > button:hover) > ul,
    .data-viewer li.object:has(>.key > button:hover) > ul {
        border-color: var(--brand-color);
    }

    .data-viewer .key > button {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 0;
        font-size: 10px;
        border-radius: 3px;
        width: 10px;
        height: 100%;
    }

        .data-viewer .key > button:not([disabled]):hover {
            color: var(--brand-color);
            border: none;
            outline: none;
            background-color: inherit;
        }

    .data-viewer .key > label.button {
        padding: 0;
        font-size: 10px;
        width: 12px;
        border-radius: 3px;
        margin-right: 3px;
        height: 12px;
        vertical-align: text-bottom;
    }

    .data-viewer .array.closed ul,
    .data-viewer .object.closed ul {
        display: none;
    }

    .data-viewer li.active {
        background-color: var(--ods-bg-selected);
        /*border-radius: 5px;*/
        padding-left: 20px;
        margin-left: -20px;
    }

    .data-viewer .start-selection {
        background-color: var(--ods-info-T3);
        /*border-radius: 5px;*/
        padding-left: 20px;
        margin-left: -20px;
    }

    .data-viewer .float .value,
    .data-viewer .integer .value {
        color: var(--data-viewer-number-font);
    }

    .data-viewer .string .value {
        color: var(--data-viewer-string-font);
    }

    .data-viewer .boolean .value {
        font-style: italic
    }

    .data-viewer .data .enabled {
        color: var(--data-viewer-enabled-font)
    }

    .data-viewer .data .disabled {
        color: var(--data-viewer-disabled-font)
    }

.clickable {
    cursor: pointer;
}

.delete-button {
    color: var(--error-color);
}

.dropdown-container > .delete-button:not([disabled]):hover {
    color: #fff;
    background-color: var(--error-color);
}

.delete-button-text,
.delete-button-text .oui-icon {
    color: var(--error-color-calm) !important;
}

.dropdown-container {
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 180px;
}

    .dropdown-container > .oui-button,
    .dropdown-container > .button,
    .dropdown-container > button {
        height: 32px;
        line-height: 1;
        border-radius: 6px;
        text-align: left;
        border: none;
        font-size: 13px;
        flex-shrink: 0;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 8px;
        padding-left: 10px;
        padding-right: 10px;
        font-size: 13px;
        color: var(--color-text);
        padding-top: 0px;
        cursor: pointer;
        font-weight: 500;
        text-decoration: none;
    }

        /*.colored-icons .oui-icon {
    color: var(--brand-color);
}*/

        .dropdown-container > button.colored-icons i {
            color: var(--brand-color);
        }

        .dropdown-container > .oui-button:not([disabled]):hover,
        .dropdown-container > .button:not([disabled]):hover,
        .dropdown-container > button:not([disabled]):hover {
            background-color: var(--ods-bg-hover);
            color: var(--ods-color-text);
            border: none;
            outline: none;
        }

        .dropdown-container > .button .oui-icon,
        .dropdown-container > button .oui-icon {
            width: 14px;
            height: 14px;
            color: var(--color-text-faded);
        }

.transformedDataPlaceHolder {
    justify-content: center;
    align-items: center;
    flex: 1;
    display: flex;
    flex-direction: column;
    color: var(--color-text-inactive);
    width: 100%;
    height: 100%;
    border-radius: 0px 0px 5px 5px;
    font-size: 13px;
}

    .transformedDataPlaceHolder button {
        margin-top: 10px;
        color: var(--color-text);
        border: 1px solid var(--border-color);
        padding: 12px 16px;
        border-radius: 6px;
    }

/* Notifications */
.notification-layer {
    position: absolute;
    right: 15px;
    bottom: 15px;
    display: flex;
    flex-direction: column;
    max-width: min(100%, 400px);
    z-index: 999999;
    align-items: end;
}

    .notification-layer .notification {
        border-radius: 12px;
        outline: 1px solid var(--border-color);
        background-color: var(--bg-component-primary);
        box-shadow: var(--dropshadow-level-two);
        color: var(--color-text);
        cursor: pointer;
        position: relative;
        padding: 20px 15px 20px 20px;
        display: flex;
        gap: 12px;
        width: fit-content;
    }

     html[data-theme='dark'] .notification-layer .notification {
        box-shadow: var(--dropshadow-level-three-alternate);
     }

        .notification-layer .notification .notification-start {
            display: flex;
        }

        .notification-layer .notification .notification-center {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 8px;
            justify-content: center;
        }

        .notification-layer .notification .notification-center .notification-footer {
            display: flex;
            margin-top: 4px;
            gap: 10px;
        }

        .notification-layer .notification .notification-end button {
            width: 16px;
            height: 16px;
        }

            .notification-layer .notification .notification-end .oui-button.icon {
                background-color: inherit;
            }

            .notification-layer .notification .notification-end .oui-button.icon .oui-icon {
                color: var(--color-text-faded);
            }

            .notification-layer .notification .notification-end .oui-button.icon:hover .oui-icon {
                color: var(--color-text);
            }

        .notification-layer .notification + .notification {
            margin-top: 15px;
        }

        .notification-layer .notification h1 {
            margin: 0;
            font-size: 13px;
            font-weight: 500;
            line-height: 16px;
        }

        .notification-layer .notification p {
            margin: 0;
            font-size: 12px;
            color: var(--color-text-faded);
            word-break: break-word;
        }

        /*.notification-layer .notification h1 + p {
            margin-top: 5px;
        }*/

        .notification-layer .notification.success .notification-start .oui-icon {
            color: var(--success-color);
        }

        .notification-layer .notification.error .notification-start .oui-icon {
            color: var(--error-color);
        }

        .notification-layer .notification.warning .notification-start .oui-icon {
            color: var(--lightning-yellow);
        }

        .notification-layer .notification.info {
            width: fit-content;
            align-self: end;
            padding: 8px;
        }

            .notification-layer .notification.info .notification-center {
                display: flex;
                align-items: center;
            }

            .notification-layer .notification.info p {
                font-size: 12px;
            }


/* popup */
.popup-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(0.5px);
    z-index: 9998;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgba(0,0,0, 0.4);
}

.popup {
    max-height: 90%;
    max-width: min(1000px, 100%);
    overflow: auto;
    min-width: min(400px, 100%);
    border-radius: 12px;
    background-color: var(--ods-bg-panel-primary);
    box-shadow: var(--ods-drop-shadow-01);
    color: var(--ods-color-text);
    display: flex;
    flex-direction: column;
}

    .popup.large {
        max-width: min(1000px, 100%);
    }

    .popup.medium {
        max-width: min(750px, 100%);
    }

    .popup.small {
        max-width: min(500px, 100%);
    }

    .popup .header {
        font-size: 14px;
        height: 52px;
        /*    background-color: var(--tabbar-background-color);*/
        /*border-bottom: 1px solid var(--toolbar-item-border-color);*/
        color: var(--color-text);
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        font-weight: 600;
        border-bottom: 1px solid var(--ods-border-panel-primary);
        padding: 0 16px;
    }

        .popup .header button {
            border-radius: 99px;
            width: 24px;
            height: 24px;
            margin: 0;
            padding: 0;
            font-size: 16px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

            .popup .header button:not([disabled]):hover {
                background-color: inherit;
                /*color: var(--crusta);*/
                border: none;
                outline: none;
            }

                .popup .header button .oui-icon {
                    width: 12px;
                    height: 12px;
                    color: var(--ods-color-text-faded);
                }
                    .popup .header button:not([disabled]):hover .oui-icon {
                        color: var(--ods-color-text);
                    }

    .popup .body {
        overflow: auto;
        padding: 16px 16px 32px 16px;
        flex: 1;
        display: flex;
        flex-direction: column;
        font-size: 13px;
        position: relative;
    }

        .popup .body > *:first-child {
            margin-top: 0;
        }

        .popup .body > *:last-child {
            margin-bottom: 0;
        }

    .popup .footer {
        padding: 16px;
        display: flex;
        justify-content: flex-end;
        flex-direction: row;
        /*background-color: var(--bg-primary);*/
    }

        .popup .footer > button + button {
            margin-left: 10px;
        }

        /*.popup .footer > button {
            border: none;
            background-color: var(--brand-color);
            border-radius: 6px;
            font-size: 13px;
            padding: 10px 16px;
            color: var(--color-text);
            height: 100%;
            position: relative;
            box-shadow: none;
            font-weight: 500;
            line-height: 1;
        }

            .popup .footer > button.primary {
                color: #fff;
            }

            .popup .footer > button.secondary {
                background-color: inherit;
                color: var(--color-text);*/
                /*outline: none;*/
                /*box-shadow: none;
            }

                .popup .footer > button.secondary:hover {
                    background-color: inherit;*/
                    /*outline: none;*/
                    /*text-decoration: underline;
                }

            .popup .footer > button[disabled] {
                background-color: var(--bg-primary);
                color: var(--brand-color);
            }*/

    .popup .body > .notificationText {
        white-space: pre-wrap
    }

.container-loader {
    display: flex;
    flex: 1;
    flex-direction: column;
    position: absolute;
    /*background-color: rgba(0,0,0, 0.2);*/
    width: 100%;
    height: 100%;
    z-index: 98;
    justify-content: center;
    align-items: center;
    background-color: var(--ods-bg-primary);
    top: 0;
    left: 0;
}

.loaderContainer {
    justify-content: center;
    align-items: center;
    flex: 1;
    display: flex;
}

.loader {
    border: 2px solid var(--ods-color-text);
    border-radius: 50%;
    border-top: 2px solid transparent;
    width: 30px;
    height: 30px;
    -webkit-animation: spin 1s linear infinite; /* Safari */
    animation: spin 1s linear infinite;
}

.oui-button .container-loader {
    background-color: var(--ods-Z0);
    border-radius: 6px;
}

/* Safari */
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.tooltip-provider {
    /*transform: scale(1);
    transition: transform 500ms ease 0ms;*/
}

    .tooltip-provider.hidden {
        display: inherit !important;
        visibility: hidden !important;
        /*transform: scale(0.5);*/
    }

.hover-popup {
    position: absolute;
    z-index: 99999;
}

.hover {
    max-width: 250px;
    border-radius: 5px;
    padding: 1em 2em;
    color: #fff;
    background-color: black;
    backdrop-filter: blur(2px);
    text-align: center;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.10);
}

    .hover:has(.description:only-child) {
        padding: 10px 12px;
    }

    .hover > .heading {
        font-size: 1.1em;
    }

    .hover > .hotkey::before {
        content: "[";
    }

    .hover > .hotkey::after {
        content: "]";
    }

    .hover > .hotkey {
        padding: 15px;
    }

    .hover > .description {
        font-size: 12px;
    }

    .hover > .heading + .description {
        padding-top: 10px;
    }

.base-page-header-left button {
    width: 32px;
    height: 32px;
    border-radius: 5px;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text);
    margin-bottom: auto;
}

    .base-page-header-left button .oui-icon {
        width: 16px;
        height: 16px;
    }

.templateTagsContainer {
    display: flex;
    margin-top: 10px;
    flex-wrap: wrap;
    max-width: 500px
}

.templateTag {
    display: flex;
    color: var(--color-text);
    background-color: var(--brand-color);
    border-radius: 5px;
    margin-bottom: 5px;
    font-size: 14px;
    align-items: center;
    height: 28px;
}

.templateTagText {
    padding: 0px 8px 0px 8px;
    height: 100%;
    display: flex;
    align-items: center;
    border-right: 1px solid var(--black-rock);
}

.templateTag button {
    color: var(--color-text);
    font-size: 13px;
    border-radius: 5px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .templateTag button:hover {
        outline: none;
        border: none;
        background-color: inherit;
    }

.templateTag + .templateTag {
    margin-left: 5px;
}

.tagInput {
    display: flex;
    align-items: baseline;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}

    .tagInput form {
        display: flex;
        flex-direction: row;
        align-items: end;
    }

        .tagInput form .input {
            flex: 1;
        }

    .tagInput button {
        border-radius: 5px;
        background-color: var(--brand-color);
        color: var(--color-text);
    }

    .tagInput form button {
        margin-left: 5px;
        height: 40px;
        font-size: 14px;
        padding: 0px 15px;
    }

.popup > .body > *:first-child form {
    flex: 1;
}

.base-page-collection-item-actions button.icon:not([disabled]):hover {
    background-color: var(--bg-primary);
}

button.policy,
.stage-table td button.policy {
    color: var(--color-text);
    width: unset;
    min-width: 30px;
}

    button.policy:not([disabled]):hover,
    .stage-table td button.policy:not([disabled]):hover {
        background-color: var(--bg-primary);
    }

    button.policy.active:not([disabled]):hover,
    .stage-table td button.policy.active:not([disabled]):hover {
        background-color: var(--royal-blue-80);
    }

    button.policy + button.policy {
        margin-left: 2px;
    }

    button.policy.active,
    .stage-table td button.policy.active {
        background-color: var(--royal-blue);
    }

.policy-collection {
    /*display: flex;
    gap: 2px;*/
    padding: 2px 0px;
}

.oui-input .selected-color {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    position: absolute;
    right: 10px;
    bottom: 10px;
    outline: 2px solid var(--border-color);
    padding: 0;
    cursor: pointer;
    border: none;
    -webkit-appearance: none;
}

    .oui-input .selected-color::-webkit-color-swatch-wrapper {
        padding: 0;
    }

    .oui-input .selected-color::-webkit-color-swatch {
        border: none;
    }

.menu-header {
    display: flex;
    width: 246px;
    height: 38px;
    align-items: center;
    flex-shrink: 0;
}

    .menu-header:hover {
        border-color: var(--border-color);
    }

    .menu-header .side-bar-content-header-container {
        width: 30px;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        /*margin-left: 7px;*/
        background-color: rgb(102, 119, 153);
        border-radius: 8px;
        /*box-shadow: var(--dropshadow-level-one);*/
    }

        .menu-header .side-bar-content-header-container.organization {
            background-color: var(--electric-violet-30);
            border: 1px solid var(--organization-color);
        }

            .menu-header .side-bar-content-header-container.organization .oui-icon {
                color: var(--organization-color);
            }

        .menu-header .side-bar-content-header-container.unit {
            background-color: var(--royal-blue-30);
            border: 1px solid var(--unit-color);
        }

            .menu-header .side-bar-content-header-container.unit .oui-icon {
                color: var(--unit-color);
            }

        .menu-header .side-bar-content-header-container .oui-icon {
            color: var(--white-dimmed);
        }

    .menu-header .name {
        margin-left: 8px;
        font-size: 14px;
        font-weight: 500;
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 30px;
        margin-right: 6px;
    }

        .menu-header .name .primary {
            font-size: 13px;
            max-width: 173px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .menu-header .name .secondary {
            font-size: 11px;
            color: var(--color-text-inactive);
        }

    .menu-header > .oui-icon {
        margin-left: 0px;
        margin-right: 8px
    }



.header-dropdown-container:has(.menu-header) {
    background-color: var(--bg-primary);
}

.base-page-title {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-weight: 600;
}

    .base-page-title .secondary {
        color: var(--color-text-inactive);
        font-weight: 500;
        font-size: 12px;
    }

.base-page-icon-container {
    width: 40px;
    height: 40px;
    /*background-color: var(--bg-highlight-primary);*/
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--border-color);
    box-shadow: var(--dropshadow-level-one);
}

    .base-page-icon-container .oui-icon {
        width: 24px;
        height: 24px;
    }

.generated-preview-item {
    font-size: 12px;
    padding: 8px 16px;
    font-weight: 500;
    display: flex;
    align-items: center;
    line-height: 1;
    border-bottom: 1px solid var(--border-color);
    color: var(--color-text-inactive);
    height: 32px;
}

    .generated-preview-item.active {
        color: var(--color-text);
    }

        .generated-preview-item.active:hover {
            background-color: var(--bg-highlight-primary);
            cursor: pointer;
        }

            .generated-preview-item.active:hover::after {
                content: "open";
                margin-left: auto;
                text-transform: uppercase;
                color: var(--color-text-inactive);
            }

    /*.generated-preview-item + .generated-preview-item {
    border-top: 1px solid var(--border-color);
}*/

    .generated-preview-item .status {
        width: 16px;
        height: 16px;
        margin-right: 8px;
    }

/* Data Grid */
/*.data-grid {
    border-radius: 6px;*/
    /*border: 1px solid var(--border-color);*/
    /*display: flex;
    flex-direction: column;*/
    /*overflow: hidden;*/
/*}

.data-grid-table-container {
    display: flex;
    flex: 1;
}

.data-grid-table {
    border-collapse: collapse;
    width: 100%;
    border-spacing: 0;
    font-size: 13px;
}

    .data-grid-table thead {
        background-color: var(--bg-component-primary);
        border-bottom: 1px solid var(--border-color);
        position: sticky; 
        z-index: 2;
        top: 0;
    }

.data-grid tr {
    height: 50px;
}

    .data-grid tr:nth-child(even) {*/
        /*background-color: rgb(239, 242, 247);*/
        /*background-color: rgb(250, 250, 250);*/
    /*}

.data-grid tbody tr:hover {*/
    /*background-color: var(--bg-highlight-primary);
    cursor: pointer;
    border-radius: 6px;*/
/*}

.data-grid tbody tr:hover td{
    background-color: var(--bg-highlight-primary);
    cursor: pointer;
    border-color: transparent;
}*/

/*.data-grid tbody tr:hover td:first-of-type {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

.data-grid tbody tr:hover td:last-of-type {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}*/

/*.data-grid tbody tr.selected {
    background-color: var(--bg-component-4);
}

.data-grid td {
    padding: 0 16px;
    border-top: 1px solid var(--border-color);
    font-weight: 500;
}

.data-grid td .standard-property {
    color: var(--color-text-faded);
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 8px;
}

.data-grid td .standard-property.primary {
    color: var(--color-text);
    font-weight: 500;
    -webkit-user-select: none;
    user-select: none;
}

.data-grid td .standard-property.primary .oui-icon {
    color: var(--color-text-faded);
}

.data-grid tr:first-of-type td {
    border-color: transparent;
}

.data-grid tbody tr:hover + tr td {
    border-color: transparent;
}


.data-grid th {
    height: 40px;
    overflow: hidden;
    font-size: 12px;
}*/
/*.data-grid th + th,*/
/*.data-grid td + td {*/
    /*border-left: 1px solid var(--border-color);*/
/*}

.data-grid th button {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

    .data-grid th button:not([disabled]):hover {
        background-color: var(--bg-component-secondary);
        border: none;
        outline: none;
        color: var(--color-text);
    }

.data-grid-pagination {
    height: 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--border-color);
    font-size: 13px;
    padding: 0 15px;
}

    .data-grid-pagination .toolbar {
        gap: 10px;
    }

    .data-grid-pagination button:not([disabled]) {
        outline: none;
        border: none;
        border-radius: 5px;
    }

.col-title {
    font-weight: 600;
    display: flex;
    gap: 5px;
    padding: 0 16px;*/
    /*text-transform: uppercase;*/
    /*color: var(--color-text-inactive);
    font-size: 13px;*/
    /*min-width: 250px;*/
/*}

    .col-title i {
        display: flex;
        width: 15px;
        height: 15px;
        align-items: center;
        padding-bottom: 2px;
    }

.col-title-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}*/

.table-placeholder-name {
    display: flex;
    height: 100%;
    gap: 8px;
}

.table-placeholder-name .placeholder-icon::before {
    content: "";
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: var(--bg-highlight-primary);
    display: block;
}

.table-placeholder-name .placeholder-name::before {
    content: "";
    min-width: 150px;
    max-width: 200px;
    height: 16px;
    border-radius: 6px;
    background-color: var(--bg-highlight-primary);
    display: block;
}

.location .current-status {
    font-size: 13px;
    font-weight: 500;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0 10px;
}

.dm-form .form-title {
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 600;
}

form.dm-form .form-section + .form-section {
    margin-top: 30px;
}

form.dm-form .form-section {
    padding-bottom: 10px;
}

.popup .body:has(.data-viewer) {
    padding: 0;
}

.popup .body > .viewport:has(>.data-viewer) {
    /*border-top: 1px solid var(--border-color);*/
    border-bottom: 1px solid var(--border-color);
}

.viewport > .toolbar + .data-viewer {
    height: calc(100% - 32px);
}


/* Toolbar */
.toolbar {
    /* padding: 0 4px; */
    /*background-color: var(--bg-component-primary);*/
    color: var(--color-text);
    display: flex;
    align-items: center;
    overflow-y: hidden;
    overflow-x: auto;
}

.toolbar button {
    /*border: 1px solid var(--border-color);*/
    font-size: 0.9em;
    padding: 1px 10px;
    height: 100%;
    position: relative;
}

.toolbar button:not(:hover) {
    color: var(--color-text);
}

.toolbar button > .oui-icon + .label {
    padding-left: 5px;
}

.toolbar button.primary {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.toolbar label.button {
    border: 1px solid var(--border-color);
    font-size: 0.9em;
    padding: 1px 10px;
    height: 100%;
    position: relative;
}

.toolbar label.button:not(:hover) {
    color: var(--color-text);
}

.toolbar label.button > .oui-icon + .label {
    padding-left: 5px;
}

.toolbar label.button.primary {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.toolbar select {
    color: var(--color-text);
}

.toolbar > .breadcrumb {
    padding: 0 10px;
}

.toolbar,
.tabbar {
    height: 32px;
}

.popup .viewport > .toolbar .group button, .tab-panels .viewport > .toolbar .group button {
    border: none;
    height: 100%;
    padding: 2px 10px 0 10px;
}

.popup .viewport > .toolbar .group, .tab-panels .viewport > .toolbar .group {
    height: 100%;
    display: flex;
}

.oui-input > textarea {
    border: none;
    border-radius: 6px;
    background-color: var(--bg-highlight-primary);
    padding: 15px;
    color: var(--color-text);
}

.oui-input > textarea:focus {
    outline: 1px solid var(--brand-color);
}

.oui-checkbox {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;
    gap: 10px;
    font-weight: 500;
}

.oui-checkbox input {
    height: 20px;
    width: 20px;
    padding: 0;
    background-color: var(--ods-T3);
    border: 1px solid var(--ods-T1);
    border-radius: 4px;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    flex-shrink: 0;
}

.oui-checkbox > label:hover input {
    border-color: var(--ods-T2);
}

.oui-checkbox > label {
    font-size: 13px;
    color: var(--color-text-inactive);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    display: inline-flex;
    gap: 10px;
    align-items: center;
}

.oui-checkbox label:hover {
    color: var(--color-text);
}

.oui-checkbox > label span {
    line-height: 0;
    position: relative;
}

.oui-checkbox > label p {
    margin: 0;
    line-height: 20px;
}

.oui-checkbox .oui-icon {
    position: absolute;
    pointer-events: none;
    width: 20px;
    height: 20px;
    left: 0;
    top: 0;
}

.oui-input + .oui-checkbox,
.oui-checkbox + .oui-checkbox,
.oui-checkbox + .oui-input {
    margin-top: 30px;
}

.primary-background {
    background-color: var(--bg-primary) !important;
}

.required-asterisk {
    color: var(--ods-info-Z11);
    margin-left: 5px;
}

/* Dialogs */
.settings-dialog-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.settings-dialog-pane {
    padding: 15px;
    font-size: 14px;
    height: 310px;
}

.settings-dialog-pane + .settings-dialog-pane {
    border-left: 1px solid var(--border-color);
}

.settings-dialog-pane-title {
    font-size: 18px;
    font-weight: 500;
    display: block;
    margin-bottom: 20px;
}

.settings-dialog-pane form {
    margin-left: 10px;
}
.settings-dialog-info-item {
    display: flex;
    flex-direction: column;
    margin-left: 10px;
}

.settings-dialog-info-item + .settings-dialog-info-item {
    margin-top: 20px;
}

.settings-dialog-info-title {
    font-size: 16px;
    margin-bottom: 6px;
    font-weight: 500;
}

.settings-dialog-info-data {
    /*font-size: 14px;*/
    margin-left: 10px;
}

.settings-dialog-info-data + .settings-dialog-info-data {
    margin-top: 4px;
}

.hiddenCanvasElement {
    display: none;
}

.user-identity-key {
    background-color: var(--bg-highlight-primary);
    border-radius: 6px;
    display: flex;
    align-items: center;
}

.user-identity-key:focus,
.user-identity-key:has(*:focus) {
    outline: 1px solid var(--brand-color);
}

.user-identity-key > span {
    padding-left: 15px;
    color: var(--color-text-faded);
    line-height: 2;
    font-size: 13px;
}

.user-identity-key > .oui-input input {
    padding-left: 0;
    border: none !important;
    outline: none !important;
}

/*.user-identity-key::before {
    content: "Key";
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-inactive);
    position: absolute;
    top: 0;
    left: 0;
}*/

.user-identity-key select {
    border: none;
    background-color: inherit;
    border-right: 1px solid var(--border-color-secondary);
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    background-color: var(--bg-highlight-primary);
}

.user-identity-key input {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}

.user-identity-warning {
    display: flex;
    gap: 10px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 15px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text);
    align-items: center;
}

.user-identity-key:has(.input-error-message) {
    margin-bottom: 40px;
}

.user-identity-key .input-error-message {
    position: absolute;
    bottom: -40px;
}