@charset "utf-8";

#minhaconta {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    background-color: #f2f2f2;
    padding: 20px;
    display: flex;
    justify-content: space-between;
}

#minhaconta .lado1 { 
    float: left; 
    width: 20%;
}

#minhaconta .lado2 { 
    float: right; 
    width: 76%; 
}

#minhaconta .submenu {
    float: left;
    width: 100%;
    text-align: center;
}

#minhaconta .submenu strong {
    float: left;
    width: 90%;
    padding: 10px;
    margin: 0 0 10px;
    background-color: #7628ce; /* Cor de fundo do submenu (verde) */
    text-transform: none; /* Não transforma o texto para maiúsculas */
    text-align: left;
    color: #fff;
    line-height: 1;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    display: flex;
    align-items: center;
    font-size: 1.2em; /* Ajusta o tamanho da fonte */
}

#minhaconta .submenu strong::before {
    content: "";
    font-size: 14px;
    margin-right: 10px;
}

#minhaconta .submenu button {
    float: left;
    width: 90%;
    padding: 15px 20px;
    margin: 1px 0;
    background-color: transparent;
    text-transform: capitalize; /* Transforma a primeira letra de cada palavra em maiúscula */
    text-align: left;
    border-radius: 10px;
    display: flex;
    align-items: center;
    font-size: 1em; /* Ajusta o tamanho da fonte */
}

#minhaconta .submenu button:nth-child(1)::before {
    content: "";
    font-size: 18px;
    margin-right: 10px;
}

#minhaconta .submenu button:nth-child(2)::before {
    content: "";
    font-size: 14px;
    margin-right: 10px;
}

#minhaconta .submenu button:nth-child(3)::before {
    content: "";
    font-size: 14px;
    margin-right: 10px;
}

#minhaconta .submenu button:hover {
    background-color: #7628ce; /* Cor de fundo ao passar o mouse sobre os botões (verde mais escuro) */
    color: #fff; /* Cor do texto ao passar o mouse */
}

#minhaconta .submenu button.ativo {
    background-color: #7628ce; /* Cor de fundo do botão ativo (verde mais escuro) */
    color: #fff; /* Cor do texto do botão ativo */
}

button.sair {
    color: #171717; /* Cor do texto */
    border: none;
    border-radius: 10px; /* Cantos arredondados */
    padding: 10px 20px;
    font-size: 1.2em;
    font-weight: bold;
    text-transform: uppercase; /* Transformar o texto para maiúsculas */
    cursor: pointer;
    transition: background-color 0.3s;
}

button.sair:hover {
    background-color: #007BFF; /* Cor de fundo ao passar o mouse (azul) */
}



#minhaconta .meulink { float: left; width: 100%; padding: 21px 10px 20px; margin: 0 0 11px; background-color: rgb(225 211 184); font-size: 1.1em; overflow: hidden;}
#minhaconta .meulink:hover { background-color: rgb(225 211 184 / 90%);}

#minhaconta .mcperfil { float: left; width: 110%;}
#minhaconta .mcperfil .foto { float: left;}
#minhaconta .mcperfil .banner { float: right;}
#minhaconta .mcperfil .imagem {
  width: 100%;
  padding: 20px;
  background: #fff; /* Fundo branco */
  border-radius: 10px;
  position: relative;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

#minhaconta .mcperfil .imagem .ident {
  text-transform: uppercase;
  text-align: center;
  font-weight: bold;
  font-size: 1.2em;
  color: #333; /* Texto escuro */
  margin: 0;
}

#minhaconta .mcperfil .imagem .lin {
  padding: 2px;
  margin: 10px 0;
  
  border-radius: 10px;
  position: relative;
  box-shadow: 0px 10px 70px rgba(0, 0, 0, 0.1);
}

#minhaconta .mcperfil .imagem .img { float: left; width: 100%; height: 100px; margin: 0 0 11px; position: relative;}
#minhaconta .mcperfil .imagem .img img { position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
#minhaconta .mcperfil .imagem .adicionar { float: left; width: 100%;}
#minhaconta .mcperfil .imagem .adicionar .file {
  float: left;
  width: 95%;
  
  position: relative;
  text-align: center;
  border-radius: 30px; /* Cantos arredondados */
  padding: 20px; /* Espaçamento interno */
}

#minhaconta .mcperfil .imagem .adicionar .file em {
  float: left;
  width: 100%;
  height: 60px; /* Altura da área de upload */
  background-image: url('seu-caminho-para-a-imagem.png'); /* Sua imagem de upload */
  background-position: 50%;
  background-repeat: no-repeat;
}

#minhaconta .mcperfil .imagem .adicionar .file input {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 2;
  opacity: 0;
  font-size: 0;
}

#minhaconta .mcperfil .imagem .adicionar .file:hover {
  background: linear-gradient(90deg, #C5C5C5, #E5E5E5); /* Gradiente invertido no hover */
}

#minhaconta .mcperfil .imagem .adicionar .file em { float: left; width: 100%; height: 60px; background-image: url('../../imagens/geral/preto-upload-file-img.png'); background-position: 50%; background-repeat: no-repeat;}
#minhaconta .mcperfil .imagem .adicionar .file input { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 2; opacity: 0; font-size: 0;}
#minhaconta .mcperfil .imagem .adicionar .file:hover { background-color: rgb(90 90 90 / 30%);}
#minhaconta .mcperfil .imagem .deletar { position: absolute; top: 5px; right: 5px;}
#minhaconta .mcperfil .imagem .deletar .submit { float: left; width: 30px; height: 30px; background-color: rgb(200 40 40); font-weight: bold; font-size: 1em;}
#minhaconta .mcperfil .imagem .deletar .submit:hover { background-color: rgb(200 0 0);}
#minhaconta .mcperfil .imagem .instrucao { float: left; width: 100%; padding: 5px 0; text-align: center;}

#minhaconta .mccds { float: left; width: 60%;}
#minhaconta .mccds .novo {

    float: left;
    width: 150%; /* Reduz a largura para 100% */
    padding: 80px 10px; /* Aumenta o padding vertical */
    background: linear-gradient(90deg, #7628ce, #7D49E2);
    text-transform: uppercase;
    font-weight: bold;
    font-size: 1em;
    color: #fff;
    border-radius: 10px;
    margin-bottom: 20px; /* Espaço inferior */
}


#minhaconta .mccds .novo:hover {
  background: linear-gradient(90deg, #7D49E2, #1D1E63); /* Inverte o gradiente no hover */
}

#minhaconta .mccds .listar {
  float: left;
  width: 150%;
  padding: 10px;
  margin: 19px 0 0;
}

#minhaconta .mccds .listar .ident {
  float: left;
  width: 100%;
}

#minhaconta .mccds .listar .ident b {
  float: left;
  padding: 0 1px;
  border-bottom: 5px solid #1D1E63; /* Azul marinho */
  text-transform: uppercase;
  font-size: 1.2em;
}

#minhaconta .mccds .listar .item {
  float: left;
  width: 100%;
  padding: 20px 90px 20px 100px;
  border-bottom: 1px solid rgba(90, 90, 90, 0.3);
  position: relative;
  border-radius: 10px; /* Bordas arredondadas */
}

#minhaconta .mccds .listar .item .imagem {
  position: absolute;
  width: 90px;
  height: 90px;
  top: 20px;
  left: 0;
}

#minhaconta .mccds .listar .item .imagem img {
  width: 80px;
  border-radius: 50%; /* Transforma a imagem em um círculo */
}

#minhaconta .mccds .listar .item .ver {
  float: left;
  width: 107%;
  text-transform: uppercase;
  font-weight: bold;
  color: #1D1E63; /* Azul marinho */
}

#minhaconta .mccds .listar .item .ver:hover {
  text-decoration: underline;
}

#minhaconta .mccds .listar .item .detalhes {
  float: left;
  width: 100%;
  margin: 5px 0;
  opacity: 0.9;
}

#minhaconta .mccds .listar .item .detalhes b {
  font-weight: normal;
}

#minhaconta .mccds .listar .item .nuns {
  float: left;
  width: 100%;
  opacity: 0.9;
}

#minhaconta .mccds .listar .item .nuns .geito {
  
    float: left;
    width: 180px;
    padding: 1px 0;
    border-right: 1px solid rgba(5, 5, 5, 0.2);
    text-align: center;
    line-height: 0;
    background: #7628ce; /* Cor de fundo verde igual ao Dizzer */
    color: #fff; /* Cor do texto branco */
    border-radius: 5px; /* Bordas arredondadas */
    margin-right: 19px; /* Espaçamento direito entre os elementos */
}



#minhaconta .mccds .listar .item .nuns .geito .nun {
  float: left;
  width: 50px;
  padding: 15px 0;
  border-right: 1px solid rgba(5, 5, 5, 0.2);
  text-align: center;
  line-height: 0;
}

#minhaconta .mccds .listar .item .nuns .geito .nome {
  float: left;
  padding: 15px 10px;
  text-align: center;
  line-height: 0;
}

#minhaconta .mccds .listar .item .editar {
  position: absolute;
  width: 50px;
  top: 50%;
  right: 30px;
  padding: 15px 0;
  margin: -15px 0 0;
  background: linear-gradient(90deg, #1D1E63, #7D49E2); /* Gradiente azul marinho para lilás */
  text-align: center;
  color: #fff; /* Texto branco */
  line-height: 0;
  border-radius: 10%; /* Transforma o botão em um círculo */
}

#minhaconta .mccds .listar .item .editar:hover {
  background: linear-gradient(90deg, #7D49E2, #1D1E63); /* Inverte o gradiente no hover */
}

#minhaconta .mccds .listar .item .deletar {
  position: absolute;
  width: 24px;
  top: 50%;
  right: 0;
  padding: 12px 0;
  margin: -12px 0 0;
  background: linear-gradient(90deg, #C82828, #C80000); /* Gradiente vermelho característico do Spotify */
  font-weight: bold;
  text-align: center;
  color: #fff; /* Texto branco */
  line-height: 0;
  border-radius: 50%; /* Transforma o botão em um círculo */
}

#minhaconta .mccds .listar .item .deletar:hover {
  background: linear-gradient(90deg, #C80000, #C82828); /* Inverte o gradiente no hover */
}


#minhaconta .mccds .listar .paginacao { float: left; width: 100%; margin: 8px 0 0;}
#minhaconta .mccds .listar .paginacao button { float: left; width: 30px; padding: 15px 0; margin: 2px 2px 0 0; background-color: rgb(90 90 90 / 20%); font-weight: bold;}
#minhaconta .mccds .listar .paginacao button:hover { background-color: rgb(90 90 90); color: rgb(250 250 250);}
#minhaconta .mccds .listar .paginacao button.ativo { background-color: rgb(90 90 90); color: rgb(250 250 250);}
#minhaconta .mccds .cdup { float: left; width: 100%;}
#minhaconta .mccds .cdup .bloco {
  float: left;
  width: 160%;
  padding: 70px;
  background-color: #F5F5F5; /* Cor de fundo semelhante ao site Dizzer */
  border-radius: 20px; /* Cantos arredondados */
  box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.1); /* Sombra */
}

#minhaconta .mccds .cdup .instrucao {
  float: left;
  width: 100%;
  padding: 10px 0;
  text-align: center;
  font-size: 16px; /* Tamanho do texto */
  color: #5A5A5A; /* Cor do texto semelhante ao site Dizzer */
}
  .upload-info {
    font-size: 0.9rem; /* Deixa o texto menor */
    line-height: 1.6;
    font-family: Arial, sans-serif; /* Fonte moderna */
    color: #333333; /* Cor do texto suave e elegante */
}

.upload-info a {
    color: #32b061; /* Cor de link moderna */
    text-decoration: none;
    font-weight: bold;
    border-bottom: 1px solid #32b061;
    padding-bottom: 2px;
    transition: color 0.3s ease, border-bottom-color 0.3s ease;
}

.upload-info a:hover {
    color: #28a150;
    border-bottom-color: #28a150;
}

#minhaconta .mccds .cdup .et1 { float: left; width: 100%; position: relative; padding: 0 0 11px; margin: 0 0 11px; border-bottom: 1px solid rgb(90 90 90 / 40%);}
#minhaconta .mccds .cdup .et2 { float: left; width: 100%; position: relative;}
#minhaconta .mccds .cdup .et3 { float: left; width: 100%; position: relative;}
#minhaconta .mccds .cdup .etapas { float: left; width: 100%; margin: 21px 0; position: relative;}
#minhaconta .mccds .cdup .etapas .linha { position: absolute; width: 70%; height: 1px; top: 20px; left: 15%; background-color: rgb(90 90 90 / 40%);}
#minhaconta .mccds .cdup .etapas .tab { float: left; width: 33.33%;}
#minhaconta .mccds .cdup .etapas .tab .nun { float: left; width: 100%; height: 40px; position: relative;}
#minhaconta .mccds .cdup .etapas .tab .nun b { position: absolute; width: 40px; top: 0; left: 50%; padding: 20px 0; margin: 0 0 0 -20px; background-color: rgb(90 90 90); text-align: center; color: rgb(250 250 250); line-height: 0;}
#minhaconta .mccds .cdup .etapas .tab .nome {
    float: left;
    width: 100%;
    margin: 10px 0 0;
    text-transform: uppercase;
    text-align: center;
    font-size: 0.85rem; /* Deixa o texto menor */
    font-family: Arial, sans-serif; /* Fonte moderna e limpa */
    font-weight: 500; /* Deixa o texto mais leve */
    color: #333333; /* Cor neutra e suave */
    letter-spacing: 1px; /* Espaçamento entre letras para um toque moderno */
}

#minhaconta .mccds .cdup .etapas .tab.ativo .nun b { background-color: rgb(204 38 50);}
#minhaconta .mccds .cdup .etapas .tab.ativo .nome { font-weight: bold;}
#minhaconta .mccds .cdup .arquivo { float: left; width: 100%;}
#minhaconta .mccds .cdup .arquivo .file { float: left; width: 100%; outline: 1px solid rgb(90 90 90 / 20%); outline-offset: -1px; background-color: rgb(90 90 90 / 10%); position: relative; text-align: center;}
#minhaconta .mccds .cdup .arquivo .file em {
    
    
  float: left;
  width: 100%;
  height: 200px;
  background-color: #e8f0fe; /* Cor de fundo verde do site deizzer */
  background-image: url('../../imagens/geral/preto-upload-file-arq-g.png');
  background-position: 50%;
  background-repeat: no-repeat;
  border-radius: 5px; /* Cantos arredondados */
}

#minhaconta .mccds .cdup .arquivo .file input {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 2;
  opacity: 0;
  font-size: 0;
  cursor: pointer; /* Altera o cursor ao passar o mouse sobre a área de upload */
}

 /* Estilos para o container da imagem */
        .image-container {
            position: relative;
            width: 940px; /* Largura desejada */
            height: 240px; /* Altura desejada */
        }

        /* Estilos para a imagem */
        .image-container img {
            width: 100%;
            height: 100%;
            object-fit: cover; /* Ajusta a imagem para cobrir todo o container */
        }

        /* Estilos para o botão */
        .image-container .button {
            position: absolute;
            bottom: 30px; /* Subir o botão um pouco mais em relação à parte inferior */
            left: 50%;
            transform: translateX(-50%); /* Centralizar horizontalmente */
            background-color: #3498db;
            color: #fff;
            padding: 10px 20px;
            text-align: center;
            text-decoration: none;
            border-radius: 15px;
        }
        
        
    /* Estilos para dispositivos móveis (exemplo: largura máxima de 768px) */
@media (max-width: 768px) {
  .text {
    display: none;
  }
}

/* Estilos para desktop (ou seja, dispositivos com largura maior que 768px) */
.text {
  font-weight: bold;
  text-align: left; /* Corrigindo o erro no 'text-align' */
}    
        
        
#minhaconta .mccds .cdup .arquivo .file:hover { background-color: rgb(90 90 90 / 20%);}
#minhaconta .mccds .cdup .progresso { float: left; width: 100%; height: 20px; margin: 5px 0 0; background-color: rgb(90 90 90 / 20%); position: relative; overflow: hidden;}
#minhaconta .mccds .cdup .progresso .barra { position: absolute; width: 0; top: 0; left: 0; padding: 11px 0 9px; background-color: rgb(0 170 100); text-align: center; font-weight: bold; font-size: 0.9em; color: rgb(250 250 250); line-height: 0;}
#minhaconta .mccds .cdup .progresso .barra.finaliza { z-index: 1;}
#minhaconta .mccds .cdup .capa { position: absolute; width: 200px; top: 10px; left: 0;}
#minhaconta .mccds .cdup .capa .imagem { float: left; width: 100%; height: 200px; outline: 1px solid rgb(90 90 90 / 40%); outline-offset: -1px; background-color: rgb(90 90 90 / 5%); position: relative;}
#minhaconta .mccds .cdup .capa .imagem img { float: left; width: 100%; position: relative; z-index: 1;}
#minhaconta .mccds .cdup .capa .imagem em { position: absolute; width: 100%; top: 50%; left: 0; text-transform: uppercase; text-align: center; font-style: normal; color: rgb(90 90 90); line-height: 0;}
#minhaconta .mccds .cdup .capa .enviar { float: left; width: 100%; margin: 5px 0 0;}
#minhaconta .mccds .cdup .capa .enviar .file { float: left; width: 100%; background-color: rgb(90 90 90 / 20%); position: relative; text-align: center;}
#minhaconta .mccds .cdup .capa .enviar .file em { float: left; width: 100%; height: 55px; background-image: url('../../imagens/geral/preto-upload-file-img.png'); background-position: 50%; background-repeat: no-repeat;}
#minhaconta .mccds .cdup .capa .enviar .file input { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 2; opacity: 0; font-size: 0;}
#minhaconta .mccds .cdup .capa .enviar .file:hover { background-color: rgb(90 90 90 / 30%);}
#minhaconta .mccds .cdup .detalhes { float: left; width: 100%; padding: 0 30px 0 240px;}
#minhaconta .mccds .cdup .detalhes .form { float: left; width: 100%;}
#minhaconta .mccds .cdup .detalhes .form .c1 { float: left; width: 100%; margin: 10px 0 0; position: relative;}
#minhaconta .mccds .cdup .detalhes .form .amostra { float: left; width: 100%; font-size: 0.9em; color: rgb(90 90 90);}
#minhaconta .mccds .cdup .detalhes .form .campo { float: left; width: 100%; height: 60px; padding: 0 10px; outline: 1px solid rgb(90 90 90 / 10%); background-color: rgb(90 90 90 / 10%);}
#minhaconta .mccds .cdup .detalhes .form .textarea { float: left; width: 100%; padding: 10px; outline: 1px solid rgb(90 90 90 / 10%); background-color: rgb(90 90 90 / 10%);}
#minhaconta .mccds .cdup .detalhes .form .textarea.h100 { height: 100px;}
#minhaconta .mccds .cdup .detalhes .complete { float: left; width: 100%; margin: 21px 0 0;}
#minhaconta .mccds .cdup .detalhes .complete .opcao { float: left; width: 100%;}
#minhaconta .mccds .cdup .detalhes .complete .opcao .op { float: left; width: 50%; padding: 18px 0 17px; border-bottom: 5px solid rgb(90 90 90 / 20%); text-transform: uppercase; text-align: center; font-weight: bold; line-height: 0;}
#minhaconta .mccds .cdup .detalhes .complete .opcao .op.ativo { border-bottom: 5px solid rgb(255 120 120);}
#minhaconta .mccds .cdup .detalhes .complete .grade { float: left; width: 100%; padding: 20px; margin: 5px 0 0; outline: 1px solid rgb(90 90 90 / 20%); outline-offset: -1px;}
#minhaconta .mccds .cdup .detalhes .complete .faixas { float: left; width: 100%; position: relative;}
#minhaconta .mccds .cdup .detalhes .complete .faixas .item { float: left; width: 100%; padding: 0 40px 0 60px; margin: 4px 0; position: relative;}
#minhaconta .mccds .cdup .detalhes .complete .faixas .item .campo { float: left; width: 100%; height: 35px; padding: 0 10px; outline: 1px solid rgb(90 90 90 / 10%); background-color: rgb(90 90 90 / 10%);}
#minhaconta .mccds .cdup .detalhes .complete .faixas .item .campo.ordem { position: absolute; width: 50px; top: 0; left: 0; text-align: center;}
#minhaconta .mccds .cdup .detalhes .complete .faixas .item .deletar { position: absolute; width: 25px; top: 0px; right: 0px; padding: 0px 0 0px; background-color: rgb(); text-align: center; font-weight: bold; color: rgb(250 250 250); line-height: 0;}
.nenhum {
    text-align: center;
    padding: 5px;
    background-color: #f0f0f0;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.nenhum h2 {
    font-size: 1.5rem;
    color: #333;
}

#minhaconta .mccds .cdup .detalhes .complete .faixas .item .deletar:hover { background-color: rgb();}
#minhaconta .mccds .cdup .detalhes .complete .mais { float: left; width: 100%;}
#minhaconta .mccds .cdup .detalhes .salvo { background-image: url('../../imagens/site/cdup-alterar-salvo.png?'); background-position: 100% 50%; background-repeat: no-repeat;}
#minhaconta .mccds .cdup .detalhes .nsalvo { background-image: url('../../imagens/site/cdup-alterar-nsalvo.png?'); background-position: 100% 50%; background-repeat: no-repeat;}
#minhaconta .mccds .cdup .detalhes .publicar { float: left; width: 100%; padding: 11px 0 8px; margin: 10px 0 0; background-color: rgb(0 150 130); text-transform: uppercase; text-align: center; font-weight: bold; font-size: 1.1em; color: rgb(250 250 250);}
#minhaconta .mccds .cdup .detalhes .publicar:hover { background-color: rgb(0 170 100);}
#minhaconta .mccds .cdup .obrigado { float: left; width: 100%; margin: 50px 0;}
#minhaconta .mccds .cdup .obrigado h2 { float: left; width: 100%; text-align: center; font-weight: bold; font-size: 3em;}
#minhaconta .mccds .cdup .obrigado h3 { float: left; width: 100%; text-align: center; font-size: 1.1em; color: rgb(90 90 90);}
#minhaconta .mccds .cdup .obrigado h2 {
  text-align: center;
}

#minhaconta .mccds .cdup .obrigado button {
  display: block;
  width: 100%;
  padding: 30px 0;
  margin: 10px 0 0;
  background-color: rgb(0, 150, 130);
  text-transform: uppercase;
  text-align: center;
  font-weight: bold;
  font-size: 1.1em;
  color: rgb(250, 250, 250);
}

#minhaconta .mccds .cdup .obrigado button:hover {
  background-color: rgb(0, 170, 100);
}


#minhaconta .mcdados { float: left; width: 100%; padding: 20px;}
#minhaconta .mcdados .ident { float: left; width: 100%;}
#minhaconta .mcdados .ident b { float: left; padding: 0 1px; border-bottom: 5px solid rgb(90 90 90); text-transform: uppercase; font-size: 1.2em;}
#minhaconta .mcdados .c1 { float: left; width: 100%; margin: 15px 0 5px; position: relative;}
#minhaconta .mcdados .nomecampo { float: left; width: 100%; margin: 0 0 2px;}
#minhaconta .mcdados .nomecampo em { font-style: normal; font-weight: bold; color: rgb(255 120 120);}
#minhaconta .mcdados .campo { float: left; width: 100%; height: 40px; padding: 0 10px; outline: 1px solid rgb(90 90 90 / 90%);}
#minhaconta .mcdados .textarea { float: left; width: 100%; padding: 10px; outline: 1px solid rgb(90 90 90 / 90%);}
#minhaconta .mcdados .textarea.h100 { height: 100px;}
#minhaconta .mcdados .textarea.h200 { height: 200px;}
#minhaconta .mcdados .j_senha .chave { position: absolute; width: 20px; height: 20px; right: 5px; bottom: 10px; z-index: 1; background-position: 50%; background-repeat: no-repeat;}
#minhaconta .mcdados .j_senha .chave.mostrar { background-image: url('../../imagens/geral/preto-auth-senha-mostrar.png');}
#minhaconta .mcdados .j_senha .chave.ocultar { background-image: url('../../imagens/geral/preto-auth-senha-ocultar.png');}
#minhaconta .mcdados .submit { float: left; width: 100%; padding: 11px 0 8px; background-color: rgb(0 150 130); text-transform: uppercase; font-weight: bold; font-size: 1.1em;}
#minhaconta .mcdados .submit:hover { background-color: rgb(0 170 100);}

#minhaconta .mcnovidades { float: left; width: 100%;}
#minhaconta .mcseguindo { float: left; width: 100%;}
#minhaconta .mcfavoritos { float: left; width: 100%;}


#minhaconta .mcplaylist { float: left; width: 100%;}
#minhaconta .mcplaylist .item { float: left; width: 100%; padding: 10px; background-color: rgb(250 250 250);}
#minhaconta .mcplaylist .item .nome { float: left; width: 100%; padding: 0 90px 0 0; position: relative;}
#minhaconta .mcplaylist .item .nome .mostra { float: left; width: 100%; padding: 10px 0; text-transform: uppercase; font-weight: bold; opacity: 0.7;}
#minhaconta .mcplaylist .item .nome .altera { float: left; width: 100%;}
#minhaconta .mcplaylist .item .nome .ouvir { position: absolute; width: 80px; top: 0; right: 0; padding: 18px 0; text-align: center; font-size: 0.9em; line-height: 0;}
#minhaconta .mcplaylist .item .nome .ouvir:hover { text-decoration: underline;}
#minhaconta .mcplaylist .item .faixas { float: left; width: 100%;}
#minhaconta .mcplaylist .item .faixas .mp3 { float: left; width: 100%; padding: 10px 130px 10px 10px; margin: 2px 0; outline: 1px solid rgb(90 90 90 / 20%); position: relative;}
#minhaconta .mcplaylist .item .faixas .mp3 b { float: left; width: 100%;}
#minhaconta .mcplaylist .item .faixas .mp3 b i { font-weight: normal; font-style: normal; font-size: 0.9em; opacity: 0.8;}
#minhaconta .mcplaylist .item .faixas .mp3 a.ico { position: absolute; width: 55px; top: 50%; padding: 12px 0; margin: -12px 0 0; text-transform: uppercase; text-align: center; font-weight: bold; font-size: 0.8em; color: rgb(250 250 250); line-height: 0;}
#minhaconta .mcplaylist .item .faixas .mp3 a.ico.ouvir { right: 70px; background-color: rgb(98 101 192);}
#minhaconta .mcplaylist .item .faixas .mp3 a.ico.ouvir:hover { background-color: rgb(82, 84, 161);}
#minhaconta .mcplaylist .item .faixas .mp3 a.ico.baixar { right: 10px; background-color: rgb(81 163 136);}
#minhaconta .mcplaylist .item .faixas .mp3 a.ico.baixar:hover { background-color: rgb(65 138 114);}


#minhaconta .mcpoliticas { float: left; width: 100%;}
#minhaconta .mcpoliticas .item { float: left; width: 100%; padding: 10px; outline: 1px solid rgb(90 90 90 / 20%); outline-offset: -1px; text-align: center;}
#minhaconta .mcpoliticas .item a:hover { text-decoration: underline;}




#perfil { float: left; width: 100%;}
#perfil .apresenta { float: left; width: 100%; padding: 21px 0 0; background-color: rgba(245, 242, 248, 1); font-family: Arial, sans-serif;}
#perfil .apresenta .capa { display: flex; align-items: center; float: left; width: 100%; min-height: 300px; position: relative; background: rgb(200,20,20); background: linear-gradient(90deg, rgba(200,20,20,1) 0%, rgba(139,8,8,1) 100%);}
#perfil .apresenta .capa .banner { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 1;}
#perfil .apresenta .capa .banner img { position: absolute; width: 100%; height: 100%; top: 0; left: 0; object-fit: cover;}
#perfil .apresenta .capa .foto { position: absolute; width: 200px; height: 200px; top: 50%; right: 20px; margin: -100px 0 0; z-index: 2; overflow: hidden;}
#perfil .apresenta .capa .foto img { position: absolute; width: 100%; height: 100%; top: 0; left: 0; object-fit: cover;}
#perfil .apresenta .capa .detalhes { float: left; width: 100%; padding: 20px 340px 20px 20px; position: relative; position: relative; z-index: 3; text-shadow: 0px 0px ; color: rgba(6, 6, 6, 0.71);}
#perfil .apresenta .capa .detalhes h1 { float: left; width: 100%; margin: 11px 0 0; font-weight: bold; font-size: 2.5em; line-height: 1;}
#perfil .apresenta .capa .detalhes h2 { float: left; width: 100%; text-transform: capitalize; font-weight: bold; font-size: 1.1em;}
#perfil .apresenta .capa .detalhes h3 { float: left; width: 100%; margin: 11px 0 0; font-size: 1.1em;}
#perfil .apresenta .capa .seguidor { float: left; padding: 20px 30px; margin: 21px 0 0; background-color: rgb(200 20 20);; font-weight: bold; font-size: 1em; color: rgba(255, 255, 255, 1);}
#perfil .apresenta .capa .seguidor:hover { text-decoration: underline;}

#perfil .apresenta .branco { float: left; width: 100%; padding: 0 20px 20px; background-color: rgba(203, 203, 203, 0.26);}

#perfil .apresenta .biografia { float: left; width: 100%; margin: 41px 0 21px;}
#perfil .apresenta .biografia h2 { float: left; width: 100%; margin: 0 0 5px; text-align: center; font-weight: bold; font-size: 1.7em; color: rgb(200 20 20);}
#perfil .apresenta .biografia h3 { float: left; width: 100%; margin: 21px 0 0; text-align: center; font-size: 1em;}
#perfil .apresenta .biografia div.barra { width: 80px; margin: 0 auto;}
#perfil .apresenta .biografia div.linha { float: left; width: 100%; height: 5px; background-color: rgb(200 20 20);}

#perfil .apresenta .meus { float: left; width: 72%; margin: 21px 0 0;}
#perfil .apresenta .meus .lancamentos { float: left; width: 100%;}
#perfil .apresenta .meus .lancamentos .ident { float: left; width: 100%;}
#perfil .apresenta .meus .lancamentos .ident h2 { float: left; padding: 0 25px 3px 1px; border-bottom: 3px solid rgb(200 20 20); font-weight: bold; font-size: 1.4em;}
#perfil .apresenta .meus .lancamentos .item { float: left; width: 100%; padding: 20px 0 20px 100px; border-bottom: 1px solid rgba(90 90 90 / 30%); position: relative;}
#perfil .apresenta .meus .lancamentos .item .imagem { position: absolute; width: 90px; height: 90px; top: 50%; left: 0; margin: -45px 0 0; overflow: hidden;}
#perfil .apresenta .meus .lancamentos .item .imagem img { position: absolute; width: 100%; height: 100%; top: 0; left: 0; object-fit: cover;}
#perfil .apresenta .meus .lancamentos .item .ver { float: left; width: 100%; text-transform: uppercase; font-weight: bold; color: #1D1E63;}
#perfil .apresenta .meus .lancamentos .item .ver:hover { text-decoration: underline;}
#perfil .apresenta .meus .lancamentos .item .detalhes { float: left; width: 100%; margin: 5px 0; opacity: 0.9;}
#perfil .apresenta .meus .lancamentos .item .detalhes b { font-weight: normal;}
#perfil .apresenta .meus .lancamentos .item .nuns { float: left; width: 100%; opacity: 0.9;}
#perfil .apresenta .meus .lancamentos .item .nuns .geito { float: left;   width: 180px; padding: 1px 0; margin: 1px 0; border-right: 1px solid rgba(5, 5, 5, 0.2);   text-align: center;   line-height: 0;   background: #41A99A;   color: #fff;   border-radius: 5px;   margin-right: 19px;}
#perfil .apresenta .meus .lancamentos .item .nuns .geito .nun { float: left; width: 50px; padding: 15px 0; border-right: 1px solid rgba(5, 5, 5, 0.2); text-align: center; line-height: 0;}
#perfil .apresenta .meus .lancamentos .item .nuns .geito .nome { float: left; padding: 15px 10px; text-align: center; line-height: 0;}

#perfil .apresenta .mais { float: right; width: 25%; margin: 21px 0 0;}
#perfil .apresenta .mais .tambem { float: left; width: 100%;}
#perfil .apresenta .mais .tambem .ident { float: left; width: 100%;}
#perfil .apresenta .mais .tambem .ident h2 { float: left; padding: 0 25px 3px 1px; border-bottom: 3px solid rgb(20 128 200); font-weight: bold; font-size: 1.4em;}
#perfil .apresenta .mais .tambem .item { float: left; width: 100%; padding: 8px 0; border-bottom: 1px solid rgb(90 90 90 / 20%); position: relative;}
#perfil .apresenta .mais .tambem .item .imagem { position: absolute; width: 60px; height: 60px; top: 50%; left: 0; margin: -30px 0 0; overflow: hidden;}
#perfil .apresenta .mais .tambem .item .imagem img { position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
#perfil .apresenta .mais .tambem .item .nome { float: left; width: 100%; padding: 20px 70px; overflow: hidden; font-size: 0.8em;}
#perfil .apresenta .mais .tambem .item .opcao { position: absolute; width: 70px; top: 50%; right: 0; margin: -15px 0 0;}
#perfil .apresenta .mais .tambem .item .opcao .seguidor { float: left; width: 100%; padding: 14px 0 15px; text-transform: uppercase; text-align: center; font-weight: bold; font-size: 0.8em; color: rgb(250 250 250);}
#perfil .apresenta .mais .tambem .item .opcao .seguidor.seguir { background-color: rgb(0 150 130);}
#perfil .apresenta .mais .tambem .item .opcao .seguidor.seguir:hover { background-color: rgb(0 170 100);}
#perfil .apresenta .mais .tambem .item .opcao .seguidor.seguindo { background-color: rgb(90 90 90);}
#perfil .apresenta .mais .tambem .item .opcao .seguidor.seguindo:hover { background-color: rgb(90 90 90 / 90%);}

@media only screen and (max-width: 1000px){
  #perfil .apresenta .branco { padding: 0 10px 10px;}
  #perfil .apresenta .meus { width: 100%;}
  #perfil .apresenta .mais { width: 100%;}
}
@media only screen and (max-width: 600px){
  #perfil .apresenta .capa { min-height: 200px;}
  #perfil .apresenta .capa .foto { width: 100px; height: 100px; right: 5px; margin: -50px 0 0;}
  #perfil .apresenta .capa .detalhes { padding: 15px 140px 15px 10px; font-size: 13px;}
}

#perfil .cd .lado1 { float: left; width: 25%;}
#perfil .cd .lado2 {
    float: right; /* Alterado de "float: left" para "float: right" */
    width: 71%;
    margin: 0; /* Defina a margem como 0 para centralizar ao lado direito */
}


#perfil .cd .capa {
  float: left;
  width: 100%;
  position: relative;
}

#perfil .cd .capa .imagem {
  float: left;
  width: 100%;
  border-radius: 20px; /* Adicione um valor adequado para o raio dos cantos */
  overflow: hidden; /* Isso garante que a imagem não ultrapasse os cantos arredondados */
}

#perfil .cd .capa .imagem img {
  float: left;
  width: 100%;
}
#perfil .cd .capa .ouvir {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgb(5 5 5 / 20%);
  background-repeat: no-repeat;
  background-image: url('../../imagens/site/cd-capa-play.png');
  background-repeat: no-repeat;
  background-position: 50%;
  border-radius: 20px; /* Adicione um valor adequado para o raio dos cantos */
}




.fixed-buttons {
  position: fixed;
  top: 0;
  left: 0;
  width: 97%;
  background-color: #fff; /* Cor de fundo, se desejar */
  padding: 10px; /* Espaçamento interno, se desejar */
  display: flex;
  justify-content: space-between; /* Para alinhar os botões à esquerda e à direita */
  z-index: 999; /* Garante que esteja acima de outros elementos */
}

.button-container {
  display: flex;
  justify-content: center; /* Centralize os botões horizontalmente */
  margin-left: 200cm; /* Afasta os botões 200 centímetros para o centro */
}

.button-style {
  padding: 10px 20px; /* Espaçamento interno */
  border: 2px solid #007bff; /* Cor da borda e largura */
  background-color: #007bff; /* Cor de fundo */
  color: #fff; /* Cor do texto */
  font-size: 16px; /* Tamanho da fonte */
  border-radius: 5px; /* Cantos arredondados */
  cursor: pointer; /* Ícone de cursor ao passar o mouse */
}

.button-style:hover {
  background-color: #0056b3; /* Cor de fundo ao passar o mouse */
  border: 2px solid #0056b3; /* Cor da borda ao passar o mouse */
}

.text-container {
  display: flex;
  align-items: center; /* Centraliza o conteúdo verticalmente */
}

.centered-text {
  text-align: center; /* Centraliza o texto horizontalmente */
}


.button-style:focus {
  outline: none; /* Remova a borda de foco ao clicar no botão */
}
/* Defina um ponto de quebra para dispositivos desktop (por exemplo, 768px) */
@media (min-width: 768px) {
  .fixed-buttons {
    display: none; /* Oculta o elemento em dispositivos desktop */
  }
}

#download-container {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background-color: #fff; /* Cor de fundo, se desejar */
  padding: 10px; /* Espaçamento interno, se desejar */
  z-index: 999; /* Garante que esteja acima de outros elementos */
}


#download-container {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background-color: #fff; /* Cor de fundo, se desejar */
  padding: 10px; /* Espaçamento interno, se desejar */
  z-index: 999; /* Garante que esteja acima de outros elementos */
}

.image-container {
  display: flex;
}

.image-container img {
  margin-right: 10px; /* Espaçamento entre as imagens, se desejar */
}



#perfil .cd .download {
  float: left;
  width: 98%;
  padding: 10px;
  margin: 10px 0;
  background-color: rgb(5 5 5);
  text-transform: uppercase;
  text-align: center;
  font-weight: bold;
  font-size: 1.3em;
  color: rgb(250 250 250);
  border-radius: 10px; /* Adicione um valor adequado para o raio dos cantos */
}

#perfil .cd .download:hover {
  background-color: rgb(204 38 50);
}


/* Estilos para dispositivos móveis (exemplo: largura máxima de 768px) */
@media (max-width: 768px) {
  #perfil .cd .informacoes {
    display: none;
  }
}

/* Estilos para desktop (ou seja, dispositivos com largura maior que 768px) */
#perfil .cd .informacoes {
  float: left;
  width: 100%;
}

#perfil .cd .informacoes h3 {
  float: left;
  width: 100%;
  padding: 10px 0 0;
  margin: 10px 0 0;
  font-size: 1em;
}

#perfil .cd .informacoes h4 {
  float: left;
  width: 100%;
  padding: 10px 0 0;
  margin: 10px 0 0;
  border-top: 1px solid rgba(90, 90, 90, 0.2);
  text-align: center;
  font-style: italic;
  font-size: 1em;
  opacity: 0.7;
}


@media only screen and (max-width: 768px) {
  .informacoes,
  .mais-informacoes,
  .artigo-seo {
    display: none;
  }
}





#perfil .cd .youtube { float: left; width: 100%; margin: 0 0 11px;}
#perfil .cd .youtube .iframe { position: relative; width: 100%; padding-bottom: 56%; overflow: hidden;}
#perfil .cd .youtube .iframe iframe { position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
#perfil .cd .por {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

#perfil .cd .por img {
  width: 50px; /* Ajuste a largura da imagem conforme necessário */
  height: 50px; /* Ajuste a altura da imagem conforme necessário */
  border-radius: 50%; /* Torna a imagem circular */
  margin-left: -470px; /* Desloca a imagem 200 pixels para o lado esquerdo */
  margin-right: 20px; /* Espaço à direita da imagem para centralizá-la */
}


/* Estilo para o contêiner de botões */
.botoes-container {
  display: flex; /* Exibe os botões em uma linha */
  gap: 10px; /* Espaço entre os botões (ajuste conforme necessário) */
  margin-left: -1px; /* Move o contêiner de botões e, consequentemente, os botões 200 pixels para o lado esquerdo */
  margin-top: -47px; /* Move o contêiner de botões e, consequentemente, os botões 160 pixels para o topo */
}

/* Estilo para cada botão (opcional) */
.botoes-container button {
  background: linear-gradient(45deg, #7328B5, #9333E8);
  color: #fff;
  padding: 12px 40px;
  border: 2px solid #ccc; /* Adicione uma borda cinza */
  border-radius: 25px; /* Adicione cantos arredondados */
  cursor: pointer;
  position: relative; /* Para posicionar o ícone de "play" */
  display: block; /* Certifique-se de que os botões sejam inicialmente visíveis */
}

/* Estilo do ícone de "play" */
.botoes-container button::before {
  content: "\25B6"; /* Código Unicode para o ícone de "play" */
  font-size: 20px; /* Tamanho do ícone */
  position: absolute;
  left: 20px; /* Ajuste a posição horizontal conforme necessário */
  top: 50%; /* Centralize verticalmente o ícone */
  transform: translateY(-50%); /* Centralize verticalmente o ícone */
}


/* Estilo para o botão "Baixar CD" */
.baixar-cd button {
  background-color: #fff; /* Fundo branco */
  color: #000; /* Texto preto */
  border: 2px solid #fff; /* Bordas brancas */
  padding: 10px 20px; /* Espaçamento interno (ajuste conforme necessário) */
  border-radius: 5px; /* Cantos arredondados */
  display: block; /* Certifique-se de que o botão seja visível */
  text-align: center; /* Centraliza o texto horizontalmente */
  cursor: pointer;
  text-transform: uppercase; /* Transforma o texto em maiúsculas */
  text-decoration: none; /* Remove sublinhado do link */
  font-weight: bold; /* Texto em negrito */
}

.baixar-cd button:hover {
  background-color: #ddd; /* Cor de fundo ao passar o mouse (exemplo) */
  border: 2px solid #ddd; /* Bordas ao passar o mouse (exemplo) */
}


/* Estilo para o botão "Baixar CD" */
.baixar-cd button {
  background-color: #f2f1f1;
  color: #F5F2F8;
  padding: 12px 40px;
  border: 2px solid #ccc; /* Adicione uma borda cinza */
  border-radius: 25px; /* Adicione cantos arredondados */
  cursor: pointer;
  position: relative; /* Para posicionar o ícone de "download" */
  display: block; /* Certifique-se de que os botões sejam inicialmente visíveis */
}

/* Estilo para o ícone de "download" */
.baixar-cd button::before {
  content: "\2193"; /* Código Unicode para o ícone de download (seta para baixo) */
  margin-right: 5px; /* Espaçamento à direita do ícone (ajuste conforme necessário) */
  font-size: 24px; /* Tamanho do ícone (ajuste conforme necessário) */
  position: absolute; /* Posição absoluta em relação ao botão */
  top: 50%; /* Alinha o ícone verticalmente ao centro */
  left: 20px; /* Posiciona o ícone à esquerda do botão (ajuste conforme necessário) */
  transform: translateY(-50%); /* Centraliza verticalmente o ícone */
}


.baixar-cd button:hover {
  background-color: #F5F2F8; /* Cor de fundo ao passar o mouse (exemplo) */
  border: 2px solid #F5F2F8; /* Bordas ao passar o mouse (exemplo) */
}



#perfil .cd .por button:hover {
  background-color: #b6b6b6; /* Cor de fundo ao passar o mouse */
}

/* Estilo para dispositivos móveis (por exemplo, largura máxima de 768px) */
@media (max-width: 768px) {
  /* Oculta o contêiner de botões e o botão "Baixar CD" em dispositivos móveis */
  .botoes-container,
  .baixar-cd {
    display: none;
  }
}
#perfil .cd .por:hover { background-color: rgb();}
.botao-laranja {
    background-color: orange;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 7px;
    cursor: pointer;
    margin: 0 auto; /* Define margens automáticas para os lados esquerdo e direito */
    display: block; /* Certifique-se de que o botão é exibido como bloco para centralizar corretamente */
}

  .text {
    font-weight: bold;
   
  }

  .underline {
    position: relative;
  }

  .underline::after {
    content: "";
    display: block;
    width: 140%;
    height: 6px; /* Espessura da barra */
    background: linear-gradient(5deg, #2196F3, #32323d);
    position: absolute;
    bottom: 3;
  }


.text {
    font-size: 20px; /* Define o tamanho da fonte como desejar */
}

#perfil .cd .ident { float: left; width: 100%; margin: 11px 0;}
#perfil .cd .ident h1 { float: left; width: 100%; text-transform: uppercase; text-align: center; font-weight: bold; font-size: 1.7em;}
#perfil .cd .ident h2 { float: left; width: 100%; text-transform: uppercase; text-align: center; font-weight: bold; font-size: 1.3em; color: rgb(160 129 86);}
#perfil .cd .compartilhar { float: left; width: 100%; padding: 5px 0; margin: 11px 0; border-top: 4px solid rgba(236, 236, 236, 1); border-bottom: 4px solid rgba(236, 236, 236, 1); text-align: center; font-size: 0;}
#perfil .cd .compartilhar img { margin: 0 5px;}
#perfil .cd .compartilhar img:hover { -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease; -moz-transform: scale(1.2) rotate(-720deg); -webkit-transform: scale(1.2) rotate(-720deg); -o-transform: scale(1.2) rotate(-720deg); -ms-transform: scale(1.2) rotate(-720deg); transform: scale(1.2) rotate(-720deg);}
#perfil .cd .nuns { display: flex; justify-content: center; flex-wrap: wrap; float: left; width: 100%; margin: 8px 0;}
#perfil .cd .nuns .geito_a { float: left; padding: 0 10px; margin: 3px 5px 3px 0; outline: 1px solid rgb(90 90 90); outline-offset: -1px;}
#perfil .cd .nuns .geito_a .ico { float: left; width: 30px; height: 40px; background-position: 50%; background-repeat: no-repeat;}
#perfil .cd .nuns .geito_a .nun { float: left; width: 50px; padding: 20px 0; text-align: center; line-height: 0;}
#perfil .cd .nuns .geito_a.curtir .ico { background-image: url('../../imagens/site/cd-nuns-curtir.png');}
#perfil .cd .nuns .geito_a.ncurtir .ico { background-image: url('../../imagens/site/cd-nuns-ncurtir.png');}
#perfil .cd .nuns .geito_b {
    
  float: right;
  padding: 0 10px;
  margin: 3px 10 3px 5px;
  background-color: rgba(242, 242, 242, 1); /* Adiciona um fundo transparente */
  border-radius: 10px; /* Adiciona cantos arredondados */
}

@media (min-width: 600px) {
    .geito_b {
        display: none;
    }
}

#perfil .cd .nuns .geito_b .nun { float: left; width: 100px; padding: 20px 0; border-right: 5px solid rgb(5 5 5 / 6%); text-align: center; line-height: 0;}
#perfil .cd .nuns .geito_b .nome {
    float: left;
    padding: 19px 10px;
    text-align: center;
    line-height: 0;
   
    color: Black;
    font-weight: bold; /* Deixa a fonte em negrito */
    box-shadow: 0 4px 6px rgba();
    border-radius: 12px;
}

#perfil .cd .faixas .mp3 {
    float: left;
    width: 100%;
    padding: 10px 0px 0px 70px;
    margin: 10px 0;
    background: linear-gradient(45deg, #ffffff, #ededed);
    color: black; /* Altere a cor do texto para preto */
    font-weight: bold; /* Torna o texto em negrito */
    box-shadow: 0 70px 4px rgba(244, 244, 244, 1);
    border-radius: 34px;
    position: relative;
}

#perfil .cd .faixas .mp3 {
    float: left;
    width: 100%;
    padding: 10px 10px 10px 40px;
    margin: 10px 10;
    background: linear-gradient(45deg, #ffffff, #ededed);
    color: black; /* Altere a cor do texto para preto */
    font-weight: bold; /* Torna o texto em negrito */
    
    border-radius: 4px;
    position: relative;
}


#perfil .cd .faixas .mp3 b {
   float: left;
width: 100%;
text-transform: uppercase;
font-size: 14px; /* Você pode ajustar esse valor para corresponder à fonte do site Dizzer */
color: #191919;
margin-left: -27px;
font-weight: normal; /* Adicione essa propriedade se necessário */
font-family: 'Nome da Fonte', sans-serif; /* Substitua 'Nome da Fonte' pela fonte desejada ou uma fonte similar */

}

#perfil .cd .faixas .mp3 a.ouvir {
    position: absolute;
    top: 50%;
    margin-top: -10px;
    left: 1px;
    width: 4px;
    height: 20px;
    background-image: url('../../imagens/site/cd-faixas-play.png');
    background-position: 0;
    background-repeat: no-repeat;
}

#perfil .cd .faixas .mp3 a.ouvir:hover {
    transform: scale(1.2) rotate(-720deg);
    transition: all 1s ease;
}

#perfil .cd .faixas .mp3 a.baixar {
    
}

#perfil .cd .faixas .mp3 a.baixar::before {
    content: '';
    display: block;
    width: 25px; /* Largura da imagem de download */
    height: 25px; /* Altura da imagem de download */
    background-image: url('https://www.meucds.com/imagens/site/icoDown1.png');
    background-size: cover;
    position: absolute;
    top: 50%;
    left: 96%;
    transform: translate(-50%, -50%);
}


#perfil .cd .faixas .mp3 a.baixar:hover {
    background: linear-gradient(45deg, #FFA000, #F44336);
}

#perfil .cd .faixas .mp3:hover {
    background: linear-gradient(45deg, #dfdfdf, #f5f5f5);
}

#perfil .cd .faixas .altulim {
    float: left;
    width: 100%;
    overflow: hidden;
}

#perfil .cd .faixas .carregar {
    float: left;
    width: 100%;
    padding: 15px 0;
    margin: 10px 0 0;
    background: linear-gradient(45deg, #607D8B, #455A64);
    color: white;
    text-transform: uppercase;
    text-align: center;
    font-weight: bold;
    border-radius: 4px;
}


@media only screen and (max-width: 1000px){
  #minhaconta .lado1 { width: 100%;}
  #minhaconta .lado2 { width: 100%; margin: 5px 0 0;}
  #minhaconta .submenu strong { text-align: center;}
  #minhaconta .submenu button { display: none; text-align: center;}

  #perfil .apresenta .lado1 { width: 100%;}
  #perfil .apresenta .lado2 { width: 100%; margin: 11px 0 0;}

  #perfil .cd .lado1 { width: 48%;}
  #perfil .cd .lado2 { float: right; width: 48%; margin: 0;}
  #perfil .cd .lado3 { width: 100%; margin: 11px 0 0;}
}
@media only screen and (max-width: 800px){
  #minhaconta .mccds .cdup .capa { width: 140px;}
  #minhaconta .mccds .cdup .capa .imagem { height: 140px;}
  #minhaconta .mccds .cdup .detalhes { padding: 0 0 0 150px;}

  #minhaconta .seguindo .item { width: 100%; margin: 0 0 10px;}
}
@media only screen and (max-width: 700px){
  #minhaconta .mcperfil .imagem { width: 100%; margin: 0 0 21px;}

  #perfil .cd .lado1 { width: 100%;}
  #perfil .cd .lado2 { width: 100%; margin: 11px 0 0;}
}
@media only screen and (max-width: 700px){
  #minhaconta .mccds .cdup .etapas .tab .nome { font-size: 0.9em;}

  #minhaconta .mccds .cdup .capa { left: 50%; margin: 0 0 0 -70px;}
  #minhaconta .mccds .cdup .detalhes { padding: 200px 0 0;}
}
@media only screen and (max-width: 700px){
  #minhaconta .mccds .listar .item { padding: 15px 0;}
  #minhaconta .mccds .listar .item .imagem { position: relative; top: auto; left: auto; float: left; width: 10%; text-align: center; font-size: 0;}
  #minhaconta .mccds .listar .item .ver { margin: 15px 0 0;}
  #minhaconta .mccds .listar .item .editar { top: 45px; margin: 0;}
  #minhaconta .mccds .listar .item .deletar { top: 48px; margin: 0;}
}