/******************************************* 
 * FUNDAMENTAL MODIFICATIONS
 *  ||
 *  \/
 */
/* COLOR SCHEME:   */
.ReactTable .rt-noData {
  background: unset;
}
/* paginiation colors */
.ReactTable .-pagination input,
.ReactTable .-pagination select {
  background-color: unset;
}
.ReactTable .-pagination .-btn {
  background: rgba(255, 224, 188, 0.3);
  /* color: rgb(155, 142, 142); */
}
.ReactTable .-pagination .-btn:not([disabled]):hover {
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
}
/* column header */
.ReactTable .rt-th {
  /* font-weight:bold; */
  background-image: linear-gradient(to top, transparent, rgba(255, 255, 255, 0.1));
  color: #ccc;
}

/* outside border */
.ReactTable {
  border-radius: 2px;
  /* margin:3px; */
  border: 1px solid rgba(0, 0, 0, 0.301);
  box-shadow: 1px 1px 5px -1px rgba(255, 255, 255, 0.3);
}
/* row hover color */
.ReactTable.-highlight .rt-tbody .rt-tr:not(.-padRow):hover {
  background: rgba(255, 255, 255, 0.05);
}
/* sort indicator */
.ReactTable .rt-thead .rt-th.-sort-asc,
.ReactTable .rt-thead .rt-td.-sort-asc {
  box-shadow: inset 0 3px 0 0 rgba(217, 255, 0, 0.6);
}
.ReactTable .rt-thead .rt-th.-sort-desc,
.ReactTable .rt-thead .rt-td.-sort-desc {
  box-shadow: inset 0 -3px 0 0 rgba(217, 255, 0, 0.6);
}
/* filter inputs */
.ReactTable .rt-thead.-filters input {
  background-color: rgba(255, 255, 255, 0.2); /* just slightly brighter */
  color: black;
  transition-duration: 100ms;
}
.ReactTable .rt-thead.-filters input:hover,
.ReactTable .rt-thead.-filters input:focus,
.ReactTable .rt-thead.-filters input:not([value=""]) {
  background-color: rgba(255, 255, 255, 0.6); /* just slightly more brighter */
  box-shadow: 1px 1px 4px -1px black;
}

/* MAKE ROWS CONSISTENT HEIGHT, NOT SPREAD ACROSS WHOLE TABLE 
 *  AUTO-SCROLL-BODY: To make the body of the table expand to fit the available vertical space (of the container) 
 *    and scroll automatically when the content of the table exceeds the available space, us this basic config:
 *      <div className="flex-fit-height">
 *        <ReactTable 
 *          className="flex-fit-height"
 *          showPagination={false}
 *          defaultPageSize={10000}
 *          minRows={3}
 *        />
 *      </div>
 */
.ReactTable .rt-tbody {
  justify-content: flex-start;
}
.ReactTable .rt-tr-group {
  flex-grow: 0;
}

/* PAGINATION AREA: IMPROVE SPACE USAGE */
.ReactTable .-pagination {
  display: flex;
}
.ReactTable .-pagination .-previous {
  flex-grow: 1;
}
.ReactTable .-pagination .-center {
  flex-grow: 2;
}
.ReactTable .-pagination .-pageJump input {
  width: 40px;
  padding: 0px;
  padding-left: 4px;
}
.ReactTable .-pagination .-next {
  flex-grow: 1;
}
/*  /\
 *  ||
 * END FUNDAMENTAL MODIFICATIONS
 *******************************************/

/* CUSTOM FEATURE: SELECTABLE ROWS: */
.ReactTable .row-selected {
  background-color: rgba(187, 214, 69, 0.404) !important;
}
.ReactTable .multi-select {
  cursor: pointer;
}

/* CUSTOM FEATURE: CENTER COLUMN CONTENT */
.rt-align-center {
  text-align: center;
}