/* makes internal link scroll smoothly */
html {
  scroll-behavior: smooth;
}

* {
  box-sizing: border-box;
}

/* 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-top: 5px;
    padding-bottom: 5px;
    padding-right: 5px;
    padding-left: 27.3px;
    text-indent: -22.3px;
}

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

label {
  padding-left: 27.3px;
  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: 0px 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;
}

/* style keywords */
a.keywordclass:link, a.keywordclass:visited {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
a.keywordclass:hover {
  text-shadow: 0.6px 0.6px grey;
  cursor: pointer;
}
a.keywordclass[selected="true"] {
  color: green;
  cursor: pointer;
}