.bubbleNetwork{position:fixed;width:50px;height:50px;overflow:hidden;z-index:100000;background:red;bottom:70px;right:10px;border-radius:100%;display:flex;align-items:center;justify-content:center;cursor:pointer;-moz-user-select:none;user-select:none;-webkit-user-select:none;transition:right .3s ease,width .3s ease,height .5s ease;&.inGame{right:calc(50% - (50px / 2));bottom:75px;&.off{right:calc(50% - (90px / 2));bottom:75px}}&.off{width:90px;height:90px;.no-wifi{display:flex}}.no-wifi{position:absolute;width:100%;height:100%;display:none;align-items:center;justify-content:center;border-radius:100%;background:inherit;svg{width:40px;height:auo;fill:var(--whiteColor)}}&.good{background:linear-gradient(135deg,#38d0b4,#45d99b);box-shadow:0 0 20px #38d0b4d7;&:before{border:1px solid #3dd7ab}&:after{background:linear-gradient(135deg,#38d0b4d7,#45d99bd7)}}&.medium{background:linear-gradient(135deg,#fdba63,#fd8e63);box-shadow:0 0 20px #fdba63;&:before{border:1px solid #ffb37e}&:after{background:linear-gradient(135deg,#fdba63d7,#fd8e63d7)}}&.bad,&.off{background:linear-gradient(135deg,#ff7263,#ff639e);box-shadow:0 0 20px #ff7263;&:before{border:1px solid #ff7373}&:after{background:linear-gradient(135deg,#ff7263d7,#ff639ed7)}}&:before{content:"";position:absolute;width:80%;height:80%;background:rgba(0,0,0,.1);border-radius:100%;z-index:-1;border:1px solid rgba(0,0,0,.01);box-shadow:inset 0 0 18px rgba(0,0,0,.11)}.content-network{line-height:100%;span{text-align:center;display:block;line-height:100%;color:var(--whiteColor);font-family:Pally,sans-serif;&:first-child{font-size:10px;font-weight:500}&:last-child{font-size:8px}}}}