body {
	background-attachment: fixed;
	/* background-color: #001717; */
	/* background-image: radial-gradient(circle at 30% 30%, #10042c, transparent 60%),
										radial-gradient(circle at 70% 50%, #10042c, transparent 70%),
										radial-gradient(circle at 50% 80%, #7c0442, transparent 50%),
										radial-gradient(circle at 90% 90%, #610061, transparent 80%); */
	background-size: cover;
	background-repeat: no-repeat;
	min-height: 100vh;
	margin: 0;
	padding: 0;
}

/* create a libear gradient from top to bottom */
/* .top-header-title-section{
	background-image: linear-gradient( to bottom, #e9edff, #ffffff  );
	color: rgb(0, 0, 0);
	height: 100px;
} */



/* .custom-card:hover {
	filter: brightness(98%); 
	transition: filter 0.1s ease; 
} */

.custom-card {
	position: relative;
	overflow: hidden;
	border-radius: 15px!important;

	/* color: white; */
	/* Tus otros estilos aquí */
}

.bg-transparent-story{
	background-color: hsl(240deg 3.7% 15.9%);
}

.bg-transparent-clear{
	background-color: hsl(0, 0%, 100%);
} 

.bg-transparent-clear:hover{
	background-color: hsl(0, 0%, 97%);
	/* add tehanimation to transition of t backgroun color will be of 0.2 seconds */
	transition: background-color 0.1s ease;
}

.watermark {
  position: fixed;
  opacity: 1;

  background: url(../img/demo.jpeg) repeat -16% ;
  background-size: contain;
  width: 100vw;

  display: block;
  height: 100%;
}


.card-second-line{
	/* background-color: #e8eef296; */
	/* background-image: linear-gradient(to bottom, rgba(0, 0, 255, 0.05), rgba(255, 0, 255, 0.05)); */

	background-color: #ffffff16;




}


.card-third-line{
	background-color: #ffffff15;
}


.card-bottom{
	min-height: 120px !important;
}


  .no-overflow-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* Esto añadirá puntos suspensivos (...) al final si el texto es demasiado largo */
  }

.tx-card{
	min-height: 121.6px;
}

/* Estilo para la onda */
.ripple {
	position: absolute;
	border-radius: 50%;
	transform: scale(0);
	animation: ripple 0.6s linear;
	background-color: rgba(0, 0, 0, 0.251)
}

@keyframes ripple {
	to {
			transform: scale(4);
			opacity: 0;
	}
}

.chart-container {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	width: 100%; /* Asegura que tome el 100% del ancho disponible */
	height: 100%; /* Asegura que tome el 100% de la altura disponible */
}

/* .bg-impulse-color{
	background-image: linear-gradient( to right, #6b1195, #d105c0  );
	color: white;
}

.impulse-button {
  background-color: #9214cc;
  color: white;
  border-color: #9214cc; 
	border-radius: 10px;
}

.impulse-button:hover {
  background-color: #6e109a;
  color: white;
  border-color: #6e109a;
}

.impulse-button:active {
  background-color: #4d0a70;
  color: white;
  border-color: #4d0a70;
} */
.bg-impulse-color{
	background-image: linear-gradient( to right, #113095, #057fd1  );
	color: white;
}

.impulse-button {
  background-color: rgb(32, 129, 226);
  color: white;
	border-radius: 10px;
}

.impulse-button:hover {
  background-color: rgb(68, 149, 230);
  color: white;
}

/* .impulse-button:active {
  background-color: #00094b;
  color: white;
  
} */





.modal-header {
	position: relative;
	overflow: hidden;
	height: 120px;
}

.rocket-watermark {
	position: absolute;
	height: 190px;
	right: 5%;
	top: 50%;
	transform: translateY(-50%);
	/* Opcional: establece el tamaño si es necesario */
	/* width: 100px; */
}


.bg-claude-color{
	background-image: linear-gradient( to right, #d97757, #7e3b25  );
	/* background-image: linear-gradient( to right, #119523, #0597d1, #115595, #95116d ); */
	color: white;
}

.bg-claude-secondary-color{
	background-color: #f0eee5;
}

.modal-footer{
	border-radius: 15px !important;
}
.btn{
	border-radius: 10px !important;
}


.claude-button {
  background-color: #cc5e14;
  color: white;
  border-color: #812000; 
	border-radius: 10px;
}

.claude-button:hover {
  background-color: #b05519;
  color: white;
  border-color: #812000;

}

.claude-button:active {
  background-color: #a45017;
  color: white;
  border-color: #812000;
}

.claude-button:disabled {
	background-color: #a16f4d;
	color: white;
	border-color: #812000;
}


.claude-watermark {
	position: absolute;
	height: 400px;
	left: -150px;
	top: 50%;
	transform: translateY(-50%);

	/* Opcional: establece el tamaño si es necesario */
	/* width: 100px; */
}





@media only screen and (min-width: 768px) {
  /* Tus estilos aquí */

}

@media screen and (max-width: 499px) {
	.rocket-watermark {
		position: relative;
		/* height: 90px; */
		right:-5%;
		top: 100%;
		transform: translateY(-50%);
		/* Opcional: establece el tamaño si es necesario */
		/* width: 100px; */
	}

	.claude-watermark {
		position: relative;
		width: 200px;
		height: 200px;
		top: 0;
		transform: translateX(50%);
	}

	.claude-modal-header-text{
		position: absolute;
		font-size: 15px!important;
		transform: translateX(-20%);
	}
}


.popover {
	background-color: #000; /* Fondo negro */
	color: #fff; /* Texto blanco */
	border: none; /* Sin bordes */
	border-radius: 15px;
}

.popover-header {
	background-color: #000; /* Fondo negro para el título */
	color: #fff; /* Texto blanco para el título */
	border-bottom: none; /* Sin borde inferior */
	border-radius: 15px;
}

.popover-body {
	color: #fff; /* Texto blanco en el contenido */
}



.inverted-svg {
  filter: invert(1);
}