@charset "utf-8";

.agrupa_cv{
	display: flex;
    gap: 2px; /* Espaço de 2px entre os elementos */
    align-items: center; /* Alinha os elementos verticalmente ao centro */
	}	
	
/*CURTIDA*/
.BT_curtida {
	width:50%;
    height: 50px;
    padding-left: 40px;
    padding-right: 10px;
    background: #000 url(../icones/curtir.svg) no-repeat left center;
    border-radius: 10px;
    font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-weight: 400; color: #FFF; text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s;
    margin-bottom: 2px;
    position: relative; /* Para poder posicionar o número */
}
.BT_curtida:hover {
    background: #000 url(../icones/curtir_hover.svg) no-repeat left center;
}
.BT_curtida.active {
    background: #529CBA url(../icones/curtir_ok.svg) no-repeat center center;
}
/* Ajustando o número de curtidas */
#total_curtida {
    position: absolute;
    right: 10px; /* Ajuste a posição à direita */
    font-size: 18px;
    font-weight: bold;
    z-index: 2; /* Coloca o número acima do ícone */
}
/* Ocultando o número de curtidas quando o estado "active" for ativado */
.BT_curtida.active #total_curtida {
    display: none; /* Oculta o número quando o botão está ativo */
}

/* VISUALIÇÃO */
.BT_visualiza {
	width:50%;
    height: 50px;
    padding-left: 40px;
    padding-right: 10px;
    background: #000 url(../icones/visualizacao.svg) no-repeat left center;
    border-radius: 10px;
    font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-weight: 400; color: #FFF; text-align: left;
    cursor: pointer;
    
	display: flex;
    align-items: center;
   justify-content: center;
    transition: background 0.3s;
    margin-bottom: 2px;
    position: relative; 
}
#total_visualiza {
    position: absolute;
    right: 10px; /* Ajuste a posição à direita */
    font-size: 18px;
    font-weight: bold;
    z-index: 2; /* Coloca o número acima do ícone */
}

/* ESTRELA */
.BT_estrelas {
    height: 50px;
    cursor: pointer;
    padding-right: 10px;
	padding-left:5px;
    background: #000;
	display: flex;
    gap: 1px;
    align-items: center;
    justify-content: flex-start;
    transition: background 0.3s;
    border-radius: 10px;
    font-family: Arial, Helvetica, sans-serif;font-size: 16px;font-weight: 400;color: #FFF; text-align: left;
    margin-bottom: 2px;
    position: relative; 
}
.BT_estrelas.active {
    background: #529CBA url(../icones/curtir_ok.svg) no-repeat center center;
}
.estrela {
    width: 30px;
    height: 40px;
    background: url(../icones/estrela.svg) no-repeat center center;
    transition: background 0.3s, transform 0.2s;
}
.estrela:hover {
    background: url(../icones/estrela_hover.svg) no-repeat center center;
}
.estrela.selecionada {
    background: url(../icones/estrela_hover.svg) no-repeat center center;
}
/* Ajuste para o número total de estrelas */
#total_estrela {
    position: absolute;
    right: 10px;
    font-size: 18px;
    font-weight: bold;
    z-index: 2; /* Coloca o número acima dos ícones das estrelas */
}
/* Ocultar o número de estrelas quando o estado "active" for ativado */
.BT_estrelas.active #total_estrela {
    display: none; /* Oculta o número de estrelas quando o botão está ativo */
}

/*COMPARTILHAR*/
.box_compartilhar {
	width:100%; 
	padding-right:15%; 
 	height:50px; 
	float:left; 
	padding-left:50px;
	margin-bottom:2px;
	background: #000 url(../icones/compartilhar.svg) no-repeat left center; 
	border:1.9px solid #000;
	border-radius:10px;
	position:relative; 
	cursor:pointer;
	font-family:'Rubik',Arial, Helvetica, sans-serif; font-size:16px; font-weight:500; color: #FFF; text-align:left;
	user-select: none;
	transition:0.2s ease-in-out;
	outline: none;
}
@media(max-width:500px){.box_compartilhar{ height: auto; padding-top:15px; padding-bottom:15px;}}
.box_compartilhar:hover {
	background: #FFF url(../icones/compartilhar.svg) no-repeat left center;  color: #529CBA;
	}
.box_compartilhar.active	{
	border-radius:10px; 
	background: #FFF url(../icones/compartilhar.svg) no-repeat left center;  color: #529CBA; 
	}	
/*Icone Abrir e Frechar*/
.box_compartilhar::after { 
	width:50px; 
	height:50px; 
	position:absolute; 
	right:0; top:0; 
	content: url(../icones/compartilhar-abre.svg);
	}
.box_compartilhar.active::after { 
	content: url(../icones/compartilhar-fecha.svg);
	}	
/*conteudo box geral*/		
div.conteudo_compartilhar{
	max-width:100%;
	padding:10px;
	margin-bottom:5px;
	margin-top:0;
	border:0;
	border-radius:10px;
	overflow: hidden;
	transition: 0.2s ease-in-out;
	opacity: 0;
	display:none;
	}	
div.conteudo_compartilhar.show{
	opacity:1; 
	max-height:100%; 
	display:block; 
	margin-top:0; 
	background: #529CBA; 
	border-radius:10px;
	}
	
.BT_AvaliaRcopy, .BT_AvaliaR {
    width: 50px;
    height: 50px;
    background: #000;
    border: none;
    border-radius: 50%;
	margin-right:5px;
	margin-bottom:5px;
	cursor:pointer;
    position: relative;
    display: flex;
    justify-content: center; 
    align-items: center;
	transition:0.3s ease-in-out;
	float:left;
}
.BT_AvaliaRcopy:hover, .BT_AvaliaR:hover{
	background: #333;
	}
.BT_AvaliaRcopy.cola::after {
    content: '';
    width: 50px; height: 50px;
    position: absolute; top: 0; left: 0;
    background: url(../icones/ico_copia.svg) no-repeat center center;
}		
.BT_AvaliaR.whatsapp::after {
    content: '';
    width: 50px; height: 50px;
    position: absolute; top: 0; left: 0;
    background: url(../icones/ico_whatsapp.svg) no-repeat center center;
}	
.BT_AvaliaR.email::after {
    content: '';
    width: 50px; height: 50px;
    position: absolute; top: 0; left: 0;
    background: url(../icones/ico_email.svg) no-repeat center center;
}	
.BT_AvaliaR.facebook::after {
    content: '';
    width: 50px; height: 50px;
    position: absolute; top: 0; left: 0;
    background: url(../icones/ico_facebook.svg) no-repeat center center;
}
.BT_AvaliaR.linkedin::after {
    content: '';
    width: 50px; height: 50px;
    position: absolute; top: 0; left: 0;
    background: url(../icones/ico_likedin.svg) no-repeat center center;
}
.BT_AvaliaR.pinterest::after {
    content: '';
    width: 50px; height: 50px;
    position: absolute; top: 0; left: 0;
    background: url(../icones/ico_pinterest.svg) no-repeat center center;
}
.BT_AvaliaR.twiter::after {
    content: '';
    width: 50px; height: 50px;
    position: absolute; top: 0; left: 0;
    background: url(../icones/ico_twiter.svg) no-repeat center center;
}