/* HEADER */

#header {
    display: flex;
    align-items: center;

    /* Vertical align the elements to the center */
    justify-content: space-between;
    margin-right: 10px;
}

#help-title {
    font-weight: 500;
}

#help-button-open {
    background-color: #006f92;
    margin-left: auto;
    font-size: medium;

    /* Push this element to the right */
}

#help-button-close {
    background-color: #006f92;
    font-size: medium;
}

#traval-load-ruleset-button {
    /* background-color: #006f92;
    background-clip: "border-box"; */
    font-size: medium;
    display: inline-block;
    cursor: pointer;
}

button {
    background-color: #006f92 !important;
    font-size: medium;
}

button.btn-close {
    background-color: #ffffff00 !important;
}

button[id*="clear-button"] {
    background-color: darkred !important;
}

.loading-wrapper-qc-result>div {
    visibility: visible !important;

    /* visibility: none; */
}

/* TABS */

.custom-tabs-container {
    width: 85%;
}

.custom-tabs {
    border-top-left-radius: 3px;
    background-color: #f9f9f9;
    padding: 0 24px;
    border-bottom: 1px solid #d6d6d6;
}

.custom-tab {
    color: #586069;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-top: 0.25px solid lightgrey !important;
    border-left: 0.125px solid lightgrey !important;
    border-right: 0.125px solid lightgrey !important;
    border-bottom: 0 !important;
    background-color: #fafbfc;
    padding: 12px !important;

    /* font-family: "system-ui"; */
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.custom-tab--selected {
    color: black;
    box-shadow: 1px 1px 0 white;
    border-left: 1px solid lightgrey !important;
    border-right: 1px solid lightgrey !important;
    border-top: 4px solid #006f92 !important;
}

/* ---------------------------------------
   * textarea
   */
   .dbc textarea {
    background-color: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;
    border: var(--bs-border-width) solid var(--bs-border-color) !important;
}

/* Use this classname for dcc.Input */
.dbc input:not([type="radio"], [type="checkbox"]) {
    color: var(--bs-body-color) !important;
    background-color: var(--bs-body-bg) !important;
}


.dbc input::placeholder {
    color: var(--bs-secondary) !important;
    background-color: var(--bs-body-bg) !important;
}


/* DATA TABLE */

/* fixes margins so data isn't cut off at table edges */
.dbc .dash-table-container .row {
    display: block !important;
    margin: 0;
}

/* fixes  when the table dropdown doesn't drop down */
.dbc .Select-menu-outer {
    display: block !important;
}

.dash-table-container .dropdown {
    position: static;
}

/*
   *  sort arrow and delete icons in the DataTable header - changes pink color
   *  these icons appear when the table is sortable and/or columns are deletable
   */
.dbc .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner table {
    border-collapse: inherit;
    border-spacing: unset;

    --accent: var(--bs-primary) !important;
    --hover: none !important;

    /* font-family: var(--bs-font-sans-serif); */
}

/* input box */

/* .dbc .Select-control {
    background-color: var(--bs-body-bg) !important;
    border: solid #006f92 1px !important;
} */

/* changes the text color of input box */
.dbc .Select-value-label {
    color: black !important;
}

.dbc .Select input {
    color: black;
}

/* dropdown menu options */
.dbc .VirtualizedSelectOption {
    background-color: white;
    color: black;
}

/* dropdown menu hover effect */
.dbc .VirtualizedSelectFocusedOption {
    /* background-color: rgba(255, 65, 65, 0.2); */
    color: black;
}

/* border on focus - default is blue
   * shadow box around input box.  default is blue
   */
.dbc .is-focused:not(.is-open)>.Select-control {
    border-color: var(--bs-primary) !important;

    /* box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.2); */
}

/* on hover highlight entire row */
.dash-spreadsheet tr:hover td.dash-cell {
    border-color: rgb(100 100 100 / 40%) !important;
    border-width: 0.5px !important;
    background-color: rgb(100 100 100 / 10%) !important;

}

/* selected cells */
.dbc .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td.cell--selected {
    background-color: #0070921a !important;
}

/* active cell */
.dbc .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td.focused {
    background-color: #00709249 !important;
    outline: 1px solid var(--bs-blue);
}

/* active cell when cell is  editable */

/* .dbc .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner input:not([type="radio"], [type="checkbox"]) {
    background-color: transparent !important;
} */

/*  dropdown inside datatable */
.dbc .dash-table-container .dash-spreadsheet .Select-menu-outer {
    background-color: white;
    border-color: #006f92;
}

.dbc .dash-table-container .dash-spreadsheet .Select-option {
    background-color: rgb(var(--bs-gray-500) .4);
}


.dbc input.dash-filter--case--sensitive {
    border-color: var(--bs-primary) !important;
    border-radius: 3px;
    border-style: solid;
    border-width: 2px;
    color: var(--bs-primary) !important;
}

/* pagination buttons - this removes the default pink hover */
.dbc .last-page:hover,
.previous-page:hover,
.first-page:hover,
.next-page:hover {
    color: var(--bs-primary) !important;
}


/* table details */
body .dbc .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    border: var(--bs-border-width) solid var(--bs-border-color) !important;
}

/* table header */
body .dbc .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    border-color: rgb(100 100 100 / 40%) !important;
}


/* filter row in the header */
.dbc .dash-spreadsheet .dash-filter {
    font-family: var(--bs-font-family-sans-serif);
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);

    --border: var(--bs-gray);
}

/* tooltips  */
.dbc .dash-table-tooltip {
    background-color: var(--bs-gray-200) !important;
    color: var(--bs-body-color);
    width: fit-content;

    /* max and min width are both set to 300px in the dash stylesheet. Override them with your own definitions. */
    max-width: 300px;
    min-width: unset;
}

/* pagination */
.dbc .dash-table-container .previous-next-container .page-number .current-page-container .current-page-shadow {
    background-color: transparent;
    color: var(--bs-body-color) !important;
}

.dbc .dash-table-container .previous-next-container .page-number .current-page-container input.current-page {
    background-color: transparent;
}

/* ALERT */
.alert {
    height: 50px;
}

#alert-body {
    font-size: smaller;
}

/*
Defines the .dbc class
  Description: The dbc class improves the style of Dash components when using Bootstrap V5 themes
  Author: @AnnMarieW
  Updated: 2024-02-21
*/


/* ------------- dash ag grid ------- */
.dbc-ag-grid .ag-theme-alpine {
    --ag-alpine-active-color: var(--bs-primary);
    --ag-selected-row-background-color: rgb(var(--bs-primary-rgb) 0.3);
    --ag-row-hover-color: rgb(var(--bs-primary-rgb) 0.1);
    --ag-column-hover-color: rgb(var(--bs-primary-rgb) 0.1);
    --ag-input-focus-border-color: rgb(var(--bs-primary-rgb) 0.4);
    --ag-range-selection-background-color: rgb(var(--bs-primary-rgb) 0.2);
    --ag-range-selection-background-color-2: rgb(var(--bs-primary-rgb) 0.36);
    --ag-range-selection-background-color-3: rgb(var(--bs-primary-rgb) 0.49);
    --ag-range-selection-background-color-4: rgb(var(--bs-primary-rgb) 0.59);
    --ag-background-color: var(--bs-body-bg);
    --ag-foreground-color: var(--bs-body-color);
    --ag-border-color: rgb(173 181 189 / 40%);
    --ag-cell-horizontal-border: rgb(173 181 189 / 20%);
    --ag-secondary-border-color: rgb(173 181 189 / 20%);
    --ag-header-background-color: rgb(173 181 189 / 20%);
    --ag-odd-row-background-color: rgb(173 181 189 / 5%);
    --ag-control-panel-background-color: var(--bs-body-bg);
    --ag-subheader-background-color: var(--bs-body-bg);
    --ag-invalid-color: var(--bs-form-invalid-color);
    --ag-font-family: var(--bs-font-family);
    --ag-tooltip-background-color: var(--bs-body-bg);
}

/* --------- dcc dropdown ---- */


/* input box */

/* .dbc .Select-control {
    background-color: var(--bs-body-bg) !important;
    border: var(--bs-border-width) solid var(--bs-border-color) !important;

} */

/* changes the text color of input box */

/* .dbc .Select-value-label {
    color: var(--bs-body-color) !important;
} */

/* .dbc .Select input {
    color: var(--bs-body-color);
} */

/* .dbc .Select-placeholder {
    color: var(--bs-secondary) !important;
    background-color: var(--bs-body-bg) !important;
} */

/* dropdown menu options */

/* .dbc .VirtualizedSelectOption {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
} */

/* dropdown menu hover effect */

/* .dbc .VirtualizedSelectFocusedOption {
    background-color: rgba(100, 100, 100, 0.2);
    color: black;
} */

/* border on focus - default is blue
   * shadow box around input box.  default is blue
   */

/* .dbc .is-focused:not(.is-open)>.Select-control {
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color);
} */

/* primary  this colors the input box text and x  of multi */

/* .dbc .Select--multi .Select-value {
    color: var(--bs-body-color);
    background-color: rgba(var(--bs-primary-rgb), 0.2);
    border-color: rgba(var(--bs-primary-rgb), 0.6) !important;
} */


/* .Select-menu-outer {
    border: var(--bs-border-width) solid var(--bs-border-color); 
    background-color: transparent;
} */

/* .Select-option {
    border: var(--bs-border-width) solid var(--bs-border-color);
} */



/* ---- Sliders ----------------- */

.dbc .rc-slider-track {
    background-color: rgb(var(--bs-primary-rgb) 0.50);
}

.dbc .rc-slider-handle {
    border: solid 1px var(--bs-primary);
    background-color: var(--bs-body-bg);
}

.dbc .rc-slider-handle-dragging.rc-slider-handle-dragging.rc-slider-handle-dragging {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color);
}

.dbc .rc-slider-handle-click-focused:focus {
    border-color: var(--bs-primary);
    box-shadow: unset;
}

.dbc .rc-slider-handle:hover {
    border-color: rgb(var(--bs-primary-rgb) 0.25);
}

.dbc .rc-slider-handle:active {
    border-color: rgb(var(--bs-primary-rgb) 0.25);
    box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color);
}

.dbc .rc-slider-dot-active {
    border-color: var(--bs-primary);
}


/* ------------ datepickers ----------------------- */

.dbc .SingleDatePickerInput__withBorder {
    border: var(--bs-border-width) solid var(--bs-border-color) !important;
    background-color: transparent !important;
}

.dbc .DateInput_input__focused {
    border-bottom: 1px solid rgb(100 100 100 / 40%) !important;
}

.dbc .DateRangePickerInput__withBorder {
    border: var(--bs-border-width) solid var(--bs-border-color) !important;
}

.dbc .DateInput_fangStroke {
    stroke: rgb(100 100 100 / 40%);
    fill: transparent;
}

.dbc .DateRangePickerInput {
    background-color: var(--bs-body-bg);
}

.dbc .DateRangePickerInput_arrow {
    background-color: var(--bs-body-bg);
}

.dbc .DateRangePickerInput_arrow svg {
    fill: var(--bs-body-color) !important;
}

.dbc .DateInput_fangShape {
    fill: var(--bs-body-bg);
}

.dbc .DateInput_input {
    background-color: var(--bs-body-bg);
    font-family: var(--bs-body-font-family);
    line-height: 34px !important;
    padding: 0 10px !important
}

.dbc .DayPicker {
    background-color: var(--bs-body-bg);
}

.dbc .DayPickerNavigation_button {
    border: var(--bs-border-width) solid var(--bs-border-color) !important;
    background-color: transparent;
}

.dbc .CalendarMonth_caption {
    color: var(--bs-body-color);
    font-weight: bold;
}

.dbc date-picker-range {
    background-color: var(--bs-body-bg);
}

.dbc .CalendarMonthGrid {
    background-color: var(--bs-body-bg);
}

.dbc .CalendarMonth {
    background-color: var(--bs-body-bg);
}

.dbc .CalendarDay__default {
    color: var(--bs-body-color);
    border: var(--bs-border-width) solid var(--bs-border-color) !important;
    background-color: var(--bs-body-bg);
}

.dbc .CalendarDay__default:hover {
    background: rgb(var(--bs-primary-rgb) 0.3);
    color: white;
}

.dbc .CalendarDay__selected {
    background: var(--bs-primary);
    border: 1px var(--bs-primary);
    color: white;
}

.dbc .CalendarDay__selected:hover {
    background: var(--bs-primary);
    border: 1px var(--bs-primary);
    color: white;
}

.dbc .CalendarDay__blocked_out_of_range {
    opacity: .5;
}

.dbc .CalendarDay__hovered_span {
    background: rgb(var(--bs-primary-rgb) 0.2);
    color: white;
}

.dbc .CalendarDay__hovered_span:hover {
    background: rgb(var(--bs-primary-rgb) 0.2);
    color: white;
}

.dbc .CalendarDay__selected_span {
    background: var(--bs-primary);
    color: white;
}

.dbc .DayPickerKeyboardShortcuts__show {
    display: none;
}

.dbc .DayPickerKeyboardShortcuts_show__bottomRight {
    display: none;
}

/* --------- end calendar --------------------- */

/* makes text in forms visible with dark themes */
.dbc .form-control {
    color: var(--bs-body-color)
}

/* fixes font in headings with theme switcher */
.dbc h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
    font-family: inherit;
}

/* makes close button in offcanvas visible in all themes */
.offcanvas-header .btn-close {
    background-color: rgb(var(--bs-primary-rgb) 0.2) !important;
}


/* styles code in dcc.Markdown with the GitHub Dark Dimmed theme */

code.hljs {
    padding: 3px 5px
}

.dbc pre code.hljs {
    display: block;
    overflow-x: auto;
    padding: 1em
}

/*!
    Theme: GitHub Dark Dimmed
    Description: Dark dimmed theme as seen on github.com
    Author: github.com
    Maintainer: @Hirse
    Updated: 2021-05-15
    Colors taken from GitHub's CSS
  */
.dbc .hljs {
    color: #adbac7;
    background: #22272e
}

.hljs-doctag,
.hljs-keyword,
.hljs-meta .hljs-keyword,
.hljs-template-tag,
.hljs-template-variable,
.hljs-type,
.hljs-variable.language_ {
    color: #f47067
}

.hljs-title,
.hljs-title.class_,
.hljs-title.class_.inherited__,
.hljs-title.function_ {
    color: #dcbdfb
}

.hljs-attr,
.hljs-attribute,
.hljs-literal,
.hljs-meta,
.hljs-number,
.hljs-operator,
.hljs-selector-attr,
.hljs-selector-class,
.hljs-selector-id,
.hljs-variable {
    color: #6cb6ff
}

.hljs-meta .hljs-string,
.hljs-regexp,
.hljs-string {
    color: #96d0ff
}

.hljs-built_in,
.hljs-symbol {
    color: #f69d50
}

.hljs-code,
.hljs-comment,
.hljs-formula {
    color: #768390
}

.hljs-name,
.hljs-quote,
.hljs-selector-pseudo,
.hljs-selector-tag {
    color: #8ddb8c
}

.hljs-subst {
    color: #adbac7
}

.hljs-section {
    color: #316dca;
    font-weight: 700
}

.hljs-bullet {
    color: #eac55f
}

.hljs-emphasis {
    color: #adbac7;
    font-style: italic
}

.hljs-strong {
    color: #adbac7;
    font-weight: 700
}

.hljs-addition {
    color: #b4f1b4;
    background-color: #1b4721
}

.hljs-deletion {
    color: #ffd8d3;
    background-color: #78191b
}


/* ---------  dcc tabs -------------------------
  *  Note - To style tabs here, it's necessary to use `!important` to override  the default style.
  *         This means it's not possible to change the border, background or text color
  *         with `style={..}` or `className={..} etc in the dcc.Tabs or dcc.Tab components.
  *
  *         If you prefer to set the style in the component definition, delete this section
  *
  */
.dbc .tab {
    border: var(--bs-border-width) solid var(--bs-border-color) !important;
    background-color: var(--bs-body-bg) !important;
    color: var(--bs-body-body) !important;
}

.dbc .tab--selected {
    border-top: 4px solid rgb(var(--bs-primary-rgb) 0.50) !important;
    background-color: var(--bs-body-bg) !important;
    color: var(--bs-body-body) !important;
}

/* ----- end tabs ------------------------------------- */


/* ---- styles the checkboxes and radio buttons when row is selectable in the Dash DataTable --- */
.dbc-row-selectable input[type="checkbox"],
.dbc-row-selectable input[type="radio"] {
    border: var(--bs-border-width) solid var(--bs-border-color) !important;
    color: var(--bs-body-color);
    font-weight: bold;
    background-color: inherit;
    width: 1em;
    height: 1em;
    outline: 0;
    padding: 0;
    float: left;
    appearance: none;
    margin-right: 5px;
}

.dbc-row-selectable input[type="radio"] {
    border-radius: 50%;
    position: relative;
}

.dbc-row-selectable input[type="radio"]:checked::before {
    content: "";
    background-color: var(--bs-primary);
    float: left;
    height: 100%;
    width: 100%;
    position: absolute;
    transform: scale(0.65);
    border-radius: 50%;
}

.dbc-row-selectable input[type="checkbox"]:checked::before {
    content: "✓";
    float: left;
    width: 1em;
    height: 1em;
    line-height: 1em;
    text-align: center;
}

/* ---- end dbc-row-selectable ------------------------- */

.col-right-border {
    height:100%;
    position:relative;
}

.col-right-border::after {
    content:"";
    position:absolute;
    top:22.5%;
    right:0;
    width:3px;
    height:55%;
    background:grey;
}