.u-center {
  text-align: center; }

.u-hidden {
  display: none; }

html {
  box-sizing: border-box;
  height: 100%; }

*, *::before, *::after {
  box-sizing: inherit; }

body {
  height: 100%;
  font-size: 0;
  margin: 0;
  background-color: #87cab7; }

nav {
  display: inline-block;
  height: 125px;
  width: 100%;
  font-size: 1rem;
  vertical-align: top;
  padding: 1em;
  background-color: #212922;
  color: #56bf56; }
  nav h2 {
    margin: 0;
    font-size: 1em; }
  nav ul {
    list-style: none;
    padding: 0;
    margin-top: 0.5em;
    margin-bottom: 0; }
  nav a {
    color: #aaa;
    text-decoration: none; }
    nav a:hover {
      color: #ccc; }

.logo {
  background: url("/img/GPA-Logo-Horizontal.png") no-repeat 0 center;
  background-size: contain;
  display: inline-block;
  width: 225px;
  height: 100%;
  text-indent: -9999px; }
  .logo img {
    width: 100%; }

.nav-group {
  display: inline-block;
  vertical-align: top;
  border-top: 4px solid #56bf56;
  margin-right: 1em;
  padding-top: 5px; }

.nav-user {
  display: inline-block;
  position: absolute;
  right: 20px;
  text-align: right; }
  .nav-user span:not([class*="online-status"]) {
    display: block; }

.online-status__icon {
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  border-radius: 50%; }
  .online-status__icon.online {
    background-color: limegreen; }
  .online-status__icon.offline {
    background-color: darkgrey; }

.online-status__text {
  font-size: 0.8em; }
  .online-status__text.online {
    color: limegreen; }
  .online-status__text.offline {
    color: darkgrey; }

.content {
  display: block;
  font-size: 1rem;
  max-width: 800px;
  margin: 0 auto;
  padding: 1em 2em; }
  .content.full-scale {
    max-width: inherit; }
  .content.group-sections {
    display: flex;
    justify-content: center;
    align-items: flex-start; }
  .content h2 {
    font-weight: normal;
    margin-top: 0;
    text-align: center; }
  .content h3 {
    text-align: center; }
  .content h4 {
    text-align: center; }

.group-sections__minor {
  display: inline-block;
  background-color: #fff;
  border-radius: 10px;
  margin-right: 2em;
  padding: 1em;
  text-align: center; }

.group-sections__major {
  display: inline-block;
  background-color: #fff9;
  border-radius: 10px;
  padding: 1em; }

.column {
  margin-bottom: 1em; }

.col-2 {
  display: inline-block;
  width: 50%; }
  .col-2:first-child {
    padding-right: 0.5em; }
  .col-2:last-child {
    padding-left: 0.5em; }

.col-3 {
  display: inline-block;
  width: 33.33%;
  padding: 0 0.5em; }
  .col-3:first-child {
    padding-left: 0; }
  .col-3:last-child {
    padding-right: 0; }

.col-4 {
  display: inline-block;
  width: 25%;
  padding: 0 0.5em; }
  .col-4:first-child {
    padding-left: 0; }
  .col-4:last-child {
    padding-right: 0; }

html {
  font-family: Arial, Helvetica, sans-serif; }

p {
  text-align: center; }

.standalone-link {
  display: block;
  width: 300px;
  margin: 0 auto;
  color: #222;
  text-align: center; }

.filters {
  margin: 1em 0;
  text-align: center; }

.filter-reset {
  background-color: white;
  border: 1px solid darkred;
  border-radius: 5px;
  color: darkred;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1em;
  font-weight: bold;
  text-decoration: none;
  display: inline-block;
  padding: 10px;
  cursor: pointer; }
  .filter-reset:hover {
    background-color: white;
    border-color: #f10000;
    color: #f10000; }

.filter-submit {
  background-color: white;
  border: 1px solid darkgreen;
  border-radius: 5px;
  color: darkgreen;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1em;
  font-weight: bold;
  text-decoration: none;
  display: inline-block;
  padding: 10px;
  cursor: pointer; }
  .filter-submit:hover {
    background-color: white;
    border-color: #00ca00;
    color: #00ca00; }

.standalone-item {
  margin-bottom: 0.75em; }

.form-item label {
  display: block;
  margin-bottom: 0.2em; }

.form-item input, .form-item textarea, .form-item select {
  padding: 2px;
  width: 100%;
  border: 1px solid #b0b0b0;
  border-radius: 5px;
  font-size: 1em; }

.form-item textarea {
  height: 4.5em; }

.filter-item {
  margin: 0 1em 0 0;
  display: inline-block; }

.form-item--radio input {
  display: none; }

.form-item--radio label {
  display: inline-block;
  padding: 5px;
  width: 6em;
  font-size: 1.2em;
  font-weight: normal;
  text-align: center;
  text-transform: none; }

.form-item--radio input:not(:checked) + label {
  background: #eee;
  color: #888; }
  .form-item--radio input:not(:checked) + label:hover {
    cursor: pointer; }

.form-item--radio input:not(:checked):disabled + label:hover {
  cursor: default; }

.form-item--radio input:checked + label {
  background: #9f9;
  color: #181; }
  .form-item--radio input:checked + label:hover {
    cursor: default; }

.form-buttons {
  text-align: center; }

form.account {
  text-align: center; }
  form.account div {
    margin-bottom: 0.5em; }
    form.account div label {
      text-align: left;
      display: inline-block;
      width: 150px; }
    form.account div select, form.account div input {
      width: 250px; }

form.action-item {
  max-width: 800px;
  margin: 0 auto;
  background-color: #fffa;
  padding: 1em;
  border-radius: 10px;
  margin-top: 0.5em; }

.validation-error {
  background-color: pink;
  border: 1px solid red;
  border-radius: 3px;
  padding: 4px; }

table {
  border-collapse: collapse; }

tbody > tr {
  background-color: #fffe; }
  tbody > tr:nth-child(even) {
    background-color: rgba(247, 247, 247, 0.933333); }
  tbody > tr:hover {
    background-color: #eef; }

thead > tr {
  background-color: #212922;
  color: white; }
  thead > tr:hover {
    background-color: #212922; }

th, td {
  border: 1px solid white;
  text-align: center;
  padding: 0.2em; }

th {
  font-size: 0.8em; }

td {
  font-size: 0.7em; }

.non-cell {
  border: none;
  background-color: #87cab7; }

.users-table {
  margin: 0 auto; }
  .users-table td {
    font-size: 1em; }

.metrics-table {
  margin: 0 auto; }
  .metrics-table th {
    font-size: 1em;
    font-weight: normal; }

.items-list {
  display: inline-block;
  vertical-align: middle;
  overflow: hidden;
  width: auto;
  min-width: 100%;
  height: 800px;
  min-height: 200px;
  padding: 20px 0; }
  .items-list > div {
    position: relative;
    height: 100%;
    padding-top: 20px; }
    .items-list > div::before {
      top: 0;
      background-color: #212922;
      border-top: 1px solid #777;
      content: '';
      position: absolute;
      z-index: -1;
      width: 100%;
      height: 100%;
      left: 0; }
    .items-list > div > div {
      min-height: 50px;
      max-height: 100%;
      overflow-x: hidden;
      overflow-y: auto;
      border: 1px solid white; }
      .items-list > div > div::after {
        background-color: #87cab7;
        content: '';
        position: absolute;
        z-index: -1;
        width: 100%;
        height: 100%;
        left: 0; }
      .items-list > div > div > table {
        width: 100%;
        border-spacing: 0;
        margin-top: -26px;
        margin-right: 17px; }
        .items-list > div > div > table > * > tr:not([class="tagname-header"]) > * {
          padding: 5px 0; }
        .items-list > div > div > table > thead {
          vertical-align: bottom;
          white-space: nowrap; }
          .items-list > div > div > table > thead > tr > :first-child::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            height: 20px;
            border-left: 1px solid #777; }
          .items-list > div > div > table > thead > tr > * + ::before {
            content: '';
            display: block;
            min-height: 20px;
            padding-top: 1px;
            border-left: 1px solid #777;
            margin-left: -1px; }
          .items-list > div > div > table > thead > tr > * + ::before, .items-list > div > div > table > thead > tr > div[label]:before {
            position: absolute;
            top: 0;
            white-space: pre-wrap; }
          .items-list > div > div > table > thead > tr > th > div::before {
            position: absolute;
            white-space: pre-wrap; }
          .items-list > div > div > table > thead > tr > th > div::before, .items-list > div > div > table > thead > tr > th > div::after {
            content: attr(data-label); }

.table-scroll-header::before {
  position: absolute;
  width: 100px;
  top: -1px;
  background: #87cab7; }

body.printable {
  background-color: #fff; }
  body.printable nav {
    text-align: center;
    height: auto; }
    body.printable nav a {
      margin-right: 3em; }
  body.printable header {
    height: 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #bbb;
    padding-bottom: 0.25em; }
    body.printable header h2 {
      margin: 0; }
    body.printable header p {
      font-size: 0.8em;
      margin: 0;
      text-align: right; }
  body.printable .content {
    max-width: 800px;
    margin: 0 auto; }
    body.printable .content h4 {
      margin: 0.7em auto;
      border-bottom: 1px solid #ddd;
      font-weight: normal;
      width: 300px; }
  body.printable table {
    margin: 0 auto 2em auto; }
    body.printable table thead > tr {
      background-color: white;
      color: black; }
    body.printable table thead > tr:nth-child(2n) {
      background-color: #848484;
      color: white; }
    body.printable table tbody tr {
      background-color: white; }
    body.printable table tbody tr:nth-child(2n) {
      background-color: #f0f0f0; }
    body.printable table tbody tr:hover {
      background-color: inherit; }
    body.printable table tbody td {
      font-size: 0.9em; }
    body.printable table .non-cell {
      background-color: white; }

.projects-list-container {
  text-align: center; }

.project-selection {
  text-align: center; }
  .project-selection h3 {
    font-weight: normal; }

.projects-list {
  list-style: none;
  margin-bottom: 1.5em;
  padding: 0; }
  .projects-list li {
    display: inline-block; }
  .projects-list a {
    background-color: #eee;
    border: 1px solid #888;
    border-radius: 5px;
    color: #888;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
    font-weight: bold;
    text-decoration: none;
    display: inline-block;
    padding: 10px;
    cursor: pointer;
    padding: 5px;
    width: 6em;
    font-size: 1.2em;
    text-align: center; }
    .projects-list a:hover {
      background-color: white;
      border-color: #bbbbbb;
      color: #bbbbbb; }
  .projects-list a.selected {
    background-color: #9f9;
    color: #181; }
    .projects-list a.selected:hover {
      cursor: default; }

.download-link {
  background-color: darkgreen;
  border: 1px solid white;
  border-radius: 5px;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1em;
  font-weight: bold;
  text-decoration: none;
  display: inline-block;
  padding: 10px;
  cursor: pointer; }
  .download-link:hover {
    background-color: #00ca00;
    border-color: white;
    color: white; }

.tagname-header td {
  text-align: left;
  background-color: #fffa;
  color: #212922;
  padding: 0.5em; }

.tagname-header a {
  background-color: white;
  border: 1px solid #212922;
  border-radius: 5px;
  color: #212922;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1em;
  font-weight: bold;
  text-decoration: none;
  display: inline-block;
  padding: 10px;
  cursor: pointer;
  margin-right: 1em;
  padding: 4px; }
  .tagname-header a:hover {
    background-color: white;
    border-color: #4e6251;
    color: #4e6251; }
  .tagname-header a:hover {
    border-color: #6666ff;
    color: #6666ff; }

.tagname-header h3 {
  display: inline-block;
  margin: 0; }

.io-information {
  background-color: #fffa;
  border-radius: 10px;
  display: table;
  margin: 0 auto;
  padding: 1em; }
  .io-information div {
    display: inline-block;
    margin-right: 1em; }
  .io-information span:first-of-type {
    display: block;
    font-size: 0.9em;
    font-weight: bold;
    color: #555;
    margin-bottom: 0.25em; }

.entry-buttons {
  margin-bottom: 0.5em; }

.button--back {
  background-color: white;
  border: 1px solid #342aa5;
  border-radius: 5px;
  color: #342aa5;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1em;
  font-weight: bold;
  text-decoration: none;
  display: inline-block;
  padding: 10px;
  cursor: pointer; }
  .button--back:hover {
    background-color: white;
    border-color: #685fd6;
    color: #685fd6; }

.button--save-all-io {
  background-color: white;
  border: 1px solid darkgreen;
  border-radius: 5px;
  color: darkgreen;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1em;
  font-weight: bold;
  text-decoration: none;
  display: inline-block;
  padding: 10px;
  cursor: pointer;
  display: inline-block; }
  .button--save-all-io:hover {
    background-color: white;
    border-color: #00ca00;
    color: #00ca00; }

.button--delete-io-item {
  background-color: #c63c3c;
  border: 1px solid white;
  border-radius: 5px;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1em;
  font-weight: bold;
  text-decoration: none;
  display: inline-block;
  padding: 10px;
  cursor: pointer; }
  .button--delete-io-item:hover {
    background-color: #dd8b8b;
    border-color: white;
    color: white; }

.io-checkout-form {
  margin-bottom: 1em;
  padding: 0.75em;
  background-color: #fff9;
  border-radius: 5px; }

.details {
  margin-bottom: 0.5em; }

.details__item {
  display: inline-block;
  margin-right: 0.8em; }

.details__label {
  display: block;
  font-weight: bold;
  font-size: 0.9em; }

.comment {
  margin-bottom: 0.75em; }
  .comment span {
    display: block; }

.project-form {
  display: table;
  margin: 0 auto 1.5em auto;
  background-color: #fffa;
  border-radius: 10px;
  padding: 1em;
  max-width: 600px; }
  .project-form h3 {
    margin-top: 0;
    text-align: center; }
  .project-form p {
    text-align: left; }
  .project-form div {
    margin-bottom: 15px; }
    .project-form div label {
      display: inline-block;
      width: 80px; }
  .project-form button {
    margin-top: 5px; }