/* Demo: the media monitor is the whole product, so the hub around it is hidden */
body{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto minmax(0,1fr)!important}

/* Pontiff brand bar */
.pontiff-bar{grid-column:1/-1;grid-row:1;display:flex;align-items:center;gap:14px;padding:10px 18px;background:#0E1622;border-bottom:1px solid #243246;font:500 15px/1 'Instrument Sans',system-ui,sans-serif;color:#C9D8EA;letter-spacing:.01em}
.pontiff-bar a{display:flex}.plogo{height:22px;width:auto;display:block}
.pontiff-bar span{padding-left:14px;border-left:1px solid #2C3C52}
body>aside,body>header,body>footer,#mainC{display:none!important}
#viewW{grid-column:1/-1!important;grid-row:2!important;padding:0!important}
#viewW>.vw{border:0!important;border-radius:0!important;box-shadow:none!important;height:100%}

/* Phones and small tablets: one column, the page scrolls, tiles grow to their content */
@media (max-width:820px){
  html,body{height:auto!important;overflow:auto!important}
  body{display:block!important}
  #viewW,#viewW>.vw,#vBody,#viewW .vb{height:auto!important;overflow:visible!important;display:block!important}
  #vTitle{flex-wrap:wrap!important;gap:8px!important;padding:12px!important}
  #mTabs{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch;scrollbar-width:none;flex:0 0 100%!important;order:3}
  #mTabs button{flex:none!important;white-space:nowrap}
  #vBody{padding:10px!important}
  #viewW .fit{display:flex!important;flex-direction:column!important;gap:10px!important;height:auto!important;overflow:visible!important}
  #viewW .fit>*,#viewW .stack,#viewW .rails{height:auto!important;min-height:0!important;grid-row:auto!important;grid-column:auto!important;display:flex!important;flex-direction:column;gap:10px}
  #viewW .pane{height:auto!important;min-height:0!important;overflow:visible!important}
  #viewW .pane>.pb{height:auto!important;max-height:none!important;overflow:visible!important;flex:none!important}
  #viewW .pane>.ph{flex-wrap:wrap;gap:4px 10px;height:auto!important}
  #viewW .pane>.ph .r{white-space:normal!important;font-size:11.5px}
  #viewW :is(.viz3,.idg3,.cev,.cols2,.cols3,.mixes,.tightmix,.it2wrap,.fr2,.piew){grid-template-columns:1fr!important}
  #viewW :is(.istats,.kpis,.kpis.three,.kpis.four){grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #viewW .istats>div:nth-child(3){border-left:0}
  #viewW .rgt{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body #viewW.plex .it2{grid-template-columns:minmax(0,1fr) 0 76px 0 60px 62px!important;column-gap:6px!important}
  body #viewW.plex .it2>em:not(.ist),body #viewW.plex .it2>.irb,body #viewW.plex .it2>small:nth-child(2),body #viewW.plex .it2>small:nth-child(4){overflow:hidden;min-width:0;width:0;padding:0;font-size:0;height:0}
  #viewW :is(.pair,.acts){grid-template-columns:1fr!important}
  #viewW .flow{grid-template-columns:repeat(2,minmax(0,1fr))!important;row-gap:8px}
  #viewW .cmap{min-height:290px}
  #viewW .mvr{grid-template-columns:1fr!important}
  #viewW .netw .nstl{display:none!important}
  #vBody input{max-width:100%;min-width:0}
  #viewW table{display:block;overflow-x:auto;max-width:100%}
  #viewW svg{max-width:100%;height:auto}
  #viewW .netw,#viewW .nmap{height:70vh!important;min-height:420px}
  #viewW .chart,#viewW .bg{min-height:0}
}