:root {
  --PrimaryColor: #0078D7; /* Change of your choice */
  --PrimaryColorLight: #60CDFF; /* Lighter version of --PrimaryColor for DarkMode */
}
body {
  font-family: "Segoe UI";
}

[data-theme="dark"] ::selection {
  background-color: #2E517E;
}

.text-left {
  display: flex;
  justify-content: flex-start; /* Alinha os elementos à esquerda */
  align-items: center; /* Alinha os itens verticalmente ao centro */
}

.text-center {
  display: flex;
  justify-content: center; /* Centraliza os elementos */
  align-items: center; /* Alinha os itens verticalmente ao centro */
}

.text-end {
  display: flex;
  justify-content: flex-end; /* Alinha os elementos à direita */
  align-items: center; /* Alinha os itens verticalmente ao centro */
}

.image {
  border: 1px solid #ccc; /* Borda fina com cor neutra */
  border-radius: 8px; /* Cantos arredondados */
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1); /* Sombramento leve */
  display: block; /* Garante que o elemento se comporte como um bloco (opcional) */
  max-width: 100%; /* Evita que a imagem ultrapasse os limites do container */
  height: auto; /* Mantém a proporção da imagem */
}

.invalid-feedback {
  color: var(--color-danger-default);
  margin-top: -15px;
  font-size: 12px;
}
/* Contêiner da Grid */
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr); /* 12 colunas de tamanhos iguais */
  gap: 12px; /* Espaçamento entre as colunas */
  margin-bottom: 8px;
  margin-top: 8px;
  align-items: center;
}

/* Classes para colunas fixas (1 a 12 baseado no sistema de 12 colunas) */
[class^="col-"] {
  padding: 8px; /* Espaçamento interno das colunas */
  box-sizing: border-box; /* Inclui padding no tamanho da coluna */
 
}

.col-1 { grid-column: span 1; } /* Ocupa 1 coluna */
.col-2 { grid-column: span 2; } /* Ocupa 2 colunas */
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
.col-9 { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }

/* Classe para colunas automáticas */
.col-auto {
  grid-column:auto; /* O tamanho é ajustado automaticamente ao conteúdo */
}

/* Responsividade: ajusta para uma coluna em telas pequenas */
@media (max-width: 768px) {
  .grid {
      grid-template-columns: 1fr; /* Apenas uma coluna */
  }
}

/* Classes para cabeçalhos H1 a H7 */
.h1 {
  font-size: 2em;
  font-weight: 500;
  margin-top: 0.67em;
  margin-bottom: 0.67em;
}

.h2 {
  font-size: 1.5em;
  font-weight: 500;
  margin-top: 0.83em;
  margin-bottom: 0.83em;
}

.h3 {
  font-size: 1.17em;
  font-weight: 500;
  margin-top: 1em;
  margin-bottom: 1em;
}

.h4 {
  font-size: 1em;
  font-weight: 500;
  margin-top: 1.33em;
  margin-bottom: 1.33em;
}

.h5 {
  font-size: 0.83em;
  font-weight: 500;
  margin-top: 1.67em;
  margin-bottom: 1.67em;
}

.h6 {
  font-size: 0.67em;
  font-weight: 500;
  margin-top: 2.33em;
  margin-bottom: 2.33em;
}

.h7 {
  font-size: 0.5em;
  font-weight: 500;
  margin-top: 3em;
  margin-bottom: 3em;
}

/* Texto grosso (negrito) */
.text-bold {
  font-weight: 500; /* Negrito */
  font-size: 1rem; /* Tamanho padrão */
  line-height: 1.5; /* Altura da linha */
  color: #333; /* Cor neutra padrão */
}

/* Texto padrão */
.text-regular {
  font-weight: normal; /* Peso regular */
  font-size: 0.9rem; /* Tamanho padrão */
  line-height: 1.5; /* Altura da linha para boa legibilidade */
  color: #333; /* Cor neutra padrão */
}