/* TV screen renderer styles. Keep simple: old smart TV browsers. */
html, body {
  margin: 0; padding: 0; width: 100%; height: 100%;
  background: #000; color: #fff;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  overflow: hidden;
  cursor: none;
  -webkit-user-select: none; user-select: none;
}
body.preview { cursor: default; }

#root {
  position: absolute; left: 0; top: 0; right: 0; bottom: 0;
  display: -webkit-grid; display: grid;
  -webkit-box-sizing: border-box; box-sizing: border-box;
}

.box {
  position: relative; overflow: hidden;
  min-width: 0; min-height: 0;
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-flex-direction: column; flex-direction: column;
}
.box-title {
  -webkit-flex: 0 0 auto; flex: 0 0 auto;
  padding: 8px 16px; font-size: 22px; font-weight: 600; letter-spacing: .02em;
  background: rgba(255,255,255,.08); color: #fff;
}
.box-body {
  position: relative; -webkit-flex: 1 1 auto; flex: 1 1 auto; min-height: 0; overflow: hidden;
}
.box-body > .fill, .box-body > iframe, .box-body > img, .box-body > video, .box-body > canvas {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 0;
}

/* website */
.box-body > iframe { background: #fff; }

/* image slideshow */
.slide { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0;
  -webkit-transition: opacity .8s; transition: opacity .8s; }
.slide.on { opacity: 1; }
.slide img { width: 100%; height: 100%; display: block; }

/* excel */
.excel-wrap { position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; }
.excel-wrap.dark { background: #111; color: #f2f2f2; }
.excel-wrap.light { background: #fff; color: #111; }
.excel-wrap table { border-collapse: collapse; width: 100%; table-layout: auto; }
.excel-wrap td, .excel-wrap th { padding: .25em .55em; white-space: nowrap; vertical-align: middle;
  text-align: left; line-height: 1.25; }
.excel-wrap.grid.dark td, .excel-wrap.grid.dark th { border: 1px solid #3a3a3a; }
.excel-wrap.grid.light td, .excel-wrap.grid.light th { border: 1px solid #cfcfcf; }
.excel-wrap tr.hdr td, .excel-wrap tr.hdr th { font-weight: 700; position: -webkit-sticky; position: sticky; z-index: 2; }
.excel-wrap.dark tr.hdr td, .excel-wrap.dark tr.hdr th { background: #262626; }
.excel-wrap.light tr.hdr td, .excel-wrap.light tr.hdr th { background: #e8e8e8; }
.excel-wrap.dark tr:nth-child(even) td { background: rgba(255,255,255,.03); }
.excel-wrap.light tr:nth-child(even) td { background: rgba(0,0,0,.03); }

/* text */
.textbox { position: absolute; left: 0; top: 0; right: 0; bottom: 0; padding: 4%;
  -webkit-box-sizing: border-box; box-sizing: border-box;
  display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column;
  word-wrap: break-word; overflow-wrap: break-word; line-height: 1.3; }
.textbox.va-top { -webkit-justify-content: flex-start; justify-content: flex-start; }
.textbox.va-middle { -webkit-justify-content: center; justify-content: center; }
.textbox.va-bottom { -webkit-justify-content: flex-end; justify-content: flex-end; }
.ticker { position: absolute; left: 0; right: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%);
  white-space: nowrap; overflow: hidden; }
.ticker span { display: inline-block; padding-left: 100%; -webkit-animation: ticker linear infinite; animation: ticker linear infinite; }
@-webkit-keyframes ticker { 0% { -webkit-transform: translateX(0); } 100% { -webkit-transform: translateX(-100%); } }
@keyframes ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }

/* clock */
.clock { position: absolute; left: 0; top: 0; right: 0; bottom: 0;
  display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column;
  -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center;
  text-align: center; }
.clock .time { font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.clock .ampm { font-size: .35em; font-weight: 500; margin-left: .15em; vertical-align: baseline; }
.clock .date { margin-top: .4em; opacity: .8; font-weight: 500; }

/* misc */
.msg { position: absolute; left: 0; top: 0; right: 0; bottom: 0;
  display: -webkit-box; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center;
  -webkit-justify-content: center; justify-content: center; text-align: center;
  color: #888; font-size: 20px; padding: 20px; -webkit-box-sizing: border-box; box-sizing: border-box; }
.msg.err { color: #e57373; }
.empty-hint { color: #444; font-size: 18px; }

.notfound { position: absolute; left: 0; top: 0; right: 0; bottom: 0;
  display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column;
  -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center;
  text-align: center; font-size: 22px; cursor: default; }
.notfound a { color: #7cc4ff; }

.status-dot { position: absolute; right: 6px; bottom: 6px; width: 8px; height: 8px; border-radius: 50%;
  background: #e53935; opacity: 0; -webkit-transition: opacity .5s; transition: opacity .5s; z-index: 99; }
.status-dot.show { opacity: .9; }