.SelfUploadingStepper_container_div {
    height: 100%;
    width: 100%;
    overflow: hidden;
    overflow-wrap: inherit;
    /*display: flex;*/
    /*flex-direction: column;*/
    /*justify-content: space-between;*/
    /*flex-wrap: wrap;*/
    padding: 0 5px;
}
.grx_local_upload_component {
    color: var(--blue_alert);
    background-color: rgba(var(--rgb-standard-blue) / .2);
    /*background-color: var(--bg_inputs);*/
    font-size: 12px;
    width: 100%;
    max-width: 100%;
    height: 26px;
    border: 1px dashed rgba(var(--rgb-standard-blue) / .2);
    border-radius: 3px;
    /*border-width: 1px;*/
    /*border-style: dashed;*/
    /*border-radius: 5px;*/
    /*border-color: var(--border_color_inputs);*/
    padding: 2px 10px;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    text-align: center;
    flex-wrap: wrap;
    justify-content: center;
    cursor: pointer
}
.grx_local_upload_file_text {
    color: var(--text_001);
    border: 1px solid var(--border_color_inputs);
    background-color: rgb(var(--rgb-bgColor) / .5);
    padding: 2px 10px;
    border-radius: 3px;
    height: 26px;
    font-size: 11px;
    font-style: italic;
    width: 100%;
    margin: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.SelfUploadingStepper_ContentScrollArea {
    height: calc(85vh - 32px - 3rem - 46px - 51px - 4rem);
    /*width: 100%;*/
    /*overflow-x: hidden;*/
    /*padding: 10px;*/
    /*margin-bottom: 1rem;*/
    /*padding: 10px;*/
    margin: 1rem;
    /*padding-right: 20px;*/
    /*padding-top: .5rem;*/
    /*margin: .5rem 1rem;*/
    /*padding-right: 20px;*/
    /*margin: 5px;*/
    /*padding: 5px 10px 25px 5px;*/
}
.SelfUploadingStepper_NavButtonArea {
    display: flex;
    justify-content: flex-end;
    flex-flow: nowrap;
    padding: 10px 0;
    margin: 0 10px;
    border-top: 1px solid var(--border_color_inputs);
}
.grx-input-textarea .mantine-Input-input {
    padding: 2px 10px;
    height: 26px;
    min-height: 26px;
    max-height: 26px;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.grx-input-textarea.large .mantine-Input-input {
    padding: 2px 10px;
    height: 60px;
    min-height: 60px;
    max-height: 60px;
}
.grx-input-textarea .mantine-Input-input::placeholder {
    font-style: italic;
    color: var(--text_002);
    opacity: 50%;
}
/* ----------------------------------------------------------------------- */
/* Grid Styling */
/* ----------------------------------------------------------------------- */
.SLM_grid {
    margin: 0;
    padding: 0;
}
.SLM_grid.top_row {
    background-color: var(--bg_layer3);
    padding: 10px;
    border: 1px solid var(--border_color_inputs);
}
.SLM_grid.sub_row {
    background-color: var(--bg_layer3);
    padding: 10px;
    border-bottom: 1px solid var(--border_color_inputs);
    border-left: 1px solid var(--border_color_inputs);
    border-right: 1px solid var(--border_color_inputs);
}

/* ----------------------------------------------------------------------- */
/* MANTINE MODAL TITLES FOR EACH STEP --- dmc.Text() */
/* ----------------------------------------------------------------------- */
.modal_step_title_centered {
    color: var(--blue_alert);
    font-size: 16px;
    width: 100%;
    font-weight: 500;
    text-align: center;
    /*border-bottom: 1px solid var(--border_color_inputs);*/
}
.modal_step_title {
    color: var(--blue_alert);
    font-size: 16px;
    /*width: 100%;*/
    font-weight: 500;
}
.modal_step_subtitle {
    color: var(--blue_alert);
    font-size: 14px;
    width: 100%;
    font-weight: 500;
}
.modal_step_description {
    /*width: 100%;*/
    color: var(--text_002);
    font-size: 12px;
    font-weight: 450;
}
.modal_step_description.italics {
    font-style: italic;
}

.grx-input-labels-text {    
    color: var(--text_001);
    font-size: 12px !important;
    font-weight: 500;
    line-height: 1.55;
    text-decoration: none;
    text-transform: none;
    text-align: left;
    white-space: normal;
    /*font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",;*/
    /*font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";*/
}
.grx-input-labels-text.small {
    font-size: 10px !important;
    font-weight: 400;
    color: var(--text_002);
    /*font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";*/
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
}
.modal-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;
}
.modal-input-description {
    color: var(--text_002);
    font-size: 11px;
    font-style: italic;
    font-weight: 400;
    line-height: 1.55;
    text-align: left;
    text-transform: initial;
    padding-right: 10px;
}

/* ----------------------------------------------------------------------- */
/* Custom Text Sizes -- adds to an existing classname */
/* ----------------------------------------------------------------------- */
.txt-xs {font-size: 10px}
.txt-sm {font-size: 11px}
.txt-md {font-size: 12px}
.txt-lg {font-size: 14px}
.txt-xl {font-size: 16px}

/* ----------------------------------------------------------------------- */
/* Custom Text Colors -- adds to an existing classname */
/* ----------------------------------------------------------------------- */
.blue {color: var(--blue_alert)}

/* ----------------------------------------------------------------------- */
/* MANTINE Altert Text Styling -- for standalone colored text as warnings (classes = .grx-alert-text .warning  & .grx-alert-text .success */
/* ----------------------------------------------------------------------- */
.grx-alert-text {
    font-size: 11px;
    font-weight: 400 !important;
    font-style: italic;
    margin: 0;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
}
.grx-alert-text.warning {
    color: rgb(var(--rgb-standard-red));
}
.grx-alert-text.success {
    color: var(--blue_alert);
}
/* ----------------------------------------------------------------------- */
/* MANTINE Altert Card Styling (classes = .grx-alert-card .simple  & .grx-alert-card .warning */
/* ----------------------------------------------------------------------- */
.grx-general-div {
    width: inherit;
    height: 100%;
}
.grx-alert-card {
    color: rgb(var(--rgb-standard-blue));
    background-color: rgb(var(--rgb-light-blue) / 1);
    border: none;
    border-radius: 5px;
    padding: 5px;
    margin: 5px;
    width: inherit;
    height: 100%;
    box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.2);
}
.grx-alert-card .mantine-Alert-title {
    width: inherit;
    font-size: 13px;
    font-weight: 600 !important;
    margin: 0;
}
.grx-alert-card .mantine-Alert-body {
    width: inherit;
    padding: 0 5px;
}
.grx-alert-card .mantine-Alert-message {
    font-size: 12px;
    font-weight: 400 !important;
    margin: 0;
}
.grx-alert-card.warning {
    color: rgb(var(--rgb-standard-red));
    background-color: rgb(var(--rgb-light-red) / 1);
}
.grx-alert-card.warning .mantine-Alert-message {
    color: rgb(var(--rgb-pgColorOpposite) / 1);
}


.grx-alert-card.success {
    color: rgb(var(--rgb-pgColorOpposite) / 1);
    background-color: rgb(var(--rgb-values-green) / .5);
}
.grx-alert-card.success .mantine-Alert-message,
.grx-alert-card.success .mantine-Alert-title {
    color: rgb(var(--rgb-pgColorOpposite) / 1);
}

/* ----------------------------------------------------------------------- */
/* MANTINE LIST (bullets) --- dmc.list() */
/* ----------------------------------------------------------------------- */
.grx_bullet_lists.mantine-List-root {
    color: var(--text_001);
    font-size: 11px;
    margin: 3px 10px;
    padding: 0;
}
.grx_bullet_lists > .mantine-List-item {
    color: var(--text_001);
    /*font-size: 11px;*/
    width: 100%;
    font-weight: 450;
    padding: 0;
    margin: 0;
}

/*noinspection CssUnusedSymbol*/
.grx_model_bullet_text {
    color: var(--text_001);
    font-size: 11px;
    width: 100%;
    font-weight: 450;
    padding: 0;
    margin: 0;
}
.grx_bullet_lists.med {
    font-size: 11px !important;
}

/* ----------------------------------------------------------------------- */
/* MANTINE MODAL BUTTONS - "NEXT" */
/* ----------------------------------------------------------------------- */
.self_uploading_modal_btn_next {
    color: var(--FixedLight);
    background-color: rgb(var(--rgb-values-alert-blue) / 1);
    font-size: 12px;
    /*max-width: 100px;*/
    /*width: 100px;*/
    width: auto;
    height: 30px;
    line-height: 30px;
    border-radius: 5px;
    border: none;
    padding: 0 10px;
    text-align: center;
}
.self_uploading_modal_btn_next:hover,
.self_uploading_modal_btn_next:focus,
.self_uploading_modal_btn_next:active {
    color: var(--FixedLight);
    background-color: rgb(var(--rgb-values-alert-blue) / .8);
}
.self_uploading_modal_btn_next:disabled {
    color: var(--rgb-pgColorOpposite);
    background-color: rgb(var(--rgb-pgColorOpposite) / .3);
    opacity: .4;
    cursor: not-allowed;
    pointer-events: all;
}
.self_uploading_modal_btn_next .mantine-Button-icon {
    height: 15px;
    width: 15px;
    margin-right: 5px;
}
/* ----------------------------------------------------------------------- */
/* MANTINE MODAL BUTTONS - "BACK" */
/* ----------------------------------------------------------------------- */
.self_uploading_modal_btn_back {
    color: rgb(var(--rgb-pgColorOpposite));
    background-color: rgb(var(--rgb-pgColorOpposite) / 0.2);
    font-size: 12px;
    /*max-width: 100px;*/
    /*width: 100px;*/
    width: auto;
    height: 30px;
    line-height: 30px;
    border-radius: 5px;
    border: none;
    padding: 0 10px;
    text-align: center;
}
.self_uploading_modal_btn_back:hover,
.self_uploading_modal_btn_back:focus,
.self_uploading_modal_btn_back:active {
    color: rgb(var(--rgb-pgColorOpposite));
    background-color: rgb(var(--rgb-pgColorOpposite) / 0.3);
    /*background-color: rgb(var(--rgb-pgColorOpposite) / 0.8);*/
}
.self_uploading_modal_btn_back .mantine-Button-icon {
    height: 15px;
    width: 15px;
    margin-left: 5px;
}

/* ----------------------------------------------------------------------- */
/* MANTINE MODAL BUTTONS - "CANCEL" */
/* ----------------------------------------------------------------------- */
.self_uploading_modal_btn_cancel {
    display: none;
    color: rgb(var(--rgb-standard-red) / .4);
    background-color: rgb(var(--rgb-standard-red) / .3);
    font-size: 12px;
    width: auto;
    height: 30px;
    line-height: 30px;
    border-radius: 5px;
    border: none;
    padding: 0 10px;
    text-align: center;
}
.self_uploading_modal_btn_cancel:hover,
.self_uploading_modal_btn_cancel:focus,
.self_uploading_modal_btn_cancel:active {
    color: var(--FixedLight);
    background-color: rgb(var(--rgb-standard-red) / 1);
}
.self_uploading_modal_btn_cancel .mantine-Button-icon {
    height: 15px;
    width: 15px;
    margin-right: 5px;
}


/* ----------------------------------------------------------------------- */
/* MANTINE MODAL BUTTONS - "SUBMIT UPLOAD" */
/* ----------------------------------------------------------------------- */
.self_uploading_modal_submit_upload_btn {
    color: rgb(var(--rgb-white) / 1);
    background-color: rgb(var(--rgb-values-alert-blue) / 1);
    font-size: 10px;
    width: 100%;
    height: 30px;
    line-height: 30px;
    border-radius: 5px;
    border: none;
    padding: 2px 10px;
    margin: 0;
    text-align: center;
}
.self_uploading_modal_submit_upload_btn:hover,
.self_uploading_modal_submit_upload_btn:focus,
.self_uploading_modal_submit_upload_btn:active {
    color: rgb(var(--rgb-values-alert-blue) / 1);
    background-color: rgb(var(--rgb-values-alert-blue) / .3);
}
.self_uploading_modal_submit_upload_btn:disabled {
    color: var(--rgb-pgColorOpposite);
    background-color: rgb(var(--rgb-pgColorOpposite) / .3);
    opacity: .4;
    cursor: not-allowed;
    pointer-events: all;
}
.self_uploading_modal_submit_upload_btn .mantine-Button-icon {
    height: 15px;
    width: 15px;
    margin-right: 5px;
}

/* ----------------------------------------------------------------------- */
/* MANTINE BUTTONS - "Refresh" */
/* ----------------------------------------------------------------------- */
/*noinspection CssUnusedSymbol*/
.grx_refresh_icon {
    height: 100%;
    width: 100%;
    margin: 3px;
}

/*noinspection CssUnusedSymbol*/
.grx_refresh_icon_btn {
    font-size: 10px;
    width: 25px;
    max-width: 25px;
    min-width: 25px;
    height: 25px;
    min-height: 25px;
    max-height: 25px;
    border-radius: 5px;
    border: none;
    padding: 0;
    text-align: center;
    background-color: rgb(var(--rgb-values-alert-blue) / 1);
    color: rgb(var(--rgb-white) / 1);
}

/*noinspection CssUnusedSymbol*/
.grx_refresh_icon_btn:hover,
.grx_refresh_icon_btn:focus,
.grx_refresh_icon_btn:active {
    color: rgb(var(--rgb-values-alert-blue) / 1);
    background-color: rgb(var(--rgb-values-alert-blue) / 0.4);
}

/* ------------------------------------------------------------------------ */
/* GRX Loader That is generated via callbacks not auto generated */
/* ------------------------------------------------------------------------ */
.grx-item-loader {
    fill: var(--blue_alert);
    height: 35px;
    width: 35px;
}
/* ----------------------------------------------------------------------- */
/* MANTINE MODAL BUTTONS - "ADD NEW FIELD" */
/* ----------------------------------------------------------------------- */
.self_uploading_field_adj_btn {
    font-size: 10px;
    max-width: 100px;
    width: 20px;
    height: 20px;
    line-height: 30px;
    border-radius: 5px;
    border: none;
    padding: 0 2px;
    text-align: center;
}

/* Icon Button Styling -- [Add Field] ----------------------------------------- */
.self_uploading_field_adj_btn.save,
.self_uploading_field_adj_btn.save:focus {
    color: rgb(var(--rgb-values-alert-blue));
    background-color: rgb(var(--rgb-values-alert-blue) / 0.4);
}
.self_uploading_field_adj_btn.save:hover,
.self_uploading_field_adj_btn.save:active {
    color: rgb(var(--rgb-white));
    background-color: rgb(var(--rgb-values-alert-blue) / 1);
}

/* Icon Button Styling -- [Add Field] ----------------------------------------- */
.self_uploading_field_adj_btn.add,
.self_uploading_field_adj_btn.add:focus {
    color: rgb(var(--rgb-values-green));
    background-color: rgb(var(--rgb-values-green) / 0.4);
}
.self_uploading_field_adj_btn.add:hover,
.self_uploading_field_adj_btn.add:active {
    color: rgb(var(--rgb-white));
    background-color: rgb(var(--rgb-values-green) / 1);
}

/* Icon Button Styling -- [Delete Field] ----------------------------------------- */
.self_uploading_field_adj_btn.delete,
.self_uploading_field_adj_btn.delete:focus {
    color: rgb(var(--rgb-standard-red));
    background-color: rgb(var(--rgb-standard-red) / 0.2);
}
.self_uploading_field_adj_btn.delete:hover,
.self_uploading_field_adj_btn.delete:active {
    color: rgb(var(--rgb-light-red));
    background-color: rgb(var(--rgb-standard-red) / 1);
}
.self_uploading_field_adj_btn:disabled,
.self_uploading_field_adj_btn:disabled:focus,
.self_uploading_field_adj_btn:disabled:hover,
.self_uploading_field_adj_btn:disabled:active {
    color: rgb(var(--rgb-dark-grey) / .3);
    background-color: rgb(var(--rgb-dark-grey) / .2);
    cursor: not-allowed;
    pointer-events: all;
}

/* Icon within the mantine-button */
.self_uploading_add_field_btn .mantine-Button-icon {
    height: 15px;
    width: 15px;
    margin-right: 5px;
}
/* ----------------------------------------------------------------------- */
/* MANTINE STEPPER --- dmc.Stepper() */
/* ----------------------------------------------------------------------- */

/* Mantine Stepper Component Settings */
.SelfUploadingStepper_Stepper {
    padding: 5px 10px 5px 5px;
    margin: 5px;
    display: flex;
    width: inherit;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    border: 1px solid var(--blue_alert);
    background-color: var(--blue_alert_bg_dark);
    border-radius: 10px;
    /*background-color: var(--sb_active_color);*/
    /*background-color: #f8f8f8;*/
}
.SelfUploadingStepper_Stepper .mantine-Stepper-steps {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    width: inherit;
    overflow: hidden;
    overflow-wrap: inherit;
    /*overflow-x: hidden;*/
    /*overflow-y: hidden;*/
}
.SelfUploadingStepper_Stepper .mantine-Stepper-step {
    margin: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: flex-start;
    max-width: calc(100% / 5);
    width: 100%;
}

/*noinspection CssUnusedSymbol*/
.SelfUploadingStepper_Stepper .mantine-Stepper-separator {
    /*margin: 0;*/
    margin-left: 5px;
    margin-right: 5px;
}

/*noinspection CssUnusedSymbol*/
.SelfUploadingStepper_Stepper .mantine-Stepper-stepBody {
    width: calc(100% - 34px - 7px - 10px);
    /*max-width: 100%;*/
    /*max-width: 100px;*/
    margin-left: 7px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Mantine Stepper Component >>>> Label */
/*noinspection CssUnusedSymbol*/
.mantine-Stepper-stepLabel {
    color: var(--blue_alert_bg_dark_text);
    font-size: 12px;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Mantine Stepper Component >>>> Description (under label) */
/*noinspection CssUnusedSymbol*/
.mantine-Stepper-stepDescription {
    color: var(--blue_alert_bg_dark_text);
    font-size: 9px;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Mantine Stepper Component >>>> Stepper Icons - Base */
/*noinspection CssUnusedSymbol*/
.mantine-Stepper-stepIcon {
    color: var(--blue_alert_bg_dark_text);
    background-color: var(--blue_highlight_transparent);
    border: 1px solid var(--blue_highlight_transparent);
}

/* Mantine Stepper Component >>>> Stepper Icons - Active / In Progress */
/*noinspection CssUnusedSymbol*/
.mantine-Stepper-stepIcon[data-progress] {
    /*color: var(--blue_alert);*/
    /*background-color: rgb(var(--rgb-values-alert-blue) / 0.3);*/
    color: var(--FixedLight);
    background-color: var(--blue_alert);
    border: 1px solid var(--blue_alert);
}

/* Mantine Stepper Component >>>> Stepper Icons - Complete */
/*noinspection CssUnusedSymbol*/
.mantine-Stepper-stepIcon[data-completed] {
    color: white;
    background-color: var(--grx_green);
    border: 1px solid var(--grx_green);
}

/*noinspection CssUnusedSymbol*/
.mantine-Stepper-stepCompletedIcon {
    color: white;
}
/* ----------------------------------------------------------------------- */
/* MANTINE MODAL dmc.Modal() --- Header */
/* ----------------------------------------------------------------------- */
.mantine-Modal-header {
    font-size: 20px;
    font-weight: 600;
    color: var(--text_001);
    padding: 0 10px;
    margin: 0 10px;
    border-bottom: 1px solid var(--border_color_inputs);
}

/*noinspection CssUnusedSymbol*/
.mantine-Paper-root.mantine-Modal-modal {
    margin: 10px;
    border-radius: 15px;
    background-color: var(--bgdrawerColor);
}

/* ----------------------------------------------------------------------- */
/* [**AgGrid**] Self-Loading-Portal --- Editable AG-GRID Classes -- for headers and legend boxes var(--ag-secondary-foreground-color)*/
/* ----------------------------------------------------------------------- */
.grx-datasource-loading-configs {
    height: 60vh !important;
}
.ag-theme-alpine {
    /* GENERAL FONT AND STYLES */
    /*--ag-foreground-color: var(--text_001);*/
    /*--ag-background-color: rgb(249, 245, 227);*/
    /*--ag-odd-row-background-color: rgb(0, 0, 0, 0.03);*/
    /*--ag-secondary-foreground-color: var(--text_001) !important;*/
    /*--ag-header-column-resize-handle-color: var(--pgColorOppositeTransparent);*/
    --ag-foreground-color: #000;
    --ag-data-color: var(--text_002);
    --ag-secondary-foreground-color: var(--text_001);
    /*--ag-secondary-foreground-color: var(--border_color_inputs);*/
    --ag-header-foreground-color: var(--text_001);
    /*--ag-header-foreground-color: var(--ag-secondary-foreground-color);*/
    --ag-disabled-foreground-color: rgba(0, 0, 0, 0.5);
    --ag-background-color: var(--bg_layer4);
    --ag-header-background-color: transparent;
    --ag-tooltip-background-color: transparent;
    --ag-subheader-background-color: transparent;
    --ag-subheader-toolbar-background-color: transparent;
    --ag-control-panel-background-color: transparent;
    --ag-side-button-selected-background-color: var(--ag-control-panel-background-color);
    --ag-selected-row-background-color: #BBB;
    --ag-odd-row-background-color: var(--ag-background-color);
    --ag-modal-overlay-background-color: rgba(255, 255, 255, 0.66);
    --ag-row-hover-color: transparent;
    --ag-column-hover-color: transparent;
    --ag-range-selection-border-color: var(--ag-foreground-color);
    --ag-range-selection-border-style: solid;
    --ag-range-selection-background-color: rgba(0, 0, 0, 0.2);
    --ag-range-selection-background-color-2: var(--ag-range-selection-background-color);
    --ag-range-selection-background-color-3: var(--ag-range-selection-background-color);
    --ag-range-selection-background-color-4: var(--ag-range-selection-background-color);
    --ag-range-selection-highlight-color: var(--ag-range-selection-border-color);
    --ag-selected-tab-underline-color: var(--ag-range-selection-border-color);
    --ag-selected-tab-underline-width: 0;
    --ag-selected-tab-underline-transition-speed: 0s;
    --ag-range-selection-chart-category-background-color: rgba(0, 255, 132, 0.1);
    --ag-range-selection-chart-background-color: rgba(0, 88, 255, 0.1);
    --ag-header-cell-hover-background-color: rgb(var(--rgb-dark-grey) / .5);
    --ag-header-cell-moving-background-color: rgb(var(--rgb-values-alert-blue) / .50);
    --ag-value-change-value-highlight-background-color: rgba(22, 160, 133, 0.5);
    --ag-value-change-delta-up-color: #43a047;
    --ag-value-change-delta-down-color: #e53935;
    --ag-chip-background-color: transparent;
    --ag-borders: solid 1px;
    --ag-border-color: var(--border_color_inputs);
    --ag-borders-critical: var(--ag-borders);
    --ag-borders-secondary: var(--ag-borders);
    --ag-secondary-border-color: var(--ag-border-color);
    --ag-row-border-style: solid;
    --ag-row-border-color: var(--ag-secondary-border-color);
    --ag-row-border-width: 1px;
    --ag-cell-horizontal-border: solid transparent;
    --ag-borders-input: var(--ag-borders-secondary);
    --ag-input-border-color: var(--ag-secondary-border-color);
    --ag-borders-input-invalid: solid 2px;
    /*--ag-input-border-color-invalid: var(--ag-invalid-color);*/
    --ag-borders-side-button: var(--ag-borders);
    --ag-border-radius: 0px;

    /*---------------------  Dash-ag-grid Styles ----------------------- */
    --aggrid-bgColor-row: var(--bg_layer4);
    --aggrid-bgColor-row-dimension: var(--bg_layer4);
    --aggrid-bgColor-row-metric: var(--bg_layer3);
    --aggrid-section-seperator-row: var(--bg_layer0);
    --aggridRowStyleBackground-Divider: transparent !important;
    /*--aggridRowStyleBackground-Divider: rgba(var(--rgb-standard-blue) / .2);*/
    --aggridRowStyleBackground-lvl1: var(--bg_layer4);
    --aggridRowStyleBackground-lvl2: rgba(var(--rgb-bs-gray-5) / .2);
    --aggridRowStyleBackground-lvl3: rgba(var(--rgb-bs-gray-5) / .4);
    /*--aggrid-bgColor-row: #676f78;*/
    /*--aggrid-bgColor-row-dimension: #FFFFFFFF;*/
    /*--aggrid-bgColor-row-metric: #f3f2f2;*/

    /* Font Family */
    --ag-font-size: 10px;
    --ag-font-family: sans-serif;
    --ag-grid-size: 2px 5px;
    /*--ag-font-family: sans-serif;*/
    /*--ag-font-family: Arial, sans-serif;*/
    /*--ag-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";*/

    /* HEADER STYLES */
    --ag-header-height: 35px;
    /*--ag-header-foreground-color: var(--bg_layer4);*/
    /*--ag-header-foreground-color: var(--pgColor);*/
    /*--ag-header-background-color: var(--navColor);*/
    /*--ag-header-background-color: rgb(var(--rgb-dark-grey) / 1);*/
    /*--ag-header-cell-hover-background-color: rgb(var(--rgb-dark-grey) / .5);*/
    /*--ag-header-cell-moving-background-color: rgb(var(--rgb-values-alert-blue) / .50);*/

    /* ROW STYLES */
    --ag-cell-horizontal-padding: 5px;
    --ag-line-height: 20px !important;
    --ag-row-height: 20px;
    /*--ag-row-border-width: 1px;*/
    /*--ag-row-border-color: var(--border_color_inputs);*/
    --ag-row-hover-background-color: rgb(var(--rgb-dark-grey) / .5);
    --ag-row-selected-color: var(--pgColor);
    --ag-row-selected-background-color: rgb(var(--rgb-dark-grey) / .5);
    --ag-row-drag-background-color: rgb(var(--rgb-values-alert-blue) / .50);
}

/* ----------------------------------------------------------------------- */
/* Self-Loading-Portal --- Editable [AG-GRID] Classes -- for headers and legend boxes */
/* ----------------------------------------------------------------------- */

/* <<<<<<<<<< AGGRID HEADER STYLES >>>>>>>>>> */
/*noinspection CssUnusedSymbol*/
.ag-root-wrapper {
    border: none !important;
    background-color: transparent !important;
    /* border: var(--ag-borders) var(--ag-border-color); */
}
.ag-header, .ag-advanced-filter-header {
    border: none !important;
}
/* HEADERS -- (FIXED - NON-EDITABLE) */
.aggrid-header-fixed {
    background-color: var(--navColor) !important;
    color: var(--FixedLight);
    /*background-color: rgb(var(--rgb-dark-grey) / 1);*/
    /*color: var(--FixedLight)*/
}
.aggrid-header-fixed:hover {
    /*background-color: rgb(var(--rgb-dark-grey) / .85) !important;*/
}
.ag-header-icon {
    color: var(--FixedLight);
}
/* HEADERS -- (EDITABLE) */
.aggrid-header-editable {
    background-color: rgb(var(--rgb-standard-blue) / 1);
    color: var(--FixedLight);
}
.aggrid-header-editable:hover {
    background-color: rgb(var(--rgb-standard-blue) / .85) !important;
}

/* <<<<<<<<<<< Custom Header Styles >>>>>>>>>>> */
/* HEADERS -- (EDITABLE) */
.ag-root .ag-header.ag-pivot-off,
.ag-header-viewport,
.ag-theme-alpine .ag-header-row,
.ag-theme-alpine .ag-header-cell {
    max-height: 75px !important;
    min-height: 30px !important;
}
.ag-header-row {
    height: inherit;
}
.aggrid-header-grx {
    background-color: var(--blue-shade-4) !important;
    color: var(--FixedLight);
    border: 1px solid var(--border_color_inputs);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-wrap: wrap;
}

.aggrid-header-grx.total {
    background-color: var(--blue-shade-4) !important;
}
.aggrid-header-grx.clickdata {
    background-color: var(--blue-shade-4) !important;
}
.aggrid-header-grx.breakdown {
    background-color: var(--blue-shade-1) !important;
}

/* Hovering */
.aggrid-header-grx:hover {
    background-color: rgba(var(--rgb-standard-blue) / .85) !important;
}
/* <<<<<<<<<<< AGGRID LEGEND ITEMS >>>>>>>>>>> */
.aggrid-legend-box-text {
    font-size: 10px;
    color: var(--text_001);
}
.legend-box.aggrid-header-fixed{
    /*background-color: var(--darkgray);*/
    border: 1px solid var(--border_color_inputs);
    border-radius: 2px;
    /*padding: 5px;*/
    /*margin: 5px;*/
    width: 10px;
    height: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-wrap: wrap;
}
.legend-box.aggrid-header-editable{
    /*background-color: var(--blue_alert);*/
    border: 1px solid var(--border_color_inputs);
    border-radius: 2px;
    /*padding: 5px;*/
    /*margin: 5px;*/
    width: 10px;
    height: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-wrap: wrap;
}


/* ----------------------------------------------------------------------- */
/* Configuration Table Summary Div - holds a summary of the configs set by the user in step 2 */
/* ----------------------------------------------------------------------- */
.self_uploading_config_summary_div {
    padding: 5px 10px 5px 0;
    width: 100%;
}
.self_uploading_config_summary_card {
    background-color: var(--pgColor);
    border: 1px solid var(--border_color_inputs);
    border-radius: 10px;
    padding: 10px;
    margin: 5px;
    width: 100%;
    height: 100%;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
}

.ag-theme-alpine .ag-header {
    /*font-family: ;*/
}
.ag-theme-alpine .ag-header-group-cell {
    font-weight: 400;
    font-size: 11px;
}
.ag-theme-alpine .ag-header-cell {
    font-weight: 500;
    font-size: 10px;
    text-align: center;
    padding: 0 2px;
}
.ag-theme-alpine.compact {
    --ag-grid-size: 2px 5px;
}
/* cell drop down in ag-grid */
/*noinspection CssUnusedSymbol*/
.ag-picker-field-wrapper {
    border: none;
    border-radius: 0;
}
.ag-select .ag-picker-field-display {
    margin: 1px 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*noinspection CssUnusedSymbol*/
.ag-cell-inline-editing .ag-cell-wrapper, .ag-cell-inline-editing .ag-cell-edit-wrapper, .ag-cell-inline-editing .ag-cell-editor, .ag-cell-inline-editing .ag-cell-editor .ag-wrapper, .ag-cell-inline-editing .ag-cell-editor input {
    /*height: 23px;*/
    width: 100%;
    line-height: normal;
}
/*-------------------------------------------------------------------------*/
/* Conditional Cell Styling AGGRID */
/*-------------------------------------------------------------------------*/
.aggridCellClassRule-divider {
    font-size: 12px !important;
    padding: 10px 1px 3px 1px !important;
    display: flex;
    align-items: end;
    /*line-height: 15px !important;*/
    color: var(--blue_alert) !important;
    /*justify-content: center;*/
}
.aggridCellClassRule-lvl1 {
    padding: 1px 1px 1px 2px !important;
}
.aggridCellClassRule-lvl2 {
    padding: 1px 1px 1px 7px !important;
}
.aggridCellClassRule-lvl3 {
    padding: 1px 1px 1px 12px !important;
}
/*.ag-picker-field-wrapper {*/
/*    border-radius: 0;*/
/*    !*height: 23px;*!*/
/*}*/
/*.ag-theme-alpine .ag-ltr input[class^=ag-][type=text] {*/
/*    border-radius: 0;*/
/*    padding: 2px 5px;*/
/*    height: 22px;*/
/*    border: none;*/
/*    background-color: var(--aggrid-bgColor-row-dimension) !important;*/
/*}*/
/*.ag-cell, .ag-full-width-row .ag-cell-wrapper.ag-row-group {*/
/*    --ag-internal-calculated-line-height: var(--ag-line-height, calc(var(--ag-row-height) - var(--ag-row-border-width)));*/
/*    --ag-internal-padded-row-height: calc(var(--ag-row-height) - var(--ag-row-border-width));*/
/*    border: 1px solid transparent;*/
/*    line-height: min(var(--ag-internal-calculated-line-height), var(--ag-internal-padded-row-height));*/
/*    padding-left: calc(var(--ag-cell-horizontal-padding) - 1px);*/
/*    padding-right: calc(var(--ag-cell-horizontal-padding) - 1px);*/
/*    -webkit-font-smoothing: subpixel-antialiased;*/
/*}*/
/*-------------------------------------------------------------------------*/
/* 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);*!*/
/*}*/
.accordion-selfupload-calculation-methods .mantine-Accordion-item {
    background-color: var(--bg_layer3);
    border-color: var(--border_color_inputs);
}
.accordion-selfupload-calculation-methods .mantine-Accordion-control,
.accordion-selfupload-calculation-methods .mantine-Accordion-control:focus {
    background-color: var(--bg_layer3);
    /*padding: 5px 10px;*/
    height: 70px;
    padding: 1rem 1.5rem;
    border-bottom-width: 1px;
    /*display: flex;*/
    /*flex-direction: row;*/
    /*align-items: center;*/
}
.accordion-selfupload-calculation-methods .mantine-Accordion-control:hover,
.accordion-selfupload-calculation-methods .mantine-Accordion-control:active {
    background-color: var(--bg_layer3_highlight);
}
.accordion-selfupload-calculation-methods .mantine-Accordion-control[aria-expanded="true"] {
    border-bottom: 1px dotted var(--border-1);
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}
.accordion-selfupload-calculation-methods .mantine-Accordion-label {
    font-size: 13px;
    font-weight: 600;
}
.accordion-selfupload-calculation-methods .mantine-Accordion-content {
    padding: 10px;
    border-radius: 0 0 5px 5px !important;
}
.accordion-selfupload-calculation-methods .mantine-Accordion-chevron {
    color: var(--pgColorOpposite);
}
/*-------------------------------------------------------------------------*/
/* Field Creation Wizard - dmc.Modal() */
/*-------------------------------------------------------------------------*/
.modal-field-wizard .mantine-Modal-modal {
    padding: 1rem 2rem !important;
}
.modal-field-wizard .mantine-Modal-header {
    padding: 0;
    margin: 0;            /* Needed due to mantine's default settings */
    margin-bottom: 10px;  /* Needed due to mantine's default settings */
}
.selfUploadingPortal .mantine-Modal-modal {
    padding: 1rem 2rem !important;
}
.selfUploadingPortal .mantine-Modal-header {
    padding: 0;
    margin: 0;
}
/* ----------------------------------------------------------------------- */
/* Field Creation Wizard - Submit New Field Button -- dmc.Button() */
/* ----------------------------------------------------------------------- */
.field-wizard-submit-btn {
    color: rgb(var(--rgb-white) / 1);
    background-color: rgb(var(--rgb-values-alert-blue) / 1);
    font-size: 10px;
    width: auto;
    height: 30px;
    line-height: 30px;
    border-radius: 5px;
    border: none;
    padding: 2px 10px;
    margin: 0;
    text-align: center;
}
.field-wizard-submit-btn:hover,
.field-wizard-submit-btn:focus,
.field-wizard-submit-btn:active {
    color: rgb(var(--rgb-values-alert-blue) / 1);
    background-color: rgb(var(--rgb-values-alert-blue) / .3);
}
.field-wizard-submit-btn:disabled {
    color: var(--rgb-pgColorOpposite);
    background-color: rgb(var(--rgb-pgColorOpposite) / .3);
    opacity: .4;
    cursor: not-allowed;
    pointer-events: all;
}
.field-wizard-submit-btn .mantine-Button-icon {
    height: 15px;
    width: 15px;
    margin-right: 5px;
}


.textarea-btn-container {
    gap: 5px;
    width: 100%;
    border: 1px solid var(--border_color_inputs);
    background-color: var(--bg_layer2);
    padding: 5px;
    border-radius: 5px;
}
.textarea-btn-container.unstyled {
    border: none;
    background-color: transparent;
    padding: 0;
    border-radius: 0;
}
/*.textarea-btn .mantine-Button-icon {*/
/*    height: 15px;*/
/*    width: 15px;*/
/*    margin-right: 5px;*/
/*}*/
.textarea-btn,
.textarea-btn:focus {
    color: rgb(var(--rgb-values-green)) !important;
    background-color: rgb(var(--rgb-pgColorOpposite) / 0) !important;
    font-size: 10px;
    max-width: 100px;
    width: 20px;
    height: 20px;
    line-height: 30px;
    border-radius: 5px;
    border: none;
    padding: 0 2px;
    text-align: center;
}
.textarea-btn:active,
.textarea-btn:hover {
    color: rgb(var(--rgb-values-green)) !important;
    background-color: rgb(var(--rgb-values-green) / .2) !important;
}
.textarea-btn:disabled {
    opacity: .4;
    cursor: not-allowed;
    pointer-events: all;
}

/* PRISM (Sql Code Formatter) */
/*noinspection CssUnusedSymbol*/
.grx-input-prism .mantine-Prism-code {
    border-radius: 5px;
    border: 1px solid var(--border_color_inputs);
    background-color: var(--sb_active_color);
    padding: 10px 5px;
}

/*noinspection CssUnusedSymbol*/
.mantine-Prism-copy {
    height: 15px;
    width: 15px;
    min-height: 15px;
    min-width: 15px;
}


/* --------------------------------------------------------- */
/* Ace Editor - Code Input Box */
/* --------------------------------------------------------- */
.ace_editor {
    font-size: 11px !important;
}

/* --------------------------------------------------------- */
/* Copy Text Component Item -- This is a custom item that copies text to a clipboard and includes dmc.Group(dmc.Text(), dcc.Clipboard())*/
/* --------------------------------------------------------- */
.copy_text_item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    width: inherit;
    line-height: 1.55;
    padding: 1px 5px;
    margin: 2px 10px;
    border-radius: 5px;
    color: var(--text_001);
    background-color: rgb(var(--rgb-values-alert-blue) / .1);
}
/*.copy_text_item.alt {*/
/*    background-color: rgb(var(--rgb-values-alert-blue) / .3);*/
/*}*/
.copy_text_icon {
    /*height: 11px;*/
    /*width: 11px;*/
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding-right: 3px;
    border-right: 1px solid rgb(var(--rgb-values-alert-blue) / .8);
    color: rgb(var(--rgb-values-alert-blue) / .8);
}
/* The actual text within the .copy_text_item class div */
.copy_text {
    font-size: 11px;
    /*Prevent text from wrapping and add elipses if text goes over the parent divs width*/
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /*width: 100%;*/
}

/* Copy Button withing the .copy_text_item class div */
.copy_text_btn {
    /*height: 15px;*/
    /*width: 15px;*/
    display: inline-flex;
    flex-direction: row;
    align-items: center;
}

/*noinspection CssUnusedSymbol*/
.fa-copy,
.fa-copy:focus {
    height: 15px;
    width: 15px;
    padding: 2px;
    border-radius: 3px;
    color: rgb(var(--rgb-text-default) / .5);
}

/*noinspection CssUnusedSymbol*/
.fa-copy:hover,
.fa-copy:focus,
.fa-copy:active {
    cursor: copy;
    color: var(--blue_alert) !important;
    transform: scale(1.2);
    transition: transform 0.2s ease-in-out;
}
.fa-check-circle {
    color: var(--blue_alert);
}
/* Copy Text Scroll Area -- holds each of the .copy_text_item divs */
.copy_text_container {
    height: 500px;
    width: inherit;
}
.copy_text_scroll_area {
    /*border: 1px solid var(--border_color_inputs);*/
    border-radius: 5px;
    /*margin: 5px 0 5px 5px;*/
    /*padding-right: 10px;*/
}


/* --------------------------------------------------------- */
/* Style Condensed Rows */
/* --------------------------------------------------------- */
.grx-row-container {
  /*display: flex;*/
  /*line-height: 1.1rem;*/
  /*width: 100%;*/
    padding: 1px 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    width: inherit;
    line-height: 1;
}
.grx-row-container.align_top {
    align-items: flex-start;
}
.grx-row-container.align_bottom {
    align-items: flex-end;
}

/* Postgres Buttons (connect and upload) */
.button-postgres,
.button-postgres:focus {
    color: var(--FixedLight);
    background-color: rgb(var(--rgb-values-alert-blue) / 1);
    /*font-size: 11px;*/
    /*height: 15px;*/
    /*width: auto;*/
    /*line-height: 1.55;*/
    height: 25px !important;
    width: 25px !important;
    min-height: 25px;
    min-width: 25px;
    border-radius: 5px;
    border: none;
    padding: 5px;
    text-align: center;
}
.button-postgres:hover,
.button-postgres:active {
    color: var(--blue_alert);
    background-color: rgb(var(--rgb-values-alert-blue) / .4);
}
.button-postgres:disabled {
    color: var(--rgb-pgColorOpposite);
    background-color: rgb(var(--rgb-pgColorOpposite) / .3);
    opacity: .4;
    cursor: not-allowed;
    pointer-events: all;
}
.button-postgres .mantine-ActionIcon-root {
    height: 15px !important;
    width: 15px !important;
}

/* --------------------------------------------------------- */
/* Info Hover Icon */
/* --------------------------------------------------------- */
.hover-info-icon {
  display: flex;
  align-items: center;
  font-size: 15px;
  color: rgb(var(--rgb-text-default) / .5);
}
.hover-info-icon-tooltip .mantine-Tooltip-tooltip {
    font-size: 10px !important;
    color: var(--text_001);
    font-weight: normal;
    offset: 10px;
    padding: 1rem !important;
    border: 1px solid var(--border_color_inputs);
    background-color: var(--bg_layer6);
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
    border-radius: 5px;
}

/* --------------------------------------------------------- */
/* DIVIDER LINES */
/* --------------------------------------------------------- */
.divider-line {
    margin: 5px 0 5px 0;
    border-width: 1px 0 0;
    border-top-color: var(--border_color_inputs);
    border-top-style: solid;
    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;
}
.divider-line.footer {
    margin: 20px 0 5px 0;
}

/* --------------------------------------------------------- */
/* Spoiler */
/* --------------------------------------------------------- */
.grx-spoiler .mantine-Spoiler-control {
    -webkit-font-smoothing: antialiased;
    font-family: Inter, sans-serif;
    -webkit-tap-highlight-color: var(--text_001);
    color: var(--text_001) !important;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.55;
    text-decoration: none;
     background-color: transparent;
    /* background-color: var(--dimmedBorder) !important; */
    /* opacity: .7; */
    border: none;
    cursor: pointer;
    text-align: left;
    margin: 1rem 0 0 0;
    /* padding: 5px; */
    /* border: 0; */
}
.grx-spoiler .mantine-Spoiler-control:hover {
    color: var(--blue_alert) !important;
    opacity: 1;
    background-color: transparent;
    /*background-color: var(--dimmedBorder);*/
}


/* --------------------------------------------------------- */
/* Summary Calculation Settings/Styles */
/* --------------------------------------------------------- */

/* Summary Calculation Card */
.calculation-method-card {
    padding: 7px 10px;
    background-color: var(--sb_active_color);
    border: 1px solid var(--border_color_inputs);
    border-radius: 10px;
}

/* Summary Calculation Card Icons */
.selfupload-actionicon,
.selfupload-actionicon:focus {
    font-size: 10px;
    max-width: 100px;
    height: 20px;
    min-height: 20px;
    width: 20px;
    min-width: 20px;
    /*line-height: 20px;*/
    border-radius: 5px;
    border: none;
    padding: 0 2px;
    text-align: center;
    color: rgb(var(--rgb-pgColorOpposite) / .3);
    background-color: transparent;
}
.selfupload-actionicon:hover,
.selfupload-actionicon:active {
    color: rgb(var(--rgb-values-alert-blue));
    background-color: transparent;
    scale: 1.1;
}
/* Icon Button Styling -- [Delete/Red] ----------------------------------------- */
.selfupload-actionicon.delete:hover,
.selfupload-actionicon.delete:active {
    color: rgb(var(--rgb-standard-red));
}

/* Icon Button Styling -- [Add/Green] ----------------------------------------- */
.grx-badge {
    font-size: 11px;
    font-weight: 400;
    text-transform: lowercase;
    padding: 2px 10px;
    border-radius: 15px;
}
.grx-badge.blue {
    color: rgb(var(--rgb-white) / 1);
    background-color: rgb(var(--rgb-values-alert-blue) / 1);
}

/* Summary Calculation Card --- Div for displaying values set by the user for each calc method */
.calculation-method-card-value-div {
    color: var(--text_001);
    background-color: var(--bg_layer3);
    font-weight: 400;
    font-size: 10px;
    margin: 0 0 1px 0;
    border: 1px solid var(--border_color_inputs);
    border-radius: 3px;
    padding: 2px 10px;
    width: 100%;
    cursor: default;
}

/* --------------------------------------------------------- */
/* dmc.Button - button to renavidate to the home page (buttoon wrapped in link) */
/* --------------------------------------------------------- */
.mantine-link-button {
    margin: 2px 0 !important;
    padding: 0 18px 0 12px !important;
    appearance: none;
    text-align: left;
    text-decoration: none;
    box-sizing: border-box;
    height: 25px !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    -webkit-tap-highlight-color: transparent;
    display: inline-block;
    width: auto;
    border-radius: 4px !important;
    font-weight: 600;
    position: relative;
    line-height: 1;
    font-size: 11px !important;
    user-select: none;
    cursor: pointer;
    border: none !important;
    background-color: var(--blue-shade-1);
    color: var(--FixedLight);
}
.mantine-link-button:hover,
.mantine-link-button:focus,
.mantine-link-button:active {
    border-radius: 4px !important;
    background-color: var(--blue-shade-4);
    color: var(--FixedLight);
    border: none;
    transform: scale(1.01);
}
.mantine-link-button .mantine-Button-inner {
    height: 25px;
}
/* --------------------------------------------------------- */
/* dmc.Modal() --- disabled-functionality-modal */
/* - Modal is formatted to be centered in middle of the screen for a modal that will illustrate that the functionality is disabled */
/* --------------------------------------------------------- */
.disabled-functionality-modal .mantine-Modal-modal {
    padding: 1rem 2rem !important;
    min-height: 100px;
    background-color: var(--bg_layer4);
    border: 1px solid var(--border_color_inputs);
}
.disabled-functionality-modal .mantine-Modal-header {
    font-size: 16px !important;
    font-weight: 600;
    color: var(--blue_alert);
    padding: 0;
    margin: 0 0 10px 0;
    border-bottom: 1px solid var(--border_color_inputs);
}
.disabled-functionality-modal .mantine-Modal-header .mantine-Modal-title {
    width: 100%;
    margin-right: 5px;
    color: var(--blue_alert);
}
.disabled-functionality-modal .mantine-Modal-body {
    overflow: hidden;
    height: calc(100% - 1rem - 32px);
    color: var(--textDefault);
}
.disabled-functionality-modal .mantine-Modal-close {
    color: var(--textDefault);
    background-color: transparent;
}
.disabled-functionality-modal .mantine-Modal-close:hover {
    background-color: var(--bg_layer4_highlight);
}
.disabled-functionality-modal .mantine-Modal-inner {
    /*position: absolute;*/
    /*inset: 0px;*/
    /*overflow-y: auto;*/
    /*padding: 48px 16px;*/
    /*display: flex;*/
    -webkit-box-pack: center;
    justify-content: center;
    align-items: center;
}
.disabled-functionality-modal .mantine-Modal-header {
    font-size: 20px;
    font-weight: 600;
    color: var(--text_001);
    padding: 0;
    margin: 0 0 10px 0;
    border-bottom: 1px solid var(--border_color_inputs);
}
.disabled-functionality-modal .mantine-Modal-header .mantine-Modal-title {
    width: 100%;
    margin-right: 5px;
}
.disabled-functionality-modal .mantine-Modal-body {
    overflow: hidden;
    height: calc(100% - 1rem - 32px);
    font-size: 12px;
    /*padding-bottom: 2rem;*/
    /*height: 100%;*/
    /*position: relative;*/
    /*top: 0;*/
    /*bottom: 0;*/
    /*left: 0;*/
    /*right: 0;*/
}
/* --------------------------------------------------------- */
/* dmc.Modal() --- warning-modal */
/* - Modal is formatted to be centered in middle of the screen for a wanring message */
/* --------------------------------------------------------- */
.warning-modal .mantine-Modal-modal {
    padding: 1rem 2rem !important;
    min-height: 100px;
    background-color: var(--bg_layer1);
    border: 1px solid var(--border_color_inputs);
}
.warning-modal .mantine-Modal-header {
    font-size: 16px !important;
    font-weight: 600;
    color: var(--text_001);
    padding: 0;
    margin: 0 0 10px 0;
    border-bottom: 1px solid var(--border_color_inputs);
}
.warning-modal .mantine-Modal-header .mantine-Modal-title {
    width: 100%;
    margin-right: 5px;
}
.warning-modal .mantine-Modal-body {
    overflow: hidden;
    height: calc(100% - 1rem - 32px);
    /*padding-bottom: 2rem;*/
    /*height: 100%;*/
    /*position: relative;*/
    /*top: 0;*/
    /*bottom: 0;*/
    /*left: 0;*/
    /*right: 0;*/
}
.warning-modal .mantine-Modal-inner {
    /*position: absolute;*/
    /*inset: 0px;*/
    /*overflow-y: auto;*/
    /*padding: 48px 16px;*/
    /*display: flex;*/
    -webkit-box-pack: center;
    justify-content: center;
    align-items: center;
}
.warning-modal .mantine-Modal-header {
    font-size: 20px;
    font-weight: 600;
    color: var(--text_001);
    padding: 0;
    margin: 0 0 10px 0;
    border-bottom: 1px solid var(--border_color_inputs);
}
.warning-modal .mantine-Modal-header .mantine-Modal-title {
    width: 100%;
    margin-right: 5px;
}
.warning-modal .mantine-Modal-body {
    overflow: hidden;
    height: calc(100% - 1rem - 32px);
    font-size: 12px;
    /*padding-bottom: 2rem;*/
    /*height: 100%;*/
    /*position: relative;*/
    /*top: 0;*/
    /*bottom: 0;*/
    /*left: 0;*/
    /*right: 0;*/
}

/* --------------------------------------------------------- */
/* dmc.Modal() --- For Datasource Modal */
/* --------------------------------------------------------- */
.datasource-modal .mantine-Modal-content {
    padding: 1rem 2rem !important;
    height: 85vh;
    background-color: var(--bg_layer1);
    border: 1px solid var(--border_color_inputs);
    overflow: hidden;
}
.datasource-modal .mantine-Modal-header {
    font-size: 20px;
    font-weight: 600;
    color: var(--text_001);
    background-color: transparent;
    padding: 0;
    margin: 0 0 10px 0;
    border-bottom: 1px solid var(--border_color_inputs);
}
.datasource-modal .mantine-Modal-header .mantine-Modal-title {
    width: 100%;
    font-size: inherit;
    margin-right: 5px;
}
.datasource-modal .mantine-Modal-body {
    overflow: hidden;
    /*height: calc(100% - 1rem - 32px);*/
    height: calc(85vh - 32px - 3rem);
    /*padding-bottom: 2rem;*/
    /*height: 100%;*/
    /*position: relative;*/
    /*top: 0;*/
    /*bottom: 0;*/
    /*left: 0;*/
    /*right: 0;*/
}

/*noinspection CssUnusedSymbol*/
.datasource-modal .mantine-Modal-inner {
    background-color: rgb(var(--pgColorOpposite) / .1);
}
.datasource-modal .mantine-Modal-close {
    background-color: transparent;
}
.datasource-modal .mantine-Modal-close:hover {
    color: var(--warning_red_button);
    background-color: var(--bg_layer2_highlight);
    /*background-color: rgba(var(--rgb-pgColorOpposite) / .2)*/
}
/* --------------------------------------------------------- */
/* dmc.Tabs() --- Which are held within the Datasource Modal */
/* --------------------------------------------------------- */
.datasource-modal-tabs {
    /*width: 100% !important;*/
    /*height: 76vh !important;*/
    /*height: 100% !important;*/
}

/*noinspection CssUnusedSymbol*/
.datasource-modal-tabs .mantine-Tabs-tabsList {
    /*height: 75vh !important;*/
    /*height: 100% !important;*/
    border: none;
}

/* tab control buttons - base formatting*/
/*noinspection CssUnusedSymbol*/
.datasource-modal-tabs .mantine-Tabs-tab {
    border-radius: 0 !important;
    border-left: none;
    border-top: none;
    border-bottom: none;
    border-right: 4px solid var(--border_color_inputs);
    color: rgb(var(--rgb-pgColorOpposite) / .8);
    background-color: transparent;
    font-size: 12px;
    font-weight: 500;
    margin: 1px 0;
    padding: 10px 15px 10px 10px;
}
/* tab control buttons - When hover/active*/
/*noinspection CssUnusedSymbol*/
.datasource-modal-tabs .mantine-Tabs-tab[data-active],
.datasource-modal-tabs .mantine-Tabs-tab[data-active]:hover
{
    border-left: none !important;
    border-top: none !important;
    border-bottom: none !important;
    border-right: 4px solid var(--blue_alert);
    color: var(--blue_alert);
    background-color: rgb(var(--rgb-values-alert-blue) / .2) !important;
}
/* tab control buttons - When hovered and not currently active */
/*noinspection CssUnusedSymbol*/
.datasource-modal-tabs .mantine-Tabs-tab--selected,
.datasource-modal-tabs .mantine-Tabs-tab:hover {
    border-left: none !important;
    border-top: none !important;
    border-bottom: none !important;
    background-color: rgb(var(--rgb-values-alert-blue) / .1) !important;
}
/* icon within the tab label */
/*noinspection CssUnusedSymbol*/
.datasource-modal-tabs .mantine-Tabs-tabIcon {
    height: 15px;
    width: 15px;
    margin: 0 2px;
}

/*noinspection CssUnusedSymbol*/
.datasource-modal-tabs .mantine-Tabs-tabRightSection {
    margin: 0 2px;
}
/* Panel is what the content is held within each tab */
/*noinspection CssUnusedSymbol*/
.datasource-modal-tabs .mantine-Tabs-panel {
    height: inherit;
    width: inherit;
    /*padding: 0 0 0 10px;*/
    padding-left: 1rem;
    /*margin-bottom: 1rem;*/
}
/* scroll div that is actually the div inside the panel */
.datasource-modal-tab-scrollarea {
    display: flex;
    /*height: inherit;*/
    height: calc(85vh - 32px - 3rem - 26px - 2rem - 5px);
}

/*noinspection CssUnusedSymbol*/
.datasource-modal-tab-scrollarea .mantine-ScrollArea-viewport {
    padding: 0 10px 0 0;
    margin: 0;
}

/* --------------------------------------------------------- */
/* datasource-modal-tabs content div to hold the contents of each tab (updated through callbacks) */
/* --------------------------------------------------------- */
/*noinspection CssUnusedSymbol*/
.modal_tabs_content {
    height: calc(85vh - 32px - 3rem);
    /*height: 100%;*/
    width: 100%;
    padding: 0 0 0 10px;
    margin-bottom: 1rem;
    overflow: auto;
}
/* ------------------------------------------------------------ */
/* Buttons For Datasource Selection Modal */
/* ------------------------------------------------------------ */
/* Button to Add new data set */
/*noinspection CssUnusedSymbol*/
.dataConfigOption-NewData-btn {
    color: white;
    background-color: rgb(var(--rgb-blue-3) / 1);
    font-size: 11px;
    font-weight: 450;
    width: auto;
    height: 26px;
    /*line-height: 30px;*/
    border-radius: 5px;
    border: none;
    padding: 2px 10px;
    margin: 0 10px;
    text-align: center;
}
/* make the button move down a little when you click */
/*noinspection CssUnusedSymbol*/
.dataConfigOption-NewData-btn:hover,
.dataConfigOption-NewData-btn:focus {
    color: white;
    background-color: rgb(var(--rgb-blue-3) / .8);
}

/*noinspection CssUnusedSymbol*/
.dataConfigOption-NewData-btn:active {
    transform: translateY(2px);
}

/* Button to select a dataset within the listgroup of datasets available */
/*noinspection CssUnusedSymbol*/
.dataConfigItem-SelectBtn,
.dataConfigItem-SelectBtn:focus {
    color: var(--FixedLight);
    background-color: rgb(var(--rgb-values-alert-blue) / .9);
    font-size: 10px;
    font-weight: 500;
    /*width: auto;*/
    width: 100px;
    height: 25px;
    line-height: 25px;
    border-radius: 5px;
    border: none;
    padding: 2px 10px;
    margin: 0;
    text-align: center;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
}

/*noinspection CssUnusedSymbol*/
.dataConfigItem-SelectBtn:hover,
.dataConfigItem-SelectBtn:focus {
    color: var(--FixedLight);
}
/* Button to Adjust a datasets pre-defined configs */
/*noinspection CssUnusedSymbol*/
.dataConfigItem-AdjBtn {
    color: rgb(var(--rgb-values-alert-blue) / .8);
    background-color: transparent;
    font-size: 10px;
    font-weight: 500;
    width: auto;
    height: 25px;
    line-height: 25px;
    border-radius: 5px;
    border: none;
    padding: 2px 10px;
    margin: 0;
    text-align: center;
}

/*noinspection CssUnusedSymbol*/
.dataConfigItem-AdjBtn:hover,
.dataConfigItem-AdjBtn:focus {
    color: rgb(var(--rgb-values-alert-blue) / 1);
    text-decoration: underline;
    background-color: transparent;
}
/* Active Tab Badge */
.badge-active-table {
    /*background-color: var(--grx_green);*/
    background-color: rgba(var(--rgb-values-green) / 1);
    color: black;
    font-size: 10px;
    font-weight: 500;
    text-transform: capitalize;
    width: 100px;
    height: 25px;
    line-height: 25px;
    border-radius: 5px;
    border: none;
    padding: 2px 10px;
    margin: 0;
    text-align: center;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
}
/* ------------------------------------------------------------ */
/* dmc.ListGroup() Custom Class Styling -- Used for the datasource modal */
/* ------------------------------------------------------------ */
.datasource-listgroup {
  width: 100%;
  padding: 0 5px;
  border-radius: 6px;
  margin: 5px 0 !important;
  display: inline-flex !important;
  align-items: center;
  align-content: center;
  justify-content: center;
  opacity: 1;
  height: min-content;
}
.datasource-listgroup .list-group-item {
  width: inherit;
  color: var(--text_001) !important;
  background-color: var(--bg_layer4);
  border-radius: 10px;
  border: 1px solid var(--border_color_inputs) !important;
  padding: 10px;
    margin-bottom: 10px;
  /*margin: 5px;*/
}
.datasource-listgroup .list-group-item:hover {
  background-color: var(--bg_layer4);
  box-shadow: var(--grx-box-shadow-light);
}

/* List Group Item */
.datasource-listgroup-item {
}
.datasource-listgroup-item.active,
.datasource-listgroup-item.active:hover {
  box-shadow: var(--grx-box-shadow-light);
  background-color: rgba(var(--rgb-blue-1) / .1)
}
/*.datasource-listgroup {*/
/*  width: 100%;*/
/*  border-radius: 6px;*/
/*  color: var(--text_001) !important;*/
/*  background-color: var(--bg_layer3);*/
/*  !*background-color: transparent;*!*/
/*  margin: 5px 0 !important;*/
/*  display: inline-flex !important;*/
/*  align-items: center;*/
/*  align-content: center;*/
/*  justify-content: center;*/
/*  opacity: 1;*/
/*  height: min-content;*/
/*}*/
/*.datasource-listgroup .list-group-item {*/
/*  border-color: var(--border_color_inputs) !important;*/
/*  background-color: transparent;*/
/*  width: 100%;*/
/*  !*padding: 5px 10px;*!*/
/*  padding: 1rem 2rem;*/
/*  margin: 0;*/
/*}*/
/*.datasource-listgroup .list-group-item:hover {*/
/*    background-color: transparent;*/
/*}*/

/*!* List Group Item *!*/
/*.datasource-listgroup-item {}*/
/*.datasource-listgroup-item.active,*/
/*.datasource-listgroup-item.active:hover {*/
/*    background-color: var(--bg_layer0);*/
/*}*/

/* ------------------------------------------------------------ */
/* Styling For Components within the datasource listgroup (e.g. the header of each listgroup item) */
/* ------------------------------------------------------------ */
/*noinspection CssUnusedSymbol*/
.dataConfigItem-title {
    font-size: 13px;
    font-weight: 650;
    color: rgb(var(--rgb-values-alert-blue) / 1);
}

/*noinspection CssUnusedSymbol*/
.dataConfigItem-id {
    font-size: 10px;
    font-weight: 500;
    color: var(--text_001);
}

/*noinspection CssUnusedSymbol*/
.dataConfigVar-title {
    font-size: 11px;
    font-weight: 650;
    color: var(--text_001);
}

/*noinspection CssUnusedSymbol*/
.dataConfigVar-value {
    font-size: 11px;
    font-weight: 500;
    color: var(--text_002);
}
.datasource-modal-row-container {
    padding: 0 0 0 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    width: inherit;
    line-height: 1;
}
/* ------------------------------------------------------------ */
/* Styling for the datasource search/filter row .mantine-Input-withIcon */
/* ------------------------------------------------------------ */
.mantine-Select-root {
    /*height: 26px;*/
    /*min-height: 26px;*/
    /*max-height: 26px;*/
}
.dataConfigOption-searchLabel {
    background-color: var(--blue_alert) !important;
    border-radius: var(--grx-border-radius) 0 0 var(--grx-border-radius);
    height: 27px;
    border: 1px solid var(--border_color_inputs);
    color: var(--FixedLight) !important;
    padding: 0 10px;
}

/*noinspection CssUnusedSymbol*/
.dataConfigOption-select ,
.dataConfigOption-search,
.dataConfigOption-search .mantine-TextInput-wrapper {
    width: 150px;
    max-width: 180px;
    background-color: var(--bg_layer3) !important;
}

/*noinspection CssUnusedSymbol*/
.dataConfigOption-select .mantine-Select-input.mantine-Input-withIcon,
.dataConfigOption-search .mantine-TextInput-input.mantine-Input-withIcon {
    padding: 2px 2px 2px 30px !important;
    height: 26px;
    min-height: 26px;
    max-height: 26px;
    background-color: var(--bg_layer3) !important;
    /*background-color: transparent !important;*/
    color: rgb(var(--rgb-pgColorOpposite) / 1) !important;
}

/*noinspection CssUnusedSymbol*/
.dataConfigOption-select .mantine-Input-icon.mantine-TextInput-icon,
.dataConfigOption-search .mantine-Input-icon.mantine-Select-icon {
    color: rgb(var(--rgb-pgColorOpposite) / .5) !important;
}

/* ------------------------------------------------------------ */
/* Hovercard Dropdown styling dmc.HoverCard(children[HoverCardDropdown()] */
/* ------------------------------------------------------------ */
/*.task-hover-card-dropdown.mantine-HoverCard-dropdown {*/
.task-hover-card-dropdown {
    width: 300px !important;
    font-size: 8px !important;
}
.mantine-HoverCard-dropdown {
    padding: 10px !important;
    border: 1px solid var(--border_color_inputs);
    background-color: var(--bg_layer6);
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
    border-radius: 5px;
}
.task-hover-card-title {
    width: 100% !important;
    font-size: 12px;
    font-weight: 600;
    color: var(--text_001);
    border-bottom: 1px solid var(--border_color_inputs);
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
    flex-wrap: nowrap;
}
/*prevent wrapping*/
.task-hover-card-text {
    width: 100px !important;
    font-size: 10px;
    font-weight: 500;
    color: var(--text_001);
    margin: 0;
    padding: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* ------------------------------------------------------------ */
/* PROGRESS BAR >>> For The Self Loading Portabl Interface */
/* ------------------------------------------------------------ */
.slmProgressBarDiv {
    width: 100%;
    border-radius: var(--grx-border-radius-extra);
    background-color: var(--bg_layer0);
    border: 1px solid var(--bg_layer1_highlight);
    padding: 5px 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap !important;
    /*width: inherit;*/
    gap: 10px;
    line-height: 1;
    /*box-shadow: var(--grx-box-shadow-light);*/
}
.slmProgressBarDiv.hide {
    display: none;
}
.slmProgressBarLoader {
    padding: 2px;
    width: 18px;
    height: 18px;
}
.slmProgressBarLoaderCompleteIcon {
    width: 18px;
    height: 18px;
    border-radius: 18px;
    padding: 2px;
    color: var(--textDefault);
    background-color: var(--grx_green);
}

.slmProgressBar.mantine-Progress-root {
    background-color: var(--bg_layer0);
    height: 13px;
    width: 100%;
    border-radius: 5px;
    /*border: 1px solid var(--border_color_inputs);*/
    margin: 5px 0;
}
.slmProgressBar .mantine-Progress-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--FixedLight);
}
.slmProgressBar.complete .mantine-Progress-bar {
    font-size: 10px;
    background-color: var(--grx_green);
}
.slmProgressBar.in-process .mantine-Progress-bar {
    font-size: 10px;
    background-color: var(--blue_alert);
}

/* ------------------------------------------------------------ */
/* PROGRESS BAR .complete*/
/* ------------------------------------------------------------ */
.task-progress.mantine-Progress-root {
    height: 11px;
    width: 100%;
    border-radius: 5px;
    border: 1px solid var(--border_color_inputs);
    margin: 5px 0;
}
.task-progress .mantine-Progress-label {
    font-size: 9px;
    font-weight: 700;
    color: var(--FixedLight);
}
.task-progress.complete .mantine-Progress-bar {
    font-size: 10px;
    background-color: var(--grx_green);
}
.task-progress.in-process .mantine-Progress-bar {
    font-size: 10px;
    background-color: var(--blue_alert);
}

/* ------------------------------------------------------------ */
/* Color Pulse Warning Icon for Task Processing */
/* ------------------------------------------------------------ */
/* ------------ PULSING YELLOW ICON ------------*/
@keyframes colorPulse_YellowWhite {
    0%, 100% {
        color: darkgoldenrod;
    }
    50% {
        color: rgb(var(--rgb-pgColorOpposite) / .2);
    }
}
/* ------------ PULSING GREEN ICON ------------*/
@keyframes colorPulse_GreenWhite {
    0%, 100% {
        color: var(--grx_green);
    }
    50% {
        color: rgb(var(--rgb-pgColorOpposite) / .2);
    }
}

/* ------------------------------------------------------------ */
/* Icon Scenarios (default, processing, complete) */
/* ------------------------------------------------------------ */
.datasource-task-icon {
    display: none;
    height: 15px;
    width: 15px;
    margin: 0;
    color: rgb(var(--rgb-pgColorOpposite) / .3);
    background-color: transparent !important;
}
/* ******************* Processing Icon (with animation) */
.datasource-task-icon.processing {
    display: block;
    animation: colorPulse_YellowWhite 2s infinite; /* Apply the animation here */
}

/* ******************* Compelte Icon (with animation) */
.datasource-task-icon.complete {
    display: block;
    animation: colorPulse_GreenWhite 2s infinite; /* Apply the animation here */
}