*{font-family:sans-serif;margin:0;padding:0;border:none;box-sizing:border-box}body{display:flex;flex-direction:row;height:100vh}menu{width:80px;display:flex;flex-direction:column;border-right:4px solid rgb(56,169,225);background-color:#e9f4ff;.logo{display:block;margin:10px 10px 16px}button{align-self:center;display:block;width:100%;background-color:transparent;cursor:pointer;position:relative;.tooltip{background-color:#000c;color:#fff;position:absolute;right:0;top:50%;transform:translateY(-50%) translate(110%);font-size:1.1em;padding:6px;border-radius:6px;opacity:0;pointer-events:none;transition:opacity .3s;z-index:99}border:1px solid transparent;border-radius:16px;&.active{background-color:#fff;border:1px solid rgb(158,207,231)}&:hover .tooltip{pointer-events:auto;opacity:1}img{margin:8px}}button{width:70%}.spacer{flex:1}}main{flex:1;overflow:hidden;position:relative}canvas{width:100%;height:100%;background-color:#fff}.view_from{width:32px;height:32px;filter:drop-shadow(0 0px 2px rgba(0,0,0,.6));cursor:pointer;opacity:0;pointer-events:none;transition:all 1s;&.visible{pointer-events:auto;opacity:.9}&.left{position:absolute;top:50%;left:8px;transform:translate(-50%,-50%);&.visible{transform:translateY(-50%)}}&.top{position:absolute;top:8px;left:50%;transform:translate(-50%,-50%) rotate(90deg);&.visible{transform:translate(-50%) rotate(90deg)}}&.right{position:absolute;top:50%;right:8px;transform:translate(50%,-50%) rotate(180deg);&.visible{transform:translateY(-50%) rotate(180deg)}}&.bottom{position:absolute;left:50%;bottom:8px;transform:translate(-50%,50%) rotate(270deg);&.visible{transform:translate(-50%) rotate(270deg)}}}.date_time{position:absolute;right:6px;bottom:6px;font-size:11px;color:#fff;text-shadow:0 0 1px rgba(0,0,0,.66)}.coordinate,div.measure{position:absolute;color:#fff;background:#0000004d;border-radius:8px;box-shadow:0 4px 30px #0000001a;backdrop-filter:blur(5px)}div.measure{bottom:60px;left:6px;padding:4px;font-size:14px;min-width:180px;transition:opacity .3s;opacity:0;&.visible{opacity:1}}.coordinate{bottom:6px;left:6px;font-size:12px;padding:4px;min-width:80px;transition:opacity .3s;opacity:0;&.visible{opacity:1}}div.license{display:none;padding:32px;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background-color:#fff;border:4px solid rgb(56,169,225);&.visible{display:block}h2{margin-top:32px;margin-bottom:4px}p{line-height:1.2em}button.close{background-color:transparent;cursor:pointer;position:absolute;top:0;right:0;svg{width:42px;height:42psx}}}div.login{position:absolute;top:40%;width:600px;left:calc(50% - 300px);border:4px solid rgb(56,169,225);background-color:#e9f4ff;padding:16px;display:none;&.visible{display:block}label{display:block;margin-top:6px}input{display:block;margin-top:6px;width:80%;padding:8px;border:1px solid rgb(100 191 232)}button{margin-top:16px;padding:16px;font-size:16px;cursor:pointer;background-color:#fff}}.wait *{cursor:wait!important}