/* Not sure what this does */
.dash-table-container .row {
  display: block;
  margin: 0;
}

/* Solve issue with table dropdowns not showing https://community.plotly.com/t/resolved-dropdown-options-in-datatable-not-showing/20366/5 */
.Select-menu-outer {
display : block !important;
}

/* Set global font family https://stackoverflow.com/questions/55379814/changing-font-style-while-keeping-external-stylesheet-for-plotly-dashboard */
*{
  font-family: Georgia (serif);
}

/* Display loading message when callbacks are taking time https://dash.plotly.com/loading-states */
/**[data-dash-is-loading="true"]{*/
/*    visibility: hidden;*/
/*}*/
/**[data-dash-is-loading="true"]::before{*/
/*    content: "Loading...";*/
/*    display: inline-block;*/
/*    color: transparent;*/
/*    visibility: visible;*/
/*}*/


/* For browser zoom so components are all nice sizes */
/*
.zoom
{
    zoom: 67%;
}
*/

/* https://stackoverflow.com/questions/56363437/disable-highlighting-of-active-cell-in-dashtable */
/*
.dash-spreadsheet-container .dash-spreadsheet-inner table {
        border-collapse: collapse;
        font-family: monospace;
        --accent: transparent  !important;
        --border: transparent !important;
        --text-color: transparent !important;
        --hover: transparent !important;
        --background-color-ellipses: transparent !important;
        --faded-text: transparent !important;
        --faded-text-header: transparent !important;
        --selected-background: transparent !important;
        --faded-dropdown: transparent !important;
        --muted: transparent !important;
    }
    */


/* restyle radio items to look like buttons */
.radio-group .form-check {
  padding-left: 0;
}

.radio-group .btn-group > .form-check:not(:last-child) > .btn {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.radio-group .btn-group > .form-check:not(:first-child) > .btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  margin-left: -1px;
}
/**/
.input-group {
  flex-wrap: nowrap;
    justify-content: flex-end;/* or any other value to prevent wrapping */
}

@media (max-width: 768px) {
  .input-group {
      font-size: 5px;
  }
}