*{
  box-sizing:border-box;
}

body{
  margin:0;
  min-height:100vh;
  background:#030303;
  color:#fff;
  font-family:Arial, Helvetica, sans-serif;
}

.page{
  width:100%;
  min-height:100vh;
  padding:14px;
  background:
    radial-gradient(circle at top, rgba(20,20,20,.9), transparent 260px),
    #030303;
}

.monitor{
  width:min(720px,100%);
  margin:auto;
  border:1px solid #1d1d1d;
  background:#020202;
  box-shadow:0 0 0 1px #111 inset;
}

.top-bar{
  height:44px;
  border-bottom:1px solid #1f1f1f;
  display:flex;
  align-items:center;
  justify-content:center;
}

.hospital{
  color:#ddd;
  border:1px solid #202020;
  background:#0b0b0b;
  padding:6px 10px;
  font-size:15px;
  white-space:nowrap;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
}

.toolbar{
  padding:16px;
  border-bottom:1px solid #191919;
}

.search-box{
  display:flex;
  align-items:center;
  height:48px;
  border:1px solid #252525;
  background:#050505;
  margin-bottom:14px;
}

.icon{
  width:76px;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:42px;
  color:#e3e3e3;
  background:#3a3a3a;
  border-right:1px solid #252525;
  line-height:1;
}

.search-box input{
  flex:1;
  height:100%;
  border:0;
  outline:0;
  background:#030303;
  color:#fff;
  font-size:18px;
  padding:0 14px;
}

.actions{
  width:100%;
  height:58px;
  border:1px solid #323232;
  border-radius:4px;
  background:#3b3b3b;
  color:#f1f1f1;
  font-size:22px;
  cursor:pointer;
}

.data-table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
}

.data-table th{
  color:#62c7bd;
  font-size:24px;
  font-weight:700;
  padding:18px 10px;
  height:86px;
  border:1px solid #1c1c1c;
  text-align:center;
}

.data-table td{
  height:108px;
  border:1px solid #171717;
  padding:12px 24px;
  font-size:25px;
  font-weight:700;
  letter-spacing:.2px;
  vertical-align:middle;
  animation:fadeIn .35s ease;
}

.area-blue{ color:#4169e1; }
.area-red{ color:#ff1717; }
.area-yellow{ color:#ffff18; }
.area-white{ color:#f3f3f3; }

.counter{
  position:fixed;
  right:14px;
  bottom:12px;
  color:#5f5f5f;
  font-size:12px;
}

@keyframes fadeIn{
  from{ opacity:.15; transform:translateY(5px); }
  to{ opacity:1; transform:translateY(0); }
}

@media(max-width:520px){
  .page{ padding:8px; }
  .data-table th{ font-size:22px; }
  .data-table td{ font-size:23px; height:112px; }
  .actions{ height:54px; }
}