@font-face { font-family: "Share Tech Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/share-tech-mono.woff") format("woff"); }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #000; -webkit-text-size-adjust: 100%; }
body { color: #ededeb; font-family: "Share Tech Mono", Menlo, Monaco, "Courier New", monospace; -webkit-font-smoothing: auto; }
button { font-family: inherit; }
.deck { position: relative; width: 100%; height: 100%; min-width: 768px; min-height: 560px; overflow: hidden; padding: 24px 16px 0; background: #000; }
.overview-strip { height: 62px; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: space-between; justify-content: space-between; }
.overview-title { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; color: #8a8a85; font-size: 20px; letter-spacing: 1px; }
.overview-title span { margin: 0 10px; color: #c39a48; font-size: 24px; }
.overview-title strong { color: #ededeb; font-weight: 400; }
dl { margin: 0; display: -webkit-flex; display: flex; }
dl div { min-width: 108px; padding: 0 16px; border-left: 1px solid #3b3b38; }
dt { color: #73736f; font-size: 8px; letter-spacing: 1px; }
dd { margin: 5px 0 0; color: #d9d9d6; font-size: 14px; }
dd:before { content: "[ "; color: #c39a48; }
dd:after { content: " ]"; color: #c39a48; }
.systems-viewport { position: relative; height: calc(100% - 108px); overflow: hidden; border-top: 1px solid #353532; border-bottom: 1px solid #353532; touch-action: pan-y; }
.pages-track { position: absolute; left: 0; top: 0; width: 100%; height: 100%; -webkit-transition: -webkit-transform .34s ease-out; transition: transform .34s ease-out; }
.systems-page { position: absolute; top: 0; width: 100%; height: 100%; padding: 4px 0; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-content: stretch; align-content: stretch; }
.system-card { position: relative; margin: 4px; overflow: hidden; border: 0; background: transparent; box-shadow: none; }
.card-count-1 .system-card { width: calc(100% - 8px); height: calc(100% - 8px); }
.card-count-2 .system-card { width: calc(50% - 8px); height: calc(100% - 8px); }
.card-count-3 .system-card, .card-count-4 .system-card { width: calc(50% - 8px); height: calc(50% - 8px); }
.card-count-5 .system-card, .card-count-6 .system-card { width: calc(33.333% - 8px); height: calc(50% - 8px); }
.card-count-7 .system-card, .card-count-8 .system-card { width: calc(25% - 8px); height: calc(50% - 8px); }
.card-head { height: 46px; padding: 0 12px; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: space-between; justify-content: space-between; border-bottom: 1px solid #343431; }
.card-name { min-width: 0; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; }
.card-index { margin-right: 8px; color: #c39a48; font-size: 10px; }
.card-name strong { overflow: hidden; color: #f2f2ef; font-size: 15px; font-weight: 400; letter-spacing: 1px; text-overflow: ellipsis; white-space: nowrap; }
.card-status { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; color: #777773; font-size: 9px; letter-spacing: 1px; }
.status-dot { width: 6px; height: 6px; margin-right: 6px; background: #666662; }
.status-dot.up { background: #c39a48; box-shadow: 0 0 8px rgba(195,154,72,.45); -webkit-animation: lamp-blink 1.15s steps(2,end) infinite; animation: lamp-blink 1.15s steps(2,end) infinite; }
.system-card:nth-child(2n) .status-dot.up { -webkit-animation-delay: -.38s; animation-delay: -.38s; }
.system-card:nth-child(3n) .status-dot.up { -webkit-animation-delay: -.72s; animation-delay: -.72s; }
.metrics { height: 70px; display: -webkit-flex; display: flex; border-bottom: 1px solid #30302d; }
.metric { -webkit-flex: 1; flex: 1; min-width: 0; padding: 10px 3px 7px; text-align: center; border-right: 1px solid #2c2c29; }
.metric:last-child { border-right: 0; }
.metric span { display: block; color: #74746f; font-size: 9px; letter-spacing: 1px; }
.metric strong { display: block; margin-top: 7px; color: #dededb; font-size: 18px; font-weight: 400; white-space: nowrap; }
.metric.cpu strong { color: #c39a48; }
.metric.memory strong { color: #ecece9; }
.metric.disk strong { color: #b9b9b5; }
.metric.network strong { color: #90908b; font-size: 15px; }
.chart-wrap { position: absolute; left: 0; right: 0; top: 116px; bottom: 36px; padding: 8px 10px 7px; }
.chart-wrap canvas { display: block; width: 100%; height: 100%; }
.card-foot { position: absolute; left: 0; right: 0; bottom: 0; height: 36px; padding: 0 11px; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: space-between; justify-content: space-between; border-top: 1px solid #30302d; color: #858580; font-size: 10px; letter-spacing: 0; }
.card-foot b { color: #bdbdb9; font-weight: 400; }
.card-foot .rate { color: #a8a8a3; }
.empty-state { position: absolute; left: 0; right: 0; top: 45%; text-align: center; color: #74746f; font-size: 12px; letter-spacing: 1px; }
.empty-state span { margin: 0 14px; color: #c39a48; }
.empty-state.hidden { display: none; }
footer { height: 46px; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: space-between; justify-content: space-between; color: #6f6f6a; font-size: 9px; line-height: 1; letter-spacing: 1px; }
.footer-left { width: 34%; height: 100%; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; }
.clock { min-width: 100px; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; text-align: left; line-height: 1; }
.clock strong { color: #eeeeeb; font-size: 9px; font-weight: 400; line-height: 1; letter-spacing: 1px; }
.clock small { margin-left: 9px; color: #777773; font-size: 9px; line-height: 1; letter-spacing: 1px; text-transform: uppercase; }
.connection { margin-left: 16px; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; line-height: 1; white-space: nowrap; }
.connection-light { width: 6px; height: 6px; margin-right: 8px; background: #5d5d59; }
.connection-light.live { background: #c39a48; box-shadow: 0 0 7px rgba(195,154,72,.45); -webkit-animation: connection-blink 1.5s steps(2,end) infinite; animation: connection-blink 1.5s steps(2,end) infinite; }
.connection-light.stale { background: #8f8f89; }
.footer-center { width: 20%; height: 100%; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; }
.history { margin-right: 18px; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; white-space: nowrap; }
.page-navigation { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; }
.page-navigation button { width: 30px; height: 28px; padding: 0; border: 1px solid #3c3c38; background: #0b0b0a; color: #a1a19c; font-size: 18px; line-height: 24px; }
.page-navigation button:disabled { color: #3d3d39; }
.page-dots { display: -webkit-flex; display: flex; margin: 0 8px; }
.page-dot { width: 20px; height: 4px; margin: 0 3px; padding: 0; border: 0; background: #343431; }
.page-dot.active { background: #c39a48; box-shadow: 0 0 6px rgba(195,154,72,.3); }
.refresh { width: 46%; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: flex-end; justify-content: flex-end; line-height: 1; text-align: right; white-space: nowrap; }
.refresh-picker, .history-picker { position: relative; height: 22px; margin: 0 8px; display: inline-block; }
.history-picker { margin-right: 0; }
.refresh-picker > button, .history-picker > button { width: 49px; height: 22px; margin: 0; padding: 0 5px 0 7px; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: space-between; justify-content: space-between; border: 1px solid #3c3c38; border-radius: 0; outline: 0; background: #0b0b0a; color: #c39a48; font-size: 9px; line-height: 20px; }
.refresh-picker > button i, .history-picker > button i { color: #777773; font-size: 8px; font-style: normal; }
.refresh-menu, .history-menu { position: absolute; z-index: 20; right: 0; bottom: 27px; width: 64px; padding: 3px; display: none; border: 1px solid #4a4a45; background: #0a0a09; box-shadow: 0 8px 22px rgba(0,0,0,.65); }
.refresh-menu.open, .history-menu.open { display: block; }
.refresh-menu .refresh-option, .history-menu .history-option { width: 100%; height: 28px; margin: 0; padding: 0; display: block; border: 0; border-bottom: 1px solid #292926; border-radius: 0; background: #0a0a09; color: #8c8c87; font-size: 10px; line-height: 28px; text-align: center; }
.refresh-menu .refresh-option:last-child, .history-menu .history-option:last-child { border-bottom: 0; }
.refresh-menu .refresh-option.active, .history-menu .history-option.active { background: #1a1812; color: #c39a48; }
.refresh-next { min-width: 66px; }
.refresh b { color: #ababa6; font-weight: 400; }
@-webkit-keyframes lamp-blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: .35; box-shadow: none; } }
@keyframes lamp-blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: .35; box-shadow: none; } }
@-webkit-keyframes connection-blink { 0%, 68% { opacity: 1; } 69%, 100% { opacity: .28; box-shadow: none; } }
@keyframes connection-blink { 0%, 68% { opacity: 1; } 69%, 100% { opacity: .28; box-shadow: none; } }
@media (max-height: 650px) {
  .deck { padding-top: 22px; }
  .overview-strip { height: 50px; }
  .systems-viewport { height: calc(100% - 88px); }
  .overview-title { font-size: 16px; }
  dl div { min-width: 90px; padding: 0 10px; }
  .card-head { height: 38px; }
  .card-name strong { font-size: 13px; }
  .metrics { height: 58px; }
  .metric { padding-top: 7px; }
  .metric strong { margin-top: 4px; font-size: 15px; }
  .chart-wrap { top: 96px; bottom: 30px; }
  .card-foot { height: 30px; font-size: 9px; }
  footer { height: 38px; }
}