diff --git a/projects/capx/src/app/capx/components/junctions/intersections/conventional-junction/design/conventional-design.component.html b/projects/capx/src/app/capx/components/junctions/intersections/conventional-junction/design/conventional-design.component.html
index 5f2fe21..69723eb 100644
--- a/projects/capx/src/app/capx/components/junctions/intersections/conventional-junction/design/conventional-design.component.html
+++ b/projects/capx/src/app/capx/components/junctions/intersections/conventional-junction/design/conventional-design.component.html
@@ -11,7 +11,7 @@
       <rect x="130.61" y="75" width="126" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="capxStateService.getClvRangeColor((capxStateService.state.get(junctionName).intersectionResult | async).zone5_center_clv)"/>
       <text transform="translate(164.01 102.73) scale(1.08 1)" style="font-size: 27px;fill: #231f20;font-family: OpenSans, Open Sans">{{(capxStateService.state.get(junctionName).intersectionResult | async).zone5_center_clv}}</text>
       <rect x="130.61" y="113.5" width="126" height="38.5" style="fill: #fff;stroke: #231f20;stroke-miterlimit: 10"/>
-      <rect x="130.61" y="113.5" width="63" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="capxStateService.getClvRangeColor((capxStateService.state.get(junctionName).intersectionResult | async).zone5_center_clv)"/>
+      <rect x="130.61" y="113.5" width="63" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="(capxStateService.state.get(junctionName).intersectionResult | async).zone5_center_vc | vcStyle"/>
       <text transform="translate(143.87 139.36) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">{{(capxStateService.state.get(junctionName).intersectionResult | async).zone5_center_vc}}</text>
       <text transform="translate(202.87 139.57) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">V / C</text>
       <text transform="translate(155.63 62.5)" style="font-size: 24px;font-family: OpenSans, Open Sans">Zone 5</text>
diff --git a/projects/capx/src/app/capx/components/junctions/intersections/conventional-shared-right-turn-left-turn-junction/design/conventional-shared-right-turn-left-turn-design.component.html b/projects/capx/src/app/capx/components/junctions/intersections/conventional-shared-right-turn-left-turn-junction/design/conventional-shared-right-turn-left-turn-design.component.html
index 69619c1..b4323ec 100644
--- a/projects/capx/src/app/capx/components/junctions/intersections/conventional-shared-right-turn-left-turn-junction/design/conventional-shared-right-turn-left-turn-design.component.html
+++ b/projects/capx/src/app/capx/components/junctions/intersections/conventional-shared-right-turn-left-turn-junction/design/conventional-shared-right-turn-left-turn-design.component.html
@@ -11,7 +11,7 @@
       <rect x="91.98" y="75" width="126" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="capxStateService.getClvRangeColor((capxStateService.state.get(junctionName).intersectionResult | async).zone5_center_clv)"/>
       <text transform="translate(125.39 102.73) scale(1.08 1)" style="font-size: 27px;fill: #231f20;font-family: OpenSans, Open Sans">{{(capxStateService.state.get(junctionName).intersectionResult | async).zone5_center_clv}}</text>
       <rect x="91.98" y="113.5" width="126" height="38.5" style="fill: #fff;stroke: #231f20;stroke-miterlimit: 10"/>
-      <rect x="91.98" y="113.5" width="63" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="capxStateService.getClvRangeColor((capxStateService.state.get(junctionName).intersectionResult | async).zone5_center_clv)"/>
+      <rect x="91.98" y="113.5" width="63" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="(capxStateService.state.get(junctionName).intersectionResult | async).zone5_center_vc | vcStyle"/>
       <text transform="translate(105.24 139.36) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">{{(capxStateService.state.get(junctionName).intersectionResult | async).zone5_center_vc}}</text>
       <text transform="translate(164.24 139.57) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">V / C</text>
       <text transform="translate(117.01 62.5)" style="font-size: 24px;font-family: OpenSans, Open Sans">Zone 5</text>
diff --git a/projects/capx/src/app/capx/components/junctions/intersections/full-displaced-left-turn-intersection-junction/design/full-displaced-left-turn-intersection-design.component.html b/projects/capx/src/app/capx/components/junctions/intersections/full-displaced-left-turn-intersection-junction/design/full-displaced-left-turn-intersection-design.component.html
index f081a09..fee136c 100644
--- a/projects/capx/src/app/capx/components/junctions/intersections/full-displaced-left-turn-intersection-junction/design/full-displaced-left-turn-intersection-design.component.html
+++ b/projects/capx/src/app/capx/components/junctions/intersections/full-displaced-left-turn-intersection-junction/design/full-displaced-left-turn-intersection-design.component.html
@@ -20,7 +20,7 @@
         <rect x="521.04" y="437.28" width="126" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="capxStateService.getClvRangeColor((capxStateService.state.get(junctionName).intersectionResult | async).zone3_east_clv)"/>
         <text transform="translate(554.44 465.01) scale(1.08 1)" style="font-size: 27px;fill: #231f20;font-family: OpenSans, Open Sans">{{(capxStateService.state.get(junctionName).intersectionResult | async).zone3_east_clv}}</text>
         <rect x="521.04" y="475.78" width="126" height="38.5" style="fill: #fff;stroke: #231f20;stroke-miterlimit: 10"/>
-        <rect x="521.04" y="475.78" width="63" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="capxStateService.getClvRangeColor((capxStateService.state.get(junctionName).intersectionResult | async).zone3_east_clv)"/>
+        <rect x="521.04" y="475.78" width="63" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="(capxStateService.state.get(junctionName).intersectionResult | async).zone3_east_vc | vcStyle"/>
         <text transform="translate(534.3 501.65) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">{{(capxStateService.state.get(junctionName).intersectionResult | async).zone3_east_vc}}</text>
         <text transform="translate(593.3 501.85) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">V / C</text>
         <text transform="translate(546.06 424.78)" style="font-size: 24px;font-family: OpenSans, Open Sans">Zone 3</text>
@@ -29,7 +29,7 @@
         <rect x="9.04" y="184.19" width="126" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="capxStateService.getClvRangeColor((capxStateService.state.get(junctionName).intersectionResult | async).zone4_west_clv)"/>
         <text transform="translate(42.44 211.92) scale(1.08 1)" style="font-size: 27px;fill: #231f20;font-family: OpenSans, Open Sans">{{(capxStateService.state.get(junctionName).intersectionResult | async).zone4_west_clv}}</text>
         <rect x="9.04" y="222.69" width="126" height="38.5" style="fill: #fff;stroke: #231f20;stroke-miterlimit: 10"/>
-        <rect x="9.04" y="222.69" width="63" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="capxStateService.getClvRangeColor((capxStateService.state.get(junctionName).intersectionResult | async).zone4_west_clv)"/>
+        <rect x="9.04" y="222.69" width="63" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="(capxStateService.state.get(junctionName).intersectionResult | async).zone4_west_vc | vcStyle"/>
         <text transform="translate(22.3 248.55) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">{{(capxStateService.state.get(junctionName).intersectionResult | async).zone4_west_vc}}</text>
         <text transform="translate(81.3 248.76) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">V / C</text>
         <text transform="translate(34.06 171.69)" style="font-size: 24px;font-family: OpenSans, Open Sans">Zone 4</text>
@@ -38,7 +38,7 @@
         <rect x="401.04" y="192.28" width="126" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="capxStateService.getClvRangeColor((capxStateService.state.get(junctionName).intersectionResult | async).zone5_center_clv)"/>
         <text transform="translate(434.44 220.01) scale(1.08 1)" style="font-size: 27px;fill: #231f20;font-family: OpenSans, Open Sans">{{(capxStateService.state.get(junctionName).intersectionResult | async).zone5_center_clv}}</text>
         <rect x="401.04" y="230.78" width="126" height="38.5" style="fill: #fff;stroke: #231f20;stroke-miterlimit: 10"/>
-        <rect x="401.04" y="230.78" width="63" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="capxStateService.getClvRangeColor((capxStateService.state.get(junctionName).intersectionResult | async).zone5_center_clv)"/>
+        <rect x="401.04" y="230.78" width="63" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="(capxStateService.state.get(junctionName).intersectionResult | async).zone5_center_vc | vcStyle"/>
         <text transform="translate(414.3 256.65) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">{{(capxStateService.state.get(junctionName).intersectionResult | async).zone5_center_vc}}</text>
         <text transform="translate(473.3 256.85) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">V / C</text>
         <text transform="translate(426.06 179.78)" style="font-size: 24px;font-family: OpenSans, Open Sans">Zone 5</text>
@@ -47,7 +47,7 @@
         <rect x="376.04" y="573.28" width="126" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="capxStateService.getClvRangeColor((capxStateService.state.get(junctionName).intersectionResult | async).zone2_south_clv)"/>
         <text transform="translate(409.44 601.01) scale(1.08 1)" style="font-size: 27px;fill: #231f20;font-family: OpenSans, Open Sans">{{(capxStateService.state.get(junctionName).intersectionResult | async).zone2_south_clv}}</text>
         <rect x="376.04" y="611.78" width="126" height="38.5" style="fill: #fff;stroke: #231f20;stroke-miterlimit: 10"/>
-        <rect x="376.04" y="611.78" width="63" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="capxStateService.getClvRangeColor((capxStateService.state.get(junctionName).intersectionResult | async).zone2_south_clv)"/>
+        <rect x="376.04" y="611.78" width="63" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="(capxStateService.state.get(junctionName).intersectionResult | async).zone2_south_vc | vcStyle"/>
         <text transform="translate(389.3 637.65) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">{{(capxStateService.state.get(junctionName).intersectionResult | async).zone2_south_vc}}</text>
         <text transform="translate(448.3 637.85) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">V / C</text>
         <text transform="translate(401.06 560.78)" style="font-size: 24px;font-family: OpenSans, Open Sans">Zone 2</text>
@@ -56,7 +56,7 @@
         <rect x="403.04" y="48.28" width="126" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="capxStateService.getClvRangeColor((capxStateService.state.get(junctionName).intersectionResult | async).zone1_north_clv)"/>
         <text transform="translate(436.44 76.01) scale(1.08 1)" style="font-size: 27px;fill: #231f20;font-family: OpenSans, Open Sans">{{(capxStateService.state.get(junctionName).intersectionResult | async).zone1_north_clv}}</text>
         <rect x="403.04" y="86.78" width="126" height="38.5" style="fill: #fff;stroke: #231f20;stroke-miterlimit: 10"/>
-        <rect x="403.04" y="86.78" width="63" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="capxStateService.getClvRangeColor((capxStateService.state.get(junctionName).intersectionResult | async).zone1_north_clv)"/>
+        <rect x="403.04" y="86.78" width="63" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="(capxStateService.state.get(junctionName).intersectionResult | async).zone1_north_vc | vcStyle"/>
         <text transform="translate(416.3 112.65) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">{{(capxStateService.state.get(junctionName).intersectionResult | async).zone1_north_vc}}</text>
         <text transform="translate(475.3 112.85) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">V / C</text>
         <text transform="translate(428.06 35.78)" style="font-size: 24px;font-family: OpenSans, Open Sans">Zone 1</text>
diff --git a/projects/capx/src/app/capx/components/junctions/intersections/median-uturn-intersection-east-west-junction/design/median-uturn-intersection-east-west-design.component.html b/projects/capx/src/app/capx/components/junctions/intersections/median-uturn-intersection-east-west-junction/design/median-uturn-intersection-east-west-design.component.html
index aee74bf..a585ed6 100644
--- a/projects/capx/src/app/capx/components/junctions/intersections/median-uturn-intersection-east-west-junction/design/median-uturn-intersection-east-west-design.component.html
+++ b/projects/capx/src/app/capx/components/junctions/intersections/median-uturn-intersection-east-west-junction/design/median-uturn-intersection-east-west-design.component.html
@@ -16,7 +16,7 @@
         <rect x="446.81" y="33.07" width="126" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="capxStateService.getClvRangeColor((capxStateService.state.get(junctionName).intersectionResult | async).zone3_east_clv)"/>
         <text transform="translate(480.21 60.8) scale(1.08 1)" style="font-size: 27px;fill: #231f20;font-family: OpenSans, Open Sans">{{(capxStateService.state.get(junctionName).intersectionResult | async).zone3_east_clv}}</text>
         <rect x="446.81" y="71.57" width="126" height="38.5" style="fill: #fff;stroke: #231f20;stroke-miterlimit: 10"/>
-        <rect x="446.81" y="71.57" width="63" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="capxStateService.getClvRangeColor((capxStateService.state.get(junctionName).intersectionResult | async).zone3_east_clv)"/>
+        <rect x="446.81" y="71.57" width="63" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="(capxStateService.state.get(junctionName).intersectionResult | async).zone3_east_vc | vcStyle"/>
         <text transform="translate(460.06 97.43) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">{{(capxStateService.state.get(junctionName).intersectionResult | async).zone3_east_vc}}</text>
         <text transform="translate(519.07 97.64) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">V / C</text>
         <text transform="translate(471.83 20.57)" style="font-size: 24px;font-family: OpenSans, Open Sans">Zone 3</text>
@@ -25,7 +25,7 @@
         <rect x="39.81" y="264.98" width="126" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="capxStateService.getClvRangeColor((capxStateService.state.get(junctionName).intersectionResult | async).zone4_west_clv)"/>
         <text transform="translate(73.21 292.71) scale(1.08 1)" style="font-size: 27px;fill: #231f20;font-family: OpenSans, Open Sans">{{(capxStateService.state.get(junctionName).intersectionResult | async).zone4_west_clv}}</text>
         <rect x="39.81" y="303.48" width="126" height="38.5" style="fill: #fff;stroke: #231f20;stroke-miterlimit: 10"/>
-        <rect x="39.81" y="303.48" width="63" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="capxStateService.getClvRangeColor((capxStateService.state.get(junctionName).intersectionResult | async).zone4_west_clv)"/>
+        <rect x="39.81" y="303.48" width="63" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="(capxStateService.state.get(junctionName).intersectionResult | async).zone4_west_vc | vcStyle"/>
         <text transform="translate(53.06 329.34) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">{{(capxStateService.state.get(junctionName).intersectionResult | async).zone4_west_vc}}</text>
         <text transform="translate(112.07 329.55) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">V / C</text>
         <text transform="translate(64.83 252.48)" style="font-size: 24px;font-family: OpenSans, Open Sans">Zone 4</text>
@@ -34,7 +34,7 @@
         <rect x="389.81" y="264.07" width="126" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="capxStateService.getClvRangeColor((capxStateService.state.get(junctionName).intersectionResult | async).zone5_center_clv)"/>
         <text transform="translate(423.21 291.8) scale(1.08 1)" style="font-size: 27px;fill: #231f20;font-family: OpenSans, Open Sans">{{(capxStateService.state.get(junctionName).intersectionResult | async).zone5_center_clv}}</text>
         <rect x="389.81" y="302.57" width="126" height="38.5" style="fill: #fff;stroke: #231f20;stroke-miterlimit: 10"/>
-        <rect x="389.81" y="302.57" width="63" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="capxStateService.getClvRangeColor((capxStateService.state.get(junctionName).intersectionResult | async).zone5_center_clv)"/>
+        <rect x="389.81" y="302.57" width="63" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="(capxStateService.state.get(junctionName).intersectionResult | async).zone5_center_vc | vcStyle"/>
         <text transform="translate(403.06 328.43) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">{{(capxStateService.state.get(junctionName).intersectionResult | async).zone5_center_vc}}</text>
         <text transform="translate(462.07 328.64) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">V / C</text>
         <text transform="translate(414.83 251.57)" style="font-size: 24px;font-family: OpenSans, Open Sans">Zone 5</text>
diff --git a/projects/capx/src/app/capx/components/junctions/intersections/median-uturn-intersection-north-south-junction/design/median-uturn-intersection-north-south-design.component.html b/projects/capx/src/app/capx/components/junctions/intersections/median-uturn-intersection-north-south-junction/design/median-uturn-intersection-north-south-design.component.html
index e5e1938..558e558 100644
--- a/projects/capx/src/app/capx/components/junctions/intersections/median-uturn-intersection-north-south-junction/design/median-uturn-intersection-north-south-design.component.html
+++ b/projects/capx/src/app/capx/components/junctions/intersections/median-uturn-intersection-north-south-junction/design/median-uturn-intersection-north-south-design.component.html
@@ -16,7 +16,7 @@
         <rect x="154.39" y="198.28" width="126" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="capxStateService.getClvRangeColor((capxStateService.state.get(junctionName).intersectionResult | async).zone5_center_clv)"/>
         <text transform="translate(187.79 226.01) scale(1.08 1)" style="font-size: 27px;fill: #231f20;font-family: OpenSans, Open Sans">{{(capxStateService.state.get(junctionName).intersectionResult | async).zone5_center_clv}}</text>
         <rect x="154.39" y="236.78" width="126" height="38.5" style="fill: #fff;stroke: #231f20;stroke-miterlimit: 10"/>
-        <rect x="154.39" y="236.78" width="63" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="capxStateService.getClvRangeColor((capxStateService.state.get(junctionName).intersectionResult | async).zone5_center_clv)"/>
+        <rect x="154.39" y="236.78" width="63" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="(capxStateService.state.get(junctionName).intersectionResult | async).zone5_center_vc | vcStyle"/>
         <text transform="translate(167.65 262.65) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">{{(capxStateService.state.get(junctionName).intersectionResult | async).zone5_center_vc}}</text>
         <text transform="translate(226.65 262.85) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">V / C</text>
         <text transform="translate(179.41 185.78)" style="font-size: 24px;font-family: OpenSans, Open Sans">Zone 5</text>
@@ -25,7 +25,7 @@
         <rect x="160.39" y="572.28" width="126" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="capxStateService.getClvRangeColor((capxStateService.state.get(junctionName).intersectionResult | async).zone2_south_clv)"/>
         <text transform="translate(193.79 600.01) scale(1.08 1)" style="font-size: 27px;fill: #231f20;font-family: OpenSans, Open Sans">{{(capxStateService.state.get(junctionName).intersectionResult | async).zone2_south_clv}}</text>
         <rect x="160.39" y="610.78" width="126" height="38.5" style="fill: #fff;stroke: #231f20;stroke-miterlimit: 10"/>
-        <rect x="160.39" y="610.78" width="63" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="capxStateService.getClvRangeColor((capxStateService.state.get(junctionName).intersectionResult | async).zone2_south_clv)"/>
+        <rect x="160.39" y="610.78" width="63" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="(capxStateService.state.get(junctionName).intersectionResult | async).zone2_south_vc | vcStyle"/>
         <text transform="translate(173.65 636.65) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">{{(capxStateService.state.get(junctionName).intersectionResult | async).zone2_south_vc}}</text>
         <text transform="translate(232.65 636.85) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">V / C</text>
         <text transform="translate(185.41 559.78)" style="font-size: 24px;font-family: OpenSans, Open Sans">Zone 2</text>
@@ -34,7 +34,7 @@
         <rect x="153.39" y="40.28" width="126" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="capxStateService.getClvRangeColor((capxStateService.state.get(junctionName).intersectionResult | async).zone1_north_clv)"/>
         <text transform="translate(186.79 68.01) scale(1.08 1)" style="font-size: 27px;fill: #231f20;font-family: OpenSans, Open Sans">{{(capxStateService.state.get(junctionName).intersectionResult | async).zone1_north_clv}}</text>
         <rect x="153.39" y="78.78" width="126" height="38.5" style="fill: #fff;stroke: #231f20;stroke-miterlimit: 10"/>
-        <rect x="153.39" y="78.78" width="63" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="capxStateService.getClvRangeColor((capxStateService.state.get(junctionName).intersectionResult | async).zone1_north_clv)"/>
+        <rect x="153.39" y="78.78" width="63" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="(capxStateService.state.get(junctionName).intersectionResult | async).zone1_north_vc | vcStyle"/>
         <text transform="translate(166.65 104.65) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">{{(capxStateService.state.get(junctionName).intersectionResult | async).zone1_north_vc}}</text>
         <text transform="translate(225.65 104.85) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">V / C</text>
         <text transform="translate(178.41 27.78)" style="font-size: 24px;font-family: OpenSans, Open Sans">Zone 1</text>
diff --git a/projects/capx/src/app/capx/components/junctions/intersections/partial-displaced-left-turn-intersection-east-west-junction/design/partial-displaced-left-turn-intersection-east-west-design.component.html b/projects/capx/src/app/capx/components/junctions/intersections/partial-displaced-left-turn-intersection-east-west-junction/design/partial-displaced-left-turn-intersection-east-west-design.component.html
index fbdac20..d6124c7 100644
--- a/projects/capx/src/app/capx/components/junctions/intersections/partial-displaced-left-turn-intersection-east-west-junction/design/partial-displaced-left-turn-intersection-east-west-design.component.html
+++ b/projects/capx/src/app/capx/components/junctions/intersections/partial-displaced-left-turn-intersection-east-west-junction/design/partial-displaced-left-turn-intersection-east-west-design.component.html
@@ -23,7 +23,7 @@
       <rect x="688.55" y="182.28" width="126" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="capxStateService.getClvRangeColor((capxStateService.state.get(junctions.PartialDisplacedLeftTurnIntersectionEastWest).intersectionResult | async).zone3_east_clv)"/>
       <text transform="translate(721.96 210.01) scale(1.08 1)" style="font-size: 27px;fill: #231f20;font-family: OpenSans, Open Sans">{{(capxStateService.state.get(junctions.PartialDisplacedLeftTurnIntersectionEastWest).intersectionResult | async).zone3_east_clv}}</text>
       <rect x="688.55" y="220.78" width="126" height="38.5" style="fill: #fff;stroke: #231f20;stroke-miterlimit: 10"/>
-      <rect x="688.55" y="220.78" width="63" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="capxStateService.getClvRangeColor((capxStateService.state.get(junctions.PartialDisplacedLeftTurnIntersectionEastWest).intersectionResult | async).zone3_east_clv)"/>
+      <rect x="688.55" y="220.78" width="63" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="(capxStateService.state.get(junctions.PartialDisplacedLeftTurnIntersectionEastWest).intersectionResult | async).zone3_east_vc | vcStyle"/>
       <text transform="translate(701.81 246.65) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">{{(capxStateService.state.get(junctions.PartialDisplacedLeftTurnIntersectionEastWest).intersectionResult | async).zone3_east_vc}}</text>
       <text transform="translate(760.82 246.85) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">V / C</text>
       <text transform="translate(713.58 169.78)" style="font-size: 24px;font-family: OpenSans, Open Sans">Zone 3</text>
@@ -32,7 +32,7 @@
       <rect x="149.55" y="183.19" width="126" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="capxStateService.getClvRangeColor((capxStateService.state.get(junctions.PartialDisplacedLeftTurnIntersectionEastWest).intersectionResult | async).zone4_west_clv)"/>
       <text transform="translate(182.96 210.92) scale(1.08 1)" style="font-size: 27px;fill: #231f20;font-family: OpenSans, Open Sans">{{(capxStateService.state.get(junctions.PartialDisplacedLeftTurnIntersectionEastWest).intersectionResult | async).zone4_west_clv}}</text>
       <rect x="149.55" y="221.69" width="126" height="38.5" style="fill: #fff;stroke: #231f20;stroke-miterlimit: 10"/>
-      <rect x="149.55" y="221.69" width="63" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="capxStateService.getClvRangeColor((capxStateService.state.get(junctions.PartialDisplacedLeftTurnIntersectionEastWest).intersectionResult | async).zone4_west_clv)"/>
+      <rect x="149.55" y="221.69" width="63" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="(capxStateService.state.get(junctions.PartialDisplacedLeftTurnIntersectionEastWest).intersectionResult | async).zone4_west_vc | vcStyle"/>
       <text transform="translate(162.81 247.55) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">{{(capxStateService.state.get(junctions.PartialDisplacedLeftTurnIntersectionEastWest).intersectionResult | async).zone4_west_vc}}</text>
       <text transform="translate(221.82 247.76) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">V / C</text>
       <text transform="translate(174.58 170.69)" style="font-size: 24px;font-family: OpenSans, Open Sans">Zone 4</text>
@@ -41,7 +41,7 @@
       <rect x="484.55" y="181.28" width="126" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="capxStateService.getClvRangeColor((capxStateService.state.get(junctions.PartialDisplacedLeftTurnIntersectionEastWest).intersectionResult | async).zone5_center_clv)"/>
       <text transform="translate(517.96 209.01) scale(1.08 1)" style="font-size: 27px;fill: #231f20;font-family: OpenSans, Open Sans">{{(capxStateService.state.get(junctions.PartialDisplacedLeftTurnIntersectionEastWest).intersectionResult | async).zone5_center_clv}}</text>
       <rect x="484.55" y="219.78" width="126" height="38.5" style="fill: #fff;stroke: #231f20;stroke-miterlimit: 10"/>
-      <rect x="484.55" y="219.78" width="63" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="capxStateService.getClvRangeColor((capxStateService.state.get(junctions.PartialDisplacedLeftTurnIntersectionEastWest).intersectionResult | async).zone5_center_clv)"/>
+      <rect x="484.55" y="219.78" width="63" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="(capxStateService.state.get(junctions.PartialDisplacedLeftTurnIntersectionEastWest).intersectionResult | async).zone5_center_vc | vcStyle"/>
       <text transform="translate(497.81 245.65) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">{{(capxStateService.state.get(junctions.PartialDisplacedLeftTurnIntersectionEastWest).intersectionResult | async).zone5_center_vc}}</text>
       <text transform="translate(556.82 245.85) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">V / C</text>
       <text transform="translate(509.58 168.78)" style="font-size: 24px;font-family: OpenSans, Open Sans">Zone 5</text>
diff --git a/projects/capx/src/app/capx/components/junctions/intersections/partial-displaced-left-turn-intersection-north-south-junction/design/partial-displaced-left-turn-intersection-north-south-design.component.html b/projects/capx/src/app/capx/components/junctions/intersections/partial-displaced-left-turn-intersection-north-south-junction/design/partial-displaced-left-turn-intersection-north-south-design.component.html
index 167feed..e5e2a5c 100644
--- a/projects/capx/src/app/capx/components/junctions/intersections/partial-displaced-left-turn-intersection-north-south-junction/design/partial-displaced-left-turn-intersection-north-south-design.component.html
+++ b/projects/capx/src/app/capx/components/junctions/intersections/partial-displaced-left-turn-intersection-north-south-junction/design/partial-displaced-left-turn-intersection-north-south-design.component.html
@@ -23,7 +23,7 @@
       <rect x="394.2" y="716.28" width="126" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="capxStateService.getClvRangeColor((capxStateService.state.get(junctionName).intersectionResult | async).zone2_south_clv)"/>
       <text transform="translate(427.6 744.01) scale(1.08 1)" style="font-size: 27px;fill: #231f20;font-family: OpenSans, Open Sans">{{(capxStateService.state.get(junctionName).intersectionResult | async).zone2_south_clv}}</text>
       <rect x="394.2" y="754.78" width="126" height="38.5" style="fill: #fff;stroke: #231f20;stroke-miterlimit: 10"/>
-      <rect x="394.2" y="754.78" width="63" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="capxStateService.getClvRangeColor((capxStateService.state.get(junctionName).intersectionResult | async).zone2_south_clv)"/>
+      <rect x="394.2" y="754.78" width="63" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="(capxStateService.state.get(junctionName).intersectionResult | async).zone2_south_vc | vcStyle"/>
       <text transform="translate(407.46 780.65) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">{{(capxStateService.state.get(junctionName).intersectionResult | async).zone2_south_vc}}</text>
       <text transform="translate(466.46 780.85) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">V / C</text>
       <text transform="translate(419.22 703.78)" style="font-size: 24px;font-family: OpenSans, Open Sans">Zone 2</text>
@@ -32,7 +32,7 @@
       <rect x="117.2" y="88.19" width="126" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="capxStateService.getClvRangeColor((capxStateService.state.get(junctionName).intersectionResult | async).zone1_north_clv)"/>
       <text transform="translate(150.6 115.92) scale(1.08 1)" style="font-size: 27px;fill: #231f20;font-family: OpenSans, Open Sans">{{(capxStateService.state.get(junctionName).intersectionResult | async).zone1_north_clv}}</text>
       <rect x="117.2" y="126.69" width="126" height="38.5" style="fill: #fff;stroke: #231f20;stroke-miterlimit: 10"/>
-      <rect x="117.2" y="126.69" width="63" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="capxStateService.getClvRangeColor((capxStateService.state.get(junctionName).intersectionResult | async).zone1_north_clv)"/>
+      <rect x="117.2" y="126.69" width="63" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="(capxStateService.state.get(junctionName).intersectionResult | async).zone1_north_vc | vcStyle"/>
       <text transform="translate(130.46 152.55) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">{{(capxStateService.state.get(junctionName).intersectionResult | async).zone1_north_vc}}</text>
       <text transform="translate(189.46 152.76) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">V / C</text>
       <text transform="translate(142.22 75.69)" style="font-size: 24px;font-family: OpenSans, Open Sans">Zone 1</text>
@@ -41,7 +41,7 @@
       <rect x="427.2" y="240.28" width="126" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="capxStateService.getClvRangeColor((capxStateService.state.get(junctionName).intersectionResult | async).zone5_center_clv)"/>
       <text transform="translate(460.6 268.01) scale(1.08 1)" style="font-size: 27px;fill: #231f20;font-family: OpenSans, Open Sans">{{(capxStateService.state.get(junctionName).intersectionResult | async).zone5_center_clv}}</text>
       <rect x="427.2" y="278.78" width="126" height="38.5" style="fill: #fff;stroke: #231f20;stroke-miterlimit: 10"/>
-      <rect x="427.2" y="278.78" width="63" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="capxStateService.getClvRangeColor((capxStateService.state.get(junctionName).intersectionResult | async).zone5_center_clv)"/>
+      <rect x="427.2" y="278.78" width="63" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="(capxStateService.state.get(junctionName).intersectionResult | async).zone5_center_vc | vcStyle"/>
       <text transform="translate(440.46 304.65) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">{{(capxStateService.state.get(junctionName).intersectionResult | async).zone5_center_vc}}</text>
       <text transform="translate(499.46 304.85) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">V / C</text>
       <text transform="translate(452.22 227.78)" style="font-size: 24px;font-family: OpenSans, Open Sans">Zone 5</text>
diff --git a/projects/capx/src/app/capx/components/junctions/intersections/partial-median-uturn-intersection-east-west-junction/design/partial-median-uturn-intersection-east-west-design.component.html b/projects/capx/src/app/capx/components/junctions/intersections/partial-median-uturn-intersection-east-west-junction/design/partial-median-uturn-intersection-east-west-design.component.html
index 1a65af2..83f25a0 100644
--- a/projects/capx/src/app/capx/components/junctions/intersections/partial-median-uturn-intersection-east-west-junction/design/partial-median-uturn-intersection-east-west-design.component.html
+++ b/projects/capx/src/app/capx/components/junctions/intersections/partial-median-uturn-intersection-east-west-junction/design/partial-median-uturn-intersection-east-west-design.component.html
@@ -16,7 +16,7 @@
       <rect x="446.81" y="33.07" width="126" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="capxStateService.getClvRangeColor((capxStateService.state.get(junctionName).intersectionResult | async).zone3_east_clv)"/>
       <text transform="translate(480.21 60.8) scale(1.08 1)" style="font-size: 27px;fill: #231f20;font-family: OpenSans, Open Sans">{{(capxStateService.state.get(junctionName).intersectionResult | async).zone3_east_clv}}</text>
       <rect x="446.81" y="71.57" width="126" height="38.5" style="fill: #fff;stroke: #231f20;stroke-miterlimit: 10"/>
-      <rect x="446.81" y="71.57" width="63" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="capxStateService.getClvRangeColor((capxStateService.state.get(junctionName).intersectionResult | async).zone3_east_clv)"/>
+      <rect x="446.81" y="71.57" width="63" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="(capxStateService.state.get(junctionName).intersectionResult | async).zone3_east_vc | vcStyle"/>
       <text transform="translate(460.06 97.43) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">{{(capxStateService.state.get(junctionName).intersectionResult | async).zone3_east_vc}}</text>
       <text transform="translate(519.07 97.64) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">V / C</text>
       <text transform="translate(471.83 20.57)" style="font-size: 24px;font-family: OpenSans, Open Sans">Zone 3</text>
@@ -25,7 +25,7 @@
       <rect x="39.81" y="264.98" width="126" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="capxStateService.getClvRangeColor((capxStateService.state.get(junctionName).intersectionResult | async).zone4_west_clv)"/>
       <text transform="translate(73.21 292.71) scale(1.08 1)" style="font-size: 27px;fill: #231f20;font-family: OpenSans, Open Sans">{{(capxStateService.state.get(junctionName).intersectionResult | async).zone4_west_clv}}</text>
       <rect x="39.81" y="303.48" width="126" height="38.5" style="fill: #fff;stroke: #231f20;stroke-miterlimit: 10"/>
-      <rect x="39.81" y="303.48" width="63" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="capxStateService.getClvRangeColor((capxStateService.state.get(junctionName).intersectionResult | async).zone4_west_clv)"/>
+      <rect x="39.81" y="303.48" width="63" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="(capxStateService.state.get(junctionName).intersectionResult | async).zone4_west_vc | vcStyle"/>
       <text transform="translate(53.06 329.34) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">{{(capxStateService.state.get(junctionName).intersectionResult | async).zone4_west_vc}}</text>
       <text transform="translate(112.07 329.55) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">V / C</text>
       <text transform="translate(64.83 252.48)" style="font-size: 24px;font-family: OpenSans, Open Sans">Zone 4</text>
@@ -34,7 +34,7 @@
       <rect x="389.81" y="264.07" width="126" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="capxStateService.getClvRangeColor((capxStateService.state.get(junctionName).intersectionResult | async).zone5_center_clv)"/>
       <text transform="translate(423.21 291.8) scale(1.08 1)" style="font-size: 27px;fill: #231f20;font-family: OpenSans, Open Sans">{{(capxStateService.state.get(junctionName).intersectionResult | async).zone5_center_clv}}</text>
       <rect x="389.81" y="302.57" width="126" height="38.5" style="fill: #fff;stroke: #231f20;stroke-miterlimit: 10"/>
-      <rect x="389.81" y="302.57" width="63" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="capxStateService.getClvRangeColor((capxStateService.state.get(junctionName).intersectionResult | async).zone5_center_clv)"/>
+      <rect x="389.81" y="302.57" width="63" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="(capxStateService.state.get(junctionName).intersectionResult | async).zone5_center_vc | vcStyle"/>
       <text transform="translate(403.06 328.43) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">{{(capxStateService.state.get(junctionName).intersectionResult | async).zone5_center_vc}}</text>
       <text transform="translate(462.07 328.64) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">V / C</text>
       <text transform="translate(414.83 251.57)" style="font-size: 24px;font-family: OpenSans, Open Sans">Zone 5</text>
diff --git a/projects/capx/src/app/capx/components/junctions/intersections/partial-median-uturn-intersection-north-south-junction/design/partial-median-uturn-intersection-north-south-design.component.html b/projects/capx/src/app/capx/components/junctions/intersections/partial-median-uturn-intersection-north-south-junction/design/partial-median-uturn-intersection-north-south-design.component.html
index 9502c70..159ecaf 100644
--- a/projects/capx/src/app/capx/components/junctions/intersections/partial-median-uturn-intersection-north-south-junction/design/partial-median-uturn-intersection-north-south-design.component.html
+++ b/projects/capx/src/app/capx/components/junctions/intersections/partial-median-uturn-intersection-north-south-junction/design/partial-median-uturn-intersection-north-south-design.component.html
@@ -16,7 +16,7 @@
       <rect x="154.39" y="198.28" width="126" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="capxStateService.getClvRangeColor((capxStateService.state.get(junctionName).intersectionResult | async).zone5_center_clv)"/>
       <text transform="translate(187.79 226.01) scale(1.08 1)" style="font-size: 27px;fill: #231f20;font-family: OpenSans, Open Sans">{{(capxStateService.state.get(junctionName).intersectionResult | async).zone5_center_clv}}</text>
       <rect x="154.39" y="236.78" width="126" height="38.5" style="fill: #fff;stroke: #231f20;stroke-miterlimit: 10"/>
-      <rect x="154.39" y="236.78" width="63" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="capxStateService.getClvRangeColor((capxStateService.state.get(junctionName).intersectionResult | async).zone5_center_clv)"/>
+      <rect x="154.39" y="236.78" width="63" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="(capxStateService.state.get(junctionName).intersectionResult | async).zone5_center_vc | vcStyle"/>
       <text transform="translate(167.65 262.65) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">{{(capxStateService.state.get(junctionName).intersectionResult | async).zone5_center_vc}}</text>
       <text transform="translate(226.65 262.85) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">V / C</text>
       <text transform="translate(179.41 185.78)" style="font-size: 24px;font-family: OpenSans, Open Sans">Zone 5</text>
@@ -25,7 +25,7 @@
       <rect x="160.39" y="572.28" width="126" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="capxStateService.getClvRangeColor((capxStateService.state.get(junctionName).intersectionResult | async).zone2_south_clv)"/>
       <text transform="translate(193.79 600.01) scale(1.08 1)" style="font-size: 27px;fill: #231f20;font-family: OpenSans, Open Sans">{{(capxStateService.state.get(junctionName).intersectionResult | async).zone2_south_clv}}</text>
       <rect x="160.39" y="610.78" width="126" height="38.5" style="fill: #fff;stroke: #231f20;stroke-miterlimit: 10"/>
-      <rect x="160.39" y="610.78" width="63" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="capxStateService.getClvRangeColor((capxStateService.state.get(junctionName).intersectionResult | async).zone2_south_clv)"/>
+      <rect x="160.39" y="610.78" width="63" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="(capxStateService.state.get(junctionName).intersectionResult | async).zone2_south_vc | vcStyle"/>
       <text transform="translate(173.65 636.65) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">{{(capxStateService.state.get(junctionName).intersectionResult | async).zone2_south_vc}}</text>
       <text transform="translate(232.65 636.85) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">V / C</text>
       <text transform="translate(185.41 559.78)" style="font-size: 24px;font-family: OpenSans, Open Sans">Zone 2</text>
@@ -34,7 +34,7 @@
       <rect x="153.39" y="40.28" width="126" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="capxStateService.getClvRangeColor((capxStateService.state.get(junctionName).intersectionResult | async).zone1_north_clv)"/>
       <text transform="translate(186.79 68.01) scale(1.08 1)" style="font-size: 27px;fill: #231f20;font-family: OpenSans, Open Sans">{{(capxStateService.state.get(junctionName).intersectionResult | async).zone1_north_clv}}</text>
       <rect x="153.39" y="78.78" width="126" height="38.5" style="fill: #fff;stroke: #231f20;stroke-miterlimit: 10"/>
-      <rect x="153.39" y="78.78" width="63" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="capxStateService.getClvRangeColor((capxStateService.state.get(junctionName).intersectionResult | async).zone1_north_clv)"/>
+      <rect x="153.39" y="78.78" width="63" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="(capxStateService.state.get(junctionName).intersectionResult | async).zone1_north_vc | vcStyle"/>
       <text transform="translate(166.65 104.65) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">{{(capxStateService.state.get(junctionName).intersectionResult | async).zone1_north_vc}}</text>
       <text transform="translate(225.65 104.85) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">V / C</text>
       <text transform="translate(178.41 27.78)" style="font-size: 24px;font-family: OpenSans, Open Sans">Zone 1</text>
diff --git a/projects/capx/src/app/capx/components/junctions/intersections/quadrant-roadway-intersection-north-east-junction/design/quadrant-roadway-intersection-north-east-design.component.html b/projects/capx/src/app/capx/components/junctions/intersections/quadrant-roadway-intersection-north-east-junction/design/quadrant-roadway-intersection-north-east-design.component.html
index 94c5faf..2d5000b 100644
--- a/projects/capx/src/app/capx/components/junctions/intersections/quadrant-roadway-intersection-north-east-junction/design/quadrant-roadway-intersection-north-east-design.component.html
+++ b/projects/capx/src/app/capx/components/junctions/intersections/quadrant-roadway-intersection-north-east-junction/design/quadrant-roadway-intersection-north-east-design.component.html
@@ -16,7 +16,7 @@
       <rect x="0.5" y="425.81" width="126" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="capxStateService.getClvRangeColor((capxStateService.state.get(junctionName).intersectionResult | async).zone5_center_clv)"/>
       <text transform="translate(33.9 453.54) scale(1.08 1)" style="font-size: 27px;fill: #231f20;font-family: OpenSans, Open Sans">{{(capxStateService.state.get(junctionName).intersectionResult | async).zone5_center_clv}}</text>
       <rect x="0.5" y="464.31" width="126" height="38.5" style="fill: #fff;stroke: #231f20;stroke-miterlimit: 10"/>
-      <rect x="0.5" y="464.31" width="63" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="capxStateService.getClvRangeColor((capxStateService.state.get(junctionName).intersectionResult | async).zone5_center_clv)"/>
+      <rect x="0.5" y="464.31" width="63" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="(capxStateService.state.get(junctionName).intersectionResult | async).zone5_center_vc | vcStyle"/>
       <text transform="translate(13.76 490.18) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">{{(capxStateService.state.get(junctionName).intersectionResult | async).zone5_center_vc}}</text>
       <text transform="translate(72.76 490.38) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">V / C</text>
       <text transform="translate(25.52 413.31)" style="font-size: 24px;font-family: OpenSans, Open Sans">Zone 5</text>
@@ -25,7 +25,7 @@
       <rect x="2.3" y="71.47" width="126" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="capxStateService.getClvRangeColor((capxStateService.state.get(junctionName).intersectionResult | async).zone1_north_clv)"/>
       <text transform="translate(35.7 99.2) scale(1.08 1)" style="font-size: 27px;fill: #231f20;font-family: OpenSans, Open Sans">{{(capxStateService.state.get(junctionName).intersectionResult | async).zone1_north_clv}}</text>
       <rect x="2.3" y="109.97" width="126" height="38.5" style="fill: #fff;stroke: #231f20;stroke-miterlimit: 10"/>
-      <rect x="2.3" y="109.97" width="63" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="capxStateService.getClvRangeColor((capxStateService.state.get(junctionName).intersectionResult | async).zone1_north_clv)"/>
+      <rect x="2.3" y="109.97" width="63" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="(capxStateService.state.get(junctionName).intersectionResult | async).zone1_north_vc | vcStyle"/>
       <text transform="translate(15.56 135.83) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">{{(capxStateService.state.get(junctionName).intersectionResult | async).zone1_north_vc}}</text>
       <text transform="translate(74.56 136.04) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">V / C</text>
       <text transform="translate(27.32 58.97)" style="font-size: 24px;font-family: OpenSans, Open Sans">Zone 1</text>
@@ -34,7 +34,7 @@
       <rect x="646.5" y="659.81" width="126" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="capxStateService.getClvRangeColor((capxStateService.state.get(junctionName).intersectionResult | async).zone3_east_clv)"/>
       <text transform="translate(679.9 687.54) scale(1.08 1)" style="font-size: 27px;fill: #231f20;font-family: OpenSans, Open Sans">{{(capxStateService.state.get(junctionName).intersectionResult | async).zone3_east_clv}}</text>
       <rect x="646.5" y="698.31" width="126" height="38.5" style="fill: #fff;stroke: #231f20;stroke-miterlimit: 10"/>
-      <rect x="646.5" y="698.31" width="63" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="capxStateService.getClvRangeColor((capxStateService.state.get(junctionName).intersectionResult | async).zone3_east_clv)"/>
+      <rect x="646.5" y="698.31" width="63" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="(capxStateService.state.get(junctionName).intersectionResult | async).zone3_east_vc | vcStyle"/>
       <text transform="translate(659.76 724.18) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">{{(capxStateService.state.get(junctionName).intersectionResult | async).zone3_east_vc}}</text>
       <text transform="translate(718.76 724.38) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">V / C</text>
       <text transform="translate(671.52 647.31)" style="font-size: 24px;font-family: OpenSans, Open Sans">Zone 3</text>
diff --git a/projects/capx/src/app/capx/components/junctions/intersections/quadrant-roadway-intersection-north-west-junction/design/quadrant-roadway-intersection-north-west-design.component.html b/projects/capx/src/app/capx/components/junctions/intersections/quadrant-roadway-intersection-north-west-junction/design/quadrant-roadway-intersection-north-west-design.component.html
index 5e0b357..8af590b 100644
--- a/projects/capx/src/app/capx/components/junctions/intersections/quadrant-roadway-intersection-north-west-junction/design/quadrant-roadway-intersection-north-west-design.component.html
+++ b/projects/capx/src/app/capx/components/junctions/intersections/quadrant-roadway-intersection-north-west-junction/design/quadrant-roadway-intersection-north-west-design.component.html
@@ -23,7 +23,7 @@
       <rect x="23.65" y="648.22" width="126" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="capxStateService.getClvRangeColor((capxStateService.state.get(junctionName).intersectionResult | async).zone2_south_clv)"/>
       <text transform="translate(57.05 675.96) scale(1.08 1)" style="font-size: 27px;fill: #231f20;font-family: OpenSans, Open Sans">{{(capxStateService.state.get(junctionName).intersectionResult | async).zone2_south_clv}}</text>
       <rect x="23.65" y="686.72" width="126" height="38.5" style="fill: #fff;stroke: #231f20;stroke-miterlimit: 10"/>
-      <rect x="23.65" y="686.72" width="63" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="capxStateService.getClvRangeColor((capxStateService.state.get(junctionName).intersectionResult | async).zone2_south_clv)"/>
+      <rect x="23.65" y="686.72" width="63" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="(capxStateService.state.get(junctionName).intersectionResult | async).zone2_south_vc | vcStyle"/>
       <text transform="translate(36.9 712.59) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">{{(capxStateService.state.get(junctionName).intersectionResult | async).zone2_south_vc}}</text>
       <text transform="translate(95.91 712.8) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">V / C</text>
       <text transform="translate(48.67 635.72)" style="font-size: 24px;font-family: OpenSans, Open Sans">Zone 2</text>
@@ -32,7 +32,7 @@
       <rect x="0.5" y="33.07" width="126" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="capxStateService.getClvRangeColor((capxStateService.state.get(junctionName).intersectionResult | async).zone5_center_clv)"/>
       <text transform="translate(33.9 60.8) scale(1.08 1)" style="font-size: 27px;fill: #231f20;font-family: OpenSans, Open Sans">{{(capxStateService.state.get(junctionName).intersectionResult | async).zone5_center_clv}}</text>
       <rect x="0.5" y="71.57" width="126" height="38.5" style="fill: #fff;stroke: #231f20;stroke-miterlimit: 10"/>
-      <rect x="0.5" y="71.57" width="63" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="capxStateService.getClvRangeColor((capxStateService.state.get(junctionName).intersectionResult | async).zone5_center_clv)"/>
+      <rect x="0.5" y="71.57" width="63" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="(capxStateService.state.get(junctionName).intersectionResult | async).zone5_center_vc | vcStyle"/>
       <text transform="translate(13.76 97.43) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">{{(capxStateService.state.get(junctionName).intersectionResult | async).zone5_center_vc}}</text>
       <text transform="translate(72.76 97.64) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">V / C</text>
       <text transform="translate(25.52 20.57)" style="font-size: 24px;font-family: OpenSans, Open Sans">Zone 5</text>
@@ -41,7 +41,7 @@
       <rect x="630.65" y="33.31" width="126" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="capxStateService.getClvRangeColor((capxStateService.state.get(junctionName).intersectionResult | async).zone3_east_clv)"/>
       <text transform="translate(664.05 61.04) scale(1.08 1)" style="font-size: 27px;fill: #231f20;font-family: OpenSans, Open Sans">{{(capxStateService.state.get(junctionName).intersectionResult | async).zone3_east_clv}}</text>
       <rect x="630.65" y="71.81" width="126" height="38.5" style="fill: #fff;stroke: #231f20;stroke-miterlimit: 10"/>
-      <rect x="630.65" y="71.81" width="63" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="capxStateService.getClvRangeColor((capxStateService.state.get(junctionName).intersectionResult | async).zone3_east_clv)"/>
+      <rect x="630.65" y="71.81" width="63" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="(capxStateService.state.get(junctionName).intersectionResult | async).zone3_east_vc | vcStyle"/>
       <text transform="translate(643.9 97.67) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">{{(capxStateService.state.get(junctionName).intersectionResult | async).zone3_east_vc}}</text>
       <text transform="translate(702.91 97.88) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">V / C</text>
       <text transform="translate(655.67 20.81)" style="font-size: 24px;font-family: OpenSans, Open Sans">Zone 3</text>
diff --git a/projects/capx/src/app/capx/components/junctions/intersections/quadrant-roadway-intersection-south-east-junction/design/quadrant-roadway-intersection-south-east-design.component.html b/projects/capx/src/app/capx/components/junctions/intersections/quadrant-roadway-intersection-south-east-junction/design/quadrant-roadway-intersection-south-east-design.component.html
index 30035fb..0cac1fc 100644
--- a/projects/capx/src/app/capx/components/junctions/intersections/quadrant-roadway-intersection-south-east-junction/design/quadrant-roadway-intersection-south-east-design.component.html
+++ b/projects/capx/src/app/capx/components/junctions/intersections/quadrant-roadway-intersection-south-east-junction/design/quadrant-roadway-intersection-south-east-design.component.html
@@ -23,7 +23,7 @@
       <rect x="23.65" y="648.22" width="126" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="capxStateService.getClvRangeColor((capxStateService.state.get(junctionName).intersectionResult | async).zone2_south_clv)"/>
       <text transform="translate(57.05 675.96) scale(1.08 1)" style="font-size: 27px;fill: #231f20;font-family: OpenSans, Open Sans">{{(capxStateService.state.get(junctionName).intersectionResult | async).zone2_south_clv}}</text>
       <rect x="23.65" y="686.72" width="126" height="38.5" style="fill: #fff;stroke: #231f20;stroke-miterlimit: 10"/>
-      <rect x="23.65" y="686.72" width="63" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="capxStateService.getClvRangeColor((capxStateService.state.get(junctionName).intersectionResult | async).zone2_south_clv)"/>
+      <rect x="23.65" y="686.72" width="63" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="(capxStateService.state.get(junctionName).intersectionResult | async).zone2_south_vc | vcStyle"/>
       <text transform="translate(36.9 712.59) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">{{(capxStateService.state.get(junctionName).intersectionResult | async).zone2_south_vc}}</text>
       <text transform="translate(95.91 712.8) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">V / C</text>
       <text transform="translate(48.67 635.72)" style="font-size: 24px;font-family: OpenSans, Open Sans">Zone 2</text>
@@ -32,7 +32,7 @@
       <rect x="0.5" y="33.07" width="126" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="capxStateService.getClvRangeColor((capxStateService.state.get(junctionName).intersectionResult | async).zone5_center_clv)"/>
       <text transform="translate(33.9 60.8) scale(1.08 1)" style="font-size: 27px;fill: #231f20;font-family: OpenSans, Open Sans">{{(capxStateService.state.get(junctionName).intersectionResult | async).zone5_center_clv}}</text>
       <rect x="0.5" y="71.57" width="126" height="38.5" style="fill: #fff;stroke: #231f20;stroke-miterlimit: 10"/>
-      <rect x="0.5" y="71.57" width="63" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="capxStateService.getClvRangeColor((capxStateService.state.get(junctionName).intersectionResult | async).zone5_center_clv)"/>
+      <rect x="0.5" y="71.57" width="63" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="(capxStateService.state.get(junctionName).intersectionResult | async).zone5_center_vc | vcStyle"/>
       <text transform="translate(13.76 97.43) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">{{(capxStateService.state.get(junctionName).intersectionResult | async).zone5_center_vc}}</text>
       <text transform="translate(72.76 97.64) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">V / C</text>
       <text transform="translate(25.52 20.57)" style="font-size: 24px;font-family: OpenSans, Open Sans">Zone 5</text>
@@ -41,7 +41,7 @@
       <rect x="630.65" y="33.31" width="126" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="capxStateService.getClvRangeColor((capxStateService.state.get(junctionName).intersectionResult | async).zone3_east_clv)"/>
       <text transform="translate(664.05 61.04) scale(1.08 1)" style="font-size: 27px;fill: #231f20;font-family: OpenSans, Open Sans">{{(capxStateService.state.get(junctionName).intersectionResult | async).zone3_east_clv}}</text>
       <rect x="630.65" y="71.81" width="126" height="38.5" style="fill: #fff;stroke: #231f20;stroke-miterlimit: 10"/>
-      <rect x="630.65" y="71.81" width="63" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="capxStateService.getClvRangeColor((capxStateService.state.get(junctionName).intersectionResult | async).zone3_east_clv)"/>
+      <rect x="630.65" y="71.81" width="63" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="(capxStateService.state.get(junctionName).intersectionResult | async).zone3_east_vc | vcStyle"/>
       <text transform="translate(643.9 97.67) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">{{(capxStateService.state.get(junctionName).intersectionResult | async).zone3_east_vc}}</text>
       <text transform="translate(702.91 97.88) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">V / C</text>
       <text transform="translate(655.67 20.81)" style="font-size: 24px;font-family: OpenSans, Open Sans">Zone 3</text>
diff --git a/projects/capx/src/app/capx/components/junctions/intersections/quadrant-roadway-intersection-south-west-junction/design/quadrant-roadway-intersection-south-west-design.component.html b/projects/capx/src/app/capx/components/junctions/intersections/quadrant-roadway-intersection-south-west-junction/design/quadrant-roadway-intersection-south-west-design.component.html
index 1eef98b..f5d5f48 100644
--- a/projects/capx/src/app/capx/components/junctions/intersections/quadrant-roadway-intersection-south-west-junction/design/quadrant-roadway-intersection-south-west-design.component.html
+++ b/projects/capx/src/app/capx/components/junctions/intersections/quadrant-roadway-intersection-south-west-junction/design/quadrant-roadway-intersection-south-west-design.component.html
@@ -16,7 +16,7 @@
         <rect x="703.55" y="617.07" width="126" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="capxStateService.getClvRangeColor((capxStateService.state.get(junctionName).intersectionResult | async).zone2_south_clv)"/>
         <text transform="translate(736.95 644.8) scale(1.08 1)" style="font-size: 27px;fill: #231f20;font-family: OpenSans, Open Sans">{{(capxStateService.state.get(junctionName).intersectionResult | async).zone2_south_clv}}</text>
         <rect x="703.55" y="655.57" width="126" height="38.5" style="fill: #fff;stroke: #231f20;stroke-miterlimit: 10"/>
-        <rect x="703.55" y="655.57" width="63" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="capxStateService.getClvRangeColor((capxStateService.state.get(junctionName).intersectionResult | async).zone2_south_clv)"/>
+        <rect x="703.55" y="655.57" width="63" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="(capxStateService.state.get(junctionName).intersectionResult | async).zone2_south_vc | vcStyle"/>
         <text transform="translate(716.81 681.43) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">{{(capxStateService.state.get(junctionName).intersectionResult | async).zone2_south_vc}}</text>
         <text transform="translate(775.81 681.64) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">V / C</text>
         <text transform="translate(728.57 604.57)" style="font-size: 24px;font-family: OpenSans, Open Sans">Zone 2</text>
@@ -25,7 +25,7 @@
         <rect x="69.55" y="37.98" width="126" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="capxStateService.getClvRangeColor((capxStateService.state.get(junctionName).intersectionResult | async).zone4_west_clv)"/>
         <text transform="translate(102.95 65.71) scale(1.08 1)" style="font-size: 27px;fill: #231f20;font-family: OpenSans, Open Sans">{{(capxStateService.state.get(junctionName).intersectionResult | async).zone4_west_clv}}</text>
         <rect x="69.55" y="76.48" width="126" height="38.5" style="fill: #fff;stroke: #231f20;stroke-miterlimit: 10"/>
-        <rect x="69.55" y="76.48" width="63" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="capxStateService.getClvRangeColor((capxStateService.state.get(junctionName).intersectionResult | async).zone4_west_clv)"/>
+        <rect x="69.55" y="76.48" width="63" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="(capxStateService.state.get(junctionName).intersectionResult | async).zone4_west_vc | vcStyle"/>
         <text transform="translate(82.81 102.34) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">{{(capxStateService.state.get(junctionName).intersectionResult | async).zone4_west_vc}}</text>
         <text transform="translate(141.81 102.55) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">V / C</text>
         <text transform="translate(94.57 25.48)" style="font-size: 24px;font-family: OpenSans, Open Sans">Zone 4</text>
@@ -34,7 +34,7 @@
         <rect x="437.55" y="33.07" width="126" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="capxStateService.getClvRangeColor((capxStateService.state.get(junctionName).intersectionResult | async).zone5_center_clv)"/>
         <text transform="translate(470.95 60.8) scale(1.08 1)" style="font-size: 27px;fill: #231f20;font-family: OpenSans, Open Sans">{{(capxStateService.state.get(junctionName).intersectionResult | async).zone5_center_clv}}</text>
         <rect x="437.55" y="71.57" width="126" height="38.5" style="fill: #fff;stroke: #231f20;stroke-miterlimit: 10"/>
-        <rect x="437.55" y="71.57" width="63" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="capxStateService.getClvRangeColor((capxStateService.state.get(junctionName).intersectionResult | async).zone5_center_clv)"/>
+        <rect x="437.55" y="71.57" width="63" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="(capxStateService.state.get(junctionName).intersectionResult | async).zone5_center_vc | vcStyle"/>
         <text transform="translate(450.81 97.43) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">{{(capxStateService.state.get(junctionName).intersectionResult | async).zone5_center_vc}}</text>
         <text transform="translate(509.81 97.64) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">V / C</text>
         <text transform="translate(462.57 20.57)" style="font-size: 24px;font-family: OpenSans, Open Sans">Zone 5</text>
diff --git a/projects/capx/src/app/capx/components/junctions/intersections/restricted-crossing-uturn-intersection-east-west-junction/design/restricted-crossing-uturn-intersection-east-west-design.component.html b/projects/capx/src/app/capx/components/junctions/intersections/restricted-crossing-uturn-intersection-east-west-junction/design/restricted-crossing-uturn-intersection-east-west-design.component.html
index b9c80c2..93d7553 100644
--- a/projects/capx/src/app/capx/components/junctions/intersections/restricted-crossing-uturn-intersection-east-west-junction/design/restricted-crossing-uturn-intersection-east-west-design.component.html
+++ b/projects/capx/src/app/capx/components/junctions/intersections/restricted-crossing-uturn-intersection-east-west-junction/design/restricted-crossing-uturn-intersection-east-west-design.component.html
@@ -18,7 +18,7 @@
       <rect x="449.92" y="36.07" width="126" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="capxStateService.getClvRangeColor((capxStateService.state.get(junctionName).intersectionResult | async).zone3_east_clv)"/>
       <text transform="translate(483.33 63.8) scale(1.08 1)" style="font-size: 27px;fill: #231f20;font-family: OpenSans, Open Sans">{{(capxStateService.state.get(junctionName).intersectionResult | async).zone3_east_clv}}</text>
       <rect x="449.92" y="74.57" width="126" height="38.5" style="fill: #fff;stroke: #231f20;stroke-miterlimit: 10"/>
-      <rect x="449.92" y="74.57" width="63" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="capxStateService.getClvRangeColor((capxStateService.state.get(junctionName).intersectionResult | async).zone3_east_clv)"/>
+      <rect x="449.92" y="74.57" width="63" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="(capxStateService.state.get(junctionName).intersectionResult | async).zone3_east_vc | vcStyle"/>
       <text transform="translate(463.18 100.43) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">{{(capxStateService.state.get(junctionName).intersectionResult | async).zone3_east_vc}}</text>
       <text transform="translate(522.18 100.64) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">V / C</text>
       <text transform="translate(474.95 23.57)" style="font-size: 24px;font-family: OpenSans, Open Sans">Zone 3</text>
@@ -27,7 +27,7 @@
       <rect x="42.92" y="267.98" width="126" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="capxStateService.getClvRangeColor((capxStateService.state.get(junctionName).intersectionResult | async).zone4_west_clv)"/>
       <text transform="translate(76.33 295.71) scale(1.08 1)" style="font-size: 27px;fill: #231f20;font-family: OpenSans, Open Sans">{{(capxStateService.state.get(junctionName).intersectionResult | async).zone4_west_clv}}</text>
       <rect x="42.92" y="306.48" width="126" height="38.5" style="fill: #fff;stroke: #231f20;stroke-miterlimit: 10"/>
-      <rect x="42.92" y="306.48" width="63" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="capxStateService.getClvRangeColor((capxStateService.state.get(junctionName).intersectionResult | async).zone4_west_clv)"/>
+      <rect x="42.92" y="306.48" width="63" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="(capxStateService.state.get(junctionName).intersectionResult | async).zone4_west_vc | vcStyle"/>
       <text transform="translate(56.18 332.34) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">{{(capxStateService.state.get(junctionName).intersectionResult | async).zone4_west_vc}}</text>
       <text transform="translate(115.18 332.55) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">V / C</text>
       <text transform="translate(67.95 255.48)" style="font-size: 24px;font-family: OpenSans, Open Sans">Zone 4</text>
@@ -36,7 +36,7 @@
       <rect x="392.92" y="267.07" width="126" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="capxStateService.getClvRangeColor((capxStateService.state.get(junctionName).intersectionResult | async).zone2_south_clv)"/>
       <text transform="translate(426.33 294.8) scale(1.08 1)" style="font-size: 27px;fill: #231f20;font-family: OpenSans, Open Sans">{{(capxStateService.state.get(junctionName).intersectionResult | async).zone2_south_clv}}</text>
       <rect x="392.92" y="305.57" width="126" height="38.5" style="fill: #fff;stroke: #231f20;stroke-miterlimit: 10"/>
-      <rect x="392.92" y="305.57" width="63" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="capxStateService.getClvRangeColor((capxStateService.state.get(junctionName).intersectionResult | async).zone2_south_clv)"/>
+      <rect x="392.92" y="305.57" width="63" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="(capxStateService.state.get(junctionName).intersectionResult | async).zone2_south_vc | vcStyle"/>
       <text transform="translate(406.18 331.43) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">{{(capxStateService.state.get(junctionName).intersectionResult | async).zone2_south_vc}}</text>
       <text transform="translate(465.18 331.64) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">V / C</text>
       <text transform="translate(417.95 254.57)" style="font-size: 24px;font-family: OpenSans, Open Sans">Zone 2</text>
@@ -45,7 +45,7 @@
       <rect x="110.92" y="33.07" width="126" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="capxStateService.getClvRangeColor((capxStateService.state.get(junctionName).intersectionResult | async).zone1_north_clv)"/>
       <text transform="translate(144.33 60.8) scale(1.08 1)" style="font-size: 27px;fill: #231f20;font-family: OpenSans, Open Sans">{{(capxStateService.state.get(junctionName).intersectionResult | async).zone1_north_clv}}</text>
       <rect x="110.92" y="71.57" width="126" height="38.5" style="fill: #fff;stroke: #231f20;stroke-miterlimit: 10"/>
-      <rect x="110.92" y="71.57" width="63" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="capxStateService.getClvRangeColor((capxStateService.state.get(junctionName).intersectionResult | async).zone1_north_clv)"/>
+      <rect x="110.92" y="71.57" width="63" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="(capxStateService.state.get(junctionName).intersectionResult | async).zone1_north_vc | vcStyle"/>
       <text transform="translate(124.18 97.43) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">{{(capxStateService.state.get(junctionName).intersectionResult | async).zone1_north_vc}}</text>
       <text transform="translate(183.18 97.64) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">V / C</text>
       <text transform="translate(135.95 20.57)" style="font-size: 24px;font-family: OpenSans, Open Sans">Zone 1</text>
diff --git a/projects/capx/src/app/capx/components/junctions/intersections/restricted-crossing-uturn-intersection-north-south-junction/design/restricted-crossing-uturn-intersection-north-south-design.component.html b/projects/capx/src/app/capx/components/junctions/intersections/restricted-crossing-uturn-intersection-north-south-junction/design/restricted-crossing-uturn-intersection-north-south-design.component.html
index 317b8ba..da012a4 100644
--- a/projects/capx/src/app/capx/components/junctions/intersections/restricted-crossing-uturn-intersection-north-south-junction/design/restricted-crossing-uturn-intersection-north-south-design.component.html
+++ b/projects/capx/src/app/capx/components/junctions/intersections/restricted-crossing-uturn-intersection-north-south-junction/design/restricted-crossing-uturn-intersection-north-south-design.component.html
@@ -18,7 +18,7 @@
         <rect x="282.5" y="200.4" width="126" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="capxStateService.getClvRangeColor((capxStateService.state.get(junctionName).intersectionResult | async).zone3_east_clv)"/>
         <text transform="translate(315.9 228.13) scale(1.08 1)" style="font-size: 27px;fill: #231f20;font-family: OpenSans, Open Sans">{{(capxStateService.state.get(junctionName).intersectionResult | async).zone3_east_clv}}</text>
         <rect x="282.5" y="238.9" width="126" height="38.5" style="fill: #fff;stroke: #231f20;stroke-miterlimit: 10"/>
-        <rect x="282.5" y="238.9" width="63" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="capxStateService.getClvRangeColor((capxStateService.state.get(junctionName).intersectionResult | async).zone3_east_clv)"/>
+        <rect x="282.5" y="238.9" width="63" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="(capxStateService.state.get(junctionName).intersectionResult | async).zone3_east_vc | vcStyle"/>
         <text transform="translate(295.76 264.76) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">{{(capxStateService.state.get(junctionName).intersectionResult | async).zone3_east_vc}}</text>
         <text transform="translate(354.76 264.97) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">V / C</text>
         <text transform="translate(307.52 187.9)" style="font-size: 24px;font-family: OpenSans, Open Sans">Zone 3</text>
@@ -27,7 +27,7 @@
         <rect x="0.5" y="420.31" width="126" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="capxStateService.getClvRangeColor((capxStateService.state.get(junctionName).intersectionResult | async).zone4_west_clv)"/>
         <text transform="translate(33.9 448.04) scale(1.08 1)" style="font-size: 27px;fill: #231f20;font-family: OpenSans, Open Sans">{{(capxStateService.state.get(junctionName).intersectionResult | async).zone4_west_clv}}</text>
         <rect x="0.5" y="458.81" width="126" height="38.5" style="fill: #fff;stroke: #231f20;stroke-miterlimit: 10"/>
-        <rect x="0.5" y="458.81" width="63" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="capxStateService.getClvRangeColor((capxStateService.state.get(junctionName).intersectionResult | async).zone4_west_clv)"/>
+        <rect x="0.5" y="458.81" width="63" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="(capxStateService.state.get(junctionName).intersectionResult | async).zone4_west_vc | vcStyle"/>
         <text transform="translate(13.76 484.67) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">{{(capxStateService.state.get(junctionName).intersectionResult | async).zone4_west_vc}}</text>
         <text transform="translate(72.76 484.88) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">V / C</text>
         <text transform="translate(25.52 407.81)" style="font-size: 24px;font-family: OpenSans, Open Sans">Zone 4</text>
@@ -36,7 +36,7 @@
         <rect x="288.5" y="574.4" width="126" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="capxStateService.getClvRangeColor((capxStateService.state.get(junctionName).intersectionResult | async).zone2_south_clv)"/>
         <text transform="translate(321.9 602.13) scale(1.08 1)" style="font-size: 27px;fill: #231f20;font-family: OpenSans, Open Sans">{{(capxStateService.state.get(junctionName).intersectionResult | async).zone2_south_clv}}</text>
         <rect x="288.5" y="612.9" width="126" height="38.5" style="fill: #fff;stroke: #231f20;stroke-miterlimit: 10"/>
-        <rect x="288.5" y="612.9" width="63" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="capxStateService.getClvRangeColor((capxStateService.state.get(junctionName).intersectionResult | async).zone2_south_clv)"/>
+        <rect x="288.5" y="612.9" width="63" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="(capxStateService.state.get(junctionName).intersectionResult | async).zone2_south_vc | vcStyle"/>
         <text transform="translate(301.76 638.76) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">{{(capxStateService.state.get(junctionName).intersectionResult | async).zone2_south_vc}}</text>
         <text transform="translate(360.76 638.97) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">V / C</text>
         <text transform="translate(313.52 561.9)" style="font-size: 24px;font-family: OpenSans, Open Sans">Zone 2</text>
@@ -45,7 +45,7 @@
         <rect x="281.5" y="42.4" width="126" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="capxStateService.getClvRangeColor((capxStateService.state.get(junctionName).intersectionResult | async).zone1_north_clv)"/>
         <text transform="translate(314.9 70.13) scale(1.08 1)" style="font-size: 27px;fill: #231f20;font-family: OpenSans, Open Sans">{{(capxStateService.state.get(junctionName).intersectionResult | async).zone1_north_clv}}</text>
         <rect x="281.5" y="80.9" width="126" height="38.5" style="fill: #fff;stroke: #231f20;stroke-miterlimit: 10"/>
-        <rect x="281.5" y="80.9" width="63" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="capxStateService.getClvRangeColor((capxStateService.state.get(junctionName).intersectionResult | async).zone1_north_clv)"/>
+        <rect x="281.5" y="80.9" width="63" height="38.5" style="stroke: #231f20;stroke-miterlimit: 10" [attr.fill]="(capxStateService.state.get(junctionName).intersectionResult | async).zone1_north_vc | vcStyle"/>
         <text transform="translate(294.76 106.76) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">{{(capxStateService.state.get(junctionName).intersectionResult | async).zone1_north_vc}}</text>
         <text transform="translate(353.76 106.97) scale(1.08 1)" style="font-size: 19px;fill: #231f20;font-family: OpenSans, Open Sans">V / C</text>
         <text transform="translate(306.52 29.9)" style="font-size: 24px;font-family: OpenSans, Open Sans">Zone 1</text>
diff --git a/projects/capx/src/app/capx/pipes/vc-style.pipe.ts b/projects/capx/src/app/capx/pipes/vc-style.pipe.ts
index 1734228..0ce3251 100644
--- a/projects/capx/src/app/capx/pipes/vc-style.pipe.ts
+++ b/projects/capx/src/app/capx/pipes/vc-style.pipe.ts
@@ -5,8 +5,20 @@ import { Pipe, PipeTransform } from '@angular/core';
 })
 export class VcStylePipe implements PipeTransform {
 
-  transform(value: unknown, ...args: unknown[]): unknown {
-    return null;
+  transform(cv: number): string {
+    let color = '#666';
+    if (cv !== null) {
+      if (cv < 0.75) {
+        color = '#00FF00';
+      } else if (cv >= 0.75 && cv < 0.875) {
+        color = '#FFFF00';
+      } else if (cv >= 0.875 && cv < 1) {
+        color = '#FFA500';
+      } else if (cv > 1) {
+        color = '#FF0000';
+      }
+    }
+    return color;
   }
 
 }
diff --git a/projects/capx/src/app/capx/services/capx-state.service.ts b/projects/capx/src/app/capx/services/capx-state.service.ts
index 08e452d..9c8d578 100644
--- a/projects/capx/src/app/capx/services/capx-state.service.ts
+++ b/projects/capx/src/app/capx/services/capx-state.service.ts
@@ -831,6 +831,7 @@ export class CapxStateService {
     }
   }
 
+
   public getCurrentClvRange(zone_all_clv: string | number | null): number | null {
     // update range text
     console.log(zone_all_clv);