/* Table of contents --- GRANULYTIX MASTER APP STYLE SHEET
––––––––––––––––––––––––––––––––––––––––––––––––––
- Plotly.js
- Grid
- Base Styles
- Typography
- Links
- Buttons
- Forms
- Lists
- Code
- Tables
- Spacing
- Utilities
- Clearing
- Media Queries
* plotly.js's modebar's z-index is 1001 by default
 * https://github.com/plotly/plotly.js/blob/7e4d8ab164258f6bd48be56589dacd9bdd7fded2/src/css/_modebar.scss#L5
 * In case a dropdown is above the graph, the dropdown's options
 * will be rendered below the modebar
 * Increase the select option's z-index
*/


/* root_style/colors ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
:root {
    /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
    /* ADJUSTED COLORS START */
    /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
    --bg_layer0: rgba(220, 220, 220, 1);
    --bg_layer1: rgba(230, 230, 230, 1);
    --bg_layer2: rgba(235, 235, 235, 1);
    --bg_layer3: rgba(240, 240, 240, 1);
    --bg_layer4: rgba(245, 245, 245, 1);
    --bg_layer5: rgba(248, 248, 248, 1);
    --bg_layer6: rgba(251, 251, 251, 1);

    /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
    /* Highlight for each Background */
    /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
    --bg_layer0_highlight: rgb(166 168 169);
    --bg_layer1_highlight: var(--bg_layer0);
    --bg_layer2_highlight: var(--bg_layer0);
    --bg_layer3_highlight: var(--bg_layer2);
    --bg_layer4_highlight: var(--bg_layer2);
    --bg_layer5_highlight: var(--bg_layer3);
    --bg_layer6_highlight: var(--bg_layer4);

    --bg_layer0_opposite: rgba(7, 8, 9, 1);
    --bg_layer1_opposite: rgba(14, 16, 18, 1);
    --bg_layer2_opposite: rgba(21, 24, 27, 1);
    --bg_layer3_opposite: rgba(29, 32, 36, 1);
    --bg_layer4_opposite: rgba(36, 40, 44, 1);
    --bg_layer5_opposite: rgba(43, 48, 53, 1);
    --bg_layer6_opposite: rgba(50, 56, 62, 1);

    --bg_layer_spinner: rgba(248, 248, 248, .5);
    --bg_sidebar: var(--bg_layer0_highlight);

    /* Layer RGB Codes To allow for transparency modes */
    --rgb_layer0: 166 168 169;
    --rgb_layer1: 220 220 220;
    --rgb_layer2: 235 235 235;
    --rgb_layer3: 240 240 240;
    --rgb_layer4: 245 245 245;
    --rgb_layer5: 248 248 248;
    --rgb_layer6: 251 251 251;

    /*Text Font Formatting */
    --text_001: rgba(82, 82, 82, 1);
    --text_002: rgba(95, 95, 95, 1);

    /*GRAY */
    --rgb-bs-gray-1: 225 226 227;
    /*--rgb-bs-gray-1: 234 238 239;*/
    --rgb-bs-gray-2: 218 222 224;
    --rgb-bs-gray-3: 202 206 209;
    --rgb-bs-gray-4: 186 190 193;
    --rgb-bs-gray-5: 170 174 178;
    --rgb-bs-gray-6: 153 159 163;
    --rgb-bs-gray-7: 137 143 148;
    --rgb-bs-gray-8: 121 127 132;
    --rgb-bs-gray-9: 105 111 117;
    --rgb-bs-gray-10: 89 95 102;
    --rgb-bs-black: 0 0 0;

    /* Create gray 1 variable transparent only 10% */
    --border-1: rgba(var(--rgb-bs-gray-8) / 0.15);
    --border-2: rgba(var(--rgb-bs-gray-8) / 0.2);
    --border-3: rgba(var(--rgb-bs-gray-8) / 0.3);
    --border_color_inputs: var(--border-2);
    --border_color: var(--border-2);

    /* REVISED COLORS USING NEW Layers */
    --bg_inputs: var(--bg_layer4);
    --navColor: #232b36;
    --bgColor: var(--bg_layer1);
    --pgColor: var(--bg_layer1);
    --bgCardsHome: var(--bg_layer3);
    --sb_active_color: var(--bg_layer5);
    --sb_active_color_darker: rgb(215, 214, 214);
    --sb_active_color_shade: rgb(233, 236, 239);
    --sb_inactive_color: #ffffff;
    --bgCarosel: var(--bg_layer3);
    --bg_cards: var(--bg_layer4);
    --bg_cards_highlight: var(--bg_layer4_highlight);
    --textDefault: var(--text_001);
    /*--textDefault: #676f78;*/
    /*--textDefault: #222A35;*/

    /* Font Formatting */
    /*--DisabledInputs: rgb(202, 207, 213);*/
    /*--DisabledInputs: var(--bg_layer1);*/
    --DisabledText: rgb(187, 189, 192);
    --DisabledInputs: var(--sb_active_color_shade);

    /* ADJUSTED COLORS END */
    --FixedBlueTransparent: rgb(79 113 159 / 64%);
    --FixedLight: #eaeeef;
    --pgColorOpposite: #272b30;
    --pgColorOppositeLight: #676f78;
    --pgColorOppositeTransparent: rgba(39, 43, 48, 0.48);
    --pgColorOppositeTransparent2: rgba(39, 43, 48, 0.1);
    /*--pgColor: #eaeeef;*/
    /*--bgCardsHome: #fff;*/
    /*--bgCarosel: #eaeeef;*/
    /*--bgColor: #fff;*/
    --bgColorMenu: #dadada;
    /*--navColor: #232b36;*/
    --bgdrawerColor: #fff;
    --bgdrawerColorOpacity: rgba(255, 255, 255, 0.49);
    --bgCaroselIconColor: #ffffff;
    --bgHomeImageDiv: #15161a;
    /*--ChartButtonBg: rgb(153, 194, 62, .7); !* set the default background color to be a little lighter than hover color *!*/
    /*--ChartButtonBg_hover: rgb(153, 194, 62, 1);*/
    --navbar-submenu-row-bg: rgb(61, 70, 83);
    --navbar-submenu-row-text: #bcbec0;

    --ChartButtonBg: rgba(176, 208, 108, 0.9); /* 7D9C3B B0D06C set the default background color to be a little lighter than hover color */
    --ChartButtonBg_hover: rgb(153, 194, 62); /* rgb(153, 194, 62) set the default background color to be a little lighter than hover color */
    --ChartButtonText: rgb(0, 0, 0, 1);

    /*--ChartButtonText: #272b30;*/
    --box_shadowing: rgb(134, 142, 150);

    /* WARNING COLORS */
    --warning_red_button: rgb(217, 85, 85);
    --warning_red: rgb(255 154 154);
    --warning_text: rgb(0, 0, 0);
    --warning_red_light: rgb(255, 245, 245);

    --warning_yellow_dark: rgb(218, 190, 125);
    --warning_yellow_light: rgb(255, 249, 219);

    /* Text Dark backgrounds */
    --text_dark_bg: #eaeeef;

    /*NAV BAR GRADIENT -------------------------------------*/
    --navbar_gradient1: var(--primary);
    --navbar_gradient2: #303844;
    --navbar_text: #999ea2;

    --HomeIconBg: #232b36;

    --plotly-zero-line: rgb(131, 130, 130);
    --plotly-axis-line: rgb(190, 188, 188);
    /*--plotly-axis-line: rgb(201, 197, 197);*/
    --plotly-grid-line: rgba(190, 188, 188, 0.35);

    --primary: #232b36;
    --primary-opposite: #000000;
    --secondary: #ff0b70;
    --terciary: #00ba5b;
    /* GRX CUSTOM ROOTS*/
    --card_text: #232b36;
    --light_text: #676f78;
    --placeholderText: #bdbdbe;
    --card_background: white;
    --light_0: #eaeeef;
    --light_1: #e4e5e6;
    --light_2: #e4e5e6;
    --radio_button_background: #ffffff;
    --mantine_gray: rgb(134, 142, 150);
    /*--border_color: rgb(233, 236, 239);*/
    /*--border_color: rgb(227, 229, 231);*/
    /*--border_color_inputs: rgb(217 218 219);*/
    /*--icon_blue: rgb(126, 146, 172);*/
    --grx_green: rgb(153, 194, 62);
    --grx_green_light: rgb(216, 244, 197);
    --grx-icon-green: #B5D375;
    --grx-green-background: rgb(220, 241, 185);
    --grx-green-background-text: #999ea2;

    --hover_highlight: #eaeeef;
    --navbar_highlight: #313b48;
    /*--hover_highlight: rgba(255, 255, 255, 0.66);*/
    /*--hover_highlight: rgb(232, 231, 231);*/
    --grx_lg_highlight: rgb(148, 147, 147);
    --chart_legend: rgb(246, 246, 247);
    --chart_legend_border: rgb(233, 236, 239);
    /*--chart_legend: #f6f6f7;*/
    /*--chart_legend_border: #676F78;*/
    --chart_text: #676f78;
    --clickColor: rgb(249, 190, 109);
    --dtBorders: rgb(233, 236, 239);
    --dtTextColor: #676f78;
    --dimmedBorder: #676f7830;
    --HoverInputs: rgb(228, 237, 250);
    --HoverInputsText: rgb(134, 142, 150);
    --slider_rail_color: #d0d2d3;

    /*--dtColorTotals: #d0d2d3;*/
    /*--dtfilterbg: rgb(217 218 219);*/
    --dtborderTotals: #272b30;
    --dtColorTotals: rgb(181 203 249);
    /*--dtColorSubTotals: rgb(217, 217, 217); */
    --dtColorSubTotals: rgb(234, 240, 253);
    --dtfilterbg: rgb(255 255 255);
    /*PLOTLY COLORS*/
    --plot_bgcolor: transparent;
    --paper_bgcolor: transparent;
    --darkgray: #676f78;

    --BgSecondaryNavbar: #3e4754;

    --green_highlight_transparent: rgba(153, 194, 62, 0.45);
    --blue_highlight_transparent: rgb(196 213 237 / 48%);

    --rgb-navbar-1: 35 43 54;
    --rgb-navbar-2: 62 71 84;

    --IconBlueShades: rgb(126, 146, 172);
    /*--blue_alert: rgb(45, 83, 232);*/
    /*--blue_alert-opaque: rgba(45, 83, 232, 0.75);*/
    --blue_highlight: rgb(187, 198, 245);
    /*   --blue_alert_bg: rgb(237, 242, 255); */
    --blue_alert_bg: rgb(204 215 245);
    --blue_alert_main: rgb(66, 99, 235);
    --blue_alert_body: rgb(66, 99, 235);
    --blue_alert_bg_dark: rgb(237, 242, 255);
    --blue_alert_bg_dark_text: rgb(116, 117, 119);
    --blue_alert_text: rgb(66, 99, 235);
    /*--progress-bar-color: rgb(106, 132, 241);*/
    --progress-bar-color: rgb(148, 147, 147);
    --bg_listgroup_dividers: rgb(217 218 219);
    --blue-alert-light: rgb(221, 230, 253);

    /* GRB VALUES TO BE USED IN COMBINATION WITH TRANSPARENCY */
    --rgb-pgColorOpposite: 39 43 48;
    --rgb-shadow: 0 0 0;
    --rgb-values-green: 153 194 62;
    --rgb-values-alert-blue: 0 75 139;
    --rgb-icon-blue-dark: 0 47 87;
    /*--rgb-values-alert-blue: 130 168 242;*/
    /*--rgb-values-alert-blue: 66 99 235;*/
    --rgb-blue-alert-light: 204 215 245;
    --rgb-icon-blue: 126 146 172;
    /*--rgb-icon-blue-dark: 25 42 110;*/
    --rgb-white: 255 255 255;
    --rgb-bgColor: 255 255 255;
    --rgb-background: 234 238 239;
    --rgb-dark-grey: 131 130 130;
    --rgb--light-blue-alert: 51 68 138;
    --grx-green-almost-opaque: #e3eec9;
    /* rgbs used for alert/summary cards (self-uploading and maybe else where) */
    --rgb-standard-blue: 36 63 162;
    /*--rgb-standard-blue: 0 75 139;*/
    --rgb-blue-1: 97 128 255;
    --rgb-blue-2: var(--rgb-standard-blue); /* same as standard blue */
    --rgb-blue-3: 0 47 87;
    --rgb-blue-4: 66 99 235;
    --rgb-light-blue: 237 242 255;
    --rgb-light-red: 255 236 238;
    --rgb-standard-red: 220 53 69;
    --rgb-sidebar: 246 246 247;
    --rgb-text-default: 103 111 120;

    /*--blue0: #355bed;*/
    /*--blue1: #3256E1;*/
    /*--blue2: #2F52D4;*/
    /*--blue3: #2D4DC8;*/
    /*--blue4: #2A48BB;*/
    /*--blue5: #2744AF;*/
    /*--blue7: #243fa2;  !* alert blue *!*/
    /*--blue8: #213A95;*/
    /*--blue9: #1E3588;*/
    /*--blue10: #1C307C;*/
    /*--blue11: #192B6F;*/
    /*--blue12: #162662;*/
    /*--blue13: #132155;*/

    --blue-shade-0: rgb(36 63 162);
    --blue-light: rgb(93, 121, 234);
    --blue-shade-1: rgb(65, 98, 233);
    --blue-shade-2: rgb(60, 87, 204);
    --blue-shade-3: rgb(53, 75, 176);
    --blue-shade-4: rgb(47, 64, 147);

    /* RGB Formats */
    --icon_blue: rgb(var(--rgb-standard-blue));
    --blue_alert: rgb(var(--rgb-standard-blue));
    --blue_alert-opaque: rgba(var(--rgb-standard-blue) / 0.75);

    /*!*---------------------  Dash-ag-grid Styles ----------------------- *!*/
    /*--aggrid-bgColor-row: #676f78;*/
    /*--aggrid-bgColor-row-dimension: #FFFFFFFF;*/
    /*--aggrid-bgColor-row-metric: #f3f2f2;*/


    /*---------------------  antd Root Styles ------------------------------ */
    --ant-primary-color: var(--icon_blue);
    --ant-primary-color-hover: var(--blue_alert);
    --ant-primary-color-active: var(--blue_alert);
    --ant-primary-color-outline: rgba(24, 144, 255, 0.2);
    --ant-primary-1: #e6f7ff;
    --ant-primary-2: #bae7ff;
    --ant-primary-3: #91d5ff;
    --ant-primary-4: #69c0ff;
    --ant-primary-5: #40a9ff;
    --ant-primary-6: #1890ff;
    --ant-primary-7: #096dd9;
    --ant-primary-color-deprecated-l-35: #cbe6ff;
    --ant-primary-color-deprecated-l-20: #7ec1ff;
    --ant-primary-color-deprecated-t-20: #46a6ff;
    --ant-primary-color-deprecated-t-50: #8cc8ff;
    --ant-primary-color-deprecated-f-12: rgba(24, 144, 255, 0.12);
    --ant-primary-color-active-deprecated-f-30: rgba(230, 247, 255, 0.3);
    --ant-primary-color-active-deprecated-d-02: #dcf4ff;
    --ant-success-color: #52c41a;
    --ant-success-color-hover: #73d13d;
    --ant-success-color-active: #389e0d;
    --ant-success-color-outline: rgba(82, 196, 26, 0.2);
    --ant-success-color-deprecated-bg: #f6ffed;
    --ant-success-color-deprecated-border: #b7eb8f;
    --ant-error-color: #ff4d4f;
    --ant-error-color-hover: #ff7875;
    --ant-error-color-active: #d9363e;
    --ant-error-color-outline: rgba(255, 77, 79, 0.2);
    --ant-error-color-deprecated-bg: #fff2f0;
    --ant-error-color-deprecated-border: #ffccc7;
    --ant-warning-color: #faad14;
    --ant-warning-color-hover: #ffc53d;
    --ant-warning-color-active: #d48806;
    --ant-warning-color-outline: rgba(250, 173, 20, 0.2);
    --ant-warning-color-deprecated-bg: #fffbe6;
    --ant-warning-color-deprecated-border: #ffe58f;
    --ant-info-color: #1890ff;
    --ant-info-color-deprecated-bg: #e6f7ff;
    --ant-info-color-deprecated-border: #91d5ff;

    /* Fixed Styling */
    --grx-box-shadow-light: 0 0 5px 1px rgb(0 0 0 / 10%);
    --grx-box-shadow: 0 0 8px 1px rgb(0 0 0 / 20%);
    /*--grx-box-shadow: 0 0 5px 1px rgb(0 0 0 / 25%);*/
    --grx-box-shadow-ltr: 0px 0px 5px 0px rgb(0 0 0 / 20%);
    --grx-box-shadow-lrb: 0 5px 7px 0px rgb(0 0 0 / 20%);
    --grx-border-radius: 6px;
    --grx-border-radius-extra: 7px;

    /*NProgress  */
    --nprogress-color: var(--grx_green) !important;
    --nprogress-color-good: var(--grx_green) !important;
    --nprogress-color-bad: var(--warning_red);

    /*!* ---------------------------------------------------- *!*/
    /*!* TESTING SETTING THE MANTINE ROOT VARS *!*/
    /*!* ---------------------------------------------------- *!*/
    --grx-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
    --bs-body-font-family: var(--grx-font-family) !important;
    --bs-font-sans-serif: var(--bs-body-font-family);

    --mantine-scale: 1;
    --mantine-font-family: var(--bs-body-font-family);
    /*--mantine-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;*/
    --mantine-font-family-monospace: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
    --mantine-font-family-headings: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;

    --separator-color: var(--border_color_inputs);
    --mantine-color-gray-3: var(--border_color_inputs) !important;
    --mantine-color-white: var(--FixedLight) !important;
    --table-hover-color: var(--blue_alert) !important;
    --table-striped-color: var(--bg_layer4) !important;
    --table-border-color: var(--border_color_inputs) !important;
    --table-highlight-on-hover-color: var(--blue_alert) !important;
    --tr-hover-bg: var(--blue_alert) !important;

    /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
    /* Heights */
    /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
    --height-stdPadding: 1rem;
    --height-navbarMain: 35px;
    --height-navbarSub: 20px;
    --height-navbarMaster: calc(var(--height-navbarMain) + var(--height-navbarSub));
    --height-navbarCharts: 35px;
    --height-navbarFull: calc(var(--height-navbarMaster) + var(--height-navbarCharts));
    --height-contentFull: calc(
            100vh - var(--height-navbarMaster) - 3*var(--height-stdPadding)
    );
    --height-contentHalf: calc((var(--height-contentFull) - 10px) / 2);
    --height-contentChartFull: calc(
            100vh
            - var(--height-navbarFull)
            - (2 * var(--height-stdPadding))
    );
    --height-contentMax: 1000px;
    --height-contentMin: 500px;
    --height-contentMaxHalf: calc((var(--height-contentMax) - 10px) / 2);
    --height-drillInputs: 240px;


    /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
    /* Sidebar Formatting rgba(var(--rgb-standard-blue) / .8)*/
    /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
    --page_colorBackground: var(--bg_layer3);
    --carosel_colorBackground: rgba(var(--rgb-bs-gray-1) / 100%);
    --sidebar_colorBackground: rgba(var(--rgb-bs-gray-1) / 100%);
    --sidebar_colorText: var(--blue_alert);
    --sidebar_colorBackground_Highlight: rgba(var(--rgb-standard-blue) / .8);
    --sidebar_colorText_Highlight: var(--FixedLight);

    /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
    /* Widths */
    /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
    --width-column-chartPageTabsVertical: 34px;
    --width-column-sidebarRight: 35px;
    --width-homePageVerticalNav: 175px;
    --width-column-userInputs: 375px;
    --width-column-summaryTables: 250px;
    --width-column-chartOutputs: calc(
            100vw
            - var(--width-column-userInputs)
            - var(--width-column-chartPageTabsVertical)
            - var(--width-column-sidebarRight)
            - (2 * var(--height-stdPadding))
    );
    --width-columns-userInputs-and-Ouputs: calc(
            100vw
            - var(--width-column-chartPageTabsVertical)
            - var(--width-column-sidebarRight)
            /*- 1rem*/
    );

    /*!* Breakpoints *!*/
    /*--bs-breakpoint-xs: 0;*/
    /*--bs-breakpoint-sm: 576px;*/
    /*--bs-breakpoint-md: 768px;*/
    /*--bs-breakpoint-lg: 992px;*/
    /*--bs-breakpoint-xl: 1200px;*/
    /*--bs-breakpoint-xxl: 1400px;*/

    /*!*--bs-font-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";*!*/
    /*!*--bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";*!*/
    /*!*--bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;*!*/


    /*--mantine-z-index-app: 100;*/
    /*--mantine-z-index-modal: 200;*/
    /*--mantine-z-index-popover: 300;*/
    /*--mantine-z-index-overlay: 400;*/
    /*--mantine-z-index-max: 9999;*/
    /*--mantine-scale: .625;*/
    /*--mantine-cursor-type: default;*/
    /*--mantine-webkit-font-smoothing: antialiased;*/
    /*--mantine-color-scheme: light dark;*/
    /*--mantine-moz-font-smoothing: grayscale;*/
    /*--mantine-color-white: #fff;*/
    /*--mantine-color-black: #000;*/
    /*--mantine-line-height: 1.55;*/
    /*--mantine-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;*/
    /*--mantine-font-family-monospace: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;*/
    /*--mantine-font-family-headings: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;*/
    /*--bs-font-sans-serif: var(--mantine-font-family);*/
    /*--bs-font-monospace: var(--mantine-font-family-monospace);*/
    /*--text-color: var(--textDefault);*/
    /*--mantine-heading-font-weight: 700;*/
    /*--mantine-radius-default: calc(0.25rem* var(--mantine-scale));*/
    /*--mantine-primary-color-0: var(--mantine-color-blue-0);*/
    /*--mantine-primary-color-1: var(--mantine-color-blue-1);*/
    /*--mantine-primary-color-2: var(--mantine-color-blue-2);*/
    /*--mantine-primary-color-3: var(--mantine-color-blue-3);*/
    /*--mantine-primary-color-4: var(--mantine-color-blue-4);*/
    /*--mantine-primary-color-5: var(--mantine-color-blue-5);*/
    /*--mantine-primary-color-6: var(--mantine-color-blue-6);*/
    /*--mantine-primary-color-7: var(--mantine-color-blue-7);*/
    /*--mantine-primary-color-8: var(--mantine-color-blue-8);*/
    /*--mantine-primary-color-9: var(--mantine-color-blue-9);*/
    /*!*--mantine-primary-color-filled: var(--mantine-color-blue-filled);*!*/
    /*!*--mantine-primary-color-filled-hover: var(--mantine-color-blue-filled-hover);*!*/
    /*!*--mantine-primary-color-light: var(--mantine-color-blue-light);*!*/
    /*!*--mantine-primary-color-light-hover: var(--mantine-color-blue-light-hover);*!*/
    /*!*--mantine-primary-color-light-color: var(--mantine-color-blue-light-color);*!*/
    /*--mantine-breakpoint-xs: 36em;*/
    /*--mantine-breakpoint-sm: 48em;*/
    /*--mantine-breakpoint-md: 62em;*/
    /*--mantine-breakpoint-lg: 75em;*/
    /*--mantine-breakpoint-xl: 88em;*/
    /*--mantine-spacing-xs: calc(0.625rem* var(--mantine-scale));*/
    /*--mantine-spacing-sm: calc(0.75rem* var(--mantine-scale));*/
    /*--mantine-spacing-md: calc(1rem* var(--mantine-scale));*/
    /*--mantine-spacing-lg: calc(1.25rem* var(--mantine-scale));*/
    /*--mantine-spacing-xl: calc(2rem* var(--mantine-scale));*/
    --mantine-font-size-xs: calc(0.75rem* var(--mantine-scale));
    --mantine-font-size-sm: calc(0.875rem* var(--mantine-scale));
    --mantine-font-size-md: calc(1rem* var(--mantine-scale));
    --mantine-font-size-lg: calc(1.125rem* var(--mantine-scale));
    --mantine-font-size-xl: calc(1.25rem* var(--mantine-scale));
    /*--mantine-line-height-xs: 1.4;*/
    /*--mantine-line-height-sm: 1.45;*/
    /*--mantine-line-height-md: 1.55;*/
    /*--mantine-line-height-lg: 1.6;*/
    /*--mantine-line-height-xl: 1.65;*/
    /*--mantine-shadow-xs: 0 calc(0.0625rem* var(--mantine-scale)) calc(0.1875rem* var(--mantine-scale)) rgba(0, 0, 0, 0.05), 0 calc(0.0625rem* var(--mantine-scale)) calc(0.125rem* var(--mantine-scale)) rgba(0, 0, 0, 0.1);*/
    /*--mantine-shadow-sm: 0 calc(0.0625rem* var(--mantine-scale)) calc(0.1875rem* var(--mantine-scale)) rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 calc(0.625rem* var(--mantine-scale)) calc(0.9375rem* var(--mantine-scale)) calc(-0.3125rem* var(--mantine-scale)), rgba(0, 0, 0, 0.04) 0 calc(0.4375rem* var(--mantine-scale)) calc(0.4375rem* var(--mantine-scale)) calc(-0.3125rem* var(--mantine-scale));*/
    /*--mantine-shadow-md: 0 calc(0.0625rem* var(--mantine-scale)) calc(0.1875rem* var(--mantine-scale)) rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 calc(1.25rem* var(--mantine-scale)) calc(1.5625rem* var(--mantine-scale)) calc(-0.3125rem* var(--mantine-scale)), rgba(0, 0, 0, 0.04) 0 calc(0.625rem* var(--mantine-scale)) calc(0.625rem* var(--mantine-scale)) calc(-0.3125rem* var(--mantine-scale));*/
    /*--mantine-shadow-lg: 0 calc(0.0625rem* var(--mantine-scale)) calc(0.1875rem* var(--mantine-scale)) rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 calc(1.75rem* var(--mantine-scale)) calc(1.4375rem* var(--mantine-scale)) calc(-0.4375rem* var(--mantine-scale)), rgba(0, 0, 0, 0.04) 0 calc(0.75rem* var(--mantine-scale)) calc(0.75rem* var(--mantine-scale)) calc(-0.4375rem* var(--mantine-scale));*/
    /*--mantine-shadow-xl: 0 calc(0.0625rem* var(--mantine-scale)) calc(0.1875rem* var(--mantine-scale)) rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 calc(2.25rem* var(--mantine-scale)) calc(1.75rem* var(--mantine-scale)) calc(-0.4375rem* var(--mantine-scale)), rgba(0, 0, 0, 0.04) 0 calc(1.0625rem* var(--mantine-scale)) calc(1.0625rem* var(--mantine-scale)) calc(-0.4375rem* var(--mantine-scale));*/
    /*--mantine-radius-xs: calc(0.125rem* var(--mantine-scale));*/
    /*--mantine-radius-sm: calc(0.25rem* var(--mantine-scale));*/
    /*--mantine-radius-md: calc(0.5rem* var(--mantine-scale));*/
    /*--mantine-radius-lg: calc(1rem* var(--mantine-scale));*/
    /*--mantine-radius-xl: calc(2rem* var(--mantine-scale));*/
    /*--mantine-color-dark-0: #c9c9c9;*/
    /*--mantine-color-dark-1: #b8b8b8;*/
    /*--mantine-color-dark-2: #828282;*/
    /*--mantine-color-dark-3: #696969;*/
    /*--mantine-color-dark-4: #424242;*/
    /*--mantine-color-dark-5: #3b3b3b;*/
    /*--mantine-color-dark-6: #2e2e2e;*/
    /*--mantine-color-dark-7: #242424;*/
    /*--mantine-color-dark-8: #1f1f1f;*/
    /*--mantine-color-dark-9: #141414;*/
    /*--mantine-color-gray-0: #f8f9fa;*/
    /*--mantine-color-gray-1: #f1f3f5;*/
    /*--mantine-color-gray-2: #e9ecef;*/
    /*--mantine-color-gray-3: #dee2e6;*/
    /*--mantine-color-gray-4: #ced4da;*/
    /*--mantine-color-gray-5: #adb5bd;*/
    /*--mantine-color-gray-6: #868e96;*/
    /*--mantine-color-gray-7: #495057;*/
    /*--mantine-color-gray-8: #343a40;*/
    /*--mantine-color-gray-9: #212529;*/
    /*--mantine-color-red-0: #fff5f5;*/
    /*--mantine-color-red-1: #ffe3e3;*/
    /*--mantine-color-red-2: #ffc9c9;*/
    /*--mantine-color-red-3: #ffa8a8;*/
    /*--mantine-color-red-4: #ff8787;*/
    /*--mantine-color-red-5: #ff6b6b;*/
    /*--mantine-color-red-6: #fa5252;*/
    /*--mantine-color-red-7: #f03e3e;*/
    /*--mantine-color-red-8: #e03131;*/
    /*--mantine-color-red-9: #c92a2a;*/
    /*--mantine-color-pink-0: #fff0f6;*/
    /*--mantine-color-pink-1: #ffdeeb;*/
    /*--mantine-color-pink-2: #fcc2d7;*/
    /*--mantine-color-pink-3: #faa2c1;*/
    /*--mantine-color-pink-4: #f783ac;*/
    /*--mantine-color-pink-5: #f06595;*/
    /*--mantine-color-pink-6: #e64980;*/
    /*--mantine-color-pink-7: #d6336c;*/
    /*--mantine-color-pink-8: #c2255c;*/
    /*--mantine-color-pink-9: #a61e4d;*/
    /*--mantine-color-grape-0: #f8f0fc;*/
    /*--mantine-color-grape-1: #f3d9fa;*/
    /*--mantine-color-grape-2: #eebefa;*/
    /*--mantine-color-grape-3: #e599f7;*/
    /*--mantine-color-grape-4: #da77f2;*/
    /*--mantine-color-grape-5: #cc5de8;*/
    /*--mantine-color-grape-6: #be4bdb;*/
    /*--mantine-color-grape-7: #ae3ec9;*/
    /*--mantine-color-grape-8: #9c36b5;*/
    /*--mantine-color-grape-9: #862e9c;*/
    /*--mantine-color-violet-0: #f3f0ff;*/
    /*--mantine-color-violet-1: #e5dbff;*/
    /*--mantine-color-violet-2: #d0bfff;*/
    /*--mantine-color-violet-3: #b197fc;*/
    /*--mantine-color-violet-4: #9775fa;*/
    /*--mantine-color-violet-5: #845ef7;*/
    /*--mantine-color-violet-6: #7950f2;*/
    /*--mantine-color-violet-7: #7048e8;*/
    /*--mantine-color-violet-8: #6741d9;*/
    /*--mantine-color-violet-9: #5f3dc4;*/
    /*--mantine-color-indigo-0: #edf2ff;*/
    /*--mantine-color-indigo-1: #dbe4ff;*/
    /*--mantine-color-indigo-2: #bac8ff;*/
    /*--mantine-color-indigo-3: #91a7ff;*/
    /*--mantine-color-indigo-4: #748ffc;*/
    /*--mantine-color-indigo-5: #5c7cfa;*/
    /*--mantine-color-indigo-6: #4c6ef5;*/
    /*--mantine-color-indigo-7: #4263eb;*/
    /*--mantine-color-indigo-8: #3b5bdb;*/
    /*--mantine-color-indigo-9: #364fc7;*/
    /*--mantine-color-blue-0: #e7f5ff;*/
    /*--mantine-color-blue-1: #d0ebff;*/
    /*--mantine-color-blue-2: #a5d8ff;*/
    /*--mantine-color-blue-3: #74c0fc;*/
    /*--mantine-color-blue-4: #4dabf7;*/
    /*--mantine-color-blue-5: #339af0;*/
    /*--mantine-color-blue-6: #228be6;*/
    /*--mantine-color-blue-7: #1c7ed6;*/
    /*--mantine-color-blue-8: #1971c2;*/
    /*--mantine-color-blue-9: #1864ab;*/
    /*--mantine-color-cyan-0: #e3fafc;*/
    /*--mantine-color-cyan-1: #c5f6fa;*/
    /*--mantine-color-cyan-2: #99e9f2;*/
    /*--mantine-color-cyan-3: #66d9e8;*/
    /*--mantine-color-cyan-4: #3bc9db;*/
    /*--mantine-color-cyan-5: #22b8cf;*/
    /*--mantine-color-cyan-6: #15aabf;*/
    /*--mantine-color-cyan-7: #1098ad;*/
    /*--mantine-color-cyan-8: #0c8599;*/
    /*--mantine-color-cyan-9: #0b7285;*/
    /*--mantine-color-teal-0: #e6fcf5;*/
    /*--mantine-color-teal-1: #c3fae8;*/
    /*--mantine-color-teal-2: #96f2d7;*/
    /*--mantine-color-teal-3: #63e6be;*/
    /*--mantine-color-teal-4: #38d9a9;*/
    /*--mantine-color-teal-5: #20c997;*/
    /*--mantine-color-teal-6: #12b886;*/
    /*--mantine-color-teal-7: #0ca678;*/
    /*--mantine-color-teal-8: #099268;*/
    /*--mantine-color-teal-9: #087f5b;*/
    /*--mantine-color-green-0: #ebfbee;*/
    /*--mantine-color-green-1: #d3f9d8;*/
    /*--mantine-color-green-2: #b2f2bb;*/
    /*--mantine-color-green-3: #8ce99a;*/
    /*--mantine-color-green-4: #69db7c;*/
    /*--mantine-color-green-5: #51cf66;*/
    /*--mantine-color-green-6: #40c057;*/
    /*--mantine-color-green-7: #37b24d;*/
    /*--mantine-color-green-8: #2f9e44;*/
    /*--mantine-color-green-9: #2b8a3e;*/
    /*--mantine-color-lime-0: #f4fce3;*/
    /*--mantine-color-lime-1: #e9fac8;*/
    /*--mantine-color-lime-2: #d8f5a2;*/
    /*--mantine-color-lime-3: #c0eb75;*/
    /*--mantine-color-lime-4: #a9e34b;*/
    /*--mantine-color-lime-5: #94d82d;*/
    /*--mantine-color-lime-6: #82c91e;*/
    /*--mantine-color-lime-7: #74b816;*/
    /*--mantine-color-lime-8: #66a80f;*/
    /*--mantine-color-lime-9: #5c940d;*/
    /*--mantine-color-yellow-0: #fff9db;*/
    /*--mantine-color-yellow-1: #fff3bf;*/
    /*--mantine-color-yellow-2: #ffec99;*/
    /*--mantine-color-yellow-3: #ffe066;*/
    /*--mantine-color-yellow-4: #ffd43b;*/
    /*--mantine-color-yellow-5: #fcc419;*/
    /*--mantine-color-yellow-6: #fab005;*/
    /*--mantine-color-yellow-7: #f59f00;*/
    /*--mantine-color-yellow-8: #f08c00;*/
    /*--mantine-color-yellow-9: #e67700;*/
    /*--mantine-color-orange-0: #fff4e6;*/
    /*--mantine-color-orange-1: #ffe8cc;*/
    /*--mantine-color-orange-2: #ffd8a8;*/
    /*--mantine-color-orange-3: #ffc078;*/
    /*--mantine-color-orange-4: #ffa94d;*/
    /*--mantine-color-orange-5: #ff922b;*/
    /*--mantine-color-orange-6: #fd7e14;*/
    /*--mantine-color-orange-7: #f76707;*/
    /*--mantine-color-orange-8: #e8590c;*/
    /*--mantine-color-orange-9: #d9480f;*/
    /*--mantine-h1-font-size: calc(2.125rem* var(--mantine-scale));*/
    /*--mantine-h1-line-height: 1.3;*/
    /*--mantine-h1-font-weight: 700;*/
    /*--mantine-h2-font-size: calc(1.625rem* var(--mantine-scale));*/
    /*--mantine-h2-line-height: 1.35;*/
    /*--mantine-h2-font-weight: 700;*/
    /*--mantine-h3-font-size: calc(1.375rem* var(--mantine-scale));*/
    /*--mantine-h3-line-height: 1.4;*/
    /*--mantine-h3-font-weight: 700;*/
    /*--mantine-h4-font-size: calc(1.125rem* var(--mantine-scale));*/
    /*--mantine-h4-line-height: 1.45;*/
    /*--mantine-h4-font-weight: 700;*/
    /*--mantine-h5-font-size: calc(1rem* var(--mantine-scale));*/
    /*--mantine-h5-line-height: 1.5;*/
    /*--mantine-h5-font-weight: 700;*/
    /*--mantine-h6-font-size: calc(0.875rem* var(--mantine-scale));*/
    /*--mantine-h6-line-height: 1.5;*/
    /*--mantine-h6-font-weight: 700;*/
}
:root[data-theme="dark"] {
    /*--bg_layer0: rgba(14, 16, 18, 1);*/
    /*--bg_layer1: rgba(18, 19, 22, 1);*/
    /*--bg_layer2: rgba(20, 23, 26, 1);*/
    /*--bg_layer3: rgba(24, 26, 30, 1);  !* The typical background for a section / accordion *!*/
    /*--bg_layer4: rgba(26, 31, 34, 1);*/
    /*--bg_layer5: rgba(30, 34, 38, 1);*/
    /*--bg_layer6: rgba(34, 37, 42, 1);  !*--bg_layer0: rgba(14, 16, 18, 1);*!*/

    --bg_layer0: rgba(7, 8, 9, 1);
    --bg_layer1: rgba(14, 16, 18, 1);
    --bg_layer2: rgba(21, 24, 27, 1);
    --bg_layer3: rgba(29, 32, 36, 1);
    --bg_layer4: rgba(36, 40, 44, 1);
    --bg_layer5: rgba(43, 48, 53, 1);
    --bg_layer6: rgba(50, 56, 62, 1);

    /* Highlight for each Background - slightly lighter than each one */
    --bg_layer0_highlight: var(--bg_layer2);
    --bg_layer1_highlight: var(--bg_layer2);
    --bg_layer2_highlight: var(--bg_layer3);
    --bg_layer3_highlight: var(--bg_layer4);
    --bg_layer4_highlight: var(--bg_layer5);
    --bg_layer5_highlight: var(--bg_layer6);
    --bg_layer6_highlight: rgba(57, 63, 69, 1);

    --bg_layer0_opposite: rgba(220, 220, 220, 1);
    --bg_layer1_opposite: rgba(230, 230, 230, 1);
    --bg_layer2_opposite: rgba(235, 235, 235, 1);
    --bg_layer3_opposite: rgba(240, 240, 240, 1);
    --bg_layer4_opposite: rgba(245, 245, 245, 1);
    --bg_layer5_opposite: rgba(248, 248, 248, 1);
    --bg_layer6_opposite: rgba(251, 251, 251, 1);

    --bg_layer_spinner: rgba(43, 48, 53, .5);

    /* Layer RGB Codes To allow for transparency modes */
    --rgb_layer0: 7 8 9;
    --rgb_layer1: 14 16 18;
    --rgb_layer2: 21 24 27;
    --rgb_layer3: 29 32 36;
    --rgb_layer4: 36 40 44;
    --rgb_layer5: 43 48 53;
    --rgb_layer6: 50 56 62;



    /* Create gray 1 variable transparent only 10% */
    --border-1: rgba(var(--rgb-bs-gray-8) / 0.15);
    --border-2: rgba(var(--rgb-bs-gray-8) / 0.2);
    --border-3: rgba(var(--rgb-bs-gray-8) / 0.3);
    --border_color_inputs: var(--border-2);
    --border_color: var(--border-2);

    /*Text Font colors */
    --text_001: rgba(225, 225, 225, 1);
    --text_002: rgba(210, 210, 210, 1);

    /* REVISED COLORS USING NEW Layers */
    --bg_inputs: var(--bg_layer4);
    --navColor: var(--bg_layer0);
    --bgColor: var(--bg_layer1);
    --pgColor: var(--bg_layer1);
    --bgCardsHome: var(--bg_layer3);
    --sb_active_color: var(--bg_layer5);
    --sb_active_color_shade: rgb(35, 37, 40);
    --bgCarosel: var(--bg_layer3);
    --bg_cards: var(--bg_layer4);
    --bg_cards_highlight: var(--bg_layer4_highlight);
    --textDefault: var(--text_001);
    /*--textDefault: #9e9fa1;*/
    /*--textDefault: #bbbbbd;*/

    /*Text Font Formatting */
    /*--DisabledText: rgb(50, 56, 62);*/
    /*--DisabledInputs: rgb(30, 34, 37);*/
    --DisabledText: rgb(72, 73, 75);
    --DisabledInputs: var(--sb_active_color_shade);
    /*--DisabledInputs: var(--bg_layer1_highlight);*/

    /*!* REVISED COLORS USING NEW Layers *!*/
    /*--bg_inputs: var(--bg_layer4);*/
    /*--navColor: var(--bg_layer0);*/
    /*--pgColor: var(--bg_layer1);*/
    /*--bgColor: var(--bg_layer3);*/
    /*--bgCardsHome: var(--bg_layer3);*/
    /*--sb_active_color: var(--bg_layer3);*/

    /* STYLES */
    --FixedBlueTransparent: rgb(79 113 159 / 64%);
    --pgColorOpposite: #eaeeef;
    --pgColorOppositeLight: #9e9fa1;
    --pgColorOppositeTransparent: rgba(234, 238, 239, 0.48);
    --pgColorOppositeTransparent2: rgba(234, 238, 239, 0.25);
    /*--bgCardsHome: #000000;*/
    --bgCardsHomeLighter: rgb(18, 18, 19);
    /*--pgColor: #272b30;*/
    /*--bgCarosel: #15161a;*/
    /*--bgColor: #32383e;*/
    --bgColorMenu: #3c3f41;
    /*--navColor: #000000;*/
    --bgdrawerColor: #000000;
    --bgdrawerColorOpacity: rgba(0, 0, 0, 0.41);

    --navbar-submenu-row-bg: #000000;
    /*--navbar-submenu-row-bg: rgb(61, 70, 83);*/
    --navbar-submenu-row-text: #bcbec0;

    --ChartButtonBg: rgb(26, 27, 30);
    /*--ChartButtonBg: rgb(0, 0, 0, 0.6); !* set the default background color to be a little lighter than hover color *!*/
    --ChartButtonBg_hover: rgb(0, 0, 0, 1);
    --ChartButtonText: rgb(153, 194, 62);


    --box_shadowing: #000000;

    /* WARNING COLORS */
    --warning_red_button: rgb(222, 104, 104);
    /*--warning_red: rgb(255 154 154);*/
    /*--warning_text: rgb(0, 0, 0);*/
    /*--warning_red_light: rgb(255, 245, 245);*/

    /* Text Dark backgrounds */
    --text_dark_bg: #eaeeef;

    /*NAV BAR GRADIENT -------------------------------------*/
    --navbar_gradient1: #000000;
    --navbar_gradient2: #000000;
    --navbar_text: #999ea2;

    --HomeIconBg: #272b30;

    --plotly-zero-line: rgb(142, 142, 145);
    --plotly-axis-line: rgb(142, 142, 145);
    --plotly-grid-line: rgba(142, 142, 145, 0.35);

    /*--bgCaroselIconColor: #fff;*/
    /*--bgColor: rgb(26, 27, 30);*/
    --primary: #000000;
    --primary-opposite: #232b36;
    --secondary: #ffafd0;
    --terciary: #86e1b3;
    /* GRX CUSTOM ROOTS*/
    --card_text: #eaeeef;
    --light_text: #ababad;
    --placeholderText: #737377;
    --card_background: rgb(26, 27, 30);
    /*--card_background: #6E6E6E;*/
    --light_0: rgb(26, 27, 30);
    --light_1: #e4e5e6;
    --light_2: #e4e5e6;
    /*--sb_active_color: rgb(26, 27, 30);*/
    --sb_active_color_darker: rgb(26, 27, 30);
    --sb_inactive_color: #ffffff;
    --radio_button_background: #ffffff;
    --mantine_gray: rgb(134, 142, 150);
    /*--border_color: rgb(70, 73, 75);*/
    /*--border_color_inputs: #404041;*/
    /*--icon_blue: rgb(126, 146, 172);*/
    /*--IconBlueShades: rgb(147 185 233);*/
    --grx_green: rgb(153, 194, 62);
    --grx_green_light: rgb(216, 244, 197);
    --grx-icon-green: #779830;
    --grx-green-background: rgb(133, 145, 116);
    --grx-green-background-text:  #252525;

    --hover_highlight: rgb(77, 79, 80);
    --navbar_highlight: #252525;
    --chart_legend: rgb(41, 41, 42);
    --chart_legend_border: rgba(41, 41, 42, 0.75);
    --chart_text: rgb(155, 155, 155);
    /*--dimmedBorder: #676f7830;*/
    --HoverInputs: rgb(105, 117, 129);
    --HoverInputsText: rgb(202, 207, 213);
    --slider_rail_color: #000000;

    --dtBorders: rgb(68, 68, 68);
    --dtTextColor: #f3f3f3;

    /*--dtfilterbg: #2b2b2b;*/

    --dtborderTotals: rgb(233, 233, 233);
    --dtColorTotals: #000000;
    --dtColorSubTotals: #00000085;
    --dtfilterbg: rgb(50 56 62);

    /*--BgSecondaryNavbar: #3e4754;*/
    /*--BgSecondaryNavbar: #272b30;*/
    --BgSecondaryNavbar: var(--navbar_gradient1);

    /*PLOTLY COLORS*/
    --plot_bgcolor: transparent;
    --paper_bgcolor: transparent;
    --darkgray: #9e9fa1;
    --green_highlight_transparent: rgba(153, 194, 62, 0.52);
    --blue_highlight_transparent: rgb(196 213 237 / 20%);
    --IconBlueShades: rgb(111, 140, 180);


    /*--blue0: #7DABEF;*/
    /*--blue1: #76A5ED;*/
    /*--blue2: #6FA0EA;*/
    /*--blue3: #679AE7;*/
    /*--blue4: #6095E5;*/
    /*--blue5: #598fe2;  !*# the alert blue *!*/
    /*--blue6: #5487D5;*/
    /*--blue7: #4E7EC8;*/
    /*--blue8: #4976BB;*/
    /*--blue9: #446DAE;*/
    /*--blue10: #3E65A1;*/
    /*--blue11: #395D94;*/
    /*--blue12: #345587;*/
    /*--blue13: #2F4D7A;*/

    /*--blue_alert: rgb(103, 132, 252);*/
    /*--blue_alert-opaque: rgba(103, 132, 252, 0.69);*/
    --blue_highlight: rgb(66, 99, 235);
    --blue_alert_bg: rgb(66, 99, 235);
    --blue_alert_main: rgb(237, 242, 255);
    --blue_alert_body: rgb(237, 242, 255);
    --blue_alert_bg_dark: rgb(47 66 149);
    --blue_alert_bg_dark_text: rgb(237, 242, 255);
    --blue_alert_text: rgb(89 103 164);
    /*--progress-bar-color: rgb(47 66 149);*/
    --progress-bar-color: #737377;
    --bg_listgroup_dividers: #272b30;

    --rgb-navbar-1: 0 0 0;
    --rgb-navbar-2: 39 43 48;

    --rgb-pgColorOpposite: 234 238 239;
    --rgb-shadow: 0 0 0;
    --rgb-values-green: 153 194 62;
    --rgb-values-alert-blue: 66 99 235;
    --rgb-icon-blue: 79 113 159;
    --rgb-icon-blue-dark: 47 66 149;
    --rgb-white: 255 255 255;
    --rgb-bgColor: 50 56 62;
    --rgb-background: 26 27 30;
    --rgb-dark-grey: 92 92 93;
    --grx-green-almost-opaque: #4f5e3e;
    --rgb-sidebar: 26 27 30;
    --rgb-text-default: 158 159 161;

    /*--blue-tesdt: rgb(164, 194, 255);*/
    /*--rgb-standard-blue: 164 194 255;*/
    --rgb-standard-blue: 89 143 226;
    --rgb-blue-1: 100 150 255;
    --rgb-blue-2: var(--rgb-standard-blue);  /* same as standard blue */
    --rgb-blue-3: 68 110 175;
    --rgb-blue-4: 38 61 97;

    --blue-shade-1: rgb(65, 98, 233);
    --blue-shade-2: rgb(60, 87, 204);
    --blue-shade-3: rgb(53, 75, 176);
    --blue-shade-4: rgb(47, 64, 147);

    /* RGB Formats */
    --icon_blue: rgb(var(--rgb-standard-blue));
    /*--blue_alert: #B2BEF5;*/
    --blue_alert: rgb(var(--rgb-standard-blue));
    --blue_alert-opaque: rgba(var(--rgb-standard-blue) / 0.1);

    /*NProgress  */
    --nprogress-color: var(--grx_green) !important;
    --nprogress-color-good: var(--grx_green) !important;
    --nprogress-color-bad: var(--warning_red);

    /*!* ---------------------------------------------------- *!*/
    /*!* TESTING SETTING THE MANTINE ROOT VARS *!*/
    /*!* ---------------------------------------------------- *!*/
    --separator-color: var(--border_color_inputs) !important;
    --mantine-color-gray-3: var(--border_color_inputs) !important;
    --mantine-color-white: var(--FixedLight) !important;
    --table-hover-color: var(--blue_alert) !important;
    --table-striped-color: var(--bg_layer4) !important;
    --table-border-color: var(--border_color_inputs) !important;
    --table-highlight-on-hover-color: var(--blue_alert) !important;
    --tr-hover-bg: var(--blue_alert) !important;

    /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
    /* Sidebar Formatting */
    /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
    --page_colorBackground: var(--bg_layer3);
    --carosel_colorBackground: var(--bg_layer5);
    --sidebar_colorBackground: var(--bg_layer5);
    --sidebar_colorText: var(--blue_alert);
    /*--sidebar_colorBackground_Highlight: rgba(var(--rgb-blue-1) / .8);*/
    --sidebar_colorBackground_Highlight: rgba(var(--rgb-standard-blue) / .8);
    --sidebar_colorText_Highlight: var(--FixedLight);
}

/*!* NOTE 148 150 153 html is set to 62.5% so that all the REM measurements throughout Skeleton are based on 10px sizing. So basically 1.5rem = 15px :) *!*/
html {
    font-size: 75%;
    /*font-size: 62.5%;*/
    /*color: var(--light_text);*/
}
body {
    z-index: -1 !important;
    font-size: var(--mantine-font-size-sm); /* currently ems cause chrome bug misinterpreting rems on body element */
    line-height: 1.55;
    font-weight: 400;
    font-family: var(--bs-body-font-family);
    background-color: var(--bg_layer1);
    color: var(--textDefault);
    position: relative !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}
p {
    font-family: var(--bs-body-font-family);
    color: var(--textDefault);
    font-size: var(--mantine-font-size-sm);
    line-height: 1.55;
    margin-bottom: 0;
    margin-top: 0;
/*    margin-bottom: 0;*/
/*    margin-top: 0;*/
/*    !*font-size: 75%;*!*/
/*    display: inline-flex;*/
/*    vertical-align: middle;*/
/*    text-align: left;*/
/*    align-content: center;*/
/*    !*letter-spacing: 0.1rem;*!*/
}
button {
    box-shadow: none;
    border: none;
    letter-spacing: 0;
    padding: 3px 10px;
    margin: 0;
    line-height: 1.55;
    font-size: var(--mantine-font-size-sm);
}

/* Typography ==================================================================== */
.is-visible {
    display: block;
}
.is-hidden {
    display: None;
}
.page-content {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
}
.page-content.single-navbar {
    top: calc(35px + 20px)
}

/*noinspection CssUnusedSymbol*/
.page-content.dual-navbar {
    top: calc(35px + 20px + 35px)
}

/* Format Titles: formats all classes that contain the word "title" ======================================== */
.infolayer [class*="title"] {
    font-family: sans-serif !important;
    font-size: 12px !important;
    fill: var(--text_001) !important;
    fill-opacity: 1 !important;
    white-space: pre !important;
    text-decoration: underline !important;
    font-weight: 500 !important;
    opacity: 1 !important;
}

/* [NON-HEATMAP] LEGEND: Title And Text  ======================================================= */
/*noinspection CssUnusedSymbol*/
.infolayer .legend .scrollbox .legendtitletext {
    font-family: sans-serif !important;
    font-size: 11px !important;
    fill: var(--text_002) !important;
    fill-opacity: 1 !important;
    white-space: pre !important;
    text-decoration: underline !important;
    font-weight: 500 !important;
    opacity: 1 !important;
}

.infolayer .legend .scrollbox .groups [class*="legendtext"] {
    font-family: sans-serif !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    fill: var(--text_002) !important;
    margin-left: 0 !important;
    fill-opacity: 1 !important;
    white-space: pre !important;
    opacity: 1 !important;
}

/* [NON-HEATMAP] Format: [ZERO LINES]  ======================================================= */
/*noinspection CssUnusedSymbol*/
.yzl.zl.crisp, .xzl.zl.crisp {
    font-size: 11px !important;
    fill: none !important;
    stroke-width: 1px !important;
    stroke-opacity: 1 !important;
    /*stroke: var(--plotly-zero-line) !important;*/
    stroke: var(--plotly-axis-line) !important;
    /*stroke-dasharray: 4px 4px !important;*/
}

/* [NON-HEATMAP] Format: [GRIDLINES]  ======================================================= */
.gridlayer [class*="grid crisp"] {
    fill: none !important;
    stroke-width: 1px !important;
    stroke-opacity: 1 !important;
    stroke: var(--plotly-grid-line) !important;
    stroke-dasharray: 4px 4px !important;
}

/* [ALL CHARTS] Format: Y & X Axis Tick Labels ==================================================================== */
.yaxislayer-above [class*="tick"] > text {
    font-family: sans-serif !important;
    font-size: 11px !important;
    fill: var(--text_002) !important;
    fill-opacity: 1 !important;
    opacity: 1 !important;
    white-space: pre !important;
}
.xaxislayer-above [class*="tick"] > text {
    font-family: sans-serif !important;
    /*font-size: 11px !important;*/
    /*max-font-size: 11px !important;*/
    fill: var(--text_002) !important;
    fill-opacity: 1 !important;
    opacity: 1 !important;
    white-space: pre !important;
}

/* [Heatmap] Format: Y & X TICK LINES (NOT DIVIDERS)  ======================================================= */
.yaxislayer-above [class*="tick"]:not([class*="divider"]) :not(text) {
    fill: none !important;
    stroke-width: 1px !important;
    stroke-opacity: 1 !important;
    stroke: var(--plotly-axis-line) !important;
}

.xaxislayer-above [class*="tick"]:not([class*="divider"]) :not(text) :not(tspan) {
    fill: none !important;
    stroke-width: 1px !important;
    stroke-opacity: 1 !important;
    stroke: var(--plotly-axis-line) !important;
}

/* [Non-Heatmap] Format - Zero Lines ===============================================================*/
.js-plotly-plot .plotly [class*="lines-above crisp"] {
    fill: none !important;
    stroke-width: 1px !important;
    stroke-opacity: 1 !important;
    stroke: var(--plotly-axis-line) !important;
}

/* [Non-Heatmap] Format - X & Y AXis Line ===============================================================*/
.yaxislayer-above [class*="tick ticks crisp"], .xaxislayer-above [class*="tick ticks crisp"]  {
    fill: none !important;
    stroke-width: 1px !important;
    stroke-opacity: 1 !important;
    stroke: var(--plotly-axis-line) !important;
}

/* Format Y & X DIVIDERS (NOT TICK LINES)  ============================================================= */
.yaxislayer-above [class*="divider"]:not([class*="tick"]) :not(text) {
    fill: none !important;
    stroke-width: 1px !important;
    stroke-opacity: 1 !important;
    stroke: var(--plotly-axis-line) !important;
}
.xaxislayer-above [class*="divider"]:not([class*="tick"]) :not(text) {
    fill: none !important;
    stroke-width: 1px !important;
    stroke-opacity: 1 !important;
    stroke: var(--plotly-axis-line) !important;
}

/* Format Y & X DIVIDERS LINE AND BAR CHART (NOT TICK LINES) ================================================= */
/* Formats any class that starts with 'x' and ends with divider crisp */
[class^="x"][class$="divider crisp"],
[class^="y"][class$="divider crisp"] {
    fill: none !important;
    stroke-width: 1px !important;
    stroke-opacity: 0.5 !important;
    stroke: var(--plotly-axis-line) !important;
}

/*!* Format plotly grid lines ==================================================================== *!*/

/*noinspection CssUnusedSymbol*/
.legend .bg {
    fill: var(--chart_legend) !important;
    /*stroke: var(--plotly-zero-line) !important;*/
    stroke: var(--border_color) !important;
    fill-opacity: 1 !important;
    stroke-width: 1px !important;
    stroke-opacity: 0.75 !important;
}

/*noinspection CssUnusedSymbol*/
.mantine-ScrollArea-scrollbar[data-orientation="horizontal"] {
    background-color: transparent !important;
}

/*noinspection CssUnusedSymbol*/
.mantine-ScrollArea-scrollbar[data-orientation="vertical"] {
    background-color: transparent !important;
}

/*noinspection CssUnusedSymbol*/
.mantine-ScrollArea-corner {
    background-color: transparent !important;
}
/*.mantine-ScrollArea-viewport {*/
/*  !*padding-bottom: 0;*!*/
/*  padding: 5px;*/
/*}*/
/*noinspection CssUnusedSymbol*/
.mantine-ScrollArea-viewport {
    /* padding-bottom: 0; */
    padding: 0 5px 0 0;
    /*padding: 5px 10px 5px 5px;*/
}

/*noinspection CssUnusedSymbol*/
.mantine-ScrollArea-thumb {
    background-color: var(--border_color) !important;
}

/*--------------------------------------------------------------------------------------------*/
/* the main graph content box that sites under modebar*/
/*--------------------------------------------------------------------------------------------*/
/*noinspection CssUnusedSymbol*/
.js-plotly-plot .plotly .main-svg {
    background-color: transparent !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    pointer-events: none !important;    /*position: absolute !important;*/
}
/* .main-svg  */
.bglayer .bg {
    fill: transparent !important;
}

/*--------------------------------------------------------------------------------------------*/
/* PLOTLY MODE BAR POSITION --- move it above the chart so it does not overlap titles */
/*--------------------------------------------------------------------------------------------*/
.js-plotly-plot .plotly .modebar {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 20px !important;
}

.js-plotly-plot .plotly .modebar-group {
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
}

/*noinspection CssUnusedSymbol*/
.js-plotly-plot .plotly .modebar-btn {
    font-size: 10px !important;
    padding: 0 3px !important;
    height: 100% !important;
    cursor: pointer !important;
    line-height: normal !important;
    box-sizing: border-box !important;
}


/*!* Action Icon Various Formats */
.ag-grid-action-icon {
    width: 18px;
    max-width: 18px;
    min-width: 18px;
    height: 18px;
    max-height: 18px;
    min-height: 18px;
    color: var(--textDefault);
    background-color: transparent;
    padding: 2px;
    border: none;
}
.ag-grid-action-icon:hover {
    color: var(--icon_blue);
    background-color: transparent;
    transform: scale(1.1);
}

/*!* Input Toggle Button Icons (switch/rotate) ––––––––––––––––––––––––––––––––––––––––––––––––––*/
.switch-btn-styling {
    font-size: 10px !important;
    color: var(--pgColorOppositeLight) !important;
    background-color: transparent !important;
    border: none;
    border-radius: 0;
    padding: 0;
}
.switch-btn-styling:hover {
    color: var(--icon_blue) !important;
    font-size: 10px !important;
}

.grx-tooltip .mantine-Tooltip-tooltip,
.mantine-Tooltip-tooltip {
    font-size: 11px !important;
    padding: 2px 10px !important;
    color: var(--text_001) !important;
    width: auto !important;
    min-width: auto !important;
    max-width: 250px !important;
    box-shadow: var(--grx-box-shadow) !important;
    background-color: var(--bg_layer6) !important;
}




/* DARK THEME TOGGLE ––––––––––––––––––––––––––––––––––––––––––––––––––*/
/*.themeToggle {*/
/*  height: 100%;*/
/*  display: inline-flex;*/
/*  align-items: center;*/
/*  justify-content: center;*/
/*}*/
/*.themeToggle label {*/
/*  background: rgb(61, 70, 83);*/
/*  color: var(--grx_green);*/
/*  cursor: pointer;*/
/*  font-size: 65%;*/
/*  width: 3rem !important;*/
/*  height: 1.5rem !important;*/
/*  margin: 7px 0 0 0 !important;*/
/*  display: inline-flex !important;*/
/*  justify-content: center;*/
/*  -webkit-border-radius: 100px;*/
/*  -moz-border-radius: 100px;*/
/*  border-radius: 100px;*/
/*  position: relative;*/
/*  flex-wrap: wrap;*/
/*  align-items: center;*/
/*}*/
/*html[data-theme="dark"] .themeToggle label {*/
/*  background: rgb(61, 70, 83);*/
/*  color: var(--grx_green);*/
/*  padding-top: 1px;*/
/*}*/
/*.themeToggle label:after {*/
/*  font-size: 100% !important;*/
/*  padding-top: 1px;*/
/*  top: inherit !important;*/
/*}*/
/*.themeToggle label:hover:after {*/
/*  font-size: 100% !important;*/
/*  top: inherit !important;*/
/*}*/
/*html[data-theme="dark"] .themeToggle label:hover:after {*/
/*  font-size: 100% !important;*/
/*  top: inherit !important;*/
/*}*/

/* Typography –––––––––––––––––––––––––––––––––––––––––––––––––– */
/*h1 { font-size: 4.5rem; line-height: 1.2;  letter-spacing: -.1rem; margin-bottom: 2rem; }*/
/*h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; margin-bottom: 1.8rem; margin-top: 1.8rem;}*/
/*h3 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem; margin-bottom: 1.5rem; margin-top: 1.5rem;}*/
/*h4 { font-size: 2.6rem; line-height: 1.35; letter-spacing: -.08rem; margin-bottom: 1.2rem; margin-top: 1.2rem;}*/
/*h5 { font-size: 2.2rem; line-height: 1.5;  letter-spacing: -.05rem; margin-bottom: 0.6rem; margin-top: 0.6rem;}*/
/*h6 { font-size: 2.0rem; line-height: 1.6;  letter-spacing: 0; margin-bottom: 0.75rem; margin-top: 0.75rem;}*/

/* Blockquotes –––––––––––––––––––––––––––––––––––––––––––––––––– */
/*blockquote {*/
/*    border-left: 4px lightgrey solid;*/
/*    padding-left: 1rem;*/
/*    margin-top: 2rem;*/
/*    margin-bottom: 2rem;*/
/*    margin-left: 0;*/
/*}*/

/*a {*/
/*    color: #1eaedb;*/
/*    text-decoration: underline;*/
/*    cursor: pointer;*/
/*}*/
/*a:hover {*/
/*    color: #0fa0ce;*/
/*}*/

/*!* Buttons –––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/*.button,*/
/*button,*/
/*input[type="submit"],*/
/*input[type="reset"],*/
/*input[type="button"] {*/
/*    display: block;*/
/*    width: 100%;*/
/*    padding: 2px;*/
/*    text-align: center;*/
/*    font-size: 11px;*/
/*    font-weight: 300;*/
/*    letter-spacing: 0;*/
/*    !*letter-spacing: 0.1rem;*!*/
/*    text-transform: capitalize;*/
/*    text-decoration: none;*/
/*    white-space: nowrap;*/
/*    background-color: #33c3f0;*/
/*    color: white;*/
/*    border-radius: 0;*/
/*    border: none;*/
/*    cursor: pointer;*/
/*    box-sizing: border-box;*/
/*}*/
/*.button:hover,*/
/*button:hover,*/
/*input[type="submit"]:hover,*/
/*input[type="reset"]:hover,*/
/*input[type="button"]:hover,*/
/*.button:focus,*/
/*button:focus,*/
/*input[type="submit"]:focus,*/
/*input[type="reset"]:focus,*/
/*input[type="button"]:focus {*/
/*    color: #333;*/
/*    !*background-color: rgba(51, 195, 240, 0.76);*!*/
/*    background-color: transparent;*/
/*    border: none;*/
/*}*/
/*.button.button-primary,*/
/*button.button-primary,*/
/*input[type="submit"].button-primary,*/
/*input[type="reset"].button-primary,*/
/*input[type="button"].button-primary {*/
/*    color: #fff;*/
/*    background-color: #33c3f0;*/
/*    border: none;*/
/*}*/
/*.button.button-primary:hover,*/
/*button.button-primary:hover,*/
/*input[type="submit"].button-primary:hover,*/
/*input[type="reset"].button-primary:hover,*/
/*input[type="button"].button-primary:hover,*/
/*.button.button-primary:focus,*/
/*button.button-primary:focus,*/
/*input[type="submit"].button-primary:focus,*/
/*input[type="reset"].button-primary:focus,*/
/*input[type="button"].button-primary:focus {*/
/*    color: #fff;*/
/*    background-color: rgba(30, 174, 219, 0.78);*/
/*    border: none;*/
/*}*/

/*!* Forms –––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/*input[type="email"],*/
/*input[type="number"],*/
/*input[type="search"],*/
/*input[type="text"],*/
/*input[type="tel"],*/
/*input[type="url"],*/
/*input[type="password"],*/
/*textarea,*/
/*select {*/
/*    margin: 0 1px;*/
/*    !*font-size: 70%;*!*/
/*    font-size: 11px;*/
/*    padding: 3px 5px; !* The 6px vertically centers text on FF, ignored by Webkit *!*/
/*    color: var(--pgColorOpposite) !important;*/
/*    !*color: var(--light_text) !important;*!*/
/*    background-color: var(--bg_inputs) !important;*/
/*    border: 1px solid var(--border_color_inputs);*/
/*    !*border: 1px solid #ccc;*!*/
/*    border-radius: 3px !important;;*/
/*    height: 26px;*/
/*    box-shadow: none;*/
/*    box-sizing: border-box;*/
/*    font-family: inherit;*/
/*}*/
/*!* Removes awkward default styles on some inputs for iOS *!*/
/*input[type="email"],*/
/*input[type="number"],*/
/*input[type="search"],*/
/*input[type="text"],*/
/*input[type="tel"],*/
/*input[type="url"],*/
/*input[type="password"],*/
/*textarea {*/
/*    -webkit-appearance: none;*/
/*    -moz-appearance: none;*/
/*    appearance: none;*/
/*}*/
/*textarea {*/
/*    min-height: 65px;*/
/*    padding-top: 6px;*/
/*    padding-bottom: 6px;*/
/*}*/
/*input[type="email"]:focus,*/
/*input[type="number"]:focus,*/
/*input[type="search"]:focus,*/
/*input[type="text"]:focus,*/
/*input[type="tel"]:focus,*/
/*input[type="url"]:focus,*/
/*input[type="password"]:focus,*/
/*textarea:focus,*/
/*select:focus {*/
/*    !*border: 1px solid #ccc;*!*/
/*}*/
/*label, legend {*/
/*    display: block;*/
/*    margin-bottom: 0;*/
/*}*/
/*fieldset {*/
/*    padding: 0;*/
/*    border-width: 0;*/
/*}*/
/*input[type="checkbox"],*/
/*input[type="radio"] {*/
/*    !*display: inline;*!*/
/*}*/
/*label > .label-body {*/
/*    display: inline-block;*/
/*    margin-left: 0.5rem;*/
/*    font-weight: normal;*/
/*}*/
/*input:invalid {*/
/*    !*outline: var(--warning_red);*!*/
/*    outline-width: 1px;*/
/*}*/
/*!* Lists –––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/*ul {*/
/*    list-style: circle inside;*/
/*}*/
/*ol {*/
/*    list-style: decimal inside;*/
/*}*/
/*ol, ul {*/
/*    padding-left: 0;*/
/*    margin-top: 0;*/
/*}*/
/*ul ul, ul ol, ol ol, ol ul {*/
/*    margin: 1.5rem 0 1.5rem 3rem;*/
/*    font-size: 90%;*/
/*}*/
/*li {*/
/*    margin-bottom: 1rem;*/
/*}*/

/*!* Tables –––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/*table {*/
/*    font-family: Arial, sans-serif;*/
/*    border-collapse: collapse;*/
/*}*/

/*!* Spacing –––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/*button,*/
/*.button {*/
/*    margin-bottom: 0;*/
/*}*/
/*input,*/
/*textarea,*/
/*select,*/
/*fieldset {*/
/*    margin-bottom: 0;*/
/*}*/
/*pre,*/
/*dl,*/
/*figure,*/
/*table,*/
/*form {*/
/*    margin-bottom: 0;*/
/*}*/
/*p,*/
/*ul,*/
/*ol {*/
/*    margin-bottom: 0.75rem;*/
/*}*/

/*!* Utilities –––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/*.u-full-width {*/
/*    width: 100%;*/
/*    box-sizing: border-box;*/
/*}*/
/*.u-max-full-width {*/
/*    max-width: 100%;*/
/*    box-sizing: border-box;*/
/*}*/
/*.u-pull-right {*/
/*    float: right;*/
/*}*/
/*.u-pull-left {*/
/*    float: left;*/
/*}*/

/*!* Misc –––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/*hr {*/
/*    margin-top: 0.1rem;*/
/*    margin-bottom: 0.1rem;*/
/*    !*border-width: 0;*!*/
/*    !*border-top: 1px solid #232B36;*!*/
/*}*/

/*!* Clearing –––––––––––––––––––––––––––––––––––––––––––––––––– *!*/

/*!* Self Clearing Goodness *!*/
/*!*noinspection CssUnusedSymbol*!*/
/*.container:after,*/
/*.row:after,*/
/*.u-cf {*/
/*    content: "";*/
/*    display: table;*/
/*    clear: both;*/
/*}*/

/* Media Queries –––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/

/* USE THIS TO SET BREAKPOINTS FOR THE ENTIRE APP */
/* Larger than mobile ––––––––––––––––––––––––––––––––––––––––––––––––––*/
@media (min-width: 400px) {
}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {
}

/* Larger than tablet ––––––––––––––––––––––––––––––––––––––––––––––––––*/
@media (min-width: 750px) {
}

/* Larger than desktop ––––––––––––––––––––––––––––––––––––––––––––––––––*/
@media (min-width: 1200px) {
}

/* Larger than Desktop HD ––––––––––––––––––––––––––––––––––––––––––––––––––*/
@media (min-width: 1600px) {
}



/* ----- Standard Card Header Row */
.std-card-title-div {
    margin-top: 0.5rem;
    padding-left: 1rem;
    margin-bottom: 5px;
    padding-right: 1rem;
    overflow: hidden;
    /*width: 100%;*/
    /*width: 72vw;*/
    /*min-height: 7vh;*/
    max-height: 9vh;
}

/* ––––– Openai Formating ––––– */
.openai-div {
    /*width: 100%;*/
    display: flex;
    align-items: center;
    overflow: hidden;
    background-color: var(--sb_active_color);
    margin: 0 1rem 1rem 1rem;
    border-radius: 4px;
    /*padding-left: 1rem;*/
}
.openai-button {
    margin: 5px !important;
    font-size: 16px;
    text-align: left;
    text-decoration: none;
    box-sizing: border-box;
    border: 1px solid transparent;
    background-color: transparent;
    color: var(--grx_green) !important;
    position: relative;
    height: 100% !important;
    min-height: 25px !important;
    width: 25px !important;
    min-width: 25px !important;
    border-radius: 4px;
    padding: 0;
    line-height: unset;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
}
.openai-button:hover {
    color: var(--grx_green);
    background-color: var(--grx_green_light) !important;
}
.openai-text {
    margin: 5px 0 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    color: rgb(134, 142, 150);
    font-size: 11px;
    text-decoration: none;
    text-transform: unset;
    text-align: left;
}

/*=========================================================================== *!*/
/* NEW FORMATS -============================================================= */
/*=========================================================================== *!*/


/*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/* MANTINE MODAL dmc.Modal() */
/*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
.mantine-Modal-content {
    border-radius: var(--grx-border-radius-extra);
    background-color: var(--bg_layer1);
    /*background-color: var(--bg_layer5);*/
    color: var(--pgColorOpposite);
    width: 600px;
    max-width: 600px;
    padding: 1rem;
    /*max-width: 90%;*/
}
.mantine-Modal-inner {}
.mantine-Modal-header {
    min-height: unset;
    background-color: transparent !important;
    padding: 5px 5px 10px 5px;
    margin: 0;
    border-bottom: 1px solid var(--border_color_inputs);
}
.mantine-Modal-title {
    font-size: 15px !important;
    font-weight: 500 !important;
    color: var(--blue_alert) !important;
    background-color: transparent !important;
}
.mantine-Modal-body {
    padding: 5px;
    overflow-x: hidden;
    overflow-y: auto;
}

/* DATA SOURCE SPECFIC MODAL ADJUSTMENTS */
.datasource-modal .mantine-Modal-content {
    width: 100% !important;
    max-width: 100% !important;
}

/* --- specific adjustments for pdf modules */
.grx-sidebar-mantine-modal.pdf .mantine-Modal-content {
    height: 100%;
    width: 1000px;
    max-width: 1000px;
}
.grx-sidebar-mantine-modal.pdf .mantine-Modal-body {
    overflow: hidden;
    height: 83vh;
    max-height: 1000px;
}

/* ----------------------------------------------------------------------- */
/* CUSTOM - Theme Action Icon Toggle */
/* ----------------------------------------------------------------------- */
.grx-theme-action-icon,
.grx-theme-action-icon:active,
.grx-theme-action-icon:focus {
    color: var(--grx_green);
    height: 25px;
    width: 25px;
    min-height: 25px;
    min-width: 25px;
    border-radius: 50% !important;
    padding: 0 !important;
    font-size: 18px !important;
    background-color: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.3s;
}
.grx-theme-action-icon:hover {
    color: var(--grx_green);
    background-color: transparent;
    transition: all 0.3s;
    scale: 1.15;
}

/*!*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*!*/
/*!*!* Hover Card *!*/
/*!*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*!*/
/*.mantine-HoverCard-dropdown.popover_colored*/
.popover_colored.mantine-Tooltip-tooltip {
    border-radius: 0 4px 4px 0;
    background-color: var(--blue_alert) !important;
    color: var(--FixedLight) !important;
    border: none !important;
    padding: 5px 10px !important;
    font-size: 10px !important;
    height: 34px;
    width: auto !important;
    max-width: none !important;
    min-width: auto !important;
    margin-left: 3px;
    display: flex;
    align-items: center;
    box-shadow: none !important;
    /*box-shadow: 1px 2px 4px rgb(var(--rgb-shadow) / 35%);*/
}
.popover_colored_to_left.mantine-Tooltip-tooltip {
    /*offset: 25px !important;*/
    border-radius: 4px 0 0 4px;
    background-color: var(--blue_alert) !important;
    color: var(--FixedLight) !important;
    border: none !important;
    padding: 5px 10px !important;
    font-size: 10px !important;
    height: 34px;
    width: auto !important;
    max-width: none !important;
    min-width: auto !important;
    margin-left: -3px !important;
    display: flex;
    align-items: center;
    box-shadow: none !important;
    /*box-shadow: 1px 2px 4px rgb(var(--rgb-shadow) / 35%);*/
}
/*!*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*!*/
/*!*!* Accordion Labels *!*/
/*!*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*!*/
/*.grx-accordion-label {*/
/*    font-weight: inherit;*/
/*    font-size: inherit;*/
/*}*/
/*.mantine-Accordion-control {*/
/*    font-size: 11px !important;*/
/*    font-weight: 600 !important;*/
/*    border-radius: 4px;*/
/*    padding: 3px 2px 3px 5px;*/
/*    background-color: transparent;*/
/*}*/
/*.mantine-Accordion-control .mantine-Accordion-label {*/
/*    color: var(--text_001) !important;*/
/*    font-size: 11px !important;*/
/*    font-weight: 600 !important;*/
/*    font-family: var(--bs-body-font-family) !important;*/
/*    padding: 5px 0;*/
/*    margin: 0;*/
/*}*/
/*.mantine-Accordion-control:hover {*/
/*    background-color: var(--bg_layer5_highlight) !important;*/
/*}*/
/*.mantine-Accordion-control:hover > .mantine-Accordion-label {*/
/*    color: var(--pgColorOpposite) !important;*/
/*    font-size: 11px !important;*/
/*    font-weight: 600 !important;*/
/*}*/
/*.mantine-Accordion-chevron {*/
/*    color: var(--pgColorOpposite);*/
/*    margin-left: 1rem;*/
/*}*/
/*.mantine-Accordion-item[data-active=true] {*/
/*    box-shadow: var(--grx-box-shadow);*/
/*    background-color: var(--bg_layer5);*/
/*    border: 1px solid var(--border_color_inputs);*/
/*    border-radius: 4px;*/
/*}*/

/*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/* MANTINE TABLE - Summary Tables For the Sidebar  */
/*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
.grx-hover-marker-table-container {
    margin: 0;
    padding: 5px;
    border-radius: var(--grx-border-radius);
    border: 1px solid var(--border_color_inputs);
    background-color: var(--bg_layer4);
}
.grx-hover-marker-table-container.selected {background-color: rgba(var(--rgb-values-green) / .2); }
.grx-hover-marker-table-container.hovered {background-color: rgba(var(--rgb-blue-1) / .2); }

.mantine-Table-table {
    font-family: var(--bs-body-font-family);
}
.grx-hover-marker-table {
    text-transform: initial;
    padding: 1px;
}

.grx-hover-marker-table .mantine-Table-table {}

/* title of chart */
.grx-hover-marker-table .mantine-Table-th {
    font-size: 1.1em;
    color: var(--blue_alert);
}
.grx-hover-marker-table .mantine-Table-tbody {
    padding: 2px;
    border-bottom: 1px solid var(--table-border-color);
}
.grx-hover-marker-table .mantine-Table-tbody .mantine-Table-tr .mantine-Table-td {
    font-size: .95em !important;
    font-weight: normal !important;
    background-color: var(--bg_layer5);
}
/* caption of table (used as title in some cases) */
.grx-hover-marker-table .mantine-Table-caption {
    font-size: 1em;
    font-weight: 525;
    letter-spacing: 0;
    color: var(--blue_alert);
    padding: 2px 1px;
    margin-bottom: 3px;
}

/* --------------------------------------------------------------------------------------------------- */
/*UPDATE CHART BUTTON/TOGGLE CLASSES ---> */
/* - Auto-Refresh Action Icon,*/
/* - Row that holds the ACtion Icon,*/
/* - "chart auto refresh", toggle between auto/off .auto-refresh-toggle */
/* --------------------------------------------------------------------------------------------------- */
/* DISABLE THE CURSUR WHEN ITEM IS DISABLED */
/*noinspection CssUnusedSymbol*/
.mantine-Switch-track {
    border: 1px solid var(--border_color) !important;
    background-color: var(--bg_layer1) !important;
}

/*noinspection CssUnusedSymbol*/
.mantine-Switch-input:checked + .mantine-Switch-track {
    border: 1px solid var(--border_color) !important;
    background-color: var(--icon_blue) !important;
}

/*noinspection CssUnusedSymbol*/
.mantine-Switch-root {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    user-select: none;
    width: 30px;
    height: 15px;
    border-radius: 10px;
    background-color: var(--pgColorOpposite);
    transition: background-color 0.15s ease;
}
.mantine-Switch-body {}
.mantine-Switch-track {
    width: 30px;
    min-width: 30px;
    max-width: 30px;
    height: 15px;
    min-height: 15px;
    max-height: 15px;
    padding: 2px;
    background-color: var(--blue_alert) !important;
}

/* WHEN SWITCH IS TURNED ON */
.mantine-Switch-input:checked + * > .mantine-Switch-trackLabel {
    color: var(--FixedLight) !important;
}
.mantine-Switch-thumb {
    background-color: var(--FixedLight);
}
.mantine-Switch-trackLabel {
    font-size: 8px;
    text-transform: lowercase;
    color: var(--FixedLight);
}
/* WHEN SWITCH IS OFF */
.mantine-Switch-track[data-label-position='right'] {
    background-color: var(--bg_inputs) !important;
}
.mantine-Switch-track[data-label-position='right'] .mantine-Switch-trackLabel {
    color: var(--text_001);
}
/* WHEN SWITCH IS DISABLED */
.mantine-Switch-input:disabled + .mantine-Switch-track {
    background-color: var(--DisabledInputs) !important;
    cursor: not-allowed;
}
.mantine-Switch-input:disabled + .mantine-Switch-track .mantine-Switch-trackLabel {
    color: var(--DisabledText);
}


/*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/* USED TO DIVIDE THE NAVBAR ITEMS ON THE LEFT HAND SIDE OF HOME PAGE (ALTERNATIVE LAYOUT)*/
/*dmc.Divider(label='Analytics', className='home-page-headers')*/
/*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
.home-page-headers .mantine-Divider-label {
    padding: 0 10px;
    font-size: 13px !important;
    margin: 0;
    color: var(--light_2) !important;
}

/* Color of the 'divider' lines that are created when using the dmc.Divider() component and the label */
.home-page-headers .mantine-Divider-label::before,
.home-page-headers .mantine-Divider-label::after {
    border-top: 1px solid var(--light_2) !important;
}

/* Style of Line Created by Divider Component */
.home-page-headers .mantine-Divider-left::after {
    border-top: 1px solid var(--light_2) !important;
}


/*----------------------------------------------------------------------------------------------------*/
/* Mantine Formating */
/*----------------------------------------------------------------------------------------------------*/
/*noinspection CssUnusedSymbol*/
.metric-transfer-list {
    height: 100%;
    width: 100%;
    gap: 5px;
}

/*noinspection CssUnusedSymbol*/
.metric-transfer-list .mantine-TransferList-transferListBody {
    background-color: var(--sb_active_color);
    border: 1px solid var(--border_color_inputs);
}

/*noinspection CssUnusedSymbol*/
.metric-transfer-list .mantine-TransferList-transferList {
    border-radius: 4px;
    padding: 5px;
    font-size: 12px;
}

/*noinspection CssUnusedSymbol*/
.metric-transfer-list .mantine-TransferList-transferListHeader {
    font-size: 12px;
    /*padding: 5px;*/
    /*height: 20px;*/
}

/*noinspection CssUnusedSymbol*/
.metric-transfer-list .mantine-TransferList-transferListSearch	{
    font-size: 12px;
    height: 25px;
    min-height: 25px;
    padding: 2px 5px;
    border-width: 0 0 1px 0 !important;
}

/*noinspection CssUnusedSymbol*/
.metric-transfer-list .mantine-TransferList-transferListControl {
    width: 15px;
    min-width: 15px;
    height: 25px;
    min-height: 25px;
}

/*noinspection CssUnusedSymbol*/
.metric-transfer-list .mantine-TransferList-transferListItems {
    height: 200px !important;
    background-color: var(--bgColor);
}

/*noinspection CssUnusedSymbol*/
.metric-transfer-list .mantine-TransferList-transferListItem {
    font-size: 11px !important;
    padding: 2px 5px !important;
    margin: 0;
}

/*noinspection CssUnusedSymbol*/
.metric-transfer-list .mantine-Checkbox-body {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    line-height: inherit;
}

/*noinspection CssUnusedSymbol*/
.metric-transfer-list .mantine-Checkbox-label {
    font-size: 11px !important;
    padding: 2px 5px !important;
    color: var(--text_001);
}

/*noinspection CssUnusedSymbol*/
.metric-transfer-list .mantine-Checkbox-input {
    width: 15px !important;
    height: 15px !important;
    background-color: var(--sb_active_color);
    border: 1px solid var(--border_color_inputs);
}

/*noinspection CssUnusedSymbol*/
.metric-transfer-list .mantine-Checkbox-input:checked {
    background-color: var(--icon_blue);
    /*border: 1px solid var(--icon_blue);*/
}

/*noinspection CssUnusedSymbol*/
.metric-transfer-list .mantine-Checkbox-inner {
    width: inherit;
    height: inherit;
}
/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/* Mantine Range Slider Formating */
/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
.date-slider {
    margin: 1rem 1rem 2rem;
}

/*noinspection CssUnusedSymbol*/
.date-slider .mantine-Slider-root {
    margin: 0 1rem 1rem 1rem;
    border-radius: 4px;
    padding: 0.5rem 1rem;
}

/*noinspection CssUnusedSymbol*/
.date-slider .mantine-Slider-track,
.date-slider .mantine-Slider-track::before {
    background-color: var(--slider_rail_color) !important;
    height: 10px;
    inset: 0;
}

/*noinspection CssUnusedSymbol*/
.date-slider .mantine-Slider-bar {
    background-color: var(--icon_blue);
    margin-left: 5px;
    z-index: 3;
    height: 10px;
}

/*noinspection CssUnusedSymbol*/
.date-slider .mantine-Slider-thumb {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--icon_blue);
    border: 1px solid var(--icon_blue);
}

/*noinspection CssUnusedSymbol*/
.date-slider .mantine-Slider-mark {
    height: 10px;
    width: 10px;
    border-radius: 8px;
    /*background-color: var(--DisabledInputs);*/
    border: 3px solid var(--slider_rail_color);
    align-items: center;
}

/*noinspection CssUnusedSymbol*/
.date-slider .mantine-Slider-markLabel {
    font-size: 11px;
    color: var(--text_001);
}

/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/* BOOTSTRAP TABLE - TOP 10 SUMMARY */
/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/*noinspection CssUnusedSymbol*/
.metric-analytics {
    margin: 1rem;
    padding: 1rem;
    border: 1px solid var(--border_color_inputs);
    border-radius: 4px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

/* the row that sits above the metric-analytics cards with the main title of each column within the cards */
/*noinspection CssUnusedSymbol*/
.metric-analytics-col-title-row {
    margin: 1rem;
    padding: 0;
    border: none;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

/* default width for just the first col of each row */
/*noinspection CssUnusedSymbol*/
.metric-analytics-col1 {
    width: 125px;
}

/* default width for just the second col of each row - which is a group of columns */
/*noinspection CssUnusedSymbol*/
.metric-analytics-content {
    width: 100%;
    min-height: 83vh;
}

/*noinspection CssUnusedSymbol*/
.metric-analytics-stacked {
    width: 400px;
    margin: 1rem;
    padding: 1rem;
    border: 1px solid var(--border_color_inputs);
    border-radius: 4px;
}

/* the row of titles for each column, does not have anything else except the titles of each column */
/*noinspection CssUnusedSymbol*/
.metric-analytics-col-title {
    font-size: 12px;
    /*width: 100%;*/
    color: var(--text_001);
    text-align: center;
    text-decoration: underline;
}
/* format the name of each metric: first col of each row e.g. Net Sales, Gross Profit */
/*noinspection CssUnusedSymbol*/
.metric-analytics-title {
    width: 100%;
    font-size: 18px;
    font-weight: 600;
    color: var(--text_001) !important;
    display: flex;
    justify-content: center;
    border-bottom: 1px solid var(--border_color_inputs);
}

/* format the text that is generated from openai that is a paragraph describing the change in natural language*/
/*noinspection CssUnusedSymbol*/
.metric-analytics-summary {
    margin-top: 1rem;
    font-size: 11px;
    color: var(--text_001);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-transform: initial;
}

/* format for the top and bottom ten metric */
/*noinspection CssUnusedSymbol*/
.metric-analytics-top-table {
    padding: 0;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    font-size: 11px;
}
.metric-analytics-top-table table {
    margin: 0;
    color: var(--text_001);
}
.metric-analytics-top-table tr {
    padding: 2px 5px !important;
    vertical-align: middle;
    font-size: 9px;
    color: var(--text_001) !important;
}
.metric-analytics-top-table td {
    padding: 2px 5px !important;
    vertical-align: middle;
    font-size: 9px;
    color: var(--text_001) !important;
}
.metric-analytics-top-table th {
    padding: 2px 5px !important;
    font-weight: bold;
    font-size: 9px;
    text-align: center;
    vertical-align: middle;
    color: var(--text_001) !important;
}

/* format for the top and bottom ten metric */
/*noinspection CssUnusedSymbol*/
.openai-rerun-button {
    margin: 0 !important;
    font-size: 16px;
    text-align: left;
    text-decoration: none;
    box-sizing: border-box;
    border: 1px solid transparent;
    background-color: transparent;
    color: var(--blue_alert) !important;
    position: relative;
    height: 100% !important;
    min-height: 18px !important;
    width: 18px !important;
    min-width: 18px !important;
    border-radius: 18px;
    padding: 0;
    line-height: unset;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
}

/*noinspection CssUnusedSymbol*/
.openai-rerun-button:hover {
    background-color: transparent;
    transform: scale(1.2);
}

/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/* GENERATE CHART PROGRESS_BAR */
/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
.chart-progress-bar.mantine-Progress-root {
    width: 100%;
    height: 100%;
    background-color: var(--bgColor);
    border-radius: 0;
}
.chart-progress-bar .mantine-Progress-bar {
    width: 100%;
    background-color: var(--progress-bar-color);
    height: 100%;
    border-radius: 0;
    opacity: 0.9;
}

.chart-progress-bar-div {
    display: flex;
    /*height: 1vh;*/
    height: 15px;
    padding: 0 0 5px 0;
    width: 100%;
    background-color: var(--bgColor);
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/* classes for the open ai text to input conversion sidebar */
/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
.openai-text-to-input-div {
    border: 1px solid var(--border_color) !important;
    width: 100%;
    display: flex;
    /*align-items: flex-start;*/
    overflow: hidden;
    /*align-items: center;*/
    flex-wrap: nowrap;
    background-color: var(--sb_active_color);
    margin: 0 5px 0 0;
    border-radius: 4px;
    gap: 5px;
}
.openai-text-to-input-button {
    margin: 5px !important;
    font-size: 16px;
    text-align: left;
    text-decoration: none;
    box-sizing: border-box;
    border: 1px solid transparent;
    background-color: var(--grx_green_light);
    color: var(--grx_green) !important;
    position: relative;
    height: 100% !important;
    min-height: 25px !important;
    width: 25px !important;
    min-width: 25px !important;
    border-radius: 4px;
    padding: 0;
    line-height: unset;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
}
.openai-text-to-input-button:hover {
    color: white !important;
    background-color: var(--grx_green) !important;
}
.openai-text-to-input-title {
    margin: 5px 0 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    color: rgb(134, 142, 150);
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    text-transform: unset;
    text-align: left;
    display: flex;
    align-items: center;
}

/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/*noinspection CssUnusedSymbol */
/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
.openai-text-to-input-textarea {
    margin: 4px 6px 4px 2px !important;
    /*padding: 0 6px;*/
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    color: rgb(134, 142, 150);
    font-size: 11px !important;
    text-decoration: none;
    text-transform: unset;
    text-align: left;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 4px;
    background-color: var(--sb_active_color);
}
.openai-text-to-input-textarea .mantine-Textarea-input {
    border: 1px solid var(--border_color) !important;
    font-size: 11px !important;
    color: rgb(134, 142, 150);
    background-color: var(--sb_active_color);
    padding: 5px !important;
}

/*---------------------------------------------------------------------------------------------------- */
/* DMC alert divs - style the close out button */
/*noinspection CssUnusedSymbol*/
.mantine-Alert-closeButton {
    top: 8px !important;
    width: 13px;
    height: 13px;
    min-height: 13px;
    min-width: 13px;
    opacity: .6;
}

/* --warning_yellow_light: rgb(250, 176, 5)*/
/* --warning_yellow_darker: rgb(255, 249, 219)*/

/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/*––– Alert Div for When Errors Occur in the tool ––––*/
/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/*.mantine-Alert-root*/
.grx-alert-div {
    background-color: var(--blue_alert_bg);
    color: var(--blue_alert_body);
    padding: 5px 10px;
}
.grx-alert-div .mantine-Alert-title	{
    margin: 0;
}
.grx-alert-div .mantine-Alert-message p {
    color: var(--blue_alert_body) !important;
    text-transform: lowercase;
}


.mantine-Alert-root {
    padding: 1rem;
}

/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/*––– CUSTOMER GENERATION BUTTONS ––––*/
/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/*noinspection CssUnusedSymbol*/
.user_input_alert {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    position: relative;
    overflow: hidden;
    padding: 5px 3px;
    border-radius: 4px;
    background-color: transparent;
    border: none;
    /*box-shadow: 0 1px 3px 0 rgb(0 0 0 / 35%);*/
    /*border: 1px solid var(--border_color_inputs);*/
    color: var(--text_001);
}

/*noinspection CssUnusedSymbol*/
.user_input_alert.is_error {
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 35%);
    background-color: var(--warning_red_light);
    /*border: 1px solid var(--warning_red);*/
    border: none;
    color: var(--warning_red);
}

/*noinspection CssUnusedSymbol*/
.user_input_alert.is_warning {
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 35%);
    background-color: var(--warning_yellow_light);
    /*border: 1px solid var(--warning_yellow_dark);*/
    border: none;
    color: var(--warning_yellow_dark);
}
/* text and icon styling within alert */
/*noinspection CssUnusedSymbol*/
.user_input_alert_text {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    color: var(--mantine_gray) !important;
    text-transform: lowercase;
    background-color: transparent !important;
    font-size: 11px;
}

/*noinspection CssUnusedSymbol*/
.user_input_alert_text.is_error {
    color: var(--warning_red) !important;
}

/*noinspection CssUnusedSymbol*/
.user_input_alert_text.is_warning {
    color: var(--warning_yellow_dark) !important;
}

/*noinspection CssUnusedSymbol*/
.user_input_alert_text.is_success {
    color: var(--grx_green) !important;
}

/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/* FORMAT BULLETS ON HOME PAGE */
/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/*noinspection CssUnusedSymbol*/
.updateAccordBodyText {
    font-weight: normal;
}
.custom_bullets_small {
    color: var(--textDefault) !important;
    /*line-height: 1.55;*/
    margin: 0 !important;
    padding: 5px 10px 5px 5px;
    list-style-position: inside;
}
.custom_bullets_small .mantine-List-item {
    color: var(--textDefault) !important;
    /*line-height: 1.55;*/
    margin: 0 !important;
    padding: 5px 10px 5px 5px;
    list-style-position: inside;
}

/*.custom_bullets_small.mantine-List-root {*/
/*    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";*/
/*    list-style-type: circle;*/
/*    font-size: 10px;*/
/*    color: var(--text_002) !important;*/
/*    line-height: 1.55;*/
/*    margin: 0 !important;*/
/*    padding: 5px 10px 5px 5px;*/
/*    list-style-position: inside;*/
/*}*/

/*.custom_bullets_small .mantine-List-item {*/
/*    color: var(--text_002) !important;*/
/*    margin: 0 !important;*/
/*}*/
/*.custom_bullets_small .mantine-List-item::marker {*/
/*    padding: 0 5px;*/
/*    !*margin: 0 !important;*!*/
/*    color: var(--text_002) !important;*/
/*}*/

/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/*!* USED TO GET A DATATABLE WITH MORE CONDENSED ROWS */


/*noinspection CssUnusedSymbol*/
.dash-table-container, .dash-spreadsheet-container, .dash-spreadsheet-inner, td {
    background-color: var(--bg_layer4);
    color: var(--dtTextColor);
    border: 1px solid var(--dtBorders) !important;
}

/*noinspection CssUnusedSymbol*/
.dash-table-container, .dash-spreadsheet-container, .dash-spreadsheet-inner, table {
    background-color: transparent;
}
/* the column names within the headers --- adding inherit so that toggles are always available*/
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner .column-header-name {
    flex-grow: 1;
    width: inherit;
    padding: 3px 0 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: break-spaces;
    max-height: 75px;
}

/* reduce row height */
.dash-spreadsheet-inner tr {
    min-height: 15px !important;
    height: 15px !important;
    max-height: 15px !important;
}
/*.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner tr {*/
/*    background-color: var(--bg_layer4);*/
/*    min-height: 15px !important;*/
/*    height: 15px !important;*/
/*    !*min-height: 15px !important;*!*/
/*    !*height: 15px !important;*!*/
/*}*/

/*noinspection CssUnusedSymbol*/
.dash-table-container, .dash-spreadsheet-container, .dash-spreadsheet-inner, table {
    background-color: var(--bg_layer4);
    border-collapse: collapse;
    font-family: sans-serif !important;
    /*font-weight: 550;*/
    font-size: 10px;
    --accent: var(--icon_blue) !important;
    --border: 0px solid rgba(64, 64, 64, 0.27) !important;
    --text-color: var(--dtTextColor) !important;
    /*--hover: rgba(219, 243, 166, 0.46);*/
    --background-color-ellipses: #fdfdfd;
    --faded-text: #fafafa;
    --faded-text-header: #b4b4b4;
    /*--hover: rgba(170, 203, 255, 0.38) !important;*/
    /*--selected-background: rgba(87, 146, 222, 0.38) !important;*/
    --hover: rgb(76 175 80 / 20%) !important;
    --selected-background: rgb(76 175 80 / 20%) !important;
    --faded-dropdown: #f0f0f0;
    --muted: #c8c8c8;
    --dt_border_totals: var(--dtborderTotals);
    --dtBorderColor: var(--dtBorders);
    --dtbgTotals: var(--dtColorTotals);
    --dtbgSubTotals: var(--dtColorSubTotals);
}

/*noinspection CssUnusedSymbol*/
.dash-table-container, .dash-spreadsheet-container, .dash-spreadsheet-inner input:not([type="radio"]):not([type="checkbox"]) {
    border-radius: 3px;
    border-style: solid;
    border-width: 1px;
    box-sizing: border-box;
    text-shadow: none;
}

/*FILTER ROW*/
/*noinspection CssUnusedSymbol*/
.dash-table-container, .dash-spreadsheet-container, .dash-spreadsheet-inner {
    border: none !important;
}

.dash-filter {
    border-radius: 0 !important;
    color: var(--navColor) !important;
    border: none !important;
}

/*noinspection CssUnusedSymbol*/
.dash-table-container, .dash-spreadsheet-container, .dash-spreadsheet-inner, .dash-header > div input[type="text"], .dash-table-container, .dash-spreadsheet-container, .dash-spreadsheet-inner, .dash-filter > div input[type="text"] {
    flex: 1;
    line-height: unset;
    background-color: transparent !important;
}

/*noinspection CssUnusedSymbol*/
.dash-table-container .dash-spreadsheet-container {
    border: none !important;
    display: flex;
    flex-direction: row;
    position: relative;
    line-height: initial;
}

/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/*line item styling*/
/*noinspection CssUnusedSymbol*/
.dash-table-container, .dash-spreadsheet-container, .dash-spreadsheet-inner td, .dash-table-container, .dash-spreadsheet-container, .dash-spreadsheet-inner th {
    background-clip: padding-box;
    padding: 1px 2px 1px 2px;
    overflow-x: hidden;
    white-space: nowrap;
    box-sizing: border-box;
    text-align: right;
}

/*noinspection CssUnusedSymbol*/
.dash-table-container, .dash-spreadsheet-container, .dash-spreadsheet-inner, input:not([type="radio"]):not([type="checkbox"]) {
    /*border-radius: 0 !important;*/
    /*border: none !important;*/
    margin: 0;
    font-family: inherit;
    text-align: left;
    box-sizing: border-box;
    text-shadow: none;
    color: var(--text_001);
    background-color: var(--bg_layer4);
    /*color: var(--text_001) !important;*/
    /*background-color: var(--bgColor) !important;*/
}

/*noinspection CssUnusedSymbol*/
.dash-table-container, .dash-spreadsheet-container, .dash-spreadsheet-inner, .dash-header, > div, input[type="text"], .dash-table-container, .dash-spreadsheet-container, .dash-spreadsheet-inner, .dash-filter, > div, input[type="text"] {
    flex: 1;
    height: 100%;
    line-height: inherit;
}
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner .dash-header > div, .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner .dash-filter > div {
    display: flex;
    justify-content: center;
    align-items: center;
}

/*noinspection CssUnusedSymbol*/
.my_display_none {
    display: none !important;
    /*visibility: hidden;*/
}
/*TOGGLE CASE SENSITIVITY*/

.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th.dash-filter input.dash-filter--case {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    height: 13px !important;
    line-height: 0;
    font-size: 8px !important;
    font-weight: 400;
    padding-top: 3px !important;
    color: var(--light_0) !important;
    background-color: var(--mantine_gray) !important;
    border: 1px solid var(--mantine_gray) !important;
    border-radius: 2px;
    opacity: .3;
}
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th.dash-filter input.dash-filter--case--sensitive {
    color: var(--light_0) !important;
    background-color: var(--mantine_gray) !important;
    border: 1px solid var(--mantine_gray) !important;
    opacity: 1;
}
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th:hover [class^='column-header--']:not(.disabled), .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th:hover [class^='dash-filter--']:not(.disabled) {
    /*background-color: 1px solid var(--icon_blue);*/
    /*border: 1px solid var(--icon_blue);*/
    /*color: var(--icon_blue);*/
    opacity: 1;
}

/* RADIO GROUP - MANTINE */
/*noinspection CssUnusedSymbol*/
.grx-radio-group .mantine-Radio-root {
    margin: 5px;
}

/*noinspection CssUnusedSymbol*/
.grx-radio-group .mantine-Radio-label {
    font-size: 12px;
    color: var(--text_001);
    padding-left: 5px;
}

/*noinspection CssUnusedSymbol*/
.grx-radio-group .mantine-Radio-radio {
    -webkit-tap-highlight-color: transparent;
    position: relative;
    appearance: none;
    margin: 0;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    transition-property: background-color, border-color;
    transition-timing-function: ease;
    transition-duration: 100ms;
    cursor: default;
}

/*noinspection CssUnusedSymbol*/
.grx-radio-group .mantine-Radio-icon {
}

/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/* DASH DATATABLE --- PAGINATION STYLING */
/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
.dash-table-container .previous-next-container {
    text-align: left;
    padding: 5px 0;
    display: inline-block;
}

.dash-table-container > .previous-next-container button {
    width: inherit;
    background-color: var(--blue_alert);
    color: white;
}
.dash-table-container > .previous-next-container button:hover {
    background-color: var(--blue_alert_body);
    opacity: .5;
    color: white;
}
/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/* Primary Chart Card Content Div - the Div that holds the titles, and chart and gets put inside the scroll area */
/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
.graph-and-title-container {
    padding: 5px;
    display: flex;
    flex-direction: column;
    flex-grow: 0;
    transform: translate(0px, 0px);
    box-shadow: none;
}
/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/* SPLIT PANES */
/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/*noinspection CssUnusedSymbol*/
.split-panes-horizontal-drilldown {
    padding: 5px;
    width: calc(var(--width-column-chartOutputs) - 1rem) !important;
    max-width: calc(var(--width-column-chartOutputs) - 1rem) !important;
    position: relative !important;
    /*width: inherit  !important;*/
    /*height: 100% !important;*/
    /*padding: 5px !important;*/
}
/*set initial height of the top pane of the drill down section */
/*noinspection CssUnusedSymbol*/
.split-panes-horizontal-drilldown .Pane.horizontal.Pane1 {
    min-height: 240px !important;
    /*max-width: inherit;*/
    /*width: inherit;*/
    /*padding-bottom: 5px;*/
}

/*noinspection CssUnusedSymbol*/
.Resizer.horizontal {
    margin-top: 1px;
    margin-bottom: 1px;
}

/*noinspection CssUnusedSymbol*/
.split-panes-drilldown-top {
    padding: 0.5rem 1rem 1rem 1rem;
    width: 100%;
    border: 1px solid var(--border_color);
    background-color: var(--sb_active_color);
    display: flex;
    flex-flow: column wrap;
    border-radius: var(--grx-border-radius);
    box-shadow: var(--grx-box-shadow);
}

/*noinspection CssUnusedSymbol*/
.split-panes-container-scrollable {
    overflow: auto;
    width: inherit;
    /*height: 83vh;*/
    /*width: 100%;*/
    /*height: 23.5vh;*/
    /*max-height: 23.5vh;*/
    border-radius: 4px 4px 0 0;
    /*border: 1px solid var(--border_color);*/
    /*background-color: var(--sb_active_color);*/
    display: flex;
    flex-flow: column wrap;
}
/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/* None-Responsive Grid -- same as flex-card-content-container but for heatmap and table to allow scrolling */
/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
.fixed-card-content-container {
    /*overflow: hidden;*/
    background-color: transparent;
    padding: 0.5rem;
    height: inherit;
    min-height: 80vh;
    width: inherit;
    /*width: 100%;*/
    display: flex;
    flex-direction: column;
    flex-grow: 0;
    /*display: flex;*/
    /*flex-direction: column;*/
    /*flex-grow: 0;*/
    /*transform: translate(0px, 0px);*/
    box-shadow: none;
}
.fixed-card-content-container.hide {
    display: none;
}

/* Loading Overlay is tecnically a div and needs to be styled with flex/grow so that the graph/chart fills area*/
.loading-overlay-flex-div {
    display: flex;
    flex-grow: 1;
}

/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/* ADD HEIGHT SETTINGS */
/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/*noinspection CssUnusedSymbol*/
/*.flex-card-content-container,*/
/*.split-panes-container-scrollable {*/
/*    height: calc(100vh - 55px - 35px - 25px - 1rem - 2rem - 10px);*/
/*    max-height: calc(100vh - 55px - 35px - 25px - 1rem - 2rem - 10px);*/
/*}*/

/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/* ResponsiveGridLayout Item Within Grid */
/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
.flex-card-content-container {
    overflow: hidden;
    border: 1px solid var(--border_color);
    background-color: var(--bg_layer5) !important;
    padding: 0.5rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-grow: 0;
    transform: translate(0px, 0px);
    box-shadow: var(--grx-box-shadow);
    border-radius: var(--grx-border-radius);
}
.flex-card-content-container.hide {
    border: 1px solid var(--border_color);
    visibility: hidden;
}

.flex-card-content-container-drill-area {
    overflow: hidden;
    border: 1px solid var(--border_color);
    background-color: var(--bg_layer5) !important;
    padding: 0.5rem .5rem 1rem .5rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-grow: 0;
    transform: translate(0px, 0px);
    box-shadow: var(--grx-box-shadow);
    border-radius: var(--grx-border-radius);
}
/*!* HEIGHT SETTINGS >>> Add 225px for the min-height of the drill slider area, and 15px for the divider between panes*!*/
/*.flex-card-content-container-drill-area {*/
/*    !*height: 58vh;*!*/
/*    height: calc(100vh - 55px - 35px - 25px - 1rem - 2rem - 240px - 15px - 1.5rem);*/
/*    max-height: calc(100vh - 55px - 35px - 25px - 1rem - 2rem - 240px - 15px - 1.5rem);*/
/*}*/
/*.flex-card-content-container-drill-area.hide {*/
/*    display: none;*/
/*}*/
/* Used for the scroll area that holds the empty div where the tables/heatmaps get generated */
/* The container must fill the available space under the title on any screen size but not stretch beyond */
/* so that the scroll bar can be effective */
.flex-card-empty-chart-container {
    border: none;
    padding: 0.5rem;
    /*height: 83vh;*/
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-grow: 0;
    transform: translate(0px, 0px);
    box-shadow: none;
}

.drill-area-bottom-pane-container {
    /*padding-top: 5px !important;*/
}
/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/* Limino Flex Responsive Grid */
/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/

/*noinspection CssUnusedSymbol*/
.lumino_flex_div {
    overflow: hidden;
    /*border: none;*/
    background-color: var(--bgColor) !important;
    border: 1px solid var(--border_color);
    padding: 0.5rem;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-grow: 0;
    transform: translate(0px, 0px);
    box-shadow: none;
}
.lumino_flex_div .hide {
    display: none;
}

/*noinspection CssUnusedSymbol*/
.lumino_flex_loader {
    background-color: transparent !important;
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-grow: 0;
    transform: translate(0px, 0px);
    box-shadow: none;
}

/*noinspection CssUnusedSymbol*/
.lumino_graph_layout {
    min-height: 90%;
    position: relative;
    bottom: 0;
    flex-grow: 1;
    top: 0;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    flex-wrap: nowrap;
}

/* ENTIRE DASHBOARD PAGE LAYOUT  */
/*noinspection CssUnusedSymbol*/
.lumino_page_content_1 {
    display: flex;
    position: fixed;
    top: 55px;
    bottom: 0;
    left: 0;
    right: 0;
    /*width: calc(100vw - 360px);*/
    z-index: 0;
    overflow-y: hidden;
    overflow-x: hidden;
    transition: all 0.1s;
}

/* DASHBOARD FIXED SIDEBAR  */
/*noinspection CssUnusedSymbol*/
.lumino_sidebar_left {
    background-color: var(--navbar-submenu-row-bg);
    position: fixed;
    top: 55px;
    left: 0;
    bottom: 0;
    width: 30px;
    padding: 1vh 0 0;
    z-index: 1;
    overflow-x: hidden;
    transition: all 0.1s ease 0s;
    border-right: 1px solid var(--border_color_inputs);
}

/* DASHBOARD SIDEBAR WITH USER INPUTS  */
/*noinspection CssUnusedSymbol*/
.lumino_sidebar_left_content {
    background-color: var(--sb_active_color);
    border-right: 5px solid var(--navColor);
    position: relative;
    /*position: fixed;*/
    padding: 5px;
    height: 100%;
    /*top: 45px;*/
    top: 0;
    bottom: 0;
    left: 30px;
    width: 330px;
    z-index: 0;
    overflow-y: hidden;
    overflow-x: hidden;
    transition: all 0.15s ease 0s;
}

/*noinspection CssUnusedSymbol*/
.lumino_sidebar_left_content.hidden {
    left: -330px !important;
}

/*.lumino_sidebar_container {*/
/*    !*position: relative;*!*/
/*    !*!*background-color: var(--pgColor);*!*!*/
/*    !*background-color: var(--sb_active_color);*!*/
/*    !*border-right: 5px solid var(--navColor);*!*/
/*    !*!*border: none;*!*!*/
/*    !*position: fixed;*!*/
/*    !*padding: 5px;*!*/
/*    !*height: 100%;*!*/
/*    !*top: 45px;*!*/
/*    !*bottom: 0;*!*/
/*    !*left: 30px;*!*/
/*    !*width: 330px;*!*/
/*    !*z-index: 0;*!*/
/*    !*overflow-y: hidden;*!*/
/*    !*overflow-x: hidden;*!*/
/*    !*transition: all 0.15s ease 0s;*!*/
/*}*/
/* DIFFERENT PARTS OF THE SIDEBAR */
/*noinspection CssUnusedSymbol*/
.lumino_sidebar_fixed {
    /*background-color: var(--sb_active_color);*/
    /*border: 1px solid var(--border_color_inputs);*/
    /*height: 60px;*/
    height: fit-content;
    padding: 0 10px 10px 5px;
    margin-bottom: 5px;
    border-radius: 4px;
    /*margin-right: 15px;*/
}

/*noinspection CssUnusedSymbol*/
.lumino_sidebar_button_fixed {
    height: fit-content;
    margin-bottom: 5px;
    margin-right: 15px;
}

/*noinspection CssUnusedSymbol*/
.lumino_sidebar_scroll_area {
    position: relative !important;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(95vh - 60px);
    /*height: calc(95vh - 160px);*/
    /*border-radius: 3px;*/
    /*overflow-y: hidden;*/
    /*display: flex;*/
    /*padding: 3px 5px 3px 0;*/
    /*flex-flow: column wrap;*/
}

/*noinspection CssUnusedSymbol*/
.lumino_sidebar {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/*noinspection CssUnusedSymbol*/
.lumino_sidebar_icons {
    border-radius: 4px;
    color: var(--FixedLight);
    background-color: transparent;
}

/*noinspection CssUnusedSymbol*/
.lumino_sidebar_icons:hover {
    -ms-transform: scale(1.02);
    transform: scale(1.02);
    color: var(--grx_green_light) !important;
    background-color: transparent;
}

/*noinspection CssUnusedSymbol*/
.lumino_sidebar_right {
    background-color: var(--navColor);
    position: fixed;
    top: 8vh;
    right: 0;
    bottom: 0;
    width: 35px;
    padding: 45px 0 0;
    /*height: 100%;*/
    z-index: 1;
    overflow-x: hidden;
    transition: all 0.1s ease 0s;
    border: none;
}

/*noinspection CssUnusedSymbol*/
.lumino_sidebar_tab_body {
    /*background-color: var(--sb_active_color);*/
    padding: 2px;
    /*padding: 10px 5px 10px 5px;*/
    /*border-top: 1px solid var(--border_color_inputs) !important;*/
    /*border-top: 1px solid var(--border_color);*/
    /*border-right: 1px solid var(--border_color);*/
    /*border-bottom: 1px solid var(--border_color);*/
    /*border-left: 1px solid var(--border_color);*/
    min-height: 100%;
    border-image: initial;
    border-radius: 0 0 4px 4px;
}

/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/* antd datepicker range styles ----  */
/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/

/*.ant-picker-range {*/
/*    position: relative;*/
/*    display: inline-flex;*/
/*  width: 100%;*/

/*}*/
/*.ant-picker-small {*/
/*    padding: 0 7px;*/
/*}*/
/*.ant-picker-focused {*/
/*    border-color: var(--ant-primary-color-hover);*/
/*    box-shadow: 0 0 0 2px var(--ant-primary-color-outline);*/
/*    border-right-width: 1px;*/
/*    outline: 0;*/
/*}*/
/*.ant-picker-focused, .ant-picker:hover {*/
/*    border-color: var(--ant-primary-5);*/
/*    border-right-width: 1px;*/
/*}*/
/*.ant-picker {*/
/*    box-sizing: border-box;*/
/*    margin: 0;*/
/*    color: rgba(0, 0, 0, .85);*/
/*    font-size: 12px;*/
/*    font-variant: tabular-nums;*/
/*    line-height: 1.5715;*/
/*    list-style: none;*/
/*    font-feature-settings: "tnum";*/
/*    padding: 4px 11px;*/
/*    position: relative;*/
/*    display: inline-flex;*/
/*    align-items: center;*/
/*    background: #fff;*/
/*    border: 1px solid #d9d9d9;*/
/*    border-radius: 2px;*/
/*    transition: border .3s, box-shadow .3s;*/
/*}*/
/*.ant-picker-input {*/
/*    position: relative;*/
/*    display: inline-flex;*/
/*    align-items: center;*/
/*    width: 100%;*/
/*}*/
/*.ant-picker-input>input {*/
/*    position: relative;*/
/*    display: inline-block;*/
/*    width: 100%;*/
/*    min-width: 0;*/
/*    color: rgba(0,0,0,.85);*/
/*    font-size: 11px;*/
/*    line-height: 1.5715;*/
/*    background-color: #fff;*/
/*    background-image: none;*/
/*    border-radius: 2px;*/
/*    transition: all .3s;*/
/*    flex: auto;*/
/*    min-width: 1px;*/
/*    height: auto;*/
/*    padding: 0;*/
/*    background: transparent;*/
/*    border: 0;*/
/*}*/
/*.ant-picker-range-separator {*/
/*    align-items: center;*/
/*    padding: 0 8px;*/
/*    line-height: 1;*/
/*}*/
/*.ant-picker-focused .ant-picker-separator {*/
/*    color: rgba(0,0,0,.45);*/
/*}*/
/*.ant-picker-separator {*/
/*    position: relative;*/
/*    display: inline-block;*/
/*    width: 1em;*/
/*    height: 16px;*/
/*    color: rgba(0,0,0,.25);*/
/*    font-size: 11px;*/
/*    vertical-align: top;*/
/*    cursor: default;*/
/*}*/
/*.ant-picker-input {*/
/*    position: relative;*/
/*    display: inline-flex;*/
/*    align-items: center;*/
/*    width: 100%;*/
/*}*/
/*.ant-picker-range.ant-picker-small .ant-picker-active-bar {*/
/*    margin-left: 7px;*/
/*}*/
/*.ant-picker-range.ant-picker-focused .ant-picker-active-bar {*/
/*    opacity: 1;*/
/*}*/
/*.ant-picker-range .ant-picker-active-bar {*/
/*    bottom: -1px;*/
/*    height: 2px;*/
/*    margin-left: 11px;*/
/*    background: var(--ant-primary-color);*/
/*    opacity: 0;*/
/*    transition: all .3s ease-out;*/
/*    pointer-events: none;*/
/*}*/
/*.ant-picker-panel-container .ant-picker-panel {*/
/*    vertical-align: top;*/
/*    background: transparent;*/
/*    border-width: 0 0 1px;*/
/*    border-radius: 0;*/
/*}*/
/*.ant-picker-panel {*/
/*    display: inline-flex;*/
/*    flex-direction: column;*/
/*    text-align: center;*/
/*    background: #fff;*/
/*    border: 1px solid rgba(0,0,0,.06);*/
/*    border-radius: 2px;*/
/*    outline: none;*/
/*}*/
/*.ant-picker-date-panel, .ant-picker-decade-panel, .ant-picker-month-panel, .ant-picker-quarter-panel, .ant-picker-time-panel, .ant-picker-week-panel, .ant-picker-year-panel {*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    !*width: 250px;*!*/
/*}*/
/*.ant-picker-cell {*/
/*    padding: 0;*/
/*    !*padding: 3px 0;*!*/
/*    color: rgba(0,0,0,.25);*/
/*    cursor: pointer;*/
/*}*/
/*.ant-picker-cell .ant-picker-cell-inner {*/
/*    position: relative;*/
/*    z-index: 2;*/
/*    display: inline-block;*/
/*    min-width: 100%;*/
/*    height: 100%;*/
/*    line-height: inherit;*/
/*    border-radius: 2px;*/
/*    transition: background .3s,border .3s;*/
/*}*/
/*.ant-picker-cell-disabled:before {*/
/*    background: rgba(0,0,0,.04);*/
/*}*/
/*.ant-picker-cell:before {*/
/*    position: absolute;*/
/*    top: 50%;*/
/*    right: 0;*/
/*    left: 0;*/
/*    z-index: 1;*/
/*    height: 100%;*/
/*    transform: translateY(-50%);*/
/*    transition: all .3s;*/
/*    content: "";*/
/*}*/
/*.ant-picker-cell-in-view.ant-picker-cell-range-end:before {*/
/*  right: 0;*/
/*}*/
/*.ant-picker-cell-in-view.ant-picker-cell-range-start:before {*/
/*    left: 0;*/
/*}*/
/*.ant-picker-cell-in-view.ant-picker-cell-in-range {*/
/*    position: relative;*/
/*}*/
/*.ant-picker-content td, .ant-picker-content th {*/
/*    position: relative;*/
/*    min-width: 100%;*/
/*    font-weight: 400;*/
/*}*/
/*.ant-picker-month-panel .ant-picker-cell-inner, .ant-picker-quarter-panel .ant-picker-cell-inner, .ant-picker-year-panel .ant-picker-cell-inner {*/
/*    width: 100%;*/
/*}*/
/*.ant-picker-header {*/
/*    display: flex;*/
/*    padding: 0 8px;*/
/*    color: rgba(0,0,0,.85);*/
/*    border-bottom: 1px solid rgba(0,0,0,.06);*/
/*}*/
/*.ant-picker-panel-container .ant-picker-panel .ant-picker-content, .ant-picker-panel-container .ant-picker-panel table {*/
/*    text-align: center;*/
/*}*/
/*.ant-picker-decade-panel .ant-picker-content, .ant-picker-month-panel .ant-picker-content, .ant-picker-quarter-panel .ant-picker-content, .ant-picker-year-panel .ant-picker-content {*/
/*    height: 150px;*/
/*}*/
/*.ant-picker-content {*/
/*    width: 100%;*/
/*    table-layout: fixed;*/
/*    border-collapse: collapse;*/
/*}*/
/*.ant-picker-header button {*/
/*    padding: 5px;*/
/*    color: rgba(0,0,0,.25);*/
/*    font-size: 13px;*/
/*    letter-spacing: 2px;*/
/*    line-height: 40px;*/
/*    background: transparent;*/
/*    border: 0;*/
/*    cursor: pointer;*/
/*    transition: color .3s;*/
/*    display: contents;*/
/*}*/
/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/* FORMAT USER INPUT TABS  */
/*.grid_item_input_icons {*/
/*    border-radius: 4px;*/
/*    color: var(--pgColorOpposite);*/
/*    height: 23px;*/
/*    width: 23px;*/
/*    background-color: transparent;*/
/*}*/
/*.mantine-Tabs-tabsListWrapper {*/
/*    !*border: 1px solid var(--border_color_inputs);*!*/
/*    !*border-radius: 4px 4px 0 0 !important;*!*/
/*}*/
/*.mantine-Tabs-tabControl {*/
/*    height: 30px;*/
/*    background-color: var(--sb_active_color);*/
/*}*/
/*.mantine-Tabs-tabControl.__mantine-ref-tabActive {*/
/*    border-bottom: 2px solid var(--pgColorOpposite);*/
/*}*/
/*==========================================================================================================*/
/* ResponsiveGridLayout  */
/*==========================================================================================================*/
/*noinspection CssUnusedSymbol*/
.dashboard_grid {
    display: flex;
    position: fixed !important;
    top: 55px;
    bottom: 0;
    left: 360px;
    right: 0;
    /*width: calc(100vw - 360px) !important;*/
    height: calc(100vh - 45px) !important;
    z-index: 0;
    overflow-y: scroll;
    overflow-x: hidden;
    transition: all 0.1s;
}

/*noinspection CssUnusedSymbol*/
.dashboard_grid.full {
    /*width: calc(100vw - 30px) !important;*/
    left: 30px;
}

/* ResponsiveGridLayout ACTUAL CLASS ADJUSTMENTS */
/*noinspection CssUnusedSymbol*/
.react-grid-layout {
    display: flex;
    margin: 1rem 1.5rem 1rem 1rem !important;
    height: calc(100% - 2rem) !important;
    width: 100% !important;
}

/*noinspection CssUnusedSymbol*/
.react-grid-item {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
}

/*noinspection CssUnusedSymbol*/
.react-grid-item.item.react-draggable.cssTransforms.react-resizable {
    position: relative;
    transform: translate(5px, 5px);
}
.item-top {
    height: 10px;
    line-height: 5px;
    padding-top: -5px;
    background-color: var(--sb_active_color);
    display: flex;
    cursor: grab;
    transition: background 200ms;
}
.item-top.hover {
    background-color: var(--navbar_highlight);
}

/*noinspection CssUnusedSymbol*/
.react-resizable-handle {
    position: absolute;
    width: 20px;
    height: 20px;
    /* margin-bottom: -1rem; */
    background-repeat: no-repeat;
    /* background-origin: content-box; */
    box-sizing: border-box;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+);
    background-position: bottom right;
    padding: 0;
    /* background-color: #2a2adf; */
}

/*<!-- Including one css file into other -->*/
/* @import "01_codepen_style.css";*/
/*==========================================================================================================*/
/* DEFAULT CSS FOR LUMINO */
/*https://github.com/VK/dash-lumino-components/blob/master/src/lib/components/css/defaults.css*/
/*==========================================================================================================*/

/*noinspection CssUnusedSymbol*/
.lm-Widget {
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    cursor: default;
}

/*noinspection CssUnusedSymbol*/
.lm-DockPanel-handle.lm-mod-hidden,
.lm-Widget.lm-mod-hidden {
    /*display: flex !important;*/
    display: none !important;
}

/*noinspection CssUnusedSymbol*/
.lm-DockPanel {
    /*z-index: 0;*/
    flex: 1 1 auto;
    margin-left: 360px;
}

/*noinspection CssUnusedSymbol*/
.lm-DockPanel.hide {
    display: none !important;
}

/*noinspection CssUnusedSymbol*/
.lm-DockPanel .lm-mod-hidden {
    z-index: -1 !important;
    display: none !important;
}

/*noinspection CssUnusedSymbol*/
.lm-DockPanel-widget {
    z-index: 0;
}

/*noinspection CssUnusedSymbol*/
.lm-DockPanel-tabBar {
    z-index: 1;
}

/*noinspection CssUnusedSymbol*/
.lm-DockPanel-handle {
    z-index: 2;
}

/*noinspection CssUnusedSymbol*/
.lm-DockPanel-handle:after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: "";
}

/*noinspection CssUnusedSymbol*/
.lm-DockPanel-handle[data-orientation="horizontal"] {
    cursor: ew-resize;
}

/*noinspection CssUnusedSymbol*/
.lm-DockPanel-handle[data-orientation="vertical"] {
    cursor: ns-resize;
}

/*noinspection CssUnusedSymbol*/
.lm-DockPanel-handle[data-orientation="horizontal"]:after {
    left: 50%;
    min-width: 8px;
    transform: translateX(-50%);
}

/*noinspection CssUnusedSymbol*/
.lm-DockPanel-handle[data-orientation="vertical"]:after {
    top: 50%;
    min-height: 8px;
    transform: translateY(-50%);
}

/*noinspection CssUnusedSymbol*/
.lm-DockPanel-overlay {
    /*z-index: 1;*/
    z-index: 3;
    box-sizing: border-box;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.6);
    border: 1px dashed #000;
    transition-property: top, left, right, bottom;
    transition-duration: 150ms;
    transition-timing-function: ease;
}

/*noinspection CssUnusedSymbol*/
.lm-DockPanel-overlay.lm-mod-hidden {
    /*display: flex !important;*/
    /*z-index: -1 !important;*/
    visibility: hidden !important;
    display: none !important;
}

/*noinspection CssUnusedSymbol*/
.lm-TabBar {
    min-height: 30px;
    max-height: 30px;
}
.lm-TabBar li {
    margin: 0;
}

/*noinspection CssUnusedSymbol*/
.lm-TabBar-content {
    min-width: 0;
    min-height: 0;
    align-items: flex-end;
    border-bottom: 1px solid silver;
}

/*noinspection CssUnusedSymbol*/
.lm-TabBar[data-placement="bottom"] .lm-TabBar-content {
    /*border: unset;*/
    border-top: 1px solid silver;
}

/*noinspection CssUnusedSymbol*/
.lm-TabBar-tab {
    padding: 0 10px;
    background: #e5e5e5;
    border: 1px solid silver;
    border-bottom: none;
    font-size: 18px;
    flex: 0 1 155px;
    min-height: 25px;
    max-height: 25px;
    min-width: 35px;
    margin-left: -1px;
    line-height: 25px;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

/*noinspection CssUnusedSymbol*/
.lm-TabBar-tabLabel .lm-TabBar-tabInput {
    padding: 0;
    border: 0;
    font-size: 18px;
}

/*noinspection CssUnusedSymbol*/
.lm-TabBar-tab:hover:not(.lm-mod-current) {
    background: #f0f0f0;
}

/*noinspection CssUnusedSymbol*/
.lm-TabBar-tab:first-child {
    margin-left: 0;
}

/*noinspection CssUnusedSymbol*/
.lm-TabBar-tab.lm-mod-current {
    min-height: 28px;
    max-height: 28px;
    background: #fff;
    transform: translateY(1px);
    border-top: 2px solid #119dff;
}

/*noinspection CssUnusedSymbol*/
.lm-TabPanel .lm-TabBar {
    margin-top: 1px;
}

/*noinspection CssUnusedSymbol*/
.lm-TabPanel .lm-TabBar[data-placement="bottom"] {
    margin-top: -1px;
}

/*noinspection CssUnusedSymbol*/
.lm-TabPanel .lm-TabBar[data-placement="bottom"] .lm-TabBar-tab {
    transform: translateY(-3px);
    border-top: unset;
    border-radius: 0 0 5px 5px;
}

/*noinspection CssUnusedSymbol*/
.lm-TabPanel .lm-TabBar[data-placement="bottom"] .lm-TabBar-tab.lm-mod-current {
    transform: translateY(-2px);
    border-bottom: 2px solid #119dff;
    border-radius: 0 0 5px 5px;
}

/*noinspection CssUnusedSymbol*/
.lm-TabBar-tabCloseIcon, .lm-TabBar-tabIcon, .lm-TabBar-tabLabel {
    display: inline-block;
}

/*noinspection CssUnusedSymbol*/
.lm-TabBar-tabIcon {
    margin-top: 7px;
    padding-right: 3px;
}

/*noinspection CssUnusedSymbol*/
.lm-TabBar-tabCloseIcon, .lm-TabBar-tabLabel {
    margin-top: 2px;
}

/*noinspection CssUnusedSymbol*/
.lm-TabBar-tab.lm-mod-closable > .lm-TabBar-tabCloseIcon {
    margin-left: 4px;
}

/*noinspection CssUnusedSymbol*/
.lm-TabBar-tab.lm-mod-closable > .lm-TabBar-tabCloseIcon:before {
    content: "\f00d";
    font-family: FontAwesome, serif;
}

/*noinspection CssUnusedSymbol*/
.lm-TabBar-tab.lm-mod-drag-image {
    min-height: 26px;
    max-height: 26px;
    min-width: 155px;
    border: 0;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    transform: translateX(-40%) translateY(-58%);
}

/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/*noinspection CssUnusedSymbol*/
.lm-Menu {
    z-index: 10000;
    position: absolute;
    white-space: nowrap;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/*noinspection CssUnusedSymbol*/
.lm-Menu-content {
    margin: 0;
    padding: 0;
    display: table;
    list-style-type: none;
}

/*noinspection CssUnusedSymbol*/
.lm-Menu-item {
    display: table-row;
    outline: 0;
    border: none;
}

/*noinspection CssUnusedSymbol*/
.lm-Menu-item:active, .lm-Menu-item:focus, .lm-Menu-item:hover, .lm-Menu-item:visited {
    outline: 0;
    border: none;
}

/*noinspection CssUnusedSymbol*/
.lm-Menu-item.lm-mod-collapsed, .lm-Menu-item.lm-mod-hidden {
    display: none !important;
}

/*noinspection CssUnusedSymbol*/
.lm-Menu-itemIcon, .lm-Menu-itemSubmenuIcon {
    display: table-cell;
    text-align: center;
}

/*noinspection CssUnusedSymbol*/
.lm-Menu-itemLabel {
    display: table-cell;
    text-align: left;
}

/*noinspection CssUnusedSymbol*/
.lm-Menu-itemShortcut {
    display: table-cell;
    text-align: right;
}

/*noinspection CssUnusedSymbol*/
.lm-Menu {
    padding: 3px 0;
    background: #fff;
    color: rgba(0, 0, 0, 0.87);
    border: 1px solid silver;
    font-size: 20px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
}

/*noinspection CssUnusedSymbol*/
.lm-Menu-item.lm-mod-active {
    background: #e5e5e5;
}

/*noinspection CssUnusedSymbol*/
.lm-Menu-item.lm-mod-disabled {
    /*color: rgba(0, 0, 0, 0);*/
    color: rgba(0, 0, 0, 0.25);
}

/*noinspection CssUnusedSymbol*/
.lm-Menu-itemIcon {
    width: 21px;
    padding: 4px 2px;
}

/*noinspection CssUnusedSymbol*/
.lm-Menu-itemLabel {
    padding: 4px 35px 4px 2px;
}

/*noinspection CssUnusedSymbol*/
.lm-Menu-itemMnemonic {
    text-decoration: underline;
}

/*noinspection CssUnusedSymbol*/
.lm-Menu-itemShortcut {
    padding: 4px 0;
}

/*noinspection CssUnusedSymbol*/
.lm-Menu-itemSubmenuIcon {
    width: 16px;
    padding: 4px 0;
}
.lm-Menu-item[data-type="separator"] > div {
    padding: 0;
    height: 9px;
}
.lm-Menu-item[data-type="separator"] > div::after {
    content: "";
    display: block;
    position: relative;
    top: 4px;
    border-top: 1px solid #ddd;
}

/*noinspection CssUnusedSymbol*/
.lm-Menu-itemIcon::before, .lm-Menu-itemSubmenuIcon::before {
    font-family: FontAwesome, sans-serif;
}

/*noinspection CssUnusedSymbol*/
.lm-Menu-item.lm-mod-toggled > .lm-Menu-itemIcon::before {
    content: "\f00c";
}

/*noinspection CssUnusedSymbol*/
.lm-Menu-item[data-type="submenu"] > .lm-Menu-itemSubmenuIcon::before {
    content: "\f0da";
}

/*noinspection CssUnusedSymbol*/
.lm-MenuBar {
    outline: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/*noinspection CssUnusedSymbol*/
.lm-MenuBar-content {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    list-style-type: none;
}

/*noinspection CssUnusedSymbol*/
.lm-MenuBar-item {
    box-sizing: border-box;
}

/*noinspection CssUnusedSymbol*/
.lm-MenuBar-itemIcon, .lm-MenuBar-itemLabel {
    display: inline-block;
}

/*noinspection CssUnusedSymbol*/
.lm-MenuBar {
    padding-left: 5px;
    background: #fafafa;
    color: rgba(0, 0, 0, 0.87);
    border-bottom: 1px solid #ddd;
    font-size: 20px;
}

/*noinspection CssUnusedSymbol*/
.lm-MenuBar-menu {
    transform: translateY(-1px);
}

/*noinspection CssUnusedSymbol*/
.lm-MenuBar-item {
    padding: 4px 8px;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    margin-bottom: 0;
    margin-top: 0;
}

/*noinspection CssUnusedSymbol*/
.lm-MenuBar-item.lm-mod-active {
    background: #e5e5e5;
}

/*noinspection CssUnusedSymbol*/
.lm-MenuBar.lm-mod-active .lm-MenuBar-item.lm-mod-active {
    z-index: 10001;
    background: #fff;
    border-left: 1px solid silver;
    border-right: 1px solid silver;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
}

/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/*noinspection CssUnusedSymbol*/
.lm-ScrollBar {
    display: flex;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/*noinspection CssUnusedSymbol*/
.lm-ScrollBar[data-orientation="horizontal"] {
    flex-direction: row;
}

/*noinspection CssUnusedSymbol*/
.lm-ScrollBar[data-orientation="vertical"] {
    flex-direction: column;
}

/*noinspection CssUnusedSymbol*/
.lm-ScrollBar-button, .lm-ScrollBar-track {
    box-sizing: border-box;
    flex: 0 0 auto;
}

/*noinspection CssUnusedSymbol*/
.lm-ScrollBar-track {
    position: relative;
    overflow: hidden;
    flex: 1 1 auto;
}

/*noinspection CssUnusedSymbol*/
.lm-ScrollBar-thumb {
    box-sizing: border-box;
    position: absolute;
}

/*noinspection CssUnusedSymbol*/
.lm-SplitPanel-child {
    z-index: 0;
}

/*noinspection CssUnusedSymbol*/
.lm-SplitPanel-handle {
    z-index: 1;
}

/*noinspection CssUnusedSymbol*/
.lm-SplitPanel-handle.lm-mod-hidden {
    display: none !important;
}

/*noinspection CssUnusedSymbol*/
.lm-SplitPanel-handle:after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: "";
}

/*noinspection CssUnusedSymbol*/
.lm-SplitPanel[data-orientation="horizontal"] > .lm-SplitPanel-handle {
    cursor: ew-resize;
}

/*noinspection CssUnusedSymbol*/
.lm-SplitPanel[data-orientation="vertical"] > .lm-SplitPanel-handle {
    cursor: ns-resize;
}

/*noinspection CssUnusedSymbol*/
.lm-SplitPanel[data-orientation="horizontal"] > .lm-SplitPanel-handle:after {
    left: 50%;
    min-width: 8px;
    transform: translateX(-50%);
}

/*noinspection CssUnusedSymbol*/
.lm-SplitPanel[data-orientation="vertical"] > .lm-SplitPanel-handle:after {
    top: 50%;
    min-height: 8px;
    transform: translateY(-50%);
}

/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/*noinspection CssUnusedSymbol*/
.lm-TabBar {
    display: flex;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/*noinspection CssUnusedSymbol*/
.lm-TabBar[data-orientation="horizontal"], .lm-TabBar[data-orientation="horizontal"] > .lm-TabBar-content {
    flex-direction: row;
}

/*noinspection CssUnusedSymbol*/
.lm-TabBar[data-orientation="vertical"], .lm-TabBar[data-orientation="vertical"] > .lm-TabBar-content {
    flex-direction: column;
}

/*noinspection CssUnusedSymbol*/
.lm-TabBar-content {
    margin: 0;
    padding: 0;
    display: flex;
    flex: 1 1 auto;
    list-style-type: none;
}

/*noinspection CssUnusedSymbol*/
.lm-TabBar-tab {
    display: flex;
    flex-direction: row;
    box-sizing: border-box;
    overflow: hidden;
}

/*noinspection CssUnusedSymbol*/
.lm-TabBar-tabCloseIcon, .lm-TabBar-tabIcon {
    flex: 0 0 auto;
}

/*noinspection CssUnusedSymbol*/
.lm-TabBar-tabLabel {
    flex: 1 1 auto;
    overflow: hidden;
    white-space: nowrap;
}

/*noinspection CssUnusedSymbol*/
.lm-TabBar-tabInput {
    user-select: all;
    width: 100%;
    box-sizing: border-box;
}

/*noinspection CssUnusedSymbol*/
.lm-TabBar-tab.lm-mod-hidden {
    display: none !important;
}

/*noinspection CssUnusedSymbol*/
.lm-TabBar.lm-mod-dragging .lm-TabBar-tab {
    position: relative;
}

/*noinspection CssUnusedSymbol*/
.lm-TabBar.lm-mod-dragging[data-orientation="horizontal"] .lm-TabBar-tab {
    left: 0;
    transition: left 150ms ease;
}

/*noinspection CssUnusedSymbol*/
.lm-TabBar.lm-mod-dragging[data-orientation="vertical"] .lm-TabBar-tab {
    top: 0;
    transition: top 150ms ease;
}

/*noinspection CssUnusedSymbol*/
.lm-TabBar.lm-mod-dragging .lm-TabBar-tab.lm-mod-dragging {
    transition: none;
}

/*noinspection CssUnusedSymbol*/
.lm-TabPanel-tabBar {
    z-index: 1;
}

/*noinspection CssUnusedSymbol*/
.lm-TabPanel .lm-TabBar-tab[data-placement="bottom"] > .lm-TabBar-content {
    background: tomato;
}

/*noinspection CssUnusedSymbol*/
.lm-TabPanel-stackedPanel {
    z-index: 0;
}

/*noinspection CssUnusedSymbol*/
.lm-BoxPanel, .lm-SplitPanel {
    flex: 1 1 auto;
}

/*noinspection CssUnusedSymbol*/
.lm-DockPanel {
    padding: 4px;
}

/*noinspection CssUnusedSymbol*/
.lm-Panel, body {
    padding: 0;
    margin: 0;
}

/*noinspection CssUnusedSymbol*/
.lm-DockPanel-widget {
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid silver;
    border-left: 1px solid silver;
    border-right: 1px solid silver;
}

/*noinspection CssUnusedSymbol*/
.lm-Widget {
    display: flex;
}

/*noinspection CssUnusedSymbol*/
.lm-content, .lm-content > div {
    flex: 1 1 auto;
    border: 1px solid silver;
}

/*noinspection CssUnusedSymbol*/
.lm-content, .lm-panel, body {
    display: flex;
    flex-direction: column;
}

/*noinspection CssUnusedSymbol*/
.lm-content, .lm-panel {
    min-width: 50px;
    min-height: 50px;
    height: unset;
    width: unset;
    padding: 8px;
}

/*noinspection CssUnusedSymbol*/
.lm-content {
    border-top: none;
    background: #fff;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

/*noinspection CssUnusedSymbol*/
.lm-panel {
    flex: 1 1 auto;
}
.lm-content > div {
    overflow: auto;
    padding: 5px;
}

/*noinspection CssUnusedSymbol*/
.lm-DockPanel {
    box-shadow: none;
    /*box-shadow: inset 0 0 4px 0 rgba(0,0,0,.5)*/
}

/*noinspection CssUnusedSymbol*/
._dash-loading {
    position: relative;
    top: 40vh;
    left: 40vw;
    font-size: 40px;
    color: #888;
    overflow: hidden;
    width: 20%;
    text-align: center;
    z-index: 99;
}

/*noinspection CssUnusedSymbol*/
.tabBarContainer {
    background: #eee;
    max-width: 35px;
    min-width: 35px;
    padding: 7px 0 0;
}

/*noinspection CssUnusedSymbol*/
.lm-SideBar {
    min-width: 35px;
    max-width: 35px;
    margin-left: 2px;
}

/*noinspection CssUnusedSymbol*/
.lm-SideBar.p-TabBar {
    min-height: 35px;
    max-height: 35px;
    overflow: visible;
    display: block;
    min-width: fit-content;
}

/*noinspection CssUnusedSymbol*/
.lm-SideBar .p-TabBar-content {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: stretch;
    list-style-type: none;
    height: 33px;
    transform-origin: 0 0 0;
}

/*noinspection CssUnusedSymbol*/
.lm-SideBar .p-TabBar-tab {
    padding: 0 16px;
    margin-left: -1px;
    overflow: visible;
    min-width: fit-content;
    border: 1px solid #999;
    transform: translateY(3px);
}

/*noinspection CssUnusedSymbol*/
.lm-SideBar .p-TabBar-tab.p-mod-current {
    min-height: 32px;
    max-height: 32px;
    border-top: 2px solid #119dff;
}

/*noinspection CssUnusedSymbol*/
.lm-SideBar .p-TabBar-tabIcon.lm-SideBar-tabIcon {
    min-width: 28px;
    min-height: 28px;
    background-size: 28px;
    display: inline-block;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-position: center;
}

/*noinspection CssUnusedSymbol*/
.lm-SideBar .p-TabBar-tabLabel {
    margin-top: 3px;
    transform: rotate(0.1deg);
    margin-right: 6px;
}

/*noinspection CssUnusedSymbol*/
.lm-SideBar .p-TabBar-tab:hover:not(.p-mod-current) {
    background: #eee;
}

/*noinspection CssUnusedSymbol*/
.lm-SideBar.p-TabBar.lm-mod-left .p-TabBar-content {
    flex-direction: row-reverse;
    transform: rotate(-90deg) translateX(-100%);
}

/*noinspection CssUnusedSymbol*/
.lm-SideBar.p-TabBar.lm-mod-right .p-TabBar-content {
    flex-direction: row;
    transform: rotate(90deg) translateY(-31px);
}

/*noinspection CssUnusedSymbol*/
.tabBarContainer::after {
    margin-top: -10px;
    min-height: 100vh;
    min-width: 100%;
    content: "";
    border-right: 1px solid silver;
    border-left: 1px solid silver;
    background: 0 0;
    position: absolute;
}

/*noinspection CssUnusedSymbol*/
.lm-SideBar .p-TabBar-tab.p-mod-current {
    transform: translateY(1px);
    border-bottom: 1px solid #fff;
}

/*noinspection CssUnusedSymbol*/
.lm-SideBar .p-TabBar-tab {
    border-bottom: 1px solid silver;
    min-height: 30px;
    max-height: 30px;
}

/*noinspection CssUnusedSymbol*/
.lm-SideBar .p-TabBar-tabIcon {
    transform: rotate(-90deg);
    margin: unset;
}

/*noinspection CssUnusedSymbol*/
.lm-SideBar .p-TabBar-tabIcon.fa {
    /*margin: unset;*/
    transform: rotate(90deg) translate(3px, 14px);
    margin-left: 12px;
}

/*noinspection CssUnusedSymbol*/
.lm-SideBar.p-TabBar.lm-mod-left .p-TabBar-tab.p-mod-current .p-TabBar-tabIcon {
    transform: rotate(90deg) translate(3px, 14px);
}

/*noinspection CssUnusedSymbol*/
.lm-SideBar.p-TabBar.lm-mod-right .p-TabBar-tabIcon.fa {
    transform: rotate(-90deg) translate(0, 1px);
}

/*noinspection CssUnusedSymbol*/
.lm-SideBar.p-TabBar.lm-mod-right,
.p-TabBar-tab.p-mod-current,
.p-TabBar-tabIcon {
    transform: rotate(-90deg) translate(1px, 1px);
}

/*noinspection CssUnusedSymbol*/
.lm-SideBar .p-TabBar-tabLabel:empty {
    display: none;
}
/*.popover_colored {*/
/*    border-radius: 4px;*/
/*    background-color: var(--blue_alert) !important;*/
/*    color: var(--FixedLight) !important;*/
/*    border: 1px solid var(--border_color_inputs) !important;*/
/*}*/
.popover_parent {
    background-color: var(--pgColor) !important;
    /*opacity: 0.9;*/
    border: none;
    border-radius: 4px;
}
.popover_body {
    color: var(--text_002);
    background-color: var(--bg_layer6) !important;
    opacity: 1;
    min-height: 0;
    border-radius: 4px;
    border: 1px solid var(--border-2);
    font-size: 10px;
    padding: 2px 5px;
}
.popover-header {
    /*border-radius: 4px 4px 0 0;*/
    padding: 0.5rem;
    border: none;
    background-color: var(--icon_blue);
    color: white !important;
}
.popover-body {
    min-height: 0;
    padding: 0.5rem;
    /*    color: white !important;*/
}

/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/* POPOVER STYLING FOR USER INPUT LABEL DESCRIPTIONS*/
/*noinspection CssUnusedSymbol*/
.label_popover__box {
    background-color: var(--bg_layer6);
}

.label_popover__box .popover-arrow::after {
    border-top-color: var(--bg_layer6);
}

/*noinspection CssUnusedSymbol*/
.label_popover__header {
    background-color: var(--bg_layer6);
    color: #79b94f;
    /*padding: 4px 1rem 4px 1rem;*/
    font-size: 13px;
    /*text-decoration: underline;*/
    text-transform: capitalize;
    font-weight: bold;
}

/*noinspection CssUnusedSymbol*/
.label_popover__body {
    color: var(--text_002);
    border-radius: 3px;
    font-size: 10px;
    text-transform: initial;
    font-weight: normal;
    /*padding: 4px 1rem 4px 1rem;*/
}

/*noinspection CssUnusedSymbol*/
.label_popover__definition {
    font-size: 10px;
    text-transform: initial;
    font-weight: normal;
}

/*noinspection CssUnusedSymbol*/
.label_popover__bullets {
    color: var(--text_002);
    font-size: 10px;
    text-transform: initial;
    font-weight: normal;
    margin-bottom: 0;
    /*padding: 0 1rem 0.5rem 1rem;*/
}

/*noinspection CssUnusedSymbol*/
.label_popover__bullet_item {
    font-size: 10px;
    text-transform: initial;
    font-weight: normal;
    margin-bottom: 0;
}

/*noinspection CssUnusedSymbol*/
.label_popover__label {
    font-size: 12px;
    width: 100%;
    height: 100%;
    text-transform: capitalize;
    font-weight: normal;
    /*display: inline-flex;*/
    /*justify-content: flex-start;*/
    text-decoration: none;
}

/*noinspection CssUnusedSymbol*/
.label_popover__label:hover {
    text-decoration: underline rgb(134, 142, 150);
}

/*noinspection CssUnusedSymbol*/
.label_div {
    height: 100%;
    display: flex;
    width: 100%;
    padding-right: 5px;
    vertical-align: middle;
    align-items: center;
}
.drill-down-reset-button {
    background-color: var(--icon_blue);
    color: white;
    border: none;
    margin: 3px;
    padding: 1px;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    display: flex;
    justify-content: center;
    align-items: center;
}
.drill-down-reset-button:hover,
.drill-down-reset-button:focus {
    opacity: .7;
    background-color: var(--icon_blue);
    color: white;
    border: none;
}
.drill-down-reset-button:active {
    opacity: .7;
    background-color: var(--icon_blue);
    color: white;
    border: none;
    /* when you hover on the button it should move a little  */
    transform: scale(1.1);
}
/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/* select control */
/*noinspection CssUnusedSymbol*/
.default_component_row {
    /*padding-bottom: 0.25rem;*/
    /*padding-top: 0.25rem;*/
    display: flex;
    line-height: 1.1rem;
    width: 100%;
    min-height: 27px;
}

/*noinspection CssUnusedSymbol*/
.default_component_row-hide {
    display: none !important;
}

/*noinspection CssUnusedSymbol*/
.flex_row_inputs {
    display: flex;
    flex-direction: row;
    align-items: center;
    align-content: center;
}
.drill-down-input-row-label {
    font-size: 11px;
    text-transform: initial;
    font-weight: normal;
    height: 100%;
    width: 100%;
    max-width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: grid;
    align-items: center;
    flex-shrink: 0; /* Prevent flex item from shrinking */
}
/*  container-styles container-fullwidth container-size-half-bottom m_d57069b5 mantine-ScrollArea-root */
/*  container-styles container-fullwidth container-size-full m_d57069b5 mantine-ScrollArea-root */
.drill-down-input-row {
    /*width: calc(100% - 10px);*/
    width: inherit;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    margin: 2px;
    /*width: 100%;*/
    /*display: flex;*/
    /*align-items: flex-start;*/
    /*align-content: center;*/
    /*flex-direction: row;*/
}
.drill-down-input-row.hide {
    display: none;
}
.accordion-item {
    /*border: none;*/
    border-color: var(--dimmedBorder);
    border-width: 1px 1px 0 1px;
    border-style: solid;
    border-top: 1px solid var(--dimmedBorder);
    border-left: 1px solid var(--dimmedBorder);
    border-right: 1px solid var(--dimmedBorder);
    border-bottom: 1px solid var(--dimmedBorder);
    background: transparent !important;
}

.drill-column {
    padding: 5px 10px;
    margin: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex-wrap: wrap;
}
/*.accordion-item:last-child {*/
/*  border-bottom: 1px solid var(--dimmedBorder);*/
/*}*/
.accordion-header {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    margin-top: 0;
    margin-bottom: 0;
    width: 100%;
    /*height: 26px;*/
    display: inline-flex;
    -webkit-appearance: none;
    font-size: 12px;
    line-height: 1.55;
    text-decoration: none;
    background-color: transparent !important;
    /*background-color: var(--pgColor);*/
    -webkit-box-align: center;
    align-items: center;
    /*color: var(--light_text);*/
}

/*noinspection CssUnusedSymbol*/
.accordion-collapse {
    background-color: transparent !important;
}
.accordion-button {
    height: 100%;
    width: 100%;
    font-size: 12px;
    line-height: 1.55;
    padding: 5px 5px;
    font-weight: 400;
    text-decoration: none;
    background-color: transparent;
    /*background-color: var(--sb_active_color);*/
    color: var(--light_text) !important;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out,
    border-radius 0.15s ease;
}
.accordion-button:focus {
    color: var(--light_text);
    border: none;
    box-shadow: none;
}

/*noinspection CssUnusedSymbol*/
.accordion-button:not(.collapsed) {
    background-color: rgb(125, 145, 171);
    color: var(--primary) !important;
    box-shadow: none;
}
.accordion-body {
    padding: 1rem;
    background-color: transparent !important;
}
/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/*    background-image: url(https://api.iconify.design/ci/chevron-duo-down.svg?color=%af2424)*/
.accordion-button::after {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin-left: auto;
    content: "";
    background-image: url("https://api.iconify.design/fluent/chevron-right-12-filled.svg?rotate=90deg");
    /*background-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e);*/
    background-repeat: no-repeat;
    background-color: transparent;
    opacity: 0.5;
    border-radius: 10px;
    color: var(--text_001);
    transition: transform 0.2s ease-in-out;
}

/*noinspection CssUnusedSymbol*/
.accordion-button:not(.collapsed)::after {
    background-image: url("https://api.iconify.design/fluent/chevron-right-12-filled.svg?rotate=90deg");
    /*color: var(--text_001);*/
    color: transparent;
    transform: rotate(-180deg);
}

/*noinspection CssUnusedSymbol*/
.my_accordion_header {
    margin-top: 0;
    margin-bottom: 0;
    width: 100%;
    display: inline-block;
    padding: 0;
    -webkit-appearance: none;
}

/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/* For badges to be positioned at the top right of the icons within tabs */
.my_custom_indicator {
    margin-bottom: 1.5rem;
    margin-left: -1rem;
    padding: 2px 5px;
    font-size: 10px;
    background: var(--warning_red_button);
    color: var(--text_dark_bg);
    border: 2px solid var(--bgColor);
    font-weight: 400;
    line-height: 11px;
    height: auto;
    width: auto;
    border-radius: 15px;
    /*margin-bottom: 1.5rem;*/
    /*margin-left: -1rem;*/
    /*padding: 4px;*/
    /*font-size: 8px;*/
    /*background: var(--warning_red_button);*/
    /*color: var(--text_dark_bg);*/
    /*border: 2px solid var(--bgColor);*/
}

/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
.Select--multi .Select-input {
    vertical-align: middle;
    margin-left: 0;
    padding: 0;
}
.Select-input {
    border-radius: 3px;
    font-family: Arial, sans-serif;
    height: 25px !important;
    font-size: 10px !important;
    vertical-align: top;
    color: var(--pgColorOpposite);
    line-height: 1.4;
    padding: 2px;
    cursor: pointer;
}
.Select-control {
    border: none !important;
    background-color: var(--bg_inputs) !important;
    border-radius: 3px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    vertical-align: middle;
    font-size: 11px !important;
    color: var(--pgColorOpposite) !important;
    /*color: rgb(134, 142, 150) !important;*/
    /*height: 22px !important;*/
    height: 26px !important;
    /*border: var(--border_color_inputs);*/
    padding: 0 !important;
    overflow: auto !important;
    cursor: pointer;
}
.Select .Select-control-tall {
    background-color: var(--bg_inputs) !important;
    border-radius: 3px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    vertical-align: middle;
    font-size: 11px !important;
    color: var(--pgColorOpposite) !important;
    /*color: rgb(134, 142, 150) !important;*/
    height: 54px !important;
    border: var(--border_color_inputs);
    padding: 0 !important;
    overflow: auto !important;
    cursor: pointer;
}

.Select .Select-control {
    /*border: none;*/
    border: 1px solid var(--border_color_inputs) !important;
    padding: 1px;
    background-color: var(--bg_inputs);
}
.Select-control:hover {
    box-shadow: none;
    /*box-shadow: 0 1px 0 rgba(0,0,0,.06);*/
}
.is-searchable.is-focused:not(.is-open) > .Select-control,
.is-searchable.is-open>.Select-control {
    border-color: var(--blue_alert);
    /*border-color: var(--ant-primary-color-hover);*/
    box-shadow: 0 0 0 2px var(--ant-primary-color-outline);
    border-right-width: 1px;
}
/*.Select.is-disabled > .Select-value,*/
/*.Select.is-disabled > .Select-control {*/
/*  cursor: none !important;*/
/*}*/
.Select.is-disabled > .Select-control {
    opacity: .7 !important;
    cursor: none !important;
    /*background-color: var(--DisabledInputs) !important;*/
}
.Select.is-disabled > .Select-control .Select-value-label {
    color: var(--DisabledInputs) !important;
}
.Select-control.invalid > .Select-control {
    border: 1px solid rgb(227, 55, 55) !important;
}

/*noinspection CssUnusedSymbol*/
.Select-multi-value-wrapper {
    overflow: revert;
}
.Select--multi .Select-value {
    /*width: 70%;*/
    margin: 2px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    vertical-align: middle;
    font-size: 10px !important;
    border: 1px solid rgb(139 147 155 / 45%) !important;
    border-radius: 4px !important;
    background-color: var(--icon_blue) !important;
    color: white !important;
    font-weight: 450 !important;
}
.Select-value-icon {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    border: none !important;
    background-color: var(--icon_blue);
    color: white;
    font-weight: 450 !important;
    padding-right: 3px !important;
    padding-left: 3px !important;
}
.Select--multi .Select-value-icon:hover {
    background-color: #232b36;
    color: white;
}
.Select-value-label {
    color: inherit;
}

/*noinspection CssUnusedSymbol*/
.Select-arrow-zone {
    display: table-cell;
    position: relative;
    vertical-align: middle;
    border-left: 1px solid var(--border_color_inputs) !important;
    background-color: var(--sb_active_color) !important;
    /*background-color: var(--sb_active_color) !important;*/
    width: 20px;
    /*height: 90%;*/
    border-radius: 0 3px 3px 0;
    /*margin: 3px !important;*/
    padding-right: 0 !important;
}
.Select-arrow {
    /*border-color: #999 transparent transparent;*/
    /*background-color: var(--text_001) !important;*/
    border-color: var(--IconBlueShades) transparent transparent;
    border-style: solid;
    border-width: 5px 5px 3px;
    display: inline-block;
    border-radius: 3px;
    height: 0;
    width: 0;
    position: relative;
}
.Select-clear {
    display: inline-block;
    font-size: 15px !important;
    line-height: inherit !important;
}
/*.Select-menu-outer .Select-option.is-disabled{*/
/*  color: var(--navbar_gradient2) !important;*/
/*  cursor:default*/
/*}*/

/* ---- Various Styles ---- */
/*noinspection CssUnusedSymbol*/
.w200 {
    width: 200px !important;
}

/*noinspection CssUnusedSymbol*/
.w300 {
    width: 300px !important;
}

/*noinspection CssUnusedSymbol*/
.w400 {
    width: 400px !important;
}

/*noinspection CssUnusedSymbol*/
.w500 {
    width: 500px !important;
}

/*noinspection CssUnusedSymbol*/
.w50p {
    /*width: 70% !important;*/
}

/*noinspection CssUnusedSymbol*/
.h100 {
    /*height: 100px !important;*/
    /*min-height: 100px !important;*/
    /*vertical-align: top !important;*/
    /* align text left and top left */
}

/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/* CUSTOM GRX MULTI-SELECTOR TALL CLASSNAME FOR DROP DOWNS --- pre-set to double the height */
.tall-dropdown .Select-control {
    min-height: 54px !important;
    height: 54px !important;
}
.tall-dropdown.invalid > .Select-control {
    border: 1px solid rgb(227, 55, 55) !important;
}

/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/*!* THE ITEM WITHIN THE DROP DOWN*!*/
/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
.Select--multi .Select-value-label {
    border-bottom-right-radius: 2px;
    border-top-right-radius: 2px;
    white-space: nowrap;
    width: inherit;
    border-left: none;
    cursor: default;
    box-shadow: none;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-appearance: none;
    padding: 0 4px 1px 2px !important;
}

/*The style of the expanded portion of drop down*/
/*noinspection CssUnusedSymbol*/
.Select-menu-outer {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    color: var(--pgColorOpposite) !important;
    white-space: nowrap;
    text-overflow: ellipsis;
    /*overflow: hidden;*/
    font-weight: 400;
    font-size: 10px !important;
    border-top: 3px solid var(--icon_blue) !important;
    border-left: 1px solid var(--border_color_inputs) !important;
    border-right: 1px solid var(--border_color_inputs) !important;
    border-bottom: 1px solid var(--border_color_inputs) !important;
    background-color: var(--bg_inputs);
    border-radius: 0 0 3px 3px !important;
    box-shadow: 0 3px 6px var(--box_shadowing);
    width: 100%;
    z-index: 99;
    /*z-index: 10001;*/
}
.Select-placeholder {
    font-size: 10px !important;
    color: var(--placeholderText) !important;
    font-style: italic;
    text-transform: lowercase;
}
.Select-placeholder,
.Select--single > .Select-control .Select-value {
    font-size: 10px !important;
    color: var(--placeholderText) !important;
    line-height: 26px !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
    /*cursor: pointer;*/
}
.Select-input > input {
    width: 100%;
    background: none transparent;
    border: 0 none;
    box-shadow: none;
    cursor: default;
    display: inline-block;
    font-family: inherit;
    margin: 0;
    color: var(--pgColorOpposite) !important;
    outline: none;
    line-height: inherit;
    height: 100%;
    padding: 0 5px !important;
    -webkit-appearance: none;
}
.Select--single .Select-value-label {
    color: var(--pgColorOpposite) !important;
    font-size: 10px !important;
    margin: 2px;
    padding: 0 !important;
}
.Select.is-focused:not(.is-open) > .Select-control {
    /*border: 1px solid #ccc;*/
    box-shadow: none;
    background-color: var(--bg_inputs);
}

/*noinspection CssUnusedSymbol*/
.Select--multi .Select-multi-value-wrapper {
    display: inline-block;
    width: 100%;
}
.Select--multi.has-value .Select-input {
    margin-left: 0;
}

/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/* Typography - TO OVERRIDE THE CODEPEN SETTINGS */
/*h1 {*/
/*    font-size: 1.7rem;*/
/*}*/
/*h2 {*/
/*    font-size: 1.5rem;*/
/*}*/
/*h3 {*/
/*    font-size: 1.3rem;*/
/*}*/
/*h4 {*/
/*    font-size: 1.2rem;*/
/*}*/
h5 {
    font-size: 1.1rem;
}
h6 {
    font-size: 1rem;
}

/*h1,*/
/*h2,*/
/*h3,*/
/*h4,*/
/*h5,*/
/*h6 {*/
/*    color: var(--light_text);*/
/*    !*color: #232B36;*!*/
/*    letter-spacing: 0;*/
/*    !*letter-spacing: 0.15rem;*!*/
/*    align-content: center;*/
/*    display: inline-flex;*/
/*    vertical-align: middle;*/
/*    text-align: left;*/
/*    text-transform: capitalize;*/
/*    line-height: inherit;*/
/*    margin-top: 0;*/
/*    margin-bottom: 0;*/
/*    font-weight: 400;*/
/*    flex-wrap: wrap;*/
/*    flex-direction: row;*/
/*    !*width: fit-content;*!*/
/*}*/
/*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/*p {*/
/*    !*font-family: Arial, sans-serif;*!*/
/*    color: #232b36;*/
/*    margin-bottom: 0;*/
/*    margin-top: 0;*/
/*    !*font-size: 75%;*!*/
/*    display: inline-flex;*/
/*    vertical-align: middle;*/
/*    text-align: left;*/
/*    align-content: center;*/
/*    !*letter-spacing: 0.1rem;*!*/
/*}*/
/*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
Hr {
    border-color: rgb(141 145 151);
    margin-top: 0.1rem;
    margin-bottom: 0.1rem;
}
/*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/*noinspection CssUnusedSymbol*/
.flex_align_center_row {
    display: flex !important;
    align-items: center;
}
/*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/*noinspection CssUnusedSymbol*/
.my_clean_div {
    background-color: transparent !important;
    height: inherit;
    width: inherit;
    padding: 0 1rem;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-around;
}
.grx-full-width {
    width: 100%;
    /*padding: 0 20px;*/
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-around;
}
/*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/* STANDARD CSS STYLE CLASSES THAT CAN BE APLIED TO ANY DIV */
/*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/* Centered horizontally and vertically */
.centered {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Centered horizontally */
/*noinspection CssUnusedSymbol*/
.centered-horizontally {
    display: flex;
    justify-content: center;
}

/* Centered vertically */
.centered-vertically {
    display: flex;
    align-items: center;
}

/* Align content to the left horizontally and vertically centered */
.centered-left {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

/* Align content to the right horizontally and vertically centered */
.centered-right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

/* Align content to the top horizontally and vertically centered */
.centered-top {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

/* Align content to the bottom horizontally and vertically centered */
.centered-bottom {
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.label-col {
    height: 100%;
}

/* dmc.DateRangePicker() */
/*noinspection CssUnusedSymbol*/
.grx-date-rangepicker .mantine-DateRangePicker-wrapper {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

/*noinspection CssUnusedSymbol*/
.grx-date-rangepicker .mantine-DateRangePicker-input{
    font-size: 11px !important;
    height: 25px;
    min-height: 25px;
    line-height: 25px !important;
    text-align: center !important;
    border: 1px solid var(--border_color_inputs) !important;
}

/*noinspection CssUnusedSymbol*/
.grx-date-rangepicker .mantine-DateRangePicker-input:invalid {
    outline: 1px solid var(--warning_red);
}

/*noinspection CssUnusedSymbol*/
.grx-date-rangepicker.invalid {
    outline: 1px solid var(--warning_red);
}

/* HEADERS WITHIN THE CALENDAR DROP DOWN */
/*noinspection CssUnusedSymbol*/
.mantine-DateRangePicker-calendarHeaderControl,
.mantine-DateRangePicker-calendarHeaderLevel,
.mantine-DateRangePicker-calendarHeaderLevelIcon {
    color: var(--text_001);
}

/*noinspection CssUnusedSymbol*/
.mantine-DateRangePicker-calendarHeaderControl:hover,
.mantine-DateRangePicker-calendarHeaderLevel:hover,
.mantine-DateRangePicker-calendarHeaderLevelIcon:hover {
    color: var(--text_001);
    background-color: var(--blue_highlight_transparent);
}

/*SELCTION OPTIONS WITHIN CALENDAR DROP DOWN */
/*noinspection CssUnusedSymbol*/
.mantine-DateRangePicker-yearPickerControl,
.mantine-DateRangePicker-monthPickerControl {
    color: var(--text_001);
    padding: 0;
}

/*noinspection CssUnusedSymbol*/
.mantine-DateRangePicker-yearPickerControl:hover,
.mantine-DateRangePicker-monthPickerControl:hover {
    color: var(--text_001);
    background-color: var(--blue_highlight_transparent);
}

/*noinspection CssUnusedSymbol*/
.mantine-DateRangePicker-yearPickerControl:disabled,
.mantine-DateRangePicker-monthPickerControl:disabled {
    opacity: .5 !important;
    color: var(--text_001) !important;
    background-color: transparent !important;
}

/*noinspection CssUnusedSymbol*/
.mantine-DateRangePicker-yearPickerControlActive,
.mantine-DateRangePicker-yearPickerControlActive:hover,
.mantine-DateRangePicker-monthPickerControlActive {
    color: white;
    background-color: var(--icon_blue);
}

/*noinspection CssUnusedSymbol*/
.mantine-DateRangePicker-day {
    color: var(--text_001);
}

/*noinspection CssUnusedSymbol*/
.mantine-DateRangePicker-day[data-in-range] {
    background-color: rgb(var(--rgb-values-alert-blue) / 20%);
    color: var(--text_001);
}

/*noinspection CssUnusedSymbol*/
.mantine-DateRangePicker-day[data-selected] {
    background-color: rgb(var(--rgb-values-alert-blue) / 80%);
    color: white;
}

/*noinspection CssUnusedSymbol*/
.grx-date-rangepicker .mantine-DateRangePicker-dropdown {
    background-color: var(--bg_inputs);
    border: 1px solid var(--border_color_inputs);
    position: fixed;
    /*left: 5px !important;*/
}
/*!* dmc.DatePicker() *!*/
/*.grx-date-picker .mantine-DatePicker-wrapper .mantine-DatePicker-input {*/
/*  font-size: 12px !important;*/
/*  height: 25px;*/
/*  min-height: 25px;*/
/*  line-height: 25px !important;*/
/*  !*make sure that it always shows up on top  *!*/
/*  !*position: relative !important;*!*/
/*  z-index: 99999 !important;*/
/*}*/
/*.grx-date-picker .mantine-DatePicker-input:invalid {*/
/*  outline: 1px solid var(--warning_red);*/
/*}*/
/*.mantine-DatePicker-dropdown {*/
/*  display: block;*/
/*  z-index: 99999 !important;*/
/*  position: relative !important;*/
/*}*/

.number-icon-badge {
    background-color: var(--blue_alert);
    color: white;
    border-radius: 3px;
    padding: 1px 4px;
}
.number-icon-badge.zero {
    opacity: .2;
}
.number-icon-labels {
    font-size: 12px !important;
    color: var(--text_001);
    font-weight: 400;
    margin-left: 5px;
}

/*noinspection CssUnusedSymbol*/
.period_summary_row {
    background: var(--bgCarosel);
    border: 1px solid var(--border_color_inputs);
    display: flex;
    /*line-height: 1.1rem;*/
    width: 100%;
    padding: 2px 5px;
    border-radius: 4px;
}

/* ---------------------------------------------------------------------------------------------------- */
/* Navbar toggle that appears when screen is small*/
/* ---------------------------------------------------------------------------------------------------- */
/*noinspection CssUnusedSymbol*/
.navbar-toggler-custom {
    width: fit-content;
}
/*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
.list-group {
}
.list-group-item-action {
    padding: 1px 5px;
    /*padding: .5rem 1rem .5rem 1rem;*/
    margin-bottom: 0;
    background: transparent;
    color: var(--text_001);
    width: 100%;
}
.list-group-item-action:hover {
    color: #212529;
    background: var(--grx_green_light);
    /*opacity: .5;*/
    /*background: #e9e9ea*/
}
.list-group-item-action:disabled {
    background: #f3f4f5;
    color: #6c757d;
    cursor: pointer;
}
.list-group-item-action-disabled {
    background: #f3f4f5;
    color: #6c757d;
    cursor: pointer;
}

/*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/*DISABLED LIST GROUPS FOR THE DASHBOARD/NEWS/Bookmarks*/
/*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
.list-group-item.disabled,
.list-group-item:disabled {
    color: #6c757d;
    pointer-events: auto;
    cursor: pointer;
    background-color: transparent;
    /*background: #f3f4f5;*/
}
.list-group-item:hover {
    /*background: #f3f4f5;*/
    color: #212529;
    background: var(--bg_layer5_highlight);
}

/* FORMAT FOR SIDEBAR RHS IF WE ARE ONLY USING ICONS -----------------------------------------------*/
.sidebar-action-item {
    padding: 1px 5px;
    /*padding: .5rem 1rem .5rem 1rem;*/
    margin-bottom: 0;
    background: transparent;
    color: var(--text_001);
    width: 100%;
}
.sidebar-action-item:hover {
    color: #212529;
    background: var(--grx_green_light);
    /*opacity: .5;*/
    /*background: #e9e9ea*/
}
.sidebar-action-item:disabled {
    background: #f3f4f5;
    color: #6c757d;
    cursor: pointer;
}
.sidebar-action-item .list-group-item-action-disabled {
    background: #f3f4f5;
    color: #6c757d;
    cursor: pointer;
}
.sidebar-icon-div {
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.sidebar-list-group-icon-only {
    color: var(--sidebar_colorText);
    background: transparent;
    width: 100%;
    padding: 7px;
    margin: 0;
    border: none;
}
.sidebar-list-group-icon-only:hover {
    color: var(--sidebar_colorText_Highlight);
    background-color: var(--sidebar_colorBackground_Highlight);
    border: none;
}
.sidebar-list-group-icon-only.disabled,
.sidebar-list-group-icon-only:disabled {
    color: #6c757d;
    pointer-events: none;
    background-color: transparent;
}

/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/*/* SINGLE CHECK BOX USED IN LINE WITH THE DROP BOX AND LABELS*/
.form-check-input {
    font-family: Arial, sans-serif;
    font-size: 62.5%;
    display: table;
    border-spacing: 0;
    border-collapse: separate;
    line-height: 1;
    overflow: hidden;
    box-shadow: none;
    border: 1px solid #ccc;
    border-radius: 2px;
    width: 1.5rem;
    height: 1.5rem;
    margin: 0;
    -webkit-appearance: none;
    /*background-color: #b5b9bd;*/
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    -moz-appearance: none;
    appearance: none;
    -webkit-print-color-adjust: exact;
    color-adjust: exact;
}
.form-check-input:checked {
    background-color: #6aab40;
    border: 1px solid #ccc;
    box-shadow: none;
}
.form-check-input:focus {
    box-shadow: none;
    border: 1px solid #ccc;
    /*outline: 0;*/
    /*box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 25%);*/
}
.form-label {
    margin-bottom: 0;
}

/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/*/* CUSTOM BUTTON FOR DIV EXTENDER AND HIDDEN*/
/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
.custom-button-sidebar {
    background: #232b36;
    color: white;
    padding-top: 1.5rem;
    font-size: 125%;
    font-weight: bold;
    display: flex !important;
    align-items: flex-start;
    justify-content: center;
    top: 0;
    bottom: 0;
    width: 100%;
    height: calc(100vh - 45px);
    border: none;
    box-shadow: none;
    text-align: center;
    vertical-align: center;
}
.custom-button-sidebar:hover,
.custom-button-sidebar:focus,
.custom-button-sidebar:active,
.custom-button-sidebar.active,
.open > .dropdown-toggle.custom-button-sidebar {
    background: #3e4b5e;
    color: white;
    font-size: 150%;
    box-shadow: none;
    text-align: center;
    vertical-align: center;
}

/*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/*!* CUSTOM GENERATE CHART BUTTON FOR CHART PAGES/TABS*/
/*.customer-generate-button {*/
/*  height: 25px !important;*/
/*  width: 100%;*/
/*  font-family: Arial, sans-serif;*/
/*  text-transform: capitalize;*/
/*  color: var(--ChartButtonText) !important;*/
/*  background: var(--ChartButtonBg) !important;*/
/*  border: 1px solid var(--border_color) !important;*/
/*  border-radius: 4px;*/
/*  font-size: 80%;*/
/*  font-weight: bold;*/
/*  display: inline-block !important;*/
/*  text-align: center;*/
/*  align-items: center;*/
/*  justify-content: center;*/
/*}*/
/*.customer-generate-button:hover,*/
/*.customer-generate-button:focus,*/
/*.customer-generate-button:active,*/
/*.customer-generate-button.active,*/
/*.open > .dropdown-toggle.customer-generate-button {*/
/*  opacity: .75;*/
/*  color: var(--ChartButtonBg);*/
/*  !*background: var(--ChartButtonText);*!*/
/*}*/
.customer-generate-button {
    height: 25px !important;
    width: 100%;
    font-family: Arial, sans-serif;
    text-transform: capitalize;
    color: var(--ChartButtonText) !important;
    background: var(--ChartButtonBg);
    border: none !important;
    /*border: 1px solid var(--border_color) !important;*/
    border-radius: 4px;
    font-size: 80%;
    font-weight: bold;
    display: inline-block !important;
    text-align: center;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease-in-out;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}
.customer-generate-button:active {
    transform: translateY(1px);
    background: var(--ChartButtonBg);
}
.customer-generate-button:not(:active) {
    background-color: var(--ChartButtonBg);
}
.customer-generate-button:hover {
    transition: all 0.15s ease-in-out;
    background: var(--ChartButtonBg_hover);
}
.customer-generate-button:disabled {
    border: 1px solid #f6f6f7;
    opacity: 0.3;
    /*background: #e3e3e3;*/
    /*background: #f6f6f7;*/
    color: #d6d6d9;
    box-shadow: none;
    cursor: default;
}

.auto-refresh-toggle-loader {
    width: 17px;
    min-width: 17px;
    height: 17px;
    min-height: 17px;
    padding: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--grx_green);
    color: var(--bgCardsHome);
    cursor: default !important;
    border: none;
    transform: none !important;
}
.auto-refresh-toggle-loader:hover,
.auto-refresh-toggle-loader:focus {
    background-color: var(--grx_green);
    color: var(--bgCardsHome);
}
.auto-refresh-toggle-loader[data-loading]::before {
    content: "";
    position: absolute;
    inset: -1px;
    background-color: var(--pgColorOpposite);
    opacity: .5;
    /*background-color: rgba(var(--rgb-values-green), 0.5);*/
    border-radius: 4px;
    cursor: not-allowed;
}
.auto-refresh-toggle-loader.disabled {
    background-color: var(--pgColorOpposite);
    color: var(--bgCardsHome);
    opacity: .5;
}

.auto-refresh-toggle-text {
    font-family: var(--bs-body-font-family);
    font-size: 12px;
    font-weight: 500;
    color: var(--blue_alert) !important;

}
.auto-refresh-toggle-row {
    background-color: var(--bg_layer3);
    border: 1px solid var(--border_color_inputs);
    border-radius: var(--grx-border-radius);
    width: 100%;
    /*height: 35px;*/
    padding: 5px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    margin-bottom: 5px;
}
/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/* padding on the rigth to align to the inputs sidebar that has a scroll wheel */
/*.customer-generate-button-div {*/
/*  !*padding-right: 13px !important;*!*/
/*  margin-right: 13px !important;*/
/*  padding: 0 5px;*/
/*  border-bottom: 1px solid var(--border_color_inputs);*/
/*}*/
.customer-generate-button-div {
    /* padding-right: 13px !important; */
    /*margin-right: 13px !important;*/
    /*padding: 0 5px;*/
    display: flex;
    height: 35px;
    border-bottom: 1px solid var(--border_color_inputs);
    justify-content: center;
    flex-direction: row;
}
/*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/*!* CUSTOM GENERATE CHART BUTTON FOR CHART PAGES/TABS*/
/*noinspection CssUnusedSymbol*/
.customer_login_button {
    border-radius: 3px;
    font-family: Arial, sans-serif;
    text-transform: uppercase;
    background: var(--grx_green);
    color: #3e4b5e;
    border: none;
    font-size: 85%;
    font-weight: bold;
    display: inline-block !important;
    text-align: center;
    align-items: center;
    justify-content: center;
}

/*noinspection CssUnusedSymbol*/
.customer_login_button:hover,
.customer_login_button:focus,
.customer_login_button:active,
.customer_login_button.active,
.open > .dropdown-toggle.customer_login_button {
    background: #b6db65;
    color: #232b36;
    border: none;
}

/*noinspection CssUnusedSymbol*/
.customer_login_button:active .open > .dropdown-toggle.customer_login_button {
    background: #b6db65;
    color: #232b36;
    border: none;
    box-shadow: none;
}

/*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/*!* CUSTOM GENERATE CHART BUTTON FOR CHART PAGES/TABS*/
/*noinspection CssUnusedSymbol*/
.user-logout-button {
    font-family: Arial, sans-serif;
    /*padding-top: 2px;*/
    padding-bottom: 3px;
    margin-left: 1rem;
    margin-right: 1rem;
    text-transform: capitalize;
    /*background: #3e4754;*/
    /*background: var(--navbar_gradient2);*/
    background: transparent;
    color: #909398;
    font-size: 80%;
    font-weight: normal;
    border-radius: 3px;
    display: flex;
    /*display: inline-block !important;*/
    text-align: center;
    align-items: center;
    justify-content: center;
}

/*noinspection CssUnusedSymbol*/
.user-logout-button:hover,
.user-logout-button:focus,
.user-logout-button:active,
.user-logout-button.active,
.open > .dropdown-toggle.user-logout-button {
    /*background: #ec394a;*/
    /*color: #ffffff;*/
    color: #ec394a;
    box-shadow: none;
}

/*noinspection CssUnusedSymbol*/
.user-logout-button:active .open > .dropdown-toggle.user-logout-button {
    /*background: #ec394a;*/
    /*color: #ffffff;*/
    color: #ec394a;
    box-shadow: none;
}

/*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/*!* CLEAR/DELETE BUTTON STYLING*/
.clear-activity-button {
    font-family: Arial, sans-serif;
    text-transform: capitalize;
    background: #ffffff;
    color: #e72234;
    border: 1px solid #e72234;
    /*font-size: 70%;*/
    font-size: 10px;
    font-weight: normal;
    display: inline-block !important;
    text-align: center;
    align-items: center;
    justify-content: center;
}
.clear-activity-button:hover,
.clear-activity-button:focus,
.clear-activity-button:active,
.clear-activity-button.active,
.open > .dropdown-toggle.clear-activity-button {
    background: #e72234;
    color: #ffffff;
    box-shadow: none;
}
.clear-activity-button:active .open > .dropdown-toggle.clear-activity-button {
    background: #e72234;
    color: #ffffff;
    box-shadow: none;
}

/*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/* BOOKMARK LIST GROUP BUTTON*/
.bookmark-edit-button {
    /*height: .5rem;*/
    font-family: Arial, sans-serif;
    text-transform: lowercase;
    text-decoration: underline;
    background: transparent !important;
    box-shadow: none !important;
    /*color: #232B36;*/
    color: var(--text_001);
    height: 100%;
    /*font-size: 70%;*/
    font-size: 10px;
    font-weight: normal;
    text-align: center;
    align-items: start;
    justify-content: center;
}
.bookmark-edit-button:hover,
.bookmark-edit-button:focus,
.bookmark-edit-button:active,
.bookmark-edit-button.active,
.open > .dropdown-toggle.bookmark-edit-button {
    height: 100%;
    color: #ec394a;
    /*border-top: 2px solid #ec394a;*/
    /*box-shadow: none;*/
}


/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/*!* NAVBAR ICONS IN PLACE OF TEXT */
/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/

/*noinspection CssUnusedSymbol*/
.mantine_navbar_icon {
    margin: 0 !important;
    height: 20px;
    width: 20px;
}

/*noinspection CssUnusedSymbol*/
.mantine-navbar-icon-link {
    letter-spacing: 0;
    /*color: #999ea2;*/
    border: none !important;
    color: var(--navbar_text);
    background-color: transparent !important;
    width: auto;
    height: 100%;
    display: flex;
    text-align: left;
    align-items: center;
    justify-content: flex-start;
    padding: 5px !important;
}

/*noinspection CssUnusedSymbol*/
.mantine-navbar-icon-link .mantine-NavLink-icon {
    margin: 0 !important;
}

/*noinspection CssUnusedSymbol*/
.mantine-navbar-icon-link:active,
.mantine-navbar-icon-link:focus,
.mantine-navbar-icon-link.active,
.open > .dropdown-toggle.mantine-navbar-icon-link {
    color: var(--grx_green);
    font-weight: 400;
    /*border-bottom: 1px solid var(--grx_green);*/
}

/*noinspection CssUnusedSymbol*/
.mantine-navbar-icon-link:hover,
.open > .dropdown-toggle.mantine-navbar-icon-link {
    color: var(--grx_green);
    /*border-bottom: 1px solid var(--grx_green);*/
}
/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/*!* NAVBAR LINK FORMATTING TO MAKE THE PILLS GREEN WHEN PRESSED / HOVERED*/
/*noinspection CssUnusedSymbol*/
.custom-navbar-pills {
    font-family: Arial, sans-serif;
    letter-spacing: 0;
    color: #999ea2;
    /*border: 0 solid #232B36;*/
    font-size: 80%;
    /*font-size-adjust: .5;*/
    font-weight: 300;
    display: inline-block !important;
    text-align: center;
    align-items: center;
    padding-bottom: 3px;
    justify-content: center;
}

/*noinspection CssUnusedSymbol*/
.custom-navbar-pills:active,
.custom-navbar-pills:focus,
.custom-navbar-pills.active,
.open > .dropdown-toggle.custom-navbar-pills {
    color: var(--grx_green);
    font-weight: 400;
    /*border-bottom: 1px solid var(--grx_green);*/
}

/*noinspection CssUnusedSymbol*/
.custom-navbar-pills:hover,
.open > .dropdown-toggle.custom-navbar-pills {
    color: var(--grx_green);
    /*border-bottom: 1px solid var(--grx_green);*/
}

/*noinspection CssUnusedSymbol*/
.custom-navbar-pills.disabled {
    color: #999ea2;
    pointer-events: none;
    cursor: default;
}

/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/*!* NAVBAR ROW CLASSNAME THAT HOUSES THE PILLS / LINKS TO VARIOUS PAGES */
/*noinspection CssUnusedSymbol*/
.custom-navbar-pill-row {
    margin-right: 1rem;
    display: inline-flex !important; /*!* KEY TO HAVING EACH LINK EXPAND ACROSS HORIZONTALLY */
    height: 100%;
    width: 100%;
    text-align: center;
    /*justify-content: space-between;*/
}

/*noinspection CssUnusedSymbol*/
.mantine-Avatar-root {
    border: 1px solid var(--border_color_inputs);
    background-color: var(--pgColor);
    width: 22px;
    min-width: 22px;
    height: 22px;
    border-radius: 22px;
    padding: 0;
}

/*noinspection CssUnusedSymbol*/
.mantine-Avatar-placeholder {
    border-radius: inherit;
    font-weight: 400;
    font-size: 8px;
    letter-spacing: 0;
    /*letter-spacing: 1px;*/
    color: white;
    background-color: var(--primary);
}

/*noinspection CssUnusedSymbol*/
.mantine-AvatarsGroup-child {
    background-color: var(--primary);
    /*background: inherit;*/
    border: 1px solid var(--border_color_inputs);
}

/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/*!* NAVBAR DIV CLASSNAME [PARENT]  --navbar_gradient1: var(--primary); --navbar_gradient2: #323f50
--navbar_gradient2: #0f1824a3 */
/*.custom-navbar-classname {*/
/*  width: 100%;*/
/*  height: 5vh;*/
/*  background: linear-gradient(134deg, var(--navbar_gradient1) 25%, var(--navbar_gradient2) 75%);*/
/*  !*background: var(--primary) !important;*!*/
/*  color: white;*/
/*  position: fixed;*/
/*  top: 0;*/
/*  right: 0;*/
/*  left: 0;*/
/*  z-index: 1030;*/
/*  padding: 0 1vw 0 1vw;*/
/*  !*display: -ms-flexbox;*!*/
/*  display: inline-flex;*/
/*  !*display: inline-flex !important;*!*/
/*  flex-wrap: nowrap;*/
/*}*/
.custom-navbar-classname {
    width: 100%;
    height: 35px;
    min-height: 35px;
    max-height: 35px;
    /*height: 45px;*/
    /*min-height: 45px;*/
    /*max-height: 45px;*/
    color: white;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 99;
    padding: 0 1rem 0 1rem;
    /*padding: 0 1vw 0 1vw;*/
    display: inline-flex;
    flex-wrap: nowrap;
    background: var(--navColor);
}

/*noinspection CssUnusedSymbol*/
.custom-navbar-classname > .container-fluid,
.custom-navbar-classname > .container-sm,
.custom-navbar-classname > .container-md,
.custom-navbar-classname > .container-lg,
.custom-navbar-classname > .container-xl,
.custom-navbar-classname > .container-xxl {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: inherit;
    flex-wrap: inherit;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/* The Row under the navbar that holds the data-selector drop down */
/*noinspection CssUnusedSymbol*/
.navbar-toolbar {
    width: 100%;
    height: 20px;
    min-height: 20px;
    max-height: 20px;
    padding: 0;
    color: var(--navbar-submenu-row-text);
    /*background-color: var(--navbar-submenu-row-bg);*/
    position: fixed;
    top: 35px;
    right: 0;
    left: 0;
    z-index: 98;
    display: flex;
    flex-wrap: nowrap;
    background: var(--navColor);
    border-top: 1px solid rgb(var(--rgb-white) / 10%);
    /*display: inline-flex;*/
    /*flex-wrap: nowrap;*/
}
/* the div inside the navbar-data-selector class row, which holds the drop down */
/* make the same color as drop down and as wide as the main sidebar */
.data-selector-dropdown-div {
    padding: 0 20px;
    /*width: 100%;*/
    max-width: 230px;
    color: var(--navbar-submenu-row-text);
    background-color: var(--navbar-submenu-row-bg);
    /*background-color: var(--navbar_highlight) !important;*/
}
/* The data selector drop down under the navbar that holds the data-selector drop down */
.data-selector-dropdown .mantine-Select-root {
    color: var(--navbar-submenu-row-text) !important;
    background-color: var(--navbar-submenu-row-bg);
    /*background-color: transparent !important;*/
    /*color: var(--FixedLight) !important;*/
}

/*noinspection CssUnusedSymbol*/
.data-selector-dropdown .mantine-Input-wrapper {
    display: block;
    color: var(--navbar-submenu-row-text) !important;
    background-color: var(--navbar-submenu-row-bg);
    -moz-padding-start: calc(0.75rem - 3px);
    font-size: 12px !important;
    font-weight: 400;
    line-height: 1.5;
    height: 20px !important;
    min-height: 20px !important;
    max-height: 20px !important;
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    border: none;
    border-radius: 0 !important;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    box-shadow: none !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.data-selector-dropdown .mantine-Select-input {
    border: none;
    color: var(--navbar-submenu-row-text) !important;
    background-color: var(--navbar-submenu-row-bg) !important;
    padding: 1px 1px 1px 20px;
    height: 20px;
    min-height: 20px;
    max-height: 20px;
    font-size: 11px;
    border-radius: 0 !important;
}
.data-selector-dropdown .mantine-Select-input:focus {
    border: none !important;
}
.data-selector-dropdown .mantine-Select-icon {
    color: var(--grx-icon-green);
    padding: 1px 5px;
    width: auto;
}

/* the expandable drop down element */
.mantine-Select-dropdown {
    /*z-index: 5000;*/
    color: var(--pgColorOpposite);
    background-color: var(--pgColor);
    border: 1px solid var(--border_color_inputs);
    /*margin-top: -8px; !* Adjust the negative margin to reduce the gap *!*/
    /*border-radius: 3px !important;*/
    /*border: 1px solid var(--border_color_inputs) !important;*/
}
.mantine-Select-item {
    font-size: 11px;
    padding: 1px 5px;
    margin: 1px 0;
    color: var(--pgColorOpposite);
    background-color: transparent;
}

/* color of the selected item within the drop down of a dmc.Select component */
.mantine-Select-item[data-selected=true],
.mantine-Select-item[data-selected=true]:hover,
.mantine-Select-item[data-selected=true]:focus,
.mantine-Select-item[data-selected=true]:active,
.mantine-Select-item:active {
    background-color: rgb(var(--rgb-pgColorOpposite) / 50%);
    color: rgb(var(--rgb-white) / 100%);
}
/* format of the item in the dmc.Select component when hovering on the drop down items */
.mantine-Select-item:hover,
.mantine-Select-item:active,
.mantine-Select-item:target {
    background-color: rgb(var(--rgb-pgColorOpposite) / 40%);
    color: rgb(var(--rgb-white) / 100%);
}
.data-selector-dropdown .mantine-Select-dropdown {
    z-index: 5000;
    color: var(--navbar-submenu-row-text);
    background-color: var(--navbar-submenu-row-bg);
    margin-top: -8px; /* Adjust the negative margin to reduce the gap */
    border-radius: 3px !important;
    border: 1px solid var(--border_color_inputs) !important;
}
.data-selector-dropdown .mantine-Select-root {
    border-bottom: 1px solid var(--border_color_inputs) !important;
}

/*noinspection CssUnusedSymbol*/
.data-selector-dropdown .mantine-Select-itemsWrapper {
    margin: 0 !important;
    padding: 0 !important;
}
.data-selector-dropdown .mantine-Select-item {
    color: var(--navbar-submenu-row-text) !important;
    border-radius: 0 !important;
    height: inherit;
    min-height: inherit;
    max-height: inherit;
    font-size: 11px;
    padding: 1px 5px;
    margin: 0;
}
/*.data-selector-dropdown .mantine-Select-item {*/
/*  color: var(--FixedLight) !important;*/
/*  opacity: .5;*/
/*}*/
/*noinspection CssUnusedSymbol*/
.data-selector-dropdown .mantine-Select-rightSection {
    width: 15px;
}
.form-select:active, .form-select:focus {
    /*border: none !important;*/
    /*border-color: var(--blue_alert);*/
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0 rgba(13,110,253,.25);
}


/* Other Comps */
.data-source-modal-description {
    color: var(--text_001);
    font-size: 12px;
    font-weight: 400;
    font-style: italic;
}

/*noinspection CssUnusedSymbol*/
.data-source-modal .mantine-Paper-root.mantine-Modal-modal {
    background-color: var(--bgCardsHome);
    color: var(--text_001);
    /*opacity: 100%;*/
    /*font-weight: 400;*/
    /*font-size: 13px;*/
}
.data-source-modal .mantine-Modal-header {
    font-size: 16px;
    text-decoration: underline;
}
.data-source-modal-submit-button {
    margin: 1rem 0 0 0;
    padding: 8px 20px;
    background-color: var(--icon_blue);
    color: rgb(var(--rgb-white));
    /*opacity: 30%;*/
    font-weight: 400;
    font-size: 12px;
    height: 100%;
    width: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none !important;
}
.data-source-modal-submit-button:hover {
    opacity: 100%;
    background-color: var(--pgColorOpposite);
    color: var(--pgColor);
}


/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/* CONTAINER SETTINGS */
.content-container {
    background-color: transparent;
    border: none;
    position: fixed;
    top: 55px;
    right: 0;
    left: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    z-index: 0;
    overflow-y: hidden;
    overflow-x: hidden;
    transition: all 0.1s ease 0s;
}
.height-adjusted {
    /* ---- move down to adjust for the charting navbar that is below navbar*/
    top: 9vh !important;
}

/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/*!* *****HOME PAGE ONLY***** USED TO MAKE EACH INDIVIDUAL LINK WITHIN THE CHART NAVIGATION DIV */
/*noinspection CssUnusedSymbol*/
.home-page-chart-carousel {
    width: 100%;
    padding: 0 25px;
}

/*noinspection CssUnusedSymbol*/
.home-page-chart-carousel-icon {
    background-color: transparent;
    border-radius: 4px;
    /*display: flex !important;*/
    padding: 5px;
    height: calc(var(--height-navbarCharts) - 2px);
    width: auto;
    /*width: 160px;*/
    /*padding: 2px;*/
    /*padding: 2px;*/
    /*display: inline-flex;*/
    /*margin: 5px;*/
    /* box-shadow: 0 0 7px 2px rgb(0 0 0 / 20%); */
    /*align-items: center;*/
    /*justify-content: center;*/
    /*text-transform: uppercase;*/
}

/*!*noinspection CssUnusedSymbol*!*/
/*.home-page-chart-carousel-icon:hover {*/
/*    !*box-shadow: 0 0 7px 5px rgba(153, 194, 62, 0.78);*!*/
/*    background-color: var(--bg_layer3);*/
/*    margin: 5px;*/
/*    !*height: 85px;*!*/
/*}*/

/*!*noinspection CssUnusedSymbol*!*/
/*.home-page-chart-carousel-icon-label {*/
/*    !*width: 100%;*!*/
/*    color: #9e9fa1ff;*/
/*    text-transform: capitalize;*/
/*}*/

/*noinspection CssUnusedSymbol*/
.home-page-chart-carousel-icon-div {
    background-color: transparent;
    width: 90%;
    height: var(--height-navbarCharts);
    /*border-bottom: 1px solid var(--border_color_inputs);*/
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    flex-direction: row;
    justify-content: center;
}

.home-page-chart-carousel-icon-div:hover {
    cursor: pointer;
    /*background-color: rgba(var(--rgb-blue-1) / 10%);*/
    /*border-bottom: 1px solid var(--border_color_inputs);*/
    background-color: transparent;
    border-bottom: 2px solid rgba(var(--rgb-blue-2) / 60%);
}

.home-page-chart-carousel-icon-div.active,
.home-page-chart-carousel-icon-div.active .home-page-chart-carousel-icon-div:hover {
    /*border-bottom: 1px solid var(--border_color_inputs);*/
    /*background-color: rgba(var(--rgb-blue-1) / 20%);*/
    background-color: transparent;
    border-bottom: 2px solid rgba(var(--rgb-blue-2) / 100%);
}

/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/* COLOR OF DOTS IN TRICH COMPONENT CAROUSEL IF ENABLED */
.trich_carousel .slick-dots button:before {
    font-size: 28px;
    color: var(--text_001) !important;
}

/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/* HOME PAGE FREQUENT ICON CARDS */
/*noinspection CssUnusedSymbol*/
.home-frequents-icon {
    margin: 0;
    height: 20px;
    width: 20px;
    color: var(--FixedLight);
    /*color: var(--icon_blue);*/
}

/*noinspection CssUnusedSymbol*/
.home-frequents-icon-theme {
    border-radius: 35px;
    height: 35px;
    width: 35px;
    padding: 2px;
    background-color: var(--navColor);
}

/*noinspection CssUnusedSymbol*/
.home-frequents-icon-div {
    color: var(--text_001) !important;
    width: 100px;
}

/*noinspection CssUnusedSymbol*/
.home-frequents-icon-div:hover {
    /*color: var(--pgColor);*/
    /*background-color: green;*/
    /*text-decoration: none;*/
    /*min-width: 80%;*/
}

/*noinspection CssUnusedSymbol*/
.home-listgroup-item-md {
    width: 200px;
    height: 100%;
}

/*noinspection CssUnusedSymbol*/
.home-listgroup-popbody-md {
    color: var(--text_001) !important;
}

/*noinspection CssUnusedSymbol*/
.home-listgroup-popover-md {
    margin: 0;
    opacity: 1;
    background: var(--sb_active_color) !important;
    padding: 5px;
    width: 210px;
}

/*noinspection CssUnusedSymbol*/
.home-frequents-listgroup {
    padding: 5px;
    color: var(--text_001) !important;
    background-color: var(--bgCardsHome);
    /*background-color: var(--dimmedBorder);*/
    border: 1px solid var(--border_color_inputs) !important;
    border-radius: 4px;
    margin: 10px;
    /*border-left: none;*/
    /*padding: .5rem 1rem .5rem 1rem;*/
    display: flex !important;
    flex-direction: row;
    align-items: center;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
    opacity: 1;
    height: fit-content;
    /*background: transparent;*/
    /*width:100%;*/
}

/*noinspection CssUnusedSymbol*/
.home-frequents-listgroup:hover {
    cursor: pointer;
    background-color: var(--bg_layer5_highlight);
    /*background: var(--hover_highlight) !important;*/
}

/* HOME PAGE BOOKMARK AND UPDATE ICONS */
/*noinspection CssUnusedSymbol*/
.custom-favicon-theme,
.home-page-card-sub-headers-theme-icons {
    border-radius: 15px;
    padding: 4px;
    height: 23px;
    width: 23px;
    margin-right: 5px;
    background-color: var(--blue_alert);
    border: 1px solid var(--border_color_inputs);
    /*border: 1px solid var(--grx-icon-green);*/
    /*box-shadow: 0 0 2px 1px rgb(0 0 0 / 20%);*/
}

/*noinspection CssUnusedSymbol*/
.custom-favicon-style {
    color: var(--FixedLight);
    /*color: var(--grx-icon-green);*/
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.boomark-listgroup-title {
    font-size: 12px !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
    color: var(--blue_alert) !important;
}
.boomark-listgroup-description {
    font-size: 10px;
    color: var(--textDefault);
    padding: 0;
    margin: 0;
    line-height: normal;
}
.bookmark-listgroup-badge {
    font-size: 9px;
    font-weight: 450;
    text-transform: lowercase;
    color: rgb(var(--rgb-white));
    background-color: var(--blue-shade-4);
    border: none;
    border-radius: 10px;
    padding: 2px 7px;
    margin: 5px 2px 0 2px;
    line-height: 14px;
    height: auto;
}
/* ROW LABEL ICONS ---- ICONIFY STYLING -- See how they are used*/
/* ex: dmc.ThemeIcon(className='user-input-theme-icon', children=DashIconify(className='user-input-iconify', ...))*/
.user-input-theme-icon {
    width: 2rem;
    height: 2rem;
    min-height: 2rem;
    min-width: 2rem;
    border-radius: 5px;
    padding: 0;
    margin: 0 5px 0 0;
    background-color: transparent;
    border: none;
}
.user-input-iconify {
    color: var(--icon_blue);
    /*background-color: rgba(var(--rgb-standard-blue) / 20%);*/
    /*border: 1px solid rgba(var(--rgb-standard-blue) / 70%);*/
    border-radius: 5px;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1px;
}

/*–––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
.input-group {
    border: none;
    border-radius: 4px;
}
.input-group-text {
    color: white;
    /*background-color: var(--navbar_gradient2);*/
    background-color: var(--HomeIconBg);
    /*background-color: var(--mantine_gray);*/
    border-color: var(--border_color_inputs);
    height: 26px;
}

/*noinspection CssUnusedSymbol*/
.input-group > .form-control,
.input-group > .form-select {
    background-color: var(--bg_inputs);
    font-size: 10px !important;
    color: rgb(134, 142, 150);
    height: 26px !important;
    border-color: var(--border_color_inputs);
    overflow: auto;
    /*cursor: pointer;*/
}

/*noinspection CssUnusedSymbol*/
.input-group > .form-control:hover,
.input-group > .form-select:hover {
    box-shadow: none;
}

/*noinspection CssUnusedSymbol*/
.input-group > .form-control:focus,
.input-group > .form-select:focus {
    box-shadow: none;
}

/*noinspection CssUnusedSymbol*/
.input-group > .form-control.menu {
    border-radius: 0;
}

/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/* HOME PAGE --- LISTGROUP vertical */
.home-page-vertical-lg-item {
    width: 100%;
    padding: 1rem;
    color: var(--text_001) !important;
    /*background-color: var(--dimmedBorder);*/
    background-color: var(--bgCardsHome) !important;
    border-color: var(--border_color_inputs) !important;
    /*border: 1px solid var(--border_color_inputs) !important;*/
    /*border-radius: 4px;*/
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center;
    align-content: center;
    justify-content: center;
    opacity: 1;
    height: min-content;
}

/*noinspection CssUnusedSymbol*/
.home-page-vertical-lg-item-bookmarks {
    width: 100%;
    padding: 1rem;
    color: var(--text_001) !important;
    background-color: var(--bg_cards) !important;
    border-color: var(--border_color_inputs) !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center;
    align-content: center;
    justify-content: center;
    opacity: 1;
    height: min-content;
}

.listgroup-section-title {
    border-radius: 0 !important;
    width: 100% !important;
    padding: 5px !important;
    color: var(--text_001) !important;
    border-top: none !important;
    border-bottom: 1px solid var(--border_color_inputs);
    background-color: var(--bg_listgroup_dividers) !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: start;
    align-content: start;
    justify-content: left;
    opacity: 1;
    font-size: 13px;
    font-weight: 500;
    height: min-content;
}
/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/* ADDED TO LISTGROUP HOME PAGE FOR ONLY BOOKMARKS */
/*noinspection CssUnusedSymbol*/
.home-page-vertical-lg-item-bookmarks:hover {
    cursor: pointer;
    background-color: var(--bg_layer5_highlight) !important;
}

/*noinspection CssUnusedSymbol*/
.home-page-listgroup-vertical {
    border-radius: 4px;
    display: flex;
    width: 100%;
    flex-direction: row;
    padding-left: 0;
    margin-bottom: 0;
    flex-wrap: wrap;
    overflow-x: hidden;
    overflow-y: auto;
    align-content: flex-start;
}

/*noinspection CssUnusedSymbol*/
.home-page-listgroup-vertical:hover {
    /*cursor: pointer;*/
    /*background-color: var(--grx_green) !important;*/
}
.home-page-vertical-lg {
    max-height: 325px;
    border-radius: 4px;
    display: flex;
    flex-direction: row;
    padding-left: 0;
    margin-bottom: 0;
    /*border-radius: .25rem;*/
    flex-wrap: wrap;
    /*border: 1px solid var(--border_color_inputs) !important;*/
    /*height: fit-content;*/
    overflow-x: hidden;
    overflow-y: auto;
}
.home-page-vertical-lg:hover {
    /*background-color: transparent;*/
    /*background-color: var(--bg_layer5_highlight);*/
}

/*noinspection CssUnusedSymbol*/
.home-page-vertical-list-group-spoiler {
    border-radius: 4px;
    margin: 0;
    /*padding: 5px;*/
    /*width: 210px;*/
    background-color: transparent;
}

/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/* LISTGROUP WITH SPOILER - CONTENT = NEWS CARD or UPDATE CARD */
/*noinspection CssUnusedSymbol*/
.lg-vert-spoiler {
    width: 100%;
}
.lg-vert-spoiler .mantine-Spoiler-content {
    /*max-height: 25px !important;*/
}
.lg-vert-spoiler .mantine-Spoiler-content {
    /*height: 100% !important;*/
    /*max-height: 100%;*/
}
.lg-vert-spoiler .mantine-Spoiler-control {
    display: inline-block;
    /*padding: 1px 5px;*/
    border-radius: 4px;
    background-color: transparent !important;
    color: var(--blue_alert_text) !important;
    font-size: 9px;
    font-weight: 450;
    line-height: 1.55;
    text-decoration: none;
    border: none;
    cursor: pointer;
    text-align: right;
    text-transform: lowercase;
    margin-top: 1px;
}
.lg-vert-spoiler .mantine-Spoiler-control:hover {
    text-decoration: underline;
}

/*noinspection CssUnusedSymbol*/
.lg-vert-item-spoiler {
    /*padding: 0.7rem;*/
    color: var(--text_001) !important;
    background-color: transparent;
    /*background-color: var(--bg_layer4) !important;*/
    border-color: var(--border_color_inputs) !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center;
    align-content: center;
    justify-content: center;
    opacity: 1;
    width: 100%;
}
/* if the listgroup item is a key item, then this will add green background */
/*noinspection CssUnusedSymbol*/
.lg-vert-item-spoiler.callout {
    background-color: rgb(var(--rgb-values-green) / 20%) !important;
}
/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/* HOME PAGE --- LISTGROUP HORIZONTAL */
.home-page-horizontal-list-group-item {
    width: 100%;
    padding: 5px;
    color: var(--text_001) !important;
    /*background-color: var(--dimmedBorder);*/
    background-color: var(--bgCardsHome);
    border: 1px solid var(--border_color_inputs) !important;
    border-radius: 4px;
    margin: 10px;
    display: inline-flex !important;
    align-items: center;
    align-content: center;
    justify-content: center;
    opacity: 1;
    height: min-content;
}
.home-page-horizontal-list-group-item:hover {
    cursor: pointer;
    background-color: var(--bg_layer5_highlight);
    /*color: var(--pgColor);*/
    /*background-color: green;*/
    /*text-decoration: none;*/
    /*min-width: 80%;*/
}
.home-page-horizontal-list-group {
    display: flex;
    flex-direction: row;
    padding-left: 0;
    margin-bottom: 0;
    border-radius: 0.25rem;
    flex-wrap: wrap;
    /*height: fit-content;*/
}

/*noinspection CssUnusedSymbol*/
.home-page-horizontal-list-group-spoiler {
    border-radius: 4px;
    margin: 0;
    /*padding: 5px;*/
    /*width: 210px;*/
    background-color: transparent;
}

/*HOME PAGE SUB-HEADERS WITHIN CARD --- WILL BE DIFFERENT BACKGROUND THAN THE home-page-headers */
.home-page-card-sub-headers .mantine-Divider-label {
    font-size: 14px !important;
    padding: 0 10px 0 0;
    margin: 0;
    width: 100%;
    text-transform: capitalize;
    /*border-bottom: 1px solid var(--border_color_inputs);*/
    color: var(--text_001);
    font-weight: 600;
    /*font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";*/
    /*color: var(--light_text);*/
}

/*noinspection CssUnusedSymbol*/
/*.home-page-card-sub-headers-theme-icons {*/
/*    !*border-radius: 30px;*!*/
/*    !*color: var(--pgColorOpposite);*!*/
/*    border-radius: 7px;*/
/*    padding: 4px;*/
/*    width: 25px;*/
/*    height: 25px;*/
/*    min-width: 25px;*/
/*    min-height: 25px;*/
/*    color: var(--grx-icon-green);*/
/*    !*background-color: var(--navbar_gradient2);*!*/
/*    background-color: var(--HomeIconBg);*/
/*    border: 1px solid var(--border_color_inputs);*/
/*}*/

/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/* Page: HOME PAGE NAVIGATION LINK FORMATTING */
/*noinspection CssUnusedSymbol*/
.home-page-theme-dashicons {
    margin: 5px;
    color: var(--card_background);
}

/*noinspection CssUnusedSymbol*/
.home-page-theme-icons {
    border-radius: 30px;
    /*color: transparent;*/
    /*color: var(--pgColorOpposite);*/
    color: var(--primary);
    background-color: transparent;
}

/*noinspection CssUnusedSymbol*/
.home-page-nav-link-text {
    font-size: 11px !important;
    text-decoration: none !important;
    /*color: var(--text_001);*/
    color: var(--light_2);
    margin-left: 2px;
}

/*noinspection CssUnusedSymbol*/
.home-page-nav-links {
    border: none !important;
    /*height: 25px;*/
    font-size: 11px !important;
    font-weight: 400 !important;
    /*display: inline-flex !important;*/
    width: 100% !important;
    padding: 2px 10px 2px 8px;
    margin: 1px 0;
    border-radius: 0;
    /*color: var(--text_001) !important;*/
    color: var(--light_2);
    background-color: transparent !important;
    text-decoration: none !important;
    justify-content: flex-start;
}

/*noinspection CssUnusedSymbol*/
.home-page-link-item {
    height: 30px;
    border-radius: 4px;
    font-size: 11px !important;
    text-decoration: none !important;
    color: var(--text_001) !important;
    background-color: transparent !important;
    padding: 1px 0;
    width: 100% !important;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    flex-direction: row;
}
.home-page-link-item .mantine-Button-inner {
    padding: 0;
    margin: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    flex-direction: row;
}

/*noinspection CssUnusedSymbol*/
.home-page-link-item:hover {
    color: var(--grx_green_light) !important;
    background-color: var(--dimmedBorder) !important;
    opacity: 1;
    text-decoration: none;
    min-width: 80%;
}

/*noinspection CssUnusedSymbol*/
.home-page-link-item:hover .home-page-nav-links {
    color: var(--grx_green_light) !important;
}

/*noinspection CssUnusedSymbol*/
.home-page-link-item:hover .home-page-nav-link-text {
    color: var(--grx_green_light) !important;
}

/*noinspection CssUnusedSymbol*/
.home-page-link-item:hover .home-page-theme-icons {
    background-color: var(--grx_green_light) !important;
    color: var(--navColor) !important;
    /*color: var(--grx_green) !important;*/
}

/*noinspection CssUnusedSymbol*/
.home-page-link-item-disabled {
}

/*noinspection CssUnusedSymbol*/
.home-page-link-item-disabled:hover {
    cursor: pointer;
}

/*noinspection CssUnusedSymbol*/
.home-page-nav-links-btn {
    font-size: 12px;
    font-weight: 400 !important;
    color: var(--text_001) !important;
    background-color: transparent !important;
    border-radius: 0;
    padding: 0 !important;
    margin: 0;
    border: none;
    height: inherit;
}

/*noinspection CssUnusedSymbol*/
.home-page-nav-links-btn:hover {
    border: none !important;
    color: var(--text_001) !important;
    background-color: var(--dimmedBorder) !important;
    text-decoration: none;
    opacity: 1;
    min-width: 80%;
}

/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/* Page: HOME ---- card header formatting */
/*noinspection CssUnusedSymbol*/
.home-page-section-headers {
    font-size: 18px;
    text-transform: uppercase;
    color: var(--light_text);
}

/*noinspection CssUnusedSymbol*/
.home-page-spoiler-card {
    /*height: 40vh;*/
    min-height: 400px;
    /*overflow-x: hidden;*/
    /*overflow-y: auto;*/
    border-radius: 4px;
    padding: 0.5rem;
    border: 1px solid var(--dimmedBorder);
    background-color: var(--bgCardsHome);
}

/*noinspection CssUnusedSymbol*/
.home-page-spoiler-card-content {
    /*width: 100%;*/
    /*height: 30vh;*/
    /*overflow-x: hidden;*/
    /*overflow-y: auto;*/
}
.mantine-Spoiler-content {
    margin: 0;
}
.mantine-Spoiler-control {
    -webkit-font-smoothing: antialiased;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    -webkit-tap-highlight-color: var(--text_001);
    color: var(--text_001) !important;
    font-size: 11px;
    line-height: 1.55;
    text-decoration: none;
    /*background-color: transparent;*/
    /*background-color: var(--dimmedBorder) !important;*/
    /*opacity: .7;*/
    border-top: 1px solid var(--dimmedBorder);
    cursor: pointer;
    text-align: left;
    margin: 1rem 0 0 0;
    /*padding: 5px;*/
    /*border: 0;*/
}
.mantine-Spoiler-control:hover {
    color: var(--text_001);
    opacity: 1;
    background-color: var(--dimmedBorder);
}

/* SIDE BAR STYLED CARD HOME PAGE */
/*noinspection CssUnusedSymbol*/
.side-nav-card {
    /*width: 220px;*/
    border-radius: 4px;
    padding: 0.5rem;
}

/*noinspection CssUnusedSymbol*/
.home-page-side-nav-card {
    border-radius: 4px;
    padding: 5px;
    border: 1px solid var(--dimmedBorder);
    background-color: var(--bgCardsHome);
}

/*noinspection CssUnusedSymbol*/
.home-page-col-nav {
    width: 210px;
    height: 100%;
    margin: 0;
}

/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/*!*!* TAB DESIGNS FOR THE HEADER OF THE CHART TYPE NAVBAR *!*/
/*!* USED TO MAKE EACH INDIVIDUAL LINK WITHIN THE CHART NAVIGATION DIV */
.custom-header-tab {
    background-color: white;
    color: #f2f3f5;
    font-weight: bolder;
    display: flex !important; /*!* KEY TO HAVING EACH LINK EXPAND ACROSS HORIZONTALLY */
    height: 35px;
    width: 100%;
    border-right: 1px solid #e2e4e6;
    /*border-top: 1px solid #D0D2D5;*/
    /*border-bottom: 1px solid #e2e4e6;*/
    align-items: center;
    justify-content: center;
    padding-bottom: 0.5rem;
    text-transform: uppercase;
}
.custom-header-tab:hover {
    background-color: #f0f2f4;
    text-decoration: none; /*!* PREVENT UNDERLINE OF TEXT*/
}
.custom-header-tab:focus,
.custom-header-tab:active,
.custom-header-tab.active,
.open > .dropdown-toggle.custom-header-tab {
    background-color: #d9f5c6;
    text-decoration: none;
}
.custom-header-tabs-container {
    color: #232b36;
    background-color: var(--light_0);
    text-align: center;
    align-items: center; /*!* USED TO CENTER THE ITEMS WITHIN THE DIV VERTICALLY */
    z-index: 1;
    position: fixed;
    height: 35px;
    top: 55px;
    padding: 0;
    /*padding: 0 1rem 0 1rem;*/
    left: 0;
    right: 35px;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: hidden;
    overflow-y: hidden;
    flex: 0 0 auto;
}

/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/*!* UNIVERSAL NAVBAR TRICH --- trich comp carousel*/
/*noinspection CssUnusedSymbol*/
.charting_navbar_trich_carousel {
    background-color: var(--carosel_colorBackground);
    border-bottom: 1px solid var(--border_color_inputs);
    position: fixed;
    height: var(--height-navbarCharts);
    top: var(--height-navbarMaster);
    padding: 0 var(--width-column-sidebarRight);
    left: 0;
    right: 0;
    /*text-align: center;*/
    /*align-items: center;  !*!* USED TO CENTER THE ITEMS WITHIN THE DIV VERTICALLY *!*/
    /*z-index: 1;*/
    /*display: flex;*/
    /*flex-wrap: nowrap;*/
    /*overflow-x: hidden;*/
    /*overflow-y: hidden;*/
    /*flex: 0 0 auto;*/
}

/*noinspection CssUnusedSymbol*/
.slick-prev,
.slick-next {
    margin: 0 !important;
    /*background-color: #D0D2D5 !important;*/
    /*background-color: #c1c1c1 !important;*/
    /*border-bottom: 1px solid #e2e4e6;*/
    color: var(--pgColorOpposite) !important;
    height: 100% !important;
    width: 25px !important;
    display: inline-flex !important;
    text-align: center;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

/*noinspection CssUnusedSymbol*/
.slick-prev:before,
.slick-next:before {
    font-size: 1rem !important;
    /* font-weight: 900 !important; */
    line-height: 1 !important;
    color: var(--pgColorOpposite) !important;
    /*color: #232B36!important;*/
    opacity: 0.75 !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\f053";
}

/*noinspection CssUnusedSymbol*/
.slick-arrow:hover {
    /*color: #ffffff !important;*/
}

/*noinspection CssUnusedSymbol*/
.slick-prev:hover,
.slick-next:hover {
    /*opacity: .7 !important;*/
    /*background-color: #D0D2D5 !important;*/
    /*border-bottom: 1px solid #e2e4e6;*/
}

/*noinspection CssUnusedSymbol*/
.carousel_popover {
    font-size: 10px;
    color: var(--text_001);
    border: 1px solid var(--border_color);
    background-color: var(--bg_inputs);
    border-radius: 3px;
    padding: 1px;
}


/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/* Navbar Mantine Navbar Menu Item --- Styling the Icon within the drop down menu */
/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/*noinspection CssUnusedSymbol*/
.navbar-menu-item-icon {
    height: 18px;
    width: 18px;
}

/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/*!* NEW STYLING FOR CHART NAVIGATION BAR*/
/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/*noinspection CssUnusedSymbol*/
.navbar_icon {
    background-color: transparent;
    border-radius: 4px;
    display: flex !important; /*!* KEY TO HAVING EACH LINK EXPAND ACROSS HORIZONTALLY */
    margin: 5px;
    height: 25px;
    padding: 3px;
    width: auto;
    /*height: 100%;*/
    /*width: 3.5vh;*/
    /*box-shadow: 0 0 7px 2px rgb(0 0 0 / 20%);*/
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
}

/*noinspection CssUnusedSymbol*/
.navbar_icon:hover {
    background-color: var(--pgColor);
    box-shadow: 0 0 7px 2px rgb(0 0 0 / 20%);
}

/*noinspection CssUnusedSymbol*/
.navbar_icon:focus,
.navbar_icon:active,
.navbar_icon.active,
.open > .dropdown-toggle.navbar_icon {
    /*background-color: #d9f5c6;*/
    background-color: var(--grx_green_light);
    box-shadow: 0 0 8px 2px rgb(0 0 0 / 20%);
    text-decoration: none;
}

/*noinspection CssUnusedSymbol*/
.navbar_icon.active {
    background-color: var(--grx_green_light);
    box-shadow: 0 0 8px 2px rgb(0 0 0 / 20%);
    text-decoration: none;
}

/*DISABLED ROW LINE ITEM IN DROP DOWN*/
/*noinspection CssUnusedSymbol*/
.VirtualizedSelectDisabledOption {
    text-decoration: none;
    background-color: #3e4754;
    color: white;
}
/*REFERS TO THE DBC.INPUT DROPDOWN FIELD*/
/*noinspection CssUnusedSymbol*/
.form-control:focus {
    box-shadow: none;
}

/*noinspection CssUnusedSymbol*/
.form-control:disabled,
.form-control[readonly] {
    /*background-color: #ffffff;*/
    background-color: var(--bg_inputs);
    opacity: 0.5;
}
/*REFERS TO THE DBC.SELECT DROPDOWN FIELD*/
.custom-select:focus {
    box-shadow: none;
}
/*REFERS TO THE DBC.INPUT DROPDOWN FIELD*/
.select_input_box:disabled {
    background-color: var(--bg_inputs);
    /*background-color: #054788;*/
    box-shadow: none;
}
.select_input_box::placeholder {
    opacity: 0.6;
    box-shadow: none;
}
.select_input_box {
    text-align: left;
    padding: 6px 10px;
    background-color: var(--bgColor) !important;
    border: 1px solid var(--border_color_inputs) !important;
    border-radius: 1px;
    box-shadow: none;
    box-sizing: border-box;
    font-family: inherit;
    height: 26px;
}

.select_input_box.invalid {
    /*background-color: #00ba5b;*/
    border: 1px solid var(--warning_red) !important;
}

/*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/*!* FORMAT OF PILLS THAT ARE USED TO SHOW THE COUNT OF FILTERS IN EACH CATEGORY*/
/*noinspection CssUnusedSymbol*/
.my-div-pill-style {
    font-family: Arial, sans-serif;
    text-transform: capitalize;
    height: 1.8rem;
    min-width: 1.8rem;
    max-width: 14rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    letter-spacing: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding: 0.1rem 0.5rem 0;
    border-radius: 5px;
    align-content: stretch;
    display: block;
    vertical-align: middle;
    text-align: center;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

/*noinspection CssUnusedSymbol*/
.my-div-pill-std {
    background-color: transparent;
    color: #91959a;
    /*background-color: #91959a;*/
    /*color: white;*/
}

/*noinspection CssUnusedSymbol*/
.my-div-pill-info {
    background-color: #7ac3e2;
    color: white;
}

/*noinspection CssUnusedSymbol*/
.my-div-pill-issue {
    background-color: #f6717f;
    color: white;
    font-size: 110%;
    font-weight: 600;
    /*letter-spacing: 0;*/
}

/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/*!* CUSTOM LIST GROUP FOR THE FILTER SUMMARY */
.my-filter-list-group-header {
    color: var(--text_001);
    background-color: var(--card_background);
    border-color: var(--border_color) !important;
    border-width: 1px 1px 0 1px;
    border-radius: 0 !important;
    position: relative;
    display: inline-flex;
    padding: 2px 5px;
    font-weight: 500;
    text-decoration: none;
    /*border-top: 1px solid var(--border_color_inputs);*/
    /*border-bottom: 1px solid var(--border_color_inputs);*/
    margin-bottom: 0;
    margin-top: 0;
    justify-content: space-between;
    align-items: center;
}
.my-filter-list-group-header:hover {
    color: var(--text_001);
    background-color: var(--card_background);
}
.my-filter-list-group {
    color: var(--text_001);
    background-color: var(--bg_inputs);
    border-color: var(--border_color) !important;
    border-width: 0 1px 1px 1px;
    border-radius: 0 !important;
    position: relative;
    display: block;
    padding: 1px 2px 1px 10px !important;
    text-decoration: none;
    /*border-top: 1px solid var(--border_color_inputs);*/
    /*border-bottom: 1px solid var(--border_color_inputs);*/
    margin-bottom: 0;
    margin-top: 0;
}
.my-filter-list-group:hover {
    color: var(--text_001);
    background-color: var(--bg_inputs);
    opacity: 0.6;
}

/*noinspection CssUnusedSymbol*/
.custom_filter_btn {
    color: var(--pgColorOpposite) !important;
    background-color: transparent !important;
    border-radius: 4px !important;
    border: 1px solid var(--pgColorOpposite) !important;
    padding: 1px 5px 1px 5px !important;
    /*font-family: Arial, sans-serif;*/
    font-weight: 500 !important;
    font-size: 11px !important;
    line-height: 1 !important;
    height: 22px !important;
    display: inline-block !important;
    width: auto !important;
    position: relative !important;
    /*user-select: none !important;*/
    /*box-sizing: border-box;*/
    /*!*text-decoration: none;*!*/
    /*cursor: pointer;*/
    /*!*appearance: none;*!*/
}

/*noinspection CssUnusedSymbol*/
.custom_filter_btn:hover {
    color: var(--bgColor) !important;
    background-color: var(--pgColorOpposite) !important;
}

/*noinspection CssUnusedSymbol*/
.custom_filter_btn .mantine-Button-inner {
    width: 100% !important;
    padding: 0 5px !important;
    font-weight: 400 !important;
    height: 100%;
    display: inline-flex;
    -webkit-box-align: center;
    -webkit-box-pack: center;
    justify-content: center;
    overflow: visible;
    flex-wrap: wrap;
    align-content: center;
}

/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/*!* CUSTOM EXPORT TO EXCEL BUTTON*/
.export {
    border: 1px solid var(--pgColorOppositeTransparent);
    background: transparent;
    color: var(--pgColorOppositeLight);
    font-size: 90%;
    font-weight: normal;
    align-content: end;
    /* display: inline-block !important; */
    box-shadow: none;
    text-align: center;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border-radius: 3px;
    margin: 0 0 2px 0;
}
.export:hover,
.export:focus,
.export:active,
.export.active,
.open > .dropdown-toggle.export {
    border: 1px solid var(--grx_green);
    background: var(--navColor);
    color: var(--grx_green);
}
.export:active .open > .dropdown-toggle.export {
    border: 1px solid var(--grx_green);
    background: var(--navColor);
    color: var(--grx_green);
    box-shadow: none;
}
.grx-switch {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/* User Input Labels for each input */
/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
.grx-input-labels {
    color: var(--text_002);
    font-size: 12px !important;
    font-weight: 450;
    line-height: 1.55;
    text-decoration: none;
    text-transform: inherit;
    text-align: left;
    /* when text overflows, show elipsis    */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.grx-color-legend-labels {
    color: var(--text_002);
    font-size: 12px;
    line-height: 1.55;
    text-decoration: none;
    text-transform: inherit;
    text-align: left;
    /* make the text cut off when larger than the available space and have ellipsis */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /*make the text cut off when larger than the available space and have elipsis */
}
.grx-color-legend-box-labels {
    /*color: var(--text_001);*/
    font-size: 9px;
    line-height: 1.55;
    text-decoration: none;
    text-transform: inherit;
    text-align: center;
    padding: 0 1px;
    margin: 0;
    /* make the text cut off when larger than the available space and have ellipsis */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.grx-color-legend-box {
    height: 1.7rem;
    text-align: center;
    padding: 0;
    margin: 0;
    /*!* make the text cut off when larger than the available space and have ellipsis *!*/
    display: flex;
    align-items: center;
    justify-content: center;
}
.grx-color-legend-color-box {
    height: 1.7rem;
    width: 100%;
    text-align: center;
    padding: 0 5px;
    margin: 0;
    /*!* make the text cut off when larger than the available space and have ellipsis *!*/
    /*display: flex;*/
    /*align-items: center;*/
    /*justify-content: center;*/
}

.grx-input-label-and-icon-group {
    box-sizing: border-box;
    display: flex;
    flex-flow: wrap;
    -webkit-box-align: center;
    align-items: center;
    gap: 1px;
    flex-wrap: nowrap;
    flex-direction: row;
    width: inherit;
    align-content: center;
    justify-content: flex-start;
}

.grx-input-labels-text {
    color: var(--text_001);
    font-size: 12px !important;
    font-weight: bold;
    line-height: 1.55;
    text-decoration: none;
    text-transform: inherit;
    text-align: left;
}
.grx-input-label-and-astrisk {
    font-size: 12px !important;
    font-weight: 450;
    box-sizing: border-box;
    display: flex;
    flex-flow: wrap;
    -webkit-box-align: center;
    align-items: center;
    gap: 1px;
    flex-wrap: nowrap;
    flex-direction: row;
    width: inherit;
    align-content: center;
    justify-content: flex-start;
}
.grx-input-labels-warning {
    color: var(--warning_red_button);
    font-size: 11px !important;
    font-style: italic;

    /*font-weight: bold;*/
    padding: 0 5px;
    line-height: 1.55;
    text-decoration: none;
    text-transform: inherit;
    text-align: left;
}
.custom-legend-bar-text {
    color: var(--text_001);
    font-size: 12px;
    line-height: 1.55;
    text-decoration: none;
    text-transform: inherit;
    text-align: left;
    /* make the text cut off when larger than the available space and have ellipsis */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /*make the text cut off when larger than the available space and have elipsis */
}
.grx-color-legend-row {
    width: 100%;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.grx-color-legend-box {
    padding: 0;
    margin: 0;
    /*border: 1px solid var(--border_color_inputs);*/
}
.grx-color-legend-icon {
    display: flex;
    align-items: center;
    font-size: 15px;
}
.grx-color-legend-tooltip .mantine-Tooltip-tooltip {
    font-size: 10px !important;
    color: var(--text_001);
    background-color: var(--bgCarosel);
    border: 1px solid var(--border_color_inputs);
    border-radius: 3px;
    padding: 5px;
    offset: 10px;
}
.widget-stacked-container {

}

/* Format Radio items dcc.RadioItems*/
.my_radio {
    font-size: 11px;
    display: inline-flex !important;
    align-items: center;
    justify-content: flex-start;
}
.my_radio > label {
    display: inline-flex !important;
    align-items: center;
    justify-content: flex-start;
    color: var(--text_001);
}

.my_radio input[type="radio" i] {
    background-color: initial;
    cursor: default;
    appearance: auto;
    box-sizing: border-box;
    margin: 0 5px !important;
    padding: initial;
    border: initial;
}

/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/* FORMAT SLIDER */
/*noinspection CssUnusedSymbol*/
.rc-slider {
    position: relative;
    height: 14px;
    /*padding: 5px 0;*/
    padding: 0;
    width: 100%;
    border-radius: 6px;
    /*touch-action: none;*/
    box-sizing: border-box;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/*noinspection CssUnusedSymbol*/
.rc-slider-handle {
    cursor: grab;
    position: absolute;
    border-radius: 50%;
    width: 10px;
    height: 10px;
    margin-top: -3px;
    background-color: var(--bg_inputs);
    border-color: var(--icon_blue) !important;
    border-width: 0.15rem;
    box-shadow: none !important;
    /*touch-action: pan-x;*/
}

/*noinspection CssUnusedSymbol*/
.rc-slider-handle:hover .rc-slider-handle:focus .rc-slider-handle:active {
    border-color: var(--icon_blue);
    background-color: var(--icon_blue);
}

/*noinspection CssUnusedSymbol*/
.rc-slider-handle-click-focused:focus {
    border-color: var(--icon_blue);
    box-shadow: none;
}

/*noinspection CssUnusedSymbol*/
.rc-slider-handle:disabled {
    background-color: var(--DisabledInputs);
    border-color: var(--DisabledInputs);
}

/*noinspection CssUnusedSymbol*/
.rc-slider-rail {
    height: 5px;
    color: var(--text_001) !important;
    position: absolute;
    width: 100%;
    background-color: var(--slider_rail_color);
    border-radius: 0;
}

/*noinspection CssUnusedSymbol*/
.rc-slider-track {
    /*height: 11px;*/
    position: absolute;
    left: 0;
    border-radius: 0;
    background-color: var(--icon_blue);
}

/*noinspection CssUnusedSymbol*/
.rc-slider-disabled .rc-slider-track {
    background-color: var(--border_color_inputs);
    border-color: var(--border_color_inputs);
}

/*noinspection CssUnusedSymbol*/
.rc-slider-disabled .rc-slider-handle,
.rc-slider-disabled .rc-slider-dot {
    border-color: var(--border_color_inputs) !important;
    box-shadow: none;
    background-color: var(--border_color_inputs) !important;
    cursor: default;
}

/*noinspection CssUnusedSymbol*/
.rc-slider-dot {
    position: absolute;
    margin-left: -3px;
    width: 8px;
    height: 8px;
    bottom: -2px;
    border: 0.15rem solid var(--slider_rail_color);
    background-color: var(--sb_active_color);
    opacity: 1;
    border-radius: 50%;
    vertical-align: middle;
}

/*noinspection CssUnusedSymbol*/
.rc-slider-dot-active {
    position: absolute;
    border: 0.15rem solid var(--icon_blue);
    background-color: var(--icon_blue);
    opacity: 1;
    border-radius: 50%;
    vertical-align: middle;
}

/*noinspection CssUnusedSymbol*/
.rc-slider-mark-text {
    color: var(--text_001);
    background-color: transparent;
    padding: 0 2px;
    border-radius: 4px;
    opacity: 0.65;
    margin-top: -1px;
    /*  prevent text wrapping */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*noinspection CssUnusedSymbol*/
.rc-slider-mark-text-active {
    color: var(--icon_blue);
    font-weight: 650;
    opacity: 1;
}

/*noinspection CssUnusedSymbol*/
.rc-slider-mark {
    color: var(--text_001) !important;
    position: absolute;
    top: 8px;
    /*top: 12px;*/
    left: 0;
    width: 100%;
    font-size: 10px;
}

/*noinspection CssUnusedSymbol*/
.rc-slider-disabled {
    background-color: transparent;
}

/*noinspection CssUnusedSymbol*/
.rc-slider-tooltip-inner {
    padding: 2px 4px;
    min-width: 100%;
    height: 100%;
    font-size: 9px;
    line-height: 1;
    color: #fff;
    text-align: center;
    text-decoration: none;
    background-color: var(--icon_blue);
    border-radius: 4px;
    box-shadow: 0 0 4px var(--icon_blue);
}

/*noinspection CssUnusedSymbol*/
.rc-slider-disabled .rc-slider-tooltip-inner {
    background-color: var(--border_color_inputs);
    box-shadow: 0 0 4px var(--border_color_inputs);
}


.grx-standard-slider {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    padding: 2px !important;
}

/*noinspection CssUnusedSymbol*/
.grx-standard-slider .rc-slider {
    position: relative;
    height: 14px;
    /*padding: 5px 0;*/
    padding: 0;
    width: 100%;
    border-radius: 6px;
    /*touch-action: none;*/
    box-sizing: border-box;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/*noinspection CssUnusedSymbol*/
.grx-standard-slider .rc-slider-handle {
    cursor: grab;
    position: absolute;
    border-radius: 2px;
    width: 10px;
    height: 10px;
    margin-top: 0;
    background-color: var(--bg_inputs);
    border-color: var(--icon_blue) !important;
    border-width: 0.15rem;
    box-shadow: none !important;
    /*touch-action: pan-x;*/
}

/*noinspection CssUnusedSymbol*/
.grx-standard-slider .rc-slider-handle:hover,
.grx-standard-slider .rc-slider-handle:focus,
.grx-standard-slider .rc-slider-handle:active {
    border-color: var(--icon_blue);
    background-color: var(--bg_inputs);
}

/*noinspection CssUnusedSymbol*/
.grx-standard-slider .rc-slider-handle-click-focused:focus {
    border-color: var(--icon_blue);
    box-shadow: none;
}

/*noinspection CssUnusedSymbol*/
.grx-standard-slider .rc-slider-handle:disabled {
    background-color: var(--DisabledInputs);
    border-color: var(--DisabledInputs);
}

/*noinspection CssUnusedSymbol*/
.grx-standard-slider .rc-slider-rail {
    height: 10px;
    color: var(--text_001) !important;
    position: absolute;
    width: 100%;
    background-color: var(--slider_rail_color);
    border-radius: 0;
}

/*noinspection CssUnusedSymbol*/
.grx-standard-slider .rc-slider-track {
    height: 10px;
    position: absolute;
    left: 0;
    border-radius: 0;
    background-color: var(--icon_blue);
}

/*noinspection CssUnusedSymbol*/
.grx-standard-slider .rc-slider-disabled .rc-slider-track {
    background-color: var(--border_color_inputs);
    border-color: var(--border_color_inputs);
}

/*noinspection CssUnusedSymbol*/
.grx-standard-slider .rc-slider-disabled .rc-slider-handle,
.grx-standard-slider .rc-slider-disabled .rc-slider-dot {
    border-color: var(--border_color_inputs) !important;
    box-shadow: none;
    background-color: var(--border_color_inputs) !important;
    cursor: default;
}

/*noinspection CssUnusedSymbol*/
.grx-standard-slider .rc-slider-dot {
    position: absolute;
    margin-left: -3px;
    width: 8px;
    height: 8px;
    bottom: -2px;
    border: 0.15rem solid var(--slider_rail_color);
    background-color: var(--sb_active_color);
    opacity: 1;
    border-radius: 50%;
    vertical-align: middle;
}

/*noinspection CssUnusedSymbol*/
.grx-standard-slider .rc-slider-dot-active {
    position: absolute;
    border: 0.15rem solid var(--icon_blue);
    background-color: var(--icon_blue);
    opacity: 1;
    border-radius: 50%;
    vertical-align: middle;
}

/*noinspection CssUnusedSymbol*/
.grx-standard-slider .rc-slider-mark-text {
    color: var(--text_001);
    background-color: transparent;
    padding: 0 2px;
    border-radius: 4px;
    opacity: 0.65;
    margin-top: -1px;
}

/*noinspection CssUnusedSymbol*/
.grx-standard-slider .rc-slider-mark-text-active {
    color: var(--icon_blue);
    font-weight: 650;
    opacity: 1;
}

/*noinspection CssUnusedSymbol*/
.grx-standard-slider .rc-slider-mark {
    color: var(--text_001) !important;
    position: absolute;
    top: 8px;
    left: 0;
    width: 100%;
    font-size: 10px;
}

/*noinspection CssUnusedSymbol*/
.grx-standard-slider .rc-slider-disabled {
    background-color: transparent;
}

/*noinspection CssUnusedSymbol*/
.grx-standard-slider .rc-slider-tooltip-inner {
    padding: 2px 4px;
    min-width: 100%;
    height: 100%;
    font-size: 9px;
    line-height: 1;
    color: #fff;
    text-align: center;
    text-decoration: none;
    background-color: var(--icon_blue);
    border-radius: 4px;
    box-shadow: 0 0 4px var(--icon_blue);
}

/*noinspection CssUnusedSymbol*/
.grx-standard-slider .rc-slider-disabled .rc-slider-tooltip-inner {
    background-color: var(--border_color_inputs);
    box-shadow: 0 0 4px var(--border_color_inputs);
}



/*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/*!* CUSTOM SUBMIT CHANGES ON USER TAB S*/
.custom-user-button {
    /*height: 49px;*/
    background: #1f9bcf;
    color: white;
    border: 2px solid #1f9bcf;
    margin-top: -4px;
    font-size: 80%;
    font-weight: bold;
    display: inline-block !important;
    width: 100%;
    text-align: center;
    align-items: center;
    justify-content: center;
}
.custom-user-button:hover,
.custom-user-button:focus,
.custom-user-button:active,
.custom-user-button.active,
.open > .dropdown-toggle.custom-user-button {
    background: white;
    color: #1f9bcf;
    border: 2px solid #1f9bcf;
}
.custom-user-button:active .open > .dropdown-toggle.custom-user-button {
    background: white;
    color: #1f9bcf;
    border: 2px solid #1f9bcf;
    box-shadow: none;
}

/*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/*!* CUSTOM SUBMIT CHANGES ON USER TAB S*/
.settings-page-button {
    /*height: 49px;*/
    background: var(--blue_alert);
    color: white;
    /*border: 1px solid var(--blue_alert);*/
    /*margin-top: -4px;*/
    border-radius: 4px;
    font-size: 80%;
    font-weight: bold;
    display: inline-block !important;
    width: 100%;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
    text-align: center;
    align-items: center;
    justify-content: center;
}
.settings-page-button:hover,
.settings-page-button:focus,
.settings-page-button:active,
.settings-page-button.active,
.open > .dropdown-toggle.settings-page-button {
    background: var(--blue_alert-opaque);
    color: white;
    -ms-transform: scale(1.01);
    transform: scale(1.01);
    /*border: 1px solid #232b36;*/
    /*increase size of button*/
    box-shadow: none;
}
.settings-page-button:active .open > .dropdown-toggle.settings-page-button {
    /*background: var(--blue_alert-opaque);*/
    background: #232b36;
    color: white;
    border: 1px solid #232b36;
    box-shadow: none;
}

/*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/*!* CUSTOM CLEAR FILTER BUTTON CHART BUTTON FOR CHART PAGES/TABS*/
.customer-clear-filter-button {
    color: darkred;
    border: 2px solid darkred;
    /*font-size: 75%;*/
    font-weight: bold;
    display: inline-block !important;
    width: 100%;
    text-align: center;
    align-items: start;
    justify-content: start;
}
.customer-clear-filter-button:hover,
.customer-clear-filter-button:focus,
.customer-clear-filter-button:active,
.customer-clear-filter-button.active,
.open > .dropdown-toggle.customer-clear-filter-button {
    background: darkred;
    color: white;
    border: 2px solid darkred;
}
.customer-clear-filter-button:active,
.open,
> .dropdown-toggle.customer-clear-filter-button {
    background: darkred;
    color: white;
    border: 2px solid darkred;
    box-shadow: none;
}

/*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/* Section Titles >>> Hover Descriptions & Icon */
/*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
.hover-descr-card {
    display: flex;
    align-items: center;
    justify-content: center;
}
/* the actual hover card that pops up */
/*noinspection CssUnusedSymbol*/
.mantine-HoverCard-dropdown {
    background-color: #00ba5b;
    padding: 5px 10px !important;
    font-size: 10px !important;
    min-height: 25px;
    /*width: 275px !important;*/
    max-width: 275px !important;
    min-width: 175px !important;
    border: 1px solid var(--border_color_inputs);
    background: var(--bg_layer6);
    /* center text vertically */
    display: flex;
    align-items: center;
    box-shadow: 1px 2px 4px rgb(var(--rgb-shadow) / 35%);
    border-radius: 4px;
}
/* make the dmc.Text components within the dropdown card to be 10px */
.mantine-HoverCard-dropdown .mantine-Text-root {
    font-size: var(--mantine-font-size-sm);
}
/* Hover card small arrow */
/*noinspection CssUnusedSymbol*/
.mantine-HoverCard-dropdown .mantine-HoverCard-arrow {
    border: 1px solid var(--border_color_inputs);
}

/*noinspection CssUnusedSymbol*/
.hover-descr-card-iconify {
    color: rgb(var(--rgb-values-alert-blue) / 55%);
    border-radius: 100%;
    padding: 0;
}
/*when hover make the color and scale up */
/*noinspection CssUnusedSymbol*/
.hover-descr-card-iconify:hover {
    color: white;
    background: var(--blue_alert);
}
.hover-descr-card-icon {
    background: transparent !important;
    font-size: 15px;
    width: 18px;
    height: 18px;
    min-height: 18px;
    min-width: 18px;
    padding: 0;
    margin: 5px;
}

/*.hover-descr-card {*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*}*/
/*!* the actual hover card that pops up *!*/
/*!*noinspection CssUnusedSymbol*!*/
/*.hover-descr-card.mantine-HoverCard-dropdown {*/
/*    background-color: #00ba5b;*/
/*    padding: 5px 10px !important;*/
/*    font-size: 10px;*/
/*    min-height: 25px;*/
/*    !*width: 275px !important;*!*/
/*    max-width: 275px !important;*/
/*    min-width: 175px !important;*/
/*    border: 1px solid var(--border_color_inputs);*/
/*    background: var(--bg_layer6);*/
/*    !* center text vertically *!*/
/*    display: flex;*/
/*    align-items: center;*/
/*    box-shadow: 1px 2px 4px rgb(var(--rgb-shadow) / 35%);*/
/*    border-radius: 4px;*/
/*}*/
/*!* Hover card small arrow *!*/
/*!*noinspection CssUnusedSymbol*!*/
/*.hover-descr-card.mantine-HoverCard-dropdown .mantine-HoverCard-arrow {*/
/*    border: 1px solid var(--border_color_inputs);*/
/*}*/

/*!*noinspection CssUnusedSymbol*!*/
/*.hover-descr-card-iconify {*/
/*    color: rgb(var(--rgb-values-alert-blue) / 55%);*/
/*    border-radius: 100%;*/
/*    padding: 0;*/
/*}*/
/*!*when hover make the color and scale up *!*/
/*!*noinspection CssUnusedSymbol*!*/
/*.hover-descr-card-iconify:hover {*/
/*    color: white;*/
/*    background: var(--blue_alert);*/
/*}*/
/*.hover-descr-card-icon {*/
/*    background: transparent !important;*/
/*    font-size: 15px;*/
/*    width: 18px;*/
/*    height: 18px;*/
/*    min-height: 18px;*/
/*    min-width: 18px;*/
/*    padding: 0;*/
/*    margin: 5px;*/
/*}*/
/*.hover-descr-card-dropdown.mantine-HoverCard-dropdown {*/
/*  padding: 5px 10px !important;*/
/*  font-size: 11px;*/
/*  min-height: 25px;*/
/*  width: unset !important;*/
/*  max-width: 275px !important;*/
/*  min-width: 175px !important;*/
/*  border: 1px solid var(--border_color_inputs);*/
/*  background: var(--sb_active_color);*/
/*  !* center text vertically *!*/
/*  display: flex;*/
/*  align-items: center;*/
/*}*/
/*.hover-descr-card-title {*/
/*  font-size: 10px;*/
/*  font-weight: bold;*/
/*  width: 100%;*/
/*  height: 100%;*/
/*  color: var(--text_001);*/
/*  display: flex;*/
/*  align-items: center;*/
/*  justify-content: center;*/
/*}*/
/*.hover-descr-card-text {*/
/*  font-size: 9px;*/
/*  color: var(--text_001);*/
/*  height: 100%;*/
/*  display: flex;*/
/*  max-width: 275px !important;*/
/*  min-width: 175px !important;*/
/*  align-items: center;*/
/*  justify-content: center;*/
/*}*/
/*.hover-descr-card-icon {*/
/*  border-radius: 15px;*/
/*  font-size: 15px;*/
/*  width: 18px;*/
/*  height: 18px;*/
/*  min-height: 18px;*/
/*  min-width: 18px;*/
/*  padding: 0;*/
/*}*/
/*.hover-descr-card-icon:hover {*/
/*  background: var(--sb_active_color);*/
/*  color: var(--pgColorOpposite);*/
/*}*/

/*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/* warning hover card */

.warning-hover-card {
    display: flex;
    align-items: center;
    justify-content: center;
}

/*noinspection CssUnusedSymbol*/
.warning-hover-card.mantine-HoverCard-arrow {
    border: 1px solid var(--border_color_inputs);
}

/*noinspection CssUnusedSymbol*/
.warning-hover-card-dropdown.mantine-HoverCard-dropdown {
    padding: 5px 10px !important;
    font-size: 11px;
    min-height: 25px;
    width: unset !important;
    max-width: 275px !important;
    min-width: 175px !important;
    border: 1px solid var(--border_color_inputs);
    background: var(--sb_active_color);
    /* center text vertically */
    display: flex;
    align-items: center;
}
.warning-hover-card-title {
    font-size: 10px;
    font-weight: bold;
    width: 100%;
    height: 100%;
    color: var(--text_001);
    display: flex;
    align-items: center;
    justify-content: center;
}
.warning-hover-card-text {
    font-size: 9px;
    color: var(--text_001);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.warning-hover-card-icon {
    border-radius: 15px;
    font-size: 15px;
    width: 18px;
    height: 18px;
    min-height: 18px;
    min-width: 18px;
    padding: 0;
}
.warning-hover-card-icon:hover {
    background: var(--sb_active_color);
    color: var(--pgColorOpposite);
}

/*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/*!* HOME PAGE LINK TO REPORTS/ANALYTICS*/
/*noinspection CssUnusedSymbol*/
.reporting-link-btn {
    background: #7e92ac;
    color: white;
    /*color: #232B36;*/
    font-size: 80%;
    text-transform: capitalize;
    font-weight: bold;
    display: inline-block !important;
    width: 100%;
    text-align: center;
    align-items: center;
    justify-content: center;
}

/*noinspection CssUnusedSymbol*/
.reporting-link-btn:hover,
.reporting-link-btn:focus,
.reporting-link-btn:active,
.reporting-link-btn.active,
.open > .dropdown-toggle.reporting-link-btn {
    background: #a2b4cb;
    color: #232b36;
}

/*noinspection CssUnusedSymbol*/
.reporting-link-btn:active .open > .dropdown-toggle.reporting-link-btn {
    background: #a2b4cb;
    color: #232b36;
    box-shadow: none;
}

/*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/*/* RADIO BUTTONS - FORMATTING FROM https://dash-bootstrap-components.opensource.faculty.ai/docs/components/button_group/ */
/* restyle radio items */
.radio-group .form-check {
    flex: 1 1 0;
    padding-left: 0;
    margin-top: 0;
    margin-bottom: 0.1rem;
}
.radio-group .btn-group > .form-check:not(:last-child) > .btn {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.radio-group .btn-group > .form-check:not(:first-child) > .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin-left: 0;
}

/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/*/* CHANGE COLOR OF PRIMARY BUTTON  ---- THIS IS SOMEHOW LINKED TO RADIO buttons*/
.btn-primary {
    color: #212529;
    background-color: #7e92ac;
    border-color: #7e92ac;
    /*letter-spacing: 0.1rem;*/
    box-shadow: none;
    transition: none;
}
.btn-primary:hover {
    color: white;
    box-shadow: none;
}
/*!* COLOR OF BUTTON WHEN ITS NOT SELECTED BUT IS AN OPTION*!*/
.btn-primary:not(:disabled) {
    color: #232b36;
    background-color: white;
    border-color: white;
}
/*!* COLOR OF BUTTON WHEN ITS NOT SELECTED BUT IS AN OPTION*!*/
.btn-primary:not(:disabled):hover {
    box-shadow: none;
    color: #212529;
    background-color: #afc4de;
    border-color: #afc4de;
}
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
    color: white;
    background-color: #7e92ac;
    border-color: #7e92ac;
}
.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-primary.dropdown-toggle:focus {
    box-shadow: none;
    color: #212529;
    background-color: #afc4de;
    border-color: #afc4de;
}
.btn-outline-primary {
    color: #212529;
    background-color: transparent;
    border-color: #7e92ac;
    box-shadow: none;
    letter-spacing: 0;
    /*letter-spacing: 0.1rem;*/
    transition: none;
}
.btn-outline-primary:hover {
    color: white;
    box-shadow: none;
}
/*!* COLOR OF BUTTON WHEN ITS NOT SELECTED BUT IS AN OPTION*!*/
.btn-outline-primary:not(:disabled) {
    color: #232b36;
    background-color: transparent;
    border-color: #7e92ac;
}
/*!* COLOR OF BUTTON WHEN ITS NOT SELECTED BUT IS AN OPTION*!*/
.btn-outline-primary:not(:disabled):hover {
    box-shadow: none;
    color: #212529;
    background-color: #afc4de;
    border-color: #afc4de;
}
.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.show > .btn-outline-primary.dropdown-toggle {
    color: white;
    background-color: #7e92ac;
    border-color: #7e92ac;
}
.btn-outline-primary:not(:disabled):not(.disabled):active:focus,
.btn-outline-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-primary.dropdown-toggle:focus {
    box-shadow: none;
    color: #212529;
    background-color: #afc4de;
    border-color: #afc4de;
}

/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/*!* TAB DESIGNS FOR THE HEADER OF THE CARDS */
/* https://dash.plotly.com/dash-core-components/tabs */
.custom-tabs-container {
    margin: 0;
    padding: 0;
    border-radius: var(--grx-border-radius-extra) var(--grx-border-radius-extra) 0 0;
    width: 35%;
    min-width: 400px;
    /*height: 25px;*/
    /*height: 3vh;*/
    /*background-color: var(--navColor);*/
    /*background-color: var(--HomeIconBg);*/
}
.custom-tabs {
    height: 25px;
    width: 100%;
    border-radius: var(--grx-border-radius-extra) var(--grx-border-radius-extra) 0 0;
    margin: 0;
    padding: 0;
    line-height: 100%;
    border-bottom: 2px solid var(--bg_layer0);
    /*background-color: var(--navColor) !important;*/
    background-color: var(--bg_layer3) !important;
    vertical-align: bottom;
    text-transform: capitalize;
    -webkit-transition: none;
}
.custom-tab {
    height: 25px;
    padding: 0 !important;
    border-top: 0 solid var(--bg_layer0) !important;
    border-left: 0 solid var(--bg_layer0) !important;
    border-right: 0 solid var(--bg_layer0) !important;
    border-bottom: 2px solid var(--bg_layer0) !important;
    margin-bottom: -2px;
    /*border-width: 0 0 2px 0 !important;*/
    color: var(--card_text) !important;
    /*background-color: transparent !important;*/
    background-color: var(--bg_layer3) !important;
    /*background-color: var(--navColor) !important;*/
    /*background-color: rgba(var(--rgb-navbar-1) / 1) !important;*/
    font-weight: 500 !important;
    font-size: 13px !important;
    text-transform: uppercase;
    vertical-align: bottom;
    -webkit-transition: none;
    /*border-color: var(--bg_layer0) !important;*/
    /*border-width: 1px 1px 0 1px !important;*/
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: var(--grx-border-radius) var(--grx-border-radius) 0 0;
    /* Create inverted pentagon shape */
}
.custom-tab:hover {
    color: rgba(var(--rgb-standard-blue) / 1) !important;
    border-bottom: 2px solid rgba(var(--rgb-standard-blue) / .3) !important;
    margin-bottom: -2px;
    /*background-color: rgba(var(--rgb-navbar-2) / 1) !important;*/
    /*background-color: rgba(var(--rgb-navbar-2) / 1) !important;*/
    /*color: rgba(var(--rgb-white) / 1) !important;*/
}
.custom-tab--selected, .custom-tab--selected:hover {
    color: rgba(var(--rgb-standard-blue) / 1) !important;
    /*background-color: var(--bg_layer3) !important;*/
    /*color: var(--card_text) !important;*/
    border-bottom: 2px solid var(--blue_alert) !important;
    /*border-top: 1px solid #98c13e !important;*/
    /*border-bottom: none !important;*/
    -webkit-transition: none;
}


/*
# height of the coclumn within the tab card (sidebar column & chart column)
55px - for navigation bar
35px - for chart carosel chooser
25px - for tab name headers
1rem - for padding of the entire tab card (its only for bottom)
2rem - padding of tab_card_body (includes 1rem top and 1rem bottom)
  height: calc(100vh - 55px - 35px - 25px - 1rem - 2rem);
  max-height: calc(100vh - 55px - 35px - 25px - 1rem - 2rem);

# scroll area within sidebar (add refresh button row
25px - for refresh bottom row
  height: calc(100vh - 55px - 35px - 25px - 1rem - 2rem - 25px);
  max-height: calc(100vh - 55px - 35px - 25px - 1rem - 2rem - 25px);

# Additional Height requirements for tab card body
31px - sidebar tab headers (icons & padding)
15px - padding of card body (5px for top and 10px for bottom)
  height: calc(100vh - 55px - 35px - 25px - 25px - 1rem - 2rem - 31px - 15px);
*/
/*noinspection CssUnusedSymbol*/
.sidebar_scroll_area {
    border-radius: 4px;
    display: flex;
    padding: 3px 5px 3px 0;
    flex-flow: column wrap;
}

/*noinspection CssUnusedSymbol*/
.sidebar_drill_scroll_area {
    border-radius: 4px;
    width: 100%;
    display: flex;
    padding: 3px 5px 3px 0;
    flex-flow: column wrap;
}
/* ADD HEIGHT SETTINGS */
/*noinspection CssUnusedSymbol*/
.sidebar_scroll_area,
.sidebar_drill_scroll_area {
    /*height: calc(100vh - 55px - 35px - 25px - 1rem - 2rem - 25px);*/
    /*max-height: calc(100vh - 55px - 35px - 25px - 1rem - 2rem - 25px);*/
}


.visualizer_tab_graph_div {
    height: 83vh;
    width: 100% ;
    border: 1px solid var(--border_color);
    background-color: var(--bg_layer5);
    /*border-radius: 4px;*/
    display: flex;
    flex-flow: column wrap;
    box-shadow: var(--grx-box-shadow);
    border-radius: var(--grx-border-radius);
}

/*noinspection CssUnusedSymbol*/
.draggable_card_style {
    padding: 1rem;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-grow: 0;
    border: 1px solid var(--border_color);
    border-radius: 4px;
}

/*noinspection CssUnusedSymbol*/
.hide_card {
    display: none;
}

/*noinspection CssUnusedSymbol*/
.mantine-9t76dc.__mantine-ref-tabActive {
    border-color: var(--border_color);
    background-color: var(--sb_active_color) !important;
}

/*noinspection CssUnusedSymbol*/
.mantine-jt4rky {
    border-bottom: none;
    /*border-bottom: 1px solid rgb(233, 236, 239);*/
}

/* TESTING ---     max-height: 79vh;   .sidebar_scroll_area*/
/*noinspection CssUnusedSymbol*/
.side_bar_tab_body {
    /*box-shadow: var(--grx-box-shadow-lrb);*/
    box-shadow: 0 3px 7px 0 rgb(0 0 0 / 20%);
    position: relative;
    z-index: 1;
    height: calc(100vh - 55px - 35px - 25px - 1rem - 2rem - 25px - 60px);
    /*max-height: calc(100vh - 55px - 35px - 25px - 1rem - 2rem - 25px - 85px);*/
    /*max-height: calc(100vh - 55px - 35px - 25px - 25px - 1rem - 2rem - 31px - 15px);*/
    background-color: var(--sb_active_color);
    /*padding: 5px 5px 10px 5px;*/
    border-top: none;
    /*border-top: 1px solid var(--border_color);*/
    border-right: 1px solid var(--border_color);
    border-bottom: 1px solid var(--border_color);
    border-left: 1px solid var(--border_color);
    /*min-height: 30vh;*/
    border-image: initial;
    border-radius: 0 0 var(--grx-border-radius) var(--grx-border-radius);
    overflow: hidden;
    /*border-radius: 4px;*/
    display: flex;
    padding: 3px 5px 3px 5px;
    flex-flow: column wrap;
    flex-direction: column;
    /*border-bottom-right-radius: var(--grx-border-radius);*/
    /*border-bottom-left-radius: var(--grx-border-radius);*/
    /*border-top-left-radius: 0;*/
    /*border-top-right-radius: 0;*/
}

/*noinspection CssUnusedSymbol*/
.visualizer_drill_inputs {
    padding: 0.5rem 1rem 1rem 1rem;
    height: 23.5vh;
    /*height: auto;*/
    max-height: 23.5vh;
    border-radius: 4px 4px 0 0;
    border: 1px solid var(--border_color);
    background-color: var(--sb_active_color);
    display: flex;
    flex-flow: column wrap;
}

/*noinspection CssUnusedSymbol*/
.visualizer_drill_graph {
    /*height: available;*/
    /*min-height: 50vh;*/
    /*max-height: 65vh;*/
    height: 59vh;
    border-radius: 0 0 4px 4px;
    border-top: none;
    border-left: 1px solid var(--border_color);
    border-right: 1px solid var(--border_color);
    border-bottom: 1px solid var(--border_color);
    display: flex;
    flex-flow: column wrap;
}

/*noinspection CssUnusedSymbol*/
.visualizer_drill_inputs_draggable {
    padding: 0.5rem 1rem 1rem 1rem;
    height: 100%;
    width: 100%;
    border-radius: 4px 4px 0 0;
    border: 1px solid var(--border_color);
    background-color: var(--sb_active_color);
}
.custom-section-dividers {
    width: 100%;
    /*font-size: 14px;*/
    /*font-weight: 550;*/
    /*line-height: 1.55;*/
    /*text-decoration: underline;*/
    /*-webkit-box-align: center;*/
    color: var(--pgColorOppositeLight);
    border-color: var(--text_001) !important;
    /*margin-top: 1.5rem !important;*/
    /*margin-top: 2px;*/
}
.custom-section-dividers.add_pad {
    margin-top: 1rem;
}
.custom-section-dividers.add_top_bottom_pad {
    margin-top: 1rem;
    margin-bottom: 1rem;
}
.custom-section-titles {
    font-size: 15px !important;
    font-weight: 550;
    line-height: 1.55;
    text-decoration: underline;
    -webkit-box-align: center;
    color: var(--blue_alert);
    /*color: var(--pgColorOppositeLight);*/
    /*margin-top: 1rem;*/
    /*margin-top: 2px;*/
    /*margin: 10px -5px 5px -5px;*/
    /*background: var(--bgCarosel);*/
    /*padding: 0px 5px;*/
}
.custom-section-dividers .mantine-Divider-label::after {
    /*border-color: var(--blue_alert) !important;*/
    border-style: dashed !important;
    border-width: 0 0 0 0 !important;
    /*border-color: var(--text_001) !important;*/
}
/* make italic and align text to left */
.custom-section-description {
    color: var(--text_001);
    font-size: 11px;
    font-style: italic;
    font-weight: 400;
    line-height: 1.55;
    text-align: left;
    text-transform: initial;
    /*border-bottom: 1px dotted var(--border_color_inputs);*/
    margin-bottom: 0.5rem;
    /*margin-top: 1rem;*/
    /*margin-top: 2px;*/
}
.custom-section-group {
    margin-top: 1rem;
    /*background-color: #e4e4e5;*/
    /*margin-left: -5px;*/
    /*margin-top: 2px;*/
}

/*noinspection CssUnusedSymbol*/
.grid_item_input_icons {
    border-radius: 4px;
    color: var(--pgColorOppositeLight);
    height: 23px;
    width: 23px;
    background-color: transparent;
}


.above-component-title-description-group {
    margin-top: 1rem;
}
.above-component-title {
    /*margin-top: 1rem;*/
    font-size: 12px;
    font-weight: 550;
    line-height: 1.55;
    text-decoration: none;
    -webkit-box-align: center;
    color: var(--pgColorOppositeLight);
}
.above-component-title-descriptions {
    color: var(--text_001);
    font-size: 10px;
    font-style: italic;
    font-weight: 400;
    line-height: 1.55;
    text-align: left;
    text-transform: initial;
    /*margin-bottom: 0.5rem;*/
}

/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/* DASHBOARD SIDEBAR */
/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/

/*.tab_pills {}*/
.dashboard-tabs .mantine-Group-root {
}

/*noinspection CssUnusedSymbol*/
.dashboard-tabs .mantine-Tabs-tabsListWrapper {
    border-radius: 4px 4px 0 0 !important;
}

/*noinspection CssUnusedSymbol*/
.dashboard-tabs .mantine-Tabs-tabControl {
    height: 40px;
    background-color: transparent;
}

/*.dashboard-tabs .mantine-Tabs-tabControl.__mantine-ref-tabActive {*/
/*  border-bottom: 2px solid var(--pgColorOppositeLight) !important;*/
/*  color: var(--pgColorOppositeLight) !important;*/
/*  !*-webkit-tap-highlight-color: var(--icon_blue) !important;*!*/
/*}*/
/*.dashboard-tabs .mantine-Tabs-tabControl.mantine-Tabs-default:hover {*/
/*  border-bottom: 2px solid var(--pgColorOppositeLight) !important;*/
/*  color: var(--icon_blue) !important;*/
/*}*/
/*.dashboard-tabs,*/
/*.mantine-Tabs-tabControl.mantine-Tabs-default:focus:not(:focus-visible) {*/
/*  border-bottom: 2px solid var(--pgColorOppositeLight) !important;*/
/*  color: var(--pgColorOppositeLight) !important;*/
/*}*/
/*noinspection CssUnusedSymbol*/
.dashboard-tabs .mantine-Tabs-tab {
    background-color: transparent !important;
    padding: 5px 2px;
    border-left: none;
    border-right: none;
    border-top: none;
    border-bottom: 2px solid var(--text_001);
}
/*.dashboard-tabs .mantine-Tabs-tab:hover {*/
/*  border-left: none;*/
/*  border-right: none;*/
/*  border-top: none;*/
/*  border-bottom: 2px solid var(--icon_blue);*/
/*}*/
/*.dashboard-tabs .mantine-Tabs-tab:active {*/
/*  border-left: none;*/
/*  border-right: none;*/
/*  border-top: none;*/
/*  border-bottom: none;*/
/*}*/
/*.dashboard-tabs .mantine-Tabs-tab:focus:not(:focus-visible) {*/
/*  border-bottom: 2px solid var(--pgColorOppositeLight) !important;*/
/*  color: var(--pgColorOppositeLight) !important;*/
/*}*/

/*noinspection CssUnusedSymbol*/
.dashboard-tabs .mantine-Tabs-tabsList {
    background-color: transparent !important;
    display: flex;
    flex-flow: row wrap;
    -webkit-box-pack: start;
    justify-content: flex-start;
    border-bottom: 2px solid rgb(222, 226, 230);
}

/*noinspection CssUnusedSymbol*/
.dashboard-tabs .mantine-Tabs-tab[data-active] {
    border-radius: 4px 4px 0 0;
    border-right: 1px solid var(--border_color);
    border-left: 1px solid var(--border_color);
    border-top: 1px solid var(--border_color);
    /*border-bottom: 1px solid var(--sb_active_color) !important;*/
    border-bottom: none !important;
    background-color: var(--sb_active_color) !important;
}

/*.dashboard-tabs.mantine-Tabs-tab:hover {*/
/*  margin-bottom: 0;*/
/*  background-color: var(--blue_highlight) !important;*/
/*}*/

/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/*!* Vertical List Groups Within Sidebar for navigation - SIDEBAR*/
.custom-lg-sidebar {
    background: #f2f3f5;
    color: #232b36;
    border: 1px solid #dee0e2;
    /*font-size: 70%;*/
    font-size: 10px;
    padding-left: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    display: flex !important;
    align-items: center;
    justify-content: left;
}
.custom-lg-sidebar:hover,
.custom-lg-sidebar:focus,
.custom-lg-sidebar:active,
.custom-lg-sidebar.active,
.open > .dropdown-toggle.custom-lg-sidebar {
    background: #bdd28f;
    color: #232b36;
    border: 1px solid #bdd28f;
    font-weight: bold;
    cursor: pointer;
}
.custom-lg-sidebar:active .open > .dropdown-toggle.custom-lg-sidebar {
    background: #bdd28f;
    color: #232b36;
    border: 1px solid #bdd28f;
    font-weight: bold;
    box-shadow: none;
}

/*!* List Groups Headers Within Sidebar for navigation - SIDEBAR*/
.custom-lg-header-sidebar {
    background: #232b36;
    color: #ffffff;
    font-size: 80%;
    border-left: 0;
    border-right: 0;
    font-weight: bold;
    padding-left: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    display: flex !important;
    align-items: center;
    justify-content: left;
}

/* PAGE: MULTIPLE ----- Sidebar Left Div Formatting */
.sidebar-left-div {
    padding-top: 10px;
    background-color: #232b36;
    color: #ffffff;
    border-top: 1px solid #ffffff;
    height: 100%;
    width: 90%;
}

/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/* PAGE: MULTIPLE ----- Sidebar Left CONTAINER [PARENT] */
.sidebar-container {
    top: 69px;
    bottom: 0;
    left: 0;
    color: #ffffff;
    background-color: #232b36;
    position: fixed;
    width: 350px;
    padding-top: 20px;
}

/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/* PAGE: PAGES WITH SIDEBAR ----- formatting of the container that will house page contents with sidebar*/
.sidebar-page-container {
    top: 69px;
    bottom: 0;
    left: 350px;
    color: #232b36;
    background-color: #232b36;
    position: fixed;
    width: 100%;
    padding-top: 20px;
}

/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/* Specific formatting for page layout with
   Left to right
   - tab selector (primary, drill, data, accounts)
   - user inputs
   - graph div
   - utility side bar (right)
   top to bottom
   - navbar
   - chart navbar
   - all other
 */
/*noinspection CssUnusedSymbol*/
.parent_tab_container {
    top: 10vh;
    bottom: 0;
    left: 0;
    right: 35px;
    position: fixed;
    z-index: 1;
    overflow-y: hidden;
    overflow-x: hidden;
    transition: all 0.1s;
    margin: 1rem;
    /*background-color: var(--card_background);*/
}

/*noinspection CssUnusedSymbol*/
.single_tab_container {
    /*position: fixed;*/
    /*top: 13vh;*/
    /*bottom: 1vh;*/
    /*left: 0;*/
    /*right: 35px;*/
    width: 95vw;
    height: 87vh;
    /*margin: 0 1rem 0 1rem;*/
    /*border-radius: 0 0 4px 4px;*/
    /*border: none !important;*/
    border: 1px solid var(--border_color);
    flex: 1 1 auto;
    background-color: var(--bgColor);
    color: var(--card_text);
}

/*noinspection CssUnusedSymbol*/
.sidebar_parent_div_alt {
    width: 100%;
    /* background-color: var(--sb_active_color); */
    border: 1px solid var(--border_color);
    padding: 1rem;
    border-radius: 4px;
}

/*noinspection CssUnusedSymbol*/
.sidebar_scroll_area_alt {
    height: 80vh;
    /* border: .5px solid var(--light_0); */
    border-radius: 3px;
    display: flex;
    padding: 1px 5px 1px 0;
    flex-flow: column wrap;
}

/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/* MANTINE TAB STYLING --- FOR TABS WHEN IN VERTICAL FORMAT */
/*noinspection CssUnusedSymbol*/
.mantine-1s45g9b.__mantine-ref-tabActive {
    color: var(--grx_green);
    border-right: 0 solid var(--grx_green);
    background-color: var(--grx_green);
    border-radius: 4px 0 0 4px;
}

/*noinspection CssUnusedSymbol*/
.mantine-rerbdq {
    transition: border-color 0ms ease 0s, color 0ms ease 0s;
}

/*noinspection CssUnusedSymbol*/
.mantine-1yz9clt {
    box-sizing: border-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: start;
    justify-content: center;
    line-height: 1;
}

/*noinspection CssUnusedSymbol*/
.mantine-t3gzo7 {
    width: 35px;
    height: 87vh;
    background-color: #3e4754;
    border-radius: 5px 0 0 5px;
    border-right: 0 solid rgb(233, 236, 239);
}

/*noinspection CssUnusedSymbol*/
.mantine-1euen2d {
    padding-left: 0;
}

/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/* SCROLL AREAS THAT HOLDS THE GRAPHS */
/*noinspection CssUnusedSymbol*/
.visualizer_tab_graph_div_alt {
    height: 84vh;
    /*width: 73vw;*/
    border: 1px solid var(--border_color);
    border-radius: 4px;
    display: flex;
    flex-flow: column wrap;
}

/*noinspection CssUnusedSymbol*/
.visualizer_drill_graph_alt {
    /*padding: 0.5rem 1rem 1rem 1rem;*/
    height: 61vh;
    /*width: 73vw;*/
    border-radius: 0 0 4px 4px;
    border-top: none;
    border-left: 1px solid var(--border_color);
    border-right: 1px solid var(--border_color);
    border-bottom: 1px solid var(--border_color);
    display: flex;
    flex-flow: column wrap;
}

/*noinspection CssUnusedSymbol*/
.visualizer_drill_inputs_alt {
    height: 23.5vh;
    width: 74vw;
    padding: 0.5rem 1rem 1rem 1rem;
    border-radius: 4px 4px 0 0;
    border: 1px solid var(--border_color);
    background-color: var(--sb_active_color);
    display: flex;
    flex-flow: column wrap;
}

/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/*!* Login Page Layout */
/* Height, width and object fit are used for getting the image to fill the width and height autotests*/
/*noinspection CssUnusedSymbol*/
.login_company_logo {
    height: 100%;
    width: 100%;
    object-fit: fill;
    justify-content: center;
    align-items: center;
    padding: 3rem;
}

/*noinspection CssUnusedSymbol*/
.login_div {
    height: calc(100vh - 45px);
    display: flex;
    flex-flow: column nowrap;
    place-content: space-between space-around;
    align-items: stretch;
}

/*noinspection CssUnusedSymbol*/
.login_div_footer {
    height: 45px;
    display: flex;
    flex-flow: column nowrap;
    place-content: space-between space-around;
    align-items: stretch;
}

/*noinspection CssUnusedSymbol*/
.login_div_footer_text {
    font-size: 80%;
    width: 100%;
    height: 100%;
    padding-top: 1rem;
    padding-bottom: 1rem;
    color: rgb(178, 182, 169);
    text-align: center;
    display: inline-flex;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    align-items: flex-end;
}

/*noinspection CssUnusedSymbol*/
.login_div_footer_text:hover {
    color: rgb(130, 162, 57);
}

/*noinspection CssUnusedSymbol*/
.login_page {
    inset: 0;
    /*background-color: rgb(35, 43, 54);*/
    position: fixed;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    place-content: space-between space-around;
    align-items: stretch;
    flex-flow: column nowrap;
    background: linear-gradient(180deg, #232b36 0%, #4b617e 100%);
}

/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/*!* TAB DESIGNS FOR THE HEADER OF THE CARDS */
.card-fixed-available-space {
    height: 100%;
    width: 100%;
    border-top: none;
    overflow-x: auto;
    overflow-y: auto;
    background-color: var(--card_background);
    color: var(--card_text);
}
.loader-wrapper > div {
    visibility: visible !important;
    opacity: 50;
    background-color: #ededef;
}

/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/*!* CSS STYLING FOR ADJUSTING THE WIDTH OF CONTENTS ON PAGE BASED ON USER INTERACTION WITH BUTTONS */
.custom-show-middle {
    left: 20vw;
    right: 20vw;
}
.custom-show-left {
    left: 35px;
    right: 20vw;
}
.custom-show-right {
    left: 20vw;
    right: 35px;
}
.custom-show-all {
    left: 35px;
    right: 35px;
}

/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/*!* for the individual tab heads in CARD 2 of Chart PAGES */
/*!* USED TO MAKE EACH INDIVIDUAL LINK WITHIN THE CHART NAVIGATION DIV */

.custom-link-format {
    color: #232b36;
    text-decoration: none;
    font-weight: bold;
    display: inline-block;
    text-align: center;
    align-items: center;
    justify-content: center;
    text-transform: capitalize;
}
.custom-link-format:hover,
.custom-link-format:focus,
.custom-link-format:active,
.custom-link-format.active,
.open > .dropdown-toggle.custom-link-format {
    text-decoration: none;
    -ms-transform: scale(1.07);
    transform: scale(1.07);
}
.custom-link-format-disabled {
    color: #232b36;
    text-decoration: none;
    font-weight: bold;
    display: inline-block;
    text-align: center;
    align-items: center;
    justify-content: center;
    text-transform: capitalize;
    cursor: auto;
}
.custom-link-format-disabled:hover {
    opacity: 0.35;
    color: #232b36;
    text-decoration: none;
    font-weight: bold;
    display: inline-block;
    text-align: center;
    align-items: center;
    justify-content: center;
    text-transform: capitalize;
}

/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/*!* SIDEBAR LAYOUT - DEFAULT  */
/*noinspection CssUnusedSymbol*/
.fixed-mid-layout {
    top: 124px;
    bottom: 0;
    position: fixed;
    z-index: 1;
    overflow-y: hidden;
    overflow-x: hidden;
    transition: all 0.1s;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0;
}
.page-middle-default-layout {
    top: 124px;
    bottom: 0;
    position: fixed;
    z-index: 1;
    overflow-y: auto;
    overflow-x: hidden;
    transition: all 0.1s;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0;
}
.sidebar-default-layout {
    height: auto;
    width: 18vw;
    top: 124px;
    bottom: 0;
    position: fixed;
    z-index: 1;
    overflow-x: hidden;
    overflow-y: scroll;
    transition: all 0.1s;
    padding: 1rem;
    color: #232b36;
    background-color: var(--light_0);
}
.sidebar-show-left {
    left: 35px;
}
.sidebar-hide-left {
    left: -18vw;
}
.sidebar-show-right {
    right: 35px;
}
.sidebar-hide-right {
    right: -18vw;
}

/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
.fixed-side-bar-icons-only {
    width: 13vw;
    height: auto;
    top: 124px;
    bottom: 0;
    position: fixed;
    z-index: 1;
    overflow-x: auto;
    transition: all 0.1s;
    padding: 1rem;
    color: #232b36;
    background-color: var(--light_0);
}

/*the Div that holds the tabs for each charting page --- starts right after chart carosel */
/*--- Height set == navbar height (55) + chart carosal (35px)*/
.page-middle-default-layout-small {
    background-color: var(--page_colorBackground);
    top: var(--height-navbarFull);
    bottom: 0;
    left: 0;
    right: var(--width-column-sidebarRight);
    position: fixed;
    z-index: 1;
    overflow-y: hidden;
    overflow-x: hidden;
    transition: all 0.1s;
    /*padding: 0 1rem 1rem 1rem;*/
}

/*noinspection CssUnusedSymbol*/
.visualizer_sidebar {
    background-color: var(--sidebar_colorBackground);
    position: fixed;
    border-left: 1px solid var(--border_color_inputs);
    top: var(--height-navbarFull);
    right: 0;
    bottom: 0;
    width: var(--width-column-sidebarRight);
    z-index: 98;  /* 99 is the highest z-index value and 1 lower than the drawer */
    overflow-x: hidden;
    transition: all 0.1s ease 0s;
}
.sidebar-default-layout-small {
    width: 13vw;
    height: auto;
    top: 124px;
    bottom: 0;
    position: fixed;
    z-index: 1;
    overflow-x: auto;
    transition: all 0.1s;
    padding: 1rem;
    color: #232b36;
    background-color: var(--light_0);
}
.sidebar-show-left-small {
    left: 35px;
}
.sidebar-hide-left-small {
    left: -13vw;
}
.sidebar-show-right-small {
    right: 35px;
}
.sidebar-hide-right-small {
    right: -13vw;
}
.custom-show-middle-small {
    left: 20vw;
    right: 15vw; /* Width + Button Width (2)*/
}
.custom-show-left-small {
    left: 35px;
    right: 15vw; /* Width + Button Width (2)*/
}
.custom-show-right-small {
    left: 20vw;
    right: 35px;
}
.custom-show-all-small {
    left: 35px;
    right: 35px;
}

/*noinspection CssUnusedSymbol*/
.custom-middle-lefthide-righthide {
    /*left: 0;*/
    /*right: 35px;*/
}

/*noinspection CssUnusedSymbol*/
.custom-middle-lefthide-rightshow {
    left: 0;
    right: 15vw; /* Width + Button Width (2)*/
}

/*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/* 13_mantine.css ACTIVE TAB COLOR */
/*noinspection CssUnusedSymbol*/
.mantine-fuh7rt.__mantine-ref-tabActive {
    color: rgb(0, 0, 0);
    border-top: 1px solid var(--border_color);
    border-right: 1px solid var(--border_color);
    border-left: 1px solid var(--border_color);
    border-bottom: none;
    background-color: var(--sb_active_color);
}

/*noinspection CssUnusedSymbol*/
.mantine-1w3yln0.__mantine-ref-tabActive {
    color: rgb(0, 0, 0);
    border-top: 1px solid var(--border_color);
    border-right: 1px solid var(--border_color);
    border-left: 1px solid var(--border_color);
    border-bottom: none;
    background-color: var(--sb_active_color);
}

/*noinspection CssUnusedSymbol*/
.mantine-f7wtoc.__mantine-ref-tabActive {
    color: rgb(0, 0, 0);
    border-top: 1px solid var(--border_color);
    border-right: 1px solid var(--border_color);
    border-left: 1px solid var(--border_color);
    border-bottom: none;
    background-color: var(--sb_active_color);
}

/*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/* RADIO BUTTON BACKGROUND ADDED THIS STYLING ON 10.13 --- see bookmark below for old styling  https://mantine.dev/core/segmented-control/?t=styles-api */

.mantine-SegmentedControl-root {
    line-height: 1.1rem;
    background-color: var(--bg_inputs) !important;
    padding: 0;
    border-radius: 4px !important;
    border-color: var(--border_color_inputs) !important;
    border: 1px solid var(--border_color_inputs) !important;
}
.mantine-SegmentedControl-control {
    /*border-radius: 4px !important;*/
    border-color: var(--border_color_inputs) !important;
}
.mantine-SegmentedControl-label:where([data-disabled]) {
    color: var(--DisabledText) !important;
    background-color: var(--DisabledInputs) !important;
    border-radius: 0;
    border: none;
}
.mantine-SegmentedControl-label {
    color: var(--mantine_gray);
    font-weight: 450;
    font-size: 10px;
    /*font-size: 11px;*/
    height: 22px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3px 5px;
}
.mantine-SegmentedControl-label:where([data-active]),
.mantine-SegmentedControl-label:where([data-active]):hover {
    color: var(--FixedLight);
    background-color: var(--icon_blue) !important;
}
/*.mantine-SegmentedControl-label:hover {*/
/*    color: var(--HoverInputsText);*/
/*    background-color: var(--HoverInputs);*/
/*    border-radius: 0;*/
/*}*/
.mantine-SegmentedControl-active {
    color: var(--FixedLight);
    border-radius: 0;
    background-color: transparent;
    /*background-color: var(--icon_blue);*/
    padding: 0;
    margin: 4px;
}

/*noinspection CssUnusedSymbol*/
.mantine-SegmentedControl-labelActive {
    /*border-radius: 4px !important;*/
    color: var(--FixedLight);
    background-color: var(--icon_blue);
    /*color: white;*/
}

/*noinspection CssUnusedSymbol*/
.mantine-SegmentedControl-labelActive:hover {
    color: var(--FixedLight);
    background-color: var(--icon_blue) !important;
    /*color: white;*/
}

/*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/* Custom styling for segmented control if we want to have disabled options --- see "MODAL_CALLBACK__BOOKMARK_SAVE"*/
/*noinspection CssUnusedSymbol*/
.CustomSegmentedControl {
    background-color: var(--bg_inputs);
    padding: 0;
    border-radius: 4px;
    border-color: var(--border_color_inputs) !important;
    border: 1px solid var(--border_color_inputs) !important;
}

/*noinspection CssUnusedSymbol*/
.CustomSegmentedControl .mantine-SegmentedControl-labelActive {
    color: var(--FixedLight);
    background-color: darkred;
}

/*noinspection CssUnusedSymbol*/
.CustomSegmentedControl .mantine-SegmentedControl-labelActive:hover {
    color: var(--FixedLight);
    background-color: darkred !important;
}

/*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/* DISABLED INPUTS */
.mantine-SegmentedControl-active:disabled {
    color: var(--DisabledText) !important;
    border-left-color: var(--border_color_inputs) !important;
    background-color: var(--DisabledInputs) !important;
}
.mantine-SegmentedControl-disabled {
    color: var(--DisabledText) !important;
    background-color: var(--DisabledInputs) !important;
    border-radius: 0;
    border: none;
}
.mantine-SegmentedControl-disabled:hover {
    cursor: default;
    color: var(--DisabledText) !important;
    background-color: var(--DisabledInputs) !important;
}

/*noinspection CssUnusedSymbol*/
.mantine-1durv8a {
    border-left-color: var(--border_color_inputs) !important;
    /*border-top-color: inherit;*/
}

/*noinspection CssUnusedSymbol*/
.mantine-ngdamr:not(:first-of-type) {
    border-style: solid;
    border-width: 0 0 0 1px;
    border-color: var(--border_color_inputs);
}

/*noinspection CssUnusedSymbol*/
.mantine-ngdamr:first-child {
    border-style: solid;
    border-width: 0 1px 0 0;
    border-color: var(--border_color_inputs);
}

/*noinspection CssUnusedSymbol*/
.mantine-1durv8a + .__mantine-ref-control {
    border-left-color: var(--border_color_inputs) !important;
    /*border-left-color: transparent !important;*/
    border-top-color: transparent !important;
}

/*noinspection CssUnusedSymbol*/
.__mantine-ref-label.mantine-SegmentedControl-label.mantine-SegmentedControl-labelActive.mantine-SegmentedControl-disabled.mantine-1d7h0ko {
    background-color: var(--bg_inputs);
    /*background-color: #f0f2f3;*/
}

/*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/* TEXT INPUT */
/*noinspection CssUnusedSymbol*/
.mantine-InputWrapper-root, .mantine-InputWrapper-label, .mantine-TextInput-label {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    font-size: 11px;
}

/*noinspection CssUnusedSymbol*/
.mantine-TextInput-wrapper, .mantine-TextInput-input {
    border-color: var(--border_color_inputs) !important;
    font-size: 11px !important;
    width: 100% !important;
    border-radius: 4px !important;
    background-color: var(--bg_inputs) !important;
}

/*noinspection CssUnusedSymbol*/
.mantine-Select-dropdown,
.mantine-TextInput-input:disabled,
.mantine-Input-input.mantine-Textarea-input:disabled {
    background-color: var(--DisabledInputs) !important;
    opacity: 1 !important;
    /*cursor: none !important;*/
}
.mantine-InputWrapper-root .mantine-Textarea-wrapper .mantine-TextArea-label {
    font-size: 11px !important;
}
.mantine-TextArea-input {
    width: 100% !important;
    border-radius: 4px !important;
    background-color: var(--bg_inputs) !important;
}

/*noinspection CssUnusedSymbol*/
.mantine-Input-input.mantine-Textarea-input,
.mantine-Input-input .mantine-TextInput-input {
    font-size: 11px;
    /*padding: 5px;*/
    border: 1px solid var(--border_color_inputs);
}

/*noinspection CssUnusedSymbol*/
.mantine-Tabs {
    border-width: 0;
}

/*dmc.input box */
/*noinspection CssUnusedSymbol*/
.mantine-imy6lw {
    text-align: center;
    border: 1px solid rgb(206, 212, 218);
    transition: border-color 100ms ease 0s;
    -webkit-font-smoothing: antialiased;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    height: 26px;
    -webkit-tap-highlight-color: transparent;
    line-height: 26px;
    appearance: none;
    resize: none;
    box-sizing: border-box;
    font-size: 14px;
    width: 100%;
    color: rgb(0, 0, 0);
    display: block;
    min-height: 26px;
    padding: 0 20px 0 5px !important;
    border-radius: 0;
}

/*noinspection CssUnusedSymbol*/
.mantine-p0axji {
    display: flex;
    flex-direction: column;
    height: calc(100% - 2px);
    margin: 1px;
}

/* dmc.input box the div holding the arrows */
/*noinspection CssUnusedSymbol*/
.mantine-1cwybh2 {
    width: 20px;
}

/*noinspection CssUnusedSymbol*/
.mantine-1cwybh2::after {
    background-color: #91959a;
    /*border-color: #91959a transparent #91959a;*/
}

/*dmc.input box Top arrow */
/*noinspection CssUnusedSymbol*/
.mantine-jbog3w {
    font-size: 10px;
    width: 18px;
    padding: 0;
    border-left: none;
    border-bottom: none;
    background-color: #ffffff;
    border-top-right-radius: 4px;
}

/*noinspection CssUnusedSymbol*/
.mantine-jbog3w::after {
    border-width: 0 5px 5px;
    border-color: #91959a transparent #91959a;
}

/*dmc.input box Bottom arrow */
/*noinspection CssUnusedSymbol*/
.mantine-xb3ria {
    font-size: 10px;
    width: 18px;
    padding: 0;
    border-left: none;
    border-top: none;
    background-color: #ffffff;
    border-bottom-right-radius: 4px;
}

/*noinspection CssUnusedSymbol*/
.mantine-xb3ria::after {
    border-width: 5px 5px 0;
    border-color: #91959a transparent #91959a;
}

/*noinspection CssUnusedSymbol*/
.mantine-1eni84j {
    color: rgb(240, 62, 62);
    border: 1px solid rgb(240, 62, 62);
    text-align: center;
    /*border: 1px solid rgb(206, 212, 218);*/
    /*background-color: rgb(255, 255, 255);*/
    background-color: var(--bg_inputs);
    transition: border-color 100ms ease 0s;
    -webkit-font-smoothing: antialiased;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    -webkit-tap-highlight-color: transparent;
    line-height: 26px;
    appearance: none;
    resize: none;
    box-sizing: border-box;
    font-size: 14px;
    width: 100%;
    display: block;
    height: 26px;
    min-height: 26px;
    padding: 0 20px 0 5px !important;
    border-radius: 0;
}

/*noinspection CssUnusedSymbol*/
.mantine-ColorPicker-swatch {
    max-height: 20px;
    /*max-height: 20px;*/
}

/*noinspection CssUnusedSymbol*/
.mantine-ColorPicker-swatches {
    max-height: 20px;
    /*max-height: 20px;*/
}

/*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/* DRAWER / MODAL SIDEBAR */
/*noinspection CssUnusedSymbol*/
.mantine_drawer_right {
    top: 55px;
    z-index: 98;
    padding-right: 2.1vw;
    background: rgba(var(--rgb-background) / .5);
    /*right: 35px;*/
    /*height: 100%;*/
}

/*noinspection CssUnusedSymbol*/
.mantine_drawer_right .mantine-Drawer-body {
    height: 95%;
    width:100%;
    padding: 0 10px 10px 10px;
}

/*noinspection CssUnusedSymbol*/
.mantine-Drawer-drawer {
    /*border-left: 1px solid var(--border_color_inputs);*/
    /*background: var(--sb_active_color);*/
    /*color: var(--text_001);*/
    border-left: none;
    border-top: 1px solid var(--dimmedBorder);
    border-right: 1px solid var(--dimmedBorder);
    background: var(--bg_layer2);
    color: var(--FixedLight);
    box-shadow: -9px 0 8px 1px rgba(0, 0, 0, 0.3);
    /*transition-property: transform, opacity !important;*/
    transition-duration: 100ms !important;
    transition-timing-function: ease !important;
    transform-origin: left center !important;
    opacity: 1 !important;
    transform: translateX(0px) !important;
}

/*noinspection CssUnusedSymbol*/
.mantine-Drawer-drawer .mantine-Drawer-header {
    padding: 0 10px;
    color: var(--pgColorOpposite) !important;
    /*color: var(--FixedLight) !important;*/
}

/*noinspection CssUnusedSymbol*/
.mantine-Drawer-drawer .mantine-Drawer-closeButton {
    color: var(--pgColorOpposite) !important;
}

/*noinspection CssUnusedSymbol*/
.mantine-Drawer-closeButton {
    font-size: 14px;
    text-align: left;
    text-decoration: none;
    box-sizing: border-box;
    background-color: transparent;
    border: none !important;
    color: rgb(134, 142, 150);
    position: relative;
    height: 20px;
    min-height: 20px;
    width: 20px;
    min-width: 20px;
    border-radius: 3px;
    padding: 0;
}

/*noinspection CssUnusedSymbol*/
.mantine-Drawer-closeButton:hover {
    /*color: var(--warning_red) !important;*/
    background-color: var(--pgColorOppositeTransparent);
}

/*noinspection CssUnusedSymbol*/
.mantine-Drawer-closeButton:focus {
    border: none !important;
}

/*noinspection CssUnusedSymbol*/
.mantine-Drawer-overlay {
    opacity: 0.5;
}

/*noinspection CssUnusedSymbol*/
.mantine-Drawer-header {
    font-size: 15px;
    font-weight: 500;
    border-bottom: 1px solid var(--border_color_inputs);
    margin-bottom: 5px;
    padding: 0 10px;
}

/*noinspection CssUnusedSymbol*/
.mantine-Drawer-title {
    color: rgba(var(--rgb-pgColorOpposite) / .8);
}

/*noinspection CssUnusedSymbol*/
.mantine-Drawer-input-labels {
    font-size: 12px;
    font-weight: 500;
    color: rgba(var(--rgb-pgColorOpposite) / .8);
    width: 100%;
    background-color: transparent;
    padding: 2px 5px;
    margin: 0 0 0 0;
    border-radius: 4px 4px 0 0;
}

/*noinspection CssUnusedSymbol*/
.mantine-Drawer-dividers {
    color: var(--pgColorOpposite) !important;
    font-weight: 500;
    font-size: 14px;
}
.mantine-drawer-select-input .mantine-Select-label {
    color: var(--pgColorOpposite) !important;
    /*color: var(--FixedLight) !important;*/
}
.mantine-drawer-select-input .mantine-Input-input {
    font-size: 90% !important;
}

/*noinspection CssUnusedSymbol*/
.mantine-Input-input .mantine-TextInput-input .mantine-Input-disabled .mantine-TextInput-disabled {
    background-color: var(--DisabledInputs) !important;
}

/*noinspection CssUnusedSymbol*/
.drawer-content-subtitles {
    color: rgba(var(--rgb-pgColorOpposite) / .7);
    /*color: var(--FixedLight) !important;*/
    font-size: 12px;
    height: 100% !important;
    text-decoration: none !important;
    text-transform: none !important;
    font-style: inherit !important;
    text-align: left !important;
    display: flex;
    width: 100%;
    margin-bottom: 0.5rem;
    vertical-align: middle;
}

/*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/*mantine-Timeline-itemLineActive mantine-Timeline-itemActive mantine-1d2875i*/
/*noinspection CssUnusedSymbol*/
.mantine-Timeline-item {
    position: relative;
    box-sizing: border-box;
    color: rgb(0, 0, 0);
    padding-left: 15px;
    padding-right: 0;
    text-align: left;
}

/*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/*!* MODAL POPUP SUBMIT BUTTONS*/
/*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
.modal-task-button {
    font-family: Arial, sans-serif;
    text-transform: capitalize;
    letter-spacing: 0.1rem;
    /*letter-spacing: 0;*/
    background: var(--blue_alert);
    color: #ffffff;
    border: none;
    border-radius: 3px;
    /*font-size: 75%;*/
    font-weight: 400;
    display: inline-block !important;
    text-align: center;
    align-items: center;
    justify-content: center;
}
.modal-task-button:hover,
.modal-task-button:focus,
.modal-task-button:active,
.modal-task-button.active,
.open > .dropdown-toggle.modal-task-button {
    background: var(--blue_alert-opaque);
    color: #ffffff;
    border: none;
}
.modal-task-button:active .open > .dropdown-toggle.modal-task-button {
    background: #667b95;
    color: #ffffff;
    border: none;
    box-shadow: none;
}
.modal-task-button:disabled {
    opacity: 0.35;
    cursor: default !important;
}



/*!*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*!*/
/* Mantine Accordion - News Updates*/
/*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/*!*noinspection CssUnusedSymbol*!*/
/*.lg-vert-spoiler-title-text {*/
/*    font-size: 11px !important;*/
/*}*/

/*!*noinspection CssUnusedSymbol*!*/
/*.lg-vert-spoiler-title-text.bold {*/
/*    font-weight: bold;*/
/*}*/

/*!*noinspection CssUnusedSymbol*!*/
/*.grx-accordion-app-updates .mantine-Accordion-itemTitle {*/
/*    width: 100%;*/
/*}*/
/*.grx-accordion-app-updates .mantine-Accordion-item {*/
/*    margin: 0.5rem 0 0.5rem 0.5rem;*/
/*    border: none;*/
/*    !*border: 1px solid var(--border_color_inputs);*!*/
/*    !*border-radius: 4px;*!*/
/*}*/
/*.grx-accordion-app-updates .mantine-Accordion-label {*/
/*    color: var(--text_001) !important;*/
/*    font-size: 11px;*/
/*    font-weight: 700;*/
/*}*/
/*.grx-accordion-app-updates .mantine-Accordion-content {*/
/*    padding: 5px;*/
/*    margin: 0.5rem;*/
/*    !*margin: .5rem 1.35rem;*!*/
/*    !*border-left: 1px dashed var(--text_001);*!*/
/*}*/
/*.grx-accordion-app-updates .mantine-Accordion-icon {*/
/*    color: var(--text_002);*/
/*    transform: rotate(-90deg);*/
/*    transition: transform 150ms ease 0s;*/
/*}*/

/*!*noinspection CssUnusedSymbol*!*/
/*.grx-accordion-app-updates .mantine-Accordion-itemOpened {*/
/*    color: var(--pgColorOpposite) !important;*/
/*    background-color: var(--bg_layer5_highlight);*/
/*    border-radius: 4px;*/
/*}*/
/*.grx-accordion-app-updates .mantine-Accordion-itemOpened .mantine-Accordion-label {*/
/*    font-weight: 500 !important;*/
/*    color: var(--pgColorOpposite) !important;*/
/*}*/
/*.grx-accordion-app-updates .mantine-Accordion-chevron {*/
/*    color: var(--pgColorOpposite);*/
/*    margin-left: 1rem;*/
/*}*/
/*.grx-accordion-app-updates .mantine-Accordion-control {*/
/*    border-radius: 4px;*/
/*    height: 30px;*/
/*    padding: 3px 2px;*/
/*    background-color: transparent;*/
/*}*/
/*.grx-accordion-app-updates .mantine-Accordion-control:hover {*/
/*    background-color: var(--bg_layer5_highlight) !important;*/
/*}*/
/*.grx-accordion-app-updates .mantine-Accordion-control:hover > .mantine-Accordion-label {*/
/*    color: var(--pgColorOpposite) !important;*/
/*    font-size: 11px;*/
/*    font-weight: 700;*/
/*}*/
/*.grx-accordion-app-updates .mantine-Accordion-control:hover > .mantine-Accordion-icon {*/
/*    color: var(--pgColorOpposite) !important;*/
/*}*/


/*!*!*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*!*!*/
/*!* Mantine Accordion*!*/
/*!*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*!*/
/*!*noinspection CssUnusedSymbol*!*/
/*.grx-accordion .mantine-Accordion-itemTitle {*/
/*    width: 100%;*/
/*}*/
/*.grx-accordion .mantine-Accordion-item {*/
/*    margin: 0.5rem 0 0.5rem 0.5rem;*/
/*    border: none;*/
/*    font-size: 11px;*/
/*    font-weight: 700;*/
/*}*/
/*.grx-accordion .mantine-Accordion-label {*/
/*    color: var(--text_002);*/
/*    font-size: 11px;*/
/*    font-weight: 700;*/
/*}*/
/*.grx-accordion .mantine-Accordion-content {*/
/*    padding: 5px;*/
/*    margin: 0.5rem;*/
/*    !*margin: .5rem 1.35rem;*!*/
/*    !*border-left: 1px dashed var(--text_001);*!*/
/*}*/
/*.grx-accordion .mantine-Accordion-icon {*/
/*    color: var(--text_002);*/
/*    transform: rotate(-90deg);*/
/*    transition: transform 150ms ease 0s;*/
/*}*/

/*!*noinspection CssUnusedSymbol*!*/
/*.grx-accordion .mantine-Accordion-itemOpened {*/
/*    color: var(--pgColorOpposite) !important;*/
/*    background-color: var(--bg_layer5_highlight);*/
/*    border-radius: 4px;*/
/*}*/
/*.grx-accordion .mantine-Accordion-itemOpened .mantine-Accordion-label {*/
/*    !*font-weight: 500 !important;*!*/
/*    color: var(--pgColorOpposite) !important;*/
/*}*/
/*.grx-accordion .mantine-Accordion-chevron {*/
/*    color: var(--pgColorOpposite);*/
/*}*/
/*.grx-accordion .mantine-Accordion-control {*/
/*    border-radius: 4px;*/
/*    height: 30px;*/
/*    padding: 3px 2px;*/
/*    background-color: transparent;*/
/*}*/
/*.grx-accordion .mantine-Accordion-control:hover {*/
/*    background-color: var(--bg_layer5_highlight) !important;*/
/*}*/
/*.grx-accordion .mantine-Accordion-control:hover > .mantine-Accordion-label {*/
/*    color: var(--pgColorOpposite) !important;*/
/*}*/
/*.grx-accordion .mantine-Accordion-control:hover > .mantine-Accordion-icon {*/
/*    color: var(--pgColorOpposite) !important;*/
/*}*/
/*!*.mantine-1xa9lqx,*!*/
/*!*> .__mantine-ref-itemTitle,*!*/
/*!*> .__mantine-ref-control,*!*/
/*!*.__mantine-ref-icon {*!*/
/*!*  color: var(--pgColorOpposite);*!*/
/*!*  transform: rotate(0deg);*!*/
/*!*}*!*/
/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/* DASHBOARD SIDEBAR - ARRORDIONS */
/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/*noinspection CssUnusedSymbol*/
.dashboard-accordion .mantine-Accordion-itemTitle {
    border-radius: 5px;
    width: 100%;
}
.dashboard-accordion .mantine-Accordion-item {
    border-radius: 5px;
    /*padding: 1px;*/
    margin-bottom: 10px;
    /*margin-right: 10px;*/
    background-color: var(--sb_active_color);
    border: 1px solid var(--border_color_inputs);
    /*border-color: var(--border_color_inputs);*/
}
.dashboard-accordion .mantine-Accordion-control {
    background-color: transparent;
    border-radius: 0;
    padding: 5px 5px;
    /*margin: 0;*/
}
.dashboard-accordion .mantine-Accordion-control:hover {
    background-color: var(--blue_highlight_transparent) !important;
    /*background-color: var(--bg_layer5_highlight) !important;*/
}
.dashboard-accordion .mantine-Accordion-control:hover > .mantine-Accordion-label {
    color: var(--pgColorOpposite) !important;
}
.dashboard-accordion .mantine-Accordion-control:hover > .mantine-Accordion-icon {
    color: var(--pgColorOpposite) !important;
}
.dashboard-accordion .mantine-Accordion-panel {
    background-color: transparent;
    border-radius: 5px;
    /*padding: 5px 5px;*/
    /*margin: 0;*/
}
.dashboard-accordion .mantine-Accordion-item[data-active] {
    /*background-color: var(--blue_highlight_transparent) !important;*/
}
.dashboard-accordion .mantine-Accordion-label {
    color: var(--text_001);
    font-size: 12px;
    font-weight: 450;
}
.dashboard-accordion .mantine-Accordion-content {
    background-color: var(--sb_active_color);
    padding: 5px;
    border-radius: 5px;
    /*margin: 0;*/
}
.dashboard-accordion .mantine-Accordion-icon {
    color: var(--text_001);
    transform: rotate(0deg);
    transition: transform 150ms ease 0s;
}
.dashboard-accordion .mantine-Accordion-chevron {
    color: var(--pgColorOpposite);
}
/*-------------------------------------------------------------------------*/
/* dmc.Accordion() - Calculation Method Accords */
/*-------------------------------------------------------------------------*/
/*.accordion-selfupload-calculation-methods .mantine-Accordion-panel {*/
/*    background-color: var(--pgColor);*/
/*    !*border-radius: 5px !important;*!*/
/*    !*background-color: rgb(var(--rgb-sidebar) / .7);*!*/
/*}*/
/*.summary-acordions .mantine-Accordion-item {*/
/*    !*background-color: var(--bg_layer3);*!*/
/*    !*border-color: var(--border_color_inputs);*!*/
/*    background-color: transparent;*/
/*    border: none;*/
/*    margin: 5px 0;*/
/*}*/
/*.summary-acordions .mantine-Accordion-control {*/
/*    !*background-color: var(--bg_layer3);*!*/
/*    height: 30px;*/
/*    padding: 5px;*/
/*    background-color: transparent;*/
/*    border: none;*/
/*    color: rgba(var(--rgb-standard-blue) / 1);*/
/*}*/
/*.summary-acordions .mantine-Accordion-item[data-active=true] {*/
/*    box-shadow: none !important;*/
/*}*/
/*.summary-acordions .mantine-Accordion-control:focus {*/
/*    border-bottom-width: 1px;*/
/*}*/
/*.summary-acordions .mantine-Accordion-control:hover,*/
/*.summary-acordions .mantine-Accordion-control:active {*/
/*    background-color: var(--bg_layer3_highlight);*/
/*}*/
/*.summary-acordions .mantine-Accordion-control[aria-expanded="true"] {*/
/*    border: none;*/
/*    !*border-bottom: 1px dotted var(--border-1);*!*/
/*    !*border-bottom-right-radius: 0;*!*/
/*    !*border-bottom-left-radius: 0;*!*/
/*}*/
/*.summary-acordions .mantine-Accordion-label {*/
/*    color: rgba(var(--rgb-standard-blue) / 1);*/
/*    font-size: 11px;*/
/*    font-weight: 600;*/
/*    height: 100%;*/
/*    display: flex;*/
/*    align-items: center;*/

/*}*/
/*.summary-acordions .mantine-Accordion-content {*/
/*    padding: 5px;*/
/*    border-radius: 0 0 5px 5px !important;*/
/*}*/
/*.summary-acordions .mantine-Accordion-chevron {*/
/*    color: rgba(var(--rgb-standard-blue) / 1);*/
/*    !*color: var(--pgColorOpposite);*!*/
/*}*/
/*th.dash-header {*/
/*    display: none;*/
/*    min-height: 0 !important;*/
/*    max-height: 0 !important;*/
/*    height: 0 !important;*/
/*    padding: 0 !important;*/
/*    font-size: 0 !important;*/
/*    line-height: 0 !important;*/
/*    background-color: #00ba5b !important;*/
/*}*/
/*-------------------------------------------------------------------------*/
/* SUMMARY STATS COLUMN - dmc.Accordion() - Calculation Method Accords */
/*-------------------------------------------------------------------------*/
.summary-acordions.mantine-Accordion-root {
    padding: 5px 0;
}
.summary-acordions .mantine-Accordion-item {
    box-shadow: none !important;
    background-color: var(--bg_layer3);
    border-color: var(--border_color_inputs);
    border: 1px solid var(--border_color_inputs);
    border-bottom: none;
    margin: 0;
    border-radius: 0;
}
.summary-acordions .mantine-Accordion-item:last-child {
    border-bottom: 1px solid var(--border_color_inputs);
    border-radius: 0 0 5px 5px;
}
.summary-acordions .mantine-Accordion-item:first-child,
.summary-acordions .mantine-Accordion-item .mantine-Accordion-content:first-child {
    border-radius: 5px 5px 0 0;
}
.summary-acordions .mantine-Accordion-control {
    background-color: var(--bg_layer3);
    height: calc(10px + 7px + 7px);
    max-height: calc(10px + 7px + 7px);
    padding: 7px 5px;
    border: none;
    border-radius: var(--grx-border-radius);
}
.summary-acordions .mantine-Accordion-control > .mantine-Accordion-label,
.summary-acordions .mantine-Accordion-control:hover > .mantine-Accordion-label{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    color: var(--text_001);
    font-size: 10px;
    font-weight: 550;
    padding: 0 5px;
    /*padding: .3rem .7rem;*/
    margin: 0;
}
.summary-acordions .mantine-Accordion-control:hover {
    -ms-transform: none;
    transform: none;
    background-color: var(--bg_layer3_highlight);
}
.summary-acordions .mantine-Accordion-item[data-active=true] .mantine-Accordion-content {
    background-color: var(--bg_layer5);
}
.summary-acordions .mantine-Accordion-item[data-active=true] .mantine-Accordion-control {
    background-color: var(--bg_layer3);
    border: none;
    box-shadow: none !important;
    border-bottom: 1px solid var(--border_color_inputs);
    /*border-radius: 0;*/
}
.summary-acordions .mantine-Accordion-content {
    padding: 0;
    border-radius: 0;
    border-color: var(--bg_layer3);
    border: none;
}
.summary-acordions .mantine-Accordion-panel {
    background-color: var(--bg_layer4);
    border: none;
}
.summary-acordions .mantine-Accordion-chevron {
    color: var(--pgColorOpposite);
}
.summary-acordions .mantine-Accordion-item .mantine-Accordion-panel:last-child,
.summary-acordions .mantine-Accordion-item .mantine-Accordion-content:last-child{
    border-radius: 0 0 5px 5px;
}
.summary-acordions .mantine-Accordion-control:hover:where(:disabled[data-disabled]) {
    cursor: none;
}

/*-------------------------------------------------------------------------*/
/* SUMMARY STATS COLUMN - Single Metric Total/Stats Card */
/*-------------------------------------------------------------------------*/
.single-metric-stats-card {
    background: linear-gradient(130deg, var(--bg_layer1) 50%, var(--bg_layer3) 100%);
    /*background-color: var(--blue-shade-0);*/
    /*border: 1px solid var(--border_color_inputs);*/
    /*border-left: .5rem solid rgba(var(--rgb-blue-2) / 1);*/
    border: 1px solid var(--border_color_inputs);
    border-radius: var(--grx-border-radius);
    /*background-color: rgba(var(--rgb-blue-2) / .3);*/
    padding: .2rem 1rem;
    margin: 2px 0;
    gap: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.single-metric-stats-card-title {
    /*background-color: var(--blue-shade-4);*/
    /*border: 1px solid var(--blue-shade-4);*/
    border-radius: var(--grx-border-radius) var(--grx-border-radius) 0 0;
    font-size: 10px;
    /*padding: .2rem 1rem;*/
    width: 100%;
    font-weight: 450;
    padding: 0;
    color: var(--blue_alert);
}
.single-metric-stats-card-value {
    font-size: 16px;
    width: 100%;
    font-weight: 600;
    padding: 0;
    color: var(--blue_alert);
}
.single-metric-stats-card-value.red-text {
    color: rgba(var(--rgb-standard-red) / 1);
}
/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/* DASHBOARD SIDEBAR - ARRORDION TITLES AND DESCRIPTION FORMATING */
/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/*noinspection CssUnusedSymbol*/
.dash-board-accordion-title {
    color: var(--pgColorOppositeLight);
    font-size: 12px !important;
    font-weight: 550 !important;
    text-decoration: none !important;
    text-align: left !important;
    max-width: 200px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    display: block;
}

/*noinspection CssUnusedSymbol*/
.dash-board-accordion-title-description {
    color: var(--text_001);
    font-size: 9px !important;
    font-weight: 400 !important;
    text-decoration: none !important;
    text-align: left !important;
    font-style: italic !important;
    text-transform: initial !important;
    max-width: 200px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    display: block;
}

/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/* DASHBOARD SIDEBAR - SCROLL ACREA HOLDING THE ACCORDIONS WITHIN THE DRAWER */
/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/*Used to match up with accordions */
/*noinspection CssUnusedSymbol*/
.drawer-independent-divs {
    padding: 0 15px 0 0;
}

/*noinspection CssUnusedSymbol*/
.dash-board-accordion-scroll-area {
    position: relative !important;
    height: 85vh !important;
    top: 5px !important;
    bottom: 5px !important;
    padding-right: 5px;
    /*!*left: 5px !important;*!*/
    /*!*right: 5px !important;*!*/
    /*padding: 0 10px 0 4px;*/
    /*min-width: 100%;*/
    /*display: inline-flex !important;*/
    /*overflow-x: hidden;*/
    /*padding: 5px;*/
    /*right: 0;*/
    /*height: 100%;*/
    /*overflow-x: hidden;*/
    /*overflow-y: scroll;*/
    /*overflow: scroll;*/
    /*width: 100%;*/
    /*height: calc(95vh - 160px);*/
    /*border-radius: 3px;*/
    /*overflow-y: hidden;*/
    /*display: flex;*/
    /*padding: 3px 5px 3px 0;*/
    /*flex-flow: column wrap;*/
}


/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/* DASHBOARD SIDEBAR - DRAWER .mantine-Drawer-drawer */
/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/*noinspection CssUnusedSymbol*/
.dashboard-widget-drawer .mantine-Drawer-drawer {
    /* border-left: 1px solid var(--border_color_inputs); */
    background: var(--bgdrawerColor);
    color: var(--text_001);
    border-left: none;
    width: 330px;
    position: absolute;
    top: 55px;
    bottom: 0;
    left: 30px;
    max-height: calc(100vh - 45px);
    height: calc(100vh - 45px);
    padding: 10px 0 10px 10px;
    z-index: 999;
}

/*noinspection CssUnusedSymbol*/
.dashboard-widget-drawer .mantine-Drawer-header {
    margin-right: 15px;
    font-size: 15px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: center;
    align-items: center;
    padding: 2px 5px;
}

/*noinspection CssUnusedSymbol*/
.dashboard-widget-drawer .mantine-Drawer-closeButton {
    height: 20px;
    min-height: 20px;
    width: 20px;
    min-width: 20px;
    border-radius: 5px;
    font-size: 12px;
}

/*noinspection CssUnusedSymbol*/
.dashboard-widget-drawer .mantine-Drawer-closeButton:hover {
    background-color: var(--pgColorOppositeLight);
    color: var(--bgColor) !important;
}

/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/* DASHBOARD- Remove Button Icon */
/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/*noinspection CssUnusedSymbol*/
.dash-board-filter-remove-button {
    margin: 0 !important;
    font-size: 16px;
    text-align: left;
    text-decoration: none;
    box-sizing: border-box;
    border: none;
    background-color: transparent;
    color: var(--warning_red_button) !important;
    position: relative;
    height: 100% !important;
    min-height: 18px !important;
    width: 18px !important;
    min-width: 18px !important;
    border-radius: 18px;
    padding: 0;
    line-height: unset;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
}

/*noinspection CssUnusedSymbol*/
.dash-board-filter-remove-button:hover {
    background-color: transparent;
    /*color: var(--blue_alert_body);*/
    /*background-color: var(--blue_alert_bg) !important;*/
    transform: scale(1.2);
    /*transform: scale(1.1);*/
    /*animation: bounce 0.1s ease-out 1;*/
}

.title-main {
    font-size: 14px !important;
    line-height: 16px;
    font-weight: 450;
    color: var(--text_001);
    text-align: left;
    text-transform: inherit;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}
.title-filters,
.title-periods {
    font-size: 11px !important;
    line-height: 13px;
    text-transform: initial;
    font-style: italic;
    font-weight: 400;
    color: var(--text_001);
    text-align: left;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}
/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/* DASHBOARD- Widget Module Buttons - top right  */
/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/*noinspection CssUnusedSymbol*/
.widget-module-button,
.widget-module-button:active {
    border-radius: 10px;
    height: 16px;
    min-height: 16px;
    width: 16px;
    min-width: 16px;
    /*margin-top: 1px;*/
    color: var(--DisabledInputs);
    background-color: var(--bg_layer4);
}

/*noinspection CssUnusedSymbol*/
.widget-module-button:hover {
    -ms-transform: scale(1.15);
    transform: scale(1.15);
    color: var(--grx-icon-green) !important;
    background-color: var(--bg_layer4);
}

/*noinspection CssUnusedSymbol*/
.widget-module-button-icon {
    height: 16px;
    min-height: 16px;
    width: 16px;
    min-width: 16px;
    padding: 0;
    margin: 0;
}


.sidebar-icon-popover {
    z-index: 10001;
    background-color: var(--sb_active_color);
    border: 1px solid var(--border_color_inputs);
    color: var(--text_001);
}
.sidebar-icon-popover .popover-body {
    color: var(--text_001);
}
.sidebar-icon-popover .arrow {
    background-color: var(--sb_active_color);
}

/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/* DASHBOARD- HIDE THE TITLE ROWS BEFORE GENERATED */
/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
.widget-above-graph-container {
    visibility: visible;
}
.widget-above-graph-container.hide {
    visibility: hidden;
}

/*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/*Formating of the filter inputs created using pattern matching */
/*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
.widget-filter-row {
    border-bottom: 1px solid var(--border_color);
    padding: 5px 0;
    margin: 0;
}
/*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/*horizontal line with gap*/
/*noinspection CssUnusedSymbol*/
.horizontal_divider_gap {
    margin: 7px 0;
    border-width: 1px 0 0;
    border-right-style: initial;
    border-bottom-style: initial;
    border-left-style: initial;
    border-right-color: initial;
    border-bottom-color: initial;
    border-left-color: initial;
    border-image: initial;
    border-top-color: var(--border_color_inputs);
    /*border-top-color: rgb(206, 212, 218);*/
    border-top-style: solid;
}

/*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/*horizontal line with gap*/
.horizontal_divider_small {
    margin: 5px 0;
    border-width: 1px 0 0;
    border-right-style: initial;
    border-bottom-style: initial;
    border-left-style: initial;
    border-right-color: initial;
    border-bottom-color: initial;
    border-left-color: initial;
    border-image: initial;
    border-top-color: rgb(206, 212, 218);
    border-top-style: solid;
}

.mantine-Badge-light {
    color: var(--blue_alert_main);
    background-color: var(--blue_alert_bg_dark);
}
/*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/*Widget Dashboard - individual summary cards above chart styling rgb(197 218 159) */
/*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/*noinspection CssUnusedSymbol*/
.widget-summary-col-collapse-button,
.widget-summary-col-collapse-button:focus {
    width: 15px ;
    height: 15px ;
    min-width: 15px ;
    min-height: 15px ;
    padding: 0;
    background-color: transparent ;
    color: var(--blue_alert) ;
    border-radius: 2px;
    /*margin: 0;*/
}

/*noinspection CssUnusedSymbol*/
.widget-summary-col-collapse-button:hover,
.widget-summary-col-collapse-button:active {
    transform: scale(1.2);
    background-color: transparent ;
    color: var(--blue_alert) ;
}

/*noinspection CssUnusedSymbol*/
.widget-summary-col-collapse-button-container {
    font-size: 15px;
    width: 100%;
    height: 25px;
    overflow: hidden;
    display: inline-flex;
    justify-content: flex-end;
}
.widget-summary-col-contents {
    padding: 3px 2px;
    display: flex;
    flex-direction: column;
    align-content: flex-end;
    overflow: hidden;
    visibility: visible;
}
.widget-summary-col-contents.hide {
    display: none !important;
}

.widget-col-content {
    width: inherit;
    height: 100%;
    /*padding: 5px;*/
    /*width: calc(100% - 15px);*/
    /*width: 100%;*/
    /*width: 220px;*/
    /*width: calc(100% - 30px);*/
    /*max-width: calc(100% - 30px);*/
}

.widget-summary-col {
    margin-left: 5px;
    padding: 1px;
    width: 250px;
    min-width: 250px;
    max-width: 250px;
    background-color: var(--bg_layer5);
    border: 1px solid var(--border_color);
    box-shadow: var(--grx-box-shadow);
    border-radius: var(--grx-border-radius);
    overflow-y: auto;
    overflow-x: hidden;
    height: calc(100vh - 55px - 35px - 25px - 1rem - 2rem - 10px);
    max-height: calc(100vh - 55px - 35px - 25px - 1rem - 2rem - 10px);
}
.widget-summary-col.small {
    height: calc(100vh - 55px - 35px - 25px - 1rem - 2rem - 240px - 15px - 1.5rem);
    max-height: calc(100vh - 55px - 35px - 25px - 1rem - 2rem - 240px - 15px - 1.5rem);
}

/* when hidden is column should collapse into a single column only 15px wide */
.widget-summary-col.hide {
    width: 20px;
    min-width: 20px;
    max-width: 20px;
    background-color: transparent;
    box-shadow: none;
    border: none;
    /*padding: 0;*/
    /*overflow: hidden;*/
    /*visibility: hidden;*/
}

.widget-summary-row {
    padding: 5px 10px;
    width: 100%;
    /*display: flex;*/
    /*flex-direction: row;*/
    /*justify-content: space-between;*/
    /*flex-wrap: wrap;*/
}
.widget-summary-row-card {
    /*max-width: 180px;*/
    /*min-width: 150px;*/
    width: 230px;
    padding: 5px 10px 5px 5px;
    border-radius: 5px;
    /*background: var(--bgCarosel);*/
    background: var(--blue_alert_bg_dark);
    border: 1px solid var(--border-1);
}
.widget-summary-row-card-icon {
    margin: 2px;
    border-radius: 4px 0 0 4px;
    color: var(--blue_alert);
    background-color: transparent;
    height: 20px;
    width: 20px;
    min-width: 20px;
    max-width: 20px;
    padding: 0;
}

.widget-summary-card-text-value {
    margin-top: 2px;
    font-size: 12px;
    line-height: 18px;
    font-weight: 600;
    letter-spacing: 0;
    /*letter-spacing: 0.1rem;*/
    color: var(--text_001);
    text-align: left;
    flex-wrap: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.widget-summary-card-text-metric {
    margin-bottom: 2px;
    font-size: 1rem;
    line-height: 15px;
    font-weight: 475;
    color: var(--text_001);
    text-align: left;
    flex-wrap: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hoverdata-table-container {
    width: inherit;
}


/*.grx-hover-marker-table .mantine-Table-tr:where(tr)[data-hover] {*/
/*    background-color: var(--bg_layer1) !important;*/
/*}*/

/*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/* DCC INPUT */
/*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
.my-dcc-input-comp {
    border-radius: 3px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    vertical-align: middle;
    font-size: 10px !important;
    padding: 2px 5px !important;
    color: rgb(134, 142, 150);
    background-color: var(--bgColor) !important;
    height: 26px;
    width: 100%;
    border: 1px solid var(--border_color_inputs);
    overflow: auto;
    /*cursor: pointer;*/
    /*display: table;*/
}
.my-dcc-input-comp::placeholder {
    font-size: 10px !important;
    color: var(--placeholderText) !important;
    font-style: italic;
}
/*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/*Mantine Chips */
/*https://www.dash-mantine-components.com/components/chips#keyword-arguments*/
/*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/*noinspection CssUnusedSymbol*/
.mantine-Chips-root {
    font-size: 11px !important;
    margin: 0 5px;
}

/*noinspection CssUnusedSymbol*/
.mantine-Chips-label {
    font-size: 11px !important;
    color: var(--pgColorOpposite);
    background-color: var(--bg_layer4);
    border: 1px solid var(--border_color_inputs);
    padding: 2px 7px;
    height: 100%;
    line-height: 100%;
}

/*noinspection CssUnusedSymbol*/
.mantine-Chips-checked {
    color: var(--primary);
}

/*noinspection CssUnusedSymbol*/
.mantine-Chips-input {
    font-size: 11px;
}

/*noinspection CssUnusedSymbol*/
.mantine-Chips-checkIcon {
    height: 8px;
}

/*noinspection CssUnusedSymbol*/
.mantine-bhsibn {
    box-sizing: border-box;
    display: flex;
    flex-flow: row wrap;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: start;
    justify-content: space-between;
    gap: 5px !important;
    flex-wrap: wrap;
}
.required_asterisk {
    color: red;
    height: 6px;
    width: 6px;
}
.required_asterisk_div {
    /*height: 100%;*/
    /*padding-bottom: 10px;*/
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}

/* Active Layout Icons Classes  *!*/
/*noinspection CssUnusedSymbol*/
.layout_option_icon_default {
    cursor: pointer;
    /*background-color: transparent !important;*/
}

/*noinspection CssUnusedSymbol*/
.layout_option_icon_default:active {
    /*background-color: var(--grx_green) !important;*/
}

/* Container that will go inside the body and hold the contents of the page */
/*noinspection CssUnusedSymbol*/
.content-container-home-scroll {
    width: 100vw;
    height: calc(100vh - var(--height-navbarMaster));
    background-color: var(--bg_layer1);
    padding: 1rem;
    /*position: fixed;*/
    /*top: var(--height-navbarMaster);*/
    /*width: 100vw;*/
    /*bottom: 0;*/
    /*left: 0;*/
    /*right: 0;*/
    /*margin: 0;*/
    /*background-color: var(--pgColor);*/
    /*overflow-y: scroll;*/
    /*padding: 1rem 1.5rem 1.5rem 1.5rem;*/
}
.content-container-home {
    /*background-color: var(--bgCardsHome);*/
    height: calc(100vh - var(--height-navbarMaster));
    max-height: calc(100vh - var(--height-navbarMaster));
    width: 100vw;
    max-width: 100vw;
    top: var(--height-navbarMaster);
    bottom: 0;
    left: 0;
    right: 0;
    position: fixed;
    overflow: hidden;
    /*overflow-y: auto;*/
    /*overflow-x: hidden;*/
}

/*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/* Page: HOME ---- card parent formatting */
/*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
.card-1-home {
    height: 80vh;
}
.card-header-1-home {
    background-color: var(--bgCardsHome);
    color: var(--light_text);
    text-transform: capitalize;
    border-top: 0 solid #d0d2d5;
    border-bottom: 0 solid #d0d2d5;
    border-right: 0 solid #d0d2d5;
    border-left: 0 solid #d0d2d5;
    padding-top: 1rem;
}
.card-body-1-home {
    background-color: white;
    color: #232b36;
    border-top: 0 solid #232b36;
    border-bottom: 0 solid #232b36;
    border-right: 0 solid #232b36;
    border-left: 0 solid #232b36;
    overflow-y: auto;
    overflow-x: hidden;
    display: inline-block; /*/* KEY TO HAVING EACH LINK EXPAND ACROSS HORIZONTALLY */
    align-items: center;
    justify-content: center;
}

/*!* Auto sizing objects within cards */
/*noinspection CssUnusedSymbol*/
.card_body_normal {
    background-color: white;
    color: #232b36;
    border-top: 0 solid #232b36;
    border-bottom: 0 solid #232b36;
    border-right: 0 solid #232b36;
    border-left: 0 solid #232b36;
    overflow-y: auto;
    overflow-x: hidden;
    display: inline-block; /*/* KEY TO HAVING EACH LINK EXPAND ACROSS HORIZONTALLY */
    /*align-items: center;*/
    /*justify-content: center;*/
}

/*noinspection CssUnusedSymbol*/
.card_body_flex_stretch {
    display: flex;
    flex-flow: column nowrap;
    place-content: space-between space-around;
    align-items: stretch;
}

/*noinspection CssUnusedSymbol*/
.card_body_flex_left {
    display: flex;
    flex-flow: column nowrap;
    place-content: space-between space-around;
    align-items: stretch;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0.5rem;
}

/*noinspection CssUnusedSymbol*/
.resizing_objects {
    /*height: 45%;*/
    /*width: 90%;*/
    /*object-fit: fill;*/
    /*width: 120px;*/
    /*object-fit: fill;*/
    justify-content: center;
    align-items: center;
    padding-top: 1rem;
    /*padding: 0 3rem 0 3rem;*/
    /*padding: 0 4rem 0 4rem;*/
}

/*noinspection CssUnusedSymbol*/
.resizing_icons {
    /*height: 120px;*/
    /*width: 100%;*/
    /*width: 90%;*/
    /*object-fit: fill;*/
    height: 100%;
    padding-top: 1rem;
    justify-content: center;
    align-items: center;
    /*padding: 0.5rem 5rem 0 5rem;*/
    /*padding: 1rem 6rem 1rem 6rem;*/
}

/*noinspection CssUnusedSymbol*/
.icon_home_div {
    border-radius: 6px;
    /*margin: 2px;*/
    padding: 5px;
    display: flex;
    justify-content: center;
}

/*noinspection CssUnusedSymbol*/
.icon_home_div.disabled {
    background-color: rgba(208, 210, 213, 0.9);
    opacity: .35;
}

/*noinspection CssUnusedSymbol*/
.icon_home_div:hover {
    background-color: var(--bg_layer5_highlight);
}

/*noinspection CssUnusedSymbol*/
.home-page-cards {
    border-radius: 5px;
    background-color: var(--bgCardsHome);
    /*border: 1px solid var(--border_color);*/
    /*border: 1px solid #D0D2D5;*/
    overflow-x: hidden;
    /*overflow-y: auto;*/
    min-height: 300px;
    /*margin: 2vh 1vh 1vh 1vh;*/
    box-shadow: 0 0 8px 1px rgb(0 0 0 / 20%);
}

/*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/* Page: HOME ---- CARD BODY */
.home-page-card-flex-height {
    padding: 1rem;
    height: calc((-55px - 5rem + 100vh - 12px) / 2);
    /*height: fit-content;*/
    border-radius: 5px;
    background-color: var(--bg_cards);
    overflow-x: hidden;
    overflow-y: auto;
    margin: 5px;
    box-shadow: 0 0 8px 1px rgb(0 0 0 / 20%);
}

/*noinspection CssUnusedSymbol*/
.home-card-large-home {
    padding: 1rem;
    border-radius: 5px;
    background-color: var(--bg_cards);
    /*border: 1px solid var(--border_color);*/
    /*border: 1px solid #D0D2D5;*/
    overflow-x: hidden;
    overflow-y: hidden;
    /*overflow-x: auto;*/
    /*overflow-y: auto;*/
    height: 57vh;
    margin: 2vh 1vh 1vh 1vh;
    box-shadow: 0 0 8px 1px rgb(0 0 0 / 20%);
}

/*noinspection CssUnusedSymbol*/
.home-card-large-home-scroll {
    /*height: 100%;*/
    margin-bottom: 0.5rem;
    height: calc(57vh - 75px);
}

/*noinspection CssUnusedSymbol*/
.home-card-small-home {
    padding: 1rem;
    border-radius: 5px;
    background-color: var(--bg_cards);
    /*border: 1px solid var(--border_color);*/
    /*background-color: #FFFFFF;*/
    /*border: 1px solid #D0D2D5;*/
    overflow-x: hidden;
    overflow-y: hidden;
    height: 30vh;
    margin: 1vh 1vh 1vh 1vh;
    box-shadow: 0 0 8px 1px rgb(0 0 0 / 20%);
}

/*noinspection CssUnusedSymbol*/
.home-card-small-home-scroll {
    /*height: 100%;*/
    margin-bottom: 0.5rem;
    height: calc(30vh - 75px);
}

/*noinspection CssUnusedSymbol*/
.home-card-full-column-home {
    border-radius: 5px;
    padding: 1rem;
    background-color: var(--bg_cards);
    /*overflow-x: auto;*/
    /*overflow-y: auto;*/
    height: calc(100vh - 55px - 5rem);
    margin: 5px;
    overflow: hidden;
    /*margin: 2vh 1vh 1vh 1vh;*/
    box-shadow: 0 0 8px 1px rgb(0 0 0 / 20%);
}

/*noinspection CssUnusedSymbol*/
.home-page-full-column {
    border-radius: 5px;
    padding: 1rem;
    background-color: var(--bg_layer4);
    overflow-x: auto;
    overflow-y: hidden;
    height: 90vh;
    max-height: calc(100vh - 45px - 2rem - 2rem - 10px - 10px);
    display: flex;
    margin: 1rem 5px;
    box-shadow: 0 0 8px 1px rgb(0 0 0 / 20%);
    flex-direction: column;
}
/* set height to only be the size of the parent div*/
/*noinspection CssUnusedSymbol*/
/*.home-card-scroll-area {*/
/*    border-radius: 4px;*/
/*    display: flex;*/
/*    padding: 3px 5px 3px 0;*/
/*    height: 77vh;*/
/*    !*overflow-y: auto;*!*/
/*}*/
/*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/* Page: HOME ---- CONTAINER */
/*noinspection CssUnusedSymbol*/
.home-content-container_row1-home {
    /*margin-top: 1rem;*/
    /*margin: 1vh;*/
    /*margin-left: 1vh;*/
    /*padding-left: 1vh;*/
    padding: 5px;
    /*margin: 5px;*/
    /* top, right, bottom, left     OR top, right & left, bottom */
    /*padding: 30px 3px 0 3px;  !* top, right, bottom, left     OR top, right & left, bottom *!*/
}

/*noinspection CssUnusedSymbol*/
.home-content-container_row2-home {
    padding: 5px;
    /*margin-top: 1rem;*/
    /*margin: 1vh;*/
    /*padding-left: 1vh;*/
    /*padding-right: 1vh;*/
    /* top, right, bottom, left     OR top, right & left, bottom */
    /*padding: 25px 3px 0 3px;  !* top, right, bottom, left     OR top, right & left, bottom *!*/
}

/*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/* Page: HOME ---- CONTAINER */
/*noinspection CssUnusedSymbol*/
.flex_div_centered {
    padding: 5px;
    display: block;
    /*justify-content: center;*/
    /*align-items: center;*/
}
.centered-card-header-large {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    background-color: transparent;
}
.centered-card-header-large h1  {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    background-color: transparent;
}

/*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/* Page: Resources ---- CARDS */
/*noinspection CssUnusedSymbol*/
.username_display_box:not([type="radio"]):not([type="checkbox"]) {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    font-size: 25px !important;
    text-align: center !important;
    padding: 3px;
    background-color: transparent !important;
    /*background-color: var(--pgColor) !important;*/
    color: var(--light_text) !important;
    border: None !important;
    border-radius: 1px !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    font-family: inherit !important;
    /*height: 26px;*/
}

/*noinspection CssUnusedSymbol*/
.username_display_box:disabled {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    /*font-size: 25px !important;*/
    text-align: center !important;
    padding: 3px;
    background-color: var(--pgColor) !important;
    /*background-color: transparent !important;*/
    color: var(--light_text) !important;
    border: None !important;
    border-radius: 1px !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    font-family: inherit !important;
    opacity: 1 !important;
    /*height: 26px;*/
}

/*noinspection CssUnusedSymbol*/
.resources-card-header.mantine-Text-root {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    font-size: 18px !important;
    font-weight: 500;
    text-align: left !important;
    padding: 3px;
    background-color: transparent !important;
    /*color: var(--light_text) !important;*/
    color: var(--blue_alert) !important;
    border-bottom: none !important;
    border-radius: 1px !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    font-family: inherit !important;
}

/*noinspection CssUnusedSymbol*/
.resources-page-card-content {
    height: calc(100vh - 55px);
    top: 55px;
    bottom: 0;
    left: 0;
    right: 0;
    position: fixed;
    overflow-x: hidden;
    overflow-y: auto;
}

.vertical-grid-classname {
    height: 100%;
    padding: 5px;
}
.vertical-flex-card-container {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    height: 100%;
}

/*noinspection CssUnusedSymbol*/
.resource-card-large {
    border-radius: 5px;
    padding: 1rem;
    background-color: var(--bg_cards) !important;
    height: calc(100vh - 55px - 4rem);
    margin: 1rem;
    box-shadow: 0 0 8px 1px rgb(0 0 0 / 20%);
}

.profile-card {
    border-radius: 5px;
    padding: 1rem;
    background-color: var(--bg_cards) !important;
    height: 100%;
    max-height: calc(100vh - 55px - 4rem);
    /*position: relative;*/
    /*top: 10px;*/
    /*bottom: 10px;*/
    margin: 1rem;
    overflow: hidden;
    box-shadow: 0 0 8px 1px rgb(0 0 0 / 20%);
}

/*noinspection CssUnusedSymbol*/
.profile-avatar-icon {
    /*background-color: var(--grx_green);*/
    background-color: var(--blue_alert);
    color: white;
    height: 100%;
    width: 100%;
    padding: 2px;
    border-radius: 50%;
    font-size: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/*noinspection CssUnusedSymbol*/
.profile-avatar {
    background-color: transparent !important;
    color: var(--light_text);
    height: 5rem;
    width: 5rem;
    border: none;
    padding: 0;
}

/*noinspection CssUnusedSymbol*/
.profile-avatar .mantine-Avatar-placeholder	{
    background-color: transparent;
}
/* Page: Resources ---- card parent formatting */
.card-1 {
    height: 80vh;
}

/* Page: Resources ---- card header formatting */
.card-header-1 {
    background-color: white;
    /*color: #232B36;*/
    color: var(--light_text);
    border-top: 5px solid #232b36;
    border-bottom: 0 solid #d0d2d5;
    border-right: 0 solid #d0d2d5;
    border-left: 0 solid #d0d2d5;
    padding-top: 1rem;
}


/*.sidebar-spinner {*/
/*  !* tranparent 50% using rgb colors from var(--rgb-background) *!*/
/*  opacity: .5 !important;*/
/*  background-color: var(--blue_alert) !important;*/
/*  z-index: 9999;*/
/*}*/
/*!* OLD *!*/
/*.resource-card-large {*/
/*  border-radius: 5px;*/
/*  padding: 1rem 1rem 1rem 2rem;*/
/*  background-color: var(--bgCardsHome) !important;*/
/*  overflow-x: auto;*/
/*  overflow-y: auto;*/
/*  height: 90vh;*/
/*  margin: 2vh 1vh 1vh 1vh;*/
/*  box-shadow: 0 0 8px 1px rgb(0 0 0 / 20%);*/
/*}*/
/*.resource-accordion {*/

/*}*/
/*.resource-accordion {*/
/*  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";*/
/*}*/
/*.resource-accordion .mantine-Accordion-item {*/
/*  margin: 0.5rem 0 0.5rem 0.5rem;*/
/*  !*border: none;*!*/
/*  border: 1px solid var(--border_color_inputs);*/
/*  border-radius: 4px;*/
/*}*/
/*.resource-accordion .mantine-Accordion-chevron {*/
/*  border: 1px solid var(--pgColorOppositeTransparent);*/
/*  color: var(--pgColorOpposite);*/
/*  height: 15px;*/
/*  min-height: 15px;*/
/*  width: 15px;*/
/*  min-width: 15px;*/
/*  border-radius: 15px;*/
/*  margin: 0 5px;*/
/*  !*padding: 2px;*!*/
/*  !*font-size: 10px;*!*/
/*}*/
/*.resource-accordion .mantine-Accordion-label {*/
/*  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";*/
/*  margin-left: 5px;*/
/*  font-size: 12px;*/
/*  font-weight: 500;*/
/*}*/
/*.resource-accordion .mantine-Accordion-panel {*/
/*  border: none;*/
/*  !*border: 1px solid var(--border_color_inputs);*!*/
/*}*/
/*.resource-accordion .mantine-Accordion-control {*/
/*  !*border: 1px solid var(--border_color_inputs);*!*/
/*  border: none;*/
/*  border-radius: 4px;*/
/*  height: 30px;*/
/*  padding: 3px 2px;*/
/*}*/
/*.resource-accordion .mantine-Accordion-control:hover {*/
/*  background-color: var(--green_highlight_transparent) !important;*/
/*  color: var(--text_001);*/
/*}*/
/*.resource-accordion .mantine-Accordion-panel .mantine-Accordion-content {*/
/*  padding: 5px;*/
/*  !*height: fit-content;*!*/
/*  !*font-size: 11px;*!*/
/*  !*font-weight: 500;*!*/
/*}*/


/*!*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*!*/
/*!* Mantine Accordion*!*/
/*.mantine-Accordion-itemTitle {*/
/*  width: 100%;*/
/*}*/
/*.mantine-Accordion-item {*/
/*  margin: 0.5rem 0 0.5rem 0.5rem;*/
/*  border: none;*/
/*  !*border: 1px solid var(--border_color_inputs);*!*/
/*  !*border-radius: 4px;*!*/
/*}*/
/*.mantine-Accordion-label {*/
/*  color: var(--text_001);*/
/*  font-size: 12px;*/
/*  font-weight: 450;*/
/*}*/
/*.mantine-Accordion-control {*/
/*  border-radius: 4px;*/
/*  padding: 3px 2px;*/
/*}*/
/*.mantine-Accordion-content {*/
/*  padding: 5px;*/
/*  margin: 0.5rem;*/
/*  !*margin: .5rem 1.35rem;*!*/
/*  !*border-left: 1px dashed var(--text_001);*!*/
/*}*/
/*.mantine-Accordion-icon {*/
/*  color: var(--text_001);*/
/*  transform: rotate(-90deg);*/
/*  transition: transform 150ms ease 0s;*/
/*}*/
/*.mantine-1xa9lqx,*/
/*> .__mantine-ref-itemTitle,*/
/*> .__mantine-ref-control,*/
/*.__mantine-ref-icon {*/
/*  color: var(--pgColorOpposite);*/
/*  transform: rotate(0deg);*/
/*}*/

/*.mantine-Accordion-itemOpened {*/
/*  color: var(--pgColorOpposite) !important;*/
/*  background-color: var(--bg_layer5_highlight);*/
/*  border-radius: 4px;*/
/*}*/
/*.mantine-Accordion-itemOpened .mantine-Accordion-label {*/
/*  font-weight: 500 !important;*/
/*  color: var(--pgColorOpposite) !important;*/
/*}*/
/*!*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*!*/
/*!* HOME PAGE ACCORDIANS -- tutorial-accordion *!*/
/*.tutorial-accordion {*/
/*  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";*/
/*}*/
/*.tutorial-accordion .mantine-Accordion-chevron {*/
/*  border: 1px solid var(--pgColorOppositeTransparent);*/
/*  color: var(--pgColorOpposite);*/
/*  height: 15px;*/
/*  min-height: 15px;*/
/*  width: 15px;*/
/*  min-width: 15px;*/
/*  border-radius: 15px;*/
/*  margin: 0 5px;*/
/*  !*padding: 2px;*!*/
/*  !*font-size: 10px;*!*/
/*}*/
/*.tutorial-accordion .mantine-Accordion-label {*/
/*  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";*/
/*  margin-left: 5px;*/
/*  font-size: 11px;*/
/*  font-weight: 500;*/
/*}*/

/* 13_lumino.css */
/*.lm-BoxPanel {*/
/*    top: 45px;*/
/*    bottom: 0;*/
/*    width: 100%;*/
/*    !*left: 360px;*!*/
/*    !*right: 0;*!*/
/*    position: fixed;*/
/*    z-index: 1;*/
/*    overflow-y: hidden;*/
/*    overflow-x: hidden;*/
/*    transition: all 0.1s;*/
/*}*/
/*.lm-DockPanel {*/
/*    margin: 0 2px 0 1px !important;*/
/*    box-shadow: none !important;*/
/*    !*box-shadow: inset 0 0 4px 0 rgb(0 0 0 / 50%);*!*/
/*}*/
/*==========================================================================================================*/
/* CUSTOM CLASSES FOR VARIOUS DASHBOARD USING LUMINO */
/*==========================================================================================================*/
/*.my_display_none {*/
/*    display: none !important;*/
/*}*/

/*.hide_docker_panel {*/
/*    visibility: hidden;*/
/*}*/
/*.show_docker_panel {*/
/*    visibility: visible;*/
/*}*/
/*.lumino_graph_layout {*/
/*    min-height: 90%;*/
/*    position: relative;*/
/*    bottom: 0;*/
/*    flex-grow: 1;*/
/*    top: 0;*/
/*    display: flex;*/
/*    justify-content: flex-start;*/
/*    flex-direction: column;*/
/*    flex-wrap: nowrap;*/
/*}*/

/*.lumino_page_content_2 {*/
/*    display: flex;*/
/*    position: fixed;*/
/*    top: 45px;*/
/*    bottom: 0;*/
/*    left: 30px;*/
/*    right: 0;*/
/*    !*width: calc(100vw - 360px);*!*/
/*    z-index: 0;*/
/*    overflow-y: hidden;*/
/*    overflow-x: hidden;*/
/*    transition: all 0.1s;*/
/*}*/
/*.lumino_page_content.hidden {*/
/*    display: none !important;*/
/*}*/
/*.lumino_page_content_full {*/
/*    top: 0;*/
/*    bottom: 0;*/
/*    left: 30px;*/
/*    width: calc(100vw - 30px);*/
/*    position: relative;*/
/*    z-index: 1;*/
/*    overflow-y: hidden;*/
/*    overflow-x: hidden;*/
/*    transition: all 0.1s;*/
/*    !*display: flex;*!*/
/*    !*flex-direction: row;*!*/
/*    !*flex-wrap: nowrap;*!*/
/*    !*align-items: flex-start;*!*/
/*    !*justify-content: flex-start;*!*/
/*}*/

/*.react-grid-item.item.react-draggable.cssTransforms.react-resizable*/

/*!*==========================================================================================================*!*/
/*!* LUMINO CLASSES *!*/
/*!*==========================================================================================================*!*/
/*.lm-DockPanel {*/
/*    background-color: var(--pgColor);*/
/*    !*background-color: var(--bgColor);*!*/
/*    !*ToDO check out this*!*/
/*    position: relative;*/
/*    !*position: fixed;*!*/
/*    top: 45px;*/
/*    bottom: 0;*/
/*    left: 360px;*/
/*    right: 0;*/
/*    margin: 0 2px 0 1px !important;*/
/*    box-shadow: none !important;*/
/*    z-index: 1;*/
/*    overflow-y: hidden;*/
/*    overflow-x: hidden;*/
/*    transition: all 0.1s;*/
/*}*/
/*.lm-DockPanel-widget {*/
/*    background-color: var(--pgColor);*/
/*    box-shadow: none !important;*/
/*    !*box-shadow: 0 1px 4px 0 rgb(0 0 0 / 30%);*!*/
/*    border-color: var(--border_color_inputs);*/
/*    border-width: 0 1px 1px 1px;*/
/*}*/
/*.lm-TabPanel-stackedPanel {*/
/*    !*background-color: var(--pgColor);*!*/
/*    background-color: var(--bgColor);*/
/*    z-index: 0;*/
/*    min-width: 325px !important;*/
/*    max-width: 400px;*/
/*}*/
/*.lm-content, .lm-panel {*/
/*    border-color: var(--border_color_inputs);*/
/*    border-width: 0 1px 1px 1px;*/
/*    !*min-width: 325px;*!*/
/*    min-height: 50px;*/
/*    height: unset;*/
/*    width: unset;*/
/*    padding: 8px;*/
/*}*/
/*.lm-Widget .lm-panel .lm-TabPanel-stackedPanel{*/
/*    min-width: 325px;*/
/*    max-width: 400px;*/
/*    !*min-width: 300px !important;*!*/
/*    !*max-width: 400px !important;*!*/
/*}*/
/*.lm-TabPanel-stackedPanel .lm-panel{*/
/*    z-index: 0;*/
/*    min-width: 325px;*/
/*    max-width: 400px;*/
/*    !*max-width: 400px !important;*!*/
/*    !*min-width: 20vw !important;*!*/
/*}*/
/*.lm-Widget .lm-Panel .lm-StackedPanel .p-StackedPanel .lm-TabPanel-stackedPanel {*/
/*    min-width: 325px;*/
/*    max-width: 400px;*/
/*}*/

/*!* SIDEBAR within --- LUMINO VIEW =====================================================*!*/
/*.lm-TabBar {*/
/*    min-height: 25px;*/
/*    max-height: 25px;*/
/*}*/
/*.lm-TabBar-tab {*/
/*    background-color: transparent;*/
/*    box-shadow: none;*/
/*}*/
/*.tabBarContainer {*/
/*    background-color: var(--navColor);*/
/*    position: absolute;*/
/*    top: 0;*/
/*    left: 0;*/
/*    max-width: 35px;*/
/*    min-width: 35px;*/
/*    border: none;*/
/*    !*border-left: 2px solid var(--BgSecondaryNavbar);*!*/
/*    border-radius: 0 !important;*/
/*    padding: 0;*/
/*    margin: 0;*/
/*    !*padding: 7px 0 0;*!*/
/*}*/
/*.tabBarContainer::after {*/
/*    margin: 0;*/
/*    min-height: inherit;*/
/*    min-width: inherit;*/
/*    content: "";*/
/*    border-right: none;*/
/*    border-left: none;*/
/*    background: 0 0;*/
/*    position: absolute;*/
/*}*/

/*!* SIDEBAR FLAGS  FLAGS/ID NAMES FOR EACH CHART  =====================================================*!*/
/*.lm-SideBar.p-TabBar {*/
/*    overflow: visible;*/
/*    display: block;*/
/*    min-width: fit-content;*/
/*}*/
/*.tabBarContainer .lm-SideBar {*/
/*    background-color: transparent;*/
/*    border: none;*/
/*    height: 35px !important;*/
/*    width: 35px !important;*/
/*    min-height: 35px;*/
/*    max-height: 35px;*/
/*    border-radius: 0 !important;*/
/*    padding: 0;*/
/*    margin: 0;*/
/*}*/
/*.tabBarContainer .lm-SideBar .p-TabBar-content {*/
/*    background-color: transparent;*/
/*    border-radius: 0 !important;*/
/*    height: 35px !important;*/
/*    width: 35px !important;*/
/*    min-height: 35px;*/
/*    max-height: 35px;*/
/*    margin: 0;*/
/*    padding: 0;*/
/*    display: flex;*/
/*    align-items: stretch;*/
/*    list-style-type: none;*/
/*    transform: none !important;*/
/*}*/
/*.lm-SideBar .p-TabBar-tab.p-mod-current {*/
/*    border-radius: 0 !important;*/
/*    background-color: var(--navColor) !important;*/
/*    color: var(--grx_green);*/
/*    height: 35px !important;*/
/*    min-height: 35px;*/
/*    max-height: 35px;*/
/*    width: 35px !important;*/
/*    border: none !important;*/
/*    !*border-left: 2px solid var(--grx_green);*!*/
/*    !*margin-top: -3px;*!*/
/*    !*border-top: 2px solid var(--grx_green);*!*/
/*    !*border-bottom: none;*!*/
/*    !*border-left: none;*!*/
/*    !*border-right: none;*!*/
/*    display: flex;*/
/*    flex-wrap: nowrap;*/
/*    flex-direction: column;*/
/*    justify-content: flex-start;*/
/*    align-items: center;*/
/*}*/
/*.lm-SideBar .p-TabBar-tab:hover:not(.p-mod-current) {*/
/*    background: var(--navColor);*/
/*    color: var(--FixedLight);*/
/*}*/
/*.lm-SideBar .p-TabBar-tab {*/
/*    border-left: 2px solid var(--navColor);*/
/*}*/
/*.lm-TabBar[data-orientation=vertical], .lm-TabBar[data-orientation=vertical]>.lm-TabBar-content {*/
/*    flex-direction: column !important;*/
/*}*/
/*.lm-TabBar-content {*/
/*    font-size: 12px;*/
/*    min-width: 0;*/
/*    min-height: 0;*/
/*    background-color: transparent !important;*/
/*    border: none;*/
/*    border-bottom: 1px solid var(--border_color_inputs);*/
/*    display: flex;*/
/*    align-items: stretch;*/
/*    list-style-type: none;*/
/*    transform: none !important;*/
/*    flex-wrap: nowrap;*/
/*}*/
/*.lm-SideBar .p-TabBar-tabIcon.fa {*/
/*    color: var(--FixedLight);*/
/*    font-size: 20px !important;*/
/*    transform: none !important;*/
/*    height: 35px !important;*/
/*    width: 35px !important;*/
/*    min-height: 35px;*/
/*    max-height: 35px;*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    flex-wrap: nowrap;*/
/*    justify-content: center;*/
/*    align-items: center;*/
/*    !*margin: unset;*!*/
/*    margin-left: 0;*/
/*}*/
/*.lm-SideBar.p-TabBar.lm-mod-left .p-TabBar-tab.p-mod-current .p-TabBar-tabIcon {*/
/*    color: var(--grx_green);*/
/*    border-left: 2px solid var(--grx_green);*/
/*    transform: none;*/
/*}*/
/*.lm-SideBar .p-TabBar-tab {*/
/*    transform: none !important;*/
/*    height: 35px !important;*/
/*    width: 35px !important;*/
/*    min-height: 35px;*/
/*    max-height: 35px;*/
/*    border-top: 0;*/
/*    border-right: 0;*/
/*    border-bottom: 0;*/
/*    border-radius: 0;*/
/*    padding: inherit;*/
/*    margin: 0;*/
/*    overflow: hidden;*/
/*}*/

/*!* HANDLES  ===========================================================================================*!*/
/*.lm-SplitPanel-handle {*/
/*    width: 3px !important;*/
/*    background-color: var(--border_color_inputs);*/
/*    !*opacity: .7;*!*/
/*}*/
/*.lm-DockPanel-handle[data-orientation=vertical] {*/
/*    height: 3px !important;*/
/*    background-color: var(--border_color_inputs);*/
/*    !*opacity: .7;*!*/
/*}*/

/*!* TAB FLAGS/ID NAMES FOR EACH CHART  =====================================================*!*/
/*.lm-TabBar-tab.lm-mod-current {*/
/*    min-height: 25px;*/
/*    max-height: 25px;*/
/*    line-height: inherit;*/
/*    background-color: transparent !important;*/
/*    color: var(--text_001) !important;*/
/*    transform: translateY(1px);*/
/*    border-top: 2px solid var(--icon_blue);*/
/*    border-bottom: 1px solid var(--pgColor);*/
/*    border-right: 1px solid var(--border_color_inputs);*/
/*    border-left: 1px solid var(--border_color_inputs);*/
/*}*/

/*!* fixed row to hold navbar with the various dashboard options =====================================================*!*/
/*.lm-MenuBar {*/
/*    padding: 2px 5px;*/
/*    background: var(--navbar_highlight) !important;*/
/*    color: var(--FixedLight);*/
/*    border-bottom: 1px solid #ddd;*/
/*    font-size: 12px;*/
/*}*/
/*.lm-MenuBar-content {*/
/*    border: none !important;*/
/*    background: var(--navbar_highlight) !important;*/
/*    margin: 0;*/
/*    padding: 0;*/
/*    display: flex;*/
/*    flex-direction: row;*/
/*    list-style-type: none;*/
/*}*/
/*.lm-MenuBar-item {*/
/*    background: var(--navbar_highlight) !important;*/
/*    padding: 0;*/
/*    border: none !important;*/
/*    margin-bottom: 0;*/
/*    margin-top: 0;*/
/*}*/
/*.lm-MenuBar-content .lm-mod-active {*/
/*    !*color: var(--grx_green);*!*/
/*    border: none !important;*/
/*}*/
/*.lm-MenuBar-item:focus-visible {*/
/*    color: var(--grx_green);*/
/*    border: none !important;*/
/*    !*outline: none !important;*!*/
/*}*/

/*.lumino_menu {*/
/*    top: 45px;*/
/*    width: 100%;*/
/*    height: 3vh;*/
/*    border-top: 1px solid var(--navbar_highlight);*/
/*    background-color: var(--navColor);*/
/*    position: absolute;*/
/*    !*!*z-index: 1;*!  THIS FUCKS UP THE OVERLAPPING FOR DROP DOWN MENUS*!*/
/*    transition: all 0.1s;*/
/*    padding: 5px 4.5rem;*/
/*    display: flex;*/
/*    flex-direction: row;*/
/*    flex-wrap: nowrap;*/
/*    align-items: center;*/
/*    justify-content: flex-start;*/
/*}*/

/*!* dbc drop down -- visible button============================================================================ *!*/
/*.lumino_menu_button {*/
/*    height: inherit;*/
/*    width: fit-content;*/
/*    background-color: transparent !important;*/
/*    color: var(--FixedLight) !important;*/
/*    border: none !important;*/
/*    margin: 0;*/
/*    font-size: 12px !important;*/
/*    box-shadow: none !important;*/
/*    transition: none;*/
/*}*/
/*.lumino_menu_button .dropdown-toggle {*/
/*    height: 100%;*/
/*    white-space: nowrap;*/
/*    padding: 5px;*/
/*    border: none !important;*/
/*    background-color: transparent !important;*/
/*    color: var(--FixedLight) !important;*/
/*    box-shadow: none !important;*/
/*}*/
/*.lumino_menu_button .dropdown-toggle:hover {*/
/*    box-shadow: none !important;*/
/*    background-color: transparent !important;*/
/*    color: var(--grx_green) !important;*/
/*}*/
/*.lumino_menu_button .dropdown-toggle:active {*/
/*    box-shadow: none !important;*/
/*    background-color: transparent !important;*/
/*    color: var(--grx_green) !important;*/
/*}*/
/*!* dbc drop down -- menu expended =====================================================*!*/
/*.dropdown-menu {*/
/*    transform: translate(0px, 27px) !important;*/
/*    position: absolute;*/
/*    z-index: 1000;*/
/*    display: none;*/
/*    min-width: 10rem;*/
/*    padding: 0.5rem 0;*/
/*    margin: 0;*/
/*    font-size: 1rem;*/
/*    text-align: left;*/
/*    list-style: none;*/
/*    background-color: var(--navColor) !important;*/
/*    color: var(--FixedLight);*/
/*    border-color: var(--navbar_highlight);*/
/*    border-width: 1px 0 0 0;*/
/*    background-clip: padding-box;*/
/*    border-radius: 0.25rem;*/
/*}*/
/*.dropdown-menu.show > .lumino_menu_button .dropdown-toggle {*/
/*    color: var(--grx_green) !important;*/
/*}*/
/*!* dbc drop down -- menu item within the menu =====================================================*!*/
/*.dropdown-item {*/
/*    display: block;*/
/*    width: 100%;*/
/*    padding: 0.25rem 1rem;*/
/*    clear: both;*/
/*    font-weight: 400;*/
/*    color: var(--FixedLight);*/
/*    text-align: inherit;*/
/*    text-decoration: none;*/
/*    white-space: nowrap;*/
/*    background-color: transparent;*/
/*    border: 0;*/
/*}*/
/*.lumino_panel {*/
/*    top: 8vh;*/
/*    bottom: 0;*/
/*    left: 0;*/
/*    right: 0;*/
/*    !*ToDO check out this*!*/
/*    position: relative;*/
/*    !*position: fixed;*!*/
/*    z-index: 1;*/
/*    overflow-y: hidden;*/
/*    overflow-x: hidden;*/
/*    transition: all 0.1s;*/
/*    !*margin: 1rem;*!*/
/*    !*background-color: var(--card_background);*!*/
/*}*/
/* Make the background of the div that this spinner is for transparent */
/*div.spinner-border {*/
/*    opacity: .5;*/
/*    background-color: var(--pgColorOppositeTransparent);*/
/*    z-index: 9999;*/
/*}*/

/* ----------------------------------------------------------------------- */
/* SPINNER */
/* ----------------------------------------------------------------------- */

/*.grx-fullscreen-spinner {*/
/*    border-radius: var(--grx-border-radius);*/
/*    background-color: rgb(var(--rgb-background) / 0.5) !important;*/
/*    height: 100% !important;*/
/*    width: 100% !important;*/
/*}*/
/*.grx-spinner {*/
/*    color: var(--blue_alert);*/
/*    width: 3rem;*/
/*    height: 3rem;*/
/*}*/

/*.spinner-border {*/
/*    display: inline-block;*/
/*    width: 2rem;*/
/*    height: 2rem;*/
/*    vertical-align: -.125em;*/
/*    border: .25em solid currentColor;*/
/*    border-right-color: transparent;*/
/*    border-radius: 50%;*/
/*    -webkit-animation: .75s linear infinite spinner-border;*/
/*    animation: .75s linear infinite spinner-border*/
/*}*/

.grx-fullscreen-spinner {
    opacity: 50%;
    border-radius: 15px !important;
    background-color: var(--bg_layer_spinner) !important;
    color: var(--blue_alert) !important;
    position: fixed;
    height: 100% !important;
    width: 100% !important;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    /*z-index: 1;*/
    visibility: visible;
}

/*noinspection CssUnusedSymbol*/
.grx-fullscreen-spinner .visually-hidden {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--bg_layer_spinner) !important;
    z-index: 1;
}


/*.grx-sidebar-mantine-modal .mantine-Modal-modal {*/
/*    display: block;*/
/*    text-decoration: none;*/
/*    color: rgb(0, 0, 0);*/
/*    box-sizing: border-box;*/
/*    border-radius: 4px;*/
/*    !*width: auto !important;*!*/
/*    background-color: var(--bg_layer5);*/
/*    padding: 10px;*/
/*    height: auto;*/
/*    max-height: 90%;*/
/*    width: 550px;*/
/*    max-width: 90%;*/
/*}*/
/*.grx-sidebar-mantine-modal .mantine-Modal-header {*/
/*    padding: 2px;*/
/*    margin: 2px 10px 10px 10px;*/
/*}*/
/*.grx-sidebar-mantine-modal .mantine-Modal-body {*/
/*    padding: 2px;*/
/*    margin: 2px 10px 10px 10px;*/
/*    overflow-y: auto;*/
/*    overflow-x: hidden;*/
/*    height: inherit;*/
/*    max-height: inherit;*/
/*}*/
/*.grx-sidebar-mantine-modal .mantine-Modal-inner {*/
/*    !*position: absolute;*!*/
/*    !*inset: 0;*!*/
/*    !*overflow-y: auto;*!*/
/*    !*padding: 48px 16px;*!*/
/*    !*display: flex;*!*/
/*    !*-webkit-box-pack: center;*!*/
/*    !*justify-content: center;*!*/
/*    !*align-items: center;*!*/
/*}*/

/* PLotly Table Figure go.Table() - prevent wrapping of text, just show elipsis*/
/*.column-cell {*/
/*    white-space: nowrap;*/
/*    overflow: hidden;*/
/*    text-overflow: ellipsis;*/
/*    max-width: inherit;*/
/*    padding: 0 5px;*/
/*    text-align: center;*/
/*}*/
/*.column-cell,*/
/*.cell-rect {*/
/*  height: 20px !important;*/
/*  overflow: hidden;*/
/*    text-overflow: ellipsis;*/
/*    max-width: inherit;*/
/*    padding: 0 5px;*/
/*    text-align: center;*/
/*}*/

/*.cell-rect::after {*/
/*  content: "";*/
/*  display: block;*/
/*  height: 20px;*/
/*  width: 20px;*/
/*  background-color: var(--pgColorOpposite);*/
/*  border-radius: 50%;*/
/*  margin: 0 auto;*/
/*}*/
/*.column-cell,*/
/*.column-cell::after {*/
/*  height: 20px !important;*/
/*  overflow: hidden;*/
/*    text-overflow: ellipsis;*/
/*    max-width: inherit;*/
/*    padding: 0;*/
/*    text-align: center;*/
/*}*/
/*.cell-rect, .cell-text-holder, .column-cell {*/
/*  height: 20px !important;*/
/*  max-height: 10px !important;*/
/*  overflow: hidden;*/
/*    text-overflow: ellipsis;*/
/*    max-width: inherit;*/
/*    padding: 0;*/
/*    text-align: center;*/
/*}*/

/* make sure the loader is styled to be in front of everything and the full height/width of page*/
/*.chart-page-loader {*/
/*    position: fixed !important;*/
/*    width: 100vw !important;*/
/*    height: 100vh !important;*/
/*    top: 0 !important;*/
/*    left: 0 !important;*/
/*    background-color: rgba(var(--rgb-bgColor) / 1) !important;*/
/*    display: flex;*/
/*    justify-content: center;*/
/*    align-items: center;*/
/*    z-index: 200 !important;*/
/*    visibility: visible;*/
/*    !*opacity: .1 !important;*!*/
/*}*/
/* Make clicks pass-through */
/* ---------------------------------------------------------------------------- */
/* Nprogress Styling From */
/* https://github.com/snehilvj/dash.nprogress */
/* ---------------------------------------------------------------------------- */
/*#nprogress {*/
/*  pointer-events: none;*/
/*}*/

#nprogress .bar {
    position: fixed;
    z-index: 100;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 3px !important;
    background: var(--nprogress-color) !important;
}

/*!* Remove these to get rid of the spinner *!*/
#nprogress .spinner {
    /*display: none !important;*/
    /*position: fixed;*/
    /*z-index: 9999;*/
    /*top: 10px;*/
    /*left: 170px;*/
    position: fixed;
    z-index: 9999;
    top: 3px !important;
    left: 12px !important;  /* 1.1rem from the left of the navbar - is aligning with the cube in the granulytix logo */
    width: 18px !important;  /* the estimated width of the granulytix cube within the granulytix logo in the navbar */
    height: 29px !important;  /* 3px from the top and 3px from the bottom of the navbar (net height = 29px == 35px - 3px - 3px) */
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    background-color: transparent;
    /*background-color: rgba(var(--rgb_layer0) / 80%);*/
    /*background-color: rgba(var(--rgb-navbar-1) / 80%);*/
}
#nprogress .spinner-icon {
    /* Size of the spinner - try to keep same size of the width of the #nprogress .spinner div */
    width: 18px !important;
    height: 18px !important;
    box-sizing: border-box !important;
    /* Style and color of the spinner */
    background-color: rgba(var(--rgb-values-green) / 40%);
    border: solid 2px transparent !important;
    border-top-color: var(--nprogress-color) !important;
    border-left-color: var(--nprogress-color) !important;
    border-radius: 50% !important;
    /* Speed of the spinner*/
    -webkit-animation: nprogress-spinner 600ms linear infinite !important;
    animation: nprogress-spinner 600ms linear infinite !important;
}
/*#nprogress .spinner-icon {*/
/*  width: 18px;*/
/*  height: 18px;*/
/*  box-sizing: border-box;*/

/*  border: solid 2px transparent;*/
/*  border-top-color: var(--nprogress-color);*/
/*  border-left-color: var(--nprogress-color);*/
/*  border-radius: 50%;*/

/*  -webkit-animation: nprogress-spinner 400ms linear infinite;*/
/*          animation: nprogress-spinner 400ms linear infinite;*/
/*}*/

/*.nprogress-custom-parent {*/
/*  overflow: hidden;*/
/*  position: relative;*/
/*}*/

/*.nprogress-custom-parent #nprogress .spinner,*/
/*.nprogress-custom-parent #nprogress .bar {*/
/*  position: absolute;*/
/*}*/

/*@-webkit-keyframes nprogress-spinner {*/
/*  0%   { -webkit-transform: rotate(0deg); }*/
/*  100% { -webkit-transform: rotate(360deg); }*/
/*}*/
/*@keyframes nprogress-spinner {*/
/*  0%   { transform: rotate(0deg); }*/
/*  100% { transform: rotate(360deg); }*/
/*}*/