* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/********** DIV BODY **********/

#div_body {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding-left: 10px;
  height: 100vh; /* ocupa a altura total da tela */
}

/********** BLOCO TÍTULO **********/

#bloco_titulo {
  background-color: #AEC6CF;
  position: fixed;
  top: 0;
  width: 100vw;
}

/********** BLOCO BOTÕES **********/

#bloco_botoes {
  background-color: #C6E5B1;
  position: fixed;
  width: 100vw;
}

.botao_login {
  cursor: pointer;
}

.botao_novo {
  cursor: pointer;
  display: none;
}

.botao_editar {
  cursor: pointer;
  display: none;
}

.botao_filtros {
  cursor: pointer;
}

/*************** BLOCO PAINEL E ITENS ***************/

#bloco_painel_e_itens {
  display: flex;
  flex-direction: row;
  flex: 1; /* ocupa o espaço restante verticalmente */
  /*background-color: #CFCFC4;*/
}

/********** BLOCO PAINEL **********/

#bloco_painel {
  width: 25%;
  background-color: #FDFD96;
  display: none;
  flex-direction: column;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

#bloco_painel > * {
  max-width: 100%;
  box-sizing: border-box;
}

/* Em celulares: largura até 768px */
@media (max-width: 768px) {
  #bloco_painel {
    width: 50%;
  }
}

/***** BLOCO LOGIN *****/

#bloco_login {
  display: none;
  flex-direction: column;
}

#login_form {
  display: flex;
  flex-direction: column;
}

#login_form button[type="submit"] {
  cursor: pointer;
}

/***** BLOCO NOVO *****/

#bloco_novo {
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: none;
}

#bloco_novo form {
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  border: none;
}

#bloco_novo input[type="text"],
#bloco_novo textarea {
  max-width: 100%;
  box-sizing: border-box;
}

#bloco_novo fieldset {
  border: none;
  margin: 0;
  padding: 0;
}

#bloco_novo legend {
  font-weight: bold;
}

.botao-salvar {
  cursor: pointer;
}

.botao-cancelar {
  cursor: pointer;
}

/***** BLOCO EDITAR *****/
#bloco_editar {
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: none;
}

#bloco_editar form {
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  border: none;
}

#bloco_editar input[type="text"],
#bloco_editar textarea {
  max-width: 100%;
  box-sizing: border-box;
}

#bloco_editar fieldset {
  border: none;
  margin: 0;
  padding: 0;
}

#bloco_editar legend {
  font-weight: bold;
}

/***** BLOCO FILTROS *****/

#bloco_filtros {
  display: flex;
  flex-direction: column;
}

/********** BLOCO ITENS **********/

#bloco_itens {
  flex: 1; /* ocupa o espaço restante */
  /*background-color: #C8A2C8;*/
}

#bloco_itens .item {
  /*background-color: #ffffff;*/
  margin-bottom: 6px;
}

.grupo {
}

.grupo-nome {
}

.grupo-nome.conteudo-toggle {
  text-decoration: underline;
  cursor: pointer;
}

/* Oculta o conteúdo por padrão */
.conteudo-toggle + .texto {
  display: none;
}

/* Exibe quando ativo */
.conteudo-toggle + .texto.aberto {
  display: inline;
  white-space: pre-line;
}

.tag {
  display: inline-block;
}

.texto {
  display: inline;
}

.botao-editar {
  cursor: pointer;
}