@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 .bloco { width: 100%; padding: 48px 56px 64px; background-color: rgb(255 255 255); border: 1px solid rgb(20 20 20 / 8%); border-radius: 8px; box-shadow: 0 18px 45px rgb(20 20 20 / 10%);}
#minhaconta .mccds .cdup .arquivo .file { min-height: 160px; outline: 1px dashed rgb(0 90 180 / 30%); background-color: rgb(235 244 255); border-radius: 6px;}
#minhaconta .mccds .cdup .capa .imagem { outline: 1px solid rgb(90 90 90 / 16%); background-color: rgb(245 247 250); overflow: hidden; border-radius: 6px;}
#minhaconta .mccds .cdup .capa .imagem img { height: 100%; object-fit: cover;}
#minhaconta .mccds .cdup .capa .enviar .file { background-color: rgb(90 90 90 / 16%); border-radius: 4px;}
#minhaconta .mccds .cdup .detalhes .form .campo,
#minhaconta .mccds .cdup .detalhes .form .textarea { border: 1px solid rgb(20 20 20 / 9%); outline: 0; background-color: rgb(245 247 250); border-radius: 6px;}
#minhaconta .mccds .cdup .detalhes .form .campo:focus,
#minhaconta .mccds .cdup .detalhes .form .textarea:focus { border-color: rgb(0 150 130); background-color: rgb(255 255 255); box-shadow: 0 0 0 3px rgb(0 150 130 / 12%);}
#minhaconta .mccds .cdup .detalhes .complete .opcao .op { border-bottom: 4px solid rgb(90 90 90 / 18%);}
#minhaconta .mccds .cdup .detalhes .complete .opcao .op.ativo { border-bottom-color: rgb(0 90 180); color: rgb(0 65 130);}
#minhaconta .mccds .cdup .detalhes .complete .grade { border: 1px solid rgb(20 20 20 / 10%); outline: 0; border-radius: 6px; background-color: rgb(255 255 255);}
#minhaconta .mccds .cdup .detalhes .publicar { padding: 16px 0 14px; border-radius: 6px; letter-spacing: 0;}
#cdupCapaRecorte { position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 600; background-color: rgb(0 0 0 / 55%);}
#cdupCapaRecorte .janela { position: absolute; width: 420px; max-width: calc(100% - 28px); top: 50%; left: 50%; padding: 22px; transform: translate(-50%, -50%); background-color: rgb(255 255 255); border-radius: 8px; box-shadow: 0 18px 60px rgb(0 0 0 / 25%);}
#cdupCapaRecorte .fechar { position: absolute; width: 34px; height: 34px; top: 12px; right: 12px; border: 0; background-color: rgb(235 235 235); border-radius: 50%; font-weight: bold; cursor: pointer;}
#cdupCapaRecorte h2 { float: left; width: 100%; margin: 0 0 8px; font-size: 1.25em; font-weight: bold;}
#cdupCapaRecorte p { float: left; width: 100%; margin: 0 0 16px; color: rgb(70 70 70); line-height: 1.4;}
#cdupCapaCanvas { display: block; width: 300px; height: 300px; max-width: 100%; margin: 0 auto; background-color: rgb(240 240 240); cursor: move; border-radius: 6px;}
#cdupCapaRecorte .meta { float: left; width: 100%; margin: 10px 0; text-align: center; color: rgb(90 90 90); font-size: 0.9em;}
#cdupCapaRecorte label { float: left; width: 100%; margin: 6px 0 18px; font-weight: bold;}
#cdupCapaZoom { float: left; width: 100%; margin: 10px 0 0;}
#cdupCapaRecorte .acoes { float: left; width: 100%; display: flex; gap: 10px;}
#cdupCapaRecorte .acoes button { flex: 1; padding: 13px 10px; border: 0; border-radius: 5px; font-weight: bold; cursor: pointer;}
#cdupCapaRecorte .acoes .cancelar { background-color: rgb(235 235 235); color: rgb(30 30 30);}
#cdupCapaRecorte .acoes .aplicar { background-color: rgb(0 150 130); color: rgb(255 255 255);}
/* Upload moderno */
#minhaconta .mccds .cdup { max-width: 760px; margin: 0 auto 120px; float: none; display: block;}
#minhaconta .mccds .cdup .bloco {
  width: 100%;
  padding: 42px 56px 52px;
  background: rgb(255 255 255);
  border: 1px solid rgb(20 20 20 / 8%);
  border-radius: 8px;
  box-shadow: 0 18px 45px rgb(20 20 20 / 10%);
}
#minhaconta .mccds .cdup .modern-text,
#minhaconta .mccds .cdup .et1 p {
  max-width: 560px;
  margin: 0 auto 18px;
  color: rgb(35 35 35);
  line-height: 1.5;
}
#minhaconta .mccds .cdup .modern-text a,
#minhaconta .mccds .cdup .et1 p a {
  color: rgb(0 132 90);
  font-weight: bold;
  text-decoration: none;
}
#minhaconta .mccds .cdup .arquivo { max-width: 560px; margin: 0 auto; float: none; display: block;}
#minhaconta .mccds .cdup .arquivo .file {
  min-height: 170px;
  border: 1px dashed rgb(0 132 90 / 35%);
  outline: 0;
  background: rgb(242 250 247);
  border-radius: 8px;
  transition: background-color .2s, border-color .2s, box-shadow .2s;
}
#minhaconta .mccds .cdup .arquivo .file:hover {
  background: rgb(232 247 240);
  border-color: rgb(0 132 90 / 65%);
  box-shadow: 0 8px 22px rgb(0 132 90 / 10%);
}
#minhaconta .mccds .cdup .arquivo .file em {
  height: 170px;
  background-color: transparent;
  background-size: 54px;
  background-image: url("data:image/svg+xml,%3Csvg width='64' height='64' viewBox='0 0 64 64' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 45H16C9.9 45 5 40.1 5 34C5 28.6 8.9 24.1 14 23.2C16.2 14.9 23.7 9 32.5 9C42.1 9 50 16.1 51.2 25.4C55.7 26.7 59 30.8 59 35.8C59 41.9 54.1 45 48 45H44' stroke='%2300845A' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M32 47V27M32 27L24 35M32 27L40 35' stroke='%2300845A' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
#minhaconta .mccds .cdup .instrucao {
  max-width: 560px;
  margin: 8px auto 0;
  float: none;
  color: rgb(75 75 75);
}
#minhaconta .mccds .cdup .etapas .tab .nome { letter-spacing: 0; font-weight: bold;}
#minhaconta .mccds .cdup .etapas .tab.ativo .nun b { background: rgb(0 132 90);}
#minhaconta .mccds .cdup .etapas .tab.ativo .nome { color: rgb(0 96 70);}
#minhaconta .mccds .cdup .capa { top: 0;}
#minhaconta .mccds .cdup .capa .imagem {
  height: 200px;
  border: 1px solid rgb(20 20 20 / 10%);
  outline: 0;
  overflow: hidden;
  border-radius: 8px;
  background: rgb(245 247 250);
}
#minhaconta .mccds .cdup .capa .imagem img {
  height: 100%;
  object-fit: cover;
}
#minhaconta .mccds .cdup .capa .enviar .file {
  background: rgb(235 235 235);
  border-radius: 6px;
}
#minhaconta .mccds .cdup .capa .enviar .file em {
  background-size: 30px;
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='6' y='8' width='28' height='24' rx='3' stroke='%231F2933' stroke-width='2.4'/%3E%3Cpath d='M11 27L17 21L22 26L25 23L31 29' stroke='%231F2933' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='27' cy='15' r='2.5' fill='%231F2933'/%3E%3C/svg%3E");
}
#minhaconta .mccds .cdup .detalhes .form .campo,
#minhaconta .mccds .cdup .detalhes .form .textarea {
  border: 1px solid rgb(20 20 20 / 10%);
  outline: 0;
  background: rgb(245 247 250);
  border-radius: 8px;
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
#minhaconta .mccds .cdup .detalhes .form .campo:focus,
#minhaconta .mccds .cdup .detalhes .form .textarea:focus {
  border-color: rgb(0 132 90);
  background: rgb(255 255 255);
  box-shadow: 0 0 0 3px rgb(0 132 90 / 13%);
}
#minhaconta .mccds .cdup .detalhes .complete .opcao .op {
  border-bottom: 4px solid rgb(90 90 90 / 18%);
  letter-spacing: 0;
}
#minhaconta .mccds .cdup .detalhes .complete .opcao .op.ativo {
  border-bottom-color: rgb(0 132 90);
  color: rgb(0 96 70);
}
#minhaconta .mccds .cdup .detalhes .complete .grade {
  border: 1px solid rgb(20 20 20 / 10%);
  outline: 0;
  border-radius: 8px;
  background: rgb(255 255 255);
}
#minhaconta .mccds .cdup .detalhes .publicar {
  padding: 16px 0 14px;
  border-radius: 8px;
  background: rgb(0 132 90);
  letter-spacing: 0;
}
#minhaconta .mccds .cdup .detalhes .publicar:hover { background: rgb(0 112 76);}
#cdupCapaRecorte {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 600;
  background: rgb(0 0 0 / 58%);
}
#cdupCapaRecorte .janela {
  position: absolute;
  width: 620px;
  max-width: calc(100% - 28px);
  top: 50%;
  left: 50%;
  padding: 22px;
  transform: translate(-50%, -50%);
  background: rgb(255 255 255);
  border-radius: 8px;
  box-shadow: 0 18px 60px rgb(0 0 0 / 25%);
}
#cdupCapaRecorte .fechar {
  position: absolute;
  width: 34px;
  height: 34px;
  top: 12px;
  right: 12px;
  border: 0;
  background: rgb(235 235 235);
  border-radius: 50%;
  font-weight: bold;
  cursor: pointer;
}
#cdupCapaRecorte h2 { float: left; width: 100%; margin: 0 0 8px; font-size: 1.25em; font-weight: bold;}
#cdupCapaRecorte p { float: left; width: 100%; margin: 0 0 12px; color: rgb(70 70 70); line-height: 1.4;}
#cdupCapaRecorte .aviso {
  float: left;
  width: 100%;
  margin: 0 0 14px;
  padding: 12px 14px;
  background: rgb(242 250 247);
  border: 1px solid rgb(0 132 90 / 20%);
  border-radius: 6px;
  color: rgb(0 96 70);
  font-weight: bold;
}
#cdupCapaCanvas {
  display: block;
  width: 360px;
  height: 360px;
  max-width: 100%;
  margin: 0 auto;
  background: rgb(240 240 240);
  cursor: move;
  border-radius: 8px;
}
#cdupCapaRecorte .meta { float: left; width: 100%; margin: 10px 0; text-align: center; color: rgb(90 90 90); font-size: 0.9em;}
#cdupCapaRecorte label { float: left; width: 100%; margin: 6px 0 18px; font-weight: bold;}
#cdupCapaZoom { float: left; width: 100%; margin: 10px 0 0;}
#cdupCapaRecorte .acoes { float: left; width: 100%; display: flex; gap: 10px;}
#cdupCapaRecorte .acoes button { flex: 1; padding: 13px 10px; border: 0; border-radius: 6px; font-weight: bold; cursor: pointer;}
#cdupCapaRecorte .acoes .cancelar { background: rgb(235 235 235); color: rgb(30 30 30);}
#cdupCapaRecorte .acoes .aplicar { background: rgb(0 132 90); color: rgb(255 255 255);}
@media (max-width: 768px) {
  #minhaconta .mccds .cdup .bloco { padding: 28px 18px 38px;}
  #cdupCapaCanvas { width: 300px; height: 300px;}
}

#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;}
}

/* Upload e informacoes: layout final */
#minhaconta .mccds .cdup {
  float: none !important;
  display: block !important;
  width: 100% !important;
  max-width: 900px !important;
  min-width: 760px !important;
  margin: 0 auto 120px !important;
}

#minhaconta .mccds .cdup .bloco {
  float: none !important;
  display: block !important;
  width: 100% !important;
  padding: 42px 56px 52px !important;
  background: #fff !important;
  border: 1px solid rgba(17, 24, 39, .08) !important;
  border-radius: 8px !important;
  box-shadow: 0 18px 45px rgba(17, 24, 39, .10) !important;
}

#minhaconta .mccds .cdup .et1 {
  border-bottom: 1px solid rgba(17, 24, 39, .14) !important;
}

#minhaconta .mccds .cdup .modern-text,
#minhaconta .mccds .cdup .et1 p {
  max-width: 620px !important;
  margin: 0 auto 20px !important;
  font-size: 16px !important;
  line-height: 1.52 !important;
  color: #111827 !important;
}

#minhaconta .mccds .cdup .modern-text a,
#minhaconta .mccds .cdup .et1 p a {
  color: #00875a !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

#minhaconta .mccds .cdup .arquivo {
  float: none !important;
  display: block !important;
  width: 100% !important;
  max-width: 620px !important;
  margin: 0 auto !important;
}

#minhaconta .mccds .cdup .arquivo .file {
  min-height: 170px !important;
  border: 1px dashed rgba(0, 135, 90, .38) !important;
  outline: 0 !important;
  background: #f1fbf7 !important;
  border-radius: 8px !important;
}

#minhaconta .mccds .cdup .arquivo .file em {
  height: 170px !important;
  background-color: transparent !important;
  background-size: 54px !important;
}

#minhaconta .mccds .cdup .instrucao {
  float: none !important;
  display: block !important;
  max-width: 620px !important;
  margin: 8px auto 0 !important;
  color: #4b5563 !important;
}

#minhaconta .mccds .cdup .et2 {
  min-height: 290px !important;
}

#minhaconta .mccds .cdup .capa {
  width: 220px !important;
  top: 0 !important;
  left: 0 !important;
  margin: 0 !important;
}

#minhaconta .mccds .cdup .capa .imagem {
  width: 220px !important;
  height: 220px !important;
  border: 1px solid rgba(17, 24, 39, .12) !important;
  outline: 0 !important;
  background: #f3f4f6 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}

#minhaconta .mccds .cdup .capa .imagem img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

#minhaconta .mccds .cdup .capa .enviar .file {
  height: 56px !important;
  background: #e5e7eb !important;
  border-radius: 6px !important;
}

#minhaconta .mccds .cdup .detalhes {
  float: left !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 0 0 0 260px !important;
}

#minhaconta .mccds .cdup .detalhes .form .campo,
#minhaconta .mccds .cdup .detalhes .form .textarea {
  width: 100% !important;
  min-width: 360px !important;
  border: 1px solid rgba(17, 24, 39, .10) !important;
  outline: 0 !important;
  background: #f7f8fa !important;
  border-radius: 8px !important;
  font-size: 16px !important;
}

#minhaconta .mccds .cdup .detalhes .form .campo:focus,
#minhaconta .mccds .cdup .detalhes .form .textarea:focus {
  border-color: #00875a !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(0, 135, 90, .13) !important;
}

#minhaconta .mccds .cdup .detalhes .complete .opcao {
  display: flex !important;
  gap: 0 !important;
}

#minhaconta .mccds .cdup .detalhes .complete .opcao .op {
  width: 50% !important;
  border-bottom: 4px solid rgba(17, 24, 39, .14) !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}

#minhaconta .mccds .cdup .detalhes .complete .opcao .op.ativo {
  border-bottom-color: #00875a !important;
  color: #006c48 !important;
}

#minhaconta .mccds .cdup .detalhes .complete .grade {
  border: 1px solid rgba(17, 24, 39, .10) !important;
  outline: 0 !important;
  border-radius: 8px !important;
  background: #fff !important;
}

#minhaconta .mccds .cdup .detalhes .publicar {
  padding: 16px 0 14px !important;
  border-radius: 8px !important;
  background: #00875a !important;
  letter-spacing: 0 !important;
}

@media only screen and (max-width: 1100px) {
  #minhaconta .mccds .cdup {
    min-width: 0 !important;
    max-width: calc(100vw - 36px) !important;
  }
}

@media only screen and (max-width: 760px) {
  #minhaconta .mccds .cdup .bloco {
    padding: 28px 18px 38px !important;
  }

  #minhaconta .mccds .cdup .capa {
    position: relative !important;
    width: 220px !important;
    left: auto !important;
    margin: 0 auto 18px !important;
  }

  #minhaconta .mccds .cdup .detalhes {
    padding: 0 !important;
  }

  #minhaconta .mccds .cdup .detalhes .form .campo,
  #minhaconta .mccds .cdup .detalhes .form .textarea {
    min-width: 0 !important;
  }
}

/* Upload app polish */
#minhaconta .mccds .cdup {
  max-width: 820px !important;
}

#minhaconta .mccds .cdup .etapas {
  margin: 0 0 14px !important;
  padding: 14px 16px !important;
  background: #fff !important;
  border: 1px solid rgba(17, 24, 39, .08) !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 28px rgba(17, 24, 39, .08) !important;
}

#minhaconta .mccds .cdup .etapas .linha {
  width: 64% !important;
  left: 18% !important;
  top: 34px !important;
  background: rgba(17, 24, 39, .14) !important;
}

#minhaconta .mccds .cdup .etapas .tab {
  position: relative !important;
  padding: 0 !important;
  background: transparent !important;
}

#minhaconta .mccds .cdup .etapas .tab .nun b {
  width: 38px !important;
  height: 38px !important;
  padding: 19px 0 !important;
  margin-left: -19px !important;
  background: #6b7280 !important;
  box-shadow: 0 5px 14px rgba(17, 24, 39, .14) !important;
}

#minhaconta .mccds .cdup .etapas .tab.ativo .nun b {
  background: #ea1d2c !important;
}

#minhaconta .mccds .cdup .etapas .tab .nome {
  margin-top: 8px !important;
  color: #374151 !important;
  font-size: 13px !important;
}

#minhaconta .mccds .cdup .etapas .tab.ativo .nome {
  color: #ea1d2c !important;
}

#minhaconta .mccds .cdup .bloco {
  padding: 34px 56px 44px !important;
  border-radius: 8px !important;
  background: #fff !important;
}

#minhaconta .mccds .cdup .arquivo .file {
  min-height: 142px !important;
  background: #fff5f5 !important;
  border-color: rgba(234, 29, 44, .30) !important;
}

#minhaconta .mccds .cdup .arquivo .file:hover {
  background: #fff0f1 !important;
  border-color: rgba(234, 29, 44, .55) !important;
}

#minhaconta .mccds .cdup .arquivo .file em {
  height: 142px !important;
  background-image: url("data:image/svg+xml,%3Csvg width='64' height='64' viewBox='0 0 64 64' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 45H16C9.9 45 5 40.1 5 34C5 28.6 8.9 24.1 14 23.2C16.2 14.9 23.7 9 32.5 9C42.1 9 50 16.1 51.2 25.4C55.7 26.7 59 30.8 59 35.8C59 41.9 54.1 45 48 45H44' stroke='%23EA1D2C' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M32 47V27M32 27L24 35M32 27L40 35' stroke='%23EA1D2C' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

#minhaconta .mccds .cdup .modern-text,
#minhaconta .mccds .cdup .et1 p {
  max-width: 620px !important;
  margin-bottom: 18px !important;
}

#minhaconta .mccds .cdup .modern-text a,
#minhaconta .mccds .cdup .et1 p a {
  color: #ea1d2c !important;
}

#minhaconta .mccds .cdup .instrucao b {
  color: #111827 !important;
}

#minhaconta .mccds .cdup .capa {
  width: 190px !important;
}

#minhaconta .mccds .cdup .capa .imagem {
  width: 190px !important;
  height: 190px !important;
}

#minhaconta .mccds .cdup .capa .enviar .file {
  height: 52px !important;
  background: #f3f4f6 !important;
}

#minhaconta .mccds .cdup .detalhes {
  padding-left: 225px !important;
}

#minhaconta .mccds .cdup .detalhes .form .c1 {
  margin-top: 10px !important;
}

#minhaconta .mccds .cdup .detalhes .form .campo {
  height: 58px !important;
}

#minhaconta .mccds .cdup .detalhes .form .textarea.h100 {
  height: 96px !important;
}

#minhaconta .mccds .cdup .detalhes .form .campo:focus,
#minhaconta .mccds .cdup .detalhes .form .textarea:focus {
  border-color: #ea1d2c !important;
  box-shadow: 0 0 0 3px rgba(234, 29, 44, .10) !important;
}

#minhaconta .mccds .cdup .detalhes .complete .opcao .op.ativo {
  border-bottom-color: #ea1d2c !important;
  color: #ea1d2c !important;
}

#minhaconta .mccds .cdup .detalhes .publicar {
  background: #ea1d2c !important;
  box-shadow: 0 10px 22px rgba(234, 29, 44, .20) !important;
}

#minhaconta .mccds .cdup .detalhes .publicar:hover {
  background: #c91422 !important;
}

#cdupCapaRecorte {
  z-index: 9999 !important;
  background: rgba(17, 24, 39, .68) !important;
}

#cdupCapaRecorte .janela {
  width: 520px !important;
  max-height: calc(100vh - 40px) !important;
  overflow: auto !important;
  padding: 18px !important;
  border-radius: 8px !important;
}

#cdupCapaRecorte h2 {
  margin-bottom: 4px !important;
  font-size: 20px !important;
}

#cdupCapaRecorte p {
  margin-bottom: 10px !important;
  font-size: 14px !important;
}

#cdupCapaRecorte .aviso {
  margin-bottom: 10px !important;
  padding: 10px 12px !important;
  background: #fff5f5 !important;
  border-color: rgba(234, 29, 44, .22) !important;
  color: #9f1239 !important;
}

#cdupCapaCanvas {
  width: 300px !important;
  height: 300px !important;
  border-radius: 8px !important;
}

#cdupCapaRecorte .meta {
  margin: 8px 0 !important;
}

#cdupCapaRecorte label {
  margin: 4px 0 12px !important;
}

#cdupCapaRecorte .acoes .aplicar {
  background: #ea1d2c !important;
}

@media only screen and (max-width: 760px) {
  #minhaconta .mccds .cdup .capa {
    width: 190px !important;
  }

  #minhaconta .mccds .cdup .detalhes {
    padding-left: 0 !important;
  }
}

/* Upload redesign final */
#minhaconta .mccds .cdup {
  width: min(820px, calc(100vw - 340px)) !important;
  min-width: 720px !important;
  margin: 0 auto 140px !important;
  font-family: Arial, Helvetica, sans-serif !important;
}

#minhaconta .mccds .cdup *,
#cdupCapaRecorte * {
  box-sizing: border-box !important;
}

#minhaconta .mccds .cdup .etapas {
  height: auto !important;
  min-height: 88px !important;
  margin: 0 0 14px !important;
  padding: 18px 24px 14px !important;
  background: #fff !important;
  border: 1px solid rgba(17, 24, 39, .08) !important;
  border-radius: 8px !important;
  box-shadow: 0 14px 34px rgba(17, 24, 39, .10) !important;
}

#minhaconta .mccds .cdup .etapas .linha {
  width: 66% !important;
  height: 2px !important;
  top: 36px !important;
  left: 17% !important;
  background: #e5e7eb !important;
}

#minhaconta .mccds .cdup .etapas .tab,
#minhaconta .mccds .cdup .etapas .tab.ativo {
  height: auto !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#minhaconta .mccds .cdup .etapas .tab .nun {
  height: 38px !important;
}

#minhaconta .mccds .cdup .etapas .tab .nun b {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  top: 0 !important;
  left: 50% !important;
  padding: 0 !important;
  margin: 0 0 0 -19px !important;
  border-radius: 999px !important;
  background: #6b7280 !important;
  color: #fff !important;
  font-size: 15px !important;
  line-height: 1 !important;
  box-shadow: 0 8px 18px rgba(17, 24, 39, .16) !important;
}

#minhaconta .mccds .cdup .etapas .tab.ativo .nun b {
  background: #ea1d2c !important;
}

#minhaconta .mccds .cdup .etapas .tab .nome {
  margin: 10px 0 0 !important;
  color: #374151 !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  font-weight: 800 !important;
}

#minhaconta .mccds .cdup .etapas .tab.ativo .nome {
  color: #ea1d2c !important;
}

#minhaconta .mccds .cdup .bloco {
  width: 100% !important;
  padding: 32px 40px 42px !important;
  background: #fff !important;
  border: 1px solid rgba(17, 24, 39, .08) !important;
  border-radius: 8px !important;
  box-shadow: 0 18px 48px rgba(17, 24, 39, .08) !important;
}

#minhaconta .mccds .cdup .modern-text,
#minhaconta .mccds .cdup .et1 p {
  width: 100% !important;
  max-width: 600px !important;
  margin: 0 auto 18px !important;
  color: #111827 !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
}

#minhaconta .mccds .cdup .modern-text a,
#minhaconta .mccds .cdup .et1 p a {
  color: #ea1d2c !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}

#minhaconta .mccds .cdup .arquivo {
  width: 100% !important;
  max-width: 600px !important;
  margin: 0 auto !important;
}

#minhaconta .mccds .cdup .arquivo .file {
  min-height: 130px !important;
  height: 130px !important;
  border: 1px dashed rgba(234, 29, 44, .34) !important;
  outline: 0 !important;
  background: #fff6f7 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}

#minhaconta .mccds .cdup .arquivo .file em {
  height: 130px !important;
  background-size: 48px !important;
  background-color: transparent !important;
}

#minhaconta .mccds .cdup .instrucao {
  width: 100% !important;
  max-width: 600px !important;
  margin: 8px auto 0 !important;
  padding: 8px 0 0 !important;
  color: #4b5563 !important;
  font-size: 14px !important;
}

#minhaconta .mccds .cdup .et1 {
  padding-bottom: 20px !important;
  margin-bottom: 20px !important;
  border-bottom: 1px solid #e5e7eb !important;
}

#minhaconta .mccds .cdup .et2 {
  min-height: 300px !important;
}

#minhaconta .mccds .cdup .et2.none,
#minhaconta .mccds .cdup .et3.none {
  display: none !important;
}

#minhaconta .mccds .cdup .capa {
  position: absolute !important;
  width: 178px !important;
  top: 0 !important;
  left: 0 !important;
  margin: 0 !important;
}

#minhaconta .mccds .cdup .capa .imagem {
  width: 178px !important;
  height: 178px !important;
  border: 1px solid #e5e7eb !important;
  outline: 0 !important;
  border-radius: 8px !important;
  background: #f9fafb !important;
  overflow: hidden !important;
}

#minhaconta .mccds .cdup .capa .imagem img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

#minhaconta .mccds .cdup .capa .enviar {
  margin-top: 8px !important;
}

#minhaconta .mccds .cdup .capa .enviar .file {
  height: 48px !important;
  border-radius: 8px !important;
  background: #f3f4f6 !important;
}

#minhaconta .mccds .cdup .capa .enviar .file em {
  height: 48px !important;
  background-size: 26px !important;
}

#minhaconta .mccds .cdup .detalhes {
  width: 100% !important;
  padding: 0 0 0 210px !important;
}

#minhaconta .mccds .cdup .detalhes .form .c1 {
  margin: 0 0 10px !important;
}

#minhaconta .mccds .cdup .detalhes .form .campo,
#minhaconta .mccds .cdup .detalhes .form .textarea {
  width: 100% !important;
  min-width: 0 !important;
  border: 1px solid #e5e7eb !important;
  outline: 0 !important;
  background: #f9fafb !important;
  border-radius: 8px !important;
  color: #111827 !important;
  font-size: 15px !important;
}

#minhaconta .mccds .cdup .detalhes .form .campo {
  height: 56px !important;
}

#minhaconta .mccds .cdup .detalhes .form .textarea.h100 {
  height: 92px !important;
}

#minhaconta .mccds .cdup .detalhes .form .campo:focus,
#minhaconta .mccds .cdup .detalhes .form .textarea:focus {
  border-color: #ea1d2c !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(234, 29, 44, .10) !important;
}

#minhaconta .mccds .cdup .detalhes .complete {
  margin-top: 14px !important;
}

#minhaconta .mccds .cdup .detalhes .complete .opcao {
  display: flex !important;
  width: 100% !important;
  border-bottom: 1px solid #e5e7eb !important;
}

#minhaconta .mccds .cdup .detalhes .complete .opcao .op {
  flex: 1 !important;
  width: auto !important;
  padding: 15px 8px 13px !important;
  border-bottom: 3px solid transparent !important;
  color: #111827 !important;
  background: transparent !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  font-size: 14px !important;
}

#minhaconta .mccds .cdup .detalhes .complete .opcao .op.ativo {
  border-bottom-color: #ea1d2c !important;
  color: #ea1d2c !important;
}

#minhaconta .mccds .cdup .detalhes .complete .grade {
  margin-top: 10px !important;
  border: 1px solid #e5e7eb !important;
  outline: 0 !important;
  border-radius: 8px !important;
  background: #fff !important;
}

#minhaconta .mccds .cdup .detalhes .publicar {
  padding: 15px 0 14px !important;
  border-radius: 8px !important;
  background: #ea1d2c !important;
  box-shadow: 0 12px 24px rgba(234, 29, 44, .18) !important;
}

#cdupCapaRecorte {
  z-index: 9999 !important;
  background: rgba(17, 24, 39, .70) !important;
}

#cdupCapaRecorte .janela {
  width: 480px !important;
  max-width: calc(100vw - 28px) !important;
  max-height: calc(100vh - 56px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 18px !important;
  border-radius: 8px !important;
}

#cdupCapaRecorte .fechar {
  width: 32px !important;
  height: 32px !important;
  top: 12px !important;
  right: 12px !important;
}

#cdupCapaRecorte h2 {
  margin: 0 38px 4px 0 !important;
  font-size: 19px !important;
}

#cdupCapaRecorte p {
  margin: 0 0 10px !important;
  font-size: 14px !important;
}

#cdupCapaRecorte .aviso {
  margin: 0 0 10px !important;
  padding: 10px 12px !important;
  background: #fff6f7 !important;
  border: 1px solid rgba(234, 29, 44, .20) !important;
  border-radius: 8px !important;
  color: #9f1239 !important;
  line-height: 1.35 !important;
}

#cdupCapaCanvas {
  width: 280px !important;
  height: 280px !important;
  border-radius: 8px !important;
}

#cdupCapaRecorte .meta {
  margin: 8px 0 !important;
}

#cdupCapaRecorte label {
  margin: 4px 0 12px !important;
}

#cdupCapaRecorte .acoes {
  gap: 10px !important;
}

#cdupCapaRecorte .acoes button {
  padding: 12px 10px !important;
  border-radius: 8px !important;
}

#cdupCapaRecorte .acoes .aplicar {
  background: #ea1d2c !important;
}

@media only screen and (max-width: 1100px) {
  #minhaconta .mccds .cdup {
    width: calc(100vw - 330px) !important;
    min-width: 650px !important;
  }
}

@media only screen and (max-width: 900px) {
  #minhaconta .mccds .cdup {
    width: calc(100vw - 32px) !important;
    min-width: 0 !important;
  }

  #minhaconta .mccds .cdup .capa {
    position: relative !important;
    margin: 0 auto 16px !important;
  }

  #minhaconta .mccds .cdup .detalhes {
    padding: 0 !important;
  }
}

/* Etapa 1 no modelo de upload limpo */
#minhaconta .mccds .cdup .et1 {
  padding: 0 0 22px !important;
  margin: 0 0 22px !important;
  border-bottom: 1px solid #e5e7eb !important;
}

#minhaconta .mccds .cdup .upload-lembrete {
  width: 100% !important;
  max-width: 668px !important;
  margin: 0 auto 12px !important;
  color: #4b5563 !important;
}

#minhaconta .mccds .cdup .upload-lembrete h2 {
  display: inline !important;
  margin: 0 !important;
  color: #0875d1 !important;
  font-size: 17px !important;
  line-height: 1.45 !important;
  font-weight: 800 !important;
}

#minhaconta .mccds .cdup .upload-lembrete h2:before {
  content: "" !important;
  display: inline-block !important;
  width: 16px !important;
  height: 16px !important;
  margin: 0 5px -2px 0 !important;
  background-repeat: no-repeat !important;
  background-position: 50% !important;
  background-size: 16px !important;
  background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 2.5H13C13.8 2.5 14.5 3.2 14.5 4V15L9 12.2L3.5 15V4C3.5 3.2 4.2 2.5 5 2.5Z' stroke='%230875D1' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M6.5 6H11.5M6.5 8.5H10' stroke='%230875D1' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}

#minhaconta .mccds .cdup .upload-lembrete p {
  display: inline !important;
  margin: 0 !important;
  color: #4b5563 !important;
  font-size: 16px !important;
  line-height: 1.45 !important;
}

#minhaconta .mccds .cdup .upload-lembrete small {
  display: block !important;
  margin: 8px 0 0 !important;
  color: #6b7280 !important;
  font-size: 13px !important;
}

#minhaconta .mccds .cdup .arquivo {
  max-width: 668px !important;
}

#minhaconta .mccds .cdup .arquivo .file {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  height: 150px !important;
  min-height: 150px !important;
  border: 2px dashed #1da14b !important;
  background: #fff !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}

#minhaconta .mccds .cdup .arquivo .file em {
  float: none !important;
  width: 56px !important;
  height: 56px !important;
  margin: 0 0 14px !important;
  border-radius: 50% !important;
  background-color: #248a2e !important;
  background-size: 34px !important;
  background-image: url("data:image/svg+xml,%3Csvg width='42' height='42' viewBox='0 0 42 42' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 31V12M21 12L13.5 19.5M21 12L28.5 19.5' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 32H30' stroke='white' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  position: relative !important;
}

#minhaconta .mccds .cdup .arquivo .file em:after {
  content: "+" !important;
  position: absolute !important;
  right: -5px !important;
  bottom: -2px !important;
  width: 19px !important;
  height: 19px !important;
  border-radius: 50% !important;
  background: #1da14b !important;
  color: #fff !important;
  font-size: 18px !important;
  line-height: 18px !important;
  font-weight: 800 !important;
  text-align: center !important;
}

#minhaconta .mccds .cdup .arquivo .file strong {
  display: block !important;
  color: #0aa44f !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}

#minhaconta .mccds .cdup .arquivo .file:hover {
  background: #f7fff9 !important;
  border-color: #15803d !important;
}

#minhaconta .mccds .cdup .instrucao {
  max-width: 668px !important;
  margin-top: 10px !important;
  padding: 0 !important;
  text-align: center !important;
  color: #4b5563 !important;
}

#cdupCapaRecorte.aberto .crop-area {
  display: block !important;
  position: relative !important;
  width: 300px !important;
  height: 300px !important;
  overflow: hidden !important;
  margin: 0 auto !important;
  background: #eef2f7 !important;
}

#cdupCapaRecorte.aberto #cdupCapaPreview {
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 2 !important;
  max-width: none !important;
  max-height: none !important;
}

#cdupCapaRecorte.aberto #cdupCapaCanvas {
  display: none !important;
}

/* Cropper profissional */
#cdupCapaRecorte {
  display: none;
  align-items: center !important;
  justify-content: center !important;
  padding: 22px !important;
  background: rgba(17, 24, 39, .68) !important;
  backdrop-filter: blur(2px) !important;
}

#cdupCapaRecorte.aberto {
  display: flex !important;
}

#cdupCapaRecorte .janela {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  width: 600px !important;
  max-width: calc(100vw - 32px) !important;
  max-height: calc(100vh - 44px) !important;
  padding: 12px 16px 14px !important;
  overflow: hidden !important;
  background: #fff !important;
  border-radius: 8px !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .28) !important;
}

#cdupCapaRecorte .crop-topo {
  display: grid !important;
  grid-template-columns: 86px 1fr 36px !important;
  align-items: center !important;
  gap: 10px !important;
  height: 36px !important;
  margin: 0 0 10px !important;
}

#cdupCapaRecorte .crop-topo .aplicar {
  width: 68px !important;
  height: 30px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 3px !important;
  background: #6c63ff !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
}

#cdupCapaRecorte .crop-meta {
  text-align: center !important;
  color: #8b95a1 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

#cdupCapaRecorte .fechar {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  width: 30px !important;
  height: 30px !important;
  border: 0 !important;
  background: transparent !important;
  cursor: pointer !important;
}

#cdupCapaRecorte .fechar:before,
#cdupCapaRecorte .fechar:after {
  content: "" !important;
  position: absolute !important;
  top: 14px !important;
  left: 8px !important;
  width: 14px !important;
  height: 1.8px !important;
  background: #8b95a1 !important;
  border-radius: 2px !important;
}

#cdupCapaRecorte .fechar:before {
  transform: rotate(45deg) !important;
}

#cdupCapaRecorte .fechar:after {
  transform: rotate(-45deg) !important;
}

#cdupCapaRecorte .aviso {
  margin: 0 0 10px !important;
  padding: 9px 12px !important;
  background: #f8fafc !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 6px !important;
  color: #4b5563 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
}

#cdupCapaRecorte .crop-palco {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 340px !important;
  padding: 8px 0 !important;
  background: #f8fafc !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}

#cdupCropperImagem {
  display: block !important;
  max-width: 100% !important;
  max-height: 340px !important;
}

#cdupCapaRecorte .cropper-container {
  max-width: 100% !important;
}

#cdupCapaRecorte .cropper-view-box,
#cdupCapaRecorte .cropper-face {
  border-radius: 4px !important;
}

#cdupCapaRecorte .cropper-view-box {
  outline: 2px solid #6c63ff !important;
  outline-color: #6c63ff !important;
}

#cdupCapaRecorte .cropper-line,
#cdupCapaRecorte .cropper-point {
  background-color: #6c63ff !important;
}

#cdupCapaRecorte .crop-area {
  position: relative !important;
  width: 300px !important;
  height: 300px !important;
  margin: 0 auto !important;
  overflow: hidden !important;
  border-radius: 4px !important;
  background: #f3f4f6 !important;
  box-shadow: 0 0 0 2px #6c63ff, 0 0 0 1px rgba(108, 99, 255, .25) inset !important;
  cursor: move !important;
}

#cdupCapaRecorte .crop-area:before,
#cdupCapaRecorte .crop-area:after {
  content: "" !important;
  position: absolute !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

#cdupCapaRecorte .crop-area:before {
  width: 100% !important;
  height: 1px !important;
  top: 33.33% !important;
  left: 0 !important;
  box-shadow: 0 100px rgba(255,255,255,.55) !important;
  background: rgba(255,255,255,.55) !important;
}

#cdupCapaRecorte .crop-area:after {
  width: 1px !important;
  height: 100% !important;
  top: 0 !important;
  left: 33.33% !important;
  box-shadow: 100px 0 rgba(255,255,255,.55) !important;
  background: rgba(255,255,255,.55) !important;
}

#cdupCapaPreview {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 1 !important;
  max-width: none !important;
  transform-origin: 0 0 !important;
  user-select: none !important;
  pointer-events: none !important;
}

#cdupCapaCanvas {
  display: none !important;
}

/* mantem compatibilidade com regras antigas do canvas */
#cdupCapaCanvas.__compat {
  width: 300px !important;
  height: 300px !important;
  border-radius: 4px !important;
  box-shadow: 0 0 0 2px #6c63ff, 0 0 0 1px rgba(108, 99, 255, .25) inset !important;
}

#cdupCapaRecorte .meta {
  margin: 4px 0 8px !important;
  color: #6b7280 !important;
  font-size: 13px !important;
  text-align: center !important;
}

#cdupCapaRecorte .crop-ferramentas {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  justify-content: center !important;
  min-height: 42px !important;
  border-top: 1px solid #eef0f3 !important;
  padding: 10px 0 0 !important;
}

#cdupCapaRecorte .ferramenta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  height: 32px !important;
  padding: 0 12px !important;
  border: 0 !important;
  border-radius: 4px !important;
  background: #eef2ff !important;
  color: #64748b !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

#cdupCapaRecorte .ferramenta svg {
  width: 16px !important;
  height: 16px !important;
  fill: currentColor !important;
}

#cdupCapaRecorte .zoom-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  color: #64748b !important;
  font-size: 13px !important;
}

#cdupCapaZoom {
  width: 170px !important;
  accent-color: #6c63ff !important;
}

/* Lixeira SVG das faixas */
#minhaconta .mccds .cdup .detalhes .complete .faixas .item {
  padding-right: 46px !important;
}

#minhaconta .mccds .cdup .detalhes .complete .faixas .item .deletar {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute !important;
  width: 34px !important;
  height: 34px !important;
  top: 50% !important;
  right: 0 !important;
  margin: -17px 0 0 !important;
  padding: 0 !important;
  border: 1px solid #fee2e2 !important;
  border-radius: 8px !important;
  background: #fff5f5 !important;
  color: #ef233c !important;
  cursor: pointer !important;
}

#minhaconta .mccds .cdup .detalhes .complete .faixas .item .deletar svg {
  width: 18px !important;
  height: 18px !important;
  fill: currentColor !important;
}

#minhaconta .mccds .cdup .detalhes .complete .faixas .item .deletar:hover {
  background: #ef233c !important;
  border-color: #ef233c !important;
  color: #fff !important;
}

/* Etapa 2: capa no modelo de biblioteca */
#minhaconta .mccds .cdup .info-arquivo {
  float: left !important;
  width: 100% !important;
  padding: 0 0 28px !important;
  margin: 0 0 28px !important;
  border-bottom: 1px solid #e5e7eb !important;
}

#minhaconta .mccds .cdup .info-arquivo h2 {
  float: left !important;
  width: 100% !important;
  margin: 0 0 20px !important;
  color: #ff1d23 !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}

#minhaconta .mccds .cdup .capa-linha {
  float: left !important;
  width: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(280px, 1fr) 240px !important;
  gap: 34px !important;
  align-items: start !important;
}

#minhaconta .mccds .cdup .capa-texto h3 {
  margin: 0 0 12px !important;
  color: #111827 !important;
  font-size: 15px !important;
  font-weight: 900 !important;
}

#minhaconta .mccds .cdup .capa-texto p {
  max-width: 360px !important;
  margin: 0 0 12px !important;
  color: #4b5563 !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
}

#minhaconta .mccds .cdup .capa-texto small {
  display: block !important;
  margin: 8px 0 0 !important;
  color: #9ca3af !important;
  font-size: 13px !important;
}

#minhaconta .mccds .cdup .info-arquivo .capa {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: 240px !important;
  margin: 0 !important;
}

#minhaconta .mccds .cdup .info-arquivo .capa .imagem {
  display: none !important;
}

#minhaconta .mccds .cdup .info-arquivo .capa .enviar {
  width: 240px !important;
  margin: 0 !important;
}

#minhaconta .mccds .cdup .info-arquivo .capa .enviar .file {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 240px !important;
  height: 240px !important;
  background: #fff !important;
  border: 2px dashed #16a34a !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

#minhaconta .mccds .cdup .info-arquivo .capa .enviar .file em {
  position: relative !important;
  width: 58px !important;
  height: 58px !important;
  margin: 0 0 16px !important;
  border-radius: 8px !important;
  background-color: #16a34a !important;
  background-size: 34px !important;
  background-position: 50% !important;
  background-repeat: no-repeat !important;
  background-image: url("data:image/svg+xml,%3Csvg width='42' height='42' viewBox='0 0 42 42' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='9' y='12' width='24' height='19' rx='3' stroke='white' stroke-width='3'/%3E%3Ccircle cx='26' cy='18' r='2.2' fill='white'/%3E%3Cpath d='M12 28L18 22L23 27L26 24L31 29' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

#minhaconta .mccds .cdup .info-arquivo .capa .enviar .file em:after {
  content: "+" !important;
  position: absolute !important;
  right: -8px !important;
  bottom: -7px !important;
  width: 22px !important;
  height: 22px !important;
  border: 3px solid #fff !important;
  border-radius: 50% !important;
  background: #16a34a !important;
  color: #062d14 !important;
  font-size: 20px !important;
  line-height: 17px !important;
  font-weight: 900 !important;
  text-align: center !important;
}

#minhaconta .mccds .cdup .info-arquivo .capa .enviar .file strong {
  display: block !important;
  color: #0aa44f !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  text-align: center !important;
  font-weight: 900 !important;
}

#minhaconta .mccds .cdup .detalhes {
  padding: 0 !important;
}

#minhaconta .mccds .cdup .detalhes:before {
  content: "Dados do arquivo" !important;
  display: block !important;
  margin: 0 0 14px !important;
  color: #111827 !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
}

#minhaconta .mccds .cdup .detalhes .form {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}

#minhaconta .mccds .cdup .detalhes .form .c1 {
  margin: 0 !important;
}

#minhaconta .submenu strong,
#minhaconta .submenu button.ativo,
#minhaconta .mccds .cdup .detalhes .publicar,
#cdupCapaRecorte .acoes .aplicar {
  background: linear-gradient(90deg, #ff1d23 0%, #ff4b1f 100%) !important;
}

#minhaconta .mccds .cdup .etapas .tab.ativo .nun b {
  background: linear-gradient(135deg, #ff1d23 0%, #ff4b1f 100%) !important;
}

#minhaconta .mccds .cdup .etapas .tab.ativo .nome,
#minhaconta .mccds .cdup .detalhes .complete .opcao .op.ativo {
  color: #ff1d23 !important;
}

#minhaconta .mccds .cdup .detalhes .complete .opcao .op.ativo {
  border-bottom-color: #ff1d23 !important;
}

@media only screen and (max-width: 760px) {
  #minhaconta .mccds .cdup .capa-linha {
    grid-template-columns: 1fr !important;
  }

  #minhaconta .mccds .cdup .info-arquivo .capa,
  #minhaconta .mccds .cdup .info-arquivo .capa .enviar,
  #minhaconta .mccds .cdup .info-arquivo .capa .enviar .file {
    width: 100% !important;
  }
}

/* Upload UX fix */
#minhaconta .mccds .cdup .capa .enviar .file {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: 46px !important;
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 6px 16px rgba(17, 24, 39, .06) !important;
}

#minhaconta .mccds .cdup .capa .enviar .file em {
  float: none !important;
  width: 22px !important;
  height: 22px !important;
  background-size: 22px !important;
}

#minhaconta .mccds .cdup .capa .enviar .file:after {
  content: "Selecionar capa";
  color: #111827;
  font-size: 13px;
  font-weight: 800;
}

#minhaconta .mccds .cdup .detalhes .complete .faixas .item .campo {
  border: 1px solid #e5e7eb !important;
  background: #f9fafb !important;
  border-radius: 8px !important;
}

#cdupCapaRecorte {
  display: none;
  align-items: center !important;
  justify-content: center !important;
  padding: 18px !important;
}

#cdupCapaRecorte[style*="block"] {
  display: flex !important;
}

#cdupCapaRecorte .janela {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  width: 440px !important;
  max-width: 100% !important;
  max-height: calc(100vh - 36px) !important;
  padding: 18px 18px 16px !important;
  overflow: auto !important;
  border: 1px solid rgba(255, 255, 255, .25) !important;
  border-radius: 8px !important;
}

#cdupCapaRecorte .fechar {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  top: 12px !important;
  right: 12px !important;
  background: #f3f4f6 !important;
  color: transparent !important;
  font-size: 0 !important;
}

#cdupCapaRecorte .fechar:before,
#cdupCapaRecorte .fechar:after {
  content: "" !important;
  position: absolute !important;
  width: 14px !important;
  height: 2px !important;
  background: #374151 !important;
  border-radius: 2px !important;
}

#cdupCapaRecorte .fechar:before {
  transform: rotate(45deg) !important;
}

#cdupCapaRecorte .fechar:after {
  transform: rotate(-45deg) !important;
}

#cdupCapaRecorte h2 {
  color: #111827 !important;
  font-size: 18px !important;
  line-height: 1.2 !important;
}

#cdupCapaRecorte p {
  max-width: 360px !important;
  color: #4b5563 !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
}

#cdupCapaRecorte .aviso {
  padding: 9px 11px !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
}

#cdupCapaCanvas {
  width: 250px !important;
  height: 250px !important;
  box-shadow: 0 10px 24px rgba(17, 24, 39, .12) !important;
}

#cdupCapaRecorte .meta {
  color: #4b5563 !important;
  font-size: 13px !important;
}

#cdupCapaRecorte label {
  color: #111827 !important;
  font-size: 13px !important;
}

#cdupCapaZoom {
  accent-color: #ea1d2c !important;
}

#cdupCapaRecorte .acoes button {
  height: 42px !important;
}

#cdupCapaRecorte .acoes .cancelar {
  background: #f3f4f6 !important;
}

/* Recorte de capa: versao limpa com Cropper */
#cdupCapaRecorte {
  position: fixed !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  z-index: 99999 !important;
  padding: 24px !important;
  background: rgba(15, 23, 42, .72) !important;
  backdrop-filter: blur(4px) !important;
}

#cdupCapaRecorte.aberto,
#cdupCapaRecorte[style*="block"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#cdupCapaRecorte .janela {
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  width: min(720px, 100%) !important;
  max-height: min(720px, calc(100vh - 48px)) !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .32) !important;
}

#cdupCapaRecorte .crop-topo {
  display: grid !important;
  grid-template-columns: 120px 1fr 44px !important;
  align-items: center !important;
  min-height: 58px !important;
  padding: 12px 16px !important;
  border-bottom: 1px solid #eef0f3 !important;
  background: #fff !important;
}

#cdupCapaRecorte .crop-topo .aplicar {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 96px !important;
  height: 34px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: linear-gradient(90deg, #ff1d23 0%, #ff4b1f 100%) !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
}

#cdupCapaRecorte .crop-topo .aplicar:disabled {
  opacity: .7 !important;
  cursor: wait !important;
}

#cdupCapaRecorte .crop-meta {
  color: #64748b !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  text-align: center !important;
}

#cdupCapaRecorte .fechar {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  justify-self: end !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #f1f5f9 !important;
  color: transparent !important;
  cursor: pointer !important;
}

#cdupCapaRecorte .fechar:before,
#cdupCapaRecorte .fechar:after {
  content: "" !important;
  position: absolute !important;
  width: 15px !important;
  height: 2px !important;
  border-radius: 2px !important;
  background: #334155 !important;
}

#cdupCapaRecorte .fechar:before {
  transform: rotate(45deg) !important;
}

#cdupCapaRecorte .fechar:after {
  transform: rotate(-45deg) !important;
}

#cdupCapaRecorte .aviso {
  display: block !important;
  margin: 14px 18px 0 !important;
  padding: 12px 14px !important;
  border: 1px solid #fee2e2 !important;
  border-radius: 8px !important;
  background: #fff7f7 !important;
  color: #9f1239 !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
}

#cdupCapaRecorte .crop-palco {
  display: block !important;
  width: calc(100% - 36px) !important;
  height: min(430px, calc(100vh - 260px)) !important;
  min-height: 300px !important;
  margin: 16px 18px 0 !important;
  overflow: hidden !important;
  border-radius: 10px !important;
  background: #f8fafc !important;
}

#cdupCropperImagem {
  display: block !important;
  max-width: 100% !important;
  max-height: 430px !important;
}

#cdupCapaRecorte .cropper-container {
  max-width: 100% !important;
}

#cdupCapaRecorte .cropper-view-box {
  outline: 2px solid #ff1d23 !important;
  outline-color: #ff1d23 !important;
}

#cdupCapaRecorte .cropper-line,
#cdupCapaRecorte .cropper-point {
  background-color: #ff1d23 !important;
}

#cdupCapaRecorte .meta {
  margin: 10px 18px 0 !important;
  color: #64748b !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-align: center !important;
}

#cdupCapaRecorte .crop-ferramentas {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  margin: 14px 18px 18px !important;
  padding: 14px 0 0 !important;
  border-top: 1px solid #eef0f3 !important;
}

#cdupCapaRecorte .ferramenta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  min-width: 92px !important;
  height: 34px !important;
  padding: 0 12px !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: #fff1f2 !important;
  color: #ff1d23 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

#cdupCapaRecorte .ferramenta svg {
  width: 16px !important;
  height: 16px !important;
  fill: currentColor !important;
}

#cdupCapaRecorte .zoom-label {
  color: #64748b !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

@media only screen and (max-width: 640px) {
  #cdupCapaRecorte {
    padding: 12px !important;
  }

  #cdupCapaRecorte .janela {
    max-height: calc(100vh - 24px) !important;
  }

  #cdupCapaRecorte .crop-topo {
    grid-template-columns: 100px 1fr 40px !important;
    padding: 10px 12px !important;
  }

  #cdupCapaRecorte .crop-palco {
    width: calc(100% - 24px) !important;
    min-height: 260px !important;
    margin: 12px 12px 0 !important;
  }

  #cdupCapaRecorte .crop-ferramentas {
    align-items: flex-start !important;
    flex-direction: column !important;
    margin: 12px !important;
  }
}

/* Recorte manual simples: arrastar + zoom */
#cdupCapaRecorte .janela {
  width: min(560px, 100%) !important;
}

#cdupCapaRecorte .crop-palco {
  position: relative !important;
  width: min(380px, calc(100vw - 72px)) !important;
  height: min(380px, calc(100vw - 72px)) !important;
  min-height: 0 !important;
  margin: 16px auto 0 !important;
  overflow: hidden !important;
  border: 2px solid #ff1d23 !important;
  border-radius: 10px !important;
  background: #f8fafc !important;
  cursor: move !important;
  touch-action: none !important;
  user-select: none !important;
}

#cdupCapaImagem {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  display: block !important;
  max-width: none !important;
  max-height: none !important;
  transform-origin: 0 0 !important;
  user-select: none !important;
  pointer-events: none !important;
}

#cdupCapaRecorte .crop-grade {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
  background:
    linear-gradient(to right, transparent 33.333%, rgba(255,255,255,.65) 33.333%, rgba(255,255,255,.65) calc(33.333% + 1px), transparent calc(33.333% + 1px), transparent 66.666%, rgba(255,255,255,.65) 66.666%, rgba(255,255,255,.65) calc(66.666% + 1px), transparent calc(66.666% + 1px)),
    linear-gradient(to bottom, transparent 33.333%, rgba(255,255,255,.65) 33.333%, rgba(255,255,255,.65) calc(33.333% + 1px), transparent calc(33.333% + 1px), transparent 66.666%, rgba(255,255,255,.65) 66.666%, rgba(255,255,255,.65) calc(66.666% + 1px), transparent calc(66.666% + 1px)) !important;
  box-shadow: inset 0 0 0 999px rgba(0,0,0,0) !important;
}

#cdupCapaRecorte .crop-ferramentas {
  flex-wrap: wrap !important;
}

#cdupCapaRecorte .zoom-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
}

#cdupCapaZoom {
  width: 190px !important;
  accent-color: #ff1d23 !important;
}

#cdupCapaRecorte .crop-dica {
  width: 100% !important;
  color: #64748b !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-align: center !important;
}

/* Previa da capa apos concluir */
#minhaconta .mccds .cdup .info-arquivo .capa.capa-pronta .imagem {
  display: block !important;
  width: 240px !important;
  height: 240px !important;
  margin: 0 0 10px !important;
  overflow: hidden !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 10px !important;
  outline: 0 !important;
  background: #f8fafc !important;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .10) !important;
}

#minhaconta .mccds .cdup .info-arquivo .capa.capa-pronta .imagem img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

#minhaconta .mccds .cdup .info-arquivo .capa.capa-pronta .imagem em {
  display: none !important;
}

#minhaconta .mccds .cdup .info-arquivo .capa.capa-pronta .enviar,
#minhaconta .mccds .cdup .info-arquivo .capa.capa-pronta .enviar .file {
  width: 240px !important;
}

#minhaconta .mccds .cdup .info-arquivo .capa.capa-pronta .enviar .file {
  height: 46px !important;
  min-height: 46px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: 0 8px 22px rgba(15, 23, 42, .08) !important;
}

#minhaconta .mccds .cdup .info-arquivo .capa.capa-pronta .enviar .file em {
  width: 20px !important;
  height: 20px !important;
  margin: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-size: 20px !important;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 17.5V20h2.5L17.1 9.4l-2.5-2.5L4 17.5Z' stroke='%23111827' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='m14.6 6.9 1.2-1.2a1.7 1.7 0 0 1 2.4 0l.1.1a1.7 1.7 0 0 1 0 2.4l-1.2 1.2' stroke='%23111827' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}

#minhaconta .mccds .cdup .info-arquivo .capa.capa-pronta .enviar .file em:after {
  display: none !important;
}

#minhaconta .mccds .cdup .info-arquivo .capa.capa-pronta .enviar .file strong {
  display: none !important;
}

#minhaconta .mccds .cdup .info-arquivo .capa.capa-pronta .enviar .file:after {
  content: "Trocar capa" !important;
  color: #111827 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

/* Upload de CD - camada UI premium escopada */
#minhaconta .mccds .cdup {
  --mc-red: #ff1d23;
  --mc-orange: #ff4b1f;
  --mc-green: #16a34a;
  --mc-ink: #0f172a;
  --mc-text: #334155;
  --mc-muted: #64748b;
  --mc-line: #e5e7eb;
  --mc-soft: #f8fafc;
  --mc-shadow: 0 24px 70px rgba(15, 23, 42, .10);
  width: min(100%, 820px) !important;
  max-width: 820px !important;
  margin: 0 auto 150px !important;
  float: none !important;
  display: block !important;
  color: var(--mc-text) !important;
  font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif !important;
}

#minhaconta .mccds .cdup *,
#minhaconta .mccds .cdup *:before,
#minhaconta .mccds .cdup *:after {
  box-sizing: border-box !important;
}

#minhaconta .mccds .cdup .auto700 {
  width: 100% !important;
  max-width: 820px !important;
  margin: 0 auto !important;
}

#minhaconta .mccds .cdup .etapas {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 104px !important;
  margin: 0 0 14px !important;
  padding: 18px 28px !important;
  border: 1px solid rgba(15, 23, 42, .06) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, .94) !important;
  box-shadow: 0 18px 50px rgba(15, 23, 42, .08) !important;
  overflow: hidden !important;
}

#minhaconta .mccds .cdup .etapas .linha {
  width: calc(100% - 180px) !important;
  height: 2px !important;
  top: 34px !important;
  left: 90px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, rgba(255, 29, 35, .24), rgba(22, 163, 74, .20), rgba(100, 116, 139, .22)) !important;
}

#minhaconta .mccds .cdup .etapas .tab {
  position: relative !important;
  width: auto !important;
  float: none !important;
  display: grid !important;
  justify-items: center !important;
  gap: 8px !important;
  cursor: default !important;
}

#minhaconta .mccds .cdup .etapas .tab.um,
#minhaconta .mccds .cdup .etapas .tab.dois {
  cursor: pointer !important;
}

#minhaconta .mccds .cdup .etapas .tab .nun {
  width: 48px !important;
  height: 48px !important;
  float: none !important;
}

#minhaconta .mccds .cdup .etapas .tab .nun b {
  position: static !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important;
  height: 42px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: 4px solid #fff !important;
  border-radius: 999px !important;
  background: #64748b !important;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .18) !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease !important;
}

#minhaconta .mccds .cdup .etapas .tab.ativo .nun b {
  background: linear-gradient(135deg, var(--mc-red), var(--mc-orange)) !important;
  box-shadow: 0 14px 30px rgba(255, 29, 35, .28) !important;
  transform: translateY(-2px) !important;
}

#minhaconta .mccds .cdup .etapas .tab .nome {
  float: none !important;
  width: auto !important;
  padding: 0 !important;
  color: var(--mc-ink) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
}

#minhaconta .mccds .cdup .etapas .tab.ativo .nome {
  color: var(--mc-red) !important;
}

#minhaconta .mccds .cdup .bloco {
  width: 100% !important;
  min-height: 440px !important;
  padding: 40px !important;
  border: 1px solid rgba(15, 23, 42, .06) !important;
  border-radius: 14px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .98)),
    radial-gradient(circle at 10% 0%, rgba(255, 29, 35, .08), transparent 30%),
    radial-gradient(circle at 90% 10%, rgba(22, 163, 74, .08), transparent 34%) !important;
  box-shadow: var(--mc-shadow) !important;
  overflow: hidden !important;
}

#minhaconta .mccds .cdup .et1,
#minhaconta .mccds .cdup .et2,
#minhaconta .mccds .cdup .et3 {
  float: none !important;
  width: 100% !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

#minhaconta .mccds .cdup .upload-lembrete {
  width: min(100%, 640px) !important;
  margin: 0 auto 24px !important;
  padding: 0 0 0 44px !important;
  position: relative !important;
}

#minhaconta .mccds .cdup .upload-lembrete:before {
  content: "" !important;
  position: absolute !important;
  top: 2px !important;
  left: 0 !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 10px !important;
  background: #fff1f2 url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 8v4m0 4h.01M10.3 4.5 2.8 17.4A2 2 0 0 0 4.5 20h15a2 2 0 0 0 1.7-2.6L13.7 4.5a2 2 0 0 0-3.4 0Z' stroke='%23ff1d23' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 50% / 18px no-repeat !important;
}

#minhaconta .mccds .cdup .upload-lembrete h2 {
  margin: 0 0 6px !important;
  color: var(--mc-ink) !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
}

#minhaconta .mccds .cdup .upload-lembrete p {
  margin: 0 !important;
  color: var(--mc-text) !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
}

#minhaconta .mccds .cdup .upload-lembrete small {
  display: block !important;
  margin: 8px 0 0 !important;
  color: var(--mc-muted) !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
}

#minhaconta .mccds .cdup .arquivo {
  width: min(100%, 670px) !important;
  max-width: 670px !important;
  float: none !important;
  display: block !important;
  margin: 0 auto !important;
}

#minhaconta .mccds .cdup .arquivo .file {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  width: 100% !important;
  min-height: 150px !important;
  padding: 28px 22px !important;
  border: 2px dashed rgba(22, 163, 74, .70) !important;
  border-radius: 12px !important;
  outline: 0 !important;
  background: linear-gradient(180deg, #f0fdf4, #fff) !important;
  text-align: center !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .75) !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease !important;
}

#minhaconta .mccds .cdup .arquivo .file:hover {
  transform: translateY(-2px) !important;
  border-color: var(--mc-green) !important;
  background: #f0fdf4 !important;
  box-shadow: 0 18px 42px rgba(22, 163, 74, .14) !important;
}

#minhaconta .mccds .cdup .arquivo .file em {
  width: 58px !important;
  height: 58px !important;
  float: none !important;
  border-radius: 999px !important;
  background: var(--mc-green) url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 16V4m0 0L7 9m5-5 5 5M5 16v2a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-2' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 50% / 30px no-repeat !important;
  box-shadow: 0 12px 28px rgba(22, 163, 74, .28) !important;
}

#minhaconta .mccds .cdup .arquivo .file strong {
  color: var(--mc-green) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
}

#minhaconta .mccds .cdup .arquivo .file input,
#minhaconta .mccds .cdup .capa .enviar .file input {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  cursor: pointer !important;
  font-size: 0 !important;
}

#minhaconta .mccds .cdup .progresso {
  width: min(100%, 670px) !important;
  height: 12px !important;
  float: none !important;
  display: block !important;
  margin: 16px auto 0 !important;
  border-radius: 999px !important;
  background: #e2e8f0 !important;
  overflow: hidden !important;
}

#minhaconta .mccds .cdup .progresso .barra {
  height: 100% !important;
  padding: 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, var(--mc-green), #22c55e) !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 12px !important;
}

#minhaconta .mccds .cdup .instrucao {
  width: 100% !important;
  float: none !important;
  margin: 12px 0 0 !important;
  color: var(--mc-muted) !important;
  font-size: 14px !important;
  text-align: center !important;
  line-height: 1.45 !important;
}

#minhaconta .mccds .cdup .instrucao b {
  color: var(--mc-ink) !important;
  font-weight: 900 !important;
}

#minhaconta .mccds .cdup .info-arquivo {
  display: block !important;
  width: 100% !important;
  float: none !important;
  margin: 0 0 30px !important;
  padding: 0 0 30px !important;
  border-bottom: 1px solid var(--mc-line) !important;
}

#minhaconta .mccds .cdup .info-arquivo h2 {
  width: 100% !important;
  float: none !important;
  margin: 0 0 22px !important;
  color: var(--mc-red) !important;
  font-size: 24px !important;
  font-weight: 950 !important;
  line-height: 1.15 !important;
}

#minhaconta .mccds .cdup .capa-linha {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 252px !important;
  align-items: start !important;
  gap: 34px !important;
  width: 100% !important;
  float: none !important;
}

#minhaconta .mccds .cdup .capa-texto h3 {
  margin: 0 0 10px !important;
  color: var(--mc-ink) !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
}

#minhaconta .mccds .cdup .capa-texto p {
  max-width: 420px !important;
  margin: 0 0 14px !important;
  color: var(--mc-text) !important;
  font-size: 15px !important;
  line-height: 1.58 !important;
}

#minhaconta .mccds .cdup .capa-texto small {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  width: max-content !important;
  max-width: 100% !important;
  margin: 8px 0 !important;
  padding: 7px 10px !important;
  border: 1px solid #edf2f7 !important;
  border-radius: 999px !important;
  background: var(--mc-soft) !important;
  color: var(--mc-muted) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

#minhaconta .mccds .cdup .capa-texto .tutorial-mini {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: auto !important;
  max-width: 340px !important;
  margin: 10px 0 0 !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(255, 29, 35, .12) !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, #fff, #fff7f7) !important;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .06) !important;
}

#minhaconta .mccds .cdup .capa-texto .tutorial-icone {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, var(--mc-red), var(--mc-orange)) !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(255, 29, 35, .22) !important;
}

#minhaconta .mccds .cdup .capa-texto .tutorial-icone svg {
  width: 19px !important;
  height: 19px !important;
  fill: currentColor !important;
}

#minhaconta .mccds .cdup .capa-texto .tutorial-mini b {
  display: block !important;
  margin: 0 0 2px !important;
  color: var(--mc-ink) !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  line-height: 1.15 !important;
}

#minhaconta .mccds .cdup .capa-texto .tutorial-mini small {
  display: block !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--mc-muted) !important;
  font-size: 11px !important;
  font-weight: 750 !important;
  line-height: 1.3 !important;
}

#minhaconta .mccds .cdup .upload-lembrete .tutorial-mini {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: auto !important;
  max-width: 300px !important;
  margin: 10px 0 0 !important;
  padding: 8px 10px !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: 0 8px 22px rgba(15, 23, 42, .05) !important;
}

#minhaconta .mccds .cdup .upload-lembrete .tutorial-icone {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 9px !important;
  background: linear-gradient(135deg, var(--mc-red), var(--mc-orange)) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(255, 29, 35, .22) !important;
}

#minhaconta .mccds .cdup .upload-lembrete .tutorial-icone svg {
  width: 16px !important;
  height: 16px !important;
  fill: currentColor !important;
}

#minhaconta .mccds .cdup .upload-lembrete .tutorial-mini b {
  display: block !important;
  margin: 0 0 1px !important;
  color: var(--mc-ink) !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  line-height: 1.15 !important;
}

#minhaconta .mccds .cdup .upload-lembrete .tutorial-mini small {
  display: block !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--mc-muted) !important;
  font-size: 10.5px !important;
  font-weight: 750 !important;
  line-height: 1.3 !important;
}

#minhaconta .mccds .cdup .info-arquivo .capa {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: 252px !important;
  margin: 0 !important;
}

#minhaconta .mccds .cdup .info-arquivo .capa .imagem {
  display: none !important;
}

#minhaconta .mccds .cdup .info-arquivo .capa .enviar,
#minhaconta .mccds .cdup .info-arquivo .capa .enviar .file {
  width: 252px !important;
}

#minhaconta .mccds .cdup .info-arquivo .capa .enviar .file {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  height: 252px !important;
  padding: 22px !important;
  border: 2px dashed rgba(22, 163, 74, .78) !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, #f0fdf4, #fff) !important;
  box-shadow: none !important;
  text-align: center !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}

#minhaconta .mccds .cdup .info-arquivo .capa .enviar .file:hover {
  transform: translateY(-2px) !important;
  border-color: var(--mc-green) !important;
  box-shadow: 0 18px 42px rgba(22, 163, 74, .14) !important;
}

#minhaconta .mccds .cdup .info-arquivo .capa .enviar .file em {
  position: relative !important;
  width: 58px !important;
  height: 58px !important;
  margin: 0 !important;
  border-radius: 14px !important;
  background: var(--mc-green) url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 19h14a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2Z' stroke='white' stroke-width='2'/%3E%3Cpath d='m7 15 3-3 2 2 3-4 2 5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.2' fill='white'/%3E%3C/svg%3E") 50% / 31px no-repeat !important;
  box-shadow: 0 12px 28px rgba(22, 163, 74, .26) !important;
}

#minhaconta .mccds .cdup .info-arquivo .capa .enviar .file em:after {
  content: "+" !important;
  position: absolute !important;
  right: -8px !important;
  bottom: -8px !important;
  width: 24px !important;
  height: 24px !important;
  border: 3px solid #fff !important;
  border-radius: 999px !important;
  background: var(--mc-green) !important;
  color: #fff !important;
  font-size: 19px !important;
  font-weight: 900 !important;
  line-height: 18px !important;
  text-align: center !important;
}

#minhaconta .mccds .cdup .info-arquivo .capa .enviar .file strong {
  color: var(--mc-green) !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  line-height: 1.35 !important;
}

#minhaconta .mccds .cdup .info-arquivo .capa.capa-pronta .imagem {
  display: block !important;
  width: 252px !important;
  height: 252px !important;
  margin: 0 0 12px !important;
  overflow: hidden !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;
  border-radius: 14px !important;
  outline: 0 !important;
  background: var(--mc-soft) !important;
  box-shadow: 0 18px 46px rgba(15, 23, 42, .14) !important;
}

#minhaconta .mccds .cdup .info-arquivo .capa.capa-pronta .imagem img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 14px !important;
}

#minhaconta .mccds .cdup .info-arquivo .capa.capa-pronta .enviar .file {
  flex-direction: row !important;
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 14px !important;
  border: 1px solid var(--mc-line) !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .08) !important;
}

#minhaconta .mccds .cdup .info-arquivo .capa.capa-pronta .enviar .file em {
  width: 20px !important;
  height: 20px !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 17.5V20h2.5L17.1 9.4l-2.5-2.5L4 17.5Z' stroke='%230f172a' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='m14.6 6.9 1.2-1.2a1.7 1.7 0 0 1 2.4 0l.1.1a1.7 1.7 0 0 1 0 2.4l-1.2 1.2' stroke='%230f172a' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-size: 20px !important;
  box-shadow: none !important;
}

#minhaconta .mccds .cdup .info-arquivo .capa.capa-pronta .enviar .file em:after,
#minhaconta .mccds .cdup .info-arquivo .capa.capa-pronta .enviar .file strong {
  display: none !important;
}

#minhaconta .mccds .cdup .info-arquivo .capa.capa-pronta .enviar .file:after {
  content: "Trocar capa" !important;
  color: var(--mc-ink) !important;
  font-size: 13px !important;
  font-weight: 950 !important;
}

#minhaconta .mccds .cdup .detalhes {
  width: 100% !important;
  float: none !important;
  padding: 0 !important;
}

#minhaconta .mccds .cdup .detalhes:before {
  content: "Dados do arquivo" !important;
  display: block !important;
  margin: 0 0 16px !important;
  color: var(--mc-ink) !important;
  font-size: 18px !important;
  font-weight: 950 !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
}

#minhaconta .mccds .cdup .detalhes .form {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  width: 100% !important;
  float: none !important;
}

#minhaconta .mccds .cdup .detalhes .form .c1 {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
}

#minhaconta .mccds .cdup .detalhes .form .campo,
#minhaconta .mccds .cdup .detalhes .form .textarea {
  width: 100% !important;
  border: 1px solid var(--mc-line) !important;
  border-radius: 10px !important;
  outline: 0 !important;
  background: #fff !important;
  color: var(--mc-ink) !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
  box-shadow: 0 1px 0 rgba(15, 23, 42, .02) !important;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease !important;
}

#minhaconta .mccds .cdup .detalhes .form .campo {
  height: 58px !important;
  padding: 0 16px !important;
}

#minhaconta .mccds .cdup .detalhes .form .textarea {
  min-height: 112px !important;
  padding: 15px 16px !important;
  resize: vertical !important;
}

#minhaconta .mccds .cdup .detalhes .form .campo:focus,
#minhaconta .mccds .cdup .detalhes .form .textarea:focus {
  border-color: rgba(255, 29, 35, .60) !important;
  background: #fff !important;
  box-shadow: 0 0 0 4px rgba(255, 29, 35, .10) !important;
}

#minhaconta .mccds .cdup .detalhes .form .salvo {
  border-color: rgba(22, 163, 74, .45) !important;
  background: #fff url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m5 12 4 4L19 6' stroke='%2316a34a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") calc(100% - 14px) 50% / 20px no-repeat !important;
}

#minhaconta .mccds .cdup .detalhes .form .nsalvo {
  border-color: rgba(255, 29, 35, .55) !important;
  background: #fff7f7 url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 8v5m0 3h.01M10.3 4.5 2.8 17.4A2 2 0 0 0 4.5 20h15a2 2 0 0 0 1.7-2.6L13.7 4.5a2 2 0 0 0-3.4 0Z' stroke='%23ff1d23' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") calc(100% - 14px) 50% / 20px no-repeat !important;
}

#minhaconta .mccds .cdup .detalhes .complete {
  width: 100% !important;
  float: none !important;
  margin: 24px 0 0 !important;
}

#minhaconta .mccds .cdup .detalhes .complete .opcao {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  width: 100% !important;
  float: none !important;
  gap: 8px !important;
  padding: 4px !important;
  border: 1px solid var(--mc-line) !important;
  border-radius: 12px !important;
  background: var(--mc-soft) !important;
}

#minhaconta .mccds .cdup .detalhes .complete .opcao .op {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-height: 44px !important;
  float: none !important;
  padding: 0 12px !important;
  border: 0 !important;
  border-radius: 9px !important;
  color: var(--mc-muted) !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  text-transform: uppercase !important;
  transition: background .16s ease, color .16s ease, box-shadow .16s ease !important;
}

#minhaconta .mccds .cdup .detalhes .complete .opcao .op:hover {
  color: var(--mc-red) !important;
}

#minhaconta .mccds .cdup .detalhes .complete .opcao .op.ativo {
  background: linear-gradient(90deg, var(--mc-red), var(--mc-orange)) !important;
  color: #fff !important;
  box-shadow: 0 12px 24px rgba(255, 29, 35, .20) !important;
}

#minhaconta .mccds .cdup .detalhes .complete .grade {
  width: 100% !important;
  float: none !important;
  margin: 12px 0 0 !important;
  padding: 18px !important;
  border: 1px solid var(--mc-line) !important;
  border-radius: 12px !important;
  outline: 0 !important;
  background: #fff !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .05) !important;
}

#minhaconta .mccds .cdup .detalhes .complete .faixas .item {
  display: grid !important;
  grid-template-columns: 52px minmax(0, 1fr) 40px !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  float: none !important;
  min-height: 46px !important;
  margin: 7px 0 !important;
  padding: 0 !important;
  position: relative !important;
}

#minhaconta .mccds .cdup .detalhes .complete .faixas .item .campo {
  width: 100% !important;
  height: 42px !important;
  float: none !important;
  padding: 0 14px !important;
  border: 1px solid var(--mc-line) !important;
  border-radius: 10px !important;
  outline: 0 !important;
  background: var(--mc-soft) !important;
  color: var(--mc-ink) !important;
  font-size: 14px !important;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease !important;
}

#minhaconta .mccds .cdup .detalhes .complete .faixas .item .campo:focus {
  border-color: rgba(255, 29, 35, .55) !important;
  background: #fff !important;
  box-shadow: 0 0 0 4px rgba(255, 29, 35, .09) !important;
}

#minhaconta .mccds .cdup .detalhes .complete .faixas .item .campo.ordem {
  position: static !important;
  grid-column: 1 !important;
  text-align: center !important;
  background: #fff !important;
  font-weight: 900 !important;
}

#minhaconta .mccds .cdup .detalhes .complete .faixas .item .campo:not(.ordem) {
  grid-column: 2 !important;
}

#minhaconta .mccds .cdup .detalhes .complete .faixas .item .deletar {
  grid-column: 3 !important;
  position: static !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid #fee2e2 !important;
  border-radius: 10px !important;
  background: #fff5f5 !important;
  color: var(--mc-red) !important;
  transition: transform .16s ease, background .16s ease, color .16s ease !important;
}

#minhaconta .mccds .cdup .detalhes .complete .faixas .item .deletar:hover {
  transform: translateY(-1px) !important;
  background: var(--mc-red) !important;
  color: #fff !important;
}

#minhaconta .mccds .cdup .detalhes .complete .faixas .item .deletar svg {
  width: 18px !important;
  height: 18px !important;
  fill: currentColor !important;
}

#minhaconta .mccds .cdup .detalhes .form .amostra {
  width: 100% !important;
  float: none !important;
  margin: 0 0 6px !important;
  color: var(--mc-muted) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

#minhaconta .mccds .cdup .detalhes .publicar {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 54px !important;
  float: none !important;
  margin: 18px 0 0 !important;
  padding: 0 20px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: linear-gradient(90deg, var(--mc-red), var(--mc-orange)) !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-transform: uppercase !important;
  box-shadow: 0 16px 34px rgba(255, 29, 35, .24) !important;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease !important;
}

#minhaconta .mccds .cdup .detalhes .publicar:hover {
  transform: translateY(-2px) !important;
  filter: saturate(1.05) !important;
  box-shadow: 0 20px 42px rgba(255, 29, 35, .30) !important;
}

#minhaconta .mccds .cdup .obrigado {
  width: 100% !important;
  float: none !important;
  margin: 24px 0 !important;
  padding: 34px !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, #fff, #fff7f7) !important;
  text-align: center !important;
}

#minhaconta .mccds .cdup .obrigado h2 {
  width: 100% !important;
  float: none !important;
  margin: 0 0 8px !important;
  color: var(--mc-red) !important;
  font-size: 34px !important;
  font-weight: 950 !important;
  line-height: 1.1 !important;
}

#minhaconta .mccds .cdup .obrigado h3 {
  width: 100% !important;
  float: none !important;
  color: var(--mc-muted) !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
}

#minhaconta .mccds .cdup .obrigado button {
  border-radius: 11px !important;
  background: linear-gradient(90deg, var(--mc-red), var(--mc-orange)) !important;
  box-shadow: 0 14px 28px rgba(255, 29, 35, .22) !important;
}

#cdupCapaRecorte {
  z-index: 99999 !important;
  background: rgba(15, 23, 42, .72) !important;
  backdrop-filter: blur(4px) !important;
}

#cdupCapaRecorte .janela {
  width: min(540px, 100%) !important;
  border-radius: 14px !important;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .34) !important;
}

#cdupCapaRecorte .crop-palco {
  border: 2px solid var(--mc-red, #ff1d23) !important;
  border-radius: 14px !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.60), 0 16px 34px rgba(15, 23, 42, .14) !important;
}

  #cdupCapaRecorte .crop-topo .aplicar {
    background: linear-gradient(90deg, #ff1d23, #ff4b1f) !important;
    border-radius: 9px !important;
  }

  #minhaconta .mccds .cdup .et3 {
    width: 100% !important;
    float: none !important;
    min-height: 360px !important;
  }

  #minhaconta .mccds .cdup .obrigado {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 12px !important;
    border-radius: 16px !important;
    background:
      radial-gradient(circle at 50% 0, rgba(255, 29, 35, .10), transparent 42%),
      linear-gradient(180deg, #fff, #fff8f7) !important;
  }

  #minhaconta .mccds .cdup .sucesso-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 330px !important;
    padding: 42px 28px !important;
    text-align: center !important;
    border: 1px solid rgba(255, 29, 35, .10) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, .92) !important;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .10) !important;
  }

  #minhaconta .mccds .cdup .sucesso-icone {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 72px !important;
    height: 72px !important;
    margin: 0 0 16px !important;
    color: #fff !important;
    border-radius: 24px !important;
    background: linear-gradient(135deg, #16a34a, #22c55e) !important;
    box-shadow: 0 18px 38px rgba(22, 163, 74, .26) !important;
  }

  #minhaconta .mccds .cdup .sucesso-icone svg {
    width: 36px !important;
    height: 36px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 3 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }

  #minhaconta .mccds .cdup .sucesso-etiqueta {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 28px !important;
    padding: 0 12px !important;
    margin: 0 0 14px !important;
    color: #ea1d2c !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    text-transform: uppercase !important;
    border-radius: 999px !important;
    background: rgba(234, 29, 44, .08) !important;
  }

  #minhaconta .mccds .cdup .obrigado h2 {
    max-width: 560px !important;
    margin: 0 auto 12px !important;
    color: #111827 !important;
    font-size: 32px !important;
    font-weight: 950 !important;
    line-height: 1.12 !important;
  }

  #minhaconta .mccds .cdup .obrigado p {
    max-width: 560px !important;
    margin: 0 auto 24px !important;
    color: #4b5563 !important;
    font-size: 15px !important;
    line-height: 1.65 !important;
  }

  #minhaconta .mccds .cdup .obrigado .sucesso-titulo {
    color: #111827 !important;
    font-weight: 950 !important;
  }

  #minhaconta .mccds .cdup .sucesso-acoes {
    display: flex !important;
    justify-content: center !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 460px !important;
  }

  #minhaconta .mccds .cdup .sucesso-acoes button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-height: 52px !important;
    padding: 0 20px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    font-weight: 950 !important;
    cursor: pointer !important;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease !important;
  }

  #minhaconta .mccds .cdup .sucesso-acoes .acesse {
    flex: 1.2 !important;
    color: #fff !important;
    background: linear-gradient(90deg, #ff1d23, #ff4b1f) !important;
    box-shadow: 0 18px 36px rgba(255, 29, 35, .24) !important;
  }

  #minhaconta .mccds .cdup .sucesso-acoes .secundario {
    flex: .9 !important;
    color: #111827 !important;
    background: #f3f4f6 !important;
    box-shadow: none !important;
  }

  #minhaconta .mccds .cdup .sucesso-acoes button:hover {
    transform: translateY(-2px) !important;
  }

  #minhaconta .mccds .cdup .sucesso-acoes .acesse svg {
    width: 18px !important;
    height: 18px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2.5 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }

  .tutorial-page {
    --tp-red: #ff1d23;
    --tp-orange: #ff4b1f;
    --tp-ink: #111827;
    --tp-muted: #64748b;
    width: min(1120px, calc(100% - 32px));
    margin: 42px auto 170px;
    color: var(--tp-ink);
  }

  .tutorial-hero {
    display: grid;
    grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
    gap: 28px;
    align-items: stretch;
  }

  .tutorial-hero-copy,
  .tutorial-player,
  .tutorial-lista {
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .08);
  }

  .tutorial-hero-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 390px;
    padding: 38px;
    background:
      radial-gradient(circle at 100% 0, rgba(255, 29, 35, .13), transparent 38%),
      linear-gradient(180deg, #fff, #fff8f7);
  }

  .tutorial-kicker {
    display: inline-flex;
    width: max-content;
    min-height: 28px;
    align-items: center;
    padding: 0 12px;
    margin: 0 0 18px;
    color: var(--tp-red);
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
    border-radius: 999px;
    background: rgba(255, 29, 35, .08);
  }

  .tutorial-hero h1 {
    margin: 0 0 14px;
    font-size: 42px;
    font-weight: 950;
    line-height: 1.04;
    letter-spacing: 0;
  }

  .tutorial-hero p {
    max-width: 440px;
    margin: 0;
    color: var(--tp-muted);
    font-size: 16px;
    line-height: 1.65;
  }

  .tutorial-player {
    overflow: hidden;
    background: #0b0f19;
  }

  .tutorial-player-video {
    aspect-ratio: 16 / 9;
    background: #020617;
  }

  .tutorial-player-video video,
  .tutorial-player-vazio {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: #020617;
  }

  .tutorial-player-info {
    padding: 22px 24px 26px;
    color: #fff;
  }

  .tutorial-player-info span {
    display: block;
    margin: 0 0 6px;
    color: #fca5a5;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
  }

  .tutorial-player-info h2 {
    margin: 0 0 8px;
    color: #fff;
    font-size: 24px;
    font-weight: 950;
  }

  .tutorial-player-info p {
    max-width: 620px;
    margin: 0;
    color: #cbd5e1;
    font-size: 14px;
    line-height: 1.55;
  }

  .tutorial-lista {
    margin: 28px 0 0;
    padding: 28px;
  }

  .tutorial-lista-topo {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 20px;
  }

  .tutorial-lista-topo h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 950;
  }

  .tutorial-lista-topo p {
    margin: 0;
    color: var(--tp-muted);
    font-size: 14px;
  }

  .tutorial-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }

  .tutorial-card {
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 16px;
    background: #fff;
    transition: transform .18s ease, box-shadow .18s ease;
  }

  .tutorial-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 22px 46px rgba(15, 23, 42, .11);
  }

  .tutorial-thumb {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #111827;
  }

  .tutorial-thumb video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .tutorial-thumb-vazio {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    color: #cbd5e1;
    font-weight: 900;
  }

  .tutorial-card-info {
    padding: 16px;
  }

  .tutorial-card-info span {
    display: block;
    margin: 0 0 8px;
    color: var(--tp-red);
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
  }

  .tutorial-card-info h3 {
    margin: 0 0 8px;
    color: var(--tp-ink);
    font-size: 17px;
    font-weight: 950;
  }

  .tutorial-card-info p {
    min-height: 44px;
    margin: 0 0 14px;
    color: var(--tp-muted);
    font-size: 13px;
    line-height: 1.45;
  }

  .tutorial-play {
    width: 100%;
    min-height: 42px;
    border: 0;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(90deg, var(--tp-red), var(--tp-orange));
    font-weight: 950;
    cursor: pointer;
  }

  .tutorial-play.bloqueado {
    color: #64748b;
    background: #f1f5f9;
    cursor: not-allowed;
  }

  .tutorial-vazio {
    grid-column: 1 / -1;
    padding: 26px;
    text-align: center;
    color: var(--tp-muted);
    border-radius: 14px;
    background: #f8fafc;
  }

  @media only screen and (max-width: 900px) {
    .tutorial-hero {
      grid-template-columns: 1fr;
    }

    .tutorial-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media only screen and (max-width: 620px) {
    .tutorial-page {
      width: min(100% - 20px, 1120px);
      margin-top: 20px;
    }

    .tutorial-hero-copy {
      min-height: auto;
      padding: 26px 20px;
    }

    .tutorial-hero h1 {
      font-size: 32px;
    }

    .tutorial-lista {
      padding: 18px;
    }

    .tutorial-lista-topo {
      display: block;
    }

    .tutorial-lista-topo p {
      margin-top: 6px;
    }

    .tutorial-grid {
      grid-template-columns: 1fr;
    }
  }

@media only screen and (max-width: 980px) {
  #minhaconta .mccds .cdup {
    width: 100% !important;
    max-width: 100% !important;
  }

  #minhaconta .mccds .cdup .bloco {
    padding: 30px 22px !important;
  }
}

@media only screen and (max-width: 760px) {
  #minhaconta .mccds .cdup {
    margin-bottom: 170px !important;
  }

  #minhaconta .mccds .cdup .etapas {
    min-height: 92px !important;
    padding: 14px 10px !important;
    border-radius: 12px !important;
  }

  #minhaconta .mccds .cdup .etapas .linha {
    width: calc(100% - 92px) !important;
    left: 46px !important;
    top: 30px !important;
  }

  #minhaconta .mccds .cdup .etapas .tab .nun,
  #minhaconta .mccds .cdup .etapas .tab .nun b {
    width: 38px !important;
    height: 38px !important;
  }

  #minhaconta .mccds .cdup .etapas .tab .nome {
    font-size: 11px !important;
  }

  #minhaconta .mccds .cdup .bloco {
    padding: 24px 16px 30px !important;
    border-radius: 12px !important;
  }

  #minhaconta .mccds .cdup .upload-lembrete {
    padding-left: 0 !important;
    text-align: left !important;
  }

  #minhaconta .mccds .cdup .upload-lembrete:before {
    position: static !important;
    display: block !important;
    margin: 0 0 10px !important;
  }

  #minhaconta .mccds .cdup .capa-linha {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  #minhaconta .mccds .cdup .info-arquivo .capa,
  #minhaconta .mccds .cdup .info-arquivo .capa .enviar,
  #minhaconta .mccds .cdup .info-arquivo .capa .enviar .file,
  #minhaconta .mccds .cdup .info-arquivo .capa.capa-pronta .imagem {
    width: 100% !important;
  }

  #minhaconta .mccds .cdup .info-arquivo .capa .enviar .file,
  #minhaconta .mccds .cdup .info-arquivo .capa.capa-pronta .imagem {
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
  }

  #minhaconta .mccds .cdup .info-arquivo .capa.capa-pronta .enviar .file {
    height: 48px !important;
    aspect-ratio: auto !important;
  }

  #minhaconta .mccds .cdup .detalhes .complete .grade {
    padding: 12px !important;
  }

  #minhaconta .mccds .cdup .detalhes .complete .faixas .item {
    grid-template-columns: 44px minmax(0, 1fr) 38px !important;
    gap: 8px !important;
  }

  #minhaconta .mccds .cdup .detalhes .complete .opcao .op {
    font-size: 12px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #minhaconta .mccds .cdup *,
  #cdupCapaRecorte * {
    transition: none !important;
    animation: none !important;
  }
}