/* The Modal (background) */
.play-queue-modal-ui {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 26;
    right: 0;
    width: 370px;
    max-height: 100%;
    /*padding: 15px;*/
    overflow-y: auto;
    overflow-x: hidden;
    background-color: #fefefe;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    border-radius: 6px 6px 0px 0px;

    -webkit-animation-name: play-queue-animate;
    -webkit-animation-duration: 0.4s;
    animation-name: play-queue-animate;
    animation-duration: 0.4s;
}

@media only screen and (max-width: 480px) {
    .play-queue-modal-ui {
        width: 100%;
        top: 0;
    }
}

@media only screen and (min-width: 480px) {
    .play-queue-modal-ui {
        bottom: 0;
    }
}

/* Modal Content/Box */
.play-queue-modal-content-ui {

    padding: 0px;
    /*width: 94%;*/
    /*left: 3%;*/
    width: 100%;


    position: relative;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;

}


/* Add Animation */
@-webkit-keyframes play-queue-animate {
    from {right:-300px; opacity:0}
    to {right:0; opacity:1}
}

@keyframes play-queue-animate {
    from {right:-300px; opacity:0}
    to {right:0; opacity:1}
}


.play-queue * {
}

.play-queue {
    width: 370px;
    position: relative;
    top: 0px;
    bottom: 100px;
    background: #6d6d6d;
    background: -moz-linear-gradient(top, #6d6d6d 0%, #2e2e2e 100%);
    background: -webkit-linear-gradient(top, #6d6d6d 0%, #2e2e2e 100%);
    background: linear-gradient(to bottom, #6d6d6d 0%, #2e2e2e 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$start-color', endColorstr='$end-color', GradientType=0);
    box-shadow: 0 0 16px 0px #000
}

@media only screen and (max-width: 480px) {
    .play-queue {
        width: 100%;
        left: 0;
        margin-left: 0
    }
}

.play-queue .large-track-image {
    background-size: cover;
    width: 100%;
    height: 256px;
    background-position: center;
    background-repeat: no-repeat
}

.play-queue .track-detail-area {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    max-width: 325px;
    padding: 0px 16px
}

.play-queue .selected-artist-image {
    width: 48px;
    height: 48px;
    margin-right: 5px;
    background-size: cover;
    background-position: center;
    border-radius: 50%
}

.play-queue .title-and-artist {
    display: flex;
    flex-direction: column;
    max-width: 250px
}

.play-queue .selected-artist-name {
    color: #ccc
}

.play-queue i.verified {
    width: 24px;
    height: 24px;
    background-image: url("/images/verified.png");
    background-size: contain;
    background-position: center center;
    display: inline-block;
    vertical-align: middle;
    background-repeat: no-repeat
}

.play-queue .up-next-section {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px 16px;
    border-bottom: solid 1px #484848;
    font-size: 120%
}

.play-queue .fa-random {
    padding-left: 16px;
    transition: 100ms
}

.play-queue .fa-random:hover {
    color: #ea504e
}

.play-queue .play-queue-table {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.play-queue .play-queue-table li {
    width: 100%;
    display: inline-flex;
    flex-direction: row;
    padding: 12px 16px;
    transition: 100ms;
}

.play-queue .play-queue-table li:hover {
    background-color: #484848
}

.play-queue .play-queue-table li.active {
    background-color: rgba(0,0,0,0.1);
    box-shadow: inset 0 0 16px -4px #000;
    box-shadow: inset 0 0 16px -4px rgba(0, 0, 0, 0.8)
}

.play-queue .play-queue-table li .fa-pause {
    display: none;
}

.play-queue .play-queue-table li .fa-play {
    display: block;
}

.play-queue .track-title,
.play-queue .up-next-label {
    color: #eee
}

.play-queue .track-artist {
    color: #777
}

.play-queue .play-queue-table li.active .fa-pause {
    color: #ea504e;
}

.play-queue.playing .play-queue-table li.active .fa-pause {
    display: block;
}

.play-queue.playing .play-queue-table li.active .fa-play {
    display: none;
}

.play-queue .play-queue-table .track-title-cell {
    flex: 0 1 100%
}

.play-queue .play-queue-table .queue-item-action {
    flex: 0 1 auto;
    transition: 100ms;
    color: #eee;
}

.play-queue .play-queue-table .queue-item-action:hover {
    color: #ea504e
}

.play-queue .play-queue-table .action-play {
    padding-right: 16px
}

.play-queue .play-queue-table li.active .action-delete {
    display: none;
}

.play-queue .play-queue-table .action-delete {
    padding-left: 16px;
    margin-right: 10px;
}

.play-queue .play-queue-table .fa {
    cursor: pointer
}

.play-queue .crop-text {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.play-queue .button-highlight {
    color: #e4aa17;
    text-shadow: 0 0 3px #fcc017;
}