:root {
	--finup-azul-escuro: #0c2d57;
	--finup-azul: #2c62a7;
	--finup-laranja: #fc6736;
	--finup-amarelo: #ffad60;
	--finup-azul-claro: #eae5ff;
    --sombra-padrao: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}

.cabecalho {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	row-gap: 1rem;
}

#formMetas {
	row-gap: 1rem;
}

#btnAtualizar {
	display: none;
}

.filtros {
	display: flex;
	flex-wrap: wrap;
	column-gap: 1.2rem;
	row-gap: 0.8rem;
}
	
#metasAdicionadas {
	row-gap: 2rem;
}

#metasAdicionadas .card {
	border-radius: 10px;
	box-shadow: var(--sombra-padrao);
	border: none;
	transition: 0.3s;
	overflow: hidden;
	padding: 0.8rem;
	height: 100%;
}

#metasAdicionadas .card:hover {
	transform: translateY(-3px);
}

.card-body {
	display: flex;
	flex-direction: column;
	row-gap: 0.5rem;
}

progress {
	width: 100%;
}

@keyframes progressAnim {
	0% {width: 0;}
	100% {width: var(--progress-width);}
}
  
.contribuicaoMensal {
	font-size: 1rem; 
  	margin-top: 10px; 
  	line-height: 1.2;
  	color: #333;
 	text-align: center;
 	white-space: normal;
  	word-wrap: break-word;
}

#footerCard {
	flex-wrap:wrap;
	gap: 0.5rem;
	border: none;
	background-color: transparent
}

.mensagem-comemoracao {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #795fe6;
    color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    font-size: 1.5rem;
    text-align: center;
    z-index: 9999;
    opacity: 1;
    animation: fadeOut 2.5s ease forwards, scaleUp 0.5s ease;
}
@keyframes fadeOut {
    0% { opacity: 1; }
    80% { opacity: 0.5; }
    100% { opacity: 0; }
}

@keyframes scaleUp {
    0% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.1); }
    100% { transform: translate(-50%, -50%) scale(1); }
}

.textoLembrete {
	color: #0c2d57;
	max-width: 100%;
	word-wrap: break-word; 
	overflow-wrap: break-word; 
	font-size:0.9rem;
	line-height:1.2;
}