#jcmix {
  /*
  input[type='range']:nth-of-type(1)::-webkit-slider-runnable-track:before, input[type='range']:nth-of-type(1) /deep/ #track:before {
    content: "320Hz";
  }

  input[type='range']:nth-of-type(2)::-webkit-slider-runnable-track:before, input[type='range']:nth-of-type(2) /deep/ #track:before {
    content: "600Hz";
  }
  input[type='range']:nth-of-type(3)::-webkit-slider-runnable-track:before, input[type='range']:nth-of-type(3) /deep/ #track:before {
    content: "1KHz";
  }
  input[type='range']:nth-of-type(4)::-webkit-slider-runnable-track:before, input[type='range']:nth-of-type(4) /deep/ #track:before {
    content: "3KHz";
  }
  input[type='range']:nth-of-type(5)::-webkit-slider-runnable-track:before, input[type='range']:nth-of-type(5) /deep/ #track:before {
    content: "6KHz";
  }
  input[type='range']:nth-of-type(6)::-webkit-slider-runnable-track:before, input[type='range']:nth-of-type(6) /deep/ #track:before {
    content: "12KHz";
  }*/
  /*
  input[type='range']:nth-of-type(1)::-webkit-slider-runnable-track:after, input[type='range']:nth-of-type(1) /deep/ #track:after, input[type='range']:nth-of-type(6)::-webkit-slider-runnable-track:after, input[type='range']:nth-of-type(6) /deep/ #track:after {
    content: '+18 0 -18';
  }*/ }

#jcmix input[type='range'] {
  align-self: center;
  margin: -0.75em 0;
  border: solid 1.5em transparent;
  padding: 0;
  width: 400px;
  height: 0em;
  background: repeating-linear-gradient(90deg, #3b3e41, #3b3e41 0.0625em, transparent 0.0625em, transparent 2em) no-repeat 50% 0.4375em border-box, repeating-linear-gradient(90deg, #3b3e41, #3b3e41 0.0625em, transparent 0.0625em, transparent 2em) no-repeat 50% 2em border-box;
  background-size: 390px 0.625em, 390px 0.625em, 100% 2.25em;
  font-size: 1em;
  cursor: pointer; }

@media (max-width: 935px) {
  #jcmix input[type='range'] {
    background: repeating-linear-gradient(90deg, #3b3e41, #3b3e41 0.0625em, transparent 0.0625em, transparent 2em) no-repeat 50% 1.8em border-box, repeating-linear-gradient(90deg, #3b3e41, #3b3e41 0.0625em, transparent 0.0625em, transparent 2em) no-repeat 50% 1em border-box;
    background-size: 390px 0.225em, 390px 0.225em, 100% 2.25em; } }

#jcmix input[type='range'], #jcmix input[type='range']::-webkit-slider-runnable-track, #jcmix input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none; }

#jcmix input[type='range']::-webkit-slider-runnable-track {
  position: relative;
  width: 13em;
  height: 0.1em;
  border-radius: .1875em;
  background: #15181b; }

#jcmix input[type='range']::-moz-range-track {
  width: 390px;
  height: 0.1em;
  border-radius: .1875em;
  background: #15181b; }

#jcmix input[type='range']::-ms-track {
  border: none;
  width: 13em;
  height: 0.1em;
  border-radius: .1875em;
  color: transparent;
  background: #15181b; }

#jcmix input[type='range']::-ms-fill-lower {
  display: none; }

#jcmix input[type='range']::-webkit-slider-thumb {
  font-size: 0.7em;
  margin-top: -0.90em;
  border: none;
  width: 4em;
  height: 2em;
  border-radius: .5em;
  box-shadow: -.125em 0 .25em #928886,  inset -1px 0 1px #fff;
  background: radial-gradient(#ebe1e0 10%, rgba(235, 225, 224, 0.2) 10%, rgba(235, 225, 224, 0) 72%) no-repeat 50% 50%, radial-gradient(at 100% 50%, #e9dfde, #eae1de 71%, transparent 71%) no-repeat 2.5em 50%, linear-gradient(90deg, #e9dfde, #d0c8c6) no-repeat 100% 50%, radial-gradient(at 0 50%, #d0c6c5, #c6baba 71%, transparent 71%) no-repeat 0.75em 50%, linear-gradient(90deg, #e3d9d8, #d0c6c5) no-repeat 0 50%, linear-gradient(#cdc0c0, #fcf5ef, #fcf5ef, #cdc0c0);
  background-size: 0.825em 100%; }

#jcmix input[type='range']::-moz-range-thumb {
  font-size: 0.7em;
  border: none;
  width: 4em;
  height: 2em;
  border-radius: .5em;
  box-shadow: -.125em 0 .25em #928886,  inset -1px 0 1px #fff;
  background: radial-gradient(#ebe1e0 10%, rgba(235, 225, 224, 0.2) 10%, rgba(235, 225, 224, 0) 72%) no-repeat 50% 50%, radial-gradient(at 100% 50%, #e9dfde, #eae1de 71%, transparent 71%) no-repeat 2.5em 50%, linear-gradient(90deg, #e9dfde, #d0c8c6) no-repeat 100% 50%, radial-gradient(at 0 50%, #d0c6c5, #c6baba 71%, transparent 71%) no-repeat 0.75em 50%, linear-gradient(90deg, #e3d9d8, #d0c6c5) no-repeat 0 50%, linear-gradient(#cdc0c0, #fcf5ef, #fcf5ef, #cdc0c0);
  background-size: 0.825em 100%; }

#jcmix input[type='range']::-ms-thumb {
  font-size: 0.7em;
  border: none;
  width: 4em;
  height: 2em;
  border-radius: .5em;
  box-shadow: -.125em 0 .25em #928886,  inset -1px 0 1px #fff;
  background: radial-gradient(#ebe1e0 10%, rgba(235, 225, 224, 0.2) 10%, rgba(235, 225, 224, 0) 72%) no-repeat 50% 50%, radial-gradient(at 100% 50%, #e9dfde, #eae1de 71%, transparent 71%) no-repeat 2.5em 50%, linear-gradient(90deg, #e9dfde, #d0c8c6) no-repeat 100% 50%, radial-gradient(at 0 50%, #d0c6c5, #c6baba 71%, transparent 71%) no-repeat 0.75em 50%, linear-gradient(90deg, #e3d9d8, #d0c6c5) no-repeat 0 50%, linear-gradient(#cdc0c0, #fcf5ef, #fcf5ef, #cdc0c0);
  background-size: 0.825em 100%; }

#jcmix input[type='range']::-webkit-slider-runnable-track:before, #jcmix input[type='range']::-webkit-slider-runnable-track:after, #jcmix input[type='range'] /deep/ #track:before, #jcmix input[type='range'] /deep/ #track:after {
  position: absolute;
  font: 0.75em/8em trebuchet ms, arial, sans-serif; }

#jcmix input[type='range']::-webkit-slider-runnable-track:before, #jcmix input[type='range'] /deep/ #track:before {
  top: 50%;
  right: 100%;
  transform: translate(50%, -50%) rotate(90deg) translate(0, 32%); }

#jcmix input[type='range']::-webkit-slider-runnable-track:after, #jcmix input[type='range'] /deep/ #track:after {
  left: 50%;
  width: 3em;
  word-spacing: 1em; }

#jcmix input[type='range']:nth-of-type(1)::-webkit-slider-runnable-track:after, #jcmix input[type='range']:nth-of-type(1) /deep/ #track:after {
  bottom: 100%;
  transform: translate(-50%, 50%) rotate(90deg) translate(-4.375em);
  text-align: right; }

#jcmix input[type='range']:nth-of-type(6)::-webkit-slider-runnable-track:after, #jcmix input[type='range']:nth-of-type(6) /deep/ #track:after {
  top: 100%;
  transform: translate(-50%, -50%) rotate(90deg) translate(4.375em); }

#jcmix input[type='range']:focus {
  outline: none; }

#jcmix input[type='range']:focus::-webkit-slider-runnable-track {
  background: #15181b; }

#jcmix input[type='range']:focus::-moz-range-track {
  background: #15181b; }

#jcmix input[type='range']:focus::-ms-track {
  background: #15181b; }

#jcmix .mute-button label input {
  display: none; }

#jcmix .mute-button {
  margin: 4px;
  background-color: #666B73;
  border-radius: 4px;
  border: 1px solid #000;
  overflow: auto;
  float: left; }

#jcmix .mute-button label {
  float: left; }

#jcmix .mute-button label span {
  text-align: center;
  padding: 3px;
  display: block;
  border-radius: 4px; }

#jcmix .mute-button label input {
  position: absolute;
  top: -20px; }

#jcmix .mute-button input:hover + span {
  background-color: #efE0E0; }

#jcmix .mute-button input:checked + span {
  background-color: #911;
  color: #fff; }

#jcmix .mute-button input:checked:hover + span {
  background-color: #c11;
  color: #fff; }

/**
 *
 * All animations must live in their own file
 * in the animations directory and be included
 * here.
 *
 */
/**
 * Styles shared by multiple animations
 */
/**
 * Dots
 */
@keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg) scale(1);
    transform: rotate(0deg) scale(1); }
  50% {
    -webkit-transform: rotate(180deg) scale(0.6);
    transform: rotate(180deg) scale(0.6); }
  100% {
    -webkit-transform: rotate(360deg) scale(1);
    transform: rotate(360deg) scale(1); } }

#jcmix .ball-clip-rotate-multiple {
  position: relative; }

#jcmix .ball-clip-rotate-multiple > div {
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  position: absolute;
  left: -20px;
  top: -20px;
  border: 2px solid #1d7a9c;
  border-bottom-color: transparent;
  border-top-color: transparent;
  border-radius: 100%;
  height: 35px;
  width: 35px;
  -webkit-animation: rotate 1s 0s ease-in-out infinite;
  animation: rotate 1s 0s ease-in-out infinite; }

#jcmix .ball-clip-rotate-multiple > div:last-child {
  display: inline-block;
  top: -10px;
  left: -10px;
  width: 15px;
  height: 15px;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  border-color: #00a7cc transparent #00a7cc transparent;
  -webkit-animation-direction: reverse;
  animation-direction: reverse; }

@-webkit-keyframes ball-scale-ripple {
  0% {
    -webkit-transform: scale(0.1);
    transform: scale(0.1);
    opacity: 1; }
  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0.7; }
  100% {
    opacity: 0.0; } }

@keyframes ball-scale-ripple {
  0% {
    -webkit-transform: scale(0.1);
    transform: scale(0.1);
    opacity: 1; }
  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0.7; }
  100% {
    opacity: 0.0; } }

#jcmix #transport {
  overflow: auto; }

#jcmix #play {
  display: block;
  width: 0;
  float: left;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 24px solid #d5d5d5;
  margin: 40px auto 30px auto;
  position: relative;
  z-index: 1;
  transition: all 0.1s;
  -webkit-transition: all 0.1s;
  -moz-transition: all 0.1s;
  left: 100px; }

#jcmix #play:before {
  content: '';
  position: absolute;
  top: -30px;
  left: -46px;
  bottom: -30px;
  right: -14px;
  border-radius: 50%;
  border: 2px solid #d5d5d5;
  z-index: 2;
  transition: all 0.1s;
  -webkit-transition: all 0.1s;
  -moz-transition: all 0.1s; }

#jcmix #play:after {
  content: '';
  opacity: 0;
  transition: opacity 0.2s;
  -webkit-transition: opacity 0.2s;
  -moz-transition: opacity 0.2s; }

#jcmix #play:hover:before, #jcmix #play:focus:before {
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1); }

#jcmix #play.active {
  border-color: transparent; }

#jcmix #play.active:after {
  content: '';
  opacity: 1;
  width: 20px;
  height: 32px;
  background: #d5d5d5;
  position: absolute;
  right: 2px;
  top: -16px;
  border-left: 8px solid #d5d5d5;
  box-shadow: inset 12px 0 0 0 #16191c; }

#jcmix #start {
  display: block;
  float: left;
  width: 0;
  height: 0;
  border-top: 18px solid transparent;
  border-bottom: 18px solid transparent;
  border-right: 21.6px solid #d5d5d5;
  margin: 42px auto 18px auto;
  position: relative;
  z-index: 1;
  transition: all 0.1s;
  -webkit-transition: all 0.1s;
  -moz-transition: all 0.1s; }

#jcmix #start:before {
  content: '';
  position: absolute;
  top: -30px;
  left: -18px;
  bottom: -30px;
  right: -42px;
  border-radius: 50%;
  border: 2px solid #d5d5d5;
  z-index: 2;
  transition: all 0.1s;
  -webkit-transition: all 0.1s;
  -moz-transition: all 0.1s; }

#jcmix #start:after {
  content: "";
  display: block;
  width: 5px;
  height: 20px;
  background: #d5d5d5;
  margin-top: -10px;
  margin-left: -4px; }

#jcmix #start:hover:before, #jcmix #start:focus:before {
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1); }

#jcmix #record {
  display: block;
  width: 0;
  float: left;
  height: 0;
  border: 10px solid #d5d5d5;
  border-radius: 75%;
  margin: 50px auto 30px auto;
  position: relative;
  z-index: 1;
  transition: all 0.1s;
  -webkit-transition: all 0.1s;
  -moz-transition: all 0.1s;
  left: 125px; }

#jcmix #record:before {
  content: '';
  position: absolute;
  top: -30px;
  left: -30px;
  bottom: -30px;
  right: -30px;
  border-radius: 50%;
  border: 2px solid #d5d5d5;
  z-index: 2;
  transition: all 0.1s;
  -webkit-transition: all 0.1s;
  -moz-transition: all 0.1s; }

#jcmix #record:after {
  content: '';
  opacity: 0;
  transition: opacity 0.2s;
  -webkit-transition: opacity 0.2s;
  -moz-transition: opacity 0.2s; }

#jcmix #record:hover:before, #jcmix #record:focus:before {
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1); }

#jcmix #record.active {
  border-color: red; }

#jcmix #recordinglist {
  text-align: center;
  list-style-type: none;
  padding: 0;
  overflow: auto; }

#jcmix #recordinglist li {
  overflow: auto; }

#jcmix #recordinglist a, #jcmix #recordinglist audio {
  clear: both;
  float: left;
  text-align: center;
  width: 100%; }

#jcmix #recordinglist audio {
  height: 50px; }

#jcmix #recordinglist a {
  color: white;
  background: #2f5379;
  font-size: 10px; }

#jcmix #recordListButtons {
  width: 100%;
  text-align: center; }

#jcmix #recordListButtons #toggleRecordings, #jcmix #recordListButtons #clearRecordings {
  display: none;
  cursor: pointer;
  padding: 5px;
  margin: 5px;
  background: #2f5379;
  color: white;
  font-size: 10px; }

#jcmix #recordListButtons #clearRecordings {
  color: red; }

#jcmix .panner-range {
  position: absolute;
  top: 8px;
  left: 50px;
  height: 30px; }

@media (max-width: 790px) {
  #jcmix .panner-range {
    left: 8px; } }

a, a:link, a:hover, a:visited {
  color: #7f7f7f; }

#nosupport {
  font-family: 'Open Sans', sans-serif;
  background: red;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  -webkit-transition: all .25s ease;
  -moz-transition: all .25s ease;
  -ms-transition: all .25s ease;
  -o-transition: all .25s ease;
  transition: all .25s ease;
  color: #FFF;
  text-align: center;
  padding: 30px;
  z-index: 10; }

#nosupport a, #nosupport a:link, #nosupport a:hover, #nosupport a:visited {
  color: #FFF; }

#jcmix {
  max-width: 766px;
  min-width: 260px;
  margin: 0 auto;
  margin-top: 2rem;
  height: 600px;
  height: 400;
  font-family: 'Open Sans', sans-serif; }

#jcmix h1 {
  font-weight: 100; }

#jcmix #info {
  display: none !important; }

@media (max-width: 935px) {
  #jcmix {
    max-width: 637px; } }

@media (max-width: 790px) {
  #jcmix {
    max-width: 360px; } }

#jcmix #mixer {
  background: transparent !important; }

#jcmix a, #jcmix a:link, #jcmix a:hover, #jcmix a:visited {
  color: #FFF; }

#jcmix * {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  /* Disable selection/copy in UIWebView */ }

#jcmix h1 {
  color: #FFF;
  text-align: center; }

#jcmix #info {
  display: block;
  float: left;
  margin-top: 10px;
  color: #7f7f7f;
  font-size: 10px;
  width: 100%;
  text-align: center; }

#jcmix .loader {
  width: 100%;
  height: 100%;
  position: relative; }

#jcmix .loader .loader-inner {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -50px; }

#jcmix .loader p {
  color: #1d7a9c;
  text-align: center;
  width: 100%;
  font-size: 0.7em;
  position: relative;
  top: 50%; }

#jcmix #timer {
  font-family: "Share Tech Mono";
  color: #fff;
  font-size: 2em;
  padding: 10px;
  overflow: auto;
  position: relative;
  display: block;
  clear: both;
  background: #000;
  text-align: center; }

#jcmix #timer span {
  display: inline-block;
  text-align: left; }

#jcmix #timer span span {
  width: 32.6px; }

#jcmix #timer .progress {
  width: 150px; }

#jcmix #timer .total {
  margin-left: 5px;
  width: 140px; }

#jcmix canvas.meter {
  display: block;
  float: left;
  margin-right: 50px;
  margin-left: 10px; }

@media (max-width: 790px) {
  #jcmix canvas.meter {
    margin-right: 30px; } }

@media (max-width: 790px) {
  #jcmix canvas.meter {
    margin-right: 2px; } }

#jcmix #transport {
  clear: both;
  display: block;
  text-align: center;
  width: 150px;
  position: relative;
  margin: -20px auto 0 auto; }

#jcmix #transport.recording {
  width: 215px; }

#jcmix #mixer {
  background: #16191c;
  position: relative;
  overflow: auto;
  display: block;
  float: left;
  opacity: 0; }

#jcmix #mixer #channelstrip {
  position: relative;
  overflow: auto;
  display: block;
  float: left;
  width: 100%; }

#jcmix #mixer #channelstrip div[data-channel] {
  position: relative;
  float: left;
  display: block;
  background: rgba(41, 44, 48, 0.2);
  height: 100%;
  margin: 5px;
  padding: 5px;
  padding-top: 50px; }

@media (min-width: 790px) {
  #jcmix #mixer #channelstrip div[data-channel] {
    -webkit-box-shadow: inset 0px 0px 5px 0px rgba(26, 27, 28, 0.75);
    -moz-box-shadow: inset 0px 0px 5px 0px rgba(26, 27, 28, 0.75);
    box-shadow: inset 0px 0px 5px 0px rgba(26, 27, 28, 0.75); } }

@media (max-width: 935px) {
  #jcmix #mixer #channelstrip div[data-channel] {
    background: none;
    margin: 0px;
    padding: 0px;
    padding-top: 50px; } }

#jcmix #mixer #channelstrip div[data-channel]:last-child {
  background: #240505 !important; }

@media (max-width: 790px) {
  #jcmix #mixer #channelstrip div[data-channel]:last-child {
    margin-right: 0px;
    float: right;
    background: none !important; } }

#jcmix #mixer #channelstrip div[data-channel]:last-child .track-label {
  background: #000 !important; }

#jcmix #mixer #channelstrip div[data-channel] .slider {
  display: block;
  float: left;
  -ms-transform: rotate(270deg);
  /* IE 9 */
  -webkit-transform: rotate(270deg);
  /* Chrome, Safari, Opera */
  transform: rotate(270deg);
  position: absolute;
  top: 221px;
  left: -150px; }

@media (max-width: 935px) {
  #jcmix #mixer #channelstrip div[data-channel] .slider {
    left: -160px; } }

@media (max-width: 790px) {
  #jcmix #mixer #channelstrip div[data-channel] .slider {
    display: none; } }

#jcmix #mixer #channelstrip div[data-channel] .track-label {
  margin-top: 10px;
  overflow: auto;
  clear: both;
  float: left;
  background: #240505;
  width: 85px;
  color: #FFF;
  text-align: center;
  font-size: 10px;
  padding-top: 5px;
  padding-bottom: 5px; }

@media (max-width: 790px) {
  #jcmix #mixer #channelstrip div[data-channel] .track-label {
    width: auto; }
  #jcmix #mixer #channelstrip div[data-channel] .track-label label {
    display: none; } }

#jcmix .mute-button {
  position: absolute;
  left: 10px;
  top: 5px;
  font-size: 10px; }

#jcmix .mute-button span {
  width: 18px;
  text-align: center; }

@media (max-width: 790px) {
  #jcmix .mute-button {
    display: none; } }

#jcmix .paddingholder {
  padding: 5px;
  display: block;
  clear: both;
  position: relative; }

#jcmix #timeline {
  background: #292c30;
  height: 30px;
  width: 100%;
  position: relative;
  display: block;
  clear: both; }

#jcmix #timeline #progress {
  width: 2px;
  height: 100%;
  background: #b6c8e1;
  position: absolute;
  left: 0; }