html, body {
    height: 100%;
    touch-action: manipulation; /* Stop double tapping to zoom in ios. */


    /* Stop selecting of text on double click. */
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    
}

.container-fluid { height: 100%; }

.hs-height { height: 100% }

.hs-scroll {
  overflow: scroll;
  height: calc(100% - 150px);
}

#ChatBox div:nth-child(even) { background: #eee; }

table {
    border-collapse:separate;
    border:solid black 2px;
    border-radius:0.25rem;
    -moz-border-radius:0.25rem;
    border-spacing: 0px;
    border-color: lightgray;
}

td, th {
    border-left:solid lightgray 2px;
    border-top:solid lightgray 1px;
    border-bottom:solid lightgray 1px;
}

th {
    border-top: none;
}

td:first-child, th:first-child {
     border-left: none;
}

.you {
  background-color: #90ee9047;
}

.quizMasterInfo {
  background-color: lightblue
}

.questionInfo {
  display: grid;
  margin-bottom: 10px;
}

.card {
  margin-bottom: 10px;
}

.playerTable .card {
  border-width: 0px;
}

body {
  background: url(../images/2025/bg.jpg) repeat fixed; 
}

.slideContainer {
  grid-column: 1;
  grid-row: 1;
}

.QuestionScoreOverlay {
  display: flex;
  align-items: center;
  position: absolute;
  height: 1.75em;
  min-width: 2.75em;
  -webkit-box-align: center;
  align-items: center;
  justify-content: center;
  text-align: center;
  top: 50px;
  right: 0px;
  color: white;
  background-color: red;
  border-radius: .575em 0 0 .575em;
}

.QuestionCountdownOverlay {
  display: flex;
  align-items: center;
  position: absolute;
  height: 1.75em;
  min-width: 2.75em;
  -webkit-box-align: center;
  align-items: center;
  justify-content: center;
  text-align: center;
  top: 25px;
  right: 0px;
  color: white;
  background-color: rgb(238, 214, 0);
  border-radius: .575em 0 0 .575em;
}

.QuestionNumberOverlay {
  display: flex;
  align-items: left;
  position: absolute;
  height: 1.75em;
  min-width: 4.75em;
  -webkit-box-align: center;
  align-items: center;
  justify-content: center;
  text-align: center;
  top: 0px;
  left: 0px;
  color: white;
  background-color: rgb(225, 0, 255);
  border-radius: 0 0 .575em 0;
}

.quiz-image
{
  height: 164px;
  /*height: 200px;*/
  width: 100%;
  object-fit: contain;
}

.question-text {
  font-size: 14px;
  padding-top: 0px;;
}

.MaxWidth {
  width: 100%;
}

.NameCell {
  overflow: hidden;
}


.label-50 {
  width: 200px;
}

/*
  flip-card
*/


.flip-card {
  background-color: transparent;
  /*width: 300px;*/
  height: 300px;
  perspective: 1000px;
}

.flip-card-inner {

  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

/*
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}
*/
.flipped {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  background-color: white;
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-front {
  color: black;
}

.flip-card-back {  
  transform: rotateY(180deg);
}

/*
 * ANIMATIONS!
 *
 * flip
 * bounce
 * fade 
 * slide
 *
 * Class based animations
 * shaking
 */

.qbounce-enter-active {
  animation: qbounce-in .5s;
}

@keyframes qbounce-in {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(1);
  }
}


.fade-enter-active, .fade-leave-active {
  transition: all .4s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

 .bounce-enter-active {
   animation: bounce-in .5s;
 }
 .bounce-leave-active {
   /*animation: bounce-in .5s reverse;*/
   animation: shrink-out .5s
 }
 @keyframes bounce-in {
   0% {
     transform: scale(0);
   }
   50% {
     transform: scale(1.5);
   }
   100% {
     transform: scale(1);
   }
 }

 @keyframes shrink-out {
   0% {
     transform: scale(1);
   }
   100% {
     transform: scale(0);
   }
 }



.slide-leave-active,
.slide-enter-active {
   transition: .9s;
}
 .slide-enter {
   transform: scale(0.9);
   z-index: 0;
}
.slide-leave-to {
   transform: translate(-150%, 0);
   z-index: 5000;
}
.slide-leave {
   z-index: 5000;
}

.slide-to-back-enter-active {
  animation: slide-to-back-in 1s;
}
.slide-to-back-leave-active {
  animation: slide-to-back-out 1s;
}

@keyframes slide-to-back-in {
  0% {
    transform: scale(0.9);
    z-index: 0;
  }
  100% {
    transform: scale(1);
    z-index: 5000;
  }
}

@keyframes slide-to-back-out {
  0% {
    z-index: 5000;
  }
  50% {
    transform: translate(-102%);
    z-index: 5000;
  }
  70% {
    transcorm: scale(0.9);
    z-index: 0;
    opacity: 1;
  }
  100% {
    transform: translate(0%);
    z-index: 5000;
    opacity: 0;
  }
}

/* Enter and leave animations can use different */
/* durations and timing functions.              */
.slide-fade-enter-active {
   animation: slide-in 1s
}
.slide-fade-leave-active {
  /*transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);*/
  animation: slide-out 1s
}

@keyframes slide-out {
  0% {
    transform: scale(0);
  }
  10% {
    transform: translateX(-20px);
    transform: translateY(20px);

  }
  100% {
    transform: translateX(300px);
    transform: translateY(20px);
  }
}

@keyframes slide-in {
  0% {
    transform: scale(0);
    transform: translateX(30px);
    transform: translateY(0px);
  }
  100% {
    transform: scale(0);
  }
}

.flip-list-move {
  transition: transform 1s;
}


.shaking {
    animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
    transform: translate3d(0, 0, 0) rotate(0deg);
    transform: rotate(0deg);
    backface-visibility: hidden;
    perspective: 1000px;
    animation-iteration-count: infinite;
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(0, 0px, 0) rotate(0deg);;
  }

  20%, 80% {
    transform: translate3d(0, -2px, 0) rotate(5deg);
  }

  30%, 50%, 70% {
    transform: translate3d(0, 0px, 0) rotate(0deg);
  }

  40%, 60% {
    transform: translate3d(0, -2px, 0) rotate(-5deg);
  }
}


.headShake {
  animation: headShake 2.0s ease-in-out both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
  animation-iteration-count: infinite;
}

@keyframes headShake {
  0% {
    transform: translate3d(-2px, 0, 0) rotate(-15deg);
  }
  
  50% {
    transform: translate3d(2px, 0, 0) rotate(15deg);
  }
  100% {
    transform: translate3d(-2px, 0, 0) rotate(-15deg);
  }
}