table {
  border-collapse: collapse;
  width: 100%;
  margin-top: 20px;
}

th,
td {
  border: 1px solid #ddd;
  padding: 8px;
}

th {
  background-color: #f2f2f2;
}


.App {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(10px, 1fr) 20fr 10px 20fr minmax(10px, 1fr);
  grid-template-rows:
    minmax(min-content, max-content)
    minmax(min-content, max-content)
    50px
    minmax(min-content, max-content)
    10px;
  grid-template-areas:
    ". h h h ."
    ". q . b ."
    ". a a a ."
    ". t t t ."
    ". f f f .";
}

.App > .header {
  grid-area: h;
  text-align: center;
}

.App > .query {
  grid-area: q;
}

.App > .table {
  grid-area: t;
}

.App > .footer {
  grid-area: f;
  text-align: center;
}

.App > .builder {
  grid-area: b;
}

.App > .actions {
  grid-area: a;
  display: flex;
  justify-content: flex-start;
  gap: 10px;
}


@media screen and (max-width: 850px) {
  .App {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 10px 1fr 10px;
    grid-template-rows:
      minmax(min-content, max-content)
      minmax(min-content, max-content)
      10px
      minmax(min-content, max-content)
      50px
      minmax(min-content, max-content)
      20px;
    grid-template-areas:
      ". h ."
      ". q ."
      ". . ."
      ". b ."
      ". a ."
      ". t ."
      ". f ."
  }
}

.button-wrapper {
  display: flex;
  gap: 10px; /* Space between buttons */
  padding: 10px 0; /* Vertical padding for space above and below buttons */
}

.copyright {
  font-size: 10px;
}


.title {
    font-size: 2rem;
    font-weight: bold;
    letter-spacing: 1px;
    padding: 1rem 0;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.editor {
  overflow-y: auto;
  border-color: #8081a2;
  border-style: solid;
  border-radius: 0.25rem;
  border-width: 1px;
  min-height: 200px;
  resize: vertical;
}
