path.line {
  fill: none;
  stroke-width: 2px;
}

path.line1 { stroke: #204a87; }
.tr1 { border-left: 24px solid #204a87; }
path.line2 { stroke: #ce5c00; }
.tr2 { border-left: 24px solid #ce5c00; }
path.line3 { stroke: #ad7fa8; }
.tr3 { border-left: 24px solid #ad7fa8; }
path.line4 { stroke: #4e9a06; }
.tr4 { border-left: 24px solid #4e9a06; }
path.line5 { stroke: #c4a000; }
.tr5 { border-left: 24px solid #c4a000; }
path.line6 { stroke: #a40000; }
.tr6 { border-left: 24px solid #a40000; }
path.line7 { stroke: #2e3436; }
.tr7 { border-left: 24px solid #2e3436; }
path.line8 { stroke: #e9b96e; }
.tr8 { border-left: 24px solid #e9b96e; }
path.line9 { stroke: #8f5902; }
.tr9 { border-left: 24px solid #8f5902; }
path.line10 { stroke: #5c3566; }
.tr10 { border-left: 24px solid #5c3566;}