/* line 45, ../../styles/090.scss */
html, body {
  height: 100%;
}

/* line 49, ../../styles/090.scss */
html {
  box-sizing: border-box;
}

/* line 53, ../../styles/090.scss */
*, *:before, *:after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

/* line 59, ../../styles/090.scss */
body {
  min-height: 400px;
  background: #e2deff;
  font-family: Helvetica, Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 10px;
}
/* line 68, ../../styles/090.scss */
body:before {
  content: '';
  width: 100%;
  height: 100%;
  position: fixed;
  background: linear-gradient(#e2deff, #a9a8b0 90%);
  z-index: -1;
  left: 0;
  top: 0;
}
/* line 79, ../../styles/090.scss */
body:after {
  content: '';
  background: radial-gradient(#ffffff, rgba(255, 255, 255, 0) 70%);
  width: 50%;
  height: 100%;
  position: fixed;
  left: -20%;
  top: -40%;
  z-index: -1;
  border-radius: 50%;
}

/* line 92, ../../styles/090.scss */
.equalizer {
  background: linear-gradient(#444353, #303241);
  border-radius: 10px;
  margin: 40px auto 80px auto;
  box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.5), 0px -2px 40px rgba(0, 0, 0, 0.3);
  position: relative;
  max-width: 690px;
  min-width: 300px;
  width: 100%;
}
/* line 103, ../../styles/090.scss */
.equalizer:after {
  content: '';
  clear: both;
  display: block;
}
/* line 110, ../../styles/090.scss */
.equalizer aside {
  color: #fff;
  position: absolute;
  display: none;
  width: 23.2%;
  height: 100%;
  left: 0;
  background: linear-gradient(#373641, #26262e);
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  padding: 50px 0 35px 0;
  text-align: center;
}
@media only screen and (min-width: 45.063em) {
  /* line 110, ../../styles/090.scss */
  .equalizer aside {
    display: block;
  }
}
/* line 126, ../../styles/090.scss */
.equalizer aside h1 {
  font-weight: normal;
  font-size: 12px;
  text-transform: uppercase;
  text-align: center;
}
/* line 133, ../../styles/090.scss */
.equalizer aside .range-slider {
  display: inline-block;
  position: relative;
  height: 300px;
  margin: 54px 0 0 -35px;
  width: 120px;
}
/* line 141, ../../styles/090.scss */
.equalizer aside .range-slider label {
  position: absolute;
  right: 0;
  display: block;
  width: 100%;
  font-size: 12px;
  text-align: right;
  color: #fff;
  opacity: .1;
  pointer-events: none;
}
/* line 153, ../../styles/090.scss */
.equalizer aside .range-slider label.max {
  top: 0;
}
/* line 157, ../../styles/090.scss */
.equalizer aside .range-slider label.average {
  top: 50%;
  transform: translateY(-100%);
  padding-right: 10px;
  transition: opacity .2s ease-in-out;
}
/* line 164, ../../styles/090.scss */
.equalizer aside .range-slider label.active {
  font-weight: 400;
  opacity: 1;
}
/* line 169, ../../styles/090.scss */
.equalizer aside .range-slider label.min {
  bottom: 0;
}
/* line 174, ../../styles/090.scss */
.equalizer aside .range-slider:after {
  content: '';
  display: block;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  height: 100%;
  width: 4px;
  position: absolute;
  background: linear-gradient(#3d3d47, #33333b);
  pointer-events: none;
}
/* line 187, ../../styles/090.scss */
.equalizer aside .range-slider-thumb {
  width: 22px;
  height: 8px;
  border-radius: 3px;
  background: #fff;
  position: absolute;
  left: 50%;
  bottom: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 2px #373641;
  cursor: pointer;
  pointer-events: none;
  z-index: 2;
}
@media only screen and (min-width: 45.063em) {
  /* line 205, ../../styles/090.scss */
  .equalizer main {
    float: right;
    width: 76.8%;
  }
}

/* line 214, ../../styles/090.scss */
input[type=range][orient=vertical] {
  position: relative;
  outline: none;
  margin: 0;
  height: 100%;
  width: 100%;
  display: inline-block;
  position: relative;
  writing-mode: bt-lr;
  -webkit-appearance: slider-vertical;
}
/* line 224, ../../styles/090.scss */
input[type=range][orient=vertical]::-webkit-slider-runnable-track, input[type=range][orient=vertical]::-webkit-slider-thumb {
  -webkit-appearance: none;
}
/* line 228, ../../styles/090.scss */
input[type=range][orient=vertical]::-webkit-slider-runnable-track {
  border: none;
  background: #343440;
  width: 2px;
  border-color: #343440;
  border-radius: 2px;
  box-shadow: 0 0 0 2px #343440;
}
/* line 231, ../../styles/090.scss */
input[type=range][orient=vertical]::-moz-range-track {
  border: none;
  background: #343440;
  width: 2px;
  border-color: #343440;
  border-radius: 2px;
  box-shadow: 0 0 0 2px #343440;
}
/* line 234, ../../styles/090.scss */
input[type=range][orient=vertical]::-ms-track {
  border: none;
  background: #343440;
  width: 2px;
  border-color: #343440;
  border-radius: 2px;
  box-shadow: 0 0 0 2px #343440;
  color: transparent;
  height: 100%;
}
/* line 239, ../../styles/090.scss */
input[type=range][orient=vertical]::-moz-focus-outer {
  border: 0;
}
/* line 242, ../../styles/090.scss */
input[type=range][orient=vertical]::-ms-fill-lower, input[type=range][orient=vertical]::-ms-fill-upper, input[type=range][orient=vertical]::-ms-tooltip {
  display: none;
}
/* line 247, ../../styles/090.scss */
input[type=range][orient=vertical]::-webkit-slider-thumb {
  position: relative;
  width: 100%;
  height: 32px;
  opacity: 0;
  cursor: n-resize;
}
/* line 250, ../../styles/090.scss */
input[type=range][orient=vertical]::-moz-range-thumb {
  position: relative;
  width: 100%;
  height: 32px;
  opacity: 0;
  cursor: n-resize;
}
/* line 253, ../../styles/090.scss */
input[type=range][orient=vertical]::-ms-thumb {
  position: relative;
  width: 100%;
  height: 32px;
  opacity: 0;
  cursor: n-resize;
}

/* line 258, ../../styles/090.scss */
.settings {
  text-align: center;
  color: #8e8e9b;
  font-size: 12px;
  padding: 40px 10px 0 10px;
}
/* line 264, ../../styles/090.scss */
.settings select {
  -webkit-appearance: none;
  -moz-appearance: none;
  border-radius: 8px;
  border: 1px solid currentColor;
  max-width: 200px;
  padding: 4px 20px 4px 10px;
  color: inherit;
  background: transparent;
  border-color: inherit;
  height: 30px;
  margin-right: 10px;
  outline: none;
  min-width: 35%;
  background-repeat: no-repeat;
  background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20448%22%20enable-background%3D%22new%200%200%20256%20448%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E.arrow%7Bfill%3A%238e8e9b%3B%7D%3C%2Fstyle%3E%3Cpath%20class%3D%22arrow%22%20d%3D%22M255.9%20168c0-4.2-1.6-7.9-4.8-11.2-3.2-3.2-6.9-4.8-11.2-4.8H16c-4.2%200-7.9%201.6-11.2%204.8S0%20163.8%200%20168c0%204.4%201.6%208.2%204.8%2011.4l112%20112c3.1%203.1%206.8%204.6%2011.2%204.6%204.4%200%208.2-1.5%2011.4-4.6l112-112c3-3.2%204.5-7%204.5-11.4z%22%2F%3E%3C%2Fsvg%3E%0A);
  background-position: right 10px center;
  background-size: 8px;
}
@-moz-document url-prefix() {
  /* line 286, ../../styles/090.scss */
  .settings select {
    color: transparent;
    text-shadow: 0 0 0 #ffffff;
  }
}
/* line 292, ../../styles/090.scss */
.settings select::-ms-expand {
  display: none;
}
/* line 296, ../../styles/090.scss */
.settings button {
  height: 30px;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  border: 1px solid currentColor;
  border-color: inherit;
  padding: 4px 10px;
  cursor: pointer;
  outline: none;
  min-width: 15%;
}

/* line 310, ../../styles/090.scss */
.interface {
  margin: 50px 20px 58px 20px;
  position: relative;
}
/* line 313, ../../styles/090.scss */
.interface:after {
  content: '';
  clear: both;
  display: block;
}
/* line 319, ../../styles/090.scss */
.interface svg {
  z-index: 1;
  overflow: visible;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke-width: 1;
}
/* line 330, ../../styles/090.scss */
.interface svg .line {
  stroke: #F7ED7D;
}
/* line 333, ../../styles/090.scss */
.interface svg .line-shadow {
  z-index: 1;
  stroke-width: 2;
  stroke: #252525;
  opacity: .35;
}
/* line 341, ../../styles/090.scss */
.interface .range-slider {
  display: inline-block;
  position: relative;
  height: 300px;
  float: left;
  width: 14.28%;
}
/* line 349, ../../styles/090.scss */
.interface .range-slider label {
  position: absolute;
  display: block;
  width: 100%;
  bottom: -25px;
  font-size: 12px;
  text-align: center;
  color: #50545f;
  pointer-events: none;
}
/* line 360, ../../styles/090.scss */
.interface .range-slider:after {
  content: '';
  display: block;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  height: 100%;
  width: 4px;
  position: absolute;
  background: #343440;
  pointer-events: none;
}
/* line 373, ../../styles/090.scss */
.interface .range-slider-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  left: 50%;
  bottom: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 2px #373641;
  cursor: pointer;
  pointer-events: none;
  z-index: 2;
}
/* line 388, ../../styles/090.scss */
.interface .range-slider-bar {
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  position: absolute;
  background: linear-gradient(#9791B8, #8376FF);
  pointer-events: none;
  width: 4px;
  opacity: 1;
  height: 50%;
  z-index: 1;
  border-radius: 2px;
}