table tbody tr:nth-child(2n) {
  background-color: rgba(255, 255, 255, 0.075) !important;
}

table tbody tr:nth-child(2n + 1) {
  background-color: rgba(255, 255, 255, 0) !important;
}

/* Custom styling for progress table */
.article-header-button {
  float: right;
  margin-bottom: 10px;
  border-bottom: none;
}

.article-header {
  display: inline-table;
}

@media (max-width: 700px) {
  .article-header-button {
    float: none;
  }
}

#guide-table tr h4 {
  font-size: medium;
}

#guide-table tr a.button.primary {
  width: 16em
}

/* #progress-table > tbody > tr:nth-child(n + 2) > td:nth-child(n + 2) { */
.progress-cell {
  /* font-size: 14pt; */
  /* opacity: 0; */
  text-align: center !important;
}

.progress-cell div {
  font-size: 75%;
  opacity: 0;
}

#progress-table-wrapper {
  position: relative;
  overflow: auto;
  white-space: pre;
}

/* first column */
#progress-table .name-cell {
  font-weight: bold;
  position: -webkit-sticky !important;
  position: sticky !important;
  background-color: #24272b !important; /* make sticky column background opaque */
  left: 0;
}

/* first row */
#progress-table .game-cell {
  background-color: #34363a !important;
  font-weight: bold;
  vertical-align: middle;
}

/* make sticky column background opaque */
#progress-table tbody tr:nth-child(2n) td:nth-child(1) {
  background-color: #34363a !important;
}

/* reveal progress on mouseover */
.progress-cell div:hover,
.progress-cell div:focus {
  opacity: 1;
  transition: opacity 0.5s;
}

/* Form */

.form-article iframe {
  opacity: 0;
  height: 0;
  transition: opacity 2s ease-in-out, height 1s ease-in-out;
}

/* TABLE FADE IN */
article table {
  opacity: 0;
  /* height: 0; */
  transition: opacity 1s ease-in-out;
}

/* make guides and progress tables wide enough to see it all on desktop */
article#guides,
article#progress {
  width: 100% !important;
}

table.alt thead th {
  border: solid 1px #ffffff;
}

/* SPINNER */

/* Absolute Center Spinner */
.loading {
  position: fixed;
  z-index: 999;
  height: 2em;
  width: 2em;
  overflow: show;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  visibility: hidden;
}

/* Transparent Overlay */
.loading:before {
  content: "";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
}

/* :not(:required) hides these rules from IE9 and below */
.loading:not(:required) {
  /* hide "loading..." text */
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

.loading:not(:required):after {
  content: "";
  display: block;
  font-size: 10px;
  width: 1em;
  height: 1em;
  margin-top: -0.5em;
  -webkit-animation: spinner 1500ms infinite linear;
  -moz-animation: spinner 1500ms infinite linear;
  -ms-animation: spinner 1500ms infinite linear;
  -o-animation: spinner 1500ms infinite linear;
  animation: spinner 1500ms infinite linear;
  border-radius: 0.5em;
  -webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0,
    rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0,
    rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0,
    rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0,
    rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
  box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0,
    rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0,
    rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0,
    rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
}

/* Animation */

@-webkit-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-moz-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-o-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}