.Reactable {
  height: 100%;
  background-color: #fff;
}

.rt-inline {
  display: inline-flex;
}

/* Table cells/headers */
.rt-th {
  font-weight: 600;
}

.rt-th,
.rt-td {
  display: flex;
  overflow-wrap: break-word;
  /* For IE 11 */
  max-width: 100%;
  word-wrap: break-word;
}

.rt-th-inner,
.rt-td-inner {
  padding: 7px 8px;
  width: 100%;
  overflow: hidden;
}

.rt-compact .rt-th-inner,
.rt-compact .rt-td-inner {
  padding: 4px 6px;
}

.rt-text-content {
  overflow: hidden;
}

.rt-nowrap .rt-th-inner,
.rt-nowrap .rt-td-inner,
.rt-nowrap .rt-text-content {
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Selectable cells */
.rt-select {
  display: flex;
  align-items: center;
  justify-content: center;
}

input[type='checkbox'].rt-select-input,
input[type='radio'].rt-select-input {
  display: block; /* For vertical centering in headers (because nested div) */
  margin: 0; /* Reset for browsers and Bootstrap 3's input[type=] form styles */
}

/* Column alignment */
.rt-align-left {
  text-align: left;
}

.rt-align-right {
  text-align: right;
}

.rt-align-center {
  text-align: center;
}

.rt-valign-center {
  align-items: center;
}

.rt-valign-bottom {
  align-items: flex-end;
}

/* Sticky columns */
.rt-tr,
.rt-tr-group,
.rt-tbody {
  background-color: inherit;
}

.rt-sticky {
  background-color: inherit;
  z-index: 1;
}

/* Outer table borders */
.rt-table {
  border-width: 1px;
  border-color: hsl(0, 0%, 90%);
}

.rt-outlined .rt-table,
.rt-bordered .rt-table {
  border-style: solid;
}

.Reactable:not(.rt-keyboard-active) .rt-table:focus {
  outline-width: 0; /* Hide focus outlines, but allow them to be restored easily */
  outline-style: solid; /* Needed for Safari when using outline-width: 0 */
}

/* Header borders */
.rt-th {
  border-bottom: 2px solid hsl(0, 0%, 90%);
  border-left-width: 1px;
  border-left-color: rgba(0, 0, 0, 0.05);
}

.rt-outlined .rt-th,
.rt-bordered .rt-th {
  border-bottom-width: 1px;
}

/* Cell and footer borders */
.rt-td {
  border-top: 1px solid hsl(0, 0%, 95%);
  border-left-width: 1px;
  border-left-color: rgba(0, 0, 0, 0.05);
}

.rt-tr-group:first-child > .rt-tr:first-child .rt-td {
  border-top: none;
}

.rt-borderless .rt-td {
  border-top: none;
}

.rt-bordered .rt-td,
.rt-bordered .rt-th {
  border-left-style: solid;
}

.rt-bordered .rt-td:first-child,
.rt-bordered .rt-th:first-child {
  border-left: none;
}

/* Header group borders */
.rt-th-group,
.rt-th-group-none {
  border-bottom-style: none;
}

.rt-th-group::after {
  /* Custom borders with spacing */
  content: '';
  position: absolute;
  margin: auto;
  left: 8px;
  right: 8px;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: hsl(0, 0%, 90%);
}

.rt-outlined .rt-th-group::after,
.rt-bordered .rt-th-group::after {
  /* Remove spacing with outlined/bordered style */
  left: 0;
  right: 0;
}

.rt-bordered .rt-th-group-none {
  border-bottom-style: solid;
}

/* Custom row stripe style to prevent bleed-through to nested tables */
.rt-tr-striped {
  background-color: rgba(0, 0, 0, 0.03);
}

/* Sticky cells need to be opaque to prevent bleed-through */
.rt-tr-striped-sticky {
  background-color: hsl(0, 0%, 97%);
}

/* Custom highlight style to prevent bleed-through to nested tables */
.rt-tr-highlight:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

/* Sticky cells need to be opaque to prevent bleed-through */
.rt-tr-highlight-sticky:hover {
  background-color: hsl(0, 0%, 95%);
}

.rt-tr-pad {
  user-select: none;
}

/**
 * Work around flexbox bug in Safari, Chrome, and the RStudio Viewer where
 * table elements can shrink below their min height when overflowed, causing
 * elements to overlap.
 * Fixed in Chrome 72+: https://github.com/philipwalton/flexbugs#flexbug-1
 */
.Reactable .rt-thead,
.Reactable .rt-tfoot,
.Reactable .rt-tbody {
  flex-shrink: 0;
}

/* Sticky headers/footers */
@supports (position: sticky) {
  .Reactable .rt-table {
    background: inherit;
  }

  .Reactable .rt-tbody {
    /* Override default */
    overflow: visible;
  }

  .Reactable .rt-thead {
    position: sticky;
    top: 0;
    background: inherit;
    z-index: 2;
  }

  .Reactable .rt-tfoot {
    position: sticky;
    bottom: 0;
    background: inherit;
    z-index: 2;
  }
}

@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
  /* Keep body aligned with headers/footers in IE 11 */
  .Reactable .rt-tbody {
    overflow: auto;
    -ms-overflow-style: -ms-autohiding-scrollbar;
  }
}

/* Filters */
.rt-td-filter {
  border-top: 0;
  border-bottom: 1px solid hsl(0, 0%, 95%);
}

.rt-borderless .rt-td-filter {
  border-bottom: 0;
}

.rt-filter {
  padding: 5px 7px;
  margin: 0; /* Reset for Safari */
  width: 100%;
  color: inherit;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  font-family: inherit;
  font-size: inherit;
  font-weight: normal;
  outline-width: 0; /* Hide focus outlines, but allow them to be restored easily */
  outline-style: solid; /* Needed for Safari when using outline-width: 0 */
}

.rt-filter:focus {
  border: 1px solid rgba(0, 0, 0, 0.25);
}

/* Sorting */
.rt-sort-header {
  display: flex;
}

.rt-align-center .rt-sort-header {
  justify-content: center;
}

.rt-align-right .rt-sort-header {
  justify-content: flex-end;
}

.rt-th {
  outline-width: 0; /* Hide focus outlines, but allow them to be restored easily */
  outline-style: solid; /* Needed for Safari when using outline-width: 0 */
}

.rt-th[aria-sort] {
  cursor: pointer;
}

.rt-th[aria-sort] .rt-sort-left::after {
  padding-right: 5px;
  line-height: 0;
}

.rt-th[aria-sort] .rt-sort-right::after {
  padding-left: 5px;
  line-height: 0;
}

.rt-th[aria-sort='ascending'] .rt-sort-left::after,
.rt-th[aria-sort='ascending'] .rt-sort-right::after {
  content: '\2191';
}

.rt-th[aria-sort='descending'] .rt-sort-left::after,
.rt-th[aria-sort='descending'] .rt-sort-right::after {
  content: '\2193';
}

.rt-th[aria-sort='none'] .rt-sort::after {
  content: '\2195';
  opacity: 0.4;
}

.rt-keyboard-active .rt-th[data-sort-hint='ascending']:focus .rt-sort-left::after,
.rt-keyboard-active .rt-th[data-sort-hint='ascending']:focus .rt-sort-right::after {
  content: '\2191';
  opacity: 0.4;
}

.rt-keyboard-active .rt-th[data-sort-hint='descending']:focus .rt-sort-left::after,
.rt-keyboard-active .rt-th[data-sort-hint='descending']:focus .rt-sort-right::after {
  content: '\2193';
  opacity: 0.4;
}

/* Expanders */
.rt-expander-button {
  margin: 0 2px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}

.rt-expander {
  display: inline-block;
  position: relative;
  padding: 0 8px;
  color: transparent;
  outline-width: 0; /* Hide focus outlines, but allow them to be restored easily */
  outline-style: solid; /* Needed for Safari when using outline-width: 0 */
}

.rt-expander::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
  border-left: 5.04px solid transparent;
  border-right: 5.04px solid transparent;
  border-top: 7px solid rgba(0, 0, 0, 0.8);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  cursor: pointer;
}

.rt-expander.rt-expander-open::after {
  transform: translate(-50%, -50%) rotate(0);
}

/* Pagination */
.rt-pagination {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  padding: 6px 4px;
  border-top: 1px solid hsl(0, 0%, 95%);
}

.rt-outlined .rt-pagination,
.rt-bordered .rt-pagination {
  border-top: none;
}

.rt-pagination-info :not(:last-child) {
  margin-right: 16px;
}

.rt-page-info {
  display: inline-block;
  margin: 6px 8px;
  opacity: 0.9;
}

.rt-page-size {
  display: inline-block;
  margin: 0 8px;
}

.rt-page-size-select {
  margin: 0 2px;
}

.rt-page-size-select,
.rt-page-jump,
.rt-page-button {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  line-height: inherit;
}

.rt-page-size-select,
.rt-page-jump {
  background-color: #fff;
  padding: 3px;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

/* Restyle native select on Firefox */
@supports (-moz-appearance: none) {
  .rt-page-size-select {
    -moz-appearance: none;
    padding-right: 12px;
    background-image: url('data:image/svg+xml;charset=US-ASCII,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path fill="%23333" d="M24 1.5l-12 21-12-21h24z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 6px center;
    background-size: 6px;
  }
}

.rt-page-button {
  padding: 6px 12px;
  background-color: transparent;
  border: none;
  border-radius: 3px;
  outline-width: 0; /* Hide focus outlines, but allow them to be restored easily */
  outline-style: solid; /* Needed for Safari when using outline-width: 0 */
  cursor: pointer;
}

/* Remove inner focus ring on Firefox */
.rt-page-button::-moz-focus-inner {
  padding: 0;
  border-style: none;
}

.rt-page-button:disabled {
  opacity: 0.6;
  cursor: default;
}

.rt-page-button:hover {
  background-color: rgba(0, 0, 0, 0.04);
}

.rt-page-button:active {
  background-color: rgba(0, 0, 0, 0.08);
}

.rt-keyboard-active .rt-page-button:focus {
  background-color: rgba(0, 0, 0, 0.04);
}

/* For browsers that leave focus on disabled buttons, like Firefox */
.rt-page-button:disabled:hover,
.rt-page-button:disabled:focus {
  background-color: transparent;
}

.rt-page-button-current {
  font-weight: 700;
}

.rt-page-ellipsis {
  margin: 0 4px;
  pointer-events: none;
}

.rt-page-numbers {
  display: inline-block;
  margin: 0 8px;
  white-space: nowrap;
}

.rt-page-jump {
  width: 70px;
  text-align: center;
}

/* No data */
.rt-tbody-no-data {
  position: relative;
}

.rt-tbody-no-data .rt-td {
  border-color: transparent;
}

.rt-no-data {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  line-height: 0;
  z-index: 1;
}

/* Search */
.rt-search {
  display: block;
  align-self: flex-end;
  margin: 0 0 8px 0; /* Reset for Safari */
  padding: 5px 7px;
  color: inherit;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  outline-width: 0; /* Hide focus outlines, but allow them to be restored easily */
  outline-style: solid; /* Needed for Safari when using outline-width: 0 */
  font-family: inherit;
  font-size: inherit;
}

.rt-search:active,
.rt-search:focus {
  border: 1px solid rgba(0, 0, 0, 0.25);
}
