table.dataTable th {
    background-color: #f5f5f5 !important;
}


.panel-heading {
    background-color: #2196f3 !important;
}

.panel-title {
    color: #ffffff !important;
    text-transform: uppercase;
    font-size: 12px !important;
    font-weight: bold !important;
}

.control-label, .sorting, .sorting_asc, .sorting_desc {
    font-weight: bold;
    font-size: 14px;
}

.well {
    background-color: #f5f5f5 !important;
}

#big-btns {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

#big-btns > div.big-btn {
    flex: 0 0 auto;
    margin: 10px;
}

#big-btns > div.big-btn > a {
    margin: 0 auto;
    height: 90px;
    width: 145px;
}

.dt-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.dt-item {
    flex: 1 1 auto;
}

/* For ads block */
#ad-div {
    padding: 0px 0px 5px 0px !important;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

#ad-div > div {
    flex: 0 0 auto;
    margin-bottom: 0 !important;
    margin-right: 30px;
}

#ad-subdiv {
    padding: 10px 10px 0px 0px !important;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

#ad-subdiv > div {
    flex: 0 0 auto;
    margin-bottom: 10px !important;
    margin-left: 10px;
}


/* For UI customization bars */
.UI-customizer-bar {
    padding: 3px 10px !important;
    display: flex;
    flex-wrap: wrap;
    /* justify-content: space-around; */
}

.UI-customizer-bar div.form-group {
    flex: 0 0 auto;
    margin-bottom: 0 !important;
}

.UI-customizer-bar div.checkbox > label {
    margin-right: 30px;
}


.dataTables_filter input { width: 250px !important; }

div.ColVis {
    float: left !important;
}

.dropdown-toggle {
    font-size: 2em !important;
    padding: 14px 12px 14px 12px !important;
}

.navbar-custom-menu>.navbar-nav>li {
    position: relative !important;
}

.navbar-custom-menu>.navbar-nav>li>.dropdown-menu {
/*    position: absolute !important;
    right: 0 !important;
    left: auto !important;
*/
    border: 1px solid #ddd;
/*    background: #fff; */
}

a.site-logo {
    color: #ffffff !important;
    text-decoration: none !important;
}

table.dataTable tbody td {
    height: 60px;  /* This is the minimum height needed to accomodate big, bold text for preference columns and a bar chart bar. */
}

div > table:not(.dataTable) {
    width: 100% !important;
}

div > table.spacing-xs > tbody > tr > td {
    padding: 0 5px 0 5px !important;
    line-height: 1.5em !important;
}

.tab-pane {
    line-height: 1.2em !important;
}

/* The .siftswift-compress-inputs class in a parent element will make inputs use less vertical space. */
div.modal-dialog label {
    line-height: 1.2;
    margin-bottom: 0;
}

div.modal-dialog input.form-control {
    font-size: 14px;
    height: 22px;
}

div.modal-dialog div.form-group {
    margin-bottom: 0;
    margin-top: 5px;
}

/* Provides a little gap between apply buttons and the images above them. */
.apply-button {
  margin-top: 2px;
}

input[type=number] {
    text-align:right;
}

input[type=text] {
    text-align:left;
}

/* There needs to be a little space between the tabs and the content below them. */
ul.nav-tabs {
    padding-bottom: 1em;
}

/* Standard "Hide " and "Show " nomenclature on buttons that collapse and expand collapsible divs. */
[data-toggle="collapse"]:before {
    content:'Hide ';  
}
[data-toggle="collapse"].collapsed:before {
    content:'Show ';  
}

.selectize-control.multi .selectize-input > div {
  background: #2196f3 !important;
  color: #ffffff !important;
  font-weight: bold !important;
  padding-left: 8px !important;
}

.btn {
  font-weight: bold !important;
}

.selectize-control.multi .selectize-input > div.active {
  background: #1976d2 !important;
}

#pref .form-group {
  margin-bottom: 0 !important;
}

#prefs_prioritized_flag .checkbox {
  margin-top: 0 !important;
}

/* Fixes an alignment and shadow issue */
.main-header .logo {
  height: 53px !important;
  line-height: 53px !important;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

button.expander {
  font-size: 1.2em;
  padding: 1px 2px 1px 2px;
  line-height: 1em;
  vertical-align: top;
}

.details-control {
  cursor: pointer;
  padding-right: 0 !important;
  border-right: 0 !important;
}

.dataTables_wrapper { overflow-x: auto; }

h1 {
  font-size: 36px !important;
}

@media (max-width: 767px) {
  .container-fluid {
    padding:0 !important;
    margin:8px !important;
  }
    
  section.content {
    padding:8px !important;
  }

  body {
    padding:0 !important;
  }

.navbar-fixed-top, .navbar-fixed-bottom, .navbar-static-top {
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom:0 !important;
  }
    
  h1 {
    font-size: 28px !important;
  }
}

/* Fix to footer justification when sidebar menu is visible. */
.main-footer {
    margin-left: 0 !important;
    transform: translate(0px,0) !important;
}

.ColVis_collection {
    background-color: rgba(255,255,255,1) !important;
    width: auto !important;
    padding: 7px 4px 1px 7px !important;
}

ul.ColVis_collection li {
    box-shadow: none !important;  /* 1px 1px 4px rgba(0,0,0,0.4); !important; */
    border: none !important;  /* 1px solid #999; */
    padding: 0 2px 0 2px !important;  /* 0.5em */
    white-space: normal !important;
    font-size: 12px !important;
    margin-bottom: 0px !important;
    background: #ffffff !important;
}


/* Change color of:
   - Top navbar
   - ionRangeSlider using in Shiny
   - noUISlider used in DT datatables filters
 */
/* table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child:before, */
.irs-from, .irs-to, .irs-single, .irs-bar, .irs-bar-edge,
div.noUi-connect {
    background-color: #2196f3 !important;
}

.skin-blue .main-header .navbar,
.skin-blue .main-header,
.box.box-solid.box-primary>.box-header {
    background-color: #2196f3 !important;
}

.box.box-primary {
    border-top-color: #2196f3 !important;
}

/* Hover color for "hamburger" menu toggle and other dropdown menu toggles, etc. */
.skin-blue .main-header .navbar .sidebar-toggle:hover,
.skin-blue .main-header .logo, 
.dropdown-toggle:hover
{
    background-color: #1976d2 !important;
}

/* Smaller font than default 18px for box headers */
.box-header .box-title, .box-header>.fa, .box-header>.glyphicon, .box-header>.ion {
    font-size: 13px;
}

body {
    color: #222222 !important;
}

/* Make diagrams align to the top of their containing div (wellPanel) */

#diagram {
    top:0;
}


/* Bigger logo that the default 20px */
.wrapper .main-header .logo {
    font-size: 3em;
}

/* This is for parenthesized spending category descriptions. */
.parenthesized {
    font-weight: normal;
    font-size: 0.9em;
}

/* This to have long menu items wrap instead of getting cut off. 
 * "AdminLTE.min.css" specifies "white-space: nowrap !important" for the "sidebar-menu" class.
 */ 
.sidebar-menu > li {
    white-space: normal;
}

/* To make the background color of content area white for a clean look */
.content-wrapper {
  background-color: #fff;
}

/* Not sure about the following stuff. Haven't looked at it in a while. */
.navbar {
  background-color: #337ab7;
}

.navbar-default .navbar-brand {
  color: #fff;
  font-size: 1.7em;
  padding: 2px 100px 0 0;
}