html { font-family: sans-serif; background: #eee; padding: 1rem; }
body { max-width: 960px; margin: 0 auto; background: #eee; overflow-x: hidden;  }
h1 { font-family: serif; color: #377ba8; margin: 1rem 0; }
a { color: #377ba8; }
hr { border: none; border-top: 1px solid black; }
nav { background: lightgray; display: flex; align-items: center; padding: 0 0.5rem; justify-content: flex-end; }
nav h1 { flex: auto; margin: 0; }
nav h1 a { text-decoration: none; padding: 0.25rem 0.5rem; }
nav ul  { display: flex; list-style: none; margin: 0; padding: 0;}
nav ul li a, nav ul li span, header .action { display: flex; padding: 0.5rem; text-decoration: none; color:#000000; }
legend {font-size: calc(1.175rem + .2vw);}
section { background: white;}

.content { padding: 0 1rem 1rem; }
.content > header { border-bottom: 1px solid lightgray; display: flex; align-items: flex-end; }
.content > header h1 { flex: auto; margin: 1rem 0 0.25rem 0; }
.flash { margin: 1em 0; padding: 1em; background: #cae6f6; border: 1px solid #377ba8; }
.post > header { display: flex; align-items: flex-end; font-size: 0.85em; }
.post > header > div:first-of-type { flex: auto; }
.post > header h1 { font-size: 1.5em; margin-bottom: 0; }
.post .about { color: slategray; font-style: italic; }
.post .body { white-space: pre-line; }
.content:last-child { margin-bottom: 0; }
.content form { margin: 1em 0; display: flex; flex-direction: column; }
.content label { font-weight: bold; margin-bottom: 0.5em; }
.content input, .content textarea { margin-bottom: 1em; }
.content textarea { min-height: 12em; resize: vertical; }
input.danger { color: #cc2f2e; }
input[type=submit] { align-self: start; min-width: 10em; }

.responsive-img {
    width: 130px; /* Tamanho fixo desejado */
    height: auto; /* Mantém a proporção */
}

.square-image {
    width: 120px; /* Define a largura fixa */
    height: 120px; /* Define a altura fixa */
	max-height: 150px;
    object-fit: cover; /* Faz a imagem cobrir o espaço, cortando o excesso */
}

.fix-size-card{
	width: 10rem;
}

.fix-size-plano{
	width: 22rem;
}






@media (max-width: 320px) {
	legend {font-size: 0.9rem;}
}

@media (min-width: 768px) {
	legend {font-size: calc(1.0rem + .2vw);}
}



@media (min-width: 576px) { /* Para telas maiores */
	.square-image {
        width: 150px; /* Tamanho fixo em telas maiores */
        height: 150px; /* Tamanho fixo em telas maiores */
    }
	
	.fix-size-card{
		width: 13rem;
	}
}

.footer-social{
	margin-right: 10px;
}

.nav-link {
            color: black; /* Define a cor do link */
}
        
.nav-link:hover {
            color: gray; /* Cor ao passar o mouse (opcional) */
}

.invisible-textarea {
            border: none;
            resize: none; /* Remove a opção de redimensionar */
            background: transparent; /* Torna o fundo transparente */
            padding: 0; /* Remove o preenchimento */
            font: inherit; /* Herda a fonte do elemento pai */
            color: inherit; /* Herda a cor do texto */
}

.auto-width-textarea {
            width: auto; /* Define largura automática */
            min-width: 100%; /* Garante que ocupe pelo menos a largura do contêiner */
            border: none;
            resize: none;
            background: transparent;
            padding: 0;
            font: inherit;
            color: inherit;
}

.scrollable-div {
    max-height: 600px; /* Define a altura máxima */
    overflow-y: auto; /* Ativa a rolagem vertical */
}

.custom-font-h5 {
    font-size: 1.05rem; /* Tamanho padrão para telas pequenas */
}

@media (min-width: 768px) {
    .custom-font-h5 {
        font-size: 1.4rem; /* Tamanho maior para telas médias e acima */
    }
}

.custom-font-small {
    font-size: 15px; /* Tamanho padrão para telas pequenas */
}

@media (max-width: 576px) {
    .custom-font-small {
        font-size: 0.7rem; /* Tamanho maior para telas médias e acima */
    }
}

@media (max-width: 320px) {
    .custom-font-small {
        font-size: 0.6rem; /* Tamanho maior para telas médias e acima */
    }
}

.custom-font-medium {
    font-size: 16px; /* Tamanho padrão para telas pequenas */
}

@media (max-width: 576px) {
    .custom-font-medium {
        font-size: 0.9rem; /* Tamanho maior para telas médias e acima */
    }
}

@media (max-width: 320px) {
    .custom-font-medium {
        font-size: 0.8rem; /* Tamanho maior para telas médias e acima */
    }
}

#emojiPicker {
    display: flex; /* Alinha os emojis em linha */
    flex-wrap: wrap; /* Permite que os emojis quebrem para a próxima linha se necessário */
    border: 1px solid #ccc; /* Adiciona uma borda para visualização */
    padding: 10px; /* Espaçamento interno */
    background-color: white; /* Fundo branco */
    z-index: 1000; /* Para garantir que fique acima de outros elementos */
	
}

.emoji {
    margin: 5px; /* Espaçamento entre emojis */
    cursor: pointer; /* Muda o cursor ao passar sobre o emoji */
}

.borda-custom {
    border: 2px solid #C7283B; /* Define a cor da borda */
    border-radius: 10px; /* Define o arredondamento */
}