:root {
  /* // UNUSED: Collapsed rows are just hidden.
   * --compare-collapsed-color: #F60;
   * --compare-collapsed-bg-color: rgba(255,102,0,.1);
   */
  --compare-selected-color: var(--layout-theme-primary-color-dark1); /* #1EAEDB; */
  --compare-selected-bg-color05: rgb(30 174 219 / 5%);
  --compare-selected-bg-color1: rgb(30 174 219 / 10%);
  --compare-selected-bg-color2: rgb(30 174 219 / 20%);
  --compare-selected-bg-color3: rgb(30 174 219 / 30%);
  --compare-selected-bg-color4: rgb(30 174 219 / 40%);
  --compare-selected-bg-color5: rgb(30 174 219 / 50%);
  --compare-animation-time: var(--common-animation-time);
  --compare-selected-animation-time: 3s;
  --compare-td-padding-h-at-edges: 8px;
  --compare-td-padding-h: 4px;
  --compare-td-padding-v: 8px;
}

.compare .compare-tables {
  width: 100%;
}

.compare .compare-tables > .column {
  position: relative;
}

.compare .compare-tables > .column + .column {
  /* Tables spacing */
  margin-left: 15px;
}

.compare .compare-tables > .column > table {
  border: 0;
  table-layout: fixed;
  width: 100%;
  border-style: solid;

  /* word-break: break-all; */
}

/* Table rows basic styles... */
.compare-table tbody tr {
  transition: all var(--compare-animation-time) ease;
  cursor: pointer; /* All rows are always interactive. */
}

.compare-table tbody tr:hover {
  background-color: var(--compare-selected-bg-color1);
}

/* Table cells basic styles... */
.compare-table thead th,
.compare-table tbody td {
  padding: var(--compare-td-padding-v) var(--compare-td-padding-h);
  line-height: 1.3;
  overflow: hidden;
}

.compare-table thead th > div,
.compare-table tbody td > div {
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  position: relative;
}

.compare-table tbody td a {
  text-decoration: none;
}

.compare-table tbody td a:hover {
  text-decoration: underline;
}

/* Particular columns width */
.compare-table .cell-actions {
  width: 3.5em;
  white-space: nowrap;
}
.compare-table .cell-amount {
  width: 5.5em;
  white-space: nowrap;
}
.compare-table .cell-name {
  width: 50%;
  white-space: wrap;
}
.compare-table .cell-location {
  width: 30%;
}
.compare-table .cell-unit {
  width: 2em;
}

/* Name cell */
.compare-table .cell-name {
  white-space: wrap;

  /* word-break: break-all; */
}

/* Action cell icons */
.compare-table td.cell-actions {
  color: #e5e5e5;
}

.compare-table td.cell-actions a {
  transition: all var(--compare-animation-time) ease;
  opacity: 0.4;
}

.compare-table td.cell-actions a:hover {
  opacity: 1;
}

/* First and last columns fixups... */
.compare-table th:first-child,
.compare-table td:first-child {
  padding-left: var(--compare-td-padding-h-at-edges);
}

.compare-table th:last-child,
.compare-table td:last-child {
  /* padding-right: var(--compare-td-padding-h-at-edges); */
}

/* Selected row... */

@keyframes compare-table-selected-animation {
  0% {
    background-color: var(--compare-selected-bg-color3);
    box-shadow:
      0 0 6px var(--compare-selected-bg-color5),
      inset 0 0 6px var(--compare-selected-bg-color5);
  }

  50% {
    background-color: var(--compare-selected-bg-color05);
    box-shadow:
      0 0 2px var(--compare-selected-bg-color5),
      inset 0 0 2px var(--compare-selected-bg-color5);
  }

  100% {
    background-color: var(--compare-selected-bg-color3);
    box-shadow:
      0 0 6px var(--compare-selected-bg-color5),
      inset 0 0 6px var(--compare-selected-bg-color5);
  }
}

.compare-table tr.selected {
  box-shadow:
    0 0 4px var(--compare-selected-bg-color5),
    inset 0 0 2px var(--compare-selected-bg-color5);
  background-color: var(--compare-selected-bg-color1);
  animation: compare-table-selected-animation var(--compare-selected-animation-time) infinite;
  animation-timing-function: ease-in-out;
}

.compare-table tr.selected td {
  /* Remove nested td borders */
  border-color: transparent;
}

/* Collapsed row... */

.compare-table tr.collapsed {
  /* // UNUSED: Collapsed rows are just hidden.
   * box-shadow: 0 0 4px var(--compare-collapsed-color), inset 0 0 2px var(--compare-collapsed-color);
   * background-color: var(--compare-collapsed-bg-color);
   */
  display: none;
}

.compare-table tr.collapsed-handler {
  /* box-shadow: 0 0 4px var(--compare-selected-bg-color5), inset 0 0 4px var(--compare-selected-bg-color5); */
  cursor: pointer;
  background: var(--compare-selected-bg-color1);
  background: repeating-linear-gradient(
    45deg,
    var(--compare-selected-bg-color2),
    var(--compare-selected-bg-color2) 10px,
    var(--compare-selected-bg-color1) 10px,
    var(--compare-selected-bg-color1) 20px
  );
}

.compare-table tr.collapsed-handler td {
  padding: 0;
  font-size: 15px;
  line-height: 1;
  transition: all var(--compare-animation-time) ease;
}

.compare-table tr.collapsed-handler td:hover {
  background-color: var(--compare-selected-bg-color2);
}

/* Modal customizations */
.modal#modal-number-editor .modal-content {
  display: flex;
  overflow: hidden;
  align-items: stretch;
  align-content: stretch;
}
.modal#modal-number-editor #modal-content-wrapper {
  display: flex;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 100%;
  /* padding: 20px 0; */
}

.modal#modal-number-editor #modal-content-wrapper > div {
  overflow: auto;
  /* padding: 0 20px; */
  padding: 20px;
  flex: 1;
  width: 50%;
}
.modal#modal-number-editor #modal-content-wrapper > div:first-child {
}

/* Modal table */
.modal#modal-number-editor .modal-table {
  border: 0;
  table-layout: fixed;
  width: 100%;
  border-style: solid;
}
.modal#modal-number-editor .modal-table tbody tr {
  transition: all var(--compare-animation-time) ease;
}
.modal#modal-number-editor .modal-table tbody tr:focus,
.modal#modal-number-editor .modal-table tbody tr:hover {
  background-color: var(--compare-selected-bg-color1);
  cursor: pointer;
}
.modal#modal-number-editor .modal-table th,
.modal#modal-number-editor .modal-table td {
  padding: var(--compare-td-padding-v) var(--compare-td-padding-h);
  line-height: 1.3;
  overflow: hidden;
}
.modal#modal-number-editor .modal-table tbody td > div {
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  position: relative;
}
/* Adjust widths */
.modal#modal-number-editor .modal-table th:last-child {
  width: 50px;
}
.modal#modal-number-editor .modal-table th:first-child {
  width: 80px;
}
/* Adjust content styles */
.modal#modal-number-editor .strong {
  margin: 5px 0;
}
