/*
  The root elements wrapping the body of the grid.
  Has a height: 0; by default which makes everything
  disapear in browsers that don't support flex correctly.
  height: 100%; appears to fix this problem. However we also need space for
  pagination and the status bar if they are enabled.
*/
.wrap-text {
  white-space: normal !important;
}

.ag-cell-wrap-text {
  white-space: normal;
  word-break: keep-all;
}

#grid.flexbox-fixes .ag-root-wrapper-body {
  /* @todo: when pagination is enabled we need to subtract space for it */
  /* height: calc(100% - 32px) !important; */
}
#grid.flexbox-fixes .ag-root {
  /* height: calc(100% - 32px) !important; */
}

/*
  The body element contains everything below the toolbar.
  Like the wrapper this has a height: 0; by default.
  height: 100%; makes the bottom of the scrollbar overflow.
  So we subtract some space for the status bar and the scroll bar. 
*/
#grid.flexbox-fixes .ag-body {
  /* height: calc(100% - 64px) !important; */
}

/*
  The body container element contains the actual data rows of the grid.
  If there are not enough columns to overflow-x there is an ugly white space
  on the right of the columns, min-width: 100%; fixes this.
*/
#grid.flexbox-fixes .ag-body-container {
  /* min-width: 100%; */
}

/*
  Fixes the floating filter icon button being too low
*/
.ag-floating-filter-button button {
  line-height: normal;
}

/*
  Styling for compact mode
*/
.compact .ag-cell {
  line-height: 12px;
  padding-left: 4px;
  padding-right: 4px;
}

.compact .ag-header-cell {
  padding-left: 4px;
  padding-right: 4px;
}

.compact .ag-selection-checkbox .ag-icon {
  font-size: 12px;
  line-height: 12px;
}

.div-outer-div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 100%;
  width: 100%;
}

.div-percent-bar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  border-radius: 2px 2px 2px 2px;
}

.div-percent-value {
  position: absolute;
  padding-left: 4px;
  left: 2px;
}

.ag-cell-value {
  height: 100%;
}

.no-padding {
  padding: 2px 0px !important;
}
.div-percent-bar-wrapper {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  height: 100%;
}