@keyframes menu-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.98;
  }
}
@keyframes menu-item-trigger {
  0% {
    color: #606057;
    background-color: #606057;
  }
  50%, 100% {
    color: #333333;
    background-color: white;
  }
}
div.menu-layer {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  pointer-events: none;
}

nav.menu {
  position: absolute;
  border-collapse: collapse;
  display: flex;
  flex-direction: column;
  font-size: 12px;
  color: #606057;
  background-color: #e7e7e4;
  border-radius: 3px;
  overflow: hidden;
  opacity: 0;
  min-width: 128px;
  max-height: 100%;
  padding: 8px 0;
  animation-name: menu-fade-in;
  animation-duration: 101ms;
  animation-fill-mode: forwards;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
  pointer-events: all;
}
nav.menu.docked {
  padding: 6px 0 8px 0;
  border-radius: 0 0 3px 3px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.1) inset;
}
nav.menu.shutdown {
  pointer-events: none;
}
nav.menu.overflowing div.scroll {
  display: flex;
}
nav.menu > div.container {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
nav.menu > div.container > div.default {
  flex: 1 0 24px;
  display: flex;
  align-items: center;
  padding: 0 8px;
  opacity: 0.3;
  pointer-events: none;
  white-space: nowrap;
}
nav.menu > div.container > div.default.selected {
  color: white;
  background-color: #606057;
}
nav.menu > div.container > div.default.triggered {
  animation-name: menu-item-trigger;
  animation-iteration-count: 2;
  animation-duration: 100ms;
  animation-direction: alternate;
  animation-timing-function: ease-out;
}
nav.menu > div.container > div.default > svg.check-icon, nav.menu > div.container > div.default svg.children-icon {
  pointer-events: none;
  fill: currentColor;
  width: 12px;
  height: 12px;
}
nav.menu > div.container > div.default > svg.check-icon {
  visibility: hidden;
}
nav.menu > div.container > div.default > svg.children-icon {
  display: none;
}
nav.menu > div.container > div.default.checked > svg.check-icon {
  visibility: visible;
}
nav.menu > div.container > div.default.has-children > svg.children-icon {
  display: block;
}
nav.menu > div.container > div.default.selectable {
  opacity: 1;
  pointer-events: inherit;
}
nav.menu > div.container > div.default > span.label {
  pointer-events: none;
  flex: 1;
  padding: 0 20px 0 4px;
}
nav.menu > div.container > div.default > span.shortcut {
  pointer-events: none;
  margin: 0;
}
nav.menu > div.container > hr {
  width: 100%;
  height: 0;
  border: 0;
  border-top: 1px solid #e9e9e7;
  pointer-events: none;
}
nav.menu > div.scroll {
  display: none;
  justify-content: center;
  flex: 1 0 20px;
  line-height: 22px;
  margin: 4px 0;
  width: 100%;
  color: #666;
}
nav.menu > div.scroll.up {
  margin-top: -3px;
}
nav.menu > div.scroll.down {
  margin-bottom: -3px;
}
nav.menu > div.scroll.scrolling {
  color: #DDD;
}

div.device {
  margin: 4px;
  padding: 0;
  min-width: 120px;
  min-height: 56px;
  border-radius: 8px;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.4), 0 4px 4px 0 rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: row;
  background: linear-gradient(#cdccc1 0, #edece9 4px, #edece9 calc(100% - 8px), #d1d1c7 100%);
  position: absolute;
  overflow: hidden;
  will-change: transform;
}
div.device .slots {
  width: 20px;
  padding: 8px 0 0 0;
  display: grid;
  grid-auto-flow: row;
  row-gap: 8px;
  height: min-content;
}
div.device .slots > * {
  margin: 0 auto;
}
div.device .slots .slot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #cdccc1;
  position: relative;
  z-index: 99999;
}
div.device main {
  flex: 1 0 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
div.device main > header {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 22px;
}
div.device main > header > h1 {
  margin: auto 0 0 0;
  padding: 0;
  width: 100%;
  font-family: Ubuntu, sans-serif;
  font-size: 12px;
  text-align: center;
  white-space: nowrap;
  color: #706f5c;
}
div.device main > section {
  margin: 0 auto;
  display: flex;
  flex-direction: row;
}
div.device .row {
  max-width: 64px;
  display: flex;
  flex-direction: column;
  margin: 8px 0 24px 0;
}
div.device .control {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 64px;
}
div.device .control > h2 {
  padding: 0 1px;
  margin: 0;
  border-radius: 1px;
  color: #3c3c3c;
  font-size: 9px;
  font-weight: 400;
  width: min-content;
  white-space: nowrap;
  text-shadow: 0 1px 0 white;
  letter-spacing: 0.4px;
}
div.device.seq8 .settings {
  margin: 0;
  display: flex;
  flex-direction: column;
}
div.device.seq8 .pattern {
  padding: 0 0 0 16px;
  display: flex;
}
div.device.seq8 .step-index {
  font-size: 10px;
  text-anchor: middle;
  font-weight: 500;
  dominant-baseline: text-after-edge;
  fill: rgba(0, 0, 0, 0.9);
}

svg .dial-label {
  font-size: 8px;
  text-anchor: middle;
  font-weight: 400;
  dominant-baseline: text-after-edge;
  fill: rgba(0, 0, 0, 0.7);
}
svg .dial-label.picto {
  font-size: 12px;
}

symbol#button {
  fill: currentColor;
}

use[href="#button"] {
  --hue: 189;
  color: hsl(var(--hue), 8%, 50%);
}
use[href="#button"]:hover {
  color: hsl(var(--hue), 8%, 52%);
}
use[href="#button"]:active {
  color: hsl(var(--hue), 8%, 66%);
}

symbol#toggle {
  fill: currentColor;
}
symbol#toggle .active-state {
  visibility: var(--visibility);
}

use[href="#toggle"] {
  --hue: 189;
  --visibility: hidden;
  color: hsl(var(--hue), 8%, 50%);
}
use[href="#toggle"].active {
  --visibility: inherit;
}
use[href="#toggle"]:hover {
  color: hsl(var(--hue), 8%, 52%);
}
use[href="#toggle"]:active {
  color: hsl(var(--hue), 8%, 66%);
}

use[href="#led"] {
  --hue: 189;
  --amount: 10%;
}
use[href="#led"].active {
  --amount: 66%;
}

use[href="#dial"] {
  /* default blue */
  --hue: 189;
  --saturation: 60%;
  --angle: 0deg;
}
use[href="#dial"].red {
  --hue: 29;
}
use[href="#dial"].yellow {
  --hue: 49;
}
use[href="#dial"].green {
  --hue: 89;
}
use[href="#dial"].grey {
  --hue: 180;
  --saturation: 5%;
}

symbol#slot circle {
  transform: scale(var(--scale));
}

use[href="#slot"] {
  stroke: rgba(0, 0, 0, 0.2);
  stroke-width: 1;
  --hue: 0;
  --scale: 1.0;
}
use[href="#slot"].cv {
  --hue: 60;
}
use[href="#slot"].gate {
  --hue: 120;
}
use[href="#slot"].any {
  --hue: 180;
}
use[href="#slot"].audio {
  --hue: 240;
}
use[href="#slot"].bold {
  cursor: copy;
  --scale: 1.25;
}

select {
  margin: 20px 0 16px 0;
}

input[type=number] {
  outline: none;
  border: transparent;
  margin: 30px 0 12px 0;
  padding: 0;
  text-align: right;
  width: 100%;
}
input[type=number]:invalid {
  border: 1px red solid;
}

html, body {
  margin: 0;
  padding: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-family: Ubuntu, sans-serif;
  background-color: #ddddda;
  position: absolute;
  overflow: hidden;
}

* {
  user-select: none;
}

.hidden {
  display: none !important;
}

#preloader {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ddddda;
  position: absolute;
}
#preloader span {
  top: 50%;
  left: 50%;
  font-size: 11px;
  transform: translate(-50%, -50%);
  position: absolute;
  white-space: nowrap;
}

#autoplay-policy {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 100vh;
  background-color: #ddddda;
  position: absolute;
  cursor: pointer;
}

.devices {
  bottom: 0;
  left: 0;
  min-width: 100%;
  height: 48px;
  position: absolute;
  background-color: #d8d8d4;
  display: flex;
  align-items: center;
}
.devices > div {
  cursor: grab;
  padding: 8px;
  margin: 0 16px;
  font-size: 11px;
  white-space: nowrap;
  border-radius: 4px;
  background-color: #e7e7e4;
}

div.app-bar {
  margin: 0;
  padding: 0 24px;
  top: 0;
  width: calc(100% - 24px);
  height: 32px;
  position: absolute;
  background-color: #e7e7e4;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
}
div.app-bar nav {
  display: grid;
  grid-auto-flow: column;
  column-gap: 16px;
  width: min-content;
}
div.app-bar nav > button {
  border: none;
  outline: none;
  background: transparent;
  position: relative;
}
div.app-bar nav > button.selected:after, div.app-bar nav > button:hover:after {
  content: " ";
  left: 10%;
  right: 10%;
  bottom: 0;
  width: 80%;
  height: 1px;
  position: absolute;
  background-color: #777;
}
div.app-bar div.chrome-version {
  flex: 0 1 auto;
  font-size: 10px;
  padding: 0 16px;
  margin: 0 0 0 auto;
}

div.flying {
  margin: 0;
  padding: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  pointer-events: none;
}
div.flying > * {
  position: absolute;
}
div.flying > .wiring {
  padding: 8px;
  border-radius: 3px;
  display: flex;
  flex-direction: row;
  align-items: center;
  box-shadow: 0 4px 2px 0 rgba(0, 0, 0, 0.2);
  background-color: #f0f0ef;
  transform: translate(calc(-100% + 16px), -50%);
  pointer-events: all;
  fill: #666;
}
div.flying > .wiring > svg.all:hover {
  fill: orange;
}
div.flying > .wiring > .counterparts {
  padding: 0 8px;
  display: grid;
  grid-auto-flow: row;
  row-gap: 8px;
  height: min-content;
}
div.flying > .wiring > .counterparts:empty {
  padding: 0;
}
div.flying > .wiring > .counterparts > .connection {
  border-radius: 8px;
  background-color: rgba(0, 0, 0, 0.06);
  box-shadow: 0 0 1px 0 black inset;
}
div.flying > .wiring > .counterparts > .connection:hover {
  background-color: white;
}
div.flying > .wiring > .counterparts > .connection.selected {
  background-color: white;
  box-shadow: 0 0 1px 1px orange inset;
}
div.flying > .wiring > svg.new:hover {
  fill: orange;
}

svg.background-layer rect.preview-device {
  fill: #c5c5bf;
}

div.device-layer {
  margin: 0;
  padding: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
}

svg.connection-layer {
  margin: 0;
  padding: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  pointer-events: none;
  overflow: hidden;
}
svg.connection-layer g#wiring line {
  stroke: orange;
  stroke-width: 5;
  stroke-linecap: round;
}
svg.connection-layer path {
  fill: transparent;
  stroke: rgba(99, 99, 54, 0.6);
  stroke-width: 5;
  stroke-linecap: round;
}
svg.connection-layer path.bold {
  stroke: orange;
}

/*# sourceMappingURL=uikit.css.map */