.map-view{height:480px;margin:0 18px;border-radius:22px;overflow:hidden;position:relative;border:1px solid #dfe3dc;background:#e7ece5}.map-view[hidden]{display:none}#liveMap{width:100%;height:100%;filter:saturate(.78) contrast(.96)}.clover-map-icon{background:transparent;border:0}.clover-map-icon span{display:grid;place-items:center;width:40px;height:40px;border:3px solid #fff;border-radius:50% 50% 50% 8px;transform:rotate(-45deg);background:var(--green);box-shadow:0 5px 14px #173e2d55;font-size:18px}.clover-map-icon span b{transform:rotate(45deg);font-weight:400}.clover-map-icon.live span{background:var(--red)}.my-location{position:absolute;z-index:500;right:14px;bottom:68px;width:44px;height:44px;border:0;border-radius:50%;background:#fff;color:var(--green);font-size:22px;box-shadow:0 4px 14px #0002}.map-legend{position:absolute;z-index:500;left:12px;right:12px;bottom:12px;background:#fffffff0;border-radius:13px;padding:10px 12px;display:flex;justify-content:space-between;gap:8px;font-size:10px;color:var(--ink)}.now-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--red);margin-right:5px}.user-location-dot{width:18px;height:18px;border-radius:50%;background:#2789ff;border:4px solid #fff;box-shadow:0 0 0 3px #2789ff55}
