/* defaults */
.csgs-wrapper {
  text-align: center;
  padding: 20px;
  background-color: #000;
}

.csgs-wrapper h2 {
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 20px;
}

.csgs-wrapper p {
  font-size: 20px;
}

.csgs-wrapper p.sm-text {
  font-size: 14px;
  color: grey;
}

.csgs-wrapper table {
  width: 100%;
  text-align: left;
}

.csgs-wrapper table th {
  font-weight: 400;
  color: grey;
  text-transform: uppercase;
}

.csgs-wrapper table tr:first-of-type {
  background-color: black !important;
  padding-bottom: 6px;
}

.csgs-wrapper table tr td {
  padding: 2px;
}

.csgs-wrapper table tr td span {
  font-size: 16px;
}

.csgs-wrapper .form-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.csgs-wrapper .form-wrapper .form-item{
  margin: 0;
}

.csgs-wrapper .form-wrapper select {
  padding: 0;
  background-color: transparent;
  border: 1px solid #FFF;
  color: #FFF;
  width: 250px;
}

.csgs-wrapper .form-wrapper .download-wrapper {
  display: flex;
  align-items: center;
}
.csgs-wrapper .form-wrapper .download-wrapper a {
  color: #FFF;
}

.csgs-wrapper .form-wrapper .download-wrapper button {
  background-color: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
}

.csgs-wrapper .form-wrapper .download-wrapper button:hover {
  color: #ff5a5a ;
  text-decoration: underline;
}

.csgs-wrapper .form-wrapper .download-wrapper a,
.csgs-wrapper .form-wrapper .download-wrapper p,
.csgs-wrapper .form-wrapper .download-wrapper span,
.csgs-wrapper .form-wrapper .download-wrapper button {
  margin: 0 2px;
  font-size: 14px;
}

.csgs-wrapper .form-wrapper form {
  display: flex;
  align-items: center;
}

.csgs-wrapper .form-wrapper form label,
.csgs-wrapper .form-wrapper form input {
  flex: 1;
  display: block;
  margin: 0;
}

#survivor-availability table.mobile,
#survivor-matrix table.mobile {
  display: none;
}

/* backgrounds */
#million-spreads table tr:nth-of-type(4n),
#million-spreads table tr:nth-child(4n+1),
#million-counts table tr:nth-of-type(4n),
#million-counts table tr:nth-child(4n+1) {
  background-color: rgba(255,255,255, 0.1);
}

#survivor-counts table tr:nth-of-type(2n),
#million-standings table tr:nth-of-type(2n),
#survivor-matrix table tr:nth-of-type(2n)  {
  background-color: rgba(255,255,255, 0.1);
}


/* million_standings */
#million-standings table th:last-of-type {
  text-align: center;
  font-weight: bold;
  color: #fff;
  font-size: 16px;
}

#million-standings table tr.showing {
  background-color: rgba(255,255,255, 0.1);
}


#million-standings.loading {
  height: 400px;
}

#million-standings.loading::after  {
  opacity: 1;
}

#million-standings::after {
  content: '';
  position: absolute;
  display: block;
  margin: 8px;
  border: 6px solid #fff;
  border-color: #fff transparent #fff transparent;
  top: 12em;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  opacity: 0;
  animation: rotate 1s infinite;
}


/* survivor_availability_matrix */

#survivor-matrix table tr:first-of-type,
#survivor-availability table tr:first-of-type {
  border-bottom: 1px dotted #FFF;
}

#survivor-matrix table tr td:not(:first-of-type),
#survivor-availability table tr td:not(:first-of-type) {
  border-left: 1px dotted #FFF;
  border-right: 1px dotted #FFF;
  text-align: center;
}

#survivor-availability table tr td:not(:first-of-type) {
  font-size: 12px;
}

#survivor-availability table tr:last-of-type td {
  font-size: 10px;
}

#survivor-matrix {
  padding-top: 2em;
  position: relative;
}

#survivor-matrix.loading {
  height: 400px;
}

#survivor-matrix.loading::after  {
  opacity: 1;
}

#survivor-matrix::after {
  content: '';
  position: absolute;
  display: block;
  margin: 8px;
  border: 6px solid #fff;
  border-color: #fff transparent #fff transparent;
  top: 60%;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  opacity: 0;
  animation: rotate 1s infinite;
}

#survivor-matrix table tr th {
  color: #FFF;
  font-size: 12px;
  text-align: center;
}

#survivor-matrix table tr th:not(:first-of-type) {
  border-left: 1px dotted #FFF;
  border-right: 1px dotted #FFF;
}

#survivor-matrix table tr td {
  font-size: 12px;
}

#survivor-matrix table tr td.picked-team {
  background-color: grey;
  color: #000;
}

#survivor-matrix table tr td.L {
  background-color: red;
  color: #FFF;
}

#survivor-matrix table tr td.W {
  background-color: blue;
  color: #FFF;
}




/* mobile */

@media screen and (max-width: 720px) {
  .csgs-wrapper {
    overflow-x: auto;
  }
  .csgs-wrapper .form-wrapper {
    flex-wrap: wrap;
    gap: 1em; 
    justify-content: center;
  }
  .csgs-wrapper .form-wrapper form label,
  .csgs-wrapper .form-wrapper form input {
    flex: auto;
  }

  #survivor-availability table.desktop,
  #survivor-matrix table.desktop {
    display: none;
  }

  #survivor-availability table.mobile,
  #survivor-matrix table.mobile {
    display: table;
  }

  #survivor-matrix::after {
    top: auto;
    bottom: 30%;
  }

  #survivor-availability table.mobile th {
    text-align: center;
  }
  #survivor-availability table.mobile td {
    border: 1px dotted white;
    text-align: center;
  }
}



@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}