#mixer-app {
    user-select: none;
    -webkit-user-select: none;
    -webkit-overflow-scrolling: touch;
    pointer-events:none;
}

.no-touch-link {
    -webkit-touch-callout: none;
}

.text-div {
    margin-top: 10px;
    text-align: center;
}

#record_svg {
    display: block;
    width: 256px;
    /*margin: 20px auto;*/
    cursor: pointer; cursor: hand;
    user-select: none;
}

#backing_record_svg {
    display: block;
    width: 100px;
    margin: 20px auto;
    cursor: pointer; cursor: hand;
    user-select: none;
}

.vranger {
    margin-top: 50px;
    transform: rotate(270deg);
}

/* Sliders */
input[type=range].fader {
    -webkit-appearance: none;
    width: 100%;
    margin: 22.6px 0;
}
.progress-bar{
    width:100%;
}
input[type=range].fader:focus {
    outline: none;
}
input[type=range].fader::-webkit-slider-runnable-track {
    width: 100%;
    height: 1.8px;
    cursor: pointer;
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
    background: #4671a9;
    border-radius: 1.3px;
    border: 0.2px solid #010101;
}
input[type=range].fader::-webkit-slider-thumb {
    box-shadow: 1px 1px 1px #320000, 0px 0px 1px #4c0000;
    border-top: 2px solid #180000;
    border-left: 9.7px solid #180000;
    border-right: 9.7px solid #180000;
    border-bottom: 2px solid #180000;
    height: 47px;
    width: 22px;
    border-radius: 2px;
    background: #ffffff;
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -22.8px;
}

/* vertical slider */

input[type=range].vfader {
    -webkit-appearance: none;
    width: 122px;
    transform: rotate(270deg) translate(-60px,-30px);
    background:none;
    writing-mode: tb-lr; /*top to bottom, left to right */
    height: 100%; 
    color:#ffffff;
    height:auto;
    margin:0;
    display: flex;
    flex-direction: column;
}

input[type=range].vfader:focus {
    outline: none;
}
input[type=range].vfader::-webkit-slider-runnable-track {
    width: 122px;
    height: 1.8px;
    cursor: pointer;
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
    background: #4671a9;
    border-radius: 1.3px;
    border: 0.2px solid #010101;
}
input[type=range].vfader::-webkit-slider-thumb {
    box-shadow: 1px 1px 1px #320000, 0px 0px 1px #4c0000;
    border-top: 2px solid #180000;
    border-left: 9.7px solid #180000;
    border-right: 9.7px solid #180000;
    border-bottom: 2px solid #180000;
    height: 47px;
    width: 22px;
    border-radius: 2px;
    background: #ffffff;
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -22.8px;
}


input[type=range].mixerFader {
    -webkit-appearance: none;
    width: 122px;
    margin: 47px 0px 64px 0px;
    transform: rotate(270deg);
}
input[type=range].mixerFader:focus {
    outline: none;
}
input[type=range].mixerFader::-webkit-slider-runnable-track {
    width: 100%;
    height: 1.8px;
    cursor: pointer;
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
    background: #4671a9;
    border-radius: 1.3px;
    border: 0.2px solid #010101;
}
input[type=range].mixerFader::-webkit-slider-thumb {
    box-shadow: 1px 1px 1px #320000, 0px 0px 1px #4c0000;
    border-top: 2px solid #180000;
    border-left: 9.7px solid #180000;
    border-right: 9.7px solid #180000;
    border-bottom: 2px solid #180000;
    height: 47px;
    width: 22px;
    border-radius: 2px;
    background: #ffffff;
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -22.8px;
}

/*Labels next to slider*/
.range-labels {
    display: inline-block;
    vertical-align: top;
    margin: -7px -12px 0 -41px;
    padding: 0;
    list-style: none;
    user-select: none;
}
.range-labels li {
    position: relative;
    margin-left: 30px;
    text-align: left;
    color: #b2b2b2;
    font-size: 14px;
    cursor: pointer;
    user-select: none;
}

.range-labels li:first-child, range-labels li:last-child {
    margin-left: 27px;
}

input[type=range].filterSlider {
    width: 100%;
}

kbd {
    font: 14px SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 0.2em 0.5em;
    margin: 5px 0.2em;
    box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2), 0 0 0 2px #fff inset;
    color: #3a3c44;
    background-color: #f7f7f7;
}

/*RPM Buttons*/

.rpm-radio-toolbar {
    user-select: none;
}

.rpm-radio-toolbar input[type="radio"] {
    display: none;
}

.rpm-radio-toolbar label {
    border-radius: 100%;
    border : 0.1em solid #000;
    user-select: none;
}

.rpm-radio-toolbar input[type="radio"]:checked+label {
    background-color: #bbb;
}

.copyright {
    font-size: 12px!important;
}

.music-library-list {
    max-height: 230px;
}

.music-library-loading {
    height: 230px;
}

.fade-enter-active, .fade-leave-active {
    transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
}

[v-cloak] {
    display: none;
}

.bubble {
    background: red;
    color: white;
    padding: 4px 12px;
    position: absolute;
    border-radius: 4px;
    top: 50%;
}

.bubble::after {
    content: "";
    position: absolute;
    width: 2px;
    height: 2px;
    background: red;
    top: -1px;
    left: 50%;
}

.d3TurntablePlaceholder {
    width: 160px;
    height: 160px;
}

.effectsCard {
    height: 7rem;
}

.slider-container {
    /*display: flex;*/
    align-items: center;
    height: 100%; 
    margin: 0;
    touch-action:none;
    width:60px;
}

.fader-dots{
    position:relative;
    margin:0;
    height:11%;
    padding: 0;   
    vertical-align:top;
    font-size:10px;
}
.fader-dots-container{
    height:122px;
    position:relative;
    vertical-align:top;
    padding:3px 5px 5px 2px;
}
.fader-hotkeys-container{
    height:100%;
    position:relative;
    vertical-align:top;
    padding:3px 5px 5px 2px;
    margin:0;
}

.sorted-up::after{
    content:"▲";
    color:"#007bff";
}
.sorted-down::after{
    content:"▼";
    color:"#007bff";
}

.showhide-btn, .showhide-btn:focus{
    background-color: #bddbfc;
  }
  
  #timer-section {
    position: absolute;
    z-index: 9;
    background-color: #f1f1f1;
    text-align: center;
    transform: translate3d(0,0,0);
    top: 5%;
    left: 60%;
  }

  #timer-sectionheader {
    padding: 10px;
    cursor: move;
    z-index: 10;
    background-color: #007bff;
    color: #fff;
  }
  
  .flexbox {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
  #avatar-popout{
    position: absolute;
    z-index: 9;
    background-color: #f1f1f1;
    border: 1px solid #d3d3d3;
    text-align: center;
    transform: translate3d(0,0,0);
    top: 5%;
    left: 20%;
    border: 1px solid transparent;
    border-radius: .25em;
  }
  #avatar-popoutheader{
    padding: 10px;
    cursor: move;
    z-index: 9;
    background-color: #007bff;
    color: #fff;
  }
  #drumSave-popout, #drumLoad-popout{
    position: fixed;
    z-index: 9;
    background-color: #f1f1f1;
    border: 1px solid #d3d3d3;
    text-align: center;
    transform: translate3d(0,0,0);
    top:20vh;
    left:40vw;
  }
  #drumSave-popoutheader, #drumLoad-popoutheader{
    padding: 10px;
    cursor: move;
    z-index: 9;
    background-color: #007bff;
    color: #fff;
  }  
.popup {
    position: absolute;
    z-index:9;
    top: -50%; 
    left: 0;
    background-color: #ffffff;
    border: 1px solid #000000;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    color:#000000;
    animation: fadeOut ease 2s;
    animation-delay: 1s;
    animation-iteration-count: 1;
}
.popup.fade-out{
    opacity:0;
}
 
@keyframes fadeOut {
    0% {opacity: 1;}
    100% {opacity: 0;}
}
.waveform-section{
    width: 100%; 
    border-color: rgb(0, 0, 0);
    border-width: .15em;
    border-style: solid;
    border-radius: 5px;
}
.tab-effects-section{
    width: 100%; 
    border-color: rgb(0, 0, 0);
    border-width: .15em;
    border-style: solid;
    border-radius: 5px;
}
.play-pause:disabled{
    opacity: 1;
}
.btn-danger{
    background-color:rgb(235,35,31);
    border-color: rgb(235,35,31);
}
.btn-warning{
    background-color:rgb(255,204,0);
    border-color:rgb(255,204,0);
}

.record-svg *{
 pointer-events: none;
}