.react-datum-datagrid .rdd-headers {
  background-color: #eceff6;
  vertical-align: top;
}

.react-datum-datagrid .rdd-header-wrapper {
  word-break: break-word;
  white-space: pre-wrap;
  vertical-align: top;
}

.react-datum-datagrid .rdd-header-wrapper a {
  color: black;
  cursor: pointer;
  margin: 5px;
}

.react-datum-datagrid .rdd-header-wrapper a:hover {
  text-decoration: underline;
}

.react-datum-datagrid .rdd-header-icons {
  float: right;
  margin-right: 5px;
}

.react-datum-datagrid .rdd-header-icon {
  height: 11px;
  width: 11px;
  cursor: pointer;
}

.react-datum-datagrid .rdd-sort-indicator {
  color: #999999;
  opacity: .4;
}

.react-datum-datagrid .rdd-sort-indicator-asc {
  color: #0C0C0C;
  opacity: 1;
}

.react-datum-datagrid .rdd-sort-indicator-desc {
  opacity: 1;
}

.react-datum-datagrid .rdd-cell-wrapper {
  word-break: break-word;
  white-space: pre-wrap;
}


.react-datum-datagrid .rdd-cell-selected {
  background-color: #91A4CC;
  color: whitesmoke;
}

.react-datum-datagrid .rdd-cell .datum-display-value {
  /* when using a rdd in multi cell selection mode, user-select should probably be disabled */
  -webkit-touch-callout:  none; /* iOS Safari */
  -webkit-user-select:    none; /* Safari */
  -khtml-user-select:     none; /* Konqueror HTML */
  -moz-user-select:       none; /* Firefox */
  -ms-user-select:        none; /* Internet Explorer/Edge */
  user-select:            none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */  
}

.react-datum-datagrid .rdd-cell img {
  max-height: 100%;
  max-width: 100%;
}

.react-datum-datagrid .rdd-cell-indicators {
  float: right;
  margin-right: 5px;
  margin-top: 5px;
}

.react-datum-datagrid .rdd-editable-indicator {
  background-color: #E0E0E0;
  background-color: rgba(224, 224, 224, 0.5);
  border-radius: 10px;
  color: #1254E8;
  cursor: pointer;
  display: inline-block;
  padding: 2px 2px 2px 4px;  
  height: 12px;
  width: 12px;
}
.react-datum-datagrid .rdd-editable-indicator svg {
  fill: currentColor;
}

.react-datum-datagrid .rdd-saving-indicator {
  color: #cccccc;
  cursor: none;
  display: inline-block;
  height: 12px;
  width: 12px;
  
  -webkit-animation:rdd_spin 2s linear infinite;
  -moz-animation:rdd_spin 2s linear infinite;
  animation:rdd_spin 2s linear infinite;
}

.react-datum-datagrid .rdd-saving-indicator svg {
  fill: currentColor;
}

.react-datum-datagrid .rdd-was-saved {
  -webkit-animation: rdd_greenBackgroundFlash 5s linear;
  -moz-animation: rdd_greenBackgroundFlash 5s linear;
  animation: rdd_greenBackgroundFlash 5s linear;
}

.react-datum-datagrid .rdd-save-error {
  -webkit-animation: rdd_redBackgroundFlash 5s linear infinite;
  -moz-animation: rdd_redBackgroundFlash 5s linear infinite;
  animation: rdd_redBackgroundFlash 5s linear infinite;
}

/* TODO : lay this out using 'display: flex' */
/*   Need input width to leave room for indicator icons in cells */
.react-datum-datagrid .datum input {
  display: inline-block;
  margin-bottom: 1px;
  max-width: calc(100% - 40px);
  min-width: calc(100% - 40px);
  width: calc(100% - 40px);
}



.react-datum-datagrid .datum-invalid {
  color: #C70008;
  display: inline-block;
  vertical-align: top;
}





@-moz-keyframes rdd_spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes rdd_spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes rdd_spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }


@keyframes rdd_greenBackgroundFlash {
  10% {
      background-color: #83c16a;
  }
  25% {
      background-color: #73b958;
  }
  50% {
      background-color: #64b246;
  }  
}

@keyframes rdd_redBackgroundFlash {
  10% {
      background-color: #d97276;
  }
  25% {
      background-color: #d46065;
  }
  50% {
      background-color: #d04f54;
  }  
}