#connection-status{position:fixed;bottom:-100%;left:auto;width:100%;text-align:center;font-size:var(--font-size);color:#fff;transition:bottom .5s ease;z-index:-999;pointer-events:none}#connection-status.active{bottom:0;z-index:999;pointer-events:all}#connection-status>*{padding:.75rem}.connection-status--online{background-color:#28a470}.connection-status--offline{background-color:#ae1e1e}.connection-backdrop{background:rgba(0,0,0,.25);height:100%;width:100%;position:fixed;top:0;right:0;bottom:0;left:0;opacity:0;z-index:-998;transition:opacity .25s ease}.connection-backdrop.active{opacity:1;z-index:998}