body{background:#232323;font-family:Raleway;font-size:14px;font-weight:400}#playground{position:relative;width:640px;height:320px;margin:100px auto;background-color:#fff;border-radius:4px;box-shadow:0 2px 10px rgba(0,0,0,.15),0 0 1px rgba(0,0,0,.2);overflow:hidden}#playground .scene{position:absolute;bottom:0;left:0;right:0;top:0}#playground .scene .actor{display:inline-block;position:absolute}#playground .scene .actor .icon,#playground .scene .actor .name{display:block}#playground .scene .actor .name{text-align:center;font-size:.8rem}#playground .scene .actor .sub-icon{position:absolute;top:32px;left:32px;width:32px;height:32px}#playground .player{position:absolute;z-index:1000;opacity:.7;display:flex;align-items:center;justify-content:center;padding:10px;background-color:#000;bottom:0;left:0;right:0;transform:translate(0,50px);transition:.2s ease-in-out}#playground .player .material-icons{font-size:inherit}#playground .player button{position:relative;display:block;padding:2px 6px;font-size:18px;border:none;background-color:transparent;color:#fff;opacity:.8;line-height:18px}#playground .play-button,#playground .scene .packet,#playground .scene .splash,#playground .scene svg{position:absolute;top:0;left:0}#playground .player button:disabled{opacity:.4}#playground .player button:hover:not(:disabled){opacity:1}#playground .player input[type=range]{flex:1 1}#playground .player .duration{color:#fff;margin-right:8px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif}#playground .play-button{width:100%;height:100%;display:flex;justify-content:center;align-items:center;cursor:pointer}#playground .play-button:before{content:'play_arrow';font-family:'Material Icons';font-size:64px;background:rgba(0,0,0,.6);color:#fff;height:64px;width:64px;display:inline-block;line-height:64px;border-radius:50%;transition:.4s ease}#playground .play-button:hover:before{background:rgba(0,0,0,.8)}#playground .scene .splash{display:flex;z-index:-1;right:0;bottom:0;background:#fff;align-items:center}#playground .scene .splash h2{flex:1 1;text-align:center;color:#333;font-weight:400}#playground .scene .packet{border:2px solid #8d6c9f;background:#faefde;font-size:.6rem;padding:2px;color:#333;opacity:0}#playground .scene .bad-packet{background:#ec7798}
#firewall,#internet{top:calc(50% - 32px)}#nids,#user{top:calc(25% - 32px)}#attacker,#server{top:calc(75% - 32px)}#attacker,#sniffer,#user{left:calc(20% - 32px)}#internet,#processor{left:calc(40% - 32px)}#detector,#firewall{left:calc(60% - 32px)}#detector,#logs,#processor,#sniffer{top:calc(30% - 32px)}#alert,#logs,#nids,#server{left:calc(80% - 32px)}#alert,#rules{top:calc(70% - 32px)}.alert,.log,.rule,.signature{margin-top:-10px}#match,#nids-magnify-border{position:absolute;opacity:0}#nids-magnify-border{left:calc(80% - 35px);top:calc(25% - 35px);width:64px;height:64px;display:inline-block;border:2px solid #8d6c9f;border-radius:4px}#nids-magnify{width:600px;height:280px;top:calc(50% - 141px);left:calc(50% - 301px);position:absolute;background:#f7f7f7;border:2px solid #8d6c9f;border-radius:4px;transform-origin:top left;box-shadow:0 0 5px rgba(0,0,0,.2),0 0 1px rgba(0,0,0,.4)}#rules{left:calc(60% - 36px)}.bad-packet,.packet{margin-top:-10px;margin-left:-20px}.signature{margin-left:-25px}.rule{margin-left:-14px}.log{margin-left:-12.5px}.alert{margin-left:-15px}#match{font-size:.8rem;left:calc(60% - 33px);top:calc(30% - 56px)}#match span{line-height:24px;margin-left:2px;vertical-align:top}#match img{width:24px;height:24px}