.power-component-details-overlay {
  --lightGrey: #eeeeee;
  --middleGrey: #7f8488;
  --darkGrey: #4b4d4d;
  --widgetHeaderColorFromPortalV21: #7b7c7e;

  color: var(--darkGrey);
}

.power-component-details-overlay {
  cursor: pointer;
  font-family: sans-serif;
}
.power-component-details-overlay table {
  border-collapse: collapse;
}

.power-component-details-overlay table thead th {
  color: var(--widgetHeaderColorFromPortalV21);
  border-bottom: 1px solid var(--lightGrey);
  font-weight: normal;
  height: 1em;

  /* make header stick when scrolling
    (deactivated because it causes issues with rendering of row separator lines in Firefox
  */
  /*background-color: white;
  position: sticky;
  top: 0;*/
}

.power-component-details-overlay table tbody td {
  border-top: 1px solid var(--lightGrey);
}

.power-component-details-overlay tr > td:first-child,
.power-component-details-overlay tr > th:first-child {
  padding-left: 15px;
}

.power-component-details-overlay tr > td:last-child,
.power-component-details-overlay tr > th:last-child {
  padding-right: 15px;
}

.power-component-details-overlay table tbody .pcdo__totalRow td {
  border-top: 2px solid var(--lightGrey);
  font-size: large;
}

.power-component-details-overlay .pcdo__submeter-icon {
  height: 32px;
  width: 32px;
}

.power-component-details-overlay .pcdo__submeter-label {
}

.power-component-details-overlay .pcdo__category-name {
  color: var(--middleGrey);
  font-size: small;
}

.power-component-details-overlay .pcdo__ohmpilot-temp {
  color: var(--middleGrey);
}

.power-component-details-overlay .pcdo__title {
  padding-top: 5px;
  padding-bottom: 5px;
  text-align: left;
}

.power-component-details-overlay .pcdo__title > * {
  vertical-align: middle;
}

.power-component-details-overlay .pcdo__unit-header {
  float: right;
}

.power-component-details-overlay .pcdo__power-value {
  text-align: right;
}

.power-component-details-overlay .pcdo__totalRow-label,
.power-component-details-overlay .pcdo__title-text {
  text-transform: capitalize;
}

/* Scrollbar style (Firefox) **/
.power-component-details-overlay {
  scrollbar-width: thin;
  scrollbar-color: var(--middleGrey) var(--lightGrey);
}

/* Scrollbar style (Chrome, Edge) **/
.power-component-details-overlay::-webkit-scrollbar-track {
  background-color: var(--lightGrey);
}
.power-component-details-overlay::-webkit-scrollbar {
  width: 5px;
  background-color: var(--lightGrey);
}
.power-component-details-overlay::-webkit-scrollbar-thumb {
  background-color: var(--middleGrey);
}

/* Fixed column widths to avoid jitter when value length changes */
.power-component-details-overlay > table td:nth-child(1) {
  width: 15%;
}
.power-component-details-overlay > table td:nth-child(2) {
  width: 55%;
}
.power-component-details-overlay > table td:nth-child(3) {
  width: 30%;
}