@7shifts/sous-chef 2.15.5 → 2.15.7

package/dist/index.css

@@ -51,6 +51,10 @@ Please ask a designer if you have questions about which colours to use.
   margin: 0;
 }
 
+._umc73 {
+  min-width: 0;
+}
+
 ._kf0KG {
   align-items: center;
 }
@@ -809,6 +813,8 @@ Please ask a designer if you have questions about which colours to use.
   width: 40px;
   padding: 16px;
   box-sizing: content-box;
+  flex-flow: row nowrap;
+  justify-content: flex-end;
 }
 /*********************************
 For new colours, see _colors.scss.
@@ -862,6 +868,12 @@ Please ask a designer if you have questions about which colours to use.
   min-height: 16px;
 }
 
+._fu5zH {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
 /**
 This component is built with acessibility in mind.
 The `<input type="checkbox" />` is not removed from screen or changed its `apparence`. It would mess up with the `outline`.
@@ -1064,16 +1076,62 @@ 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.
 */
-._h724f {
-  line-height: normal;
-  padding: 0;
-  width: auto;
-  float: none;
-  color: #464646;
-  font-family: "Proxima Nova", sans-serif;
-  font-weight: 600;
-  font-size: 14px;
-  min-height: 16px;
+._2puqJ {
+  position: fixed;
+  top: 0px;
+  bottom: 0px;
+  left: 0px;
+  right: 0px;
+  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: "";
+}
+
+._1167h {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+._t_t7L {
+  opacity: 0;
+}
+
+._wQQ_2 {
+  position: initial;
+  border: 1px solid #C8C8C8;
+  background: #fff;
+  overflow: auto;
+  outline: none;
+  padding: 32px;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
+  min-height: 200px;
+  display: flex;
+  flex-direction: column;
+}
+._wQQ_2 > form {
+  display: contents;
+}
+
+._3jwux {
+  opacity: 1;
+}
+
+._2c2QP {
+  opacity: 0;
 }
 /*********************************
 For new colours, see _colors.scss.
@@ -1086,11 +1144,19 @@ 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.
 */
-._1DWBq {
+._36nxW {
+  font-size: 24px;
+  line-height: 28px;
   color: #464646;
+  font-weight: 600;
+  font-family: "Proxima Nova", sans-serif;
+}
+
+._2XwRD {
+  font-size: 20px;
+  line-height: 24px;
+  color: #767676;
   font-family: "Proxima Nova", sans-serif;
-  font-weight: 400;
-  font-size: 12px;
 }
 /*********************************
 For new colours, see _colors.scss.
@@ -1103,11 +1169,39 @@ 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.
 */
-._nZ2MD {
-  color: #e76767;
+/**
+ * This is for adding a shadow when the body is scrollable.
+ * It is using ::before and ::after to accomplish that => https://www.kizu.ru/shadowscroll/
+ * There is a cleaner solution using background-attachment (https://lea.verou.me/2012/04/background-attachment-local/) but I had some issues in Chrome using that approach
+ */
+._2J-ku {
+  overflow: auto;
+  margin-top: 24px;
   font-family: "Proxima Nova", sans-serif;
-  font-weight: 400;
-  font-size: 12px;
+  font-size: 14px;
+  line-height: 16px;
+  position: relative;
+}
+
+._2ErCP {
+  z-index: 1;
+  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;
+}
+._2ErCP::before, ._2ErCP::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));
+}
+._2ErCP::after {
+  margin: -30px 0 0;
+  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 70%, #fff);
 }
 /*********************************
 For new colours, see _colors.scss.
@@ -1120,65 +1214,16 @@ 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.
 */
-._ybKOk {
-  position: relative;
-  display: flex;
+._LKOr5 {
   flex: 1;
-}
-
-._2COk3 input {
-  padding-left: 21px;
-}
-
-._1xXXN input {
-  padding-right: 21px;
-}
-
-._eX5OL {
-  position: absolute;
-  line-height: 22px;
-  padding: 8px;
-  color: #464646;
-  min-width: 8px;
-  pointer-events: none;
-  font-size: 14px;
-  font-family: "Proxima Nova", sans-serif;
-  box-sizing: content-box;
   display: flex;
-  align-items: center;
-  height: 22px;
-  top: 0;
-  bottom: 0;
-  margin-top: auto;
-  margin-bottom: auto;
-  text-align: left;
-}
-._eX5OL svg {
-  color: #767676;
+  flex-direction: column;
+  justify-content: flex-end;
+  padding-top: 40px;
 }
 
-.__YH01 {
-  position: absolute;
-  line-height: 22px;
-  padding: 8px;
-  color: #464646;
-  min-width: 8px;
-  pointer-events: none;
-  font-size: 14px;
-  font-family: "Proxima Nova", sans-serif;
-  box-sizing: content-box;
-  display: flex;
-  align-items: center;
-  height: 22px;
-  top: 0;
-  bottom: 0;
-  margin-top: auto;
-  margin-bottom: auto;
-  right: 0;
-  text-align: right;
-}
-.__YH01 svg {
-  color: #767676;
+._Qktd- {
+  margin-left: -12px;
 }
 /*********************************
 For new colours, see _colors.scss.
@@ -1191,76 +1236,688 @@ 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.
 */
-._kIngZ {
-  width: 100%;
-}
-._kIngZ input {
-  border: 1px solid transparent;
+._v1b-5 {
+  flex: 1;
   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;
-}
-._kIngZ input:hover {
-  background: #F3F3F3;
-}
-._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;
+._3mrLu {
+  position: relative;
+  flex-direction: row;
+  padding-bottom: 1em;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
 }
 
-._32mWH._32mWH {
-  border-top-left-radius: 8px;
+._1J9dh ._8FcQE {
+  cursor: default;
 }
 
-._3Jg2-._3Jg2- {
-  border-top-right-radius: 8px;
+._1SPuq,
+._24FJ6 {
+  font-family: inherit;
 }
 
-._1F5fj._1F5fj {
-  border-bottom-left-radius: 8px;
+._Oxdm9 {
+  display: none;
+  visibility: hidden;
 }
 
-._1fTTW._1fTTW {
-  border-bottom-right-radius: 8px;
-}
-._3CaV0 {
-  max-width: 500px;
-}
-/*********************************
-For new colours, see _colors.scss.
-**********************************/
-/* stylelint-disable color-no-hex */
-/*
-These are the colour variables to be used around the webapp.
-The variables are set up to describe the color and number which represents the lightness of the color.
-The smaller the number the lighter the color. So $eggplant-100 would be light purple and $eggplant-600 would be dark purple.
-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.
-*/
+._20uqc {
+  position: absolute;
+  top: 1em;
+  right: 1.5em;
+  left: auto;
+  display: inline-block;
+  margin-top: 2px;
+  color: #949494;
+  cursor: pointer;
+  background-image: none;
+  width: 0;
+  height: 0;
+  border-top: 7px solid transparent;
+  border-bottom: 7px solid transparent;
+  border-right: 10px solid #464646;
+  margin-right: 1.5em;
+}
+._20uqc:hover {
+  opacity: 0.8;
+}
+._20uqc:hover {
+  border-right-color: #767676;
+}
+
+._3C53z {
+  position: absolute;
+  top: 1em;
+  right: 1.5em;
+  left: auto;
+  display: inline-block;
+  margin-top: 2px;
+  color: #949494;
+  cursor: pointer;
+  background-image: none;
+  width: 0;
+  height: 0;
+  border-top: 7px solid transparent;
+  border-bottom: 7px solid transparent;
+  border-left: 10px solid #464646;
+}
+._3C53z:hover {
+  opacity: 0.8;
+}
+._3C53z:hover {
+  opacity: 0.8;
+  border-left-color: #767676;
+}
+
+._M_eHz {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+._3RPpJ {
+  display: table;
+  margin: 0 1em;
+  margin-top: 1em;
+  border-spacing: 0;
+  border-collapse: collapse;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+
+._1FXNw {
+  display: table-caption;
+  margin-bottom: 0.5em;
+  padding: 0 0.5em;
+  text-align: left;
+}
+
+._1FXNw > div {
+  font-weight: 600;
+  font-size: 20px;
+  color: #464646;
+}
+
+._3KcRU {
+  display: table-header-group;
+  margin-top: 1em;
+}
+
+._1fO_e {
+  display: table-row;
+}
+
+._c1Y-X {
+  display: table-cell;
+  padding: 0.5em;
+  color: #767676;
+  text-align: center;
+  font-size: 0.875em;
+}
+
+._c1Y-X abbr[title] {
+  border-bottom: none;
+  text-decoration: none;
+}
+
+._34mA1 {
+  display: table-row-group;
+}
+
+._1PmqZ {
+  display: table-row;
+}
+
+._1AWH2 {
+  display: table-cell;
+  padding: 0.5em;
+  border-radius: 50%;
+  vertical-align: middle;
+  text-align: center;
+  cursor: pointer;
+}
+._1AWH2:not(._1J9dh):not(._3vJkw):not(._1DR0N):not(._276GV):hover {
+  background: #F3F3F3;
+}
+
+._2M5xr {
+  padding-top: 0.5em;
+}
+
+._3N6fj {
+  color: #fb7448;
+  font-weight: 700;
+}
+
+._1DR0N:not(._3vJkw):not(._276GV) {
+  background-color: #fdd5c8;
+  color: #fb7448;
+}
+
+._1DR0N:not(._3vJkw):not(._276GV):hover {
+  background-color: #fb7448;
+  color: #fff;
+}
+
+._1DR0N._3N6fj:hover {
+  color: #fff;
+}
+
+._3vJkw {
+  color: #C8C8C8;
+  cursor: default;
+}
+
+._276GV:not(._3vJkw) {
+  color: #949494;
+  cursor: default;
+}
+
+._3Zqgu {
+  position: relative;
+}
+
+._20Ncd {
+  position: absolute;
+  left: 0;
+  z-index: 1;
+  background: #fff;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
+}
+
+._2hb-S {
+  display: table-cell;
+  padding: 0.5em;
+  min-width: 1em;
+  border-right: 1px solid #C8C8C8;
+  color: #949494;
+  vertical-align: middle;
+  text-align: right;
+  font-size: 0.75em;
+  cursor: pointer;
+}
+/*********************************
+For new colours, see _colors.scss.
+**********************************/
+/* stylelint-disable color-no-hex */
+/*
+These are the colour variables to be used around the webapp.
+The variables are set up to describe the color and number which represents the lightness of the color.
+The smaller the number the lighter the color. So $eggplant-100 would be light purple and $eggplant-600 would be dark purple.
+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.
+*/
+._okDvi {
+  flex: 1;
+  display: flex;
+  font-family: "Proxima Nova", sans-serif;
+}
+
+._17XdD {
+  position: relative;
+  flex-direction: row;
+  padding-bottom: 1em;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+
+._1O7OT ._3noGA {
+  cursor: default;
+}
+
+._1Hl3Q,
+._m0Vs9 {
+  font-family: inherit;
+}
+
+._1ULWH {
+  display: none;
+  visibility: hidden;
+}
+
+._3gjq8 {
+  position: absolute;
+  top: 1em;
+  right: 1.5em;
+  left: auto;
+  display: inline-block;
+  margin-top: 2px;
+  color: #949494;
+  cursor: pointer;
+  background-image: none;
+  width: 0;
+  height: 0;
+  border-top: 7px solid transparent;
+  border-bottom: 7px solid transparent;
+  border-right: 10px solid #464646;
+  margin-right: 1.5em;
+}
+._3gjq8:hover {
+  opacity: 0.8;
+}
+._3gjq8:hover {
+  border-right-color: #767676;
+}
+
+._1m-Kd {
+  position: absolute;
+  top: 1em;
+  right: 1.5em;
+  left: auto;
+  display: inline-block;
+  margin-top: 2px;
+  color: #949494;
+  cursor: pointer;
+  background-image: none;
+  width: 0;
+  height: 0;
+  border-top: 7px solid transparent;
+  border-bottom: 7px solid transparent;
+  border-left: 10px solid #464646;
+}
+._1m-Kd:hover {
+  opacity: 0.8;
+}
+._1m-Kd:hover {
+  opacity: 0.8;
+  border-left-color: #767676;
+}
+
+._Fq6Xh {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+._3i0Oo {
+  display: table;
+  margin: 0 1em;
+  margin-top: 1em;
+  border-spacing: 0;
+  border-collapse: collapse;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+
+._36X9Y {
+  display: table-caption;
+  margin-bottom: 0.5em;
+  padding: 0 0.5em;
+  text-align: left;
+}
+
+._36X9Y > div {
+  font-weight: 600;
+  font-size: 20px;
+  color: #464646;
+}
+
+._1aWPn {
+  display: table-header-group;
+  margin-top: 1em;
+}
+
+._3HXCK {
+  display: table-row;
+}
+
+._t-ctd {
+  display: table-cell;
+  padding: 0.5em;
+  color: #767676;
+  text-align: center;
+  font-size: 0.875em;
+}
+
+._t-ctd abbr[title] {
+  border-bottom: none;
+  text-decoration: none;
+}
+
+._XAbiR {
+  display: table-row-group;
+}
+
+._3Nwep {
+  display: table-row;
+}
+
+._3nNcG {
+  display: table-cell;
+  padding: 0.5em;
+  border-radius: 50%;
+  vertical-align: middle;
+  text-align: center;
+  cursor: pointer;
+}
+._3nNcG:not(._1O7OT):not(._1M4ZF):not(._2PEs8):not(._1PIJa):hover {
+  background: #F3F3F3;
+}
+
+._2T_z1 {
+  padding-top: 0.5em;
+}
+
+._1hVM6 {
+  color: #fb7448;
+  font-weight: 700;
+}
+
+._2PEs8:not(._1M4ZF):not(._1PIJa) {
+  background-color: #fdd5c8;
+  color: #fb7448;
+}
+
+._2PEs8:not(._1M4ZF):not(._1PIJa):hover {
+  background-color: #fb7448;
+  color: #fff;
+}
+
+._2PEs8._1hVM6:hover {
+  color: #fff;
+}
+
+._1M4ZF {
+  color: #C8C8C8;
+  cursor: default;
+}
+
+._1PIJa:not(._1M4ZF) {
+  color: #949494;
+  cursor: default;
+}
+
+._1L-hI {
+  position: relative;
+}
+
+._dDPZb {
+  position: absolute;
+  left: 0;
+  z-index: 1;
+  background: #fff;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
+}
+
+._1alhT {
+  display: table-cell;
+  padding: 0.5em;
+  min-width: 1em;
+  border-right: 1px solid #C8C8C8;
+  color: #949494;
+  vertical-align: middle;
+  text-align: right;
+  font-size: 0.75em;
+  cursor: pointer;
+}
+
+._3i0Oo {
+  border-collapse: separate;
+}
+
+._1alhT {
+  outline: none;
+}
+
+._3nNcG {
+  outline: none;
+  border: 1px solid transparent;
+  border-radius: 0;
+}
+
+._2PEs8:not(._1M4ZF) {
+  background-color: #fdd5c8;
+  color: #fb7448;
+}
+._2PEs8:first-of-type {
+  border-top-left-radius: 50%;
+  border-bottom-left-radius: 50%;
+}
+._2PEs8:last-of-type {
+  border-top-right-radius: 50%;
+  border-bottom-right-radius: 50%;
+}
+
+._3Nwep:hover {
+  background: #F3F3F3;
+}
+._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.
+**********************************/
+/* stylelint-disable color-no-hex */
+/*
+These are the colour variables to be used around the webapp.
+The variables are set up to describe the color and number which represents the lightness of the color.
+The smaller the number the lighter the color. So $eggplant-100 would be light purple and $eggplant-600 would be dark purple.
+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.
+*/
+._h724f {
+  line-height: normal;
+  padding: 0;
+  width: auto;
+  float: none;
+  color: #464646;
+  font-family: "Proxima Nova", sans-serif;
+  font-weight: 600;
+  font-size: 14px;
+  min-height: 16px;
+}
+
+._1VUoF {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+/*********************************
+For new colours, see _colors.scss.
+**********************************/
+/* stylelint-disable color-no-hex */
+/*
+These are the colour variables to be used around the webapp.
+The variables are set up to describe the color and number which represents the lightness of the color.
+The smaller the number the lighter the color. So $eggplant-100 would be light purple and $eggplant-600 would be dark purple.
+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.
+*/
+._1DWBq {
+  color: #464646;
+  font-family: "Proxima Nova", sans-serif;
+  font-weight: 400;
+  font-size: 12px;
+}
+/*********************************
+For new colours, see _colors.scss.
+**********************************/
+/* stylelint-disable color-no-hex */
+/*
+These are the colour variables to be used around the webapp.
+The variables are set up to describe the color and number which represents the lightness of the color.
+The smaller the number the lighter the color. So $eggplant-100 would be light purple and $eggplant-600 would be dark purple.
+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.
+*/
+._nZ2MD {
+  color: #e76767;
+  font-family: "Proxima Nova", sans-serif;
+  font-weight: 400;
+  font-size: 12px;
+}
+/*********************************
+For new colours, see _colors.scss.
+**********************************/
+/* stylelint-disable color-no-hex */
+/*
+These are the colour variables to be used around the webapp.
+The variables are set up to describe the color and number which represents the lightness of the color.
+The smaller the number the lighter the color. So $eggplant-100 would be light purple and $eggplant-600 would be dark purple.
+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.
+*/
+._ybKOk {
+  position: relative;
+  display: flex;
+  flex: 1;
+}
+
+._2COk3 input {
+  padding-left: 21px;
+}
+
+._1xXXN input {
+  padding-right: 21px;
+}
+
+._eX5OL {
+  position: absolute;
+  line-height: 22px;
+  padding: 8px;
+  color: #464646;
+  min-width: 8px;
+  pointer-events: none;
+  font-size: 14px;
+  font-family: "Proxima Nova", sans-serif;
+  box-sizing: content-box;
+  display: flex;
+  align-items: center;
+  height: 22px;
+  top: 0;
+  bottom: 0;
+  margin-top: auto;
+  margin-bottom: auto;
+  text-align: left;
+}
+._eX5OL svg {
+  color: #767676;
+}
+
+.__YH01 {
+  position: absolute;
+  line-height: 22px;
+  padding: 8px;
+  color: #464646;
+  min-width: 8px;
+  pointer-events: none;
+  font-size: 14px;
+  font-family: "Proxima Nova", sans-serif;
+  box-sizing: content-box;
+  display: flex;
+  align-items: center;
+  height: 22px;
+  top: 0;
+  bottom: 0;
+  margin-top: auto;
+  margin-bottom: auto;
+  right: 0;
+  text-align: right;
+}
+.__YH01 svg {
+  color: #767676;
+}
+/*********************************
+For new colours, see _colors.scss.
+**********************************/
+/* stylelint-disable color-no-hex */
+/*
+These are the colour variables to be used around the webapp.
+The variables are set up to describe the color and number which represents the lightness of the color.
+The smaller the number the lighter the color. So $eggplant-100 would be light purple and $eggplant-600 would be dark purple.
+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.
+*/
+._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;
+}
+._kIngZ input:hover {
+  background: #F3F3F3;
+}
+._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;
+}
+
+._32mWH._32mWH {
+  border-top-left-radius: 8px;
+}
+
+._3Jg2-._3Jg2- {
+  border-top-right-radius: 8px;
+}
+
+._1F5fj._1F5fj {
+  border-bottom-left-radius: 8px;
+}
+
+._1fTTW._1fTTW {
+  border-bottom-right-radius: 8px;
+}
+._3CaV0 {
+  max-width: 500px;
+}
+/*********************************
+For new colours, see _colors.scss.
+**********************************/
+/* stylelint-disable color-no-hex */
+/*
+These are the colour variables to be used around the webapp.
+The variables are set up to describe the color and number which represents the lightness of the color.
+The smaller the number the lighter the color. So $eggplant-100 would be light purple and $eggplant-600 would be dark purple.
+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.
+*/
 ._BkzdC {
   border-radius: 4px;
   padding: 7px;
@@ -1526,6 +2183,12 @@ Please ask a designer if you have questions about which colours to use.
   min-height: 16px;
 }
 
+._mQ9Rd {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
 ._RXyG_ {
   line-height: normal;
   padding: 0;
@@ -1771,227 +2434,9 @@ Please ask a designer if you have questions about which colours to use.
 }
 
 ._1Sc9D {
-  padding-top: 8px;
-  padding-bottom: 6px;
-  width: 100%;
-}
-/*********************************
-For new colours, see _colors.scss.
-**********************************/
-/* stylelint-disable color-no-hex */
-/*
-These are the colour variables to be used around the webapp.
-The variables are set up to describe the color and number which represents the lightness of the color.
-The smaller the number the lighter the color. So $eggplant-100 would be light purple and $eggplant-600 would be dark purple.
-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.
-*/
-._v1b-5 {
-  flex: 1;
-  display: flex;
-  font-family: "Proxima Nova", sans-serif;
-}
-
-._3mrLu {
-  position: relative;
-  flex-direction: row;
-  padding-bottom: 1em;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
-}
-
-._1J9dh ._8FcQE {
-  cursor: default;
-}
-
-._1SPuq,
-._24FJ6 {
-  font-family: inherit;
-}
-
-._Oxdm9 {
-  display: none;
-  visibility: hidden;
-}
-
-._20uqc {
-  position: absolute;
-  top: 1em;
-  right: 1.5em;
-  left: auto;
-  display: inline-block;
-  margin-top: 2px;
-  color: #949494;
-  cursor: pointer;
-  background-image: none;
-  width: 0;
-  height: 0;
-  border-top: 7px solid transparent;
-  border-bottom: 7px solid transparent;
-  border-right: 10px solid #464646;
-  margin-right: 1.5em;
-}
-._20uqc:hover {
-  opacity: 0.8;
-}
-._20uqc:hover {
-  border-right-color: #767676;
-}
-
-._3C53z {
-  position: absolute;
-  top: 1em;
-  right: 1.5em;
-  left: auto;
-  display: inline-block;
-  margin-top: 2px;
-  color: #949494;
-  cursor: pointer;
-  background-image: none;
-  width: 0;
-  height: 0;
-  border-top: 7px solid transparent;
-  border-bottom: 7px solid transparent;
-  border-left: 10px solid #464646;
-}
-._3C53z:hover {
-  opacity: 0.8;
-}
-._3C53z:hover {
-  opacity: 0.8;
-  border-left-color: #767676;
-}
-
-._M_eHz {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-}
-
-._3RPpJ {
-  display: table;
-  margin: 0 1em;
-  margin-top: 1em;
-  border-spacing: 0;
-  border-collapse: collapse;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
-}
-
-._1FXNw {
-  display: table-caption;
-  margin-bottom: 0.5em;
-  padding: 0 0.5em;
-  text-align: left;
-}
-
-._1FXNw > div {
-  font-weight: 600;
-  font-size: 20px;
-  color: #464646;
-}
-
-._3KcRU {
-  display: table-header-group;
-  margin-top: 1em;
-}
-
-._1fO_e {
-  display: table-row;
-}
-
-._c1Y-X {
-  display: table-cell;
-  padding: 0.5em;
-  color: #767676;
-  text-align: center;
-  font-size: 0.875em;
-}
-
-._c1Y-X abbr[title] {
-  border-bottom: none;
-  text-decoration: none;
-}
-
-._34mA1 {
-  display: table-row-group;
-}
-
-._1PmqZ {
-  display: table-row;
-}
-
-._1AWH2 {
-  display: table-cell;
-  padding: 0.5em;
-  border-radius: 50%;
-  vertical-align: middle;
-  text-align: center;
-  cursor: pointer;
-}
-._1AWH2:not(._1J9dh):not(._3vJkw):not(._1DR0N):not(._276GV):hover {
-  background: #F3F3F3;
-}
-
-._2M5xr {
-  padding-top: 0.5em;
-}
-
-._3N6fj {
-  color: #fb7448;
-  font-weight: 700;
-}
-
-._1DR0N:not(._3vJkw):not(._276GV) {
-  background-color: #fdd5c8;
-  color: #fb7448;
-}
-
-._1DR0N:not(._3vJkw):not(._276GV):hover {
-  background-color: #fb7448;
-  color: #fff;
-}
-
-._1DR0N._3N6fj:hover {
-  color: #fff;
-}
-
-._3vJkw {
-  color: #C8C8C8;
-  cursor: default;
-}
-
-._276GV:not(._3vJkw) {
-  color: #949494;
-  cursor: default;
-}
-
-._3Zqgu {
-  position: relative;
-}
-
-._20Ncd {
-  position: absolute;
-  left: 0;
-  z-index: 1;
-  background: #fff;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
-}
-
-._2hb-S {
-  display: table-cell;
-  padding: 0.5em;
-  min-width: 1em;
-  border-right: 1px solid #C8C8C8;
-  color: #949494;
-  vertical-align: middle;
-  text-align: right;
-  font-size: 0.75em;
-  cursor: pointer;
+  padding-top: 8px;
+  padding-bottom: 6px;
+  width: 100%;
 }
 /*********************************
 For new colours, see _colors.scss.
@@ -2242,346 +2687,85 @@ Please ask a designer if you have questions about which colours to use.
   outline: none;
 }
 ._25rf7:disabled, ._3qVhi input:disabled, ._3qVhi:disabled {
-  background-color: #F3F3F3;
-  color: #767676;
-}
-
-._2M9Ud {
-  border-color: #e76767 !important;
-}
-
-._3TUb2 {
-  border-left: 0 !important;
-  border-top-left-radius: 0 !important;
-  border-bottom-left-radius: 0 !important;
-  color: #767676;
-}
-
-._foqL0 {
-  border-right: 0 !important;
-  border-top-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;
-}
-._2Nkht {
-  background-color: #F3F3F3;
-}
-._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;
-}
-
-._3u72O {
-  outline: none;
-}
-
-._mG73F {
-  outline: none;
-  border: 1px solid transparent;
-  border-radius: 0;
-}
-
-._mG73F._MtLaz.from {
-  background-color: #fb7448;
-  color: #fff;
-  border-top-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%;
-}
-
-._MtLaz:not(._2pgnH) {
-  background-color: #fdd5c8;
-  color: #fb7448;
-}
-/*********************************
-For new colours, see _colors.scss.
-**********************************/
-/* stylelint-disable color-no-hex */
-/*
-These are the colour variables to be used around the webapp.
-The variables are set up to describe the color and number which represents the lightness of the color.
-The smaller the number the lighter the color. So $eggplant-100 would be light purple and $eggplant-600 would be dark purple.
-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.
-*/
-._okDvi {
-  flex: 1;
-  display: flex;
-  font-family: "Proxima Nova", sans-serif;
-}
-
-._17XdD {
-  position: relative;
-  flex-direction: row;
-  padding-bottom: 1em;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
-}
-
-._1O7OT ._3noGA {
-  cursor: default;
-}
-
-._1Hl3Q,
-._m0Vs9 {
-  font-family: inherit;
-}
-
-._1ULWH {
-  display: none;
-  visibility: hidden;
-}
-
-._3gjq8 {
-  position: absolute;
-  top: 1em;
-  right: 1.5em;
-  left: auto;
-  display: inline-block;
-  margin-top: 2px;
-  color: #949494;
-  cursor: pointer;
-  background-image: none;
-  width: 0;
-  height: 0;
-  border-top: 7px solid transparent;
-  border-bottom: 7px solid transparent;
-  border-right: 10px solid #464646;
-  margin-right: 1.5em;
-}
-._3gjq8:hover {
-  opacity: 0.8;
-}
-._3gjq8:hover {
-  border-right-color: #767676;
-}
-
-._1m-Kd {
-  position: absolute;
-  top: 1em;
-  right: 1.5em;
-  left: auto;
-  display: inline-block;
-  margin-top: 2px;
-  color: #949494;
-  cursor: pointer;
-  background-image: none;
-  width: 0;
-  height: 0;
-  border-top: 7px solid transparent;
-  border-bottom: 7px solid transparent;
-  border-left: 10px solid #464646;
-}
-._1m-Kd:hover {
-  opacity: 0.8;
-}
-._1m-Kd:hover {
-  opacity: 0.8;
-  border-left-color: #767676;
-}
-
-._Fq6Xh {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-}
-
-._3i0Oo {
-  display: table;
-  margin: 0 1em;
-  margin-top: 1em;
-  border-spacing: 0;
-  border-collapse: collapse;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
-}
-
-._36X9Y {
-  display: table-caption;
-  margin-bottom: 0.5em;
-  padding: 0 0.5em;
-  text-align: left;
-}
-
-._36X9Y > div {
-  font-weight: 600;
-  font-size: 20px;
-  color: #464646;
-}
-
-._1aWPn {
-  display: table-header-group;
-  margin-top: 1em;
-}
-
-._3HXCK {
-  display: table-row;
-}
-
-._t-ctd {
-  display: table-cell;
-  padding: 0.5em;
-  color: #767676;
-  text-align: center;
-  font-size: 0.875em;
-}
-
-._t-ctd abbr[title] {
-  border-bottom: none;
-  text-decoration: none;
-}
-
-._XAbiR {
-  display: table-row-group;
-}
-
-._3Nwep {
-  display: table-row;
-}
-
-._3nNcG {
-  display: table-cell;
-  padding: 0.5em;
-  border-radius: 50%;
-  vertical-align: middle;
-  text-align: center;
-  cursor: pointer;
-}
-._3nNcG:not(._1O7OT):not(._1M4ZF):not(._2PEs8):not(._1PIJa):hover {
-  background: #F3F3F3;
-}
-
-._2T_z1 {
-  padding-top: 0.5em;
-}
-
-._1hVM6 {
-  color: #fb7448;
-  font-weight: 700;
-}
-
-._2PEs8:not(._1M4ZF):not(._1PIJa) {
-  background-color: #fdd5c8;
-  color: #fb7448;
+  background-color: #F3F3F3;
+  color: #767676;
 }
 
-._2PEs8:not(._1M4ZF):not(._1PIJa):hover {
-  background-color: #fb7448;
-  color: #fff;
+._2M9Ud {
+  border-color: #e76767 !important;
 }
 
-._2PEs8._1hVM6:hover {
-  color: #fff;
+._3TUb2 {
+  border-left: 0 !important;
+  border-top-left-radius: 0 !important;
+  border-bottom-left-radius: 0 !important;
+  color: #767676;
 }
 
-._1M4ZF {
-  color: #C8C8C8;
-  cursor: default;
+._foqL0 {
+  border-right: 0 !important;
+  border-top-right-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
 }
 
-._1PIJa:not(._1M4ZF) {
-  color: #949494;
-  cursor: default;
+._3qVhi {
+  padding-bottom: 0px;
+  padding-top: 0px;
+  display: flex;
+  align-items: center;
 }
-
-._1L-hI {
-  position: relative;
+._3df9R {
+  border-color: #e76767 !important;
 }
-
-._dDPZb {
-  position: absolute;
-  left: 0;
-  z-index: 1;
-  background: #fff;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
+._2Nkht {
+  background-color: #F3F3F3;
 }
-
-._1alhT {
-  display: table-cell;
-  padding: 0.5em;
-  min-width: 1em;
-  border-right: 1px solid #C8C8C8;
-  color: #949494;
-  vertical-align: middle;
-  text-align: right;
-  font-size: 0.75em;
-  cursor: pointer;
+._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;
 }
 
-._3i0Oo {
+._wU6A4 {
   border-collapse: separate;
 }
 
-._1alhT {
+._3u72O {
   outline: none;
 }
 
-._3nNcG {
+._mG73F {
   outline: none;
   border: 1px solid transparent;
   border-radius: 0;
 }
 
-._2PEs8:not(._1M4ZF) {
-  background-color: #fdd5c8;
-  color: #fb7448;
-}
-._2PEs8:first-of-type {
+._mG73F._MtLaz.from {
+  background-color: #fb7448;
+  color: #fff;
   border-top-left-radius: 50%;
   border-bottom-left-radius: 50%;
 }
-._2PEs8:last-of-type {
-  border-top-right-radius: 50%;
-  border-bottom-right-radius: 50%;
-}
 
-._3Nwep:hover {
-  background: #F3F3F3;
-}
-._3Nwep:hover ._2PEs8:not(._1M4ZF) {
+._mG73F._MtLaz.to {
   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%;
 }
+
+._MtLaz:not(._2pgnH) {
+  background-color: #fdd5c8;
+  color: #fb7448;
+}
 /*********************************
 For new colours, see _colors.scss.
 **********************************/
@@ -2708,163 +2892,6 @@ 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.
 */
-._2puqJ {
-  position: fixed;
-  inset: 0px;
-  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: "";
-}
-
-._1167h {
-  opacity: 1;
-  transform: translateX(0);
-}
-
-._t_t7L {
-  opacity: 0;
-}
-
-._wQQ_2 {
-  position: initial;
-  border: 1px solid #C8C8C8;
-  background: #fff;
-  overflow: auto;
-  outline: none;
-  padding: 32px;
-  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
-  min-height: 200px;
-  display: flex;
-  flex-direction: column;
-}
-._wQQ_2 > form {
-  display: contents;
-}
-
-._3jwux {
-  opacity: 1;
-}
-
-._2c2QP {
-  opacity: 0;
-}
-/*********************************
-For new colours, see _colors.scss.
-**********************************/
-/* stylelint-disable color-no-hex */
-/*
-These are the colour variables to be used around the webapp.
-The variables are set up to describe the color and number which represents the lightness of the color.
-The smaller the number the lighter the color. So $eggplant-100 would be light purple and $eggplant-600 would be dark purple.
-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.
-*/
-._36nxW {
-  font-size: 24px;
-  line-height: 28px;
-  color: #464646;
-  font-weight: 600;
-  font-family: "Proxima Nova", sans-serif;
-}
-
-._2XwRD {
-  font-size: 20px;
-  line-height: 24px;
-  color: #767676;
-  font-family: "Proxima Nova", sans-serif;
-}
-/*********************************
-For new colours, see _colors.scss.
-**********************************/
-/* stylelint-disable color-no-hex */
-/*
-These are the colour variables to be used around the webapp.
-The variables are set up to describe the color and number which represents the lightness of the color.
-The smaller the number the lighter the color. So $eggplant-100 would be light purple and $eggplant-600 would be dark purple.
-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.
-*/
-/**
- * This is for adding a shadow when the body is scrollable.
- * It is using ::before and ::after to accomplish that => https://www.kizu.ru/shadowscroll/
- * There is a cleaner solution using background-attachment (https://lea.verou.me/2012/04/background-attachment-local/) but I had some issues in Chrome using that approach
- */
-._2J-ku {
-  overflow: auto;
-  margin-top: 24px;
-  font-family: "Proxima Nova", sans-serif;
-  font-size: 14px;
-  line-height: 16px;
-  position: relative;
-}
-
-._2ErCP {
-  z-index: 1;
-  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;
-}
-._2ErCP::before, ._2ErCP::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));
-}
-._2ErCP::after {
-  margin: -30px 0 0;
-  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 70%, #fff);
-}
-/*********************************
-For new colours, see _colors.scss.
-**********************************/
-/* stylelint-disable color-no-hex */
-/*
-These are the colour variables to be used around the webapp.
-The variables are set up to describe the color and number which represents the lightness of the color.
-The smaller the number the lighter the color. So $eggplant-100 would be light purple and $eggplant-600 would be dark purple.
-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.
-*/
-._LKOr5 {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-end;
-  padding-top: 40px;
-}
-
-._Qktd- {
-  margin-left: -12px;
-}
-/*********************************
-For new colours, see _colors.scss.
-**********************************/
-/* stylelint-disable color-no-hex */
-/*
-These are the colour variables to be used around the webapp.
-The variables are set up to describe the color and number which represents the lightness of the color.
-The smaller the number the lighter the color. So $eggplant-100 would be light purple and $eggplant-600 would be dark purple.
-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.
-*/
 ._2f81N {
   display: inline-flex;
   background-color: #fb7448;