body{margin:0}.app{width:100%}.box{position:absolute;width:50px;height:50px;background:red;transform:translate(-50%,-50%)}.el{position:relative}.el:after,.el:before{content:"";background:black;border-radius:2px;position:absolute}.el:after{left:30px;width:10px;height:20px;box-shadow:0 50px #000}.el:before{top:30px;width:20px;height:10px;box-shadow:50px 0 #000}.dot{position:absolute;height:15px;width:15px;background-color:#bbb;border-radius:50%;display:inline-block}.circle{position:absolute;height:60px;width:60px;border-radius:50%}.circle:before{position:absolute;content:"";height:calc(100% + 10px);width:calc(100% + 10px);border:4px dashed rgb(255,0,0);border-radius:inherit}.chakra-popover__popper{margin-top:20px!important}.marker{position:absolute;width:20px;height:20px;background-color:red;border-radius:50%}.info-button>svg{margin-left:30px;cursor:pointer}.info-button>svg:hover{color:#00f;transition:.3s}