* {
  box-sizing: border-box;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 95%;
  background-color: #f2efe9;
  color: rgb(48, 48, 48);
  margin: 0;
  padding: 0;
}

/* Main app wrapper */
div#app {
  width: 70vw;
  padding: 20px;
  margin: 0 auto;
}

/* This is the main form used to select users to generate a CSV from */
form#main-form {
  margin-top: 10px;
}
form#main-form fieldset legend {
  font-weight: bold;
}

footer {
  font-style: italic;
  font-size: small;
}

div.input-list-item {
  padding: 5px;
}

div.input-list-item input[type=checkbox] {
  font-size: 200%;
}

label {
  cursor: pointer;
}

@media (max-width: 1000px) {
  div#app {
    width: 100vw;
    margin: 0;
    font-size: 92%;
  }
}

@media (min-width: 1500px) {
  div#app {
    width: 60vw;
    font-size: 105%;
    max-width: 9000px;
  }
}

h1 {
  margin-top: 32px;
}

hr {
  border: none;
  border-top: 1px solid black;
}

fieldset {
  border: 1px solid rgb(88, 88, 88);
  border-radius: 4px;
}

/* spacing between "none" and "get all" button */
button#select-none-users {
  margin-right: 15px;
}

/* spacing before "Get CSV for selected accounts" */
button#generate-csv {
  margin-top: 10px;
}

div.box {
  border: 3px dotted grey;
  min-height: 60px;
  padding: 10px;
}