body {
  margin: 0;
  overflow: hidden;
  border: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: auto | element | none;
  -moz-user-select: none | text | all | element
}

#digitakt-panel {
  position: relative;
}

@font-face {
  font-family: SuisseIntl-Medium, Suisse Intl;
  src: url('style/SuisseINtl-Medium.otf');
}
@font-face {
  font-family: NHaasGroteskDSPro-75Bd, Neue Haas Grotesk Display Pro;
  src: url(style/Linotype - NHaasGroteskDSPro-75Bd.otf);
}

@keyframes flash {
  0% {fill: #ee8a00;}
  25% {fill: #ee8a00;}
  26% {fill: #4f4f4f;}
  100% {fill: #4f4f4f;}
}

@keyframes neonflash {
  0% {opacity: 1 !important;}
  25% {opacity: 1 !important;}
  26% {opacity: 0 !important;}
  100% {opacity: 0 !important;}
}

/*@keyframes flash-trig {
  0% {fill: #FF755A;}
  25% {fill: #FF755A;}
  26% {fill: #4f4f4f;}
  29% {fill: #4f4f4f;}
  30% {fill: #FF755A;}
  100% {fill: #FF755A;}
}

@keyframes flash-outline {
  0% {stroke: #A05050;}
  25% {stroke: #A05050;}
  26% {stroke: #4f4f4f;}
  29% {stroke: #4f4f4f;}
  30% {stroke: #A05050;}
  100% {stroke: #A05050;}
}*/

/*#spinner {
    transform-origin: center;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}*/

canvas {
  width: 100%;
  /*opacity: 0.1;*/
}

#Overlay {
  display: none;
}

.func-btn-rec {
  fill: #c1214b;
}

.unlit {
  fill: #4f4f4f;
}

.btn-light {
  stroke: #ffffff;
}
.trig-light path {
  fill: #FF755A;
}
.trig-light line {
  stroke: #FF755A;
 }
/*.trig-light-outline {
  stroke: #A05050;
}*/
.transport-light {
  fill: #A9FF57;
}

.flashing path, .flashing line {
  animation-name: flash;
  animation-duration: 0.8s;
  animation-direction: normal;
  animation-timing-function: steps(4, end);
  animation-delay: 0s;
  animation-iteration-count: infinite;
}

.neon-flashing {
  animation-name: neonflash;
  animation-duration: 0.8s;
  animation-direction: normal;
  animation-timing-function: steps(4, end);
  animation-delay: 0s;
  animation-iteration-count: infinite;
}

.lit path {
  fill: #ee8a00;
}

.lit line {
  stroke: #ee8a00;
}

.neon-glow {
  opacity: 1 !important;
}

*[id^='neon-'] {
  opacity: 0.2;
}

*[id^='trig-'] {
  cursor: pointer;
}

*[id^='knob-'] {
  cursor: pointer;
}

*[id^='func-btn-'] {
  cursor: pointer;
}

*[id^='transport-btn-'] {
  cursor: pointer;
}

*[id^='arrow-'] {
  cursor: pointer;
}

#overlay-go {
  cursor: pointer;
}

#i-btn {
  cursor: pointer;
}


/*.flashing-trig path {
  animation-name: flash-trig;
  animation-duration: 0.8s;
  animation-direction: normal;
  animation-timing-function: steps(6, end);
  animation-delay: 0s;
  animation-iteration-count: infinite;
}

.flashing-outline {
  animation-name: flash-outline;
  animation-duration: 0.8s;
  animation-direction: normal;
  animation-timing-function: steps(6, end);
  animation-delay: 0s;
  animation-iteration-count: infinite;
}*/