.bp-mute-unmute-btn { position: absolute; width: 20px; height: 16px; top: 15px; right: 15px; z-index: 9; cursor: pointer; display: flex; justify-content: center; }
.bp-mute-unmute-btn .volume-off { display: none; } 
.muted .bp-mute-unmute-btn .volume-off { display: block; } 
.muted .bp-mute-unmute-btn .volume-up { display: none; }
.rounded-image-section svg { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } 
.total-stroke{ stroke: #E7C1FF; }
.viewed-stroke{ stroke: rgb(109 119 216 / 70%) }
/* artist */ 
.artist-detail-section {    display: flex; align-items: flex-start; margin-bottom: 50px;} 
.artist-detail-section .artist-info-section { background: url(/img/frontend-new/artist.png); background-position: center; background-repeat: no-repeat; text-align: center; padding: 73px 0px 70px; border-radius: 6px; margin-right: 15px; min-width: 388px; } 
.artist-info-section img { border-radius: 50%; border: 3px solid #FFF; background: #FFF; box-shadow: 0px 4px 9px 0px rgba(0, 0, 0, 0.15); width: 100%; height: 100%; margin-bottom: 40px; object-fit: cover; aspect-ratio: 6/6; }
.main-artist-img { margin: 0px 64px; }
.artist-detail h3 { color: #FFF; font-size: 20px; font-weight: 600; line-height: 130%; } 
.artist-detail small { color: #FFF; font-size: 14px; font-weight: 500; line-height: 130%; } 
.videos-content { border-radius: 6px; margin-bottom: 16px; } 
.video-title { color: #121213; font-size: 20px; font-weight: 600; line-height: 130%; } 
.detail-card .card-list { margin-bottom: 20px; } 
.detail-card hr { width: 100%; margin-bottom: 20px; margin-top: 0px; } 
.detail-card hr:last-child { display: none; } 
.detail-card .card-list h3 { min-height: auto; margin: 0px 0px 8px 0px; } 
.card-wrapper-content .button-center-section { margin-top: 30px; } 
.title-section h1 { font-weight: 600; }
.flex-col-end select { -webkit-appearance: auto; padding: 9px 15px 8px 13px; }
/* videos */ 
.artist-video-section { width: 100%; } 
.video-container { position: relative; padding-top: 56%; margin-bottom: 15px; } 
.video-container-video { border-radius: 6px; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; }
.video-container-controls { position: absolute; z-index: 2; bottom: 0px; width: 100%; display: flex; align-items: flex-end; padding-left: 20px; padding-right: 20px; transition: all 150ms ease; border-radius: 6px; opacity: 0.9; background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.94) 100%); padding-top: 35px;} 
.button-bar-wrap { display: flex; align-items: center; width: 100%; padding: 20px 0px; } 
.video-container-controls.visible { opacity: 1; } 
.weekly-newsletter .subscription-form-wrapper button.btn {justify-content: center;}
.weekly-newsletter .subscription-form-wrapper .btn i { margin-right: 0;}

.video-container-controls .progress-unit { width: calc(100% - 42px); cursor: pointer; height: 18px; position: absolute; left: 0; top: 20px; margin-left: 21px; margin-right: 21px; }
/* .video-container-controls .progress-unit { width: calc(100% - 42px); cursor: pointer; position: absolute; left: 0; top: 0; margin-right: 21px; display: flex; margin-left: 21px; border-radius: 6px; background: linear-gradient(to right, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 0%, rgba(228, 228, 228, 0.3) 0%, rgba(228, 228, 228, 0.3) 100%); height: 3px; transition: background 450ms ease-in; border: none; padding: 0; } 
.video-container-controls .progress-unit[type="range"]::-webkit-slider-thumb { width: 13px!important; height: 13px!important; border-radius: 50%; -webkit-appearance: none; cursor: pointer; background: #E4E4E4; } */
.video-container-controls .progress-unit:before { content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 100%; height: 3.5px; background: #E4E4E4; opacity: 0.4; border-radius: 6px; } 
.video-container-controls .progress-current { position: absolute; top: 50%; left: 0; height: 5px; background: #E4E4E4; z-index: 2; transform: translateY(-50%); border-radius: 6px; } 
.video-container-controls .progress-current:before { content: ''; display: block; position: absolute; right: 0; top: 50%; transform: translate(50%, -50%); border-radius: 50%; width: 13px; height: 13px; background: #E4E4E4; } 
.video-container-controls .progress-unit .tooltip { position: absolute; bottom: 0; left: 50%; width: 100px; } 
.video-container-controls .progress-unit .tooltip video { width: 100%; } 
.video-container-controls .control { border: 0; padding: 0; background: transparent; outline: none; cursor: pointer; display: flex; align-items: center; justify-content: center; } 
/* .video-container-controls .control.control-play { margin: 0px 56px; }  */
/* .video-container-controls .control svg { fill: #fff; }  */
.video-container-controls .control:hover i, .video-container-controls .control:hover svg, 
.video-container-controls .control-volume-button:hover img { transition: all 0.3s ease; opacity: 0.4; } 
.video-container-controls .control i { font-size: 28px; color: #fff; } 
.video-container-controls .control-play.paused .fa-play, .video-container-controls .control-volume-button .volume-up, 
.video-container-controls .control-play .fa-pause, .video-container-controls .control-volume.muted .volume-off { display: inline-flex; } 
.video-container-controls .control-play.paused .fa-pause, .video-container-controls .control-volume-button .volume-off, .video-container-controls .control-play.paused svg, 
.video-container-controls .control-play .fa-play, .video-container-controls .control-volume.muted .volume-up { display: none; } 
.video-container-controls .control-volume-slider:focus { outline: none; } 
.video-container-controls .control-volume { width: unset; } 
.video-container-controls .control-volume-button { width: 20px; display: flex; justify-content: flex-start; } 
.video-container-controls .control-volume-slider[type="range"] { display: flex; width: 47px; margin-left: 10px; border-radius: 6px; background: linear-gradient(to right, #ffffff 0%, #ffffff 40%, rgb(228 228 228 / 30%) 40%, rgb(228 228 228 / 30%) 100%); height: 3px; transition: background 450ms ease-in; -webkit-appearance: none; border: none; padding: 0; } 
.video-container-controls .control-volume-slider[type="range"]::-webkit-slider-thumb { width: 5px!important; height: 5px!important; border-radius: 50%; -webkit-appearance: none; cursor: ew-resize; background: #E4E4E4; } 
.video-container-controls .control-right { width: 100%; justify-content: flex-end; } 
.duration-time { color: #FFF; text-align: right; font-family: Roboto; font-size: 18px; font-weight: 500; line-height: 140%; text-transform: uppercase; margin-left: 30px; }
.video-container-controls .muted .control-volume-slider[type="range"] { background: linear-gradient(to right, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 0%, rgba(228, 228, 228, 0.3) 0%, rgba(228, 228, 228, 0.3) 100%)!important; }
.control.control-backward span, .control.control-forward span { color: #FFF;  font-size: 12px; font-weight: 800; line-height: 140%; text-transform: uppercase; padding-top: 4px;}
.control.control-backward span, .control.control-forward span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.control.control-backward, .control.control-forward { position: relative; }
.video-container-controls .control.control-play svg { fill: #fff; }
.playBtn:hover { color: #fff; }
.full-screen-video-player.small-video-player .backward-btn svg, .full-screen-video-player.small-video-player .forward-btn svg {height: 28px!important;width: 24px;}
.small-video-player .backward-btn svg, .small-video-player .forward-btn svg { height: 20px!important; width: 17px; }
.video-player-controls-section .backward-btn a span, .video-player-controls-section .forward-btn a span { color: #fff; font-size: 9px; line-height: 16px; font-weight: 800; padding-top: 2px; }
.video-player-controls-section .backward-btn a span, .video-player-controls-section .forward-btn a span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.video-player-controls-section .backward-btn, .video-player-controls-section .forward-btn { position: relative; }
.left-controls ul li:nth-child(4) {margin-left: 0px;margin-right: 20px;}
.left-controls ul li:nth-child(2) {margin: 0px 0px 0px 20px;}
/* loader */ 
.lds-ellipsis div { position: absolute; top: 33px; width: 13px; height: 13px; border-radius: 50%; background: #f00; animation-timing-function: cubic-bezier(0, 1, 1, 0); } 
.lds-ellipsis div:nth-child(1) { left: 8px; animation: lds-ellipsis1 0.6s infinite; } 
.lds-ellipsis div:nth-child(2) { left: 8px; animation: lds-ellipsis2 0.6s infinite; } 
.lds-ellipsis div:nth-child(3) { left: 32px; animation: lds-ellipsis2 0.6s infinite; } 
.lds-ellipsis div:nth-child(4) { left: 56px; animation: lds-ellipsis3 0.6s infinite; }
@keyframes lds-ellipsis1 { 0% { transform: scale(0); } 100% { transform: scale(1); } } 
@keyframes lds-ellipsis3 { 0% { transform: scale(1); } 100% { transform: scale(0); } } 
@keyframes lds-ellipsis2 { 0% { transform: translate(0, 0); } 100% { transform: translate(24px, 0); } }
.lds-ellipsis { position: absolute; top: 50%; right: 50%; transform: translate(-50%, -50%); } /* loader */ 
.header .navi > li:nth-child(2), .header .navi > li:nth-child(10) { position: relative; } 
.dropdown-desk { position: absolute; top: auto; left: 0; background: #fff; min-width: 160px; /* display: none; */ opacity: 0; -webkit-transform: scale(0); -ms-transform: scale(1); transform: scale(0); transition: all 0.3s cubic-bezier(0.86, 0, 0.07, 1); transform-origin: top left; }
.dropdown-desk li { position: relative; display: block; line-height: 21px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; padding: 0px 11px 7px 11px; } 
.dropdown-desk li a { font-weight: 400; color: #eb0303; font-family: var(--body-font); font-size: 15px; transition: all .5s ease; text-transform: capitalize; position: relative; } 
.header .navi > li:nth-child(2):hover .dropdown-desk, .header .navi > li:nth-child(10):hover .dropdown-desk { opacity: 1; transform: scale(1); }
.dropdown-desk li:hover a { color: #121213; } 
.dropdown-desk li a::before { content: ""; position: absolute; bottom: -5px; left: 0; width: 0; height: 0.2rem; background-color: #121213; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } 
.dropdown-desk li:hover a::before { width: 100%; } 
.footer-widget .footer-nav li { list-style: none; line-height: 27px; } 
.footer-widget .footer-nav li a { color: #969696; font-size: 13px; font-weight: 400; } 
.footer-widget .footer-nav li a:hover { color: #fff; text-decoration: underline; } 
.audio-on-off .fal.fa-volume { color: #fff; } 
.song-list a.active .song-info { font-weight: 600; line-height: 130%; text-decoration-line: underline; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.pagination_block ul li a { width: 30px; height: 30px; display: flex; border: 1px solid #cccccc; color: #cccccc; text-align: center; font-size: 12px; justify-content: center; align-items: center; } 
.search-section-mobile form { width: 100%; }
.commenting_section .btn.btn-primary { box-shadow: none; justify-content: center; }
.weekly-newsletter button.btn { box-shadow: none; }
.full-screen-video-player .full-video-player .video-player{height:100vh;width:100%;aspect-ratio:1/1;}
.fullScreen .controls{margin-top:0;align-items:self-start;}
.fullScreen .left-controls,.fullScreen .right-controls{margin-top:0;height:48px;}
.player-wrapper .collapseBtn{align-self:center;}
.artist-detail-section .video-container .button-bar-wrap .control-previous{margin-right:25px;}
.artist-detail-section .video-container .button-bar-wrap .control-backward{margin-right:30px;}
.artist-detail-section .video-container .button-bar-wrap .control-play.paused{margin-right:0;}
.artist-detail-section .video-container .button-bar-wrap .control-forward{margin-left:30px;}
.artist-detail-section .video-container .button-bar-wrap .control-next{margin-left:25px;}
.control-play svg{width:28px;height:28px;}
/* .news-left-link ul li a svg:hover path {fill: #eb0303;  transition: all 0.4s ease;} */
.news-left-link ul li a {transition: all 0.2s ease-in;}
.news-left-link ul li a svg:hover path:nth-child(1), .news-left-link ul li a svg:hover rect { fill: #eb0303;}
.news-left-link ul li a svg:hover path:nth-child(2) { fill: #fff;}

/*=================
Media Screen
=================*/
@media only screen and (max-width: 1599px) { 
    .artist-detail-section .artist-info-section { min-width: 31%; } 
} 
@media(max-width: 1300px) {
    .header .navi > li .dropdown-desk {display: none!important;}
}
@media only screen and (max-width: 1275px) { 
    .video-container-controls .control.control-forward { margin-left: 40px; margin-right: 20px; } 
    .video-container-controls .control.control-backward { margin-right: 40px; } 
}
@media only screen and (max-width: 1199px) { 
    .artist-detail-section .artist-info-section { padding: 50px 0; } 
    .duration-time span { white-space: nowrap; } 
}
@media only screen and (max-width: 1050px) { 
    /* .video-container-controls .control.control-play { margin: 0px 18px; }  */
    .video-container-controls .control.control-forward { margin-left: 30px; margin-right: 15px; } 
    .video-container-controls .control.control-backward { margin-right: 30px; } 
}
@media only screen and (max-width: 991px) { 
    .detail-card hr { display: none; } 
    .main-artist-img { margin: 0px 36px; }
    .artist-info-section img { margin-bottom: 22px; max-width: 60%; }
    /* .video-container-controls .control.control-play { margin: 0px 15px; }  */
    .video-container-controls .control.control-forward { margin-left: 15px; margin-right: 10px; } 
    .video-container-controls .control.control-backward { margin-right: 15px; } 
    .duration-time {  font-size: 10px; margin-left: 10px; }
}
@media only screen and (max-width: 850px) { 
    .artist-detail-section .artist-info-section { padding: 35px 0; }
    .artist-detail-section .video-container .button-bar-wrap .control-backward {margin-right: 14px;}
    .artist-detail-section .video-container .button-bar-wrap .control-forward {margin-left: 14px;}
}
@media only screen and (max-width: 767px) {
    .artist-detail-section .artist-info-section{display:flex;justify-content:start;align-items:center;background:url(/img/frontend-new/artist-mobile.png);margin:0 auto;width:calc(100% - 30px);padding:9px 16px;gap:15px;background-position:center;background-repeat:no-repeat;background-size:100%;text-align:start;}
    .main-artist-img{margin:0;width:100%;max-width:18%;}
    .artist-info-section img{margin-bottom:0;max-width:100%;}
    .detail-page-wrapper h1{font-size:22px;}
    .artist-detail-section{flex-direction:column;margin-bottom:30px;}
    .video-container-controls .control svg{width:23px;height:23px;}
    .video-container-controls .control i{font-size:18px;}
    .video-container{margin-bottom:9px;margin-top:15px;}
    .video-title{font-size:16px;padding:0 15px;}
    .button-bar-wrap{padding:11px 0;}
    .section-content{border:none;padding:16px 16px 30px;border-radius:unset;}
    .detail-page-wrapper .section-content .heading-section{flex-direction:column;align-items:flex-start;gap:15px;border:none;}
    .heading-section h2{font-size:18px;}
    .detail-page-wrapper .right-column,.detail-page-wrapper #MostPopularInput{width:100%;}
    .video-wrapper{margin-left:0;}
    .detail-page-wrapper .detail-card .card-list{max-width:33.33%;padding:0 13px 0 0;}
    .video-container-video{border-radius:unset;}
}
@media only screen and (max-width: 589px) {
    .detail-page-wrapper .detail-card .card-list{max-width:50%;}
    .section-content .heading-section{flex-direction:column;align-items:flex-start;gap:15px;border:none;}
    .section-content .right-column,.section-content #ArtistCategoryInput,.section-content #latestNewsInput2-button.ui-selectmenu-button.ui-button{width:100%;}
    .pagination-section .pagination-links{flex-wrap:wrap;}
    .artist-section-list .artist-listing .artist-image{height:156px;width:156px;}
    .artist-section-list{grid-template-columns:repeat(auto-fill,minmax(156px,1fr));}
    .page-wrapper h1{font-size:20px;}
}