/* css/rack.css */
:root {
  --nbx-rack-bg: #e9ecef;
  --nbx-rack-border: #000;
  --nbx-rack-slot-bg: #e9ecef;
  --nbx-rack-slot-border: #adb5bd;
  --nbx-rack-slot-hover-bg: #ced4da;
  --nbx-rack-link-color: #0d6efd;
  --nbx-rack-unit-color: #6c757d ;
}
:root[data-netbox-color-mode=dark] {
  --nbx-rack-bg: #343a40;
  --nbx-rack-border: #6c757d;
  --nbx-rack-slot-bg: #343a40;
  --nbx-rack-slot-border: #495057;
  --nbx-rack-slot-hover-bg: #212529;
  --nbx-rack-link-color: #9ec5fe;
  --nbx-rack-unit-color: #6c757d ;
}
.device_rear {
  background:
    repeating-linear-gradient(
      45deg,
      #f7f7f7,
      #f7f7f7 12.5px,
      #ffc0c0 12.5px,
      #ffc0c0 25px);
}
ul.unit_numbers {
  list-style-type: none;
  font-size: 0.7em;
  color: var(--nbx-rack-unit-color);
  float: left;
}
ul.unit_numbers li {
  width: 20px;
  margin-bottom: 2px;
  line-height: 20px;
}
.rack {
  width: 217px;
  background:
    var(--nbx-rack-slot-bg) repeating-linear-gradient(
      to bottom,
      var(--nbx-rack-slot-bg) 0px,
      var(--nbx-rack-slot-bg) 20px,
      var(--nbx-rack-slot-border) 20px,
      var(--nbx-rack-slot-border) 22px);
  border: 2px solid var(--nbx-rack-unit-color);
  float: left;
}
.grid-stack > .grid-stack-item[gs-w="2"] {
  width: 100%;
}
.grid-stack-item > .grid-stack-item-content {
  border: 1px solid var(--nbx-rack-slot-border);
  border-radius: 3px;
}
.grid-stack-placeholder > .placeholder-content {
  border: 1px dashed #8a8a8a;
  background-color: #f3f3f329;
}
