/* Estilo do corpo */
body {
  background-color: #20232a; /* Fundo escuro */
  font-family: Arial, sans-serif;
  text-align: center;
  margin: 0;
  padding: 0;
}

/* Estilo do contêiner principal */
.container {
  background-color: #282c35; /* Fundo do contêiner */
  border-radius: 10px;
  padding: 20px;
  margin: 20px auto;
  max-width: 1000px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); /* Sombra suave */
}

/* Estilo do título */
h1 {
  font-size: 28px;
  color: #61dafb; /* Azul claro */
  margin-bottom: 20px;
  font-weight: bold; /* Texto em negrito */
}

/* Estilo da área de entrada de texto */
.input-container {
  background-color: #373b44; /* Fundo da área de entrada de texto */
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 20px; /* Espaçamento maior abaixo da área de entrada de texto */
}

.input-text {
  width: 100%;
  height: 230px;
  resize: none;
  padding: 10px;
  background-color: #373b44;
  border: none;
  color: #fff;
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-weight: 500; /* Texto meio negrito */
}

/* Estilo das badges de status */
.badge {
  padding: 8px 15px;
  font-size: 14px;
  margin: 5px;
  border-radius: 5px;
  font-weight: bold; /* Texto em negrito */
}

.dark-bg {
  background-color: #373b44; /* Fundo escuro */
  color: #fff;
}

.success-bg {
  background-color: #28a745; /* Verde */
  color: #fff;
}

.danger-bg {
  background-color: #dc3545; /* Vermelho */
  color: #fff;
}

.primary-bg {
  background-color: #007bff; /* Azul */
  color: #fff;
}

.warning-bg {
  background-color: #ffc107; /* Amarelo */
  color: #212529;
}

.info-bg {
  background-color: #17a2b8; /* Azul claro */
  color: #fff;
}

/* Estilo dos elementos de seleção */
.select-container {
  display: flex;
  flex-direction: column; /* Mudar para coluna em dispositivos móveis */
  align-items: center;
  margin-bottom: 20px; /* Espaçamento maior abaixo dos elementos de seleção */
}

.select-box,
.range-input {
  width: 100%; /* Largura total em dispositivos móveis */
  padding: 10px;
  border: none;
  background-color: #373b44;
  color: #fff;
  border-radius: 5px;
  font-size: 16px;
  font-weight: 500; /* Texto meio negrito */
  margin-bottom: 10px; /* Espaçamento entre elementos */
}

/* Estilo dos botões */
.button-container {
  margin-top: 20px;
}

.btn {
  width: 100%; /* Largura total em dispositivos móveis */
  padding: 10px 20px;
  font-size: 16px;
  margin: 5px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold; /* Texto em negrito */
}

.success-bg {
  background-color: #28a745; /* Verde */
  color: #fff;
}

.warning-bg {
  background-color: #ffc107; /* Amarelo */
  color: #212529;
}

/* Estilo das áreas de saída de texto */
.output-container {
  display: flex;
  flex-direction: column; /* Mudar para coluna em dispositivos móveis */
}

.output-box {
  width: 100%; /* Largura total em dispositivos móveis */
  background-color: #373b44;
  border-radius: 5px;
  border: 1px solid #44484f; /* Borda escura */
  margin-bottom: 20px; /* Espaçamento entre as caixas */
}

.valid-bg {
  background-color: #28a745; /* Verde */
  border: 1px solid #28a745;
}

.invalid-bg {
  background-color: #dc3545; /* Vermelho */
  border: 1px solid #dc3545;
}

.output-text {
  width: 100%;
  height: 230px;
  resize: none;
  padding: 10px;
  background-color: #373b44;
  border: none;
  color: #fff;
  font-family: Arial, sans-serif;
  font-weight: 500; /* Texto meio negrito */
}

/* Estilo do ícone de carregamento */
.fa-spinner {
  animation: spin 2s infinite linear;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Media query para dispositivos móveis */
@media (max-width: 768px) {
  .select-container {
    flex-direction: row; /* Voltar para linha em dispositivos móveis */
  }

  .select-box,
  .range-input {
    width: 48%;
    margin-right: 2%; /* Espaçamento entre elementos */
    margin-bottom: 10px; /* Espaçamento entre elementos */
  }

  .btn {
    width: 48%;
    margin-right: 2%; /* Espaçamento entre botões */
  }

  .output-container {
    flex-direction: row; /* Voltar para linha em dispositivos móveis */
  }

  .output-box {
    width: 48%;
    margin-right: 2%; /* Espaçamento entre as caixas */
    margin-bottom: 20px; /* Espaçamento entre as caixas */
  }
}

/* Estilo das áreas de saída de texto */
.output-container {
  display: flex;
  flex-direction: column;
  align-items: center; /* Centralize os elementos horizontalmente */
}

.output-box {
  width: 100%;
  background-color: #373b44;
  border-radius: 5px;
  margin-bottom: 20px;
  overflow: hidden; /* Oculte a borda extra */
}

.valid-bg,
.invalid-bg {
  width: 100%;
  height: 230px; /* Defina a altura desejada para os textareas */
  resize: none;
  padding: 10px;
  background-color: #373b44;
  border: none;
  color: #fff;
  font-family: Arial, sans-serif;
  font-weight: 500;
}

/* Define uma cor de fundo escura para a página */
body {
  background-color: #121212;
  color: #fff; /* Cor do texto */
}

/* Estiliza a barra de rolagem vertical */
::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-thumb {
  background-color: #888; /* Cor do polegar da barra de rolagem */
  border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #555; /* Cor do polegar da barra de rolagem ao passar o mouse */
}

/* Estiliza a barra de rolagem horizontal (se necessário) */
::-webkit-scrollbar-track {
  background-color: #333; /* Cor da trilha da barra de rolagem */
}

/* Estiliza o fundo de elementos com scroll (por exemplo, divs com overflow) */
.scrollable-element {
  background-color: #222;
  padding: 10px; /* Adicione algum espaço interno para evitar que o texto toque na barra de rolagem */
  border-radius: 6px;
  overflow-y: auto; /* Adiciona uma barra de rolagem vertical apenas quando necessário */
  max-height: 400px; /* Define uma altura máxima para o elemento com scroll */
}