@font-face {
    font-family: quizit;
    src: url("../fonts/quizit.otf") format("opentype");
}

html, body {
    background-color:#ABC8E2;
    background: radial-gradient(circle, rgb(2, 24, 73) 0%, rgb(6, 6, 77) 35%, rgba(2,0,36,1) 100%);
    color:#292929;
    height:100%;
}

/* h1, h2, h3, h4, h5, h6, .fquizit {
    font-family: 'quizit';
} */

h3 {
    font-size:16px;
    font-weight:600;
}
.logo {
    font-size:60px;
}
.container {
    /* background-color: aliceblue; */
    background-color: #ffffff;
    min-height: 100%;
    align-content: center;

}

.mid {
    border-style:groove;
    border-color: aqua;
    border-radius: 12px;
    background-color: none;
}

footer {
    font-size: smaller;
    border-top-style:solid;
    border-top-width: 1px;
    margin-top:4em;
    padding-top:8px;
    padding-bottom: 1em;
}

.page-header {
    border-color:#375D81;
}

.quiz-advance {
    border-bottom: 1px solid #375D81;
    padding-bottom: 20px;
    margin-bottom:15px;
}

.qfoot {
    border-top: 1px solid #375D81;
    padding-top: 20px;
    margin-top: 15px;
    border-bottom: 1px solid #375D81;
    padding-bottom: 20px;
    margin-bottom: 15px;
}

.qbody {
    min-height:400px;
    padding:14px;
}

.game-status {
    position:absolute;
    top:0;
    font-size:xx-small;
    background-color:#A1F2A6;
    border-radius: 0 0 5px 5px;
    padding-right:20px;
    width:50%;
    padding-bottom:2px;
}


.game-status ul {
    margin-left: 0;
    padding-left: 0;
    display: inline;
}
.game-status ul li {
    margin-left: 0;
    padding: 3px 15px;
    border-left: 1px solid #000;
    list-style: none;
    display: inline;
}

.game-status ul > li:first-child {
    margin-left: 0;
    border-left: none;
    list-style: none;
    display: inline;
}


.quiz-overview {
    overflow-y: scroll;
    background:#dfdfdf;
    list-style:none;
    margin:0;
    padding: 0;
    /* max-height: 400px; */
}

.quiz-overview li{
    padding: 0px 0px 0px 5px;
}


.quiz-overview ul {
    background:#eeeeee;
    list-style:none;
    margin:0;
    padding:0;
    height: 100%;
}

.quiz-overview ul li {
    background:#eeeeee;
    margin:0;
    padding-top:4px;
    padding-left:20px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-color: #aaaaaa;
}

/* .question {
    background-color:#2F2933;
    color:white;
    font-size:xx-large;
    padding-top:100px;
    min-height:300px;
    text-align:center;
    vertical-align:center;
} */



/* .answer {
    color:#2F2933;
    background-color:#FFFFA6;
    border-style:solid;
    border-color: white;
    border-width: 0.5em;
    line-height: 2em; 
    font-size:xx-large;
    text-align:center;
}

@media screen and (min-width: 800px) {
    .answer {
    height:8em;
    line-height: 6em;
    border-width: 1em;
    }
}

.answer span {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
} */
.correct {
    background-color:#5f9c07;
}

.answer-color-1 {
/*  red  */
    background-color:#ff1a02;
}
.answer-color-2 {
/*  green  */
    background-color:#3bc119;
}
.answer-color-3 {
/*  blue  */
    background-color:#00b8ff;
}
.answer-color-4 {
/*  yellow  */
    background-color:#fbff00;
}

.answer-color-1.glow {
    -webkit-box-shadow: inset 0px 0px 89px 33px rgba(255,255,255,0.75);
    -moz-box-shadow: inset 0px 0px 89px 33px rgba(255,255,255,0.75);
    box-shadow: inset 0px 0px 89px 33px rgba(255,255,255,0.75),  0px 0px 89px 33px red !important;;
    z-index:30;
}
.answer-color-2.glow {
    -webkit-box-shadow: inset 0px 0px 89px 33px rgba(255,255,255,0.75);
    -moz-box-shadow: inset 0px 0px 89px 33px rgba(255,255,255,0.75);
    box-shadow: inset 0px 0px 89px 33px rgba(255,255,255,0.75),  0px 0px 89px 33px green !important;;
    z-index:30;
}
.answer-color-3.glow {
    -webkit-box-shadow: inset 0px 0px 89px 33px rgba(255,255,255,0.75);
    -moz-box-shadow: inset 0px 0px 89px 33px rgba(255,255,255,0.75);
    box-shadow: inset 0px 0px 89px 33px rgba(255,255,255,0.75),  0px 0px 89px 33px blue !important;;
    z-index:30;
}
.answer-color-4.glow {
    -webkit-box-shadow: inset 0px 0px 89px 33px rgba(255,255,255,0.75);
    -moz-box-shadow: inset 0px 0px 89px 33px rgba(255,255,255,0.75);
    box-shadow: inset 0px 0px 89px 33px rgba(255,255,255,0.75),  0px 0px 89px 33px yellow !important;;
    z-index:30;
}

.show-correct {
    border-color:#10FF10;
}



.player .inactive {
    opacity: 0.4;
    filter: alpha(opacity=40); /* msie */
    /* background-color: #000; */
    z-index: 2;
}


.timer {
    background-color: #f5f5f5;
    margin:0;
    padding:0;

}

.timer-bar {
    color: #fff;
    text-align: center;
    background-color: orange;
    font-size:x-large;
    padding-top:10px;
    padding-bottom:10px;

}

.scores {
    /* background-color:#2F2933; */
    color:white;
    /* font-size:x-large; */
    /* padding-bottom:2em; */
    font-size: 4vw;
    padding:2px;
}

/* .round-heading {
    
} */
/* 
.scores table {
    background-color:purple;
    color:white;
    border: 0.1em solid white;
    border-spacing: 1em;
    border-collapse: collapse;
    vertical-align:center;
    font-size:x-large;
}

.scores table th,td {
    padding:1em;
} */


.bulk {
    margin-top: 800px;
}

.playing {
    font-weight:bold;
}

.client-status {
    font-size: small;
    display: flex;
    justify-content: space-between;
    background-color: #375D81;
    color: #fff;
    padding: 4px;
    flex-grow:1;
}

.player-error {
    font-size: small;
    background-color: rgb(177, 100, 100);
    color: #fff;
    font-weight: bold;
    padding: 2px;
    text-align: center;
}


/** The Magic **/
.btn-seq .btn:not(:last-child):after {
    content: " ";
    display: block;
    width: 0;
    height: 0;
    border-top: 17px solid transparent;
    border-bottom: 17px solid transparent;
    border-left: 10px solid rgb(197, 197, 242);
    position: absolute;
    top: 50%;
    margin-top: -17px;
    left: 100%;
    z-index: 3;
}
.btn-seq .btn:not(:last-child):before {
    content: " ";
    display: block;
    width: 0;
    height: 0;
    border-top: 17px solid transparent;
    border-bottom: 17px solid transparent;
    border-left: 10px solid rgb(173, 173, 173);
    position: absolute;
    top: 50%;
    margin-top: -17px;
    margin-left: 1px;
    left: 100%;
    z-index: 3;
}



.btn-seq .btn.complete:not(:last-child):after {
    content: " ";
    display: block;
    width: 0;
    height: 0;
    border-top: 17px solid transparent;
    border-bottom: 17px solid transparent;
    border-left: 10px solid #5c52b9;
    position: absolute;
    top: 50%;
    margin-top: -17px;
    left: 100%;
    z-index: 3;
}
.btn-seq .btn.complete:not(:last-child):before {
    content: " ";
    display: block;
    width: 0;
    height: 0;
    border-top: 17px solid transparent;
    border-bottom: 17px solid transparent;
    border-left: 10px solid #5c52b9;
    position: absolute;
    top: 50%;
    margin-top: -17px;
    margin-left: 1px;
    left: 100%;
    z-index: 3;
}


/** The Spacing **/
.btn-seq .btn {
    padding:6px 12px 6px 24px;
}
.btn-seq .btn:first-child {
    padding:6px 6px 6px 10px;
}
.btn-seq .btn:last-child {
    padding:6px 18px 6px 24px;
}



/** Default button **/
.btn-seq .btn.btn-default:not(:last-child):after {
    border-left: 10px solid #fff;
}
.btn-seq .btn.btn-default:not(:last-child):before {
    border-left: 10px solid #ccc;
}

/* chevron fill */
.btn-seq .btn.btn-default:hover:not(:last-child):after {
    border-left: 10px solid #ebebeb;
}
/*chevron line */
.btn-seq .btn.btn-default:hover:not(:last-child):before {
    border-left: 10px solid #adadad;
}

.btn-seq  .btn.btn-default.complete {
    background-color:#999999;
    color:#555555;
}
.btn-seq  .btn.btn-default.complete:not(:last-child):after {
    border-left: 10px solid #999999;
}
.btn-seq .btn.btn-default.complete:not(:last-child):before {
    border-left: 10px solid #888888;
}

.states {
    background-color: rgb(150, 176, 245);
    border-color: none;
}
.complete {
    background-color: rgb(22, 59, 161);
}


.dropdown {
    position: relative;
    display: inline-block;
  }
  
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;
  }
  
  .dropdown:hover .dropdown-content, .dropdown[data-show="true"]  .dropdown-content{
    display: block;
  }

  .joinlinks {
      margin-top: 12px;
      border: #fff;
      border-style: solid;
      border-radius: 8px;
      /* padding:2em 1.5em 2em 1.5em; */
      padding: 8px 8px 8px 8px;
      /* background-color: #cde8f2; */
      /* #00b8ff; */
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      font-weight: 700;
      font-size: 3vh;

  }

  .joinlinks ul {
    list-style-type:none;
  }

  .join-instructions {
    flex-grow: 1; 
    flex-basis: 0;
    padding-left:8px;
    }

    .question_placeholder {
        padding:0px 6px 0px 6px;
        background-color: #c9dbd9;
    }
  
  .larger {
      font-size: larger;
  }

  .hidden {
    display: none!important;
}

/* scorediv {
    text-align: center;
    margin-bottom:4px;
} */

ul.scoretable {
    width:100%;
    /* background:#222371; */
    list-style:none;
    margin:10px 0 0 0;
    padding:0;
    font-size: 2.5vw;
}

ul.scoretable li {
    background:#015475;
    margin:12px;
    padding-top:4px;
    padding-bottom:4px;
    padding-left:20px;
    padding-right: 20px;
    border-radius: 40px;
    display: flex;
    justify-content: space-between;
}

ul.scoretable li span {
    padding-top:4px;
    padding-bottom:4px;
}

ul.scoretable li span:nth-child(1) {
    /* min-width:160px; */
    min-width:40%;
    transition: width 2s;
}

/* ul.roundscores {
    list-style: none;
} */
ul.roundscores li{
    display: inline-block;
    padding-top: 4px;
    padding-bottom: 4px;
}

.totalscore {
    background-color: seagreen;
    min-width: 20px;
    text-align: center;
    border-radius: 22px;
}
.ascore {
    background-color:#5ed9c8;
    text-align: center;
    min-width:160px;
    border-radius: 22px;
    padding-left: 20px;
    padding-right: 20px;
    transition: width 2s;
}

.pretableanswer {
    background-color:#5e7fd9;
    text-align: center;
    min-width:160px;
    border-radius: 22px;
    padding-left: 20px;
    padding-right: 20px;
    transition: width 2s;
    font-size: smaller;
}

.scoretable-time {
    background-color:#5e7fd9;
    text-align: center;
    min-width:160px;
    border-radius: 22px;
    padding-left: 20px;
    padding-right: 20px;
    transition: width 2s;
    font-size: smaller;
}

.player-name {
    flex-grow: 2;
    text-align: center;
}

.correct {
    background-color:#6ba60f !important;
}
.wrong {
    background-color:#a60f0f !important;
}

@media screen and (min-width: 800px) {
    .question_placeholder {
        /* border: #222222; */
        border-style: solid;
        border-radius: 20px;
        padding:2em 1.5em 2em 1.5em;
        margin: 2em;
        text-align: center;
        font-size: xx-large;
    }
    .join-instructions {
        padding:1em;
    }
    /* .joinlinks {
         margin-top: 2em; 
    } */
    .totalscore {
        min-width:100px;
    }
    .scores {
        font-size: 3vw;
        padding-left:2em;
        padding-right:2em;
        padding-bottom: 2em;
        padding-top:0.6 em;
    }
    
  }

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@keyframes tada {
  from {
    transform: scale3d(1, 1, 1);
  }

  10%,
  20% {
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }

  30%,
  50%,
  70%,
  90% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%,
  60%,
  80% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  to {
    transform: scale3d(1, 1, 1);
  }
}

.tada {
  animation-name: tada;
}
.answer-row {
    display:flex;
    padding-top: 15px;
    min-height: 3em;
}


.masterview .scores {
    font-size: 12px;
}
.masterview ul.scoretable {
    font-size: unset;
}

.masterview #question {
    overflow:scroll;
    height:100%;
}

.black-text {
    color: black;
}

.sortable-element {
    cursor:grab;
}


#spinner{
    visibility: hidden;
    width: 80px;
    height: 80px;
  
    border: 2px solid #f3f3f3;
    border-top:3px solid #f25a41;
    border-radius: 100%;
  
    position: absolute;
    top:0;
    bottom:0;
    left:0;
    right: 0;
    margin: auto;
  
    animation: spin 1s infinite linear;
  }
  
  @keyframes spin {
    from {
        transform: rotate(0deg);
    } to {
        transform: rotate(360deg);
    }
  }
  
  #spinner.show {
    visibility: visible;
  }
  
  .card-img-top {
    width: 100%;
    height: 15vw;
    object-fit: cover;
}


.large-centre-icon {
    text-align: center;
    padding: 20px;
    font-size: 7rem;
}


.full-height {
    height: 100%;
    display: flex;
    flex-direction: column;
}


.round-header {
    display:flex;
    flex-direction: column;
    color:#fff;
    justify-content: center;
    align-items: center;
    height:100%;
    font-size: 8vh;
}

/* .master-control-container {
    display: flex;
    flex-direction: column;
    height:100%;
} */

.h-100pc {
    height:100%;
    margin: 0;
}

/* https://stackoverflow.com/questions/10959068/twitter-bootstrap-accordion-and-button-dropdown-overflow-issue */
/* .accordion-body[class*="in collapse"]{ overflow:visible;} */



.openanswering {
    position: absolute;
    width:0;
    height:100%;
    background-color: rgba(16, 255, 16, 0.26);
    top: 0;
    left: 0;
}

.accordion > .card {
    overflow: visible;
}


.active-price {
    background-color: #eaeaea;
    border-style: solid;
    border-width: 1px;
}

.old-price {
    background-color: #a8a8a8;
    border-style: solid;
    border-width: 1px;
}

.link-button { 
    background: none;
    border: none;
    color: #0066ff;
    text-decoration: underline;
    cursor: pointer;
    font-size:small;
}

.alert-with-button {
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: space-between;
}

.sitelogo {
    background:  url(/static/img/logo.png) no-repeat center center / contain;
    color:red;
    width:40px;
}
.expandlogo {
    background-color: white;
}