body{margin:0px;backgroundk:#170954;background-image: linear-gradient(to right, #8a0d55 , #FF76C3);}




.content_div
{
float:left;width:50%;heightk:500px;margin-left:25%;margin-leftk:1%;backgroundk:#54013c;borderk:1px solid #ccc;	
}
.player_div
{
float:left;width:100%;height:100%;backgroundk:pink;border-radiusk:10px 10px 0 0;	
}
.bk_arrow_btn 
{
float:left;width:40px;height:40px;position:fixed;top:10px;left:2%;cursor:pointer;borderk:1px solid #fff;border-radius:50%;background:#fff;	
}
.artist_profile_div
{
float:left;width:100%;height:50%;margin-topk:15px;background:#000;display:flex;justify-content:center;align-items:center;border-radiusk:10px 10px 0 0;	
}
.artist_profile_img
{
float:left;max-width:100%;max-height:100%;
}

.det_song_div
{
float:left;width:100%;height:60px;margin-top:-60px;backgroundk:#000;
background-color: rgba(117, 0, 0, 0.4);
}
.det_song_title
{
float:left;width:90%;height:30px;line-height:30px;margin-left:5%;color:#fff;font-size:1.3em;font-weight:bold;	
}
.det_artist_name
{
float:left;width:90%;height:30px;line-height:30px;margin-left:5%;color:#ededed;font-weight:bold;	
}

.player_seek_div
{
float:left;width:100%;height:30px;background:#fff;	
}
.seek_value
{
float:left;width:2%;height:20px;backgroundk:#fff;font-size:0.5em;cursor:pointer;	
}
.player_cur_time
{
float:left;width:20%;height:25px;line-height:25px;margin-top:10px;text-align:center;color:#000;font-weight:bold;backgroundk:blue;positionk:relative;	
}
.player_seek_slider
{
float:left;width:60%;height:40px;margin-top:17.5px;background:purple;	
}
.player_duration
{
float:right;width:20%;height:25px;line-height:25px;margin-top:10px;text-align:center;color:#000;font-weight:bold;backgroundk:orange;	
}

.player_controls_div
{
float:left;width:100%;height:90px;background:#fff;	
}
.player_control_btn
{
float:left;width:40px;height:40px;margin-left:17%;margin-top:25px;cursor:pointer;	
}

.song_view_div
{
float:left;width:100%;heightk:100px;margin-leftk:0.8%;margin-topk:10px;background:#fff;border-radiusk:0 0 20px 20px;border-top:1px solid #ccc;	
}
.view_shade
{
float:left;width:30%;backgroundk:green;margin-left:2%;margin-top:15px;	
}
.view_icon_span
{
float:left;width:100%;height:40px;background:#fff;display:flex;justify-content:center;align-items:center;	
}
.song_view_icon
{
floatk:left;width:35px;height:35px;margin-leftk:30%;margin-topk:10px;cursor:pointer;outline:none;	
}

.song_view_count
{
float:left;width:100%;height:40px;line-height:40px;margin-leftk:1%;text-align:center;color:#000;font-weight:bold;font-size:0.8em;backgroundk:red;	
}
.view_lebal
{
float:left;width:100%;height:30px;line-height:30px;text-align:center;font-size:0.8em;color:#505252;font-weight:bold;	
}

.playlst_div
{
float:left;width:100%;height:100%;margin-leftk:0.8%;margin-topk:-100%;margin-bottom:50px;background:pink;border-radiusk:0 0 20px 20px;display:none;
position:fixed;overflow:auto;		
}
.title_plylst
{
float:left;width:80%;height:40px;line-height:40px;margin-left:10%;margin-top:10px;text-align:center;font-weight:bold;

}
.single_plylst
{
float:left;width:90%;height:50px;line-height:50px;margin-left:5%;margin-top:10px;text-align:center;border-radius:20px;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;	
}
.add_plylst_btn
{
float:right;height:40px;margin-right:2%;margin-top:5px;color:green;border:1px solid green;background:transparent;border-radius:20px;font-weight:bold;
cursor:pointer;display:none;font-size:1em;	
}
.new_plylst_input
{
float:left;width:80%;height:50px;line-height:50px;text-align:center;border:0px;outline:none;border-radius:20px 0 0 20px;font-size:1.1em;	
}
.single_plylst_song_count
{
float:left;height:30px;line-height:30px;color:green;	
}
.single_plylst2
{
float:left;width:90%;height:50px;margin-left:5%;margin-top:10px;margin-bottom:30px;text-align:center;border-radius:20px;display:flex;justify-content:space-around;align-items:center;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;	
}
.sub_single_playlist
{
float:left;width:85%;height:50px;text-align:center;border-radiusk:20px;display:flex;justify-content:space-around;align-items:center;
backgroundk:purple;
}
.single_plylst_name
{
float:left;height:30px;line-height:30px;color:#505252;font-weight:bold; 
overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
}
.new_plylst_output
{
float:left;width:100%;height:30px;line-height:30px;text-align:center;color:red;	
}
.close_playlst_btn
{
float:right;width:30px;height:30px;line-height:30px;margin-top:5px;margin-right:2%;background:red;color:#fff;text-align:center;border-radius:30px;
cursor:pointer;	
}

.dot3_icon
{
float:right;width:35px;height:35px;margin-right:0%;backgroundk:green;right:0;cursor:pointer;	
}

.more_option
{
float:right;width:100px;heightk:100px;margin-top:-80px;background:#fff;border:1px solid #ccc;display:none;	
}
.option_btn
{
float:left;width:80%;height:25px;line-height:25px;margin-left:10%;margin-bottom:3px;margin-top:3px;background:transparent;text-align:center;cursor:pointer;
border:0;outline:none;font-size:0.9em;font-weight:bold;	
}

.seeks {
    position: relative;
    -webkit-appearance: none;
    width: 100%;
    margin: 0;
    padding: 0;
    height: 19px;
    margink: 30px 2.5% 20px 2.5%;
    float: left;
    outline: none;
}
.seeks::-webkit-slider-runnable-track {
    width: 100%;
    height: 3px;
    cursor: pointer;
   /* background: linear-gradient(to right, rgba(0, 125, 181, 0.6) var(--buffered-width), rgba(0, 125, 181, 0.2) var(--buffered-width));*/
   background:red;
}
.seeks::before {
    position: absolute;
    content: "";
    top: 0px;
    left: 0;
    width: var(--seek-before-width);
    height: 3px;
    background-color: #007db5;
    cursor: pointer;
}

.seeks::-webkit-slider-thumb {
    position: relative;
    -webkit-appearance: none;
    box-sizing: content-box;
    border: 1px solid #007db5;
    height: 15px;
    width: 15px;
    border-radius: 50%;
    background-color: #fff;
    cursor: pointer;
    margin: -7px 0 0 0;
}
.seeks:active::-webkit-slider-thumb {
    transform: scale(1.2);
    background: green;
}
.seeks::-moz-range-track {
    width: 100%;
    height: 3px;
    cursor: pointer;
    /*background: linear-gradient(to right, rgba(0, 125, 181, 0.6) var(--buffered-width), rgba(0, 125, 181, 0.2) var(--buffered-width));*/
	background:red;
}
.seeks::-moz-range-progress {
    background-colork: #000;
}
.seeks::-moz-focus-outer {
    border: 0;
}
.seeks::-moz-range-thumb {
    box-sizing: content-box;
    border: 1px solid #007db5;
    height: 15px;
    width: 15px;
    border-radius: 50%;
    background-color: #fff;
    cursor: pointer;
}
.seeks:active::-moz-range-thumb {
    transform: scale(1.2);
    background: #007db5;
}
.seeks::-ms-track {
    width: 100%;
    height: 3px;
    cursor: pointer;
    background: transparent;
    border: solid transparent;
    color: transparent;
}
.seeks::-ms-fill-lower {
    background-color: #007db5;
}
.seeks::-ms-fill-upper {
    background: linear-gradient(to right, rgba(0, 125, 181, 0.6) var(--buffered-width), rgba(0, 125, 181, 0.2) var(--buffered-width));
}
.seeks::-ms-thumb {
    box-sizing: content-box;
    border: 1px solid #007db5;
    height: 15px;
    width: 15px;
    border-radius: 50%;
    background-color: #fff;
    cursor: pointer;
}
.seeks:active::-ms-thumb {
    transform: scale(1.2);
    background: green;
}


#volumeoff_btn1{display:none;}


@media screen and (max-width: 700px) 
{
.content_div
{
float:left;width:100%;heightk:500px;margin-left:0%;backgroundk:#54013c;borderk:1px solid #ccc;	
}


}