@media (min-width: 320px) and (max-width: 480px) {
	.ui-dialog {
		position: fixed !important;
		bottom: 5px !important;
		top: initial !important;
	}
}

#surround-overlay {
  position: absolute;
  right: 15px;
  top: 5px;
  width: 72px;
  height: auto;
  cursor: pointer;
  animation: logo_fadein 3s;

  z-index: 100;

  @keyframes logo_fadein {
	  from {
		  opacity: 0;
	  }
	  to {
		  opacity: 1 !important;
	  }
	}
}
.control-area .loading {
	display: flex;
	position: absolute;
	left: 0px;
	top: 0px;
	
	width: 100%;
	height: 100%;

	align-items: center;
	justify-content: center;

	background: rgba(0,0,0, 0.5);
}

.ui-dialog-titlebar {
  height: 35px;
  padding: 8px 10px;
}
.ui-dialog-titlebar-close {
  display: hidden !important;
  opacity: 0;
}

.control-area {
  width: 360px;
  height: 360px;

  background: white;
  border: 1px solid #999;

  z-index: 19200;

  display: none;
  opacity: 0.95;
}
.control-area .menu {
  display: flex;
  flex-direction: row;

  position: absolute;
  right: 12px;
  top: -5px;
}
.control-area .menu img {
  width: 45px;
  height: 45px;
  opacity: 0.5;
  cursor: pointer;
}
.control-area .menu img.active {
  opacity: 1 !important;
}

.control-area .back-menu {
  display: flex;
  flex-direction: row;

  position: absolute;
  left: 12px;
  top: 5px;
}
.control-area .back-menu img {
  width: 25px;
  height: 25px;
  opacity: 1;
  cursor: pointer;
}

.control-area .speaker {
  width: 40px;
  height: 40px;
  position: absolute;

  user-select: none;
  /*
  pointer-events: none;
  user-select: none;
  */
}

.control-area .channel-picker {
  position: absolute;
  left: 15px;
  top: 45px;

  border-radius: 5px;
}

/* SPEAKERS */
.control-area img {
  transition: all 0.5s ease;
}
.control-area .speaker-deco-l {
  position: absolute;
  left: calc(45px - 20px);
  top: calc(170px - 20px);
  width: 28px;
  height: 28px;

  transform: rotateZ(-90deg);
}
.control-area .speaker-deco-r {
  position: absolute;
  left: calc(325px - 20px);
  top: calc(170px - 20px);
  width: 28px;
  height: 28px;

  transform: rotateZ(90deg);
}
.control-area .speaker-l {
  position: absolute;
  left: calc(135px - 20px);
  top: calc(126px - 20px);
  transform: rotateZ(-30deg);

  &.far {
  	left: calc(78px - 20px);
	top: calc(99px - 20px);
  }
}
.control-area .speaker-r {
  position: absolute;
  left: calc(225px - 20px);
  top: calc(118px - 20px);

  transform: rotateZ(30deg);

  &.far {
  	left: calc(282px - 20px);
	top: calc(99px - 20px);
  }
}
.control-area .speaker-center {
  position: absolute;
  left: calc(180px - 20px);
  top: calc(90px - 20px);

  &.far {
  	left: calc(180px - 20px);
	top: calc(63px - 20px);
  }
}
.control-area .speaker-sl {
  position: absolute;
  left: calc(90px - 20px);
  top: calc(207px - 20px);

  transform: rotateZ(-120deg);

  &.far {
  	left: calc(63px - 20px);
	top: calc(234px - 20px);
  }
}
.control-area .speaker-sr {
  position: absolute;
  left: calc(270px - 20px);
  top: calc(207px - 20px);

  transform: rotateZ(120deg);

  &.far {
  	left: calc(300px - 20px);
	top: calc(234px - 20px);
  }
}
.control-area .speaker-rear {
  position: absolute;
  left: calc(180px - 20px);
  top: calc(280px - 20px);

  &.far {
  	left: calc(180px - 20px);
	top: calc(300px - 20px);
  }
}

.handle {
  position: absolute;
  width: 60px;
  height: 60px;
  left: calc(180px - 30px);
  top: calc(180px - 30px);

  position: absolute;
  cursor: move;
  transition: transform 0.5s;
}
.handle img {
  width: 60px;
  pointer-events: none;
  user-select: none;
}
.handle:hover {
  opacity: 1 !important;
  transform: scale(1.1);
}

.guide {
  width: 800px;
  height: 800px;
  border: 1px solid  black;
  position: fixed;
  left: 0px;
  top: 0px;
  pointer-events: none;;
}

.move-text {
  position: absolute;
  bottom: 10px;
  width: 100%;
  text-align: center;
  font-size: 20px;
}
.connect-text {
  position: absolute;
  bottom: 20px;
  width: 100%;
  text-align: center;
  font-size: 16px;

  zoom: 0;
}

.deco-left {
  width: 40px;
  position: absolute;
  bottom: 10px;
  left: 10px;
}
.deco-right {
  width: 40px;
  position: absolute;
  bottom: 10px;
  right: 10px;
}
.deco-plug {
  width: 80px;
  position: absolute;
  bottom: 20px;
  left: 60px;
}

.reverb-picker {
	position: absolute;
	left: 15px;
	top: 15px;
	border-radius: 5px;
}

.reverb {
	padding: 20px 20px;
}

.eq {
	padding: 20px 20px;
}

.eq #sliders > div {
	margin-right: 39px;
}
.eq #khz > div {
	margin-right: 21px;
}

.presets {
	width: 100%;
	height: 70px;

	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr;
}
.presets div {
	display: flex;
	height: 100%;
	font-size: 12px;
	outline: black solid 1px !important;
    justify-content: center;
    align-items: center;
	cursor: pointer;
}
.presets div.active {
	color: white;
	background: rgb(3, 169, 244);
}

input[type=range][orient=vertical]
{
    writing-mode: bt-lr; /* IE */
    -webkit-appearance: slider-vertical; /* WebKit */
    width: 8px;
    height: 165px;
    padding: 0 5px;
}
.slider.slider-vertical {
	height: 165px !important;
}
.slider-handle {
/*	border-radius: 3px !important; */
/*	height: 10px !important; */
}
.slider-selection, .slider-track-high {
	background: #dcdcdc !important;
}

.reverb .graph {
	width: 200px;
	height: 200px;

	border: 1px solid #999;
}
.reverb .graph img {
	width: 100%;
	height: 100%;
}
.reverb #lr-gain {
	width: 150px;
	height: 150px;

	border: 1px solid #999;

	position: relative;
}
.reverb #lr-gain .slider-vertical:nth-child(1) {
    position: absolute;
    left: 20px;
    top: 10px;
	height: 100px !important;
}
.reverb #lr-gain .slider-vertical:nth-child(3) {
    position: absolute;
    left: 60px;
    top: 10px;
	height: 100px !important;
}
.reverb .lr-label {
	position: absolute;
    bottom: 5px;
    left: 26px;
}

.bottom-menu {
	display: flex;
	flex-direction: row;

	position: absolute;
	left: 0px;
	bottom: 0px;
	width: 100%;
}
.bottom-menu .bar {
	width: 2px;
	height: 100%;

	background: white;
}
.bottom-menu .button {
	display: flex;
    align-items: center;
    justify-content: center;

	flex: 1;
	height: 40px;
	font-size: 15px;

	cursor: pointer;
	color: white;
	background: rgb(3, 169, 244);
}
.bottom-menu .button img {
	width: 16px;
	height: 16px;

	margin-right: 4px;
}