/*
base:
https: //synle.github.io/minimal-css/index.css
*/
/* specific to this app */
body {
  padding: 1rem 2rem;
}

hr {
  margin-bottom: 2rem;
}

#container {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 2rem 1.5rem;
  margin-top: 2rem;

  #leftContainer {
    grid-row: span 2;
    display: grid;
    grid-gap: 1rem;
    grid-template-columns: 1fr;
    grid-auto-rows: min-content;
  }

  #rightContainer {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .form-label {
    font-weight: 900;
    color: var(--colorTextSecondary);
  }

  .form-row {
    display: flex;
    gap: 0.5rem;

    & label[for],
    & button,
    & a {
      margin-right: 2rem;
    }
  }

  .link-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 0.5rem 1rem;

    & a {
      display: block;
    }
  }

  datalist {
    max-height: 200px !important;
    height: 200px !important;
    overflow-y: auto !important;
  }
}