.lattice circle {
    fill: none;
}

.lattice-main line,
.lattice-main circle {
    stroke: #000;
    stroke-width: 1px;
}

.lattice-secondary line,
.lattice-secondary circle {
    stroke-width: 1px;
    stroke: #bbb;
}

.coords,
.feedback {
    display: inline-block;
    vertical-align: top
}

.feedback {
    width: 300px;
text-indent: 0;
padding: 0.5em;
/* min-height: 200px;*/
/*background-color: #fed;*/
}


.hidden {
    display: none;
}

input[type='number'] {
    width: 4em;
}

.point {
    fill: #f00; stroke: none; 
}

[data-type="S"] .point {
    stroke: #00f; stroke-width: 4px; fill: none;
}

.task-coords {
    display: inline-block;
    padding: 0.2em;
    background-color: #def;
    
}

.feedback.correct {
    background-color: #dfd;
   color: darkgreen
}

.feedback.wrong {
    background-color: #fdd;
   color: red
}

.results {
   display: none;
}