/*@import "okay_colors";*/
:root {
  --background: #1A222F;
  --RGB-background: 26, 34, 47;
  --background-dark: #161c26;
  --RGB-background-dark: 22, 28, 38;
  --background-darkest: #0c1015;
  --RGB-background-darkest: 12, 16, 21;
  --background-fx: #18212d;
  --RGB-background-fx: 24, 33, 45;
  --background-circle: #161c26;
  --RGB-background-circle: 22, 28, 38;
  --background-menu: #0c1716;
  --RGB-background-menu: 12, 23, 22;
  --text-pale: #93A5A9;
  --RGB-text-pale: 147, 165, 169;
  --ui-primary: #05A59E;
  --RGB-ui-primary: 5, 165, 158;
  --ui-secondary: #FF9163;
  --RGB-ui-secondary: 255, 145, 99;
  --ui-dim: #938C27;
  --RGB-ui-dim: 147, 140, 39;
  --ui-pale: #eed572;
  --RGB-ui-pale: 238, 213, 114;
  --ui-offwhite: #FFFF99;
  --RGB-ui-offwhite: 255, 255, 153;
  --drums: #FFDA73;
  --RGB-drums: 255, 218, 115;
  --percussion: #FF9163;
  --RGB-percussion: 255, 145, 99;
  --bass: #7FC9BD;
  --RGB-bass: 127, 201, 189;
  --effects: #8F7FD8;
  --RGB-effects: 143, 127, 216;
  --vocals: #D32A5E;
  --RGB-vocals: 211, 42, 94;
  --_synth: #F796B0;
  --RGB-_synth: 247, 150, 176;
  --synth: #69ab5c;
  --RGB-synth: 105, 171, 92;
  --fx: #0ccccc;
  --RGB-fx: 12, 204, 204;
  --fx-dim: #5aa886;
  --RGB-fx-dim: 90, 168, 134;
  --filter-playbutton: invert(56%) sepia(18%) saturate(2693%) hue-rotate(110deg) brightness(89%) contrast(80%);
  --filter-to-primary: invert(56%) sepia(18%) saturate(2693%) hue-rotate(110deg) brightness(89%) contrast(80%);
  --filter-to-primary2: invert(56%) sepia(18%) saturate(2693%) hue-rotate(110deg) brightness(89%) contrast(80%);
  --filter-to-secondary: invert(97%) sepia(16%) saturate(5950%) hue-rotate(169deg) brightness(83%) contrast(82%);
}

html {
  box-sizing: border-box;
}

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

body {
  background-color: var(--background);
  -webkit-user-select: none;
  -webkit-appearance: none;
  font-family: sans-serif;
}
body.dropping {
  cursor: none;
}
body.dropping .playbutton {
  pointer-events: none;
}
body.dropping.onpattern {
  cursor: default;
}
body.dropping.onpattern .dragElement {
  opacity: 0;
}
body.dropping.onpattern.modifier {
  cursor: none;
}
body.dropping.onpattern.modifier .dragElement {
  opacity: 1;
}
body.dropping #playground .sounds .sample {
  cursor: none;
}
body.modifier svg .sample:hover {
  cursor: copy;
}

#container {
  position: relative;
  width: 760px;
  margin: auto;
}

#playground {
  position: absolute;
  left: 0;
  right: 0;
}
#playground .playbutton {
  position: absolute;
  width: 70px;
  height: 70px;
  left: 200px;
  top: 200px;
  margin: -35px 0 0 -35px;
  background-color: #2A2A2A;
  border-radius: 50%;
  border: 1px solid #89976100;
  z-index: 11;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
#playground .playbutton:before {
  content: "";
  position: absolute;
  width: 70px;
  height: 70px;
  background-image: url("../_img/play.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  opacity: 0.5;
  filter: var(--filter-playbutton);
  transition: opacity 0.2s ease-in-out;
}
#playground .playbutton:hover {
  cursor: pointer;
}
#playground .playbutton:hover:before {
  opacity: 1;
}
#playground .transport {
  position: absolute;
  width: 10px;
  height: 200px;
  left: 200px;
  top: 0;
  margin-left: -10px;
  background: linear-gradient(to left, rgba(var(--RGB-ui-offwhite), 0.6), rgba(var(--RGB-ui-offwhite), 0));
  border-right: 1px solid var(--ui-offwhite);
  transform-origin: bottom right;
  transform: rotate(45deg);
  opacity: 0;
  pointer-events: none;
}
#playground.playing .playbutton {
  border: 1px solid #899761;
  opacity: 0;
}
#playground.playing .playbutton:before {
  background-image: url("../_img/pause.svg");
}
#playground.playing .active .playbutton {
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
}
#playground.playing .active .transport {
  opacity: 0.5;
  animation: spin 7680ms linear infinite;
}

body.b115 #playground.playing .active .transport {
  animation: spin 8276ms linear infinite;
}

.dragElement {
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #33554F;
  border: 2px solid var(--ui-primary);
  opacity: 0;
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
  transform: scale(0.1);
  transform-origin: center center;
  margin: -30px 0 0 -30px;
  pointer-events: none;
  background-size: 70% 70%;
  background-repeat: no-repeat;
  background-position: center center;
  z-index: 1000000;
  color: var(--text-dark);
}
.dragElement.active {
  opacity: 1;
  transform: scale(1);
}
.dragElement.drums {
  background-image: url("../_img/instruments/drums.png");
  border-color: var(--drums);
}
.dragElement.bass {
  background-image: url("../_img/instruments/bass.png");
  border-color: var(--bass);
}
.dragElement.synth {
  background-image: url("../_img/instruments/synth.png");
  border-color: var(--synth);
}
.dragElement.percussion {
  background-image: url("../_img/instruments/percussion.png");
  border-color: var(--percussion);
}
.dragElement.vocals {
  border-color: var(--vocals);
}
.dragElement.effects {
  border-color: var(--effects);
}
.dragElement.remove {
  transform: scale(0.5);
  opacity: 0.7;
}
.dragElement label {
  display: block;
  font-family: sans-serif;
  font-size: 11px;
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  bottom: -16px;
  color: var(--text-dark);
  white-space: nowrap;
}
.dragElement canvas {
  position: absolute;
  left: -2;
  top: -2;
  width: 60px;
  height: 60px;
}

body.modifier .dragElement.sample.active:after,
body.modifier .dragElement.pattern.active:after {
  content: "+";
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  border: 1px solid white;
  background-color: var(--ui-primary);
  color: white;
  font-family: sans-serif;
  font-weight: 600;
  text-align: center;
  line-height: 18px;
  font-size: 18px;
}

.pwbox {
  width: 500px;
  max-width: 98%;
  margin: 50px auto;
  padding: 10px 40px;
  border: 2px solid var(--ui-primary);
  border-radius: 10px;
  color: var(--ui-primary);
  text-align: center;
}
.pwbox input {
  width: 90%;
  border: 1px solid var(--ui-primary);
  background-color: var(--background-darkest);
  color: var(--ui-secondary);
  margin: 20px 0;
  padding: 6px;
  font-size: 20px;
  text-align: center;
  line-height: 20px;
  text-transform: uppercase;
}
.pwbox input::placeholder {
  font-size: 14px;
  color: rgba(var(--RGB-ui-primary), 0.5);
}
.pwbox input.shake {
  border: 1px solid var(--ui-secondary);
  box-shadow: 0 0 2px var(--ui-secondary);
  animation: shake 0.8s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
.pwbox button {
  width: 200px;
  display: inline-block;
  background-color: var(--ui-primary);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 10px 40px;
  text-align: center;
  transition: background-color 0.2s ease-in-out, opacity 0.2s ease-in-out;
  margin-bottom: 20px;
  font-size: 20px;
}
.pwbox button:hover {
  background-color: var(--ui-secondary);
  cursor: pointer;
  -webkit-appearance: none;
}
.pwbox .spinner {
  margin: -60px 0 60px 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}
.pwbox a {
  color: var(--ui-primary);
}
.pwbox.waiting .spinner {
  opacity: 1;
}
.pwbox.waiting button {
  pointer-events: none;
  opacity: 0;
}

header {
  height: 100px;
  width: 500px;
  margin: auto;
  margin-top: 50px;
  position: relative;
}
header .bbicon {
  position: absolute;
  background-image: url("../_img/bb-latin.svg");
  height: 95px;
  width: 95px;
  background-size: contain;
  background-position: top right;
  background-repeat: no-repeat;
  left: 143px;
  top: 0;
  display: none;
}
header .buscemibeats {
  position: absolute;
  /*background-image: url(../_img/okay/okaybeats.png);*/
  height: 125px;
  width: 400px;
  background-size: contain;
  background-position: top right;
  background-repeat: no-repeat;
  left: 42px;
  top: -26px;
}

.form {
  font-family: sans-serif;
}
.form .field {
  position: relative;
}
.form .field label {
  font-size: 14px;
  color: var(--ui-primary);
  display: block;
}
.form .field label.active {
  cursor: pointer;
}
.form .field input[type=text],
.form .field textarea {
  width: 100%;
  display: block;
  border: 1px solid rgba(var(--RGB-ui-primary), 0.4);
  border-radius: 4px;
  background-color: rgba(0, 0, 0, 0.7);
  padding: 4px;
  font-size: 14px;
  margin: 2px 0;
  color: var(--text-pale);
}
.form .field input[type=text]:focus,
.form .field textarea:focus {
  outline: 1px solid var(--ui-primary);
}
.form .field input[type=text]::placeholder,
.form .field textarea::placeholder {
  font-size: 12px;
  color: rgba(var(--RGB-ui-primary), 0.4);
}
.form .field textarea {
  height: 80px;
}
.form .field .info {
  font-size: 12px;
  line-height: 13px;
  color: rgba(var(--RGB-ui-primary), 0.5);
  display: block;
  padding-top: 4px;
}
.form .field.checkbox {
  margin-top: 4px;
  padding: 4px 0 8px 0;
  border-top: 1px solid var(--background);
}

.spinner {
  position: relative;
}
.spinner:before {
  position: absolute;
  content: "";
  width: 35px;
  height: 35px;
  top: 2px;
  left: 50%;
  margin-left: -16px;
  border: 4px solid var(--ui-primary);
  border-left-color: transparent;
  border-radius: 18px;
  animation: spin 1s linear infinite;
}

.button.primary {
  border: 1px solid var(--ui-primary);
  background-color: var(--background-dark);
  width: 140px;
  height: 30px;
  border-radius: 40px;
  font-family: sans-serif;
  color: var(--ui-primary);
  font-size: 14px;
  line-height: 28px;
  text-align: center;
  opacity: 1;
  user-select: none;
  transition: all 0.3s ease-in-out;
}
.button.primary:hover {
  color: var(--ui-secondary);
  border: 1px solid var(--ui-secondary);
  cursor: pointer;
  opacity: 1;
}
.button.small {
  border: 1px solid var(--ui-primary);
  background-color: var(--background-dark);
  border-radius: 5px;
  padding: 2px 8px;
}
.button.small:hover {
  color: var(--ui-secondary);
  border: 1px solid var(--ui-secondary);
  cursor: pointer;
  opacity: 1;
}
.button.round {
  height: 36px;
  width: 36px;
  border: 1px solid var(--ui-primary);
  margin: 4px 4px 4px 16px;
  border-radius: 20px;
  position: relative;
}
.button.round:before {
  content: "+";
  position: absolute;
  color: var(--ui-primary);
  line-height: 34px;
  text-align: center;
  left: 0;
  right: 0;
  font-size: 24px;
}
.button.round:hover {
  cursor: pointer;
  border: 1px solid var(--ui-secondary);
}
.button.round:hover:before {
  color: var(--ui-secondary);
}

.mainMenu {
  position: absolute;
  right: 0;
  top: -100px;
  z-index: 20;
}
.mainMenu .button {
  border: 1px solid var(--ui-primary);
  position: absolute;
  background-color: white;
  width: 140px;
  height: 30px;
  border-radius: 40px;
  z-index: 10;
  right: 0;
  top: 0;
  font-family: sans-serif;
  color: var(--ui-primary);
  font-size: 14px;
  line-height: 28px;
  text-align: center;
  opacity: 1;
  user-select: none;
  padding-right: 0;
  transition: all 0.3s ease-in-out;
}
.mainMenu .button:after {
  content: "";
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
.mainMenu .button.connected {
  padding-right: 16px;
}
.mainMenu .button.connected:after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  background-image: url("../_img/hamburger.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  right: 7px;
  top: 4px;
  opacity: 1;
  filter: var(--filter-to-primary);
}
.mainMenu .button:hover {
  color: var(--ui-secondary);
  border: 1px solid var(--ui-secondary);
  cursor: pointer;
  opacity: 1;
}
.mainMenu .button:hover.connected:after {
  filter: var(--filter-to-secondary);
}
.mainMenu .slider {
  position: absolute;
  right: 0;
  top: 0;
  height: 650px;
  width: 0;
  overflow: hidden;
  transition: width 0s linear;
  transition-delay: 0.3s;
}
.mainMenu .slider .menu {
  position: absolute;
  width: 200px;
  top: 0;
  bottom: 0;
  padding-top: 50px;
  background-color: white;
  border: 1px solid var(--ui-primary);
  border-radius: 10px;
  right: -204px;
  transition: right 0.2s ease-in-out;
}
.mainMenu .slider .menu h3 {
  color: rgba(34, 36, 35, 0.8);
  padding: 16px 4px 4px 16px;
  border-bottom: 1px solid rgba(var(--RGB-ui-primary), 0.3);
  font-family: sans-serif;
  font-size: 14px;
  user-select: none;
  margin: 0;
  font-weight: normal;
  background-color: rgba(25, 171, 110, 0.1);
}
.mainMenu .slider .menu .menuitem {
  color: #19AB6E;
  padding: 10px 10px 10px 24px;
  border-bottom: 1px solid #19AB6E;
  font-family: sans-serif;
  font-size: 15px;
  transition: color 0.2s ease-in-out;
  position: relative;
  user-select: none;
}
.mainMenu .slider .menu .menuitem .togglebutton {
  pointer-events: none;
  margin: 7px 5px 0 0;
}
.mainMenu .slider .menu .menuitem .key {
  position: absolute;
  right: 12px;
  top: 13px;
  font-size: 11px;
  opacity: 0.5;
}
.mainMenu .slider .menu .menuitem:hover {
  background-color: #fff0db;
  color: #3B3B3B;
  cursor: pointer;
}
.mainMenu .slider .menu .menuitem:hover .togglebutton {
  border: 1px solid var(--ui-primary);
  background-color: rgba(var(--RGB-ui-primary), 0.2);
}
.mainMenu .slider .menu .menuitem:hover .togglebutton:before {
  background-color: var(--ui-primary);
}
.mainMenu .slider .menu .menuitem.radio:after {
  content: "";
  border: 1px solid #19AB6E;
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 8px;
  right: 17px;
}
.mainMenu .slider .menu .menuitem.active:after {
  background-color: #19AB6E;
}
.mainMenu .slider .menu .menuitem.disabled {
  opacity: 0.4;
  pointer-events: none;
  filter: grayscale(0.6);
}
.mainMenu.active .button {
  border-color: transparent;
  background-color: transparent;
  width: 270px;
}
.mainMenu.active .button:hover {
  color: var(--ui-primary);
}
.mainMenu.active .button:after {
  background-image: url("../_img/close.svg");
}
.mainMenu.active .slider {
  width: 200px;
  transition-delay: 0s;
}
.mainMenu.active .slider .menu {
  right: 0;
}

.sounds {
  position: absolute;
  border: 1px solid var(--ui-secondary);
  border-radius: 10px;
  left: 0;
  top: 0;
  height: 400px;
  width: 150px;
  background-color: rgba(0, 0, 0, 0.2);
  font-family: sans-serif;
  color: var(--text-pale);
  overflow: hidden;
  /*opacity: 0;*/
  transition: opacity 0.3s ease-in-out;
}
.sounds h2 {
  font-size: 14px;
  font-weight: 100;
  margin: 0;
  padding: 10px;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.5);
  border-bottom: 1px solid black;
  height: 37px;
  /*color: #1F2322;*/
}
.sounds .filter {
  display: flex;
  border-bottom: 1px solid var(--background-darkest);
}
.sounds .filter .category {
  height: 25px;
  width: 100%;
  background-size: 16px 16px;
  background-repeat: no-repeat;
  background-position: center center;
  border-bottom: 1px solid var(--ui-primary);
  /*filter: brightness(0.5);*/
}
.sounds .filter .category.inactive {
  opacity: 0.4;
}
.sounds .filter .category.drums {
  background-image: url("../_img/instruments/drums.png");
  border-bottom: 1px solid var(--drums);
}
.sounds .filter .category.drums:hover {
  background-color: rgba(var(--RGB-drums), 0.2);
}
.sounds .filter .category.percussion {
  background-image: url("../_img/instruments/percussion.png");
  border-bottom: 1px solid var(--percussion);
}
.sounds .filter .category.percussion:hover {
  background-color: rgba(var(--RGB-percussion), 0.2);
}
.sounds .filter .category.bass {
  background-image: url("../_img/instruments/bass.png");
  border-bottom: 1px solid var(--bass);
}
.sounds .filter .category.bass:hover {
  background-color: rgba(var(--RGB-bass), 0.2);
}
.sounds .filter .category.synth {
  background-image: url("../_img/instruments/synth.png");
  border-bottom: 1px solid var(--synth);
}
.sounds .filter .category.synth:hover {
  background-color: rgba(var(--RGB-synth), 0.2);
}
.sounds .filter .category.vocals {
  background-image: url("../_img/instruments/vocal.png");
  border-bottom: 1px solid var(--vocals);
}
.sounds .filter .category.vocals:hover {
  background-color: rgba(var(--RGB-vocals), 0.2);
}
.sounds .filter .category.effects {
  background-image: url("../_img/instruments/fx.png");
  border-bottom: 1px solid var(--effects);
}
.sounds .filter .category.effects:hover {
  background-color: rgba(var(--RGB-effects), 0.2);
}
.sounds .filter .category:hover {
  cursor: pointer;
}
.sounds .scroller {
  position: absolute;
  width: 100%;
  top: 64px;
  bottom: 53px;
  overflow-y: auto;
}
.sounds button {
  border: 1px solid var(--ui-secondary);
  color: var(--ui-secondary);
  line-height: 26px;
  background-color: transparent;
  border-radius: 6px;
  position: absolute;
  left: 5px;
  right: 5px;
  bottom: 6px;
  transition: color 0.2s ease-in-out, border 0.2s ease-in-out;
}
.sounds button:hover {
  color: var(--ui-primary);
  border: 1px solid var(--ui-primary);
  cursor: pointer;
}
.sounds .sample {
  border-bottom: 1px solid rgba(0, 0, 0, 0.44);
  padding: 6px 6px 6px 26px;
  font-size: 13px;
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
  /*color: #777777;*/
}
.sounds .sample.hidden {
  display: none;
}
.sounds .sample:before {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--ui-secondary);
  left: 8px;
  top: 7px;
}
.sounds .sample:hover {
  background-color: rgba(0, 0, 0, 0.2);
}
.sounds .sample.active {
  background-color: rgba(var(--RGB-ui-primary), 0.1);
}
.sounds .sample.active:hover {
  background-color: rgba(var(--RGB-ui-primary), 0.2);
}
.sounds .sample.drums:before {
  background-color: var(--drums);
}
.sounds .sample.percussion:before {
  background-color: var(--percussion);
}
.sounds .sample.bass:before {
  background-color: var(--bass);
}
.sounds .sample.synth:before {
  background-color: var(--synth);
}
.sounds .sample.effects:before {
  background-color: var(--effects);
}
.sounds .sample.vocals:before {
  background-color: var(--vocals);
}

.scroller::-webkit-scrollbar {
  width: 11px;
}
.scroller::-webkit-scrollbar-track {
  background-color: #081311;
  border-radius: 100px;
}
.scroller::-webkit-scrollbar-thumb {
  background-color: rgba(var(--RGB-ui-primary), 0.8);
  border-radius: 100px;
  border: 2px solid #081311;
}
.scroller::-webkit-scrollbar-thumb:hover {
  background-color: var(--ui-primary);
}

body.connected .sounds {
  opacity: 1;
}

.patternpanel {
  position: absolute;
  left: 222px;
  background-color: var(--background-circle);
  border-radius: 200px;
  background-image: url("../_img/circle_shadow.png");
  background-repeat: no-repeat;
  background-position: 43px -7px;
  z-index: 0;
}
.patternpanel .patterncircle {
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.5s ease-in-out;
}
.patternpanel .playbutton {
  opacity: 0;
}
.patternpanel.active {
  z-index: 1;
}
.patternpanel.active .playbutton {
  opacity: 1;
}
.patternpanel.active .patterncircle {
  opacity: 1;
  pointer-events: all;
  z-index: 1;
}

svg path {
  transform-origin: center center;
}
svg circle.transparent {
  fill-opacity: 0;
}
svg .sample {
  fill-opacity: 0.4;
  stroke-width: 0;
  stroke-opacity: 0;
}
svg .sample.hover, svg .sample:hover {
  fill-opacity: 1;
  cursor: pointer;
}
svg .sample.active {
  transition: all 0.1s ease-in-out;
  fill-opacity: 1;
  stroke-width: 3;
  stroke-opacity: 0.5;
  filter: saturate(2) blur(2px);
}
svg .sample.remove {
  transition: opacity 0.2s ease-in-out;
  opacity: 0;
}
svg .sample.moving {
  transition: opacity 0.2s ease-in-out;
  opacity: 0;
}
svg .percussion {
  fill: var(--percussion);
  stroke: var(--percussion);
}
svg .synth {
  fill: var(--synth);
  stroke: var(--synth);
}
svg .bass {
  fill: var(--bass);
  stroke: var(--bass);
}
svg .drums {
  fill: var(--drums);
  stroke: var(--drums);
}
svg .effects {
  fill: var(--effects);
  stroke: var(--effects);
}
svg .vocals {
  fill: var(--vocals);
  stroke: var(--vocals);
}
svg .ring {
  fill: none;
  stroke: var(--ui-pale);
  stroke-opacity: 0.15;
  pointer-events: none;
  transform-origin: center center;
}
svg .ring .transparent {
  fill: white;
  fill-opacity: 0;
  stroke: none;
}
svg .ring.hover, svg .ring:hover {
  stroke-opacity: 0.5;
}
svg.dropping path.sample {
  pointer-events: none;
}
svg.dropping .ring {
  transition: all 0.2s ease-in-out;
  pointer-events: all;
}

body.modifier svg .sample.moving {
  opacity: 1;
}

.song {
  position: absolute;
  right: 0;
  top: 0;
  width: 70px;
  /*opacity: 0;*/
  transition: opacity 0.3s ease-in-out, width 0.2s ease-in-out;
}
.song .panel {
  position: absolute;
  border: 1px solid var(--ui-primary);
  border-radius: 10px;
  height: 400px;
  width: 70px;
  background-color: var(--background-dark);
  font-family: sans-serif;
  color: var(--text-pale);
  /*overflow: hidden;*/
  z-index: 10;
}
.song .panel button {
  border: 1px solid var(--ui-primary);
  color: var(--ui-primary);
  line-height: 26px;
  background-color: transparent;
  border-radius: 6px;
  position: absolute;
  left: 5px;
  right: 5px;
  bottom: 5px;
  font-size: 13px;
  transition: opacity 0.2s ease-in-out;
}
.song .panel button:hover {
  cursor: pointer;
  border: 1px solid var(--ui-secondary);
  color: var(--ui-secondary);
}
.song .panel button:hover.random:after {
  background-image: url("../_img/dice2.svg");
  filter: var(--filter-to-secondary);
}
.song .panel button.random {
  bottom: 40px;
  height: 30px;
}
.song .panel button.random:after {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  right: 0;
  bottom: 5px;
  background-image: url("../_img/dice.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  filter: var(--filter-to-primary);
}
.song h2 {
  font-size: 14px;
  font-weight: 100;
  margin: 0;
  padding: 10px;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.5);
  border-bottom: 1px solid black;
  height: 37px;
  border-radius: 10px 10px 0 0;
}
.song .looptoggle {
  border-bottom: 1px solid black;
  height: 23px;
  margin-bottom: 10px;
  background-color: var(--background-dark);
  display: flex;
}
.song .looptoggle .psong,
.song .looptoggle .ppattern {
  height: 23px;
  width: 70%;
  opacity: 0.5;
  position: relative;
  background-color: var(--background-darkest);
}
.song .looptoggle .psong:after,
.song .looptoggle .ppattern:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-image: url("../_img/play_pattern.png");
  background-size: 14px 14px;
  background-repeat: no-repeat;
  background-position: center center;
  filter: var(--filter-to-primary);
}
.song .looptoggle .psong.active,
.song .looptoggle .ppattern.active {
  opacity: 1;
}
.song .looptoggle .psong:hover,
.song .looptoggle .ppattern:hover {
  cursor: pointer;
  opacity: 1;
}
.song .looptoggle .psong {
  width: 90%;
}
.song .looptoggle .psong:after {
  background-image: url("../_img/play_song.png");
  background-size: 28px 14px;
}
.song .scroller {
  position: absolute;
  left: 0;
  right: 0;
  top: 64px;
  bottom: 78px;
  overflow: auto;
}
.song .pattern {
  position: absolute;
  opacity: 1;
  pointer-events: all;
  height: 40px;
  left: 0;
  right: 0;
  transition: top 0.2s ease-in-out;
}
.song .pattern .disc {
  height: 36px;
  width: 36px;
  margin: 2px auto;
  border: 1px solid var(--ui-primary);
  border-radius: 20px;
  pointer-events: none;
  overflow: hidden;
}
.song .pattern .disc canvas {
  width: 36px;
  height: 36px;
  margin: -1px 0 0 -1px;
  position: absolute;
}
.song .pattern.active {
  background-color: rgba(var(--RGB-ui-primary), 0.4);
}
.song .pattern.active .disc {
  border: 1px solid var(--text-pale);
}
.song .pattern.active:hover {
  background-color: rgba(var(--RGB-ui-primary), 0.4);
  cursor: pointer;
}
.song .pattern:hover {
  background-color: rgba(var(--RGB-ui-primary), 0.2);
  cursor: pointer;
}
.song .pattern.dragSource {
  opacity: 0.2;
}
.song .sidePanel {
  position: absolute;
  z-index: 9;
  width: 40px;
  top: 10px;
  right: 10px;
  bottom: 10px;
  height: 380px;
  overflow: hidden;
  transition: width 0.2s ease-in-out;
}
.song .sidePanel .formpanel {
  position: absolute;
  width: 235px;
  right: 0;
  top: 0;
  bottom: 0;
  border-radius: 0 10px 10px 0;
  border: 1px solid var(--ui-primary);
  background-color: var(--background-darkest);
}
.song .sidePanel .formpanel .close {
  position: absolute;
  right: 6px;
  top: 6px;
  width: 20px;
  height: 20px;
  background-image: url("../_img/close.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 14px 14px;
  filter: var(--filter-to-primary);
  opacity: 0.8;
}
.song .sidePanel .formpanel .close:hover {
  opacity: 1;
  cursor: pointer;
}
.song .sidePanel .formpanel h3 {
  font-weight: 100;
  color: var(--text-pale);
  font-family: sans-serif;
  margin: 0;
  font-size: 14px;
  padding: 7px 4px 7px 15px;
  border-bottom: 1px solid rgba(var(--RGB-ui-primary), 0.5);
}
.song .sidePanel .formpanel .buttons {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  border-top: 1px solid rgba(var(--RGB-ui-primary), 0.5);
  padding: 7px 4px 7px 15px;
  text-align: right;
  pointer-events: none;
  opacity: 0.2;
  filter: grayscale(0.5);
}
.song .sidePanel .formpanel .buttons button {
  background-color: transparent;
  border: 1px solid var(--ui-primary);
  border-radius: 5px;
  padding: 4px 8px;
  color: var(--ui-primary);
  margin-right: 4px;
  display: inline-block;
}
.song .sidePanel .formpanel .buttons button:hover {
  border-color: var(--ui-pale);
  color: var(--ui-pale);
  cursor: pointer;
  opacity: 1;
}
.song .sidePanel .formpanel .buttons button.warning {
  filter: grayscale(1);
  opacity: 0.8;
}
.song .sidePanel .formpanel .buttons button.warning:hover {
  filter: grayscale(0);
  border-color: var(--ui-secondary);
  color: var(--ui-secondary);
}
.song .sidePanel .formpanel .form {
  padding: 10px 10px 0 20px;
  pointer-events: none;
  opacity: 0.2;
  filter: grayscale(0.5);
}
.song .sidePanel .formpanel .feedback,
.song .sidePanel .formpanel .notconnected {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: absolute;
  color: var(--text-pale);
  text-align: center;
  font-size: 14px;
  top: 32px;
  bottom: 0;
  left: 10px;
  right: 10px;
  padding: 0 20px;
  z-index: 1;
}
.song .sidePanel .formpanel .feedback .button,
.song .sidePanel .formpanel .notconnected .button {
  margin-top: 20px;
}
.song .sidePanel .formpanel .feedback {
  display: none;
  bottom: 40px;
}
.song .sidePanel .formpanel .feedback .spinner {
  margin-top: -20px;
  display: none;
}
.song .sidePanel .formpanel .feedback.waiting .spinner {
  display: block;
}
.song .sidePanel .formpanel .feedback .feedbacktext {
  margin-top: 40px;
}
.song .sidePanel .formpanel .feedback .feedbacktext:before {
  content: "";
  position: absolute;
  width: 60px;
  height: 60px;
  left: 50%;
  margin-left: -30px;
  margin-top: -60px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}
.song .sidePanel .formpanel .feedback.failure .feedbacktext {
  color: var(--ui-secondary);
}
.song .sidePanel .formpanel .feedback.failure .feedbacktext:before {
  background-image: url("../_img/error.svg");
  filter: var(--filter-to-secondary);
}
.song .sidePanel .formpanel .feedback.success .feedbacktext {
  color: var(--ui-primary);
}
.song .sidePanel .formpanel .feedback.success .feedbacktext:before {
  background-image: url("../_img/success.svg");
  filter: var(--filter-to-primary);
}
.song .sidePanel .formpanel.busy .feedback {
  display: flex;
}
.song .sidePanel .formpanel.busy .form,
.song .sidePanel .formpanel.busy .save {
  pointer-events: none;
  opacity: 0.2;
  filter: grayscale(0.5);
}
.song .sidePanel .formpanel .socials {
  left: 0;
  right: 0;
  position: absolute;
  color: white;
  z-index: 3;
  bottom: 30px;
  text-align: center;
  font-size: 16px;
  font-weight: 100;
  opacity: 0;
  transition: opacity 0.3s ease-in-out, bottom 0.3s ease-in-out;
}
.song .sidePanel .formpanel .socials h4 {
  margin: 0;
  padding: 0 0 10px 0;
  font-size: 15px;
  font-weight: 100;
  color: var(--ui-primary);
}
.song .sidePanel .formpanel .socials .social {
  display: inline-block;
  width: 32px;
  height: 32px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  background-image: url("../_img/socials/twitter.svg");
  margin: 6px;
  transition: transform 0.2s ease-in-out;
}
.song .sidePanel .formpanel .socials .social.facebook {
  background-image: url("../_img/socials/facebook.svg");
}
.song .sidePanel .formpanel .socials .social.whatsapp {
  background-image: url("../_img/socials/whatsapp.svg");
}
.song .sidePanel .formpanel .socials .social:hover {
  transform: scale(1.1);
  cursor: pointer;
}
.song .sidePanel .formpanel .socials.active {
  opacity: 1;
  bottom: 50px;
}
.song .sidePanel .songlist h3 {
  padding-top: 50%;
  text-align: center;
  border-bottom: none;
}
.song .sidePanel .songlist h3 .button {
  margin: 25px auto;
  width: 153px;
}
.song .sidePanel .songlist .songitem {
  color: var(--text-pale);
  border-bottom: 1px solid var(--ui-primary);
  position: relative;
  transition: all 0.2s ease-in-out;
}
.song .sidePanel .songlist .songitem .title {
  padding: 4px 4px 4px 32px;
  font-size: 14px;
}
.song .sidePanel .songlist .songitem .title i {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 4px solid var(--ui-primary);
  border-radius: 7px;
  left: 14px;
  top: 8px;
  margin-top: -3.5px;
}
.song .sidePanel .songlist .songitem .tag {
  position: absolute;
  right: 4px;
  font-size: 10px;
  top: 3px;
  color: var(--ui-primary);
  padding: 2px;
  border: 1px solid var(--ui-primary);
  border-radius: 4px;
  opacity: 0.8;
  transition: color 0.2s ease-in-out, border 0.2s ease-in-out;
}
.song .sidePanel .songlist .songitem:hover {
  cursor: pointer;
  color: var(--ui-secondary);
  border-bottom: 1px solid var(--ui-secondary);
  background-color: rgba(var(--RGB-ui-primary), 0.2);
}
.song .sidePanel .songlist .songitem:hover .tag {
  border: 1px solid var(--ui-secondary);
  color: var(--ui-secondary);
}
.song.open {
  width: 300px;
}
.song.open .toggle {
  opacity: 0;
  pointer-events: none;
}
.song.open .sidePanel {
  right: 0;
  width: 280px;
}

body.connected .song {
  opacity: 1;
}
body.connected .song .sidePanel .buttons,
body.connected .song .sidePanel .form {
  pointer-events: all;
  opacity: 1;
  filter: none;
}
body.connected .song .sidePanel .notconnected {
  display: none;
}

#vumeters {
  height: 120px;
  display: flex;
  justify-content: flex-start;
  margin-left: 160px;
  margin-bottom: 10px;
  transition: height 0.3s ease-in-out;
  position: relative;
  z-index: 5;
}
#vumeters .meter {
  display: flex;
  flex-direction: column;
  margin-right: 10px;
}
#vumeters .meter .tile {
  height: 10px;
  border: 1px solid rgba(var(--RGB-ui-primary), 1);
  margin-top: 4px;
  width: 100px;
  border-radius: 5px;
  transition: background-color 0.2s ease-in-out;
}
#vumeters .meter .tile:nth-child(1) {
  transition-delay: 0ms;
}
#vumeters .meter .tile:nth-child(2) {
  transition-delay: 100ms;
}
#vumeters .meter .tile:nth-child(3) {
  transition-delay: 200ms;
}
#vumeters .meter .tile:nth-child(4) {
  transition-delay: 300ms;
}
#vumeters .meter .tile:nth-child(5) {
  transition-delay: 400ms;
}
#vumeters .meter.active .tile {
  transition: background-color 0s ease-in-out;
  background-color: rgba(var(--RGB-ui-primary), 0.5);
}
#vumeters .meter.active .tile:nth-child(1) {
  transition-delay: 0ms;
}
#vumeters .meter.active.drums .tile {
  background-color: rgba(var(--RGB-drums), 1);
}
#vumeters .meter.active.percussion .tile {
  background-color: rgba(var(--RGB-percussion), 1);
}
#vumeters .meter.active.synth .tile {
  background-color: rgba(var(--RGB-synth), 1);
}
#vumeters .meter.active.bass .tile {
  background-color: rgba(var(--RGB-bass), 1);
}
#vumeters .meter.active.effects .tile {
  background-color: rgba(var(--RGB-effects), 1);
}
#vumeters .meter.active.vocals .tile {
  background-color: rgba(var(--RGB-vocals), 1);
}
#vumeters .meter.idle:nth-child(1) .tile {
  border: 1px solid rgba(var(--RGB-drums), 1);
}
#vumeters .meter.idle:nth-child(3) .tile {
  border: 1px solid rgba(var(--RGB-bass), 1);
}
#vumeters .meter.idle:nth-child(4) .tile {
  border: 1px solid rgba(var(--RGB-synth), 1);
}
#vumeters .meter.drums .tile {
  border: 1px solid rgba(var(--RGB-drums), 1);
}
#vumeters .meter.percussion .tile {
  border: 1px solid rgba(var(--RGB-percussion), 1);
}
#vumeters .meter.synth .tile {
  border: 1px solid rgba(var(--RGB-synth), 1);
}
#vumeters .meter.bass .tile {
  border: 1px solid rgba(var(--RGB-bass), 1);
}
#vumeters .meter.effects .tile {
  border: 1px solid rgba(var(--RGB-effects), 1);
}
#vumeters .meter.vocals .tile {
  border: 1px solid rgba(var(--RGB-vocals), 1);
}

body.advanced #vumeters {
  height: 150px;
}

.themeselect {
  position: absolute;
  left: 0;
  top: -50px;
  width: 600px;
  height: 50px;
  z-index: 10;
  overflow: hidden;
}
.themeselect .button {
  font-family: sans-serif;
  font-size: 11px;
  border: 1px solid var(--ui-secondary);
  display: inline-block;
  border-radius: 20px;
  padding: 4px 8px;
  position: absolute;
  right: 12px;
  top: 20px;
  opacity: 0.8;
  user-select: none;
  text-transform: capitalize;
  color: #3B3B3B;
}
.themeselect .button:hover {
  cursor: pointer;
  opacity: 1;
}
.themeselect .list {
  position: absolute;
  left: 160px;
  top: 52px;
  height: 100px;
  width: 610px;
  display: flex;
  background-color: var(--background);
  opacity: 0;
  transition: opacity 0.3s ease-in-out, top 0.5s ease-in-out;
}
.themeselect .list .tbutton {
  font-family: sans-serif;
  font-size: 13px;
  font-weight: 600;
  width: 120px;
  margin: 10px;
  text-align: center;
  opacity: 0.6;
  transition: opacity 0.2s ease-in-out;
  pointer-events: none;
  font-style: italic;
  white-space: nowrap;
}
.themeselect .list .tbutton:before {
  width: 100px;
  height: 170px;
  content: "";
  background-color: silver;
  display: block;
  margin: -30px auto -150px auto;
  transition: all 0.2s ease-in-out;
}
.themeselect .list .tbutton.active {
  pointer-events: all;
  opacity: 0.7;
}
.themeselect .list .tbutton.active:before {
  background-size: contain;
  background-position: bottom center;
  background-repeat: no-repeat;
}
.themeselect .list .tbutton.active.floral:before {
  background-image: url("../_img/okay/latin.png");
  background-color: #AEDBC1;
}
.themeselect .list .tbutton.active.latin:before {
  background-image: url("../_img/okay/latin.png");
  background-color: #AEDBC1;
}
.themeselect .list .tbutton.active.afro:before {
  background-image: url("../_img/okay/afro.png");
  background-color: #F9CF7B;
}
.themeselect .list .tbutton.active.bossa:before {
  background-image: url("../_img/okay/bossa.png");
  background-color: #C7B6D3;
}
.themeselect .list .tbutton.active.asian:before {
  background-image: url("../_img/okay/oriental.png");
  background-color: #DFDFDD;
}
.themeselect .list .tbutton.active.balkan:before {
  background-image: url("../_img/okay/balkan.png");
  background-color: #8CB2C6;
}
.themeselect .list .tbutton.disabled {
  filter: grayscale(0.8);
  opacity: 0.4;
  pointer-events: none;
}
.themeselect .list .tbutton:hover {
  opacity: 1;
  cursor: pointer;
}
.themeselect .list .tbutton:hover:before {
  margin-bottom: -155px;
  box-shadow: 0 0 40px #AEDBC1;
}
.themeselect .list .tbutton:hover.afro:before {
  box-shadow: 0 0 40px #F9CF7B;
}
.themeselect .list .tbutton:hover.bossa:before {
  box-shadow: 0 0 40px #C7B6D3;
}
.themeselect .list .tbutton:hover.asian:before {
  box-shadow: 0 0 40px #DFDFDD;
}
.themeselect .list .tbutton:hover.balkan:before {
  box-shadow: 0 0 40px #8CB2C6;
}

body.themeselecting .themeselect {
  width: 800px;
  height: 300px;
}
body.themeselecting .themeselect .button {
  right: 212px;
}
body.themeselecting .themeselect .list {
  opacity: 1;
  top: 80px;
}
body.themeselecting #playground {
  display: none;
}
body.themeselecting #vumeters {
  display: none;
}
body.themeselecting .buttonMenu {
  display: none;
}

.fxPanel {
  position: absolute;
  width: 444px;
  left: 0;
  top: 77px;
  font-family: sans-serif;
  font-size: 11px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  transition: height 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
.fxPanel .wrapper {
  display: flex;
}
.fxPanel .wrapper .trackfx {
  width: 100px;
  margin-right: 10px;
  justify-content: center;
  position: relative;
}
.fxPanel .wrapper .trackfx .fxselect {
  position: absolute;
  background-color: var(--background);
  border: 1px solid var(--fx-dim);
  border-radius: 4px 0 4px 4px;
  left: 0;
  top: 23px;
  height: 1px;
  width: 100%;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  transition: height 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
.fxPanel .wrapper .trackfx .fxselect .item {
  color: var(--fx-dim);
  font-size: 13px;
  line-height: 20px;
  padding-left: 8px;
  width: 64px;
  text-transform: capitalize;
}
.fxPanel .wrapper .trackfx .fxselect .item:hover {
  cursor: pointer;
  color: var(--fx);
}
.fxPanel .wrapper .trackfx .list {
  position: absolute;
  background-color: var(--background-fx);
  left: 0;
  top: 43px;
  border: 1px solid rgba(var(--RGB-fx-dim), 0.5);
  border-radius: 0 0 4px 4px;
  width: 100px;
  height: 1px;
  opacity: 0;
  transition: height 0.3s ease-in-out, margin-top 0.3s ease-in-out, opacity 0.3s ease-in-out;
  overflow: hidden;
  margin-top: -20px;
  padding-top: 4px;
}
.fxPanel .wrapper .trackfx .list .item {
  font-size: 13px;
  line-height: 20px;
  border-bottom: 1px solid rgba(var(--RGB-fx-dim), 0.2);
  padding-left: 8px;
  color: rgba(var(--RGB-fx-dim), 0.8);
  text-transform: capitalize;
}
.fxPanel .wrapper .trackfx .list .item:hover {
  cursor: pointer;
  background-color: rgba(var(--RGB-fx-dim), 0.1);
  color: var(--fx);
}
.fxPanel .wrapper .trackfx .list .item:last-of-type {
  border-bottom: none;
}
.fxPanel .wrapper .trackfx .list.active {
  margin-top: 0;
  opacity: 1;
  height: 238px;
}
.fxPanel .wrapper .trackfx.active .fx {
  color: var(--fx-dim);
  border: 1px solid var(--fx-dim);
  opacity: 1;
  background-color: var(--background);
  border-bottom: transparent;
  border-radius: 4px 4px 0 0;
  height: 22px;
  z-index: 10;
  margin-left: 18px;
}
.fxPanel .wrapper .trackfx.active .fx:hover {
  color: var(--fx);
  cursor: pointer;
  opacity: 1;
}
.fxPanel .wrapper .trackfx.active .fx:before {
  content: "X";
}
.fxPanel .wrapper .trackfx.active .fxselect {
  opacity: 1;
  pointer-events: all;
  height: 22px;
}
.fxPanel .wrapper .trackfx.activated .fxselect {
  overflow: visible;
  z-index: 1;
}
.fxPanel .mute,
.fxPanel .fx {
  width: 32px;
  height: 18px;
  border: 1px solid var(--ui-dim);
  border-radius: 4px;
  text-align: center;
  color: var(--ui-dim);
  margin: 2px 0 2px -33px;
  line-height: 17px;
  opacity: 0.7;
  position: absolute;
  left: 50%;
  user-select: none;
}
.fxPanel .mute:hover,
.fxPanel .fx:hover {
  color: var(--ui-secondary);
  border: 1px solid var(--ui-secondary);
  cursor: pointer;
  opacity: 1;
  background-color: rgba(var(--RGB-ui-secondary), 0.2);
}
.fxPanel .fx {
  border: 1px solid var(--fx);
  color: var(--fx);
  opacity: 0.5;
  margin-left: 5px;
  transition: margin-left 0.3s ease-in-out;
}
.fxPanel .fx:before {
  content: "FX";
}
.fxPanel .fx:hover {
  color: var(--fx);
  border-color: var(--fx);
  background-color: rgba(var(--RGB-fx-dim), 0.3);
}

.fxinfodot {
  position: absolute;
  width: 28px;
  height: 28px;
  border-radius: 14px;
  color: #F3F1DC;
  background-color: var(--background-darkest);
  border: 1px solid var(--ui-primary);
  text-align: center;
  line-height: 26px;
  font-size: 14px;
  left: 74px;
  top: 12px;
  opacity: 0;
  z-index: 20;
  transition: opacity 0.2s ease-in-out;
  pointer-events: none;
}
.fxinfodot.active {
  opacity: 1;
}
.fxinfodot.segment15 {
  left: 145px;
  top: -17px;
}
.fxinfodot.segment0 {
  left: 228px;
  top: -15px;
}
.fxinfodot.segment1 {
  left: 297px;
  top: 13px;
}
.fxinfodot.segment2 {
  left: 360px;
  top: 74px;
}
.fxinfodot.segment3 {
  left: 388px;
  top: 146px;
}
.fxinfodot.segment4 {
  left: 388px;
  top: 227px;
}
.fxinfodot.segment5 {
  left: 358px;
  top: 298px;
}
.fxinfodot.segment6 {
  left: 298px;
  top: 357px;
}
.fxinfodot.segment7 {
  left: 227px;
  top: 387px;
}
.fxinfodot.segment8 {
  left: 144px;
  top: 387px;
}
.fxinfodot.segment9 {
  left: 73px;
  top: 357px;
}
.fxinfodot.segment10 {
  left: 13px;
  top: 298px;
}
.fxinfodot.segment11 {
  left: -16px;
  top: 227px;
}
.fxinfodot.segment12 {
  left: -16px;
  top: 146px;
}
.fxinfodot.segment13 {
  left: 13px;
  top: 74px;
}

.fxui {
  position: absolute;
  left: -10px;
  top: -10px;
  transform-origin: top left;
  z-index: 9;
  display: none;
}
.fxui .buttons {
  transform: translateX(10px) translateY(10px) scale(2);
}
.fxui .btn {
  opacity: 0.6;
}
.fxui .btn .label {
  fill: var(--text-pale);
}
.fxui .btn .outline {
  fill: transparent;
  stroke-width: 0.5;
  stroke: var(--text-pale);
}
.fxui .btn:hover {
  cursor: pointer;
  opacity: 1;
}
.fxui .btn:hover .label {
  fill: #1DE3E3;
}
.fxui .btn:hover .outline {
  stroke: #1DE3E3;
  fill: #1DE3E322;
}
.fxui .btn.active {
  opacity: 1;
}
.fxui .btn.active .label {
  fill: var(--fx);
}
.fxui .btn.active .outline {
  stroke: var(--fx);
  fill: rgba(var(--RGB-fx), 0.1);
}
.fxui .segments .segment {
  fill: transparent;
  stroke: var(--fx-dim);
  stroke-width: 0.5;
  stroke-opacity: 0.5;
}
.fxui .segments .bar {
  fill: none;
  stroke: var(--fx);
  stroke-width: 5;
  stroke-opacity: 0.5;
}
.fxui .segments .bar.hidden {
  stroke-opacity: 0;
}
.fxui .segments.center .bar5 {
  stroke: #bdffaa;
}
.fxui .dotUI {
  visibility: hidden;
}
.fxui .dotUI path {
  fill: rgba(var(--RGB-fx), 0.2);
  stroke: var(--fx);
}
.fxui .dotUI circle.dot {
  stroke: var(--fx);
  fill: #081311;
}
.fxui .dotUI circle.dot.active, .fxui .dotUI circle.dot:hover {
  fill: var(--fx);
  cursor: grab;
}
.fxui.dots .segments {
  pointer-events: none;
}
.fxui.dots .dotUI {
  visibility: visible;
}
.fxui.range .segments {
  pointer-events: none;
}

.offsetrange {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
  display: none;
}
.offsetrange .mask {
  position: absolute;
  left: 200px;
  top: 0;
  width: 200px;
  height: 125px;
  overflow: hidden;
}
.offsetrange .mask svg {
  margin-left: -200px;
}
.offsetrange .mask svg .range {
  fill: #0CCCCC88;
}
.offsetrange .handle {
  position: absolute;
  width: 2px;
  background-color: var(--fx);
  height: 115px;
  top: 0;
  left: 200px;
  transform-origin: 0 200px;
}
.offsetrange .handle:after {
  content: "";
  position: absolute;
  width: 20px;
  height: 25px;
  background-color: var(--fx);
}
.offsetrange .handle:hover {
  background-color: #56f6f6;
  cursor: e-resize;
}
.offsetrange .handle:hover:after {
  background-color: #56f6f6;
}

body.advanced .fxPanel {
  pointer-events: all;
  height: 45px;
  opacity: 1;
}

body.mute0 #vumeters .trackfx:not(.active) .fxselect,
body.mute1 #vumeters .trackfx:not(.active) .fxselect,
body.mute2 #vumeters .trackfx:not(.active) .fxselect,
body.mute3 #vumeters .trackfx:not(.active) .fxselect {
  opacity: 0;
}

body.mute0 .patterncircle .track0,
body.mute0 #vumeters .track0 {
  filter: grayscale(0.7) brightness(0.8);
  opacity: 0.5;
  pointer-events: none;
}
body.mute0 #vumeters .fxpanel .track0 {
  pointer-events: all;
}

body.mute1 .patterncircle .track1,
body.mute1 #vumeters .track1 {
  filter: grayscale(0.7) brightness(0.8);
  opacity: 0.5;
  pointer-events: none;
}
body.mute1 #vumeters .fxpanel .track1 {
  pointer-events: all;
}

body.mute2 .patterncircle .track2,
body.mute2 #vumeters .track2 {
  filter: grayscale(0.7) brightness(0.8);
  opacity: 0.5;
  pointer-events: none;
}
body.mute2 #vumeters .fxpanel .track2 {
  pointer-events: all;
}

body.mute3 .patterncircle .track3,
body.mute3 #vumeters .track3 {
  filter: grayscale(0.7) brightness(0.8);
  opacity: 0.5;
  pointer-events: none;
}
body.mute3 #vumeters .fxpanel .track3 {
  pointer-events: all;
}

body.advanced.fx0 .fxui,
body.advanced.fx1 .fxui,
body.advanced.fx2 .fxui,
body.advanced.fx3 .fxui {
  display: block;
}
body.advanced.fx0 .offsetrange,
body.advanced.fx1 .offsetrange,
body.advanced.fx2 .offsetrange,
body.advanced.fx3 .offsetrange {
  display: block;
}
body.advanced.fx0 .offsetrange.hidden,
body.advanced.fx1 .offsetrange.hidden,
body.advanced.fx2 .offsetrange.hidden,
body.advanced.fx3 .offsetrange.hidden {
  display: none;
}

body.advanced.fx0 .patterncircle .track1,
body.advanced.fx0 .patterncircle .track2,
body.advanced.fx0 .patterncircle .track3 {
  opacity: 0.1;
  pointer-events: none;
}

body.advanced.fx1 .patterncircle .track0,
body.advanced.fx1 .patterncircle .track2,
body.advanced.fx1 .patterncircle .track3 {
  opacity: 0.1;
  pointer-events: none;
}

body.advanced.fx2 .patterncircle .track0,
body.advanced.fx2 .patterncircle .track1,
body.advanced.fx2 .patterncircle .track3 {
  opacity: 0.1;
  pointer-events: none;
}

body.advanced.fx3 .patterncircle .track0,
body.advanced.fx3 .patterncircle .track1,
body.advanced.fx3 .patterncircle .track2 {
  opacity: 0.1;
  pointer-events: none;
}

.togglebutton {
  width: 24px;
  border: 1px solid var(--ui-secondary);
  height: 12px;
  top: 3px;
  right: 4px;
  position: absolute;
  border-radius: 6px;
  background-color: rgba(var(--RGB-ui-secondary), 0.2);
}
.togglebutton:hover {
  cursor: pointer;
  border: 1px solid var(--ui-primary);
  background-color: rgba(var(--RGB-ui-primary), 0.2);
}
.togglebutton:hover:before {
  background-color: var(--ui-primary);
}
.togglebutton:before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background-color: var(--ui-secondary);
  position: absolute;
  left: 2px;
  top: 2px;
  transition: left 0.3s ease-in-out;
}
.togglebutton.active {
  border: 1px solid var(--ui-primary);
  background-color: rgba(var(--RGB-ui-primary), 0.2);
}
.togglebutton.active:before {
  background-color: var(--ui-primary);
  left: 14px;
}
.togglebutton.large {
  width: 30px;
  height: 16px;
  border-radius: 8px;
}
.togglebutton.large:before {
  width: 10px;
  height: 10px;
  border-radius: 5px;
}
.togglebutton.large.active:before {
  left: 16px;
}

.trashcan {
  position: absolute;
  width: 55px;
  height: 55px;
  right: 102px;
  top: 343px;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  background-color: var(--background-darkest);
  transition: opacity 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.trashcan.active {
  opacity: 0.5;
  pointer-events: all;
}
.trashcan:hover {
  cursor: pointer;
  box-shadow: 0 0 4px #f3760c;
  opacity: 1;
}
.trashcan:hover:before, .trashcan:hover:after {
  filter: var(--filter-to-secondary);
  opacity: 1;
}
.trashcan:hover:after {
  transform: rotate(-20deg) translateX(3px);
}
.trashcan:before, .trashcan:after {
  content: "";
  position: absolute;
  width: 23px;
  height: 24px;
  left: 16px;
  top: 20px;
  background-image: url("../_img/trashcan.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  filter: var(--filter-to-primary);
  pointer-events: none;
  transition: filter 0.1s ease-in-out, transform 0.3s ease-in-out;
}
.trashcan:after {
  top: 5px;
  background-image: url("../_img/trashlid.svg");
  transform-origin: bottom left;
}

.hint,
.hint2 {
  position: absolute;
  width: 162px;
  height: 100px;
  background-image: url("../_img/drag_hint.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left top;
  left: 154px;
  top: 11px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  filter: saturate(6) hue-rotate(87deg) brightness(0.5);
}
.hint.active,
.hint2.active {
  opacity: 0.7;
}

.hint2 {
  background-image: url("../_img/dice_hint.svg");
  left: 553px;
  top: 336px;
  width: 131px;
}

.hintbox {
  position: absolute;
  border-radius: 4px;
  z-index: 10;
  background-color: var(--background-dark);
  font-size: 11px;
  width: 100px;
  padding: 6px 4px;
  color: var(--text-pale);
  border: 1px solid rgba(var(--RGB-text-pale), 0.5);
  text-align: center;
  pointer-events: none;
  opacity: 0;
  left: 50%;
  margin-left: -50px;
  margin-top: -40px;
  transition: opacity 0.2s ease-in-out, margin-top 0.2s ease-in-out;
}
.hintbox:after {
  content: "";
  width: 16px;
  height: 16px;
  background-color: var(--background-dark);
  border: 1px solid rgba(var(--RGB-text-pale), 0.5);
  position: absolute;
  left: 50%;
  margin-left: -8px;
  transform: rotate(45deg);
  bottom: -8px;
  border-left: 1px solid transparent;
  border-top: 1px solid transparent;
}
.hintbox p {
  position: relative;
  z-index: 1;
  padding: 0;
  margin: 0;
}

.hashint {
  position: relative;
}
.hashint:hover .hintbox {
  opacity: 1;
  margin-top: -50px;
}
.hashint:hover .hintbox.b {
  margin-top: -64px;
}

body.advanced .hint.active {
  opacity: 0;
}
body.advanced .hintbox {
  display: none;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }
  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }
  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}
body.player .hint,
body.player .song,
body.player .sounds,
body.player .themeselect {
  display: none;
}
body.player .songtitle {
  display: block;
  color: var(--ui-primary);
  margin-top: -20px;
  padding: 0 0 30px 90px;
}
body.player .songtitle h1 {
  margin: 0 0 10px 0;
  padding: 0;
  text-align: center;
}
body.player .songtitle i, body.player .songtitle span {
  display: block;
  opacity: 0.7;
  text-align: center;
}
body.player .songtitle span {
  opacity: 0.5;
}

body.editor .hint,
body.editor .song,
body.editor .sounds,
body.editor .themeselect {
  display: block;
}
body.editor .songtitle {
  display: none;
}

@media (max-width: 800px) {
  body .mainMenu,
body .hint,
body .song,
body .sounds,
body.editor .mainMenu,
body.editor .hint,
body.editor .song,
body.editor .sounds,
body.player .mainMenu,
body.player .hint,
body.player .song,
body.player .sounds {
    display: none;
  }
  body #container,
body.editor #container,
body.player #container {
    width: 430px;
  }
  body .patternpanel,
body.editor .patternpanel,
body.player .patternpanel {
    left: 16px;
  }
  body #vumeters,
body.editor #vumeters,
body.player #vumeters {
    margin-left: 0;
  }
  body .themeselect,
body.editor .themeselect,
body.player .themeselect {
    display: none;
  }
  body header,
body.editor header,
body.player header {
    width: 430px;
  }
  body header .bbicon,
body.editor header .bbicon,
body.player header .bbicon {
    left: 0;
  }
  body header .buscemibeats,
body.editor header .buscemibeats,
body.player header .buscemibeats {
    left: 101px;
  }
  body .songtitle,
body.editor .songtitle,
body.player .songtitle {
    padding-left: 0;
  }
}

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