/* table set up -------------------------------------------------- */
 
 table {
  overflow: auto;
  width:90vw;
  
  
 }
 
 
 
 
 .table-hover {
  /* border-collapse: collapse; */
  /* table-layout:auto; */
  margin: 5px 5px 5px 50px;

  width: 90vw;
  }

 .tableResults {
    border-collapse: collapse;
    table-layout: fixed;
    margin: 5px 5px 5px 5px;
    width:90vw;
    }


.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
    background-color: #e7e7e7;
    border: 3px solid #fff;
    border-radius: 1px;
    max-width: 20px;
}


  .table-striped > tbody > tr.selected > td,
  .table-striped > tbody > tr.selected > th {
      background-color: #A9D0F5; 
  }


/* Fixed Headers */
thead[scope=row] {
  position: -webkit-sticky;
  position: sticky;
  top: 150px;
  /* white-space: nowrap; */
  z-index: 10;
  max-width: 20px;
 
}
.table-hover th,
.tableResults th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  white-space: nowrap;
  z-index: 10;
  max-width: 20px;
  /* background-color: #fff; */
}

/* Fixed Columns */
.tableResults tr[scope=row] {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  top:5px;
  z-index: 1;
  vertical-align: top;
  color: inherit;
  background-color: inherit;
  background: white;

}


th[scope=row] {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  top:5px;
  z-index: 10;
  vertical-align: top;
  color: inherit;
  background-color: inherit;
  

}




td[scope=col] {
  position: -webkit-sticky;
  position: sticky;
  left: 0px;
  z-index: 2;
  background-color: #fff;

}

td[scope=col2] {
  position: -webkit-sticky;
  position: sticky;
  left: 170px;
  z-index: 2;
  background-color: #fff;
  width:15px;
}


th:not([scope=row]):first-child {
  left: 1;
  z-index: 1;
  /* position: -webkit-sticky;
  position: sticky; */
  /* background: linear-gradient(90deg, #666 0%, #666 calc(100% - .05em), #ccc calc(100% - .05em), #ccc 100%); */
}



/* detailed quiz results colours */






/* Scrolling wrapper */
/*
div[tabindex="0"][aria-labelledby][role="region"] {
  overflow: auto;
}

div[tabindex="0"][aria-labelledby][role="region"]:focus {
  box-shadow: 0 0 .5em rgba(0,0,0,.5);
  outline: .1em solid rgba(0,0,0,.1);
}

div[tabindex="0"][aria-labelledby][role="region"] table {
  margin: 0;
}

div[tabindex="0"][aria-labelledby][role="region"].rowheaders {
  background:
    linear-gradient(to right, transparent 30%, rgba(255,255,255,0)),
    linear-gradient(to right, rgba(255,255,255,0), white 70%) 0 100%,
    radial-gradient(farthest-side at 0% 50%, rgba(0,0,0,0.2), rgba(0,0,0,0)),
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,0.2), rgba(0,0,0,0)) 0 100%;
  background-repeat: no-repeat;
  background-color: #fff;
  background-size: 4em 100%, 4em 100%, 1.4em 100%, 1.4em 100%;
  background-position: 0 0, 100%, 0 0, 100%;
  background-attachment: local, local, scroll, scroll;
}

div[tabindex="0"][aria-labelledby][role="region"].colheaders {
  background:
    linear-gradient(white 30%, rgba(255,255,255,0)),
    linear-gradient(rgba(255,255,255,0), white 70%) 0 100%,
    radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.2), rgba(0,0,0,0)),
    radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;
  background-repeat: no-repeat;
  background-color: #fff;
  background-size: 100% 4em, 100% 4em, 100% 1.4em, 100% 1.4em;
  background-attachment: local, local, scroll, scroll;
}
*/
/* Strictly for making the scrolling happen. */
/*
th[scope=row] {
  min-width: 10vw;
}



@media all and (min-width: 10em) {
  th[scope=row] {
    min-width: 8em;
  }
}



th[scope=row] + td  {
  min-width: 8em;
}

div[tabindex="0"][aria-labelledby][role="region"]:nth-child(3) {
  max-height: 7em;
}

div[tabindex="0"][aria-labelledby][role="region"]:nth-child(2) {
  max-height: 0em;
}

div[tabindex="0"][aria-labelledby][role="region"]:nth-child(7) {
  max-height: 0em;
  margin: 0 0em;
} */




.stickyHeader {
  top:80px;
  border: 4px solid transparent ;
  /* position: -webkit-sticky; */
  position: sticky;
  padding: 50px;
}

.stickyHeader2 {
  top:115px;
  border: 4px solid transparent ;
  /* position: -webkit-sticky; */
  position: sticky;
  background-color: #fff;
  margin-bottom:10px;

 
}

.stickyHeaderGames {
  top:0px;
  border: 4px solid transparent ;
  position: -webkit-sticky;
  position: sticky;
  background-color: #fff;
 
}


.stickyColumn{
  /* position: -webkit-sticky; */
  position: sticky;
  left: 0;

  z-index: 10;
  }








.rotatedCol {

  margin:0px 0px 0px 0px!important;
  padding: 0px 0px 90px 0px!important;
  border: 1px 1px 1px 1px solid #fff  !important;
  background: #ffff !important;
  font: 10px Rubik;
  z-index:-1;

  transform: 
  /* Magic Numbers */
  translate(45px, 51px)
  /* 45 is really 360 - 45 */
  rotate(300deg);
  width: 28px !important;
  max-width: 35px;
}

.resultsCol {
    text-align: center ;
    width:27px !important;
    font: 12px Rubik !important;
    margin:1px !important;
    padding:1px !important;
    vertical-align:middle !important;
    border-color: white   !important;
    border-width: 1px!important;
    color: #737373;
    /* max-height: 12px; */


}

.tickCol {
    text-align: center ;
      width:8px !important;
      font: 12px Rubik !important;
      font-weight: bold;
      margin:1px !important;
      padding:1px !important;
      vertical-align:bottom !important;
      border-color: white   !important;
      border-width: 1px!important;
      color: #737373;

}

.nameCol {
  width: 240px !important;
  max-height: 10px !important;
  font: 14px Rubik !important;
  margin:1px !important;
  padding:1px !important;
  vertical-align:middle !important;
  border-color: #fff    !important;
  border-width: 0px!important;
  text-align: left;
  z-index: 0;
   min-width: 240px !important;
  max-width: 240px !important;
  background-color: #fff;
}


.descCol {
  text-align: left;
  vertical-align:middle !important;
  width:70px !important;
  font: 10px Rubik;
  margin:1px !important;
  padding:1px !important;
  /* height: 8px !important; */
  border-color: #fff    !important;
  border-width: 1px!important;
  z-index: 0;
  min-width: 50px;
}




.docCol {
  max-height: 10px !important;
  font: 14px Rubik !important;
  margin:0px !important;
  padding:0px !important;
  vertical-align:middle !important;
  text-align: left;

}