.json_edit input:invalid{
  border-color:red;
}

.json_edit{
  display: grid;
  gap:10px;
  grid-template-rows: auto 40px;
  grid-template-columns: 1fr 1fr;
}
.json_edit>div{
  border: 1px dashed grey;
  border-radius: 4px;
}

.json_edit.show_split{
  grid-template-areas: "A B" "C C";
}
.json_edit.show_edit{
  grid-template-areas: "A A" "C C";
}
.json_edit.show_json{
  grid-template-areas: "B B" "C C";
}

.json_edit .edit{
  grid-area: A;
  overflow-y: auto;
  overflow-x: auto;
}
.json_edit.show_json .edit{ display:none; }

.json_edit .json{
  grid-area: B;
  overflow: auto auto;
}
.json_edit.show_edit .json{ display:none; }

.json_edit .buttons{
  grid-area: C;
  display:flex;
  padding:10px;
  gap:10px;
  align-items: center;
  border: none;
}
.json_edit .buttons .stretch{
  flex-grow: 1;
}

.json_edit:not(.show_json) .buttons button.back_button{ display: none; }
.json_edit:not(.show_edit) .buttons button.next_button{ display: none; }
.json_edit.show_edit .buttons button.confirm_button{ display: none; }
.json_edit .buttons .cancel_button{ 
  justify-self: flex-start;
}