div.location{border-bottom:rgba(255,255,255,.5) 1px solid;padding:1rem .5rem;display:grid;grid-template-columns:1fr repeat(4,auto);grid-template-areas:"name     status  speed   ping    toggle" "graphs   graphs  graphs  graphs  graphs";column-gap:1rem;line-height:1}div.location:first-of-type{border-top:rgba(255,255,255,.5) 1px solid}div.location h2{padding-right:.5em}div.location>div{display:flex;align-items:center;justify-content:center}div.location .location-info-type{margin-right:.5em}div.location .status{grid-area:status}div.location .status .status-value{display:inline-block;font-size:.8rem;padding:.2rem .3rem;border-radius:.2rem;background:rgba(255,255,255,.1)}div.location .status .status-value[status=up]{background:#2fcc66;color:#000}div.location .status .status-value[status=down]{background:#e74c3c}div.location .speed{grid-area:speed}div.location .ping{grid-area:ping}div.location .toggle{grid-area:toggle}div.location .toggle button{background:none;color:inherit;border:none;cursor:pointer}div.location .toggle button svg{fill:currentColor;height:1rem}div.location .graphs{display:none;grid-area:graphs}div.location[expanded=true]{row-gap:1rem}div.location[expanded=true] .toggle button{transform:scaleY(-1)}div.location[expanded=true] .graphs{display:block}@media screen and (max-width: 800px){div.location{grid-template-columns:repeat(4,auto);grid-template-areas:"name     name    name    toggle" "status   speed    ping   _" "graphs   graphs  graphs  graphs";row-gap:1rem}div.location h2{grid-area:name}}