* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'poppins';
  font-size: 16px;
}

body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
  margin: 0;
  padding: 20px;
  max-width: 600px;
}

.kanban {
  display: flex;
  justify-content: center;
  min-height: 400px;
  max-width: 600px;
  gap: 15px;
  padding: 10px;
}

.column {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  border-radius: 5px;
}

.first-column {
  background-color: #4A495A;
  min-width: 40px;
  max-height: 400px; /* Defina a altura máxima conforme desejado */
  overflow-y: auto; /* Adiciona uma barra de rolagem vertical, se necessário */
}

.second-column {
  background-color: #F5F8FA;
  overflow-y: auto;
  max-height: 1000px;
  flex-grow: 1;
  width: 50%; /* Ajuste a largura conforme necessário */
  max-width: 500px; /* Defina uma largura máxima para evitar que a coluna se estenda demais */
  margin-left: 20px; /* Adicione um espaçamento à esquerda para separar as colunas */
}

.item {
  background-color: #6C6B7E;
  color: white;
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 5px; /* Adiciona um espaçamento entre os itens */
  cursor: pointer; /* Altera o cursor para indicar interatividade */
  transition: background-color 0.3s, transform 0.3s;
}

.item:hover {
  background-color: #5C5B6E; /* Altera a cor de fundo ao passar o mouse */
  transform: scale(1.03); /* Aumenta ligeiramente o tamanho ao passar o mouse */
}

.dragging {
  opacity: 0.5;
}


.simple-question-group, .evaluation-group, .radio-group, .observations-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  
  background-color: #F5F8FA; /* Ou a cor desejada */
  border: 1px solid #ccc;
  border-radius: 5px;
  position: relative;
  z-index: 1000;
  transition: background-color 0.3s, border-color 0.3s; /* Adiciona transição para a cor de fundo e a cor da borda */
}

.simple-question-group:hover, .evaluation-group:hover, .radio-group:hover, .observations-group:hover {
  background-color: #e0e0e0; /* Cor de fundo alterada */
  border-color: #4A495A; /* Cor da borda alterada */
}

/* Estilos específicos para os inputs dentro de .simple-question-group */
.simple-question-group, .evaluation-group, .radio-group, .observations-group input {
  margin-bottom: 10px;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
}


/*ESTILOS TEXTO */

.question-input {
  margin-bottom: 10px; /* Adapte conforme necessário */
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
  color: black;
}

/* BOTÕES JAVASCRIPT */

.action-button {
  width: 100%; /* Ocupa 100% da largura disponível na segunda coluna */
  
  background-color: #4A495A;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  box-sizing: border-box;
}

/* Limpa a margem do último botão para evitar quebrar para a próxima linha */
.action-button:last-child {
  margin-right: 0;
}

.form-title-section {
  margin-bottom: 20px; /* Adiciona margem inferior para espaçamento */
}

.form-title-section label {
  display: block; /* Exibe o rótulo em uma nova linha */
  margin-bottom: 5px; /* Adiciona margem inferior para espaçamento */
  font-weight: bold; /* Define negrito para o rótulo */
}

.form-title-section input[type="text"] {
  width: 100%; /* Define a largura do campo de entrada como 100% */
  padding: 10px; /* Adiciona preenchimento interno para espaçamento */
  border: 1px solid #ccc; /* Adiciona uma borda */
  border-radius: 5px; /* Adiciona bordas arredondadas */
  box-sizing: border-box; /* Inclui a borda e o preenchimento na largura total */
}

.form-title-section input[type="text"]:focus {
  outline: none; /* Remove o contorno ao focar */
  border-color: #007bff; /* Altera a cor da borda ao focar */
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* Adiciona uma sombra ao focar */
}

/* Estilização dos containers criados quando arrastados */
.column.second-column .item.dragging {
  background-color: #F0F0F0; /* Cor de fundo para destacar o container */
  border: 2px dashed #4A495A; /* Borda pontilhada para indicar área de destino */
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 10px; /* Espaçamento entre os containers */
  transition: border-color 0.3s; /* Adiciona transição para a cor da borda */
}

/* Efeito de realce ao passar o mouse sobre o container */

/* Estilo dos botões nos grupos de perguntas */
.simple-question-group button,
.evaluation-group button,
.radio-group button,
.observations-group button {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  background-color: #4A495A;
  color: white;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s;
}

/* Efeito de realce ao passar o mouse sobre os botões */
.simple-question-group button:hover,
.evaluation-group button:hover,
.radio-group button:hover,
.observations-group button:hover {
  background-color: #5C5B6E;
}

/* Feedback visual quando o botão é clicado */
.simple-question-group button:active,
.evaluation-group button:active,
.radio-group button:active,
.observations-group button:active {
  transform: scale(0.98);
}

/* Estilo do botão "Guardar formulário" */
button#saveFormButton {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  background-color: #4A495A;
  color: white;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s;
}

/* Centralizar o botão */
button#saveFormButton {
  display: block;
  margin: 5px auto; /* Isso centraliza horizontalmente o botão dentro de seu contêiner */
}

/* Efeito de realce ao passar o mouse sobre o botão */
button#saveFormButton:hover {
  background-color: #5C5B6E;
}

/* Feedback visual quando o botão é clicado */
button#saveFormButton:active {
  transform: scale(0.98);
}

.popup {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #f0f0f0;
  border: 2px solid #333;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  z-index: 9999; /* Garante que a popup seja exibida na frente de outros elementos */
}

.popup-content {
  text-align: center;
}

.close-popup {
  position: absolute;
  top: 5px;
  right: 5px;
  cursor: pointer;
  font-size: 20px;
  color: #333;
}

.close-popup:hover {
  color: #000;
}

.popup-message {
  font-size: 18px;
  color: #333;
}

.action-button, .delete-button {
  display: flex;
  justify-content: center;
  align-items: center;
}

.buttons-container {
  display: flex;
  flex-direction: column;
}

.buttons-container button {
  order: 9999; /* Valor alto para garantir que os botões sempre apareçam no final */
}