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

.btn-success.active.focus, 
.btn-success.active:focus,
.btn-success.active:hover,
.btn-success:active.focus,
.btn-success:active:focus,
.btn-success:active:hover,
.open>.dropdown-toggle.btn-success.focus,
.open>.dropdown-toggle.btn-success:focus,
.open>.dropdown-toggle.btn-success:hover {
  background-color: #1f90d6;
  border-color: #1a7bb9;
}

.adiplix-control  {
  background-color: #fff;
  background-image: none;
  border: 1px solid #d9d9d9;
  border-radius: 3px;
  color: inherit;
  display: block;
  padding: 6px 12px;
  transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
  width: 100%;
  height: 34px;
  font-size: 14px;
  box-shadow: none;
  transition: background-color 0.3s;
}

.adiplix-control:focus { border-color: #4395D1; }
.adiplix-control:focus-visible { outline: none; }

button.adiplix-control:hover {
  background-color: #eee;
}

button.adiplix-control.primary {
  background-color: #1a7bb9;
  border: 1px solid #146394;
}
button.adiplix-control.danger {
  background-color: #ec4758;
  border: 1px solid #b22a38;
}
button.adiplix-control.success {
  background-color: #18a689;
  border: 1px solid #148972;
}

button.adiplix-control.primary:hover {
  background-color: #1f90d6;
}
button.adiplix-control.danger:hover {
  background-color: #f55d6c;
}
button.adiplix-control.success:hover {
  background-color: #20ceab;
}

button.adiplix-control.primary,
button.adiplix-control.danger,
button.adiplix-control.success {
  position: relative;
  overflow: hidden;
  color: #fff;
  transition: background 0.3s ease;
  z-index: 0;
  cursor: pointer;
}

button.adiplix-control.primary::after,
button.adiplix-control.danger::after,
button.adiplix-control.success::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 10%, transparent 10%);
  transform: translate(-50%, -50%);
  opacity: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
}

button.adiplix-control.primary:hover::after,
button.adiplix-control.danger:hover::after,
button.adiplix-control.success:hover::after {
  animation: adiplix-hover 0.75s forwards;
}

@keyframes adiplix-hover {
  0% {
    width: 0;
    height: 0;
    opacity: 0.5;
  }
  100% {
    width: 300%;
    height: 300%;
    opacity: 0;
  }
}


.flexrow {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 5px;
}

.flexrow > * {
  flex: 1 1 0;
  min-width: 0;
  box-sizing: border-box;
}