/**
 * Failed to minify the file using clean-css v5.3.2. Serving the original version.
 * Original file: /gh/AnnMarieW/dash-bootstrap-templates@master/dbc.css
 *
 * Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files
 */
/*
Defines the .dbc class
  Description: The dbc class improves the style of Dash components when using Bootstrap V5 themes
  Author: @AnnMarieW
  Updated: 2024-06-19
*/


/* ------------- dash ag grid -------*/
.dbc-ag-grid [class*=ag-theme-], .dbc-ag-grid[class*=ag-theme-] {
    --ag-active-color: var(--bs-primary);
    --ag-alpine-active-color: var(--bs-primary);
    --ag-balham-active-color: var(--bs-primary);
    --ag-selected-row-background-color: rgba(var(--bs-primary-rgb), 0.3);
    --ag-row-hover-color: rgba(var(--bs-primary-rgb), 0.1);
    --ag-column-hover-color: rgba(var(--bs-primary-rgb), 0.1);
    --ag-input-focus-border-color: rgba(var(--bs-primary-rgb), 0.4);
    --ag-range-selection-background-color: rgba(var(--bs-primary-rgb), 0.2);
    --ag-range-selection-background-color-2: rgba(var(--bs-primary-rgb), 0.36);
    --ag-range-selection-background-color-3: rgba(var(--bs-primary-rgb), 0.49);
    --ag-range-selection-background-color-4: rgba(var(--bs-primary-rgb), 0.59);
    --ag-background-color: var(--bs-body-bg);
    --ag-foreground-color: var(--bs-body-color);
    --ag-border-color: rgba(173, 181, 189, 0.40);
    --ag-cell-horizontal-border: rgba(173, 181, 189, 0.20);
    --ag-secondary-border-color: rgba(173, 181, 189, 0.20);
    --ag-header-background-color: rgba(173, 181, 189, 0.20);
    --ag-odd-row-background-color: rgba(173, 181, 189, 0.05);
    --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);
}

/* ---------------------------------------
 * 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]):not([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;
}


/* ---------------------------------------
 * Datatable
 */

/* 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 {
    --accent: var(--bs-primary) !important;
    --hover: none !important;
    font-family: var(--bs-font-sans-serif);
}

.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;
}

/* on hover highlight entire row
.dash-spreadsheet tr:hover td.dash-cell {
            border-color: rgba(100, 100, 100, 0.4) !important;
            border-width: 0.5px !important;
            background-color: rgba(var(--bs-primary-rgb), 0.2) !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: rgba(100, 100, 100, 0.4) !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-500) !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;
}

.dbc .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner table {
    border-collapse: inherit;
    border-spacing: unset;
}

/* active cell */
.dbc .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td.focused {
    background-color: rgba(var(--bs-primary-rgb), 0.2) !important;
    outline: 1px solid var(--bs-primary);
}

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

/* selected cells */
.dbc .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td.cell--selected {
    background-color: rgba(var(--bs-primary-rgb), 0.2) !important;
}

/*  dropdown inside datatable */
.dbc .dash-table-container .dash-spreadsheet .Select-menu-outer {
    background-color: var(--bs-gray-500);
    border-color: rgba(100, 100, 100, 0.4)
}

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

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


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

.dbc .rc-slider-track {
    background-color: rgba(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: rgba(var(--bs-primary-rgb), 0.25);
}

.dbc .rc-slider-handle:active {
    border-color: rgba(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 rgba(100, 100, 100, 0.4) !important;
}

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

.dbc .DateInput_fangStroke {
    stroke: rgba(100, 100, 100, 0.4);
    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: 0px 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: rgba(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: rgba(var(--bs-primary-rgb), 0.2);
    color: white;
}

.dbc .CalendarDay__hovered_span:hover {
    background: rgba(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: rgba(var(--bs-primary-rgb), 0.2) !important;
}


/* styles code in dcc.Markdown with the GitHub Dark Dimmed theme */
.dbc pre code.hljs {
    display: block;
    overflow-x: auto;
    padding: 1em
}

code.hljs {
    padding: 3px 5px
}

/*/
  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 rgba(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 --- */

/*targets all inputs not containing the class "form-check-input" to filter out the dbc components*/
.dbc input:not([class~=form-check-input]) {
    &[type=checkbox], &[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;
        -webkit-appearance: none;
        -moz-appearance: none;
        margin: 3px 5px 3px 5px;
    }

    &[type=radio] {
        border-radius: 50%;
        position: relative;

        &:checked:before {
            content: "";
            background-color: var(--bs-primary);
            float: left;
            height: 100%;
            width: 100%;
            position: absolute;
            transform: scale(0.65);
            border-radius: 50%;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
        }
    }

    &[type=checkbox]:checked:before {
        float: left;
        width: 1em;
        height: 1em;
        line-height: 1em;
        text-align: center;
    }
}

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