/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : May 23, 2017, 4:07:16 PM
    Author     : ManhThang
*/

#audioplayer {
    height: 120px;
    position: relative;
    width: 90%;
    margin-left: 5%;
    background-color: white;
    border-radius: 5px;
    border:#701799 solid 1px;

}
.song, .artist {

    left: 10%;
    width:90%;
    position: absolute;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    color:black;
    text-align:center
}
.song {

    font-size: 14px;
     font-family:  RobotoBold;

}
.artist {
    color:black;
    font-size: 12px;
    top: 20px;
}
.controls {
    cursor: pointer;
    height: 33px;
    left: 10%;
    position: absolute;
    top: 70px;
    width: 40%;
}
.controls .play, .controls .stop, .controls .prev, .controls .next {
    float: left;
    height: 100%;
    width: 32%;
    background-size: 70%;
    background-repeat: no-repeat;
    background-position: center;
}
.controls .play {
    background-image: url("../../img/play.png");
}
.controls .stop {
    background-image: url("../../img/pause.png");
    display: none;
}
.controls .prev {
    background-image: url("../../img/rewind.png");
}
.controls .next {
    background-image: url("../../img/foward.png");
}
.controls .play:hover {
    border: 1px solid whitesmoke;
    border-radius: 15px;
}
.controls .stop:hover {
    border: 1px solid whitesmoke;
    border-radius: 15px;
}
.controls .prev:hover {
    border: 1px solid whitesmoke;
    border-radius: 15px;
}
.controls .next:hover {
    border: 1px solid whitesmoke;
    border-radius: 15px;
}
.hidden {
    display: none;
}
.controls .visible {
    display: block;
}
.volume {
    height: 5px;
    right:10%;
    position: absolute;
    top: 85px;
    width: 30%;
    background-color: #1b6d85;
    border-radius: 5px;
}
.time {
    height: 5px;
    left: 5%;
    position: absolute;
    top: 55px;
    width: 90%;
    background-color: #CCC;
    border-radius: 10px;
}
.ui-slider-range {
    height: calc(100% - 1px);
    position: absolute;

    background-color: #701799;
    border-radius: 5px;

}
.ui-slider-handle {
    cursor: pointer;
    margin-left: -5px;
    position: absolute;
}

.volume .ui-slider-handle {
    height: 5px;
    width: 5px;
    background-color: black;
    border-radius:5px;
    border: 1px solid black;

}

.time .ui-slider-handle {
    height: 5px;
    width: 5px;
    background-color: black;
    border-radius:5px;
    border: 1px solid black;

}
.playlist {
    background-color: white;
    border-radius: 5px;

    list-style-type: none;
    margin: 1px 0 0 0px;
    padding-bottom: 10px;
    padding-top: 15px;
    position: relative;
    width: 400px;
}
.playlist li {
    color: black;
    cursor: pointer;
    margin: 0 0 5px 15px;
}
.playlist li.active {
     font-family:  RobotoBold;
    color: red;
}