@opentrons/components 0.1.6-alpha.8 → 0.1.7-alpha.0

package/lib/style.css

@@ -1,3786 +0,0 @@
-/* common styling for tooltips */
-/* opentrons style library */
-:root {
-  /* ot brand */
-  --c-mustard: #ffd252;
-  --c-blue: #006cfa;
-  --c-light-blue: hsl(214.08, 100%, 85%);
-
-  /*
-   * grays
-   * TODO(mc, 2019-03-22): align with style guide
-   */
-  --c-near-black: #a4a4a4; /* style guide: n/a */
-  --c-dark-gray: #4a4a4a; /* style guide: near-black */
-  --c-charcoal: #979797;
-  --c-med-gray: #9b9b9b; /* style guide: n/a */
-  --c-light-gray: #e5e2e2; /* style guide: smoke, should be e6e6e6 */
-  --c-lightest-gray: #ededed; /* style guide: n/a */
-
-  /*
-   * background colors
-   * TODO(mc, 2019-03-22): combine with colors
-   */
-  --c-bg-dark: #4a4a4a;
-  --c-bg-light: #fafafa;
-  --c-bg-selected: #f0f3ff;
-  --c-bg-hover: #f1f1f1;
-  --c-bg-success: #b6febc;
-
-  /* general UI */
-  --c-highlight: #5fd8ee;
-  --c-selected-dark: #00c3e6;
-  --c-warning-dark: #9e5e00;
-  --c-warning: #e28200;
-  --c-warning-light: #ffd58f;
-  --c-error-dark: #ac0505;
-  --c-error: #d12929;
-  --c-error-light: #ffc0c0;
-  --c-success: #60b120;
-  --c-blue-enabled: #006cfa;
-  --c-light-grey-hover: #c6c6c6;
-
-  /* Misc */
-  --c-selection-overlay: rgba(95, 216, 238, 0.3);
-  --c-plate-bg: #ccc;
-  --c-white: #fff;
-  --c-black: #000;
-  --c-green: #7ed321;
-  --c-red: #f00000;
-  --c-orange: #f5a623;
-
-  --transition-color: {
-    transition: color 0.15s ease-in-out;
-  }
-
-  --transition-background-color: {
-    transition: background-color 0.15s ease-in-out;
-  }
-}
-:root {
-  --c-font-dark: #4a4a4a;
-  --c-font-icon: #6f6f6f;
-  --c-font-light: white;
-  --c-font-disabled: #9c9c9c;
-  --fs-huge: 3rem;
-  --fs-header: 1.125rem;
-  --fs-default: 1rem;
-  --fs-body-2: 0.875rem;
-  --fs-body-1: 0.75rem;
-  --fs-caption: 0.625rem;
-  --fs-tiny: 0.325rem;
-  --fs-micro: 0.2rem;
-  --fw-bold: 800;
-  --fw-semibold: 600;
-  --fw-regular: 400;
-  --fw-light: 300;
-  --ff-code: Consolas, monaco, monospace;
-  --lh-solid: 1;
-  --lh-title: 1.25;
-  --lh-copy: 1.5;
-}
-:root {
-  /* borders */
-  --bd-radius-default: 2px;
-  --bd-radius-form-field: 3px;
-  --bd-radius-pill: 12px;
-  --bd-width-default: 1px;
-  --bd-light: var(--bd-width-default) solid var(--c-light-gray);
-
-  /* dropshadows */
-
-  /* TODO: Ian 2018-07-26 consolidate all shadows here (eg from buttons) */
-  --shadow-lvl-1:
-    0 1px 3px 0 rgba(0, 0, 0, 0.1),
-    0 1px 2px 0 rgba(0, 0, 0, 0.2);
-  --shadow-lvl-2:
-    0 3px 6px 0 rgba(0, 0, 0, 0.13),
-    0 3px 6px 0 rgba(0, 0, 0, 0.23);
-}
-* {
-  box-sizing: border-box;
-}
-._tooltip_box_1izoa_4 {
-  font-size: 0.75rem;
-  font-size: var(--fs-body-1); /* from legacy --font-body-1-light */
-  font-weight: 400;
-  font-weight: var(--fw-regular); /* from legacy --font-body-1-light */
-  color: white;
-  color: var(--c-font-light); /* from legacy --font-body-1-light */
-  background-color: #4a4a4a;
-  background-color: var(--c-bg-dark);
-  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.13), 0 3px 6px 0 rgba(0, 0, 0, 0.23);
-  padding: 8px;
-  cursor: pointer;
-  z-index: 9001;
-}
-._arrow_1izoa_15 {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  margin-bottom: -0.5em;
-  width: 1em;
-  height: 0.5em;
-}
-._arrow_1izoa_15::before {
-    border-width: 0.5em 0.5em 0 0.5em;
-    content: '';
-    margin: auto;
-    display: block;
-    width: 0;
-    height: 0;
-    border-style: solid;
-    border-color: #4a4a4a transparent transparent transparent;
-    border-color: var(--c-bg-dark) transparent transparent transparent;
-  }
-._arrow_1izoa_15._bottom_1izoa_35 {
-  top: 0;
-  left: 0;
-  margin-top: -0.5em;
-  width: 1em;
-  height: 0.5em;
-}
-._arrow_1izoa_15._bottom_1izoa_35::before {
-    border-width: 0 0.5em 0.5em 0.5em;
-    border-color: transparent transparent #4a4a4a transparent;
-    border-color: transparent transparent var(--c-bg-dark) transparent;
-  }
-._arrow_1izoa_15._right_1izoa_48 {
-  top: 0;
-  left: 0;
-  margin-left: -0.5em;
-  height: 1em;
-  width: 0.5em;
-}
-._arrow_1izoa_15._right_1izoa_48::before {
-    border-width: 0.5em 0.5em 0.5em 0;
-    border-color: transparent #4a4a4a transparent transparent;
-    border-color: transparent var(--c-bg-dark) transparent transparent;
-  }
-._arrow_1izoa_15._left_1izoa_61 {
-  top: 0;
-  right: 0;
-  margin-right: -0.5em;
-  height: 1em;
-  width: 0.5em;
-}
-._arrow_1izoa_15._left_1izoa_61::before {
-    border-width: 0.5em 0 0.5em 0.5em;
-    border-color: transparent transparent transparent #4a4a4a;
-    border-color: transparent transparent transparent var(--c-bg-dark);
-  }
-/* button styling */
-/* opentrons style library */
-:root {
-  /* ot brand */
-  --c-mustard: #ffd252;
-  --c-blue: #006cfa;
-  --c-light-blue: hsl(214.08, 100%, 85%);
-
-  /*
-   * grays
-   * TODO(mc, 2019-03-22): align with style guide
-   */
-  --c-near-black: #a4a4a4; /* style guide: n/a */
-  --c-dark-gray: #4a4a4a; /* style guide: near-black */
-  --c-charcoal: #979797;
-  --c-med-gray: #9b9b9b; /* style guide: n/a */
-  --c-light-gray: #e5e2e2; /* style guide: smoke, should be e6e6e6 */
-  --c-lightest-gray: #ededed; /* style guide: n/a */
-
-  /*
-   * background colors
-   * TODO(mc, 2019-03-22): combine with colors
-   */
-  --c-bg-dark: #4a4a4a;
-  --c-bg-light: #fafafa;
-  --c-bg-selected: #f0f3ff;
-  --c-bg-hover: #f1f1f1;
-  --c-bg-success: #b6febc;
-
-  /* general UI */
-  --c-highlight: #5fd8ee;
-  --c-selected-dark: #00c3e6;
-  --c-warning-dark: #9e5e00;
-  --c-warning: #e28200;
-  --c-warning-light: #ffd58f;
-  --c-error-dark: #ac0505;
-  --c-error: #d12929;
-  --c-error-light: #ffc0c0;
-  --c-success: #60b120;
-  --c-blue-enabled: #006cfa;
-  --c-light-grey-hover: #c6c6c6;
-
-  /* Misc */
-  --c-selection-overlay: rgba(95, 216, 238, 0.3);
-  --c-plate-bg: #ccc;
-  --c-white: #fff;
-  --c-black: #000;
-  --c-green: #7ed321;
-  --c-red: #f00000;
-  --c-orange: #f5a623;
-
-  --transition-color: {
-    transition: color 0.15s ease-in-out;
-  }
-
-  --transition-background-color: {
-    transition: background-color 0.15s ease-in-out;
-  }
-}
-:root {
-  --c-font-dark: #4a4a4a;
-  --c-font-icon: #6f6f6f;
-  --c-font-light: white;
-  --c-font-disabled: #9c9c9c;
-  --fs-huge: 3rem;
-  --fs-header: 1.125rem;
-  --fs-default: 1rem;
-  --fs-body-2: 0.875rem;
-  --fs-body-1: 0.75rem;
-  --fs-caption: 0.625rem;
-  --fs-tiny: 0.325rem;
-  --fs-micro: 0.2rem;
-  --fw-bold: 800;
-  --fw-semibold: 600;
-  --fw-regular: 400;
-  --fw-light: 300;
-  --ff-code: Consolas, monaco, monospace;
-  --lh-solid: 1;
-  --lh-title: 1.25;
-  --lh-copy: 1.5;
-}
-:root {
-  /* borders */
-  --bd-radius-default: 2px;
-  --bd-radius-form-field: 3px;
-  --bd-radius-pill: 12px;
-  --bd-width-default: 1px;
-  --bd-light: var(--bd-width-default) solid var(--c-light-gray);
-
-  /* dropshadows */
-
-  /* TODO: Ian 2018-07-26 consolidate all shadows here (eg from buttons) */
-  --shadow-lvl-1:
-    0 1px 3px 0 rgba(0, 0, 0, 0.1),
-    0 1px 2px 0 rgba(0, 0, 0, 0.2);
-  --shadow-lvl-2:
-    0 3px 6px 0 rgba(0, 0, 0, 0.13),
-    0 3px 6px 0 rgba(0, 0, 0, 0.23);
-}
-* {
-  box-sizing: border-box;
-}
-:root {
-  --button-pad: 0.5rem;
-
-  --button-inverted: {
-    
-    color: var(--c-font-light);
-    border-color: var(--c-font-light);
-
-    &:active {
-      font-weight: var(--fw-regular);
-      background-color: rgb(92, 92, 92);
-    }
-
-    &:focus {
-      background-color: rgb(83, 83, 83);
-    }
-
-    &:hover {
-      background-color: rgb(83, 83, 83);
-    }
-
-    &:disabled,
-    &.disabled {
-      background-color: transparent;
-
-      
-      font-weight: normal;
-
-      
-      border-color: var(--c-font-disabled);
-
-      
-      color: var(--c-font-disabled);
-
-      
-      fill: var(--c-font-disabled);
-
-      
-      cursor: default;
-
-      
-      pointer-events: none;
-
-      
-    }
-
-    &.hover {
-      background-color: rgb(83, 83, 83);
-    }
-
-    
-  }
-}
-/* TODO(ka, 2017-2-14): standardize primary button vars */
-._button_primary_17eni_60 {
-  /* VVV from legacy --button-default VVV */
-  display: inline-block;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  position: relative;
-  line-height: 1.4;
-  border: none;
-  padding: 0.5rem;
-  padding: var(--button-pad);
-  font-size: 0.875rem;
-  font-size: var(--fs-body-2);
-  font-weight: 600;
-  font-weight: var(--fw-semibold);
-  text-align: center;
-  text-transform: uppercase;
-  cursor: pointer;
-  background: transparent;
-  border-radius: 2px;
-  border-radius: var(--bd-radius-default);
-
-  /* ^^^ from legacy --button-default ^^^ */
-
-  width: 100%;
-  color: white;
-  color: var(--c-font-light);
-  background-color: #4a4a4a;
-  background-color: var(--c-bg-dark);
-
-  /* TODO(mc, 2017-12-07): pull shadows out to central file */
-  box-shadow:
-    0 0 2px rgba(0, 0, 0, 0.12),
-    0 2px 2px rgba(0, 0, 0, 0.24);
-}
-._button_primary_17eni_60:focus {
-    background-color: rgb(52, 52, 52);
-  }
-._button_primary_17eni_60:hover {
-    background-color: rgb(52, 52, 52);
-  }
-._button_primary_17eni_60._hover_17eni_50 {
-    background-color: rgb(52, 52, 52);
-  }
-._button_primary_17eni_60:active {
-    font-weight: 400;
-    font-weight: var(--fw-regular);
-    background-color: rgb(128, 128, 128);
-
-    /* TODO(mc, 2017-12-07): pull shadows out to central file */
-    box-shadow:
-      0 0 8px rgba(0, 0, 0, 0.12),
-      0 8px 8px rgba(0, 0, 0, 0.24);
-  }
-._button_primary_17eni_60._inverted_17eni_109 {
-    background-color: #fafafa;
-    background-color: var(--c-bg-light);
-    color: #4a4a4a;
-    color: var(--c-font-dark);
-  }
-._button_primary_17eni_60._inverted_17eni_109:focus,
-    ._button_primary_17eni_60._inverted_17eni_109:hover,
-    ._button_primary_17eni_60._inverted_17eni_109._hover_17eni_50 {
-      background-color: rgb(238, 238, 238);
-    }
-._button_primary_17eni_60._inverted_17eni_109:active {
-      background-color: rgb(225, 225, 225);
-    }
-._button_primary_17eni_60:disabled,
-  ._button_primary_17eni_60._disabled_17eni_26 {
-    /* from legacy --button-disabled */
-    font-weight: normal;
-
-    /* from legacy --button-disabled */
-    border-color: #9c9c9c;
-    border-color: var(--c-font-disabled);
-
-    /* from legacy --button-disabled */
-    fill: #9c9c9c;
-    fill: var(--c-font-disabled);
-
-    /* from legacy --button-disabled */
-    cursor: default;
-
-    /* from legacy --button-disabled */
-    pointer-events: none;
-
-    /* from legacy --button-disabled */
-
-    background-color: rgb(201, 201, 201);
-    box-shadow: none;
-    color: #9c9c9c;
-    color: var(--c-font-disabled);
-  }
-._button_flat_17eni_149 {
-  /* VVV from legacy --button-default VVV */
-  display: inline-block;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  position: relative;
-  line-height: 1.4;
-  border: none;
-  padding: 0.5rem;
-  padding: var(--button-pad);
-  font-size: 0.875rem;
-  font-size: var(--fs-body-2);
-  font-weight: 600;
-  font-weight: var(--fw-semibold);
-  text-align: center;
-  text-transform: uppercase;
-  cursor: pointer;
-  color: #4a4a4a;
-  color: var(--c-font-dark);
-  background: transparent;
-  border-radius: 2px;
-  border-radius: var(--bd-radius-default);
-
-  /* ^^^ from legacy --button-default ^^^ */
-
-  width: 9rem;
-}
-._button_flat_17eni_149:active {
-    font-weight: 400;
-    font-weight: var(--fw-regular);
-    background-color: rgb(225, 225, 225);
-  }
-._button_flat_17eni_149:disabled,
-  ._button_flat_17eni_149._disabled_17eni_26 {
-    background-color: transparent;
-
-    /* from legacy --button-disabled */
-    font-weight: normal;
-
-    /* from legacy --button-disabled */
-    border-color: #9c9c9c;
-    border-color: var(--c-font-disabled);
-
-    /* from legacy --button-disabled */
-    color: #9c9c9c;
-    color: var(--c-font-disabled);
-
-    /* from legacy --button-disabled */
-    fill: #9c9c9c;
-    fill: var(--c-font-disabled);
-
-    /* from legacy --button-disabled */
-    cursor: default;
-
-    /* from legacy --button-disabled */
-    pointer-events: none;
-
-    /* from legacy --button-disabled */
-  }
-._button_flat_17eni_149:focus {
-    background-color: rgba(155, 155, 155, 0.25);
-  }
-._button_flat_17eni_149:hover {
-    background-color: rgba(155, 155, 155, 0.25);
-  }
-._button_flat_17eni_149._hover_17eni_50 {
-    background-color: rgba(155, 155, 155, 0.25);
-  }
-._button_flat_17eni_149._inverted_17eni_109 {
-    /* VVV from legacy --button-inverted VVV */
-    color: white;
-    color: var(--c-font-light);
-    border-color: white;
-    border-color: var(--c-font-light);
-  }
-._button_flat_17eni_149._inverted_17eni_109:active {
-      font-weight: 400;
-      font-weight: var(--fw-regular);
-      background-color: rgb(92, 92, 92);
-    }
-._button_flat_17eni_149._inverted_17eni_109:disabled,
-    ._button_flat_17eni_149._inverted_17eni_109._disabled_17eni_26 {
-      background-color: transparent;
-
-      /* from legacy --button-disabled */
-      font-weight: normal;
-
-      /* from legacy --button-disabled */
-      border-color: #9c9c9c;
-      border-color: var(--c-font-disabled);
-
-      /* from legacy --button-disabled */
-      color: #9c9c9c;
-      color: var(--c-font-disabled);
-
-      /* from legacy --button-disabled */
-      fill: #9c9c9c;
-      fill: var(--c-font-disabled);
-
-      /* from legacy --button-disabled */
-      cursor: default;
-
-      /* from legacy --button-disabled */
-      pointer-events: none;
-
-      /* from legacy --button-disabled */
-    }
-._button_flat_17eni_149._inverted_17eni_109:focus {
-      background-color: rgb(83, 83, 83);
-    }
-._button_flat_17eni_149._inverted_17eni_109:hover {
-      background-color: rgb(83, 83, 83);
-    }
-._button_flat_17eni_149._inverted_17eni_109._hover_17eni_50 {
-      background-color: rgb(83, 83, 83);
-    }
-/* ^^^ from legacy --button-default ^^^ */
-._button_outline_17eni_263 {
-  /* VVV from legacy --button-default VVV */
-  display: inline-block;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  position: relative;
-  line-height: 1.4;
-  padding: 0.5rem;
-  padding: var(--button-pad);
-  font-size: 0.875rem;
-  font-size: var(--fs-body-2);
-  font-weight: 600;
-  font-weight: var(--fw-semibold);
-  text-align: center;
-  text-transform: uppercase;
-  cursor: pointer;
-  color: #4a4a4a;
-  color: var(--c-font-dark);
-  background: transparent;
-  border-radius: 2px;
-  border-radius: var(--bd-radius-default);
-
-  /* ^^^ from legacy --button-default ^^^ */
-
-  width: 9rem;
-  border: 1px solid #4a4a4a;
-  border: 1px solid var(--c-font-dark);
-}
-._button_outline_17eni_263:active {
-    font-weight: 400;
-    font-weight: var(--fw-regular);
-    background-color: rgb(225, 225, 225);
-  }
-._button_outline_17eni_263:disabled,
-  ._button_outline_17eni_263._disabled_17eni_26 {
-    background-color: transparent;
-
-    /* from legacy --button-disabled */
-    font-weight: normal;
-
-    /* from legacy --button-disabled */
-    border-color: #9c9c9c;
-    border-color: var(--c-font-disabled);
-
-    /* from legacy --button-disabled */
-    color: #9c9c9c;
-    color: var(--c-font-disabled);
-
-    /* from legacy --button-disabled */
-    fill: #9c9c9c;
-    fill: var(--c-font-disabled);
-
-    /* from legacy --button-disabled */
-    cursor: default;
-
-    /* from legacy --button-disabled */
-    pointer-events: none;
-
-    /* from legacy --button-disabled */
-  }
-._button_outline_17eni_263:focus {
-    background-color: rgba(155, 155, 155, 0.25);
-  }
-._button_outline_17eni_263:hover {
-    background-color: rgba(155, 155, 155, 0.25);
-  }
-._button_outline_17eni_263._hover_17eni_50 {
-    background-color: rgba(155, 155, 155, 0.25);
-  }
-._button_outline_17eni_263._inverted_17eni_109 {
-    /* VVV from legacy --button-inverted VVV */
-    color: white;
-    color: var(--c-font-light);
-    border-color: white;
-    border-color: var(--c-font-light);
-  }
-._button_outline_17eni_263._inverted_17eni_109:active {
-      font-weight: 400;
-      font-weight: var(--fw-regular);
-      background-color: rgb(92, 92, 92);
-    }
-._button_outline_17eni_263._inverted_17eni_109:disabled,
-    ._button_outline_17eni_263._inverted_17eni_109._disabled_17eni_26 {
-      background-color: transparent;
-
-      /* from legacy --button-disabled */
-      font-weight: normal;
-
-      /* from legacy --button-disabled */
-      border-color: #9c9c9c;
-      border-color: var(--c-font-disabled);
-
-      /* from legacy --button-disabled */
-      color: #9c9c9c;
-      color: var(--c-font-disabled);
-
-      /* from legacy --button-disabled */
-      fill: #9c9c9c;
-      fill: var(--c-font-disabled);
-
-      /* from legacy --button-disabled */
-      cursor: default;
-
-      /* from legacy --button-disabled */
-      pointer-events: none;
-
-      /* from legacy --button-disabled */
-    }
-._button_outline_17eni_263._inverted_17eni_109:focus {
-      background-color: rgb(83, 83, 83);
-    }
-._button_outline_17eni_263._inverted_17eni_109:hover {
-      background-color: rgb(83, 83, 83);
-    }
-._button_outline_17eni_263._inverted_17eni_109._hover_17eni_50 {
-      background-color: rgb(83, 83, 83);
-    }
-/* ^^^ from legacy --button-default ^^^ */
-/* style for IconButton */
-._button_icon_17eni_379 {
-  width: auto;
-}
-._button_icon_17eni_379 > * {
-    display: block;
-    height: 100%;
-    width: 100%;
-  }
-._button_icon_17eni_379._inverted_17eni_109 {
-    color: white;
-    fill: white;
-
-    /* TODO(mc, 2019-03-29): Is this correct? Our icons use only fill */
-    stroke: white;
-  }
-._button_icon_17eni_379._inverted_17eni_109:disabled,
-    ._button_icon_17eni_379._inverted_17eni_109._disabled_17eni_26 {
-      background-color: transparent;
-
-      /* from legacy --button-disabled */
-      font-weight: normal;
-
-      /* from legacy --button-disabled */
-      border-color: #9c9c9c;
-      border-color: var(--c-font-disabled);
-
-      /* from legacy --button-disabled */
-      color: #9c9c9c;
-      color: var(--c-font-disabled);
-
-      /* from legacy --button-disabled */
-      fill: #9c9c9c;
-      fill: var(--c-font-disabled);
-
-      /* from legacy --button-disabled */
-      cursor: default;
-
-      /* from legacy --button-disabled */
-      pointer-events: none;
-
-      /* from legacy --button-disabled */
-    }
-/* style for the supplementary icon displayed by Button */
-._icon_17eni_423 {
-  position: absolute;
-  top: 0.5rem;
-  top: var(--button-pad);
-  left: 0.5rem;
-  left: var(--button-pad);
-  height: calc(100% - 2 * 0.5rem);
-  height: calc(100% - 2 * var(--button-pad));
-}/* common styling for modals */
-/* opentrons style library */
-:root {
-  /* ot brand */
-  --c-mustard: #ffd252;
-  --c-blue: #006cfa;
-  --c-light-blue: hsl(214.08, 100%, 85%);
-
-  /*
-   * grays
-   * TODO(mc, 2019-03-22): align with style guide
-   */
-  --c-near-black: #a4a4a4; /* style guide: n/a */
-  --c-dark-gray: #4a4a4a; /* style guide: near-black */
-  --c-charcoal: #979797;
-  --c-med-gray: #9b9b9b; /* style guide: n/a */
-  --c-light-gray: #e5e2e2; /* style guide: smoke, should be e6e6e6 */
-  --c-lightest-gray: #ededed; /* style guide: n/a */
-
-  /*
-   * background colors
-   * TODO(mc, 2019-03-22): combine with colors
-   */
-  --c-bg-dark: #4a4a4a;
-  --c-bg-light: #fafafa;
-  --c-bg-selected: #f0f3ff;
-  --c-bg-hover: #f1f1f1;
-  --c-bg-success: #b6febc;
-
-  /* general UI */
-  --c-highlight: #5fd8ee;
-  --c-selected-dark: #00c3e6;
-  --c-warning-dark: #9e5e00;
-  --c-warning: #e28200;
-  --c-warning-light: #ffd58f;
-  --c-error-dark: #ac0505;
-  --c-error: #d12929;
-  --c-error-light: #ffc0c0;
-  --c-success: #60b120;
-  --c-blue-enabled: #006cfa;
-  --c-light-grey-hover: #c6c6c6;
-
-  /* Misc */
-  --c-selection-overlay: rgba(95, 216, 238, 0.3);
-  --c-plate-bg: #ccc;
-  --c-white: #fff;
-  --c-black: #000;
-  --c-green: #7ed321;
-  --c-red: #f00000;
-  --c-orange: #f5a623;
-
-  --transition-color: {
-    transition: color 0.15s ease-in-out;
-  }
-
-  --transition-background-color: {
-    transition: background-color 0.15s ease-in-out;
-  }
-}
-:root {
-  --c-font-dark: #4a4a4a;
-  --c-font-icon: #6f6f6f;
-  --c-font-light: white;
-  --c-font-disabled: #9c9c9c;
-  --fs-huge: 3rem;
-  --fs-header: 1.125rem;
-  --fs-default: 1rem;
-  --fs-body-2: 0.875rem;
-  --fs-body-1: 0.75rem;
-  --fs-caption: 0.625rem;
-  --fs-tiny: 0.325rem;
-  --fs-micro: 0.2rem;
-  --fw-bold: 800;
-  --fw-semibold: 600;
-  --fw-regular: 400;
-  --fw-light: 300;
-  --ff-code: Consolas, monaco, monospace;
-  --lh-solid: 1;
-  --lh-title: 1.25;
-  --lh-copy: 1.5;
-}
-:root {
-  /* borders */
-  --bd-radius-default: 2px;
-  --bd-radius-form-field: 3px;
-  --bd-radius-pill: 12px;
-  --bd-width-default: 1px;
-  --bd-light: var(--bd-width-default) solid var(--c-light-gray);
-
-  /* dropshadows */
-
-  /* TODO: Ian 2018-07-26 consolidate all shadows here (eg from buttons) */
-  --shadow-lvl-1:
-    0 1px 3px 0 rgba(0, 0, 0, 0.1),
-    0 1px 2px 0 rgba(0, 0, 0, 0.2);
-  --shadow-lvl-2:
-    0 3px 6px 0 rgba(0, 0, 0, 0.13),
-    0 3px 6px 0 rgba(0, 0, 0, 0.23);
-}
-* {
-  box-sizing: border-box;
-}
-._modal_h7kfv_4 {
-  /* from legacy --absolute-fill */
-  top: 0;
-
-  /* from legacy --absolute-fill */
-  right: 0;
-
-  /* from legacy --absolute-fill */
-  bottom: 0;
-
-  /* from legacy --absolute-fill */
-  left: 0;
-
-  /* from legacy --absolute-fill */
-  display: flex;
-
-  /* from legacy --center-children */
-  justify-content: center;
-
-  /* from legacy --center-children */
-  align-items: center;
-
-  /* from legacy --center-children */
-
-  align-items: flex-start;
-  position: fixed;
-  z-index: 1;
-  padding: 4rem;
-}
-._modal_page_h7kfv_34 {
-  position: absolute;
-
-  /* from legacy --absolute-fill */
-  top: 0;
-
-  /* from legacy --absolute-fill */
-  right: 0;
-
-  /* from legacy --absolute-fill */
-  bottom: 0;
-
-  /* from legacy --absolute-fill */
-  left: 0;
-
-  /* from legacy --absolute-fill */
-
-  display: flex;
-
-  /* from legacy --flex-start */
-  justify-content: flex-start;
-
-  /* from legacy --flex-start */
-  align-items: center;
-
-  /* from legacy --flex-start */
-
-  flex-direction: column;
-  padding: 4.5rem 3rem 1rem 3rem;
-}
-._overlay_h7kfv_65 {
-  position: absolute;
-
-  /* from legacy --absolute-fill */
-  top: 0;
-
-  /* from legacy --absolute-fill */
-  right: 0;
-
-  /* from legacy --absolute-fill */
-  bottom: 0;
-
-  /* from legacy --absolute-fill */
-  left: 0;
-
-  /* from legacy --absolute-fill */
-
-  background-color: rgba(0, 0, 0, 0.9);
-}
-._title_bar_h7kfv_85 {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  width: 100%;
-  z-index: 3;
-}
-._modal_contents_h7kfv_94 {
-  z-index: 1;
-
-  /* from legacy --modal-contents */
-  width: 100%;
-
-  /* from legacy --modal-contents */
-  max-width: 38rem;
-
-  /* from legacy --modal-contents */
-  margin: 0 auto;
-
-  /* from legacy --modal-contents */
-  padding: 1rem;
-
-  /* from legacy --modal-contents */
-  border-radius: 0.5rem;
-
-  /* from legacy --modal-contents */
-
-  background-color: white;
-}
-._modal_page_contents_h7kfv_117 {
-  z-index: 1;
-
-  /* from legacy --modal-contents */
-  width: 100%;
-
-  /* from legacy --modal-contents */
-  max-width: 38rem;
-
-  /* from legacy --modal-contents */
-  margin: 0 auto;
-
-  /* from legacy --modal-contents */
-  padding: 1rem;
-
-  /* from legacy --modal-contents */
-  border-radius: 0.5rem;
-
-  /* from legacy --modal-contents */
-
-  background-color: white;
-  max-height: 100%;
-  overflow-y: auto;
-  padding-top: 1rem;
-}
-._modal_heading_h7kfv_143 {
-  font-size: 1.125rem;
-  font-size: var(--fs-header);
-
-  /* from legacy --font-header-dark */
-  font-weight: 600;
-  font-weight: var(--fw-semibold);
-
-  /* from legacy --font-header-dark */
-  color: #4a4a4a;
-  color: var(--c-font-dark);
-
-  /* from legacy --font-header-dark */
-
-  margin-top: 0;
-  margin-bottom: 1rem;
-  text-transform: capitalize;
-}
-._alert_modal_wrapper_h7kfv_159 {
-  position: relative;
-  max-height: 100%;
-  padding-top: 4rem;
-  border-radius: 0;
-}
-._alert_modal_heading_h7kfv_166._no_icon_heading_h7kfv_166 {
-  padding-left: 2rem;
-}
-._no_alert_header_h7kfv_170 {
-  padding-top: 1.5rem;
-}
-._spinner_modal_contents_h7kfv_174 {
-  /* from legacy --modal-contents */
-  width: 100%;
-
-  /* from legacy --modal-contents */
-  margin: 0 auto;
-
-  /* from legacy --modal-contents */
-  padding: 1rem;
-
-  /* from legacy --modal-contents */
-  border-radius: 0.5rem;
-
-  /* from legacy --modal-contents */
-  font-size: 0.875rem;
-  font-size: var(--fs-body-2);
-
-  /* from legacy --font-body-2-light */
-  font-weight: 400;
-  font-weight: var(--fw-regular);
-
-  /* from legacy --font-body-2-light */
-  color: white;
-  color: var(--c-font-light);
-
-  /* from legacy --font-body-2-light */
-
-  max-width: 30rem;
-  padding-top: 3rem;
-  background-color: transparent;
-  flex-direction: column;
-  font-style: italic;
-  text-align: center;
-  z-index: 4;
-}
-._spinner_modal_icon_h7kfv_207 {
-  width: 7.5rem;
-  margin-bottom: 3rem;
-}
-._clickable_h7kfv_212 {
-  cursor: pointer;
-}
-._alert_modal_h7kfv_159 {
-  z-index: 10;
-}
-._alert_modal_overlay_h7kfv_220 {
-  background-color: rgba(115, 115, 115, 0.9);
-}
-._alert_modal_contents_h7kfv_224 {
-  font-size: 0.875rem;
-  font-size: var(--fs-body-2);
-
-  /* from legacy --font-body-2-dark */
-  font-weight: 400;
-  font-weight: var(--fw-regular);
-
-  /* from legacy --font-body-2-dark */
-  color: #4a4a4a;
-  color: var(--c-font-dark);
-
-  /* from legacy --font-body-2-dark */
-
-  width: 100%;
-  max-height: 100%;
-  padding: 1rem;
-}
-._alert_modal_contents_h7kfv_224 > p {
-    padding-bottom: 1rem;
-  }
-._alert_modal_heading_h7kfv_166 {
-  font-size: 1.125rem;
-  font-size: var(--fs-header);
-
-  /* from legacy --font-header-dark */
-  color: #4a4a4a;
-  color: var(--c-font-dark);
-
-  /* from legacy --font-header-dark */
-
-  font-weight: normal;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  display: flex;
-  align-items: center;
-  padding: 1rem;
-  background-color: #e0e0e0;
-}
-._alert_modal_icon_h7kfv_263 {
-  height: 1.125rem;
-  margin-right: 0.75rem;
-}
-._alert_modal_buttons_h7kfv_268 {
-  float: right;
-  margin-top: 1rem;
-}
-._alert_button_h7kfv_273 {
-  margin-left: 1rem;
-}/* TitleBar styles */
-/* opentrons style library */
-:root {
-  /* ot brand */
-  --c-mustard: #ffd252;
-  --c-blue: #006cfa;
-  --c-light-blue: hsl(214.08, 100%, 85%);
-
-  /*
-   * grays
-   * TODO(mc, 2019-03-22): align with style guide
-   */
-  --c-near-black: #a4a4a4; /* style guide: n/a */
-  --c-dark-gray: #4a4a4a; /* style guide: near-black */
-  --c-charcoal: #979797;
-  --c-med-gray: #9b9b9b; /* style guide: n/a */
-  --c-light-gray: #e5e2e2; /* style guide: smoke, should be e6e6e6 */
-  --c-lightest-gray: #ededed; /* style guide: n/a */
-
-  /*
-   * background colors
-   * TODO(mc, 2019-03-22): combine with colors
-   */
-  --c-bg-dark: #4a4a4a;
-  --c-bg-light: #fafafa;
-  --c-bg-selected: #f0f3ff;
-  --c-bg-hover: #f1f1f1;
-  --c-bg-success: #b6febc;
-
-  /* general UI */
-  --c-highlight: #5fd8ee;
-  --c-selected-dark: #00c3e6;
-  --c-warning-dark: #9e5e00;
-  --c-warning: #e28200;
-  --c-warning-light: #ffd58f;
-  --c-error-dark: #ac0505;
-  --c-error: #d12929;
-  --c-error-light: #ffc0c0;
-  --c-success: #60b120;
-  --c-blue-enabled: #006cfa;
-  --c-light-grey-hover: #c6c6c6;
-
-  /* Misc */
-  --c-selection-overlay: rgba(95, 216, 238, 0.3);
-  --c-plate-bg: #ccc;
-  --c-white: #fff;
-  --c-black: #000;
-  --c-green: #7ed321;
-  --c-red: #f00000;
-  --c-orange: #f5a623;
-
-  --transition-color: {
-    transition: color 0.15s ease-in-out;
-  }
-
-  --transition-background-color: {
-    transition: background-color 0.15s ease-in-out;
-  }
-}
-:root {
-  --c-font-dark: #4a4a4a;
-  --c-font-icon: #6f6f6f;
-  --c-font-light: white;
-  --c-font-disabled: #9c9c9c;
-  --fs-huge: 3rem;
-  --fs-header: 1.125rem;
-  --fs-default: 1rem;
-  --fs-body-2: 0.875rem;
-  --fs-body-1: 0.75rem;
-  --fs-caption: 0.625rem;
-  --fs-tiny: 0.325rem;
-  --fs-micro: 0.2rem;
-  --fw-bold: 800;
-  --fw-semibold: 600;
-  --fw-regular: 400;
-  --fw-light: 300;
-  --ff-code: Consolas, monaco, monospace;
-  --lh-solid: 1;
-  --lh-title: 1.25;
-  --lh-copy: 1.5;
-}
-:root {
-  /* borders */
-  --bd-radius-default: 2px;
-  --bd-radius-form-field: 3px;
-  --bd-radius-pill: 12px;
-  --bd-width-default: 1px;
-  --bd-light: var(--bd-width-default) solid var(--c-light-gray);
-
-  /* dropshadows */
-
-  /* TODO: Ian 2018-07-26 consolidate all shadows here (eg from buttons) */
-  --shadow-lvl-1:
-    0 1px 3px 0 rgba(0, 0, 0, 0.1),
-    0 1px 2px 0 rgba(0, 0, 0, 0.2);
-  --shadow-lvl-2:
-    0 3px 6px 0 rgba(0, 0, 0, 0.13),
-    0 3px 6px 0 rgba(0, 0, 0, 0.23);
-}
-* {
-  box-sizing: border-box;
-}
-._title_bar_1lfcn_4 {
-  display: flex;
-  align-items: center;
-  height: 3rem;
-  text-transform: uppercase;
-  background-color: #4a4a4a;
-  background-color: var(--c-dark-gray);
-}
-._title_bar_1lfcn_4,
-._title_bar_1lfcn_4 a {
-  color: white;
-}
-._title_1lfcn_4,
-._subtitle_1lfcn_18,
-._separator_1lfcn_19 {
-  font-size: 1.125rem;
-  font-size: var(--fs-header);
-  margin: 0;
-}
-._title_1lfcn_4,
-._separator_1lfcn_19 {
-  font-weight: 600;
-  font-weight: var(--fw-semibold);
-}
-._title_1lfcn_4 {
-  white-space: nowrap; /* from legacy --truncate */
-  overflow: hidden; /* from legacy --truncate */
-  text-overflow: ellipsis; /* from legacy --truncate */
-  min-width: 0; /* from legacy --truncate */
-  padding: 0 1.5rem;
-}
-._subtitle_1lfcn_18 {
-  padding: 0 1.5rem;
-  font-weight: normal;
-}
-._title_1lfcn_4._right_1lfcn_42 {
-  margin-left: auto;
-}
-._title_button_1lfcn_46 {
-  flex: none;
-}
-._page_tabs_1lfcn_50 {
-  width: 100%;
-  text-align: center;
-}
-._tab_link_1lfcn_55 {
-  display: inline-block;
-  width: 50%;
-  padding: 0.25rem 0;
-  font-size: 3rem;
-  font-size: var(--fs-huge);
-  opacity: 0.2;
-  background-color: #9b9b9b;
-  background-color: var(--c-med-gray);
-  color: white;
-  text-transform: uppercase;
-}
-._active_tab_link_1lfcn_66 {
-  opacity: 1;
-}
-._tab_title_1lfcn_70 {
-  font-weight: normal;
-}
-._active_tab_link_1lfcn_66 ._tab_title_1lfcn_70 {
-  font-weight: 800;
-  font-weight: var(--fw-bold);
-}
-._disabled_1lfcn_78 {
-  pointer-events: none;
-  background-color: transparent;
-}
-._disabled_1lfcn_78 * {
-    color: #9c9c9c;
-    color: var(--c-font-disabled);
-    fill: #9c9c9c;
-    fill: var(--c-font-disabled);
-    background-color: transparent;
-  }
-._labeled_value_1lfcn_89 {
-  font-size: 0.75rem;
-  font-size: var(--fs-body-1); /* from legacy --font-body-1-dark */
-  font-weight: 400;
-  font-weight: var(--fw-regular); /* from legacy --font-body-1-dark */
-  color: #4a4a4a;
-  color: var(--c-font-dark); /* from legacy --font-body-1-dark */
-  line-height: 1.5;
-}
-._labeled_value_1lfcn_89 svg {
-    height: 0.875rem;
-    height: var(--fs-body-2);
-  }
-._labeled_value_label_1lfcn_100 {
-  font-weight: 600;
-  font-weight: var(--fw-semibold);
-  margin-top: 0;
-  margin-bottom: 0.25rem;
-}
-._labeled_value_value_1lfcn_106 {
-  margin: 0;
-}
-._right_node_1lfcn_110 {
-  display: flex;
-  justify-content: flex-end;
-  margin-left: auto;
-}
-/* opentrons style library */
-
-:root {
-  /* ot brand */
-  --c-mustard: #ffd252;
-  --c-blue: #006cfa;
-  --c-light-blue: hsl(214.08, 100%, 85%);
-
-  /*
-   * grays
-   * TODO(mc, 2019-03-22): align with style guide
-   */
-  --c-near-black: #a4a4a4; /* style guide: n/a */
-  --c-dark-gray: #4a4a4a; /* style guide: near-black */
-  --c-charcoal: #979797;
-  --c-med-gray: #9b9b9b; /* style guide: n/a */
-  --c-light-gray: #e5e2e2; /* style guide: smoke, should be e6e6e6 */
-  --c-lightest-gray: #ededed; /* style guide: n/a */
-
-  /*
-   * background colors
-   * TODO(mc, 2019-03-22): combine with colors
-   */
-  --c-bg-dark: #4a4a4a;
-  --c-bg-light: #fafafa;
-  --c-bg-selected: #f0f3ff;
-  --c-bg-hover: #f1f1f1;
-  --c-bg-success: #b6febc;
-
-  /* general UI */
-  --c-highlight: #5fd8ee;
-  --c-selected-dark: #00c3e6;
-  --c-warning-dark: #9e5e00;
-  --c-warning: #e28200;
-  --c-warning-light: #ffd58f;
-  --c-error-dark: #ac0505;
-  --c-error: #d12929;
-  --c-error-light: #ffc0c0;
-  --c-success: #60b120;
-  --c-blue-enabled: #006cfa;
-  --c-light-grey-hover: #c6c6c6;
-
-  /* Misc */
-  --c-selection-overlay: rgba(95, 216, 238, 0.3);
-  --c-plate-bg: #ccc;
-  --c-white: #fff;
-  --c-black: #000;
-  --c-green: #7ed321;
-  --c-red: #f00000;
-  --c-orange: #f5a623;
-
-  --transition-color: {
-    transition: color 0.15s ease-in-out;
-  }
-
-  --transition-background-color: {
-    transition: background-color 0.15s ease-in-out;
-  }
-}
-
-:root {
-  --c-font-dark: #4a4a4a;
-  --c-font-icon: #6f6f6f;
-  --c-font-light: white;
-  --c-font-disabled: #9c9c9c;
-  --fs-huge: 3rem;
-  --fs-header: 1.125rem;
-  --fs-default: 1rem;
-  --fs-body-2: 0.875rem;
-  --fs-body-1: 0.75rem;
-  --fs-caption: 0.625rem;
-  --fs-tiny: 0.325rem;
-  --fs-micro: 0.2rem;
-  --fw-bold: 800;
-  --fw-semibold: 600;
-  --fw-regular: 400;
-  --fw-light: 300;
-  --ff-code: Consolas, monaco, monospace;
-  --lh-solid: 1;
-  --lh-title: 1.25;
-  --lh-copy: 1.5;
-}
-
-:root {
-  /* borders */
-  --bd-radius-default: 2px;
-  --bd-radius-form-field: 3px;
-  --bd-radius-pill: 12px;
-  --bd-width-default: 1px;
-  --bd-light: var(--bd-width-default) solid var(--c-light-gray);
-
-  /* dropshadows */
-
-  /* TODO: Ian 2018-07-26 consolidate all shadows here (eg from buttons) */
-  --shadow-lvl-1:
-    0 1px 3px 0 rgba(0, 0, 0, 0.1),
-    0 1px 2px 0 rgba(0, 0, 0, 0.2);
-  --shadow-lvl-2:
-    0 3px 6px 0 rgba(0, 0, 0, 0.13),
-    0 3px 6px 0 rgba(0, 0, 0, 0.23);
-}
-
-* {
-  box-sizing: border-box;
-}
-
-._splash_yl85l_3 {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  color: #e5e2e2;
-  color: var(--c-light-gray);
-}
-
-._splash_yl85l_3 > * {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    max-height: 100%;
-  }
-/* opentrons style library */
-
-:root {
-  /* ot brand */
-  --c-mustard: #ffd252;
-  --c-blue: #006cfa;
-  --c-light-blue: hsl(214.08, 100%, 85%);
-
-  /*
-   * grays
-   * TODO(mc, 2019-03-22): align with style guide
-   */
-  --c-near-black: #a4a4a4; /* style guide: n/a */
-  --c-dark-gray: #4a4a4a; /* style guide: near-black */
-  --c-charcoal: #979797;
-  --c-med-gray: #9b9b9b; /* style guide: n/a */
-  --c-light-gray: #e5e2e2; /* style guide: smoke, should be e6e6e6 */
-  --c-lightest-gray: #ededed; /* style guide: n/a */
-
-  /*
-   * background colors
-   * TODO(mc, 2019-03-22): combine with colors
-   */
-  --c-bg-dark: #4a4a4a;
-  --c-bg-light: #fafafa;
-  --c-bg-selected: #f0f3ff;
-  --c-bg-hover: #f1f1f1;
-  --c-bg-success: #b6febc;
-
-  /* general UI */
-  --c-highlight: #5fd8ee;
-  --c-selected-dark: #00c3e6;
-  --c-warning-dark: #9e5e00;
-  --c-warning: #e28200;
-  --c-warning-light: #ffd58f;
-  --c-error-dark: #ac0505;
-  --c-error: #d12929;
-  --c-error-light: #ffc0c0;
-  --c-success: #60b120;
-  --c-blue-enabled: #006cfa;
-  --c-light-grey-hover: #c6c6c6;
-
-  /* Misc */
-  --c-selection-overlay: rgba(95, 216, 238, 0.3);
-  --c-plate-bg: #ccc;
-  --c-white: #fff;
-  --c-black: #000;
-  --c-green: #7ed321;
-  --c-red: #f00000;
-  --c-orange: #f5a623;
-
-  --transition-color: {
-    transition: color 0.15s ease-in-out;
-  }
-
-  --transition-background-color: {
-    transition: background-color 0.15s ease-in-out;
-  }
-}
-
-:root {
-  --c-font-dark: #4a4a4a;
-  --c-font-icon: #6f6f6f;
-  --c-font-light: white;
-  --c-font-disabled: #9c9c9c;
-  --fs-huge: 3rem;
-  --fs-header: 1.125rem;
-  --fs-default: 1rem;
-  --fs-body-2: 0.875rem;
-  --fs-body-1: 0.75rem;
-  --fs-caption: 0.625rem;
-  --fs-tiny: 0.325rem;
-  --fs-micro: 0.2rem;
-  --fw-bold: 800;
-  --fw-semibold: 600;
-  --fw-regular: 400;
-  --fw-light: 300;
-  --ff-code: Consolas, monaco, monospace;
-  --lh-solid: 1;
-  --lh-title: 1.25;
-  --lh-copy: 1.5;
-}
-
-:root {
-  /* borders */
-  --bd-radius-default: 2px;
-  --bd-radius-form-field: 3px;
-  --bd-radius-pill: 12px;
-  --bd-width-default: 1px;
-  --bd-light: var(--bd-width-default) solid var(--c-light-gray);
-
-  /* dropshadows */
-
-  /* TODO: Ian 2018-07-26 consolidate all shadows here (eg from buttons) */
-  --shadow-lvl-1:
-    0 1px 3px 0 rgba(0, 0, 0, 0.1),
-    0 1px 2px 0 rgba(0, 0, 0, 0.2);
-  --shadow-lvl-2:
-    0 3px 6px 0 rgba(0, 0, 0, 0.13),
-    0 3px 6px 0 rgba(0, 0, 0, 0.23);
-}
-
-* {
-  box-sizing: border-box;
-}
-
-._pill_11mvp_3 {
-  border-radius: 12px;
-  border-radius: var(--bd-radius-pill);
-  color: #fff;
-  color: var(--c-white);
-  padding: 0.5em;
-}
-
-._pill_11mvp_3:empty::before {
-  /* zero width space to give empty pill the same line height */
-  content: "\200b";
-}
-
-._invert_text_11mvp_14 {
-  color: #000;
-  color: var(--c-black);
-}
-/* opentrons style library */
-
-:root {
-  /* ot brand */
-  --c-mustard: #ffd252;
-  --c-blue: #006cfa;
-  --c-light-blue: hsl(214.08, 100%, 85%);
-
-  /*
-   * grays
-   * TODO(mc, 2019-03-22): align with style guide
-   */
-  --c-near-black: #a4a4a4; /* style guide: n/a */
-  --c-dark-gray: #4a4a4a; /* style guide: near-black */
-  --c-charcoal: #979797;
-  --c-med-gray: #9b9b9b; /* style guide: n/a */
-  --c-light-gray: #e5e2e2; /* style guide: smoke, should be e6e6e6 */
-  --c-lightest-gray: #ededed; /* style guide: n/a */
-
-  /*
-   * background colors
-   * TODO(mc, 2019-03-22): combine with colors
-   */
-  --c-bg-dark: #4a4a4a;
-  --c-bg-light: #fafafa;
-  --c-bg-selected: #f0f3ff;
-  --c-bg-hover: #f1f1f1;
-  --c-bg-success: #b6febc;
-
-  /* general UI */
-  --c-highlight: #5fd8ee;
-  --c-selected-dark: #00c3e6;
-  --c-warning-dark: #9e5e00;
-  --c-warning: #e28200;
-  --c-warning-light: #ffd58f;
-  --c-error-dark: #ac0505;
-  --c-error: #d12929;
-  --c-error-light: #ffc0c0;
-  --c-success: #60b120;
-  --c-blue-enabled: #006cfa;
-  --c-light-grey-hover: #c6c6c6;
-
-  /* Misc */
-  --c-selection-overlay: rgba(95, 216, 238, 0.3);
-  --c-plate-bg: #ccc;
-  --c-white: #fff;
-  --c-black: #000;
-  --c-green: #7ed321;
-  --c-red: #f00000;
-  --c-orange: #f5a623;
-
-  --transition-color: {
-    transition: color 0.15s ease-in-out;
-  }
-
-  --transition-background-color: {
-    transition: background-color 0.15s ease-in-out;
-  }
-}
-
-:root {
-  --c-font-dark: #4a4a4a;
-  --c-font-icon: #6f6f6f;
-  --c-font-light: white;
-  --c-font-disabled: #9c9c9c;
-  --fs-huge: 3rem;
-  --fs-header: 1.125rem;
-  --fs-default: 1rem;
-  --fs-body-2: 0.875rem;
-  --fs-body-1: 0.75rem;
-  --fs-caption: 0.625rem;
-  --fs-tiny: 0.325rem;
-  --fs-micro: 0.2rem;
-  --fw-bold: 800;
-  --fw-semibold: 600;
-  --fw-regular: 400;
-  --fw-light: 300;
-  --ff-code: Consolas, monaco, monospace;
-  --lh-solid: 1;
-  --lh-title: 1.25;
-  --lh-copy: 1.5;
-}
-
-:root {
-  /* borders */
-  --bd-radius-default: 2px;
-  --bd-radius-form-field: 3px;
-  --bd-radius-pill: 12px;
-  --bd-width-default: 1px;
-  --bd-light: var(--bd-width-default) solid var(--c-light-gray);
-
-  /* dropshadows */
-
-  /* TODO: Ian 2018-07-26 consolidate all shadows here (eg from buttons) */
-  --shadow-lvl-1:
-    0 1px 3px 0 rgba(0, 0, 0, 0.1),
-    0 1px 2px 0 rgba(0, 0, 0, 0.2);
-  --shadow-lvl-2:
-    0 3px 6px 0 rgba(0, 0, 0, 0.13),
-    0 3px 6px 0 rgba(0, 0, 0, 0.23);
-}
-
-* {
-  box-sizing: border-box;
-}
-
-._alert_15d5j_3 {
-  font-size: 0.875rem;
-  font-size: var(--fs-body-2);
-  font-weight: 400;
-  font-weight: var(--fw-regular);
-}
-
-._alert_15d5j_3:not(:first-of-type) {
-  border-top: none;
-}
-
-._title_bar_15d5j_12 {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0.5rem 1rem;
-  font-weight: 600;
-  font-weight: var(--fw-semibold);
-}
-
-._title_15d5j_12 {
-  width: 100%;
-}
-
-._success_15d5j_25 {
-  border: 1px solid #60b120;
-  border: 1px solid var(--c-success);
-}
-
-._success_15d5j_25 > ._title_bar_15d5j_12 {
-    background-color: #b6febc;
-    background-color: var(--c-bg-success);
-    color: #60b120;
-    color: var(--c-success);
-  }
-
-._success_15d5j_25 > ._title_bar_15d5j_12 svg {
-      color: #60b120;
-      color: var(--c-success);
-    }
-
-._info_15d5j_38 {
-  border: 1px solid #5fd8ee;
-  border: 1px solid var(--c-highlight);
-}
-
-._info_15d5j_38 > ._title_bar_15d5j_12 {
-    background-color: #f0f3ff;
-    background-color: var(--c-bg-selected);
-    color: #00c3e6;
-    color: var(--c-selected-dark);
-  }
-
-._info_15d5j_38 > ._title_bar_15d5j_12 svg {
-      color: #5fd8ee;
-      color: var(--c-highlight);
-    }
-
-._warning_15d5j_51 {
-  border: 1px solid #e28200;
-  border: 1px solid var(--c-warning);
-}
-
-._warning_15d5j_51 > ._title_bar_15d5j_12 {
-    background-color: #ffd58f;
-    background-color: var(--c-warning-light);
-    color: #9e5e00;
-    color: var(--c-warning-dark);
-  }
-
-._warning_15d5j_51 > ._title_bar_15d5j_12 svg {
-      fill: #e28200;
-      fill: var(--c-warning);
-    }
-
-._error_15d5j_64 {
-  border: 1px solid #d12929;
-  border: 1px solid var(--c-error);
-}
-
-._error_15d5j_64 > ._title_bar_15d5j_12 {
-    background-color: #ffc0c0;
-    background-color: var(--c-error-light);
-    color: #ac0505;
-    color: var(--c-error-dark);
-  }
-
-._error_15d5j_64 > ._title_bar_15d5j_12 svg {
-      fill: #d12929;
-      fill: var(--c-error);
-    }
-
-._message_15d5j_77 {
-  padding: 1rem 3rem;
-  background-color: white;
-}
-
-._message_15d5j_77 a {
-    -webkit-text-decoration: underline;
-    text-decoration: underline;
-    color: inherit;
-  }
-
-._message_15d5j_77:empty {
-    padding: 0;
-  }
-
-._icon_15d5j_91 {
-  width: 1.5rem;
-  margin-right: 0.5rem;
-}
-
-._close_15d5j_96 {
-  width: 2rem;
-  padding: 0.125rem;
-}
-
-._close_15d5j_96:hover {
-    background-color: rgba(100, 100, 100, 0.1);
-  }
-/* opentrons style library */
-
-:root {
-  /* ot brand */
-  --c-mustard: #ffd252;
-  --c-blue: #006cfa;
-  --c-light-blue: hsl(214.08, 100%, 85%);
-
-  /*
-   * grays
-   * TODO(mc, 2019-03-22): align with style guide
-   */
-  --c-near-black: #a4a4a4; /* style guide: n/a */
-  --c-dark-gray: #4a4a4a; /* style guide: near-black */
-  --c-charcoal: #979797;
-  --c-med-gray: #9b9b9b; /* style guide: n/a */
-  --c-light-gray: #e5e2e2; /* style guide: smoke, should be e6e6e6 */
-  --c-lightest-gray: #ededed; /* style guide: n/a */
-
-  /*
-   * background colors
-   * TODO(mc, 2019-03-22): combine with colors
-   */
-  --c-bg-dark: #4a4a4a;
-  --c-bg-light: #fafafa;
-  --c-bg-selected: #f0f3ff;
-  --c-bg-hover: #f1f1f1;
-  --c-bg-success: #b6febc;
-
-  /* general UI */
-  --c-highlight: #5fd8ee;
-  --c-selected-dark: #00c3e6;
-  --c-warning-dark: #9e5e00;
-  --c-warning: #e28200;
-  --c-warning-light: #ffd58f;
-  --c-error-dark: #ac0505;
-  --c-error: #d12929;
-  --c-error-light: #ffc0c0;
-  --c-success: #60b120;
-  --c-blue-enabled: #006cfa;
-  --c-light-grey-hover: #c6c6c6;
-
-  /* Misc */
-  --c-selection-overlay: rgba(95, 216, 238, 0.3);
-  --c-plate-bg: #ccc;
-  --c-white: #fff;
-  --c-black: #000;
-  --c-green: #7ed321;
-  --c-red: #f00000;
-  --c-orange: #f5a623;
-
-  --transition-color: {
-    transition: color 0.15s ease-in-out;
-  }
-
-  --transition-background-color: {
-    transition: background-color 0.15s ease-in-out;
-  }
-}
-
-:root {
-  --c-font-dark: #4a4a4a;
-  --c-font-icon: #6f6f6f;
-  --c-font-light: white;
-  --c-font-disabled: #9c9c9c;
-  --fs-huge: 3rem;
-  --fs-header: 1.125rem;
-  --fs-default: 1rem;
-  --fs-body-2: 0.875rem;
-  --fs-body-1: 0.75rem;
-  --fs-caption: 0.625rem;
-  --fs-tiny: 0.325rem;
-  --fs-micro: 0.2rem;
-  --fw-bold: 800;
-  --fw-semibold: 600;
-  --fw-regular: 400;
-  --fw-light: 300;
-  --ff-code: Consolas, monaco, monospace;
-  --lh-solid: 1;
-  --lh-title: 1.25;
-  --lh-copy: 1.5;
-}
-
-:root {
-  /* borders */
-  --bd-radius-default: 2px;
-  --bd-radius-form-field: 3px;
-  --bd-radius-pill: 12px;
-  --bd-width-default: 1px;
-  --bd-light: var(--bd-width-default) solid var(--c-light-gray);
-
-  /* dropshadows */
-
-  /* TODO: Ian 2018-07-26 consolidate all shadows here (eg from buttons) */
-  --shadow-lvl-1:
-    0 1px 3px 0 rgba(0, 0, 0, 0.1),
-    0 1px 2px 0 rgba(0, 0, 0, 0.2);
-  --shadow-lvl-2:
-    0 3px 6px 0 rgba(0, 0, 0, 0.13),
-    0 3px 6px 0 rgba(0, 0, 0, 0.23);
-}
-
-* {
-  box-sizing: border-box;
-}
-
-:root {
-  --mw-labeled-toggle: 25rem;
-}
-
-/* Toggle Button */
-
-._toggled_on_yhddc_8 {
-  fill: #0ec9eb;
-  color: #0ec9eb;
-}
-
-._toggled_off_yhddc_13 {
-  fill: #4a4a4a;
-  fill: var(--c-dark-gray);
-}
-
-._labeled_control_wrapper_yhddc_17 {
-  width: 100%;
-  padding: 1rem;
-  display: block;
-}
-
-._labeled_control_wrapper_yhddc_17:not(:last-child) {
-    border-bottom: 1px solid #e5e2e2;
-    border-bottom: 1px solid var(--c-light-gray);
-  }
-
-._labeled_control_yhddc_17 {
-  display: block;
-}
-
-._stacked_labeled_control_yhddc_31 {
-  display: block;
-  margin-left: 1rem;
-  margin-top: 0.5rem;
-}
-
-._stacked_labeled_control_label_yhddc_37 {
-  font-size: 0.75rem;
-  font-size: var(--fs-body-1); /* from legacy --font-body-1-dark */
-  color: #4a4a4a;
-  color: var(--c-font-dark); /* from legacy --font-body-1-dark */
-  display: inline-block;
-  font-weight: 600;
-  font-weight: var(--fw-semibold);
-}
-
-._labeled_control_label_yhddc_44 {
-  font-size: 0.75rem;
-  font-size: var(--fs-body-1); /* from legacy --font-body-1-dark */
-  color: #4a4a4a;
-  color: var(--c-font-dark); /* from legacy --font-body-1-dark */
-  max-width: 25rem;
-  max-width: var(--mw-labeled-toggle);
-  display: inline-block;
-  font-weight: 600;
-  font-weight: var(--fw-semibold);
-}
-
-._labeled_toggle_button_yhddc_52 {
-  float: right;
-  width: 2rem;
-  margin-right: 1rem;
-  padding: 0;
-}
-
-._labeled_toggle_button_yhddc_52:hover {
-    background-color: transparent;
-  }
-
-._labeled_button_yhddc_63,
-._labeled_select_yhddc_64 {
-  float: right;
-  width: 9rem;
-  margin-top: 0.5rem;
-}
-
-._labeled_select_yhddc_64 {
-  font-size: 0.875rem;
-  font-size: var(--fs-body-2); /* from legacy --font-body-2-dark */
-  font-weight: 400;
-  font-weight: var(--fw-regular); /* from legacy --font-body-2-dark */
-  color: #4a4a4a;
-  color: var(--c-font-dark); /* from legacy --font-body-2-dark */
-}
-
-._labeled_checkbox_yhddc_76 {
-  float: right;
-}
-
-._stacked_control_info_yhddc_80 {
-  font-size: 0.75rem;
-  font-size: var(--fs-body-1); /* from legacy --font-body-1-dark */
-  font-weight: 400;
-  font-weight: var(--fw-regular); /* from legacy --font-body-1-dark */
-  color: #4a4a4a;
-  color: var(--c-font-dark); /* from legacy --font-body-1-dark */
-}
-
-._stacked_control_info_yhddc_80 > p {
-    margin-top: 0.5rem;
-    margin-bottom: 0;
-    line-height: 1.5;
-  }
-
-._control_info_yhddc_92 {
-  font-size: 0.75rem;
-  font-size: var(--fs-body-1); /* from legacy --font-body-1-dark */
-  font-weight: 400;
-  font-weight: var(--fw-regular); /* from legacy --font-body-1-dark */
-  color: #4a4a4a;
-  color: var(--c-font-dark); /* from legacy --font-body-1-dark */
-  max-width: 25rem;
-  max-width: var(--mw-labeled-toggle);
-}
-
-._control_info_yhddc_92 > p {
-    margin-top: 0.5rem;
-    margin-bottom: 0;
-    line-height: 1.5;
-  }
-/* opentrons style library */
-
-:root {
-  /* ot brand */
-  --c-mustard: #ffd252;
-  --c-blue: #006cfa;
-  --c-light-blue: hsl(214.08, 100%, 85%);
-
-  /*
-   * grays
-   * TODO(mc, 2019-03-22): align with style guide
-   */
-  --c-near-black: #a4a4a4; /* style guide: n/a */
-  --c-dark-gray: #4a4a4a; /* style guide: near-black */
-  --c-charcoal: #979797;
-  --c-med-gray: #9b9b9b; /* style guide: n/a */
-  --c-light-gray: #e5e2e2; /* style guide: smoke, should be e6e6e6 */
-  --c-lightest-gray: #ededed; /* style guide: n/a */
-
-  /*
-   * background colors
-   * TODO(mc, 2019-03-22): combine with colors
-   */
-  --c-bg-dark: #4a4a4a;
-  --c-bg-light: #fafafa;
-  --c-bg-selected: #f0f3ff;
-  --c-bg-hover: #f1f1f1;
-  --c-bg-success: #b6febc;
-
-  /* general UI */
-  --c-highlight: #5fd8ee;
-  --c-selected-dark: #00c3e6;
-  --c-warning-dark: #9e5e00;
-  --c-warning: #e28200;
-  --c-warning-light: #ffd58f;
-  --c-error-dark: #ac0505;
-  --c-error: #d12929;
-  --c-error-light: #ffc0c0;
-  --c-success: #60b120;
-  --c-blue-enabled: #006cfa;
-  --c-light-grey-hover: #c6c6c6;
-
-  /* Misc */
-  --c-selection-overlay: rgba(95, 216, 238, 0.3);
-  --c-plate-bg: #ccc;
-  --c-white: #fff;
-  --c-black: #000;
-  --c-green: #7ed321;
-  --c-red: #f00000;
-  --c-orange: #f5a623;
-
-  --transition-color: {
-    transition: color 0.15s ease-in-out;
-  }
-
-  --transition-background-color: {
-    transition: background-color 0.15s ease-in-out;
-  }
-}
-
-:root {
-  --c-font-dark: #4a4a4a;
-  --c-font-icon: #6f6f6f;
-  --c-font-light: white;
-  --c-font-disabled: #9c9c9c;
-  --fs-huge: 3rem;
-  --fs-header: 1.125rem;
-  --fs-default: 1rem;
-  --fs-body-2: 0.875rem;
-  --fs-body-1: 0.75rem;
-  --fs-caption: 0.625rem;
-  --fs-tiny: 0.325rem;
-  --fs-micro: 0.2rem;
-  --fw-bold: 800;
-  --fw-semibold: 600;
-  --fw-regular: 400;
-  --fw-light: 300;
-  --ff-code: Consolas, monaco, monospace;
-  --lh-solid: 1;
-  --lh-title: 1.25;
-  --lh-copy: 1.5;
-}
-
-:root {
-  /* borders */
-  --bd-radius-default: 2px;
-  --bd-radius-form-field: 3px;
-  --bd-radius-pill: 12px;
-  --bd-width-default: 1px;
-  --bd-light: var(--bd-width-default) solid var(--c-light-gray);
-
-  /* dropshadows */
-
-  /* TODO: Ian 2018-07-26 consolidate all shadows here (eg from buttons) */
-  --shadow-lvl-1:
-    0 1px 3px 0 rgba(0, 0, 0, 0.1),
-    0 1px 2px 0 rgba(0, 0, 0, 0.2);
-  --shadow-lvl-2:
-    0 3px 6px 0 rgba(0, 0, 0, 0.13),
-    0 3px 6px 0 rgba(0, 0, 0, 0.23);
-}
-
-* {
-  box-sizing: border-box;
-}
-
-._accessibly_hidden_18cab_3 {
-  position: absolute;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  height: 1px;
-  width: 1px;
-  margin: -1px;
-  padding: 0;
-  border: 0;
-}
-
-._form_field_18cab_14 {
-  font-size: 0.75rem;
-  font-size: var(--fs-body-1); /* from legacy --font-form-default */
-  font-weight: 400;
-  font-weight: var(--fw-regular); /* from legacy --font-form-default */
-  color: #4a4a4a;
-  color: var(--c-font-dark); /* from legacy --font-form-default */
-  display: flex;
-  align-items: center;
-  line-height: 1;
-}
-
-._label_text_18cab_23 {
-  flex: 0 0 auto;
-  padding: 0 0.5rem;
-}
-
-._label_text_18cab_23:empty {
-    padding: 0;
-  }
-
-._form_group_label_18cab_32 {
-  font-size: 0.75rem;
-  font-size: var(--fs-body-1); /* from legacy --font-form-default */
-  color: #4a4a4a;
-  color: var(--c-font-dark); /* from legacy --font-form-default */
-  font-weight: 600;
-  font-weight: var(--fw-semibold);
-  margin-bottom: 0.15rem;
-  text-transform: capitalize;
-}
-
-._form_group_label_18cab_32::after {
-    content: ':';
-  }
-
-._form_group_label_pipette_settings_slideout_18cab_44 {
-  font-weight: 600;
-  font-weight: var(--fw-semibold);
-  margin-bottom: 0.5rem;
-  text-transform: capitalize;
-  font-size: 13px;
-  color: #16212d;
-}
-
-._checkbox_icon_18cab_52 {
-  /* Icon for radiobutton and for checkbox */
-  width: 1.25rem;
-  min-width: 1.25rem;
-  color: #4a4a4a;
-  color: var(--c-font-dark);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-._checkbox_icon_18cab_52:not(._checkbox_disabled_18cab_61):hover {
-    cursor: pointer;
-  }
-
-._checkbox_icon_18cab_52._error_18cab_65 {
-    color: #9e5e00;
-    color: var(--c-warning-dark);
-  }
-
-._checkbox_icon_18cab_52._checked_18cab_70 {
-  color: #006cfa;
-  color: var(--c-blue);
-}
-
-._toggle_icon_18cab_74 {
-  /* Icon for radiobutton and for checkbox */
-  display: block;
-  width: 2rem;
-  min-width: 2rem;
-  color: #4a4a4a;
-  color: var(--c-font-dark);
-}
-
-._toggle_icon_18cab_74:not(._toggle_disabled_18cab_81):hover {
-    cursor: pointer;
-  }
-
-._dropdown_disabled_18cab_86,
-._checkbox_disabled_18cab_61,
-._toggle_disabled_18cab_81 {
-  opacity: 0.5;
-}
-
-._input_field_container_18cab_92 {
-  width: 100%;
-}
-
-._input_field_18cab_92 {
-  display: flex;
-  flex: 1 1;
-  background-color: #e5e2e2;
-  background-color: var(--c-light-gray);
-  border-radius: 3px;
-  border-radius: var(--bd-radius-form-field);
-  padding: 0.25rem 0.25rem 0.25rem 0.5rem;
-}
-
-._input_field_18cab_92 input {
-    font-size: 0.75rem;
-    font-size: var(--fs-body-1); /* from legacy --font-form-default */
-    font-weight: 400;
-    font-weight: var(--fw-regular); /* from legacy --font-form-default */
-    color: #4a4a4a;
-    color: var(--c-font-dark); /* from legacy --font-form-default */
-    background-color: inherit;
-    border-radius: inherit;
-    border: none;
-    flex: 1 1 auto;
-    width: 100%;
-    height: 1rem;
-
-    /* TODO: Ian 2018-09-14 Firefox has 1px padding on input element,
-    * but I can't figure out how to fix it in Firefox without breaking it in Chrome.
-    * Better CSS reset for inputs needed?
-    */
-
-    /* padding: 1px; */
-  }
-
-._input_field_18cab_92 input:focus {
-    outline: none;
-  }
-
-._input_field_18cab_92 input::placeholder {
-    color: #9b9b9b;
-    color: var(--c-med-gray);
-  }
-
-._input_field_18cab_92:focus-within {
-    background-color: #fff;
-    background-color: var(--c-white);
-    box-shadow: 0 0.125rem 0.25rem 0 rgba(0, 0, 0, 0.5);
-  }
-
-._input_field_18cab_92 ._suffix_18cab_135 {
-    font-size: 0.75rem;
-    font-size: var(--fs-body-1); /* from legacy --font-form-default */
-    color: #4a4a4a;
-    color: var(--c-font-dark); /* from legacy --font-form-default */
-    font-weight: 600;
-    font-weight: var(--fw-semibold);
-    display: inline-block;
-    flex: 1 0;
-    text-align: right;
-    align-self: center;
-  }
-
-._input_caption_18cab_146 {
-  font-size: 0.625rem;
-  font-size: var(--fs-caption); /* from legacy --font-form-caption */
-  font-weight: 600;
-  font-weight: var(--fw-semibold); /* from legacy --font-form-caption */
-  color: #9b9b9b;
-  color: var(--c-med-gray); /* from legacy --font-form-caption */
-  line-height: 1.2;
-}
-
-._input_caption_18cab_146 ._right_18cab_152 {
-    float: right;
-  }
-
-._inline_18cab_157 {
-  display: flex;
-}
-
-._inline_18cab_157 ._label_text_18cab_23 {
-    padding-right: 1.5rem;
-  }
-
-._inline_item_18cab_165 {
-  flex: 1;
-}
-
-._error_18cab_65 div,
-._error_18cab_65 span {
-  color: #9e5e00;
-  color: var(--c-warning-dark);
-}
-
-._error_18cab_65 select,
-._error_18cab_65 ._input_field_18cab_92 {
-  background-color: #ffd58f;
-  background-color: var(--c-warning-light);
-}
-
-._dropdown_18cab_86 {
-  background-color: #e5e2e2;
-  background-color: var(--c-light-gray);
-}
-
-._dropdown_field_18cab_183 {
-  position: relative;
-}
-
-._dropdown_field_18cab_183 select {
-    font-size: 0.75rem;
-    font-size: var(--fs-body-1); /* from legacy --font-form-default */
-    font-weight: 400;
-    font-weight: var(--fw-regular); /* from legacy --font-form-default */
-    color: #4a4a4a;
-    color: var(--c-font-dark); /* from legacy --font-form-default */
-    border: 0;
-    padding: 0.25rem 0.5rem;
-    outline: none;
-    height: 1.5rem;
-    border-radius: 3px;
-    border-radius: var(--bd-radius-form-field);
-    font-family: inherit;
-    width: 100%;
-    -webkit-appearance: none;
-            appearance: none;
-    overflow: hidden;
-  }
-
-._dropdown_field_18cab_183 select:focus {
-      background-color: #fff;
-      background-color: var(--c-white);
-      box-shadow: 0 0.125rem 0.25rem 0 rgba(0, 0, 0, 0.5);
-    }
-
-._dropdown_field_18cab_183 ._dropdown_icon_18cab_206 {
-    position: absolute;
-    top: 0.2rem;
-    right: 0.25rem;
-    width: 1.25rem;
-    pointer-events: none;
-  }
-
-._dropdown_field_18cab_183 ._dropdown_icon_18cab_206 svg {
-      color: #4a4a4a;
-      color: var(--c-dark-gray);
-    }
-
-._error_icon_18cab_219 {
-  display: inline-block;
-  width: 1.5rem;
-  min-width: 1.5rem;
-  padding-right: 0.5rem;
-}
-
-._disabled_18cab_226 {
-  /* Disable mouse interaction. NOTE: User can still tab to focus a field */
-  pointer-events: none;
-}
-
-._disabled_18cab_226 ._form_group_label_18cab_32 {
-    color: #e5e2e2;
-    color: var(--c-light-gray);
-  }
-
-/* stylelint-disable no-descending-specificity */
-
-._disabled_18cab_226 input,
-  ._disabled_18cab_226 ._suffix_18cab_135 {
-    color: #9b9b9b;
-    color: var(--c-med-gray);
-  }
-/* stylelint-disable selector-class-pattern */
-/* opentrons style library */
-:root {
-  /* ot brand */
-  --c-mustard: #ffd252;
-  --c-blue: #006cfa;
-  --c-light-blue: hsl(214.08, 100%, 85%);
-
-  /*
-   * grays
-   * TODO(mc, 2019-03-22): align with style guide
-   */
-  --c-near-black: #a4a4a4; /* style guide: n/a */
-  --c-dark-gray: #4a4a4a; /* style guide: near-black */
-  --c-charcoal: #979797;
-  --c-med-gray: #9b9b9b; /* style guide: n/a */
-  --c-light-gray: #e5e2e2; /* style guide: smoke, should be e6e6e6 */
-  --c-lightest-gray: #ededed; /* style guide: n/a */
-
-  /*
-   * background colors
-   * TODO(mc, 2019-03-22): combine with colors
-   */
-  --c-bg-dark: #4a4a4a;
-  --c-bg-light: #fafafa;
-  --c-bg-selected: #f0f3ff;
-  --c-bg-hover: #f1f1f1;
-  --c-bg-success: #b6febc;
-
-  /* general UI */
-  --c-highlight: #5fd8ee;
-  --c-selected-dark: #00c3e6;
-  --c-warning-dark: #9e5e00;
-  --c-warning: #e28200;
-  --c-warning-light: #ffd58f;
-  --c-error-dark: #ac0505;
-  --c-error: #d12929;
-  --c-error-light: #ffc0c0;
-  --c-success: #60b120;
-  --c-blue-enabled: #006cfa;
-  --c-light-grey-hover: #c6c6c6;
-
-  /* Misc */
-  --c-selection-overlay: rgba(95, 216, 238, 0.3);
-  --c-plate-bg: #ccc;
-  --c-white: #fff;
-  --c-black: #000;
-  --c-green: #7ed321;
-  --c-red: #f00000;
-  --c-orange: #f5a623;
-
-  --transition-color: {
-    transition: color 0.15s ease-in-out;
-  }
-
-  --transition-background-color: {
-    transition: background-color 0.15s ease-in-out;
-  }
-}
-:root {
-  --c-font-dark: #4a4a4a;
-  --c-font-icon: #6f6f6f;
-  --c-font-light: white;
-  --c-font-disabled: #9c9c9c;
-  --fs-huge: 3rem;
-  --fs-header: 1.125rem;
-  --fs-default: 1rem;
-  --fs-body-2: 0.875rem;
-  --fs-body-1: 0.75rem;
-  --fs-caption: 0.625rem;
-  --fs-tiny: 0.325rem;
-  --fs-micro: 0.2rem;
-  --fw-bold: 800;
-  --fw-semibold: 600;
-  --fw-regular: 400;
-  --fw-light: 300;
-  --ff-code: Consolas, monaco, monospace;
-  --lh-solid: 1;
-  --lh-title: 1.25;
-  --lh-copy: 1.5;
-}
-:root {
-  /* borders */
-  --bd-radius-default: 2px;
-  --bd-radius-form-field: 3px;
-  --bd-radius-pill: 12px;
-  --bd-width-default: 1px;
-  --bd-light: var(--bd-width-default) solid var(--c-light-gray);
-
-  /* dropshadows */
-
-  /* TODO: Ian 2018-07-26 consolidate all shadows here (eg from buttons) */
-  --shadow-lvl-1:
-    0 1px 3px 0 rgba(0, 0, 0, 0.1),
-    0 1px 2px 0 rgba(0, 0, 0, 0.2);
-  --shadow-lvl-2:
-    0 3px 6px 0 rgba(0, 0, 0, 0.13),
-    0 3px 6px 0 rgba(0, 0, 0, 0.23);
-}
-* {
-  box-sizing: border-box;
-}
-/* NOTE(mc, 2021-04-27): this class only used by storybook */
-._example_select_override_154j2_5 .ot_select__control {
-    background-color: blue;
-  }
-._select_154j2_11 {
-  position: relative;
-}
-._select_154j2_11 .ot_select__control {
-    font-size: 0.75rem;
-    font-size: var(--fs-body-1); /* from legacy --font-body-1-dark */
-    font-weight: 400;
-    font-weight: var(--fw-regular); /* from legacy --font-body-1-dark */
-    color: #4a4a4a;
-    color: var(--c-font-dark); /* from legacy --font-body-1-dark */
-    display: flex;
-    position: relative;
-    background-color: #e5e2e2;
-    background-color: var(--c-light-gray);
-    border: none;
-    padding: 0.25rem 0;
-    outline: none;
-    border-radius: 3px;
-    border-radius: var(--bd-radius-form-field);
-    height: 1.75rem;
-    box-shadow: none;
-  }
-._select_154j2_11 .ot_select__control--menu-is-open {
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-._select_154j2_11 .ot_select__control--menu-is-open,
-  ._select_154j2_11 .ot_select__control--is-focused {
-    background-color: #fff;
-    background-color: var(--c-white);
-    box-shadow: 0 0.125rem 0.25rem 0 rgba(0, 0, 0, 0.5);
-  }
-._select_154j2_11 .ot_select__option {
-    display: flex;
-    padding: 0.25rem 0.75rem;
-    cursor: default;
-  }
-._select_154j2_11 .ot_select__option--is-focused {
-    background-color: #e5e2e2;
-    background-color: var(--c-light-gray);
-  }
-._select_154j2_11 .ot_select__option--is-disabled {
-    color: #9c9c9c;
-    color: var(--c-font-disabled);
-  }
-._select_154j2_11 .ot_select__group-heading {
-    font-size: 0.625rem;
-    font-size: var(--fs-caption); /* from legacy --font-form-caption */
-    font-weight: 600;
-    font-weight: var(--fw-semibold); /* from legacy --font-form-caption */
-    color: #9b9b9b;
-    color: var(--c-med-gray); /* from legacy --font-form-caption */
-    text-transform: uppercase;
-    margin-left: 0.5rem;
-  }
-._select_154j2_11 .ot_select__single-value {
-    display: flex;
-  }
-._select_154j2_11 .ot_select__group:not(:first-child) {
-    margin-top: 0.25rem;
-    border-top: 1px solid rgba(155, 155, 155, 0.4);
-    padding-top: 0.25rem;
-  }
-._dropdown_indicator_154j2_73 {
-  position: absolute;
-  top: 0.25rem;
-  right: 0.25rem;
-  width: 1.25rem;
-  pointer-events: none;
-}
-._dropdown_indicator_154j2_73 > svg {
-    color: #4a4a4a;
-    color: var(--c-dark-gray);
-  }
-._dropdown_indicator_154j2_73._flipped_154j2_84 > svg {
-    transform: rotate(180deg);
-  }
-._dropdown_indicator_icon_154j2_89 {
-  width: 100%;
-}
-._menu_154j2_93 {
-  font-size: 0.75rem;
-  font-size: var(--fs-body-1); /* from legacy --font-body-1-dark */
-  font-weight: 400;
-  font-weight: var(--fw-regular); /* from legacy --font-body-1-dark */
-  color: #4a4a4a;
-  color: var(--c-font-dark); /* from legacy --font-body-1-dark */
-  position: absolute;
-  top: 100%;
-  left: 0;
-  right: 0;
-  z-index: 99;
-  background-color: #fff;
-  background-color: var(--c-white);
-  box-shadow: 0 0.125rem 0.25rem 0 rgba(0, 0, 0, 0.5);
-  border-bottom-left-radius: 3px;
-  border-bottom-left-radius: var(--bd-radius-form-field);
-  border-bottom-right-radius: 3px;
-  border-bottom-right-radius: var(--bd-radius-form-field);
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
-}
-._menu_control_bridge_154j2_110 {
-  position: absolute;
-  background-color: #fff;
-  background-color: var(--c-white);
-  top: calc(100% - 2px);
-  left: 0;
-  right: 0;
-  z-index: 99;
-  height: 4px;
-}
-/* opentrons style library */
-
-:root {
-  /* ot brand */
-  --c-mustard: #ffd252;
-  --c-blue: #006cfa;
-  --c-light-blue: hsl(214.08, 100%, 85%);
-
-  /*
-   * grays
-   * TODO(mc, 2019-03-22): align with style guide
-   */
-  --c-near-black: #a4a4a4; /* style guide: n/a */
-  --c-dark-gray: #4a4a4a; /* style guide: near-black */
-  --c-charcoal: #979797;
-  --c-med-gray: #9b9b9b; /* style guide: n/a */
-  --c-light-gray: #e5e2e2; /* style guide: smoke, should be e6e6e6 */
-  --c-lightest-gray: #ededed; /* style guide: n/a */
-
-  /*
-   * background colors
-   * TODO(mc, 2019-03-22): combine with colors
-   */
-  --c-bg-dark: #4a4a4a;
-  --c-bg-light: #fafafa;
-  --c-bg-selected: #f0f3ff;
-  --c-bg-hover: #f1f1f1;
-  --c-bg-success: #b6febc;
-
-  /* general UI */
-  --c-highlight: #5fd8ee;
-  --c-selected-dark: #00c3e6;
-  --c-warning-dark: #9e5e00;
-  --c-warning: #e28200;
-  --c-warning-light: #ffd58f;
-  --c-error-dark: #ac0505;
-  --c-error: #d12929;
-  --c-error-light: #ffc0c0;
-  --c-success: #60b120;
-  --c-blue-enabled: #006cfa;
-  --c-light-grey-hover: #c6c6c6;
-
-  /* Misc */
-  --c-selection-overlay: rgba(95, 216, 238, 0.3);
-  --c-plate-bg: #ccc;
-  --c-white: #fff;
-  --c-black: #000;
-  --c-green: #7ed321;
-  --c-red: #f00000;
-  --c-orange: #f5a623;
-
-  --transition-color: {
-    transition: color 0.15s ease-in-out;
-  }
-
-  --transition-background-color: {
-    transition: background-color 0.15s ease-in-out;
-  }
-}
-
-:root {
-  --c-font-dark: #4a4a4a;
-  --c-font-icon: #6f6f6f;
-  --c-font-light: white;
-  --c-font-disabled: #9c9c9c;
-  --fs-huge: 3rem;
-  --fs-header: 1.125rem;
-  --fs-default: 1rem;
-  --fs-body-2: 0.875rem;
-  --fs-body-1: 0.75rem;
-  --fs-caption: 0.625rem;
-  --fs-tiny: 0.325rem;
-  --fs-micro: 0.2rem;
-  --fw-bold: 800;
-  --fw-semibold: 600;
-  --fw-regular: 400;
-  --fw-light: 300;
-  --ff-code: Consolas, monaco, monospace;
-  --lh-solid: 1;
-  --lh-title: 1.25;
-  --lh-copy: 1.5;
-}
-
-:root {
-  /* borders */
-  --bd-radius-default: 2px;
-  --bd-radius-form-field: 3px;
-  --bd-radius-pill: 12px;
-  --bd-width-default: 1px;
-  --bd-light: var(--bd-width-default) solid var(--c-light-gray);
-
-  /* dropshadows */
-
-  /* TODO: Ian 2018-07-26 consolidate all shadows here (eg from buttons) */
-  --shadow-lvl-1:
-    0 1px 3px 0 rgba(0, 0, 0, 0.1),
-    0 1px 2px 0 rgba(0, 0, 0, 0.2);
-  --shadow-lvl-2:
-    0 3px 6px 0 rgba(0, 0, 0, 0.13),
-    0 3px 6px 0 rgba(0, 0, 0, 0.23);
-}
-
-* {
-  box-sizing: border-box;
-}
-
-._select_field_10v6n_3._error_10v6n_3 .ot_select__control {
-    background-color: #ffd58f;
-    background-color: var(--c-warning-light);
-  }
-
-._select_caption_10v6n_9 {
-  font-size: 0.625rem;
-  font-size: var(--fs-caption);
-}
-
-._select_caption_10v6n_9._error_10v6n_3 {
-    color: #9e5e00;
-    color: var(--c-warning-dark);
-    font-weight: 600;
-    font-weight: var(--fw-semibold);
-  }
-/* opentrons style library */
-
-:root {
-  /* ot brand */
-  --c-mustard: #ffd252;
-  --c-blue: #006cfa;
-  --c-light-blue: hsl(214.08, 100%, 85%);
-
-  /*
-   * grays
-   * TODO(mc, 2019-03-22): align with style guide
-   */
-  --c-near-black: #a4a4a4; /* style guide: n/a */
-  --c-dark-gray: #4a4a4a; /* style guide: near-black */
-  --c-charcoal: #979797;
-  --c-med-gray: #9b9b9b; /* style guide: n/a */
-  --c-light-gray: #e5e2e2; /* style guide: smoke, should be e6e6e6 */
-  --c-lightest-gray: #ededed; /* style guide: n/a */
-
-  /*
-   * background colors
-   * TODO(mc, 2019-03-22): combine with colors
-   */
-  --c-bg-dark: #4a4a4a;
-  --c-bg-light: #fafafa;
-  --c-bg-selected: #f0f3ff;
-  --c-bg-hover: #f1f1f1;
-  --c-bg-success: #b6febc;
-
-  /* general UI */
-  --c-highlight: #5fd8ee;
-  --c-selected-dark: #00c3e6;
-  --c-warning-dark: #9e5e00;
-  --c-warning: #e28200;
-  --c-warning-light: #ffd58f;
-  --c-error-dark: #ac0505;
-  --c-error: #d12929;
-  --c-error-light: #ffc0c0;
-  --c-success: #60b120;
-  --c-blue-enabled: #006cfa;
-  --c-light-grey-hover: #c6c6c6;
-
-  /* Misc */
-  --c-selection-overlay: rgba(95, 216, 238, 0.3);
-  --c-plate-bg: #ccc;
-  --c-white: #fff;
-  --c-black: #000;
-  --c-green: #7ed321;
-  --c-red: #f00000;
-  --c-orange: #f5a623;
-
-  --transition-color: {
-    transition: color 0.15s ease-in-out;
-  }
-
-  --transition-background-color: {
-    transition: background-color 0.15s ease-in-out;
-  }
-}
-
-:root {
-  --c-font-dark: #4a4a4a;
-  --c-font-icon: #6f6f6f;
-  --c-font-light: white;
-  --c-font-disabled: #9c9c9c;
-  --fs-huge: 3rem;
-  --fs-header: 1.125rem;
-  --fs-default: 1rem;
-  --fs-body-2: 0.875rem;
-  --fs-body-1: 0.75rem;
-  --fs-caption: 0.625rem;
-  --fs-tiny: 0.325rem;
-  --fs-micro: 0.2rem;
-  --fw-bold: 800;
-  --fw-semibold: 600;
-  --fw-regular: 400;
-  --fw-light: 300;
-  --ff-code: Consolas, monaco, monospace;
-  --lh-solid: 1;
-  --lh-title: 1.25;
-  --lh-copy: 1.5;
-}
-
-:root {
-  /* borders */
-  --bd-radius-default: 2px;
-  --bd-radius-form-field: 3px;
-  --bd-radius-pill: 12px;
-  --bd-width-default: 1px;
-  --bd-light: var(--bd-width-default) solid var(--c-light-gray);
-
-  /* dropshadows */
-
-  /* TODO: Ian 2018-07-26 consolidate all shadows here (eg from buttons) */
-  --shadow-lvl-1:
-    0 1px 3px 0 rgba(0, 0, 0, 0.1),
-    0 1px 2px 0 rgba(0, 0, 0, 0.2);
-  --shadow-lvl-2:
-    0 3px 6px 0 rgba(0, 0, 0, 0.13),
-    0 3px 6px 0 rgba(0, 0, 0, 0.23);
-}
-
-* {
-  box-sizing: border-box;
-}
-
-._name_overlay_lyt13_3 {
-  width: 100%;
-  font-size: 0.5rem;
-  color: white;
-  color: var(--c-font-light);
-  background-color: rgba(0, 0, 0, 0.75);
-  padding: 0.25rem;
-  border-radius: 0 0 0.5rem 0.5rem;
-}
-
-._display_name_lyt13_12 {
-  font-weight: 600;
-  font-weight: var(--fw-semibold);
-  color: white;
-  color: var(--c-font-light);
-  word-wrap: break-word;
-}
-
-._deck_slot_lyt13_18:active {
-  cursor: grabbing;
-}/* opentrons style library */
-
-:root {
-  /* ot brand */
-  --c-mustard: #ffd252;
-  --c-blue: #006cfa;
-  --c-light-blue: hsl(214.08, 100%, 85%);
-
-  /*
-   * grays
-   * TODO(mc, 2019-03-22): align with style guide
-   */
-  --c-near-black: #a4a4a4; /* style guide: n/a */
-  --c-dark-gray: #4a4a4a; /* style guide: near-black */
-  --c-charcoal: #979797;
-  --c-med-gray: #9b9b9b; /* style guide: n/a */
-  --c-light-gray: #e5e2e2; /* style guide: smoke, should be e6e6e6 */
-  --c-lightest-gray: #ededed; /* style guide: n/a */
-
-  /*
-   * background colors
-   * TODO(mc, 2019-03-22): combine with colors
-   */
-  --c-bg-dark: #4a4a4a;
-  --c-bg-light: #fafafa;
-  --c-bg-selected: #f0f3ff;
-  --c-bg-hover: #f1f1f1;
-  --c-bg-success: #b6febc;
-
-  /* general UI */
-  --c-highlight: #5fd8ee;
-  --c-selected-dark: #00c3e6;
-  --c-warning-dark: #9e5e00;
-  --c-warning: #e28200;
-  --c-warning-light: #ffd58f;
-  --c-error-dark: #ac0505;
-  --c-error: #d12929;
-  --c-error-light: #ffc0c0;
-  --c-success: #60b120;
-  --c-blue-enabled: #006cfa;
-  --c-light-grey-hover: #c6c6c6;
-
-  /* Misc */
-  --c-selection-overlay: rgba(95, 216, 238, 0.3);
-  --c-plate-bg: #ccc;
-  --c-white: #fff;
-  --c-black: #000;
-  --c-green: #7ed321;
-  --c-red: #f00000;
-  --c-orange: #f5a623;
-
-  --transition-color: {
-    transition: color 0.15s ease-in-out;
-  }
-
-  --transition-background-color: {
-    transition: background-color 0.15s ease-in-out;
-  }
-}
-
-:root {
-  --c-font-dark: #4a4a4a;
-  --c-font-icon: #6f6f6f;
-  --c-font-light: white;
-  --c-font-disabled: #9c9c9c;
-  --fs-huge: 3rem;
-  --fs-header: 1.125rem;
-  --fs-default: 1rem;
-  --fs-body-2: 0.875rem;
-  --fs-body-1: 0.75rem;
-  --fs-caption: 0.625rem;
-  --fs-tiny: 0.325rem;
-  --fs-micro: 0.2rem;
-  --fw-bold: 800;
-  --fw-semibold: 600;
-  --fw-regular: 400;
-  --fw-light: 300;
-  --ff-code: Consolas, monaco, monospace;
-  --lh-solid: 1;
-  --lh-title: 1.25;
-  --lh-copy: 1.5;
-}
-
-:root {
-  /* borders */
-  --bd-radius-default: 2px;
-  --bd-radius-form-field: 3px;
-  --bd-radius-pill: 12px;
-  --bd-width-default: 1px;
-  --bd-light: var(--bd-width-default) solid var(--c-light-gray);
-
-  /* dropshadows */
-
-  /* TODO: Ian 2018-07-26 consolidate all shadows here (eg from buttons) */
-  --shadow-lvl-1:
-    0 1px 3px 0 rgba(0, 0, 0, 0.1),
-    0 1px 2px 0 rgba(0, 0, 0, 0.2);
-  --shadow-lvl-2:
-    0 3px 6px 0 rgba(0, 0, 0, 0.13),
-    0 3px 6px 0 rgba(0, 0, 0, 0.23);
-}
-
-* {
-  box-sizing: border-box;
-}
-
-._module_18o7c_3 {
-  color: #000;
-  color: var(--c-black);
-  background-color: #000;
-  background-color: var(--c-black);
-  opacity: 0.9;
-  border-radius: 6px;
-  width: 100%;
-  height: 100%;
-  display: flex;
-}
-
-._module_review_icon_18o7c_13 {
-  color: #fff;
-  color: var(--c-white);
-  margin: 0 0.25rem 0 0;
-  height: 12px;
-  width: 12px;
-}
-
-._module_review_icon_missing_18o7c_20 {
-  color: #f00000;
-  color: var(--c-red);
-}
-
-._module_review_icon_present_18o7c_24 {
-  color: #7ed321;
-  color: var(--c-green);
-}
-
-._module_review_text_18o7c_28 {
-  fill: currentColor;
-  font-size: 0.55rem;
-  font-weight: 600;
-  font-weight: var(--fw-semibold);
-  color: #fff;
-  color: var(--c-white);
-  text-transform: capitalize;
-  white-space: pre;
-  margin-bottom: 0.75rem;
-}
-
-._module_name_overlay_18o7c_38 {
-  color: #000;
-  color: var(--c-black);
-  opacity: 0.7;
-}
-
-._module_connect_info_wrapper_18o7c_43 {
-  display: flex;
-  flex-direction: row;
-  font-size: 0.5rem;
-  color: #fff;
-  color: var(--c-white);
-}
-
-._module_port_text_18o7c_50 {
-  fill: currentColor;
-  color: #fff;
-  color: var(--c-white);
-  font-size: 0.65rem;
-  font-weight: 600;
-  font-weight: var(--fw-semibold);
-  text-transform: uppercase;
-}
-
-._module_port_text_na_18o7c_58 {
-  fill: currentColor;
-  color: #9b9b9b;
-  color: var(--c-med-gray);
-  font-size: 0.65rem;
-  font-weight: 600;
-  font-weight: var(--fw-semibold);
-  text-transform: uppercase;
-}
-
-._module_wrapper_18o7c_66 {
-  display: flex;
-  width: 100%;
-  padding: 1.15rem;
-  justify-content: center;
-  flex-direction: column;
-  align-items: flex-end;
-}
-
-._flipped_module_wrapper_18o7c_75 {
-  display: flex;
-  width: 100%;
-  padding: 1.15rem;
-  justify-content: center;
-  flex-direction: column;
-  align-items: flex-start;
-}
-
-._module_name_text_18o7c_84 {
-  fill: currentColor;
-  color: #fff;
-  color: var(--c-white);
-  font-size: 0.5rem;
-  font-weight: 600;
-  font-weight: var(--fw-semibold);
-  text-transform: uppercase;
-}
-
-._flipped_18o7c_75 {
-  transform: rotate(180deg);
-}
-
-._right_icon_18o7c_96 {
-  margin: 0 0 0 1rem;
-}/* opentrons style library */
-
-:root {
-  /* ot brand */
-  --c-mustard: #ffd252;
-  --c-blue: #006cfa;
-  --c-light-blue: hsl(214.08, 100%, 85%);
-
-  /*
-   * grays
-   * TODO(mc, 2019-03-22): align with style guide
-   */
-  --c-near-black: #a4a4a4; /* style guide: n/a */
-  --c-dark-gray: #4a4a4a; /* style guide: near-black */
-  --c-charcoal: #979797;
-  --c-med-gray: #9b9b9b; /* style guide: n/a */
-  --c-light-gray: #e5e2e2; /* style guide: smoke, should be e6e6e6 */
-  --c-lightest-gray: #ededed; /* style guide: n/a */
-
-  /*
-   * background colors
-   * TODO(mc, 2019-03-22): combine with colors
-   */
-  --c-bg-dark: #4a4a4a;
-  --c-bg-light: #fafafa;
-  --c-bg-selected: #f0f3ff;
-  --c-bg-hover: #f1f1f1;
-  --c-bg-success: #b6febc;
-
-  /* general UI */
-  --c-highlight: #5fd8ee;
-  --c-selected-dark: #00c3e6;
-  --c-warning-dark: #9e5e00;
-  --c-warning: #e28200;
-  --c-warning-light: #ffd58f;
-  --c-error-dark: #ac0505;
-  --c-error: #d12929;
-  --c-error-light: #ffc0c0;
-  --c-success: #60b120;
-  --c-blue-enabled: #006cfa;
-  --c-light-grey-hover: #c6c6c6;
-
-  /* Misc */
-  --c-selection-overlay: rgba(95, 216, 238, 0.3);
-  --c-plate-bg: #ccc;
-  --c-white: #fff;
-  --c-black: #000;
-  --c-green: #7ed321;
-  --c-red: #f00000;
-  --c-orange: #f5a623;
-
-  --transition-color: {
-    transition: color 0.15s ease-in-out;
-  }
-
-  --transition-background-color: {
-    transition: background-color 0.15s ease-in-out;
-  }
-}
-
-:root {
-  --c-font-dark: #4a4a4a;
-  --c-font-icon: #6f6f6f;
-  --c-font-light: white;
-  --c-font-disabled: #9c9c9c;
-  --fs-huge: 3rem;
-  --fs-header: 1.125rem;
-  --fs-default: 1rem;
-  --fs-body-2: 0.875rem;
-  --fs-body-1: 0.75rem;
-  --fs-caption: 0.625rem;
-  --fs-tiny: 0.325rem;
-  --fs-micro: 0.2rem;
-  --fw-bold: 800;
-  --fw-semibold: 600;
-  --fw-regular: 400;
-  --fw-light: 300;
-  --ff-code: Consolas, monaco, monospace;
-  --lh-solid: 1;
-  --lh-title: 1.25;
-  --lh-copy: 1.5;
-}
-
-:root {
-  /* borders */
-  --bd-radius-default: 2px;
-  --bd-radius-form-field: 3px;
-  --bd-radius-pill: 12px;
-  --bd-width-default: 1px;
-  --bd-light: var(--bd-width-default) solid var(--c-light-gray);
-
-  /* dropshadows */
-
-  /* TODO: Ian 2018-07-26 consolidate all shadows here (eg from buttons) */
-  --shadow-lvl-1:
-    0 1px 3px 0 rgba(0, 0, 0, 0.1),
-    0 1px 2px 0 rgba(0, 0, 0, 0.2);
-  --shadow-lvl-2:
-    0 3px 6px 0 rgba(0, 0, 0, 0.13),
-    0 3px 6px 0 rgba(0, 0, 0, 0.23);
-}
-
-* {
-  box-sizing: border-box;
-}
-
-._pipette_group_df8d3_3 {
-  margin: 0 auto;
-  max-width: 46rem;
-  padding-bottom: 2rem;
-  display: grid;
-  grid-template-columns: 50% 50%;
-  grid-template-areas: 'left right';
-}
-
-._right_df8d3_12 {
-  grid-area: right;
-  grid-template-columns: 40% 80%;
-  grid-template-areas: 'img info';
-}
-
-._pipette_info_df8d3_18 {
-  grid-area: info;
-  min-height: 8rem;
-}
-
-._flipped_image_df8d3_23 {
-  transform: scaleX(-1);
-  filter: FlipH;
-}
-
-._pipette_icon_df8d3_28 {
-  grid-area: img;
-  text-align: center;
-}
-
-._title_df8d3_33 {
-  font-size: 0.875rem;
-  font-size: var(--fs-body-2);
-  font-weight: 600;
-  font-weight: var(--fw-semibold);
-  color: #4a4a4a;
-  color: var(--c-font-dark);
-  text-transform: capitalize;
-  margin: 2rem 0 0.25rem;
-}
-
-._value_df8d3_41 {
-  font-size: 0.875rem;
-  font-size: var(--fs-body-2); /* from legacy --font-body-2-dark */
-  font-weight: 400;
-  font-weight: var(--fw-regular); /* from legacy --font-body-2-dark */
-  color: #4a4a4a;
-  color: var(--c-font-dark); /* from legacy --font-body-2-dark */
-}
-._pipette_volume_class_1eicr_1 {
-  cursor: default;
-  min-width: 3.5rem;
-}
-
-._pipette_channels_1eicr_6 {
-  cursor: default;
-  min-width: 7rem;
-}
-
-._pipette_category_1eicr_11 {
-  cursor: default;
-  min-width: 2.5rem;
-}
-/* opentrons style library */
-
-:root {
-  /* ot brand */
-  --c-mustard: #ffd252;
-  --c-blue: #006cfa;
-  --c-light-blue: hsl(214.08, 100%, 85%);
-
-  /*
-   * grays
-   * TODO(mc, 2019-03-22): align with style guide
-   */
-  --c-near-black: #a4a4a4; /* style guide: n/a */
-  --c-dark-gray: #4a4a4a; /* style guide: near-black */
-  --c-charcoal: #979797;
-  --c-med-gray: #9b9b9b; /* style guide: n/a */
-  --c-light-gray: #e5e2e2; /* style guide: smoke, should be e6e6e6 */
-  --c-lightest-gray: #ededed; /* style guide: n/a */
-
-  /*
-   * background colors
-   * TODO(mc, 2019-03-22): combine with colors
-   */
-  --c-bg-dark: #4a4a4a;
-  --c-bg-light: #fafafa;
-  --c-bg-selected: #f0f3ff;
-  --c-bg-hover: #f1f1f1;
-  --c-bg-success: #b6febc;
-
-  /* general UI */
-  --c-highlight: #5fd8ee;
-  --c-selected-dark: #00c3e6;
-  --c-warning-dark: #9e5e00;
-  --c-warning: #e28200;
-  --c-warning-light: #ffd58f;
-  --c-error-dark: #ac0505;
-  --c-error: #d12929;
-  --c-error-light: #ffc0c0;
-  --c-success: #60b120;
-  --c-blue-enabled: #006cfa;
-  --c-light-grey-hover: #c6c6c6;
-
-  /* Misc */
-  --c-selection-overlay: rgba(95, 216, 238, 0.3);
-  --c-plate-bg: #ccc;
-  --c-white: #fff;
-  --c-black: #000;
-  --c-green: #7ed321;
-  --c-red: #f00000;
-  --c-orange: #f5a623;
-
-  --transition-color: {
-    transition: color 0.15s ease-in-out;
-  }
-
-  --transition-background-color: {
-    transition: background-color 0.15s ease-in-out;
-  }
-}
-
-:root {
-  --c-font-dark: #4a4a4a;
-  --c-font-icon: #6f6f6f;
-  --c-font-light: white;
-  --c-font-disabled: #9c9c9c;
-  --fs-huge: 3rem;
-  --fs-header: 1.125rem;
-  --fs-default: 1rem;
-  --fs-body-2: 0.875rem;
-  --fs-body-1: 0.75rem;
-  --fs-caption: 0.625rem;
-  --fs-tiny: 0.325rem;
-  --fs-micro: 0.2rem;
-  --fw-bold: 800;
-  --fw-semibold: 600;
-  --fw-regular: 400;
-  --fw-light: 300;
-  --ff-code: Consolas, monaco, monospace;
-  --lh-solid: 1;
-  --lh-title: 1.25;
-  --lh-copy: 1.5;
-}
-
-:root {
-  /* borders */
-  --bd-radius-default: 2px;
-  --bd-radius-form-field: 3px;
-  --bd-radius-pill: 12px;
-  --bd-width-default: 1px;
-  --bd-light: var(--bd-width-default) solid var(--c-light-gray);
-
-  /* dropshadows */
-
-  /* TODO: Ian 2018-07-26 consolidate all shadows here (eg from buttons) */
-  --shadow-lvl-1:
-    0 1px 3px 0 rgba(0, 0, 0, 0.1),
-    0 1px 2px 0 rgba(0, 0, 0, 0.2);
-  --shadow-lvl-2:
-    0 3px 6px 0 rgba(0, 0, 0, 0.13),
-    0 3px 6px 0 rgba(0, 0, 0, 0.23);
-}
-
-* {
-  box-sizing: border-box;
-}
-
-:root {
-  --list-padding-large: 1rem;
-  --list-padding-small: 0.75rem;
-}
-
-._clickable_1842h_8 {
-  cursor: pointer;
-}
-
-._disabled_1842h_12 {
-  background-color: transparent;
-}
-
-._disabled_1842h_12 * {
-    color: #9c9c9c;
-    color: var(--c-font-disabled);
-    outline-color: #eee;
-    fill: #9c9c9c;
-    fill: var(--c-font-disabled);
-    background-color: transparent;
-  }
-
-._panel_group_1842h_23,
-._titled_list_1842h_24,
-._list_item_1842h_25 {
-  background-color: white;
-}
-
-._panel_group_1842h_23 {
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.33);
-}
-
-._hover_border_1842h_33 {
-  outline: 1px solid #5fd8ee;
-  outline: var(--bd-width-default) solid var(--c-highlight);
-}
-
-._header_text_1842h_37 {
-  text-transform: uppercase;
-  font-size: 0.625rem;
-  font-size: var(--fs-caption);
-  font-weight: 600;
-  font-weight: var(--fw-semibold);
-  color: #9c9c9c;
-  color: var(--c-font-disabled);
-}
-
-/*
-  TODO(IL, 2021-07-30): when consumers of this class are migrated to CSS-in-JS, keep in mind
-  the meaning of .title_bar is vague, it is widely used by several unrelated components.
-  Also, it's almost the same as .titled_list_title_bar -- they are the same
-  except for flex-related rules.
-*/
-
-._title_bar_1842h_46 {
-  position: relative;
-  display: flex;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  padding: 1rem 0.75rem;
-  padding: var(--list-padding-large) var(--list-padding-small);
-  flex-direction: column;
-}
-
-/* Specifically for TitledList */
-
-._titled_list_title_bar_1842h_47 {
-  position: relative;
-  display: flex;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  padding: 1rem 0.75rem;
-  padding: var(--list-padding-large) var(--list-padding-small);
-  flex-direction: row;
-  align-items: center;
-}
-
-._titled_list_selected_1842h_68 ._title_bar_1842h_46 {
-    background-color: #f0f3ff;
-    background-color: var(--c-bg-selected);
-  }
-
-._titled_list_selected_1842h_68 ._title_bar_1842h_46 * {
-      color: #00c3e6;
-      color: var(--c-selected-dark);
-      font-weight: 600;
-      font-weight: var(--fw-semibold);
-    }
-
-._title_1842h_24 {
-  font-size: 0.875rem;
-  font-size: var(--fs-body-2);
-  font-weight: 400;
-  font-weight: var(--fw-regular);
-  margin: 0;
-  text-transform: uppercase;
-}
-
-._title_enabled_1842h_86 {
-  color: #4a4a4a;
-  color: var(--c-font-dark);
-}
-
-._title_disabled_1842h_90 {
-  color: #9c9c9c;
-  color: var(--c-font-disabled);
-}
-
-._title_bar_icon_1842h_94 {
-  color: #4a4a4a;
-  color: var(--c-font-dark);
-  height: 1.5rem;
-}
-
-._title_bar_error_1842h_99 {
-  background-color: #ffc0c0;
-  background-color: var(--c-error-light);
-}
-
-._icon_left_of_title_1842h_103 {
-  margin-right: 0.5rem;
-  height: 1.2rem;
-}
-
-._icon_left_of_title_container_1842h_108 {
-  display: flex;
-  justify-content: flex-start;
-}
-
-._title_bar_carat_1842h_113 {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  padding: calc(0.75rem - 1px);
-  padding: calc(var(--list-padding-small) - var(--bd-width-default));
-  padding-top: 1rem;
-}
-
-._title_bar_carat_1842h_113:hover {
-    background-color: rgba(0, 0, 0, 0.05);
-  }
-
-._list_1842h_25 {
-  list-style-type: none;
-  padding-left: 0;
-  margin: 0;
-}
-
-._list_item_1842h_25 {
-  font-size: 0.75rem;
-  font-size: var(--fs-body-1); /* from legacy --font-body-1-dark */
-  font-weight: 400;
-  font-weight: var(--fw-regular); /* from legacy --font-body-1-dark */
-  color: #4a4a4a;
-  color: var(--c-font-dark); /* from legacy --font-body-1-dark */
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  width: 100%;
-  line-height: 1.25;
-  margin: 0;
-  padding: 0.75rem;
-  padding: var(--list-padding-small);
-}
-
-._list_item_1842h_25:hover {
-    background-color: #f1f1f1;
-    background-color: var(--c-bg-hover);
-  }
-
-._list_item_1842h_25._active_1842h_148 {
-    background-color: #f0f3ff;
-    background-color: var(--c-bg-selected);
-  }
-
-a._list_item_1842h_25 {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-._list_alert_1842h_157 {
-  font-size: 0.75rem;
-  font-size: var(--fs-body-1); /* from legacy --font-body-1-dark */
-  font-weight: 400;
-  font-weight: var(--fw-regular); /* from legacy --font-body-1-dark */
-  color: #4a4a4a;
-  color: var(--c-font-dark); /* from legacy --font-body-1-dark */
-  width: 100%;
-  padding: 0.75rem;
-  padding: var(--list-padding-small);
-  background-color: #fafafa;
-  background-color: var(--c-bg-light);
-  font-style: italic;
-}
-
-._item_icon_1842h_167 {
-  flex: none;
-  height: calc(1.25 * 0.75rem);
-  height: calc(1.25 * var(--fs-body-1));
-  margin-right: 0.5rem;
-}
-/* opentrons style library */
-
-:root {
-  /* ot brand */
-  --c-mustard: #ffd252;
-  --c-blue: #006cfa;
-  --c-light-blue: hsl(214.08, 100%, 85%);
-
-  /*
-   * grays
-   * TODO(mc, 2019-03-22): align with style guide
-   */
-  --c-near-black: #a4a4a4; /* style guide: n/a */
-  --c-dark-gray: #4a4a4a; /* style guide: near-black */
-  --c-charcoal: #979797;
-  --c-med-gray: #9b9b9b; /* style guide: n/a */
-  --c-light-gray: #e5e2e2; /* style guide: smoke, should be e6e6e6 */
-  --c-lightest-gray: #ededed; /* style guide: n/a */
-
-  /*
-   * background colors
-   * TODO(mc, 2019-03-22): combine with colors
-   */
-  --c-bg-dark: #4a4a4a;
-  --c-bg-light: #fafafa;
-  --c-bg-selected: #f0f3ff;
-  --c-bg-hover: #f1f1f1;
-  --c-bg-success: #b6febc;
-
-  /* general UI */
-  --c-highlight: #5fd8ee;
-  --c-selected-dark: #00c3e6;
-  --c-warning-dark: #9e5e00;
-  --c-warning: #e28200;
-  --c-warning-light: #ffd58f;
-  --c-error-dark: #ac0505;
-  --c-error: #d12929;
-  --c-error-light: #ffc0c0;
-  --c-success: #60b120;
-  --c-blue-enabled: #006cfa;
-  --c-light-grey-hover: #c6c6c6;
-
-  /* Misc */
-  --c-selection-overlay: rgba(95, 216, 238, 0.3);
-  --c-plate-bg: #ccc;
-  --c-white: #fff;
-  --c-black: #000;
-  --c-green: #7ed321;
-  --c-red: #f00000;
-  --c-orange: #f5a623;
-
-  --transition-color: {
-    transition: color 0.15s ease-in-out;
-  }
-
-  --transition-background-color: {
-    transition: background-color 0.15s ease-in-out;
-  }
-}
-
-:root {
-  --c-font-dark: #4a4a4a;
-  --c-font-icon: #6f6f6f;
-  --c-font-light: white;
-  --c-font-disabled: #9c9c9c;
-  --fs-huge: 3rem;
-  --fs-header: 1.125rem;
-  --fs-default: 1rem;
-  --fs-body-2: 0.875rem;
-  --fs-body-1: 0.75rem;
-  --fs-caption: 0.625rem;
-  --fs-tiny: 0.325rem;
-  --fs-micro: 0.2rem;
-  --fw-bold: 800;
-  --fw-semibold: 600;
-  --fw-regular: 400;
-  --fw-light: 300;
-  --ff-code: Consolas, monaco, monospace;
-  --lh-solid: 1;
-  --lh-title: 1.25;
-  --lh-copy: 1.5;
-}
-
-:root {
-  /* borders */
-  --bd-radius-default: 2px;
-  --bd-radius-form-field: 3px;
-  --bd-radius-pill: 12px;
-  --bd-width-default: 1px;
-  --bd-light: var(--bd-width-default) solid var(--c-light-gray);
-
-  /* dropshadows */
-
-  /* TODO: Ian 2018-07-26 consolidate all shadows here (eg from buttons) */
-  --shadow-lvl-1:
-    0 1px 3px 0 rgba(0, 0, 0, 0.1),
-    0 1px 2px 0 rgba(0, 0, 0, 0.2);
-  --shadow-lvl-2:
-    0 3px 6px 0 rgba(0, 0, 0, 0.13),
-    0 3px 6px 0 rgba(0, 0, 0, 0.23);
-}
-
-* {
-  box-sizing: border-box;
-}
-
-:root {
-  --sidebar-width: 18.25rem;
-}
-
-._panel_6dvfp_7 {
-  flex-shrink: 0;
-  overflow: visible;
-  border-right: 1px solid #e5e2e2;
-  border-right: var(--bd-light);
-  background-color: #fafafa;
-  background-color: var(--c-bg-light);
-  position: relative;
-  padding: 0 4px;
-}
-
-._title_bar_6dvfp_16 {
-  display: flex;
-  align-items: center;
-  width: 18.25rem;
-  width: var(--sidebar-width);
-}
-
-._title_6dvfp_16 {
-  font-size: 1.125rem;
-  font-size: var(--fs-header); /* from legacy --font-header-dark */
-  font-weight: 600;
-  font-weight: var(--fw-semibold); /* from legacy --font-header-dark */
-  color: #4a4a4a;
-  color: var(--c-font-dark); /* from legacy --font-header-dark */
-  margin: 1rem auto;
-}
-
-._panel_contents_6dvfp_29 {
-  width: 18.25rem;
-  width: var(--sidebar-width);
-  height: calc(100vh - 3.5rem);
-  overflow-x: hidden;
-  overflow-y: auto;
-}
-/* opentrons style library */
-
-:root {
-  /* ot brand */
-  --c-mustard: #ffd252;
-  --c-blue: #006cfa;
-  --c-light-blue: hsl(214.08, 100%, 85%);
-
-  /*
-   * grays
-   * TODO(mc, 2019-03-22): align with style guide
-   */
-  --c-near-black: #a4a4a4; /* style guide: n/a */
-  --c-dark-gray: #4a4a4a; /* style guide: near-black */
-  --c-charcoal: #979797;
-  --c-med-gray: #9b9b9b; /* style guide: n/a */
-  --c-light-gray: #e5e2e2; /* style guide: smoke, should be e6e6e6 */
-  --c-lightest-gray: #ededed; /* style guide: n/a */
-
-  /*
-   * background colors
-   * TODO(mc, 2019-03-22): combine with colors
-   */
-  --c-bg-dark: #4a4a4a;
-  --c-bg-light: #fafafa;
-  --c-bg-selected: #f0f3ff;
-  --c-bg-hover: #f1f1f1;
-  --c-bg-success: #b6febc;
-
-  /* general UI */
-  --c-highlight: #5fd8ee;
-  --c-selected-dark: #00c3e6;
-  --c-warning-dark: #9e5e00;
-  --c-warning: #e28200;
-  --c-warning-light: #ffd58f;
-  --c-error-dark: #ac0505;
-  --c-error: #d12929;
-  --c-error-light: #ffc0c0;
-  --c-success: #60b120;
-  --c-blue-enabled: #006cfa;
-  --c-light-grey-hover: #c6c6c6;
-
-  /* Misc */
-  --c-selection-overlay: rgba(95, 216, 238, 0.3);
-  --c-plate-bg: #ccc;
-  --c-white: #fff;
-  --c-black: #000;
-  --c-green: #7ed321;
-  --c-red: #f00000;
-  --c-orange: #f5a623;
-
-  --transition-color: {
-    transition: color 0.15s ease-in-out;
-  }
-
-  --transition-background-color: {
-    transition: background-color 0.15s ease-in-out;
-  }
-}
-
-:root {
-  --c-font-dark: #4a4a4a;
-  --c-font-icon: #6f6f6f;
-  --c-font-light: white;
-  --c-font-disabled: #9c9c9c;
-  --fs-huge: 3rem;
-  --fs-header: 1.125rem;
-  --fs-default: 1rem;
-  --fs-body-2: 0.875rem;
-  --fs-body-1: 0.75rem;
-  --fs-caption: 0.625rem;
-  --fs-tiny: 0.325rem;
-  --fs-micro: 0.2rem;
-  --fw-bold: 800;
-  --fw-semibold: 600;
-  --fw-regular: 400;
-  --fw-light: 300;
-  --ff-code: Consolas, monaco, monospace;
-  --lh-solid: 1;
-  --lh-title: 1.25;
-  --lh-copy: 1.5;
-}
-
-:root {
-  /* borders */
-  --bd-radius-default: 2px;
-  --bd-radius-form-field: 3px;
-  --bd-radius-pill: 12px;
-  --bd-width-default: 1px;
-  --bd-light: var(--bd-width-default) solid var(--c-light-gray);
-
-  /* dropshadows */
-
-  /* TODO: Ian 2018-07-26 consolidate all shadows here (eg from buttons) */
-  --shadow-lvl-1:
-    0 1px 3px 0 rgba(0, 0, 0, 0.1),
-    0 1px 2px 0 rgba(0, 0, 0, 0.2);
-  --shadow-lvl-2:
-    0 3px 6px 0 rgba(0, 0, 0, 0.13),
-    0 3px 6px 0 rgba(0, 0, 0, 0.23);
-}
-
-* {
-  box-sizing: border-box;
-}
-
-._slot_rect_v9we7_3 {
-  stroke: #9b9b9b;
-  stroke: var(--c-med-gray);
-  fill: none;
-}
-
-._slot_occupied_v9we7_8 {
-  fill: #e5e2e2;
-  fill: var(--c-light-gray);
-}
-
-._slot_occupied_v9we7_8._slot_error_v9we7_12 {
-  fill: #ffd58f;
-  fill: var(--c-warning-light);
-}
-
-._collision_icon_v9we7_16 {
-  color: #9b9b9b;
-  color: var(--c-med-gray);
-}