/* ICONS */
.icon:not(.player-next):not(.jp-repeat):not(.player-pause):not(.player-load):not(.player-play) + .icon:not(.jp-repeat):not(.player-next):not(.player-pause):not(.player-load):not(.player-play){
    margin-left:7px;
}
.icon{
    width:23px;
    height:23px;
    cursor:pointer;
}
.icon svg{
    width:100%;
    height:100%;
}
.icon-btt-download {
    float: left;
    text-align:center;
    background:url(/assets/images/icone-download.png);
}

.icon-btt-download:hover {
    background:url(/assets/images/icone-download-hover.png);
}

.icon-btt-goto {
    float: left;
    text-align:center;
    background:url(/assets/images/icone-goto.png);
}

.icon-btt-goto:hover {
    background:url(/assets/images/icone-goto-hover.png);
}

.msg-warning {
    color: #c09853 !important;
    background-color: #fcf8e3 !important;
    border-color: #fbeed5 !important;
    font-size: 12px;
    padding: 12px 21px;
    margin-bottom: 4px;
}

/* DEFAULT */
.flex{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%}.flex-1{-webkit-box-flex:1;-ms-flex:1;flex:0 1 100%}.flex-2{-webkit-box-flex:2;-ms-flex:2;flex:0 2 50%}.flex-3{-webkit-box-flex:3;-ms-flex:3;flex:0 3 33.333%}.flex-4{-webkit-box-flex:4;-ms-flex:4;flex:0 4 25%}.flex-5{-webkit-box-flex:5;-ms-flex:5;flex:0 5 20%}.flex-6{-webkit-box-flex:6;-ms-flex:6;flex:0 6 16.6666%}.wrap{-ms-flex-wrap:wrap;flex-wrap:wrap}.space-btwn{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.center-full{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.center-x-row{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.center-y-row,.center-x-column{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.column{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.margin-auto{margin:0 auto}.transition{-webkit-transition:all .2s linear;transition:all .2s linear}.txt-center{text-align:center}.font-light,.font-light *{font-weight:300!important}.font-bold span,.font-bold strong,.font-bold{font-weight:700!important}.font-bolder span,.font-bolder strong,.font-bolder{font-weight:bolder!important}.font-italic,.font-italic *{font-style:italic!important}.row{margin-left:-15px;margin-right:-15px}a.tag-a{color:#000;text-decoration:none}
.gap-1{gap:4px;}.gap-2{gap:8px;}.gap-3{gap:16px;}.gap-4{gap:24px;}.gap-5{gap:32px;}.gap-6{gap:40px;}
.flex-column{flex-direction: column;}.flex-row{flex-direction: row;}
.text-1{font-size:8px;}.text-2{font-size:10px;}.text-3{font-size:12px;}.text-4{font-size:14px;}.text-5{font-size:16px;}.text-6{font-size:18px;}.text-7{font-size:20px;}.text-8{font-size:22px;}.text-9{font-size:24px;}

/* PADDING */
.p-1{padding:4px;}.p-2{padding:8px;}.p-3{padding:16px;}.p-4{padding:24px;}.p-5{padding:32px;}.p-6{padding:40px;}
.pb-1{padding-bottom:4px;}.pb-2{padding-bottom:8px;}.pb-3{padding-bottom:16px;}.pb-4{padding-bottom:24px;}.pb-5{padding-bottom:32px;}.pb-6{padding-bottom:40px;}
.pt-1{padding-top:4px;}.pt-2{padding-top:8px;}.pt-3{padding-top:16px;}.pt-4{padding-top:24px;}.pt-5{padding-top:32px;}.pt-6{padding-top:40px;}
.pl-1{padding-left:4px;}.pl-2{padding-left:8px;}.pl-3{padding-left:16px;}.pl-4{padding-left:24px;}.pl-5{padding-left:32px;}.pl-6{padding-left:40px;}
.pr-1{padding-right:4px;}.pr-2{padding-right:8px;}.pr-3{padding-right:16px;}.pr-4{padding-right:24px;}.pr-5{padding-right:32px;}.pr-6{padding-right:40px;}

/* MARGINS */
.m-1{margin:4px;}.m-2{margin:8px;}.m-3{margin:16px;}.m-4{margin:24px;}.m-5{margin:32px;}.m-6{margin:40px;}
.mb-1{margin-bottom:4px;}.mb-2{margin-bottom:8px;}.mb-3{margin-bottom:16px;}.mb-4{margin-bottom:24px;}.mb-5{margin-bottom:32px;}.mb-6{margin-bottom:40px;}
.mt-1{margin-top:4px;}.mt-2{margin-top:8px;}.mt-3{margin-top:16px;}.mt-4{margin-top:24px;}.mt-5{margin-top:32px;}.mt-6{margin-top:40px;}
.ml-1{margin-left:4px;}.ml-2{margin-left:8px;}.ml-3{margin-left:16px;}.ml-4{margin-left:24px;}.ml-5{margin-left:32px;}.ml-6{margin-left:40px;}
.mr-1{margin-right:4px;}.mr-2{margin-right:8px;}.mr-3{margin-right:16px;}.mr-4{margin-right:24px;}.mr-5{margin-right:32px;}.mr-6{margin-right:40px;}

.color-white{
    color:#FFF;
}
.hide-desktop{
    display: none;
}
.hide-mobile{
    display: flex;
}
@media (max-width: 991px){
    .hide-desktop{
        display: flex;
    }
    .hide-mobile{
        display: none;
    }
    .flex-column-mobile{
        flex-direction: column;
    }
}

/* CONTAINERS */
.content-container {
    background: #3A414C;
    border-radius: 8px;
    color:#FFF;
    font-family: var(--main-font-family);
}
.content-container label.option-selection {
    border-radius: 8px;
    border:1px solid #262D37;
    padding: 12px;
}
.content-container label.option-selection:has(input[type="radio"]:checked) {
    background: #30363F;
}
.content-container label.option-selection p{
    font-weight: bold;
}
.content-container label.option-selection input[type="radio"]{
    background: #D9D9D9;
    border-radius: 50%;
    width: 16px;
    height: 16px;
}

/* LISTS */
.main-list{
    display: flex;
}
.main-list div{
    padding-top: 0px !important;
        -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: flex;
}

.itens.externo{
    background: #494e57 !important;
}
.itens.externo .track{
    height: 33px !important;
}

.ui-state-active,
.ui-state-focus{
    font-size:12px !important;
    border:0px !important;
    margin:6px !important;
	margin-left:8px !important;
	border-left:6px solid #D24A43 !important;
    color:#333 !important;
    background: #FFF !important;
}

/* FORMULÁRIOS */
.form-configuracoes input[type="text"], .form-configuracoes input[type="number"]{
    width: 100%;
	min-width:100%;
	border:0px;
    font-family: 'Open Sans';
    height: 40px;
    padding-left: 10px;
}

.border-radius{
    border-radius: 4px;
}
.tag{
    display: table;
    padding: 2px 5px !important;
    margin-top: 0px;
    border-radius: 4px;
    font-weight: bold !important;
    margin-right: 7px;
    text-shadow: 2px 2px 5px #1d220b;
    text-transform: uppercase;
    color: #FFF;
}

.url-consultor{
    color:#FFF !important;
}
.url-consultor:hover{
    text-decoration: underline !important;
}


.btt-excluir:hover{
	background:url(/assets/images/icone-excluir-hover.png);
}

/* TELA DE LOGIN E CADASTRO */
#login-message{
    font-family: "Poppins";
    color: #FFF;
    text-align: center;
    margin-top: 35px;
    font-size: 25px;
    font-weight: 300;
    line-height: 1.25;
}
.login,
.esqueceusuasenha,
.cadastro{
    transform: translate(-50%, -50%);
    margin: 0px !important;
    height: auto !important;
}
.cadastro #cadastro .msgCadastro{
    display: flex;
    justify-content: center;
    align-items: center;
}
.login main, 
.esqueceusuasenha main, 
.cadastro main{
    background: #FFF !important;
}
.cadastro main{
    height: 625px !important;
}
.login header,
.esqueceusuasenha header,
.cadastro header{
    border-radius: 8px 8px 0 0 !important;
}
.login footer,
.esqueceusuasenha footer,
.cadastro footer{
    background: #eeeeee !important;
    border-radius: 0 0 8px 8px !important;
}
.login footer a,
.esqueceusuasenha footer a,
.cadastro footer a{
    color: #333 !important;
}
.esqueceusuasenha input[type="text"], .esqueceusuasenha input[type="password"], .esqueceusuasenha input[type="email"], .esqueceusuasenha input[type="num"], .esqueceusuasenha select,
.cadastro #cadastro input[type="text"], .cadastro #cadastro input[type="password"], .cadastro #cadastro input[type="email"], .cadastro #cadastro input[type="num"], .cadastro #cadastro select,
.login #logar input[type="text"], .login #logar input[type="password"], .login #logar input[type="email"], .login #logar input[type="num"], .login #logar select{
    border-radius: 4px !important;
    background-color: #f1f1f1 !important;
    border: 0px !important;
    width: calc(100% - 50px) !important;
    color: #333 !important;
}
.esqueceusuasenha input[type="submit"], 
.cadastro #cadastro input[type="submit"], 
.login #logar input[type="submit"]{
    border-radius: 4px !important;
}
.login #logar input[type="text"], .login #logar input[type="password"], .login #logar input[type="email"], .login #logar input[type="num"], .login #logar select{
    width: 100% !important;
}
.esqueceusuasenha main .campos-esqueceusenha,
.login main .campos{
    background: none !important;
    width: calc(100% - 50px) !important;
}
.esqueceusuasenha main .campos-esqueceusenha input,
.login main .campos input{
    width: 100% !important;
    border-radius: 4px;
    margin-left: 0px !important;
    background-color: #f1f1f1 !important;
}
.esqueceusuasenha .msgLogin,
.login .msgLogin{
    color: #897b7b !important;
    display: flex;
    justify-content: center;
    align-items: center;
}
[data-user-status="not-logged"]{
    display: flex;
    justify-content: center;
    overflow: auto !important;
}
[data-user-status="not-logged"] .login,
[data-user-status="not-logged"] .esqueceusuasenha,
[data-user-status="not-logged"] .cadastro{
    position: relative !important;
    transform: none !important;
    left: auto !important;
    top: auto !important;
    margin: 20px 0px !important;
    display: flex;
    justify-content: center;
    flex-direction: column;
}
[data-user-status="not-logged"] .login,
[data-user-status="not-logged"] .esqueceusuasenha{
    min-height: 650px !important;
}
[data-user-status="not-logged"] .cadastro{
    min-height: 850px !important;
}

@media (max-width:767px){

    .login,
    .esqueceusuasenha,
    .cadastro{
        top:20px !important;
        left: 20px !important;
        width: calc(100% - 20px) !important;
    }
    .cadastro #cadastro input[type="num"]{
        width: 100% !important;
    }

    .login,
    .esqueceusuasenha,
    .cadastro{
        transform: none !important;
    }
    [data-user-status="not-logged"] #login-message {
        font-size: 20px;
        padding: 0 15px;
    }
    [data-user-status="not-logged"] .field-cadastro {
        min-width: 100% !important;
    }
    [data-user-status="not-logged"] .cadastro #cadastro .titulo {
        padding-left: 0px !important;
    }
    [data-user-status="not-logged"] .cadastro main {
        min-height: 660px !important;
    }
    [data-user-status="not-logged"] .cadastro {
        min-height: 920px !important;
    }
    [data-user-status="not-logged"] .cadastro #cadastro .msgCadastro {
        padding: 8px 20px !important;
    }

}
textarea{
    resize: none;
}

.barra-topo .radio-fitness{
    display:flex;
    float: left;
    margin-right: 10px;
}
.barra-topo .radio-fitness .radio-fitness-description{
    font-family:'Poppins';
    width: 220px;
    font-weight: bold;
    font-size: 14px;
    color: #FFF;
    text-align: center;
    line-height: 1.3;
    display: flex;
    align-items: center;
}
.barra-topo .radio-fitness .radio-fitness-description strong{
    color: #66b22e;
}

.barra-topo-icones .icon{
    height: 35px;
    width: 35px;
    padding: 5px;
}
.barra-topo-icones :not(.menu-minha-conta) .icon:hover{
    background: var(--secondary-color);
}
.barra-topo-icones .btt-indique{
    background-position: 12px 8px !important;
}
.barra-topo-icones .btt-indique,
.barra-topo-icones .btt-upgrade{
    margin: 0px;
}
.barra-topo-icones .btt-upgrade{
    margin-left: 10px;
}
.menu-minha-conta{
    position:relative;
    cursor: default !important;
    font-size: 12px;
    color: #FFF;
    font-weight: 700;
    height: 60px;
}
.menu-minha-conta .submenu-minha-conta{
    right: 0px;
    top: 60px;
    width: 100%;
}
.menu-minha-conta:hover .submenu-minha-conta{
	display:block;	
}

.descricao-playlists-lista .icone-playlists-share {
    width: 30px;
    height: 31px;
    float: left;
    margin-top: 12px;
    background: url(/assets/images/icone-share.png) no-repeat;
    background-size: 100%;
    margin-left: 15px;
}
.descricao-playlists-lista .icone-playlists-share:hover{
	background:url(/assets/images/icone-share-hover.png) no-repeat;	
	background-size: 100%;
}

.responsivo-icone-barra-left.share{
    background: url(/assets/images/icone-share.svg) 50% 50% no-repeat;
    background-size: 20px;
}

.responsivo-nano .nano-pane{
    margin-right: 0px !important;
}

@media(max-width:767px){
    .reponsivo-abrir-menu{
        float: right !important;
        margin-right: 10px;
    }
    .reponsivo-abrir-menu-busca + .reponsivo-abrir-menu{
        float: left !important;
        margin-right: 0px;
    }
}

/* MENSAGENS */
.alert-msg{
	padding: 5px !important;
}
.alert-msg .text-msg{
    display: flex !important;
    align-content: center !important;
    justify-content: center !important;
    flex-wrap: wrap;
    height: 100%;
}

.btt-atendimento{
    margin-top:0px !important;
    min-width: 145px !important;
}
.btt-atendimento.btt-indique{
    min-width: 160px !important;
}
.submenu-minha-conta {
    display: none;
    position: absolute !important;
    top: 60px !important;
    left: 0px !important;
    z-index: 200 !important;
    width: 100% !important;
}

.login .msgLogin{
    display: flex;
    justify-content: center;
    align-items: center;
}

.ui-widget.ui-widget-content{
    z-index: 195 !important;
}
.ui-widget.ui-datepicker{
    z-index: 999999999 !important;
}
.btt-atendimento {
    border-radius: 4px;
}

/* BARRA RIGHT */
.barra-right .ritmo-ver-todos{
    float: left;
    color: #FFF;
    font-weight: bold;
    text-transform: uppercase;
    margin-top: 11px;
    font-size: 10px;
}
.barra-right .cabecalho-playlist-execucao{
    padding-top: 15px !important;
    padding-bottom: 15px !important;
    overflow: auto !important;
    flex: 0 1 auto !important;
}
.barra-right .botoes-cabecalho-playlist a{
    padding-bottom: 5px !important;
    height: auto !important;
    background-position: 8px 50% !important;
}
.barra-right .playlist-sugeridas{
    overflow:hidden !important;
    display: flex;
    flex-direction: column;
}
.barra-right .playlist-sugeridas .playlist-musicas{
    overflow-y: auto !important;
    position: relative !important;
    flex: 1 1 0% !important;
}

/* LISTAS */
.ul-list-items .list-header{
    width: 100%; 
    display: flex;
}
.ul-list-items .list-row{
    width: 100%; 
    display: flex;
}
.ul-list-items li{
    min-height:50px;
    color: #FFF;
    font-size: 12px;
    display: flex;
    align-items: center;
}
.ul-list-items li + li{
    border-top: 1px solid #2c323a;
}
.ul-list-items li:not(.list-header){
    background:#252C33;	
}
.ul-list-items li:not(.list-header):hover{
    background:#20262C;	
}
.ul-list-items:has(.nenhuma-musica) li{
    justify-content: center;
}