.nav-item {
    background-color: transparent !important;
}

.bg-primary .nav-link.active {
    background-color: #007bff!important
}

.bg-secondary .nav-link.active {
    background-color: #6c757d!important
}

.bg-success .nav-link.active {
    background-color: #28a745!important
}

.bg-info .nav-link.active {
    background-color: #17a2b8!important
}

.bg-warning .nav-link.active {
    background-color: #ffc107!important
}

.bg-danger .nav-link.active {
    background-color: #dc3545!important
}

.bg-light .nav-link.active {
    background-color: #f8f9fa!important
}

.bg-dark .nav-link.active {
    background-color: #343a40!important
}

.bg-white .nav-link.active {
    background-color: #fff!important
}

.bg-transparent .nav-link.active {
    background-color: transparent!important
}


/* Support shinyFiles modals */
.fade:not(.show) {opacity: 1;}
.sF-modalContainer {
    z-index: 1600 !important;
    
}
.sF-modalBackdrop {
    opacity: 0.5 !important;
    
}

/* Fix #135: different padding for first header in AdminLTE3 */
.nav-sidebar .nav-header {
    padding: 0rem 1rem .5rem;
}

/* Fix issueswith dropdown links in card with solidHeader */
.dropdown-item { 
   color: #000 !important; 
 }
 
/* Don't screw up the dark mode: dropdown-item must be white */
 .dark-mode .dropdown-item {
  color: #fff !important;
}
 
/* User post border bottom issue */
.post {
  border-bottom: none !important;
}

/* So that body content has minimum padding: AdminLTE3 is not strict enough. Use
   same value as in shinydashboard.
*/
.content-wrapper>.content {
  padding: 15px !important;
}


/* Tweak controlbar tabs in dark mode */
.control-sidebar-dark .nav-tabs {
  background-color: transparent !important;
}

.control-sidebar-dark .nav-tabs .nav-link.active {
  background-color: #6c757d;
}

/* Add margins to pills in controlbar */
.control-sidebar .nav-pills {
  margin: 10px !important;
}

/* Tweak controlbar tabsetPanel content margins */
.control-sidebar .tab-pane, .control-sidebar .tab-content {
    padding: 10px !important;
}

/* Change BS4 popover background color */
.dark-mode .popover-header {
  background-color: #343a40;
  border-bottom: 1px solid #343a40;
}

.dark-mode .popover-body {
  background-color: #454d55;
  color: #fff;
}


.dark-mode .bs-popover-bottom .popover-header::before,
.dark-mode .bs-popover-top .popover-header::before,
.dark-mode .bs-popover-left .popover-header::before,
.dark-mode .bs-popover-right .popover-header::before
{
  border-bottom: #343a40;
}

.dark-mode .bs-popover-bottom>.arrow::after, 
.dark-mode .bs-popover-top>.arrow::after,
.dark-mode .bs-popover-left>.arrow::after,
.dark-mode .bs-popover-right>.arrow::after {
  border-bottom-color: #454d55;
}

/* Remove top border for popover in dark mode */
.dark-mode .popover-header {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}



/* Change sliderInput label color in dark mode */
.dark-mode .irs-max, .dark-mode .irs-min {
  color: #ffffff !important;
  background-color: #454d55 !important;
}

.dark-mode .irs-grid-text {
  color: #ffffff !important;
}

.dark-mode .irs-grid-pol {
  background-color: #ffffff !important;
}


/* change sortable background in dark mode */
.dark-mode .ui-sortable-placeholder {
  background-color: #a8aeb7;
  border-color: #343a40;
}


/* Rework select input in dark mode */
.dark-mode .selectize-input {
    border: 1px solid #6c757d;
}

.dark-mode .selectize-input.full {
    background-color: #343a40;
    color: inherit;
}

.dark-mode .selectize-input, .dark-mode .selectize-control.single .selectize-input.input-active{
  background: #343a40;
}

.dark-mode .selectize-control.single .selectize-input.input-active{
  border-color: #66afe9;
}

.dark-mode .selectize-dropdown, .dark-mode .selectize-dropdown.form-control {
  background: #343a40;
  color: inherit;
}

.dark-mode .selectize-dropdown .active {
    background-color: #454d55;
    color: inherit;
}

.dark-mode .selectize-control.single .selectize-input:after {
  border-color: #fff transparent transparent transparent;
}

.dark-mode .selectize-control.single .selectize-input.dropdown-active:after {
  border-color: transparent transparent #fff transparent;
}

/* Fix verbatimTextOutput in dark mode */
.dark-mode pre {
  color: #fff;
}

/* Fix selectize group header in dark mode */
.dark-mode .selectize-dropdown .optgroup-header {
    color: #777777;
    background: #343a40;
    cursor: default;
}



/* Copied from shinydashboard 
*
*
*
*/

/* So that selectize dropdowns are visible if they go off the bottom. */
.content {
  overflow: visible;
}

/* Inputs in the sidebar */
div.sidebar .shiny-input-container {
  /* Proper spacing around inputs. */
  padding: 12px 15px 0px 15px;
  /* Wrap content (important for inline inputs). */
  white-space: normal;
}

/* Make action buttons/links look good on the sidebar panel */
div.sidebar .shiny-bound-input.action-button,
div.sidebar .shiny-bound-input.action-link {
  margin: 6px 5px 6px 15px;
  display: block;
}

/* Shiny inputs in boxes should span full width. */
div.card-body .shiny-input-container {
  width: auto;
}

/* Fix #171 about daterange input padding */
.input-daterange .input-group-addon {
  padding: 0px 0px;
}