:root {
  --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-selected-animation-time: 3s;
}

/* Collapsed tools (shown only if collapsed rows are extist */
.compare .collapsed-tools {
  display: none;
}
.compare.has-collapsed .collapsed-tools {
  display: block;
}

/* Compare tables layout */
.compare .compare-tables {
  width: 100%;
}
.compare .compare-tables > .column {
  position: relative;
}
.compare .compare-tables > .column + .column {
  /* Tables spacing */
  margin-left: 15px;
}

/* 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;
}

/* Action cell icons */
.compare-table td.cell-actions {
  color: #e5e5e5;
}
.compare-table td.cell-actions a {
  transition: all var(--common-animation-time) ease;
  opacity: 0.4;
}
.compare-table td.cell-actions a:hover {
  opacity: 1;
}

/* Selected row (prepared to collapse)... */
@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 rows and collapsed handers... */
.compare-table tr.collapsed {
  display: none;
}
.compare-table tr.collapsed-handler {
  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(--common-animation-time) ease;
}
.compare-table tr.collapsed-handler td:hover {
  background-color: var(--compare-selected-bg-color2);
}

/* Modal customizations for `set-number-modal`: inner layout with inner scrolls */
.common-modal-content#set-number-modal .common-modal-content-wrapper {
  /* Made wrapper clipping */
  display: flex;
}
.common-modal-content#set-number-modal .common-modal-content-wrapper > div {
  /* Both inner columns are scrollable */
  overflow: auto;
  padding: 20px;
  flex: 1;
  width: 50%;
}
.common-modal-content#set-number-modal .common-modal-content-wrapper > div > *:last-child {
  margin-bottom: 0;
}

/* Adjust 'edit number' modal table columns widths */
.common-modal-content#set-number-modal #edit-number-table th:last-child {
  width: 50px;
}
.common-modal-content#set-number-modal #edit-number-table th:first-child {
  width: 80px;
}
/* Adjust 'edit number' modal content styles */
.common-modal-content#set-number-modal .strong {
  margin: 5px 0;
}

/* Adjust 'proxy-dialog-modal' modal content styles */
.common-modal-content#proxy-dialog-modal #proxy-table th:first-child {
  width: 50%;
}
.common-modal-content#proxy-dialog-modal #proxy-table th:nth-child(2) {
  width: 7em;
}
.common-modal-content#proxy-dialog-modal #proxy-table td:last-child div textarea {
  display: block;
  width: 100%;
}
