@import url("https://fonts.googleapis.com/css?family=Roboto&display=swap");
body {
  font: 100% "Roboto", sans-serif;
  color: #3b3b3b;
  background-color: #efffe7;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%; }

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

ul li {
  margin-top: 0.8em; }
  ul li:first-child {
    margin-top: initial; }

nav {
  background-color: #4f7942;
  color: #fefefe;
  border-bottom: 2px solid #444c38;
  top: 0;
  position: fixed;
  width: 100%; }
  nav ul, nav ul.left {
    margin: 0;
    padding: 0;
    list-style: none;
    float: left; }
  nav ul.right {
    float: right; }
  nav li {
    margin-top: initial;
    color: #fefefe;
    display: inline-block;
    vertical-align: middle;
    line-height: 2.6em; }
    nav li .dropdown {
      display: none;
      background-color: #fafafa;
      box-shadow: 1px 0px 8px #666;
      padding: 4px 4px;
      border-radius: 0px 0px 4px 4px; }
      nav li .dropdown li {
        display: block;
        line-height: 1.8em;
        margin: 4px; }
        nav li .dropdown li .fa, nav li .dropdown li .far, nav li .dropdown li .fas, nav li .dropdown li .fab {
          color: #c7ea46; }
    nav li:hover .dropdown {
      display: block;
      position: absolute; }
  nav a {
    color: #fefefe;
    display: block;
    padding: 10px 12px; }
    nav a:hover, nav a:active {
      color: white; }

main {
  margin-top: 80px;
  padding: 10px 12px; }
  @media (max-width: 767px) {
    main {
      padding: 10px 8px; } }
  main h1, main h2, main h3, main h4, main h5, main h6 {
    color: #444c38; }
  main h1 {
    font-size: 160%; }
  main h2 {
    font-size: 150%; }
  main h3 {
    font-size: 140%; }
  main h4 {
    font-size: 130%; }
  main h5 {
    font-size: 120%; }
  main h6 {
    font-size: 110%; }

.grid-container {
  display: grid;
  grid-gap: 20px;
  grid-auto-rows: minmax(300px, auto);
  grid-template-columns: repeat(2, 1fr); }
  @media (max-width: 767px) {
    .grid-container {
      grid-template-columns: repeat(1, 1fr); } }
  @media (min-width: 1600px) {
    .grid-container {
      grid-template-columns: repeat(4, 1fr); } }

.grid-single {
  display: flex;
  align-items: flex-start;
  justify-content: center; }
  @media (min-width: 768px) {
    .grid-single {
      height: 100vh; } }

.grid-single > .card {
  width: 485px; }
  @media (max-width: 767px) {
    .grid-single > .card {
      width: 100%; } }

.grid-single > .card.editable {
  width: 100%; }

.card {
  display: flex;
  flex-direction: column; }
  .card header {
    background-color: #707070;
    padding: 10px 12px 8px 12px;
    border-radius: 8px 8px 0px 0px; }
    .card header .fa, .card header .far, .card header .fas, .card header .fab {
      color: #c7ea46; }
    .card header h2 {
      margin: 0;
      font-size: 1.15em;
      color: #fefefe;
      line-height: 2; }
      .card header h2 a {
        color: #fefefe; }
      .card header h2 form {
        display: inline-block;
        float: right;
        padding: 0px; }
        .card header h2 form button, .card header h2 form .btn {
          background-color: #909090;
          padding: 4px 8px; }
  .card .progress-bar {
    flex-basis: 10px;
    background-image: linear-gradient(to right, #ffcf00, #308000); }
    .card .progress-bar .progress-bar-inner {
      float: right;
      height: 100%;
      background-color: #efffe7; }
  .card .body {
    -webkit-box-flex: 1;
    flex: 1 1 auto;
    padding: 1.25em;
    background-color: #eeefef; }
    .card .body b {
      color: #308000; }
    .card .body h3 {
      color: #308000;
      font-size: 1.10em;
      display: inline-block;
      width: 100%;
      border-bottom: 1px solid #444c38; }
    .card .body table {
      width: 100%;
      border-collapse: collapse; }
      .card .body table th, .card .body table td {
        padding: 4px 4px; }
        .card .body table th a, .card .body table td a {
          color: #3b3b3b; }
      .card .body table thead {
        text-align: left;
        color: #308000; }
      .card .body table.table-form {
        border-collapse: separate; }
        .card .body table.table-form thead {
          border-bottom: 2px solid #444c38; }
        .card .body table.table-form th {
          padding-top: 12px;
          padding-bottom: 12px;
          background-color: #efffe7;
          border-radius: 4px; }
        .card .body table.table-form td {
          background-color: #f7f7f7;
          border-radius: 4px; }
        .card .body table.table-form tr:hover td {
          background-color: #fefefe; }
      .card .body table.with-border tr {
        border-bottom: 1px solid #444c38; }
        .card .body table.with-border tr td:first-child {
          border-right: 1px solid #444c38; }
      .card .body table.with-border thead {
        border-bottom: 2px solid #444c38; }
      .card .body table.with-border tr {
        border-bottom: 1px solid #444c38; }
        .card .body table.with-border tr td:first-child {
          border-right: 1px solid #444c38; }
  .card table + div {
    margin-top: 20px; }
  .card footer {
    font-size: 90%;
    background-color: #909090;
    color: #fefefe;
    padding: 4px 10px;
    border-radius: 0px 0px 4px 4px; }
    .card footer a {
      color: #fefefe; }
    .card footer h1, .card footer h2, .card footer h3, .card footer h4, .card footer h5, .card footer h6 {
      color: #fefefe;
      padding: 0px;
      margin: 4px auto; }

button, .btn,
input[type="submit"] {
  border-radius: 3px 3px;
  padding: 8px 10px;
  border: 0px;
  font-size: 1.05em;
  font-weight: 600;
  background-color: #4f7942;
  color: #fefefe;
  min-width: 40%;
  text-decoration: none; }
  button.page_link, .btn.page_link,
  input[type="submit"].page_link {
    font-family: monospace;
    line-height: 3em; }
    button.page_link.incomplete, .btn.page_link.incomplete,
    input[type="submit"].page_link.incomplete {
      background-color: #fff8e7;
      color: #fe6b00; }
  button.action, .btn.action,
  input[type="submit"].action {
    background-color: #ff5400; }
  button.edit, .btn.edit,
  input[type="submit"].edit {
    background-color: #22ae16; }

form {
  padding: 15px;
  color: #3b3b3b; }
  form.table {
    padding: 0px; }
  form .fields {
    display: grid;
    grid-template-columns: 35% 65%;
    row-gap: 20px; }
    @media (max-width: 767px) {
      form .fields {
        grid-template-columns: 100%; } }
    form .fields .nonfield, form .fields .helptext {
      grid-column: span 2; }
      @media (max-width: 767px) {
        form .fields .nonfield, form .fields .helptext {
          grid-column: span 1; } }
    form .fields .infolist, form .fields .errorlist,
    form .fields .helptext ul {
      padding: 10px 10px;
      list-style: none;
      border: 1px solid; }
      form .fields .infolist li, form .fields .errorlist li,
      form .fields .helptext ul li {
        display: block; }
    form .fields .infolist,
    form .fields .helptext ul {
      color: #fe6b00;
      background-color: #fff8e7;
      border-color: #fe6b00; }
      form .fields .infolist li,
      form .fields .helptext ul li {
        color: #fe6b00; }
    form .fields .errorlist {
      color: #aa0000;
      background-color: #ffecec;
      border-color: #aa0000; }
      form .fields .errorlist li {
        color: #aa0000; }
    form .fields label {
      align-self: center; }
  form .actions {
    margin-top: 40px;
    display: grid;
    content-place: center; }
  form textarea {
    border-radius: 3px 3px; }
  form input[type="text"],
  form input[type="url"],
  form input[type="password"],
  form input[type="number"] {
    border-radius: 3px 3px;
    padding: 8px 8px;
    border: 1px solid #eeefef; }
    form input[type="text"]:hover, form input[type="text"]:active, form input[type="text"]:focus,
    form input[type="url"]:hover,
    form input[type="url"]:active,
    form input[type="url"]:focus,
    form input[type="password"]:hover,
    form input[type="password"]:active,
    form input[type="password"]:focus,
    form input[type="number"]:hover,
    form input[type="number"]:active,
    form input[type="number"]:focus {
      border: 1px solid #c7ea46; }
  form td input[type="text"],
  form td input[type="url"],
  form td input[type="password"],
  form td input[type="number"] {
    width: 100%;
    box-sizing: border-box; }
  form td textarea {
    display: table-cell;
    width: 99%; }
  form th input[type="text"],
  form th input[type="url"],
  form th input[type="password"],
  form th input[type="number"] {
    font-size: 1.2em;
    font-weight: 600;
    width: 100%;
    box-sizing: border-box; }

.error {
  color: #aa0000;
  background-color: #ffecec;
  max-height: 3.5em;
  overflow-y: auto;
  padding: 2px; }

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

div.states-list {
  border-top: 1px solid #308000;
  border-bottom: 1px solid #308000;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-bottom: 20px; }

/*# sourceMappingURL=main.css.map */