@charset "UTF-8";
/* @import must be at top of file, otherwise CSS will not work */
@import 'https://cdn.fonts.net/t/1.css?apiType=css&projectid=0d685550-3049-11ec-a0c8-06f8b41bab72';
@import 'shepherd-b7867fe38d4d032fa425488ba345287e.css';
/************** NEW COLOR SYSTEM ***************/
/* ------------------------------------ *\
    $VARIABLES
\* ------------------------------------ */
/**
 * If you are building a non-responsive site but would still like to use
 * csswizardry-grids, set this to ‘false’:
 */
/**
 * Is this build mobile first? Setting to ‘true’ means that all grids will be
 * 100% width if you do not apply a more specific class to them.
 */
/**
 * Set the spacing between your grid items.
 */
/**
 * Would you like Sass’ silent classes, or regular CSS classes?
 */
/**
 * Would you like push and pull classes enabled?
 */
/**
 * Using `inline-block` means that the grid items need their whitespace removing
 * in order for them to work correctly. Set the following to true if you are
 * going to achieve this by manually removing/commenting out any whitespace in
 * your HTML yourself.
 *
 * Setting this to false invokes a hack which cannot always be guaranteed,
 * please see the following for more detail:
 *
 * github.com/csswizardry/csswizardry-grids/commit/744d4b23c9d2b77d605b5991e54a397df72e0688
 * github.com/csswizardry/inuit.css/issues/170#issuecomment-14859371
 */
/**
 * Define your breakpoints. The first value is the prefix that shall be used for
 * your classes (e.g. `.palm--one-half`), the second value is the media query
 * that the breakpoint fires at.
 */
/**
 * Define which namespaced breakpoints you would like to generate for each of
 * widths, push and pull. This is handy if you only need pull on, say, desk, or
 * you only need a new width breakpoint at mobile sizes. It allows you to only
 * compile as much CSS as you need. All are turned on by default, but you can
 * add and remove breakpoints at will.
 *
 * Push and pull shall only be used if `$push` and/or `$pull` and `$responsive`
 * have been set to ‘true’.
 */
.centered {
  text-align: center;
}

.top-margin {
  margin-top: 3rem;
}

@media (max-width: 499px) {
  .hide-on-small {
    display: none;
  }
}

@keyframes transition-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes transition-in-short {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS and IE text size adjust after device orientation change,
 *    without disabling user zoom.
 */
html {
  font-family: sans-serif; /* 1 */
}

/**
 * Remove default margin.
 */
body {
  margin: 0;
}

/* HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */
audio,
canvas,
progress,
video {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
 */
[hidden],
template {
  display: none;
}

/* Links
   ========================================================================== */
/**
 * Remove the gray background color from active links in IE 10.
 */
a {
  background-color: transparent;
}

/**
 * Improve readability of focused elements when they are also in an
 * active/hover state.
 */
a:active,
a:hover {
  outline: 0;
}

/* Text-level semantics
   ========================================================================== */
/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */
abbr[title] {
  border-bottom: 1px dotted;
}

/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */
b,
strong {
  font-weight: bold;
}

/**
 * Address styling not present in Safari and Chrome.
 */
dfn {
  font-style: italic;
}

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/**
 * Address styling not present in IE 8/9.
 */
mark {
  background: #ff0;
  color: #000;
}

/**
 * Address inconsistent and variable font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove border when inside `a` element in IE 8/9/10.
 */
img {
  border: 0;
}

/**
 * Correct overflow not hidden in IE 9/10/11.
 */
svg:not(:root) {
  overflow: hidden;
}

/* Grouping content
   ========================================================================== */
/**
 * Address margin not present in IE 8/9 and Safari.
 */
figure {
  margin: 1em 40px;
}

/**
 * Address differences between Firefox and other browsers.
 */
hr {
  box-sizing: content-box;
  height: 0;
  border-width: 0 0 1px;
  border-style: solid;
}

/**
 * Contain overflow in all browsers.
 */
pre {
  overflow: auto;
}

/**
 * Address odd `em`-unit font size rendering in all browsers.
 */
code,
kbd,
pre,
samp {
  font-family: monospace;
  font-size: 1em;
}

/* Forms
   ========================================================================== */
/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */
/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */
button,
input,
optgroup,
select,
textarea {
  color: inherit; /* 1 */
  font: inherit; /* 2 */
  margin: 0; /* 3 */
}

/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */
button {
  overflow: visible;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */
button,
select {
  text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */
button,
html input[type=button],
input[type=reset],
input[type=submit] {
  cursor: pointer; /* 3 */
}

/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled] {
  cursor: default;
}

/**
 * Remove inner padding and border in Firefox 4+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
input {
  line-height: normal;
}

/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */
input[type=checkbox],
input[type=radio] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
 */
input[type=search] {
  box-sizing: content-box; /* 2 */
}

/**
 * Define consistent border, margin, and padding.
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */
legend {
  border: 0; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */
textarea {
  overflow: auto;
}

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */
optgroup {
  font-weight: bold;
}

/* Tables
   ========================================================================== */
/**
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

.utils__pos-rel {
  position: relative;
}
.utils__pos-abs {
  position: absolute;
}
.utils__h100 {
  height: 100%;
}
.utils__w100 {
  width: 100%;
}
.utils__hidden {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.disable-scroll {
  overflow: hidden;
}

[data-test-disable-css-transitions] * {
  transition: none !important;
}

@font-face {
  font-family: TTNormsProRegular;
  font-style: normal;
  font-weight: 400;
  font-stretch: normal;
  src: url("/fonts/TTNormsProRegular/normal_normal_400.woff") format("woff"), url("/fonts/TTNormsProRegular/normal_normal_400.woff2") format("woff2");
}
@font-face {
  font-family: TTNormsProDemiBold;
  font-style: normal;
  font-weight: 600;
  font-stretch: normal;
  src: url("/fonts/TTNormsProDemiBold/normal_normal_600.woff") format("woff"), url("/fonts/TTNormsProDemiBold/normal_normal_600.woff2") format("woff2");
}
.body,
body {
  font-family: "TTNormsProRegular", roboto, freesans, arial, "system-ui", sans-serif;
  font-size: 1rem;
  line-height: 1.375;
  font-weight: 400;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
li,
ol,
dl,
dt,
dd {
  margin: 0;
  padding: 0;
}

p {
  margin-bottom: 1.5rem;
}

ul,
ol {
  margin-bottom: 1.5rem;
}

ul {
  list-style-position: outside;
  padding-left: 1.15em;
}

ol {
  padding-left: 1.5rem;
}

dl {
  position: relative;
  top: -0.75rem;
  font-size: 1rem;
  margin-bottom: 1.5rem;
}

dt {
  font-weight: 400;
  padding-top: 0.75rem;
}

.body-2 {
  font-family: "TTNormsProRegular", roboto, freesans, arial, "system-ui", sans-serif;
  font-weight: 400;
  font-size: 0.8125rem;
  line-height: 1.28;
}

.caption {
  font-size: 0.6875rem;
  line-height: 1.28;
}

.caption-emphasis {
  font-size: 0.6875rem;
  line-height: 1.28;
  font-family: "TTNormsProDemiBold", roboto, freesans, arial, "system-ui", sans-serif;
}

.body-emphasis,
b,
strong {
  font-family: "TTNormsProDemiBold", roboto, freesans, arial, "system-ui", sans-serif;
  font-weight: 700;
}

h1 {
  font-family: "TTNormsProDemiBold", roboto, freesans, arial, "system-ui", sans-serif;
  font-size: 3.5625rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 16px;
}

h2 {
  font-family: "TTNormsProDemiBold", roboto, freesans, arial, "system-ui", sans-serif;
  font-size: 2.5rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 16px;
}

h3 {
  font-family: "TTNormsProDemiBold", roboto, freesans, arial, "system-ui", sans-serif;
  font-size: 1.6875rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 16px;
}

h4 {
  font-family: "TTNormsProDemiBold", roboto, freesans, arial, "system-ui", sans-serif;
  font-size: 1.1875rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 16px;
}

.subtitle-1 {
  font-family: "TTNormsProDemiBold", roboto, freesans, arial, "system-ui", sans-serif;
  font-size: 1.4375rem;
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0.08em;
}

.subtitle-2 {
  font-family: "TTNormsProDemiBold", roboto, freesans, arial, "system-ui", sans-serif;
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0.08em;
}

.subtitle-3 {
  font-family: "TTNormsProDemiBold", roboto, freesans, arial, "system-ui", sans-serif;
  font-size: 1rem;
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0.08em;
}

.subtitle-4 {
  font-family: "TTNormsProDemiBold", roboto, freesans, arial, "system-ui", sans-serif;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0.08em;
}

.subtitle-5 {
  font-family: "TTNormsProDemiBold", roboto, freesans, arial, "system-ui", sans-serif;
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0.08em;
}

table {
  width: 100%;
  text-align: left;
}

th,
td {
  padding: 0.75rem;
  border-right: 1px solid #fff;
}

thead tr {
  border-top: 2px solid #ededed;
}

th {
  font-family: "TTNormsProDemiBold", roboto, freesans, arial, "system-ui", sans-serif;
  font-weight: 700;
}

tbody tr:nth-child(2n+1) {
  background-color: #ededed;
}

a {
  color: inherit;
  text-decoration: underline;
}
a:hover {
  color: #f2f6ff;
}

html,
body {
  min-height: 100%;
  width: 100%;
}

.flex-stretch {
  align-items: stretch;
}

.flex-col {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.flex-no-shrink {
  flex-shrink: 0;
}

.flex-grow {
  flex-grow: 1;
}

.flex-grow-2 {
  flex-grow: 2;
}

.full-scroll-container {
  flex-grow: 1;
  overflow-y: auto;
}

body {
  background: radial-gradient(100% 100% at 100vw 100vh, #1d2d54 0%, #0a0f1c 100%);
  background-attachment: fixed;
  background-color: #0a0f1c;
  color: #d4d7df;
}

.main-section {
  transition: background 0.2s;
}

img {
  max-width: 100%;
  height: auto;
}

/* ------------------------------------ *\
    $CSSWIZARDRY-GRIDS
\* ------------------------------------ */
/**
 * CONTENTS
 * INTRODUCTION.........How the grid system works.
 * VARIABLES............Your settings.
 * MIXINS...............Library mixins.
 * GRID SETUP...........Build the grid structure.
 * WIDTHS...............Build our responsive widths around our breakpoints.
 * PUSH.................Push classes.
 * PULL.................Pull classes.
 */
/* ------------------------------------ *\
    $INTRODUCTION
\* ------------------------------------ */
/**
 * csswizardry grids provides you with widths to suit a number of breakpoints
 * designed around devices of a size you specify. Out of the box, csswizardry
 * grids caters to the following types of device:
 *
 * palm     --  palm-based devices, like phones and small tablets
 * lap      --  lap-based devices, like iPads or laptops
 * portable --  all of the above
 * desk     --  stationary devices, like desktop computers
 * regular  --  any/all types of device
 *
 * These namespaces are then used in the library to give you the ability to
 * manipulate your layouts based around them, for example:
 *
   <div class="grid__item  one-whole  lap--one-half  desk--one-third">
 *
 * This would give you a grid item which is 100% width unless it is on a lap
 * device, at which point it become 50% wide, or it is on a desktop device, at
 * which point it becomes 33.333% width.
 *
 * csswizardry grids also has push and pull classes which allow you to nudge
 * grid items left and right by a defined amount. These follow the same naming
 * convention as above, but are prepended by either `push--` or `pull--`, for
 * example:
 *
   `class="grid__item  one-half  push--one-half"`
 *
 * This would give you a grid item which is 50% width and pushed over to the
 * right by 50%.
 *
 * All classes in csswizardry grids follow this patten, so you should fairly
 * quickly be able to piece together any combinations you can imagine, for
 * example:
 *
   `class="grid__item  one-whole  lap--one-half  desk--one-third  push--desk--one-third"`
 *
   `class="grid__item  one-quarter  palm--one-half  push--palm--one-half"`
 *
   `class="grid__item  palm--one-third  desk--five-twelfths"`
 */
/* ------------------------------------ *\
    $VARIABLES
\* ------------------------------------ */
/**
 * If you are building a non-responsive site but would still like to use
 * csswizardry-grids, set this to ‘false’:
 */
/**
 * Is this build mobile first? Setting to ‘true’ means that all grids will be
 * 100% width if you do not apply a more specific class to them.
 */
/**
 * Set the spacing between your grid items.
 */
/**
 * Would you like Sass’ silent classes, or regular CSS classes?
 */
/**
 * Would you like push and pull classes enabled?
 */
/**
 * Using `inline-block` means that the grid items need their whitespace removing
 * in order for them to work correctly. Set the following to true if you are
 * going to achieve this by manually removing/commenting out any whitespace in
 * your HTML yourself.
 *
 * Setting this to false invokes a hack which cannot always be guaranteed,
 * please see the following for more detail:
 *
 * github.com/csswizardry/csswizardry-grids/commit/744d4b23c9d2b77d605b5991e54a397df72e0688
 * github.com/csswizardry/inuit.css/issues/170#issuecomment-14859371
 */
/**
 * Define your breakpoints. The first value is the prefix that shall be used for
 * your classes (e.g. `.palm--one-half`), the second value is the media query
 * that the breakpoint fires at.
 */
/**
 * Define which namespaced breakpoints you would like to generate for each of
 * widths, push and pull. This is handy if you only need pull on, say, desk, or
 * you only need a new width breakpoint at mobile sizes. It allows you to only
 * compile as much CSS as you need. All are turned on by default, but you can
 * add and remove breakpoints at will.
 *
 * Push and pull shall only be used if `$push` and/or `$pull` and `$responsive`
 * have been set to ‘true’.
 */
/**
 * You do not need to edit anything from this line onward; csswizardry-grids is
 * good to go. Happy griddin’!
 */
/* ------------------------------------ *\
    $MIXINS
\* ------------------------------------ */
/**
 * These mixins are for the library to use only, you should not need to modify
 * them at all.
 *
 * Enclose a block of code with a media query as named in `$grid-breakpoints`.
 */
/**
 * Drop relative positioning into silent classes which can’t take advantage of
 * the `[class*="push--"]` and `[class*="pull--"]` selectors.
 */
/* ------------------------------------ *\
    $GRID SETUP
\* ------------------------------------ */
/**
 * 1. Allow the grid system to be used on lists.
 * 2. Remove any margins and paddings that might affect the grid system.
 * 3. Apply a negative `margin-left` to negate the columns’ gutters.
 */
.grid {
  list-style: none; /* [1] */
  margin: 0; /* [2] */
  padding: 0; /* [2] */
  margin-left: -24px; /* [3] */
}

/**
     * 1. Cause columns to stack side-by-side.
     * 2. Space columns apart.
     * 3. Align columns to the tops of each other.
     * 4. Full-width unless told to behave otherwise.
     * 5. Required to combine fluid widths and fixed gutters.
     */
.grid__item {
  display: inline-block; /* [1] */
  padding-left: 24px; /* [2] */
  vertical-align: top; /* [3] */
  width: 100%; /* [4] */
  box-sizing: border-box; /* [5] */
}

/**
 * Reversed grids allow you to structure your source in the opposite order to
 * how your rendered layout will appear. Extends `.grid`.
 */
.grid--rev {
  direction: rtl;
  text-align: left;
}
.grid--rev > .grid__item {
  direction: ltr;
  text-align: left;
}

/**
 * Gutterless grids have all the properties of regular grids, minus any spacing.
 * Extends `.grid`.
 */
.grid--full {
  margin-left: 0;
}
.grid--full > .grid__item {
  padding-left: 0;
}

/**
 * Align the entire grid to the right. Extends `.grid`.
 */
.grid--right {
  text-align: right;
}
.grid--right > .grid__item {
  text-align: left;
}

/**
 * Centered grids align grid items centrally without needing to use push or pull
 * classes. Extends `.grid`.
 */
.grid--center {
  text-align: center;
}
.grid--center > .grid__item {
  text-align: left;
}

/**
 * Align grid cells vertically (`.grid--middle` or `.grid--bottom`). Extends
 * `.grid`.
 */
.grid--middle > .grid__item {
  vertical-align: middle;
}

.grid--bottom > .grid__item {
  vertical-align: bottom;
}

/**
 * Create grids with narrower gutters. Extends `.grid`.
 */
.grid--narrow {
  margin-left: -12px;
}
.grid--narrow > .grid__item {
  padding-left: 12px;
}

/**
 * Create grids with wider gutters. Extends `.grid`.
 */
.grid--wide {
  margin-left: -48px;
}
.grid--wide > .grid__item {
  padding-left: 48px;
}

/* ------------------------------------ *\
    $WIDTHS
\* ------------------------------------ */
/**
 * Create our width classes, prefixed by the specified namespace.
 */
/**
 * Our regular, non-responsive width classes.
 */
/**
   * Whole
   */
.one-whole {
  width: 100%;
}

/**
   * Halves
   */
.one-half, .six-twelfths, .five-tenths, .four-eighths, .three-sixths, .two-quarters {
  width: 50%;
}

/**
   * Thirds
   */
.one-third, .four-twelfths, .two-sixths {
  width: 33.333%;
}

.two-thirds, .eight-twelfths, .four-sixths {
  width: 66.666%;
}

/**
   * Quarters
   */
.one-quarter, .three-twelfths, .two-eighths {
  width: 25%;
}

.three-quarters, .nine-twelfths, .six-eighths {
  width: 75%;
}

/**
   * Fifths
   */
.one-fifth, .two-tenths {
  width: 20%;
}

.two-fifths, .four-tenths {
  width: 40%;
}

.three-fifths, .six-tenths {
  width: 60%;
}

.four-fifths, .eight-tenths {
  width: 80%;
}

/**
   * Sixths
   */
.one-sixth, .two-twelfths {
  width: 16.666%;
}

.five-sixths, .ten-twelfths {
  width: 83.333%;
}

/**
   * Eighths
   */
.one-eighth {
  width: 12.5%;
}

.three-eighths {
  width: 37.5%;
}

.five-eighths {
  width: 62.5%;
}

.seven-eighths {
  width: 87.5%;
}

/**
   * Tenths
   */
.one-tenth {
  width: 10%;
}

.three-tenths {
  width: 30%;
}

.seven-tenths {
  width: 70%;
}

.nine-tenths {
  width: 90%;
}

/**
   * Twelfths
   */
.one-twelfth {
  width: 8.333%;
}

.five-twelfths {
  width: 41.666%;
}

.seven-twelfths {
  width: 58.333%;
}

.eleven-twelfths {
  width: 91.666%;
}

/**
 * Our responsive classes, if we have enabled them.
 */
@media only screen and (max-width: 480px) {
  /**
     * Whole
     */
  .palm--one-whole {
    width: 100%;
  }
  /**
     * Halves
     */
  .palm--one-half, .palm--six-twelfths, .palm--five-tenths, .palm--four-eighths, .palm--three-sixths, .palm--two-quarters {
    width: 50%;
  }
  /**
     * Thirds
     */
  .palm--one-third, .palm--four-twelfths, .palm--two-sixths {
    width: 33.333%;
  }
  .palm--two-thirds, .palm--eight-twelfths, .palm--four-sixths {
    width: 66.666%;
  }
  /**
     * Quarters
     */
  .palm--one-quarter, .palm--three-twelfths, .palm--two-eighths {
    width: 25%;
  }
  .palm--three-quarters, .palm--nine-twelfths, .palm--six-eighths {
    width: 75%;
  }
  /**
     * Fifths
     */
  .palm--one-fifth, .palm--two-tenths {
    width: 20%;
  }
  .palm--two-fifths, .palm--four-tenths {
    width: 40%;
  }
  .palm--three-fifths, .palm--six-tenths {
    width: 60%;
  }
  .palm--four-fifths, .palm--eight-tenths {
    width: 80%;
  }
  /**
     * Sixths
     */
  .palm--one-sixth, .palm--two-twelfths {
    width: 16.666%;
  }
  .palm--five-sixths, .palm--ten-twelfths {
    width: 83.333%;
  }
  /**
     * Eighths
     */
  .palm--one-eighth {
    width: 12.5%;
  }
  .palm--three-eighths {
    width: 37.5%;
  }
  .palm--five-eighths {
    width: 62.5%;
  }
  .palm--seven-eighths {
    width: 87.5%;
  }
  /**
     * Tenths
     */
  .palm--one-tenth {
    width: 10%;
  }
  .palm--three-tenths {
    width: 30%;
  }
  .palm--seven-tenths {
    width: 70%;
  }
  .palm--nine-tenths {
    width: 90%;
  }
  /**
     * Twelfths
     */
  .palm--one-twelfth {
    width: 8.333%;
  }
  .palm--five-twelfths {
    width: 41.666%;
  }
  .palm--seven-twelfths {
    width: 58.333%;
  }
  .palm--eleven-twelfths {
    width: 91.666%;
  }
}
@media only screen and (min-width: 481px) and (max-width: 1023px) {
  /**
     * Whole
     */
  .lap--one-whole {
    width: 100%;
  }
  /**
     * Halves
     */
  .lap--one-half, .lap--six-twelfths, .lap--five-tenths, .lap--four-eighths, .lap--three-sixths, .lap--two-quarters {
    width: 50%;
  }
  /**
     * Thirds
     */
  .lap--one-third, .lap--four-twelfths, .lap--two-sixths {
    width: 33.333%;
  }
  .lap--two-thirds, .lap--eight-twelfths, .lap--four-sixths {
    width: 66.666%;
  }
  /**
     * Quarters
     */
  .lap--one-quarter, .lap--three-twelfths, .lap--two-eighths {
    width: 25%;
  }
  .lap--three-quarters, .lap--nine-twelfths, .lap--six-eighths {
    width: 75%;
  }
  /**
     * Fifths
     */
  .lap--one-fifth, .lap--two-tenths {
    width: 20%;
  }
  .lap--two-fifths, .lap--four-tenths {
    width: 40%;
  }
  .lap--three-fifths, .lap--six-tenths {
    width: 60%;
  }
  .lap--four-fifths, .lap--eight-tenths {
    width: 80%;
  }
  /**
     * Sixths
     */
  .lap--one-sixth, .lap--two-twelfths {
    width: 16.666%;
  }
  .lap--five-sixths, .lap--ten-twelfths {
    width: 83.333%;
  }
  /**
     * Eighths
     */
  .lap--one-eighth {
    width: 12.5%;
  }
  .lap--three-eighths {
    width: 37.5%;
  }
  .lap--five-eighths {
    width: 62.5%;
  }
  .lap--seven-eighths {
    width: 87.5%;
  }
  /**
     * Tenths
     */
  .lap--one-tenth {
    width: 10%;
  }
  .lap--three-tenths {
    width: 30%;
  }
  .lap--seven-tenths {
    width: 70%;
  }
  .lap--nine-tenths {
    width: 90%;
  }
  /**
     * Twelfths
     */
  .lap--one-twelfth {
    width: 8.333%;
  }
  .lap--five-twelfths {
    width: 41.666%;
  }
  .lap--seven-twelfths {
    width: 58.333%;
  }
  .lap--eleven-twelfths {
    width: 91.666%;
  }
}
@media only screen and (max-width: 1023px) {
  /**
     * Whole
     */
  .portable--one-whole {
    width: 100%;
  }
  /**
     * Halves
     */
  .portable--one-half, .portable--six-twelfths, .portable--five-tenths, .portable--four-eighths, .portable--three-sixths, .portable--two-quarters {
    width: 50%;
  }
  /**
     * Thirds
     */
  .portable--one-third, .portable--four-twelfths, .portable--two-sixths {
    width: 33.333%;
  }
  .portable--two-thirds, .portable--eight-twelfths, .portable--four-sixths {
    width: 66.666%;
  }
  /**
     * Quarters
     */
  .portable--one-quarter, .portable--three-twelfths, .portable--two-eighths {
    width: 25%;
  }
  .portable--three-quarters, .portable--nine-twelfths, .portable--six-eighths {
    width: 75%;
  }
  /**
     * Fifths
     */
  .portable--one-fifth, .portable--two-tenths {
    width: 20%;
  }
  .portable--two-fifths, .portable--four-tenths {
    width: 40%;
  }
  .portable--three-fifths, .portable--six-tenths {
    width: 60%;
  }
  .portable--four-fifths, .portable--eight-tenths {
    width: 80%;
  }
  /**
     * Sixths
     */
  .portable--one-sixth, .portable--two-twelfths {
    width: 16.666%;
  }
  .portable--five-sixths, .portable--ten-twelfths {
    width: 83.333%;
  }
  /**
     * Eighths
     */
  .portable--one-eighth {
    width: 12.5%;
  }
  .portable--three-eighths {
    width: 37.5%;
  }
  .portable--five-eighths {
    width: 62.5%;
  }
  .portable--seven-eighths {
    width: 87.5%;
  }
  /**
     * Tenths
     */
  .portable--one-tenth {
    width: 10%;
  }
  .portable--three-tenths {
    width: 30%;
  }
  .portable--seven-tenths {
    width: 70%;
  }
  .portable--nine-tenths {
    width: 90%;
  }
  /**
     * Twelfths
     */
  .portable--one-twelfth {
    width: 8.333%;
  }
  .portable--five-twelfths {
    width: 41.666%;
  }
  .portable--seven-twelfths {
    width: 58.333%;
  }
  .portable--eleven-twelfths {
    width: 91.666%;
  }
}
@media only screen and (min-width: 1024px) {
  /**
     * Whole
     */
  .desk--one-whole {
    width: 100%;
  }
  /**
     * Halves
     */
  .desk--one-half, .desk--six-twelfths, .desk--five-tenths, .desk--four-eighths, .desk--three-sixths, .desk--two-quarters {
    width: 50%;
  }
  /**
     * Thirds
     */
  .desk--one-third, .desk--four-twelfths, .desk--two-sixths {
    width: 33.333%;
  }
  .desk--two-thirds, .desk--eight-twelfths, .desk--four-sixths {
    width: 66.666%;
  }
  /**
     * Quarters
     */
  .desk--one-quarter, .desk--three-twelfths, .desk--two-eighths {
    width: 25%;
  }
  .desk--three-quarters, .desk--nine-twelfths, .desk--six-eighths {
    width: 75%;
  }
  /**
     * Fifths
     */
  .desk--one-fifth, .desk--two-tenths {
    width: 20%;
  }
  .desk--two-fifths, .desk--four-tenths {
    width: 40%;
  }
  .desk--three-fifths, .desk--six-tenths {
    width: 60%;
  }
  .desk--four-fifths, .desk--eight-tenths {
    width: 80%;
  }
  /**
     * Sixths
     */
  .desk--one-sixth, .desk--two-twelfths {
    width: 16.666%;
  }
  .desk--five-sixths, .desk--ten-twelfths {
    width: 83.333%;
  }
  /**
     * Eighths
     */
  .desk--one-eighth {
    width: 12.5%;
  }
  .desk--three-eighths {
    width: 37.5%;
  }
  .desk--five-eighths {
    width: 62.5%;
  }
  .desk--seven-eighths {
    width: 87.5%;
  }
  /**
     * Tenths
     */
  .desk--one-tenth {
    width: 10%;
  }
  .desk--three-tenths {
    width: 30%;
  }
  .desk--seven-tenths {
    width: 70%;
  }
  .desk--nine-tenths {
    width: 90%;
  }
  /**
     * Twelfths
     */
  .desk--one-twelfth {
    width: 8.333%;
  }
  .desk--five-twelfths {
    width: 41.666%;
  }
  .desk--seven-twelfths {
    width: 58.333%;
  }
  .desk--eleven-twelfths {
    width: 91.666%;
  }
}
/* ------------------------------------ *\
    $PUSH
\* ------------------------------------ */
/**
 * Push classes, to move grid items over to the right by certain amounts.
 */
/* ------------------------------------ *\
    $PULL
\* ------------------------------------ */
/**
 * Pull classes, to move grid items back to the left by certain amounts.
 */
.flex-grid {
  display: flex;
  flex-flow: row wrap;
  align-items: stretch;
  margin-left: -14px;
  height: 100%;
}
.flex-grid--item {
  padding-left: 14px;
  width: 100%;
  flex-grow: 1;
}
.flex-grid--item--auto {
  padding-left: 14px;
}
@media (min-width: 900px) {
  .flex-grid--item--l4 {
    width: 33.33%;
  }
}
@media (min-width: 900px) {
  .flex-grid--item--l8 {
    width: 66.66%;
  }
}
@media (min-width: 900px) {
  .flex-grid--item--l3 {
    width: 25%;
  }
}
@media (min-width: 900px) {
  .flex-grid--item--l9 {
    width: 75%;
  }
}
@media (min-width: 900px) {
  .flex-grid--item--l2 {
    width: 16.65%;
  }
}
@media (min-width: 900px) {
  .flex-grid--item--l10 {
    width: 83.35%;
  }
}
.flex-grid--center {
  display: flex;
  align-items: stretch;
}
.flex-grid--rows {
  display: flex;
  flex-direction: column;
}

.constrained {
  margin: 0 auto;
  width: 100%;
  max-width: 980px;
}

.margin-bottom {
  margin-bottom: 1.5rem;
}

.margin-bottom-double {
  margin-bottom: 3rem;
}

.margin-bottom-half {
  margin-bottom: 0.75rem;
}

.margin-bottom-none {
  margin-bottom: 0;
}

.librarian-browser {
  position: fixed;
  top: 48px;
  width: 300px;
  height: calc(100% - 48px);
  z-index: 3;
}
@media (min-width: 900px) {
  .librarian-browser {
    width: 330px;
  }
}
.librarian-browser .browser__toolbar {
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  padding: 10px;
  z-index: 2;
}
.librarian-browser.is-mobile {
  width: 100%;
  max-width: 330px;
  box-shadow: 0 0 80px 2px rgba(0, 0, 0, 0.7843137255);
}
.librarian-browser.shepherd-modal.shepherd-enabled {
  position: fixed;
}

.librarian__product-name {
  white-space: nowrap;
}
.librarian__synth-editor {
  min-height: calc(100vh - 48px);
}
.librarian__editor {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  margin-left: 0;
  width: 100%;
}
.librarian__editor .btn i.fa {
  margin-right: 5px;
}
@media (min-width: 750px) {
  .librarian-browser:not(.is-mobile) ~ .librarian__editor {
    margin-left: 300px;
    width: calc(100% - 300px);
  }
}
@media (min-width: 900px) {
  .librarian-browser:not(.is-mobile) ~ .librarian__editor {
    margin-left: 330px;
    width: calc(100% - 330px);
  }
}
.librarian__editor .editor-toolbar {
  position: fixed;
  display: flex;
  justify-content: space-between;
  align-items: center;
  left: 0;
  margin-left: 0;
  width: 100%;
  padding: 8px;
  z-index: 6;
  background: linear-gradient(0deg, rgba(227, 230, 239, 0.0705882353), rgba(227, 230, 239, 0.0705882353)), radial-gradient(139.25% 1473.81% at 100% 1317%, rgba(29, 45, 84, 0.8) 0%, rgba(10, 15, 28, 0.8) 100%);
  backdrop-filter: blur(10px);
}
@media (min-width: 750px) {
  .librarian-browser:not(.is-mobile) ~ .librarian__editor .editor-toolbar {
    margin-left: 300px;
    width: calc(100% - 300px);
  }
}
@media (min-width: 900px) {
  .librarian-browser:not(.is-mobile) ~ .librarian__editor .editor-toolbar {
    margin-left: 330px;
    width: calc(100% - 330px);
  }
}
.librarian__editor .editor-toolbar--left, .librarian__editor .editor-toolbar--right {
  display: flex;
  align-items: center;
}
.librarian__editor .editor-toolbar div {
  white-space: nowrap;
}
@media (width <= 1050px) {
  .librarian__editor .editor-toolbar .expanded-text {
    margin: -1px;
    height: 1px;
    width: 1px;
    clip-path: inset(50%);
    border: 0;
    padding: 0;
    overflow: hidden;
    position: absolute;
  }
}
.librarian__editor .editor-toolbar .editable-value {
  width: 180px;
}
.librarian__editor .editor-toolbar .btn {
  background: none;
  color: #f2f2f2;
}
.librarian__editor .editor-toolbar .btn.pack-settings-toggle.active {
  background: #f2f2f2;
  color: #242428;
}
.librarian__editor .editor-toolbar .btn[disabled] {
  opacity: 0.5;
}
.librarian__editor .main-section__inner {
  margin: 50px 0 0;
  max-width: none;
  padding: 0;
}
.librarian__index {
  text-align: center;
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 100px);
  justify-content: flex-start;
  padding-top: 5em;
}
.librarian__index h2 {
  left: 50%;
  position: relative;
  transform: translateX(-50%);
  margin-left: auto;
}
.librarian__index .button {
  margin: 10px;
}
.librarian__import {
  margin-top: 5em;
  text-align: center;
}
.librarian .change-content-menu {
  background: none;
  padding: 0 0 0 20px;
  width: 280px;
  line-height: 2.2em;
}
.librarian .drop-down-menu .btn {
  background: none;
}
.librarian .drop-down-menu .btn:hover {
  background: none;
}
.librarian .drop-down-menu .btn[disabled] {
  color: #fff;
  opacity: 0.5;
}

.accounts {
  margin: 0 auto;
  margin-top: 141px;
  width: 500px;
  padding: 0 24px;
  text-align: center;
}

.accounts * {
  width: 100%;
}

.accounts p {
  margin-top: 64px;
  margin-bottom: 64px;
}

.accounts h4 {
  color: #c5c8cf;
  margin-bottom: 0;
}

button.accounts-logout {
  margin: 0 auto;
  width: 85%;
}

.text-page-container h4 {
  margin-top: 64px;
  color: #e3e6ef;
}
.text-page-container > div {
  display: flow-root;
  top: 0;
  width: 704px;
  padding: 48px 64px 0;
  min-height: calc(100vh - 48px);
  background: rgba(15, 15, 16, 0.6);
}
.text-page-container > div > h3, .text-page-container > div > h4, .text-page-container > div > p, .text-page-container > div > ul {
  max-width: 576px;
}
.text-page-container__main-heading {
  color: #f2f6ff;
}
.text-page-container li {
  line-height: 1.7;
}
.text-page-container a:not(.button) {
  transition: 0.1s ease-in-out;
  line-height: 1.7;
}
.text-page-container a:not(.button):hover {
  opacity: 0.7;
}

.app-loading {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.app-loading__header {
  color: #d4d7df;
}
.app-loading .loader {
  animation: fade-loader 0.5s ease-in;
}

@keyframes fade-loader {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.hub__heading {
  margin-top: 40px;
  margin-bottom: 16px;
  color: #e3e6ef;
}
.hub__subheading {
  color: #e3e6ef;
  display: inline-block;
}
.hub__subheading--no-margin-bottom {
  margin-bottom: 0;
}
.hub__connected-products-list {
  padding-left: 0;
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, 424px);
}
@media screen and (width <= 904px) {
  .hub__connected-products-list {
    grid-template-columns: repeat(1, 424px);
  }
}
.hub__trouble-connecting-button.button {
  animation: trouble-connecting-transition-in 0.6s cubic-bezier(1, -0.01, 1, 0.99);
  animation-fill-mode: forwards;
  color: #d4d7df;
  padding-left: 0;
  padding-right: 0;
  margin-top: 1.5rem;
}
@keyframes trouble-connecting-transition-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.hub__no-product-connected {
  color: #e3e6ef;
  text-align: center;
  margin-top: 194px;
  margin-bottom: 32px;
}
.hub__get-started-button {
  color: #c5c8cf;
  margin: auto;
}
.hub__show-all-button.button, .hub__show-connected-products-button.button {
  color: #c5c8cf;
  display: inline-block;
  margin-left: 16px;
}
.hub__show-all-button.button svg, .hub__show-connected-products-button.button svg {
  margin-top: -2px;
}
.hub__show-all-products-button.button {
  margin: 64px auto;
  color: #c5c8cf;
  animation-delay: 200ms;
}
.hub__get-started {
  transition: opacity 400ms ease-in-out;
  opacity: 1;
}
.hub__get-started p,
.hub__get-started button {
  animation: transition-in 0.4s;
  animation-fill-mode: forwards;
}
.hub__get-started button {
  animation-delay: 100ms;
  opacity: 0;
}
.hub__all-products {
  list-style: none;
  padding: 0;
  margin-bottom: 128px;
}
.hub__all-products > li {
  opacity: 0;
  animation: transition-in 0.4s;
  animation-fill-mode: forwards;
}
.hub__all-products > li h2 {
  margin-top: 64px;
}
.hub__all-products > li ul {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.hub__all-products > li:nth-of-type(1) {
  animation-delay: 100ms;
}

.hub__all-products > li:nth-of-type(2) {
  animation-delay: 150ms;
}

.hub__all-products > li:nth-of-type(3) {
  animation-delay: 200ms;
}

.hub__all-products > li:nth-of-type(4) {
  animation-delay: 250ms;
}

.hub__all-products > li:nth-of-type(5) {
  animation-delay: 300ms;
}

.hub__all-products > li:nth-of-type(6) {
  animation-delay: 350ms;
}

.hub-card {
  animation: hub-card-transition-in 0.4s;
  animation-fill-mode: forwards;
  list-style: none;
  border: 1px solid #7a7b80;
  border-radius: 2px;
  backdrop-filter: blur(75px);
}
@keyframes hub-card-transition-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.hub-card__header {
  background: rgba(61, 62, 64, 0.6);
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
}
.hub-card__header h4 {
  margin: 0;
}
.hub-card__body {
  background: rgba(106, 108, 112, 0.6);
  height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
}
.hub-card__product-image {
  width: 100%;
  height: 100%;
  max-height: 232px;
  overflow: hidden;
  text-decoration: none;
}
.hub-card__product-image--disabled, .hub-card__product-image--connecting {
  pointer-events: none;
}
.hub-card__product-image--disabled img, .hub-card__product-image--connecting img {
  opacity: 0.5;
}
.hub-card__actions {
  margin-left: 32px;
  margin-right: 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-grow: 1;
}
.hub-card__actions p:last-child {
  margin-bottom: 8px;
}
.hub-card__update-firmware-button-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 8px auto;
  align-items: center;
}
.hub-card__update-firmware-button.button, .hub-card__manage-product-button.button, .hub-card__button--primary.button {
  width: 355px;
}
.hub-card__reinstall-firmware-text {
  font-size: 11px;
}
.hub-card__manage-product-button.button, .hub-card__button--primary.button {
  margin: 8px auto 35px;
}
.hub-card__release-notes-modal {
  max-width: 470px;
}
.hub-card__release-notes-modal .modal__body p {
  max-width: none;
}
.hub-card__release-notes-modal .icon__external-link {
  margin-left: 10px;
  margin-right: -6px;
}
.hub-card__not-supported-image {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background: url("/assets/images/not-supported-product-image-a5efc38081a67b3934417d4728047b6e.png");
  background-size: contain;
}
.hub-card__not-supported-text {
  margin-bottom: 0;
  text-align: center;
}
.hub-card__not-supported-text + a {
  text-align: center;
}
.hub-card__not-supported-text + a:hover {
  color: #f2f6ff;
}
.hub-card__loader-container {
  display: flex;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
}

.hub-get-started-modal {
  height: 385px;
}
.hub-get-started-modal__download-button {
  margin: 16px auto 32px;
  width: 320px;
}
.hub-get-started-modal__full-width-image {
  margin: -16px;
  margin-bottom: 16px;
  width: calc(100% + 32px);
  max-width: calc(100% + 32px);
}
.hub-get-started-modal__basics .hub-get-started-modal__full-width-image {
  margin-bottom: 6px;
}
.hub-get-started-modal .modal__body {
  padding-bottom: 0;
}
.hub-get-started-modal .modal__body p {
  max-width: 440px;
}
.hub-get-started-modal .modal__body a:hover {
  color: #f2f6ff;
}
.hub-get-started-modal .modal__footer {
  padding-top: 0;
  min-height: 54px;
}
.hub-get-started-modal__margin-top {
  margin-top: 64px;
}
.modal__body .hub-get-started-modal__margin-bottom:last-child {
  margin-bottom: 48px;
}

.main-menu {
  z-index: 100;
  /* menu */
}
.main-menu__nav {
  position: fixed;
  top: 0;
  left: 0;
  min-width: 173px;
  height: calc(100% - 40px);
  margin-top: 40px;
  padding: 8px;
  z-index: 100;
  overflow-y: auto;
  color: #d4d7df;
  background: rgba(15, 15, 16, 0.9019607843);
  backdrop-filter: blur(10px);
}
@media (min-width: 500px) {
  .main-menu__nav {
    height: initial;
    margin-top: 48px;
    margin-left: 4px;
    border-radius: 0 0 2px 2px;
  }
}
.main-menu__nav .sub-nav--nav-link {
  flex-direction: row;
  padding: 0;
}
.main-menu__nav .sub-nav--nav-link::before {
  content: none;
}
.main-menu__nav hr {
  color: #a6a9af;
}
.main-menu__nav--list .button {
  padding: 0;
}
.main-menu__nav--list .top-nav--nav-link > .icon {
  margin-left: 0;
  vertical-align: bottom;
}
.main-menu {
  /* content mask */
}
.main-menu__content-mask {
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  overflow: hidden;
  width: 0;
  height: 0;
  background-color: #000;
  opacity: 0;
  transition: opacity 0.3s, width 0s 0.3s, height 0s 0.3s;
}
.main-menu.menu-is-open + .main-menu__content-mask {
  width: 100%;
  height: 100%;
  opacity: 0.2;
  transition: opacity 0.4s;
}
@media (min-width: 500px) {
  .main-menu.menu-is-open + .main-menu__content-mask {
    opacity: 0;
  }
}

.main-menu-toggle {
  background: none;
  border: none;
  padding: 0;
  transform-style: preserve-3d;
  transform-origin: center;
  transition: transform 0.25s linear;
  width: 48px;
  height: 48px;
  cursor: pointer;
  z-index: 2000;
  margin-left: -12px;
  margin-right: 15px;
  color: #d4d7df;
}
.main-menu-toggle:hover {
  color: #f2f6ff;
}
.main-menu-toggle--open-button, .main-menu-toggle--close-button {
  position: absolute;
  top: 0;
  width: 48px;
  height: 48px;
  backface-visibility: hidden;
  cursor: pointer;
}
.main-menu-toggle--open-button .icon, .main-menu-toggle--close-button .icon {
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
}
.main-menu-toggle--open-button {
  transform: rotateX(0deg);
}
.main-menu-toggle--close-button {
  transform: rotateX(180deg);
  background: rgba(15, 15, 16, 0.9019607843);
}

.menu-is-open.main-menu-toggle {
  transform: rotateX(180deg);
}

.login-modal__container {
  width: 360px;
}
.login-modal--zero-side-padding .modal__body {
  padding-left: 0;
  padding-right: 0;
}
.login-modal__body {
  overflow: hidden;
  padding-left: 16px;
  padding-right: 16px;
}
.login-modal__body button,
.login-modal__body label {
  text-align: left;
}
.login-modal__login-confirmation.button-stack button:first-child {
  margin-top: 0;
}
.login-modal__login-confirmation.button-stack button:last-child {
  margin-bottom: 0;
}
.login-modal__button {
  margin-bottom: 10px;
}
.login-modal__button.button {
  align-items: center;
  width: 100%;
  padding-left: 8px;
  padding-right: 8px;
}
.login-modal__button--google.button {
  color: #1e1f20;
  background: #e3e6ef;
}
.login-modal__button--google.button:hover:not(:disabled, .disbled) {
  color: #0f0f10;
  background: #f2f6ff;
}
.login-modal__button--create-novation-account {
  margin-bottom: 0;
}
.login-modal__button span {
  flex-grow: 1;
  text-align: center;
}
.login-modal__button svg.novation {
  width: 18px;
  height: 18px;
}
.login-modal__button svg.novation > path {
  fill: #fff;
}
.login-modal__button i.fa {
  font-size: 18px;
}
.login-modal__remember-me-checkbox {
  display: inline-block;
}
.login-modal__divider {
  display: flex;
  margin: 2px;
  margin-bottom: 10px;
}
.login-modal__divider hr {
  color: #888a8f;
  flex-grow: 1;
  margin: 11px auto;
}
.login-modal__divider span {
  margin: 0 6px;
}
.login-modal footer {
  margin-top: 20px;
}
.login-modal footer p {
  margin-bottom: 10px;
}
.login-modal footer p:last-child {
  margin-bottom: 0;
}

.scroll-on-drag-over {
  width: 100%;
  position: absolute;
  height: 16px;
}
.scroll-on-drag-over.top {
  bottom: -8px;
}
.scroll-on-drag-over.bottom {
  top: -8px;
}

.browser-toggle-button.button {
  transition: background 0.2s;
  margin: 0;
  z-index: 1000;
}

.patch-set__list {
  list-style-type: none;
  padding: 0;
  margin: 5px 0;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-content: start;
}

.import-browser {
  min-width: 500px;
  margin-top: 32px;
}

.librarian-browser {
  z-index: 10;
  background: linear-gradient(0deg, rgba(227, 230, 239, 0.1019607843), rgba(227, 230, 239, 0.1019607843)), radial-gradient(362.73% 101.7% at 369.73% 100.76%, rgba(38, 59, 110, 0.8) 0%, rgba(14, 20, 38, 0.8) 100%);
  backdrop-filter: blur(10px);
}

.librarian-browser h4,
.import-browser h4 {
  z-index: 100;
  margin-bottom: 6px;
}
.librarian-browser .scroll-container,
.import-browser .scroll-container {
  height: 100%;
  max-height: calc(100% - 70px);
  overflow: hidden;
  overflow-y: auto;
  margin: 8px 2px 0 8px;
}
.librarian-browser .scroll-container__inner,
.import-browser .scroll-container__inner {
  margin-right: 2px;
}
.librarian-browser .scroll-container ul:last-child,
.import-browser .scroll-container ul:last-child {
  margin-bottom: 8px;
}
.librarian-browser .browser-settings,
.import-browser .browser-settings {
  height: 170px;
  padding: 8px;
  padding-top: 4px;
  background: rgba(227, 230, 239, 0.1019607843);
}
.librarian-browser .browser-settings__btn,
.import-browser .browser-settings__btn {
  background: none;
  flex-grow: 0;
  width: 40px;
  margin-left: 5px;
  color: #c5c8cf;
}
.librarian-browser .browser-settings__btn--active,
.import-browser .browser-settings__btn--active {
  color: #f2f6ff;
}
.librarian-browser .browser-settings__btn--active svg,
.import-browser .browser-settings__btn--active svg {
  border: 1px solid #f2f6ff;
  border-radius: 2px;
}
.librarian-browser .browser-settings__btn:hover,
.import-browser .browser-settings__btn:hover {
  color: #f2f6ff;
}
.librarian-browser .browser-settings__top,
.import-browser .browser-settings__top {
  display: flex;
  justify-content: space-between;
}
.librarian-browser .browser-settings__sort-by, .librarian-browser .browser-settings__category,
.import-browser .browser-settings__sort-by,
.import-browser .browser-settings__category {
  flex-grow: 1;
}
.librarian-browser .browser-settings__sort-by select, .librarian-browser .browser-settings__category select,
.import-browser .browser-settings__sort-by select,
.import-browser .browser-settings__category select {
  width: 100%;
}
.librarian-browser .browser-settings__sort-by ~ .browser-settings__category,
.import-browser .browser-settings__sort-by ~ .browser-settings__category {
  margin-left: 10px;
}
.librarian-browser .browser-settings__search,
.import-browser .browser-settings__search {
  display: flex;
  justify-content: space-between;
}
.librarian-browser .browser-settings__search input,
.import-browser .browser-settings__search input {
  width: 100%;
  margin: 8px 0;
}
.librarian-browser .browser-settings ~ .scroll-container,
.import-browser .browser-settings ~ .scroll-container {
  height: calc(100% - 230px);
}
.librarian-browser .browser__toolbar .new-pack,
.import-browser .browser__toolbar .new-pack {
  flex-grow: 1;
}
.librarian-browser .browser__toolbar .new-pack i.fa,
.import-browser .browser__toolbar .new-pack i.fa {
  padding-right: 5px;
}
.librarian-browser .packs-list--header,
.import-browser .packs-list--header {
  cursor: pointer;
  margin-bottom: 9px;
}
.librarian-browser .packs-list--header + .packs-list-header,
.import-browser .packs-list--header + .packs-list-header {
  margin-top: 25px;
}
.librarian-browser .packs-list--header h5,
.import-browser .packs-list--header h5 {
  font-family: "TTNormsProDemiBold", roboto, freesans, arial, "system-ui", sans-serif;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0.08em;
  display: inline-block;
  transition: color 0.1s;
}
.librarian-browser .packs-list--header button,
.import-browser .packs-list--header button {
  background: none;
  border: none;
}
.librarian-browser .packs-list--header button svg,
.import-browser .packs-list--header button svg {
  margin-top: -3px;
  vertical-align: middle;
}
.librarian-browser .packs-list--header button svg path,
.import-browser .packs-list--header button svg path {
  transition: fill 0.1s;
}
.librarian-browser .packs-list--header__hide-packs h5,
.import-browser .packs-list--header__hide-packs h5 {
  color: #a6a9af;
}
.librarian-browser .packs-list--header__hide-packs button,
.import-browser .packs-list--header__hide-packs button {
  color: #a6a9af;
}
.librarian-browser .packs-list__is-empty,
.import-browser .packs-list__is-empty {
  background: none;
  color: rgba(255, 255, 255, 0.6509803922);
}
.librarian-browser ul,
.import-browser ul {
  list-style: none;
  padding-left: 0;
}
.librarian-browser ul li,
.import-browser ul li {
  background: rgba(0, 0, 0, 0.5019607843);
  color: #f2f2f2;
  width: 100%;
  border-radius: 0 2px 2px 0;
  overflow: hidden;
  margin-top: 5px;
}
.librarian-browser ul li .pack-image,
.import-browser ul li .pack-image {
  height: 60px;
  width: 60px;
  min-width: 60px;
}
.librarian-browser ul li .pack-image__image,
.import-browser ul li .pack-image__image {
  height: 60px;
  width: 60px;
  overflow: hidden;
}
.librarian-browser ul li .pack-image .import-pack-button,
.import-browser ul li .pack-image .import-pack-button {
  width: 60px;
  height: 60px;
  color: #d4d7df;
  z-index: 1;
  background: transparent;
  transition: color 0.2s ease-in-out;
  border: none;
}
.librarian-browser ul li .pack-image .import-pack-button .icon,
.import-browser ul li .pack-image .import-pack-button .icon {
  font-size: 1.5rem;
  height: 20px;
  margin-right: 0;
}
.librarian-browser ul li .pack-image .import-pack-button:hover,
.import-browser ul li .pack-image .import-pack-button:hover {
  text-decoration: none;
  color: #f2f6ff;
}
.librarian-browser ul li .pack-info,
.import-browser ul li .pack-info {
  line-height: 1;
  padding: 0;
  flex-grow: 1;
  position: relative;
  max-width: calc(100% - 60px);
}
.librarian-browser ul li .pack-name,
.import-browser ul li .pack-name {
  text-align: left;
  height: 29px;
  line-height: 29px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.librarian-browser ul li .pack-name .editable-value,
.import-browser ul li .pack-name .editable-value {
  height: 29px;
  line-height: 29px;
}
.librarian-browser ul li.factory-pack .pack-name,
.import-browser ul li.factory-pack .pack-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.librarian-browser ul li.factory-pack .pack-name__text,
.import-browser ul li.factory-pack .pack-name__text {
  overflow: hidden;
  text-overflow: ellipsis;
}
.librarian-browser ul li .deleted-pack .pack-name,
.import-browser ul li .deleted-pack .pack-name {
  color: #888;
  text-decoration: line-through;
}
.librarian-browser ul li .pack-actions,
.import-browser ul li .pack-actions {
  height: 31px;
  padding: 0 10px 0 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #595959;
}
.librarian-browser ul li .pack-actions--import,
.import-browser ul li .pack-actions--import {
  justify-content: flex-end;
}
.librarian-browser ul li .librarian-browser--pack,
.librarian-browser ul li a,
.librarian-browser ul li span.deleted-pack,
.librarian-browser ul li span.import-pack,
.import-browser ul li .librarian-browser--pack,
.import-browser ul li a,
.import-browser ul li span.deleted-pack,
.import-browser ul li span.import-pack {
  display: flex;
  text-decoration: none;
  width: 100%;
  border-radius: 2px;
  height: 60px;
}
.librarian-browser ul li .librarian-browser--pack .pack-info,
.librarian-browser ul li a .pack-info,
.librarian-browser ul li span.deleted-pack .pack-info,
.librarian-browser ul li span.import-pack .pack-info,
.import-browser ul li .librarian-browser--pack .pack-info,
.import-browser ul li a .pack-info,
.import-browser ul li span.deleted-pack .pack-info,
.import-browser ul li span.import-pack .pack-info {
  border-radius: 0 2px 2px 0;
}
.librarian-browser ul li .librarian-browser--pack button.btn[disabled],
.librarian-browser ul li a button.btn[disabled],
.librarian-browser ul li span.deleted-pack button.btn[disabled],
.librarian-browser ul li span.import-pack button.btn[disabled],
.import-browser ul li .librarian-browser--pack button.btn[disabled],
.import-browser ul li a button.btn[disabled],
.import-browser ul li span.deleted-pack button.btn[disabled],
.import-browser ul li span.import-pack button.btn[disabled] {
  opacity: 0.5;
}
.librarian-browser ul li .librarian-browser--pack.active,
.librarian-browser ul li a.active,
.librarian-browser ul li span.deleted-pack.active,
.librarian-browser ul li span.import-pack.active,
.import-browser ul li .librarian-browser--pack.active,
.import-browser ul li a.active,
.import-browser ul li span.deleted-pack.active,
.import-browser ul li span.import-pack.active {
  color: #0f0f10;
}
.librarian-browser ul li .librarian-browser--pack.active .pack-info,
.librarian-browser ul li a.active .pack-info,
.librarian-browser ul li span.deleted-pack.active .pack-info,
.librarian-browser ul li span.import-pack.active .pack-info,
.import-browser ul li .librarian-browser--pack.active .pack-info,
.import-browser ul li a.active .pack-info,
.import-browser ul li span.deleted-pack.active .pack-info,
.import-browser ul li span.import-pack.active .pack-info {
  background: rgba(255, 255, 255, 0.9019607843);
}
.librarian-browser ul li .librarian-browser--pack.active .pack-actions,
.librarian-browser ul li a.active .pack-actions,
.librarian-browser ul li span.deleted-pack.active .pack-actions,
.librarian-browser ul li span.import-pack.active .pack-actions,
.import-browser ul li .librarian-browser--pack.active .pack-actions,
.import-browser ul li a.active .pack-actions,
.import-browser ul li span.deleted-pack.active .pack-actions,
.import-browser ul li span.import-pack.active .pack-actions {
  border-top: 1px solid #ccc;
}
.librarian-browser ul li a.active .pack-expand,
.import-browser ul li a.active .pack-expand {
  color: #0f0f10;
}
.librarian-browser ul li.expand .pack-expand,
.librarian-browser ul li.expand .pack-expand:hover,
.import-browser ul li.expand .pack-expand,
.import-browser ul li.expand .pack-expand:hover {
  background: #e3e6ef;
  color: #0f0f10;
}
.librarian-browser ul li.expand a.active .pack-expand,
.import-browser ul li.expand a.active .pack-expand {
  background-color: #0f0f10;
  color: #e3e6ef;
}
.librarian-browser--send-pack-button.button,
.import-browser--send-pack-button.button {
  overflow: hidden;
  white-space: nowrap;
  justify-content: flex-start;
}
.librarian-browser .patch-set__list,
.import-browser .patch-set__list {
  margin-top: 0;
}
.librarian-browser .patch-set__animated-container,
.import-browser .patch-set__animated-container {
  overflow: hidden;
}
.librarian-browser .patch-set ol li,
.import-browser .patch-set ol li {
  padding: 5px 10px;
  cursor: move;
  transition: background 0.2s;
}
.librarian-browser .patch-set ol li .patch-set-item,
.import-browser .patch-set ol li .patch-set-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.librarian-browser .patch-set ol li .patch-set-item__name,
.import-browser .patch-set ol li .patch-set-item__name {
  overflow: hidden;
  text-overflow: ellipsis;
}
.librarian-browser .patch-set ol li .patch-set-item__actions,
.import-browser .patch-set ol li .patch-set-item__actions {
  display: flex;
  align-items: center;
}
.librarian-browser .patch-set ol li .patch-set-item .multi-expand-button,
.librarian-browser .patch-set ol li .patch-set-item .entity-set-expand-button,
.import-browser .patch-set ol li .patch-set-item .multi-expand-button,
.import-browser .patch-set ol li .patch-set-item .entity-set-expand-button {
  white-space: nowrap;
  justify-content: flex-start;
  height: 100%;
}
.librarian-browser .patch-set ol li .patch-set-item .multi-expand-button .icon,
.librarian-browser .patch-set ol li .patch-set-item .entity-set-expand-button .icon,
.import-browser .patch-set ol li .patch-set-item .multi-expand-button .icon,
.import-browser .patch-set ol li .patch-set-item .entity-set-expand-button .icon {
  transform: rotate(0deg);
  transition: transform 0.2s;
}
.librarian-browser .patch-set ol li .patch-set-item .multi-expand-button.expand .icon,
.librarian-browser .patch-set ol li .patch-set-item .entity-set-expand-button.expand .icon,
.import-browser .patch-set ol li .patch-set-item .multi-expand-button.expand .icon,
.import-browser .patch-set ol li .patch-set-item .entity-set-expand-button.expand .icon {
  transform: rotate(90deg);
}
.librarian-browser .patch-set ol li:hover,
.import-browser .patch-set ol li:hover {
  background: rgba(255, 255, 255, 0.5019607843);
}
.librarian-browser .login-message,
.import-browser .login-message {
  color: rgba(255, 255, 255, 0.6509803922);
}
.librarian-browser .login-message a,
.librarian-browser .login-message button,
.import-browser .login-message a,
.import-browser .login-message button {
  text-decoration: none;
  font-weight: 500;
  color: #fff;
}

a.active .browser-pack__actions .button--tertiary-compact {
  color: #4c4d50;
}
a.active .browser-pack__actions .button--tertiary-compact:hover {
  color: #0f0f10;
}
.browser-pack__icon rect,
.browser-pack__icon path {
  fill: currentcolor;
}

.pack-header {
  background: radial-gradient(203.22% 1987.14% at 146.95% 1732.86%, rgba(29, 45, 84, 0.9019607843) 0%, rgba(10, 15, 28, 0.9019607843) 100%);
  backdrop-filter: blur(10px);
  height: 35px;
  width: 100%;
  position: fixed;
  z-index: 3;
  display: flex;
  justify-content: center;
}
.pack-header + div {
  margin-top: 35px;
}
.launchkey-mini-mk3 .pack-header {
  position: static;
}
@media (width >= 1370px) {
  .sl-mkiii .pack-header {
    width: calc(100% - 330px);
  }
}
.circuit-tracks-packs .pack-header, .circuit-rhythm-packs .pack-header, .circuit-packs .pack-header {
  z-index: 1;
}
@media (width >= 1050px) {
  .circuit-tracks-packs .pack-header, .circuit-rhythm-packs .pack-header, .circuit-packs .pack-header {
    width: calc(100% - 280px);
  }
}
@media (width >= 1500px) {
  .circuit-tracks-packs .pack-header, .circuit-rhythm-packs .pack-header, .circuit-packs .pack-header {
    width: calc(100% - 880px);
  }
}
@media (min-width: 750px) {
  .librarian-browser:not(.is-mobile) ~ .circuit-tracks-packs .pack-header, .librarian-browser:not(.is-mobile) ~ .circuit-rhythm-packs .pack-header, .librarian-browser:not(.is-mobile) ~ .circuit-packs .pack-header {
    width: calc(100% - 300px);
  }
}
@media (min-width: 900px) {
  .librarian-browser:not(.is-mobile) ~ .circuit-tracks-packs .pack-header, .librarian-browser:not(.is-mobile) ~ .circuit-rhythm-packs .pack-header, .librarian-browser:not(.is-mobile) ~ .circuit-packs .pack-header {
    width: calc(100% - 400px);
  }
}
@media (width >= 1200px) {
  .librarian-browser:not(.is-mobile) ~ .circuit-tracks-packs .pack-header, .librarian-browser:not(.is-mobile) ~ .circuit-rhythm-packs .pack-header, .librarian-browser:not(.is-mobile) ~ .circuit-packs .pack-header {
    width: calc(100% - 610px);
  }
}

.pack-image {
  position: relative;
  height: 60px;
  width: 60px;
  min-width: 60px;
  background: rgba(227, 230, 239, 0.1019607843);
  border-radius: 0;
  transition: background 0.2s, color 0.2s;
  overflow: hidden;
  color: #0f0f10;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pack-image--light-text {
  color: #f2f6ff;
}
.user-pack .pack-image::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(150% 150% at 100% 100%, rgba(30, 31, 32, 0) 0%, #1e1f20 100%);
}
.pack-image__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.pack-settings__header .pack-image::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(150% 150% at 100% 100%, rgba(30, 31, 32, 0) 0%, #1e1f20 100%);
}

.pack-settings {
  position: fixed;
  top: 98px;
  right: 0;
  height: calc(100% - 98px);
  width: 100%;
  max-width: 500px;
  border-radius: 4px;
  z-index: 5;
  background: linear-gradient(0deg, rgba(227, 230, 239, 0.1019607843), rgba(227, 230, 239, 0.1019607843)), radial-gradient(429.64% 116.63% at 100% 100%, rgba(29, 45, 84, 0.8) 0%, rgba(18, 27, 51, 0.8) 100%);
  backdrop-filter: blur(10px);
}
.pack-settings__mask {
  position: fixed;
  z-index: 4;
  top: 98px;
  left: 0;
  height: calc(100% - 98px);
  width: 100%;
  backdrop-filter: blur(10px);
  background: rgba(21, 29, 45, 0.5019607843);
}
.pack-settings__header {
  display: flex;
  background: rgba(227, 230, 239, 0.1019607843);
}
.pack-settings__header .pack-image {
  margin: 10px;
  height: 120px;
  width: 120px;
}
.pack-settings__header .pack-image .icon {
  width: 64px;
  height: 64px;
}
.pack-settings__header .btn.is-deleting {
  background: none;
}
.pack-settings__info {
  flex-grow: 1;
  margin: 10px;
  margin-left: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.pack-settings__info .editable-value--input:focus {
  border-bottom: 1px solid #f2f2f2;
}
.pack-settings__delete-button {
  margin-top: 8px;
}
.pack-settings__delete-button-icon {
  margin-top: -1px;
}
.pack-settings__date {
  margin-top: 5px;
}
.pack-settings__body {
  margin: 10px;
}
.pack-settings__body select,
.pack-settings__body input {
  margin-bottom: 1em;
  width: 100%;
}
.pack-settings .color-picker__container {
  margin: 20px;
  border-radius: 2px;
  display: inline-block;
  background: rgba(227, 230, 239, 0.1019607843);
}
.pack-settings .color-picker__container ul.color-picker {
  margin: 15px;
  margin-left: 25px;
}

.standalone-recommendation-notice {
  margin-bottom: 30px;
}
.standalone-recommendation-notice p {
  margin: 10px 0;
}
.standalone-recommendation-notice p > b {
  font-weight: 400;
}

.firmware-updater {
  margin: 80px 0 128px;
  width: 624px;
  padding: 0 24px;
  text-align: center;
}
.firmware-updater__user-confirmation-render-modal .modal__body {
  padding-bottom: 10px;
}
.firmware-updater__loader {
  margin: 20px;
}
.firmware-updater .button {
  display: inline;
}
.firmware-updater .button + .button {
  margin-left: 1em;
}
.firmware-updater__main-heading {
  color: #e3e6ef;
  font-size: 2.5rem;
}
.firmware-updater h4 {
  color: #c5c8cf;
  margin-top: 16px;
}
.firmware-updater__product-name {
  white-space: nowrap;
}
.firmware-updater__firmware-ready-to-install {
  margin-bottom: 4px;
}
.firmware-updater__current-version {
  color: #b6b8bf;
  margin-bottom: 16px;
  font-family: "TTNormsProRegular", roboto, freesans, arial, "system-ui", sans-serif;
  font-weight: 400;
  font-size: 0.8125rem;
  line-height: 1.28;
}
.firmware-updater p {
  line-height: 1.28;
}
.firmware-updater .firmware-up-to-date + p {
  color: #f2f6ff;
  margin-bottom: 16px;
}
.firmware-updater__help-me-connect-button.button {
  display: inline-block;
}
.firmware-updater .reinstall-firmware-button.button {
  display: inline-block;
}
.firmware-updater .reinstall-firmware-button.button svg.icon {
  margin-right: 8px;
}
.firmware-updater__how-to-update-modal .modal__body p {
  max-width: 438px;
}
.firmware-updater__user-confirmation-product-render {
  margin: 0 -16px -16px;
  max-width: calc(100% + 32px);
}

.firmware-help {
  padding: 10px;
}
.firmware-help__container {
  margin: 10px 0;
  padding: 0;
}
.firmware-help__container.show-help .animated-container {
  overflow: hidden;
  background: rgba(76, 77, 80, 0.9019607843);
  border-radius: 2px;
  border: 1px solid #7a7b80;
}
.firmware-help__container.show-help .toggle-firmware-help {
  margin-bottom: 10px;
}
.firmware-help__container .contact-technical-support {
  margin-top: 20px;
}
.firmware-help__toggle-button.button {
  padding: 0;
}
.firmware-help__toggle-button.button > .chevron {
  transform: rotate(0deg);
  transition: transform 0.2s;
}
.show-help .firmware-help__toggle-button.button > .chevron {
  transform: rotate(-90deg);
}

.line-drawing {
  text-align: center;
}

.reboot-to-bootloader-message {
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
  border-radius: 10px;
  background: #797979;
  border: 1px solid #444;
  box-shadow: 0 0 10px #000;
  color: #f2f2f2;
}
.reboot-to-bootloader-message .svg-container {
  max-width: 400px;
  margin: auto;
}

.low-level-release-notes {
  margin: 8px -8px;
  padding: 8px;
}
.low-level-release-notes:last-child {
  margin-bottom: 0;
}
.low-level-release-notes summary {
  color: #a6a9af;
  cursor: pointer;
  margin: 2px 0 8px;
}
.low-level-release-notes summary:hover {
  color: #d4d7df;
}
.low-level-release-notes summary .icon {
  transition: transform 0.1s;
  margin-top: -1px;
}
.low-level-release-notes[open] {
  background-color: rgba(227, 230, 239, 0.0509803922);
  border: 1px solid rgba(227, 230, 239, 0.1490196078);
  border-radius: 4px;
  margin-bottom: 8px;
  padding: 7px 7px 0;
}
.low-level-release-notes[open] summary {
  color: #d4d7df;
}
.low-level-release-notes[open] summary .icon {
  transform: rotate(90deg);
}

.release-notes__date {
  position: absolute;
  left: -166px;
  width: 230px;
  padding: 24px 16px 0 24px;
}
.release-notes__date h4 {
  color: #f2f6ff;
  font-size: 1rem;
  line-height: 1.28;
  margin: 0;
  padding-top: 4px;
}
.release-notes__version:not(:first-child) {
  padding: 24px 0 0;
}
.release-notes__heading:not(:first-child) {
  margin-top: 42px;
}
.low-level-release-notes .release-notes__heading {
  margin-top: 38px;
}
.release-notes__heading h3 {
  color: #f2f6ff;
}
.release-notes__body {
  overflow-wrap: anywhere;
}
.release-notes__body h4 {
  color: #f2f6ff;
  font-size: 1rem;
  line-height: 1.28;
  margin: 0 0 10px;
}
.release-notes__body ol,
.release-notes__body ul {
  margin-bottom: 0;
}
.release-notes__body li {
  line-height: inherit;
}
.release-notes__body li:last-of-type {
  margin-bottom: 10px;
}
.release-notes__body p:last-of-type {
  margin-bottom: 10px;
}
.release-notes__link {
  margin-bottom: 64px;
}

.text-page-container.firmware-updater-container .main-section__inner {
  background-color: transparent;
  width: 752px;
}
.text-page-container.firmware-updater-container .main-section__inner .release-notes {
  width: 626px;
}
.text-page-container.firmware-updater-container .main-section__inner .release-notes__version {
  background-color: rgba(227, 230, 239, 0.0509803922);
  border-radius: 6px;
  border: 1px solid rgba(227, 230, 239, 0.1490196078);
  margin: 0 0 64px;
  padding: 24px 24px 0;
}
.text-page-container.firmware-updater-container .main-section__inner .release-notes .low-level-release-notes {
  margin-left: -16px;
  margin-right: -16px;
  padding-left: 16px;
  padding-right: 16px;
}
.text-page-container.firmware-updater-container .main-section__inner .release-notes .low-level-release-notes[open] {
  padding-left: 15px;
  padding-right: 15px;
}
.text-page-container.firmware-updater-container .main-section__inner .release-notes .low-level-release-notes summary {
  margin: 8px 0;
}

.low-level-release-notes-text {
  padding: 0.375rem 0 0;
  display: block;
  color: #ededed;
  overflow-wrap: anywhere;
}

.modal__body p:last-of-type.firmware-update-success-message {
  margin-bottom: 24px;
}

.generic-progress-display__time-remaining {
  font-size: 0.8125rem;
  margin-top: 10px;
  margin-bottom: 14px;
}

.loader {
  display: flex;
  justify-content: center;
  opacity: 0.9;
  transform: scale(2);
  overflow: hidden;
}
.modal .loader {
  margin: 40px 90px;
}
.loader__svg {
  animation: rotate 2s linear infinite;
  width: 100px;
  height: 100px;
}
.loader__path {
  fill: none;
  stroke: #f2f6ff;
  stroke-width: 2px;
  stroke-linecap: round;
  animation: animate-stroke3 2s ease-in-out infinite, colour-pulse 2s ease-in-out infinite;
  animation-delay: 0s, 0s;
}
.loader__path:nth-of-type(2) {
  stroke: #e3e6ef;
  animation: animate-stroke1 1s ease-in-out infinite, colour-pulse 2s ease-in-out infinite;
  animation-delay: 0s, 0.2s;
}
.loader__path:nth-of-type(3) {
  stroke: #d4d7df;
  animation: animate-stroke2 1.5s ease-in-out infinite, colour-pulse 2s ease-in-out infinite;
  animation-delay: 0s, 0.1s;
}
.loader__explode {
  fill: none;
  stroke: #7d9ff8;
  stroke-width: 2px;
  transform-origin: center;
  opacity: 0;
  animation: out-pulse 2s ease-out infinite;
  animation-delay: 0.35s;
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes animate-stroke1 {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124;
  }
}
@keyframes animate-stroke2 {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -93;
  }
}
@keyframes animate-stroke3 {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -61;
  }
}
@keyframes colour-pulse {
  0% {
    stroke: #f2f6ff;
  }
  7% {
    stroke: #7d9ff8;
  }
  20% {
    stroke: #f2f6ff;
  }
}
@keyframes out-pulse {
  0% {
    opacity: 1;
  }
  50%, 100% {
    stroke: #051b54;
    transform: scale(2);
    opacity: 0;
  }
}
details summary {
  color: #a6a9af;
  cursor: pointer;
  transition: color 0.2s ease-in-out;
}
details summary:hover {
  color: #d4d7df;
}
details summary .icon {
  transition: transform 0.1s;
  margin-top: -1px;
}
details[open] summary {
  color: #d4d7df;
}
details[open] summary .icon {
  transform: rotate(90deg);
}

.my-device {
  background: rgba(226, 229, 238, 0.0509803922);
  border: 1px solid rgba(227, 230, 239, 0.3019607843);
  justify-self: center;
  margin: 16px;
  width: calc(100% - 32px);
  border-radius: 2px;
  padding: 8px;
  display: flex;
  flex-direction: column;
}
.my-device__button-container {
  background: rgba(227, 230, 239, 0.0705882353);
  border: 1px solid rgba(227, 230, 239, 0.1019607843);
  border-radius: 2px;
  display: flex;
  transition: background 0.1s, border 0.1s;
}
.my-device__button-container:hover {
  background: rgba(227, 230, 239, 0.1019607843);
}
.my-device__button-container.active {
  background: rgba(227, 230, 239, 0.2);
  border: 1px solid rgba(227, 230, 239, 0.2);
}
.my-device__button {
  padding: 4px 8px 6px;
  flex-grow: 1;
  background: transparent;
  border: none;
  text-align: left;
  text-decoration: none;
}
.my-device__button-title {
  color: #f2f6ff;
}
.my-device__button-device {
  color: #d4d7df;
  display: flex;
  align-items: center;
}
.my-device__status::after {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 4px;
  margin-left: 4px;
  margin-top: -1px;
}
.my-device__status--ready::after {
  background: #25ac7b;
}
.my-device__status--needs-mode-change::after, .my-device__status--needs-firmware-update::after, .my-device__status--firmware-update-in-progress::after, .my-device__status--connection-error::after, .my-device__status--connecting::after {
  background: #ce9f27;
}
.my-device__status--offline::after {
  background: #ac2525;
}
.my-device__expand-button {
  padding: 4px 8px 6px;
  background: transparent;
  border: none;
  color: #d4d7df;
}
.my-device__expand-button svg.icon {
  transition: all 0.1s;
  border-radius: 2px;
}
.my-device__expand-button:hover {
  color: #e3e6ef;
}
.my-device__expand-icon-container {
  border-radius: 2px;
  transition: background 0.1s;
}
.my-device__expand-button:hover .my-device__expand-icon-container {
  background: rgba(227, 230, 239, 0.2);
}
.my-device__content-container {
  overflow: hidden;
}

.librarian-browser .my-device-content ul {
  margin: 8px 0 6px;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.librarian-browser .my-device-content ul li {
  background: none;
  color: #d4d7df;
  margin: 0;
}
.librarian-browser .my-device-content ul li a {
  height: unset;
}
.librarian-browser .my-device-content ul li a.button--tertiary,
.librarian-browser .my-device-content ul li button.button--tertiary {
  color: #d4d7df;
}
.librarian-browser .my-device-content ul li a:hover,
.librarian-browser .my-device-content ul li button:hover {
  color: #e3e6ef;
  background: rgba(227, 230, 239, 0.0705882353);
}
.librarian-browser .my-device-content > ul {
  margin: 6px 0 0;
}
.librarian-browser .my-device-content__custom-modes-list ul {
  margin-top: 0;
  margin-bottom: 2px;
}
.librarian-browser .my-device-content__custom-modes-list ul li {
  font-family: "TTNormsProRegular", roboto, freesans, arial, "system-ui", sans-serif;
  font-size: 1rem;
  line-height: 1.375;
  font-weight: 400;
}
.my-device-content__list-item {
  display: flex;
  gap: 10px;
  padding: 4px;
  border-radius: 2px;
  align-items: center;
  font-family: "TTNormsProDemiBold", roboto, freesans, arial, "system-ui", sans-serif;
  font-weight: 700;
}
.my-device-content__list-item--expandable {
  display: block;
}
.my-device-content__list-item .expand-icon {
  margin-right: 8px;
}
.my-device-content__list-item.button--tertiary {
  width: 100%;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.my-device-content__list-item.button--tertiary span {
  display: flex;
  gap: 10px;
  align-items: center;
}
.my-device-content__list-indent--8 {
  margin-left: 8px;
}
.my-device-content__list-indent--12 {
  margin-left: 12px;
}

.btn {
  display: inline-block;
  border: none;
  padding: 0.1875rem 0.375rem;
  font-size: 1rem;
  font-style: normal;
  background: none;
  background-color: #595959;
  color: #fff;
  font-weight: 200;
  transition: background 300ms ease;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.5rem;
  border-radius: 3px;
}
.btn--active, .btn:hover, .btn:active, .btn.active {
  text-decoration: underline;
}
.btn--active span, .btn:hover span, .btn:active span, .btn.active span {
  text-decoration: underline;
}
.btn[disabled], .btn.disabled {
  pointer-events: none;
  background-color: #909090;
  color: #242428;
  opacity: 0.8;
}
.btn__icon {
  background: transparent;
  color: inherit;
}
.btn__inner {
  width: 100%;
  height: 100%;
  padding: 0.1875rem 0.75rem;
  display: inline-block;
}
.btn--tool-icon {
  width: 40px;
  height: 40px;
  padding: 2px;
  background: none;
}
.btn--tool-icon.active {
  color: #f2f2f2;
}

.tab-bar::before, .tab-bar::after {
  content: " ";
  display: table;
}
.tab-bar::after {
  clear: both;
}
.tab-bar--tab {
  float: left;
  display: block;
  border-radius: 0;
  border-left: 1px solid #488fbb;
}
.tab-bar--tab__active {
  background-color: #488fbb;
}
.tab-bar--tab:first-child {
  border-left: none;
  border-radius: 3px 0 0 3px;
}
.tab-bar--tab:last-child {
  border-radius: 0 3px 3px 0;
}
.tab-bar--tab__half {
  width: 50%;
}

.btn-row-spread {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

/* NEW DESIGN SYSTEM */
@property --button-primary-gradient-start {
  syntax: "<color>";
  initial-value: #082c8d;
  inherits: false;
}
@property --button-primary-gradient-end {
  syntax: "<color>";
  initial-value: #0c47e1;
  inherits: false;
}
.button {
  display: flex;
  padding: 8px 32px;
  justify-content: center;
  text-align: center;
  border-radius: 2px;
  align-items: center;
  border: 1px solid #c5c8cf;
  background: none;
  text-decoration: none;
  cursor: pointer;
  width: max-content;
  line-height: 20px;
  white-space: nowrap;
}
.button-stack .button {
  margin: 8px 0 16px;
  width: 100%;
}
.button:hover {
  text-decoration: none;
}
.button:hover:not(:disabled, .disabled) {
  color: #f2f6ff;
}
.button.disabled, .button:disabled, .button.disabled:hover, .button:disabled:hover {
  opacity: 0.5;
  pointer-events: none;
  text-decoration: none;
}
.button--with-icon {
  padding-top: 6px;
  padding-bottom: 6px;
}
.button--with-icon .fa,
.button--with-icon .icon {
  margin-right: 8px;
}
.button--with-right-icon {
  padding-top: 6px;
  padding-bottom: 6px;
}
.button--with-right-icon .fa,
.button--with-right-icon .icon {
  margin-left: 8px;
}
.button--primary {
  --button-primary-gradient-start: #082c8d;
  --button-primary-gradient-end: #0c47e1;
  background: radial-gradient(100% 1237.1% at 100% 100%, var(--button-primary-gradient-start) 0%, var(--button-primary-gradient-end) 100%);
  border: none;
  color: #e3e6ef;
  transition: --button-primary-gradient-start 0.1s, color 0.1s, opacity 0.2s;
  transition-timing-function: ease-in-out;
}
.button--primary:hover {
  --button-primary-gradient-start: #0c47e1;
  color: #f2f6ff;
}
.button--primary.disabled, .button--primary:disabled, .button--primary.disabled:hover, .button--primary:disabled:hover {
  background: radial-gradient(100% 1237.1% at 100% 100%, #082c8d 0%, #0c47e1 100%);
}
.button--centered {
  margin-left: auto;
  margin-right: auto;
}
.button--secondary {
  border: 1px solid #c5c8cf;
  background: none;
  color: #c5c8cf;
  transition: color 0.2s, border-color 0.2s;
}
.button--secondary:hover:not(:disabled, .disabled) {
  border: 1px solid #f2f6ff;
  color: #f2f6ff;
}
.button--secondary-compact {
  border: 1px solid #c5c8cf;
  background: none;
  color: #c5c8cf;
  padding: 4px 8px;
  font-family: "TTNormsProRegular", roboto, freesans, arial, "system-ui", sans-serif;
  font-weight: 400;
  font-size: 0.8125rem;
  line-height: 1.28;
}
.button--secondary-compact:hover:not(:disabled, .disabled) {
  border: 1px solid #f2f6ff;
  color: #f2f6ff;
}
.button--tertiary {
  padding: 6px 16px;
  border: none;
  background: none;
  color: #c5c8cf;
}
.button--tertiary-compact {
  border: none;
  font-size: 13px;
  line-height: 17px;
  color: #c5c8cf;
  padding: 2px;
}
.button--tertiary-compact.button--with-icon .fa,
.button--tertiary-compact.button--with-icon .icon {
  margin-right: 4px;
}
.button--tertiary-compact.button--with-right-icon .fa,
.button--tertiary-compact.button--with-right-icon .icon {
  margin-left: 4px;
}
.button--tertiary-inline {
  display: inline;
  padding: 0;
  margin: 0;
  color: #c5c8cf;
}
.button--legacy-replace {
  width: 64px;
  height: 64px;
  background: none;
  border: 1px solid #c5c8cf;
  color: #c5c8cf;
  box-sizing: border-box;
  border-radius: 2px;
  flex-direction: column;
  justify-content: space-evenly;
  padding: 8px 6px 4px;
  font-size: 0.8125rem;
  line-height: 15.99px;
}
.button--legacy-replace svg path {
  fill: currentcolor;
}
.button--legacy-replace:hover:not(:disabled, .disabled) {
  border: 1px solid #f2f6ff;
}

.undo-redo-buttons {
  display: flex;
}
.undo-redo-buttons__button--undo, .undo-redo-buttons__button--redo {
  margin-left: 8px;
  padding: 6px 0;
}
.undo-redo-buttons__button--undo .icon, .undo-redo-buttons__button--redo .icon {
  margin-top: -2px;
}
.undo-redo-buttons__button--redo {
  margin-right: 16px;
}

.auth-widget {
  cursor: pointer;
  text-decoration: none;
  color: #d4d7df;
}
.auth-widget:hover {
  color: #f2f6ff;
}
.auth-widget__disabled.top-nav--nav-link {
  cursor: default;
}
.auth-widget__disabled.top-nav--nav-link:hover {
  color: #d4d7df;
}
.auth-widget__icon {
  display: none;
}
.main-menu .auth-widget__icon {
  display: inline-block;
}

.top-bar {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  background: linear-gradient(0deg, rgba(227, 230, 239, 0.1490196078), rgba(227, 230, 239, 0.1490196078)), radial-gradient(100% 1697.81% at 100% 1630.23%, rgba(29, 45, 84, 0.8) 0%, rgba(14, 20, 38, 0.8) 100%);
  color: #f2f2f2;
  flex-shrink: 0;
  height: 48px;
  backdrop-filter: blur(10px);
}
.top-bar__hub-page {
  background: radial-gradient(100% 1725.77% at 100% 1606.98%, rgba(29, 45, 84, 0.8) 0%, rgba(10, 15, 28, 0.8) 100%);
}
.top-bar__inner {
  position: relative;
  padding: 0 16px;
  display: flex;
  align-items: center;
  height: 48px;
}
.top-bar__device-indicator button {
  margin-top: 2px;
}
.top-bar__left, .top-bar__center, .top-bar__right {
  display: flex;
  align-items: center;
}
.top-bar__left, .top-bar__right {
  min-width: 100px;
}
@media (min-width: 750px) {
  .top-bar__left, .top-bar__right {
    min-width: 210px;
  }
}
@media screen and (width <= 1369px) {
  .top-bar #browser-toggle-container {
    min-width: 67px;
  }
}
.top-bar__right {
  justify-content: flex-end;
}
.top-bar__center {
  flex-grow: 1;
  justify-content: center;
  font-weight: 400;
  margin: 0 10px;
}
.top-bar__auth-widget {
  position: absolute;
  bottom: 0.75rem;
  right: 1.5rem;
}
.top-bar__home-button {
  background: none;
  border: none;
  color: #d4d7df;
}
.top-bar__home-button:hover {
  color: #f2f6ff;
}
.top-bar__home-button--left {
  display: flex;
  flex-direction: row;
  text-decoration: none;
}
.top-bar__novation-logo {
  height: 30px;
}
.top-bar__novation-logo path {
  fill: currentcolor;
}
.top-bar__product-name {
  display: block;
  margin: auto 16px;
  text-decoration: none;
  white-space: nowrap;
}
.top-bar__product-name:hover {
  color: #f2f6ff;
}
.top-bar__sub-nav {
  white-space: nowrap;
  padding: 0 8px;
  height: 100%;
  position: relative;
}
.top-bar__sub-nav li.sub-nav--nav-entry {
  display: inline-block;
  padding: 0 6px;
}
.top-bar__sub-nav li.sub-nav--nav-entry > a {
  background: none;
  padding-left: 0;
  text-decoration: none;
  color: #d4d7df;
}
.top-bar__sub-nav li.sub-nav--nav-entry > a:hover {
  color: #f2f6ff;
}
.top-bar__sub-nav li.sub-nav--nav-entry > a.active {
  color: #f2f6ff;
  font-family: "TTNormsProDemiBold", roboto, freesans, arial, "system-ui", sans-serif;
  font-weight: 700;
}
.top-bar__user-menu-toggle {
  margin-left: 16px;
}
.top-bar__user-menu.drop-down-menu {
  position: fixed;
  top: 0;
  right: 0;
  margin-top: 48px;
}
.top-bar .auth-widget {
  margin-left: 16px;
}

.main-section {
  margin-top: 48px;
  min-height: calc(100vh - 48px);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-bottom: 100px;
}
.main-section__inner {
  margin: 0 auto;
  width: 100%;
  max-width: 980px;
  padding: 0.5rem 1.5rem;
  position: relative;
  min-height: calc(100vh - 98px);
  flex-grow: 1;
}
.main-section__inner.circuit, .main-section__inner.monostation {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.main-section .help-page {
  width: 674px;
}
.main-section .help-page__main-heading {
  margin-top: 72px;
  text-align: center;
  font-size: 2.5rem;
}
.main-section .help-page__secondary-heading {
  text-align: center;
  color: #c5c8cf;
  margin-bottom: 128px;
}
.main-section .help-page__links-container {
  position: fixed;
  top: 363px;
  right: 60vw;
  display: flex;
  width: 256px;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
@media screen and (width <= 3300px) {
  .main-section .help-page__links-container {
    right: 65vw;
  }
}
@media screen and (width <= 2200px) {
  .main-section .help-page__links-container {
    right: 70vw;
  }
}
@media screen and (width <= 1800px) {
  .main-section .help-page__links-container {
    right: 77vw;
  }
}
@media screen and (width <= 1200px) {
  .main-section .help-page__links-container {
    position: static;
    width: 100%;
    margin-bottom: 64px;
  }
}
.main-section .help-page__links-container h4 {
  margin-bottom: 0;
}
.main-section .help-page__links-container__more {
  list-style: none;
}
.main-section .help-page__link {
  text-decoration: none;
  display: flex;
  padding: 8px 16px;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  border-radius: 2px;
  border: 1px solid rgba(227, 230, 239, 0.1490196078);
  background: rgba(226, 229, 238, 0.0509803922);
}
.main-section .help-page__link:hover {
  background: rgba(227, 230, 239, 0.1019607843);
  border: 1px solid rgba(227, 230, 239, 0.2);
}
.main-section .help-page .footer-section__list {
  list-style: none;
  margin: 0;
  padding: 0;
  padding-bottom: 24px;
}
.main-section .help-page .footer-section__list li {
  padding-bottom: 8px;
}
.main-section .help-page__section {
  padding: 24px 24px 0;
  border-radius: 6px;
  border: 1px solid rgba(227, 230, 239, 0.1490196078);
  background: rgba(226, 229, 238, 0.0509803922);
  margin-bottom: 64px;
}
.main-section .help-page__section h4 {
  font-size: 1.6875rem;
  color: #f2f6ff;
}
.home-page .main-section__inner {
  max-width: 904px;
}
@media screen and (width <= 904px) {
  .home-page .main-section__inner {
    max-width: 424px;
  }
}
.main-section__nav-wrapper {
  overflow: hidden;
  background-color: #488fbb;
  border-bottom: 8px solid #165090;
}
.main-section__nav-wrapper-inner {
  margin: 0 auto;
  width: 100%;
  max-width: 980px;
  position: relative;
  padding: 0.75rem 1.5rem;
}
@media (min-width: 750px) {
  .main-section__nav-wrapper-inner {
    padding-top: 0;
    padding-bottom: 0;
  }
}
.main-section__main-nav, .main-section__secondary-nav {
  margin-bottom: 0;
  list-style-type: none;
  margin-left: 0;
  padding-left: 0;
  line-height: 1.2em;
}
.main-section__main-nav-link {
  position: relative;
  margin-right: 1.5rem;
  font-weight: 200;
  color: white;
  transition: all 300ms ease;
  display: inline-block;
  line-height: 1.2em;
}
.main-section__main-nav-link.no-underline:hover::after {
  opacity: 0;
}
.main-section__main-nav-link:hover, .main-section__main-nav-link.active {
  color: #fff;
}
.main-section__main-nav-link:hover::after, .main-section__main-nav-link.active::after {
  opacity: 1;
}
.main-section__main-nav-link svg {
  max-width: 1.875rem;
  position: absolute;
  display: block;
  left: 0;
  margin-top: 0.75rem;
  top: -0.375rem;
  cursor: pointer;
  pointer-events: none;
}
.main-section__main-nav-link:not(.active) svg .bg {
  fill: none;
}
.main-section__main-nav-a {
  text-decoration: none;
  cursor: pointer;
  padding-left: 2.25rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  display: block;
}
.main-section__main-nav-a:hover {
  text-decoration: underline;
}
.main-section__main-nav-link-label {
  cursor: pointer;
}
.main-section__main-nav-btn {
  margin-right: 0.375rem;
}

.sub-nav--section {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.sub-nav--nav-entry {
  padding-left: 0;
  margin-top: 8px;
  margin-bottom: 8px;
}
.sub-nav--link-label {
  vertical-align: middle;
}
.sub-nav--nav-link {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
}
.sub-nav--nav-link::before {
  display: block;
  content: attr(title);
  height: 0;
  overflow: hidden;
  visibility: hidden;
  font-family: "TTNormsProDemiBold", roboto, freesans, arial, "system-ui", sans-serif;
  font-weight: 700;
}
.sub-nav--nav-link > .icon {
  margin-right: 8px;
  display: none;
}
.main-menu .sub-nav--nav-link > .icon {
  display: inline-block;
}
.sub-nav--nav-link > .icon.afx path {
  fill: currentcolor;
}
.sub-nav--nav-link.active {
  color: #f2f6ff;
  font-family: "TTNormsProDemiBold", roboto, freesans, arial, "system-ui", sans-serif;
  font-weight: 700;
}
.sub-nav--nav-link:hover {
  color: #f2f6ff;
}
.sub-nav--nav-link-with-badge {
  position: relative;
}

.device-status {
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  border-radius: 2px;
  background: #ccc;
  height: 28px;
  line-height: 28px;
  margin: 0 0 0.5rem 0;
  transition: all 0.2s ease-out;
}
.device-status__container {
  position: relative;
  min-width: 130px;
}
.device-status--message {
  flex-grow: 1;
  padding: 0 1.5rem;
  font-size: 0.8125rem;
}
.device-status--connect-button {
  transition: all 0.2s ease-out;
  display: block;
  border-radius: 2px;
  line-height: 28px;
  padding: 0 0.75rem;
  color: #fff;
  text-decoration: none;
}
.device-status--links {
  padding: 0 0.75rem;
}
.device-status--connect-button-text {
  display: block;
}
.device-status--connect-button-text::before {
  content: "";
  display: block;
  float: left;
  position: relative;
  left: -0.3rem;
  top: 6px;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background-color: transparent;
  border: 3px solid white;
}
.device-status.needs-mode-change {
  background: #f8e2ca;
}
.device-status.needs-mode-change .device-status--connect-button {
  background: #f19e3c;
}
.device-status.ready {
  height: 22px;
  line-height: 22px;
  background: #d0ebb3;
}
.device-status.ready .device-status--connect-button {
  line-height: 22px;
  background: #d0ebb3;
  color: #000;
}
.device-status.ready .device-status--connect-button-text::before {
  display: none;
}
.device-status.ready.changed {
  height: 28px;
  line-height: 28px;
}
.device-status.ready.changed .device-status--connect-button {
  line-height: 28px;
  background: #74af4f;
  color: #fff;
}
.device-status.ready.changed .device-status--connect-button-text::before {
  display: block;
}

.device-status-button {
  margin-left: auto;
  border: none;
  border-radius: 32px;
  background: none;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 8px 16px;
  height: 30px;
  color: #e3e6ef;
  transition: color 0.1s, background 0.1s, border 0.1s;
  font-size: 0.6875rem;
  line-height: 1.28;
}
.device-status-button:hover {
  color: #f2f6ff;
}
.device-status-button--ready, .device-status-button--needs-firmware-update, .device-status-button--firmware-update-in-progress, .device-status-button--needs-mode-change, .device-status-button--connection-error, .device-status-button--connecting {
  background: rgba(91, 92, 96, 0.6);
}
.device-status-button--ready:hover, .device-status-button--needs-firmware-update:hover, .device-status-button--firmware-update-in-progress:hover, .device-status-button--needs-mode-change:hover, .device-status-button--connection-error:hover, .device-status-button--connecting:hover {
  background: rgba(106, 108, 112, 0.6);
}
.device-status-button--offline {
  border: 1px solid #6a6c70;
}
.device-status-button--offline:hover {
  border: 1px solid #888a8f;
}
.device-status-button::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 8px;
  margin-left: 8px;
  margin-top: 0;
}
.device-status-button--ready::after {
  background: #25ac7b;
}
.device-status-button--needs-mode-change::after, .device-status-button--needs-firmware-update::after, .device-status-button--firmware-update-in-progress::after, .device-status-button--connection-error::after, .device-status-button--connecting::after {
  background: #ce9f27;
}
.device-status-button--offline::after {
  background: #ac2525;
}

.midi-connection-error {
  position: absolute;
  padding: 20px;
  background: #a22c2c;
  border-radius: 4px;
  z-index: 100;
  right: 0;
  box-shadow: 0 0 25px 3px #000;
  width: 300px;
  top: 35px;
  margin-right: 30px;
}
.midi-connection-error__heading {
  display: flex;
  align-items: center;
}
.midi-connection-error__icon.icon {
  margin-right: 4px;
}
.midi-connection-error p {
  margin-bottom: 0;
}
.midi-connection-error .arrow-up {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #a22c2c;
  position: absolute;
  margin-top: -30px;
  right: 25px;
}

.device-settings {
  width: 470px;
}
.device-settings__full-width-image {
  margin: -16px;
  margin-bottom: 6px;
  width: calc(100% + 32px);
  max-width: calc(100% + 32px);
}
.device-settings .modal__body p {
  max-width: none;
}
.device-settings button.button--primary:only-child {
  margin-left: auto;
}

.device-box {
  background-color: transparent;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  margin-bottom: 24px;
  height: 195px;
}

.circuit-box {
  background-image: url("images/svgs/circuit-line-drawing.svg");
}

.circuit-tracks-box {
  background-image: url("images/svgs/circuit-tracks-line-drawing.svg");
}

.circuit-rhythm-box {
  background-image: url("images/svgs/circuit-rhythm-line-drawing.svg");
}

.peak-box {
  width: 385px;
  background-image: url("images/svgs/peak-line-drawing.svg");
}

.summit-box {
  width: 384px;
  height: 120px;
  background-image: url("images/svgs/summit-line-drawing.svg");
}

.monostation-box {
  background-image: url("images/svgs/circuit-mono-station-line-drawing.svg");
}

.sl-mkiii-box {
  width: 385px;
  height: 143px;
  background-image: url("images/svgs/sl-mkiii-line-drawing.svg");
}

.bass-station-ii-box {
  background-image: url("images/svgs/bass-station-ii-line-drawing.svg");
}

.launchkey-mini-mk3-box {
  background-image: url("images/svgs/launchkey-mini-mk3-line-drawing.svg");
  margin-bottom: 8px;
}

.launchkey-mk3-box {
  background-image: url("images/svgs/launchkey-mk3-line-drawing.svg");
  margin-bottom: 8px;
}

.launchkey-mini-mk4-box {
  background-image: url("images/svgs/launchkey-mini-mk4-line-drawing.svg");
  margin: 16px 48px 30px;
}

.launchkey-mini-mk4-37-box {
  background-image: url("images/svgs/launchkey-mini-mk4/launchkey-mini-mk4-37-line-drawing.svg");
  height: 128px;
}

.launchkey-mini-mk4-25-box {
  background-image: url("images/svgs/launchkey-mini-mk4/launchkey-mini-mk4-25-line-drawing.svg");
  height: 178px;
}

.launchkey-mk4-box {
  background-image: url("images/svgs/launchkey-mk4-line-drawing.svg");
  margin: 16px 48px 30px;
}

.launchkey-mk4-61-box {
  background-image: url("images/svgs/launchkey-mk4/launchkey-mk4-61-line-drawing.svg");
  height: 100px;
}

.launchkey-mk4-49-box {
  background-image: url("images/svgs/launchkey-mk4/launchkey-mk4-49-line-drawing.svg");
  height: 123px;
}

.launchkey-mk4-37-box {
  background-image: url("images/svgs/launchkey-mk4/launchkey-mk4-37-line-drawing.svg");
  height: 152px;
}

.launchkey-mk4-25-box {
  background-image: url("images/svgs/launchkey-mk4/launchkey-mk4-25-line-drawing.svg");
  height: 184px;
}

.flkey-mini-box {
  background-image: url("images/svgs/flkey-mini-line-drawing.svg");
  margin-bottom: 8px;
}

.flkey-box {
  background-image: url("images/svgs/flkey-line-drawing.svg");
  margin-bottom: 8px;
}

.launchpad-mini-mk3-box {
  background-image: url("images/svgs/launchpad-line-drawing.svg");
}

.launchpad-pro-mk3-box {
  background-image: url("images/svgs/launchpad-pro-mk3-line-drawing.svg");
}

.launchpad-x-box {
  background-image: url("images/svgs/launchpad-line-drawing.svg");
}

.launch-control-mk1-box {
  background-image: url("images/svgs/launch-control-mk1-line-drawing.svg");
  height: 122px;
}

.launch-control-xl-mk2-box {
  background-image: url("images/svgs/launch-control-xl-mk2-line-drawing.svg");
}

.r-76gof-box {
  background-image: image-set(url("images/hub-card-renders/launch-control-xl-mk3.1x-fca9f7b2e1567f302a46d7404b941849.png") 1x, url("images/hub-card-renders/launch-control-xl-mk3.2x-aec1b8768eb247a0840980b54b9795dd.png") 2x);
}

.launch-control-xl-mk3-box {
  background-image: image-set(url("images/hub-card-renders/launch-control-xl-mk3.1x-fca9f7b2e1567f302a46d7404b941849.png") 1x, url("images/hub-card-renders/launch-control-xl-mk3.2x-aec1b8768eb247a0840980b54b9795dd.png") 2x);
}

.save-form__body {
  display: flex;
  flex-direction: column;
}

.ember-modal-dialog {
  z-index: 51;
  position: fixed;
}

.ember-modal-dialog.emd-in-place {
  position: static;
}

.ember-modal-wrapper.emd-static.emd-wrapper-target-attachment-center .ember-modal-dialog {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.ember-modal-wrapper.emd-animatable.emd-wrapper-target-attachment-center {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ember-modal-wrapper.emd-animatable.emd-wrapper-target-attachment-center .ember-modal-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
}

.ember-modal-wrapper.emd-animatable .ember-modal-dialog {
  position: relative;
}

.ember-modal-overlay {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 50;
}

.ember-modal-dialog {
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 0 10px #222;
  padding: 10px;
}

.ember-modal-overlay.translucent {
  background-color: rgba(128, 128, 128, 0.77);
}

.ember-modal-dialog {
  max-width: calc(100% - 72px);
  max-height: calc(100vh - 256px);
  overflow: hidden;
  min-width: 400px;
  height: auto;
  top: 128px;
  left: 50%;
  transform: translate(-50%);
  border-radius: 2px;
  border: 1px solid #7a7b80;
  padding: 0;
  box-shadow: none;
  background: none;
  backdrop-filter: blur(10px);
}
@media screen and (height <= 816px) {
  .ember-modal-dialog {
    top: 32px;
    max-height: calc(100vh - 64px);
  }
}

.ember-modal-overlay {
  z-index: 3000;
}
.ember-modal-overlay.translucent {
  background-color: transparent;
}
.ember-modal-wrapper:last-child .ember-modal-overlay.translucent {
  background-color: rgba(15, 15, 16, 0.6);
}

#modal-overlays {
  position: fixed;
  z-index: 10000;
}

.modal {
  display: flex;
  flex-direction: column;
}
@media screen and (height >= 1060px) {
  .modal {
    max-height: 800px;
  }
}
.modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 54px;
  color: #e3e6ef;
  background: rgba(45, 46, 48, 0.9019607843);
  position: sticky;
  top: 0;
  backdrop-filter: blur(10px);
}
.modal__header h4 {
  white-space: nowrap;
  margin: 0;
  display: flex;
  align-items: center;
}
.modal__header h4 .icon {
  margin-right: 8px;
  stroke-width: 2px;
}
.modal__close-button {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  margin: 8px 4px;
  padding: 2px;
  padding-bottom: 6px;
  font-size: 30px;
  background: none;
  color: #999;
  transition: color 0.1s;
  border: none;
}
.modal__close-button:only-child {
  margin-left: auto;
}
.modal__close-button:hover {
  color: #bbb;
}
.modal__body {
  color: #d4d7df;
  background: rgba(76, 77, 80, 0.9019607843);
  flex-grow: 1;
  max-height: calc(100vh - 380px);
  overflow: hidden auto;
}
@media screen and (height <= 816px) {
  .modal__body {
    max-height: calc(100vh - 188px);
  }
}
.modal__body p {
  max-width: 384px;
}
.modal__body p:last-of-type {
  margin-bottom: 16px;
}
.modal__body p:last-child {
  margin-bottom: auto;
}
.modal__footer {
  display: flex;
  justify-content: space-between;
  background: rgba(76, 77, 80, 0.9019607843);
  position: sticky;
  bottom: 0;
  backdrop-filter: blur(10px);
}
.modal__footer .button:not(:first-child) {
  margin-left: 24px;
}
.modal__footer .button--primary:only-child {
  margin-left: auto;
}
.modal__footer .margin-left-auto {
  margin-left: auto;
}
.modal__header, .modal__body, .modal__footer {
  padding: 16px;
}
.modal__header:empty, .modal__body:empty, .modal__footer:empty {
  padding: 0;
}
.modal__focus-trap {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.modal__focus-trap--no-focusring:focus {
  outline: none;
}

.bank-select__options {
  display: flex;
  gap: 8px;
  max-width: 366px;
  flex-wrap: wrap;
}
.bank-select__options .button {
  width: 100%;
  flex-grow: 1;
  flex-basis: 80px;
}
.bank-select__option {
  position: relative;
}
.bank-select__option--currently-loaded::after {
  content: "";
  background: #2bcc6b;
  position: absolute;
  top: 5px;
  right: 5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.bank-select--eight-columns .button {
  flex-basis: 38px;
  flex-grow: 0;
  padding: 8px;
}
.bank-select--seven-columns .bank-select__options {
  display: grid;
  grid-template-columns: repeat(7, auto);
}
.bank-select--seven-columns .bank-select__options .button {
  flex-basis: 38px;
  flex-grow: 0;
  padding: 8px;
}
.bank-select--seven-columns .bank-select__options .button.graphical-radio-button--selected {
  border: 1px solid transparent;
}

.grid-select-modal {
  width: 100%;
  max-width: 748px;
  height: 560px;
}
.grid-select-modal__warning-text {
  position: absolute;
  bottom: 14px;
  width: 100%;
  text-align: center;
  margin-left: -70px;
  padding: 10px;
  pointer-events: none;
}
.grid-select-modal__warning-text p {
  margin: auto;
}
.grid-select-modal--single-grid-effect {
  height: 378px;
}
.grid-select-modal--single-grid-effect .modal__body p {
  max-width: 100%;
}
.grid-select-modal .modal-container {
  height: 100%;
}
.grid-select-modal .modal-container .modal__body {
  height: calc(100% - 122px);
  max-height: 100%;
  display: flex;
  flex-direction: column;
}
.grid-select-modal .modal__focus-trap {
  height: 100%;
}
.grid-select-modal--send-grid-effects footer button.button--secondary {
  margin-left: auto;
}
.grid-select-modal .collection-grid {
  width: 100%;
  gap: 8px;
  margin: 0;
  margin-top: 30px;
  margin-bottom: 26px;
  padding: 0;
}
.grid-select-modal .collection-grid:first-child {
  margin-top: 10px;
}
.grid-select-modal .collection-grid:last-child {
  margin-bottom: 4px;
}
.grid-select-modal .collection-grid__page-header {
  margin-bottom: 8px;
  font-family: "TTNormsProRegular", roboto, freesans, arial, "system-ui", sans-serif;
  font-weight: 400;
  font-size: 0.8125rem;
  line-height: 1.28;
}
.grid-select-modal .collection-grid__page-header:not(:first-child) {
  margin-top: 12px;
}
.grid-select-modal .collection-grid__page-header + .collection-grid {
  margin-top: 4px;
}
.grid-select-modal button.grid-item.grid-item--has-content.grid-item--selected .grid-item--color-bar {
  background: #0c47e1;
}
.grid-select-modal button.grid-item:disabled.grid-item--has-content {
  opacity: 0.35;
}
.grid-select-modal__scroll-container {
  width: calc(100% + 16px);
  height: 100%;
  overflow: hidden;
  overflow-y: auto;
  padding: 0;
  margin: 15px 0 -15px;
  align-self: self-start;
}
.grid-select-modal__description {
  align-self: flex-start;
  margin-bottom: 0;
}
.modal .grid-select-modal__description {
  max-width: 100%;
}
.modal .grid-select-modal__description:last-of-type {
  margin-bottom: 0;
}
.grid-select-modal__overwrite-warning {
  margin: auto;
  align-self: center;
}
.grid-select-modal__back-button {
  padding: 6px 10px;
}

.drop-down-menu {
  position: absolute;
  padding: 8px;
  border-radius: 2px;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2509803922);
  backdrop-filter: blur(10px);
  background: #1f2738;
  color: #fff;
  z-index: 2;
}
.drop-down-menu__container {
  position: relative;
  display: inline-block;
  z-index: 1;
}
.drop-down-menu__align-right > .drop-down-menu {
  right: 0;
}
.drop-down-menu ul {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}
.drop-down-menu ul li {
  white-space: nowrap;
}
.drop-down-menu ul li a,
.drop-down-menu ul li button {
  text-decoration: none;
  padding-left: 8px;
  padding-right: 8px;
  transition: 0.1s;
  width: 100%;
  justify-content: flex-start;
}
.drop-down-menu ul li a:hover:not(.disabled, :disabled),
.drop-down-menu ul li button:hover:not(.disabled, :disabled) {
  color: #f2f6ff;
  text-decoration: none;
  background-color: rgba(227, 230, 239, 0.1019607843);
}
.drop-down-menu ul li a:hover:not(.disabled, :disabled) *,
.drop-down-menu ul li button:hover:not(.disabled, :disabled) * {
  color: inherit;
  text-decoration: inherit;
}
.drop-down-menu ul li .active {
  color: #f2f6ff;
}
.drop-down-menu ul li .btn {
  text-align: left;
  width: 100%;
}
.drop-down-menu__keyboard-shortcut {
  color: #a6a9af;
  padding-left: 40px;
  margin-left: auto;
}

.color-button {
  background: none;
  border: none;
  margin-top: 8px;
  width: 100%;
  text-align: left;
  padding: 4px;
  border-radius: 2px;
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 8px;
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}
.color-button:hover, .color-button--color-picker-open {
  background: rgba(227, 230, 239, 0.1019607843);
  color: #e3e6ef;
}
.color-button__selected-colors {
  display: inline-block;
  height: 24px;
  position: relative;
  pointer-events: none;
}
.color-button__selected-color {
  height: 24px;
  width: 24px;
  border-radius: 50%;
  border: 2px solid transparent;
  position: absolute;
  display: inline-block;
}
.color-button__selected-color-name {
  pointer-events: none;
}

.color-picker-dialog {
  z-index: 1000;
  border-radius: 2px;
  border: 1px solid rgba(227, 230, 239, 0.1019607843);
  backdrop-filter: blur(100px);
  box-shadow: 0 4px 13.8px 0 rgba(0, 0, 0, 0.2509803922);
  animation: transition-in-short 0.2s;
  animation-fill-mode: forwards;
  background: radial-gradient(429.64% 116.63% at 100% 100%, rgba(29, 45, 84, 0.85) 0%, rgba(10, 15, 28, 0.85) 100%), linear-gradient(0deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.15));
  background-color: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.color-picker-dialog ul {
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(var(--number-of-columns, 8), 1fr);
  gap: 8px;
}
.color-picker-dialog__item {
  list-style: none;
  margin: 0;
  width: 24px;
  height: 24px;
  position: relative;
}
.color-picker-dialog__item-input {
  appearance: none;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(255, 255, 255, 0.1490196078);
  vertical-align: middle;
  position: relative;
  cursor: pointer;
}
.color-picker-dialog__item-input::after {
  content: "";
  position: absolute;
  top: -4px;
  left: -4px;
  width: calc(100% + 8px);
  height: calc(100% + 8px);
  border: 2px solid transparent;
  box-sizing: border-box;
  border-radius: 50%;
  transition: border-color 0.2s;
}
.color-picker-dialog__item-input:checked {
  border-color: #0f0f10;
  box-shadow: 0 0 4px #171717;
}
.color-picker-dialog__item-input:checked::after {
  border-color: #f2f6ff;
}
.color-picker-dialog__special {
  margin: 24px 0 8px;
  font-weight: 600;
  font-size: 16px;
  line-height: 20.48px;
  letter-spacing: 0%;
  color: #f2f6ff;
}
.color-picker-dialog__led-off-button {
  background: none;
  border: none;
  color: #e3e6ef;
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 8px;
  border-radius: 2px;
  padding: 4px;
  transition: 0.1s;
}
.color-picker-dialog__led-off-button:hover {
  background: rgba(227, 230, 239, 0.1019607843);
}
.color-picker-dialog__led-off-button svg {
  border-radius: 50%;
  border: 2px solid transparent;
  box-sizing: content-box;
}
.color-picker-dialog__led-off-button--selected svg {
  border-color: #f2f6ff;
  box-shadow: 0 0 4px #171717;
}

.color-picker {
  list-style: none;
  display: flex;
  align-items: center;
  width: 305px;
  right: 0;
  flex-wrap: wrap;
  position: relative;
  margin: 0;
  padding: 3px;
  max-width: 100%;
}
.launchkey-mk3__sidebar .color-picker, .launchpad__widget-settings .color-picker, .launchpad__project-settings .color-picker {
  margin-top: 5px;
  margin-left: 12px;
  width: 244px;
  max-width: none;
}
.color-picker--item {
  position: relative;
  margin: 2px 9px;
  border-radius: 50%;
  width: 26px;
  height: 26px;
  transition: border-color 0.2s, box-shadow 0.2s;
  cursor: pointer;
  border: 2px solid transparent;
}
.launchkey-mk3__sidebar .color-picker--item, .launchpad__widget-settings .color-picker--item, .launchpad__project-settings .color-picker--item {
  margin: 2px 4px;
}
.launchpad__global-settings .color-picker--item {
  margin: 3px 5px;
}
.color-picker--item::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 2px solid transparent;
  border-radius: 50%;
  transition: border-color 0.2s;
}
.color-picker--item.selected {
  border-color: #f2f6ff !important;
  box-shadow: 0 0 4px #171717;
}
.color-picker--item.selected::after {
  border-color: #0f0f10;
}
.color-picker--item:focus {
  z-index: 1;
}
@media (min-width: 500px) {
  .color-picker--item:first-child {
    margin-left: -15px;
  }
  .color-picker--item:last-child {
    margin-right: -15px;
  }
  .launchkey-mk3__sidebar .color-picker--item:nth-child(15), .launchpad__widget-settings .color-picker--item:nth-child(15), .launchpad__project-settings .color-picker--item:nth-child(15) {
    margin-left: -15px;
  }
}
.color-picker-mobile__mask {
  position: fixed;
  display: flex;
  align-items: flex-end;
  margin-bottom: 100px;
  inset: 0;
}
.color-picker-mobile__container {
  width: 100%;
  max-width: 100%;
  display: flex;
  justify-content: center;
  z-index: 1;
  height: 110px;
  background: #242428;
  box-shadow: 0 0 18px #171717;
}
@media (min-width: 500px) {
  .color-picker-mobile__container {
    height: 100px;
  }
}
.color-picker-mobile__container .color-picker {
  width: 350px;
  max-width: 100%;
}
.color-picker-mobile .color-picker--item {
  margin: 3px 6px;
  padding-right: 9%;
  padding-bottom: 9%;
}
.color-picker-wrapper {
  z-index: 10;
  position: fixed;
  bottom: 0;
  width: 540px;
  text-align: center;
  background: rgba(61, 62, 64, 0.9019607843);
  backdrop-filter: blur(10px);
  padding: 20px;
  border: 1px solid #7a7b80;
  border-bottom: none;
  border-radius: 2px 2px 0 0;
}
.color-picker-wrapper .color-picker {
  margin-right: 35px;
  margin-left: 10px;
  width: 540px;
}
.color-picker-wrapper .color-picker--item {
  margin: 3px 5px;
  position: relative;
}
.color-picker-wrapper .color-picker--item:first-child {
  margin-left: -15px;
}
.color-picker-wrapper .color-picker--item:last-child {
  margin-right: -15px;
}
.color-picker-wrapper .color-picker--item:last-child::before {
  content: "×";
  color: #888a8f;
  font-size: 28px;
  line-height: 23px;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
}
.launchkey-mini-mk3 .color-picker-wrapper .color-picker--item:last-child::before {
  content: "";
}
.launchkey-mini-mk3 .color-picker-wrapper {
  width: 296px;
}
.color-picker-wrapper .drop-down-menu {
  box-shadow: none;
  position: relative;
  padding: 0;
  background: none;
  backdrop-filter: none;
}
.color-picker-wrapper__container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.progress-bar {
  position: relative;
  width: 100%;
  height: 1.5rem;
  border-radius: 2px;
  border: 1px solid #6a6c70;
  background-color: rgba(15, 15, 16, 0.6);
  padding: 4px;
}
.progress-bar__inner {
  position: relative;
  width: 100%;
  height: 100%;
}
.progress-bar__meter {
  background-color: #0c47e1;
  display: block;
  position: absolute;
  height: 100%;
  max-width: 100%;
  left: 0;
  top: 0;
  border-radius: 1px;
}

.remaining-space {
  position: relative;
  width: 100%;
  height: 25px;
  border: 1px solid #6a6c70;
  border-radius: 2px;
  margin: 4px 0;
  background-color: rgba(15, 15, 16, 0.6);
}
.remaining-space__inner {
  position: relative;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
}
.remaining-space__meter {
  background-color: #0c47e1;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  margin: 3px;
  border-radius: 1px;
}
.remaining-space__current-meter {
  background-color: #5d87f6;
  height: 100%;
  margin: 3px;
  border-radius: 1px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  box-sizing: content-box;
}

.spinner {
  width: 100%;
  text-align: center;
}
.spinner__bounce {
  width: 10px;
  height: 10px;
  background-color: #0c47e1;
  border-radius: 0;
  display: inline-block;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}
.spinner__bounce--1 {
  animation-delay: -0.32s;
}
.spinner__bounce--2 {
  animation-delay: -0.16s;
}

@keyframes sk-bouncedelay {
  0%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
    background-color: #0c47e1;
  }
}
.collection {
  position: relative;
}
.sl-mkiii .collection {
  width: calc(100% - 16px);
  margin: auto;
}

.sample-collection {
  position: relative;
}
.sl-mkiii .sample-collection {
  margin-right: 280px;
}
.sample-collection__remaining-space-bar {
  overflow: hidden;
}

.inline-progress-display {
  margin: 6rem auto;
  padding: 0.75rem;
  max-width: 400px;
  border: 1px solid #000;
}

.inline-error-message {
  margin: 6rem auto;
  padding: 0.75rem;
  max-width: 400px;
  border: 1px solid #000;
  font-weight: bold;
  text-align: center;
}

.new-content-badge {
  display: none;
  position: absolute;
  top: -2px;
  right: -16px;
  z-index: 10;
  background: #25ac7b;
  height: 8px;
  width: 8px;
  border-radius: 50%;
}
.new-content-badge__container {
  position: relative;
}
.new-content-badge__container .new-content-badge {
  top: 0;
  color: #fff;
}
.new-content-badge.new-firmware-badge {
  top: 4px;
  right: -8px;
}
.main-menu nav .new-content-badge.new-firmware-badge {
  top: 8px;
  right: 0;
}
.new-content-badge--active {
  display: block;
}

.flash-message {
  position: fixed;
  height: 38px;
  bottom: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: flash-message-hide 0.8s ease;
}
.flash-message--dismissing {
  animation: flash-message-dismiss 0.4s ease;
}
.flash-message--show {
  animation: flash-message-show 0.3s ease;
}
.flash-message__text {
  height: 38px;
  border-radius: 2px;
  background-color: #0c47e1;
  color: #f2f6ff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.7490196078);
}
.flash-message__text--wiggle {
  animation: shake 0.25s ease-out;
}

@keyframes flash-message-show {
  0% {
    opacity: 0;
    transform: perspective(450px) translate(0, 20px);
  }
  100% {
    opacity: 1;
    transform: perspective(450px) translate(0, 0);
  }
}
@keyframes flash-message-hide {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes flash-message-dismiss {
  0% {
    opacity: 1;
  }
  100% {
    transform: scale(0.9);
    opacity: 0;
  }
}
@keyframes shake {
  25% {
    transform: translate3d(-1px, 0, 0);
    animation-timing-function: ease-out;
  }
  50% {
    transform: translate3d(2px, 0, 0);
    animation-timing-function: ease-out;
  }
  75% {
    transform: translate3d(-3px, 0, 0);
    animation-timing-function: ease;
  }
}
.device-connection-modal__product-render {
  margin: 0 -15px 16px;
  width: calc(100% + 30px);
  max-width: calc(100% + 30px);
}
.device-connection-modal p {
  max-width: 425px;
}

svg.icon.expand-icon {
  transform: rotate(90deg);
  transition: transform 0.1s;
}
svg.icon.expand-icon--expanded {
  transform: none;
}

.collection-grid {
  display: grid;
  grid-template-columns: repeat(8, 82px);
  gap: 8px;
  padding: 0;
  width: 712px;
  margin: auto;
}
.collection-grid--patch-chooser {
  padding: 15px 0;
}
@media (min-width: 750px) {
  .collection-grid--patch-chooser {
    border: none;
  }
}
@media (min-width: 750px) {
  .collection-grid {
    border-radius: 3px;
  }
  .collection-grid--patch-chooser {
    border: none;
    gap: 10px;
  }
}
.collection-grid__page-header {
  margin: auto;
  margin-top: 32px;
  margin-bottom: 8px;
  width: 712px;
  font-family: "TTNormsProRegular", roboto, freesans, arial, "system-ui", sans-serif;
  font-weight: 400;
  font-size: 0.8125rem;
  line-height: 1.28;
}
.collection-grid__page-header + .collection-grid {
  margin-top: 0;
}
.collection-grid__grid-effects .collection-grid__wrapper .collection-grid {
  grid-template-rows: repeat(2, auto);
  padding: 0;
}
.collection-grid__grid-effects:first-child {
  margin-top: 30px;
}
.collection-grid__animated-container {
  overflow: hidden;
}
.collection-grid__scroll-container {
  overflow-x: auto;
}
.collection-grid__wrapper {
  position: relative;
  padding: 10px;
  margin: auto;
}
.collection-grid__drop-zone {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  position: absolute;
  z-index: 2;
  margin: -20px -10px;
  margin-top: 0;
  top: 0;
  width: calc(100% + 20px);
  height: calc(100% + 40px);
  background-color: rgba(0, 0, 0, 0.8);
}
.collection-grid__drop-zone__inner {
  position: fixed;
  border: 2px dashed #f2f2f2;
  text-align: center;
  width: 400px;
  height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: color 0.2s, border-color 0.2s, background-color 0.2s;
  top: 30vh;
}
@media only screen and (height <= 600px) {
  .collection-grid__drop-zone__inner {
    top: 150px;
  }
}
.collection-grid__drop-zone__inner * {
  pointer-events: none;
}
.collection-grid__drop-zone__inner__icon {
  font-size: 2em;
  margin-top: 30px;
}
.collection-grid__drop-zone__inner__text {
  font-size: 1em;
  font-weight: bold;
}
.collection-grid__drop-zone__inner--active {
  border-color: #cdcdcd;
  color: #cdcdcd;
  background-color: rgba(0, 0, 0, 0.9019607843);
}

/*
  New variant for circuit style grid items
*/
.grid-item {
  width: 100%;
  position: absolute;
  inset: 0;
  color: #b6b8bf;
  text-overflow: ellipsis;
  overflow: hidden;
  padding: 5px;
  border-radius: 2px;
  background-color: rgba(227, 230, 239, 0.1490196078);
  border: none;
  cursor: pointer;
  transition: all ease-out 100ms;
  font-family: "TTNormsProRegular", roboto, freesans, arial, "system-ui", sans-serif;
  font-weight: 400;
  font-size: 0.8125rem;
  line-height: 1.28;
}
.grid-item--wrapper {
  padding-top: 100%;
  position: relative;
}
.grid-item--dark-bg {
  color: #f2f2f2;
}
.grid-item--color-bar {
  position: absolute;
  bottom: 8px;
  left: 10px;
  right: 10px;
  height: 4px;
  border-radius: 4px;
  background-color: #f2f6ff;
  transition: all ease-out 100ms;
}
.grid-item--color-bar .grid-item--no-content {
  display: none;
}
.grid-item--name {
  max-width: 74px;
  margin: auto;
  overflow-wrap: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.grid-item--name__container {
  display: flex;
  height: calc(100% - 10px);
  width: 100%;
}
.grid-item--has-content {
  display: flex;
  align-items: flex-start;
  background-color: rgba(227, 230, 239, 0.6);
  border: 0 solid #c4c4cc;
  color: #2d2e30;
}
.grid-item .grid-item--color-bar, .grid-item .grid-item--name__container, .grid-item .grid-item--name {
  pointer-events: none;
}
.grid-item.grid-item--dragged {
  transition: none;
}
.grid-item.grid-item--dragged * {
  transition: none;
}
.grid-item.grid-item--no-content:not(.grid-item--drop-target) .grid-item--color-bar {
  display: none;
}
.grid-item--selected:not(.grid-item--dragged) {
  border: 0;
  background-color: rgba(227, 230, 239, 0.2);
}
.grid-item--selected:not(.grid-item--dragged).grid-item--has-content:not(:disabled) {
  background-color: rgba(227, 230, 239, 0.8509803922);
  border: 0 solid;
  color: #0f0f10;
}
.grid-item--selected:not(.grid-item--dragged).grid-item--has-content:not(:disabled) .grid-item--color-bar {
  height: 12px;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 0;
}
.grid-item--selected:not(.grid-item--dragged).grid-item--no-content {
  color: #f2f6ff;
}
.grid-item--selected:not(.grid-item--dragged).grid-item--no-content::after {
  content: "";
  border: 1px solid rgba(227, 230, 239, 0.7019607843);
  border-radius: 2px;
  position: absolute;
  inset: 0;
}
.grid-item:hover:not(.grid-item--selected, :active).grid-item--has-content:not(:disabled) {
  background-color: rgba(227, 230, 239, 0.7490196078);
  color: #1e1f20;
}
.grid-item:hover:not(.grid-item--selected, :active).grid-item--has-content:not(:disabled) .grid-item--color-bar {
  left: 0;
  right: 0;
  border-radius: 0;
}
.grid-item:hover:not(.grid-item--selected, :active).grid-item--no-content:not(:disabled) {
  background-color: rgba(227, 230, 239, 0.2);
  color: #d4d7df;
}
.grid-item:disabled:not(.grid-item--has-content) {
  background: none;
  border: 2px solid #6a6c70;
  border-radius: 4px;
}
.grid-item[draggable] {
  user-select: none;
  -khtml-user-drag: element;
  -webkit-user-drag: element;
}
.grid-item--drop-target {
  opacity: 0.85;
  background-color: #f5f5f5;
  color: #1a1a1b;
  border: 0 solid;
}
.grid-item--currently-loaded::after {
  content: "";
  background: #2bcc6b;
  position: absolute;
  top: 5px;
  right: 5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.session-settings.sidebar {
  height: calc(100% - 120px);
  margin-top: 30px;
}
.session-settings .sidebar__scroll-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.session-settings .none-selected {
  margin-left: 16px;
  margin-right: 16px;
  color: #c5c8cf;
}
.session-settings .none-selected h4 {
  color: #e3e6ef;
  margin-top: 20px;
  margin-bottom: 10px;
}
.session-settings__body.sidebar__body {
  flex-grow: 1;
}
.session-settings__body.sidebar__body .session-name {
  width: 100%;
}
.session-settings__buttons {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.session-settings__buttons button {
  margin-bottom: 0.75rem;
}
.session-settings__button-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.session-settings__button-row button {
  width: calc(50% - 0.375rem);
}
.session-settings__footer.sidebar__footer:last-child {
  flex-grow: 0;
}
.session-settings__footer .color-picker {
  margin: 0.375rem auto 0 auto;
}
.sl-mkiii .session-settings__footer .color-picker {
  width: 180px;
  margin: 0.375rem auto 0 2.5rem;
}
.sl-mkiii .session-settings__footer .color-picker .color-picker--item {
  margin: 2px 8px;
}
.sl-mkiii .session-settings__footer .color-picker .color-picker--item:nth-child(1) {
  margin-left: -15px;
}
.sl-mkiii .session-settings__footer .color-picker .color-picker--item:nth-child(9) {
  margin-left: -15px;
}

.grid {
  letter-spacing: normal;
}
.grid__page-title {
  margin: 40px auto 16px;
  font-size: 0.8rem;
}
.grid__page-title:nth-child(1) {
  margin-top: 0;
}
.grid__page, .grid:not(.grid__has-pages) {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  row-gap: 2px;
}
.grid [role=listitem] {
  cursor: pointer;
}
.grid [role=listitem].is-dragging {
  background-color: rgba(45, 46, 48, 0.6);
  backdrop-filter: blur(4px);
  box-shadow: 0 3px 5.4px 0 rgba(0, 0, 0, 0.4);
  z-index: 2;
}

.sub-view-tabs {
  list-style-type: none;
  margin: auto;
  display: flex;
  flex-direction: row;
  width: 100%;
  min-width: 520px;
  max-width: 760px;
  justify-content: space-around;
  padding: 0;
}
.sub-view-tabs__tab {
  display: block;
}
.sub-view-tabs__tab .btn {
  padding: 8px 2em;
  background: none;
  border-radius: 0;
  border-bottom: 1px solid transparent;
  color: #b3b3b3;
  transition: 0.1s ease-in-out;
  font-family: "TTNormsProDemiBold", roboto, freesans, arial, "system-ui", sans-serif;
  font-size: 1rem;
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0.08em;
}
.sub-view-tabs__tab .btn:hover {
  color: #d6d6d6;
  text-decoration: none;
}
.sub-view-tabs__tab--active button.btn {
  color: white;
  border-bottom: 2px solid #0c47e1;
}
.sub-view-tabs__tab--active button.btn:hover {
  color: white;
  text-decoration: none;
}

.pack-selector {
  text-align: center;
}
.pack-selector__list-switches {
  display: flex;
  justify-content: space-evenly;
  position: relative;
  z-index: 2;
  margin-bottom: 8px;
}
.pack-selector__list-switches::before, .pack-selector__list-switches::after {
  content: " ";
  display: table;
}
.pack-selector__list-switches::after {
  clear: both;
}
.pack-selector__list-switches a {
  display: block;
  float: left;
  width: 50%;
  max-width: 160px;
  text-align: center;
  color: #fff;
  padding: 12px;
  text-decoration: none;
}
.pack-selector__list-switches a:hover {
  text-decoration: underline;
}
.pack-selector__list-switches.factory-packs a.factory {
  border-bottom: 2px solid #0c47e1;
}
.pack-selector__list-switches.user-packs a.user {
  border-bottom: 2px solid #0c47e1;
}
.pack-selector__scroll-container {
  overflow-y: auto;
  position: relative;
  height: 300px;
}
.pack-selector__list {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.pack-selector__list a {
  margin-bottom: 0.375rem;
  display: block;
  text-align: left;
  padding: 5px 8px;
  transition: background-color 0.2s ease-in;
  background: rgba(15, 15, 16, 0.9019607843);
  border-radius: 2px;
}
.pack-selector__list a::before, .pack-selector__list a::after {
  content: " ";
  display: table;
}
.pack-selector__list a::after {
  clear: both;
}
.pack-selector__list a:hover {
  background: rgba(30, 31, 32, 0.9019607843);
}
.pack-selector__pack-name {
  text-decoration: none;
}
.pack-selector__action-row {
  text-align: center;
}

.tutorial.shepherd-element {
  border-radius: 2px;
  border: 1px solid #7a7b80;
  color: #d4d7df;
  box-shadow: none;
  background: none;
  max-width: fit-content;
  padding: 0;
  backdrop-filter: blur(10px);
}
.tutorial.shepherd-element .shepherd-arrow::before {
  background: rgba(61, 62, 64, 0.9019607843);
}
.tutorial.shepherd-element.shepherd-has-title > .shepherd-arrow::before {
  background: #3d3e40;
}
.tutorial.shepherd-element .shepherd-content {
  border-radius: 2px;
  overflow: hidden;
}
.tutorial.shepherd-element .shepherd-header {
  height: 54px;
  background: rgba(45, 46, 48, 0.9019607843);
  border-radius: 0;
}
.tutorial.shepherd-element .shepherd-title {
  color: #e3e6ef;
  font-family: "TTNormsProDemiBold", roboto, freesans, arial, "system-ui", sans-serif;
  font-size: 1.1875rem;
  font-style: normal;
  font-weight: 700;
}
.tutorial.shepherd-element .shepherd-cancel-icon {
  color: #e3e6ef;
  margin-left: 16px;
}
.tutorial.shepherd-element .shepherd-cancel-icon:hover {
  color: #f2f6ff;
}
.tutorial.shepherd-element .shepherd-text {
  color: #d4d7df;
  background: rgba(61, 62, 64, 0.9019607843);
}
.tutorial.shepherd-element .shepherd-text p {
  max-width: 408px;
}
.tutorial.shepherd-element .shepherd-footer {
  display: flex;
  justify-content: space-between;
  background: rgba(61, 62, 64, 0.9019607843);
  border-radius: 0;
}
.tutorial.shepherd-element .shepherd-button.button--tertiary {
  background: none;
  color: #c5c8cf;
}
.tutorial.shepherd-element .shepherd-button.button--tertiary:hover:not(:disabled, .disabled) {
  color: #f2f6ff;
  background: none;
}
.tutorial.shepherd-element .shepherd-button.button--secondary {
  background: none;
  color: #c5c8cf;
}
.tutorial.shepherd-element .shepherd-button.button--secondary:hover:not(:disabled, .disabled) {
  color: #f2f6ff;
  background: none;
}
.tutorial.shepherd-element .shepherd-button.button--secondary:only-child {
  margin-left: auto;
}
.tutorial.shepherd-element .shepherd-button.button--primary {
  background: radial-gradient(100% 1237.1% at 100% 100%, var(--button-primary-gradient-start) 0%, var(--button-primary-gradient-end) 100%);
}
.tutorial.shepherd-element .shepherd-button.button--primary:hover:not(:disabled, .disabled) {
  color: #f2f6ff;
}

.shepherd-element.shepherd-theme-arrows.shepherd-has-title .shepherd-content header {
  border-radius: 0;
}

.shepherd-element.shepherd-theme-arrows .shepherd-content {
  border-radius: 0;
  max-width: 400px;
}

.shepherd-element.shepherd-theme-arrows .shepherd-content footer .shepherd-buttons li .shepherd-button {
  background: #21a7d5;
  border-radius: 3px;
  text-decoration: none;
  text-transform: none;
}
.shepherd-element.shepherd-theme-arrows .shepherd-content footer .shepherd-buttons li .shepherd-button:hover {
  text-decoration: underline;
}

.shepherd-element.shepherd-theme-arrows .shepherd-content footer .shepherd-buttons li .shepherd-button.shepherd-button-secondary {
  background: #7dafd0;
  color: #fff;
}

.shepherd-active .browser-toggle-button,
.shepherd-active .collection,
.shepherd-active .list-container {
  pointer-events: none;
}
.shepherd-active[data-shepherd-step=circuit-contains-your-packs] .pack-browser {
  z-index: 10001;
}
.shepherd-active[data-shepherd-step=circuit-lets-you-edit] .main-section {
  overflow: hidden;
  max-height: calc(100vh - 38px);
}
.shepherd-active[data-shepherd-step=circuit-lets-you-edit] .tutorial-step-edit {
  z-index: 10001;
  position: relative;
}
.shepherd-active[data-shepherd-step=circuit-lets-you-edit] .shepherd-content {
  box-shadow: 0 0 30px 5px #888;
}
.shepherd-active[data-shepherd-step=get-from-circuit] .pack-browser {
  z-index: 10001;
}
.shepherd-active[data-shepherd-step=browse-button] .patch-browser {
  z-index: 10001;
}
.shepherd-active[data-shepherd-step=slmkiii-contains-your-packs] .pack-browser {
  z-index: 10001;
}
.shepherd-active[data-shepherd-step=slmkiii-lets-you-edit] .main-section {
  overflow: hidden;
  max-height: calc(100vh - 38px);
}
.shepherd-active[data-shepherd-step=slmkiii-lets-you-edit] .tutorial-step-edit {
  z-index: 10001;
  position: relative;
}
.shepherd-active[data-shepherd-step=get-from-slmkiii] .pack-browser {
  z-index: 10001;
}
.shepherd-active[data-shepherd-step=PEAKcomponents-contains-your-banks] .pack-browser {
  z-index: 10001;
}
.shepherd-active[data-shepherd-step=PEAKcomponents-lets-you-edit] .main-section {
  overflow: hidden;
  max-height: calc(100vh - 38px);
}
.shepherd-active[data-shepherd-step=PEAKcomponents-lets-you-edit] .tutorial-step-edit {
  z-index: 10001;
  position: relative;
}
.shepherd-active[data-shepherd-step=get-from-PEAK] .pack-browser {
  z-index: 10001;
}
.shepherd-active[data-shepherd-step=BSIIcomponents-contains-your-banks] .pack-browser {
  z-index: 10001;
}
.shepherd-active[data-shepherd-step=BSIIcomponents-lets-you-edit] .main-section {
  overflow: hidden;
  max-height: calc(100vh - 38px);
}
.shepherd-active[data-shepherd-step=BSIIcomponents-lets-you-edit] .tutorial-step-edit {
  z-index: 10001;
}
.shepherd-active[data-shepherd-step=get-from-BSII] .pack-browser {
  z-index: 10001;
}

.device-chooser__static {
  display: block;
  border: none;
  text-align: center;
}
.device-chooser__static--vertical {
  margin-bottom: 1.5rem;
}

.librarian-toolbar__button {
  display: inline-block;
}
.librarian-toolbar__button .icon {
  margin-top: -2px;
}

[data-ember-action]:not(:disabled) {
  cursor: pointer;
}

@keyframes pulse-large {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(49, 185, 120, 0.7);
  }
  50% {
    transform: scale(1.5);
    box-shadow: 0 0 0 10px rgba(49, 185, 120, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(49, 185, 120, 0);
  }
}
.knob,
.range-knob {
  display: inline-block;
  box-sizing: border-box;
  min-width: 75px;
  text-align: center;
  touch-action: none;
  position: relative;
}
.knob__selectable,
.range-knob__selectable {
  padding: 5px;
  border: 3px solid transparent;
}
.knob--marker,
.range-knob--marker {
  stroke: #111;
  stroke-width: 8px;
}
.knob--values,
.range-knob--values {
  text-align: center;
  margin-top: -5px;
  color: #fff;
}
.knob--label,
.range-knob--label {
  font-size: 0.8125rem;
  text-align: center;
  display: block;
  margin-top: -0.5rem;
}
svg + .knob--label,
svg + .range-knob--label {
  margin-top: 0;
}
.knob--widget--rail,
.range-knob--widget--rail {
  stroke-width: 2;
  stroke: rgba(106, 108, 112, 0.6);
  fill: none;
}
.knob--widget--rail-stops,
.range-knob--widget--rail-stops {
  fill: #97999f;
}
.knob--widget--rail-value,
.range-knob--widget--rail-value {
  stroke-width: 2;
  stroke: #31b978;
  fill: none;
}
.synth-0 .knob--widget--rail-value,
.synth-0 .range-knob--widget--rail-value {
  stroke: #9255cf;
}
.synth-1 .knob--widget--rail-value,
.synth-1 .range-knob--widget--rail-value {
  stroke: #31b978;
}
.knob--widget--handle,
.range-knob--widget--handle {
  stroke: none;
  transition: r 0.1s ease-out, fill 0.1s ease-out;
}
.knob--widget--handle-label,
.range-knob--widget--handle-label {
  fill: #fff;
  font-size: 0.8rem;
}
.knob--widget--text,
.range-knob--widget--text {
  font-size: 1.2rem;
}
.knob--widget--value,
.range-knob--widget--value {
  font-size: 1.2rem;
  fill: #fff;
}
.knob--widget--value__small,
.range-knob--widget--value__small {
  font-size: 1rem;
}
.knob--widget--value--display,
.range-knob--widget--value--display {
  background: #000;
}
.knob--widget--value-group text,
.range-knob--widget--value-group text {
  fill: #fff;
}
.knob--widget--value--start,
.range-knob--widget--value--start {
  font-size: 1.2rem;
  transition: all 0.2s ease-out;
}
.knob--widget--value--end,
.range-knob--widget--value--end {
  font-size: 1.2rem;
  transition: all 0.2s ease-out;
}
.knob--widget--value-separator,
.range-knob--widget--value-separator {
  stroke: #fff;
  stroke-width: 2;
  fill: none;
  transition: all 0.2s ease-out;
}
.knob.synth-0 .range-knob--widget--gauge,
.range-knob.synth-0 .range-knob--widget--gauge {
  stroke: #9255cf;
}
.knob.synth-0.active,
.range-knob.synth-0.active {
  border-color: #9255cf;
}
.knob.synth-1 .range-knob--widget--gauge,
.range-knob.synth-1 .range-knob--widget--gauge {
  stroke: #31b978;
}
.knob.synth-1.active,
.range-knob.synth-1.active {
  border-color: #31b978;
}
.knob--state__start .range-knob--widget--gauge, .knob--state__end .range-knob--widget--gauge,
.range-knob--state__start .range-knob--widget--gauge,
.range-knob--state__end .range-knob--widget--gauge {
  stroke: #165090;
}
.knob--state__start.synth-0 .range-knob--widget--gauge, .knob--state__end.synth-0 .range-knob--widget--gauge,
.range-knob--state__start.synth-0 .range-knob--widget--gauge,
.range-knob--state__end.synth-0 .range-knob--widget--gauge {
  stroke: #bf82fc;
}
.knob--state__start.synth-1 .range-knob--widget--gauge, .knob--state__end.synth-1 .range-knob--widget--gauge,
.range-knob--state__start.synth-1 .range-knob--widget--gauge,
.range-knob--state__end.synth-1 .range-knob--widget--gauge {
  stroke: #1fe385;
}
.knob--state__start .range-knob--widget--value--start,
.range-knob--state__start .range-knob--widget--value--start {
  font-size: 1.5rem;
  transform: translateY(3px);
}
.knob--state__start .range-knob--widget--value-separator,
.range-knob--state__start .range-knob--widget--value-separator {
  transform: translateY(3px);
}
.knob--state__start .range-knob--widget--value--end,
.range-knob--state__start .range-knob--widget--value--end {
  font-size: 1rem;
  transform: translateY(3px);
}
.knob--state__start.synth-0 .range-knob--widget--handle__start-group .range-knob--widget--handle__inner,
.range-knob--state__start.synth-0 .range-knob--widget--handle__start-group .range-knob--widget--handle__inner {
  fill: #bf82fc;
}
.knob--state__start.synth-1 .range-knob--widget--handle__start-group .range-knob--widget--handle__inner,
.range-knob--state__start.synth-1 .range-knob--widget--handle__start-group .range-knob--widget--handle__inner {
  fill: #1fe385;
}
.knob--state__end .range-knob--widget--value--start,
.range-knob--state__end .range-knob--widget--value--start {
  font-size: 1rem;
  transform: translateY(-3px);
}
.knob--state__end .range-knob--widget--value-separator,
.range-knob--state__end .range-knob--widget--value-separator {
  transform: translateY(-6px);
}
.knob--state__end .range-knob--widget--value--end,
.range-knob--state__end .range-knob--widget--value--end {
  font-size: 1.5rem;
  transform: translateY(-3px);
}
.knob--state__end.synth-0 .range-knob--widget--handle__end-group .range-knob--widget--handle__inner,
.range-knob--state__end.synth-0 .range-knob--widget--handle__end-group .range-knob--widget--handle__inner {
  fill: #bf82fc;
}
.knob--state__end.synth-1 .range-knob--widget--handle__end-group .range-knob--widget--handle__inner,
.range-knob--state__end.synth-1 .range-knob--widget--handle__end-group .range-knob--widget--handle__inner {
  fill: #1fe385;
}
.knob.disabled,
.range-knob.disabled {
  opacity: 0.5;
}
.knob.disabled .knob--widget,
.range-knob.disabled .knob--widget {
  cursor: default;
}
.knob.disabled > div > .knob__widget__circle:hover,
.range-knob.disabled > div > .knob__widget__circle:hover {
  background: #3e3e3e;
  cursor: default;
}

.knob {
  margin: 5px 0.75rem;
  padding: 5px;
  position: relative;
  transition: background 0.2s, opacity 0.2s;
}
.knob__widget {
  cursor: pointer;
}
.knob__widget__container {
  width: 37px;
  height: 37px;
  position: relative;
  margin: 10px auto;
  margin-top: 11px;
}
.knob .knob__widget__container svg {
  margin: 0;
  position: absolute;
  top: 0;
  left: 0;
}
.knob.knob--primary .knob__widget__container svg {
  left: 4px;
}
.knob--primary .knob__widget__container {
  width: 57px;
  height: 57px;
  margin: 2px auto;
}
.knob__widget__circle {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 26px;
  height: 26px;
  display: inline-block;
  border-radius: 50%;
  background: #3d3e40;
  box-shadow: 1px 4px 4px rgba(0, 0, 0, 0.2509803922), inset 1px 1px 2px rgba(255, 255, 255, 0.1019607843);
  transition: background ease-out 100ms;
  cursor: pointer;
}
.knob__widget__circle--inner {
  display: none;
}
.knob__widget__circle:hover {
  background: #4a4a4a;
}
.knob--primary .knob__widget__circle {
  top: 10px;
  left: 11px;
  width: 36px;
  height: 36px;
  display: inline-block;
  border-radius: 50%;
  background: #7a7b80;
  box-shadow: 1px 4px 4px rgba(0, 0, 0, 0.2509803922), inset 1px 1px 2px rgba(255, 255, 255, 0.3019607843);
  transition: background ease-out 100ms;
}
.knob--primary .knob__widget__circle--inner {
  position: absolute;
  top: 5px;
  left: 4.5px;
  width: 26px;
  height: 26px;
  display: inline-block;
  border-radius: 50%;
  background: #7a7b80;
  box-shadow: 2px 4px 4px rgba(0, 0, 0, 0.2509803922);
  transition: background ease-out 100ms;
}
.knob--primary .knob__widget__circle:hover, .knob--primary .knob__widget__circle:hover > div:first-of-type {
  background: #8a8a8a;
}
.knob__widget__gauge {
  position: absolute;
  top: 0;
  left: 12px;
  width: 2px;
  height: 10px;
  background: #b6b8bf;
  transform-origin: 1.5px 13px;
  pointer-events: none;
}
.knob--primary .knob__widget__gauge {
  top: 0;
  left: 16px;
  background: #3d3e40;
  width: 4px;
  height: 15px;
  transform-origin: 1.5px 18px;
}
.circuit-editor .knob {
  width: 71px;
  height: 74px;
}
.circuit-editor .knob--label {
  margin-top: -4px;
  white-space: nowrap;
}
.circuit-editor .knob--primary .knob--label {
  margin-top: -7px;
}
.knob.knob--primary svg {
  margin-top: 3px;
}
.knob.knob--two-row-label label {
  height: 2em;
}

.macro-knobs .knob {
  margin: 5px;
  padding: 0;
  border: none;
}

.range-knob {
  width: 100%;
  height: inherit;
}
.range-knob--wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  height: inherit;
}
.range-knob--widget {
  width: 180px;
  height: 180px;
  margin-top: -4px;
  margin-bottom: -4px;
  margin-right: -25px;
  overflow: visible;
}
.range-knob--widget--rail {
  stroke-width: 1;
  stroke: #919191;
}
.range-knob--widget--gauge {
  fill: none;
  transition: stroke 0.1s ease-in;
  stroke-width: 1;
  stroke: #c7c7c7;
}
.knob--primary .range-knob--widget--gauge {
  stroke: #333;
}
.range-knob--widget--handle-group {
  cursor: pointer;
}
.range-knob--widget--handle {
  fill: rgb(62, 62, 62);
}
.synth-0 .range-knob--widget--handle__inner {
  fill: #9255cf;
}
.synth-1 .range-knob--widget--handle__inner {
  fill: #31b978;
}
.synth-0 .range-knob--widget--handle__start-group:hover .range-knob--widget--handle__inner, .synth-0 .range-knob--widget--handle__end-group:hover .range-knob--widget--handle__inner {
  fill: #bf82fc;
}
.synth-1 .range-knob--widget--handle__start-group:hover .range-knob--widget--handle__inner, .synth-1 .range-knob--widget--handle__end-group:hover .range-knob--widget--handle__inner {
  fill: #1fe385;
}
.range-knob--inputs {
  text-align: left;
  width: 110px;
  overflow: hidden;
}
.range-knob--inputs div {
  display: flex;
  flex-direction: row;
}
.range-knob--inputs div > * {
  transition: 0.1s ease-in;
}
.range-knob--inputs div:hover > * {
  color: #fff;
}
.range-knob--inputs label {
  width: 50%;
  height: 30px;
  display: inline;
  color: #919191;
  background: #282828;
  padding: 0.375rem;
  padding-top: 8px;
  font-style: normal;
  font-weight: 300;
  font-size: 0.8125rem;
  line-height: 14px;
  border-radius: 3px 0 0 3px;
}
.range-knob--inputs input {
  color: #919191;
  background: #0c0c0c;
  padding: 0.375rem;
  border: none;
  width: 50%;
  font-style: normal;
  font-weight: 300;
  font-size: 0.8125rem;
  line-height: 14px;
  border-radius: 0 3px 3px 0;
}

.mod-assignment {
  background: red;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid transparent;
  margin: 2px;
  transition: border-color 0.2s;
  cursor: grab;
}
.mod-assignment[aria-grabbed] {
  cursor: grabbing;
}
.synth-0 .mod-assignment {
  background: #9255cf;
}
.synth-0 .mod-assignment.not-assigned {
  background: none;
  border: 1px solid rgba(146, 85, 207, 0.6);
}
.synth-0 .mod-assignment.not-assigned:hover {
  border: 1px solid #9255cf;
}
.synth-0 .mod-assignment ~ .not-assigned {
  display: none;
}
.synth-0 .mod-assignment:not(.not-assigned) + .not-assigned {
  display: block;
}
.synth-0 .mod-assignment[aria-grabbed] {
  box-shadow: 0 0 3px 3px rgba(146, 85, 207, 0.5);
}
.synth-1 .mod-assignment {
  background: #31b978;
}
.synth-1 .mod-assignment.not-assigned {
  background: none;
  border: 1px solid rgba(49, 185, 120, 0.6);
}
.synth-1 .mod-assignment.not-assigned:hover {
  border: 1px solid #31b978;
}
.synth-1 .mod-assignment ~ .not-assigned {
  display: none;
}
.synth-1 .mod-assignment:not(.not-assigned) + .not-assigned {
  display: block;
}
.synth-1 .mod-assignment[aria-grabbed] {
  box-shadow: 0 0 3px 3px rgba(49, 185, 120, 0.5);
}

@keyframes pulse-large {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(49, 185, 120, 0.7);
  }
  50% {
    transform: scale(1.5);
    box-shadow: 0 0 0 10px rgba(49, 185, 120, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(49, 185, 120, 0);
  }
}
.value-slider {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 3px;
  height: 40px;
  transition: background 0.1s, opacity 0.1s;
}
.value-slider__label {
  margin-top: 0.375rem;
  font-size: 0.8125rem;
  text-align: center;
}
.value-slider__container {
  position: relative;
  height: 16px;
  width: 100%;
}
.value-slider__centered {
  margin: 0 auto;
}
.value-slider__bottomspace {
  padding-bottom: 8px;
}
.value-slider--track, .value-slider--gauge, .value-slider--thumb {
  user-select: none;
}
.value-slider--track {
  top: 6px;
  left: 8px;
  background: #a1a1a1;
  position: relative;
  height: 2px;
  border-radius: 0;
  width: calc(100% - 16px);
}
.value-slider--gauge {
  width: 8px;
  height: 2px;
  position: absolute;
  left: 0;
  top: 0;
  background: #9255cf;
}
.value-slider--mod-gauge {
  width: 8px;
  height: 2px;
  position: absolute;
  left: 5px;
  top: 0;
  background: #31b978;
}
.value-slider--thumb {
  width: 16px;
  height: 16px;
  position: absolute;
  transform: translate(-8px, -7px);
  left: 0;
  background-color: #3e3e3e;
  border-radius: 8px;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2), inset 1px 1px 2px rgba(255, 255, 255, 0.1019607843), inset -1px -1px 2px rgba(0, 0, 0, 0.3019607843);
  transition: transform 0.1s ease-out;
  text-align: center;
  font-size: 0.8125rem;
  line-height: 16px;
  color: #fff;
}
.value-slider--thumb:focus.focused {
  transform: translate(-8px, -7px) scale(1.1);
}
.value-slider--thumb::after {
  position: absolute;
  top: 5px;
  left: 5px;
  content: "";
  width: 6px;
  height: 6px;
  background-color: #9255cf;
  transition: background-color 0.1s ease-out;
  box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}
.value-slider__vertical {
  width: 50px;
}
.value-slider__vertical .value-slider__container {
  height: 100%;
  width: 16px;
}
.value-slider__vertical .value-slider--track {
  width: 2px;
  height: calc(100% - 16px);
  top: 8px;
  left: 6px;
}
.value-slider__vertical .value-slider--gauge {
  width: 2px;
}
.value-slider__vertical .value-slider--mod-gauge {
  width: 2px;
}
.value-slider__vertical .value-slider--thumb {
  transform: translate(-7px, -8px);
}
.value-slider__vertical .value-slider--thumb:focus.focused {
  transform: translate(-7px, -8px) scale(1.1);
}
.synth-0 .value-slider .value-slider--gauge, .synth-0 .value-slider .value-slider--mod-gauge, .synth-0 .value-slider .value-slider--thumb::after {
  background: #9255cf;
}
.synth-1 .value-slider .value-slider--gauge, .synth-1 .value-slider .value-slider--mod-gauge, .synth-1 .value-slider .value-slider--thumb::after {
  background: #31b978;
}
.value-slider.synth-0:hover .value-slider--thumb::after {
  background: #bf82fc;
  box-shadow: 0 0 16px #bf82fc, inset 1px 1px 4px rgba(255, 255, 255, 0.2509803922);
}
.value-slider.synth-1:hover .value-slider--thumb::after {
  background: #1fe385;
  box-shadow: 0 0 16px #1fe385, inset 1px 1px 4px rgba(255, 255, 255, 0.2509803922);
}

.macro-knobs {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  margin: -5px 0 0;
  width: 100%;
}
.macro-knobs--knob {
  position: relative;
  margin: 0;
  max-width: 90px;
}
.macro-knobs--knob svg.knob--widget {
  margin-bottom: 10px;
}
.macro-knobs--knob .knob.active::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 15px;
  width: calc(100% - 30px);
  border-bottom: 1px solid transparent;
}
.synth-0 .circuit-editor--modulations .macro-knobs--knob .knob.active::after {
  border-bottom-color: #9255cf;
}
.synth-1 .circuit-editor--modulations .macro-knobs--knob .knob.active::after {
  border-bottom-color: #31b978;
}
@media screen and (width >= 830px) {
  .macro-knobs {
    flex-wrap: wrap;
    flex-shrink: 0;
    align-items: flex-start;
  }
  .macro-knobs--knob {
    margin: 0;
  }
  .macro-knobs--knob:last-child {
    margin-right: 0;
  }
}
.macro-knobs--macro-assignment__container {
  position: absolute;
  right: 0;
  top: 5px;
}

.macro-settings {
  width: 500px;
  margin: auto;
  margin-top: 8px;
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, auto);
  place-items: start center;
}
@media screen and (width >= 1110px) {
  .macro-settings {
    grid-template-columns: repeat(4, auto);
    width: 100%;
  }
}
.macro-settings--slot {
  width: 240px;
  margin-bottom: 5px;
}
@media screen and (width <= 1109px) {
  .macro-settings--slot:nth-child(-n+2) {
    margin-bottom: 35px;
  }
}
.macro-settings--slot > div:first-of-type {
  height: 140px;
}
.macro-settings--slot > div {
  text-align: center;
}
.macro-settings--slot select {
  width: 100%;
}

.circuit-macro-settings {
  width: 100%;
}

.macro-editor--editor {
  margin: auto;
  margin-top: 0;
  margin-bottom: 70px;
  width: 100%;
  max-width: 800px;
}
@media screen and (width >= 1110px) {
  .macro-editor--editor {
    max-width: 1100px;
  }
}
.macro-editor--section {
  margin: auto;
  margin-top: 0.5rem;
  width: 100%;
  max-width: 800px;
}
@media screen and (width >= 1110px) {
  .macro-editor--section {
    max-width: 1100px;
  }
}
.macro-editor--row {
  margin-bottom: 0.5rem;
}
.macro-editor--row:last-child {
  margin-bottom: 0;
}
.macro-editor--fieldset {
  margin-left: 14px;
  min-inline-size: auto;
  border: none;
  border-left: none;
  border-right: none;
  border-bottom: none;
  padding: 0.375rem 0 0 0;
}
.macro-editor--fieldset:first-child {
  margin-left: 0;
}
.macro-editor--fieldset legend {
  margin-bottom: 4px;
  padding: 0;
  font-family: "TTNormsProDemiBold", roboto, freesans, arial, "system-ui", sans-serif;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0.08em;
}
.circuit-macro-settings .macro-editor--fieldset legend {
  border-bottom: none;
  color: #919191;
}
.macro-editor--fieldset .value-slider__vertical {
  height: 100%;
}
.macro-editor--fixed-value {
  width: 2em;
  display: inline-block;
  text-align: right;
}
.macro-editor--patch-info {
  margin-top: 0.75rem;
  border: 1px solid #000;
  padding: 0.375rem;
}
.macro-editor--patch-info--list {
  top: inherit;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
.macro-editor--patch-info--list dt,
.macro-editor--patch-info--list dd {
  display: block;
  padding: 0 0.75rem;
  margin: 0;
}
.macro-editor--patch-info--list dd {
  margin-right: 1.5rem;
}
.macro-editor--editor-group {
  padding: 0.375rem;
  margin-bottom: 0.375rem;
  border: 2px solid #4c4d50;
  border-radius: 2px;
}
.macro-editor--editor-group--top {
  border-radius: 0 0 2px 2px;
}
.macro-editor--horizontal-group {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-around;
  justify-content: space-evenly;
}
.macro-editor--horizontal-group--center {
  align-items: center;
}
.macro-editor--horizontal-group--stretch {
  align-items: stretch;
}
.macro-editor--horizontal-knob-group {
  margin: 0 -0.75rem;
  justify-content: space-between;
}
.macro-editor--vertical-group {
  display: flex;
  flex-direction: column;
}
.macro-editor--vertical-group .macro-editor--fieldset {
  margin-left: 0;
  margin-top: 0.75rem;
}
.macro-editor--vertical-group .macro-editor--fieldset:first-child {
  margin-top: 0;
}
.macro-editor--vertical-group__spaced-out {
  justify-content: space-between;
  height: 93%;
}
.macro-editor--subheader {
  margin: 0.5em 0 0.75rem 0;
  line-height: 1em;
  border-top: 1px solid #ccc;
  text-align: center;
  font-size: 1rem;
  font-weight: 200;
  display: flex;
  justify-content: space-around;
}
.macro-editor--subheader span {
  display: block;
  margin-top: -8px;
  padding: 0 0.375rem;
  background: #242428;
}
.macro-editor--full-height {
  height: 100%;
}
.macro-editor--reduced-height {
  height: calc(100% - 10px);
}
.macro-editor .range-knob--inputs > div:not(:last-child) {
  margin-bottom: 20px;
}

.macro-editor--col-1 {
  width: 6.25%;
}

.macro-editor--col-2 {
  width: 12.5%;
}

.macro-editor--col-3 {
  width: 18.75%;
}

.macro-editor--col-4 {
  width: 25%;
}

.macro-editor--col-5 {
  width: 31.25%;
}

.macro-editor--col-6 {
  width: 37.5%;
}

.macro-editor--col-7 {
  width: 43.75%;
}

.macro-editor--col-8 {
  width: 50%;
}

.macro-editor--col-9 {
  width: 56.25%;
}

.macro-editor--col-10 {
  width: 62.5%;
}

.macro-editor--col-11 {
  width: 68.75%;
}

.macro-editor--col-12 {
  width: 75%;
}

.macro-editor--col-13 {
  width: 81.25%;
}

.macro-editor--col-14 {
  width: 87.5%;
}

.macro-editor--col-15 {
  width: 93.75%;
}

.macro-editor--col-16 {
  width: 100%;
}

.lfo-selector {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.tutorial-step-mod-matrix {
  background-color: #242428;
}

.circuit-editor .page-switcher {
  margin-bottom: 8px;
}
.circuit-editor--subheader {
  white-space: nowrap;
  font-weight: normal;
  font-size: 0.8125rem;
  line-height: 21px;
  letter-spacing: 0.15em;
  color: #b3b3b3;
}
.circuit-editor--center-section {
  display: flex;
  flex-wrap: wrap;
  margin: -4px;
}
.circuit-editor--center-section > * {
  margin: 4px;
}
@media screen and (width <= 1109px) {
  .circuit-editor--effects .circuit-editor--center-section > * {
    width: calc(50% - 8px);
  }
}
.circuit-editor--bottom-section {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}
.circuit-editor--module {
  border: 1px solid rgba(227, 230, 239, 0.2);
  border-radius: 2px;
  background: rgba(227, 230, 239, 0.1019607843);
  padding: 8px;
}
.circuit-editor .checkbox + label {
  white-space: nowrap;
}
.circuit-editor .radio-button-group--entry::after {
  top: 16px;
  height: 15px;
}
.circuit-editor .range-knob--inputs label {
  font-size: 0.8125rem;
}
.circuit-editor .value-slider__label {
  font-size: 0.8125rem;
}
.circuit-editor {
  /* animate tiles in */
}
.circuit-editor--center-section > div {
  opacity: 0;
  animation: transition-in 0.4s;
  animation-fill-mode: forwards;
}
.circuit-editor--center-section > div:hover {
  z-index: 1;
}

.circuit-editor--center-section > div:nth-of-type(1) {
  animation-delay: 50ms;
}

.circuit-editor--center-section > div:nth-of-type(2) {
  animation-delay: 100ms;
}

.circuit-editor--center-section > div:nth-of-type(3) {
  animation-delay: 150ms;
}

.circuit-editor--center-section > div:nth-of-type(4) {
  animation-delay: 200ms;
}

.circuit-editor--center-section > div:nth-of-type(5) {
  animation-delay: 250ms;
}

.circuit-editor--center-section > div:nth-of-type(6) {
  animation-delay: 300ms;
}

.mod-matrix-editor > div {
  opacity: 0;
  animation: transition-in 0.4s;
  animation-fill-mode: forwards;
}

.mod-matrix-editor > div:nth-of-type(1) {
  animation-delay: 100ms;
}

.mod-matrix-editor > div:nth-of-type(2) {
  animation-delay: 150ms;
}

.mod-matrix-editor > div:nth-of-type(3) {
  animation-delay: 200ms;
}

.mod-matrix-editor > div:nth-of-type(4) {
  animation-delay: 250ms;
}

.mod-matrix-editor > div:nth-of-type(5) {
  animation-delay: 300ms;
}

.mod-matrix-editor > div:nth-of-type(6) {
  animation-delay: 350ms;
}

.mod-matrix-editor > div:nth-of-type(7) {
  animation-delay: 400ms;
}

.mod-matrix-editor > div:nth-of-type(8) {
  animation-delay: 450ms;
}

.mod-matrix-editor > div:nth-of-type(9) {
  animation-delay: 500ms;
}

.mod-matrix-editor > div:nth-of-type(10) {
  animation-delay: 550ms;
}

.mod-matrix-editor > div:nth-of-type(11) {
  animation-delay: 600ms;
}

.mod-matrix-editor > div:nth-of-type(12) {
  animation-delay: 650ms;
}

.mod-matrix-editor > div:nth-of-type(13) {
  animation-delay: 700ms;
}

.mod-matrix-editor > div:nth-of-type(14) {
  animation-delay: 750ms;
}

.mod-matrix-editor > div:nth-of-type(15) {
  animation-delay: 800ms;
}

.mod-matrix-editor > div:nth-of-type(16) {
  animation-delay: 850ms;
}

.mod-matrix-editor > div:nth-of-type(17) {
  animation-delay: 900ms;
}

.mod-matrix-editor > div:nth-of-type(18) {
  animation-delay: 950ms;
}

.mod-matrix-editor > div:nth-of-type(19) {
  animation-delay: 1000ms;
}

.mod-matrix-editor > div:nth-of-type(20) {
  animation-delay: 1050ms;
}

.mod-matrix-editor > div:nth-of-type(21) {
  animation-delay: 1100ms;
}

/* specific breakpoints for tracks */
.circuit-editor.circuit-tracks .circuit-editor--bottom-section {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}
.circuit-editor.circuit-tracks .macro-editor--editor {
  margin: auto;
  margin-top: 43px;
  margin-bottom: 10px;
}
.circuit-editor.circuit-tracks .pack-header {
  font-size: 0.8125rem;
  margin: 0 -10px;
  padding: 0 6px;
  align-items: center;
}
@media (width >= 1440px) {
  .circuit-editor.circuit-tracks .pack-header {
    width: calc(100% - 330px);
  }
}
.circuit-editor.circuit-tracks .pack-header button {
  background: none;
}

.current-synth-select {
  min-width: 124px;
}

.mod-matrix-display {
  text-align: center;
  margin: 5px 0;
  margin-top: 10px;
  display: grid;
  grid-template-columns: 1fr 20px 1fr;
  background: #292929;
  border-radius: 5px;
  padding: 0.1875rem 0.375rem;
  color: #919191;
  font-size: 0.8125rem;
  column-gap: 5px;
  align-items: center;
}

.patch-list {
  margin: 0;
  list-style-type: none;
}
.patch-list--entry {
  padding: 4px 8px;
  margin-bottom: 0.1875rem;
  cursor: pointer;
  background: rgba(30, 31, 32, 0.6);
}
.patch-list--entry[aria-selected] {
  color: #fff;
  background: #0c47e1;
}

.patch-pool {
  min-width: 30em;
}
.patch-pool--list {
  height: 15em;
  overflow-y: auto;
  padding: 0;
}
.patch-pool--button-container {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.page-switcher {
  display: flex;
  flex-flow: row nowrap;
  margin-bottom: 0;
}
.page-switcher--switch {
  display: block;
  flex-grow: 1;
  position: relative;
  border-radius: 0;
}
.page-switcher.sl-mkiii .page-switcher--switch {
  background: #2d2e30;
}
.page-switcher.sl-mkiii .page-switcher--switch__active {
  background: #6a6c70;
}
.circuit-editor .page-switcher {
  display: flex;
  justify-content: space-around;
  height: 32px;
}
.circuit-editor .page-switcher .page-switcher--switch {
  width: 256px;
  max-width: 33%;
  flex-grow: 0;
  font-family: "TTNormsProDemiBold", roboto, freesans, arial, "system-ui", sans-serif;
  font-size: 1rem;
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0.08em;
  color: #b3b3b3;
  border: 1px solid transparent;
  transition: color 0.1s ease-out;
}
.circuit-editor .page-switcher .page-switcher--switch:hover, .circuit-editor .page-switcher .page-switcher--switch:hover span {
  text-decoration: none;
  color: #d6d6d6;
}
.circuit-editor .page-switcher .page-switcher--switch__active {
  color: #fff;
  text-decoration: none;
  border-bottom: 2px solid #0c47e1;
}
.circuit-editor .page-switcher .page-switcher--switch__active:hover {
  color: #fff;
}
.circuit-tracks.circuit-editor .page-switcher {
  margin-bottom: 0;
}

.graphical-envelope {
  width: 223px;
}
.graphical-envelope--wrapper {
  margin: 0;
  width: 100%;
  height: 90px;
}
.graphical-envelope--svg {
  width: 100%;
  height: 90px;
  background: rgba(15, 15, 16, 0.6);
}
.graphical-envelope--svg.synth-0 .stop1 {
  stop-color: #9255cf;
  stop-opacity: 0.6;
}
.graphical-envelope--svg.synth-1 .stop1 {
  stop-color: #31b978;
  stop-opacity: 0.6;
}
.graphical-envelope--svg.synth-0 .stop2 {
  stop-color: #9255cf;
  stop-opacity: 0.1;
}
.graphical-envelope--svg.synth-1 .stop2 {
  stop-color: #31b978;
  stop-opacity: 0.1;
}
.graphical-envelope--svg .stop3 {
  stop-color: rgba(15, 15, 16, 0.6);
  stop-opacity: 0;
}
.graphical-envelope--segment {
  transition: fill 0.1s ease-out;
  stroke: none;
  outline: none;
  fill: none;
}
.graphical-envelope--control-point {
  r: 6;
  fill: #fff;
  stroke: #488fbb;
  stroke-width: 1px;
  cursor: pointer;
}
.synth-0 .graphical-envelope--control-point {
  stroke: #9255cf;
  fill: #9255cf;
}
.synth-1 .graphical-envelope--control-point {
  stroke: #31b978;
  fill: #31b978;
}
.graphical-envelope--arrow {
  fill: #fff;
  stroke: none;
}
.synth-0 .graphical-envelope--arrow {
  fill: #9255cf;
}
.synth-1 .graphical-envelope--arrow {
  fill: #31b978;
}
.graphical-envelope--path {
  stroke: #fff;
  stroke-width: 1;
  stroke-linecap: round;
  pointer-events: none;
}
.synth-0 .graphical-envelope--path {
  stroke: #9255cf;
}
.synth-1 .graphical-envelope--path {
  stroke: #31b978;
}
.graphical-envelope.dragging .graphical-envelope--segment:hover {
  fill: none;
}

.graphical-filter--wrapper {
  outline: none;
}
.graphical-filter--svg {
  width: 100%;
  background: rgba(15, 15, 16, 0.6);
  cursor: pointer;
}
.synth-0 .graphical-filter--svg .stop1 {
  stop-color: #9255cf;
  stop-opacity: 0.6;
}
.synth-1 .graphical-filter--svg .stop1 {
  stop-color: #31b978;
  stop-opacity: 0.6;
}
.graphical-filter--svg .stop2 {
  stop-color: rgba(15, 15, 16, 0.6);
  stop-opacity: 0;
}
.circuit-rhythm__grid-effects--autofilter .graphical-filter--svg, .circuit-rhythm__grid-effects--vinyl-filter .graphical-filter--svg {
  height: 70px;
}
.circuit-rhythm__grid-effects--autofilter .graphical-filter--svg .stop1, .circuit-rhythm__grid-effects--vinyl-filter .graphical-filter--svg .stop1 {
  stop-color: #488fbb;
  stop-opacity: 0.6;
}
.circuit-rhythm__grid-effects--vinyl-filter .graphical-filter--svg {
  height: 100px;
}
.graphical-filter--control-point {
  r: 6;
  fill: #fff;
  stroke: none;
}
.synth-0 .graphical-filter--control-point {
  fill: #9255cf;
}
.synth-1 .graphical-filter--control-point {
  fill: #31b978;
}
.circuit-rhythm__grid-effects--autofilter .graphical-filter--control-point {
  fill: #488fbb;
}
.synth-0 .graphical-filter:hover .graphical-filter--control-point {
  fill: #bf82fc;
}
.synth-1 .graphical-filter:hover .graphical-filter--control-point {
  fill: #1fe385;
}
.graphical-filter--path {
  stroke: #fff;
  stroke-width: 1;
  stroke-linecap: round;
  pointer-events: none;
}
.synth-0 .graphical-filter--path {
  stroke: #9255cf;
}
.synth-1 .graphical-filter--path {
  stroke: #31b978;
}
.circuit-rhythm__grid-effects--autofilter .graphical-filter--path, .circuit-rhythm__grid-effects--vinyl-filter .graphical-filter--path {
  stroke: #488fbb;
}

.lfo-table-display {
  font-size: 0;
}
.lfo-table-display svg {
  height: 70px;
}
.lfo-table-display--svg-path {
  stroke-width: 4px;
  stroke: #fff;
  fill: none;
}

.labelled-value {
  flex-grow: 1;
  text-align: left;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
.labelled-value--label {
  display: inline;
  color: #fff;
  background: #488fbb;
  padding: 0.375rem;
  border-radius: 3px 0 0 3px;
  transition: opacity 0.2s;
  padding-top: 7px;
  padding-bottom: 5px;
  width: 50%;
}
.labelled-value--label__with-group {
  width: 33%;
}
.main-section .labelled-value--input {
  background: #165090;
  color: #fff;
  padding: 0.375rem;
  border: none;
  width: 50%;
  border-radius: 0 3px 3px 0;
  transition: opacity 0.2s;
  padding-top: 7px;
  padding-bottom: 5px;
}
.labelled-value--input__small {
  background: #165090;
  color: #fff;
  padding: 0.375rem;
  border: none;
  text-align: center;
  transition: opacity 0.2s;
  padding-top: 7px;
  padding-bottom: 5px;
}
.labelled-value--input-group {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  background: #165090;
  color: #fff;
  border: none;
  border-radius: 0 3px 3px 0;
  width: 67%;
  transition: opacity 0.2s;
}
.labelled-value--separator {
  padding: 0.375rem;
  color: #fff;
}
.labelled-value.synth-0 .labelled-value--label {
  background: #9255cf;
  color: #fff;
}
.labelled-value.synth-0 .labelled-value--input {
  background: #6e2476;
  color: #fff;
}
.labelled-value.synth-1 .labelled-value--label {
  background: #31b978;
  color: #fff;
}
.labelled-value.synth-1 .labelled-value--input {
  background: #045148;
  color: #fff;
}
.labelled-value.sl-mkiii .labelled-value--label {
  background: #6a6c70;
  color: #fff;
}
.labelled-value.sl-mkiii .labelled-value--input {
  background: #4c4d50;
  color: #fff;
}
.labelled-value.sl-mkiii .labelled-value--input-group {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  background: #4c4d50;
  color: #fff;
  border: none;
  width: 67%;
}
.labelled-value.disabled .labelled-value--label {
  opacity: 0.5;
}
.labelled-value.disabled .labelled-value--input, .labelled-value.disabled .labelled-value--input-group {
  opacity: 0.5;
}

.mod-matrix-editor {
  margin-top: 30px;
}
.mod-matrix-editor--header, .mod-matrix-editor--slot {
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr repeat(4, 5fr);
  width: 100%;
  margin-bottom: 8px;
  padding: 5px;
  align-self: center;
  align-items: center;
}
.mod-matrix-editor--header {
  text-align: center;
  font-family: "TTNormsProDemiBold", roboto, freesans, arial, "system-ui", sans-serif;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0.08em;
  height: 32px;
  color: #c5c5c5;
}
.mod-matrix-editor--slot {
  padding: 16px 8px;
}
.mod-matrix-editor--index {
  display: inline;
  width: 100%;
}
.mod-matrix-editor--index p {
  text-align: center;
  margin-bottom: 0;
}
.mod-matrix-editor .value-slider {
  justify-content: center;
}
.mod-matrix-editor .value-slider > label {
  position: absolute;
  margin-top: 30px;
}
.mod-matrix-editor--slots {
  margin-bottom: 0.75rem;
}
.mod-matrix-editor--dropdown {
  width: 100%;
}

.circuit-osc-settings {
  width: 263px;
}
.circuit-osc-settings .circuit-wavetable-display--svg {
  height: 70px;
}
.circuit-osc-settings--controls {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
@media (width <= 860px) {
  .circuit-osc-settings--controls {
    grid-template-columns: repeat(3, 1fr);
  }
}
.circuit-osc-settings--controls .knob {
  margin: 0;
  align-self: end;
}

.circuit-mixer-settings {
  min-width: 140px;
  flex-grow: 1;
}
.circuit-mixer-settings fieldset {
  display: flex;
  flex-direction: column;
  border: none;
}
.circuit-mixer-settings--controls {
  display: grid;
  grid-template-columns: 50% 50%;
  margin: 0 -8px;
  margin-top: 22px;
}
.circuit-mixer-settings--controls .knob {
  margin: 0;
  align-self: end;
}

.circuit-wavetable-display--svg {
  width: 100%;
  padding: 0.1875rem;
  background: rgba(15, 15, 16, 0.6);
}
.circuit-wavetable-display--svg.synth-0 .stop1 {
  stop-color: #9255cf;
  stop-opacity: 0.6;
}
.circuit-wavetable-display--svg.synth-1 .stop1 {
  stop-color: #31b978;
  stop-opacity: 0.6;
}
.circuit-wavetable-display--svg .stop2 {
  stop-color: rgba(15, 15, 16, 0.6);
  stop-opacity: 0;
}
.circuit-wavetable-display--svg-path {
  stroke-width: 1px;
  stroke: #fff;
}
.synth-0 .circuit-wavetable-display--svg-path {
  stroke: #9255cf;
}
.synth-1 .circuit-wavetable-display--svg-path {
  stroke: #31b978;
}

.circuit-filter-settings {
  flex-grow: 1;
}
.circuit-filter-settings fieldset {
  display: flex;
  flex-direction: column;
  border: none;
}
.circuit-filter-settings__bypass {
  width: 100%;
}
.circuit-filter-settings__bypass > label {
  display: block;
  margin-bottom: 0.75rem;
}
.circuit-filter-settings__bypass > label + .radio-button-group {
  margin-left: 8px;
}
.circuit-filter-settings--horizontal-knob-group {
  grid-column: 1/span 3;
  align-self: end;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.circuit-filter-settings--upper-knobs {
  width: 180px;
  margin: auto;
  margin-bottom: 20px;
}
.circuit-filter-settings--filter-drive {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.circuit-filter-settings--filter-drive .knob {
  margin: 0 8px;
}
.circuit-filter-settings--filter-drive label + .inc-dec-select {
  margin-top: 8px;
  margin-left: 8px;
}
.circuit-filter-settings--group {
  display: grid;
  grid-template-columns: 100px auto;
  justify-items: center;
}
.circuit-filter-settings--group__vertical {
  flex-direction: column;
  height: 100%;
}
.circuit-filter-settings--group .knob {
  margin: 0;
  align-self: end;
}
.circuit-filter-settings--controls {
  max-width: 250px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.circuit-filter-settings--controls .knob {
  align-self: end;
}
.circuit-filter-settings--controls .knob:not(.knob--primary) {
  grid-row: 2;
}
@media screen and (width <= 955px) {
  .circuit-filter-settings--controls .knob:not(.knob--primary) {
    grid-row: auto;
  }
}

.circuit-env-settings {
  width: 325px;
  flex-grow: 1;
  position: relative;
}
.circuit-env-settings .macro-editor--fieldset {
  max-width: 100%;
}
.circuit-env-settings__header {
  position: absolute;
  top: 0;
  right: 0;
}
.circuit-env-settings--top {
  display: flex;
}
.circuit-env-settings--bottom {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 10px;
}
.circuit-env-settings--bottom .knob {
  margin: 0 -4px;
}
.circuit-env-settings--single-label {
  display: block;
  text-align: center;
  margin-top: 0.375rem;
}
.circuit-env-settings .envelope-selector {
  list-style-type: none;
  margin: 0 0 8px;
  padding: 0;
  display: flex;
}
.circuit-env-settings .envelope-selector li {
  display: flex;
  align-items: center;
  margin-right: 3px;
  white-space: nowrap;
}
.circuit-env-settings .envelope-selector li button {
  width: 51px;
  height: 23px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 400;
  font-size: 0.8125rem;
  letter-spacing: 2px;
  color: #c5c5c5;
  background: rgba(15, 15, 16, 0.6);
  border: 1px solid rgba(15, 15, 16, 0.6);
  border-top: none;
  margin: 0;
  padding: 0;
  padding-left: 5px;
  border-bottom: 1px solid transparent;
  border-radius: 0 0 4px 4px;
  transition: background 0.1s;
}
.circuit-env-settings .envelope-selector li button:hover {
  background: rgba(91, 92, 96, 0.6);
}
.circuit-env-settings .envelope-selector li button.envelope-button__active {
  background: rgba(106, 108, 112, 0.6);
}
.circuit-env-settings .envelope-selector li button .mod-assignment {
  margin: 5px;
  display: inline-block;
  vertical-align: middle;
}

.circuit-lfo-settings {
  width: 739px;
  flex-grow: 1;
}
.circuit-lfo-settings__header {
  position: absolute;
  top: 0;
  right: 0;
}
.circuit-lfo-settings--subheader {
  margin: 0.5em 0 15px;
  text-align: center;
  margin-top: 16px;
}
.circuit-lfo-settings--group-small {
  width: 23%;
}
.circuit-lfo-settings--group-large {
  width: 31%;
}
.circuit-lfo-settings--controls {
  display: grid;
  grid-template-columns: 30% 30% 40%;
  align-items: end;
  margin-top: 8px;
}
.circuit-lfo-settings--controls .knob {
  margin: 0;
}
.circuit-lfo-settings--group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: flex-end;
  max-width: 130px;
}
.circuit-lfo-settings--group .knob {
  margin: 0;
}
.circuit-lfo-settings--group .checkbox + label {
  margin-top: 8px;
  margin-bottom: -2px;
  display: block;
  text-align: center;
}
.circuit-lfo-settings--fade-mode {
  padding-top: 5px;
}
.circuit-lfo-settings--fade-mode h3 {
  margin-top: 0;
}
.circuit-lfo-settings--fade-mode > div {
  max-width: 90px;
}
.circuit-lfo-settings--fade-mode > div ul {
  margin-left: 10px;
}
.circuit-lfo-settings--fade-mode .radio-button-group--entry {
  height: 38px;
}
.circuit-lfo-settings--fade-mode .radio-button-group--entry::after {
  height: 22px;
}
.circuit-lfo-settings--rate, .circuit-lfo-settings--delay {
  margin: 0 12px;
  padding-top: 5px;
  justify-self: center;
}
.circuit-lfo-settings--rate .radio-button-group--horizontal, .circuit-lfo-settings--delay .radio-button-group--horizontal {
  height: 50px;
}
.circuit-lfo-settings--rate .radio-button-group--horizontal .radio-button-group--entry label, .circuit-lfo-settings--delay .radio-button-group--horizontal .radio-button-group--entry label {
  min-width: 55px;
  width: 55px;
  white-space: nowrap;
  padding-left: 0;
  padding-right: 0;
}
.circuit-lfo-settings--rate .radio-button-group--horizontal .radio-button-group--entry::after, .circuit-lfo-settings--delay .radio-button-group--horizontal .radio-button-group--entry::after {
  width: 40px;
}
.circuit-lfo-settings--inner {
  display: grid;
  grid-template-columns: 310px auto auto 110px;
}
.circuit-lfo-settings .checkbox__right-align-label {
  margin-bottom: -14px;
}
.circuit-lfo-settings .lfo-selector {
  list-style-type: none;
  margin: 0 0 8px;
  padding: 0;
  display: flex;
}
.circuit-lfo-settings .lfo-selector li {
  display: flex;
  align-items: center;
  margin-right: 3px;
}
.circuit-lfo-settings .lfo-selector li button {
  width: 51px;
  height: 23px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 400;
  font-size: 0.8125rem;
  letter-spacing: 2px;
  color: #c5c5c5;
  background: rgba(15, 15, 16, 0.6);
  border: 1px solid rgba(15, 15, 16, 0.6);
  border-top: none;
  margin: 0;
  padding: 0;
  padding-left: 5px;
  border-bottom: 1px solid transparent;
  border-radius: 0 0 4px 4px;
  transition: background 0.1s;
}
.circuit-lfo-settings .lfo-selector li button:hover {
  background: rgba(91, 92, 96, 0.6);
}
.circuit-lfo-settings .lfo-selector li button.lfo-button__active {
  background: rgba(106, 108, 112, 0.6);
}
.circuit-lfo-settings .lfo-selector li button .mod-assignment {
  margin: 5px;
  display: inline-block;
  vertical-align: middle;
}

.circuit-eq-display {
  position: relative;
  background: rgba(15, 15, 16, 0.6);
  height: 156px;
}
.circuit-eq-display__grid, .circuit-eq-display__graph {
  border-radius: 4px;
}
.circuit-eq-display__grid {
  position: relative;
  pointer-events: none;
}
.circuit-eq-display__graph {
  background: transparent;
  box-shadow: inset 0 0 15px 3px #171a22;
  position: absolute;
  top: 0;
  left: 0;
}

.circuit-eq-settings {
  flex-grow: 1;
  min-width: 243px;
  height: 364px;
  display: flex;
}
.circuit-eq-settings fieldset {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  border: none;
  align-items: center;
}
.circuit-eq-settings--controls {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-auto-flow: column;
  width: 240px;
  padding-top: 6px;
}
.circuit-eq-settings--controls .knob {
  margin: 0;
  align-self: end;
}

.circuit-fx-settings {
  flex-grow: 1;
  min-width: 243px;
}
.circuit-fx-settings .radio-button-group {
  max-width: 160px;
  margin: auto;
}
.circuit-fx-settings .radio-button-group--entry {
  margin-bottom: 43px;
  width: 64px;
}
.circuit-fx-settings .radio-button-group--entry label {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 6px;
  padding-top: 10px;
  width: 64px;
  height: 41px;
  line-height: 18px;
  color: #888;
  background: none;
  border: none;
}
.circuit-fx-settings .radio-button-group--entry label svg {
  margin-bottom: 5px;
  border: 1px solid #aaaab3;
  border-radius: 2px;
  transition: border-color ease-out 100ms;
}
.circuit-fx-settings .radio-button-group--entry label svg .detail-dark {
  stroke: #444;
}
.circuit-fx-settings .radio-button-group--entry label svg .detail-light--stroke {
  stroke: #999;
}
.circuit-fx-settings .radio-button-group--entry label svg .detail-light--fill {
  fill: #999;
}
.circuit-fx-settings .radio-button-group--entry:hover label svg {
  border-color: #fff;
}
.circuit-fx-settings .radio-button-group--entry:hover label svg .detail-dark {
  stroke: #797980;
}
.circuit-fx-settings .radio-button-group--entry:hover label svg .detail-light--stroke {
  stroke: #fff;
}
.circuit-fx-settings .radio-button-group--entry:hover label svg .detail-light--fill {
  fill: #fff;
}
.circuit-fx-settings .radio-button-group--entry input[type=radio]:checked + label {
  color: #e0e0e0;
}
.circuit-fx-settings .radio-button-group--entry input[type=radio]:checked + label svg path {
  stroke: #e0e0e0;
  stroke-width: 2;
}
.synth-0 .circuit-fx-settings .radio-button-group--entry input[type=radio]:checked + label svg rect.base-rect {
  fill: #9255cf;
}
.synth-1 .circuit-fx-settings .radio-button-group--entry input[type=radio]:checked + label svg rect.base-rect {
  fill: #31b978;
}
.synth-0 .circuit-fx-settings .radio-button-group--entry input[type=radio]:checked + label svg .detail-dark {
  stroke: #63398c;
}
.synth-1 .circuit-fx-settings .radio-button-group--entry input[type=radio]:checked + label svg .detail-dark {
  stroke: #258c5b;
}
.circuit-fx-settings .radio-button-group--entry input[type=radio]:checked + label svg .detail-light--stroke {
  stroke: #fff;
}
.circuit-fx-settings .radio-button-group--entry input[type=radio]:checked + label svg .detail-light--fill {
  fill: #fff;
}
.circuit-fx-settings .radio-button-group.radio-button-group--button-style {
  height: 90px;
}
.circuit-fx-settings .radio-button-group.radio-button-group--button-style label {
  font-size: 0.8125rem;
  border: none;
}
.circuit-fx-settings .radio-button-group.radio-button-group--button-style input[type=radio]:checked + label {
  background: none;
  box-shadow: none;
  border: none;
}
.circuit-fx-settings .radio-button-group.radio-button-group--button-style input[type=radio]:checked + label svg {
  border: none;
}
.circuit-fx-settings--rate {
  display: flex;
  justify-content: center;
}
.circuit-fx-settings--rate .knob {
  margin: 0;
}
.circuit-fx-settings--sync {
  text-align: center;
}
.circuit-fx-settings--sync .checkbox--label {
  margin-bottom: -2px;
}
.circuit-fx-settings--controls {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: end;
  width: 240px;
  margin: auto;
}
.circuit-fx-settings--controls .knob {
  margin: 0;
}

.circuit-fx-distortion {
  min-width: 266px;
}
.circuit-fx-distortion fieldset {
  display: flex;
  flex-direction: column;
  border: none;
  width: 100%;
  height: 100%;
}
.circuit-fx-distortion .macro-editor--full-height {
  height: calc(100% - 8px);
  width: 240px;
  margin: auto;
}
.circuit-fx-distortion label {
  font-size: 0.8125rem;
}
.circuit-fx-distortion--reduced-height {
  height: 250px;
}
.circuit-fx-distortion--subheader {
  margin: 5px 0;
}

.circuit-voice-settings {
  flex-grow: 1;
  min-width: 260px;
}
.circuit-voice-settings fieldset {
  display: flex;
  flex-direction: column;
  border: none;
}
.circuit-voice-settings .radio-button-group {
  width: 100%;
  max-width: 245px;
  margin: auto;
}
.circuit-voice-settings .radio-button-group--entry {
  margin: 0 6px;
  margin-bottom: 43px;
  width: 64px;
}
.circuit-voice-settings .radio-button-group--entry label {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 6px;
  padding-top: 10px;
  width: 64px;
  height: 41px;
  line-height: 18px;
  font-size: 0.8125rem;
  color: #888;
  white-space: nowrap;
  border: none;
}
.circuit-voice-settings .radio-button-group--entry label svg {
  margin-bottom: 5px;
  border: 1px solid #aaaab3;
  border-radius: 2px;
  transition: border-color ease-out 100ms;
}
.circuit-voice-settings .radio-button-group--entry label svg .detail-light--stroke {
  stroke: #999;
}
.circuit-voice-settings .radio-button-group--entry label svg .detail-light--fill {
  fill: #999;
}
.circuit-voice-settings .radio-button-group--entry:hover label svg {
  border-color: #fff;
}
.circuit-voice-settings .radio-button-group--entry:hover label svg .detail-light--stroke {
  stroke: #fff;
}
.circuit-voice-settings .radio-button-group--entry:hover label svg .detail-light--fill {
  fill: #fff;
}
.circuit-voice-settings .radio-button-group--entry input[type=radio]:checked + label {
  color: #e0e0e0;
}
.circuit-voice-settings .radio-button-group--entry input[type=radio]:checked + label svg path.detail-light--stroke {
  stroke: #e0e0e0;
  stroke-width: 2;
}
.synth-0 .circuit-voice-settings .radio-button-group--entry input[type=radio]:checked + label rect.base-rect {
  fill: #9255cf;
}
.synth-1 .circuit-voice-settings .radio-button-group--entry input[type=radio]:checked + label rect.base-rect {
  fill: #31b978;
}
.circuit-voice-settings .radio-button-group--entry input[type=radio]:checked + label .detail-light--stroke {
  stroke: #fff;
}
.circuit-voice-settings .radio-button-group--entry input[type=radio]:checked + label .detail-light--fill {
  fill: #fff;
}
.circuit-voice-settings .radio-button-group.radio-button-group--button-style {
  height: 90px;
}
.circuit-voice-settings .radio-button-group.radio-button-group--button-style label {
  font-size: 0.8125rem;
  border: none;
}
.circuit-voice-settings .radio-button-group.radio-button-group--button-style input[type=radio]:checked + label {
  background: none;
  box-shadow: none;
  border: none;
}
.circuit-voice-settings .radio-button-group.radio-button-group--button-style input[type=radio]:checked + label svg {
  border: none;
}
.circuit-voice-settings--controls {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 200px;
  margin: auto;
}
.circuit-voice-settings--controls .knob {
  min-width: 78px;
}
.circuit-voice-settings--controls div.modulation-destination:last-child {
  grid-column: 1/span 2;
}
.circuit-voice-settings--controls div.modulation-destination:last-child .knob {
  width: 100%;
}

.radio-button-group {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.radio-button-group--entry {
  height: 30px;
  position: relative;
}
.radio-button-group--entry input[type=radio] {
  appearance: none;
  opacity: 0;
  width: 0;
  position: absolute;
}
.radio-button-group--entry input[type=radio]:hover + label::before {
  background: rgba(30, 31, 32, 0.6);
  border-color: rgba(30, 31, 32, 0.6);
  box-shadow: 0 0 0 1px #e3e6ef;
}
.radio-button-group--entry label {
  margin: 0;
  position: relative;
  padding-top: 1px;
  padding-left: 25px;
  display: block;
  z-index: 1;
  color: #d4d7df;
  transition: 0.1s ease-out;
  font-family: "TTNormsProRegular", roboto, freesans, arial, "system-ui", sans-serif;
  font-weight: 400;
  font-size: 0.8125rem;
  line-height: 1.28;
}
.radio-button-group--entry label:hover {
  color: #e3e6ef;
}
.radio-button-group--entry label::before {
  position: absolute;
  left: 0;
  top: 0;
  content: "";
  display: inline-block;
  background: rgba(45, 46, 48, 0.6);
  height: 17px;
  width: 17px;
  border-radius: 8.5px;
  border: 3px solid #242428;
  box-shadow: 0 0 0 1px #a1a1a1;
  transition: 0.1s ease-out;
}
.radio-button-group--entry input[type=radio]:checked + label::before {
  background: #5d87f6;
  border-color: #1e1f20;
}
.radio-button-group--entry input[type=radio]:checked + label {
  color: #d4d7df;
}
.radio-button-group--entry input[type=radio].focus-visible:focus + label::before {
  box-shadow: 0 0 0 1px #5d87f6;
  transform: scale(1.2);
  transition: transform 0.1s ease-out;
}
.radio-button-group--entry::after {
  top: 20px;
  z-index: 0;
  content: "";
  position: absolute;
  border-left: 1px solid #a1a1a1;
  height: 10px;
  width: 4px;
  margin-left: 8px;
}
.radio-button-group--entry:last-child::after {
  display: none;
}
.radio-button-group.synth-0 .radio-button-group--entry input[type=radio]:checked + label::before {
  background: #9255cf;
  box-shadow: 0 0 0 1px #9255cf;
}
.radio-button-group.synth-0 .radio-button-group--entry input[type=radio]:checked:hover + label::before {
  background: #bf82fc;
  box-shadow: 0 0 0 1px #bf82fc;
}
.radio-button-group.synth-0 .radio-button-group--entry input[type=radio].focus-visible:focus + label::before {
  box-shadow: 0 0 0 1px #5d87f6;
}
.radio-button-group.synth-1 .radio-button-group--entry input[type=radio]:checked + label::before {
  background: #31b978;
  box-shadow: 0 0 0 1px #31b978;
}
.radio-button-group.synth-1 .radio-button-group--entry input[type=radio]:checked:hover + label::before {
  background: #1fe385;
  box-shadow: 0 0 0 1px #1fe385;
}
.radio-button-group.synth-1 .radio-button-group--entry input[type=radio].focus-visible:focus + label::before {
  box-shadow: 0 0 0 1px #488fbb;
}
.radio-button-group.sl-mkiii input[type=radio]:checked + label::before {
  background: #00b597;
  box-shadow: 0 0 0 1px #00b597;
}
.radio-button-group.sl-mkiii input[type=radio].focus-visible:focus + label::before {
  box-shadow: 0 0 0 1px #488fbb;
}
.radio-button-group.disabled.synth-1 .radio-button-group--entry label::before, .radio-button-group.disabled.synth-2 .radio-button-group--entry label::before, .radio-button-group.disabled.sl-mkiii .radio-button-group--entry label::before {
  background: #595959;
}
.radio-button-group.disabled.synth-1 .radio-button-group--entry input[type=radio]:checked + label::before, .radio-button-group.disabled.synth-2 .radio-button-group--entry input[type=radio]:checked + label::before, .radio-button-group.disabled.sl-mkiii .radio-button-group--entry input[type=radio]:checked + label::before {
  background: #cdcdcd;
}
.radio-button-group.disabled.synth-1 .radio-button-group--entry input[type=radio].focus-visible:focus + label::before, .radio-button-group.disabled.synth-2 .radio-button-group--entry input[type=radio].focus-visible:focus + label::before, .radio-button-group.disabled.sl-mkiii .radio-button-group--entry input[type=radio].focus-visible:focus + label::before {
  box-shadow: 0 0 0 2px #cdcdcd;
}
.radio-button-group--horizontal {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.radio-button-group--horizontal .radio-button-group--entry {
  text-align: center;
}
.radio-button-group--horizontal .radio-button-group--entry label {
  display: block;
  position: relative;
  padding: 0;
  padding: 27px 0.75rem 0 0.75rem;
  text-align: center;
  min-width: 6em;
  margin: 0;
}
.radio-button-group--horizontal .radio-button-group--entry label::before {
  position: absolute;
  left: 50%;
  margin-left: -8.5px;
  top: 0;
  content: "";
  display: inline-block;
}
.radio-button-group--horizontal .radio-button-group--entry::after {
  display: block;
  top: 7.5px;
  left: 28px;
  position: absolute;
  text-align: center;
  height: 5px;
  width: 20px;
  border-left: none;
  border-top: 1px solid #a1a1a1;
}
.radio-button-group--horizontal .radio-button-group--entry:last-of-type::after {
  display: none;
}

.radio-button-group--new-variant {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.radio-button-group--new-variant .radio-button-group--entry {
  height: 1.8em;
}
.radio-button-group--new-variant .radio-button-group--entry input[type=radio] {
  opacity: 0;
  width: 0;
}
.radio-button-group--new-variant .radio-button-group--entry label {
  font-size: 0.8125rem;
  margin-top: -20px;
  position: relative;
  padding-top: 3px;
  padding-left: 25px;
  display: block;
  line-height: 1.2em;
  z-index: 1;
}
.radio-button-group--new-variant .radio-button-group--entry label::before {
  position: absolute;
  left: 1px;
  top: 3px;
  content: "";
  display: inline-block;
  background: rgba(45, 46, 48, 0.6);
  height: 15px;
  width: 15px;
  border-radius: 7.5px;
  border: 2px solid rgba(45, 46, 48, 0.6);
  box-shadow: 0 0 0 1px #a6a9af;
  transition: 0.1s ease-out;
}
.radio-button-group--new-variant .radio-button-group--entry input[type=radio]:checked + label::before {
  background: #5d87f6;
  box-shadow: 0 0 0 1px #3d70f5;
  border-color: #1e1f20;
}
.radio-button-group--new-variant .radio-button-group--entry input[type=radio].focus-visible:focus + label::before {
  box-shadow: 0 0 0 1px #3d70f5;
  transform: scale(1.2);
  transition: transform 0.1s ease-out;
}
.radio-button-group--new-variant .radio-button-group--entry::after {
  z-index: 0;
  content: "";
  position: absolute;
  border-left: 1px solid #a1a1a1;
  height: 20px;
  width: 4px;
  margin-left: 8px;
}
.radio-button-group--new-variant .radio-button-group--entry:last-of-type::after {
  display: none;
}
.radio-button-group--new-variant.synth-0 .radio-button-group--entry input[type=radio]:checked + label::before {
  background: #9255cf;
  box-shadow: 0 0 0 1px #9255cf;
}
.radio-button-group--new-variant.synth-0 .radio-button-group--entry input[type=radio].focus-visible:focus + label::before {
  box-shadow: 0 0 0 1px #488fbb;
}
.radio-button-group--new-variant.synth-1 .radio-button-group--entry input[type=radio]:checked + label::before {
  background: #31b978;
  box-shadow: 0 0 0 1px #31b978;
}
.radio-button-group--new-variant.synth-1 .radio-button-group--entry input[type=radio].focus-visible:focus + label::before {
  box-shadow: 0 0 0 1px #488fbb;
}
.radio-button-group--new-variant.sl-mkiii input[type=radio]:checked + label::before {
  background: #00b597;
  box-shadow: 0 0 0 1px #00b597;
}
.radio-button-group--new-variant.sl-mkiii input[type=radio].focus-visible:focus + label::before {
  box-shadow: 0 0 0 1px #488fbb;
}
.radio-button-group--new-variant.disabled.synth-1 .radio-button-group--entry label::before, .radio-button-group--new-variant.disabled.synth-2 .radio-button-group--entry label::before, .radio-button-group--new-variant.disabled.sl-mkiii .radio-button-group--entry label::before {
  background: #595959;
}
.radio-button-group--new-variant.disabled.synth-1 .radio-button-group--entry input[type=radio]:checked + label::before, .radio-button-group--new-variant.disabled.synth-2 .radio-button-group--entry input[type=radio]:checked + label::before, .radio-button-group--new-variant.disabled.sl-mkiii .radio-button-group--entry input[type=radio]:checked + label::before {
  background: #cdcdcd;
}
.radio-button-group--new-variant.disabled.synth-1 .radio-button-group--entry input[type=radio].focus-visible:focus + label::before, .radio-button-group--new-variant.disabled.synth-2 .radio-button-group--entry input[type=radio].focus-visible:focus + label::before, .radio-button-group--new-variant.disabled.sl-mkiii .radio-button-group--entry input[type=radio].focus-visible:focus + label::before {
  box-shadow: 0 0 0 2px #cdcdcd;
}
.radio-button-group--new-variant.radio-button-group--horizontal {
  position: relative;
  margin-bottom: 16px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.radio-button-group--new-variant.radio-button-group--horizontal .radio-button-group--entry {
  text-align: center;
}
.radio-button-group--new-variant.radio-button-group--horizontal .radio-button-group--entry label {
  display: block;
  position: relative;
  padding: 21px 8px 0;
  text-align: center;
  min-width: 70px;
  margin: 0;
}
.radio-button-group--new-variant.radio-button-group--horizontal .radio-button-group--entry label::before {
  position: absolute;
  left: 50%;
  margin-left: -7.5px;
  top: 0;
  content: "";
  display: block;
}
.radio-button-group--new-variant.radio-button-group--horizontal .radio-button-group--entry::after {
  display: block;
  top: 7px;
  left: 35px;
  position: absolute;
  text-align: center;
  height: 5px;
  width: 54px;
  border-left: none;
  border-top: 1px solid #a6a9af;
}
.radio-button-group--new-variant.radio-button-group--horizontal .radio-button-group--entry:last-of-type::after {
  display: none;
}

.radio-button-group--button-style {
  position: relative;
  height: 3em;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.radio-button-group--button-style .radio-button-group--entry {
  text-align: center;
  border-radius: 1px;
}
.radio-button-group--button-style .radio-button-group--entry label {
  display: flex;
  align-items: center;
  position: relative;
  padding: 0;
  text-align: center;
  min-width: 100%;
  border: 1px solid #aaaab3;
  border-radius: 2px;
  color: #aaaab3;
  cursor: pointer;
  font-family: "TTNormsProRegular", roboto, freesans, arial, "system-ui", sans-serif;
  font-weight: 400;
  font-size: 0.8125rem;
  line-height: 1.28;
}
.radio-button-group--button-style .radio-button-group--entry label:hover {
  border-color: #fff;
  color: #fff;
  background: #3b3b40;
  transition: border-color ease-out 0.1s, color ease-out 0.1s background ease-out 0.1s;
}
.radio-button-group--button-style .radio-button-group--entry label::before, .radio-button-group--button-style .radio-button-group--entry::after {
  display: none;
}
.radio-button-group--button-style .radio-button-group--entry input[type=radio]:checked + label {
  background: #0c47e1;
  box-shadow: 0 0 0 1px #0c47e1;
  border: 1px solid transparent;
  color: #fff;
  font-weight: 500;
  transition: none;
}
.radio-button-group--button-style .radio-button-group--entry input[type=radio].focus-visible:focus + label {
  box-shadow: 0 0 0 1px #0c47e1;
  transform: scale(1.1);
  transition: transform 0.1s ease-out;
}

.checkbox-toggle {
  margin: 0 10px;
  vertical-align: middle;
  display: inline-block;
  position: relative;
  transition: opacity 0.1s ease;
  background: none;
  width: 32px;
  height: 16px;
  border-radius: 500rem;
  margin-bottom: 2px;
}
.checkbox-toggle label::before {
  display: block;
  position: absolute;
  content: "" !important;
  z-index: 1;
  border: none;
  top: 0;
  left: 0;
  transform: none;
  background: rgb(96, 96, 96);
  width: 32px;
  height: 16px;
  border-radius: 500rem;
  transition: all 0.1s ease;
}
.checkbox-toggle label {
  top: 0;
  left: 0;
  z-index: 0;
  width: 32px;
  height: 16px;
  background: none;
  box-shadow: none;
  border-radius: 0;
  transition: none;
}
.checkbox-toggle label::after {
  position: absolute;
  content: "" !important;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.0509803922)) #fff;
  width: 14px;
  height: 14px;
  border-radius: 500rem;
  top: 1px;
  left: 1px;
  z-index: 2;
  transition: all 0.1s ease;
}
.checkbox-toggle input[type=checkbox] {
  width: auto;
  height: auto;
  visibility: hidden;
}
.checkbox-toggle input[type=checkbox] + label {
  display: block;
  cursor: pointer;
  position: absolute;
  margin: 0;
}
.checkbox-toggle input[type=checkbox]:checked + label::before {
  background: rgba(0, 0, 0, 0);
}
.checkbox-toggle input[type=checkbox]:checked + label::after {
  left: 17px;
}
.checkbox-toggle.green input[type=checkbox]:checked + label::before {
  background: rgb(112, 192, 70);
}
.checkbox-toggle.disabled {
  opacity: 0.4;
}
.checkbox-toggle.disabled input + label {
  cursor: default;
}

.modulation-destination {
  border-radius: 10px;
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s;
}
.modulation-destination.drag-hover {
  background: rgba(255, 255, 255, 0.1019607843);
}
.is-dragging-macro .modulation-destination:not(.is-macro-destination), .is-dragging-mod .modulation-destination:not(.is-mod-destination) {
  opacity: 0.25;
}
.modulation-destination__mod-indicator {
  background: red;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin: 2px;
  position: relative;
  transition: width 0.2s, height 0.2s, margin 0.2s;
  cursor: row-resize;
}
.modulation-destination__mod-indicator-name {
  display: none;
  position: absolute;
  top: -35px;
  border: 1px solid black;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.8);
  box-shadow: 0 0 5px 0 #333;
  font-size: 0.8125rem;
  white-space: nowrap;
  padding: 5px;
  left: -15px;
}
.modulation-destination__mod-indicator:hover, .modulation-destination__mod-indicator.selected {
  width: 12px;
  height: 12px;
  margin: 0;
}
.modulation-destination__mod-indicator:hover .modulation-destination__mod-indicator-name, .modulation-destination__mod-indicator.selected .modulation-destination__mod-indicator-name {
  display: block;
  z-index: 5;
}
.modulation-destination__mod-indicator:hover .modulation-destination__mod-indicator-name {
  z-index: 10;
}
.synth-0 .modulation-destination__mod-indicator {
  background: #9255cf;
}
.synth-1 .modulation-destination__mod-indicator {
  background: #31b978;
}
.modulation-destination.is-active .modulation-destination__mod-indicator:hover:not(.selected) {
  width: 8px;
  height: 8px;
  margin: 2px;
}
.modulation-destination.is-active .modulation-destination__mod-indicator:hover:not(.selected) .modulation-destination__mod-indicator-name {
  display: none;
}
.has-selection .modulation-destination__mod-indicator:not(.selected) .knob--mod-indicator-name {
  display: none;
}
.modulation-destination__mod-indicator__container {
  align-items: center;
  position: absolute;
  padding: 5px;
  top: 0;
  bottom: 8px;
  left: calc(100% - 20px);
  z-index: 10;
  display: none;
  grid-auto-flow: column;
  grid-template-rows: repeat(4, 1fr);
}
.modulation-destination__mod-indicator__container.show-modulations, .modulation-destination:hover .modulation-destination__mod-indicator__container, .is-dragging-mod .modulation-destination.drag-hover .modulation-destination__mod-indicator__container, .is-dragging-macro .modulation-destination.drag-hover .modulation-destination__mod-indicator__container {
  display: grid;
}
.modulation-destination__mod-indicator__container .modulation-destination--vertical-stack .modulation-destination__mod-indicator__container .modulation-destination {
  padding: 0;
  bottom: auto;
  top: 0;
  left: calc(50% - 24px);
  flex-flow: column wrap;
  justify-content: flex-start;
  align-items: flex-start;
  z-index: 20;
}
.modulation-destination__mod-indicator.highlight-destination {
  animation: pulse-large 1s infinite;
}
.is-dragging-mod .modulation-destination__mod-indicator.highlight-destination, .is-dragging-macro .modulation-destination__mod-indicator.highlight-destination {
  animation: none;
}

.inc-dec-select {
  height: 40px;
  line-height: normal;
  display: flex;
}
.inc-dec-select .inc-dec-button-group {
  display: inline-flex;
  width: 65px;
  height: 30px;
  margin-left: 5px;
}
.inc-dec-select .inc-dec-button-group button {
  width: 50%;
  transition: color 0.1s;
  border: none;
  color: #919191;
  background: #282828;
}
.inc-dec-select .inc-dec-button-group button svg {
  vertical-align: middle;
  fill: none;
  stroke: #919191;
  transition: stroke 0.1s ease-out;
}
.inc-dec-select .inc-dec-button-group button:hover svg {
  stroke: #fff;
}
.inc-dec-select .inc-dec-button-group button:first-child {
  border-radius: 4px 0 0 4px;
}
.inc-dec-select .inc-dec-button-group button:last-child {
  border-radius: 0 4px 4px 0;
}
.inc-dec-select .inc-dec-button-group button:disabled {
  opacity: 0.3;
}
.inc-dec-select .inc-dec-button-group button:disabled:hover {
  opacity: 0.3;
}
.inc-dec-select .inc-dec-button-group button:disabled:hover svg {
  stroke: #919191;
}
.inc-dec-select select {
  cursor: pointer;
  width: calc(100% - 65px);
  height: 30px;
}
.graphical-display .inc-dec-select {
  background: rgba(15, 15, 16, 0.6);
  height: 22px;
}
.graphical-display .inc-dec-select .inc-dec-button-group,
.graphical-display .inc-dec-select .inc-dec-button-group button,
.graphical-display .inc-dec-select select {
  background-color: transparent;
  border: none;
  height: 22px;
  line-height: 16px;
}
.graphical-display .inc-dec-select .inc-dec-button-group:hover,
.graphical-display .inc-dec-select .inc-dec-button-group button:hover,
.graphical-display .inc-dec-select select:hover {
  background-color: rgba(15, 15, 16, 0.6);
}

.ct-macro-editor {
  width: 608px;
  height: 189px;
  border: 1px solid #595959;
  border-radius: 5px;
  background: #111;
  margin: 1.5rem auto;
  max-width: 700px;
  padding: 0.75rem;
  font-family: "TTNormsProRegular", roboto, freesans, arial, "system-ui", sans-serif;
  font-weight: 400;
  font-size: 0.8125rem;
  line-height: 1.28;
}
.ct-macro-editor__scroll-container {
  max-width: 100%;
  overflow-x: auto;
}
.ct-macro-editor__show-values-container {
  text-align: center;
  margin-top: 1em;
}

.ct-macro-knobs {
  list-style-type: none;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  margin: 0;
  margin-top: 4px;
  padding: 0;
}
.ct-macro-knobs li {
  display: block;
}
.ct-macro-knobs li:nth-child(odd) {
  margin-top: 54px;
}

.ct-macro-knob {
  background: none;
  display: block;
  transition: border-color 0.1s ease;
  transition: background-color 0.1s ease;
  border-radius: 2px;
  border: 1px solid transparent;
  position: relative;
}
.ct-macro-knob__text {
  max-width: 50px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.ct-macro-knob:hover {
  background-color: rgb(29, 29, 29);
}
.ct-macro-knob--active {
  border: 1px solid #fff;
}
.ct-macro-knob--active:hover {
  background-color: rgba(0, 0, 0, 0);
}
.ct-macro-knob__values-overlay {
  position: absolute;
  top: 20px;
  background: rgba(255, 255, 255, 0.7490196078);
  color: #000;
  padding: 5px;
  border-radius: 2px;
  font-size: 0.6875rem;
  font-weight: 500;
  text-align: left;
  width: 55px;
  line-height: 12px;
}
.ct-macro-knob--show-values .ct-macro-knob__config {
  visibility: hidden;
}
.ct-macro-knob--show-values.ct-macro-knob--active {
  border: 1px solid transparent;
}
.ct-macro-knob--show-values.ct-macro-knob--active .ct-macro-knob__values-overlay {
  background: rgba(255, 165, 0, 0.7490196078);
}

.save-patch-dialog__form label {
  display: block;
}
.save-patch-dialog__form .input,
.save-patch-dialog__form .select {
  width: 100%;
  margin-bottom: 1em;
}
.save-patch-dialog__pack-name-container {
  width: 80%;
  margin: auto;
}
.save-patch-dialog__warning {
  text-align: center;
  margin: 1em;
}
.save-patch-dialog__warning img {
  vertical-align: middle;
}

.template-editor {
  margin-top: 50px;
}
.template-editor__container {
  min-height: calc(100vh - 98px);
}
.template-editor.main-section__inner {
  max-width: 980px;
}
.template-editor--control-row {
  display: flex;
  justify-content: space-around;
  margin-bottom: 1em;
}
.template-editor--control-row > div {
  width: 12.5%;
}
.template-editor--control-row:last-child {
  margin-bottom: 0;
}
.template-editor--control-row__wheels > div {
  width: 50%;
}
.template-editor--control-row__pedals > div {
  width: 33.3%;
}
.template-editor--control-row__aftertouch > div {
  width: 80%;
}
@media (min-width: 500px) {
  .template-editor--edit-area {
    border-left: 1px solid #4c4d50;
  }
}
.template-editor--edit-section {
  border-bottom: 1px solid #4c4d50;
  padding-bottom: 0.75rem;
}
.template-editor--edit-section:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.template-editor--edit-section--title {
  font-weight: 200;
}
.template-editor--edit-section .color-picker__container {
  margin-top: 1.5rem;
}
.template-editor--edit-section .color-picker__container .color-picker {
  margin: 0.75rem;
}
.launchkey-mini-mk3 .template-editor--edit-section .color-picker__container .color-picker {
  margin: 0;
}
.template-editor--edit-row {
  margin-bottom: 0.75rem;
}
.template-editor--edit-row:last-child {
  margin-bottom: 0;
}
.template-editor--editor {
  padding-bottom: 10em;
}
.template-editor__editor-section {
  padding-left: 0;
}
.template-editor--bank-selectors {
  padding-top: 0.375rem;
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
}
.template-editor--edit-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-bottom: 0;
  margin-bottom: 0.75rem;
  height: 30px;
}
.template-editor--edit-header--enable {
  line-height: 1.2;
}
.template-editor--edit-header--enable__in-subheader {
  padding-top: 5px;
}
.template-editor--all-pads {
  width: 100%;
  text-align: left;
  margin-bottom: 10px;
  padding-right: 14px;
}
@media (min-width: 750px) {
  .template-editor--all-pads {
    width: 300px;
  }
  .template-editor--all-pads + .flex-grid--item {
    width: calc(100% - 300px);
  }
}
.template-editor--all-pads .all-pads {
  display: inline-block;
}
.template-editor.launchkey-mini-mk3 {
  margin: auto;
  margin-top: 8px;
  width: calc(100% - 16px);
  max-width: 980px;
}
.template-editor.launchkey-mini-mk3 .midi-channel-select {
  margin: 5px 0 20px;
}
.template-editor__control--max-width {
  max-width: 250px;
}
.sl-mkiii .template-editor fieldset {
  border: none;
}
.template-editor select.sl-mkiii {
  width: 100%;
  height: 33.6px;
  margin: 0;
}
.template-editor .checkbox__inline--label {
  margin-right: 0.75rem;
}
.template-editor__sysex-buffer {
  list-style-type: none;
  margin: 0;
}
.template-editor__sysex-buffer::before, .template-editor__sysex-buffer::after {
  content: " ";
  display: table;
}
.template-editor__sysex-buffer::after {
  clear: both;
}
.template-editor__sysex-buffer li {
  float: left;
}
.template-editor__sysex-buffer__header {
  text-align: center;
  margin-top: 0.75rem;
}
.template-editor .template-editor--edit-section .template-editor__channel-selector {
  height: 80px;
}
.template-editor .template-editor--edit-section.template-editor__pad-note-assignment {
  height: 80px;
}

.control-image {
  border: 3px solid transparent;
}
.control-image--label {
  margin-bottom: 0.375rem;
}
.control-image--config {
  font-family: "TTNormsProRegular", roboto, freesans, arial, "system-ui", sans-serif;
  font-weight: 400;
  font-size: 0.8125rem;
  line-height: 1.28;
}
.control-image--label, .control-image--config {
  text-align: center;
}
.control-image--image .highlight {
  fill: #165090;
}
.control-image--image .highlight-stroke {
  stroke: #165090;
}
.control-image.sl-mkiii .control-image--image .highlight {
  fill: #1e1f20;
}
.control-image.sl-mkiii .control-image--image .base {
  fill: #2d2e30;
}
.control-image.sl-mkiii .control-image--image .detail-stroke {
  stroke: #d4d7df;
}
.control-image.sl-mkiii .control-image--image .highlight-stroke {
  stroke: #4c4d50;
}
.control-image.active {
  border: 3px solid #7dafd0;
}
.control-image.active .control-image--image .highlight {
  fill: #7dafd0;
}
.control-image.active .control-image--image .highlight-stroke {
  stroke: #7dafd0;
}
.control-image.active.sl-mkiii {
  border: 3px solid #6a6c70;
}
.control-image.active.sl-mkiii .control-image--image .base {
  fill: #2d2e30;
}
.control-image.active.sl-mkiii .control-image--image .detail-stroke {
  stroke: #2d2e30;
}
.control-image.active.sl-mkiii .control-image--image .highlight {
  fill: #6a6c70;
}
.control-image.active.sl-mkiii .control-image--image .highlight-stroke {
  stroke: #6a6c70;
}
.control-image.active.launchkey-mini-mk3.sustain-pedal {
  border: none;
}
.control-image.active.launchkey-mini-mk3.sustain-pedal .control-image--image .highlight {
  fill: #6a6c70;
}
.control-image.active.launchkey-mini-mk3.sustain-pedal .control-image--image .highlight-stroke {
  stroke: #6a6c70;
}
.control-image.active.launchkey-mini-mk3.sustain-pedal .control-image--image .detail-stroke {
  stroke: #2d2e30;
}
.control-image.disabled .control-image--label {
  color: #d8d8d8;
}
.control-image.disabled .control-image--config {
  visibility: hidden;
}
.control-image.disabled path.highlight {
  fill: #e6e6e6 !important;
}
.control-image.disabled path.st1 {
  fill: #d8d8d8 !important;
}

.bank-selector {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.bank-selector--bank-button {
  background: none;
  border: none;
  border-left: 20px solid #4c4d50;
}
.bank-selector--bank-button.active {
  border-left: 25px solid #6a6c70;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
}

.editable-value {
  width: 10em;
  height: 22px;
  line-height: 22px;
  display: inline-block;
  position: relative;
  color: #d4d7df;
  vertical-align: middle;
}
.editable-value--edit-button {
  display: none;
}
.editable-value--value {
  display: inline-block;
  width: calc(100% - 30px);
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  border-bottom: 1px solid #6a6c70;
  font-weight: 400;
}
.active .editable-value--value {
  color: #0f0f10;
}
.editable-value:hover {
  color: #f2f6ff;
}
.editable-value:hover .editable-value--edit-button {
  display: inline;
}
.editable-value--input {
  width: calc(100% - 30px);
  outline: none;
  border: none;
  border-radius: 2px;
  margin: 0;
  padding: 0 4px;
  line-height: 22px;
  background: transparent;
  vertical-align: middle;
}
.editable-value--input:focus {
  color: #d4d7df;
  border: 1px solid #f2f6ff;
  background: rgba(45, 46, 48, 0.6);
}
.editable-value--without-underline .editable-value--value {
  border-bottom: none;
}
.active .editable-value--without-underline .editable-value--value {
  font-weight: 700;
}
.active .editable-value--without-underline .editable-value--value:hover {
  color: #3d3e40;
}
.editable-value--without-underline .editable-value--input {
  background: rgba(15, 15, 16, 0.6);
  font-weight: 400;
}
.active .editable-value--without-underline .editable-value--input:focus {
  color: #d4d7df;
}
.editable-value .btn__icon--small {
  padding: 0 6px;
  position: absolute;
  color: #969696;
  font-size: 1.2rem;
  border-radius: 0;
  background: transparent;
}
.editable-value .btn__icon--small .confirm-icon {
  margin-top: 4px;
}

.select-entity-transfer ol.select-template-list {
  padding-left: 0;
  height: 16.5em;
}
.select-entity-transfer button.btn.confirm {
  width: 160px;
}

.select-template-transfer__tab-bar {
  display: flex;
  justify-content: space-evenly;
  position: relative;
  z-index: 2;
  margin-bottom: 8px;
}
.select-template-transfer__tab {
  display: block;
  float: left;
  width: 50%;
  max-width: 160px;
  text-align: center;
  color: #fff;
  padding: 12px;
  text-decoration: none;
  background: none;
  border: none;
}
.select-template-transfer__tab:hover {
  text-decoration: underline;
}
.select-template-transfer__tab--active.template {
  border-bottom: 2px solid #0c47e1;
}
.select-template-transfer__tab--active.part {
  border-bottom: 2px solid #0c47e1;
}

.minimum-firmware-warning {
  border: 2px solid #eb6412;
  padding: 0.75rem;
  text-align: center;
}

.sysex-input {
  background: #165090;
  color: #fff;
  padding: 0.375rem;
  border: none;
  width: 7em;
  margin: 0 0.375rem 0.375rem 0;
}
.sysex-input.sl-mkiii {
  border: none;
  background: #038675;
  color: #fff;
}
.sysex-input:disabled {
  background: #595959;
  color: #ededed;
}
.sysex-input.faux {
  color: #ededed;
  display: inline-block;
  border: none;
  border-radius: 3px;
  background: #595959;
  line-height: normal;
}

@keyframes up-arrow {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-80px);
  }
  100% {
    transform: translateY(-80px);
  }
}
@keyframes bottom-center-arrow {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-60px);
  }
  100% {
    transform: translateY(-60px);
  }
}
@keyframes down-arrow {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(70px);
  }
  100% {
    transform: translateY(70px);
  }
}
.wheel-calibration-modal {
  padding: 0;
}

.wheel-calibration .modal__body {
  display: flex;
  width: 550px;
}
.wheel-calibration__button {
  width: 100%;
}
.wheel-calibration--images, .wheel-calibration--text {
  display: flex;
  width: calc(50% - 0.5rem);
}
.wheel-calibration--wheels {
  display: flex;
}
.wheel-calibration--images {
  position: relative;
  margin-right: 1rem;
  border: 1px solid #888a8f;
  border-radius: 2px;
}
.wheel-calibration--images .pitch,
.wheel-calibration--images .modulation {
  width: 50%;
  padding: 8px;
  text-align: center;
}
.wheel-calibration--images .pitch .arrow,
.wheel-calibration--images .modulation .arrow {
  position: relative;
  height: 0;
  width: 0;
  display: none;
}
.wheel-calibration--images .pitch .arrow.active,
.wheel-calibration--images .modulation .arrow.active {
  display: block;
}
.wheel-calibration--images .pitch .arrow .arrow-line,
.wheel-calibration--images .modulation .arrow .arrow-line {
  height: 25px;
  width: 0;
  border: 2px solid #97999f;
  border-radius: 2px;
  margin-left: 10px;
}
.wheel-calibration--images .pitch .arrow .arrow-head,
.wheel-calibration--images .modulation .arrow .arrow-head {
  border: 0.8em solid transparent;
  position: absolute;
}
.wheel-calibration--images .pitch .arrow.up,
.wheel-calibration--images .modulation .arrow.up {
  animation: up-arrow 2s infinite ease-in;
  top: -175px;
}
.wheel-calibration--images .pitch .arrow.up .arrow-head,
.wheel-calibration--images .modulation .arrow.up .arrow-head {
  margin-top: -50px;
  border-bottom: 1em solid #999;
}
.wheel-calibration--images .pitch .arrow.bottom-center,
.wheel-calibration--images .modulation .arrow.bottom-center {
  animation: bottom-center-arrow 2s infinite ease-in;
  top: -70px;
}
.wheel-calibration--images .pitch .arrow.bottom-center .arrow-head,
.wheel-calibration--images .modulation .arrow.bottom-center .arrow-head {
  margin-top: -50px;
  border-bottom: 1em solid #999;
}
.wheel-calibration--images .pitch .arrow.down,
.wheel-calibration--images .pitch .arrow.top-center,
.wheel-calibration--images .modulation .arrow.down,
.wheel-calibration--images .modulation .arrow.top-center {
  animation: down-arrow 2s infinite ease-in;
}
.wheel-calibration--images .pitch .arrow.down .arrow-head,
.wheel-calibration--images .pitch .arrow.top-center .arrow-head,
.wheel-calibration--images .modulation .arrow.down .arrow-head,
.wheel-calibration--images .modulation .arrow.top-center .arrow-head {
  margin-top: -2px;
  border-top: 1em solid #999;
}
.wheel-calibration--images .pitch .arrow.down,
.wheel-calibration--images .modulation .arrow.down {
  top: -150px;
}
.wheel-calibration--images .pitch .arrow.top-center,
.wheel-calibration--images .modulation .arrow.top-center {
  top: -270px;
}
.wheel-calibration--images .pitch .arrow {
  left: 2px;
}
.wheel-calibration--images .modulation .arrow {
  left: 80px;
}
.wheel-calibration--text {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.wheel-calibration--text ol {
  padding-left: 20px;
  margin-bottom: 0;
}
.wheel-calibration--text ol li {
  font-size: 0.8125rem;
  margin-bottom: 20px;
}
.wheel-calibration--text > p {
  margin-bottom: 0;
}
.wheel-calibration--complete-icon .icon, .wheel-calibration--error-icon .icon {
  color: #f2f6ff;
  width: 96px;
  height: 96px;
}
.wheel-calibration--complete-circle, .wheel-calibration--error-circle {
  border-radius: 120px;
  border: 5px solid #f2f6ff;
  width: 120px;
  height: 120px;
  box-shadow: 0 0 5px #0f0f10;
  display: flex;
  justify-content: center;
  align-items: center;
}
.wheel-calibration--complete-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 100%;
  height: 100%;
}
.wheel-calibration--complete-icon .icon {
  position: absolute;
}
.wheel-calibration--complete-icon.hide {
  display: none;
}
.wheel-calibration--complete-circle {
  position: absolute;
  background: #25ac7b;
  margin: auto;
}
.wheel-calibration--error-icon {
  text-align: center;
}
.wheel-calibration--error-circle {
  position: relative;
  background: #ac2525;
  left: 50%;
  margin-left: -60px;
  font-size: 80px;
}
.wheel-calibration--wheel {
  margin: 10px -10px;
}
.wheel-calibration--wheel .highlight {
  fill: #6a6c70;
}
.wheel-calibration--wheel .st1 {
  fill: #2d2e30;
}
.wheel-calibration .disabled {
  opacity: 0.5;
}
.wheel-calibration .octave-buttons-container {
  padding: 15px 10px;
  border: 1px solid #888a8f;
  border-radius: 2px;
  text-align: center;
}
.wheel-calibration .octave-buttons-container .octave-buttons {
  display: flex;
  justify-content: space-around;
}
.wheel-calibration .octave-buttons-container .octave-buttons--title {
  font-weight: 400;
  margin-bottom: 10px;
}
.wheel-calibration .octave-buttons-container .octave-buttons--button {
  height: 20px;
  width: 60px;
  border: 4px solid #e4e4e4;
  border-radius: 2px;
  background: #333;
  color: #fff;
  line-height: 12px;
  font-weight: 400;
  opacity: 1;
}
.wheel-calibration .octave-buttons-container .octave-buttons--button.disabled {
  border: 4px solid #797979;
  opacity: 0.4;
}

.seven-segment-display {
  background: #000;
  margin: 20px 0;
}
.seven-segment-display g {
  stroke-width: 0.5;
  stroke-opacity: 0.5;
  transform: skewX(-3deg);
}
.seven-segment-display polygon.segment-on {
  fill: #f00;
  stroke: #500;
}
.seven-segment-display polygon.segment-off {
  fill: rgba(255, 0, 0, 0);
  stroke: rgba(0, 0, 0, 0);
}

.custom-message-container {
  max-width: 100%;
  display: flex;
  flex-direction: column;
}
.custom-message-container > div {
  text-align: center;
}
.custom-message-container h2 {
  margin-top: 10px;
}
.custom-message-container .custom-message-input {
  width: 50%;
  min-width: 305px;
  max-width: 100%;
  margin-bottom: 20px;
}
.custom-message-container button {
  width: 50%;
  min-width: 305px;
  max-width: 100%;
  height: 40px;
}
.custom-message-container button:hover {
  opacity: 0.9;
}

.afx-editor {
  margin: 64px auto;
  width: 405px;
  height: 159px;
  position: relative;
}
.afx-editor__dummy {
  display: none;
}
.afx-editor__keyboard.midi-keyboard {
  position: absolute;
  width: 405px;
  height: 159px;
  display: flex;
  overflow: hidden;
}
.afx-editor__keyboard.midi-keyboard .midi-key {
  width: 26.7px;
  height: 157px;
  background: #a1a1a1 url("/assets/images/svgs/empty_key.svg") center 95% no-repeat;
  border-color: #111;
  border-top: none;
  padding: 0;
  z-index: 1;
}
@media (width <= 420px) {
  .afx-editor__keyboard.midi-keyboard .midi-key {
    width: 6.4vw;
  }
}
.afx-editor__keyboard.midi-keyboard .midi-key--c-sharp, .afx-editor__keyboard.midi-keyboard .midi-key--d-sharp, .afx-editor__keyboard.midi-keyboard .midi-key--f-sharp, .afx-editor__keyboard.midi-keyboard .midi-key--g-sharp, .afx-editor__keyboard.midi-keyboard .midi-key--a-sharp {
  width: 20px;
  height: 100px;
  margin: 0 -10px;
  background-position: center 92%;
  border-color: #000;
  border-width: 2px;
  z-index: 3;
}
.afx-editor__keyboard.midi-keyboard .midi-key--c-sharp {
  margin-left: -13px;
  margin-right: -7px;
}
.afx-editor__keyboard.midi-keyboard .midi-key--d-sharp {
  margin-left: -7px;
  margin-right: -13px;
}
.afx-editor__keyboard.midi-keyboard .midi-key--f-sharp {
  margin-left: -14px;
  margin-right: -6px;
}
.afx-editor__keyboard.midi-keyboard .midi-key--g-sharp {
  margin-left: -10px;
  margin-right: -10px;
}
.afx-editor__keyboard.midi-keyboard .midi-key--a-sharp {
  margin-left: -6px;
  margin-right: -14px;
}
.afx-editor__keyboard.midi-keyboard .midi-key:hover {
  background-color: #cdcdcd;
}
.afx-editor__keyboard.midi-keyboard .midi-key:focus.focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2pt #0e62c9, 0 0 0 1pt white;
  z-index: 2;
}
.afx-editor__keyboard.midi-keyboard .midi-key--drag-hover,
.afx-editor__keyboard.midi-keyboard .afx-editor__note--has-overlay.midi-key.midi-key--drag-hover {
  background-color: #21a7d5;
}
.afx-editor__keyboard.midi-keyboard .afx-editor__note--has-overlay.midi-key {
  background-color: #fff;
  background-image: none;
  border-color: #595959;
}
.afx-editor__keyboard.midi-keyboard .afx-editor__note--has-overlay.midi-key--c-sharp, .afx-editor__keyboard.midi-keyboard .afx-editor__note--has-overlay.midi-key--d-sharp, .afx-editor__keyboard.midi-keyboard .afx-editor__note--has-overlay.midi-key--f-sharp, .afx-editor__keyboard.midi-keyboard .afx-editor__note--has-overlay.midi-key--g-sharp, .afx-editor__keyboard.midi-keyboard .afx-editor__note--has-overlay.midi-key--a-sharp {
  background: #000;
}
.afx-editor__keyboard.midi-keyboard .afx-editor__note--has-overlay.midi-key:not(.afx-editor__note--active):hover {
  background-color: #cdcdcd;
}
.afx-editor__keyboard.midi-keyboard .afx-editor__note--active.midi-key {
  background-color: #21a7d5;
  border-color: #595959;
}
.afx-editor__keyboard.midi-keyboard .afx-editor__note--active.midi-key.afx-editor__note--has-overlay {
  background-image: none;
}
@media (min-width: 900px) {
  .afx-editor {
    width: 502px;
    height: 305px;
  }
  .afx-editor .afx-editor__dummy {
    display: block;
    position: absolute;
    background: transparent url("/assets/images/svgs/afx/bsii.svg") top left no-repeat;
    background-size: cover;
    width: 502px;
    height: 305px;
    transition: opacity 0.2s;
  }
  .afx-editor__keyboard.midi-keyboard {
    top: 146px;
    left: 80px;
  }
  .afx-editor.afx-editor--dragging .afx-editor__dummy {
    opacity: 0.4;
  }
}

.afx-overlay-details {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  width: 502px;
  margin: 0 auto;
  margin-top: 1.5rem;
}
@media (width <= 899px) {
  .afx-overlay-details {
    width: 400px;
  }
}
@media (width <= 420px) {
  .afx-overlay-details {
    display: block;
  }
}
.afx-overlay-details__metadata {
  min-height: 120px;
}
@media (width <= 899px) {
  .afx-overlay-details__metadata {
    width: 40%;
  }
}
@media (width <= 420px) {
  .afx-overlay-details__metadata {
    margin-bottom: 12px;
  }
}
.afx-overlay-details__actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
  align-items: start;
}
.afx-overlay-details__actions .button {
  width: 164px;
  min-width: 100%;
}

.afx-editor-sidebar__flex-wrapper {
  display: flex;
  justify-content: space-between;
}
.afx-editor-sidebar__header {
  text-align: center;
  height: 30px;
  background: #595959;
}
.afx-editor-sidebar__header.sidebar__header {
  padding: 0;
}
.afx-editor-sidebar__header.sidebar__header h4 {
  margin: auto 8px;
  font-weight: 300;
  font-size: 1rem;
  line-height: 15px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
@media (min-width: 1050px) {
  .afx-editor-sidebar__header {
    display: block;
  }
}
.afx-editor-sidebar__fieldset {
  border: none;
  border-top: 1px solid #656565;
  padding: 0;
}
.afx-editor-sidebar__fieldset legend {
  padding: 0;
  padding-right: 0.5em;
  margin-left: 0;
  position: relative;
}
.afx-editor-sidebar .sidebar-row {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: flex-end;
}
.afx-editor-sidebar .sidebar-row__three {
  margin-bottom: 0;
}
.afx-editor-sidebar .sidebar-row .knob {
  min-width: 80px;
  margin: 5px 0;
}
.afx-editor-sidebar .sidebar-row .afx-editor-sidebar__checkbox {
  min-width: 80px;
  margin: 5px 0;
  height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.afx-editor-sidebar .sidebar-row .checkbox-label {
  text-align: center;
  font-size: 0.8125rem;
  margin-bottom: 5px;
}
.afx-editor-sidebar__body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: calc(100% - 40px);
  max-height: 900px;
  padding: 8px;
}
.afx-editor-sidebar__mask {
  background: rgba(27, 27, 27, 0.7019607843);
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}
.afx-editor-sidebar__mask p {
  background: rgb(36, 35, 40);
  color: #aaa;
  box-shadow: 2px 2px 5px #111;
  width: 80%;
  margin: auto;
  margin-top: 120px;
  padding: 16px;
  text-align: center;
  border-radius: 4px;
}

.afx-tuning-controls {
  width: 160px;
  margin: 20px 0 5px 8px;
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.afx-tuning-controls__flex-wrapper {
  min-height: 190px;
}
.afx-tuning-controls label {
  display: flex;
  align-items: center;
  min-height: 36px;
}
.afx-tuning-controls label + .select {
  margin: 0;
}
.afx-tuning-controls .select,
.afx-tuning-controls .input {
  width: 80px;
}
.afx-tuning-controls .radio-button-group--horizontal .radio-button-group--entry::after {
  top: 5px;
  width: 50px;
}
.afx-tuning-controls .radio-button-group--horizontal .radio-button-group--entry label {
  min-width: 55px;
}
.afx-tuning-controls .knob {
  min-width: 55px;
  margin: 5px 0;
  margin-top: -8px;
}
.afx-tuning-controls .knob svg {
  margin: 0;
  margin-bottom: 10px;
}
.afx-tuning-controls .checkbox {
  padding: 0;
  width: 20px;
  height: 28px;
  margin-top: 5px;
}
.afx-tuning-controls .checkbox ~ label {
  font-size: 1rem;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.afx-env-controls {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: 105px;
  margin-bottom: 8px;
}
.afx-env-controls > div {
  display: flex;
  flex-grow: 1;
}
.afx-env-controls .knob {
  margin: 0;
  margin-right: 5px;
  padding: 0;
  min-width: 50px;
  width: 50px;
  height: 90px;
}
.afx-env-controls .checkbox {
  margin-top: 14px;
  margin-bottom: 6px;
}
.afx-env-controls .checkbox ~ label {
  font-size: 0.8125rem;
  text-align: center;
  width: 60px;
  display: block;
}

.afx-output-controls {
  width: 75px;
}
.afx-output-controls .knob {
  min-width: 55px;
  margin: 5px 0;
  top: 20px;
}
.afx-output-controls .knob svg {
  margin: 0;
}
.afx-output-controls .knob__widget__circle {
  top: 7px;
}

.afx-lfo-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100px;
}
.afx-lfo-controls__container {
  display: inline-block;
  position: relative;
  width: 128px;
}
.afx-lfo-controls__container:first-of-type {
  margin-right: 8px;
}
.afx-lfo-controls__container:last-of-type {
  margin-left: 0;
}
.afx-lfo-controls .knob {
  margin: 0;
  padding: 0;
  min-width: 40px;
  width: 50px;
}
.afx-lfo-controls > div:nth-child(2) {
  margin-top: 12px;
}
.afx-lfo-controls .checkbox ~ label {
  font-size: 0.6875rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.step-sequencer {
  width: 502px;
  margin: 1em auto;
}
@media (width <= 899px) {
  .step-sequencer {
    width: 400px;
  }
}
.step-sequencer__header {
  border: none;
  border-top: 1px solid #d4d7df;
  padding: 0;
  margin-bottom: 10px;
}
.step-sequencer__header-title {
  padding: 0 0.5em 0 0;
  margin-left: 0;
  top: -3px;
  position: relative;
}
.step-sequencer__body {
  display: flex;
  flex-direction: row;
  justify-content: stretch;
  align-items: center;
  position: relative;
}
.step-sequencer__progress {
  width: 100%;
  margin-right: 0.375rem;
  appearance: none;
  border: none;
  opacity: 1;
  background-color: #4f4f4f;
  height: 5px;
  border-radius: 100px;
}
.step-sequencer__progress[value]::-webkit-progress-bar {
  background-color: #4f4f4f;
  border-radius: 100px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2509803922) inset;
}
.step-sequencer__progress[value]::-moz-progress-bar {
  background-color: #2ea8d4;
  border-radius: 100px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2509803922) inset;
}
.step-sequencer__progress[value]::-webkit-progress-value {
  background-color: #2ea8d4;
  border-radius: 100px;
}
.librarian .step-sequencer__play-button {
  min-width: 40px;
  margin-right: 0.375rem;
}
.librarian .step-sequencer__tempo-button {
  background: none;
}
.step-sequencer__tempo-popup {
  position: absolute;
  right: -10px;
  top: -120px;
  z-index: 20;
  width: 300px;
  background: #1e1e20;
  border-radius: 5px;
  padding: 0.5rem;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3019607843);
}
.step-sequencer__tempo-popup__header, .step-sequencer__tempo-popup__footer {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
}
.step-sequencer__tempo-popup__header {
  margin-bottom: 10px;
}
.step-sequencer__tempo-popup__footer {
  margin-top: 6px;
  font-size: 12px;
  color: #ededed;
}
.step-sequencer__tempo-popup__pointer {
  position: absolute;
  width: 30px;
  height: 30px;
  right: 10px;
  bottom: -30px;
  fill: #1e1e20;
}
.step-sequencer__tempo-popup .value-slider--track {
  background-color: #fff;
  height: 1px;
  width: calc(100% - 16px);
}
.step-sequencer__tempo-popup .value-slider--gauge {
  display: none;
}
.step-sequencer__tempo-popup .value-slider--thumb {
  width: 16px;
  height: 16px;
  font-size: 0;
  background: #21a7d5;
  box-shadow: none;
  transition: transform 0.1s;
}
.step-sequencer__tempo-popup .value-slider--thumb:focus {
  transform: translate(-8px, -5px);
}
.step-sequencer__tempo-popup .value-slider--thumb:hover, .step-sequencer__tempo-popup .value-slider--thumb.focus-visible:focus {
  transform: translate(-8px, -5px) scale(1.2);
  background: #35c4e8;
  box-shadow: none;
}

.tuning-table-editor__container, .tuning-table-editor__header, .tuning-table-editor__footer {
  max-width: 100%;
  margin: 0 auto;
  margin-bottom: 20px;
}
.tuning-table-editor__upload-button, .tuning-table-editor__send-button {
  width: 50%;
  display: block;
  margin: 0 auto;
  margin-bottom: 20px;
  transition: 0.1s ease;
}
.tuning-table-editor__filename {
  margin: 15px 0;
}
.tuning-table-editor__number-of-tunings {
  margin: 15px 0;
}
.tuning-table-editor__number-of-tunings label {
  font-weight: 400;
}
.tuning-table-editor__description {
  margin: 15px 0;
}
.tuning-table-editor__description p {
  margin: 5px 0 10px;
  min-height: 30px;
}
.tuning-table-editor__tuning-reference {
  margin: 15px 0;
}
.tuning-table-editor__tuning-reference label + div {
  margin: 10px 0;
}
.tuning-table-editor__tuning-reference-input {
  width: 60px;
  padding: 4px 8px;
}
.tuning-table-editor__base-frequency {
  margin-left: 20px;
}
.tuning-table-editor__select-table {
  margin: 15px 0;
}
.tuning-table-editor__select-table label + div {
  margin: 10px 0 20px;
}
.tuning-table-editor__find-tuning-tables {
  margin-top: 10px;
}

.identity-table {
  width: 100%;
  margin: auto;
  margin-top: 64px;
  border-collapse: separate;
  padding: 24px;
  border-radius: 6px;
  border: 1px solid rgba(227, 230, 239, 0.1490196078);
  background: rgba(226, 229, 238, 0.0509803922);
}
.identity-table thead tr th {
  color: #f2f6ff;
  font-size: 23px;
  font-style: normal;
  font-weight: 600;
  padding: 0;
  border: none;
  line-height: 23px;
  padding-bottom: 16px;
}
.identity-table tbody tr {
  background-color: transparent;
  height: 36px;
  line-height: 36px;
}
.identity-table tbody tr:nth-child(2n+1) {
  background-color: transparent;
}
.identity-table tbody tr td {
  max-width: 500px;
  border-right: none;
  padding: 4px 16px;
}
.identity-table tbody tr.identity--active {
  background-color: rgba(227, 230, 239, 0.1019607843);
}
.identity-table tbody tr.identity--explanation {
  vertical-align: top;
  border: 1px solid red;
}
.identity-table tbody tr.identity--explanation .explanation-cell {
  padding: 16px;
}
.identity-table .identity__status {
  line-height: 24px;
  padding: 6px 16px;
}

.factory-pack-info {
  margin: 32px 0 0;
  width: 608px;
}
.factory-pack-info h3 {
  margin-bottom: 0;
}
.factory-pack-info p {
  margin-bottom: 0.5em;
}
.factory-pack-info__header {
  border: 1px solid #7a7b80;
  border-radius: 2px 2px 0 0;
  border-bottom: none;
  padding: 16px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  background: rgba(45, 46, 48, 0.9019607843);
  margin: 0;
}
.factory-pack-info__header-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.factory-pack-info__header-text {
  margin-bottom: 0;
}
.factory-pack-info__buttons {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  gap: 8px;
}
.factory-pack-info__image {
  width: 120px;
  height: 120px;
  display: block;
  margin-right: 16px;
  border-radius: 2px;
}
.factory-pack-info__body {
  border: 1px solid #7a7b80;
  border-radius: 0 0 2px 2px;
  border-top: none;
  background: rgba(76, 77, 80, 0.9019607843);
  padding: 16px;
}
.factory-pack-info__body iframe {
  margin: 0 auto 1em;
  display: block;
}

.launchpad__base {
  position: relative;
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(9, 1fr);
  gap: 10px;
  margin: 30px auto 0;
  width: 500px;
  height: 500px;
  padding: 28px;
  background: rgba(15, 15, 16, 0.9019607843);
  border: 2px solid rgba(91, 92, 96, 0.9019607843);
  border-radius: 2px;
  box-shadow: 0 0 5px #171717;
}
.launchpad__base.launchpad-pro-mk3 {
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(10, 1fr);
  width: 540px;
  height: 540px;
  padding: 23px;
}
.launchpad__shift-button, .launchpad__setup-button {
  display: flex;
  align-items: center;
  justify-content: center;
}
.launchpad__shift-button .shift-button,
.launchpad__shift-button .setup-button, .launchpad__setup-button .shift-button,
.launchpad__setup-button .setup-button {
  width: 50%;
  height: 50%;
  border-radius: 2px;
  border: 1px solid #828282;
  background: none;
}
.launchpad__buttons-top {
  grid-column: 1/9;
  grid-row: 1;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 10px;
}
.launchpad-pro-mk3 .launchpad__buttons-top {
  grid-column: 2/10;
}
.launchpad__buttons-bottom {
  grid-column: 1/9;
  grid-row: 10;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px 10px;
}
.launchpad-pro-mk3 .launchpad__buttons-bottom {
  grid-column: 2/10;
}
.launchpad__novation-logo {
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #525252;
}
.launchpad__novation-logo svg {
  width: 75%;
  height: 75%;
}
.launchpad__novation-logo path {
  transition: fill 0.1s;
  fill: #828282;
}
.launchpad-ready .launchpad__novation-logo path {
  fill: #f2f2f2;
}
.launchpad__buttons-side {
  grid-row: 2/10;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 10px;
}
.launchpad__button {
  box-sizing: border-box;
  border-radius: 2px;
  border: 1px solid #828282;
  background: none;
}
.launchpad__button-arrow {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #828282;
  padding: 0;
  width: auto;
}
.launchpad__button-arrow-container {
  display: contents;
}
.launchpad__button-arrow-container:hover .launchpad__button-arrow {
  border-color: #a6a9af;
}
.launchpad__button-arrow-container:hover .launchpad__button-arrow-pointer {
  border-color: transparent;
}
.launchpad__button-arrow-container:hover .launchpad__button-arrow-pointer--up {
  border-bottom-color: #a6a9af;
}
.launchpad__button-arrow-container:hover .launchpad__button-arrow-pointer--down {
  border-top-color: #a6a9af;
}
.launchpad__button-arrow-container:hover .launchpad__button-arrow-pointer--left {
  border-right-color: #a6a9af;
}
.launchpad__button-arrow-container:hover .launchpad__button-arrow-pointer--right {
  border-left-color: #a6a9af;
}
.launchpad__button-arrow-container:hover .launchpad__button-arrow--active-octave {
  border-color: #79fdfc;
}
.launchpad__button-arrow-container:hover .launchpad__button-arrow--active-octave .launchpad__button-arrow-pointer {
  border-color: transparent;
}
.launchpad__button-arrow-container:hover .launchpad__button-arrow--active-octave .launchpad__button-arrow-pointer--up {
  border-bottom-color: #79fdfc;
}
.launchpad__button-arrow-container:hover .launchpad__button-arrow--active-octave .launchpad__button-arrow-pointer--down {
  border-top-color: #79fdfc;
}
.launchpad__button-arrow-container:hover .launchpad__button-arrow--active-octave .launchpad__button-arrow-pointer--left {
  border-right-color: #79fdfc;
}
.launchpad__button-arrow-container:hover .launchpad__button-arrow--active-octave .launchpad__button-arrow-pointer--right {
  border-left-color: #79fdfc;
}
.launchpad__button-arrow-container:hover .launchpad__button-arrow--active-semitone {
  border-color: #fa7efa;
}
.launchpad__button-arrow-container:hover .launchpad__button-arrow--active-semitone .launchpad__button-arrow-pointer {
  border-color: transparent;
}
.launchpad__button-arrow-container:hover .launchpad__button-arrow--active-semitone .launchpad__button-arrow-pointer--up {
  border-bottom-color: #fa7efa;
}
.launchpad__button-arrow-container:hover .launchpad__button-arrow--active-semitone .launchpad__button-arrow-pointer--down {
  border-top-color: #fa7efa;
}
.launchpad__button-arrow-container:hover .launchpad__button-arrow--active-semitone .launchpad__button-arrow-pointer--left {
  border-right-color: #fa7efa;
}
.launchpad__button-arrow-container:hover .launchpad__button-arrow--active-semitone .launchpad__button-arrow-pointer--right {
  border-left-color: #fa7efa;
}
.launchpad__button-arrow-pointer {
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent;
}
.launchpad__button-arrow-pointer--up {
  border-width: 0 6px 10.4px;
  border-bottom-color: #828282;
}
.launchpad__button-arrow-pointer--down {
  border-width: 10.4px 6px 0;
  border-top-color: #828282;
}
.launchpad__button-arrow-pointer--left {
  border-width: 6px 10.4px 6px 0;
  border-right-color: #828282;
}
.launchpad__button-arrow-pointer--right {
  border-width: 6px 0 6px 10.4px;
  border-left-color: #828282;
}
.launchpad__button-arrow--active-octave {
  border-color: #18d9d9;
}
.launchpad__button-arrow--active-octave .launchpad__button-arrow-pointer {
  border-color: transparent;
}
.launchpad__button-arrow--active-octave .launchpad__button-arrow-pointer--up {
  border-bottom-color: #18d9d9;
}
.launchpad__button-arrow--active-octave .launchpad__button-arrow-pointer--down {
  border-top-color: #18d9d9;
}
.launchpad__button-arrow--active-octave .launchpad__button-arrow-pointer--left {
  border-right-color: #18d9d9;
}
.launchpad__button-arrow--active-octave .launchpad__button-arrow-pointer--right {
  border-left-color: #18d9d9;
}
.launchpad__button-arrow--active-semitone {
  border-color: #e039e0;
}
.launchpad__button-arrow--active-semitone .launchpad__button-arrow-pointer {
  border-color: transparent;
}
.launchpad__button-arrow--active-semitone .launchpad__button-arrow-pointer--up {
  border-bottom-color: #e039e0;
}
.launchpad__button-arrow--active-semitone .launchpad__button-arrow-pointer--down {
  border-top-color: #e039e0;
}
.launchpad__button-arrow--active-semitone .launchpad__button-arrow-pointer--left {
  border-right-color: #e039e0;
}
.launchpad__button-arrow--active-semitone .launchpad__button-arrow-pointer--right {
  border-left-color: #e039e0;
}
.launchpad-ready .launchpad__button.active {
  border-color: rgba(115, 245, 155, 0.7019607843);
}
.launchpad__grid {
  position: relative;
  grid-column: 1/9;
  grid-row: 2/10;
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.launchpad__grid--projects {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 10px;
}
.launchpad-pro-mk3 .launchpad__grid {
  grid-column: 2/10;
}
.launchpad__grid-pads {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 10px;
  height: 100%;
}
.launchpad__pad {
  box-sizing: border-box;
  position: relative;
  border-radius: 2px;
  background: #525252;
  border: 1px solid #525252;
  transition: background 0.1s;
  cursor: default;
}
.launchpad-pro-mk3 .launchpad__pad {
  cursor: pointer;
}
.launchpad__pad-index {
  position: absolute;
}
.launchpad__pad-name {
  text-align: center;
  width: 100%;
  position: absolute;
}
.launchpad__pad:nth-child(28) {
  position: relative;
}
.launchpad__pad:nth-child(28)::before {
  content: "";
  position: absolute;
  bottom: 1px;
  right: 1px;
  border-bottom: 7px solid #111;
  border-left: 7px solid transparent;
  width: 0;
  margin-right: -2px;
  margin-bottom: -2px;
}
.launchpad__pad:nth-child(29) {
  position: relative;
}
.launchpad__pad:nth-child(29)::before {
  content: "";
  position: absolute;
  bottom: 1px;
  left: 1px;
  border-bottom: 7px solid #111;
  border-right: 7px solid transparent;
  width: 0;
  margin-left: -2px;
  margin-bottom: -2px;
}
.launchpad__pad:nth-child(36) {
  position: relative;
}
.launchpad__pad:nth-child(36)::before {
  content: "";
  position: absolute;
  top: 1px;
  right: 1px;
  border-top: 7px solid #111;
  border-left: 7px solid transparent;
  width: 0;
  margin-right: -2px;
  margin-top: -2px;
}
.launchpad__pad:nth-child(37) {
  position: relative;
}
.launchpad__pad:nth-child(37)::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  border-top: 7px solid #111;
  border-right: 7px solid transparent;
  width: 0;
  margin-left: -2px;
  margin-top: -2px;
}
.launchpad__pad[data-selected]::before {
  content: "";
  position: absolute;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  left: 3px;
  top: 3px;
  border-radius: 3px;
  border: 2px solid #0f0f10;
  margin: 0;
}
.launchpad__pad[data-selected]::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  border-radius: 2px;
  border: 2px solid #f2f6ff;
}
.launchpad__meta-object-container {
  position: absolute;
  inset: -5px;
  pointer-events: none;
}
.launchpad__meta-object {
  position: absolute;
  border: 2px solid transparent;
  border-radius: 6px;
  transition: border-color 0.1s;
  cursor: pointer;
  pointer-events: all;
}
.disable-pointer-events .launchpad__meta-object {
  pointer-events: none;
}
.launchpad__meta-object:hover:not([data-selected]) {
  border-color: rgba(255, 255, 0, 0.5019607843);
}
.launchpad__meta-object[data-selected]:not(.is-dragging) {
  border-color: rgba(113, 172, 232, 0.6);
}
.launchpad__meta-object.is-dragging {
  cursor: grabbing;
}
.launchpad__meta-object.is-duplicating {
  cursor: copy;
}
.launchpad__meta-object.will-delete {
  cursor: grab;
}
@media screen and (width >= 1650px) and (height >= 900px) {
  .launchpad__base {
    width: 600px;
    height: 600px;
    padding: 27px;
  }
  .launchpad__base.launchpad-pro-mk3 {
    width: 650px;
    height: 650px;
    padding: 28px;
  }
  .launchpad__base, .launchpad__grid-pads, .launchpad__grid--projects, .launchpad__buttons-top, .launchpad__buttons-bottom, .launchpad__buttons-side {
    gap: 12px;
  }
  .launchpad__meta-object-container {
    inset: -6px;
  }
}
@media screen and (width >= 2000px) and (height >= 1050px) {
  .launchpad__base {
    width: 800px;
    height: 800px;
    padding: 35px;
  }
  .launchpad__base.launchpad-pro-mk3 {
    width: 900px;
    height: 900px;
    padding: 37px;
  }
  .launchpad__base, .launchpad__grid-pads, .launchpad__grid--projects, .launchpad__buttons-top, .launchpad__buttons-bottom, .launchpad__buttons-side {
    gap: 16px;
  }
  .launchpad__meta-object-container {
    inset: -8px;
  }
}
.launchpad__widget-settings.sidebar {
  height: calc(100% - 98px);
}
.launchpad__widget-settings.sidebar .sidebar__scroll-container, .launchpad__project-settings.sidebar .sidebar__scroll-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.launchpad__project-settings.sidebar {
  height: calc(100% - 98px);
}
.launchpad.main-section__inner {
  margin-right: 280px;
  width: calc(100% - 280px);
  height: min-content;
  min-height: calc(100vh - 98px);
}
.launchpad__global-settings {
  margin: 1.5rem auto 0 auto;
  text-align: center;
}
.launchpad__global-settings .color-picker--single {
  margin: 0;
}
.launchpad__global-settings .color-picker--single.color-picker--item:last-child::before {
  content: "";
}
.launchpad__global-settings .color-picker--single.color-picker--item:last-child.color-picker__item--blank::before {
  content: "×";
}
.launchpad__global-settings label div {
  margin-bottom: 5px;
}

.widget-settings,
.project-settings {
  padding: 10px;
}
.widget-settings__body.sidebar__body,
.project-settings__body.sidebar__body {
  flex-grow: 1;
}
.widget-settings__body.sidebar__body .project-name,
.project-settings__body.sidebar__body .project-name {
  width: 100%;
}
.widget-settings__buttons,
.project-settings__buttons {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.widget-settings__buttons button,
.project-settings__buttons button {
  margin-bottom: 0.75rem;
}
.widget-settings__button-row,
.project-settings__button-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.widget-settings__button-row button,
.project-settings__button-row button {
  width: calc(50% - 0.375rem);
}
.widget-settings__footer,
.project-settings__footer {
  display: flex;
  flex-direction: column;
  flex-grow: 0;
}
.widget-settings__footer.sidebar__footer:last-child,
.project-settings__footer.sidebar__footer:last-child {
  flex-grow: 0;
}

.project-settings__footer .color-picker {
  width: 140px;
  margin: 0.375rem auto 0 auto;
}

.widget-settings__body {
  display: flex;
  flex-direction: column;
  align-content: start;
}
.widget-settings__body label:not(:first-child) {
  margin-top: 8px;
}
.widget-settings__body .keystroke-input {
  width: 100%;
}
.widget-settings__body label + .keystroke-input__wrapper {
  margin-top: 4px;
}
.widget-settings__body .select {
  margin-top: 4px;
}
.widget-settings__body__single-column {
  grid-column: span 2;
}
.widget-settings__footer {
  flex-grow: 0;
}
.widget-settings__footer.button-stack button:only-child {
  margin: 0;
}
.widget-settings__footer .color-picker, .widget-settings__body .color-picker {
  margin-bottom: 10px;
}
.widget-settings__footer .color-picker li, .widget-settings__body .color-picker li {
  position: relative;
}
.widget-settings__footer .color-picker li:last-child::before, .widget-settings__body .color-picker li:last-child::before {
  content: "×";
  color: #888a8f;
  font-size: 28px;
  line-height: 23px;
  pointer-events: none;
  position: absolute;
  width: 100%;
  text-align: center;
}
.launchkey-mini-mk3 .widget-settings__footer .color-picker li:last-child::before, .launchkey-mini-mk3 .widget-settings__body .color-picker li:last-child::before {
  content: "";
}

.launchpad-widget-browser.sidebar {
  height: calc(100% - 98px);
}
.launchpad-widget-browser .sidebar__scroll-container {
  padding: 16px;
}
.launchpad-widget-browser ul.widgets {
  list-style: none;
  padding: 0;
  margin-top: 20px;
  margin-bottom: 0;
}
.launchpad-widget-browser__heading {
  color: #e3e6ef;
}
.launchpad-widget-browser__category-name {
  margin-top: 16px;
  margin-bottom: 8px;
  font-family: "TTNormsProDemiBold", roboto, freesans, arial, "system-ui", sans-serif;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0.08em;
}
.launchpad-widget-browser__widgets {
  padding-left: 0;
  margin-bottom: 12px;
}
.launchpad-widget-browser__category:last-child .launchpad-widget-browser__widgets {
  margin-bottom: 0;
}
.launchpad-widget-browser__widget {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0;
  padding: 4px 8px;
  border-radius: 2px;
  color: #d4d7df;
  cursor: grab;
}
.launchpad-widget-browser__widget[aria-grabbed] {
  cursor: grabbing;
}
.launchpad-widget-browser__widget:hover {
  background-color: rgba(227, 230, 239, 0.1019607843);
}
.launchpad-widget-browser__widget-icon {
  height: 32px;
}

.marquee-select {
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(93, 135, 246, 0.2);
  border: 1px solid #209bfc;
  z-index: 1;
}
.marquee-select__container {
  position: fixed;
  z-index: 2;
}

.select-custom-mode-type {
  max-width: 670px;
  margin: auto;
  text-align: center;
}
.select-custom-mode-type h3__group,
.select-custom-mode-type .cancel-button__group,
.select-custom-mode-type .bank-chooser__group {
  margin-bottom: 35px;
  text-align: center;
}
.select-custom-mode-type__types {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  margin-bottom: 35px;
  width: 100%;
}
.select-custom-mode-type__types > div {
  display: flex;
  flex-direction: column;
}
.select-custom-mode-type h3 {
  margin-top: 68px;
  margin-bottom: 35px;
}
.select-custom-mode-type .cancel-button {
  margin: 0 auto;
}
.select-custom-mode-type button {
  margin: 10px 30px;
  transition: 0.1s ease;
}
.select-custom-mode-type button svg {
  width: 32px;
  height: 32px;
}
.select-custom-mode-type button:disabled {
  opacity: 0.5;
}
.select-custom-mode-type button:disabled ~ label {
  color: #595959;
}
.select-custom-mode-type button:not(.cancel-button) {
  background: #595959;
  border: none;
  width: 80px;
  height: 80px;
  border-radius: 6px;
  font-style: normal;
  font-weight: 300;
  font-size: 15px;
  line-height: 18px;
}
.select-custom-mode-type button:not(.cancel-button) ~ label {
  margin: 10px;
  white-space: nowrap;
}
.select-custom-mode-type button:not(.cancel-button):hover, .select-custom-mode-type button:not(.cancel-button).selected {
  background-color: #1cb497;
  transform: translateY(-5px);
  box-shadow: 0 10px 16px 0 rgba(0, 0, 0, 0.5019607843);
}
.select-custom-mode-type button:not(.cancel-button):hover:disabled, .select-custom-mode-type button:not(.cancel-button).selected:disabled {
  background-color: #595959;
  transform: none;
  box-shadow: none;
}
.select-custom-mode-type button:hover > .pot-type-icon {
  animation: pot-rotate 0.5s ease-in-out;
}
.select-custom-mode-type button:hover .pad-type-icon {
  animation: press 0.5s ease-in-out;
}
.select-custom-mode-type button:hover .left-fader {
  animation: left-fader-toggle 0.5s ease-in-out;
}
.select-custom-mode-type button:hover .right-fader {
  animation: right-fader-toggle 0.5s ease-in-out;
}
.select-custom-mode-type button:hover:disabled .left-fader {
  animation: none;
}
.select-custom-mode-type button:hover:disabled .right-fader {
  animation: none;
}
@keyframes pot-rotate {
  0% {
    transform: rotate(0deg);
  }
  45% {
    transform: rotate(145deg);
  }
  55% {
    transform: rotate(145deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@keyframes left-fader-toggle {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}
@keyframes right-fader-toggle {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(8px);
  }
}
@keyframes press {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.9);
  }
}

.launchkey-mk3-controls {
  width: 608px;
  margin: 0 auto;
  margin-top: 75px;
  overflow-x: auto;
}
.launchkey-mk3-controls__page-title {
  margin: 40px auto 16px;
  font-size: 0.8rem;
}
.launchkey-mk3-controls__scroll-container {
  max-width: 100%;
  overflow-x: auto;
}
.launchkey-mk3-controls__pots-container {
  margin: 75px auto;
  max-width: fit-content;
}
.launchkey-mk3-controls__pots {
  margin-top: 75px;
}
.launchkey-mk3-controls__pots .grid__page {
  grid-template-columns: repeat(8, 70px);
  width: 608px;
  background: rgba(15, 15, 16, 0.9019607843);
  border: 1px solid rgba(91, 92, 96, 0.9019607843);
  padding: 18px 8px 8px;
  gap: 4px;
  justify-content: center;
}
.launchkey-mk3-controls__faders.grid {
  width: 684px;
  row-gap: 15px;
  grid-template-columns: repeat(9, 70px);
}
.launchkey-mk3-controls__pads.grid {
  grid-template-columns: repeat(8, 70px);
}
.launchkey-mk3-controls__pads, .launchkey-mk3-controls__faders {
  background: rgba(15, 15, 16, 0.9019607843);
  border: 1px solid rgba(91, 92, 96, 0.9019607843);
  padding: 18px 8px 8px;
  gap: 4px;
  justify-content: center;
}
p + .launchkey-mk3-controls__scroll-container .launchkey-mk3-controls__pots {
  margin-top: 0;
}
.launchkey-mk3-controls__control {
  padding: 8px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 4px;
  z-index: 0;
  overflow: hidden;
  transition: 0.1s ease-out background-color, 0.1s ease-out border-color;
  font-size: 0.6875rem;
  line-height: 1.28;
}
.launchkey-mk3-controls__control.is-dragging {
  background-color: rgba(45, 46, 48, 0.6);
  backdrop-filter: blur(4px);
  box-shadow: 0 3px 5.4px 0 rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(227, 230, 239, 0.1490196078);
  z-index: 2;
}
.launchkey-mk3-controls__control[data-selected] {
  border: 1px solid #f2f2f2;
}
.launchkey-mk3-controls__control:hover {
  background-color: rgb(31, 31, 31);
}
.launchkey-mk3-controls__control--disabled {
  color: #a6a9af;
}
.launchkey-mk3-controls__control--disabled.launchkey-mk3-controls__pot {
  background-image: url("images/svgs/launchkey/disabled-encoder.svg");
}
.launchkey-mk3-controls__control--disabled.launchkey-mk3-controls__fader {
  background-image: url("images/svgs/launchkey/fader-disabled.svg");
  background-size: 78px;
}
.launchkey-mk3-controls__control-name, .launchkey-mk3-controls__control-description {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 70px;
  height: 18px;
}
.launchkey-mk3-controls__control-description {
  height: 28px;
}
.launchkey-mk3-controls__pot {
  height: 120px;
  background: url("images/svgs/launchkey-mk3/pot.svg") center 40% no-repeat;
  justify-content: space-between;
}
.launchkey-mk3-controls__pad {
  height: 119px;
  padding: 3px;
  background: none;
}
.launchkey-mk3-controls__pad .launchkey-mk3-controls__control-description {
  height: 40px;
  white-space: normal;
}
.launchkey-mk3-controls__pad svg {
  margin: -2px;
}
.launchkey-mk3-controls__pad .launchkey-mk3-controls__control-name {
  margin-top: 2px;
  height: 13px;
}
.launchkey-mk3-controls__fader {
  height: 290px;
  background: url("images/svgs/launchkey-mk3/fader.svg") center 40% no-repeat;
  justify-content: space-between;
}
.launchkey-mk3-controls__fader .launchkey-mk3-controls__control-description {
  height: 28px;
}
.launchkey-mk3-controls__button {
  height: 110px;
  padding: 3px;
  background: none;
}
.launchkey-mk3-controls__button .launchkey-mk3-controls__control-description {
  margin-top: 8px;
  height: 40px;
  white-space: normal;
}

.launchkey-mk3.main-section__inner {
  transition: margin 0.2s, width 0.2s;
}
.launchkey-mk3.main-section__inner.sidebar--is-open {
  margin-right: 280px;
  width: calc(100% - 280px);
}
.launchkey-mk3__color-picker {
  grid-column: 1/span 2;
}
.launchkey-mk3__sidebar {
  position: fixed;
  right: 0;
  width: 0;
  overflow-x: hidden;
  transition: width 0.1s ease-out;
}
.launchkey-mk3__sidebar--open {
  width: 280px;
}
.launchkey-mk3__sidebar .sidebar__scroll-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.launchkey-mk3__sidebar .sidebar__body {
  flex-grow: 0;
}
.launchkey-mk3__sidebar .sidebar__advanced {
  margin: 16px 0;
}
.launchkey-mk3__sidebar .sidebar__advanced:last-child {
  margin-bottom: 0;
}
.launchkey-mk3__sidebar .sidebar__advanced select {
  box-sizing: border-box;
}
.launchkey-mk3__sidebar .checkbox {
  height: 18px;
  margin-top: 0;
}
.launchkey-mk3__sidebar .widget-settings__single-column-body {
  flex-grow: 1;
}
.launchkey-mk3__sidebar .widget-settings__single-column-body label {
  display: block;
  margin-top: 8px;
}
.launchkey-mk3__sidebar .widget-settings__single-column-body label.checkbox--label {
  margin-top: 0;
}
.launchkey-mk3__sidebar .widget-settings__single-column-body label.checkbox--label::before {
  top: 0;
}
.launchkey-mk3__sidebar .widget-settings__single-column-body label.inline {
  display: inline;
  margin-top: 4px;
}
.launchkey-mk3__sidebar .widget-settings__single-column-body input[type=text],
.launchkey-mk3__sidebar .widget-settings__single-column-body [type=number] {
  width: 100%;
}
.launchkey-mk3__sidebar .widget-settings__single-column-body select {
  width: 100%;
  margin-top: 4px;
}
.launchkey-mk3__sidebar .widget-settings__control-disabled {
  cursor: not-allowed;
}
.launchkey-mk3__checkbox-container {
  margin-top: 4px;
}

.launchkey-mk3-pedal-settings {
  display: flex;
  justify-content: space-between;
  border: 1px solid #595959;
  border-top-width: 30px;
  flex-direction: column;
  margin-bottom: 64px;
}
@media (min-width: 750px) {
  .launchkey-mk3-pedal-settings {
    flex-direction: row;
  }
}
.launchkey-mk3-pedal-settings__heading {
  color: #f2f6ff;
  font-family: "TTNormsProDemiBold", roboto, freesans, arial, "system-ui", sans-serif;
  font-size: 1.6875rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 16px;
}
.launchkey-mk3-pedal-settings__symbol {
  width: 50%;
  margin: 0 auto;
  margin-top: 50px;
  margin-bottom: 50px;
  text-align: center;
  align-items: center;
  justify-content: center;
  display: flex;
}
.launchkey-mk3-pedal-settings__symbol.control-image.active {
  border: none;
}
@media (min-width: 750px) {
  .launchkey-mk3-pedal-settings__symbol.control-image.active {
    border-right: 1px solid #c0c0c0;
  }
}
@media (min-width: 750px) {
  .launchkey-mk3-pedal-settings__symbol {
    width: 33%;
  }
}
.launchkey-mk3-pedal-settings__editor {
  flex-grow: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: stretch;
  margin: 48px;
}
.launchkey-mk3-pedal-settings__editor .btn,
.launchkey-mk3-pedal-settings__editor .labelled-value {
  margin-bottom: 1em;
}
@media (min-width: 750px) {
  .launchkey-mk3-pedal-settings__editor .btn,
  .launchkey-mk3-pedal-settings__editor .labelled-value {
    margin-bottom: 0;
  }
}
.launchkey-mk3-pedal-settings__editor .btn {
  background: #595959;
}
.launchkey-mk3-pedal-settings__form {
  flex-grow: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  margin: 24px 48px;
}
.launchkey-mk3-pedal-settings__form .advanced {
  margin: 4px 0 16px;
}
.launchkey-mk3-pedal-settings__form .advanced:last-child {
  margin-bottom: 0;
}
.launchkey-mk3-pedal-settings__form .advanced select {
  box-sizing: border-box;
}
.launchkey-mk3-pedal-settings__form .select,
.launchkey-mk3-pedal-settings__form .input,
.launchkey-mk3-pedal-settings__form .button {
  width: 100%;
}
.launchkey-mk3-pedal-settings__form .select,
.launchkey-mk3-pedal-settings__form .input {
  margin-bottom: 0.7em;
}
.launchkey-mk3-pedal-settings__form .button {
  margin: 12px 0;
  width: 100%;
}

.launchkey-mk3-octave-buttons {
  width: 140px;
  display: grid;
  grid-template-columns: repeat(2 1fr);
  margin: 0 auto;
  text-align: center;
  column-gap: 10px;
}
.launchkey-mk3-octave-buttons--flkey {
  width: 90px;
  height: 150px;
  padding-bottom: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.launchkey-mk3-octave-buttons .octave-buttons--title {
  height: 16px;
  font-weight: normal;
  margin-top: 15px;
  justify-content: center;
  grid-column: 1/span 2;
  display: flex;
}
.launchkey-mk3-octave-buttons .octave-buttons--title-line {
  border-top: 1px solid #e3e6ef;
  color: #e3e6ef;
  height: 10px;
  width: 100%;
  flex-grow: 1;
}
.launchkey-mk3-octave-buttons .octave-buttons--title-inner {
  margin-top: -11px;
  padding: 0 5px;
}
.launchkey-mk3-octave-buttons .octave-buttons--button {
  height: 30px;
  border: 4px solid #e4e4e4;
  background: rgb(51, 51, 51);
  color: #fff;
  line-height: 22px;
  font-weight: 400;
  opacity: 1;
  border-radius: 2px;
}

.r-76gof__custom-mode-editor {
  display: flex;
  margin-top: 75px;
  align-self: center;
  border-radius: 4px;
  border: 2px solid #3d3e40;
  background: linear-gradient(238.08deg, #232222 -42.14%, #33333a 17.8%, #33333a 67.25%, #2b2b2b 123.41%);
  position: relative;
}
.r-76gof__custom-mode-editor::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("/assets/images/background-noise-layer-c711408a2f5046670fb366eb33f9fbd2.png");
  opacity: 0.03;
}
@media screen and (height <= 816px) {
  .r-76gof__custom-mode-editor {
    margin-top: 24px;
  }
}
.r-76gof__controls.grid {
  grid-template-columns: repeat(8, 58px);
  margin: 24px 24px 15px 0;
  gap: 0;
  justify-content: center;
}
.r-76gof__controls.grid [role=listitem] {
  outline: 1px solid transparent;
  position: relative;
  margin-left: 3px;
  margin-right: 3px;
  width: 52px;
  border-radius: 2px;
}
.r-76gof__controls.grid [role=listitem].is-dragging, .r-76gof__controls.grid [role=listitem][data-selected] {
  outline: 1px solid #a6a9af;
  outline-offset: -1px;
}
.r-76gof__controls.grid [role=listitem]:hover {
  background-color: rgba(227, 230, 239, 0.0705882353);
}
.r-76gof__controls.grid [role=listitem]:hover .svg-container path.button-base {
  fill: #6a6c70;
}
.r-76gof__controls.grid [role=listitem][data-selected] {
  z-index: 1;
  background-color: rgba(227, 230, 239, 0.1019607843);
}
.r-76gof__controls.grid [role=listitem][data-selected] .svg-container path.button-base {
  fill: #6a6c70;
}
.r-76gof__controls.grid [role=listitem] svg {
  margin-left: -3px;
  margin-right: -3px;
}
.r-76gof__controls.grid {
  z-index: 1;
}
.r-76gof__pot, .r-76gof__button {
  width: 58px;
}
.r-76gof__pot .led, .r-76gof__button .led {
  fill: currentcolor;
  fill-opacity: 1;
}
.r-76gof__control-description {
  position: absolute;
  bottom: 2px;
  left: 0;
  margin: 0 3px;
  width: calc(100% - 8px);
  max-width: calc(100% - 8px);
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.r-76gof__control {
  position: relative;
  color: #b6b8bf;
}
.r-76gof__control[data-selected], .r-76gof__control:hover {
  color: #d4d7df;
}
.r-76gof__control--disabled {
  color: #a6a9af;
}
.r-76gof__control--disabled[data-selected], .r-76gof__control--disabled:hover {
  color: #a6a9af;
}
.r-76gof__control--disabled svg {
  opacity: 0.5;
}
.r-76gof__pot {
  height: 63px;
  margin-bottom: 16px;
}
.r-76gof__pot svg {
  margin-top: -2px;
}
.r-76gof__button .r-76gof__control-description {
  bottom: 1px;
}
.r-76gof__button {
  height: 45px;
  margin-top: 32px;
  margin-bottom: 0;
}
.r-76gof__button.is-dragging, .r-76gof__button[data-selected] {
  outline: 2px solid #3d3e40;
}
.r-76gof__button .svg-container {
  height: 31px;
  margin-top: -1px;
}
.r-76gof__button p {
  color: #b6b8bf;
  font-size: 10px;
  text-align: center;
  margin-top: 1px;
  margin-bottom: 0;
}
.r-76gof__button[data-selected] p, .r-76gof__button:hover p {
  color: #e3e6ef;
}
.r-76gof__button.is-dragging p {
  visibility: hidden;
}
.r-76gof__left-panel {
  margin: 30px 0 0 24px;
  width: 97px;
  position: relative;
  z-index: 1;
}
.r-76gof__screen {
  margin: 0 0 0 2px;
}
.r-76gof__page-buttons {
  margin: 8px 0 0 4px;
}
.r-76gof__track-buttons {
  margin: 4px 0 0 4px;
}
.r-76gof__mode-buttons {
  margin: 4px 0 0 4px;
}
.r-76gof__function-button {
  position: absolute;
  right: 0;
  bottom: 23.6px;
}
.r-76gof__screen, .r-76gof__page-buttons, .r-76gof__track-buttons, .r-76gof__mode-buttons, .r-76gof__function-button .translucent {
  opacity: 0.5;
}

.launch-control-xl-mk3__custom-mode-editor {
  display: flex;
  margin-top: 75px;
  align-self: center;
  border-radius: 4px;
  border: 2px solid #3d3e40;
  background: linear-gradient(238.08deg, #232222 -42.14%, #33333a 17.8%, #33333a 67.25%, #2b2b2b 123.41%);
  position: relative;
}
.launch-control-xl-mk3__custom-mode-editor::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("/assets/images/background-noise-layer-c711408a2f5046670fb366eb33f9fbd2.png");
  opacity: 0.03;
}
@media screen and (height <= 816px) {
  .launch-control-xl-mk3__custom-mode-editor {
    margin-top: 24px;
  }
}
.launch-control-xl-mk3__controls.grid {
  grid-template-columns: repeat(8, 58px);
  margin: 32px 24px 15px 0;
  gap: 0;
  justify-content: center;
}
.launch-control-xl-mk3__controls.grid [role=listitem] {
  outline: 1px solid transparent;
  position: relative;
  margin-left: 3px;
  margin-right: 3px;
  width: 52px;
  border-radius: 2px;
}
.launch-control-xl-mk3__controls.grid [role=listitem].is-dragging, .launch-control-xl-mk3__controls.grid [role=listitem][data-selected] {
  outline: 1px solid #a6a9af;
  outline-offset: -1px;
}
.launch-control-xl-mk3__controls.grid [role=listitem]:hover {
  background-color: rgba(227, 230, 239, 0.0705882353);
}
.launch-control-xl-mk3__controls.grid [role=listitem]:hover .svg-container path.button-base {
  fill: #6a6c70;
}
.launch-control-xl-mk3__controls.grid [role=listitem][data-selected] {
  z-index: 1;
  background-color: rgba(227, 230, 239, 0.1019607843);
}
.launch-control-xl-mk3__controls.grid [role=listitem][data-selected] .svg-container path.button-base {
  fill: #6a6c70;
}
.launch-control-xl-mk3__controls.grid [role=listitem] svg {
  margin-left: -3px;
  margin-right: -3px;
}
.launch-control-xl-mk3__controls.grid {
  z-index: 1;
}
.launch-control-xl-mk3__pot, .launch-control-xl-mk3__fader, .launch-control-xl-mk3__button {
  width: 58px;
}
.launch-control-xl-mk3__control-description {
  position: absolute;
  bottom: 2px;
  left: 0;
  margin: 0 3px;
  width: calc(100% - 8px);
  max-width: calc(100% - 8px);
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.launch-control-xl-mk3__control {
  position: relative;
  color: #b6b8bf;
}
.launch-control-xl-mk3__control[data-selected], .launch-control-xl-mk3__control:hover {
  color: #d4d7df;
}
.launch-control-xl-mk3__control--disabled {
  color: #a6a9af;
}
.launch-control-xl-mk3__control--disabled[data-selected], .launch-control-xl-mk3__control--disabled:hover {
  color: #a6a9af;
}
.launch-control-xl-mk3__control--disabled svg {
  opacity: 0.5;
}
.launch-control-xl-mk3__pot {
  height: 63px;
  margin-bottom: 8px;
}
.launch-control-xl-mk3__pot svg {
  margin-top: -2px;
}
.launch-control-xl-mk3__fader {
  height: 191px;
  margin: 4px 0 12px;
}
.launch-control-xl-mk3__fader svg {
  margin-top: 5px;
}
.launch-control-xl-mk3__button .launch-control-xl-mk3__control-description {
  bottom: 1px;
}
.launch-control-xl-mk3__button {
  height: 45px;
  margin-top: 1px;
  margin-bottom: 2px;
}
.launch-control-xl-mk3__button.is-dragging, .launch-control-xl-mk3__button[data-selected] {
  outline: 2px solid #3d3e40;
}
.launch-control-xl-mk3__button .svg-container {
  height: 31px;
  margin-top: -1px;
}
.launch-control-xl-mk3__button p {
  color: #b6b8bf;
  font-size: 10px;
  text-align: center;
  margin-top: 1px;
  margin-bottom: 0;
}
.launch-control-xl-mk3__button[data-selected] p, .launch-control-xl-mk3__button:hover p {
  color: #e3e6ef;
}
.launch-control-xl-mk3__button.is-dragging p {
  visibility: hidden;
}
.launch-control-xl-mk3__pot .led, .launch-control-xl-mk3__button .led {
  fill: currentcolor;
  fill-opacity: 1;
}
.launch-control-xl-mk3__left-panel {
  margin: 32px 0 0 18px;
  width: 97px;
  position: relative;
  z-index: 1;
}
.launch-control-xl-mk3__screen {
  margin: 2px 0 0 1px;
}
.launch-control-xl-mk3__page-buttons {
  margin: 26px 0 0 5px;
}
.launch-control-xl-mk3__track-buttons {
  margin: 32px 0 0 5px;
}
.launch-control-xl-mk3__transport-buttons {
  margin: 42px 0 0 5px;
}
.launch-control-xl-mk3__mode-buttons {
  margin: 35px 0 0 5px;
}
.launch-control-xl-mk3__daw-control-buttons {
  position: absolute;
  right: 0;
  bottom: 73.6px;
}
.launch-control-xl-mk3__daw-mixer-buttons {
  position: absolute;
  right: 0;
  bottom: 25.6px;
}
.launch-control-xl-mk3__screen, .launch-control-xl-mk3__page-buttons, .launch-control-xl-mk3__track-buttons, .launch-control-xl-mk3__transport-buttons, .launch-control-xl-mk3__mode-buttons, .launch-control-xl-mk3__daw-control-buttons .translucent, .launch-control-xl-mk3__daw-mixer-buttons .translucent {
  opacity: 0.5;
}

.reset-custom-mode-warning p {
  max-width: 500px;
}

.r-tect5m .launchkey-mk3-controls__page-title:nth-child(1),
.r-ejhm9c .launchkey-mk3-controls__page-title:nth-child(1),
.launchkey-mk4 .launchkey-mk3-controls__page-title:nth-child(1),
.launchkey-mini-mk4 .launchkey-mk3-controls__page-title:nth-child(1) {
  margin-top: 0;
}
.r-tect5m .launchkey-mk3-controls__pots,
.r-ejhm9c .launchkey-mk3-controls__pots,
.launchkey-mk4 .launchkey-mk3-controls__pots,
.launchkey-mini-mk4 .launchkey-mk3-controls__pots {
  margin-top: 32px;
  padding: 10px 0;
}
.r-tect5m .launchkey-mk3-controls__pot,
.r-ejhm9c .launchkey-mk3-controls__pot,
.launchkey-mk4 .launchkey-mk3-controls__pot,
.launchkey-mini-mk4 .launchkey-mk3-controls__pot {
  height: 126px;
}
.r-tect5m .launchkey-mk3-controls__control-description,
.r-ejhm9c .launchkey-mk3-controls__control-description,
.launchkey-mk4 .launchkey-mk3-controls__control-description,
.launchkey-mini-mk4 .launchkey-mk3-controls__control-description {
  flex-grow: 1;
}
.r-tect5m .launchkey-mk3-controls__fader,
.r-ejhm9c .launchkey-mk3-controls__fader,
.launchkey-mk4 .launchkey-mk3-controls__fader,
.launchkey-mini-mk4 .launchkey-mk3-controls__fader {
  height: 264px;
}
.r-tect5m .launchkey-mk3-controls__pot, .r-tect5m .launchkey-mk3-controls__fader,
.r-ejhm9c .launchkey-mk3-controls__pot,
.r-ejhm9c .launchkey-mk3-controls__fader,
.launchkey-mk4 .launchkey-mk3-controls__pot,
.launchkey-mk4 .launchkey-mk3-controls__fader,
.launchkey-mini-mk4 .launchkey-mk3-controls__pot,
.launchkey-mini-mk4 .launchkey-mk3-controls__fader {
  background: none;
}
.r-tect5m .launchkey-mk3-controls__pot svg, .r-tect5m .launchkey-mk3-controls__fader svg,
.r-ejhm9c .launchkey-mk3-controls__pot svg,
.r-ejhm9c .launchkey-mk3-controls__fader svg,
.launchkey-mk4 .launchkey-mk3-controls__pot svg,
.launchkey-mk4 .launchkey-mk3-controls__fader svg,
.launchkey-mini-mk4 .launchkey-mk3-controls__pot svg,
.launchkey-mini-mk4 .launchkey-mk3-controls__fader svg {
  margin-bottom: 2px;
  margin-top: 8px;
}
.r-tect5m .launchkey-mk3-controls__pot:hover, .r-tect5m .launchkey-mk3-controls__fader:hover,
.r-ejhm9c .launchkey-mk3-controls__pot:hover,
.r-ejhm9c .launchkey-mk3-controls__fader:hover,
.launchkey-mk4 .launchkey-mk3-controls__pot:hover,
.launchkey-mk4 .launchkey-mk3-controls__fader:hover,
.launchkey-mini-mk4 .launchkey-mk3-controls__pot:hover,
.launchkey-mini-mk4 .launchkey-mk3-controls__fader:hover {
  background-color: rgb(31, 31, 31);
}
.r-tect5m .launchkey-mk3-controls__pad,
.r-ejhm9c .launchkey-mk3-controls__pad,
.launchkey-mk4 .launchkey-mk3-controls__pad,
.launchkey-mini-mk4 .launchkey-mk3-controls__pad {
  height: 122px;
}
.r-tect5m .launchkey-mk3-controls__pad svg,
.r-ejhm9c .launchkey-mk3-controls__pad svg,
.launchkey-mk4 .launchkey-mk3-controls__pad svg,
.launchkey-mini-mk4 .launchkey-mk3-controls__pad svg {
  margin: 5px;
  box-shadow: 4px 4px 6.5px 0 rgba(0, 0, 0, 0.9019607843);
}
.r-tect5m .launchkey-mk3-controls__pad--disabled svg,
.r-ejhm9c .launchkey-mk3-controls__pad--disabled svg,
.launchkey-mk4 .launchkey-mk3-controls__pad--disabled svg,
.launchkey-mini-mk4 .launchkey-mk3-controls__pad--disabled svg {
  margin-top: 4px;
  box-shadow: none;
}
.r-tect5m .launchkey-mk3-controls__button,
.r-ejhm9c .launchkey-mk3-controls__button,
.launchkey-mk4 .launchkey-mk3-controls__button,
.launchkey-mini-mk4 .launchkey-mk3-controls__button {
  height: 102px;
}
.r-tect5m .launchkey-mk3-controls__button svg,
.r-ejhm9c .launchkey-mk3-controls__button svg,
.launchkey-mk4 .launchkey-mk3-controls__button svg,
.launchkey-mini-mk4 .launchkey-mk3-controls__button svg {
  margin: 7px 0 3px;
  box-shadow: 4px 4px 6.5px 0 rgba(0, 0, 0, 0.9019607843);
}
.r-tect5m .launchkey-mk3-controls__button--disabled svg,
.r-ejhm9c .launchkey-mk3-controls__button--disabled svg,
.launchkey-mk4 .launchkey-mk3-controls__button--disabled svg,
.launchkey-mini-mk4 .launchkey-mk3-controls__button--disabled svg {
  margin-top: 6px;
  box-shadow: none;
}

.patch-collection-wrapper {
  overflow-y: auto;
}

.patch-collection,
.multi-patch-collection {
  list-style-type: none;
  padding: 0;
  margin: 0;
  flex-grow: 1;
}
.patch-collection li,
.multi-patch-collection li {
  margin-bottom: 8px;
}
.patch-collection .sortable-item,
.multi-patch-collection .sortable-item {
  transition: all 0.125s;
  position: relative;
}
.patch-collection .sortable-item.is-dragging,
.multi-patch-collection .sortable-item.is-dragging {
  transition-duration: 0s;
  z-index: 100;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1019607843);
}
.patch-collection--shade-bottom,
.multi-patch-collection--shade-bottom {
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 10px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #fff 100%);
  bottom: 0;
}

.patch-collection {
  margin: 8px;
}

.multi-patch-collection li {
  margin-left: 30px;
  margin-top: 4px;
  margin-bottom: 4px;
}
.multi-patch-collection li .patch-slot {
  padding-left: 25px;
  background: rgba(227, 230, 239, 0.0509803922);
}
.multi-patch-collection li .patch-slot:hover {
  background: rgba(227, 230, 239, 0.1490196078);
}
.multi-patch-collection li .patch-slot input {
  background: inherit;
  color: #f2f2f2;
}
.multi-patch-collection li .patch-slot--actions {
  line-height: 25px;
  padding: 5px 20px;
}
.multi-patch-collection li .patch-slot--actions button {
  height: 25px;
  color: inherit;
}

.patch-slot {
  display: flex;
  flex-direction: row;
  align-content: stretch;
  transition: background 0.2s;
  border-radius: 2px;
  border: 2px solid transparent;
  background: rgba(227, 230, 239, 0.1019607843);
  color: #c5c8cf;
}
.patch-slot::before, .patch-slot::after {
  content: " ";
  display: table;
}
.patch-slot::after {
  clear: both;
}
.patch-slot:hover {
  background: rgba(227, 230, 239, 0.1490196078);
  color: #f2f6ff;
}
.patch-slot.drag-hover {
  box-shadow: none;
  border: 2px dotted #05b105;
  background: rgba(89, 89, 89, 0.3);
}
.patch-slot--badge-and-name {
  padding: 7px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.patch-slot--badge-and-name input {
  padding: 0 6px;
}
.patch-slot--badge-and-name .editable-value--value {
  padding: 0 6px;
}
.patch-slot--name {
  display: flex;
  align-items: center;
}
.patch-slot--index-badge {
  line-height: 26px;
  float: left;
  width: 32px;
  height: 26px;
  text-align: center;
  vertical-align: middle;
  padding: 0;
  margin-right: 8px;
  cursor: move;
}
.patch-slot--preview-and-category {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.patch-slot--preview-and-category button,
.patch-slot--preview-and-category select {
  margin-left: 16px;
}
.patch-slot--actions {
  height: 100%;
  padding: 7px;
  padding-right: 20px;
}
.patch-slot--actions i.fa {
  font-size: 1.2rem;
}
.patch-slot--actions__flex {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
.patch-slot--actions__text {
  display: none;
}
@media (min-width: 750px) {
  .patch-slot--actions__text {
    display: inline;
  }
}
.peak .patch-slot--actions__text {
  display: none;
}
@media (width >= 1050px) {
  .peak .patch-slot--actions__text {
    display: inline;
  }
}
.patch-slot--actions button,
.patch-slot--actions select {
  height: 26px;
  margin-left: 16px;
}
.patch-slot--actions select {
  background: #111;
}
.patch-slot .multi-expand-button .icon {
  transform: rotate(-90deg);
  transition: transform 0.2s;
}
.patch-slot .multi-expand-button.expand .icon {
  transform: rotate(0deg);
}

.bank-chooser {
  text-align: center;
}
.bank-chooser__group {
  margin-bottom: 1.5rem;
}
.bank-chooser__group-header {
  margin-bottom: 0.75rem;
}
.select-custom-mode-type .bank-chooser__group {
  background: none;
  padding: 0;
}
.select-custom-mode-type .bank-chooser__group .btn-row-spread {
  display: flex;
  gap: 50px;
  justify-content: center;
}
.select-custom-mode-type .bank-chooser__group h4 {
  margin: 20px;
}
.select-custom-mode-type .bank-chooser__group button {
  width: 60px;
  height: 40px;
  margin: 0;
}
.select-custom-mode-type .bank-chooser__group button:hover {
  text-decoration: none;
}

.peak-display-reboot-message {
  border: 1px solid rgba(227, 230, 239, 0.5019607843);
  border-radius: 2px;
}
.peak-display-reboot-message__header {
  justify-content: flex-start;
  gap: 8px;
  background-color: rgba(61, 62, 64, 0.6);
}
.peak-display-reboot-message__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: rgba(227, 230, 239, 0.2);
}
.peak-display-reboot-message__body img {
  margin-bottom: 32px;
  filter: drop-shadow(-4px -4px 6px rgba(0, 0, 0, 0.3490196078)) drop-shadow(-1px -1px 2px rgba(0, 0, 0, 0.6509803922));
}
.peak-display-reboot-message__body p {
  max-width: none;
}

.bass-station-ii-bank-chooser {
  text-align: center;
  margin-top: 5em;
}
.bass-station-ii-bank-chooser__header {
  margin-bottom: 20px;
}
.bass-station-ii-bank-chooser__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 8px;
}
.bass-station-ii-bank-chooser__grid .button {
  width: 100%;
}
.bass-station-ii-bank-chooser__cancel-button {
  margin: auto;
  margin-top: 32px;
}
.bass-station-ii-bank-chooser .btn {
  background: #595959;
  color: #f2f2f2;
}
.bass-station-ii-bank-chooser .btn:hover {
  text-decoration: none;
}

.wavetable-editor {
  margin: 0;
}
.wavetable-editor.main-section__inner {
  padding: 10px;
  padding-top: 20px;
  margin-right: 280px;
  width: 620px;
  max-width: calc(100% - 280px);
}
.wavetable-editor__tools-column {
  padding: 4px;
  padding-top: 20px;
  width: 280px;
  min-height: 365px;
  transition: opacity 0.5s, transform 0.5s;
}
.wavetable-editor__toolbar {
  border-top: 4px solid #23a7d6;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
}
.wavetable-editor__toolbar .btn.wavetable-editor__toolbar-button {
  background-color: transparent;
}
.wavetable-editor__toolbar .btn.wavetable-editor__toolbar-button:disabled {
  color: #aaa;
}
.wavetable-editor__tools-header, .wavetable-editor__sidebar-header {
  border-top: 4px solid #23a7d6;
  margin-bottom: 20px;
  padding: 0.375rem;
}
.wavetable-editor__tools {
  padding: 0 0.1875rem;
  margin-bottom: 1.5rem;
  text-align: center;
}
.wavetable-editor canvas {
  background: #111112;
  border: 1px solid #40414a;
  border-radius: 3px;
  max-width: 100%;
  box-shadow: 0 0 5px #171717;
}
.wavetable-editor .wave-thumbs {
  cursor: pointer;
}
.wavetable-editor .wave-thumbs ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}
.wavetable-editor .wave-thumbs ul li {
  position: relative;
  display: inline-block;
  margin-right: 5px;
  max-width: calc(20% - 4px);
  cursor: pointer;
}
.wavetable-editor .wave-thumbs ul li:last-child {
  margin-right: 0;
}
.wavetable-editor .wave-thumbs ul li canvas {
  filter: grayscale(80%);
  transition: 0.1s;
}
.wavetable-editor .wave-thumbs ul li canvas.selected {
  border-color: #888;
  filter: grayscale(0%);
}
.wavetable-editor .wave-thumbs ul li.is-dragging {
  z-index: 2;
}
.wavetable-editor .wave-thumbs ul li.is-dragging canvas {
  filter: none;
}
.wavetable-editor .wave-thumbs ul li canvas:focus {
  filter: none;
}
.wavetable-editor .wave-thumbs ul li canvas:hover {
  filter: grayscale(40%);
  box-shadow: 0 0 2px #fff;
}
.wavetable-editor .wave-thumbs ul li canvas.selected:hover {
  filter: grayscale(0%);
}
.wavetable-editor .btn {
  transition: 0.1s;
}
.wavetable-editor .btn.tab-bar--tab {
  border-radius: 0;
  padding-top: 0;
  padding-bottom: 0;
  width: 64px;
  border: none;
  margin-bottom: 8px;
}
.wavetable-editor .btn.tab-bar--tab:hover {
  text-decoration: none;
  opacity: 0.8;
}
.wavetable-editor .btn.tab-bar--tab__active {
  background-color: #b87a30;
}
.wavetable-editor .btn.tab-bar--tab__active.phase {
  background-color: #21a7d5;
}
.wavetable-editor .btn.tab-bar--tab__active:hover {
  opacity: 1;
}
.wavetable-editor .btn.btn--tool-icon {
  background: #1e1e20;
  position: relative;
}
.wavetable-editor .btn.btn--tool-icon:hover {
  background: #151517;
}
.wavetable-editor .btn.btn--tool-icon.active {
  background: #323232;
}
.wavetable-editor .btn.btn--tool-icon:focus {
  z-index: 1;
}
.wavetable-editor {
  /* slider style */
}
.wavetable-editor__smoothing-slider {
  appearance: none;
  width: 200px;
  background: transparent !important; /* fix for firefox */
  display: block;
  margin: auto;
  border: none !important;
}
.wavetable-editor {
  /* slider thumb */
  /* webkit styling (chrome/safari/opera) */
}
.wavetable-editor__smoothing-slider::-webkit-slider-thumb {
  appearance: none;
  height: 16px;
  width: 16px;
  border-radius: 24px;
  background: #23a7d6;
  cursor: pointer;
  margin-top: -7px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
  transition: 0.1s;
}
.wavetable-editor__smoothing-slider:hover::-webkit-slider-thumb {
  background: #35c4e8;
  transform: scale(1.1);
}
.wavetable-editor {
  /* All the same stuff for Firefox */
}
.wavetable-editor__smoothing-slider::-moz-range-thumb {
  height: 16px;
  width: 16px;
  border-radius: 24px;
  background: #23a7d6;
  cursor: pointer;
  transition: 0.1s;
}
.wavetable-editor__smoothing-slider:hover::-moz-range-thumb {
  background: #35c4e8;
  transform: scale(1.1);
}
.wavetable-editor {
  /* All the same stuff for IE/edge */
}
.wavetable-editor__smoothing-slider::-ms-thumb {
  height: 16px;
  width: 16px;
  border-radius: 24px;
  background: #23a7d6;
  cursor: pointer;
  transition: 0.1s;
}
.wavetable-editor__smoothing-slider:hover::-ms-thumb {
  background: #35c4e8;
  transform: scale(1.1);
}
.wavetable-editor {
  /* slider track */
  /* webkit styling (chrome/safari/opera) */
}
.wavetable-editor__smoothing-slider::-webkit-slider-runnable-track {
  width: 100%;
  height: 1px;
  cursor: pointer;
  background: #fff;
  border: none;
}
.wavetable-editor__smoothing-slider:focus::-webkit-slider-runnable-track {
  border: none;
}
.wavetable-editor {
  /* All the same stuff for Firefox */
}
.wavetable-editor__smoothing-slider::-moz-range-track {
  width: 100%;
  height: 1px;
  cursor: pointer;
  background: #fff;
  border: none;
}
.wavetable-editor {
  /* All the same stuff for IE/edge */
}
.wavetable-editor__smoothing-slider::-ms-track {
  width: 100%;
  height: 1px;
  cursor: pointer;
  background: #fff;
  border: none;
}
.wavetable-editor__smoothing-label {
  text-align: center;
  padding-top: 16px;
  font-family: "TTNormsProRegular", roboto, freesans, arial, "system-ui", sans-serif;
  font-weight: 400;
  font-size: 0.8125rem;
  line-height: 1.28;
}
.wavetable-editor {
  /* end slider style */
}
.wavetable-editor__grid-size-input {
  width: 50px;
}
.wavetable-editor .grid-controls {
  text-align: right;
  margin-top: 2px;
  margin-bottom: 4px;
}
.wavetable-editor__sidebar {
  position: fixed;
  top: 98px;
  right: 0;
  height: calc(100% - 98px);
  background: rgba(31, 39, 56, 0.9490196078);
  backdrop-filter: blur(10px);
}
.wavetable-editor__sidebar .scroll-container {
  height: 100%;
  max-height: 100%;
  overflow: hidden;
  overflow-y: auto;
}
.wavetable-editor__import-audio .sample-player__time-display {
  width: 100%;
  max-width: 400px;
}
.wavetable-editor__import-audio .sample-player__current-time {
  width: 100%;
}
.wavetable-editor__import-audio .sample-player__footer {
  display: inline-flex;
  justify-content: space-between;
  margin-top: 20px;
}
.wavetable-editor__import-audio .sample-player__footer div {
  white-space: nowrap;
}

.import-audio-modal .modal__body p {
  max-width: 550px;
}

.select-user-wavetable-modal select {
  width: 100%;
}

.bar-slider {
  width: 10px;
  height: 105px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-radius: 5px 5px 0 0;
  padding-bottom: 5px;
}
.bar-slider:hover {
  background: #303030;
}
.bar-slider__gauge {
  border-bottom: 1px solid #514835;
  border-radius: 5px 5px 0 0;
  background: linear-gradient(to bottom, #956b2e 0%, #514835 100%);
}
.bar-slider__gauge:hover {
  background: linear-gradient(to bottom, #bd822a 0%, #514835 100%);
}
.phases .bar-slider__gauge {
  background: linear-gradient(to bottom, #2393bb 0, #354752 100%);
  border-bottom: 1px solid #354752;
}
.phases .bar-slider__gauge:hover {
  background: linear-gradient(to bottom, #15b2eb 0, #354752 100%);
}

ul.partial-collection {
  max-width: 100%;
  -webkit-overflow-scrolling: auto;
  overflow-x: auto;
  list-style-type: none;
  display: flex;
  flex-direction: row;
  margin: 0;
  padding: 0;
  border: 1px solid #40414a;
  background: linear-gradient(to bottom, #242428 0%, #000 100%);
}
ul.partial-collection li {
  margin: 0 2px;
}

.partial-collection__wrapper {
  width: 100%;
}

.midi-keyboard {
  display: flex;
  position: relative;
  z-index: 0;
  overflow-x: hidden;
}
@media (width <= 1050px) {
  .midi-keyboard {
    overflow-x: scroll;
  }
}
.midi-keyboard .midi-key {
  width: 14px;
  height: 80px;
  background: #fff;
  color: #111;
  border: 1px solid #b3b3b3;
  display: flex;
  align-items: flex-end;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  flex-shrink: 0;
}
.midi-keyboard .midi-key--c-sharp, .midi-keyboard .midi-key--d-sharp, .midi-keyboard .midi-key--f-sharp, .midi-keyboard .midi-key--g-sharp, .midi-keyboard .midi-key--a-sharp {
  background: #111;
  color: #fff;
  width: 10px;
  height: 50px;
  margin-left: -5px;
  margin-right: -5px;
  z-index: 1;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}
.midi-keyboard .midi-key--c-sharp {
  margin-left: -6px;
  margin-right: -4px;
}
.midi-keyboard .midi-key--d-sharp {
  margin-left: -4px;
  margin-right: -6px;
}
.midi-keyboard .midi-key--f-sharp {
  margin-left: -7px;
  margin-right: -3px;
}
.midi-keyboard .midi-key--g-sharp {
  margin-left: -5px;
  margin-right: -5px;
}
.midi-keyboard .midi-key--a-sharp {
  margin-left: -3px;
  margin-right: -7px;
}
.midi-keyboard .midi-key.active {
  opacity: 0.8;
}

.live-edit label {
  transition: 0.2s color;
}
.live-edit.disabled label {
  color: #888;
}

.nasa-sounds__rocket {
  position: absolute;
  overflow: visible;
  padding: 0;
  bottom: 0;
  width: calc(100% - 60px);
  margin: 0 30px;
  background: none;
  border: none;
}
@media (height <= 585px) {
  .nasa-sounds__rocket {
    position: relative;
  }
}
.nasa-sounds__rocket img.rocket {
  position: relative;
  cursor: pointer;
}
.nasa-sounds__rocket img.rocket--animation {
  animation-name: rocket;
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
}
.nasa-sounds__close-button {
  position: absolute;
  background: none;
  border: none;
  right: 8px;
  top: 0;
  font-size: 1.5rem;
  padding: 10px;
}
.nasa-sounds__close-button:hover {
  color: #f2f6ff;
}
.nasa-sounds__browser {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  z-index: 2;
  background: rgba(31, 39, 56, 0.9490196078);
  backdrop-filter: blur(10px);
}
.nasa-sounds__browser--scroll-container.scroll-container {
  height: calc(100% - 330px);
}
.nasa-sounds__browser--scroll-container.scroll-container > div {
  padding: 5px;
  padding-top: 10px;
}
.nasa-sounds__browser--open ~ .wavetable-editor__tools-column {
  transform: scale(0.9);
  opacity: 0;
}
.nasa-sounds__browser .sample-player {
  position: absolute;
  bottom: 0;
  right: 0;
  box-shadow: 10px -6px 10px 5px #171313;
  width: 100%;
  height: 190px;
}
.nasa-sounds__browser .sample-player__generate-wavetable {
  padding: 8px;
}
.nasa-sounds__browser .sample-player__generate-wavetable.button-stack .button {
  margin-bottom: 8px;
}
.nasa-sounds__browser .sample-player__generate-wavetable--button {
  padding: 2px 20px 0;
}
.nasa-sounds__browser .sample-player__generate-wavetable--button img {
  height: 32px;
  width: 40px;
  vertical-align: middle;
}
.nasa-sounds__sample-categories {
  list-style: none;
  padding-left: 5px;
}
.nasa-sounds__sample-categories h2 {
  font-size: 1rem;
  font-weight: 200;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid #aaa;
}
.nasa-sounds__samples {
  list-style: none;
  padding-left: 0;
}
.nasa-sounds__samples li {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  padding-top: 4px;
  padding-bottom: 4px;
  color: #aaa;
  border-radius: 4px;
}
.nasa-sounds__samples li button.nasa-sounds__play-sample-button {
  background: none;
  border: none;
  opacity: 0;
  transition: opacity 0.2s;
}
.nasa-sounds__samples li label {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  width: 100%; /* if the sample length gets included remove this line */
  cursor: pointer;
}
.nasa-sounds__samples li:hover {
  color: #fff;
  background-color: #151517;
}
.nasa-sounds__samples li:hover button.nasa-sounds__play-sample-button {
  opacity: 0.5;
}
.nasa-sounds__samples li.selected {
  color: #fff;
  background-color: #3a3a3e;
}
.nasa-sounds__samples li.selected button.nasa-sounds__play-sample-button {
  opacity: 1;
}

@keyframes rocket {
  from {
    bottom: -30px;
  }
  to {
    bottom: 100vh;
  }
}
.sample-player {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.sample-player__rewind-button, .sample-player__fast-forward-button {
  border: none;
  border-radius: 35px;
  width: 35px;
  height: 35px;
  background: none;
}
.sample-player__rewind-button div, .sample-player__fast-forward-button div {
  width: 0;
  height: 0;
  border-bottom: 5px solid transparent;
  border-top: 5px solid transparent;
}
.sample-player__rewind-button div {
  border-right: 8px solid #f2f2f2;
}
.sample-player__fast-forward-button div {
  border-left: 8px solid #f2f2f2;
}
.sample-player__transport-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px;
}
.sample-player__transport-controls button {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 5px;
}
.sample-player__transport-controls button div {
  opacity: 0.7;
}
.sample-player__transport-controls button:hover div, .sample-player__transport-controls button.active div {
  opacity: 1;
}
.sample-player__audio-player {
  display: flex;
  justify-content: center;
}
.sample-player__time-display {
  display: flex;
  align-items: center;
  font-size: 0.6875rem;
  cursor: pointer;
}
.disabled .sample-player__time-display {
  cursor: default;
}
.sample-player__current-time {
  appearance: none;
  border: none;
  font-size: 0.8125rem;
  margin: 2px;
  opacity: 1;
  background-color: #4f4f4f;
  height: 5px;
  margin-left: 7px;
  margin-right: 7px;
  border-radius: 100px;
}
.sample-player__current-time[value]::-webkit-progress-bar {
  background-color: #4f4f4f;
  border-radius: 100px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2509803922) inset;
}
.sample-player__current-time[value]::-moz-progress-bar {
  background-color: #2ea8d4;
  border-radius: 100px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2509803922) inset;
}
.sample-player__current-time[value]::-webkit-progress-value {
  background-color: #2ea8d4;
  border-radius: 100px;
}
.sample-player__cancel-modal {
  margin-right: 90px;
}
.sample-player__modal-import {
  display: inline-block;
}
.sample-player__import-button-image {
  margin-top: -9px;
  margin-bottom: -9px;
  padding: 0;
}
.sample-player__generate-wavetable--button {
  margin-left: 8px;
}
.sample-player__generate-wavetable--button img {
  padding-right: 8px;
}

.play-button {
  color: #d4d7df;
  border: 1px solid currentcolor;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  background: none;
  transition: color 0.1s;
  padding: 0;
}
.play-button__icon.icon {
  fill: currentcolor;
}
.play-button:not(.play-button--is-playing) > .play-button__icon.icon {
  margin-left: 2px;
}
.play-button:hover:not(:disabled, .disabled) {
  color: #f2f6ff;
}

.electron-update-notice {
  margin-right: 206px;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1;
}
.electron-update-notice .button {
  padding: 16px 32px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  background: rgba(76, 77, 80, 0.9019607843);
  border: 1px solid #7a7b80;
  border-top: none;
  color: #d4d7df;
  backdrop-filter: blur(10px);
}
.electron-update-notice .button--faux {
  pointer-events: none;
}
.electron-update-notice--release-notes {
  max-height: calc(100vh - 498px);
  overflow: hidden;
  overflow-y: auto;
  margin: -16px;
  padding: 16px;
  margin-bottom: 16px;
}
@media screen and (height <= 816px) {
  .electron-update-notice--release-notes {
    max-height: calc(100vh - 310px);
  }
}
@media screen and (height >= 1060px) {
  .electron-update-notice--release-notes {
    max-height: 564px;
  }
}
.electron-update-notice--modal-dialog button.btn--secondary {
  background: #595959;
}
.electron-update-notice--modal-dialog button.btn--primary {
  background: #007cb9;
}

* {
  -webkit-touch-callout: none; /* iOS Safari */
  user-select: none;
}

.factory-pack-description {
  margin-bottom: 1em;
}

.list-container {
  height: calc(100% - 40px);
}

.small-tip {
  margin-top: -1em;
  font-style: italic;
  font-size: 0.9em;
}

.firmware-update-warning {
  background: #ee8b30;
  padding: 0.75rem;
}

.accessible-text {
  margin: -1px;
  height: 1px;
  width: 1px;
  clip-path: inset(50%);
  border: 0;
  padding: 0;
  overflow: hidden;
  position: absolute;
}

select {
  background: inherit;
}

.js-focus-visible :focus:not(.focus-visible) {
  outline: none;
}

.main-section {
  padding-bottom: 0;
}

.circuit-tracks.main-section__inner.flex-grow.flex-col {
  padding-bottom: 0;
}

.afx-clear {
  width: 50%;
  margin: 0 auto;
  margin-bottom: 20px;
}
.afx-clear > h3 {
  margin-top: 20px;
  text-align: center;
}
.afx-clear button {
  width: 100%;
  height: 40px;
}
.afx-clear button:hover {
  opacity: 0.9;
}

.launch-control__base,
.launch-control-xl__base {
  background-color: rgba(15, 15, 16, 0.9019607843);
  background-position: 23px 10px;
  background-repeat: no-repeat;
  background-size: 125px;
  position: relative;
  display: grid;
  grid-template-columns: 430px 70px;
  gap: 6px;
  margin: 32px auto 16px;
  width: 520px;
  border: 2px solid rgba(91, 92, 96, 0.9019607843);
  border-radius: 2px;
}
.launch-control__base .shepherd-target-marker,
.launch-control-xl__base .shepherd-target-marker {
  display: none;
}
.launch-control [role=listitem],
.launch-control-xl [role=listitem] {
  background-color: #4f4f4f;
  border: 1px solid #151515;
  border-radius: 2px;
  display: block;
  margin: 0 auto;
  padding: 0;
}
.launch-control [role=listitem] .overlay,
.launch-control-xl [role=listitem] .overlay {
  background-color: rgba(255, 255, 255, 0.7490196078);
  border: 1px solid #000;
  border-radius: 2px;
  color: #000;
  font-size: 8px;
  font-weight: 500;
  margin: -1px -4px;
  padding: 1px 2px;
  position: absolute;
  text-align: left;
  width: 50px;
  line-height: 10px;
}
.launch-control [role=listitem][data-selected]:not(.is-showing-values),
.launch-control-xl [role=listitem][data-selected]:not(.is-showing-values) {
  border: 1px solid #fff;
}
.launch-control [role=listitem][data-selected] .overlay,
.launch-control-xl [role=listitem][data-selected] .overlay {
  background-color: rgba(255, 165, 0, 0.7490196078);
}
.launch-control__controls.grid,
.launch-control-xl__controls.grid {
  margin-left: 15px;
  row-gap: 0;
}
.launch-control__controls.grid [role=listitem],
.launch-control-xl__controls.grid [role=listitem] {
  width: 44px;
}
.launch-control__buttons [role=listitem],
.launch-control-xl__buttons [role=listitem] {
  height: 21px;
  width: 21px;
  margin: 4px;
  display: flex;
}
.launch-control.main-section__inner,
.launch-control-xl.main-section__inner {
  margin-right: 280px;
}
.launch-control .show-values-toggle,
.launch-control-xl .show-values-toggle {
  margin: 24px auto 0;
}
.launch-control__template-select-modal .btn-row-spread,
.launch-control-xl__template-select-modal .btn-row-spread {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.launch-control-xl__base {
  background-image: url("/assets/images/svgs/launch-control-xl/novation-logo.svg");
  height: 520px;
  padding: 40px 5px 5px;
}
.launch-control-xl__controls.grid {
  margin-bottom: 10px;
  grid-row: 1/3;
}
.launch-control-xl__pot[role=listitem] {
  background: transparent url("/assets/images/svgs/launch-control/pot-control.svg") center 2px no-repeat;
  height: 58px;
}
.launch-control-xl__pot[role=listitem].is-showing-values::after {
  margin: 4px auto 0;
}
.launch-control-xl__pot[role=listitem] .overlay {
  margin-top: -8px;
}
.launch-control-xl__pot-color {
  border-radius: 2px;
  display: block;
  height: 4px;
  margin: 49px auto 0;
  width: 16px;
}
.launch-control-xl__pot-color--black {
  background-color: #000;
}
.launch-control-xl__pot-color--red {
  background-color: #f00;
}
.launch-control-xl__pot-color--yellow {
  background-color: #ff0;
}
.launch-control-xl__pot-color--green {
  background-color: #0f0;
}
.launch-control-xl__pot-color--orange {
  background-color: #ffa500;
}
.launch-control-xl__fader[role=listitem] {
  display: flex;
  align-items: center;
  height: 160px;
  margin-top: 6px;
  background: transparent url("/assets/images/svgs/launch-control/fader-control.svg") center center no-repeat;
}
.launch-control-xl__controls .launch-control-xl__button[role=listitem] {
  height: 21px;
}
.launch-control-xl__controls .launch-control-xl__button[role=listitem] .overlay {
  margin-top: -36px;
}
.launch-control-xl__controls .launch-control-xl__button[role=listitem]:nth-last-child(-n+8) {
  align-self: end;
  margin-top: -16px;
  margin-bottom: 5px;
}
.launch-control-xl__controls .launch-control-xl__button[role=listitem]:nth-last-child(-n+8) .overlay {
  margin-top: -16px;
}
.launch-control-xl__buttons--parallel.grid, .launch-control-xl__buttons--inline.grid {
  row-gap: 0;
}
.launch-control-xl__buttons--parallel.grid [role=listitem]::before, .launch-control-xl__buttons--inline.grid [role=listitem]::before {
  content: attr(label);
  display: block;
  font-size: 0.6875rem;
  text-align: center;
}
.launch-control-xl__buttons--parallel.grid {
  align-items: center;
  margin: 85px auto auto;
  gap: 44px 8px;
  grid-template-columns: repeat(2, 1fr);
}
.launch-control-xl__buttons--parallel.grid [role=listitem]::before {
  margin-top: 1px;
  width: 100%;
  align-content: center;
}
.launch-control-xl__buttons--parallel.grid [role=listitem]:nth-of-type(1)::before {
  margin-top: 0;
}
.launch-control-xl__buttons--parallel.grid [role=listitem]:nth-of-type(2)::before {
  margin-top: 1px;
}
.launch-control-xl__buttons--parallel.grid [role=listitem]:nth-of-type(3)::before {
  margin-left: -0.5px;
}
.launch-control-xl__buttons--parallel.grid [role=listitem]:nth-of-type(4)::before {
  margin-left: 1px;
}
.launch-control-xl__buttons--parallel.grid [role=listitem] .overlay {
  margin: -24px 0 0 -11px;
}
.launch-control-xl__buttons--parallel.grid [role=listitem]:nth-child(even) .overlay {
  margin-left: 4px;
}
.launch-control-xl__buttons--inline.grid {
  grid-template-columns: 1fr;
  row-gap: 14px;
  margin: auto auto 56px;
  padding: 5px 10px 32px;
}
.launch-control-xl__buttons--inline.grid [role=listitem]::before {
  margin: 20px -9px;
  width: 37px;
}
.launch-control-xl__buttons--inline.grid [role=listitem] .overlay {
  margin-left: -16px;
}
.launch-control-xl__buttons--inline.grid [role=listitem]:nth-child(1) .overlay {
  margin-top: -20px;
}
.launch-control-xl__buttons--inline.grid [role=listitem]:nth-child(2) .overlay {
  margin-top: -7px;
}
.launch-control-xl__buttons--inline.grid [role=listitem]:nth-child(3) .overlay {
  margin-top: 6px;
}
.launch-control-xl__buttons--inline.grid [role=listitem]:nth-child(4) .overlay {
  margin-top: 19px;
}

.launch-control__base {
  background-image: url("/assets/images/svgs/launch-control/novation-logo.svg");
  height: 240px;
  padding: 46px 5px 5px;
}
.launch-control__controls.grid {
  height: 188px;
  padding-bottom: 3px;
}
.launch-control__controls.grid [role=listitem]:nth-child(-1n+8)::after, .launch-control__controls.grid [role=listitem]:nth-child(1n+17)::after {
  content: attr(label);
  display: block;
  font-size: 0.8125rem;
  margin: 48px 0 0;
  text-align: center;
  width: 100%;
}
.launch-control__controls.grid [role=listitem]:nth-child(-1n+16) {
  background: transparent url("/assets/images/svgs/launch-control/pot-control.svg") center 0 no-repeat;
  height: 46px;
}
.launch-control__controls.grid [role=listitem]:nth-child(-1n+16).is-showing-values::after {
  margin: 6px auto 0;
}
.launch-control__controls.grid [role=listitem]:nth-child(1n+17) {
  height: 44px;
  margin-top: -16px;
}
.launch-control__controls.grid [role=listitem]:nth-child(1n+17).is-showing-values::after {
  display: none;
}
.launch-control__buttons.grid {
  height: 98px;
  padding-top: 16px;
  margin: 60px auto auto;
  gap: 22px 6px;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
}
.launch-control__buttons.grid [role=listitem]::before {
  content: attr(label);
  display: block;
  font-size: 0.8125rem;
  margin: -19px 0 0;
  text-align: center;
  width: 21px;
}
.launch-control__buttons.grid [role=listitem]:nth-child(1) .overlay, .launch-control__buttons.grid [role=listitem]:nth-child(3) .overlay {
  margin-left: -12px;
}
.launch-control__buttons.grid [role=listitem]:nth-child(2) .overlay, .launch-control__buttons.grid [role=listitem]:nth-child(4) .overlay {
  margin-left: 5px;
}
.launch-control__buttons.grid [role=listitem]:nth-child(1) .overlay, .launch-control__buttons.grid [role=listitem]:nth-child(2) .overlay {
  margin-top: -22px;
}
.launch-control__buttons.grid [role=listitem]:nth-child(3) .overlay, .launch-control__buttons.grid [role=listitem]:nth-child(4) .overlay {
  margin-top: -15px;
}
.launch-control__buttons.grid [role=listitem].is-showing-values::before {
  display: none;
}
.launch-control__sidebar.sidebar {
  width: 280px;
}
.launch-control__sidebar.sidebar .color-picker {
  padding: 0;
  width: 100%;
  height: 36px;
}
.launch-control__sidebar.sidebar .color-picker--item {
  height: 22px;
  margin: 0 2px;
  width: 22px;
}
.launch-control__sidebar.sidebar .color-picker--item:first-child {
  margin-left: -1px;
  background-color: rgb(79, 79, 79) !important;
}
.launch-control__sidebar.sidebar .color-picker--item:first-child::before {
  content: "×";
  color: #888a8f;
  font-weight: 400;
  font-size: 28px;
  line-height: 18px;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
}
.launch-control__sidebar.sidebar .color-picker--item:last-child {
  margin-right: -1px;
}
.launch-control__sidebar.sidebar .color-picker--item:last-child::before {
  content: "";
}

.bsii-replace-patch-dialog {
  display: grid;
  gap: 20px;
}

.sidebar {
  z-index: 2;
  position: fixed;
  top: 98px;
  right: 0;
  width: 0;
  height: calc(100% - 98px);
  transition: width 0.2s;
  background: linear-gradient(0deg, rgba(227, 230, 239, 0.1019607843), rgba(227, 230, 239, 0.1019607843)), radial-gradient(429.64% 116.63% at 100% 100%, rgba(29, 45, 84, 0.8) 0%, rgba(18, 27, 51, 0.8) 100%);
  backdrop-filter: blur(10px);
}
.sidebar__header {
  display: flex;
  justify-content: space-between;
  padding: 16px;
}
.sidebar__header h4 {
  margin: 0;
}
.sidebar__body {
  flex-grow: 2;
  padding: 16px;
}
.sidebar__header + .sidebar__body {
  padding-top: 0;
}
.sidebar__body + .sidebar__body {
  margin-top: 20px;
}
.sidebar__footer {
  padding: 16px;
}
.sidebar__footer:last-child {
  flex-grow: 1;
}
.sidebar__close-button {
  background: none;
  width: 24px;
  padding: 0;
  color: #c5c8cf;
  transition: color 0.1s;
  border: none;
  z-index: 1;
  margin: auto;
  margin-top: -2px;
  margin-right: 0;
}
.sidebar__close-button:only-child {
  margin-left: auto;
}
.sidebar__close-button:hover {
  color: #bbb;
}
.sidebar__scroll-container {
  height: 100%;
  max-height: 100%;
  overflow: hidden;
  overflow-y: auto;
}
.sidebar__is-open.sidebar {
  width: 280px;
}
.sidebar__is-open.main-section__inner {
  margin-right: 280px;
  width: calc(100% - 280px);
}
.sidebar__container {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.sidebar__nothing-selected {
  color: #c5c8cf;
  margin: 0 16px;
}
.sidebar__two-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 10px;
}
@media (min-width: 1050px) {
  .sidebar__default-breakpoint {
    width: 280px;
  }
  .sidebar__default-breakpoint.main-section__inner {
    margin-right: 280px;
    width: calc(100% - 280px);
  }
}
.sidebar label {
  transition: opacity 0.1s;
}
.sidebar label:disabled, .sidebar label.disabled {
  opacity: 0.5;
}

.circuit-packs .sidebar__body,
.circuit-tracks-packs .sidebar__body,
.circuit-tracks-midi-templates .sidebar__body,
.circuit-rhythm-packs .sidebar__body {
  height: calc(100% - 80px);
  flex-grow: initial;
}
.circuit-packs .sidebar__body label,
.circuit-tracks-packs .sidebar__body label,
.circuit-tracks-midi-templates .sidebar__body label,
.circuit-rhythm-packs .sidebar__body label {
  display: block;
}
.circuit-packs .sidebar__body label.inline,
.circuit-tracks-packs .sidebar__body label.inline,
.circuit-tracks-midi-templates .sidebar__body label.inline,
.circuit-rhythm-packs .sidebar__body label.inline {
  display: inline;
  margin-bottom: 0;
}
.circuit-packs .sidebar__body input[type=text],
.circuit-packs .sidebar__body [type=number],
.circuit-packs .sidebar__body select,
.circuit-tracks-packs .sidebar__body input[type=text],
.circuit-tracks-packs .sidebar__body [type=number],
.circuit-tracks-packs .sidebar__body select,
.circuit-tracks-midi-templates .sidebar__body input[type=text],
.circuit-tracks-midi-templates .sidebar__body [type=number],
.circuit-tracks-midi-templates .sidebar__body select,
.circuit-rhythm-packs .sidebar__body input[type=text],
.circuit-rhythm-packs .sidebar__body [type=number],
.circuit-rhythm-packs .sidebar__body select {
  width: 100%;
  margin-bottom: 1em;
}
.circuit-packs .sidebar__body input[type=text]:last-child,
.circuit-packs .sidebar__body [type=number]:last-child,
.circuit-packs .sidebar__body select:last-child,
.circuit-tracks-packs .sidebar__body input[type=text]:last-child,
.circuit-tracks-packs .sidebar__body [type=number]:last-child,
.circuit-tracks-packs .sidebar__body select:last-child,
.circuit-tracks-midi-templates .sidebar__body input[type=text]:last-child,
.circuit-tracks-midi-templates .sidebar__body [type=number]:last-child,
.circuit-tracks-midi-templates .sidebar__body select:last-child,
.circuit-rhythm-packs .sidebar__body input[type=text]:last-child,
.circuit-rhythm-packs .sidebar__body [type=number]:last-child,
.circuit-rhythm-packs .sidebar__body select:last-child {
  margin-bottom: 0;
}
.circuit-packs .sidebar .sample-time,
.circuit-tracks-packs .sidebar .sample-time,
.circuit-tracks-midi-templates .sidebar .sample-time,
.circuit-rhythm-packs .sidebar .sample-time {
  font-family: "TTNormsProRegular", roboto, freesans, arial, "system-ui", sans-serif;
  font-weight: 400;
  font-size: 0.8125rem;
  line-height: 1.28;
  color: #97999f;
}
.circuit-packs .sidebar .sample-time > label,
.circuit-tracks-packs .sidebar .sample-time > label,
.circuit-tracks-midi-templates .sidebar .sample-time > label,
.circuit-rhythm-packs .sidebar .sample-time > label {
  margin-right: 8px;
}
.circuit-packs .sidebar .sample-time > *,
.circuit-tracks-packs .sidebar .sample-time > *,
.circuit-tracks-midi-templates .sidebar .sample-time > *,
.circuit-rhythm-packs .sidebar .sample-time > * {
  display: inline-block;
}
.circuit-packs .sidebar .sample-time__value,
.circuit-tracks-packs .sidebar .sample-time__value,
.circuit-tracks-midi-templates .sidebar .sample-time__value,
.circuit-rhythm-packs .sidebar .sample-time__value {
  color: #d4d7df;
}
.circuit-packs .sidebar .sample-time__second,
.circuit-tracks-packs .sidebar .sample-time__second,
.circuit-tracks-midi-templates .sidebar .sample-time__second,
.circuit-rhythm-packs .sidebar .sample-time__second {
  color: #97999f;
}
.circuit-packs .sidebar .sample-time__second span,
.circuit-tracks-packs .sidebar .sample-time__second span,
.circuit-tracks-midi-templates .sidebar .sample-time__second span,
.circuit-rhythm-packs .sidebar .sample-time__second span {
  margin-left: 8px;
}
.circuit-packs .sidebar .sample-time__second > *,
.circuit-tracks-packs .sidebar .sample-time__second > *,
.circuit-tracks-midi-templates .sidebar .sample-time__second > *,
.circuit-rhythm-packs .sidebar .sample-time__second > * {
  font-family: "TTNormsProRegular", roboto, freesans, arial, "system-ui", sans-serif;
  font-weight: 400;
  font-size: 0.8125rem;
  line-height: 1.28;
  float: right;
}
.circuit-packs .sidebar .sample-time__second > * > span,
.circuit-tracks-packs .sidebar .sample-time__second > * > span,
.circuit-tracks-midi-templates .sidebar .sample-time__second > * > span,
.circuit-rhythm-packs .sidebar .sample-time__second > * > span {
  margin-left: 8px;
}
.circuit-packs .sidebar .sample-time__second > * > *,
.circuit-tracks-packs .sidebar .sample-time__second > * > *,
.circuit-tracks-midi-templates .sidebar .sample-time__second > * > *,
.circuit-rhythm-packs .sidebar .sample-time__second > * > * {
  display: inline-block;
}
.circuit-packs .sidebar .remaining-space.sample-collection__remaining-space-bar,
.circuit-tracks-packs .sidebar .remaining-space.sample-collection__remaining-space-bar,
.circuit-tracks-midi-templates .sidebar .remaining-space.sample-collection__remaining-space-bar,
.circuit-rhythm-packs .sidebar .remaining-space.sample-collection__remaining-space-bar {
  height: 20px;
}
.circuit-packs .sidebar__footer,
.circuit-tracks-packs .sidebar__footer,
.circuit-tracks-midi-templates .sidebar__footer,
.circuit-rhythm-packs .sidebar__footer {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 0;
}
.circuit-packs .sidebar__footer:last-child,
.circuit-tracks-packs .sidebar__footer:last-child,
.circuit-tracks-midi-templates .sidebar__footer:last-child,
.circuit-rhythm-packs .sidebar__footer:last-child {
  justify-content: end;
}
.circuit-packs .sidebar__footer > button:first-child,
.circuit-tracks-packs .sidebar__footer > button:first-child,
.circuit-tracks-midi-templates .sidebar__footer > button:first-child,
.circuit-rhythm-packs .sidebar__footer > button:first-child {
  margin-top: 5px;
}
.circuit-packs .sidebar__close-button,
.circuit-tracks-packs .sidebar__close-button,
.circuit-tracks-midi-templates .sidebar__close-button,
.circuit-rhythm-packs .sidebar__close-button {
  background: none;
}
@media (max-width: 1049px) {
  .circuit-packs .sidebar__scroll-container,
  .circuit-tracks-packs .sidebar__scroll-container,
  .circuit-tracks-midi-templates .sidebar__scroll-container,
  .circuit-rhythm-packs .sidebar__scroll-container {
    margin-top: 35px;
    max-height: calc(100% - 35px);
  }
}
.circuit-packs .sidebar__is-open.main-section__inner,
.circuit-tracks-packs .sidebar__is-open.main-section__inner,
.circuit-tracks-midi-templates .sidebar__is-open.main-section__inner,
.circuit-rhythm-packs .sidebar__is-open.main-section__inner {
  overflow-x: auto;
}
.circuit-packs .sidebar__control-group,
.circuit-tracks-packs .sidebar__control-group,
.circuit-tracks-midi-templates .sidebar__control-group,
.circuit-rhythm-packs .sidebar__control-group {
  padding: 8px;
  background: rgba(227, 230, 239, 0.1019607843);
  border: 1px solid rgba(227, 230, 239, 0.2);
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.circuit-packs .sidebar__control-group:not(:last-child),
.circuit-tracks-packs .sidebar__control-group:not(:last-child),
.circuit-tracks-midi-templates .sidebar__control-group:not(:last-child),
.circuit-rhythm-packs .sidebar__control-group:not(:last-child) {
  margin-bottom: 14px;
}
.circuit-packs .sidebar__control-group h3,
.circuit-tracks-packs .sidebar__control-group h3,
.circuit-tracks-midi-templates .sidebar__control-group h3,
.circuit-rhythm-packs .sidebar__control-group h3 {
  font-family: "TTNormsProDemiBold", roboto, freesans, arial, "system-ui", sans-serif;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0.08em;
  color: #e0e0e0;
  margin-bottom: 8px;
}
.circuit-packs .sidebar__control-group--row,
.circuit-tracks-packs .sidebar__control-group--row,
.circuit-tracks-midi-templates .sidebar__control-group--row,
.circuit-rhythm-packs .sidebar__control-group--row {
  display: flex;
  justify-content: center;
}
.circuit-packs .sidebar__control-group--row-two-columns > div,
.circuit-tracks-packs .sidebar__control-group--row-two-columns > div,
.circuit-tracks-midi-templates .sidebar__control-group--row-two-columns > div,
.circuit-rhythm-packs .sidebar__control-group--row-two-columns > div {
  width: 50%;
}
.circuit-packs .sidebar__control-group .graphical-display .inc-dec-button-group,
.circuit-packs .sidebar__control-group .graphical-display .inc-dec-button-group button,
.circuit-packs .sidebar__control-group .graphical-display select,
.circuit-tracks-packs .sidebar__control-group .graphical-display .inc-dec-button-group,
.circuit-tracks-packs .sidebar__control-group .graphical-display .inc-dec-button-group button,
.circuit-tracks-packs .sidebar__control-group .graphical-display select,
.circuit-tracks-midi-templates .sidebar__control-group .graphical-display .inc-dec-button-group,
.circuit-tracks-midi-templates .sidebar__control-group .graphical-display .inc-dec-button-group button,
.circuit-tracks-midi-templates .sidebar__control-group .graphical-display select,
.circuit-rhythm-packs .sidebar__control-group .graphical-display .inc-dec-button-group,
.circuit-rhythm-packs .sidebar__control-group .graphical-display .inc-dec-button-group button,
.circuit-rhythm-packs .sidebar__control-group .graphical-display select {
  height: 22px;
  color: #919191;
  background: none;
}
.circuit-packs .sidebar__control-group .graphical-display .inc-dec-button-group:hover,
.circuit-packs .sidebar__control-group .graphical-display .inc-dec-button-group button:hover,
.circuit-packs .sidebar__control-group .graphical-display select:hover,
.circuit-tracks-packs .sidebar__control-group .graphical-display .inc-dec-button-group:hover,
.circuit-tracks-packs .sidebar__control-group .graphical-display .inc-dec-button-group button:hover,
.circuit-tracks-packs .sidebar__control-group .graphical-display select:hover,
.circuit-tracks-midi-templates .sidebar__control-group .graphical-display .inc-dec-button-group:hover,
.circuit-tracks-midi-templates .sidebar__control-group .graphical-display .inc-dec-button-group button:hover,
.circuit-tracks-midi-templates .sidebar__control-group .graphical-display select:hover,
.circuit-rhythm-packs .sidebar__control-group .graphical-display .inc-dec-button-group:hover,
.circuit-rhythm-packs .sidebar__control-group .graphical-display .inc-dec-button-group button:hover,
.circuit-rhythm-packs .sidebar__control-group .graphical-display select:hover {
  color: #fff;
  background-color: rgba(15, 15, 16, 0.6);
}
.circuit-packs .sidebar .grid-effect--live-preview-toggle,
.circuit-tracks-packs .sidebar .grid-effect--live-preview-toggle,
.circuit-tracks-midi-templates .sidebar .grid-effect--live-preview-toggle,
.circuit-rhythm-packs .sidebar .grid-effect--live-preview-toggle {
  display: inline-block;
}
.circuit-packs .sidebar .grid-effect--live-preview-toggle:not(:last-child),
.circuit-tracks-packs .sidebar .grid-effect--live-preview-toggle:not(:last-child),
.circuit-tracks-midi-templates .sidebar .grid-effect--live-preview-toggle:not(:last-child),
.circuit-rhythm-packs .sidebar .grid-effect--live-preview-toggle:not(:last-child) {
  margin-bottom: 1em;
}
.circuit-packs .sidebar .grid-effect--lfo-key-sync,
.circuit-tracks-packs .sidebar .grid-effect--lfo-key-sync,
.circuit-tracks-midi-templates .sidebar .grid-effect--lfo-key-sync,
.circuit-rhythm-packs .sidebar .grid-effect--lfo-key-sync {
  justify-content: space-evenly;
}
.circuit-packs .sidebar .grid-effect--lfo-key-sync .radio-button-group--entry label,
.circuit-tracks-packs .sidebar .grid-effect--lfo-key-sync .radio-button-group--entry label,
.circuit-tracks-midi-templates .sidebar .grid-effect--lfo-key-sync .radio-button-group--entry label,
.circuit-rhythm-packs .sidebar .grid-effect--lfo-key-sync .radio-button-group--entry label {
  padding-top: 0;
}
.circuit-packs .sidebar .grid-effect--lfo-key-sync .radio-button-group--entry label svg,
.circuit-tracks-packs .sidebar .grid-effect--lfo-key-sync .radio-button-group--entry label svg,
.circuit-tracks-midi-templates .sidebar .grid-effect--lfo-key-sync .radio-button-group--entry label svg,
.circuit-rhythm-packs .sidebar .grid-effect--lfo-key-sync .radio-button-group--entry label svg {
  margin-bottom: 7px;
}
.circuit-packs .sidebar .grid-effect--lfo-shape, .circuit-packs .sidebar .grid-effect--lfo-key-sync,
.circuit-tracks-packs .sidebar .grid-effect--lfo-shape,
.circuit-tracks-packs .sidebar .grid-effect--lfo-key-sync,
.circuit-tracks-midi-templates .sidebar .grid-effect--lfo-shape,
.circuit-tracks-midi-templates .sidebar .grid-effect--lfo-key-sync,
.circuit-rhythm-packs .sidebar .grid-effect--lfo-shape,
.circuit-rhythm-packs .sidebar .grid-effect--lfo-key-sync {
  height: 90px;
}
.circuit-packs .sidebar .grid-effect--lfo-shape .radio-button-group--entry, .circuit-packs .sidebar .grid-effect--lfo-key-sync .radio-button-group--entry,
.circuit-tracks-packs .sidebar .grid-effect--lfo-shape .radio-button-group--entry,
.circuit-tracks-packs .sidebar .grid-effect--lfo-key-sync .radio-button-group--entry,
.circuit-tracks-midi-templates .sidebar .grid-effect--lfo-shape .radio-button-group--entry,
.circuit-tracks-midi-templates .sidebar .grid-effect--lfo-key-sync .radio-button-group--entry,
.circuit-rhythm-packs .sidebar .grid-effect--lfo-shape .radio-button-group--entry,
.circuit-rhythm-packs .sidebar .grid-effect--lfo-key-sync .radio-button-group--entry {
  margin-bottom: 43px;
  width: 64px;
}
.circuit-packs .sidebar .grid-effect--lfo-shape .radio-button-group--entry label, .circuit-packs .sidebar .grid-effect--lfo-key-sync .radio-button-group--entry label,
.circuit-tracks-packs .sidebar .grid-effect--lfo-shape .radio-button-group--entry label,
.circuit-tracks-packs .sidebar .grid-effect--lfo-key-sync .radio-button-group--entry label,
.circuit-tracks-midi-templates .sidebar .grid-effect--lfo-shape .radio-button-group--entry label,
.circuit-tracks-midi-templates .sidebar .grid-effect--lfo-key-sync .radio-button-group--entry label,
.circuit-rhythm-packs .sidebar .grid-effect--lfo-shape .radio-button-group--entry label,
.circuit-rhythm-packs .sidebar .grid-effect--lfo-key-sync .radio-button-group--entry label {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 6px;
  padding-top: 10px;
  width: 64px;
  height: 41px;
  font-family: "TTNormsProRegular", roboto, freesans, arial, "system-ui", sans-serif;
  font-weight: 400;
  font-size: 0.8125rem;
  line-height: 1.28;
}
.circuit-packs .sidebar .grid-effect--lfo-shape .radio-button-group--entry label svg, .circuit-packs .sidebar .grid-effect--lfo-key-sync .radio-button-group--entry label svg,
.circuit-tracks-packs .sidebar .grid-effect--lfo-shape .radio-button-group--entry label svg,
.circuit-tracks-packs .sidebar .grid-effect--lfo-key-sync .radio-button-group--entry label svg,
.circuit-tracks-midi-templates .sidebar .grid-effect--lfo-shape .radio-button-group--entry label svg,
.circuit-tracks-midi-templates .sidebar .grid-effect--lfo-key-sync .radio-button-group--entry label svg,
.circuit-rhythm-packs .sidebar .grid-effect--lfo-shape .radio-button-group--entry label svg,
.circuit-rhythm-packs .sidebar .grid-effect--lfo-key-sync .radio-button-group--entry label svg {
  margin-bottom: 15px;
}
.circuit-packs .sidebar .grid-effect--lfo-shape .radio-button-group--entry label svg .detail-light--stroke, .circuit-packs .sidebar .grid-effect--lfo-key-sync .radio-button-group--entry label svg .detail-light--stroke,
.circuit-tracks-packs .sidebar .grid-effect--lfo-shape .radio-button-group--entry label svg .detail-light--stroke,
.circuit-tracks-packs .sidebar .grid-effect--lfo-key-sync .radio-button-group--entry label svg .detail-light--stroke,
.circuit-tracks-midi-templates .sidebar .grid-effect--lfo-shape .radio-button-group--entry label svg .detail-light--stroke,
.circuit-tracks-midi-templates .sidebar .grid-effect--lfo-key-sync .radio-button-group--entry label svg .detail-light--stroke,
.circuit-rhythm-packs .sidebar .grid-effect--lfo-shape .radio-button-group--entry label svg .detail-light--stroke,
.circuit-rhythm-packs .sidebar .grid-effect--lfo-key-sync .radio-button-group--entry label svg .detail-light--stroke {
  stroke: #828282;
  transition: stroke ease-out 100ms;
  stroke-width: 1;
}
.circuit-packs .sidebar .grid-effect--lfo-shape .radio-button-group--entry:hover label svg .detail-light--stroke, .circuit-packs .sidebar .grid-effect--lfo-key-sync .radio-button-group--entry:hover label svg .detail-light--stroke,
.circuit-tracks-packs .sidebar .grid-effect--lfo-shape .radio-button-group--entry:hover label svg .detail-light--stroke,
.circuit-tracks-packs .sidebar .grid-effect--lfo-key-sync .radio-button-group--entry:hover label svg .detail-light--stroke,
.circuit-tracks-midi-templates .sidebar .grid-effect--lfo-shape .radio-button-group--entry:hover label svg .detail-light--stroke,
.circuit-tracks-midi-templates .sidebar .grid-effect--lfo-key-sync .radio-button-group--entry:hover label svg .detail-light--stroke,
.circuit-rhythm-packs .sidebar .grid-effect--lfo-shape .radio-button-group--entry:hover label svg .detail-light--stroke,
.circuit-rhythm-packs .sidebar .grid-effect--lfo-key-sync .radio-button-group--entry:hover label svg .detail-light--stroke {
  stroke: #fff;
}
.circuit-packs .sidebar .grid-effect--lfo-shape .radio-button-group--entry input[type=radio]:checked + label svg path, .circuit-packs .sidebar .grid-effect--lfo-key-sync .radio-button-group--entry input[type=radio]:checked + label svg path,
.circuit-tracks-packs .sidebar .grid-effect--lfo-shape .radio-button-group--entry input[type=radio]:checked + label svg path,
.circuit-tracks-packs .sidebar .grid-effect--lfo-key-sync .radio-button-group--entry input[type=radio]:checked + label svg path,
.circuit-tracks-midi-templates .sidebar .grid-effect--lfo-shape .radio-button-group--entry input[type=radio]:checked + label svg path,
.circuit-tracks-midi-templates .sidebar .grid-effect--lfo-key-sync .radio-button-group--entry input[type=radio]:checked + label svg path,
.circuit-rhythm-packs .sidebar .grid-effect--lfo-shape .radio-button-group--entry input[type=radio]:checked + label svg path,
.circuit-rhythm-packs .sidebar .grid-effect--lfo-key-sync .radio-button-group--entry input[type=radio]:checked + label svg path {
  stroke: #e0e0e0;
  stroke-width: 2;
}
.circuit-packs .sidebar .grid-effect--lfo-shape .radio-button-group--entry input[type=radio]:checked + label svg.detail--fill path, .circuit-packs .sidebar .grid-effect--lfo-key-sync .radio-button-group--entry input[type=radio]:checked + label svg.detail--fill path,
.circuit-tracks-packs .sidebar .grid-effect--lfo-shape .radio-button-group--entry input[type=radio]:checked + label svg.detail--fill path,
.circuit-tracks-packs .sidebar .grid-effect--lfo-key-sync .radio-button-group--entry input[type=radio]:checked + label svg.detail--fill path,
.circuit-tracks-midi-templates .sidebar .grid-effect--lfo-shape .radio-button-group--entry input[type=radio]:checked + label svg.detail--fill path,
.circuit-tracks-midi-templates .sidebar .grid-effect--lfo-key-sync .radio-button-group--entry input[type=radio]:checked + label svg.detail--fill path,
.circuit-rhythm-packs .sidebar .grid-effect--lfo-shape .radio-button-group--entry input[type=radio]:checked + label svg.detail--fill path,
.circuit-rhythm-packs .sidebar .grid-effect--lfo-key-sync .radio-button-group--entry input[type=radio]:checked + label svg.detail--fill path {
  stroke: none;
  stroke-width: 2;
  fill: #e0e0e0;
}
.circuit-packs .sidebar .grid-effect--rate-control .grid-effect--triplet-checkbox,
.circuit-tracks-packs .sidebar .grid-effect--rate-control .grid-effect--triplet-checkbox,
.circuit-tracks-midi-templates .sidebar .grid-effect--rate-control .grid-effect--triplet-checkbox,
.circuit-rhythm-packs .sidebar .grid-effect--rate-control .grid-effect--triplet-checkbox {
  display: flex;
  justify-content: center;
  align-items: center;
}
.circuit-packs .sidebar .grid-effect--rate-control .checkbox + label,
.circuit-tracks-packs .sidebar .grid-effect--rate-control .checkbox + label,
.circuit-tracks-midi-templates .sidebar .grid-effect--rate-control .checkbox + label,
.circuit-rhythm-packs .sidebar .grid-effect--rate-control .checkbox + label {
  display: inline-block;
  margin-left: 8px;
  font-family: "TTNormsProRegular", roboto, freesans, arial, "system-ui", sans-serif;
  font-weight: 400;
  font-size: 0.8125rem;
  line-height: 1.28;
}
.circuit-packs .sidebar .grid-effect--rate-control .checkbox input[type=checkbox]:checked + label::before,
.circuit-tracks-packs .sidebar .grid-effect--rate-control .checkbox input[type=checkbox]:checked + label::before,
.circuit-tracks-midi-templates .sidebar .grid-effect--rate-control .checkbox input[type=checkbox]:checked + label::before,
.circuit-rhythm-packs .sidebar .grid-effect--rate-control .checkbox input[type=checkbox]:checked + label::before {
  box-shadow: 0 0 0 1px #488fbb;
}
.circuit-packs .sidebar .grid-effect--rate-control .radio-button-group--button-style,
.circuit-tracks-packs .sidebar .grid-effect--rate-control .radio-button-group--button-style,
.circuit-tracks-midi-templates .sidebar .grid-effect--rate-control .radio-button-group--button-style,
.circuit-rhythm-packs .sidebar .grid-effect--rate-control .radio-button-group--button-style {
  margin-bottom: 15px;
}
.circuit-packs .sidebar .grid-effect--rate-control .radio-button-group--button-style .radio-button-group--entry,
.circuit-tracks-packs .sidebar .grid-effect--rate-control .radio-button-group--button-style .radio-button-group--entry,
.circuit-tracks-midi-templates .sidebar .grid-effect--rate-control .radio-button-group--button-style .radio-button-group--entry,
.circuit-rhythm-packs .sidebar .grid-effect--rate-control .radio-button-group--button-style .radio-button-group--entry {
  width: 42px;
  height: 35px;
}
.circuit-packs .sidebar .grid-effect--rate-control .radio-button-group--button-style .radio-button-group--entry label,
.circuit-tracks-packs .sidebar .grid-effect--rate-control .radio-button-group--button-style .radio-button-group--entry label,
.circuit-tracks-midi-templates .sidebar .grid-effect--rate-control .radio-button-group--button-style .radio-button-group--entry label,
.circuit-rhythm-packs .sidebar .grid-effect--rate-control .radio-button-group--button-style .radio-button-group--entry label {
  display: flex;
  justify-content: center;
  height: 35px;
}
.circuit-packs .sidebar .grid-effect--buffer-control .radio-button-group,
.circuit-tracks-packs .sidebar .grid-effect--buffer-control .radio-button-group,
.circuit-tracks-midi-templates .sidebar .grid-effect--buffer-control .radio-button-group,
.circuit-rhythm-packs .sidebar .grid-effect--buffer-control .radio-button-group {
  height: 87px;
}
.circuit-packs .sidebar .grid-effect--buffer-control .radio-button-group .radio-button-group--entry,
.circuit-tracks-packs .sidebar .grid-effect--buffer-control .radio-button-group .radio-button-group--entry,
.circuit-tracks-midi-templates .sidebar .grid-effect--buffer-control .radio-button-group .radio-button-group--entry,
.circuit-rhythm-packs .sidebar .grid-effect--buffer-control .radio-button-group .radio-button-group--entry {
  margin-bottom: 40px;
}
.circuit-packs .sidebar .grid-effect--buffer-control .radio-button-group .radio-button-group--entry label,
.circuit-tracks-packs .sidebar .grid-effect--buffer-control .radio-button-group .radio-button-group--entry label,
.circuit-tracks-midi-templates .sidebar .grid-effect--buffer-control .radio-button-group .radio-button-group--entry label,
.circuit-rhythm-packs .sidebar .grid-effect--buffer-control .radio-button-group .radio-button-group--entry label {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6px;
  padding-top: 25px;
  width: 50px;
  height: 41px;
  font-family: "TTNormsProRegular", roboto, freesans, arial, "system-ui", sans-serif;
  font-weight: 400;
  font-size: 0.8125rem;
  line-height: 1.28;
}
.circuit-packs .sidebar .grid-effect--buffer-control .radio-button-group .radio-button-group--entry label svg,
.circuit-tracks-packs .sidebar .grid-effect--buffer-control .radio-button-group .radio-button-group--entry label svg,
.circuit-tracks-midi-templates .sidebar .grid-effect--buffer-control .radio-button-group .radio-button-group--entry label svg,
.circuit-rhythm-packs .sidebar .grid-effect--buffer-control .radio-button-group .radio-button-group--entry label svg {
  margin-top: 15px;
  margin-bottom: 12px;
}
.circuit-packs .sidebar .grid-effect--buffer-control .radio-button-group .radio-button-group--entry label svg .detail-light--stroke,
.circuit-tracks-packs .sidebar .grid-effect--buffer-control .radio-button-group .radio-button-group--entry label svg .detail-light--stroke,
.circuit-tracks-midi-templates .sidebar .grid-effect--buffer-control .radio-button-group .radio-button-group--entry label svg .detail-light--stroke,
.circuit-rhythm-packs .sidebar .grid-effect--buffer-control .radio-button-group .radio-button-group--entry label svg .detail-light--stroke {
  stroke: #aaaab3;
  transition: stroke ease-out 100ms;
}
.circuit-packs .sidebar .grid-effect--buffer-control .radio-button-group .radio-button-group--entry label svg .detail-light--fill,
.circuit-tracks-packs .sidebar .grid-effect--buffer-control .radio-button-group .radio-button-group--entry label svg .detail-light--fill,
.circuit-tracks-midi-templates .sidebar .grid-effect--buffer-control .radio-button-group .radio-button-group--entry label svg .detail-light--fill,
.circuit-rhythm-packs .sidebar .grid-effect--buffer-control .radio-button-group .radio-button-group--entry label svg .detail-light--fill {
  fill: #aaaab3;
  transition: fill ease-out 100ms;
}
.circuit-packs .sidebar .grid-effect--buffer-control .radio-button-group .radio-button-group--entry label::after,
.circuit-tracks-packs .sidebar .grid-effect--buffer-control .radio-button-group .radio-button-group--entry label::after,
.circuit-tracks-midi-templates .sidebar .grid-effect--buffer-control .radio-button-group .radio-button-group--entry label::after,
.circuit-rhythm-packs .sidebar .grid-effect--buffer-control .radio-button-group .radio-button-group--entry label::after {
  line-height: 60px;
}
.circuit-packs .sidebar .grid-effect--buffer-control .radio-button-group .radio-button-group--entry:hover label svg .detail-light--stroke,
.circuit-tracks-packs .sidebar .grid-effect--buffer-control .radio-button-group .radio-button-group--entry:hover label svg .detail-light--stroke,
.circuit-tracks-midi-templates .sidebar .grid-effect--buffer-control .radio-button-group .radio-button-group--entry:hover label svg .detail-light--stroke,
.circuit-rhythm-packs .sidebar .grid-effect--buffer-control .radio-button-group .radio-button-group--entry:hover label svg .detail-light--stroke {
  stroke: #fff;
}
.circuit-packs .sidebar .grid-effect--buffer-control .radio-button-group .radio-button-group--entry:hover label svg .detail-light--fill,
.circuit-tracks-packs .sidebar .grid-effect--buffer-control .radio-button-group .radio-button-group--entry:hover label svg .detail-light--fill,
.circuit-tracks-midi-templates .sidebar .grid-effect--buffer-control .radio-button-group .radio-button-group--entry:hover label svg .detail-light--fill,
.circuit-rhythm-packs .sidebar .grid-effect--buffer-control .radio-button-group .radio-button-group--entry:hover label svg .detail-light--fill {
  fill: #fff;
}
.circuit-packs .sidebar .grid-effect--buffer-control .radio-button-group .radio-button-group--entry input[type=radio]:checked + label svg .detail-light--stroke,
.circuit-tracks-packs .sidebar .grid-effect--buffer-control .radio-button-group .radio-button-group--entry input[type=radio]:checked + label svg .detail-light--stroke,
.circuit-tracks-midi-templates .sidebar .grid-effect--buffer-control .radio-button-group .radio-button-group--entry input[type=radio]:checked + label svg .detail-light--stroke,
.circuit-rhythm-packs .sidebar .grid-effect--buffer-control .radio-button-group .radio-button-group--entry input[type=radio]:checked + label svg .detail-light--stroke {
  stroke: #fff;
}
.circuit-packs .sidebar .grid-effect--buffer-control .radio-button-group .radio-button-group--entry input[type=radio]:checked + label svg .detail-light--fill,
.circuit-tracks-packs .sidebar .grid-effect--buffer-control .radio-button-group .radio-button-group--entry input[type=radio]:checked + label svg .detail-light--fill,
.circuit-tracks-midi-templates .sidebar .grid-effect--buffer-control .radio-button-group .radio-button-group--entry input[type=radio]:checked + label svg .detail-light--fill,
.circuit-rhythm-packs .sidebar .grid-effect--buffer-control .radio-button-group .radio-button-group--entry input[type=radio]:checked + label svg .detail-light--fill {
  fill: #fff;
}
.circuit-packs .sidebar .grid-effect__vinyl-artefacts .knob,
.circuit-tracks-packs .sidebar .grid-effect__vinyl-artefacts .knob,
.circuit-tracks-midi-templates .sidebar .grid-effect__vinyl-artefacts .knob,
.circuit-rhythm-packs .sidebar .grid-effect__vinyl-artefacts .knob {
  margin: 5px auto;
}
@media (min-width: 1050px) {
  .circuit-packs .sidebar__default-breakpoint,
  .circuit-tracks-packs .sidebar__default-breakpoint,
  .circuit-tracks-midi-templates .sidebar__default-breakpoint,
  .circuit-rhythm-packs .sidebar__default-breakpoint {
    width: 280px;
  }
  .circuit-packs .sidebar__default-breakpoint.main-section__inner,
  .circuit-tracks-packs .sidebar__default-breakpoint.main-section__inner,
  .circuit-tracks-midi-templates .sidebar__default-breakpoint.main-section__inner,
  .circuit-rhythm-packs .sidebar__default-breakpoint.main-section__inner {
    margin-right: 280px;
    width: calc(100% - 280px);
  }
}
.circuit-packs__replace-buttons,
.circuit-tracks-packs__replace-buttons,
.circuit-tracks-midi-templates__replace-buttons,
.circuit-rhythm-packs__replace-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
}
.circuit-packs__replace-buttons .button--legacy-replace,
.circuit-tracks-packs__replace-buttons .button--legacy-replace,
.circuit-tracks-midi-templates__replace-buttons .button--legacy-replace,
.circuit-rhythm-packs__replace-buttons .button--legacy-replace {
  line-height: 18px;
  margin-top: 0;
  margin-bottom: 20px;
  transition: 0.1s ease;
}
.circuit-packs__replace-buttons label.button--legacy-replace,
.circuit-tracks-packs__replace-buttons label.button--legacy-replace,
.circuit-tracks-midi-templates__replace-buttons label.button--legacy-replace,
.circuit-rhythm-packs__replace-buttons label.button--legacy-replace {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.circuit-packs__replace-buttons--left-align,
.circuit-tracks-packs__replace-buttons--left-align,
.circuit-tracks-midi-templates__replace-buttons--left-align,
.circuit-rhythm-packs__replace-buttons--left-align {
  justify-content: flex-start;
}
.circuit-packs__replace-buttons--left-align .button--legacy-replace:not(:last-child),
.circuit-tracks-packs__replace-buttons--left-align .button--legacy-replace:not(:last-child),
.circuit-tracks-midi-templates__replace-buttons--left-align .button--legacy-replace:not(:last-child),
.circuit-rhythm-packs__replace-buttons--left-align .button--legacy-replace:not(:last-child) {
  margin-right: 16px;
}
.circuit-packs__send-button, .circuit-packs__download-button, .circuit-packs__remove-button,
.circuit-tracks-packs__send-button,
.circuit-tracks-packs__download-button,
.circuit-tracks-packs__remove-button,
.circuit-tracks-midi-templates__send-button,
.circuit-tracks-midi-templates__download-button,
.circuit-tracks-midi-templates__remove-button,
.circuit-rhythm-packs__send-button,
.circuit-rhythm-packs__download-button,
.circuit-rhythm-packs__remove-button {
  width: 100%;
  margin-top: 20px;
  transition: 0.1s ease;
}
.librarian .circuit-packs__send-button,
.librarian .circuit-tracks-packs__send-button,
.librarian .circuit-tracks-midi-templates__send-button,
.librarian .circuit-rhythm-packs__send-button {
  background-color: #0c47e1;
}
.librarian .circuit-packs__send-button:hover,
.librarian .circuit-tracks-packs__send-button:hover,
.librarian .circuit-tracks-midi-templates__send-button:hover,
.librarian .circuit-rhythm-packs__send-button:hover {
  background-color: #245178;
}
.librarian .circuit-packs__send-button:disabled,
.librarian .circuit-tracks-packs__send-button:disabled,
.librarian .circuit-tracks-midi-templates__send-button:disabled,
.librarian .circuit-rhythm-packs__send-button:disabled {
  color: #f2f2f2;
  opacity: 0.2;
}

.circuit-tracks-replace-from-cloud {
  width: 500px;
  max-width: 100%;
}
.circuit-tracks-replace-from-cloud p {
  max-width: 100%;
}
.circuit-tracks-replace-from-cloud .librarian-browser {
  position: relative;
  width: 100%;
  height: calc(100% - 80px);
  top: 0;
  padding: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
}
.circuit-tracks-replace-from-cloud .librarian-browser .scroll-container {
  height: 402px;
  margin: 0;
}

.grid-effects-icons__body {
  display: grid;
  gap: 25px;
  grid-template-columns: repeat(2, auto);
  list-style-type: none;
  padding: 8px;
  margin: 0;
  margin-top: 12px;
  justify-content: center;
}
.grid-effects-icons__body li {
  width: 100px;
  height: 139px;
  padding: 12px;
  border: 1px solid #c5c8cf;
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  text-align: center;
  cursor: move;
  transition: background ease-out 100ms, border-color ease-out 100ms;
}
.grid-effects-icons__body li:hover {
  background: rgba(227, 230, 239, 0.1019607843);
}
.grid-effects-icons__beat-repeat:hover {
  border-color: #fb3535;
}
.grid-effects-icons__reverser:hover {
  border-color: #faa334;
}
.grid-effects-icons__gater:hover {
  border-color: #faf234;
}
.grid-effects-icons__autofilter:hover {
  border-color: #63fa4b;
}
.grid-effects-icons__digital-lofi:hover {
  border-color: #34affa;
}
.grid-effects-icons__phaser:hover {
  border-color: #6e34fa;
}
.grid-effects-icons__vinyl:hover {
  border-color: #fa4bce;
}
.grid-effects-icons__footer {
  text-align: center;
  margin: 10px 40px;
}

.global-confirmation {
  position: absolute;
}
.global-confirmation__popup {
  z-index: 100;
  position: absolute;
  top: -130px;
  left: 50%;
  margin-left: -50px;
  width: 100px;
  height: 100px;
  background: #242428;
  border-radius: 4px;
  text-align: center;
  opacity: 0;
  transition: opacity 0.5s;
  transform: scale(0.1);
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5019607843);
}
.global-confirmation__popup--state-in {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.2s, transform 0.2s;
}
.global-confirmation__popup--state-out {
  transform: scale(1);
  transition: opacity 0.5s;
  opacity: 0;
}
.global-confirmation__icon {
  width: 48px;
  height: 52px;
  margin: 0 auto;
  margin-top: 11px;
}
.global-confirmation__message {
  position: absolute;
  width: 100px;
  top: 58px;
}

.browser-not-supported .main-section {
  display: none;
}
.browser-not-supported__overlay {
  inset: 0;
  position: fixed;
  color: #c5c8cf;
  z-index: 2000;
  text-align: center;
  overflow: hidden;
  overflow-y: scroll;
  background: radial-gradient(100% 100% at 100vw 100vh, #1d2d54 0%, #0a0f1c 100%);
}
.browser-not-supported__overlay h1 {
  color: #f2f6ff;
  margin-bottom: 96px;
}
.browser-not-supported__ios, .browser-not-supported__screen-width {
  position: absolute;
  bottom: 0;
  width: 100%;
  display: block;
}
.browser-not-supported__ios h1, .browser-not-supported__screen-width h1 {
  text-align: center;
}
.browser-not-supported__ios p, .browser-not-supported__screen-width p {
  width: calc(100% - 64px);
  max-width: 525px;
  text-align: left;
  margin: auto 32px 16px;
}
.browser-not-supported__ios img, .browser-not-supported__screen-width img {
  width: calc(100% - 64px);
  max-width: 525px;
  margin-top: 64px;
  mix-blend-mode: lighten;
}
@media screen and (width >= 560px) {
  .browser-not-supported__ios h1,
  .browser-not-supported__ios p, .browser-not-supported__screen-width h1,
  .browser-not-supported__screen-width p {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 525px;
  }
}
@media screen and (width >= 645px) {
  .browser-not-supported__ios h1, .browser-not-supported__screen-width h1 {
    text-align: left;
  }
}
@media screen and (width >= 1000px) {
  .browser-not-supported__overlay .browser-not-supported__ios, .browser-not-supported__overlay .browser-not-supported__screen-width {
    text-align: left;
  }
  .browser-not-supported__ios h1,
  .browser-not-supported__ios p, .browser-not-supported__screen-width h1,
  .browser-not-supported__screen-width p {
    margin-left: 96px;
    margin-right: 96px;
  }
  .browser-not-supported__ios img, .browser-not-supported__screen-width img {
    margin-left: 96px;
  }
}
@media screen and (height <= 650px) {
  .browser-not-supported__ios, .browser-not-supported__screen-width {
    bottom: initial;
  }
}
.browser-not-supported__continue-on-web > div {
  padding: 32px;
}
@media (width <= 1080px) {
  .browser-not-supported__continue-on-web > div {
    padding-bottom: 0;
  }
}
.browser-not-supported__get-standalone > div {
  background: rgba(227, 230, 239, 0.0705882353);
  border: 1px solid rgba(227, 230, 239, 0.2);
  border-radius: 2px;
  padding: 32px;
}
.browser-not-supported__get-standalone button {
  width: 100%;
  margin-top: 8px;
  box-sizing: border-box;
}
.browser-not-supported__browser-width {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.browser-not-supported__browser-width h1 {
  margin: auto 32px;
  max-width: 460px;
}
.browser-not-supported__browser-width p {
  width: calc(100% - 64px);
  margin: auto 32px 32px;
  text-align: left;
  max-width: 410px;
}
.browser-not-supported__browser-width img {
  margin-top: 64px;
}
.browser-not-supported__browser-width img + p {
  margin-top: 64px;
}
.browser-not-supported__options {
  display: flex;
  justify-content: center;
}
@media (width <= 1080px) {
  .browser-not-supported__options {
    flex-direction: column;
    align-items: center;
  }
}
.browser-not-supported__options > div {
  max-width: 380px;
  min-width: 380px;
  position: relative;
  padding: 24px 108px;
  box-sizing: content-box;
}
.browser-not-supported__options > div h3 {
  margin-bottom: 44px;
  color: #e3e6ef;
}
.browser-not-supported__options > div h3 + p {
  margin-bottom: 40px;
}
@media (width <= 1080px) {
  .browser-not-supported__options > div:first-child {
    padding-bottom: 4px;
  }
}
.browser-not-supported__options > div:first-child::after {
  content: "";
  position: absolute;
  border-left: 1px solid rgba(227, 230, 239, 0.6);
  top: 0;
  right: 0;
  height: 100%;
}
@media (width <= 1080px) {
  .browser-not-supported__options > div:first-child::after {
    flex-direction: column;
    border-left: none;
    border-bottom: 1px solid rgba(227, 230, 239, 0.6);
    bottom: 0;
    left: 140px;
    width: calc(100% - 280px);
  }
}
@media (width <= 1080px) {
  .browser-not-supported__options > div:last-child {
    padding-top: 32px;
  }
}
.browser-not-supported__ios, .browser-not-supported__web-midi, .browser-not-supported__screen-width, .browser-not-supported__browser-width {
  margin-top: 100px;
}
.browser-not-supported__more-downloads button:last-child {
  margin-bottom: 0;
}
.browser-not-supported__subtitle {
  font-family: "TTNormsProDemiBold", roboto, freesans, arial, "system-ui", sans-serif;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0.08em;
  margin-top: -72px;
  margin-bottom: 58px;
  text-transform: uppercase;
}

.offline-for-maintenance.main-section__inner {
  display: flex;
  justify-content: center;
  align-items: center;
}
.offline-for-maintenance > div {
  display: flex;
  flex-direction: column;
}

.input {
  background: rgba(30, 31, 32, 0.6);
  border: 1px solid #6a6c70;
  color: #c5c8cf;
  border-radius: 2px;
  height: 36px;
  line-height: 36px;
  transition: border-color, color, background-color 0.2s ease-in-out;
  padding-left: 8px;
  padding-right: 8px;
}
.input[type=number] {
  padding-right: 0;
}
.input::placeholder {
  color: #888a8f;
}
label + .input {
  margin-top: 4px;
}
.input:hover {
  background: rgba(45, 46, 48, 0.6);
}
.input:focus {
  background: rgba(45, 46, 48, 0.6);
  color: #e3e6ef;
  border-color: #f2f6ff;
}
.input:disabled {
  background: rgba(45, 46, 48, 0.6);
  border-color: #a6a9af;
  opacity: 0.5;
}

.select {
  background: rgba(30, 31, 32, 0.6) url("/assets/images/svgs/select-arrow.svg") no-repeat right center;
  border: 1px solid #6a6c70;
  color: #c5c8cf;
  border-radius: 2px;
  height: 36px;
  line-height: 24px;
  padding: 0 40px 0 8px;
  font-size: 1rem;
  appearance: none;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background-color 0.2s, opacity 0.2s;
  transition-timing-function: ease-in-out;
}
label + .select {
  margin-top: 6px;
}
.select:hover {
  background-color: rgba(45, 46, 48, 0.6);
  color: #e3e6ef;
  border-color: #a6a9af;
}
.select.focus-visble {
  border-color: #c5c8cf;
  background: rgba(45, 46, 48, 0.6) url("/assets/images/svgs/select-arrow-hover.svg") no-repeat right center;
  color: #e3e6ef;
}
.select:disabled, .select:disabled:hover {
  background: rgba(30, 31, 32, 0.6) url("/assets/images/svgs/select-arrow.svg") no-repeat right center;
  border-color: #6a6c70;
  color: #c5c8cf;
  opacity: 0.5;
  cursor: default;
}
.select option {
  background: #2d2e30;
  color: #c5c8cf;
  padding: 10px;
  font-size: 1rem;
}
.select option:disabled, .select option.disabled {
  color: #6a6c70;
}
.select.select--compact {
  font-family: "TTNormsProRegular", roboto, freesans, arial, "system-ui", sans-serif;
  font-weight: 400;
  font-size: 0.8125rem;
  line-height: 1.28;
  line-height: 1;
  height: 28px;
}
.select.select--warning {
  background-color: rgba(30, 31, 32, 0.6);
  background-image: url("/assets/images/svgs/ikonate-warning.svg"), url("/assets/images/svgs/select-arrow.svg");
  background-repeat: no-repeat, no-repeat;
  background-position: right 32px center, right center;
}
.select--multiple-selected-options {
  color: #888a8f;
}

.select-with-warning__label {
  display: block;
}
.select-with-warning__select {
  margin-top: 4px;
  margin-bottom: 4px;
  width: 100%;
}
.select-with-warning__warning {
  color: #b6b8bf;
  font-size: 0.6875rem;
  line-height: 1.28;
}

.checkbox {
  padding-right: 25px;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  height: 31px;
  margin-top: 3px;
}
.checkbox input[type=checkbox] {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
  cursor: pointer;
}
.checkbox input[type=checkbox]:hover + label::before {
  background: rgba(30, 31, 32, 0.6);
  border-color: rgba(30, 31, 32, 0.6);
  box-shadow: 0 0 0 1px #e3e6ef;
}
.checkbox label {
  position: relative;
  padding-top: 5px;
  font-size: 12px;
  display: block;
  text-align: center;
  line-height: 1.2em;
  -webkit-touch-callout: none; /* iOS Safari */
  user-select: none; /* Non-prefixed version, currently
             supported by Chrome, Opera and Firefox */
}
.checkbox label::before {
  position: absolute;
  left: 6px;
  top: 6px;
  content: "";
  display: inline-block;
  cursor: pointer;
  border: 3px solid transparent;
  box-shadow: 0 0 0 1px #a6a9af;
  background: rgba(45, 46, 48, 0.6);
  border-radius: 2px;
  height: 14px;
  width: 14px;
  transition: 0.1s ease-out;
}
.checkbox + label {
  cursor: pointer;
  font-family: "TTNormsProRegular", roboto, freesans, arial, "system-ui", sans-serif;
  font-weight: 400;
  font-size: 0.8125rem;
  line-height: 1.28;
  margin: 0;
}
.checkbox + label:hover {
  color: #e3e6ef;
}
.checkbox--block {
  display: block;
  text-align: center;
  margin-right: 0;
  padding: 0 24px;
}
.checkbox--block label {
  text-align: center;
}
.checkbox--block label::before {
  position: relative;
  left: 0;
}
.checkbox--block + label {
  margin: 0;
}
.checkbox input[type=checkbox]:checked + label::before {
  background: #5d87f6;
  box-shadow: 0 0 0 1px #5d87f6;
  border-color: #1e1f20;
}
.checkbox input[type=checkbox]:checked + label {
  color: #d4d7df;
}
.checkbox input[type=checkbox].focus-visible:focus + label::before {
  box-shadow: 0 0 0 1px #5d87f6;
  transform: scale(1.2);
  transition: transform 0.1s ease-out;
}
.checkbox.synth-0 input[type=checkbox]:checked + label::before {
  background: #9255cf;
  box-shadow: 0 0 0 1px #9255cf;
}
.checkbox.synth-0 input[type=checkbox]:checked:hover + label::before {
  background: #bf82fc;
  box-shadow: 0 0 0 1px #bf82fc;
}
.checkbox.synth-0 input[type=checkbox].focus-visible:focus + label::before {
  box-shadow: 0 0 0 1px #5d87f6;
}
.checkbox.synth-1 input[type=checkbox]:checked + label::before {
  background: #31b978;
  box-shadow: 0 0 0 1px #31b978;
}
.checkbox.synth-1 input[type=checkbox]:checked:hover + label::before {
  background: #1fe385;
  box-shadow: 0 0 0 1px #1fe385;
}
.checkbox.synth-1 input[type=checkbox].focus-visible:focus + label::before {
  box-shadow: 0 0 0 1px #5d87f6;
}
.knob + .checkbox {
  padding-left: 0;
}

.checkbox-label {
  cursor: pointer;
  font-family: "TTNormsProRegular", roboto, freesans, arial, "system-ui", sans-serif;
  font-weight: 400;
  font-size: 0.8125rem;
  line-height: 1.28;
  margin: 0;
}
.checkbox-label:hover {
  color: #e3e6ef;
}

.graphical-radio-button--selected, .graphical-radio-button--selected:hover:not(:disabled, .disabled) {
  background: radial-gradient(100% 1237.1% at 100% 100%, #082c8d 0%, #0c47e1 100%);
  border: none;
  color: #f2f6ff;
}

.icon {
  stroke: currentcolor;
  fill: transparent;
  stroke-linejoin: miter;
  stroke-linecap: round;
  vertical-align: middle;
  stroke-width: 2px;
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
}
.icon--small {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  stroke-width: 2px;
}
.icon--large {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
}
.icon.icon--menu-more {
  width: 36px;
}
@media only screen and (resolution >= 2dppx) {
  .icon {
    stroke-width: 1px;
  }
}

body.is-windows * {
  scrollbar-width: thin;
  scrollbar-color: rgba(106, 108, 112, 0.9019607843) #aaa;
}

:root {
  color-scheme: dark;
}

.form-stack {
  min-width: 180px;
}
.form-stack label {
  display: block;
  margin-bottom: 6px;
  width: 100%;
}
.form-stack input {
  width: 100%;
}