.btn_download{
  font-size: 14px;
  /*float: right !important;*/
  /*margin: 1px;*/
  height: 45px;
  min-width: 40px;
}

#toggleColors{
  /* font-size: 14px; */
  /*float: right !important;*/
  /*margin: 1px;*/
  min-width: 40px;
}

/*using a hashtag calls for a specific id. therefore, we can pick the specific buttons that we would like to see modified, and leave all other ones alone.
in our case, we are modifying the buttons for .csv and for .png, and leaving the header tab buttons (Overview/Clinical Data/Vet Data) alone */

#tooltip {
  width: 90%;
  left: 5%;
  right: 5%;
  text-align: left;
  min-height: 100px;
}

/*#figures.row {*/
  /* https://stackoverflow.com/questions/4371733/can-i-use-div-class-and-id-together-in-css ;;; dark blue colour is #35075 */
    /*border: 4px solid #ddd ;*/
/*}*/

.to_update_text em {
  color: #ff0000;
}

.rect_text_element {
  /* https://stackoverflow.com/questions/26781625/d3-how-to-trigger-event-on-the-object-behind-text */
    pointer-events: none;
}

.valueRects {
  cursor: pointer;
}

#select_organism {
  margin: 2px;
}

.gridline {
    stroke: lightgrey;
    opacity: 0.2;
}

.graphtool {
    line-height: 150%;
}

table.dataTable thead .sorting_asc {
  background-image: url(/src/img/sorting-icons/sort_asc.png)!important;
  padding-right: 15px;
}
table.dataTable thead .sorting_desc {
  background-image: url(/src/img/sorting-icons/sort_desc.png)!important;
  padding-right: 15px;
}
table.dataTable thead .sorting {
  background-image: url(/src/img/sorting-icons/sorting_both.png)!important;
  padding-right: 15px;
}
table.dataTable thead .sorting, table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc, table.dataTable thead .sorting_asc_disabled, table.dataTable thead .sorting_desc_disabled {
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: center right;
}  

.sorting_asc, .sorting_desc {
    background-color: #103d65 !important;
    color: white;
}