cozy-sharing 10.3.0 → 10.4.0

package/dist/stylesheet.css

@@ -8,9 +8,7 @@
 .CozyPassFingerprintDialogContent__cozy-pass-fingerprint-modal__fingerprint___3qIGs p {
   color: var(--secondaryColor);
 }
-/*
-     imported from recipient.styl 
-    */
+/*  imported from recipient.styl  */
 
 @-moz-keyframes recipient__spin___2tYv3 {
   from {
@@ -100,1643 +98,91 @@
     transform: translate3d(4px, 0, 0);
   }
 }
-.u-visuallyhidden {
-  position: absolute !important;
-  border: 0 !important;
-  width: 0.063rem !important;
-  height: 0.063rem !important;
-  overflow: hidden !important;
-  padding: 0 !important;
-  white-space: nowrap !important;
-  clip: rect(0.063rem, 0.063rem, 0.063rem, 0.063rem) !important;
-  clip-path: inset(50%) !important;
-}
-.u-hide {
-  display: none !important;
-  visibility: hidden !important;
-}
-@media (max-width: 63.938rem) {
-  .u-hide--mob {
-    display: none !important;
-  }
-}
-@media (min-width: 64rem) {
-  .u-hide--tablet {
-    display: none !important;
-  }
-}
-@media (min-width: 48.063rem) {
-  .u-hide--desk {
-    display: none !important;
-  }
-}
-.u-dn {
-  display: none;
-}
-.u-di {
-  display: inline;
-}
-.u-db {
-  display: block;
-}
-.u-dib {
-  display: inline-block;
-}
-.u-dit {
-  display: inline-table;
-}
-.u-dt {
-  display: table;
-}
-.u-dtc {
-  display: table-cell;
-}
-.u-dt-row {
-  display: table-row;
-}
-.u-dt-row-group {
-  display: table-row-group;
-}
-.u-dt-column {
-  display: table-column;
-}
-.u-dt-column-group {
-  display: table-column-group;
-}
-@media (max-width: 30rem) {
-  .u-dn-t {
-    display: none;
-  }
-  .u-di-t {
-    display: inline;
-  }
-  .u-db-t {
-    display: block;
-  }
-  .u-dib-t {
-    display: inline-block;
-  }
-  .u-dit-t {
-    display: inline-table;
-  }
-  .u-dt-t {
-    display: table;
-  }
-  .u-dtc-t {
-    display: table-cell;
-  }
-  .u-dt-row-t {
-    display: table-row;
-  }
-  .u-dt-row-group-t {
-    display: table-row-group;
-  }
-  .u-dt-column-t {
-    display: table-column;
-  }
-  .u-dt-column-group-t {
-    display: table-column-group;
-  }
-}
-@media (max-width: 48rem) {
-  .u-dn-s {
-    display: none;
-  }
-  .u-di-s {
-    display: inline;
-  }
-  .u-db-s {
-    display: block;
-  }
-  .u-dib-s {
-    display: inline-block;
-  }
-  .u-dit-s {
-    display: inline-table;
-  }
-  .u-dt-s {
-    display: table;
-  }
-  .u-dtc-s {
-    display: table-cell;
-  }
-  .u-dt-row-s {
-    display: table-row;
-  }
-  .u-dt-row-group-s {
-    display: table-row-group;
-  }
-  .u-dt-column-s {
-    display: table-column;
-  }
-  .u-dt-column-group-s {
-    display: table-column-group;
-  }
-}
-@media (max-width: 63.938rem) {
-  .u-dn-m {
-    display: none;
-  }
-  .u-di-m {
-    display: inline;
-  }
-  .u-db-m {
-    display: block;
-  }
-  .u-dib-m {
-    display: inline-block;
-  }
-  .u-dit-m {
-    display: inline-table;
-  }
-  .u-dt-m {
-    display: table;
-  }
-  .u-dtc-m {
-    display: table-cell;
-  }
-  .u-dt-row-m {
-    display: table-row;
-  }
-  .u-dt-row-group-m {
-    display: table-row-group;
-  }
-  .u-dt-column-m {
-    display: table-column;
-  }
-  .u-dt-column-group-m {
-    display: table-column-group;
-  }
-}
-.u-black {
-  color: var(--black) !important;
-}
-.u-charcoalGrey {
-  color: var(--charcoalGrey) !important;
-}
-.u-coolGrey {
-  color: var(--coolGrey) !important;
-}
-.u-silver {
-  color: var(--silver) !important;
-}
-.u-slateGrey {
-  color: var(--slateGrey) !important;
-}
-.u-lightishPurple {
-  color: #b449e7 !important;
-}
-.u-dodgerBlue {
-  color: #297ef2 !important;
-}
-.u-overlay {
-  color: var(--overlay) !important;
-}
-.u-paleGrey {
-  color: var(--paleGrey) !important;
-}
-.u-monza {
-  color: #dd0505 !important;
-}
-.u-pomegranate {
-  color: #f52d2d !important;
-}
-.u-primaryBackgroundLight {
-  color: var(--primaryBackgroundLight) !important;
-}
-.u-primaryColor {
-  color: var(--primaryColor) !important;
-}
-.u-primaryColorLight {
-  color: var(--primaryColorLight) !important;
-}
-.u-primaryContrastTextColor {
-  color: var(--primaryContrastTextColor) !important;
-}
-.u-error {
-  color: var(--errorColor) !important;
-}
-.u-errorBackground {
-  color: var(--errorBackground) !important;
-}
-.u-success {
-  color: var(--successColor) !important;
-}
-.u-warning {
-  color: var(--warningColor) !important;
-}
-.u-info {
-  color: var(--infoColor) !important;
-}
-.u-weirdGreen {
-  color: #40de8e !important;
-}
-.u-white {
-  color: var(--white) !important;
-}
-.u-breakword {
-  word-break: break-word;
-}
-.u-ellipsis {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.u-spacellipsis {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: break-spaces;
-}
-@media (max-width: 30rem) {
-  .u-spacellipsis-t {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: break-spaces;
-  }
-}
-@media (max-width: 48rem) {
-  .u-spacellipsis-s {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: break-spaces;
-  }
-}
-@media (max-width: 63.938rem) {
-  .u-spacellipsis-m {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: break-spaces;
-  }
-}
-.u-midellipsis {
-  display: flex;
-  flex-wrap: nowrap;
-}
-.u-midellipsis > * {
-  display: inline-block;
-  max-width: 50%;
-  overflow: hidden;
-  white-space: pre;
-}
-.u-midellipsis > :first-child {
-  text-overflow: ellipsis;
-}
-.u-midellipsis > :last-child {
-  text-overflow: clip;
-  direction: rtl;
-}
-@supports (text-overflow: '[...]') {
-  .u-midellipsis > :first-child {
-    text-overflow: '[...]';
-  }
-}
-.u-link:link {
-  color: var(--linkColor) !important;
-  text-decoration: var(--linkTextDecoration) !important;
-}
-.u-link:visited,
-.u-link:active,
-.u-link:hover,
-.u-link:focus {
-  color: var(--linkColorActive) !important;
-}
-.u-lh-tiny {
-  line-height: 1 !important;
-}
-.u-lh-xsmall {
-  line-height: 1.1 !important;
-}
-.u-lh-small {
-  line-height: 1.2 !important;
-}
-.u-lh-medium {
-  line-height: 1.3 !important;
-}
-.u-lh-large {
-  line-height: 1.4 !important;
-}
-.u-lh-xlarge {
-  line-height: 1.5 !important;
-}
-.u-fz-tiny {
-  font-size: 0.75rem !important;
-  line-height: 1.3 !important;
-}
-.u-fz-xsmall {
-  font-size: 0.813rem !important;
-  line-height: 1.4 !important;
-}
-.u-fz-small {
-  font-size: 0.875rem !important;
-  line-height: 1.4 !important;
-}
-.u-fz-medium {
-  font-size: 1rem !important;
-  line-height: 1.5 !important;
-}
-.u-fz-large {
-  font-size: 1.125rem !important;
-  line-height: 1.5 !important;
-}
-@media (max-width: 30rem) {
-  .u-fz-tiny-t {
-    font-size: 0.75rem !important;
-    line-height: 1.3 !important;
-  }
-  .u-fz-xsmall-t {
-    font-size: 0.813rem !important;
-    line-height: 1.4 !important;
-  }
-  .u-fz-small-t {
-    font-size: 0.875rem !important;
-    line-height: 1.4 !important;
-  }
-  .u-fz-medium-t {
-    font-size: 1rem !important;
-    line-height: 1.5 !important;
-  }
-  .u-fz-large-t {
-    font-size: 1.125rem !important;
-    line-height: 1.5 !important;
-  }
-}
-@media (max-width: 48rem) {
-  .u-fz-tiny-s {
-    font-size: 0.75rem !important;
-    line-height: 1.3 !important;
-  }
-  .u-fz-xsmall-s {
-    font-size: 0.813rem !important;
-    line-height: 1.4 !important;
-  }
-  .u-fz-small-s {
-    font-size: 0.875rem !important;
-    line-height: 1.4 !important;
-  }
-  .u-fz-medium-s {
-    font-size: 1rem !important;
-    line-height: 1.5 !important;
-  }
-  .u-fz-large-s {
-    font-size: 1.125rem !important;
-    line-height: 1.5 !important;
-  }
-}
-@media (max-width: 63.938rem) {
-  .u-fz-tiny-m {
-    font-size: 0.75rem !important;
-    line-height: 1.3 !important;
-  }
-  .u-fz-xsmall-m {
-    font-size: 0.813rem !important;
-    line-height: 1.4 !important;
-  }
-  .u-fz-small-m {
-    font-size: 0.875rem !important;
-    line-height: 1.4 !important;
-  }
-  .u-fz-medium-m {
-    font-size: 1rem !important;
-    line-height: 1.5 !important;
-  }
-  .u-fz-large-m {
-    font-size: 1.125rem !important;
-    line-height: 1.5 !important;
-  }
-}
-.u-ta-left {
-  text-align: left !important;
-}
-.u-ta-right {
-  text-align: right !important;
-}
-.u-ta-center {
-  text-align: center !important;
-}
-.u-ta-justify {
-  text-align: justify !important;
-}
-@media (max-width: 30rem) {
-  .u-ta-left-t {
-    text-align: left !important;
-  }
-  .u-ta-right-t {
-    text-align: right !important;
-  }
-  .u-ta-center-t {
-    text-align: center !important;
-  }
-  .u-ta-justify-t {
-    text-align: justify !important;
-  }
-}
-@media (max-width: 48rem) {
-  .u-ta-left-s {
-    text-align: left !important;
-  }
-  .u-ta-right-s {
-    text-align: right !important;
-  }
-  .u-ta-center-s {
-    text-align: center !important;
-  }
-  .u-ta-justify-s {
-    text-align: justify !important;
-  }
-}
-@media (max-width: 63.938rem) {
-  .u-ta-left-m {
-    text-align: left !important;
-  }
-  .u-ta-right-m {
-    text-align: right !important;
-  }
-  .u-ta-center-m {
-    text-align: center !important;
-  }
-  .u-ta-justify-m {
-    text-align: justify !important;
-  }
-}
-.u-fs-normal {
-  font-style: normal !important;
-}
-.u-fs-italic {
-  font-style: italic !important;
-}
-@media (max-width: 30rem) {
-  .u-fs-normal-t {
-    font-style: normal !important;
-  }
-  .u-fs-italic-t {
-    font-style: italic !important;
-  }
-}
-@media (max-width: 48rem) {
-  .u-fs-normal-s {
-    font-style: normal !important;
-  }
-  .u-fs-italic-s {
-    font-style: italic !important;
-  }
-}
-@media (max-width: 63.938rem) {
-  .u-fs-normal-m {
-    font-style: normal !important;
-  }
-  .u-fs-italic-m {
-    font-style: italic !important;
-  }
-}
-.u-fw-normal {
-  font-weight: normal;
-}
-.u-fw-bold {
-  font-weight: bold;
-}
-@media (max-width: 30rem) {
-  .u-fw-normal-t {
-    font-weight: normal;
-  }
-  .u-fw-bold-t {
-    font-weight: bold;
-  }
-}
-@media (max-width: 48rem) {
-  .u-fw-normal-s {
-    font-weight: normal;
-  }
-  .u-fw-bold-s {
-    font-weight: bold;
-  }
-}
-@media (max-width: 63.938rem) {
-  .u-fw-normal-m {
-    font-weight: normal;
-  }
-  .u-fw-bold-m {
-    font-weight: bold;
-  }
-}
-@media (pointer: coarse) {
-}
-:root {
-  --invertedBackgroundColor: #297ef2;
-  --invertedContrastTextColor: #fff;
-}
-.recipient__CozyTheme--inverted___21SPM {
-  --primaryTextColor: #fff;
-  --secondaryTextColor: rgba(255,255,255,0.64);
-  --disabledTextColor: rgba(255,255,255,0.4);
-  --hintTextColor: rgba(255,255,255,0.4);
-  --iconTextColor: #fff;
-  --actionColorActive: #fff;
-  --actionColorHover: rgba(255,255,255,0.08);
-  --actionColorSelected: rgba(255,255,255,0.16);
-  --actionColorDisabled: rgba(255,255,255,0.32);
-  --actionColorDisabledBackground: rgba(255,255,255,0.12);
-  --actionColorFocus: rgba(255,255,255,0.24);
-  --actionColorGhost: rgba(255,255,255,0.08);
-  --actionColorHoverGhost: rgba(255,255,255,0.16);
-  --dividerColor: rgba(255,255,255,0.16);
-  --borderMainColor: rgba(255,255,255,0.24);
-  --borderDisabledColor: rgba(255,255,255,0.12);
-  --borderGhostColor: rgba(255,255,255,0.48);
-  --borderGhostDisabledColor: rgba(255,255,255,0.24);
-  --paperBackgroundColor: #297ef2;
-  --defaultBackgroundColor: #579eff;
-  --contrastBackgroundColor: rgba(255,255,255,0.12);
-  --primaryColorLight: #fff;
-  --primaryColor: #fff;
-  --primaryColorDark: #eaf3ff;
-  --primaryContrastTextColor: #297ef2;
-  --secondaryColorLight: #f8eefd;
-  --secondaryColor: #ecd7f7;
-  --secondaryColorDark: #deb8f0;
-  --secondaryContrastTextColor: rgba(29,33,42,0.9);
-  --errorColorLight: #ffecec;
-  --errorColor: #ffd3d3;
-  --errorColorDark: #ffb9b9;
-  --errorColorContrastText: rgba(29,33,42,0.9);
-  --errorBackground: #d31f1f;
-  --warningColorLight: #fff3dd;
-  --warningColor: #ffe4b5;
-  --warningColorDark: #ffd58b;
-  --warningColorContrastText: rgba(29,33,42,0.9);
-  --successColorLight: #e3ffe7;
-  --successColor: #c0f4c6;
-  --successColorDark: #97eca1;
-  --successColorContrastText: rgba(29,33,42,0.9);
-  --infoColorLight: #d4feff;
-  --infoColor: #affdff;
-  --infoColorDark: #86f5f7;
-  --infoColorContrastText: rgba(29,33,42,0.9);
-/*
-    The CSS variables below are historic and we should strive not to
-    use them. Prefer to use directly semantic colors above.
-    */
-  --iconColor: currentColor;
-  --textIconColor: #fff;
-  --actionMenuIconColor: #fff;
-  --barIconColor: #fff;
-  --barIconColorDisabled: rgba(255,255,255,0.88);
-  --spinnerColor: #fff;
-  --linkColor: #fff;
-  --linkColorActive: #fff;
-  --linkTextDecoration: underline;
-  --regularButtonPrimaryColor: #fff;
-  --regularButtonSecondaryColor: #fff;
-  --regularButtonActiveColor: rgba(255,255,255,0.88);
-  --regularButtonConstrastColor: #297ef2;
-  --secondaryButtonPrimaryColor: #297ef2;
-  --secondaryButtonSecondaryColor: #fff;
-  --secondaryButtonActiveColor: rgba(255,255,255,0.24);
-  --secondaryButtonContrastColor: #fff;
-  --dividerColor2: rgba(255,255,255,0.16);
-}
-html {
-/*
-    Grey
-
-    Stylus: grey0        -  #FFFFFF, CSS: var(--grey0)
-    Stylus: grey50       -  #f9fafb, CSS: var(--grey50)
-    Stylus: grey100      -  #f4f5f6, CSS: var(--grey100)
-    Stylus: grey200      -  #eceff1, CSS: var(--grey200)
-    Stylus: grey300      -  #dde0e3, CSS: var(--grey300)
-    Stylus: grey400      -  #bfc3c7, CSS: var(--grey400)
-    Stylus: grey500      -  #9da2a6, CSS: var(--grey500)
-    Stylus: grey600      -  #7c8086, CSS: var(--grey600)
-    Stylus: grey700      -  #5d6169, CSS: var(--grey700)
-    Stylus: grey800      -  #3e424a, CSS: var(--grey800)
-    Stylus: grey900      -  #1d212a, CSS: var(--grey900)
-    Stylus: greyA100     -  #d3d6d8, CSS: var(--greyA100)
-    Stylus: greyA200     -  #a7abaf, CSS: var(--greyA200)
-    Stylus: greyA400     -  #2c3039, CSS: var(--greyA400)
-    Stylus: greyA700     -  #5d6169, CSS: var(--greyA700)
-    Stylus: white        -  #FFFFFF, CSS: var(--white)
-    Stylus: paleGrey     -  #F5F6F7, CSS: var(--paleGrey)
-    Stylus: silver       -  #D6D8Da, CSS: var(--silver)
-    Stylus: coolGrey     -  #95999D, CSS: var(--coolGrey)
-    Stylus: slateGrey    -  #5D6165, CSS: var(--slateGrey)
-    Stylus: charcoalGrey -  #32363F, CSS: var(--charcoalGrey)
-    Stylus: black        -  #000000, CSS: var(--black)
-
-    Styleguide Settings.colors.grey
-    */
-  --grey0: #fff;
-  --grey50: #f9fafb;
-  --grey100: #f4f5f6;
-  --grey200: #eceff1;
-  --grey300: #dde0e3;
-  --grey400: #bfc3c7;
-  --grey500: #9da2a6;
-  --grey600: #7c8086;
-  --grey700: #5d6169;
-  --grey800: #3e424a;
-  --grey900: #1d212a;
-  --greyA100: #d3d6d8;
-  --greyA200: #a7abaf;
-  --greyA400: #2c3039;
-  --greyA700: #5d6169;
-  --white: #fff;
-  --paleGrey: #f5f6f7;
-  --silver: #d6d8da;
-  --coolGrey: #95999d;
-  --slateGrey: #5d6165;
-  --charcoalGrey: #32363f;
-  --black: #000;
-  --overlay: rgba(50,54,63,0.5);
-/*
-    Blue
-
-    Stylus: zircon       -  #F5FAFF, CSS: var(--zircon)
-    Stylus: dodgerBlue   -  #297EF2, CSS: var(--dodgerBlue)
-    Stylus: scienceBlue  -  #0B61D6, CSS: var(--scienceBlue)
-
-    Styleguide Settings.colors.blue
-    */
-  --zircon: #f5faff;
-  --dodgerBlue: #297ef2;
-  --scienceBlue: #0b61d6;
-/*
-    Green
-
-    Stylus: weirdGreen   - #40DE8E, CSS: var(--weirdGreen)
-    Stylus: emerald      - #35CE68, CSS: var(--emerald)
-    Stylus: malachite    - #08b442, CSS: var(--malachite)
-
-    Styleguide Settings.colors.green
-    */
-  --weirdGreen: #40de8e;
-  --emerald: #35ce68;
-  --malachite: #08b442;
-/*
-    Orange
-
-    Stylus: mango         - #FF962F, CSS: var(--mango)
-
-    Styleguide Settings.colors.orange
-    */
-  --mango: #ff962f;
-/*
-    Red
-
-    Stylus: chablis      - #FFF2F2, CSS: var(--chablis)
-    Stylus: yourPink     - #FDCBCB, CSS: var(--yourPink)
-    Stylus: fuchsia      - #FC4C83, CSS: var(--fuchsia)
-    Stylus: pomegranate  - #F52D2D, CSS: var(--pomegranate)
-    Stylus: monza        - #DD0505, CSS: var(--monza)
-
-    Styleguide Settings.colors.red
-    */
-  --chablis: #fff2f2;
-  --yourPink: #fdcbcb;
-  --fuchsia: #fc4c83;
-  --pomegranate: #f52d2d;
-  --monza: #dd0505;
-}
-html,
-.recipient__CozyTheme--normal___3ABO0 {
-/*
-    Primary colors
-
-    Stylus: primaryColorLightest     - #B3D3FF, CSS: var(--primaryColorLightest)
-    Stylus: primaryColorLight        - #5C9DF5, CSS: var(--primaryColorLight)
-    Stylus: primaryColor             - #297EF2, CSS: var(--primaryColor)
-    Stylus: primaryColorDark         - #0B61D6, CSS: var(--primaryColorDark)
-    Stylus: primaryContrastTextColor - #FFF, CSS: var(--primaryContrastTextColor)
-
-    Styleguide Settings.theme.primary
-    */
-  --primaryColorLightest: #b3d3ff;
-  --primaryColorLight: #579eff;
-  --primaryColor: #297ef2;
-  --primaryColorDark: #0f5cc7;
-  --primaryContrastTextColor: #fff;
-/*
-    Secondary colors
-
-    Stylus: secondaryColorLightest     - #FFD3D3, CSS: var(--secondaryColorLightest)
-    Stylus: secondaryColorLight        - #F96B6B, CSS: var(--secondaryColorLight)
-    Stylus: secondaryColor             - #EA3F3F, CSS: var(--secondaryColor)
-    Stylus: secondaryColorDark         - #D31F1F, CSS: var(--secondaryColorDark)
-    Stylus: secondaryContrastTextColor -  #FFF, CSS: var(--secondaryContrastTextColor)
-
-    Styleguide Settings.theme.secondary
-    */
-  --secondaryColorLightest: #ffd3d3;
-  --secondaryColorLight: #f96b6b;
-  --secondaryColor: #ea3f3f;
-  --secondaryColorDark: #d31f1f;
-  --secondaryContrastTextColor: #fff;
-/*
-    Background colors
-
-    Stylus: primaryBackgroundLight -  #F7FAFF, CSS: var(--primaryBackgroundLight)
-    Stylus: paperBackgroundColor -  #FFF, CSS: var(--paperBackgroundColor)
-    Stylus: defaultBackgroundColor -  #F4F5F6, CSS: var(--defaultBackgroundColor)
-    Stylus: contrastBackgroundColor -  #F5F5F6, CSS: var(--contrastBackgroundColor)
-
-    Styleguide Settings.theme.background
-    */
-  --primaryBackgroundLight: #f7faff;
-  --paperBackgroundColor: #fff;
-  --defaultBackgroundColor: #f4f5f6;
-  --contrastBackgroundColor: rgba(29,33,42,0.048);
-/*
-    Text colors
-
-    These colors use the alpha layer. Be careful to use the semantic variable.
-    Hexadecimal colors are here only as an example on a white background.
-
-    Stylus: primaryTextColor -  #383B43, CSS: var(--primaryTextColor)
-    Stylus: secondaryTextColor - #6F7177, CSS: var(--secondaryTextColor)
-    Stylus: disabledTextColor - #BEBFC1, CSS: var(--disabledTextColor)
-    Stylus: hintTextColor - #BEBFC1, CSS: var(--hintTextColor)
-    Stylus: iconTextColor - #66686D, CSS: var(--iconTextColor)
-
-    Styleguide Settings.theme.text
-    */
-  --primaryTextColor: rgba(29,33,42,0.9);
-  --secondaryTextColor: rgba(29,33,42,0.64);
-  --disabledTextColor: rgba(29,33,42,0.32);
-  --hintTextColor: rgba(29,33,42,0.32);
-  --iconTextColor: rgba(29,33,42,0.72);
-/*
-    Action colors
-
-    These colors use the alpha layer. Be careful to use the semantic variable.
-    Hexadecimal colors are here only as an example on a white background.
-
-    Stylus: actionColorActive   - #8A8C90, CSS: var(--actionColorActive)
-    Stylus: actionColorHover   - #F7F7F7, CSS: var(--actionColorHover)
-    Stylus: actionColorSelected   - #EFEFF0, CSS: var(--actionColorSelected)
-    Stylus: actionColorDisabled   - #CFCFD1, CSS: var(--actionColorDisabled)
-    Stylus: actionColorDisabledBackground   - #E7E7E8, CSS: var(--actionColorDisabledBackground)
-    Stylus: actionColorFocus   - #E7E7E8, CSS: var(--actionColorFocus)
-    Stylus: actionColorGhost   - #EFEFF0, CSS: var(--actionColorGhost)
-    Stylus: actionColorHoverGhost   - #DFE0E0, CSS: var(--actionColorHoverGhost)
-
-    Styleguide Settings.theme.action
-    */
-  --actionColorActive: rgba(29,33,42,0.56);
-  --actionColorHover: rgba(29,33,42,0.04);
-  --actionColorSelected: rgba(29,33,42,0.08);
-  --actionColorDisabled: rgba(29,33,42,0.24);
-  --actionColorDisabledBackground: rgba(29,33,42,0.12);
-  --actionColorFocus: rgba(29,33,42,0.12);
-  --actionColorGhost: rgba(29,33,42,0.08);
-  --actionColorHoverGhost: rgba(29,33,42,0.16);
-/*
-    Border colors
-
-    These colors use the alpha layer. Be careful to use the semantic variable.
-    Hexadecimal colors are here only as an example on a white background.
-
-    Stylus: borderMainColor - #DFE0E0, CSS: var(--borderMainColor)
-    Stylus: borderDisabledColor - #EFEFF0, CSS: var(--borderDisabledColor)
-    Stylus: borderGhostColor - #9D9EA1, CSS: var(--borderGhostColor)
-    Stylus: borderGhostDisabledColor - #DFE0E0, CSS: var(--borderGhostDisabledColor)
-
-    Styleguide Settings.theme.border
-    */
-  --borderMainColor: rgba(29,33,42,0.16);
-  --borderDisabledColor: rgba(29,33,42,0.08);
-  --borderGhostColor: rgba(29,33,42,0.48);
-  --borderGhostDisabledColor: rgba(29,33,42,0.16);
-/*
-    Divider colors
-
-    These colors use the alpha layer. Be careful to use the semantic variable.
-    Hexadecimal colors are here only as an example on a white background.
-
-    Stylus: dividerColor - #E3E4E5, CSS: var(--dividerColor)
-
-    Styleguide Settings.theme.divider
-    */
-  --dividerColor: rgba(29,33,42,0.12);
-/*
-    Success colors
-
-    Stylus: successColorLight        -  #38C949, CSS: var(--successColorLight)
-    Stylus: successColor             -  #09AB1B, CSS: var(--successColor)
-    Stylus: successColorDark         -  #018711, CSS: var(--successColorDark)
-    Stylus: successColorContrastText -  #FFF, CSS: var(--successColorContrastText)
-
-    Styleguide Settings.theme.success
-    */
-  --successColorLight: #38c949;
-  --successColor: #09ab1b;
-  --successColorDark: #018711;
-  --successColorContrastText: #fff;
-/*
-    Warning colors
-
-    Stylus: warningColorLight        -  #EFA82F, CSS: var(--warningColorLight)
-    Stylus: warningColor             -  #CB8100, CSS: var(--warningColor)
-    Stylus: warningColorDark         -  #986100, CSS: var(--warningColorDark)
-    Stylus: warningColorContrastText -  #FFF, CSS: var(--warningColorContrastText)
-
-    Styleguide Settings.theme.warning
-    */
-  --warningColorLight: #efa82d;
-  --warningColor: #cb8100;
-  --warningColorDark: #986100;
-  --warningColorContrastText: #fff;
-/*
-    Error colors
-
-    Stylus: errorColorLightest     -  #FFECEC, CSS: var(--errorColorLightest)
-    Stylus: errorColorLight        -  #F96B6B, CSS: var(--errorColorLight)
-    Stylus: errorColor             -  #EA3F3F, CSS: var(--errorColor)
-    Stylus: errorColorDark         -  #D31F1F, CSS: var(--errorColorDark)
-    Stylus: errorBackground        -  #FFECEC, CSS: var(--errorBackground)
-    Stylus: errorColorContrastText -  #FFF, CSS: var(--errorColorContrastText)
-
-    Styleguide Settings.theme.error
-    */
-  --errorColorLightest: #ffecec;
-  --errorColorLight: #f96b6b;
-  --errorColor: #ea3f3f;
-  --errorColorDark: #d31f1f;
-  --errorBackground: #ffecec;
-  --errorColorContrastText: #fff;
-/*
-    Info colors
-
-    Stylus: infoColorLight        -  #0EC4C7, CSS: var(--infoColorLight)
-    Stylus: infoColor             -  #009FA2, CSS: var(--infoColor)
-    Stylus: infoColorDark         -  #007578, CSS: var(--infoColorDark)
-    Stylus: infoColorContrastText -  #FFF, CSS: var(--infoColorContrastText)
-
-    Styleguide Settings.theme.info
-    */
-  --infoColorLight: #0ec4c7;
-  --infoColor: #009fa2;
-  --infoColorDark: #007578;
-  --infoColorContrastText: #fff;
-/*
-    Shadow colors
-    */
-  --shadow0: none;
-  --shadow1: 0px 2px 4px 0px rgba(29,33,42,0.08), 0px 4px 16px 0px rgba(29,33,42,0.06), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
-  --shadow2: 0px 3px 5px 0px rgba(29,33,42,0.09), 0px 4px 17px 0px rgba(29,33,42,0.07), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
-  --shadow3: 0px 3px 5px -1px rgba(29,33,42,0.09), 0px 5px 19px 1px rgba(29,33,42,0.08), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
-  --shadow4: 0px 3px 6px -1px rgba(29,33,42,0.1), 0px 5px 20px 1px rgba(29,33,42,0.08), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
-  --shadow5: 0px 4px 6px -1px rgba(29,33,42,0.11), 0px 5px 22px 1px rgba(29,33,42,0.09), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
-  --shadow6: 0px 4px 7px -2px rgba(29,33,42,0.11), 0px 6px 23px 2px rgba(29,33,42,0.1), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
-  --shadow7: 0px 5px 7px -2px rgba(29,33,42,0.12), 0px 6px 24px 2px rgba(29,33,42,0.11), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
-  --shadow8: 0px 5px 8px -2px rgba(29,33,42,0.13), 0px 6px 26px 2px rgba(29,33,42,0.11), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
-  --shadow9: 0px 5px 8px -3px rgba(29,33,42,0.14), 0px 7px 27px 3px rgba(29,33,42,0.12), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
-  --shadow10: 0px 6px 9px -3px rgba(29,33,42,0.14), 0px 7px 29px 3px rgba(29,33,42,0.13), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
-  --shadow11: 0px 6px 9px -3px rgba(29,33,42,0.15), 0px 7px 30px 3px rgba(29,33,42,0.14), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
-  --shadow12: 0px 7px 10px -4px rgba(29,33,42,0.16), 0px 8px 31px 4px rgba(29,33,42,0.15), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
-  --shadow13: 0px 7px 10px -4px rgba(29,33,42,0.16), 0px 8px 33px 4px rgba(29,33,42,0.15), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
-  --shadow14: 0px 8px 11px -5px rgba(29,33,42,0.17), 0px 9px 34px 5px rgba(29,33,42,0.16), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
-  --shadow15: 0px 8px 11px -5px rgba(29,33,42,0.18), 0px 9px 35px 5px rgba(29,33,42,0.17), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
-  --shadow16: 0px 9px 12px -5px rgba(29,33,42,0.18), 0px 9px 37px 5px rgba(29,33,42,0.18), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
-  --shadow17: 0px 9px 12px -6px rgba(29,33,42,0.19), 0px 10px 38px 6px rgba(29,33,42,0.19), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
-  --shadow18: 0px 9px 13px -6px rgba(29,33,42,0.2), 0px 10px 40px 6px rgba(29,33,42,0.19), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
-  --shadow19: 0px 10px 13px -6px rgba(29,33,42,0.21), 0px 10px 41px 6px rgba(29,33,42,0.2), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
-  --shadow20: 0px 10px 14px -7px rgba(29,33,42,0.21), 0px 11px 42px 7px rgba(29,33,42,0.21), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
-  --shadow21: 0px 11px 14px -7px rgba(29,33,42,0.22), 0px 11px 44px 7px rgba(29,33,42,0.22), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
-  --shadow22: 0px 11px 15px -7px rgba(29,33,42,0.23), 0px 11px 45px 7px rgba(29,33,42,0.22), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
-  --shadow23: 0px 12px 15px -8px rgba(29,33,42,0.23), 0px 12px 47px 8px rgba(29,33,42,0.23), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
-  --shadow24: 0px 12px 16px -8px rgba(29,33,42,0.24), 0px 12px 48px 8px rgba(29,33,42,0.24), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
-  --shadow25: 0px 1px 4px rgba(29,33,42,0.04);
-/*
-    ---------------------------------------------------------------------
-    */
-/*
-    The CSS variables below are historic and we should strive not to
-    use them. Prefer to use directly semantic colors above.
-    */
-  --spinnerColor: var(--primaryColor);
-  --linkColor: var(--primaryColor);
-  --linkTextDecoration: none;
-  --linkColorActive: var(--primaryColorDark);
-  --invertedTabsActiveTextColor: var(--primaryContrastTextColor);
-  --invertedTabsInactiveTextColor: var(--primaryContrastTextColor);
-  --invertedTabsIndicatorColor: var(--primaryContrastTextColor);
-  --invertedTabsBackgroundColor: var(--primaryColor);
-  --regularButtonPrimaryColor: var(--primaryColor);
-  --regularButtonSecondaryColor: var(--primaryColor);
-  --regularButtonActiveColor: var(--primaryColorDark);
-  --regularButtonConstrastColor: var(--primaryContrastTextColor);
-  --secondaryButtonPrimaryColor: #fff;
-  --secondaryButtonSecondaryColor: var(--silver);
-  --secondaryButtonActiveColor: var(--silver);
-  --secondaryButtonContrastColor: var(--black);
-  --dividerColor2: var(--coolGrey);
-  --iconColor: currentColor;
-  --textIconColor: var(--charcoalGrey);
-  --actionMenuIconColor: var(--slateGrey);
-  --neutralBackground: var(--paleGrey);
-  --buttonTextTransform: uppercase;
-  --buttonBorderRadius: 0.125rem;
-  --navTextColor: var(--slateGrey);
-  --navTextActiveColor: var(--slateGrey);
-  --navTextHoverColor: var(--charcoalGrey);
-  --alertErrorColor: #fff;
-  --alertErrorBackgroundColor: var(--errorColor);
-  --alertSuccessColor: #fff;
-  --alertSuccessBackgroundColor: var(--successColor);
-  --alertInfoColor: #fff;
-  --alertInfoBackgroundColor: var(--slateGrey);
-}
-:root {
-  --genericRecipientBackground: var(--slateGrey);
-  --genericRecipientColor: var(--white);
-}
-.recipient__recipient___2DmZI {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
-@media (max-width: 48rem) {
-  .recipient__recipient___2DmZI {
-    align-items: flex-start;
-  }
-}
-.recipient__recipients-list-light___Vq4op .recipient__recipient___2DmZI {
-  margin: 1rem 0;
-}
-.recipient__recipients-list-light___Vq4op + .recipient__recipient___2DmZI {
-  margin-top: 1rem;
-}
-.recipient__recipient-idents___3s7rw {
-  flex: 1 1 auto;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.recipient__recipient-status-icon___-liGw {
-  margin-right: 0.25rem;
-}
-.recipient__recipient-user___1THIU,
-.recipient__recipient-details___2fZfc {
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-  line-height: 1.3;
-}
-.recipient__recipient-user___1THIU {
-  font-size: 1rem;
-  font-weight: bold;
-}
-.recipient__recipient-details___2fZfc {
-  font-size: 0.875rem;
-  color: var(--coolGrey);
-}
-.recipient__avatar___2LnIV {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
-.recipient__avatar___2LnIV .recipient__recipient-user___1THIU {
-  font-size: 1.125rem;
-}
-.recipient__link-recipient-icon-circle___3ZTU- {
-  border: 1px solid var(--borderMainColor);
-  background-color: unset;
-  color: unset;
-}
-.recipient__recipients-avatars___1npjD {
-  display: inline-flex;
-  flex-direction: row-reverse;
-  margin-right: 0.5rem;
-}
-.recipient__recipients-avatars___1npjD.recipient__--interactive___160Bp {
-  cursor: pointer;
-}
-.recipient__recipients-avatars--link___1qeON,
-.recipient__recipients-avatars--plusX___3-6_l,
-.recipient__recipients-avatars--avatar___-owjC {
-  border-width: 2px;
-  border-style: solid;
-  border-color: var(--white);
-}
-.recipient__recipients-avatars--link___1qeON {
-  background-color: var(--genericRecipientBackground);
-}
-.recipient__recipients-avatars--link___1qeON svg {
-  fill: var(--genericRecipientColor);
-}
-.recipient__recipients-avatars--plusX___3-6_l,
-.recipient__recipients-avatars--avatar___-owjC {
-  margin-right: -0.6rem;
-}
-/*
-     imported from share.styl 
-    */
-
-@-moz-keyframes share__spin___hhtoM {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(359deg);
-  }
-}
-@-webkit-keyframes share__spin___hhtoM {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(359deg);
-  }
-}
-@-o-keyframes share__spin___hhtoM {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(359deg);
-  }
-}
-@keyframes share__spin___hhtoM {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(359deg);
-  }
-}
-@-moz-keyframes share__shake___2au1o {
-  10%, 90% {
-    transform: translate3d(-1px, 0, 0);
-  }
-  20%, 80% {
-    transform: translate3d(2px, 0, 0);
-  }
-  30%, 50%, 70% {
-    transform: translate3d(-4px, 0, 0);
-  }
-  40%, 60% {
-    transform: translate3d(4px, 0, 0);
-  }
-}
-@-webkit-keyframes share__shake___2au1o {
-  10%, 90% {
-    transform: translate3d(-1px, 0, 0);
-  }
-  20%, 80% {
-    transform: translate3d(2px, 0, 0);
-  }
-  30%, 50%, 70% {
-    transform: translate3d(-4px, 0, 0);
-  }
-  40%, 60% {
-    transform: translate3d(4px, 0, 0);
-  }
-}
-@-o-keyframes share__shake___2au1o {
-  10%, 90% {
-    transform: translate3d(-1px, 0, 0);
-  }
-  20%, 80% {
-    transform: translate3d(2px, 0, 0);
-  }
-  30%, 50%, 70% {
-    transform: translate3d(-4px, 0, 0);
-  }
-  40%, 60% {
-    transform: translate3d(4px, 0, 0);
-  }
-}
-@keyframes share__shake___2au1o {
-  10%, 90% {
-    transform: translate3d(-1px, 0, 0);
-  }
-  20%, 80% {
-    transform: translate3d(2px, 0, 0);
-  }
-  30%, 50%, 70% {
-    transform: translate3d(-4px, 0, 0);
-  }
-  40%, 60% {
-    transform: translate3d(4px, 0, 0);
-  }
-}
-.u-visuallyhidden {
-  position: absolute !important;
-  border: 0 !important;
-  width: 0.063rem !important;
-  height: 0.063rem !important;
-  overflow: hidden !important;
-  padding: 0 !important;
-  white-space: nowrap !important;
-  clip: rect(0.063rem, 0.063rem, 0.063rem, 0.063rem) !important;
-  clip-path: inset(50%) !important;
-}
-.u-hide {
-  display: none !important;
-  visibility: hidden !important;
-}
-@media (max-width: 63.938rem) {
-  .u-hide--mob {
-    display: none !important;
-  }
-}
-@media (min-width: 64rem) {
-  .u-hide--tablet {
-    display: none !important;
-  }
-}
-@media (min-width: 48.063rem) {
-  .u-hide--desk {
-    display: none !important;
-  }
-}
-.u-dn {
-  display: none;
-}
-.u-di {
-  display: inline;
-}
-.u-db {
-  display: block;
-}
-.u-dib {
-  display: inline-block;
-}
-.u-dit {
-  display: inline-table;
-}
-.u-dt {
-  display: table;
-}
-.u-dtc {
-  display: table-cell;
-}
-.u-dt-row {
-  display: table-row;
-}
-.u-dt-row-group {
-  display: table-row-group;
-}
-.u-dt-column {
-  display: table-column;
-}
-.u-dt-column-group {
-  display: table-column-group;
-}
-@media (max-width: 30rem) {
-  .u-dn-t {
-    display: none;
-  }
-  .u-di-t {
-    display: inline;
-  }
-  .u-db-t {
-    display: block;
-  }
-  .u-dib-t {
-    display: inline-block;
-  }
-  .u-dit-t {
-    display: inline-table;
-  }
-  .u-dt-t {
-    display: table;
-  }
-  .u-dtc-t {
-    display: table-cell;
-  }
-  .u-dt-row-t {
-    display: table-row;
-  }
-  .u-dt-row-group-t {
-    display: table-row-group;
-  }
-  .u-dt-column-t {
-    display: table-column;
-  }
-  .u-dt-column-group-t {
-    display: table-column-group;
-  }
-}
-@media (max-width: 48rem) {
-  .u-dn-s {
-    display: none;
-  }
-  .u-di-s {
-    display: inline;
-  }
-  .u-db-s {
-    display: block;
-  }
-  .u-dib-s {
-    display: inline-block;
-  }
-  .u-dit-s {
-    display: inline-table;
-  }
-  .u-dt-s {
-    display: table;
-  }
-  .u-dtc-s {
-    display: table-cell;
-  }
-  .u-dt-row-s {
-    display: table-row;
-  }
-  .u-dt-row-group-s {
-    display: table-row-group;
-  }
-  .u-dt-column-s {
-    display: table-column;
-  }
-  .u-dt-column-group-s {
-    display: table-column-group;
-  }
-}
-@media (max-width: 63.938rem) {
-  .u-dn-m {
-    display: none;
-  }
-  .u-di-m {
-    display: inline;
-  }
-  .u-db-m {
-    display: block;
-  }
-  .u-dib-m {
-    display: inline-block;
-  }
-  .u-dit-m {
-    display: inline-table;
-  }
-  .u-dt-m {
-    display: table;
-  }
-  .u-dtc-m {
-    display: table-cell;
-  }
-  .u-dt-row-m {
-    display: table-row;
-  }
-  .u-dt-row-group-m {
-    display: table-row-group;
-  }
-  .u-dt-column-m {
-    display: table-column;
-  }
-  .u-dt-column-group-m {
-    display: table-column-group;
-  }
-}
-.u-black {
-  color: var(--black) !important;
-}
-.u-charcoalGrey {
-  color: var(--charcoalGrey) !important;
-}
-.u-coolGrey {
-  color: var(--coolGrey) !important;
-}
-.u-silver {
-  color: var(--silver) !important;
-}
-.u-slateGrey {
-  color: var(--slateGrey) !important;
-}
-.u-lightishPurple {
-  color: #b449e7 !important;
-}
-.u-dodgerBlue {
-  color: #297ef2 !important;
-}
-.u-overlay {
-  color: var(--overlay) !important;
-}
-.u-paleGrey {
-  color: var(--paleGrey) !important;
-}
-.u-monza {
-  color: #dd0505 !important;
-}
-.u-pomegranate {
-  color: #f52d2d !important;
-}
-.u-primaryBackgroundLight {
-  color: var(--primaryBackgroundLight) !important;
-}
-.u-primaryColor {
-  color: var(--primaryColor) !important;
-}
-.u-primaryColorLight {
-  color: var(--primaryColorLight) !important;
-}
-.u-primaryContrastTextColor {
-  color: var(--primaryContrastTextColor) !important;
-}
-.u-error {
-  color: var(--errorColor) !important;
-}
-.u-errorBackground {
-  color: var(--errorBackground) !important;
-}
-.u-success {
-  color: var(--successColor) !important;
-}
-.u-warning {
-  color: var(--warningColor) !important;
-}
-.u-info {
-  color: var(--infoColor) !important;
-}
-.u-weirdGreen {
-  color: #40de8e !important;
-}
-.u-white {
-  color: var(--white) !important;
-}
-.u-breakword {
-  word-break: break-word;
-}
-.u-ellipsis {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+@media (pointer: coarse) {
 }
-.u-spacellipsis {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: break-spaces;
+:root {
+  --genericRecipientBackground: var(--slateGrey);
+  --genericRecipientColor: var(--white);
 }
-@media (max-width: 30rem) {
-  .u-spacellipsis-t {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: break-spaces;
-  }
+.recipient__recipient___2DmZI {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
 }
 @media (max-width: 48rem) {
-  .u-spacellipsis-s {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: break-spaces;
+  .recipient__recipient___2DmZI {
+    align-items: flex-start;
   }
 }
-@media (max-width: 63.938rem) {
-  .u-spacellipsis-m {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: break-spaces;
-  }
+.recipient__recipients-list-light___Vq4op .recipient__recipient___2DmZI {
+  margin: 1rem 0;
 }
-.u-midellipsis {
-  display: flex;
-  flex-wrap: nowrap;
+.recipient__recipients-list-light___Vq4op + .recipient__recipient___2DmZI {
+  margin-top: 1rem;
 }
-.u-midellipsis > * {
-  display: inline-block;
-  max-width: 50%;
+.recipient__recipient-idents___3s7rw {
+  flex: 1 1 auto;
   overflow: hidden;
-  white-space: pre;
-}
-.u-midellipsis > :first-child {
   text-overflow: ellipsis;
 }
-.u-midellipsis > :last-child {
-  text-overflow: clip;
-  direction: rtl;
-}
-@supports (text-overflow: '[...]') {
-  .u-midellipsis > :first-child {
-    text-overflow: '[...]';
-  }
-}
-.u-link:link {
-  color: var(--linkColor) !important;
-  text-decoration: var(--linkTextDecoration) !important;
-}
-.u-link:visited,
-.u-link:active,
-.u-link:hover,
-.u-link:focus {
-  color: var(--linkColorActive) !important;
-}
-.u-lh-tiny {
-  line-height: 1 !important;
-}
-.u-lh-xsmall {
-  line-height: 1.1 !important;
-}
-.u-lh-small {
-  line-height: 1.2 !important;
-}
-.u-lh-medium {
-  line-height: 1.3 !important;
-}
-.u-lh-large {
-  line-height: 1.4 !important;
-}
-.u-lh-xlarge {
-  line-height: 1.5 !important;
-}
-.u-fz-tiny {
-  font-size: 0.75rem !important;
-  line-height: 1.3 !important;
-}
-.u-fz-xsmall {
-  font-size: 0.813rem !important;
-  line-height: 1.4 !important;
-}
-.u-fz-small {
-  font-size: 0.875rem !important;
-  line-height: 1.4 !important;
-}
-.u-fz-medium {
-  font-size: 1rem !important;
-  line-height: 1.5 !important;
-}
-.u-fz-large {
-  font-size: 1.125rem !important;
-  line-height: 1.5 !important;
-}
-@media (max-width: 30rem) {
-  .u-fz-tiny-t {
-    font-size: 0.75rem !important;
-    line-height: 1.3 !important;
-  }
-  .u-fz-xsmall-t {
-    font-size: 0.813rem !important;
-    line-height: 1.4 !important;
-  }
-  .u-fz-small-t {
-    font-size: 0.875rem !important;
-    line-height: 1.4 !important;
-  }
-  .u-fz-medium-t {
-    font-size: 1rem !important;
-    line-height: 1.5 !important;
-  }
-  .u-fz-large-t {
-    font-size: 1.125rem !important;
-    line-height: 1.5 !important;
-  }
-}
-@media (max-width: 48rem) {
-  .u-fz-tiny-s {
-    font-size: 0.75rem !important;
-    line-height: 1.3 !important;
-  }
-  .u-fz-xsmall-s {
-    font-size: 0.813rem !important;
-    line-height: 1.4 !important;
-  }
-  .u-fz-small-s {
-    font-size: 0.875rem !important;
-    line-height: 1.4 !important;
-  }
-  .u-fz-medium-s {
-    font-size: 1rem !important;
-    line-height: 1.5 !important;
-  }
-  .u-fz-large-s {
-    font-size: 1.125rem !important;
-    line-height: 1.5 !important;
-  }
-}
-@media (max-width: 63.938rem) {
-  .u-fz-tiny-m {
-    font-size: 0.75rem !important;
-    line-height: 1.3 !important;
-  }
-  .u-fz-xsmall-m {
-    font-size: 0.813rem !important;
-    line-height: 1.4 !important;
-  }
-  .u-fz-small-m {
-    font-size: 0.875rem !important;
-    line-height: 1.4 !important;
-  }
-  .u-fz-medium-m {
-    font-size: 1rem !important;
-    line-height: 1.5 !important;
-  }
-  .u-fz-large-m {
-    font-size: 1.125rem !important;
-    line-height: 1.5 !important;
-  }
-}
-.u-ta-left {
-  text-align: left !important;
-}
-.u-ta-right {
-  text-align: right !important;
-}
-.u-ta-center {
-  text-align: center !important;
-}
-.u-ta-justify {
-  text-align: justify !important;
-}
-@media (max-width: 30rem) {
-  .u-ta-left-t {
-    text-align: left !important;
-  }
-  .u-ta-right-t {
-    text-align: right !important;
-  }
-  .u-ta-center-t {
-    text-align: center !important;
-  }
-  .u-ta-justify-t {
-    text-align: justify !important;
-  }
-}
-@media (max-width: 48rem) {
-  .u-ta-left-s {
-    text-align: left !important;
-  }
-  .u-ta-right-s {
-    text-align: right !important;
-  }
-  .u-ta-center-s {
-    text-align: center !important;
-  }
-  .u-ta-justify-s {
-    text-align: justify !important;
-  }
+.recipient__recipient-status-icon___-liGw {
+  margin-right: 0.25rem;
 }
-@media (max-width: 63.938rem) {
-  .u-ta-left-m {
-    text-align: left !important;
-  }
-  .u-ta-right-m {
-    text-align: right !important;
-  }
-  .u-ta-center-m {
-    text-align: center !important;
-  }
-  .u-ta-justify-m {
-    text-align: justify !important;
-  }
+.recipient__recipient-user___1THIU,
+.recipient__recipient-details___2fZfc {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  line-height: 1.3;
 }
-.u-fs-normal {
-  font-style: normal !important;
+.recipient__recipient-user___1THIU {
+  font-size: 1rem;
+  font-weight: bold;
 }
-.u-fs-italic {
-  font-style: italic !important;
+.recipient__recipient-details___2fZfc {
+  font-size: 0.875rem;
+  color: var(--coolGrey);
 }
-@media (max-width: 30rem) {
-  .u-fs-normal-t {
-    font-style: normal !important;
-  }
-  .u-fs-italic-t {
-    font-style: italic !important;
-  }
+.recipient__avatar___2LnIV {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
 }
-@media (max-width: 48rem) {
-  .u-fs-normal-s {
-    font-style: normal !important;
-  }
-  .u-fs-italic-s {
-    font-style: italic !important;
-  }
+.recipient__avatar___2LnIV .recipient__recipient-user___1THIU {
+  font-size: 1.125rem;
 }
-@media (max-width: 63.938rem) {
-  .u-fs-normal-m {
-    font-style: normal !important;
-  }
-  .u-fs-italic-m {
-    font-style: italic !important;
-  }
+.recipient__link-recipient-icon-circle___3ZTU- {
+  border: 1px solid var(--borderMainColor);
+  background-color: unset;
+  color: unset;
 }
-.u-fw-normal {
-  font-weight: normal;
+.recipient__recipients-avatars___1npjD {
+  display: inline-flex;
+  flex-direction: row-reverse;
+  margin-right: 0.5rem;
 }
-.u-fw-bold {
-  font-weight: bold;
+.recipient__recipients-avatars___1npjD.recipient__--interactive___160Bp {
+  cursor: pointer;
 }
-@media (max-width: 30rem) {
-  .u-fw-normal-t {
-    font-weight: normal;
-  }
-  .u-fw-bold-t {
-    font-weight: bold;
-  }
+.recipient__recipients-avatars--link___1qeON,
+.recipient__recipients-avatars--plusX___3-6_l,
+.recipient__recipients-avatars--avatar___-owjC {
+  border-width: 2px;
+  border-style: solid;
+  border-color: var(--white);
 }
-@media (max-width: 48rem) {
-  .u-fw-normal-s {
-    font-weight: normal;
-  }
-  .u-fw-bold-s {
-    font-weight: bold;
-  }
+.recipient__recipients-avatars--link___1qeON {
+  background-color: var(--genericRecipientBackground);
 }
-@media (max-width: 63.938rem) {
-  .u-fw-normal-m {
-    font-weight: normal;
-  }
-  .u-fw-bold-m {
-    font-weight: bold;
-  }
+.recipient__recipients-avatars--link___1qeON svg {
+  fill: var(--genericRecipientColor);
 }
-@media (pointer: coarse) {
+.recipient__recipients-avatars--plusX___3-6_l,
+.recipient__recipients-avatars--avatar___-owjC {
+  margin-right: -0.6rem;
 }
+/*  imported from share.styl  */
+
 .share__share-modal-content___1iqEq .share__coz-form___1ICST {
   margin: 1rem 0 0.5rem;
 }
@@ -1848,430 +294,6 @@ html,
 }
 @media (max-width: 48rem) {
 }
-:root {
-  --invertedBackgroundColor: #297ef2;
-  --invertedContrastTextColor: #fff;
-}
-.share__CozyTheme--inverted___oxix3 {
-  --primaryTextColor: #fff;
-  --secondaryTextColor: rgba(255,255,255,0.64);
-  --disabledTextColor: rgba(255,255,255,0.4);
-  --hintTextColor: rgba(255,255,255,0.4);
-  --iconTextColor: #fff;
-  --actionColorActive: #fff;
-  --actionColorHover: rgba(255,255,255,0.08);
-  --actionColorSelected: rgba(255,255,255,0.16);
-  --actionColorDisabled: rgba(255,255,255,0.32);
-  --actionColorDisabledBackground: rgba(255,255,255,0.12);
-  --actionColorFocus: rgba(255,255,255,0.24);
-  --actionColorGhost: rgba(255,255,255,0.08);
-  --actionColorHoverGhost: rgba(255,255,255,0.16);
-  --dividerColor: rgba(255,255,255,0.16);
-  --borderMainColor: rgba(255,255,255,0.24);
-  --borderDisabledColor: rgba(255,255,255,0.12);
-  --borderGhostColor: rgba(255,255,255,0.48);
-  --borderGhostDisabledColor: rgba(255,255,255,0.24);
-  --paperBackgroundColor: #297ef2;
-  --defaultBackgroundColor: #579eff;
-  --contrastBackgroundColor: rgba(255,255,255,0.12);
-  --primaryColorLight: #fff;
-  --primaryColor: #fff;
-  --primaryColorDark: #eaf3ff;
-  --primaryContrastTextColor: #297ef2;
-  --secondaryColorLight: #f8eefd;
-  --secondaryColor: #ecd7f7;
-  --secondaryColorDark: #deb8f0;
-  --secondaryContrastTextColor: rgba(29,33,42,0.9);
-  --errorColorLight: #ffecec;
-  --errorColor: #ffd3d3;
-  --errorColorDark: #ffb9b9;
-  --errorColorContrastText: rgba(29,33,42,0.9);
-  --errorBackground: #d31f1f;
-  --warningColorLight: #fff3dd;
-  --warningColor: #ffe4b5;
-  --warningColorDark: #ffd58b;
-  --warningColorContrastText: rgba(29,33,42,0.9);
-  --successColorLight: #e3ffe7;
-  --successColor: #c0f4c6;
-  --successColorDark: #97eca1;
-  --successColorContrastText: rgba(29,33,42,0.9);
-  --infoColorLight: #d4feff;
-  --infoColor: #affdff;
-  --infoColorDark: #86f5f7;
-  --infoColorContrastText: rgba(29,33,42,0.9);
-/*
-    The CSS variables below are historic and we should strive not to
-    use them. Prefer to use directly semantic colors above.
-    */
-  --iconColor: currentColor;
-  --textIconColor: #fff;
-  --actionMenuIconColor: #fff;
-  --barIconColor: #fff;
-  --barIconColorDisabled: rgba(255,255,255,0.88);
-  --spinnerColor: #fff;
-  --linkColor: #fff;
-  --linkColorActive: #fff;
-  --linkTextDecoration: underline;
-  --regularButtonPrimaryColor: #fff;
-  --regularButtonSecondaryColor: #fff;
-  --regularButtonActiveColor: rgba(255,255,255,0.88);
-  --regularButtonConstrastColor: #297ef2;
-  --secondaryButtonPrimaryColor: #297ef2;
-  --secondaryButtonSecondaryColor: #fff;
-  --secondaryButtonActiveColor: rgba(255,255,255,0.24);
-  --secondaryButtonContrastColor: #fff;
-  --dividerColor2: rgba(255,255,255,0.16);
-}
-html {
-/*
-    Grey
-
-    Stylus: grey0        -  #FFFFFF, CSS: var(--grey0)
-    Stylus: grey50       -  #f9fafb, CSS: var(--grey50)
-    Stylus: grey100      -  #f4f5f6, CSS: var(--grey100)
-    Stylus: grey200      -  #eceff1, CSS: var(--grey200)
-    Stylus: grey300      -  #dde0e3, CSS: var(--grey300)
-    Stylus: grey400      -  #bfc3c7, CSS: var(--grey400)
-    Stylus: grey500      -  #9da2a6, CSS: var(--grey500)
-    Stylus: grey600      -  #7c8086, CSS: var(--grey600)
-    Stylus: grey700      -  #5d6169, CSS: var(--grey700)
-    Stylus: grey800      -  #3e424a, CSS: var(--grey800)
-    Stylus: grey900      -  #1d212a, CSS: var(--grey900)
-    Stylus: greyA100     -  #d3d6d8, CSS: var(--greyA100)
-    Stylus: greyA200     -  #a7abaf, CSS: var(--greyA200)
-    Stylus: greyA400     -  #2c3039, CSS: var(--greyA400)
-    Stylus: greyA700     -  #5d6169, CSS: var(--greyA700)
-    Stylus: white        -  #FFFFFF, CSS: var(--white)
-    Stylus: paleGrey     -  #F5F6F7, CSS: var(--paleGrey)
-    Stylus: silver       -  #D6D8Da, CSS: var(--silver)
-    Stylus: coolGrey     -  #95999D, CSS: var(--coolGrey)
-    Stylus: slateGrey    -  #5D6165, CSS: var(--slateGrey)
-    Stylus: charcoalGrey -  #32363F, CSS: var(--charcoalGrey)
-    Stylus: black        -  #000000, CSS: var(--black)
-
-    Styleguide Settings.colors.grey
-    */
-  --grey0: #fff;
-  --grey50: #f9fafb;
-  --grey100: #f4f5f6;
-  --grey200: #eceff1;
-  --grey300: #dde0e3;
-  --grey400: #bfc3c7;
-  --grey500: #9da2a6;
-  --grey600: #7c8086;
-  --grey700: #5d6169;
-  --grey800: #3e424a;
-  --grey900: #1d212a;
-  --greyA100: #d3d6d8;
-  --greyA200: #a7abaf;
-  --greyA400: #2c3039;
-  --greyA700: #5d6169;
-  --white: #fff;
-  --paleGrey: #f5f6f7;
-  --silver: #d6d8da;
-  --coolGrey: #95999d;
-  --slateGrey: #5d6165;
-  --charcoalGrey: #32363f;
-  --black: #000;
-  --overlay: rgba(50,54,63,0.5);
-/*
-    Blue
-
-    Stylus: zircon       -  #F5FAFF, CSS: var(--zircon)
-    Stylus: dodgerBlue   -  #297EF2, CSS: var(--dodgerBlue)
-    Stylus: scienceBlue  -  #0B61D6, CSS: var(--scienceBlue)
-
-    Styleguide Settings.colors.blue
-    */
-  --zircon: #f5faff;
-  --dodgerBlue: #297ef2;
-  --scienceBlue: #0b61d6;
-/*
-    Green
-
-    Stylus: weirdGreen   - #40DE8E, CSS: var(--weirdGreen)
-    Stylus: emerald      - #35CE68, CSS: var(--emerald)
-    Stylus: malachite    - #08b442, CSS: var(--malachite)
-
-    Styleguide Settings.colors.green
-    */
-  --weirdGreen: #40de8e;
-  --emerald: #35ce68;
-  --malachite: #08b442;
-/*
-    Orange
-
-    Stylus: mango         - #FF962F, CSS: var(--mango)
-
-    Styleguide Settings.colors.orange
-    */
-  --mango: #ff962f;
-/*
-    Red
-
-    Stylus: chablis      - #FFF2F2, CSS: var(--chablis)
-    Stylus: yourPink     - #FDCBCB, CSS: var(--yourPink)
-    Stylus: fuchsia      - #FC4C83, CSS: var(--fuchsia)
-    Stylus: pomegranate  - #F52D2D, CSS: var(--pomegranate)
-    Stylus: monza        - #DD0505, CSS: var(--monza)
-
-    Styleguide Settings.colors.red
-    */
-  --chablis: #fff2f2;
-  --yourPink: #fdcbcb;
-  --fuchsia: #fc4c83;
-  --pomegranate: #f52d2d;
-  --monza: #dd0505;
-}
-html,
-.share__CozyTheme--normal___2PCy8 {
-/*
-    Primary colors
-
-    Stylus: primaryColorLightest     - #B3D3FF, CSS: var(--primaryColorLightest)
-    Stylus: primaryColorLight        - #5C9DF5, CSS: var(--primaryColorLight)
-    Stylus: primaryColor             - #297EF2, CSS: var(--primaryColor)
-    Stylus: primaryColorDark         - #0B61D6, CSS: var(--primaryColorDark)
-    Stylus: primaryContrastTextColor - #FFF, CSS: var(--primaryContrastTextColor)
-
-    Styleguide Settings.theme.primary
-    */
-  --primaryColorLightest: #b3d3ff;
-  --primaryColorLight: #579eff;
-  --primaryColor: #297ef2;
-  --primaryColorDark: #0f5cc7;
-  --primaryContrastTextColor: #fff;
-/*
-    Secondary colors
-
-    Stylus: secondaryColorLightest     - #FFD3D3, CSS: var(--secondaryColorLightest)
-    Stylus: secondaryColorLight        - #F96B6B, CSS: var(--secondaryColorLight)
-    Stylus: secondaryColor             - #EA3F3F, CSS: var(--secondaryColor)
-    Stylus: secondaryColorDark         - #D31F1F, CSS: var(--secondaryColorDark)
-    Stylus: secondaryContrastTextColor -  #FFF, CSS: var(--secondaryContrastTextColor)
-
-    Styleguide Settings.theme.secondary
-    */
-  --secondaryColorLightest: #ffd3d3;
-  --secondaryColorLight: #f96b6b;
-  --secondaryColor: #ea3f3f;
-  --secondaryColorDark: #d31f1f;
-  --secondaryContrastTextColor: #fff;
-/*
-    Background colors
-
-    Stylus: primaryBackgroundLight -  #F7FAFF, CSS: var(--primaryBackgroundLight)
-    Stylus: paperBackgroundColor -  #FFF, CSS: var(--paperBackgroundColor)
-    Stylus: defaultBackgroundColor -  #F4F5F6, CSS: var(--defaultBackgroundColor)
-    Stylus: contrastBackgroundColor -  #F5F5F6, CSS: var(--contrastBackgroundColor)
-
-    Styleguide Settings.theme.background
-    */
-  --primaryBackgroundLight: #f7faff;
-  --paperBackgroundColor: #fff;
-  --defaultBackgroundColor: #f4f5f6;
-  --contrastBackgroundColor: rgba(29,33,42,0.048);
-/*
-    Text colors
-
-    These colors use the alpha layer. Be careful to use the semantic variable.
-    Hexadecimal colors are here only as an example on a white background.
-
-    Stylus: primaryTextColor -  #383B43, CSS: var(--primaryTextColor)
-    Stylus: secondaryTextColor - #6F7177, CSS: var(--secondaryTextColor)
-    Stylus: disabledTextColor - #BEBFC1, CSS: var(--disabledTextColor)
-    Stylus: hintTextColor - #BEBFC1, CSS: var(--hintTextColor)
-    Stylus: iconTextColor - #66686D, CSS: var(--iconTextColor)
-
-    Styleguide Settings.theme.text
-    */
-  --primaryTextColor: rgba(29,33,42,0.9);
-  --secondaryTextColor: rgba(29,33,42,0.64);
-  --disabledTextColor: rgba(29,33,42,0.32);
-  --hintTextColor: rgba(29,33,42,0.32);
-  --iconTextColor: rgba(29,33,42,0.72);
-/*
-    Action colors
-
-    These colors use the alpha layer. Be careful to use the semantic variable.
-    Hexadecimal colors are here only as an example on a white background.
-
-    Stylus: actionColorActive   - #8A8C90, CSS: var(--actionColorActive)
-    Stylus: actionColorHover   - #F7F7F7, CSS: var(--actionColorHover)
-    Stylus: actionColorSelected   - #EFEFF0, CSS: var(--actionColorSelected)
-    Stylus: actionColorDisabled   - #CFCFD1, CSS: var(--actionColorDisabled)
-    Stylus: actionColorDisabledBackground   - #E7E7E8, CSS: var(--actionColorDisabledBackground)
-    Stylus: actionColorFocus   - #E7E7E8, CSS: var(--actionColorFocus)
-    Stylus: actionColorGhost   - #EFEFF0, CSS: var(--actionColorGhost)
-    Stylus: actionColorHoverGhost   - #DFE0E0, CSS: var(--actionColorHoverGhost)
-
-    Styleguide Settings.theme.action
-    */
-  --actionColorActive: rgba(29,33,42,0.56);
-  --actionColorHover: rgba(29,33,42,0.04);
-  --actionColorSelected: rgba(29,33,42,0.08);
-  --actionColorDisabled: rgba(29,33,42,0.24);
-  --actionColorDisabledBackground: rgba(29,33,42,0.12);
-  --actionColorFocus: rgba(29,33,42,0.12);
-  --actionColorGhost: rgba(29,33,42,0.08);
-  --actionColorHoverGhost: rgba(29,33,42,0.16);
-/*
-    Border colors
-
-    These colors use the alpha layer. Be careful to use the semantic variable.
-    Hexadecimal colors are here only as an example on a white background.
-
-    Stylus: borderMainColor - #DFE0E0, CSS: var(--borderMainColor)
-    Stylus: borderDisabledColor - #EFEFF0, CSS: var(--borderDisabledColor)
-    Stylus: borderGhostColor - #9D9EA1, CSS: var(--borderGhostColor)
-    Stylus: borderGhostDisabledColor - #DFE0E0, CSS: var(--borderGhostDisabledColor)
-
-    Styleguide Settings.theme.border
-    */
-  --borderMainColor: rgba(29,33,42,0.16);
-  --borderDisabledColor: rgba(29,33,42,0.08);
-  --borderGhostColor: rgba(29,33,42,0.48);
-  --borderGhostDisabledColor: rgba(29,33,42,0.16);
-/*
-    Divider colors
-
-    These colors use the alpha layer. Be careful to use the semantic variable.
-    Hexadecimal colors are here only as an example on a white background.
-
-    Stylus: dividerColor - #E3E4E5, CSS: var(--dividerColor)
-
-    Styleguide Settings.theme.divider
-    */
-  --dividerColor: rgba(29,33,42,0.12);
-/*
-    Success colors
-
-    Stylus: successColorLight        -  #38C949, CSS: var(--successColorLight)
-    Stylus: successColor             -  #09AB1B, CSS: var(--successColor)
-    Stylus: successColorDark         -  #018711, CSS: var(--successColorDark)
-    Stylus: successColorContrastText -  #FFF, CSS: var(--successColorContrastText)
-
-    Styleguide Settings.theme.success
-    */
-  --successColorLight: #38c949;
-  --successColor: #09ab1b;
-  --successColorDark: #018711;
-  --successColorContrastText: #fff;
-/*
-    Warning colors
-
-    Stylus: warningColorLight        -  #EFA82F, CSS: var(--warningColorLight)
-    Stylus: warningColor             -  #CB8100, CSS: var(--warningColor)
-    Stylus: warningColorDark         -  #986100, CSS: var(--warningColorDark)
-    Stylus: warningColorContrastText -  #FFF, CSS: var(--warningColorContrastText)
-
-    Styleguide Settings.theme.warning
-    */
-  --warningColorLight: #efa82d;
-  --warningColor: #cb8100;
-  --warningColorDark: #986100;
-  --warningColorContrastText: #fff;
-/*
-    Error colors
-
-    Stylus: errorColorLightest     -  #FFECEC, CSS: var(--errorColorLightest)
-    Stylus: errorColorLight        -  #F96B6B, CSS: var(--errorColorLight)
-    Stylus: errorColor             -  #EA3F3F, CSS: var(--errorColor)
-    Stylus: errorColorDark         -  #D31F1F, CSS: var(--errorColorDark)
-    Stylus: errorBackground        -  #FFECEC, CSS: var(--errorBackground)
-    Stylus: errorColorContrastText -  #FFF, CSS: var(--errorColorContrastText)
-
-    Styleguide Settings.theme.error
-    */
-  --errorColorLightest: #ffecec;
-  --errorColorLight: #f96b6b;
-  --errorColor: #ea3f3f;
-  --errorColorDark: #d31f1f;
-  --errorBackground: #ffecec;
-  --errorColorContrastText: #fff;
-/*
-    Info colors
-
-    Stylus: infoColorLight        -  #0EC4C7, CSS: var(--infoColorLight)
-    Stylus: infoColor             -  #009FA2, CSS: var(--infoColor)
-    Stylus: infoColorDark         -  #007578, CSS: var(--infoColorDark)
-    Stylus: infoColorContrastText -  #FFF, CSS: var(--infoColorContrastText)
-
-    Styleguide Settings.theme.info
-    */
-  --infoColorLight: #0ec4c7;
-  --infoColor: #009fa2;
-  --infoColorDark: #007578;
-  --infoColorContrastText: #fff;
-/*
-    Shadow colors
-    */
-  --shadow0: none;
-  --shadow1: 0px 2px 4px 0px rgba(29,33,42,0.08), 0px 4px 16px 0px rgba(29,33,42,0.06), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
-  --shadow2: 0px 3px 5px 0px rgba(29,33,42,0.09), 0px 4px 17px 0px rgba(29,33,42,0.07), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
-  --shadow3: 0px 3px 5px -1px rgba(29,33,42,0.09), 0px 5px 19px 1px rgba(29,33,42,0.08), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
-  --shadow4: 0px 3px 6px -1px rgba(29,33,42,0.1), 0px 5px 20px 1px rgba(29,33,42,0.08), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
-  --shadow5: 0px 4px 6px -1px rgba(29,33,42,0.11), 0px 5px 22px 1px rgba(29,33,42,0.09), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
-  --shadow6: 0px 4px 7px -2px rgba(29,33,42,0.11), 0px 6px 23px 2px rgba(29,33,42,0.1), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
-  --shadow7: 0px 5px 7px -2px rgba(29,33,42,0.12), 0px 6px 24px 2px rgba(29,33,42,0.11), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
-  --shadow8: 0px 5px 8px -2px rgba(29,33,42,0.13), 0px 6px 26px 2px rgba(29,33,42,0.11), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
-  --shadow9: 0px 5px 8px -3px rgba(29,33,42,0.14), 0px 7px 27px 3px rgba(29,33,42,0.12), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
-  --shadow10: 0px 6px 9px -3px rgba(29,33,42,0.14), 0px 7px 29px 3px rgba(29,33,42,0.13), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
-  --shadow11: 0px 6px 9px -3px rgba(29,33,42,0.15), 0px 7px 30px 3px rgba(29,33,42,0.14), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
-  --shadow12: 0px 7px 10px -4px rgba(29,33,42,0.16), 0px 8px 31px 4px rgba(29,33,42,0.15), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
-  --shadow13: 0px 7px 10px -4px rgba(29,33,42,0.16), 0px 8px 33px 4px rgba(29,33,42,0.15), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
-  --shadow14: 0px 8px 11px -5px rgba(29,33,42,0.17), 0px 9px 34px 5px rgba(29,33,42,0.16), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
-  --shadow15: 0px 8px 11px -5px rgba(29,33,42,0.18), 0px 9px 35px 5px rgba(29,33,42,0.17), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
-  --shadow16: 0px 9px 12px -5px rgba(29,33,42,0.18), 0px 9px 37px 5px rgba(29,33,42,0.18), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
-  --shadow17: 0px 9px 12px -6px rgba(29,33,42,0.19), 0px 10px 38px 6px rgba(29,33,42,0.19), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
-  --shadow18: 0px 9px 13px -6px rgba(29,33,42,0.2), 0px 10px 40px 6px rgba(29,33,42,0.19), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
-  --shadow19: 0px 10px 13px -6px rgba(29,33,42,0.21), 0px 10px 41px 6px rgba(29,33,42,0.2), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
-  --shadow20: 0px 10px 14px -7px rgba(29,33,42,0.21), 0px 11px 42px 7px rgba(29,33,42,0.21), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
-  --shadow21: 0px 11px 14px -7px rgba(29,33,42,0.22), 0px 11px 44px 7px rgba(29,33,42,0.22), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
-  --shadow22: 0px 11px 15px -7px rgba(29,33,42,0.23), 0px 11px 45px 7px rgba(29,33,42,0.22), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
-  --shadow23: 0px 12px 15px -8px rgba(29,33,42,0.23), 0px 12px 47px 8px rgba(29,33,42,0.23), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
-  --shadow24: 0px 12px 16px -8px rgba(29,33,42,0.24), 0px 12px 48px 8px rgba(29,33,42,0.24), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
-  --shadow25: 0px 1px 4px rgba(29,33,42,0.04);
-/*
-    ---------------------------------------------------------------------
-    */
-/*
-    The CSS variables below are historic and we should strive not to
-    use them. Prefer to use directly semantic colors above.
-    */
-  --spinnerColor: var(--primaryColor);
-  --linkColor: var(--primaryColor);
-  --linkTextDecoration: none;
-  --linkColorActive: var(--primaryColorDark);
-  --invertedTabsActiveTextColor: var(--primaryContrastTextColor);
-  --invertedTabsInactiveTextColor: var(--primaryContrastTextColor);
-  --invertedTabsIndicatorColor: var(--primaryContrastTextColor);
-  --invertedTabsBackgroundColor: var(--primaryColor);
-  --regularButtonPrimaryColor: var(--primaryColor);
-  --regularButtonSecondaryColor: var(--primaryColor);
-  --regularButtonActiveColor: var(--primaryColorDark);
-  --regularButtonConstrastColor: var(--primaryContrastTextColor);
-  --secondaryButtonPrimaryColor: #fff;
-  --secondaryButtonSecondaryColor: var(--silver);
-  --secondaryButtonActiveColor: var(--silver);
-  --secondaryButtonContrastColor: var(--black);
-  --dividerColor2: var(--coolGrey);
-  --iconColor: currentColor;
-  --textIconColor: var(--charcoalGrey);
-  --actionMenuIconColor: var(--slateGrey);
-  --neutralBackground: var(--paleGrey);
-  --buttonTextTransform: uppercase;
-  --buttonBorderRadius: 0.125rem;
-  --navTextColor: var(--slateGrey);
-  --navTextActiveColor: var(--slateGrey);
-  --navTextHoverColor: var(--charcoalGrey);
-  --alertErrorColor: #fff;
-  --alertErrorBackgroundColor: var(--errorColor);
-  --alertSuccessColor: #fff;
-  --alertSuccessBackgroundColor: var(--successColor);
-  --alertInfoColor: #fff;
-  --alertInfoBackgroundColor: var(--slateGrey);
-}
 .share__share-byemail-onlybylink___29W-t {
   background: var(--paleGrey);
   padding: 1rem 2rem;
@@ -2366,451 +388,8 @@ input[type=text] {
   line-height: 1.5;
   color: var(--coolGrey);
 }
-/*
-     imported from autosuggest.styl 
-    */
-
-:root {
-  --invertedBackgroundColor: #297ef2;
-  --invertedContrastTextColor: #fff;
-}
-.autosuggest__CozyTheme--inverted___3qp6I {
-  --primaryTextColor: #fff;
-  --secondaryTextColor: rgba(255,255,255,0.64);
-  --disabledTextColor: rgba(255,255,255,0.4);
-  --hintTextColor: rgba(255,255,255,0.4);
-  --iconTextColor: #fff;
-  --actionColorActive: #fff;
-  --actionColorHover: rgba(255,255,255,0.08);
-  --actionColorSelected: rgba(255,255,255,0.16);
-  --actionColorDisabled: rgba(255,255,255,0.32);
-  --actionColorDisabledBackground: rgba(255,255,255,0.12);
-  --actionColorFocus: rgba(255,255,255,0.24);
-  --actionColorGhost: rgba(255,255,255,0.08);
-  --actionColorHoverGhost: rgba(255,255,255,0.16);
-  --dividerColor: rgba(255,255,255,0.16);
-  --borderMainColor: rgba(255,255,255,0.24);
-  --borderDisabledColor: rgba(255,255,255,0.12);
-  --borderGhostColor: rgba(255,255,255,0.48);
-  --borderGhostDisabledColor: rgba(255,255,255,0.24);
-  --paperBackgroundColor: #297ef2;
-  --defaultBackgroundColor: #579eff;
-  --contrastBackgroundColor: rgba(255,255,255,0.12);
-  --primaryColorLight: #fff;
-  --primaryColor: #fff;
-  --primaryColorDark: #eaf3ff;
-  --primaryContrastTextColor: #297ef2;
-  --secondaryColorLight: #f8eefd;
-  --secondaryColor: #ecd7f7;
-  --secondaryColorDark: #deb8f0;
-  --secondaryContrastTextColor: rgba(29,33,42,0.9);
-  --errorColorLight: #ffecec;
-  --errorColor: #ffd3d3;
-  --errorColorDark: #ffb9b9;
-  --errorColorContrastText: rgba(29,33,42,0.9);
-  --errorBackground: #d31f1f;
-  --warningColorLight: #fff3dd;
-  --warningColor: #ffe4b5;
-  --warningColorDark: #ffd58b;
-  --warningColorContrastText: rgba(29,33,42,0.9);
-  --successColorLight: #e3ffe7;
-  --successColor: #c0f4c6;
-  --successColorDark: #97eca1;
-  --successColorContrastText: rgba(29,33,42,0.9);
-  --infoColorLight: #d4feff;
-  --infoColor: #affdff;
-  --infoColorDark: #86f5f7;
-  --infoColorContrastText: rgba(29,33,42,0.9);
-/*
-    The CSS variables below are historic and we should strive not to
-    use them. Prefer to use directly semantic colors above.
-    */
-  --iconColor: currentColor;
-  --textIconColor: #fff;
-  --actionMenuIconColor: #fff;
-  --barIconColor: #fff;
-  --barIconColorDisabled: rgba(255,255,255,0.88);
-  --spinnerColor: #fff;
-  --linkColor: #fff;
-  --linkColorActive: #fff;
-  --linkTextDecoration: underline;
-  --regularButtonPrimaryColor: #fff;
-  --regularButtonSecondaryColor: #fff;
-  --regularButtonActiveColor: rgba(255,255,255,0.88);
-  --regularButtonConstrastColor: #297ef2;
-  --secondaryButtonPrimaryColor: #297ef2;
-  --secondaryButtonSecondaryColor: #fff;
-  --secondaryButtonActiveColor: rgba(255,255,255,0.24);
-  --secondaryButtonContrastColor: #fff;
-  --dividerColor2: rgba(255,255,255,0.16);
-}
-html {
-/*
-    Grey
-
-    Stylus: grey0        -  #FFFFFF, CSS: var(--grey0)
-    Stylus: grey50       -  #f9fafb, CSS: var(--grey50)
-    Stylus: grey100      -  #f4f5f6, CSS: var(--grey100)
-    Stylus: grey200      -  #eceff1, CSS: var(--grey200)
-    Stylus: grey300      -  #dde0e3, CSS: var(--grey300)
-    Stylus: grey400      -  #bfc3c7, CSS: var(--grey400)
-    Stylus: grey500      -  #9da2a6, CSS: var(--grey500)
-    Stylus: grey600      -  #7c8086, CSS: var(--grey600)
-    Stylus: grey700      -  #5d6169, CSS: var(--grey700)
-    Stylus: grey800      -  #3e424a, CSS: var(--grey800)
-    Stylus: grey900      -  #1d212a, CSS: var(--grey900)
-    Stylus: greyA100     -  #d3d6d8, CSS: var(--greyA100)
-    Stylus: greyA200     -  #a7abaf, CSS: var(--greyA200)
-    Stylus: greyA400     -  #2c3039, CSS: var(--greyA400)
-    Stylus: greyA700     -  #5d6169, CSS: var(--greyA700)
-    Stylus: white        -  #FFFFFF, CSS: var(--white)
-    Stylus: paleGrey     -  #F5F6F7, CSS: var(--paleGrey)
-    Stylus: silver       -  #D6D8Da, CSS: var(--silver)
-    Stylus: coolGrey     -  #95999D, CSS: var(--coolGrey)
-    Stylus: slateGrey    -  #5D6165, CSS: var(--slateGrey)
-    Stylus: charcoalGrey -  #32363F, CSS: var(--charcoalGrey)
-    Stylus: black        -  #000000, CSS: var(--black)
-
-    Styleguide Settings.colors.grey
-    */
-  --grey0: #fff;
-  --grey50: #f9fafb;
-  --grey100: #f4f5f6;
-  --grey200: #eceff1;
-  --grey300: #dde0e3;
-  --grey400: #bfc3c7;
-  --grey500: #9da2a6;
-  --grey600: #7c8086;
-  --grey700: #5d6169;
-  --grey800: #3e424a;
-  --grey900: #1d212a;
-  --greyA100: #d3d6d8;
-  --greyA200: #a7abaf;
-  --greyA400: #2c3039;
-  --greyA700: #5d6169;
-  --white: #fff;
-  --paleGrey: #f5f6f7;
-  --silver: #d6d8da;
-  --coolGrey: #95999d;
-  --slateGrey: #5d6165;
-  --charcoalGrey: #32363f;
-  --black: #000;
-  --overlay: rgba(50,54,63,0.5);
-/*
-    Blue
-
-    Stylus: zircon       -  #F5FAFF, CSS: var(--zircon)
-    Stylus: dodgerBlue   -  #297EF2, CSS: var(--dodgerBlue)
-    Stylus: scienceBlue  -  #0B61D6, CSS: var(--scienceBlue)
-
-    Styleguide Settings.colors.blue
-    */
-  --zircon: #f5faff;
-  --dodgerBlue: #297ef2;
-  --scienceBlue: #0b61d6;
-/*
-    Green
+/*  imported from autosuggest.styl  */
 
-    Stylus: weirdGreen   - #40DE8E, CSS: var(--weirdGreen)
-    Stylus: emerald      - #35CE68, CSS: var(--emerald)
-    Stylus: malachite    - #08b442, CSS: var(--malachite)
-
-    Styleguide Settings.colors.green
-    */
-  --weirdGreen: #40de8e;
-  --emerald: #35ce68;
-  --malachite: #08b442;
-/*
-    Orange
-
-    Stylus: mango         - #FF962F, CSS: var(--mango)
-
-    Styleguide Settings.colors.orange
-    */
-  --mango: #ff962f;
-/*
-    Red
-
-    Stylus: chablis      - #FFF2F2, CSS: var(--chablis)
-    Stylus: yourPink     - #FDCBCB, CSS: var(--yourPink)
-    Stylus: fuchsia      - #FC4C83, CSS: var(--fuchsia)
-    Stylus: pomegranate  - #F52D2D, CSS: var(--pomegranate)
-    Stylus: monza        - #DD0505, CSS: var(--monza)
-
-    Styleguide Settings.colors.red
-    */
-  --chablis: #fff2f2;
-  --yourPink: #fdcbcb;
-  --fuchsia: #fc4c83;
-  --pomegranate: #f52d2d;
-  --monza: #dd0505;
-}
-html,
-.autosuggest__CozyTheme--normal___3fMAz {
-/*
-    Primary colors
-
-    Stylus: primaryColorLightest     - #B3D3FF, CSS: var(--primaryColorLightest)
-    Stylus: primaryColorLight        - #5C9DF5, CSS: var(--primaryColorLight)
-    Stylus: primaryColor             - #297EF2, CSS: var(--primaryColor)
-    Stylus: primaryColorDark         - #0B61D6, CSS: var(--primaryColorDark)
-    Stylus: primaryContrastTextColor - #FFF, CSS: var(--primaryContrastTextColor)
-
-    Styleguide Settings.theme.primary
-    */
-  --primaryColorLightest: #b3d3ff;
-  --primaryColorLight: #579eff;
-  --primaryColor: #297ef2;
-  --primaryColorDark: #0f5cc7;
-  --primaryContrastTextColor: #fff;
-/*
-    Secondary colors
-
-    Stylus: secondaryColorLightest     - #FFD3D3, CSS: var(--secondaryColorLightest)
-    Stylus: secondaryColorLight        - #F96B6B, CSS: var(--secondaryColorLight)
-    Stylus: secondaryColor             - #EA3F3F, CSS: var(--secondaryColor)
-    Stylus: secondaryColorDark         - #D31F1F, CSS: var(--secondaryColorDark)
-    Stylus: secondaryContrastTextColor -  #FFF, CSS: var(--secondaryContrastTextColor)
-
-    Styleguide Settings.theme.secondary
-    */
-  --secondaryColorLightest: #ffd3d3;
-  --secondaryColorLight: #f96b6b;
-  --secondaryColor: #ea3f3f;
-  --secondaryColorDark: #d31f1f;
-  --secondaryContrastTextColor: #fff;
-/*
-    Background colors
-
-    Stylus: primaryBackgroundLight -  #F7FAFF, CSS: var(--primaryBackgroundLight)
-    Stylus: paperBackgroundColor -  #FFF, CSS: var(--paperBackgroundColor)
-    Stylus: defaultBackgroundColor -  #F4F5F6, CSS: var(--defaultBackgroundColor)
-    Stylus: contrastBackgroundColor -  #F5F5F6, CSS: var(--contrastBackgroundColor)
-
-    Styleguide Settings.theme.background
-    */
-  --primaryBackgroundLight: #f7faff;
-  --paperBackgroundColor: #fff;
-  --defaultBackgroundColor: #f4f5f6;
-  --contrastBackgroundColor: rgba(29,33,42,0.048);
-/*
-    Text colors
-
-    These colors use the alpha layer. Be careful to use the semantic variable.
-    Hexadecimal colors are here only as an example on a white background.
-
-    Stylus: primaryTextColor -  #383B43, CSS: var(--primaryTextColor)
-    Stylus: secondaryTextColor - #6F7177, CSS: var(--secondaryTextColor)
-    Stylus: disabledTextColor - #BEBFC1, CSS: var(--disabledTextColor)
-    Stylus: hintTextColor - #BEBFC1, CSS: var(--hintTextColor)
-    Stylus: iconTextColor - #66686D, CSS: var(--iconTextColor)
-
-    Styleguide Settings.theme.text
-    */
-  --primaryTextColor: rgba(29,33,42,0.9);
-  --secondaryTextColor: rgba(29,33,42,0.64);
-  --disabledTextColor: rgba(29,33,42,0.32);
-  --hintTextColor: rgba(29,33,42,0.32);
-  --iconTextColor: rgba(29,33,42,0.72);
-/*
-    Action colors
-
-    These colors use the alpha layer. Be careful to use the semantic variable.
-    Hexadecimal colors are here only as an example on a white background.
-
-    Stylus: actionColorActive   - #8A8C90, CSS: var(--actionColorActive)
-    Stylus: actionColorHover   - #F7F7F7, CSS: var(--actionColorHover)
-    Stylus: actionColorSelected   - #EFEFF0, CSS: var(--actionColorSelected)
-    Stylus: actionColorDisabled   - #CFCFD1, CSS: var(--actionColorDisabled)
-    Stylus: actionColorDisabledBackground   - #E7E7E8, CSS: var(--actionColorDisabledBackground)
-    Stylus: actionColorFocus   - #E7E7E8, CSS: var(--actionColorFocus)
-    Stylus: actionColorGhost   - #EFEFF0, CSS: var(--actionColorGhost)
-    Stylus: actionColorHoverGhost   - #DFE0E0, CSS: var(--actionColorHoverGhost)
-
-    Styleguide Settings.theme.action
-    */
-  --actionColorActive: rgba(29,33,42,0.56);
-  --actionColorHover: rgba(29,33,42,0.04);
-  --actionColorSelected: rgba(29,33,42,0.08);
-  --actionColorDisabled: rgba(29,33,42,0.24);
-  --actionColorDisabledBackground: rgba(29,33,42,0.12);
-  --actionColorFocus: rgba(29,33,42,0.12);
-  --actionColorGhost: rgba(29,33,42,0.08);
-  --actionColorHoverGhost: rgba(29,33,42,0.16);
-/*
-    Border colors
-
-    These colors use the alpha layer. Be careful to use the semantic variable.
-    Hexadecimal colors are here only as an example on a white background.
-
-    Stylus: borderMainColor - #DFE0E0, CSS: var(--borderMainColor)
-    Stylus: borderDisabledColor - #EFEFF0, CSS: var(--borderDisabledColor)
-    Stylus: borderGhostColor - #9D9EA1, CSS: var(--borderGhostColor)
-    Stylus: borderGhostDisabledColor - #DFE0E0, CSS: var(--borderGhostDisabledColor)
-
-    Styleguide Settings.theme.border
-    */
-  --borderMainColor: rgba(29,33,42,0.16);
-  --borderDisabledColor: rgba(29,33,42,0.08);
-  --borderGhostColor: rgba(29,33,42,0.48);
-  --borderGhostDisabledColor: rgba(29,33,42,0.16);
-/*
-    Divider colors
-
-    These colors use the alpha layer. Be careful to use the semantic variable.
-    Hexadecimal colors are here only as an example on a white background.
-
-    Stylus: dividerColor - #E3E4E5, CSS: var(--dividerColor)
-
-    Styleguide Settings.theme.divider
-    */
-  --dividerColor: rgba(29,33,42,0.12);
-/*
-    Success colors
-
-    Stylus: successColorLight        -  #38C949, CSS: var(--successColorLight)
-    Stylus: successColor             -  #09AB1B, CSS: var(--successColor)
-    Stylus: successColorDark         -  #018711, CSS: var(--successColorDark)
-    Stylus: successColorContrastText -  #FFF, CSS: var(--successColorContrastText)
-
-    Styleguide Settings.theme.success
-    */
-  --successColorLight: #38c949;
-  --successColor: #09ab1b;
-  --successColorDark: #018711;
-  --successColorContrastText: #fff;
-/*
-    Warning colors
-
-    Stylus: warningColorLight        -  #EFA82F, CSS: var(--warningColorLight)
-    Stylus: warningColor             -  #CB8100, CSS: var(--warningColor)
-    Stylus: warningColorDark         -  #986100, CSS: var(--warningColorDark)
-    Stylus: warningColorContrastText -  #FFF, CSS: var(--warningColorContrastText)
-
-    Styleguide Settings.theme.warning
-    */
-  --warningColorLight: #efa82d;
-  --warningColor: #cb8100;
-  --warningColorDark: #986100;
-  --warningColorContrastText: #fff;
-/*
-    Error colors
-
-    Stylus: errorColorLightest     -  #FFECEC, CSS: var(--errorColorLightest)
-    Stylus: errorColorLight        -  #F96B6B, CSS: var(--errorColorLight)
-    Stylus: errorColor             -  #EA3F3F, CSS: var(--errorColor)
-    Stylus: errorColorDark         -  #D31F1F, CSS: var(--errorColorDark)
-    Stylus: errorBackground        -  #FFECEC, CSS: var(--errorBackground)
-    Stylus: errorColorContrastText -  #FFF, CSS: var(--errorColorContrastText)
-
-    Styleguide Settings.theme.error
-    */
-  --errorColorLightest: #ffecec;
-  --errorColorLight: #f96b6b;
-  --errorColor: #ea3f3f;
-  --errorColorDark: #d31f1f;
-  --errorBackground: #ffecec;
-  --errorColorContrastText: #fff;
-/*
-    Info colors
-
-    Stylus: infoColorLight        -  #0EC4C7, CSS: var(--infoColorLight)
-    Stylus: infoColor             -  #009FA2, CSS: var(--infoColor)
-    Stylus: infoColorDark         -  #007578, CSS: var(--infoColorDark)
-    Stylus: infoColorContrastText -  #FFF, CSS: var(--infoColorContrastText)
-
-    Styleguide Settings.theme.info
-    */
-  --infoColorLight: #0ec4c7;
-  --infoColor: #009fa2;
-  --infoColorDark: #007578;
-  --infoColorContrastText: #fff;
-/*
-    Shadow colors
-    */
-  --shadow0: none;
-  --shadow1: 0px 2px 4px 0px rgba(29,33,42,0.08), 0px 4px 16px 0px rgba(29,33,42,0.06), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
-  --shadow2: 0px 3px 5px 0px rgba(29,33,42,0.09), 0px 4px 17px 0px rgba(29,33,42,0.07), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
-  --shadow3: 0px 3px 5px -1px rgba(29,33,42,0.09), 0px 5px 19px 1px rgba(29,33,42,0.08), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
-  --shadow4: 0px 3px 6px -1px rgba(29,33,42,0.1), 0px 5px 20px 1px rgba(29,33,42,0.08), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
-  --shadow5: 0px 4px 6px -1px rgba(29,33,42,0.11), 0px 5px 22px 1px rgba(29,33,42,0.09), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
-  --shadow6: 0px 4px 7px -2px rgba(29,33,42,0.11), 0px 6px 23px 2px rgba(29,33,42,0.1), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
-  --shadow7: 0px 5px 7px -2px rgba(29,33,42,0.12), 0px 6px 24px 2px rgba(29,33,42,0.11), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
-  --shadow8: 0px 5px 8px -2px rgba(29,33,42,0.13), 0px 6px 26px 2px rgba(29,33,42,0.11), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
-  --shadow9: 0px 5px 8px -3px rgba(29,33,42,0.14), 0px 7px 27px 3px rgba(29,33,42,0.12), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
-  --shadow10: 0px 6px 9px -3px rgba(29,33,42,0.14), 0px 7px 29px 3px rgba(29,33,42,0.13), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
-  --shadow11: 0px 6px 9px -3px rgba(29,33,42,0.15), 0px 7px 30px 3px rgba(29,33,42,0.14), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
-  --shadow12: 0px 7px 10px -4px rgba(29,33,42,0.16), 0px 8px 31px 4px rgba(29,33,42,0.15), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
-  --shadow13: 0px 7px 10px -4px rgba(29,33,42,0.16), 0px 8px 33px 4px rgba(29,33,42,0.15), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
-  --shadow14: 0px 8px 11px -5px rgba(29,33,42,0.17), 0px 9px 34px 5px rgba(29,33,42,0.16), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
-  --shadow15: 0px 8px 11px -5px rgba(29,33,42,0.18), 0px 9px 35px 5px rgba(29,33,42,0.17), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
-  --shadow16: 0px 9px 12px -5px rgba(29,33,42,0.18), 0px 9px 37px 5px rgba(29,33,42,0.18), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
-  --shadow17: 0px 9px 12px -6px rgba(29,33,42,0.19), 0px 10px 38px 6px rgba(29,33,42,0.19), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
-  --shadow18: 0px 9px 13px -6px rgba(29,33,42,0.2), 0px 10px 40px 6px rgba(29,33,42,0.19), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
-  --shadow19: 0px 10px 13px -6px rgba(29,33,42,0.21), 0px 10px 41px 6px rgba(29,33,42,0.2), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
-  --shadow20: 0px 10px 14px -7px rgba(29,33,42,0.21), 0px 11px 42px 7px rgba(29,33,42,0.21), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
-  --shadow21: 0px 11px 14px -7px rgba(29,33,42,0.22), 0px 11px 44px 7px rgba(29,33,42,0.22), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
-  --shadow22: 0px 11px 15px -7px rgba(29,33,42,0.23), 0px 11px 45px 7px rgba(29,33,42,0.22), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
-  --shadow23: 0px 12px 15px -8px rgba(29,33,42,0.23), 0px 12px 47px 8px rgba(29,33,42,0.23), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
-  --shadow24: 0px 12px 16px -8px rgba(29,33,42,0.24), 0px 12px 48px 8px rgba(29,33,42,0.24), 0px 0px 0px 0.5px rgba(29,33,42,0.12);
-  --shadow25: 0px 1px 4px rgba(29,33,42,0.04);
-/*
-    ---------------------------------------------------------------------
-    */
-/*
-    The CSS variables below are historic and we should strive not to
-    use them. Prefer to use directly semantic colors above.
-    */
-  --spinnerColor: var(--primaryColor);
-  --linkColor: var(--primaryColor);
-  --linkTextDecoration: none;
-  --linkColorActive: var(--primaryColorDark);
-  --invertedTabsActiveTextColor: var(--primaryContrastTextColor);
-  --invertedTabsInactiveTextColor: var(--primaryContrastTextColor);
-  --invertedTabsIndicatorColor: var(--primaryContrastTextColor);
-  --invertedTabsBackgroundColor: var(--primaryColor);
-  --regularButtonPrimaryColor: var(--primaryColor);
-  --regularButtonSecondaryColor: var(--primaryColor);
-  --regularButtonActiveColor: var(--primaryColorDark);
-  --regularButtonConstrastColor: var(--primaryContrastTextColor);
-  --secondaryButtonPrimaryColor: #fff;
-  --secondaryButtonSecondaryColor: var(--silver);
-  --secondaryButtonActiveColor: var(--silver);
-  --secondaryButtonContrastColor: var(--black);
-  --dividerColor2: var(--coolGrey);
-  --iconColor: currentColor;
-  --textIconColor: var(--charcoalGrey);
-  --actionMenuIconColor: var(--slateGrey);
-  --neutralBackground: var(--paleGrey);
-  --buttonTextTransform: uppercase;
-  --buttonBorderRadius: 0.125rem;
-  --navTextColor: var(--slateGrey);
-  --navTextActiveColor: var(--slateGrey);
-  --navTextHoverColor: var(--charcoalGrey);
-  --alertErrorColor: #fff;
-  --alertErrorBackgroundColor: var(--errorColor);
-  --alertSuccessColor: #fff;
-  --alertSuccessBackgroundColor: var(--successColor);
-  --alertInfoColor: #fff;
-  --alertInfoBackgroundColor: var(--slateGrey);
-}
-html {
-  --zIndex-below: -1;
-  --zIndex-app: 0;
-  --zIndex-low: 1;
-  --zIndex-alertMobile: 10;
-  --zIndex-nav: 20;
-  --zIndex-bar: 31;
-  --zIndex-selection: 40;
-  --zIndex-popover: 30;
-  --zIndex-overlay: 50;
-  --zIndex-fileActionMenu: 60;
-  --zIndex-drawer: 60;
-  --zIndex-modal: 70;
-  --zIndex-modal-footer: 71;
-  --zIndex-modal-toolbar: 72;
-  --zIndex-alert: 80;
-}
 .autosuggest__container___1Yro7 {
   position: relative;
 }
@@ -2819,7 +398,7 @@ html {
   position: absolute;
   top: 100%;
   margin-top: 0.25rem;
-  z-index: 10;
+  z-index: var(--zIndex-alertMobile);
   width: 100%;
   overflow: hidden;
   box-shadow: 0px 0px 0px 0.5px rgba(29,33,42,0.12), 0px 2px 4px rgba(29,33,42,0.079), 0px 4px 16px rgba(29,33,42,0.06);