#devices-blackout {
  display: none;
  position: fixed;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  background: rgba(0, 0, 0, 0.25);
}
#devices-blackout.show {
  display: block;
}
.devices {
  display: none;
  position: fixed;
  left: 0px;
  top: 0px;
  bottom: 0px;
  grid-template-columns: min-content;
  grid-auto-rows: min-content;
  box-shadow: 5px 0px 15px 5px rgba(0, 0, 0, 0.5);
  z-index: 2048;
  background: #555;
}
.devices.show {
  display: grid;
}
.devices .header {
  padding: 16px;
  color: #fff;
  font-weight: bold;
  border-bottom: 2px solid #fff;
  margin-top: 32px;
}
.devices .header:first-child {
  margin-top: 0px;
}
.devices .item {
  color: #fff;
  padding: 16px;
  background: #555;
  border-bottom: 1px solid #888;
}
.devices .item.selected,
.devices .item:hover {
  background: #666;
}
#device-details {
  display: none;
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  align-items: center;
  justify-items: center;
}
#device-details.show {
  display: grid;
}
#device-details .dialog {
  background: #ccc;
  width: 300px;
  padding: 32px;
  box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.25);
}
#device-details .dialog .device-name {
  font-size: 20px;
  font-weight: bold;
  padding-bottom: 8px;
  margin-bottom: 32px;
  border-bottom: 1px solid #888;
}
#device-details .dialog .label {
  font-weight: bold;
  font-size: 16px;
}
#device-details .dialog .fontsize-value,
#device-details .dialog label {
  font-size: 16px;
}