.left-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  min-height: 60vh;
}

.container {
  display: flex;
  justify-content: space-between;
  width: 100%;
  bottom: 0;
  padding: 5px;
}

@media (max-width: 575px) {
  .hide-sm {
    display: none !important;
  }
}

@media (min-width: 577px) {
  .sm-only {
    display: none !important;
  }
}

html {
  font-family: "IBM Plex Mono", Courier New, Courier, Lucida Sans Typewriter, Lucida Typewriter, monospace;
}

body {
  margin: 0;
}

.inner {
  padding: 24px 0 60px 0;
  max-width: 1000px;
  margin: auto;
}
@media (min-width: 577px) {
  .inner {
    padding: 40px 0;
  }
}

.main-content {
  position: fixed;
  padding: 0 32px;
  overflow: scroll;
  width: calc(100% - 2 * 32px);
  height: calc(100% - (48px + 80px));
}
@media (min-width: 577px) and (max-width: 768px) {
  .main-content {
    height: calc(100% - (48px + 50px));
  }
}

footer {
  position: fixed;
  width: auto;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 5px 20px;
  background-color: #FFFFFF;
  z-index: 10;
}
footer .container {
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
footer .travis-container {
  display: flex;
  flex-direction: row-reverse;
}
footer .travis-item {
  display: flex;
  padding: 5px;
  justify-content: space-between;
  font-weight: 600;
}
footer .travis-item > div {
  margin-right: 10px;
}
footer .social-container > a {
  text-decoration: none;
}
footer .social-icon {
  height: 24px;
  padding: 0 5px;
}

input[type=number],
input[type=text] {
  padding: 8px 8px;
  border-width: 1px;
  border-radius: 2px;
  font-family: monospace;
}

@media (max-width: 575px) {
  h1 {
    font-size: 1.6em;
  }
}

@media (max-width: 575px) {
  h2 {
    font-size: 1.2em;
  }
}

p {
  font-size: 16px;
  line-height: 1.25;
  font-weight: 200;
}

a {
  color: #0000EE;
}
a:visited {
  color: #0000EE;
}

.strong {
  font-weight: 800;
}

.error-message {
  color: red;
}

input[type=submit],
.view-option,
button {
  color: #111111;
  cursor: pointer;
  padding: 8px 24px;
  background-color: #FFFFFF;
  border-radius: 3px;
  font-family: monospace;
  border: 1px solid #111111;
}
input[type=submit]:hover,
.view-option:hover,
button:hover {
  border: 1px solid white;
  color: white;
  background-color: #888888;
  fill: #888888;
}
input[type=submit]:hover.no-hover,
.view-option:hover.no-hover,
button:hover.no-hover {
  cursor: unset;
  background-color: unset;
  color: unset;
  border: 1px solid #111111;
}
input[type=submit]:disabled,
.view-option:disabled,
button:disabled {
  fill: #AAAAAA;
  cursor: auto;
  color: #111111;
  border: 1px solid #111111;
  background-color: #AAAAAA;
}
input[type=submit]:disabled:hover,
.view-option:disabled:hover,
button:disabled:hover {
  color: #111111;
  border: 1px solid #111111;
  background-color: #AAAAAA;
  fill: #AAAAAA;
}
input[type=submit].button-icon,
.view-option.button-icon,
button.button-icon {
  padding: 0;
  background: 0;
  border: 0;
  vertical-align: middle;
}
input[type=submit].button-icon:hover,
.view-option.button-icon:hover,
button.button-icon:hover {
  fill: #888888;
}
input[type=submit].button-icon:disabled,
.view-option.button-icon:disabled,
button.button-icon:disabled {
  fill: #AAAAAA;
}

button.link-button {
  padding: 0;
  border: 0;
  font-size: 16px;
  font-weight: 700;
  color: #0000EE;
}
button.link-button:hover {
  background-color: unset;
  color: #020282;
}
button.link-button.small-link {
  font-size: 12px;
}
button.link-button.unlinkify {
  color: #111111;
  font-weight: 500;
  text-decoration: none;
}

a.unlinkify {
  color: #111111;
  font-weight: 500;
  text-decoration: none;
}

.toggle .toggle-button {
  width: 200px;
  height: 40px;
  white-space: nowrap;
}
@media (max-width: 575px) {
  .toggle .toggle-button {
    width: 140px;
    padding: 4px 12px;
    font-size: 12px;
  }
}
.toggle .toggle-button.active {
  background-color: #878787;
}
.toggle .toggle-button.left {
  border-top-left-radius: calc(40px / 2);
  border-bottom-left-radius: calc(40px / 2);
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: 0;
}
.toggle .toggle-button.right {
  border-top-right-radius: calc(40px / 2);
  border-bottom-right-radius: calc(40px / 2);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

table {
  border-collapse: collapse;
  min-width: 90%;
}
@media (min-width: 577px) and (max-width: 768px) {
  table {
    min-width: 800px;
  }
}

th,
tr > td {
  text-align: left;
  padding: 4px 10px;
}

th {
  min-width: 100px;
  padding: 12px;
  white-space: nowrap;
}
th.actions {
  display: flex;
  min-width: 10px;
  width: 10px;
}
th:hover {
  cursor: pointer;
  background-color: #DDDDDD;
}
th svg {
  margin-left: 4px;
  vertical-align: middle;
}

tr:not(.no-hover) .actions {
  visibility: hidden;
  pointer-events: none;
}
tr:not(.no-hover):hover {
  background-color: #DDDDDD;
}
tr:not(.no-hover):hover .actions {
  visibility: visible;
  pointer-events: all;
}

.crud-table-container {
  margin: auto;
  overflow: hidden;
  overflow-x: auto;
  clear: both;
  width: 100%;
  max-width: 1100px;
}
.crud-table-container .crud-table {
  margin: auto;
  width: 100%;
}
.crud-table-container .crud-table-create-row button {
  display: block;
  margin: 8px auto;
}
.crud-table-container .crud-table-action-items {
  height: 33px;
  align-items: center;
  display: flex;
  justify-content: center;
}
.crud-table-container .crud-table-action-items button {
  display: flex;
  flex-grow: 1;
  justify-content: center;
}
.crud-table-container .crud-table-action-items .action-button {
  margin-left: 4px;
}

.icon {
  background: 0;
  border: 0;
}

@keyframes disappear {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes dropAndRotate {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(7px) rotate(0deg);
  }
  100% {
    transform: translateY(7px) rotate(45deg);
  }
}
@keyframes raiseAndRotate {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-7px) rotate(0deg);
  }
  100% {
    transform: translateY(-7px) rotate(-45deg);
  }
}
.transforming-icon.hamburger.to-close .path-hamburger-top {
  transform-origin: 13px 5px;
  animation: dropAndRotate 0.3s ease-in-out forwards;
}
.transforming-icon.hamburger.to-close .path-hamburger-middle {
  transform-origin: 12px 12px;
  animation: disappear 0.3s ease-in-out forwards;
}
.transforming-icon.hamburger.to-close .path-hamburger-bottom {
  transform-origin: 12px 19px;
  animation: raiseAndRotate 0.3s ease-in-out forwards;
}
@keyframes undoDisappear {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes undoDropAndRotate {
  0% {
    transform: translateY(7px) rotate(45deg);
  }
  50% {
    transform: translateY(7px) rotate(0);
  }
  100% {
    transform: translateY(0) rotate(0);
  }
}
@keyframes undoRaiseAndRotate {
  0% {
    transform: translateY(-7px) rotate(-45deg);
  }
  50% {
    transform: translateY(-7px) rotate(0);
  }
  100% {
    transform: translateY(0) rotate(0);
  }
}
.transforming-icon.hamburger.to-hamburger .path-hamburger-top {
  transform-origin: 13px 5px;
  animation: undoDropAndRotate 0.3s ease-in-out forwards;
}
.transforming-icon.hamburger.to-hamburger .path-hamburger-middle {
  transform-origin: 12px 12px;
  animation: reappearAndRotate 0.3s ease-in-out forwards;
}
.transforming-icon.hamburger.to-hamburger .path-hamburger-bottom {
  transform-origin: 12px 19px;
  animation: undoRaiseAndRotate 0.3s ease-in-out forwards;
}

img {
  border-radius: 10px;
}

.img-container {
  display: flex;
  flex-direction: column;
  margin: 36px 0 24px;
}
.img-container img {
  max-width: 100%;
  align-self: center;
}
@media (min-width: 577px) {
  .img-container img {
    max-width: 500px;
  }
}
.img-container img.medium {
  max-width: 100%;
}
@media (min-width: 577px) {
  .img-container img.medium {
    max-width: 350px;
  }
}
@media (min-width: 577px) {
  .img-container img.large {
    max-width: 700px;
  }
}
.img-container img.bordered {
  border: 1px solid #111111;
}
@media (min-width: 577px) {
  .img-container.half {
    max-width: 50%;
    float: left;
  }
  .img-container.half img {
    max-width: 95%;
    padding: 0 5%;
  }
}
.img-container .img-caption {
  align-self: center;
  padding: 10px 0 4px;
  font-size: 14px;
  font-weight: 800;
}

.image-row {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}
@media (min-width: 577px) {
  .image-row {
    flex-direction: row;
  }
}
.image-row .img-container {
  width: fit-content;
}

.multi-image-container-outer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
@media (min-width: 769px) {
  .multi-image-container-outer {
    flex-direction: row;
  }
}

.multi-image-container {
  display: flex;
  align-items: center;
}
.multi-image-container .img-container {
  height: 400px;
  width: 500px;
  align-items: center;
  justify-content: center;
}
.multi-image-container .img-container.hide {
  display: none;
}
.multi-image-container img {
  max-height: 400px;
  max-width: 500px;
  height: auto;
  width: auto;
}
.multi-image-container .arrow-icon {
  background-color: #878787;
  width: 48px;
  height: 48px;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
  mask-size: contain;
  -webkit-mask-size: contain;
}
.multi-image-container .arrow-icon.previous {
  -webkit-mask-image: url(/img/icons/left_arrow.svg);
  mask-image: url(/img/icons/left_arrow.svg);
}
.multi-image-container .arrow-icon.next {
  -webkit-mask-image: url(/img/icons/right_arrow.svg);
  mask-image: url(/img/icons/right_arrow.svg);
}
.multi-image-container .arrow-icon:hover {
  background-color: #111111;
  cursor: pointer;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
#site-navigation .navbar {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 6px 8px;
}
#site-navigation .navbar.mobile {
  height: 32px;
  padding: 12px;
}
#site-navigation .navbar.desktop {
  padding-top: 16px;
  padding-bottom: 16px;
}
#site-navigation .navbar-entries {
  display: grid;
  grid-template-columns: repeat(4, min-content);
  column-gap: 8px;
  max-width: 800px;
  justify-content: space-evenly;
  align-items: center;
}
#site-navigation .navbar-nested-list {
  display: none;
  position: absolute;
  text-align: left;
  font-size: 14px;
  padding: 10px;
  border-left: 1px black solid;
  border-top: 1px black solid;
  background-color: #FFFFFF;
  z-index: 50;
  max-width: 500px;
}
#site-navigation .navbar-nested-list:hover {
  display: block;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes swoop {
  0% {
    transform: translateX(0px);
    opacity: 1;
  }
  100% {
    transform: translateX(40px);
    opacity: 0;
  }
}
@keyframes bigSwoop {
  0% {
    transform: translateX(0px);
    opacity: 1;
  }
  100% {
    transform: translateX(80px);
    opacity: 0;
  }
}
@keyframes itemHover {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
#site-navigation .nested-nav-item {
  padding-bottom: 6px;
}
#site-navigation .nested-nav-item:hover {
  animation: itemHover 0.8s ease-in-out infinite;
}
#site-navigation .nested-nav-item.swoop {
  animation: swoop 0.3s ease-in-out;
}
#site-navigation .navbar.mobile .nested-nav-item.swoop {
  animation: bigSwoop 0.1s ease-in-out;
}
#site-navigation .navbar-nav-item {
  font-size: 18px;
  text-align: right;
}
#site-navigation .navbar-nav-item.selected, #site-navigation .navbar-nav-item:hover {
  border-right: 1px black solid;
  border-bottom: 1px black solid;
}
#site-navigation .navbar-nav-item:hover .navbar-nested-list {
  display: block;
}
#site-navigation .navbar-nav-item-link {
  padding-left: 12px;
  white-space: nowrap;
  text-align: right;
  padding-left: 30px;
  padding-right: 16px;
  font-weight: 400;
}
#site-navigation .navbar-logout {
  padding: 0 20px;
}
#site-navigation .navdrawer {
  display: flex;
  flex-direction: column;
  justify-content: left;
  align-items: start;
  position: absolute;
  height: calc(100% - 50px);
  width: calc(100% - 20px);
  padding: 0 12px;
  top: 50px;
  left: 0;
  background-color: white;
  z-index: 50;
}
#site-navigation .navdrawer.closed {
  animation: fadeOut 0.2s ease-in-out forwards;
  display: none;
}
#site-navigation .navdrawer.open {
  animation: fadeIn 0.2s ease-in-out forwards;
  display: flex;
}
#site-navigation .navdrawer-button-bar {
  margin-bottom: 10px;
}
#site-navigation .navdrawer-nav-item {
  font-size: 24px;
}
#site-navigation .navdrawer-nested-list {
  font-size: 20px;
  margin-top: 8px;
  margin-left: 24px;
}
#site-navigation .nested-navdrawer-item {
  margin-bottom: 8px;
}

.animated-ellipsis .dot1 {
  opacity: 0;
  -webkit-animation: dot 1.3s infinite;
  -webkit-animation-delay: 0s;
  animation: dot 1.3s infinite;
  animation-delay: 0s;
}
.animated-ellipsis .dot2 {
  opacity: 0;
  -webkit-animation: dot 1.3s infinite;
  -webkit-animation-delay: 0.2s;
  animation: dot 1.3s infinite;
  animation-delay: 0.2s;
}
.animated-ellipsis .dot3 {
  opacity: 0;
  -webkit-animation: dot 1.3s infinite;
  -webkit-animation-delay: 0.3s;
  animation: dot 1.3s infinite;
  animation-delay: 0.3s;
}
@-webkit-keyframes dot {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes dot {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

#fullscreen-loading-overlay {
  display: none;
  width: 100%;
  height: 100vh;
  position: absolute;
  background-color: black;
  z-index: 100;
  opacity: 0.4;
}
#fullscreen-loading-overlay .loading-text-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
#fullscreen-loading-overlay .animated-ellipsis {
  font-size: 28px;
  color: white;
}

.modal {
  background-color: white;
  border: black solid 1px;
  box-shadow: 5px 10px 10px #888888;
  position: fixed;
  padding: 20px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: fit-content;
  height: fit-content;
}
.modal h3 {
  margin-top: 0;
}

.code-block {
  display: block;
  margin: 36px auto;
  padding: 0 12px;
  border: 1px solid #111111;
  border-radius: 8px;
  background-color: #EEEEEE;
  white-space: pre-wrap;
  max-width: 760px;
}

@keyframes bodyFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes bodyFadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
body {
  -webkit-tap-highlight-color: transparent;
  animation: bodyFadeIn 0.3s ease-in-out forwards;
}
body.leaving {
  animation: bodyFadeOut 0.1s ease-in-out forwards;
}
body.about ol {
  text-align: left;
}
body.about .inner {
  padding-bottom: 40px;
}
body .project-car .project-header {
  margin-bottom: 0;
}
body .project-car .project-header h1 {
  margin-bottom: 38px;
}
body .project-car .list {
  margin-top: 12px;
}
body .project-car .list .list-header {
  text-decoration: underline;
}
body .project-car .still-interested {
  margin-top: 36px;
  text-align: center;
  font-size: 18px;
}
body.jasper canvas {
  border: 1px solid #111111;
  border-radius: 5px;
}
body.jasper .mobile-notification {
  text-align: center;
  padding: 24px 0 0;
}
@media (min-width: 577px) {
  body.jasper .mobile-notification {
    display: none;
  }
}
body.jasper #draw-container {
  display: flex;
  flex-direction: column;
}
@media (max-width: 575px) {
  body.jasper #draw-container {
    display: none;
  }
}
body.jasper .canvas-container {
  display: flex;
  justify-content: center;
}
body.jasper .action-bar {
  padding: 12px 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
body.jasper .action-bar * {
  margin: 0 8px;
}
body.jasper .match-image,
body.jasper .input-drawing {
  margin: 0 auto;
  display: block;
  border: 1px solid #111111;
  border-radius: 5px;
}
body.jasper .loading {
  position: absolute;
  max-width: 900px;
  height: 400px;
  margin: 0 auto;
  display: block;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
}
body.jasper .loading .text-box {
  padding: 8px;
  border-radius: 5px;
  background-color: white;
  border: 1px solid #111111;
}
body.jasper .after-match {
  margin-bottom: 24px;
}
body.jasper .after-match img {
  margin: 12px auto;
}
body.jasper .after-match button {
  display: block;
  margin: 0 auto;
}
body.resume .resume-body {
  display: flex;
  justify-content: space-between;
}
body.resume .resume-body .column {
  flex-grow: 1;
}
body.resume .resume-body .column.left {
  flex-basis: 50%;
}
body.resume .resume-body .column.right {
  flex-basis: 30%;
}
body.resume .resume-body ul {
  list-style-type: none;
  padding-left: 12px;
}
body.resume .resume-body ul li {
  margin: 0 0 4px 0;
}
body.resume .resume-body ul .li-detail {
  padding: 4px 0 12px 12px;
  font-size: 14px;
}
body.resume .entry-block {
  margin-bottom: 48px;
}
body.resume .entry-block h3 {
  margin: 8px 0;
}
body.resume .entry-block h4 {
  margin: 4px 0;
}
body.resume .experience-entry {
  margin-bottom: 48px;
}
body.resume .subentry {
  margin-top: 12px;
}
body.resume .email {
  text-align: center;
  margin-bottom: 24px;
}
@media (min-width: 577px) {
  body.resume .email {
    margin-bottom: 0;
  }
}
body.resume .patent-entry {
  font-size: 18px;
  margin-bottom: 16px;
}
body.resume .patent-entry .patent-link {
  font-size: 14px;
}
body #lightbox .lightbox-container {
  background-color: rgba(0, 0, 0, 0.85);
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  overflow: hidden;
  position: fixed;
  z-index: 20;
}
body #lightbox .lightbox {
  position: fixed;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
body #lightbox .lightbox .lightbox-control {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}
body #lightbox .lightbox .lightbox-control img {
  height: 40px;
  width: 40px;
  padding: 20px;
  cursor: pointer;
  pointer-events: all;
}
body #lightbox .lightbox .lightbox-control.disabled img {
  display: none;
}
body #lightbox .lightbox .lightbox-content {
  position: fixed;
  display: flex;
  height: 75%;
  width: 85%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: visible;
  pointer-events: none;
}
body #lightbox .lightbox .lightbox-content .img-caption {
  display: none;
  flex-direction: column;
  max-height: 100%;
  max-width: 100%;
}
body #lightbox .lightbox .lightbox-content .img-caption.displayed {
  display: flex;
}
body #lightbox .lightbox .lightbox-content .img-caption img {
  max-height: 100%;
  max-width: 100%;
  background-color: #111111;
  pointer-events: all;
  z-index: 21;
  object-fit: contain;
}
body #lightbox .lightbox .lightbox-content .img-caption .caption {
  font-size: 16px;
  padding: 12px;
  margin-top: 12px;
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  border-radius: 10px;
}
body #lightbox .no-background .lightbox-content img {
  background: none;
}
body #lightbox .lightbox-close {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 21;
}
body #lightbox .lightbox-close img {
  width: 40px;
  height: 40px;
  margin: 8px;
  cursor: pointer;
}
body #lightbox .lightbox-dots {
  position: fixed;
  bottom: 20px;
  height: 15px;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
body #lightbox .lightbox-dots .lightbox-dot {
  height: 10px;
  width: 10px;
  background-color: #878787;
  border-radius: 100%;
  margin: 5px;
}
body #lightbox .lightbox-dots .lightbox-dot.selected {
  background-color: #FFFFFF;
}
@media (max-width: 575px) {
  body.acnh #compare-acnh-container {
    padding-bottom: 100px;
  }
}
body.acnh #acnh-villager-container {
  position: relative;
  padding: 0;
}
body.acnh #acnh-villager-container h1 {
  margin-top: 40px;
}
body.acnh .acnh-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
@media (max-width: 575px) {
  body.acnh .acnh-header {
    flex-direction: column;
    margin-bottom: 16px;
  }
}
body.acnh .acnh-header button {
  max-height: 40px;
}
body.acnh .villager-rankings-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: calc(100% - 200px);
}
body.acnh .villager-species-container {
  height: calc(100% - 200px);
  display: flex;
}
body.acnh .villager-results-container {
  display: flex;
  flex-direction: row;
  align-items: self-start;
  justify-content: left;
}
@media (max-width: 575px) {
  body.acnh .villager-results-container {
    flex-direction: column;
    align-items: center;
  }
}
body.acnh .back-to-all-species {
  margin-bottom: 12px;
}
body.acnh .view-compare a,
body.acnh .view-leaderboard a {
  text-decoration: none;
  font-weight: 700;
  font-size: 18px;
  white-space: nowrap;
}
body.acnh .rankings {
  max-width: 100%;
  overflow: scroll;
}
@media (max-width: 575px) {
  body.acnh .rankings th {
    min-width: unset;
  }
}
body.acnh .rankings table tr {
  cursor: pointer;
}
body.acnh .leaders a {
  color: black;
  text-decoration: none;
  padding: 12px;
  border-radius: 10px;
}
body.acnh .leaders a:hover {
  background-color: #EEEEEE;
}
body.acnh .leaders .leader-details {
  display: flex;
  flex-direction: column;
  align-items: center;
}
body.acnh .leaders .place-badge {
  border-radius: 100%;
  background-color: linen;
  position: absolute;
  text-align: center;
  font-weight: 700;
  border: 2px solid;
  font-family: cursive;
  width: 40px;
  height: 40px;
  line-height: 35px;
  font-size: 25px;
  margin-top: -10px;
  margin-left: 70px;
}
body.acnh .leaders .place-badge.place-1 {
  background-color: gold;
  width: 80px;
  height: 80px;
  line-height: 75px;
  font-size: 55px;
  margin-top: -20px;
  margin-left: 200px;
  border: 5px solid;
}
body.acnh .leaders .place-badge.place-2 {
  background-color: silver;
}
body.acnh .leaders .place-badge.place-3 {
  background-color: #cd7f32;
}
body.acnh .leaders .first-place {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
body.acnh .leaders .first-place .leader .name {
  font-size: 24px;
  font-weight: 700;
}
body.acnh .leaders.by-species {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
body.acnh .leaders.by-species .species-label-container {
  border-radius: 10px;
  padding: 4px 0;
  text-align: center;
  cursor: pointer;
}
body.acnh .leaders.by-species .species-label-container:hover {
  background-color: #EEEEEE;
}
body.acnh .leaders.by-species .species-label {
  font-size: 20px;
  font-weight: 700;
  text-decoration: underline;
}
body.acnh .leaders.by-species .view-species-label {
  font-size: 12px;
  text-decoration: none;
  font-weight: 400;
  margin-top: 4px;
}
body.acnh .leaders.by-species .species-leader {
  padding: 12px 20px;
  border-radius: 10px;
  margin: 8px;
}
@media (max-width: 575px) {
  body.acnh .leaders.by-species .species-leader {
    padding: 12px 4px;
  }
}
body.acnh .leaders.by-species a {
  margin: 0;
  padding: 0;
}
body.acnh .leaders.by-species .leader {
  border-radius: 10px;
  padding: 12px;
}
body.acnh .leaders.by-species .leader .name {
  font-weight: 700;
}
body.acnh .leaders.by-species .leader:hover {
  background-color: #EEEEEE;
  cursor: pointer;
}
body.acnh .leaders.by-species img {
  max-width: 100px;
}
body.acnh .leaders .runners-up {
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
}
body.acnh .leaders .runners-up a {
  margin: 30px;
}
@media (max-width: 575px) {
  body.acnh .leaders .runners-up a {
    margin: 10px;
  }
}
body.acnh .leaders .runners-up .leader .name {
  font-weight: 700;
}
body.acnh .leaders .runners-up img {
  max-width: 100px;
}
body.acnh .compare-container {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}
@media (min-width: 577px) {
  body.acnh .compare-container {
    padding: 24px;
  }
}
body.acnh .compare-inner {
  max-width: 100%;
}
body.acnh .villager,
body.acnh .compare-card {
  display: flex;
  flex-direction: column;
  padding: 8px;
  border-radius: 8px;
  text-align: left;
  max-width: 50%;
}
body.acnh .villager.winner,
body.acnh .compare-card.winner {
  background-color: #c5f0cf;
}
body.acnh .villager.loser,
body.acnh .compare-card.loser {
  background-color: #ffd9cf;
}
@media (max-width: 575px) {
  body.acnh .villager:first-child,
  body.acnh .compare-card:first-child {
    margin-right: 8px;
  }
}
@media (min-width: 577px) {
  body.acnh .villager,
  body.acnh .compare-card {
    padding: 24px;
  }
}
body.acnh .villager img,
body.acnh .compare-card img {
  max-width: 256px;
  max-height: 256px;
  width: 100%;
  border-radius: 8px;
}
body.acnh .villager .detail-container,
body.acnh .compare-card .detail-container {
  margin-top: 24px;
}
body.acnh .villager .name-and-record,
body.acnh .compare-card .name-and-record {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 12px;
}
body.acnh .villager .record,
body.acnh .compare-card .record {
  font-size: 14px;
  font-weight: normal;
  font-style: italic;
}
body.acnh .villager table,
body.acnh .compare-card table {
  border-spacing: 0 4px;
}
body.acnh .villager table td,
body.acnh .compare-card table td {
  padding: 0;
}
body.acnh .villager table td.detail-value,
body.acnh .compare-card table td.detail-value {
  padding-left: 8px;
}
@media (max-width: 575px) {
  body.acnh .villager table td.detail-value,
  body.acnh .compare-card table td.detail-value {
    padding-bottom: 4px;
  }
}
@media (max-width: 575px) {
  body.acnh .villager-compare table td {
    display: block;
    clear: both;
  }
}
body.acnh .villager-stats {
  max-width: 256px;
}
@media (max-width: 575px) {
  body.acnh .villager-stats {
    max-width: unset;
  }
}
body.acnh .villager-stats .name {
  font-size: 24px;
}
body.acnh .villager-stats .stats-table {
  margin-bottom: 24px;
}
body.acnh .villager-stats table {
  min-width: unset;
}
body.acnh .compare-card {
  border: 1px solid #111111;
}
body.acnh .compare-card:not(.winner):not(.loser):hover {
  border: 1px solid #111111;
  background-color: #EEEEEE;
  cursor: pointer;
  color: #111111;
}
body.acnh .table-container {
  height: calc(100% - 50px);
  overflow: scroll;
}
body.acnh .pagination {
  height: 30px;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}
body.acnh .pagination button {
  border: 0;
  padding: 0;
  color: #0000EE;
  padding: 0 4px;
}
body.acnh .results {
  padding: 0px 24px;
  height: 100%;
  overflow: scroll;
}
@media (max-width: 575px) {
  body.acnh .results {
    overflow: visible;
    padding-bottom: 40px;
  }
}
body.acnh .results-table {
  min-width: unset;
}
body.acnh .results-table tr {
  cursor: pointer;
}
body.acnh .toggle {
  text-align: center;
  margin-bottom: 24px;
}
body.printing .img-container {
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
body.printing .print-project {
  border-bottom: 1px solid #878787;
  padding: 64px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media (min-width: 769px) {
  body.printing .print-project {
    flex-direction: row;
  }
}
body.printing .print-description {
  margin-left: 12px;
  margin-top: 24px;
}
@media (min-width: 769px) {
  body.printing .print-description {
    margin-top: 0;
  }
}
body.printing .arrow-icon {
  background-color: #878787;
  width: 48px;
  height: 48px;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
  mask-size: contain;
  -webkit-mask-size: contain;
}
body.printing .arrow-icon.previous {
  -webkit-mask-image: url(/img/icons/left_arrow.svg);
  mask-image: url(/img/icons/left_arrow.svg);
}
body.printing .arrow-icon.next {
  -webkit-mask-image: url(/img/icons/right_arrow.svg);
  mask-image: url(/img/icons/right_arrow.svg);
}
body.printing .arrow-icon:hover {
  background-color: #111111;
  cursor: pointer;
}
body.salt-level #salt-level-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
body.salt-level #summary-chart {
  /* Style the dots by assigning a fill and stroke */
}
body.salt-level #summary-chart .line {
  fill: none;
  stroke-width: 3;
}
body.salt-level #summary-chart .line.sensor_one {
  stroke: #ffab00;
}
body.salt-level #summary-chart .line.sensor_two {
  stroke: #03fc77;
}
body.salt-level #summary-chart .overlay {
  fill: none;
  pointer-events: all;
}
body.salt-level #summary-chart .dot {
  stroke: #fff;
}
body.salt-level #summary-chart .dot.sensor_one {
  fill: #ffab00;
}
body.salt-level #summary-chart .dot.sensor_two {
  fill: #03fc77;
}
body.mame .left-content {
  justify-content: flex-start;
  padding-top: 48px;
}
body.mame .dev {
  margin-bottom: 24px;
}
body.mame .mame-container {
  display: flex;
  width: 100%;
}
body.mame .mame-container .loading-container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
body.mame .mame-container .highscore-list {
  flex-grow: 1;
}
body.mame .mame-container .highscore-list tbody tr {
  color: #878787;
}
body.mame .mame-container .highscore-list tbody tr.parsed {
  color: #111111;
}
body.mame .mame-container .highscore-list tbody tr.selected {
  background-color: #EEEEEE;
}
body.mame .mame-container .highscore-table {
  flex-grow: 3;
}
body.mame .mame-container .highscore-table.no-scores {
  display: flex;
  justify-content: center;
  align-items: center;
}
body.chip8 h4 {
  margin-bottom: 8px;
}
body.chip8 #button-container {
  display: flex;
  justify-content: space-evenly;
  padding-top: 24px;
}
body.chip8 #chip8-display {
  margin-top: 24px;
}
body.chip8 .color-select-container {
  margin-bottom: 12px;
}
body.chess #chess-container {
  display: flex;
}
body.chess #board-container {
  max-width: 800px;
  overflow: scroll;
}
body.chess #board-container table {
  border-collapse: unset;
  border: 1px solid black;
  min-width: unset;
}
body.chess #board-container tr:hover {
  background-color: #FFFFFF;
  cursor: auto;
}
body.chess #board-container td {
  color: #CCCCCC;
  height: 64px;
  width: 64px;
  text-align: center;
  border: 1px solid black;
  padding: 0;
}
body.chess #board-container td.space {
  min-width: 64px;
  min-height: 64px;
}
body.chess #board-container td.space.dark {
  background-color: #703C06;
}
body.chess #board-container td.space.light {
  background-color: #CB9053;
}
body.chess #board-container td.space:hover {
  background-color: #DDDDDD;
  cursor: pointer;
}
body.chess #board-container td.space.selected {
  background-color: #CCCCCC;
}
body.chess #board-container td.space.possible-move {
  background-color: red;
}
body.chess #board-container td.space.possible-special-move {
  background-color: green;
}
body.chess #board-container td.space.check-threat {
  background-color: orange;
}
body.chess #board-container td.space.flash {
  animation: blinker 1s linear infinite;
}
@keyframes blinker {
  50% {
    opacity: 50%;
  }
}
body.chess #board-container td.board-label {
  color: #111111;
}
body.chess #board-container td.board-label.empty {
  height: 20px;
  width: 20px;
}
body.chess #board-container td.board-label.rank {
  width: 20px;
}
body.chess #board-container td.board-label.file {
  height: 20px;
}
body.chess #board-container .piece-image {
  width: 50px;
  height: 50px;
}
body.chess #actions-container {
  padding: 12px;
  justify-content: space-evenly;
}
body.chess #actions-container #next-move-button {
  display: none;
}
body.chess #game-start-modal #load-game-id-input {
  text-transform: uppercase;
}
body.chess #game-start-modal #load-error {
  display: none;
  margin-top: 4px;
}
body.chess #game-start-modal .new-container .game-mode-container {
  margin-bottom: 8px;
}
body.chess #game-start-modal .new-container #network-game-mode-container {
  display: none;
  margin-top: 8px;
  margin-bottom: 8px;
}
body.chess #game-start-modal .new-container #network-game-mode-container.logged-out .network-config.logged-in {
  display: none;
}
body.chess #game-start-modal .new-container #network-game-mode-container.logged-out .network-config.logged-out {
  display: block;
}
body.chess #game-start-modal .new-container #network-game-mode-container.logged-in .network-config.logged-out {
  display: none;
}
body.chess #game-start-modal .new-container #network-game-mode-container.logged-in .network-config.logged-in {
  display: block;
}
body.chess #game-start-modal .new-container h4 {
  margin-bottom: 8px;
}
body.chess #game-start-modal .load-game-id-select-container {
  margin-bottom: 12px;
}
body.chess #game-start-modal .board-setup-container,
body.chess #game-start-modal .remote-setup-container {
  display: none;
  margin-bottom: 16px;
}
body.chess #game-start-modal .board-setup-container .status-item span,
body.chess #game-start-modal .remote-setup-container .status-item span {
  font-weight: 600;
}
body.chess #game-start-modal .board-setup-container .remote-setup-content,
body.chess #game-start-modal .board-setup-container .board-setup-content,
body.chess #game-start-modal .board-setup-container #remote-hand-connected-octoprint,
body.chess #game-start-modal .board-setup-container #remote-refresh-controller,
body.chess #game-start-modal .board-setup-container #remote-refresh-octoprint,
body.chess #game-start-modal .board-setup-container #remote-homing-octoprint,
body.chess #game-start-modal .board-setup-container #remote-initialize-controller,
body.chess #game-start-modal .board-setup-container #remote-initialize-octoprint,
body.chess #game-start-modal .remote-setup-container .remote-setup-content,
body.chess #game-start-modal .remote-setup-container .board-setup-content,
body.chess #game-start-modal .remote-setup-container #remote-hand-connected-octoprint,
body.chess #game-start-modal .remote-setup-container #remote-refresh-controller,
body.chess #game-start-modal .remote-setup-container #remote-refresh-octoprint,
body.chess #game-start-modal .remote-setup-container #remote-homing-octoprint,
body.chess #game-start-modal .remote-setup-container #remote-initialize-controller,
body.chess #game-start-modal .remote-setup-container #remote-initialize-octoprint {
  display: none;
}
body.chess #game-start-modal .board-setup-container .board-setup-number,
body.chess #game-start-modal .remote-setup-container .board-setup-number {
  margin-bottom: 8px;
}
body.chess #game-info-container {
  width: 200px;
  border: 1px solid #111111;
  margin-left: 20px;
  padding: 8px;
}
body.chess #game-info-container > div {
  padding: 8px 0;
}
body.chess #game-info-container #game-log-header {
  margin-bottom: 4px;
}
body.chess #game-info-container #game-log-container {
  height: 220px;
  overflow: scroll;
  border: 1px solid black;
  padding: 8px;
}
body.chess #game-info-container #game-info-opponent {
  display: none;
}
body.chess #game-info-container span.small-log {
  font-size: 12px;
  margin-left: 16px;
}
body.chess #game-info-promotion-options {
  display: flex;
  justify-content: space-around;
}
body.chess #game-info-promotion-options img {
  display: none;
  padding: 4px;
}
body.chess #game-info-promotion-options img.white {
  background-color: #111111;
}
body.chess #game-info-promotion-options img.black {
  border: 1px solid #111111;
}
body.chess #game-info-promotion-options img:hover {
  cursor: pointer;
}
body.chess #game-info-promotion-options img:hover.white {
  background-color: #CCCCCC;
}
body.chess #game-info-promotion-options img:hover.black {
  background-color: #CCCCCC;
}
body.links #links-table-container {
  margin: auto;
  margin-top: 80px;
}
body.links th,
body.links td {
  overflow: scroll;
  max-width: 300px;
}
body.error-page .inner, body.event .inner, body.linker .inner {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
body.budget .budget-content {
  display: flex;
  flex-direction: row;
  padding-top: 12px;
}
body.budget .view-selector {
  display: flex;
  flex-direction: column;
  padding: 12px 12px 0;
  border: 1px solid black;
}
body.budget .view-selector .view-option {
  border-radius: 6px;
  border: 1px black solid;
  padding: 8px 24px;
  margin-bottom: 12px;
}
body.budget .view-selector .view-option.selected {
  background-color: #CCCCCC;
}
body.budget .view-summary {
  display: flex;
  flex-direction: column;
  padding-left: 24px;
  padding-top: 12px;
}
body.budget .item-selector,
body.budget .budget-date-selector {
  display: flex;
  flex-direction: column;
}
body.budget .item-selector .selector-group button,
body.budget .budget-date-selector .selector-group button {
  margin: 0px 2px 12px;
}
body.budget button.selected {
  background-color: #CCCCCC;
}

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