/*
  react-data-grid uses internal style objects via css-in-js that can shift in
  specificity in comparison to the css rules below when the application is built
  via`npm run build`. This makes overriding them with just the classnames fragile.
  The 'quick fix', unfortunately, is to use `!important` on all the rules below,
  similar to how we override other external library styling that has this issue,
  in order to force our overriding styles to always be used.
*/

/* stylelint-disable declaration-no-important */
.rdg-header-row {
  line-height: 20px !important;
}

.rdg-header-row .rdg-cell {
  padding: 8px !important;
}

.rdg-cell-selected {
  box-shadow: none !important;
}

.rdg-filter-row,
.rdg-header-row {
  background: #fff !important;
  font-weight: 600 !important;
}

.rdg {
  border: 1px solid #e9eeef !important;
  border-radius: 4px !important;
  height: 100% !important;
  -webkit-user-select: auto !important;
  user-select: auto !important;
}

.rdg-cell {
  border-right: 1px solid #e9eeef !important;
  border-bottom: 1px solid #e9eeef !important;
}

.rdg-row:hover {
  background-color: #f2f7fd !important;
}

.rdg-checkbox {
  width: 16px !important;
  height: 16px !important;
  border: 1px solid #ccdde9 !important;
  border-radius: 3px !important;
  box-shadow: inset 0 2px 2px 0 rgba(193, 201, 211, 0.1) !important;
}

.rdg-checkbox-label {
  margin: 0 !important;
}

.rdg-checkbox-input:checked + .rdg-checkbox {
  background: #566ff2 !important;
}

.rdg-editor-container {
  z-index: 10 !important;
}

.rdg-select-editor {
  z-index: 10 !important;
  background: #fff !important;
  box-shadow: inset 0 0 0 2px #66afe9 !important;
}
/* stylelint-enable declaration-no-important */