:root {
    --bc-total:rgba(255,198,169,0.3);
    --bc-playing:rgba(154,42,37,1);
    --bc-rewind:rgba(154,42,37,0.8);
}
.fp {
    margin-top:10px;
}

.fp table {
    border-collapse: collapse;
    font-weight:normal;
}

.fp_buttons {
    text-align:center;
}

.fp_controls a {
    position: relative;
    z-index: 100;

    display: inline-block;

    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    width: 45px;
    height: 45px;
    margin-right: 5px;

    color: #153c53;
    border: 1px solid #ddd;
    border-radius: 50%;
    background-color: #fff;
}

.fp_controls td {
    border:0px;
}

.fp_controls tr:hover {
    background-color:none;
}

.fp_controls td {
    background-color:#ffffff;
}

.fp_controls td:last-child {
	width:5%;
}

.fp_quality {
    display:block;
    position:relative;
    width:120px;
    height: 30px;
    padding-top: 12px;
    margin-top:-12px;
    line-height: 30px;
    margin-left: 10px;
    cursor: pointer;
}

.fp_quality:hover ul {
    display:block;
}

.fp_quality ul {
    display: none;
    position: absolute;
    bottom: 40px;
    left: 1px;
    width: 146px;
    z-index: 300;
    list-style: none;
    margin: 0px;
    padding:0px;
    background-color: #ffffff;
    border:1px solid #efefef;
}

.fp_quality ul:hover {
    border:1px solid #bbb;

}

.fp_quality li {
    color:#000000;
    font-weight: bold;
    padding:5px;
    padding-left:9px;
    padding-right:9px;
}

.fp_quality span {
    display: inline-block;
    padding: 2px 5px;
    color:#666;
    background-color:#ffffff;
    width:137px;
    text-align:center;
    border:1px solid #ddd;
}

.fp_quality span:hover {
    /*background-color:#f0f0f0;*/
    border: 1px solid #bbb;
}

/*.fp_quality span:hover i {
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
    transition: all .2s ease;
}

.fp_quality span i {
    transform-origin: 50% 50%;
    transform: rotate(0);
    transition: all .2s ease;
}*/

.fp_quality li.fp_select {
    color:#666;
    font-weight:normal;
    background-color:#ffffff;
    border:1px solid #ffffff;
}

.fp_quality li.fp_select:hover {
    background-color:rgba(255,198,169,0.5);
    color:#f50;
    /*border:1px solid #ddd;*/
}

.fp_bars {
	width:100%;
	padding-right: 10px;
	padding-left: 10px;
	position: relative;
	padding-top:14px;
}

.fp_title {
    padding-left:10px;
}

.fp_volume_icon {
    width: 18px;
    height: 18px;
    position:absolute;
    top:14px;
    left:15px;
    fill:#666;
}
.fp_icon {
    width:16px;
    height:16px;
}

.fp_time_current,.fp_time_total {
    line-height:35px;
}

.fp_nested_player {
    width:100%;
}

.fp_nested_player .fp_title {
    text-align:center;
}

.fp_controls  a.fp_title_link {
    width:100%;
    border:0px;
    background-color:transparent;
}

.fp_total {
	display: block;
    position: relative;
    height: 14px;
    width: 100%;
    z-index: 10;
    /*background-color: rgba(255,198,169,1);*/
    background-color: var(--bc-total);
}

.fp_playing {
    display: block;
    position: absolute;
    left:0px;
    width:0px;
    z-index: 20;
    /*background-color: rgba(255,84,0,0.8);*/
    background-color:var(--bc-playing);
    height: 14px;
}

.fp_rewind {
    display: block;
    position: absolute;
    left:0px;
    width:0px;
    z-index: 40;
    /*background-color: rgba(255,162,115,0.8);*/
    background-color:var(--bc-rewind);
    height: 14px;
}

.fp_list td {
	line-height: 30px;
	height: 30px;
}

.fp_time {
	white-space: nowrap;
}

.fp_track td {
    padding-top: 7px;
    padding-bottom: 0px;
    padding-left: 7px;
    padding-right: 15px;
    border-top: 1px solid #d0d0d0;
    width:100%;
}

.fp_track:hover td {
    background-color: #dbdbdb;
    cursor: pointer;
}

.fp_track td:first-child {
    width:20px;

}

.bt_play {
    left: 0;

    display: inline-block;

    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    width: 30px;
    height: 30px;
    margin-right: 0;
    padding: 0;

    border: 1px solid #ddd;
    border-radius: 50%;
    background: none 50% 50% no-repeat;
    background-color: #fff;
}


.bt_play:after {
    content: "";
    display: block;
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background: none repeat scroll 0 0 transparent;
    border-color: transparent transparent transparent #666;
    border-image: none;
    border-style: solid;
    border-width: 4px 0 4px 7px;
    left: 12px;
    top: 10px;
    position: relative;
}


.bt_pause {
    left: 0;

    display: inline-block;

    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    width: 30px;
    height: 30px;
    margin-right: 0;
    padding: 0;

    border: 1px solid #ddd;
    border-radius: 50%;
    background: none 50% 50% no-repeat;
    background-color: #fff;
    position: relative;
}

.bt_pause:before {
    content: "";
    display: block;
    left: 11px;
    top: 10px;
    position: absolute;
    width: 2px;
    height: 8px;
    background-color: #666;
}

.bt_pause:after {
    content: "";
    display: block;
    left: 15px;
    top: 10px;
    position: absolute;
    width: 2px;
    height: 8px;
    background-color: #666;
}

.bt_play_prev {
    margin-left:10px;
}

.bt_play_next:before {
    content: "";
    display: block;
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background: none repeat scroll 0 0 transparent;
    border-color: transparent transparent transparent #666;
    border-image: none;
    border-style: solid;
    border-width: 6px 0 6px 11px;
    left: 15px;
    top: 15px;
    position: relative;
}

.bt_play_next:after {
    content: "";
    display: block;
    left: 25px;
    top: 15px;
    position: absolute;
    width: 3px;
    height: 12px;
    background-color: #666;
}

.bt_play_prev:before {
    content: "";
    display: block;
    left: 13px;
    top: 15px;
    position: absolute;
    width: 3px;
    height: 12px;
    background-color: #666;
}

.bt_play_prev:after {
    content: "";
    display: block;
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background: none repeat scroll 0 0 transparent;
    border-color: transparent #666 transparent transparent;
    border-image: none;
    border-style: solid;
    border-width: 6px 11px 6px 0;
    left: 16px;
    top: 15px;
    position: absolute;}

.bt_play_play:after {
    content: "";
    display: block;
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background: none repeat scroll 0 0 transparent;
    border-color: transparent transparent transparent #666;
    border-image: none;
    border-style: solid;
    border-width: 4px 0 4px 7px;
    left: 14px;
    top: 13px;
    position: relative;
}

.bt_play_pause:after {
    content: "";
    display: block;
    left: 18px;
    top: 13px;
    position: absolute;
    width: 2px;
    height: 8px;
    background-color: #666;
}

.bt_play_pause:before {
    content: "";
    display: block;
    left: 14px;
    top: 13px;
    position: absolute;
    width: 2px;
    height: 8px;
    background-color: #666;
}

.bt_play_b:after {
    content: "";
    display: block;
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background: none repeat scroll 0 0 transparent;
    border-color: transparent transparent transparent #666;
    border-image: none;
    border-style: solid;
    border-width: 6px 0 6px 11px;
    left: 18px;
    top: 15px;
    position: relative;
}

.bt_pause_b:after {
    content: "";
    display: block;
    left: 22px;
    top: 15px;
    position: absolute;
    width: 3px;
    height: 12px;
    background-color: #666;
}

.bt_pause_b:before {
    content: "";
    display: block;
    left: 17px;
    top: 15px;
    position: absolute;
    width: 3px;
    height: 12px;
    background-color: #666;
}


.fp_play:hover,.fp_play_b:hover, .fp_play_prev:hover,.fp_play_next:hover {
    border-color: #bbb;
    transition: all .2s ease;
}

#volume_slider {
    width:100px;
    height:5px !important;
    margin-top:14px;
    /*background:none;
    background-color:#a2b1c3;*/
}

#volume_slider span {
    border-radius:50%;
}

#volume_slider span:focus {
    outline:0;
}

.volume_slider_bar {
    display:block;
    position:absolute;
    top:0px;
    left:0px;
    background-color:var(--bc-total);
    height:5px;
    width:100%;
}

.ui-slider-horizontal {
    height: 2px !important;
}

.ui-slider-horizontal .ui-slider-handle {
    top: -7px !important;
}