(node) util.print is deprecated. Use console.log instead.
html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
.grow-1 {
  flex-grow: 1;
}
.grow-2 {
  flex-grow: 2;
}
.grow-3 {
  flex-grow: 3;
}
.grow-4 {
  flex-grow: 4;
}
body,
textarea,
select,
input,
button {
  font-family: 'Lato', sans-serif;
  background: #0a0a0a;
  color: #ffffff;
}
input,
textarea {
  color: #0a0a0a;
}
input.autofill,
textarea.autofill {
  color: #b4b4b4;
}
a {
  color: #009fe3;
  text-decoration: none;
}
a:hover,
a:active,
a:focus {
  color: #17baff;
}
.full-width {
  width: 100%;
}
.btn {
  padding: 6px 10px;
  background-color: #b4b4b4;
  color: #ffffff;
  border-radius: 8px;
  cursor: pointer;
}
.btn:hover,
.btn:active,
.btn:focus {
  background-color: #cecece;
  color: #ffffff;
}
.btn.highlight {
  background-color: #b4b4e6;
}
.btn.highlight:hover {
  background-color: #dadaf3;
}
.btn.error {
  background-color: #e6b4b4;
}
.btn.success {
  background-color: #b4e6b4;
}
.container {
  min-height: 100%;
  max-width: 800px;
  margin: 0 auto;
}
.sidebar,
.content {
  display: inline-block;
  vertical-align: top;
}
.box-grid .box {
  padding: 20px;
  margin: 20px;
  width: 300px;
  overflow: hidden;
  background: #dcdcdc;
  color: #0a0a0a;
  display: inline-block;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  border: 8px solid #ffffff;
}
.box-grid .box .box-name {
  font-weight: bold;
}
.box-grid .box.connection-off {
  border-color: #e6b4b4;
}
.box-grid .box.connection-on {
  border-color: #b4e6b4;
}
.box-grid .box .connectivity-dot {
  width: 15px;
  height: 15px;
  margin: 20px;
  float: right;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  background-color: #0a0a0a;
}
.box-grid .box[data-idle30="150"] .connectivity-dot,
.box-grid .box[data-idle30="180"] .connectivity-dot {
  background: #e6b4b4;
}
.box-grid .box.inactive .connectivity-dot {
  background: #b4b4b4;
}
.box-grid .box.inactive.offline .connectivity-dot {
  background: #b4b4e6;
}
.box-grid .box[data-idle30="90"] .connectivity-dot,
.box-grid .box[data-idle30="120"] .connectivity-dot {
  background: yellow;
}
.box-grid .box[data-idle30="0"] .connectivity-dot,
.box-grid .box[data-idle30="30"] .connectivity-dot,
.box-grid .box[data-idle30="60"] .connectivity-dot {
  background: #b4e6b4;
}
.box-grid .box.offline .connectivity-dot {
  background: blue;
}