/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
.sidebar-tab-icon {
    width: 20px;
    height: 20px;
    min-height: 20px;
    min-width: 20px;
    padding: 0;
    color: var(--sidebar_colorText);
    /*color: var(--icon_blue);*/
}

.chart_page_tabs .mantine-Tabs-root {}
.chart_page_tabs .mantine-Tabs-list {
    background-color: var(--sidebar_colorBackground) !important;
    border: 1px solid var(--border_color_inputs) !important;
}
.chart_page_tabs .mantine-Tabs-list::before {
    border: none;
    /*border-color: var(--border_color_inputs) !important;*/
}
.chart_page_tabs .mantine-Tabs-panel {
    height: calc(100vh - var(--height-navbarFull));
}
.chart_page_tabs .mantine-Tabs-tab {
    border: none;
    padding: 6px;
    border-radius: 0;
    /*margin-top: 7px;*/
}
.chart_page_tabs .mantine-Tabs-tabLabel {
    color: rgba(var(--rgb-standard-blue) / 1);
}
.chart_page_tabs .mantine-Tabs-tabSection {}

/* Active / Hovered Tab */
.chart_page_tabs .mantine-Tabs-tab[data-active],
.chart_page_tabs .mantine-Tabs-tab[data-active]:hover,
.chart_page_tabs .mantine-Tabs-tab[data-active]:active {
    /*border: 1px solid var(--blue_alert);*/
    /*border-right: none;*/
    background-color: rgba(var(--rgb-standard-blue) / 1);
}
.chart_page_tabs .mantine-Tabs-tab[data-active] .mantine-Tabs-tabLabel,
.chart_page_tabs .mantine-Tabs-tab[data-active]:hover .mantine-Tabs-tabLabel,
.chart_page_tabs .mantine-Tabs-tab[data-active]:active .mantine-Tabs-tabLabel {
    color: var(--FixedLight) !important;
}
.chart_page_tabs .mantine-Tabs-tab:hover {
    background-color: rgba(var(--rgb-standard-blue) / .8);
}
.chart_page_tabs .mantine-Tabs-tab:hover .mantine-Tabs-tabLabel {
    color: var(--FixedLight);
}
/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/* NEW DMC TAB STYLING AS OF 9 1.11.23 */
/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/*https://mantine.dev/core/tabs/*/
/* this is used to sytle the sidebar tab controls that hold each of the icons e.g. filters, structure, etc. */
.granulytix_tabs .mantine-Group-root {
}

/*noinspection CssUnusedSymbol*/
.granulytix_tabs .mantine-Tabs-list {
    transition: all 0.15s ease-in-out;
    background-color: transparent !important;
    border-radius: var(--grx-border-radius) var(--grx-border-radius) 0 0 !important;
    gap: 0;
    /*box-shadow: 0 0 7px 0 rgb(0 0 0 / 20%);*/
    /*background-color: var(--sb_active_color);*/
}
/*.granulytix_tabs .mantine-Tabs-tabsList {*/
/*    transition: all 0.15s ease-in-out;*/
/*    gap: 0;*/
/*    !*background-color: transparent;*!*/
/*    border-radius: var(--grx-border-radius) var(--grx-border-radius) 0 0 !important;*/
/*    !*box-shadow: var(--grx-box-shadow-ltr);*!*/
/*    box-shadow: 0 0 7px 0 rgb(0 0 0 / 20%);*/
/*    background-color: var(--sb_active_color);*/
/*    z-index: 0;*/
/*    !*margin-bottom: -7px;*!*/
/*}*/
.granulytix_tabs .mantine-Tabs-panel {
    height: auto;
}

/*noinspection CssUnusedSymbol*/
.granulytix_tabs .mantine-Tabs-tab {
    border-radius: 4px 4px 0 0 !important;
    /*padding: 5px 5px 12px 5px;*/
    height: 40px;
    padding: 5px;
    max-width: calc(100% / 4);
    background-color: transparent !important;
    /*background-color: var(--sb_active_color);*/
    border-bottom: 2px solid var(--border_color_inputs) !important;
    /*padding-top: 5px;*/
    /*padding-bottom: 5px;*/
    /*padding-left: unset;*/
    /*padding-right: unset;*/
}

/*noinspection CssUnusedSymbol*/
.granulytix_tabs .mantine-Tabs-tab[data-active],
.granulytix_tabs .mantine-Tabs-tab[data-active]:hover,
.granulytix_tabs .mantine-Tabs-tab[data-active]:active {
    scale: none !important;
    /*box-shadow: var(--grx-box-shadow-ltr);*/
    /*border-radius: var(--grx-border-radius) var(--grx-border-radius) 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: none !important;*/
    /*background-color: var(--sb_active_color) !important;*/
    background-color: transparent !important;
    border-bottom: 2px solid var(--blue_alert) !important;
}

/*noinspection CssUnusedSymbol*/
.granulytix_tabs + .mantine-Tabs-tab:hover,
.granulytix_tabs + .mantine-Tabs-tab:active {
    background-color: transparent;
    border-bottom: 2px solid var(--blue_alert) !important;
}

/*noinspection CssUnusedSymbol*/
.granulytix_tabs .mantine-Tabs-tab:not(:active):hover {
    /*border-bottom: 1px solid var(--sb_active_color) !important;*/
    /*border-bottom: none !important;*/
    /*margin-bottom: 0;*/
    /*background-color: var(--HoverInputs);*/
    /*scale: 1.1;*/
    border-bottom: 2px solid rgba(var(--rgb-standard-blue) / .5) !important;
    background-color: inherit;
}

/*noinspection CssUnusedSymbol*/
.granulytix_tabs .Tabs-tab[data-active=true]:after, .mantinne-Tabs-tab[data-active=true]:hover:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -5px; /* This should be the negative value of the shadow's vertical offset */
    height: 5px; /* This should be the same as the shadow's blur radius */
    background: inherit;
    z-index: 1; /* This ensures the pseudo-element is above the shadow */
}

/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/
/* TAB BODY CUSTOM DIVS */
/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *!*/

/*the tab content div -- directly under the tabs on each charting page*/
/*--- Height set == navbar height (55) + chart carosal (35px) + tab height (3vh) */
.visualizer_tab_card_body {
    background-color: transparent;
    border: none;
    /*position: fixed;*/
    /*top: calc(55px + 35px + 25px);*/
    /*bottom: 1vh;*/
    /*left: 0;*/
    /*right: 35px;*/
    /*margin: 0 1rem 0 1rem;*/
    /*flex: 1 1 auto;*/
    /*border-radius: 0 0 var(--grx-border-radius) var(--grx-border-radius);*/
    /*background-color: var(--bg_layer5);*/
    /*color: var(--card_text);*/
    /*border-color: var(--border_color) !important;*/
    /*border-width: 0 1px 1px 1px !important;*/
}

/*noinspection CssUnusedSymbol*/
.tab_card_body {
    background-color: transparent;
    flex: 1 1 auto;
    padding: 7px 1rem;
    /*padding: 1rem 1rem 1rem 1rem;*/
}

.card_tab_icon {
    height: 22px;
    width: 22px;
}

/* -----------------------------------------------------*/
/* Mantine tabs - Settings Modal */
/* -----------------------------------------------------*/
.settings_modal_tabs .mantine-Tabs-root {}
.settings_modal_tabs .mantine-Tabs-list {
    /*background-color: var(--sidebar_colorBackground) !important;*/
    /*border-right: 4px solid transparent;*/
}
.settings_modal_tabs .mantine-Tabs-list::before {
    border-right: 4px solid var(--border_color_inputs) !important;
    /*border-color: var(--border_color_inputs) !important;*/
}
.settings_modal_tabs .mantine-Tabs-panel {
    height: calc(80vh - 15px);
    max-width: calc(1000px - 15px);
    padding: 5px 5px 5px 15px;
}
.settings_modal_tabs .mantine-Tabs-tab {
    border: 4px solid transparent;
    padding: 6px;
    border-radius: 0;
    max-height: 35px;
    /*margin-top: 7px;*/
}
.settings_modal_tabs .mantine-Tabs-tabLabel {
    font-size: 12px;
    font-weight: bold;
    /*color: rgba(var(--rgb-standard-blue) / 1);*/
    padding-right: 10px;
}
.settings_modal_tabs .mantine-Tabs-tabSection {}

/* Active / Hovered Tab */
.settings_modal_tabs .mantine-Tabs-tab[data-active],
.settings_modal_tabs .mantine-Tabs-tab[data-active]:hover,
.settings_modal_tabs .mantine-Tabs-tab[data-active]:active {
    color: var(--blue_alert);
    background-color: rgb(var(--rgb-values-alert-blue) / .2) !important;
    border-right: 4px solid var(--blue_alert);
    /*border-right: none;*/
    /*background-color: rgba(var(--rgb-standard-blue) / 1);*/
}
.settings_modal_tabs .mantine-Tabs-tab[data-active] .mantine-Tabs-tabLabel,
.settings_modal_tabs .mantine-Tabs-tab[data-active]:hover .mantine-Tabs-tabLabel,
.settings_modal_tabs .mantine-Tabs-tab[data-active]:active .mantine-Tabs-tabLabel {
    background-color: transparent;
    color: rgba(var(--rgb-standard-blue) / 1);
}
.settings_modal_tabs .mantine-Tabs-tab:hover {
    background-color: rgb(var(--rgb-values-alert-blue) / .1) !important;
    border-right: 4px solid rgba(var(--rgb-standard-blue) / .8);
}
.settings_modal_tabs .mantine-Tabs-tab:hover .mantine-Tabs-tabLabel {
    /*color: var(--FixedLight);*/
}