#app-left {
    display:block;
    position: absolute;
    top: 41px;
    left:0;
    z-index: 10;
    width: calc(100% - 400px);
    height: calc(100% - 41px);
}
.playback {
    transition: all .4s cubic-bezier(0.45, 0.05, 0.55, 0.95), border-color 1ms;
    position:absolute;
    margin: 0 auto;
    width: 854px;
    height: 521px;
    z-index: 9;
    top:50%;
    left:50%;
    margin-top: calc(-521px / 2);
    margin-left: calc(-854px / 2);
    background-repeat: no-repeat;
    background-size: 50%;
    background-position: center;
    background-image: url('/pads/lib/img/mqp.png');
    background-color: rgba(10, 10, 10, 0.9);
    border:1px solid #444A59;
}
.video {
  width: 100%;
  height: calc(100% - 41px);
}
.navbar {
    opacity:0;
    position: absolute;
    width: 100%;
    height: 40px;
    z-index: 5;
    top:0;
    vertical-align: middle;
    text-align: center;
    transition: all 0.5s ease;
    background: linear-gradient(to bottom, rgba(10,10,10,1) 0%, rgba(10,10,10,0.75) 50%, rgba(10,10,10,0.50) 75%, rgba(10,10,10,0) 100%);
}
.navbar.bottom {
    top:initial;
    bottom:41px;
    background: linear-gradient(to top, rgba(10,10,10,1) 0%, rgba(10,10,10,0.75) 50%, rgba(10,10,10,0.50) 75%, rgba(10,10,10,0) 100%);
}
.song-time {
    font-size: 14px;
    margin: 0 10px;
}
.song-progress{
    height: 3px;
    position: absolute;
    top: initial;
    bottom: 41px;
    left: 0px;
    transition: width 2s;
    -webkit-transition: width 2s;
    -moz-transition: width 2s;
}
.navbar .label {
    margin: 0 10px;
}
.navbar .uname {
    margin-left: 10px;
}
.playback:hover .navbar {
    opacity: 1;
}
.playback.fullscreen {
    width: calc(100% - 1px);
    height: 100%;
    top:0;
    left:0;
    bottom:0;
    margin-top: 0;
    margin-left: 0;
    border:none;
}
.tools {
    font-size: 16px;
    line-height: 40px;
    vertical-align: middle;
    float:left;
    text-align: center;
    min-width:40px;
    height: 40px;
/*    cursor: pointer; */
    color: #ddd;
}
.clickable {
    cursor: pointer;
}
.draggable {
    cursor: move;
}
.resize-helper {
    border: 2px dotted #00F;
}
.navbar .left {
    float:left;
}
.navbar .right {
    float:right;
}
.volume {
    width: 50px;
}
.volume-val {
    font-size: 14px;
    margin-right: 10px;
}
.rng-volume {
    height: 100%;
    line-height: 40px;
    vertical-align: middle;
    text-align: center;
    padding: 0 10px;
}
.controls {
    position:absolute;
    bottom:0;
    display: -webkit-flex;
    display: flex;
    height:40px;
    width: 100%;
    border-top:1px solid #444A59;
    background: #1C1C1F;
}
.controls .ctrl, .controls .ctrl-alt {
    font-size: 16px;
    line-height: 40px;
    vertical-align: middle;
    text-align: center;
    flex: 1;
    -webkit-flex: 1; /* Safari 6.1+ */
    -ms-flex: 1; /* IE 10 */ 
    cursor: pointer;
    float:left;
    height: 40px;
}
.btn-downvote {
    color: #C8303E;
}
.btn-downvote.active {
    color: #1C1C1F;
    background-color: #C8303E;
}
.btn-downvote:not(.active):hover {
    background: rgba(200, 48, 62, .25);
}
.btn-snooze {
    color: #925AFF;
}
.btn-snooze:not(.active):hover {
    background: rgba(146, 90, 255, .25);
}
.ctrl-alt.btn-snooze {
    color: #F46B40;
}
.ctrl-alt.btn-snooze:not(.active):hover {
    background: rgba(244, 107, 64, .25);
}
.btn-join {
    color: #F46B40;
}
.btn-join:not(.active):hover {
    background: rgba(244, 107, 64, .25);
}
.btn-join.active {
    background: #F46B40;
    color: #1C1C1F;
}
.ctrl-alt.btn-join {
    color: #91c5a9;
}
.ctrl-alt.btn-join:not(.active):hover {
    background: rgba(145, 197, 169, .25);
}
.ctrl-alt.btn-join.active {
    background: #91c5a9;
    color: #1C1C1F;
}
.btn-grab {
    color: #925AFF;
    position: relative;
}
.btn-grab.active, .btn-snooze.active {
    color: #1C1C1F;
    background: #925AFF;
}
.ctrl-alt.btn-snooze.active {
    color: #1C1C1F;
    background: #F46B40;
}
.btn-grab:not(.active):hover {
    background: rgba(146, 90, 255, .25);
}
.btn-grab:hover .playlists-grab, .playlists-grab:hover {
    display: block;
}
.btn-grab .playlists-grab {
    position: absolute;
    bottom: 40px;
    display: none;
    border: 1px solid #444A59;
    border-bottom: none;
    width: calc(100% - 2px);
    background-color: #1C1C1F;
    color: #925AFF;
    max-height: 150px;
    overflow-y: auto;
    overflow-x: hidden;
}

.btn-grab .playlists-grab-history {
  line-height: 40px;
  width: calc(158px);
  bottom: inherit;
  top: calc(100% - 1px);
  z-index: 1;
  border-top: none;
  border-bottom: 1px solid #444A59;
  position: absolute;
  display: none;
  border: 1px solid #444A59;
  background-color: #1C1C1F;
  color: #925AFF;
  max-height: 150px;
  overflow-y: auto;
  overflow-x: hidden;
}

.pl-grab {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.playlists-grab .pl-grab:not(.active):hover {
    background: rgba(146, 90, 255, .25);
}
.playlists-grab .pl-grab.active {
    background: #925AFF;
    color: #1C1C1F;
}
.pl-grab-create {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.playlists-grab .pl-grab-create:not(.active):hover {
    background: rgba(146, 90, 255, .25);
}
.playlists-grab .pl-grab-create.active {
    background: #925AFF;
    color: #1C1C1F;
}
.btn-upvote {
    color: #A7CA00;
    min-width: 20%;
}
.btn-upvote.active {
    color: #1C1C1F;
    background: #A7CA00;
}
.btn-upvote:not(.active):hover {
    background: rgba(167, 202, 0, .25);
}
.btn-hd.active, .btn-lastdj.active {
    color: #A77DC2;
}
.ctrl .info, .ctrl-alt .info {
    font-size: 12px;
    font-weight: bold;
    margin: 0 3px;
}
.ui-draggable-disabled .draggable {
    display: none;
}
@media (max-width: 1365px){
  .playback {
    width: 640px;
    height: 401px;
    margin-top: calc(-401px / 2);
    margin-left: calc(-640px / 2);
  }
}
@media (max-width: 1100px) {
  #app-left {
      z-index: 10;
      width: 100%;
  }
  .btn-fullscreen {
      display: none;
      position: absolute;
  }
}
@media (max-width: 799px) {
  #app-left {
      display:none;
  }
}