.progress-bar-container {
	width: 100%;
	background-color: #f3f3f3;
	border-radius: 4px;
	margin-top: 5px;
	height: 5px;
}

.progress-bar {
	height: 100%;
	width: 0;
	border-radius: 4px;
	transition: width 0.4s ease;
}

@keyframes dots {
	0% { content: ''; }
	25% { content: '.'; }
	50% { content: '..'; }
	75% { content: '...'; }
	100% { content: ''; }
}

@keyframes blink {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.5; }
}

#loadingOverlay {
	font-size: 24px;
	color: #000;
}

#loadingDots::after {
	content: '';
	animation: dots 1s steps(3, end) infinite;
}

#loadingOverlay span {
	animation: blink 1s linear infinite;
}

/**
   tooltip customizado. Alternativa ao bootstrap,devido o tooltip não funcionar em modals
   Basta adicionar o atributo "data-tooltip" aos elementos que devem ter tooltip
 */
.custom-tooltip {
	position: absolute; /* Permite alinhar o tooltip corretamente dentro do modal */
	background: rgba(0, 0, 0, 0.9);
	color: #fff;
	padding: 8px 12px;
	border-radius: 5px;
	font-size: 14px;
	white-space: normal; /* Permite quebras de linha */
	max-width: 300px; /* Define um limite de largura */
	word-wrap: break-word; /* Permite quebrar palavras longas */
	pointer-events: none;
	z-index: 9999 !important; /* Garante que o tooltip fique acima do modal */
}

.modal-fluxo-contato-historico {
	background:url(../img/modal_fluxo_contato.png) no-repeat center top !important; /* 170px x 200px */
	background-size:640px 940px;/* position in the center of the screen */
	/*opacity: 0.7;*/
}

.x-modal-label-sucess-gradient
{
	background: linear-gradient(250deg, #0c74c4db, #0c74c4e8, #0a5fa2);
	padding: 10px 10px 10px 20px !important;
	text-align: left !important;
}

.x-modal-label-warning-gradient
{
	background: linear-gradient(250deg, #f0ac54bf, #f8ac59, #f89b35);
	padding: 10px 10px 10px 20px !important;
	text-align: left !important;
}
.x-barcode{
	display: inline-block;
  	width: 25px; /* ajuste conforme necessário */
  	height: 25px;
	background-image: url(../img/x-barcode2.png); 
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	vertical-align: middle;
}
.x-ico-pet{
	display: inline-block;
  	width: 25px; /* ajuste conforme necessário */
  	height: 25px;
	background-image: url(../img/icone/pet.png); 
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	vertical-align: middle;
}

.x-ico-convalescente{
	display: inline-block;
  	width: 25px; /* ajuste conforme necessário */
  	height: 25px;
	background-image: url(../img/icone/convalescentes.png); 
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	vertical-align: middle;
}

.x-ico-materiais{
	display: inline-block;
  	width: 25px; /* ajuste conforme necessário */
  	height: 25px;
	background-image: url(../img/icone/materiais.png); 
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	vertical-align: middle;
}