.pavement-visual {height: 100%;-webkit-user-select: none;user-select: none;overflow: hidden;background: var(--gray-100); } .pavement-visual .pavement-visual-holder {position: absolute;inset: 0;width: 100%;height: 100%;display: flex;align-items: center;justify-content: center; } .pavement-visual .pavement-visual-content {position: absolute; } .pavement-visual .canvas {position: absolute; } .pavement-visual .canvas.canvas-scene {opacity: 0; } .pavement-visual .canvas.canvas-clip {display: none; } .pavement-visual .pavement-points {width: 0;height: 0; } .pavement-visual .pavement-point {position: absolute;border-radius: 50%;overflow: hidden; } .pavement-visual .pavement-point.draggable {cursor: grab; } .pavement-visual .pavement-point.draggable.drag {cursor: grabbing; } .pavement-visual .pavement-point .pavement-point-color {fill: var(--primary); } .pavement-visual .pavement-point:hover .pavement-point-color {fill: var(--warning); } .pavement-visual .pavement-point.drag .pavement-point-color {fill: var(--success); } .pavement-visual.remove-point .pavement-point {cursor: pointer; } .add-point-overlay {position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 200;cursor: crosshair; } .remove-point-overlay {position: absolute;top: 0;left: 0;width: 100%;height: 100%;cursor: no-drop; } .pavement-visual-scale {position: absolute;bottom: calc(100% + 0.3571428571rem);background: var(--primary);width: 100%;color: white;text-align: center;padding: 0.2857142857rem; }