@7shifts/sous-chef 1.5.2 → 1.5.6

package/dist/index.css

@@ -7,8 +7,8 @@ The base colour is the default colour and is numbered with 400. If someone says
 Please ask a designer if you have questions about which colours to use.
 */
 ._f-GkY {
-  fill: #929292; }
-
+  fill: #929292;
+}
 /*********************************
 For new colours, see _colors.scss.
 **********************************/
@@ -34,12 +34,14 @@ Please ask a designer if you have questions about which colours to use.
   opacity: 0;
   transform-origin: top right;
   transform: scale(0);
-  visibility: hidden; }
+  visibility: hidden;
+}
 
 ._lxd1B {
   opacity: 1;
   transform: scale(1);
-  visibility: visible; }
+  visibility: visible;
+}
 
 ._IRJ4j {
   padding: 12px 20px;
@@ -48,39 +50,49 @@ Please ask a designer if you have questions about which colours to use.
   display: flex;
   cursor: pointer;
   white-space: nowrap;
-  color: #555; }
-  ._IRJ4j:hover {
-    background: #f8f8f8; }
-
+  color: #555;
+}
+._IRJ4j:hover {
+  background: #f8f8f8;
+}
 ._3-eyQ {
-  display: flex; }
-  ._3-eyQ .form__group {
-    margin: 0; }
+  display: flex;
+}
+._3-eyQ .form__group {
+  margin: 0;
+}
 
 ._kf0KG {
-  align-items: center; }
+  align-items: center;
+}
 
 ._3xCGO {
-  align-items: flex-end; }
+  align-items: flex-end;
+}
 
 ._3R2c9 {
-  align-items: flex-start; }
+  align-items: flex-start;
+}
 
 ._Zvv8e {
-  justify-content: center; }
+  justify-content: center;
+}
 
 ._2hBMj {
-  justify-content: flex-end; }
+  justify-content: flex-end;
+}
 
 ._3hKWn {
-  justify-content: space-between; }
+  justify-content: space-between;
+}
 
 ._3ACwY {
-  justify-content: flex-start; }
+  justify-content: flex-start;
+}
 
 ._2pujZ {
-  display: inline-flex; }
-
+  display: inline-flex;
+}
 /* stylelint-disable color-no-hex */
 /*
 These are the colour variables to be used around the webapp.
@@ -91,62 +103,80 @@ Please ask a designer if you have questions about which colours to use.
 */
 ._2wtfD {
   -webkit-animation: _2Jprn 1.4s linear infinite;
-          animation: _2Jprn 1.4s linear infinite; }
+          animation: _2Jprn 1.4s linear infinite;
+}
 
 ._Jmh8M {
   display: flex;
   justify-content: center;
-  padding: 20px; }
+  padding: 20px;
+}
 
 @-webkit-keyframes _2Jprn {
   0% {
-    transform: rotate(0deg); }
+    transform: rotate(0deg);
+  }
   100% {
-    transform: rotate(270deg); } }
+    transform: rotate(270deg);
+  }
+}
 
 @keyframes _2Jprn {
   0% {
-    transform: rotate(0deg); }
+    transform: rotate(0deg);
+  }
   100% {
-    transform: rotate(270deg); } }
-
+    transform: rotate(270deg);
+  }
+}
 ._3zucL {
   stroke-dasharray: 187;
   stroke-dashoffset: 0;
   stroke: #fb7448;
   transform-origin: center;
   -webkit-animation: _3ZqYM 1.4s ease-in-out infinite;
-          animation: _3ZqYM 1.4s ease-in-out infinite; }
+          animation: _3ZqYM 1.4s ease-in-out infinite;
+}
 
 ._3XYKx {
-  stroke: #3abda9; }
+  stroke: #3abda9;
+}
 
 ._1pYbs {
-  stroke: #c1c1c1; }
+  stroke: #c1c1c1;
+}
 
 ._3ofDF {
-  stroke: #fff; }
+  stroke: #fff;
+}
 
 @-webkit-keyframes _3ZqYM {
   0% {
-    stroke-dashoffset: 187; }
+    stroke-dashoffset: 187;
+  }
   50% {
     stroke-dashoffset: 46.75;
-    transform: rotate(135deg); }
+    transform: rotate(135deg);
+  }
   100% {
     stroke-dashoffset: 187;
-    transform: rotate(450deg); } }
+    transform: rotate(450deg);
+  }
+}
 
 @keyframes _3ZqYM {
   0% {
-    stroke-dashoffset: 187; }
+    stroke-dashoffset: 187;
+  }
   50% {
     stroke-dashoffset: 46.75;
-    transform: rotate(135deg); }
+    transform: rotate(135deg);
+  }
   100% {
     stroke-dashoffset: 187;
-    transform: rotate(450deg); } }
-
+    transform: rotate(450deg);
+  }
+}
 /*********************************
 For new colours, see _colors.scss.
 **********************************/
@@ -161,8 +191,8 @@ Please ask a designer if you have questions about which colours to use.
 ._1P_xb {
   display: inline-block;
   position: relative;
-  text-align: left; }
-
+  text-align: left;
+}
 /*********************************
 For new colours, see _colors.scss.
 **********************************/
@@ -184,18 +214,23 @@ Please ask a designer if you have questions about which colours to use.
   visibility: hidden;
   opacity: 0;
   transition: visibility 0s, opacity 0.05s linear;
-  max-width: 340px; }
-  ._zCaWg {
-    visibility: visible;
-    opacity: 1; }
-  ._2fg5c {
-    background: #464646;
-    color: #fff; }
-  ._1iXKZ {
-    background: #fff;
-    color: #464646; }
-  ._2K2Xx {
-    font-weight: 600; }
+  max-width: 340px;
+}
+._zCaWg {
+  visibility: visible;
+  opacity: 1;
+}
+._2fg5c {
+  background: #464646;
+  color: #fff;
+}
+._1iXKZ {
+  background: #fff;
+  color: #464646;
+}
+._2K2Xx {
+  font-weight: 600;
+}
 
 ._3jWYe {
   position: fixed;
@@ -205,21 +240,26 @@ Please ask a designer if you have questions about which colours to use.
   border-right: 12px solid transparent;
   visibility: hidden;
   opacity: 0;
-  transition: visibility 0s, opacity 0.05s linear; }
-  ._1zh1g {
-    transform: rotate(225deg); }
-  ._Pr0TW {
-    transform: rotate(45deg); }
-  ._3eQWu {
-    visibility: visible;
-    opacity: 1; }
-  ._2l-Dg {
-    border-top-color: #464646;
-    color: #fff; }
-  ._2LAWl {
-    border-top-color: #fff;
-    color: #464646; }
-
+  transition: visibility 0s, opacity 0.05s linear;
+}
+._1zh1g {
+  transform: rotate(225deg);
+}
+._Pr0TW {
+  transform: rotate(45deg);
+}
+._3eQWu {
+  visibility: visible;
+  opacity: 1;
+}
+._2l-Dg {
+  border-top-color: #464646;
+  color: #fff;
+}
+._2LAWl {
+  border-top-color: #fff;
+  color: #464646;
+}
 /*********************************
 For new colours, see _colors.scss.
 **********************************/
@@ -259,242 +299,299 @@ Please ask a designer if you have questions about which colours to use.
   text-decoration: none;
   border-style: solid;
   text-shadow: none;
-  box-shadow: none; }
-  ._1SQ_p svg {
-    fill: currentColor;
-    width: 16px;
-    height: 16px; }
-  ._1SQ_p:focus {
-    box-shadow: 0 0 8px #a7b7ea;
-    outline: none;
-    text-decoration: none; }
-  ._1SQ_p:hover {
-    text-decoration: none; }
-  ._1SQ_p:active {
-    transform: scale(0.96);
-    outline: none; }
-  ._1SQ_p:disabled {
-    cursor: default;
-    pointer-events: none;
-    box-shadow: none; }
+  box-shadow: none;
+}
+._1SQ_p svg {
+  fill: currentColor;
+  width: 16px;
+  height: 16px;
+}
+._1SQ_p:focus {
+  box-shadow: 0 0 8px #a7b7ea;
+  outline: none;
+  text-decoration: none;
+}
+._1SQ_p:hover {
+  text-decoration: none;
+}
+._1SQ_p:active {
+  transform: scale(0.96);
+  outline: none;
+}
+._1SQ_p:disabled {
+  cursor: default;
+  pointer-events: none;
+  box-shadow: none;
+}
 
 ._1g1Zw > :not(._3TAU6) {
-  opacity: 0; }
+  opacity: 0;
+}
 
 ._3TAU6 {
   position: absolute;
-  margin-top: 2px; }
+  margin-top: 2px;
+}
 
 ._1R_gC {
-  min-width: 100px; }
+  min-width: 100px;
+}
 
 ._3ig9y {
-  padding: 8px; }
+  padding: 8px;
+}
 
 ._3OB2g {
   background: #f8f8f8;
   border-color: #c1c1c1;
-  color: #555; }
-  ._3OB2g:hover {
-    background: #e0e0e0;
-    border-color: #929292;
-    color: #464646; }
-  ._3OB2g:disabled {
-    background: #f8f8f8;
-    border-color: #e0e0e0;
-    color: #c1c1c1; }
-  ._3OB2g[aria-disabled="true"] {
-    background: #f8f8f8;
-    border-color: #e0e0e0;
-    color: #c1c1c1; }
+  color: #555;
+}
+._3OB2g:hover {
+  background: #e0e0e0;
+  border-color: #929292;
+  color: #464646;
+}
+._3OB2g:disabled {
+  background: #f8f8f8;
+  border-color: #e0e0e0;
+  color: #c1c1c1;
+}
+._3OB2g[aria-disabled=true] {
+  background: #f8f8f8;
+  border-color: #e0e0e0;
+  color: #c1c1c1;
+}
 
 ._2RivT {
   background: #3abda9;
   border-color: #3abda9;
-  color: #fff; }
-  ._2RivT:hover {
-    background: #35ac9a;
-    border-color: #35ac9a;
-    color: #fff; }
-  ._2RivT:disabled {
-    background: #8de4d7;
-    border-color: #8de4d7;
-    color: #fff; }
-  ._2RivT[aria-disabled="true"] {
-    background: #8de4d7;
-    border-color: #8de4d7;
-    color: #fff; }
+  color: #fff;
+}
+._2RivT:hover {
+  background: #35ac9a;
+  border-color: #35ac9a;
+  color: #fff;
+}
+._2RivT:disabled {
+  background: #8de4d7;
+  border-color: #8de4d7;
+  color: #fff;
+}
+._2RivT[aria-disabled=true] {
+  background: #8de4d7;
+  border-color: #8de4d7;
+  color: #fff;
+}
 
 ._3T8M_ {
   background: #e76767;
   border-color: #e76767;
-  color: #fff; }
-  ._3T8M_:hover {
-    background: #cf5c5c;
-    border-color: #cf5c5c;
-    color: #fff; }
-  ._3T8M_:disabled {
-    background: #f0a3a3;
-    border-color: #f0a3a3;
-    color: #fff; }
-  ._3T8M_[aria-disabled="true"] {
-    background: #f0a3a3;
-    border-color: #f0a3a3;
-    color: #fff; }
+  color: #fff;
+}
+._3T8M_:hover {
+  background: #cf5c5c;
+  border-color: #cf5c5c;
+  color: #fff;
+}
+._3T8M_:disabled {
+  background: #f0a3a3;
+  border-color: #f0a3a3;
+  color: #fff;
+}
+._3T8M_[aria-disabled=true] {
+  background: #f0a3a3;
+  border-color: #f0a3a3;
+  color: #fff;
+}
 
 ._1AYVC {
   background: #6d87dd;
   border-color: #6d87dd;
-  color: #fff; }
-  ._1AYVC:hover {
-    background: #6179c6;
-    border-color: #6179c6;
-    color: #fff; }
-  ._1AYVC:disabled {
-    background: #a7b7ea;
-    border-color: #a7b7ea;
-    color: #fff; }
-  ._1AYVC[aria-disabled="true"] {
-    background: #a7b7ea;
-    border-color: #a7b7ea;
-    color: #fff; }
+  color: #fff;
+}
+._1AYVC:hover {
+  background: #6179c6;
+  border-color: #6179c6;
+  color: #fff;
+}
+._1AYVC:disabled {
+  background: #a7b7ea;
+  border-color: #a7b7ea;
+  color: #fff;
+}
+._1AYVC[aria-disabled=true] {
+  background: #a7b7ea;
+  border-color: #a7b7ea;
+  color: #fff;
+}
 
 ._34HiE {
   background: #fb7448;
   border-color: #fb7448;
-  color: #fff; }
-  ._34HiE:hover {
-    background: #e16840;
-    border-color: #e16840;
-    color: #fff; }
-  ._34HiE:disabled {
-    background: #fcab91;
-    border-color: #fcab91;
-    color: #fff; }
-  ._34HiE[aria-disabled="true"] {
-    background: #fcab91;
-    border-color: #fcab91;
-    color: #fff; }
+  color: #fff;
+}
+._34HiE:hover {
+  background: #e16840;
+  border-color: #e16840;
+  color: #fff;
+}
+._34HiE:disabled {
+  background: #fcab91;
+  border-color: #fcab91;
+  color: #fff;
+}
+._34HiE[aria-disabled=true] {
+  background: #fcab91;
+  border-color: #fcab91;
+  color: #fff;
+}
 
 ._3BrS0 {
   background: transparent;
   border-color: #c1c1c1;
-  color: #555; }
-  ._3BrS0:hover {
-    background: rgba(0, 0, 0, 0.03);
-    border-color: #929292;
-    color: #464646; }
-  ._3BrS0:disabled {
-    background: transparent;
-    border-color: #e0e0e0;
-    color: #c1c1c1; }
-  ._3BrS0[aria-disabled="true"] {
-    background: transparent;
-    border-color: #e0e0e0;
-    color: #c1c1c1; }
+  color: #555;
+}
+._3BrS0:hover {
+  background: rgba(0, 0, 0, 0.03);
+  border-color: #929292;
+  color: #464646;
+}
+._3BrS0:disabled {
+  background: transparent;
+  border-color: #e0e0e0;
+  color: #c1c1c1;
+}
+._3BrS0[aria-disabled=true] {
+  background: transparent;
+  border-color: #e0e0e0;
+  color: #c1c1c1;
+}
 
 ._1LCBO {
   background: transparent;
   border-color: transparent;
-  color: #fff; }
-  ._1LCBO:hover {
-    background: rgba(255, 255, 255, 0.1);
-    border-color: rgba(255, 255, 255, 0.1);
-    color: #fff; }
-  ._1LCBO:disabled {
-    background: transparent;
-    border-color: transparent;
-    color: #c1c1c1; }
-  ._1LCBO[aria-disabled="true"] {
-    background: transparent;
-    border-color: transparent;
-    color: #c1c1c1; }
+  color: #fff;
+}
+._1LCBO:hover {
+  background: rgba(255, 255, 255, 0.1);
+  border-color: rgba(255, 255, 255, 0.1);
+  color: #fff;
+}
+._1LCBO:disabled {
+  background: transparent;
+  border-color: transparent;
+  color: #c1c1c1;
+}
+._1LCBO[aria-disabled=true] {
+  background: transparent;
+  border-color: transparent;
+  color: #c1c1c1;
+}
 
 ._23S36 {
   background: transparent;
   border-color: transparent;
-  color: #5bc0de; }
-  ._23S36:hover {
-    background: rgba(0, 0, 0, 0.03);
-    border-color: #f8f8f8;
-    color: #5bc0de; }
-  ._23S36:disabled {
-    background: transparent;
-    border-color: transparent;
-    color: #c1c1c1; }
-  ._23S36[aria-disabled="true"] {
-    background: transparent;
-    border-color: transparent;
-    color: #c1c1c1; }
+  color: #5bc0de;
+}
+._23S36:hover {
+  background: rgba(0, 0, 0, 0.03);
+  border-color: #f8f8f8;
+  color: #51acc7;
+}
+._23S36:disabled {
+  background: transparent;
+  border-color: transparent;
+  color: #c1c1c1;
+}
+._23S36[aria-disabled=true] {
+  background: transparent;
+  border-color: transparent;
+  color: #c1c1c1;
+}
 
 ._2CzxI {
   background: transparent;
   border-color: transparent;
-  color: #e76767; }
-  ._2CzxI:hover {
-    background: rgba(0, 0, 0, 0.03);
-    border-color: #f8f8f8;
-    color: #e76767; }
-  ._2CzxI:disabled {
-    background: transparent;
-    border-color: transparent;
-    color: #c1c1c1; }
-  ._2CzxI[aria-disabled="true"] {
-    background: transparent;
-    border-color: transparent;
-    color: #c1c1c1; }
+  color: #e76767;
+}
+._2CzxI:hover {
+  background: rgba(0, 0, 0, 0.03);
+  border-color: #f8f8f8;
+  color: #cf5c5c;
+}
+._2CzxI:disabled {
+  background: transparent;
+  border-color: transparent;
+  color: #c1c1c1;
+}
+._2CzxI[aria-disabled=true] {
+  background: transparent;
+  border-color: transparent;
+  color: #c1c1c1;
+}
 
 ._21e4m {
   background: transparent;
   border-color: transparent;
-  color: #6d87dd; }
-  ._21e4m:hover {
-    background: rgba(0, 0, 0, 0.03);
-    border-color: #f8f8f8;
-    color: #6d87dd; }
-  ._21e4m:disabled {
-    background: transparent;
-    border-color: transparent;
-    color: #c1c1c1; }
-  ._21e4m[aria-disabled="true"] {
-    background: transparent;
-    border-color: transparent;
-    color: #c1c1c1; }
+  color: #6d87dd;
+}
+._21e4m:hover {
+  background: rgba(0, 0, 0, 0.03);
+  border-color: #f8f8f8;
+  color: #6179c6;
+}
+._21e4m:disabled {
+  background: transparent;
+  border-color: transparent;
+  color: #c1c1c1;
+}
+._21e4m[aria-disabled=true] {
+  background: transparent;
+  border-color: transparent;
+  color: #c1c1c1;
+}
 
 ._2-ESu {
   background: transparent;
   border-color: transparent;
-  color: #555; }
-  ._2-ESu:hover {
-    background: rgba(0, 0, 0, 0.03);
-    border-color: #f8f8f8;
-    color: #555; }
-  ._2-ESu:disabled {
-    background: transparent;
-    border-color: transparent;
-    color: #c1c1c1; }
-  ._2-ESu[aria-disabled="true"] {
-    background: transparent;
-    border-color: transparent;
-    color: #c1c1c1; }
+  color: #555;
+}
+._2-ESu:hover {
+  background: rgba(0, 0, 0, 0.03);
+  border-color: #f8f8f8;
+  color: #555;
+}
+._2-ESu:disabled {
+  background: transparent;
+  border-color: transparent;
+  color: #c1c1c1;
+}
+._2-ESu[aria-disabled=true] {
+  background: transparent;
+  border-color: transparent;
+  color: #c1c1c1;
+}
 
 ._1u3kp {
   background: transparent;
   border-color: transparent;
-  color: #929292; }
-  ._1u3kp:hover {
-    background: rgba(0, 0, 0, 0.03);
-    border-color: #f8f8f8;
-    color: #929292; }
-  ._1u3kp:disabled {
-    background: transparent;
-    border-color: transparent;
-    color: #c1c1c1; }
-  ._1u3kp[aria-disabled="true"] {
-    background: transparent;
-    border-color: transparent;
-    color: #c1c1c1; }
-
+  color: #929292;
+}
+._1u3kp:hover {
+  background: rgba(0, 0, 0, 0.03);
+  border-color: #f8f8f8;
+  color: #929292;
+}
+._1u3kp:disabled {
+  background: transparent;
+  border-color: transparent;
+  color: #c1c1c1;
+}
+._1u3kp[aria-disabled=true] {
+  background: transparent;
+  border-color: transparent;
+  color: #c1c1c1;
+}
 /*********************************
 For new colours, see _colors.scss.
 **********************************/
@@ -510,39 +607,48 @@ Please ask a designer if you have questions about which colours to use.
   display: flex;
   padding: 16px;
   border: 1px solid #fff;
-  border-bottom: 1px solid #e0e0e0; }
-  ._3DlpO:last-child {
-    border-bottom: 1px solid #fff; }
+  border-bottom: 1px solid #e0e0e0;
+}
+._3DlpO:last-child {
+  border-bottom: 1px solid #fff;
+}
 
 ._3DlpO:focus:not(:focus-visible) {
   /* Remove the focus indicator on mouse-focus for browsers
-       that do support :focus-visible */
-  outline: none; }
+     that do support :focus-visible */
+  outline: none;
+}
 
 ._2jPpF {
-  cursor: pointer; }
-  ._2jPpF:hover {
-    background-color: #f8f8f8; }
+  cursor: pointer;
+}
+._2jPpF:hover {
+  background-color: #f8f8f8;
+}
 
 ._NS-B9 {
   border: 1px solid #6d87dd;
   box-sizing: border-box;
-  box-shadow: 0 0 8px #a7b7ea; }
-  ._NS-B9:first-child {
-    border-radius: 8px 8px 0 0; }
-  ._NS-B9:last-child {
-    border-radius: 0 0 8px 8px;
-    border-bottom: 1px solid #6d87dd; }
+  box-shadow: 0 0 8px #a7b7ea;
+}
+._NS-B9:first-child {
+  border-radius: 8px 8px 0 0;
+}
+._NS-B9:last-child {
+  border-radius: 0 0 8px 8px;
+  border-bottom: 1px solid #6d87dd;
+}
 
 ._3ENNn {
   display: flex;
   flex-direction: column;
   justify-content: center;
-  position: relative; }
+  position: relative;
+}
 
 ._1FTaE {
-  width: 40px; }
-
+  width: 40px;
+}
 /**
 This file probaly will be split when we split the components
 */
@@ -563,36 +669,43 @@ Please ask a designer if you have questions about which colours to use.
   font-weight: 600;
   font-family: "Proxima Nova", sans-serif;
   color: #555;
-  padding: 19px 17px 8px 17px; }
+  padding: 19px 17px 8px 17px;
+}
 
 ._3-nHz {
   display: flex;
-  align-items: center; }
-  ._2Rh0i {
-    cursor: pointer; }
+  align-items: center;
+}
+._2Rh0i {
+  cursor: pointer;
+}
 
 ._3-nHz:focus:not(:focus-visible) {
   /* Remove the focus indicator on mouse-focus for browsers
-       that do support :focus-visible */
-  outline: none; }
+     that do support :focus-visible */
+  outline: none;
+}
 
 ._2fGMK {
-  width: 40px; }
+  width: 40px;
+}
 
 ._W7CnY {
   display: inline-block;
-  padding: 0 8px; }
+  padding: 0 8px;
+}
 
 ._2ygIH {
   border: 1px solid #c1c1c1;
   border-radius: 8px;
   font-family: "Proxima Nova", sans-serif;
-  font-size: 14px; }
+  font-size: 14px;
+}
 
 ._2cqhY {
   margin-top: 20px;
-  font-family: "Proxima Nova", sans-serif; }
-
+  font-family: "Proxima Nova", sans-serif;
+}
 /*********************************
 For new colours, see _colors.scss.
 **********************************/
@@ -605,19 +718,19 @@ The base colour is the default colour and is numbered with 400. If someone says
 Please ask a designer if you have questions about which colours to use.
 */
 ._1IynL button:disabled {
-  border-color: #c1c1c1; }
-
+  border-color: #c1c1c1;
+}
 ._1IynL button:last-child {
   border-radius: 0 4px 4px 0;
-  margin-left: -1px; }
-
+  margin-left: -1px;
+}
 ._1IynL button:first-child {
-  border-radius: 4px 0 0 4px; }
-
+  border-radius: 4px 0 0 4px;
+}
 ._1IynL button:not(:first-child):not(:last-child) {
   border-radius: 0;
-  margin-left: -1px; }
-
+  margin-left: -1px;
+}
 /*********************************
 For new colours, see _colors.scss.
 **********************************/
@@ -630,49 +743,62 @@ The base colour is the default colour and is numbered with 400. If someone says
 Please ask a designer if you have questions about which colours to use.
 */
 ._1d8Ci {
-  display: flex; }
-  ._1d8Ci:not(:last-child) {
-    border-bottom: 1px solid #e0e0e0; }
-  ._1d8Ci:hover {
-    background: #f8f8f8; }
+  display: flex;
+}
+._1d8Ci:not(:last-child) {
+  border-bottom: 1px solid #e0e0e0;
+}
+._1d8Ci:hover {
+  background: #f8f8f8;
+}
 
 ._1d8Ci:focus:not(:focus-visible) {
   /* Remove the focus indicator on mouse-focus for browsers
-       that do support :focus-visible */
-  outline: none; }
+     that do support :focus-visible */
+  outline: none;
+}
 
 ._thFcO {
-  cursor: pointer; }
-  ._thFcO:hover {
-    background-color: #f8f8f8; }
+  cursor: pointer;
+}
+._thFcO:hover {
+  background-color: #f8f8f8;
+}
 
 ._3tb7U {
   border: 1px solid #6d87dd;
   box-sizing: border-box;
-  box-shadow: 0 0 8px #a7b7ea; }
-  ._3tb7U:first-child {
-    border-radius: 8px 8px 0 0; }
-  ._3tb7U:last-child {
-    border-radius: 0 0 8px 8px;
-    border-bottom: 1px solid #6d87dd; }
+  box-shadow: 0 0 8px #a7b7ea;
+}
+._3tb7U:first-child {
+  border-radius: 8px 8px 0 0;
+}
+._3tb7U:last-child {
+  border-radius: 0 0 8px 8px;
+  border-bottom: 1px solid #6d87dd;
+}
 
 ._OTcMc {
   display: flex;
   flex-direction: column;
   justify-content: center;
-  position: relative; }
-  ._lNHQ8 {
-    padding: 16px; }
-  ._13YLe {
-    flex-direction: unset;
-    justify-content: flex-end; }
-  ._1rrRr:not(:last-child) {
-    border-right: 1px solid #e0e0e0; }
+  position: relative;
+}
+._lNHQ8 {
+  padding: 16px;
+}
+._13YLe {
+  flex-direction: unset;
+  justify-content: flex-end;
+}
+._1rrRr:not(:last-child) {
+  border-right: 1px solid #e0e0e0;
+}
 
 ._azbIG {
   width: 40px;
-  padding: 16px; }
-
+  padding: 16px;
+}
 /*********************************
 For new colours, see _colors.scss.
 **********************************/
@@ -690,46 +816,57 @@ Please ask a designer if you have questions about which colours to use.
   font-weight: 600;
   font-family: "Proxima Nova", sans-serif;
   color: #555;
-  padding: 19px 17px 8px 17px; }
+  padding: 19px 17px 8px 17px;
+}
 
 ._27x4v {
   display: flex;
-  align-items: center; }
-  ._27x4v:not(._27x4v:first-child) {
-    padding-left: 16px; }
-  ._27x4v:not(._27x4v:last-child) {
-    padding-right: 16px; }
-  ._3gw3Z {
-    cursor: pointer; }
-  ._Fjm2n {
-    justify-content: flex-end; }
+  align-items: center;
+}
+._27x4v:not(._27x4v:first-child) {
+  padding-left: 16px;
+}
+._27x4v:not(._27x4v:last-child) {
+  padding-right: 16px;
+}
+._3gw3Z {
+  cursor: pointer;
+}
+._Fjm2n {
+  justify-content: flex-end;
+}
 
 ._27x4v:focus:not(:focus-visible) {
   /* Remove the focus indicator on mouse-focus for browsers
-       that do support :focus-visible */
-  outline: none; }
+     that do support :focus-visible */
+  outline: none;
+}
 
 ._LoIvx {
-  width: 40px; }
+  width: 40px;
+}
 
 ._3VjFP {
   display: inline-block;
-  padding: 0 8px; }
+  padding: 0 8px;
+}
 
 ._1bTmd {
   border: 1px solid #c1c1c1;
   border-radius: 8px;
   font-family: "Proxima Nova", sans-serif;
-  font-size: 14px; }
+  font-size: 14px;
+}
 
 ._1opWx {
   background: #f8f8f8;
-  font-weight: 600; }
+  font-weight: 600;
+}
 
 ._F_spz {
   margin-top: 20px;
-  font-family: "Proxima Nova", sans-serif; }
-
+  font-family: "Proxima Nova", sans-serif;
+}
 /*********************************
 For new colours, see _colors.scss.
 **********************************/
@@ -742,10 +879,11 @@ The base colour is the default colour and is numbered with 400. If someone says
 Please ask a designer if you have questions about which colours to use.
 */
 ._orjDM {
-  padding: 16px; }
-  ._3EpfF {
-    text-align: right; }
-
+  padding: 16px;
+}
+._3EpfF {
+  text-align: right;
+}
 /*********************************
 For new colours, see _colors.scss.
 **********************************/
@@ -766,8 +904,8 @@ Please ask a designer if you have questions about which colours to use.
   font-family: "Proxima Nova", sans-serif;
   font-weight: 600;
   font-size: 14px;
-  min-height: 16px; }
-
+  min-height: 16px;
+}
 /*********************************
 For new colours, see _colors.scss.
 **********************************/
@@ -783,8 +921,8 @@ Please ask a designer if you have questions about which colours to use.
   color: #555;
   font-family: "Proxima Nova", sans-serif;
   font-weight: 400;
-  font-size: 12px; }
-
+  font-size: 12px;
+}
 /*********************************
 For new colours, see _colors.scss.
 **********************************/
@@ -800,8 +938,8 @@ Please ask a designer if you have questions about which colours to use.
   color: #e76767;
   font-family: "Proxima Nova", sans-serif;
   font-weight: 400;
-  font-size: 12px; }
-
+  font-size: 12px;
+}
 /*********************************
 For new colours, see _colors.scss.
 **********************************/
@@ -816,13 +954,16 @@ Please ask a designer if you have questions about which colours to use.
 ._ybKOk {
   position: relative;
   display: flex;
-  flex: 1; }
+  flex: 1;
+}
 
 ._2COk3 input {
-  padding-left: 21px; }
+  padding-left: 21px;
+}
 
 ._1xXXN input {
-  padding-right: 21px; }
+  padding-right: 21px;
+}
 
 ._eX5OL {
   position: absolute;
@@ -841,7 +982,8 @@ Please ask a designer if you have questions about which colours to use.
   bottom: 0;
   margin-top: auto;
   margin-bottom: auto;
-  text-align: left; }
+  text-align: left;
+}
 
 .__YH01 {
   position: absolute;
@@ -861,8 +1003,8 @@ Please ask a designer if you have questions about which colours to use.
   margin-top: auto;
   margin-bottom: auto;
   right: 0;
-  text-align: right; }
-
+  text-align: right;
+}
 /*********************************
 For new colours, see _colors.scss.
 **********************************/
@@ -875,50 +1017,61 @@ The base colour is the default colour and is numbered with 400. If someone says
 Please ask a designer if you have questions about which colours to use.
 */
 ._kIngZ {
-  width: 100%; }
-  ._kIngZ input {
-    border: 1px solid transparent;
-    display: flex;
-    justify-content: flex-end;
-    background: transparent;
-    padding: 16px;
-    width: 100%;
-    font-size: 14px;
-    font-family: "Proxima Nova", sans-serif;
-    border-radius: 0; }
-    ._kIngZ input:focus {
-      border-color: #6d87dd;
-      box-shadow: 0 0 8px #a7b7ea;
-      outline: none; }
-  ._3_QIj {
-    text-align: right; }
-  ._2Kyuc {
-    /* Firefox */ }
-    ._2Kyuc input::-webkit-outer-spin-button,
-    ._2Kyuc input::-webkit-inner-spin-button {
-      -webkit-appearance: none;
-      margin: 0; }
-    ._2Kyuc input[type=number] {
-      -moz-appearance: textfield; }
+  width: 100%;
+}
+._kIngZ input {
+  border: 1px solid transparent;
+  display: flex;
+  justify-content: flex-end;
+  background: transparent;
+  padding: 16px;
+  width: 100%;
+  font-size: 14px;
+  font-family: "Proxima Nova", sans-serif;
+  border-radius: 0;
+}
+._kIngZ input:focus {
+  border-color: #6d87dd;
+  box-shadow: 0 0 8px #a7b7ea;
+  outline: none;
+}
+._3_QIj {
+  text-align: right;
+}
+._2Kyuc {
+  /* Firefox */
+}
+._2Kyuc input::-webkit-outer-spin-button,
+._2Kyuc input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+._2Kyuc input[type=number] {
+  -moz-appearance: textfield;
+}
 
 ._y9SBQ._y9SBQ {
-  border-color: #e76767; }
+  border-color: #e76767;
+}
 
 ._32mWH._32mWH {
-  border-top-left-radius: 8px; }
+  border-top-left-radius: 8px;
+}
 
 ._3Jg2-._3Jg2- {
-  border-top-right-radius: 8px; }
+  border-top-right-radius: 8px;
+}
 
 ._1F5fj._1F5fj {
-  border-bottom-left-radius: 8px; }
+  border-bottom-left-radius: 8px;
+}
 
 ._1fTTW._1fTTW {
-  border-bottom-right-radius: 8px; }
-
+  border-bottom-right-radius: 8px;
+}
 ._3CaV0 {
-  max-width: 500px; }
-
+  max-width: 500px;
+}
 /*********************************
 For new colours, see _colors.scss.
 **********************************/
@@ -938,33 +1091,40 @@ Please ask a designer if you have questions about which colours to use.
   flex: 1;
   display: flex;
   flex-direction: column;
-  min-width: 90px; }
-  ._BkzdC textarea {
-    line-height: 22px;
-    font-size: 14px;
-    font-family: "Proxima Nova", sans-serif;
-    color: #555;
-    margin: 0;
-    border: none;
-    resize: none;
-    width: auto;
-    height: auto;
-    padding: 0; }
-    ._BkzdC textarea:focus {
-      outline: none; }
-    ._BkzdC textarea:disabled {
-      background-color: #f8f8f8; }
-  ._Rop31 {
-    border: 1px solid #6d87dd;
-    box-shadow: 0 0 8px #a7b7ea;
-    outline: none; }
-  ._2x3Cm {
-    background-color: #f8f8f8; }
-  ._3zOwV {
-    border-color: #e76767 !important; }
-  ._rQqnL {
-    margin-top: 5px; }
-
+  min-width: 90px;
+}
+._BkzdC textarea {
+  line-height: 22px;
+  font-size: 14px;
+  font-family: "Proxima Nova", sans-serif;
+  color: #555;
+  margin: 0;
+  border: none;
+  resize: none;
+  width: auto;
+  height: auto;
+  padding: 0;
+}
+._BkzdC textarea:focus {
+  outline: none;
+}
+._BkzdC textarea:disabled {
+  background-color: #f8f8f8;
+}
+._Rop31 {
+  border: 1px solid #6d87dd;
+  box-shadow: 0 0 8px #a7b7ea;
+  outline: none;
+}
+._2x3Cm {
+  background-color: #f8f8f8;
+}
+._3zOwV {
+  border-color: #e76767 !important;
+}
+._rQqnL {
+  margin-top: 5px;
+}
 /*********************************
 For new colours, see _colors.scss.
 **********************************/
@@ -987,27 +1147,32 @@ Please ask a designer if you have questions about which colours to use.
   border: 1px solid #c1c1c1;
   margin: 0;
   flex: 1;
-  min-width: 90px; }
-  ._20YOA:focus {
-    border: 1px solid #6d87dd;
-    box-shadow: 0 0 8px #a7b7ea;
-    outline: none; }
-  ._20YOA:disabled {
-    background-color: #f8f8f8; }
+  min-width: 90px;
+}
+._20YOA:focus {
+  border: 1px solid #6d87dd;
+  box-shadow: 0 0 8px #a7b7ea;
+  outline: none;
+}
+._20YOA:disabled {
+  background-color: #f8f8f8;
+}
 
 ._3kUSh {
-  border-color: #e76767 !important; }
+  border-color: #e76767 !important;
+}
 
 ._3IU3Q {
   border-left: 0 !important;
   border-top-left-radius: 0 !important;
-  border-bottom-left-radius: 0 !important; }
+  border-bottom-left-radius: 0 !important;
+}
 
 ._QXJOD {
   border-right: 0 !important;
   border-top-right-radius: 0 !important;
-  border-bottom-right-radius: 0 !important; }
-
+  border-bottom-right-radius: 0 !important;
+}
 /*********************************
 For new colours, see _colors.scss.
 **********************************/
@@ -1020,58 +1185,67 @@ The base colour is the default colour and is numbered with 400. If someone says
 Please ask a designer if you have questions about which colours to use.
 */
 ._2sg0c {
-  position: relative; }
-  ._2LdrP {
-    padding-left: 24px; }
-  ._2sg0c input {
-    position: absolute;
-    opacity: 0;
-    cursor: pointer;
-    z-index: 1;
-    width: 16px;
-    height: 16px;
-    right: 0; }
-  ._2mA8e {
-    display: block;
-    top: 0;
-    left: 0;
-    height: 14px;
-    width: 14px;
-    background-color: transparent;
-    border-radius: 4px;
-    border: 1px solid #e0e0e0;
-    box-shadow: inset 0 1px 4px -2px #e0e0e0; }
-    ._2mA8e::after {
-      position: absolute;
-      content: '';
-      opacity: 0; }
-  input:checked ~ ._2mA8e {
-    background-color: #4d89f5;
-    border-radius: 4px;
-    transform: rotate(0deg) scale(1);
-    opacity: 1;
-    border: 1px solid #8cb5f4; }
-  input:checked ~ ._2mA8e::after {
-    opacity: 1;
-    transform: rotate(45deg) scale(1);
-    left: 4px;
-    top: 1px;
-    width: 4px;
-    height: 8px;
-    border: solid #fff;
-    border-width: 0 2px 2px 0;
-    background-color: transparent;
-    border-radius: 0; }
-  input:focus-visible + ._2mA8e {
-    outline: #6d87dd solid 1px; }
-  input:disabled + ._2mA8e {
-    background-color: #f8f8f8;
-    border: 1px solid #e0e0e0; }
-  input:disabled + ._2mA8e::after {
-    box-shadow: none;
-    border: solid #9f9f9f !important;
-    border-width: 0 2px 2px 0 !important; }
-
+  position: relative;
+}
+._2LdrP {
+  padding-left: 24px;
+}
+._2sg0c input {
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+  z-index: 1;
+  width: 16px;
+  height: 16px;
+  right: 0;
+}
+._2mA8e {
+  display: block;
+  top: 0;
+  left: 0;
+  height: 14px;
+  width: 14px;
+  background-color: transparent;
+  border-radius: 4px;
+  border: 1px solid #e0e0e0;
+  box-shadow: inset 0 1px 4px -2px #e0e0e0;
+}
+._2mA8e::after {
+  position: absolute;
+  content: "";
+  opacity: 0;
+}
+input:checked ~ ._2mA8e {
+  background-color: #4d89f5;
+  border-radius: 4px;
+  transform: rotate(0deg) scale(1);
+  opacity: 1;
+  border: 1px solid #8cb5f4;
+}
+input:checked ~ ._2mA8e::after {
+  opacity: 1;
+  transform: rotate(45deg) scale(1);
+  left: 4px;
+  top: 1px;
+  width: 4px;
+  height: 8px;
+  border: solid #fff;
+  border-width: 0 2px 2px 0;
+  background-color: transparent;
+  border-radius: 0;
+}
+input:focus-visible + ._2mA8e {
+  outline: #6d87dd solid 1px;
+}
+input:disabled + ._2mA8e {
+  background-color: #f8f8f8;
+  border: 1px solid #e0e0e0;
+}
+input:disabled + ._2mA8e::after {
+  box-shadow: none;
+  border: solid #9f9f9f !important;
+  border-width: 0 2px 2px 0 !important;
+}
 /*********************************
 For new colours, see _colors.scss.
 **********************************/
@@ -1084,62 +1258,71 @@ The base colour is the default colour and is numbered with 400. If someone says
 Please ask a designer if you have questions about which colours to use.
 */
 ._g6T-p {
-  position: relative; }
-  ._g6T-p input {
-    position: absolute;
-    opacity: 0;
-    z-index: 1;
-    width: 100%;
-    height: 100%;
-    right: 0;
-    box-sizing: border-box; }
-    ._g6T-p input:hover:not(:disabled) {
-      cursor: pointer; }
-  ._1i2AX {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: #fff;
-    font-size: 14px;
-    font-weight: 600;
-    padding: 8px;
-    border: 1px solid #e0e0e0;
-    border-radius: 25px;
-    min-height: 38px;
-    min-width: 60px;
-    text-align: center;
-    vertical-align: middle;
-    color: #555;
-    -webkit-user-select: none;
-       -moz-user-select: none;
-        -ms-user-select: none;
-            user-select: none;
-    transition: background-color 0.2s, color 0.2s;
-    text-transform: capitalize;
-    box-sizing: border-box; }
-  input:hover ~ ._1i2AX {
-    background-color: #e0e0e0;
-    border-color: #e0e0e0; }
-  input:checked:hover ~ ._1i2AX {
-    background-color: #e16840;
-    border-color: #e16840; }
-  input:checked ~ ._1i2AX {
-    background-color: #fb7448;
-    border-color: #fb7448;
-    color: #fff; }
-  input:disabled + ._1i2AX {
-    background-color: #f8f8f8;
-    border-color: #f8f8f8;
-    color: #c1c1c1; }
-  input:disabled:checked + ._1i2AX {
-    background-color: #e16840;
-    border-color: #e16840;
-    color: #fff; }
-  input:focus-visible + ._1i2AX {
-    border: 1px solid #6d87dd;
-    box-shadow: 0 0 8px #a7b7ea;
-    outline: none; }
-
+  position: relative;
+}
+._g6T-p input {
+  position: absolute;
+  opacity: 0;
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+  right: 0;
+  box-sizing: border-box;
+}
+._g6T-p input:hover:not(:disabled) {
+  cursor: pointer;
+}
+._1i2AX {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #fff;
+  font-size: 14px;
+  font-weight: 600;
+  padding: 8px;
+  border: 1px solid #e0e0e0;
+  border-radius: 25px;
+  min-height: 38px;
+  min-width: 60px;
+  text-align: center;
+  vertical-align: middle;
+  color: #555;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  transition: background-color 0.2s, color 0.2s;
+  text-transform: capitalize;
+  box-sizing: border-box;
+}
+input:hover ~ ._1i2AX {
+  background-color: #e0e0e0;
+  border-color: #e0e0e0;
+}
+input:checked:hover ~ ._1i2AX {
+  background-color: #e16840;
+  border-color: #e16840;
+}
+input:checked ~ ._1i2AX {
+  background-color: #fb7448;
+  border-color: #fb7448;
+  color: #fff;
+}
+input:disabled + ._1i2AX {
+  background-color: #f8f8f8;
+  border-color: #f8f8f8;
+  color: #c1c1c1;
+}
+input:disabled:checked + ._1i2AX {
+  background-color: #e16840;
+  border-color: #e16840;
+  color: #fff;
+}
+input:focus-visible + ._1i2AX {
+  border: 1px solid #6d87dd;
+  box-shadow: 0 0 8px #a7b7ea;
+  outline: none;
+}
 /*********************************
 For new colours, see _colors.scss.
 **********************************/
@@ -1160,7 +1343,8 @@ Please ask a designer if you have questions about which colours to use.
   font-family: "Proxima Nova", sans-serif;
   font-weight: 600;
   font-size: 14px;
-  min-height: 16px; }
+  min-height: 16px;
+}
 
 ._RXyG_ {
   line-height: normal;
@@ -1171,8 +1355,8 @@ Please ask a designer if you have questions about which colours to use.
   font-family: "Proxima Nova", sans-serif;
   font-weight: 600;
   font-size: 14px;
-  min-height: 16px; }
-
+  min-height: 16px;
+}
 /*********************************
 For new colours, see _colors.scss.
 **********************************/
@@ -1185,59 +1369,68 @@ The base colour is the default colour and is numbered with 400. If someone says
 Please ask a designer if you have questions about which colours to use.
 */
 ._1Clmp {
-  position: relative; }
-  ._3UmWA {
-    padding-left: 24px; }
-  ._1Clmp input {
-    position: absolute;
-    opacity: 0;
-    cursor: pointer;
-    z-index: 1;
-    width: 16px;
-    height: 16px;
-    right: 0; }
-  ._1tMq- {
-    display: block;
-    top: 0;
-    left: 0;
-    height: 14px;
-    width: 14px;
-    background-color: transparent;
-    border-radius: 50%;
-    border: 1px solid #e0e0e0;
-    box-shadow: inset 0 1px 4px -2px #e0e0e0; }
-    ._1tMq-::after {
-      position: absolute;
-      content: '';
-      opacity: 0; }
-  input:checked ~ ._1tMq- {
-    background-color: #4d89f5;
-    border-radius: 50%;
-    transform: rotate(0deg) scale(1);
-    opacity: 1;
-    border: 1px solid #8cb5f4; }
-  input:checked ~ ._1tMq-::after {
-    opacity: 1;
-    left: 5px;
-    top: 5px;
-    width: 4px;
-    height: 4px;
-    background-color: #fff;
-    border: none;
-    border-radius: 50%; }
-  input:focus-visible + ._1tMq- {
-    outline: #6d87dd solid 1px; }
-  input:disabled + ._1tMq- {
-    background-color: #f8f8f8;
-    border: 1px solid #e0e0e0; }
-  input:disabled + ._1tMq-::after {
-    box-shadow: none;
-    border: solid #9f9f9f !important;
-    border-width: 0 2px 2px 0 !important;
-    background-color: #9f9f9f;
-    left: 4px;
-    top: 4px; }
-
+  position: relative;
+}
+._3UmWA {
+  padding-left: 24px;
+}
+._1Clmp input {
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+  z-index: 1;
+  width: 16px;
+  height: 16px;
+  right: 0;
+}
+._1tMq- {
+  display: block;
+  top: 0;
+  left: 0;
+  height: 14px;
+  width: 14px;
+  background-color: transparent;
+  border-radius: 50%;
+  border: 1px solid #e0e0e0;
+  box-shadow: inset 0 1px 4px -2px #e0e0e0;
+}
+._1tMq-::after {
+  position: absolute;
+  content: "";
+  opacity: 0;
+}
+input:checked ~ ._1tMq- {
+  background-color: #4d89f5;
+  border-radius: 50%;
+  transform: rotate(0deg) scale(1);
+  opacity: 1;
+  border: 1px solid #8cb5f4;
+}
+input:checked ~ ._1tMq-::after {
+  opacity: 1;
+  left: 5px;
+  top: 5px;
+  width: 4px;
+  height: 4px;
+  background-color: #fff;
+  border: none;
+  border-radius: 50%;
+}
+input:focus-visible + ._1tMq- {
+  outline: #6d87dd solid 1px;
+}
+input:disabled + ._1tMq- {
+  background-color: #f8f8f8;
+  border: 1px solid #e0e0e0;
+}
+input:disabled + ._1tMq-::after {
+  box-shadow: none;
+  border: solid #9f9f9f !important;
+  border-width: 0 2px 2px 0 !important;
+  background-color: #9f9f9f;
+  left: 4px;
+  top: 4px;
+}
 /*********************************
 For new colours, see _colors.scss.
 **********************************/
@@ -1260,38 +1453,45 @@ Please ask a designer if you have questions about which colours to use.
   border: 1px solid #c1c1c1;
   margin: 0;
   flex: 1;
-  min-width: 90px; }
-  ._18Rzv:focus {
-    border: 1px solid #6d87dd;
-    box-shadow: 0 0 8px #a7b7ea;
-    outline: none; }
-  ._18Rzv:disabled {
-    background-color: #f8f8f8; }
+  min-width: 90px;
+}
+._18Rzv:focus {
+  border: 1px solid #6d87dd;
+  box-shadow: 0 0 8px #a7b7ea;
+  outline: none;
+}
+._18Rzv:disabled {
+  background-color: #f8f8f8;
+}
 
 ._3eD7t {
-  border-color: #e76767 !important; }
+  border-color: #e76767 !important;
+}
 
 ._2evrG {
   border-left: 0 !important;
   border-top-left-radius: 0 !important;
-  border-bottom-left-radius: 0 !important; }
+  border-bottom-left-radius: 0 !important;
+}
 
 ._-MgeO {
   border-right: 0 !important;
   border-top-right-radius: 0 !important;
-  border-bottom-right-radius: 0 !important; }
+  border-bottom-right-radius: 0 !important;
+}
 
 ._-Rf3c {
   position: relative;
   display: flex;
-  flex: 1; }
+  flex: 1;
+}
 
 ._yinPY {
   position: absolute;
   cursor: pointer;
   right: 7px;
-  top: 7px; }
-
+  top: 7px;
+}
 /*********************************
 For new colours, see _colors.scss.
 **********************************/
@@ -1305,16 +1505,17 @@ Please ask a designer if you have questions about which colours to use.
 */
 ._U0krC {
   color: #e0e0e0;
-  font-family: "Proxima Nova", sans-serif; }
+  font-family: "Proxima Nova", sans-serif;
+}
 
 ._2XIl4 {
   color: #929292;
-  font-family: "Proxima Nova", sans-serif; }
-
+  font-family: "Proxima Nova", sans-serif;
+}
 ._1cDCR {
   flex: 1;
-  display: 'flex'; }
-
+  display: "flex";
+}
 /*********************************
 For new colours, see _colors.scss.
 **********************************/
@@ -1337,31 +1538,37 @@ Please ask a designer if you have questions about which colours to use.
   border: 1px solid #c1c1c1;
   margin: 0;
   flex: 1;
-  min-width: 90px; }
-  ._1btTx:focus, ._1Sc9D:focus {
-    border: 1px solid #6d87dd;
-    box-shadow: 0 0 8px #a7b7ea;
-    outline: none; }
-  ._1btTx:disabled, ._1Sc9D:disabled {
-    background-color: #f8f8f8; }
+  min-width: 90px;
+}
+._1btTx:focus, ._1Sc9D:focus {
+  border: 1px solid #6d87dd;
+  box-shadow: 0 0 8px #a7b7ea;
+  outline: none;
+}
+._1btTx:disabled, ._1Sc9D:disabled {
+  background-color: #f8f8f8;
+}
 
 ._2feYp, ._2SNat {
-  border-color: #e76767 !important; }
+  border-color: #e76767 !important;
+}
 
 ._E18JV, ._jLolW {
   border-left: 0 !important;
   border-top-left-radius: 0 !important;
-  border-bottom-left-radius: 0 !important; }
+  border-bottom-left-radius: 0 !important;
+}
 
 ._27J43, ._3eTNi {
   border-right: 0 !important;
   border-top-right-radius: 0 !important;
-  border-bottom-right-radius: 0 !important; }
+  border-bottom-right-radius: 0 !important;
+}
 
 ._1Sc9D {
   padding-top: 8px;
-  padding-bottom: 6px; }
-
+  padding-bottom: 6px;
+}
 /*********************************
 For new colours, see _colors.scss.
 **********************************/
@@ -1376,7 +1583,8 @@ Please ask a designer if you have questions about which colours to use.
 ._v1b-5 {
   flex: 1;
   display: flex;
-  font-family: "Proxima Nova", sans-serif; }
+  font-family: "Proxima Nova", sans-serif;
+}
 
 ._3mrLu {
   position: relative;
@@ -1385,18 +1593,22 @@ Please ask a designer if you have questions about which colours to use.
   -webkit-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;
-          user-select: none; }
+          user-select: none;
+}
 
 ._1J9dh ._8FcQE {
-  cursor: default; }
+  cursor: default;
+}
 
 ._1SPuq,
 ._24FJ6 {
-  font-family: inherit; }
+  font-family: inherit;
+}
 
 ._Oxdm9 {
   display: none;
-  visibility: hidden; }
+  visibility: hidden;
+}
 
 ._20uqc {
   position: absolute;
@@ -1413,11 +1625,14 @@ Please ask a designer if you have questions about which colours to use.
   border-top: 7px solid transparent;
   border-bottom: 7px solid transparent;
   border-right: 10px solid #555;
-  margin-right: 1.5em; }
-  ._20uqc:hover {
-    opacity: 0.8; }
-  ._20uqc:hover {
-    border-right-color: #929292; }
+  margin-right: 1.5em;
+}
+._20uqc:hover {
+  opacity: 0.8;
+}
+._20uqc:hover {
+  border-right-color: #929292;
+}
 
 ._3C53z {
   position: absolute;
@@ -1433,17 +1648,21 @@ Please ask a designer if you have questions about which colours to use.
   height: 0;
   border-top: 7px solid transparent;
   border-bottom: 7px solid transparent;
-  border-left: 10px solid #555; }
-  ._3C53z:hover {
-    opacity: 0.8; }
-  ._3C53z:hover {
-    opacity: 0.8;
-    border-left-color: #929292; }
+  border-left: 10px solid #555;
+}
+._3C53z:hover {
+  opacity: 0.8;
+}
+._3C53z:hover {
+  opacity: 0.8;
+  border-left-color: #929292;
+}
 
 ._M_eHz {
   display: flex;
   flex-wrap: wrap;
-  justify-content: center; }
+  justify-content: center;
+}
 
 ._3RPpJ {
   display: table;
@@ -1454,42 +1673,51 @@ Please ask a designer if you have questions about which colours to use.
   -webkit-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;
-          user-select: none; }
+          user-select: none;
+}
 
 ._1FXNw {
   display: table-caption;
   margin-bottom: 0.5em;
   padding: 0 0.5em;
-  text-align: left; }
+  text-align: left;
+}
 
 ._1FXNw > div {
   font-weight: 600;
   font-size: 20px;
-  color: #555; }
+  color: #555;
+}
 
 ._3KcRU {
   display: table-header-group;
-  margin-top: 1em; }
+  margin-top: 1em;
+}
 
 ._1fO_e {
-  display: table-row; }
+  display: table-row;
+}
 
 ._c1Y-X {
   display: table-cell;
   padding: 0.5em;
   color: #929292;
   text-align: center;
-  font-size: 0.875em; }
+  font-size: 0.875em;
+}
 
 ._c1Y-X abbr[title] {
   border-bottom: none;
-  text-decoration: none; }
+  text-decoration: none;
+}
 
 ._34mA1 {
-  display: table-row-group; }
+  display: table-row-group;
+}
 
 ._1PmqZ {
-  display: table-row; }
+  display: table-row;
+}
 
 ._1AWH2 {
   display: table-cell;
@@ -1497,45 +1725,56 @@ Please ask a designer if you have questions about which colours to use.
   border-radius: 50%;
   vertical-align: middle;
   text-align: center;
-  cursor: pointer; }
-  ._1AWH2:not(._1J9dh):not(._3vJkw):not(._1DR0N):not(._276GV):hover {
-    background: #f8f8f8; }
+  cursor: pointer;
+}
+._1AWH2:not(._1J9dh):not(._3vJkw):not(._1DR0N):not(._276GV):hover {
+  background: #f8f8f8;
+}
 
 ._2M5xr {
-  padding-top: 0.5em; }
+  padding-top: 0.5em;
+}
 
 ._3N6fj {
   color: #fb7448;
-  font-weight: 700; }
+  font-weight: 700;
+}
 
 ._1DR0N:not(._3vJkw):not(._276GV) {
   background-color: #fdd5c8;
-  color: #fb7448; }
+  color: #fb7448;
+}
 
 ._1DR0N:not(._3vJkw):not(._276GV):hover {
   background-color: #fb7448;
-  color: #fff; }
+  color: #fff;
+}
 
 ._1DR0N._3N6fj:hover {
-  color: #fff; }
+  color: #fff;
+}
 
 ._3vJkw {
   color: #e0e0e0;
-  cursor: default; }
+  cursor: default;
+}
 
 ._276GV {
   color: #c1c1c1;
-  cursor: default; }
+  cursor: default;
+}
 
 ._3Zqgu {
-  position: relative; }
+  position: relative;
+}
 
 ._20Ncd {
   position: absolute;
   left: 0;
   z-index: 1;
   background: #fff;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15); }
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
+}
 
 ._2hb-S {
   display: table-cell;
@@ -1546,8 +1785,8 @@ Please ask a designer if you have questions about which colours to use.
   vertical-align: middle;
   text-align: right;
   font-size: 0.75em;
-  cursor: pointer; }
-
+  cursor: pointer;
+}
 /*********************************
 For new colours, see _colors.scss.
 **********************************/
@@ -1562,7 +1801,8 @@ Please ask a designer if you have questions about which colours to use.
 ._1Ini2 {
   flex: 1;
   display: flex;
-  font-family: "Proxima Nova", sans-serif; }
+  font-family: "Proxima Nova", sans-serif;
+}
 
 ._21VnL {
   position: relative;
@@ -1571,18 +1811,22 @@ Please ask a designer if you have questions about which colours to use.
   -webkit-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;
-          user-select: none; }
+          user-select: none;
+}
 
 ._wJ6Cb ._1c48y {
-  cursor: default; }
+  cursor: default;
+}
 
 ._3KwsN,
 ._10CBO {
-  font-family: inherit; }
+  font-family: inherit;
+}
 
 ._dHL-D {
   display: none;
-  visibility: hidden; }
+  visibility: hidden;
+}
 
 ._6kNi3 {
   position: absolute;
@@ -1599,11 +1843,14 @@ Please ask a designer if you have questions about which colours to use.
   border-top: 7px solid transparent;
   border-bottom: 7px solid transparent;
   border-right: 10px solid #555;
-  margin-right: 1.5em; }
-  ._6kNi3:hover {
-    opacity: 0.8; }
-  ._6kNi3:hover {
-    border-right-color: #929292; }
+  margin-right: 1.5em;
+}
+._6kNi3:hover {
+  opacity: 0.8;
+}
+._6kNi3:hover {
+  border-right-color: #929292;
+}
 
 ._13W_e {
   position: absolute;
@@ -1619,17 +1866,21 @@ Please ask a designer if you have questions about which colours to use.
   height: 0;
   border-top: 7px solid transparent;
   border-bottom: 7px solid transparent;
-  border-left: 10px solid #555; }
-  ._13W_e:hover {
-    opacity: 0.8; }
-  ._13W_e:hover {
-    opacity: 0.8;
-    border-left-color: #929292; }
+  border-left: 10px solid #555;
+}
+._13W_e:hover {
+  opacity: 0.8;
+}
+._13W_e:hover {
+  opacity: 0.8;
+  border-left-color: #929292;
+}
 
 ._1FeSY {
   display: flex;
   flex-wrap: wrap;
-  justify-content: center; }
+  justify-content: center;
+}
 
 ._wU6A4 {
   display: table;
@@ -1640,42 +1891,51 @@ Please ask a designer if you have questions about which colours to use.
   -webkit-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;
-          user-select: none; }
+          user-select: none;
+}
 
 ._AMbAo {
   display: table-caption;
   margin-bottom: 0.5em;
   padding: 0 0.5em;
-  text-align: left; }
+  text-align: left;
+}
 
 ._AMbAo > div {
   font-weight: 600;
   font-size: 20px;
-  color: #555; }
+  color: #555;
+}
 
 ._1LEst {
   display: table-header-group;
-  margin-top: 1em; }
+  margin-top: 1em;
+}
 
 ._2XECo {
-  display: table-row; }
+  display: table-row;
+}
 
 ._1C5ry {
   display: table-cell;
   padding: 0.5em;
   color: #929292;
   text-align: center;
-  font-size: 0.875em; }
+  font-size: 0.875em;
+}
 
 ._1C5ry abbr[title] {
   border-bottom: none;
-  text-decoration: none; }
+  text-decoration: none;
+}
 
 ._11F-Y {
-  display: table-row-group; }
+  display: table-row-group;
+}
 
 ._3MAFk {
-  display: table-row; }
+  display: table-row;
+}
 
 ._mG73F {
   display: table-cell;
@@ -1683,45 +1943,56 @@ Please ask a designer if you have questions about which colours to use.
   border-radius: 50%;
   vertical-align: middle;
   text-align: center;
-  cursor: pointer; }
-  ._mG73F:not(._wJ6Cb):not(._2pgnH):not(._MtLaz):not(._CRqyX):hover {
-    background: #f8f8f8; }
+  cursor: pointer;
+}
+._mG73F:not(._wJ6Cb):not(._2pgnH):not(._MtLaz):not(._CRqyX):hover {
+  background: #f8f8f8;
+}
 
 ._2KG9- {
-  padding-top: 0.5em; }
+  padding-top: 0.5em;
+}
 
 ._2JA2y {
   color: #fb7448;
-  font-weight: 700; }
+  font-weight: 700;
+}
 
 ._MtLaz:not(._2pgnH):not(._CRqyX) {
   background-color: #fdd5c8;
-  color: #fb7448; }
+  color: #fb7448;
+}
 
 ._MtLaz:not(._2pgnH):not(._CRqyX):hover {
   background-color: #fb7448;
-  color: #fff; }
+  color: #fff;
+}
 
 ._MtLaz._2JA2y:hover {
-  color: #fff; }
+  color: #fff;
+}
 
 ._2pgnH {
   color: #e0e0e0;
-  cursor: default; }
+  cursor: default;
+}
 
 ._CRqyX {
   color: #c1c1c1;
-  cursor: default; }
+  cursor: default;
+}
 
 ._1JWbc {
-  position: relative; }
+  position: relative;
+}
 
 ._2tL6g {
   position: absolute;
   left: 0;
   z-index: 1;
   background: #fff;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15); }
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
+}
 
 ._3u72O {
   display: table-cell;
@@ -1732,7 +2003,8 @@ Please ask a designer if you have questions about which colours to use.
   vertical-align: middle;
   text-align: right;
   font-size: 0.75em;
-  cursor: pointer; }
+  cursor: pointer;
+}
 
 /*********************************
 For new colours, see _colors.scss.
@@ -1745,7 +2017,7 @@ The smaller the number the lighter the color. So $eggplant-100 would be light pu
 The base colour is the default colour and is numbered with 400. If someone says "use Tangerine" they are referring to the base color.
 Please ask a designer if you have questions about which colours to use.
 */
-._25rf7, ._3qVhi, ._3qVhi input {
+._25rf7, ._3qVhi input, ._3qVhi {
   padding: 7px;
   line-height: 22px;
   border-radius: 4px;
@@ -1756,73 +2028,88 @@ Please ask a designer if you have questions about which colours to use.
   border: 1px solid #c1c1c1;
   margin: 0;
   flex: 1;
-  min-width: 90px; }
-  ._25rf7:focus, ._3qVhi:focus, ._3qVhi input:focus {
-    border: 1px solid #6d87dd;
-    box-shadow: 0 0 8px #a7b7ea;
-    outline: none; }
-  ._25rf7:disabled, ._3qVhi:disabled, ._3qVhi input:disabled {
-    background-color: #f8f8f8; }
+  min-width: 90px;
+}
+._25rf7:focus, ._3qVhi input:focus, ._3qVhi:focus {
+  border: 1px solid #6d87dd;
+  box-shadow: 0 0 8px #a7b7ea;
+  outline: none;
+}
+._25rf7:disabled, ._3qVhi input:disabled, ._3qVhi:disabled {
+  background-color: #f8f8f8;
+}
 
 ._2M9Ud {
-  border-color: #e76767 !important; }
+  border-color: #e76767 !important;
+}
 
 ._3TUb2 {
   border-left: 0 !important;
   border-top-left-radius: 0 !important;
-  border-bottom-left-radius: 0 !important; }
+  border-bottom-left-radius: 0 !important;
+}
 
 ._foqL0 {
   border-right: 0 !important;
   border-top-right-radius: 0 !important;
-  border-bottom-right-radius: 0 !important; }
+  border-bottom-right-radius: 0 !important;
+}
 
 ._3qVhi {
   padding-bottom: 0px;
   padding-top: 0px;
   display: flex;
-  align-items: center; }
-  ._3df9R {
-    border-color: #e76767 !important; }
-  ._3qVhi input {
-    border: none;
-    min-width: 20px;
-    width: 20px;
-    flex: 1; }
-    ._3qVhi input:focus {
-      border: none;
-      box-shadow: inset 0 -2px 0 #fb7448;
-      outline: none;
-      border-radius: 0;
-      border-top-right-radius: 4px; }
+  align-items: center;
+}
+._3df9R {
+  border-color: #e76767 !important;
+}
+._3qVhi input {
+  border: none;
+  min-width: 20px;
+  width: 20px;
+  flex: 1;
+}
+._3qVhi input:focus {
+  border: none;
+  box-shadow: inset 0 -2px 0 #fb7448;
+  outline: none;
+  border-radius: 0;
+  border-top-right-radius: 4px;
+}
 
 ._wU6A4 {
-  border-collapse: separate; }
+  border-collapse: separate;
+}
 
 ._3u72O {
-  outline: none; }
+  outline: none;
+}
 
 ._mG73F {
   outline: none;
   border: 1px solid transparent;
-  border-radius: 0; }
+  border-radius: 0;
+}
 
 ._mG73F._MtLaz.from {
   background-color: #fb7448;
   color: #fff;
   border-top-left-radius: 50%;
-  border-bottom-left-radius: 50%; }
+  border-bottom-left-radius: 50%;
+}
 
 ._mG73F._MtLaz.to {
   background-color: #fb7448;
   color: #fff;
   border-top-right-radius: 50%;
-  border-bottom-right-radius: 50%; }
+  border-bottom-right-radius: 50%;
+}
 
 ._MtLaz:not(._2pgnH) {
   background-color: #fdd5c8;
-  color: #fb7448; }
-
+  color: #fb7448;
+}
 /*********************************
 For new colours, see _colors.scss.
 **********************************/
@@ -1837,7 +2124,8 @@ Please ask a designer if you have questions about which colours to use.
 ._okDvi {
   flex: 1;
   display: flex;
-  font-family: "Proxima Nova", sans-serif; }
+  font-family: "Proxima Nova", sans-serif;
+}
 
 ._17XdD {
   position: relative;
@@ -1846,18 +2134,22 @@ Please ask a designer if you have questions about which colours to use.
   -webkit-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;
-          user-select: none; }
+          user-select: none;
+}
 
 ._1O7OT ._3noGA {
-  cursor: default; }
+  cursor: default;
+}
 
 ._1Hl3Q,
 ._m0Vs9 {
-  font-family: inherit; }
+  font-family: inherit;
+}
 
 ._1ULWH {
   display: none;
-  visibility: hidden; }
+  visibility: hidden;
+}
 
 ._3gjq8 {
   position: absolute;
@@ -1874,11 +2166,14 @@ Please ask a designer if you have questions about which colours to use.
   border-top: 7px solid transparent;
   border-bottom: 7px solid transparent;
   border-right: 10px solid #555;
-  margin-right: 1.5em; }
-  ._3gjq8:hover {
-    opacity: 0.8; }
-  ._3gjq8:hover {
-    border-right-color: #929292; }
+  margin-right: 1.5em;
+}
+._3gjq8:hover {
+  opacity: 0.8;
+}
+._3gjq8:hover {
+  border-right-color: #929292;
+}
 
 ._1m-Kd {
   position: absolute;
@@ -1894,17 +2189,21 @@ Please ask a designer if you have questions about which colours to use.
   height: 0;
   border-top: 7px solid transparent;
   border-bottom: 7px solid transparent;
-  border-left: 10px solid #555; }
-  ._1m-Kd:hover {
-    opacity: 0.8; }
-  ._1m-Kd:hover {
-    opacity: 0.8;
-    border-left-color: #929292; }
+  border-left: 10px solid #555;
+}
+._1m-Kd:hover {
+  opacity: 0.8;
+}
+._1m-Kd:hover {
+  opacity: 0.8;
+  border-left-color: #929292;
+}
 
 ._Fq6Xh {
   display: flex;
   flex-wrap: wrap;
-  justify-content: center; }
+  justify-content: center;
+}
 
 ._3i0Oo {
   display: table;
@@ -1915,42 +2214,51 @@ Please ask a designer if you have questions about which colours to use.
   -webkit-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;
-          user-select: none; }
+          user-select: none;
+}
 
 ._36X9Y {
   display: table-caption;
   margin-bottom: 0.5em;
   padding: 0 0.5em;
-  text-align: left; }
+  text-align: left;
+}
 
 ._36X9Y > div {
   font-weight: 600;
   font-size: 20px;
-  color: #555; }
+  color: #555;
+}
 
 ._1aWPn {
   display: table-header-group;
-  margin-top: 1em; }
+  margin-top: 1em;
+}
 
 ._3HXCK {
-  display: table-row; }
+  display: table-row;
+}
 
 ._t-ctd {
   display: table-cell;
   padding: 0.5em;
   color: #929292;
   text-align: center;
-  font-size: 0.875em; }
+  font-size: 0.875em;
+}
 
 ._t-ctd abbr[title] {
   border-bottom: none;
-  text-decoration: none; }
+  text-decoration: none;
+}
 
 ._XAbiR {
-  display: table-row-group; }
+  display: table-row-group;
+}
 
 ._3Nwep {
-  display: table-row; }
+  display: table-row;
+}
 
 ._3nNcG {
   display: table-cell;
@@ -1958,45 +2266,56 @@ Please ask a designer if you have questions about which colours to use.
   border-radius: 50%;
   vertical-align: middle;
   text-align: center;
-  cursor: pointer; }
-  ._3nNcG:not(._1O7OT):not(._1M4ZF):not(._2PEs8):not(._1PIJa):hover {
-    background: #f8f8f8; }
+  cursor: pointer;
+}
+._3nNcG:not(._1O7OT):not(._1M4ZF):not(._2PEs8):not(._1PIJa):hover {
+  background: #f8f8f8;
+}
 
 ._2T_z1 {
-  padding-top: 0.5em; }
+  padding-top: 0.5em;
+}
 
 ._1hVM6 {
   color: #fb7448;
-  font-weight: 700; }
+  font-weight: 700;
+}
 
 ._2PEs8:not(._1M4ZF):not(._1PIJa) {
   background-color: #fdd5c8;
-  color: #fb7448; }
+  color: #fb7448;
+}
 
 ._2PEs8:not(._1M4ZF):not(._1PIJa):hover {
   background-color: #fb7448;
-  color: #fff; }
+  color: #fff;
+}
 
 ._2PEs8._1hVM6:hover {
-  color: #fff; }
+  color: #fff;
+}
 
 ._1M4ZF {
   color: #e0e0e0;
-  cursor: default; }
+  cursor: default;
+}
 
 ._1PIJa {
   color: #c1c1c1;
-  cursor: default; }
+  cursor: default;
+}
 
 ._1L-hI {
-  position: relative; }
+  position: relative;
+}
 
 ._dDPZb {
   position: absolute;
   left: 0;
   z-index: 1;
   background: #fff;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15); }
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
+}
 
 ._1alhT {
   display: table-cell;
@@ -2007,43 +2326,51 @@ Please ask a designer if you have questions about which colours to use.
   vertical-align: middle;
   text-align: right;
   font-size: 0.75em;
-  cursor: pointer; }
+  cursor: pointer;
+}
 
 ._3i0Oo {
-  border-collapse: separate; }
+  border-collapse: separate;
+}
 
 ._1alhT {
-  outline: none; }
+  outline: none;
+}
 
 ._3nNcG {
   outline: none;
   border: 1px solid transparent;
-  border-radius: 0; }
+  border-radius: 0;
+}
 
 ._2PEs8:not(._1M4ZF) {
   background-color: #fdd5c8;
-  color: #fb7448; }
-
+  color: #fb7448;
+}
 ._2PEs8:first-of-type {
   border-top-left-radius: 50%;
-  border-bottom-left-radius: 50%; }
-
+  border-bottom-left-radius: 50%;
+}
 ._2PEs8:last-of-type {
   border-top-right-radius: 50%;
-  border-bottom-right-radius: 50%; }
+  border-bottom-right-radius: 50%;
+}
 
 ._3Nwep:hover {
-  background: #f8f8f8; }
-  ._3Nwep:hover ._2PEs8:not(._1M4ZF) {
-    background-color: #fb7448;
-    color: #fff; }
-  ._3Nwep:hover ._3nNcG:first-of-type {
-    border-top-left-radius: 50%;
-    border-bottom-left-radius: 50%; }
-  ._3Nwep:hover ._3nNcG:last-of-type {
-    border-top-right-radius: 50%;
-    border-bottom-right-radius: 50%; }
-
+  background: #f8f8f8;
+}
+._3Nwep:hover ._2PEs8:not(._1M4ZF) {
+  background-color: #fb7448;
+  color: #fff;
+}
+._3Nwep:hover ._3nNcG:first-of-type {
+  border-top-left-radius: 50%;
+  border-bottom-left-radius: 50%;
+}
+._3Nwep:hover ._3nNcG:last-of-type {
+  border-top-right-radius: 50%;
+  border-bottom-right-radius: 50%;
+}
 /*********************************
 For new colours, see _colors.scss.
 **********************************/
@@ -2070,7 +2397,8 @@ Please ask a designer if you have questions about which colours to use.
   color: #555;
   font-family: "Proxima Nova", sans-serif;
   font-weight: 400;
-  font-size: 12px; }
+  font-size: 12px;
+}
 
 /*********************************
 For new colours, see _colors.scss.
@@ -2092,7 +2420,8 @@ Please ask a designer if you have questions about which colours to use.
   font-family: "Proxima Nova", sans-serif;
   font-weight: 600;
   font-size: 14px;
-  min-height: 16px; }
+  min-height: 16px;
+}
 
 /**
 This component is built with acessibility in mind.
@@ -2106,7 +2435,8 @@ Just for future references:
 */
 ._1ui8X {
   display: inline-flex;
-  align-items: center; }
+  align-items: center;
+}
 
 ._1YRJT {
   line-height: normal;
@@ -2118,7 +2448,8 @@ Just for future references:
   font-weight: 600;
   font-size: 14px;
   min-height: 16px;
-  margin-left: 8px; }
+  margin-left: 8px;
+}
 
 ._1jEiW {
   color: #555;
@@ -2126,30 +2457,34 @@ Just for future references:
   font-weight: 400;
   font-size: 12px;
   margin-left: 48px;
-  display: block; }
+  display: block;
+}
 
-._1ui8X [type='checkbox'] {
+._1ui8X [type=checkbox] {
   position: absolute;
   opacity: 0;
-  pointer-events: none; }
+  pointer-events: none;
+}
 
 ._3tNyE {
   position: relative;
-  cursor: pointer; }
+  cursor: pointer;
+}
 
 /* default states */
 ._3tNyE::before {
-  content: '';
+  content: "";
   display: block;
   background: #c1c1c1;
   transition: all ease-in-out 150ms;
   box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.03);
   border-radius: 26px;
   height: 20px;
-  width: 40px; }
+  width: 40px;
+}
 
 ._3tNyE::after {
-  content: '';
+  content: "";
   display: block;
   position: absolute;
   left: 2px;
@@ -2161,28 +2496,33 @@ Just for future references:
   height: 14px;
   width: 14px;
   transition: all ease-in-out 150ms;
-  box-shadow: 0 0 4px rgba(0, 0, 0, 0.03); }
+  box-shadow: 0 0 4px rgba(0, 0, 0, 0.03);
+}
 
 /* special states */
-._1ui8X [type='checkbox']:focus-visible + ._3tNyE {
-  outline: #6d87dd solid 1px; }
+._1ui8X [type=checkbox]:focus-visible + ._3tNyE {
+  outline: #6d87dd solid 1px;
+}
 
-._1ui8X [type='checkbox']:disabled + ._3tNyE {
+._1ui8X [type=checkbox]:disabled + ._3tNyE {
   opacity: 0.4;
-  cursor: default; }
+  cursor: default;
+}
 
-._1ui8X [type='checkbox']:disabled + ._3tNyE::after {
-  box-shadow: none; }
+._1ui8X [type=checkbox]:disabled + ._3tNyE::after {
+  box-shadow: none;
+}
 
 /* checked states */
-._1ui8X [type='checkbox']:checked + ._3tNyE::before {
-  background: #3abda9; }
+._1ui8X [type=checkbox]:checked + ._3tNyE::before {
+  background: #3abda9;
+}
 
-._1ui8X [type='checkbox']:checked + ._3tNyE::after {
+._1ui8X [type=checkbox]:checked + ._3tNyE::after {
   border-color: #3abda9;
   left: 21px;
-  right: 2px; }
-
+  right: 2px;
+}
 /*********************************
 For new colours, see _colors.scss.
 **********************************/
@@ -2200,25 +2540,30 @@ Please ask a designer if you have questions about which colours to use.
   background-color: rgba(0, 0, 0, 0.5);
   display: flex;
   align-items: center;
-  flex-direction: column; }
-  ._2puqJ::after {
-    width: 100%;
-    flex-basis: 20px;
-    flex-shrink: 0;
-    content: ''; }
-  ._2puqJ::before {
-    width: 100%;
-    min-height: 20px;
-    max-height: 80px;
-    flex: 1;
-    content: ''; }
+  flex-direction: column;
+}
+._2puqJ::after {
+  width: 100%;
+  flex-basis: 20px;
+  flex-shrink: 0;
+  content: "";
+}
+._2puqJ::before {
+  width: 100%;
+  min-height: 20px;
+  max-height: 80px;
+  flex: 1;
+  content: "";
+}
 
 ._1167h {
   opacity: 1;
-  transform: translateX(0); }
+  transform: translateX(0);
+}
 
 ._t_t7L {
-  opacity: 0; }
+  opacity: 0;
+}
 
 ._wQQ_2 {
   position: initial;
@@ -2230,16 +2575,19 @@ Please ask a designer if you have questions about which colours to use.
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
   min-height: 200px;
   display: flex;
-  flex-direction: column; }
-  ._wQQ_2 > form {
-    display: contents; }
+  flex-direction: column;
+}
+._wQQ_2 > form {
+  display: contents;
+}
 
 ._3jwux {
-  opacity: 1; }
+  opacity: 1;
+}
 
 ._2c2QP {
-  opacity: 0; }
-
+  opacity: 0;
+}
 /*********************************
 For new colours, see _colors.scss.
 **********************************/
@@ -2256,14 +2604,15 @@ Please ask a designer if you have questions about which colours to use.
   line-height: 28px;
   color: #555;
   font-weight: 600;
-  font-family: "Proxima Nova", sans-serif; }
+  font-family: "Proxima Nova", sans-serif;
+}
 
 ._2XwRD {
   font-size: 20px;
   line-height: 24px;
   color: #929292;
-  font-family: "Proxima Nova", sans-serif; }
-
+  font-family: "Proxima Nova", sans-serif;
+}
 /*********************************
 For new colours, see _colors.scss.
 **********************************/
@@ -2291,19 +2640,21 @@ Please ask a designer if you have questions about which colours to use.
   background: #fff no-repeat;
   background-image: radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
   background-position: 0 0, 0 100%;
-  background-size: 100% 14px; }
-  ._2J-ku::before, ._2J-ku::after {
-    content: '';
-    position: relative;
-    z-index: -1;
-    display: block;
-    height: 30px;
-    margin: 0 0 -30px;
-    background: linear-gradient(to bottom, #fff, #fff 30%, rgba(255, 255, 255, 0)); }
-  ._2J-ku::after {
-    margin: -30px 0 0;
-    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 70%, #fff); }
-
+  background-size: 100% 14px;
+}
+._2J-ku::before, ._2J-ku::after {
+  content: "";
+  position: relative;
+  z-index: -1;
+  display: block;
+  height: 30px;
+  margin: 0 0 -30px;
+  background: linear-gradient(to bottom, #fff, #fff 30%, rgba(255, 255, 255, 0));
+}
+._2J-ku::after {
+  margin: -30px 0 0;
+  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 70%, #fff);
+}
 /*********************************
 For new colours, see _colors.scss.
 **********************************/
@@ -2320,11 +2671,12 @@ Please ask a designer if you have questions about which colours to use.
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
-  padding-top: 40px; }
+  padding-top: 40px;
+}
 
 ._Qktd- {
-  margin-left: -12px; }
-
+  margin-left: -12px;
+}
 /*********************************
 For new colours, see _colors.scss.
 **********************************/
@@ -2350,18 +2702,23 @@ Please ask a designer if you have questions about which colours to use.
   font-weight: normal;
   padding: 0 6px;
   align-items: center;
-  border: 1px solid #fff; }
-  ._2f81N svg {
-    fill: #fff; }
-  ._2g1GI {
-    background-color: #ffc74a; }
-  ._2zLnM {
-    background-color: #e76767; }
-  ._27QOo {
-    background-color: #3abda9; }
-  ._2gmsM {
-    background-color: #5bc0de; }
-
+  border: 1px solid #fff;
+}
+._2f81N svg {
+  fill: #fff;
+}
+._2g1GI {
+  background-color: #ffc74a;
+}
+._2zLnM {
+  background-color: #e76767;
+}
+._27QOo {
+  background-color: #3abda9;
+}
+._2gmsM {
+  background-color: #5bc0de;
+}
 /*********************************
 For new colours, see _colors.scss.
 **********************************/
@@ -2384,44 +2741,56 @@ Please ask a designer if you have questions about which colours to use.
   width: 20px;
   height: 20px;
   flex-shrink: 0;
-  overflow: hidden; }
-  ._2wJGB svg {
-    fill: #fff; }
-  ._2wJGB img {
-    height: inherit; }
-  ._3QTSo {
-    width: 20px;
-    height: 20px;
-    font-size: 14px; }
-    ._3QTSo ._2Rl8S {
-      margin-left: 18px;
-      margin-top: 10px; }
-  ._1zwj0 {
-    width: 30px;
-    height: 30px;
-    font-size: 20px; }
-    ._1zwj0 ._2Rl8S {
-      margin-left: 20px;
-      margin-top: 15px; }
-  ._3-U6x {
-    width: 40px;
-    height: 40px;
-    font-size: 24px; }
-    ._3-U6x ._2Rl8S {
-      margin-left: 23px;
-      margin-top: 18px; }
-  ._3qn2q {
-    width: 80px;
-    height: 80px;
-    font-size: 24px; }
-    ._3qn2q ._2Rl8S {
-      margin-left: 55px;
-      margin-top: 45px; }
-  ._2Rl8S {
-    position: absolute;
-    margin-left: 20px;
-    margin-top: 15px; }
-
+  overflow: hidden;
+}
+._2wJGB svg {
+  fill: #fff;
+}
+._2wJGB img {
+  height: inherit;
+}
+._3QTSo {
+  width: 20px;
+  height: 20px;
+  font-size: 14px;
+}
+._3QTSo ._2Rl8S {
+  margin-left: 18px;
+  margin-top: 10px;
+}
+._1zwj0 {
+  width: 30px;
+  height: 30px;
+  font-size: 20px;
+}
+._1zwj0 ._2Rl8S {
+  margin-left: 20px;
+  margin-top: 15px;
+}
+._3-U6x {
+  width: 40px;
+  height: 40px;
+  font-size: 24px;
+}
+._3-U6x ._2Rl8S {
+  margin-left: 23px;
+  margin-top: 18px;
+}
+._3qn2q {
+  width: 80px;
+  height: 80px;
+  font-size: 24px;
+}
+._3qn2q ._2Rl8S {
+  margin-left: 55px;
+  margin-top: 45px;
+}
+._2Rl8S {
+  position: absolute;
+  margin-left: 20px;
+  margin-top: 15px;
+}
 ._GKL9P svg {
   width: 80%;
-  padding-top: 25%; }
+  padding-top: 25%;
+}