/* Mixer */
.mixer-background {
  margin: auto;
  position: relative;
  width: 633px;
  height: 500px;
  background-repeat: no-repeat;
  image-rendering: smooth;
  border-radius: 5px;
}

.enable-disable {
  margin: 0 !important;
  transition: none;
  position: absolute;
  top: 16px;
  width:79px !important;
  height:63px !important;
  cursor: pointer;
  background: transparent !important;
  image-rendering: smooth;
}

.pan-slider {
  margin: 0 !important;
  transition: none;
  position: absolute;
  top: 87px;
  cursor: pointer;
  background-color: transparent !important;
}

.mute {
  margin: 0 !important;
  transition: none;
  position:absolute;
  top: 157px;
  width:22px;
  height:25px;
  cursor: pointer;
  background: transparent !important;
  image-rendering: smooth;
}

.solo {
  margin: 0 !important;
  transition: none;
  position:absolute;
  top: 157px;
  width: 22px;
  height: 25px;
  cursor: pointer;
  background: transparent !important;
  image-rendering: smooth;
}

.volume-slider {
  margin: 0 !important;
  transition: none;
  position:absolute;
  top: 193px;
  width: 16px !important;
  height: 150px !important;
  padding: 0 !important;
  cursor: pointer;
  image-rendering: smooth;
}

.width-slider {
  margin: 0 !important;
  transition: none;
  position:absolute;
  top: 389px;
  cursor: pointer;
  background-color: transparent !important;
}

.swap {
  margin: 0 !important;
  transition: none;
  position:absolute;
  top: 372px;
  width:40px;
  height:22px;
  background: transparent !important;
  image-rendering: smooth;
}

.volume-mode {
  margin: 0 !important;
  transition: none;
  position:absolute;
  background: transparent !important;
  top: 444px;
  left: 301px;
  height: 20px !important;
  width: 31px !important;
  image-rendering: smooth;
}

.position-slider {
  margin: 0 !important;
  padding: 0 !important;
  transition: none;
  position:absolute;
  width: 565px !important;
  height: 16px !important;
  top: 465px;
  left: 33px;
  cursor: pointer;
  image-rendering: smooth;
}

/* Player */
.player-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 633px;
  margin: 40px auto 10px;
  padding: 15px 10px;
  background-color: rgba(255, 255, 255, 0.07);
  border-radius: 5px;
}

.player-container__big {
  width: 733px;
}

.player:first-child {
  margin: 0;
}

.transport-slider {
  width: 80% !important;
  margin: 0;
}

.player-container__big .transport-slider {
  width: 55% !important;
}

.play-button {
  height: 75px;
  font-size: 40px !important;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  opacity: 80%;
}

.play-button:hover {
  cursor: pointer;
  opacity: 100%;

  -webkit-transition: all .1s ease;
  -moz-transition: all .1s ease;
  -ms-transition: all .1s ease;
  -o-transition: all .1s ease;
  transition: all .1s ease;
}

.player-dropdown {
  position: relative;
  display: inline-block;
  font-weight: bolder;
}

.player-dropdown__header {
  height: 2.78571429em;
  width: 170px;
  background-color: #808080;
  text-align: center;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 5px 15px;
  border-radius: 5px;
  opacity: 0.9;
}

.player-dropdown__header:hover {
  opacity: 1;
  cursor: pointer;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #949494;
  min-width: 170px;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
  padding: 5px 20px;
  z-index: 100;
  width: 150px;
  border-radius: 5px;
}

.player-dropdown:hover .dropdown-content {
  display: block;

  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}

.player-selector {
  text-align: left;
  color: #c6c6c6;
  margin: 5px 0;
}

.player-selector:hover {
  cursor: pointer;
  color: white;
}

.player-selector.selected-player {
  color: white;
}

.unselectable {
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
  user-select: none;          /* Likely future */
}

/* Newmello UI */
.mixer-background.newmello-background {
  height: 321px;
}

.newmello__noise-knob {
  margin: 0 !important;
  padding: 0 !important;
  transition: none;
  position: absolute;
  cursor: pointer;
  top: 160px;
  left: 30px;
}

.newmello__tape-knob {
  margin: 0 !important;
  padding: 0 !important;
  transition: none;
  position: absolute;
  cursor: pointer;
  top: 152px;
  right: 15px;
}

.newmello__noise-knob:hover, .newmello__tape-knob:hover{
  cursor: pointer;
}

.newmello__arrow {
  position: absolute;
  width: 20px;
  height: 20px;
  top: 98px;
  opacity: 0.7;
  z-index: 100;
}

.newmello__arrow:hover {
  opacity: 1;
  cursor: pointer;

  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -ms-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
}

.newmello__arrow-left {
  left: 210px;
}

.newmello__arrow-right {
  right: 210px;
}

.newmello__text {
  position: absolute;
  font-family: 'proxima_novaregular', arial, serif;
  color: rgb(207, 115, 255);
  left: 235px;
  right: 235px;
  text-align: center;
  opacity: 0.7;
}

.newmello__text-name {
  font-size: 0.95em;
  top: 95px;
}

.newmello__text-number {
  font-size: 0.7em;
  top: 125px;
}

@font-face {
  font-family: 'proxima_novaregular';
  src: url('fonts/proxima-nova_regulart.woff2') format('woff2'),
  url('fonts/proxima-nova_regulart.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

/* Boomwhackers */
.players-slider {
  top: 439px;
  left: 307px;
}

/* Retro Keys */
.retrokeys__noise-knob {
  margin: 0 !important;
  padding: 0 !important;
  transition: none;
  position: absolute;
  cursor: pointer;
  top: 90px;
  left: 40px;
}

.retrokeys__button-background {
  position: absolute;
  width: 350px;
  height: 239px;
  top: 32px;
  left: 253px;
  background: url('../img/instruments-player/retrokeys-player/patch-button-background.png');
}

.retrokeys__button {
  position: absolute;
  top: 41px;
  width: 114px;
  height: 207px;
}

.retrokeys__button:hover {
  cursor: pointer;
}