figure { display : inline-block; margin-right: 1em; }
figcaption svg { vertical-align: middle; margin-right: 0.2em; }

/* you might want to adjust GF_P2T.gap together with the stroke width */
.kiss_even, .kiss_odd { stroke-width: 4; fill: none; }
#templateThreads .kiss_even, #templateThreads .kiss_odd { stroke: black; }
#templateThreads .thread_0,
#templateThreads .thread_4,
#templateThreads .thread_8,
#templateThreads .thread_12,
#templateThreads .thread_18,
#templateThreads .thread_20,
.thread_0 {
    stroke: rgb(146, 197, 222);
}

#templateThreads .thread_1,
#templateThreads .thread_5,
#templateThreads .thread_9,
#templateThreads .thread_13,
#templateThreads .thread_19,
#templateThreads .thread_21,
.thread_1 {
    stroke: rgb(5, 113, 176);
}

#templateThreads .thread_2,
#templateThreads .thread_6,
#templateThreads .thread_10,
#templateThreads .thread_14,
#templateThreads .thread_16,
#templateThreads .thread_22,
.thread_2 {
    stroke: rgb(202, 0, 32);
}

#templateThreads .thread_3,
#templateThreads .thread_7,
#templateThreads .thread_11,
#templateThreads .thread_15,
#templateThreads .thread_17,
#templateThreads .thread_23,
.thread_3 {
    stroke: rgb(244, 165, 130);
}
.link { stroke-width: 2; stroke: #bbbbbb; }
.cross, .twist { fill: black; opacity: 0.15 }

 /*.kiss_even  {stroke: rgb(202, 0, 32); }*/
 /*.kiss_odd {stroke: rgb(5, 113, 176); }*/
 /*#templatePairs .kiss_5, #templateThreads .kiss_0 {stroke: aqua; }*/
 /*#templateThreads .kiss_6, #templateThreads .kiss_7 {stroke: greenyellow}*/
.frame { fill:none; }
/*.frame { stroke:cyan; stroke-width: 0.5; }*/