npm - nhsuk-tools-chart-components-react - Versions diffs - 2.1.0 → 2.3.0 - Mend

nhsuk-tools-chart-components-react 2.1.0 → 2.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (29) hide show

package/dist/cjs/bundle.css CHANGED Viewed

@@ -1,119 +1,96 @@
-.nhsuk-chart-legend-card {
-  max-width: 250px;
-}
-.nhsuk-chart-legend-key-wrapper {
+.nhsuk-bar-slider-graph {
+  position: relative;
+  outline: 1px solid black;
+  margin-top: 20px;
   display: flex;
-}
-.nhsuk-chart-legend-key {
-  width: 25px;
-  height: 25px;
-  margin-right: 10px;
-  border-bottom: 1px solid white;
-  box-shadow: 0px 2px 0px 0px black;
-  margin-bottom: 3px;
-}
-.nhsuk-bar-slider-arrow-marker {
-  position: absolute;
-  height: 16px;
-  width: 16px;
-  margin: -9px 0 -8px -8px;
+  height: 28px;
 }
 @media (min-width: 320px) and (max-width: 641px) {
-  .nhsuk-bar-slider-arrow-marker {
-    height: 12px;
-    width: 12px;
-    margin: -9px 0 -6px -6px;
+  .nhsuk-bar-slider-graph {
+    height: 24px;
   }
 }
-.nhsuk-bar-slider-label-align-left {
-  display: flex;
-  justify-content: left;
-}
-.nhsuk-bar-slider-label-align-center {
-  display: flex;
-  justify-content: center;
+.nhsuk-bmi-legend-key-classification-underweight, .nhsuk-bmi-classification-underweight {
+  background: #330072;
 }
-.nhsuk-bar-slider-label-align-right {
-  display: flex;
-  justify-content: right;
+.nhsuk-bmi-legend-key-classification-healthy, .nhsuk-bmi-classification-healthy {
+  background: repeating-linear-gradient(-45deg, #30b4ab, #30b4ab 4.5px, #00a499 4.5px, #00a499 9px);
 }
-.nhsuk-bar-slider-label-marker {
-  position: relative;
-  height: 25px;
-  width: auto;
-  white-space: nowrap;
-  margin-top: -30px;
+.nhsuk-bmi-legend-key-classification-overweight, .nhsuk-bmi-classification-overweight {
+  background: #ffb81c;
 }
-.nhsuk-bar-slider-value-marker {
-  position: relative;
-  font-weight: bold;
-  margin-left: 5px;
-  margin-right: 2px;
+.nhsuk-bmi-legend-key-classification-obese, .nhsuk-bmi-classification-obese {
+  background: repeating-linear-gradient(45deg, #da5147, #da5147 4.5px, #d5281b 4.5px, #d5281b 9px);
 }
-.nhsuk-bmi-classification-underweight, .nhsuk-bmi-legend-key-classification-underweight {
-  background: #330072;
+.nhsuk-bmi-classification-obese, .nhsuk-bmi-classification-overweight, .nhsuk-bmi-classification-healthy, .nhsuk-bmi-classification-underweight {
+  position: absolute;
+  bottom: 0%;
+  outline: 1px solid black;
+  border-right: 1px solid black;
+  box-shadow: -1px 0px white inset, 2px 0px white, 0px -2px white;
+  height: 28px;
 }
-.nhsuk-bmi-classification-healthy, .nhsuk-bmi-legend-key-classification-healthy {
-  background: repeating-linear-gradient(-45deg, #30b4ab, #30b4ab 4.5px, #00a499 4.5px, #00a499 9px);
+@media (min-width: 320px) and (max-width: 641px) {
+  .nhsuk-bmi-classification-obese, .nhsuk-bmi-classification-overweight, .nhsuk-bmi-classification-healthy, .nhsuk-bmi-classification-underweight {
+    height: 24px;
+  }
 }
-.nhsuk-bmi-classification-overweight, .nhsuk-bmi-legend-key-classification-overweight {
-  background: #ffb81c;
+.nhsuk-bmi-classification-underweight {
+  z-index: 3;
 }
-.nhsuk-bmi-classification-obese, .nhsuk-bmi-legend-key-classification-obese {
-  background: repeating-linear-gradient(45deg, #da5147, #da5147 4.5px, #d5281b 4.5px, #d5281b 9px);
+.nhsuk-bmi-classification-healthy {
+  z-index: 2;
 }
-.nhsuk-bmi-legend-key-classification-obese {
-  border-bottom: none;
-  box-shadow: none;
+.nhsuk-bmi-classification-overweight {
+  z-index: 1;
 }
-.nhsuk-bmi-legend-key-marker {
-  border-bottom: none;
+.nhsuk-bmi-classification-obese {
+  border-right: none;
   box-shadow: none;
 }
+.nhsuk-chart-legend-card {
+  max-width: 250px;
+}
-.nhsuk-bar-slider-graph {
-  position: relative;
-  outline: 1px solid black;
-  margin-top: 20px;
+.nhsuk-chart-legend-key-wrapper {
   display: flex;
-  height: 28px;
 }
-@media (min-width: 320px) and (max-width: 641px) {
-  .nhsuk-bar-slider-graph {
-    height: 24px;
-  }
+.nhsuk-chart-legend-key {
+  width: 25px;
+  height: 25px;
+  margin-right: 10px;
+  border-bottom: 1px solid white;
+  box-shadow: 0px 2px 0px 0px black;
+  margin-bottom: 3px;
 }
-.nhsuk-bmi-classification-underweight, .nhsuk-bmi-legend-key-classification-underweight {
+.nhsuk-bmi-legend-key-classification-underweight, .nhsuk-bmi-classification-underweight {
   background: #330072;
 }
-.nhsuk-bmi-classification-healthy, .nhsuk-bmi-legend-key-classification-healthy {
+.nhsuk-bmi-legend-key-classification-healthy, .nhsuk-bmi-classification-healthy {
   background: repeating-linear-gradient(-45deg, #30b4ab, #30b4ab 4.5px, #00a499 4.5px, #00a499 9px);
 }
-.nhsuk-bmi-classification-overweight, .nhsuk-bmi-legend-key-classification-overweight {
+.nhsuk-bmi-legend-key-classification-overweight, .nhsuk-bmi-classification-overweight {
   background: #ffb81c;
 }
-.nhsuk-bmi-classification-obese, .nhsuk-bmi-legend-key-classification-obese {
+.nhsuk-bmi-legend-key-classification-obese, .nhsuk-bmi-classification-obese {
   background: repeating-linear-gradient(45deg, #da5147, #da5147 4.5px, #d5281b 4.5px, #d5281b 9px);
 }
@@ -130,119 +107,86 @@
   }
 }
-.nhsuk-bmi-chart-marker {
-  position: absolute;
-  z-index: 4;
-  height: 24px;
-  width: 24px;
-  margin: 2px 0 -12px -12px;
-}
-@media (min-width: 320px) and (max-width: 641px) {
-  .nhsuk-bmi-chart-marker {
-    height: 20px;
-    width: 20px;
-    margin: 2px 0 -10px -10px;
-  }
-}
-.nhsuk-bp-classification-low, .nhsuk-bp-legend-key-classification-low {
+.nhsuk-bmi-legend-key-classification-underweight, .nhsuk-bmi-classification-underweight {
   background: #330072;
 }
-.nhsuk-bp-classification-healthy, .nhsuk-bp-legend-key-classification-healthy {
-  background: repeating-linear-gradient(-45deg, #59c3bc, #59c3bc 4.5px, #33b6ad 4.5px, #33b6ad 9px);
+.nhsuk-bmi-legend-key-classification-healthy, .nhsuk-bmi-classification-healthy {
+  background: repeating-linear-gradient(-45deg, #30b4ab, #30b4ab 4.5px, #00a499 4.5px, #00a499 9px);
 }
-.nhsuk-bp-classification-slightlyraised, .nhsuk-bp-legend-key-classification-slightlyraised {
+.nhsuk-bmi-legend-key-classification-overweight, .nhsuk-bmi-classification-overweight {
   background: #ffb81c;
 }
-.nhsuk-bp-classification-high, .nhsuk-bp-legend-key-classification-high {
-  background: repeating-linear-gradient(45deg, #e1746b, #e1746b 4.5px, #dd5349 4.5px, #dd5349 9px);
-}
-#nhsuk-bp-chart > figure {
-  margin: 0;
-}
-.nhsuk-bp-legend-key-wrapper {
-  display: flex;
-}
-.nhsuk-bp-legend-key-wrapper:last-child {
-  margin-top: 5px;
-}
-.nhsuk-bp-legend-display-card {
-  margin-top: 50px;
-  max-width: 300px;
+.nhsuk-bmi-legend-key-classification-obese, .nhsuk-bmi-classification-obese {
+  background: repeating-linear-gradient(45deg, #da5147, #da5147 4.5px, #d5281b 4.5px, #d5281b 9px);
 }
-.nhsuk-bp-legend-key-classification-low {
+.nhsuk-bmi-legend-key-classification-obese {
   border-bottom: none;
   box-shadow: none;
 }
-.nhsuk-bp-legend-key-marker {
+.nhsuk-bmi-legend-key-marker {
   border-bottom: none;
   box-shadow: none;
 }
-.nhsuk-bp-diastolic-axis-marker, .nhsuk-bp-systolic-axis-marker {
+.nhsuk-bar-slider-arrow-marker {
   position: absolute;
-  outline: 0.5px solid black;
+  height: 16px;
+  width: 16px;
+  margin: -9px 0 -8px -8px;
 }
-.nhsuk-bp-diastolic-axis-label, .nhsuk-bp-systolic-axis-label {
-  position: absolute;
+@media (min-width: 320px) and (max-width: 641px) {
+  .nhsuk-bar-slider-arrow-marker {
+    height: 12px;
+    width: 12px;
+    margin: -9px 0 -6px -6px;
+  }
 }
-.nhsuk-bp-systolic-axis-marker {
-  width: 5px;
-  left: -5px;
-}
-.nhsuk-bp-systolic-axis-marker:first-child {
-  bottom: -1px !important;
-}
-.nhsuk-bp-systolic-axis-marker:last-child {
-  bottom: calc(100% + 1px) !important;
+.nhsuk-bar-slider-label-align-left {
+  display: flex;
+  justify-content: left;
 }
-.nhsuk-bp-diastolic-axis-marker {
-  height: 5px;
-  bottom: -5px;
-}
-.nhsuk-bp-diastolic-axis-marker:first-child {
-  left: -1px !important;
-}
-.nhsuk-bp-diastolic-axis-marker:last-child {
-  left: calc(100% + 1px) !important;
+.nhsuk-bar-slider-label-align-center {
+  display: flex;
+  justify-content: center;
 }
-@media (max-width: 450px) {
-  .nhsuk-bp-diastolic-axis-marker-85 {
-    display: none;
-  }
+.nhsuk-bar-slider-label-align-right {
+  display: flex;
+  justify-content: right;
 }
-.nhsuk-bp-diastolic-axis-marker-90 {
-  display: none;
+.nhsuk-bar-slider-label-marker {
+  position: relative;
+  height: 25px;
+  width: auto;
+  white-space: nowrap;
+  margin-top: -30px;
 }
-@media (max-width: 450px) {
-  .nhsuk-bp-diastolic-axis-marker-90 {
-    display: block;
-  }
+.nhsuk-bar-slider-value-marker {
+  position: relative;
+  font-weight: bold;
+  margin-left: 5px;
+  margin-right: 2px;
 }
-.nhsuk-bp-systolic-axis-label {
-  left: -30px;
-  top: -10px;
-  width: 26px;
-  text-align: end;
+.nhsuk-bmi-axis-marker {
+  position: absolute;
+  outline: 0.5px solid black;
+  height: 5px;
+  bottom: -5px;
 }
-.nhsuk-bp-diastolic-axis-label {
+.nhsuk-bmi-axis-marker-label {
+  position: absolute;
   bottom: -25px;
   left: -10px;
   width: 20px;
@@ -250,6 +194,22 @@
 }
+.nhsuk-bmi-chart-marker {
+  position: absolute;
+  z-index: 4;
+  height: 24px;
+  width: 24px;
+  margin: 2px 0 -12px -12px;
+}
+@media (min-width: 320px) and (max-width: 641px) {
+  .nhsuk-bmi-chart-marker {
+    height: 20px;
+    width: 20px;
+    margin: 2px 0 -10px -10px;
+  }
+}
 .nhsuk-bp-graph {
   position: relative;
   margin-left: 20px;
@@ -320,65 +280,30 @@
   background: repeating-linear-gradient(45deg, #e1746b, #e1746b 4.5px, #dd5349 4.5px, #dd5349 9px);
 }
-.nhsuk-bp-region-boundary {
-  position: absolute;
-  bottom: 0%;
-  outline: 1px solid black;
-  border-top: 1px solid black;
-  border-right: 1px solid black;
-  box-shadow: -1px 1px white inset, 2px 0px white, 0px -2px white, 2px -2px white;
-  z-index: 5;
-  background: transparent;
+#nhsuk-bp-chart > figure {
+  margin: 0;
 }
-.nhsuk-bp-classification-low {
-  position: absolute;
-  bottom: 0%;
-  z-index: 3;
-}
-.nhsuk-bp-classification-healthy {
-  position: absolute;
-  bottom: 0%;
-  z-index: 2;
-}
-.nhsuk-bp-classification-slightlyraised {
-  position: absolute;
-  bottom: 0%;
-  z-index: 1;
-}
-.nhsuk-bp-classification-high {
-  position: absolute;
-  bottom: 0%;
-  z-index: 0;
+.nhsuk-bp-legend-key-wrapper {
+  display: flex;
 }
-.nhsuk-cbmi-classification-healthy, .nhsuk-cbmi-legend-key-classification-healthy {
-  background: repeating-linear-gradient(-45deg, #30b4ab, #30b4ab 4.5px, #00a499 4.5px, #00a499 9px);
+.nhsuk-bp-legend-key-wrapper:last-child {
+  margin-top: 5px;
 }
-.nhsuk-cbmi-classification-overweight, .nhsuk-cbmi-legend-key-classification-overweight {
-  background: #ffb81c;
+.nhsuk-bp-legend-display-card {
+  margin-top: 50px;
+  max-width: 300px;
 }
-.nhsuk-cbmi-classification-underweight, .nhsuk-cbmi-legend-key-classification-underweight {
-  background: #330072;
+.nhsuk-bp-legend-key-classification-low {
+  border-bottom: none;
+  box-shadow: none;
 }
-.nhsuk-cbmi-graph {
-  position: relative;
-  outline: 1px solid black;
-  margin-top: 20px;
-  display: flex;
-  height: 28px;
-}
-@media (min-width: 320px) and (max-width: 641px) {
-  .nhsuk-cbmi-graph {
-    height: 24px;
-  }
+.nhsuk-bp-legend-key-marker {
+  border-bottom: none;
+  box-shadow: none;
 }
 .nhsuk-bp-graph-cell {
@@ -397,76 +322,55 @@
   border-left: none;
 }
+.nhsuk-bp-classification-low, .nhsuk-bp-legend-key-classification-low {
+  background: #330072;
+}
-.nhsuk-cbmi-classification-healthy, .nhsuk-cbmi-legend-key-classification-healthy {
-  background: repeating-linear-gradient(-45deg, #30b4ab, #30b4ab 4.5px, #00a499 4.5px, #00a499 9px);
+.nhsuk-bp-classification-healthy, .nhsuk-bp-legend-key-classification-healthy {
+  background: repeating-linear-gradient(-45deg, #59c3bc, #59c3bc 4.5px, #33b6ad 4.5px, #33b6ad 9px);
 }
-.nhsuk-cbmi-classification-overweight, .nhsuk-cbmi-legend-key-classification-overweight {
+.nhsuk-bp-classification-slightlyraised, .nhsuk-bp-legend-key-classification-slightlyraised {
   background: #ffb81c;
 }
-.nhsuk-cbmi-classification-underweight, .nhsuk-cbmi-legend-key-classification-underweight {
-  background: #330072;
+.nhsuk-bp-classification-high, .nhsuk-bp-legend-key-classification-high {
+  background: repeating-linear-gradient(45deg, #e1746b, #e1746b 4.5px, #dd5349 4.5px, #dd5349 9px);
 }
-.nhsuk-cbmi-chart-arrow-marker {
+.nhsuk-bp-region-boundary {
   position: absolute;
-  z-index: 4;
-  height: 16px;
-  width: 16px;
-  margin: -9px 0 -8px -8px;
-}
-@media (min-width: 320px) and (max-width: 641px) {
-  .nhsuk-cbmi-chart-arrow-marker {
-    height: 12px;
-    width: 12px;
-    margin: -9px 0 -6px -6px;
-  }
-}
-.nhsuk-cbmi-chart-label-align-left {
-  display: flex;
-  justify-content: left;
-}
-.nhsuk-cbmi-chart-label-align-center {
-  display: flex;
-  justify-content: center;
+  bottom: 0%;
+  outline: 1px solid black;
+  border-top: 1px solid black;
+  border-right: 1px solid black;
+  box-shadow: -1px 1px white inset, 2px 0px white, 0px -2px white, 2px -2px white;
+  z-index: 5;
+  background: transparent;
 }
-.nhsuk-cbmi-chart-label-align-right {
-  display: flex;
-  justify-content: right;
+.nhsuk-bp-classification-low {
+  position: absolute;
+  bottom: 0%;
+  z-index: 3;
 }
-.nhsuk-cbmi-chart-label-marker {
-  position: relative;
-  height: 25px;
-  width: auto;
-  white-space: nowrap;
-  margin-top: -30px;
-  z-index: 4;
+.nhsuk-bp-classification-healthy {
+  position: absolute;
+  bottom: 0%;
+  z-index: 2;
 }
-.nhsuk-cbmi-chart-centile-marker {
-  position: relative;
-  font-weight: bold;
-  margin-left: 5px;
+.nhsuk-bp-classification-slightlyraised {
+  position: absolute;
+  bottom: 0%;
+  z-index: 1;
 }
-.nhsuk-cbmi-chart-axis-marker {
+.nhsuk-bp-classification-high {
   position: absolute;
-  margin-left: -1px;
-  border: 1.5px solid black;
-  box-shadow: 0px 0px white inset, 2px 0px white, -2px 0px white;
-  z-index: 4;
-  height: 28px;
-}
-@media (min-width: 320px) and (max-width: 641px) {
-  .nhsuk-cbmi-chart-axis-marker {
-    height: 24px;
-  }
+  bottom: 0%;
+  z-index: 0;
 }
 .nhsuk-cbmi-classification-healthy, .nhsuk-cbmi-legend-key-classification-healthy {
@@ -508,51 +412,83 @@
 }
-.nhsuk-cbmi-classification-healthy, .nhsuk-cbmi-legend-key-classification-healthy {
-  background: repeating-linear-gradient(-45deg, #30b4ab, #30b4ab 4.5px, #00a499 4.5px, #00a499 9px);
+.nhsuk-bp-graph-marker {
+  position: absolute;
+  z-index: 6;
+  height: 24px;
+  width: 24px;
+  margin: 0 0 -12px -12px;
 }
-.nhsuk-cbmi-classification-overweight, .nhsuk-cbmi-legend-key-classification-overweight {
-  background: #ffb81c;
+@media (max-width: 320px) {
+  .nhsuk-bp-graph-marker {
+    height: 20px;
+    width: 20px;
+    margin: 0 0 -10px -10px;
+  }
+}
+@media (min-width: 320px) and (max-width: 641px) {
+  .nhsuk-bp-graph-marker {
+    height: 22px;
+    width: 22px;
+    margin: 0 0 -11px -11px;
+  }
 }
-.nhsuk-cbmi-classification-underweight, .nhsuk-cbmi-legend-key-classification-underweight {
-  background: #330072;
+.nhsuk-bp-diastolic-axis-marker, .nhsuk-bp-systolic-axis-marker {
+  position: absolute;
+  outline: 0.5px solid black;
 }
-.nhsuk-cbmi-classification-overweight, .nhsuk-cbmi-classification-healthy, .nhsuk-cbmi-classification-underweight {
+.nhsuk-bp-diastolic-axis-label, .nhsuk-bp-systolic-axis-label {
   position: absolute;
-  bottom: 0%;
-  outline: 1px solid black;
-  height: 28px;
 }
-@media (min-width: 320px) and (max-width: 641px) {
-  .nhsuk-cbmi-classification-overweight, .nhsuk-cbmi-classification-healthy, .nhsuk-cbmi-classification-underweight {
-    height: 24px;
-  }
+.nhsuk-bp-systolic-axis-marker {
+  width: 5px;
+  left: -5px;
+}
+.nhsuk-bp-systolic-axis-marker:first-child {
+  bottom: -1px !important;
+}
+.nhsuk-bp-systolic-axis-marker:last-child {
+  bottom: calc(100% + 1px) !important;
 }
-.nhsuk-cbmi-classification-underweight {
-  z-index: 3;
+.nhsuk-bp-diastolic-axis-marker {
+  height: 5px;
+  bottom: -5px;
+}
+.nhsuk-bp-diastolic-axis-marker:first-child {
+  left: -1px !important;
+}
+.nhsuk-bp-diastolic-axis-marker:last-child {
+  left: calc(100% + 1px) !important;
 }
-.nhsuk-cbmi-classification-healthy {
-  z-index: 2;
+@media (max-width: 450px) {
+  .nhsuk-bp-diastolic-axis-marker-85 {
+    display: none;
+  }
 }
-.nhsuk-cbmi-classification-overweight {
-  z-index: 1;
+.nhsuk-bp-diastolic-axis-marker-90 {
+  display: none;
+}
+@media (max-width: 450px) {
+  .nhsuk-bp-diastolic-axis-marker-90 {
+    display: block;
+  }
 }
-.nhsuk-bmi-axis-marker {
-  position: absolute;
-  outline: 0.5px solid black;
-  height: 5px;
-  bottom: -5px;
+.nhsuk-bp-systolic-axis-label {
+  left: -30px;
+  top: -10px;
+  width: 26px;
+  text-align: end;
 }
-.nhsuk-bmi-axis-marker-label {
-  position: absolute;
+.nhsuk-bp-diastolic-axis-label {
   bottom: -25px;
   left: -10px;
   width: 20px;
@@ -560,37 +496,40 @@
 }
-.nhsuk-bp-graph-marker {
-  position: absolute;
-  z-index: 6;
-  height: 24px;
-  width: 24px;
-  margin: 0 0 -12px -12px;
+.nhsuk-cbmi-classification-healthy, .nhsuk-cbmi-legend-key-classification-healthy {
+  background: repeating-linear-gradient(-45deg, #30b4ab, #30b4ab 4.5px, #00a499 4.5px, #00a499 9px);
 }
-@media (max-width: 320px) {
-  .nhsuk-bp-graph-marker {
-    height: 20px;
-    width: 20px;
-    margin: 0 0 -10px -10px;
-  }
+.nhsuk-cbmi-classification-overweight, .nhsuk-cbmi-legend-key-classification-overweight {
+  background: #ffb81c;
+}
+.nhsuk-cbmi-classification-underweight, .nhsuk-cbmi-legend-key-classification-underweight {
+  background: #330072;
+}
+.nhsuk-cbmi-graph {
+  position: relative;
+  outline: 1px solid black;
+  margin-top: 20px;
+  display: flex;
+  height: 28px;
 }
 @media (min-width: 320px) and (max-width: 641px) {
-  .nhsuk-bp-graph-marker {
-    height: 22px;
-    width: 22px;
-    margin: 0 0 -11px -11px;
+  .nhsuk-cbmi-graph {
+    height: 24px;
   }
 }
-.nhsuk-cbmi-legend-key-classification-healthy, .nhsuk-cbmi-classification-healthy {
+.nhsuk-cbmi-classification-healthy, .nhsuk-cbmi-legend-key-classification-healthy {
   background: repeating-linear-gradient(-45deg, #30b4ab, #30b4ab 4.5px, #00a499 4.5px, #00a499 9px);
 }
-.nhsuk-cbmi-legend-key-classification-overweight, .nhsuk-cbmi-classification-overweight {
+.nhsuk-cbmi-classification-overweight, .nhsuk-cbmi-legend-key-classification-overweight {
   background: #ffb81c;
 }
-.nhsuk-cbmi-legend-key-classification-underweight, .nhsuk-cbmi-classification-underweight {
+.nhsuk-cbmi-classification-underweight, .nhsuk-cbmi-legend-key-classification-underweight {
   background: #330072;
 }
@@ -619,49 +558,110 @@
 }
-.nhsuk-bmi-classification-underweight, .nhsuk-bmi-legend-key-classification-underweight {
+.nhsuk-cbmi-classification-healthy, .nhsuk-cbmi-legend-key-classification-healthy {
+  background: repeating-linear-gradient(-45deg, #30b4ab, #30b4ab 4.5px, #00a499 4.5px, #00a499 9px);
+}
+.nhsuk-cbmi-classification-overweight, .nhsuk-cbmi-legend-key-classification-overweight {
+  background: #ffb81c;
+}
+.nhsuk-cbmi-classification-underweight, .nhsuk-cbmi-legend-key-classification-underweight {
   background: #330072;
 }
-.nhsuk-bmi-classification-healthy, .nhsuk-bmi-legend-key-classification-healthy {
+.nhsuk-cbmi-chart-arrow-marker {
+  position: absolute;
+  z-index: 4;
+  height: 16px;
+  width: 16px;
+  margin: -9px 0 -8px -8px;
+}
+@media (min-width: 320px) and (max-width: 641px) {
+  .nhsuk-cbmi-chart-arrow-marker {
+    height: 12px;
+    width: 12px;
+    margin: -9px 0 -6px -6px;
+  }
+}
+.nhsuk-cbmi-chart-label-align-left {
+  display: flex;
+  justify-content: left;
+}
+.nhsuk-cbmi-chart-label-align-center {
+  display: flex;
+  justify-content: center;
+}
+.nhsuk-cbmi-chart-label-align-right {
+  display: flex;
+  justify-content: right;
+}
+.nhsuk-cbmi-chart-label-marker {
+  position: relative;
+  height: 25px;
+  width: auto;
+  white-space: nowrap;
+  margin-top: -30px;
+  z-index: 4;
+}
+.nhsuk-cbmi-chart-centile-marker {
+  position: relative;
+  font-weight: bold;
+  margin-left: 5px;
+}
+.nhsuk-cbmi-chart-axis-marker {
+  position: absolute;
+  margin-left: -1px;
+  border: 1.5px solid black;
+  box-shadow: 0px 0px white inset, 2px 0px white, -2px 0px white;
+  z-index: 4;
+  height: 28px;
+}
+@media (min-width: 320px) and (max-width: 641px) {
+  .nhsuk-cbmi-chart-axis-marker {
+    height: 24px;
+  }
+}
+.nhsuk-cbmi-classification-healthy, .nhsuk-cbmi-legend-key-classification-healthy {
   background: repeating-linear-gradient(-45deg, #30b4ab, #30b4ab 4.5px, #00a499 4.5px, #00a499 9px);
 }
-.nhsuk-bmi-classification-overweight, .nhsuk-bmi-legend-key-classification-overweight {
+.nhsuk-cbmi-classification-overweight, .nhsuk-cbmi-legend-key-classification-overweight {
   background: #ffb81c;
 }
-.nhsuk-bmi-classification-obese, .nhsuk-bmi-legend-key-classification-obese {
-  background: repeating-linear-gradient(45deg, #da5147, #da5147 4.5px, #d5281b 4.5px, #d5281b 9px);
+.nhsuk-cbmi-classification-underweight, .nhsuk-cbmi-legend-key-classification-underweight {
+  background: #330072;
 }
-.nhsuk-bmi-classification-obese, .nhsuk-bmi-classification-overweight, .nhsuk-bmi-classification-healthy, .nhsuk-bmi-classification-underweight {
+.nhsuk-cbmi-classification-overweight, .nhsuk-cbmi-classification-healthy, .nhsuk-cbmi-classification-underweight {
   position: absolute;
   bottom: 0%;
   outline: 1px solid black;
-  border-right: 1px solid black;
-  box-shadow: -1px 0px white inset, 2px 0px white, 0px -2px white;
   height: 28px;
 }
 @media (min-width: 320px) and (max-width: 641px) {
-  .nhsuk-bmi-classification-obese, .nhsuk-bmi-classification-overweight, .nhsuk-bmi-classification-healthy, .nhsuk-bmi-classification-underweight {
+  .nhsuk-cbmi-classification-overweight, .nhsuk-cbmi-classification-healthy, .nhsuk-cbmi-classification-underweight {
     height: 24px;
   }
 }
-.nhsuk-bmi-classification-underweight {
+.nhsuk-cbmi-classification-underweight {
   z-index: 3;
 }
-.nhsuk-bmi-classification-healthy {
+.nhsuk-cbmi-classification-healthy {
   z-index: 2;
 }
-.nhsuk-bmi-classification-overweight {
+.nhsuk-cbmi-classification-overweight {
   z-index: 1;
-}
-.nhsuk-bmi-classification-obese {
-  border-right: none;
-  box-shadow: none;
 }