.process-nav-details-list {
  /*overriding office fabric styles*/
}

.process-nav-details-list span.no-chevron {
  margin-right: 30px;
}

.process-nav-details-list .ms-DetailsRow {
  /* to make sure when u focus on a row the icon is in contrast with the background */
}

.process-nav-details-list .ms-DetailsRow .popup-menu-trigger {
  display: inline-block;
  width: 40px;
  height: 40px;
  padding: 14px 8px 8px 8px;
  position: absolute;
  bottom: 1px;
  right: 12px;
  color: rgba(0, 0, 0, .9);
  color: var(--text-primary-color,rgba(0, 0, 0, .9));
  outline: none;
}

.process-nav-details-list .ms-DetailsRow .popup-menu-trigger:before {
  visibility: hidden;
}

.process-nav-details-list .ms-DetailsRow .popup-menu-trigger:hover, .process-nav-details-list .ms-DetailsRow .popup-menu-trigger:focus {
  background-color: rgba( 234, 234, 234 ,  1 );
  background-color: rgba( var(--palette-neutral-8,234, 234, 234) ,  1 );
  cursor: pointer;
}

@media (-ms-high-contrast: active) {
  .process-nav-details-list .ms-DetailsRow:focus .popup-menu-trigger {
    color: HighlightText;
  }
}

.process-nav-details-list .ms-DetailsRow.is-selected {
  background-color: rgba( 239, 246, 252 ,  1 );
  background-color: rgba( var(--palette-primary-tint-40,239, 246, 252) ,  1 );
  /* necessary to avoid multiple borders while selection via arrow keys in HC mode */
  /* change borderstyle when selected through mouse or keyboard to work with firefox since firefox doesnt support color highlight in HC mode */
  border: 2px dotted rgba(0, 120, 212, 1);
  border: 2px dotted var(--communication-background,rgba(0, 120, 212, 1));
}

.process-nav-details-list .ms-DetailsRow.is-selected:focus:before, .process-nav-details-list .ms-DetailsRow.is-selected:focus:after {
  border: none;
}

.process-nav-details-list .ms-DetailsRow.is-selected .popup-menu-trigger:before {
  visibility: visible;
}

.process-nav-details-list .ms-DetailsRow.is-selected .popup-menu:hover {
  background-color: rgba( 43, 136, 216 ,  1 );
  background-color: rgba( var(--palette-primary-tint-10,43, 136, 216) ,  1 );
}

.process-nav-details-list .ms-DetailsRow:hover {
  background-color: rgba( 244, 244, 244 ,  1 );
  background-color: rgba( var(--palette-neutral-4,244, 244, 244) ,  1 );
}

.process-nav-details-list .ms-DetailsRow:hover .popup-menu-trigger:before {
  visibility: visible;
}

.process-nav-details-list .ms-DetailsRow .ms-DetailsRow-cell .grid-cell-link {
  max-width: 100%;
  line-height: 38px;
  padding: 0 0 0 8px;
}

.process-nav-details-list .ms-DetailsRow .ms-DetailsRow-cell .bowtie-check {
  color: rgba( 16, 124, 16 ,  1 );
  color: rgba( var(--palette-accent2-dark,16, 124, 16) ,  1 );
}

.process-nav-details-list .ms-DetailsRow .ms-DetailsRow-cell .grid-chevron:hover {
  cursor: pointer;
}

.process-nav-details-list .ms-DetailsRow .ms-DetailsRow-cell .numerical-cell {
  padding-left: 17px;
}

.process-nav-details-list .ms-DetailsHeader-cell, .process-nav-details-list .ms-DetailsRow-check {
  border: none;
}

.process-nav-details-list .ms-DetailsHeader-cell.is-check, .process-nav-details-list .ms-DetailsRow-check {
  min-width: unset;
  min-width: auto;
}

.process-nav-details-list button[aria-sort="none"] {
  cursor: default;
}

.process-nav-details-list .ms-DetailsHeader .ms-DetailsHeader-cell {
  border: none;
  color: rgba(0, 0, 0, .55);
  color: var(--text-secondary-color,rgba(0, 0, 0, .55));
  height: 31px;
}

.process-nav-details-list .ms-DetailsHeader .ms-DetailsHeader-cell .bowtie-icon {
  font-family: "bowtie";
  padding-right: 5px;
}

.process-nav-details-list .ms-DetailsHeader .ms-DetailsHeader-cell:hover {
  border: none;
}

.process-nav-details-list .ms-DetailsHeader .ms-DetailsHeader-cell:focus {
  border: none;
}

.ms-Fabric.is-focusVisible .process-nav-details-list .popup-menu-trigger:focus {
  outline: 1px solid rgba( 0, 0, 0 ,  1 );
  outline: 1px solid rgba( var(--palette-neutral-100,0, 0, 0) ,  1 );
}