/* What the central adds to admin.css: the state of the devices. */
.dot { display: inline-block; width: .8em; height: .8em; border-radius: 50%; vertical-align: -.05em; }
.dot.on { background: #1e9e4a; box-shadow: 0 0 0 2px #c9f0d6; }
.dot.off { background: #d93636; box-shadow: 0 0 0 2px #f7cccc; }
.dot.idle { background: #a0a4ab; }
h1 .dot { width: .7em; height: .7em; }
.state { font-size: .55em; font-weight: 600; padding: .15em .6em; border-radius: 1em; vertical-align: middle; }
.state.on { background: #1e9e4a; color: #fff; }
.state.off { background: #d93636; color: #fff; }
.state.idle { background: #a0a4ab; color: #fff; }
tr.state-offline td:first-child { box-shadow: inset 3px 0 #d93636; }
tr.state-online td:first-child { box-shadow: inset 3px 0 #1e9e4a; }
.tile-on b { color: #1e9e4a; }
.tile-off b { color: #d93636; }
.alarms { border-left: 4px solid #d93636; }
.alarms ul { margin: 0; padding-left: 1.2em; }
.depth-1 { padding-left: 1.5em; }
.depth-2 { padding-left: 3em; }
.depth-3 { padding-left: 4.5em; }
a.button:hover { filter: brightness(1.1); }
.terminal { height: 70vh; background: #000; padding: 6px; border-radius: 6px; }

/* Activation of a device: the code and the commands, to copy. */
.enroll .codes code { font-size: 1.3rem; letter-spacing: .05em; }
.enroll pre { overflow-x: auto; padding: 10px 12px; border: 1px solid var(--border); border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; }