/*user section*/


.ack_user{
	
	font-size:1em !important;
	color:#ffffff;
}

.img_ack_cat{
	
	width: 100px;
}

.img_ack_award{
	
	width: 50px;
}

.award-text{
	
	font-size:0.9em ;
	font-weight: 700;
}

.award-coins{
	
	font-size:0.7em ;
}

.ack_limit{
	font-weight: 700;
	font-size:1em !important;
}


/* Estilos modificados */
.bg-af3-panel-light {
	background-color:var(--secondary-color) !important;
}

.recognition-card {
	border: 1px solid #eee;
	box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
	border-radius: 8px;
	margin-bottom: 20px;
	background-color: #fff !important; /* Fondo blanco */
}

.img-recognition-congrat {
	width: 120px;
	height: 120px;
	border-radius: 50%;
	overflow: hidden; /* Recorta la imagen para que se ajuste al círculo */
	border: 4px solid #7D1BC8; /* Color del borde (ajusta según el tono exacto) */
	object-fit: cover; /* Asegura que la imagen se recorte bien dentro del círculo */
}

.img-recognition {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	overflow: hidden; /* Recorta la imagen para que se ajuste al círculo */
}

.img-recognition img {
	width: 100%;
	height: 100%;
	object-fit: cover; /* Ajusta la imagen para cubrir todo el contenedor */
}

.img-recognition-modal {
	width: 120px;
	height: 120px;
	border-radius: 50%;
	overflow: hidden; /* Recorta la imagen para que se ajuste al círculo */
}

.img-recognition-modal img {
	width: 100%;
	height: 100%;
	object-fit: cover; /* Ajusta la imagen para cubrir todo el contenedor */
}

.heart-icon {
	width: 40px;
	height: 40px;
	background-color: #f8bbd0;
	border-radius: 50%;
	position: relative;
}

.heart-icon::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 20px;
	height: 20px;
	background-color: #fff;
	-webkit-mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"%3E%3Cpath d="M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z"/%3E%3C/svg%3E') center/contain no-repeat;
	mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"%3E%3Cpath d="M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z"/%3E%3C/svg%3E') center/contain no-repeat;
}

.exclamation-icon {
	width: 40px;
	height: 40px;
	background-color: #ffc107; /* Cambia el color de fondo a amarillo */
	border-radius: 50%;
	position: relative;
}

.exclamation-icon::before {
	content: '!'; /* Cambia el contenido a un signo de exclamación */
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 24px; /* Ajusta el tamaño del signo de exclamación */
	color: #fff; /* Cambia el color del signo de exclamación a blanco */
}

.message-icon {
	width: 40px;
	height: 40px;
	background-color: #673ab7;
	border-radius: 50%;
	position: relative;
}

.message-icon::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 20px;
	height: 20px;
	background-color: #fff;
	-webkit-mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"%3E%3Cpath d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-48 48v152c0 13.3-10.7 24-24 24H160c-13.3 0-24-10.7-24-24V80c0-13.3 10.7-24 24-24h168c13.3 0 24 10.7 24 24zm-80 288H160c-13.3 0-24 10.7-24 24v32c0 13.3 10.7 24 24 24h160c13.3 0 24-10.7 24-24v-32c0-13.3-10.7-24-24-24z"/%3E%3C/svg%3E') center/contain no-repeat;
	mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"%3E%3Cpath d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-48 48v152c0 13.3-10.7 24-24 24H160c-13.3 0-24-10.7-24-24V80c0-13.3 10.7-24 24-24h168c13.3 0 24 10.7 24 24zm-80 288H160c-13.3 0-24 10.7-24 24v32c0 13.3 10.7 24 24 24h160c13.3 0 24-10.7 24-24v-32c0-13.3-10.7-24-24-24z"/%3E%3C/svg%3E') center/contain no-repeat;
}

.icon-button {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: #673ab7; /* Color de fondo del círculo */
	color: #fff; /* Color del icono */
	border: none;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
}

.icon-button i {
	font-size: 20px; /* Tamaño del icono */
}

.jumbotron-container {
	position: relative;
	width: 100%; /* Ajusta el ancho según tus necesidades */
	height: 450px !important; /* Ajusta la altura según tus necesidades */
}

.scrollable-jumbotron {
	width: 100%;
	height: 100%;
	overflow-y: auto;
	overflow: hidden;
}

.scroll-arrows {
	position: absolute;
	bottom: 10px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 10px;
}

.scroll-arrow {
	background-color: var(--primary-color);
	color: #fff;
	border: none;
	padding: 5px 10px;
	cursor: pointer;
}

.modal-header {
	background-color: var(--primary-color);
	color: #fff;
}

.btn-secondary {
	background-color: var(--primary-color) !important;
	color: #fff;
}

.profile-img {
	width: 60px;  /* Ajusta según el tamaño deseado */
	height: 60px;
	border-radius: 50%; /* Hace la imagen completamente circular */
	border: 4px solid #7D1BC8; /* Color del borde (ajusta según el tono exacto) */
	object-fit: cover; /* Asegura que la imagen se recorte bien dentro del círculo */
}

.comment {
	background-color: #fff; /* Color de fondo similar */
	border: 2px solid #B865C6; /* Contorno morado */
	border-radius: 15px; /* Bordes redondeados */
	padding: 15px;
	/*max-width: 400px; !* Ajusta el ancho según necesites *!*/
	font-family: Arial, sans-serif;
	box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1); /* Sombra ligera */
}

.card-outline-shadow {
	border: 1px solid rgba(0, 0, 0, 0.125); /* Contorno sutil */
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
	transition: box-shadow 0.3s ease; /* Transición suave para la sombra */
}

.card-outline-shadow:hover {
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Sombra más pronunciada al pasar el ratón */
}


/*Para la vista movil*/

@media (max-width: 768px) {
    div[role="main"] > .row , div[role="main"] > .row > .col-7 > .row{
        display: block;
        margin-right: auto;
        margin-left: auto;
    }

    div[role="main"] > .row > .col-5, div[role="main"] > .row > .col-7, div[role="main"] > .row > .col-7 > .row > .card-outline-shadow {
        max-width: 100%;
    }

	div[role="main"] > .row > .col-5 {
		margin-bottom: 10%;
	}
} 



#modalAcknowledgmentMessage .modal-footer{
	display: none !important;
}