.cell { z-index:1 }
.cell:hover { z-index:2 }
.extra-row { z-index:3 }
.tooltip, .tooltip1, .tooltip2, .tooltip3, .switch::after { z-index:10 }

.cell { background:var(--bg-card)  }
.cell:hover { background:var(--bg); box-shadow:inset 0 0 0 2px var(--th), 0 10px 15px -3px rgba(0, 0, 0, 0.1) }
.cell small { color:var(--tx-muted) }
.tooltip, .tooltip1, .tooltip2, .tooltip3 { background:var(--th); color:var(--bg); box-shadow:0 10px 15px -3px rgba(0, 0, 0, 0.3) }
.extra-row { background:var(--bg); color:var(--tx) }

space { display:grid; grid-template-columns:repeat(14, 1fr); grid-auto-rows:1fr; height:100%; width:100%; gap:0; overflow-y:auto }
space.is-list { grid-template-columns:repeat(4, 1fr); grid-auto-rows:min-content }
space.is-list .cell { padding:20px; border-bottom:1px solid var(--bd); border-right:1px solid var(--bd); min-height:80px }

.cell { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;  transition:var(--transition); min-width:0; min-height:0; user-select:none; cursor:pointer }
.cell span { font-weight:bold; font-size:11px }
.cell small { font-size:9px }
.cell:hover .tooltip, .cell:hover .tooltip1, .cell:hover .tooltip2, .cell:hover .tooltip3 { display:block !important }
.tooltip, .tooltip1, .tooltip2, .tooltip3 { position:absolute; display:none; padding:6px 12px; border-radius:6px; font-size:16px; white-space:nowrap; transform:translateX(-50%) translateY(-8px); pointer-events:none }
.tooltip { bottom:70%; left:100% }
.tooltip1 { top:100%; left:100% }
.tooltip2 { top:100%; left:0% }
.tooltip3 { bottom:70%; left:0% }
.extra-row { display:flex; grid-column:1 / -1; grid-row:span 2; padding:0 15px; font-size:16px; align-items:center; min-height:50px; margin:2px 0 }

@media (max-width:992px) { 
    space { grid-template-columns:repeat(7, 1fr) } 
    space.is-list { grid-template-columns:repeat(4, 1fr) } 
}
@media (max-width:784px) { space.is-list { grid-template-columns:repeat(2, 1fr) } }
@media (max-width:576px) {
    space { grid-template-columns:repeat(4, 1fr) }
    space.is-list { grid-template-columns:1fr } 
    .extra-row { grid-row:span 3; font-size:12px; padding:0 10px }
}