#play { display: none; position: fixed; width: 100%; left: 0; bottom: 0; z-index: 100; background-color: #181C23;}
#play .jp-audio { float: left; width: 100%;}
#play .bordinha { -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;}
#play .borda { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;}

#play .controles { float: left; width: 100%; height: 60px; position: relative;}
#play .controles .auto { margin: 0 auto; width: 96%; max-width: 1200px;}
.playmobile.especial .barra-topo .setinha { display: none; position: absolute; width: 25px; height: 25px; top: 10px; left: 10px; background-image: url('../imagens/baixo.png'); background-size: 20px; background-position: 50%; background-repeat: no-repeat;}
#play .controles .barra_anun { display: none; float: left; width: 100%;}

#play .controles .capa { float: left; width: 45px; height: 45px; margin: 8px 2% 0 0; background-color: rgb(250 250 250 / 5%); overflow: hidden;}
#play .controles .capa img { float: left; width: 100%;    height: 100%;}

#play .controles .subtitle-mobile{display: none;}

#play .controles .mobtitle { display: none; position: absolute; width: 100%; top: 15px; left: 0; z-index: -1; padding: 0 105px 0 60px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
#play .controles .mobtitle .musica { float: left; width: 100%; height: 15px; overflow: hidden; font-size: 13px; color: #148bff;}
#play .controles .mobtitle .artista { float: left; width: 100%; height: 15px; overflow: hidden; font-size: 13px; color: #003970;}


.playmobile.especial #controlesmobile .mobtitle { display: none; position: absolute; width: 100%; top: 15px; left: 0; z-index: -1; padding: 0 105px 0 60px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.playmobile.especial #controlesmobile .mobtitle .musica { float: left; width: 100%; height: 15px; overflow: hidden; font-size: 13px; color: #148bff;}
.playmobile.especial #controlesmobile .mobtitle .artista { float: left; width: 100%; height: 15px; overflow: hidden; font-size: 13px; color: #003970;}

#play .controles .jp-controls { display: flex; justify-content: center; align-items: center; float: left; margin: 12px 0 0; padding-inline-start: 0; margin-block-end: 0; font-size: 0;}
#play .controles .jp-controls li a { float: left; padding: 0; outline: 0; background-color: #003970; background-position: 50%; background-repeat: no-repeat;}
#play .controles .jp-controls li a.jp-previous { width: 28px; height: 28px; background-image: url('../imagens/play/previous.png?');}
#play .controles .jp-controls li a.jp-play { margin: 0 10px; width: 36px; height: 36px; background-image: url('../imagens/play/play.png?');}
#play .controles .jp-controls li a.jp-pause { margin: 0 10px; width: 36px; height: 36px; background-image: url('../imagens/play/pause.png?');}
#play .controles .jp-controls li a.jp-next { width: 28px; height: 28px; background-image: url('../imagens/play/next.png?');}
#play .controles .jp-controls li a:hover { background-color: #2E2E2E;}

#play .controles .progresso { position: absolute; width: 600px; top: 0; left: 50%; margin: 15px 0 0 -300px;}
#play .controles .progresso .title-barra { width: 100%;
    text-align: center;
    font-size: 0.85em;
    color: #FFFFFF;
    align-items: center;
    display: flex;
    flex-grow: 1;
    justify-content: center;
    user-select: none;}
    
    #play .controles .progresso .title-barra .musica{margin-right: 5px;}
    #play .controles .progresso .title-barra .artista{margin-left: 5px;}
    

#play .controles .progresso .jp-progress { display: flex; justify-content: space-between; width: 100%;}
#play .controles .progresso .jp-progress .jp-current-time { float: left; font-size: 10px; color: rgb(46 178 255);}
#play .controles .progresso .jp-progress .jp-seek-bar { float: left; width: 100%; height: 10px; margin: 0 15px; background-color: rgb(255 255 255 / 30%); overflow: hidden; cursor:pointer;}
#play .controles .progresso .jp-progress .jp-play-bar { float: left; height: 10px; background-color: rgb(46 178 255); position: relative; overflow: hidden;}
#play .controles .progresso .jp-progress .jp-play-bar span { position: absolute; width: 10px; height: 10px; top: 0; right: 0; background-color: #FFFFFF;}
#play .controles .progresso .jp-progress .jp-duration { float: right; font-size: 10px; color: rgb(46 178 255);}

#play .controles .pr { float: right;}
#play .controles .pr .volume { float: left; width: 42px; height: 60px; position: relative;}
#play .controles .pr .volume .jp-volume-controls { display: none; position: absolute; top: -110px; left: 0; z-index: 1;}
#play .controles .pr .volume .jp-volume-controls .jp-volume-bar { float: left; width: 42px; height: 110px; padding: 0 4px 4px; background-color: rgb(12 12 12); overflow: hidden; cursor: pointer; transform: rotate(-180deg); -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
#play .controles .pr .volume .jp-volume-controls .jp-volume-bar-value { float: left; width: 100%; background-color: rgb(46 178 255); transform: rotate(-180deg); -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px;}
#play .controles .pr .volume .jp-volume-max { position: absolute; width: 42px; height: 60px; top: 0; left: 0; z-index: 2; background-image: url('../imagens/play/volume.png?d'); background-position: 50%; background-repeat: no-repeat;}
#play .controles .pr .volume:hover { background-color: rgb(12 12 12);}
#play .controles .pr .volume:hover .jp-volume-controls { display: block;}
#play .controles .pr .jp-toggles { float: left; padding-inline-start: 0; margin-block-end: 0; font-size: 0;}
#play .controles .pr .jp-toggles li a { float: left; width: 45px; height: 60px; background-position: 50%; background-repeat: no-repeat;}
#play .controles .pr .jp-toggles li a.jp-shuffle { background-image: url('../imagens/play/shuffle.png?d1');}
#play .controles .pr .jp-toggles li a.jp-shuffle-off { background-color: rgb(12 12 12); background-image: url('../imagens/play/shuffle.png?d1');}
#play .controles .pr .jp-toggles li a:hover { background-color: rgb(12 12 12);}
#play .controles .pr .jp-chave { float: left; width: 45px; height: 60px; background-image: url('../imagens/play/chave.png?d1'); background-position: 50%; background-repeat: no-repeat;}
#play .controles .pr .jp-chave:hover { background-color: rgb(12 12 12);}

#play .musicas { display: none; float: left; width: 100%;}
#play .musicas .jp-playlist { display: flex; width: 100%; padding: 8px 0; background-color: #FFFFFF; position: relative;}
#play .musicas .jp-playlist button.seta { width: 25px; height: 25px; margin: 22px 2px 0; border: 0; background-position: 50%; background-repeat: no-repeat;}
#play .musicas .jp-playlist button.seta.left {    position: absolute;
    outline: 0;
    transition: all .5s;
    border-radius: 35px;
    z-index: 1000;
    border: 0;
    background: rgb(222 222 222 / 50%);
    left: calc(4% + 1px);
    min-width: 43px;
    min-height: 43px;
    opacity: 1;
    cursor: pointer; float: left; margin-left: 5px; background-image: url('../imagens/play/seta-left.png?');background-position: 0;background-size: 40px;}
#play .musicas .jp-playlist button.seta.right {
    position: absolute;
    outline: 0;
    transition: all .5s;
    border-radius: 35px;
    z-index: 1000;
    border: 0;
    background: rgb(222 222 222 / 50%);
    right: calc(4% + 1px);
    min-width: 43px;
    min-height: 43px;
    opacity: 1;
    cursor: pointer;
    float: right;
    margin-right: 5px;
    background-image: url(../imagens/play/seta-right.png?);
    background-position: 4px;
    background-size: 40px;}
#play .musicas .jp-playlist button.seta.left:hover, #play .musicas .jp-playlist button.seta.right:hover{
        background-color: #ffffff;
}
#play .musicas .jp-playlist ul { float: left; width: 100%; height: 82px; overflow: hidden; padding: 0; margin: 0;}
#play .musicas .jp-playlist ul li { float: left; width: 16.6666%; padding: 2px 8px; position: relative; overflow: hidden; list-style: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
#play .musicas .jp-playlist ul li div { float: left; width: 100%; padding: 8px; height:80px; background-color: rgb(0 57 112 / 75%); -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
#play .musicas .jp-playlist ul li div a { display: flex; gap: 8px; color: #FFFFFF;}
#play .musicas .jp-playlist ul li div a img { float: left; width: 64px; height:64px; border-radius: 5px;}
#play .musicas .jp-playlist ul li div:hover { background-color: rgb(20 139 255);}
#play .musicas .jp-playlist ul li.jp-playlist-current div { background-color: rgb(50 139 210);}

#play .musicas .jp-playlist ul li div a .style_playnome{
    display: flex;
    flex-direction: column;
    height: 72px;
    justify-content: left;
    width: calc(100% - 80px);
}

#play .musicas .jp-playlist ul li div a .style_playnome h8{
          -webkit-box-orient: vertical;
    color: #fff;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 0;
    margin-bottom: .5rem;
    font: 13px / 1 Open Sans, sans-serif;
}

#play .musicas .jp-playlist ul li div a .style_playnome span{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 16px;
    font: 12px / 1 Open Sans, sans-serif;
}

#jp_container_4523 { float: left; width: 100%;}

@media(max-width: 767px){
	#play { bottom: 60px; border-top: 1px solid rgb(90 90 90 / 40%); border-bottom: 1px solid rgb(90 90 90 / 40%); background-color: #FFFFFF;}
	#play .controles .mobtitle { display: block;}
	#play .controles .jp-controls { float: right;}
	#play .controles .jp-controls li a.jp-play { margin: 0 1px;}
	#play .controles .jp-controls li a.jp-pause { margin: 0 1px;}
	#play .controles .progresso { display: none;}
	#play .controles .pr { display: none;}
}
@media {
	#play .musicas .jp-playlist ul li { width: 20%;}
}
@media (max-width: 700px){
	#play .musicas .jp-playlist ul li { width: 50%;}
}
@media (max-width: 400px){
	#play .musicas .jp-playlist ul li { width: 100%;}
}

/* PLAY ESPECIAL */
@media (max-width: 767px){
	#play.especial { height: 100%; top: 0px; bottom: auto;}
	#play.especial .controles { height: 100%;}
	#play.especial .controles .setinha { display: block;}
	#play.especial .controles .barra_anun { display: block;}
	#play.especial .controles .capa { float: left; width: 50%; height: 100%; margin: 11px 25% 0;}
	#play.especial .controles .jp-controls { width: 100%;}
	#play.especial .controles .mobtitle { display: none;}
	#play.especial .controles .progresso { display: block; position: relative; left: 0; float: left; width: 100%; margin: 21px 0 0;}
	#play.especial .controles .progresso .jp-title { font-size: 1em; color: #181C23;}
	#play.especial .controles .progresso .jp-progress { display: block;}
	#play.especial .controles .progresso .jp-progress .jp-current-time { position: absolute; bottom: -20px; left: 0; font-weight: bold;}
	#play.especial .controles .progresso .jp-progress .jp-seek-bar { margin: 0; background-color: #181C23;}
	#play.especial .controles .progresso .jp-progress .jp-duration { position: absolute; bottom: -20px; right: 0; font-weight: bold;}
}






/* PLAY MOBILE */
@media (max-width: 767px){
    #play .controles .capa img{height: 44px;width: 44px;}
    #play .controles .progresso .title-barra{display: none;}
    
    
    .playmobile.especial .barra-topo{align-items: center;
        display: flex;
        height: 60px;
        justify-content: space-between;
        padding: 0 8px;
        position: relative;background-color: #557cff;}
    .playmobile.especial .barra-topo  .setinha { display: block;height: 44px;padding: 0;width: 44px;}    
    
	.playmobile.especial { height: 100%; top: 0px; bottom: auto;}
	.playmobile.especial #controlesmobile { height: 100%;         display: flex;flex-direction: column;}
	.playmobile.especial #controlesmobile .auto{ height: 100%;         display: flex;flex-direction: column;}
	
	.playmobile.especial #controlesmobile .barra_anun { display: block; height:100px;}
	.playmobile.especial #controlesmobile .capa { width: 100%;
        align-items: center !important;
        height: 252px;
        margin-left: auto;
        margin-right: auto;
        position: relative;
        overflow: hidden;
        list-style: none;
        padding: 0;
        z-index: 1;}
        
        .playmobile.especial #controlesmobile .capa img {
    align-items: center;
    display: flex;
    justify-content: center;
    transition: transform .2s cubic-bezier(.455,.03,.515,.955);
    position: absolute;
    inset: 0px;
    box-sizing: border-box;
    padding: 0px;
    border: 0;
    margin: auto;
    display: block;
    width: 234px;
    height: 234px;
    min-height: 92%;
    max-height: 100%;
    object-fit: cover;
    border-radius: 4%;
}
        
	.playmobile.especial #controlesmobile .jp-controls { display: flex;
        justify-content: space-between;        margin: 24px 0 0;}
	.playmobile.especial #controlesmobile .mobtitle { display: none;}
	.playmobile.especial #controlesmobile .progresso { display: block; position: relative; left: 0; float: left; width: 100%; margin: 21px 0 0;}
	
	.playmobile.especial #controlesmobile .progresso .subtitle-mobile{        align-items: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 100%;
        background: aquamarine;        margin-bottom: 15px;}
	
	.playmobile.especial #controlesmobile .progresso .subtitle-mobile .musica{        font-size: 13px;
        color: #148bff;
        display: -webkit-box;
        font-weight: 600;
        -webkit-line-clamp: 1;
        overflow: hidden;
        text-align: center;
        text-overflow: ellipsis;}
	
	.playmobile.especial #controlesmobile .progresso .subtitle-mobile .artista{        color: #003970;
        -webkit-box-orient: vertical;
        display: -webkit-box;
        font-weight: 600;
        -webkit-line-clamp: 1;
        text-align: center;
        font-size: .9rem;
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;}
	
	.playmobile.especial #controlesmobile .progresso .jp-title { font-size: 1em; color: #181C23;}
	
	
	.playmobile.especial #controlesmobile .progresso .jp-progress { display: block;}
	.playmobile.especial #controlesmobile .progresso .jp-progress .jp-current-time { position: absolute; bottom: -20px; left: 0; font-weight: bold;}
	.playmobile.especial #controlesmobile .progresso .jp-progress .jp-seek-bar { margin: 0; background-color: #181C23;}
	.playmobile.especial #controlesmobile .progresso .jp-progress .jp-duration { position: absolute; bottom: -20px; right: 0; font-weight: bold;}
}