intersection.css

* {
    cursor: inherit;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

body {
    cursor: default;
    border: none;
    overflow: hidden;
    margin: 0px 0px 0px 0px;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    pointer-events: none;
    background-color: white;
}

circle, line {
    pointer-events: none;
}

div {
    position: absolute;
}

div.body.select_outputs {
    background-color: #e0e0e0;
}


svg {
    position: absolute;
    pointer-events: all;
}

svg.button {
    stroke-height: 10%;
    opacity: 0.2;
    fill: #40e080;
    stroke: #208040;
}

svg.button.active {
    opacity: 1;
}


svg.button.active:hover {
    fill: #80ffb0;
    stroke: #40e080;
    cursor: pointer;
}

svg.canvas {
	position: absolute;
}

svg.stamp {
    /* background-color: white;*/
}

div.workstamp {
    background-color: #79bcbc;
    opacity: 0.95;
}

div.workstamp.highlighted {
    background-color: #99dcdc;
}

div.activestamp {
    background: none;
}

div.toolstamp {
    background-color: #bcbc79;
    opacity: 0.95;
}

div.toolstamp.highlighted {
    background-color: #dcdc99;
}


div.activestamp {
    background: none;
}


div.ruler {
    background-color: #40e080;
    opacity: 0.95;
}

.line,.circle {
    fill: none;
    stroke: black;
    /* stroke-width: 0.3%; */
    position: absolute;
}

.line.highlighted, .circle.highlighted, .line.output.highlighted, .circle.output.highlighted {
    stroke: red;
}

.line.sparkly, .circle.sparkly {
    stroke: #ffff80;
}

/*
.line.output, .circle.output {
    stroke-width: 0.6%;
}
*/


.hidden {
    visibility: hidden;
}


.controlpoint {
    stroke: black;
    /* stroke-width: 0.3%; */
    fill: #0040ff;
    position: absolute;
}

.controlpoint.highlighted {
    fill: red;
}

.controlpoint.snappy {
    fill: #00d040;
}

.controlpoint.sparkly {
    
    -webkit-animation: cp_sparkle 1.3s linear infinite;
       -moz-animation: cp_sparkle 1.3s linear infinite;
            animation: cp_sparkle 1.3s linear infinite;
}

@-webkit-keyframes cp_sparkle {
    0%   { fill: #8080e0; }
    50%  { fill: white;   }
    100% { fill: #8080e0; }
}

@-moz-keyframes cp_sparkle {
    0%   { fill: #8080e0; }
    50%  { fill: white;   }
    100% { fill: #8080e0; }
}

@keyframes cp_sparkle {
    0%   { fill: #8080e0; }
    50%  { fill: white;   }
    100% { fill: #8080e0; }
}


.intersectionpoint {
    pointer-events: none;
    stroke: black;
    /* stroke-width: 0.2%; */
    fill: white;
}

.intersectionpoint.highlighted,.intersectionpoint.highlighted.output {
    fill: red;
}

.intersectionpoint.output {
    fill: #00d040;
}


.intersectionpoint.sparkly {
    
    -webkit-animation: isp_sparkle 1.3s linear infinite;
       -moz-animation: isp_sparkle 1.3s linear infinite;
            animation: isp_sparkle 1.3s linear infinite;
}


@-webkit-keyframes isp_sparkle {
    0%   { fill: red; }
    50%  { fill: white;   }
    100% { fill: red; }
}

@-moz-keyframes isp_sparkle {
    0%   { fill: red; }
    50%  { fill: white;   }
    100% { fill: red; }
}

@keyframes isp_sparkle {
    0%   { fill: red; }
    50%  { fill: white;   }
    100% { fill: red; }
}