body.nrpm-active .naffin-player{
background:var(--nrpm-player-bg)!important;
color:var(--nrpm-player-text)!important;
border-color:var(--nrpm-border)!important;
min-height:var(--nrpm-height)!important;
padding-left:var(--nrpm-padding)!important;
padding-right:var(--nrpm-padding)!important;
}
body.nrpm-active .naffin-player .naffin-pp,
body.nrpm-active .naffin-pp{
width:var(--nrpm-play-desktop)!important;
height:var(--nrpm-play-desktop)!important;
min-width:var(--nrpm-play-desktop)!important;
min-height:var(--nrpm-play-desktop)!important;
border-radius:var(--nrpm-play-radius)!important;
background:var(--nrpm-play-bg)!important;
border:1px solid var(--nrpm-play-border)!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
}
body.nrpm-active .naffin-player .naffin-pp::before,
body.nrpm-active .naffin-pp::before{
border-left-color:var(--nrpm-accent)!important;
}
body.nrpm-active .naffin-player [class*="label"],
body.nrpm-active .naffin-player .naffin-onair{
font-size:var(--nrpm-label-size)!important;
}
body.nrpm-active .naffin-player [class*="title"],
body.nrpm-active .naffin-player .naffin-current{
font-size:var(--nrpm-title-size)!important;
}
body.nrpm-active .naffin-next,
body.nrpm-active .naffin-upnext,
body.nrpm-active [class*="upnext"]{
font-size:var(--nrpm-upnext-size)!important;
}
body.nrpm-active .nrpm-wave-reactive{
transform-origin:50% 50%;
will-change:transform,opacity;
}
body.nrpm-active .nrpm-wave-reactive.nrpm-wave-on{
animation:nrpmWavePulse var(--nrpm-speed,.55s) ease-in-out infinite alternate;
}
@keyframes nrpmWavePulse{
from{transform:scaleY(var(--nrpm-min,.45));opacity:var(--nrpm-opacity,.65)}
to{transform:scaleY(var(--nrpm-max,1));opacity:1}
}
@media(max-width:767px){
body.nrpm-active .naffin-player .naffin-pp,
body.nrpm-active .naffin-pp{
width:var(--nrpm-play-mobile)!important;
height:var(--nrpm-play-mobile)!important;
min-width:var(--nrpm-play-mobile)!important;
min-height:var(--nrpm-play-mobile)!important;
}
} @media (max-width: 767px){ body.nrpm-active .naffin-pp *,
body.nrpm-active .naffin-player .naffin-pp *{
display:none!important;
visibility:hidden!important;
opacity:0!important;
}
body.nrpm-active .naffin-pp,
body.nrpm-active .naffin-player .naffin-pp{
position:relative!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
width:56px!important;
height:56px!important;
min-width:56px!important;
min-height:56px!important;
padding:0!important;
margin:0!important;
border:1px solid rgba(255,255,255,.32)!important;
border-radius:50%!important;
background:#000!important;
background-image:none!important;
box-shadow:none!important;
outline:none!important;
overflow:hidden!important;
color:transparent!important;
text-indent:-9999px!important;
font-size:0!important;
line-height:0!important;
appearance:none!important;
-webkit-appearance:none!important;
} body.nrpm-active .naffin-pp::before,
body.nrpm-active .naffin-player .naffin-pp::before{
content:""!important;
position:absolute!important;
left:50%!important;
top:50%!important;
width:0!important;
height:0!important;
margin:0!important;
transform:translate(-38%,-50%)!important;
border-top:9px solid transparent!important;
border-bottom:9px solid transparent!important;
border-left:14px solid #fff!important;
border-right:0!important;
background:none!important;
box-shadow:none!important;
} body.nrpm-active .naffin-pp.nrpm-playing::before,
body.nrpm-active .naffin-player.nrpm-playing .naffin-pp::before{
width:14px!important;
height:18px!important;
transform:translate(-50%,-50%)!important;
border:0!important;
background:
linear-gradient(
90deg,
#fff 0 4px,
transparent 4px 10px,
#fff 10px 14px
)!important;
} body.nrpm-active .naffin-next,
body.nrpm-active .naffin-upnext,
body.nrpm-active .naffin-player-next,
body.nrpm-active [class*="upnext"],
body.nrpm-active [class*="up-next"]{
display:flex!important;
visibility:visible!important;
opacity:1!important;
height:auto!important;
max-height:none!important;
width:auto!important;
max-width:none!important;
overflow:visible!important;
clip:auto!important;
clip-path:none!important;
pointer-events:auto!important;
} body.nrpm-active .naffin-player{
display:grid!important;
grid-template-columns:56px minmax(0,1fr)!important;
grid-template-rows:auto auto!important;
column-gap:14px!important;
row-gap:8px!important;
align-items:center!important;
}
body.nrpm-active .naffin-player .naffin-pp{
grid-column:1!important;
grid-row:1!important;
}
body.nrpm-active .naffin-player .naffin-now,
body.nrpm-active .naffin-player .naffin-current,
body.nrpm-active .naffin-player [class*="onair-wrap"],
body.nrpm-active .naffin-player [class*="current-wrap"]{
grid-column:2!important;
grid-row:1!important;
min-width:0!important;
}
body.nrpm-active .naffin-player .naffin-next,
body.nrpm-active .naffin-player .naffin-upnext,
body.nrpm-active .naffin-player .naffin-player-next,
body.nrpm-active .naffin-player [class*="upnext"],
body.nrpm-active .naffin-player [class*="up-next"]{
grid-column:2!important;
grid-row:2!important;
justify-self:start!important;
align-self:start!important;
margin:0!important;
padding:0!important;
text-align:left!important;
}
} @media (max-width: 767px){
body.nrpm-active .naffin-player .naffin-next,
body.nrpm-active .naffin-player .naffin-upnext,
body.nrpm-active .naffin-player .naffin-player-next,
body.nrpm-active .naffin-player [class*="upnext"],
body.nrpm-active .naffin-player [class*="up-next"]{
justify-self:start!important;
align-self:start!important;
text-align:left!important;
width:auto!important;
max-width:calc(100vw - 120px)!important;
margin-left:0!important;
margin-right:90px!important;
padding-right:0!important;
transform:translateX(-18px)!important;
} body.nrpm-active .naffin-player .naffin-next *,
body.nrpm-active .naffin-player .naffin-upnext *,
body.nrpm-active .naffin-player .naffin-player-next *,
body.nrpm-active .naffin-player [class*="upnext"] *,
body.nrpm-active .naffin-player [class*="up-next"] *{
text-align:left!important;
}
} body.nrpm-active .naffin-player .naffin-meta,
body.nrpm-active .naffin-player .naffin-next{
display:flex!important;
flex-direction:column!important;
justify-content:center!important;
align-items:flex-start!important;
min-width:0!important;
text-align:left!important;
} body.nrpm-active .naffin-player .naffin-meta > span,
body.nrpm-active .naffin-player .naffin-next > span{
display:block!important;
margin:0 0 12px 0!important;
padding:0!important;
line-height:1!important;
font-size:var(--nrpm-label-size)!important;
color:var(--nrpm-accent)!important;
font-weight:800!important;
letter-spacing:.14em!important;
}
body.nrpm-active .naffin-player .naffin-meta > strong,
body.nrpm-active .naffin-player .naffin-next > strong{
display:block!important;
margin:0!important;
padding:0!important;
line-height:1.08!important;
color:var(--nrpm-player-text)!important;
font-size:var(--nrpm-title-size)!important;
font-weight:800!important;
white-space:nowrap!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
max-width:100%!important;
}
body.nrpm-active .naffin-player .naffin-meta > small,
body.nrpm-active .naffin-player .naffin-next > small,
body.nrpm-active .naffin-player .nrpm-upnext-time{
display:block!important;
margin:10px 0 0 0!important;
padding:0!important;
line-height:1.1!important;
color:#8f8f8f!important;
font-size:calc(var(--nrpm-upnext-size) - 1px)!important;
font-weight:400!important;
white-space:nowrap!important;
} @media (min-width:768px){
body.nrpm-active .naffin-player{
grid-template-columns:var(--nrpm-play-desktop) minmax(260px,360px) 1fr minmax(220px,320px)!important;
column-gap:22px!important;
align-items:center!important;
}
body.nrpm-active .naffin-player .naffin-next{
justify-self:start!important;
align-self:center!important;
margin:0!important;
transform:none!important;
}
} @media (max-width:767px){
body.nrpm-active .naffin-player .naffin-next,
body.nrpm-active .naffin-player .naffin-upnext,
body.nrpm-active .naffin-player .naffin-player-next{
flex-direction:column!important;
align-items:flex-start!important;
gap:0!important;
}
body.nrpm-active .naffin-player .naffin-next > span,
body.nrpm-active .naffin-player .naffin-upnext > span,
body.nrpm-active .naffin-player .naffin-player-next > span{
margin-bottom:10px!important;
}
} @media (max-width:767px){ body.nrpm-active .naffin-player{
display:grid!important;
grid-template-columns:56px minmax(112px,1.15fr) minmax(88px,.85fr)!important;
grid-template-rows:auto!important;
column-gap:14px!important;
row-gap:0!important;
align-items:center!important;
justify-content:start!important;
padding-left:16px!important;
padding-right:68px!important; }
body.nrpm-active .naffin-player .naffin-pp{
grid-column:1!important;
grid-row:1!important;
align-self:center!important;
justify-self:start!important;
} body.nrpm-active .naffin-player .naffin-meta{
grid-column:2!important;
grid-row:1!important;
align-self:center!important;
justify-self:stretch!important;
min-width:0!important;
margin:0!important;
padding:0!important;
transform:none!important;
} body.nrpm-active .naffin-player .naffin-next,
body.nrpm-active .naffin-player .naffin-upnext,
body.nrpm-active .naffin-player .naffin-player-next{
grid-column:3!important;
grid-row:1!important;
align-self:center!important;
justify-self:stretch!important;
display:flex!important;
flex-direction:column!important;
align-items:flex-start!important;
width:100%!important;
min-width:0!important;
max-width:none!important;
margin:0!important;
padding:0 0 0 14px!important;
border-left:1px solid rgba(255,255,255,.08)!important;
transform:none!important;
text-align:left!important;
} body.nrpm-active .naffin-player .naffin-next *,
body.nrpm-active .naffin-player .naffin-upnext *,
body.nrpm-active .naffin-player .naffin-player-next *{
text-align:left!important;
} body.nrpm-active .naffin-player .naffin-meta > span,
body.nrpm-active .naffin-player .naffin-next > span,
body.nrpm-active .naffin-player .naffin-upnext > span,
body.nrpm-active .naffin-player .naffin-player-next > span{
margin-bottom:8px!important;
white-space:nowrap!important;
}
body.nrpm-active .naffin-player .naffin-meta > strong,
body.nrpm-active .naffin-player .naffin-next > strong,
body.nrpm-active .naffin-player .naffin-upnext > strong,
body.nrpm-active .naffin-player .naffin-player-next > strong{
max-width:100%!important;
white-space:nowrap!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
}
body.nrpm-active .naffin-player .naffin-meta > small,
body.nrpm-active .naffin-player .naffin-next > small,
body.nrpm-active .naffin-player .naffin-upnext > small,
body.nrpm-active .naffin-player .naffin-player-next > small,
body.nrpm-active .naffin-player .nrpm-upnext-time{
margin-top:8px!important;
white-space:nowrap!important;
} body.nrpm-active .naffin-pp.nrpm-playing,
body.nrpm-active .naffin-player.nrpm-playing .naffin-pp{
border-color:var(--nrpm-accent)!important;
box-shadow:none!important;
}
body.nrpm-active .naffin-pp.nrpm-playing::before,
body.nrpm-active .naffin-player.nrpm-playing .naffin-pp::before{
background:
linear-gradient(
90deg,
var(--nrpm-accent) 0 4px,
transparent 4px 10px,
var(--nrpm-accent) 10px 14px
)!important;
}
} @media (max-width:390px){
body.nrpm-active .naffin-player{
grid-template-columns:54px minmax(104px,1.12fr) minmax(80px,.88fr)!important;
column-gap:11px!important;
padding-left:12px!important;
padding-right:58px!important;
}
body.nrpm-active .naffin-player .naffin-next,
body.nrpm-active .naffin-player .naffin-upnext,
body.nrpm-active .naffin-player .naffin-player-next{
padding-left:11px!important;
}
} @media (max-width:767px){
body.nrpm-active .naffin-player .naffin-next,
body.nrpm-active .naffin-player .naffin-upnext,
body.nrpm-active .naffin-player .naffin-player-next{
justify-content:center!important;
}
body.nrpm-active .naffin-player .naffin-next > span,
body.nrpm-active .naffin-player .naffin-next > strong,
body.nrpm-active .naffin-player .naffin-next > small,
body.nrpm-active .naffin-player .naffin-upnext > span,
body.nrpm-active .naffin-player .naffin-upnext > strong,
body.nrpm-active .naffin-player .naffin-upnext > small,
body.nrpm-active .naffin-player .naffin-player-next > span,
body.nrpm-active .naffin-player .naffin-player-next > strong,
body.nrpm-active .naffin-player .naffin-player-next > small,
body.nrpm-active .naffin-player .nrpm-upnext-time{
display:block!important;
width:100%!important;
margin-left:0!important;
padding-left:0!important;
text-indent:0!important;
align-self:flex-start!important;
justify-self:start!important;
transform:none!important;
left:auto!important;
}
body.nrpm-active .naffin-player .naffin-next > small,
body.nrpm-active .naffin-player .naffin-upnext > small,
body.nrpm-active .naffin-player .naffin-player-next > small,
body.nrpm-active .naffin-player .nrpm-upnext-time{
margin-top:8px!important;
position:relative!important;
}
}