@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
body 
{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
background-image: linear-gradient(90deg, #11218a, #a1aae6);
}
.ball {
position: absolute;
border-radius: 100%;
opacity: 1;
animation: zoom-in-zoom-out 21s ease infinite;
}
.ballsouter-container{
display: flex;
position: fixed;
left: 50%;
top: 50%;
padding: 0;
background-color: #a33487;
color: #fff;
width: 100%;
height: 100%;
overflow: hidden;
transform: translate(-50%, -50%);
background-color: transparent !important;
z-index: -1;
}
@keyframes zoom-in-zoom-out {
0% {
scale: -50%
}
50% {
scale: 150%;
}
100% {
scale: -50%;
}
}
.dropbtn {
-color: transparent !important;
color: white;
font-size: 16px;
border: none;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;
}
.dropdown {
}
.dropdown-content {
display: none;
position: absolute;
right: 40px;
top: 20px;
background-color: #110b1f;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 10;
overflow-x: hidden;
border: 2px solid #fff;
border-radius: 1rem;
min-width: fit-content;
}
.dropdown-content a {
color: white;
padding: 8px 12px;
text-decoration: none;
display: inline-block;
}
.dropdown a:hover
{
background-color: #321d5c;
width: 100%;
}
.show {
display: inline-block;
}
hr.solid {
border-top: px solid #bbb;
}
@media(min-width: 1025px) {
.main-navigation ul ul {
width: auto !important;
white-space: nowrap;
}
}
input::placeholder 
{
color: gray;
}
ul 
{
white-space: nowrap;
}
ul, li
{
list-style: none;
display: inline;
}
::-webkit-input-placeholder { /* Chrome */color: white;}   
:-ms-input-placeholder { /* IE 10+ */color: white;}
::-moz-placeholder { /* Firefox 19+ */color: white;opacity: 1;}
:-moz-placeholder { /* Firefox 4 - 18 */color: white;opacity: 1;}
.name-points-outer
{ 
background-color: #e38e27;
border-radius: 2rem;
border: 2px solid #11218a;
padding: 12px;
}
* 
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Inter", sans-serif;
}
.modalusers 
{
display: none;
flex-direction: column;
justify-content: center;
gap: 0.4rem;
width: 330px;
padding: 1.3rem;
max-width: 540px;
min-height: 250px;
position: absolute;
z-index: 2;
background-color: #6c8ce6;
border: 3px solid #000;
border-radius: 2rem;
}
.modalusers-users-container {
position: fixed;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 3;
}
.modalusers input {
padding: 0.7rem 1rem;
border-radius: 1rem;
font-size: 0.9em;
background-color: white;
outline:none;
border: 2px solid #170557;
font-family: "Poppins", sans-serif;
}
.modalusers p {
font-size: 1rem;
color: #170557;
margin: 0.4rem 0 0.2rem; 
font-family: "Poppins", sans-serif;
}
.modalusers h3 {
font-size: 1.2rem;
color: #170557;
margin: 0.4rem 0 0.2rem; 
font-family: "Poppins", sans-serif;
}


/* */ 
.modalwinner
{
display: none;
flex-direction: column;
justify-content: center;
gap: 0.4rem;
width: 330px;
padding: 1.3rem;
max-width: 540px;
min-height: 250px;
position: absolute;
z-index: 3;
background-color: #d14624;
border: 3px solid #000;
border-radius: 2rem;
}
.modalwinner-winners-container {
position: fixed;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 3;
}
.modalwinner p {
font-size: 2rem;
color: #170557;
margin: 0.4rem 0 0.2rem; 
font-family: "Poppins", sans-serif;
text-align: center;
}
.modalwinner h3 {
font-size: 1.2rem;
color: #170557;
margin: 0.4rem 0 0.2rem; 
font-family: "Poppins", sans-serif;
text-align: center;
}

/* ///////////////// */

.modalgametype
{
display: none;
flex-direction: column;
justify-content: center;
gap: 0.4rem;
width: 330px;
padding: 1.3rem;
max-width: 540px;
min-height: 250px;
position: absolute;
z-index: 3;
background-color: #800b7e;
border: 3px solid #000;
border-radius: 2rem;
}
.modalgametype-gametype-container {
position: fixed;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 3;
}
.modalgametype p {
font-size: 2rem;
color: #170557;
margin: 0.4rem 0 0.2rem; 
font-family: "Poppins", sans-serif;
text-align: center;
}
.modalgametype h3 {
font-size: 1.2rem;
color: #170557;
margin: 0.4rem 0 0.2rem; 
font-family: "Poppins", sans-serif;
text-align: center;
}


/* /////////////// */
.modalnextplayer
{
display: none;
flex-direction: column;
justify-content: center;
gap: 0.4rem;
width: 330px;
padding: 1.3rem;
max-width: 540px;
min-height: 250px;
position: absolute;
z-index: 3;
background-color: #ab1b82;
border: 3px solid #000;
border-radius: 2rem;
}
.modalnextplayer-next-container {
position: fixed;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 3;
}
.modalnextplayer p {
font-size: 2rem;
color: #170557;
margin: 0.4rem 0 0.2rem; 
font-family: "Poppins", sans-serif;
text-align: center;
}
.modalnextplayer h3 {
font-size: 1.2rem;
color: #170557;
margin: 0.4rem 0 0.2rem; 
font-family: "Poppins", sans-serif;
text-align: center;
}
.btn-dialog {
display: inline-block;
padding: 0.4rem 1rem;
font-weight: 700;
background-color: #101acc;
color: white;
border: 2px solid #170557;
border-radius: 1rem;
text-align: center;
font-size: 1em;
font-family: "Poppins", sans-serif;
}
.btn-dialog-disabled 
{
cursor: not-allowed;
pointer-events: none;
color: #fff;
background-color: #dadae0;
display: inline-block;
padding: 0.4rem 1rem;
font-weight: 700;
color: gray;
border: 2px solid gray;
border-radius: 1rem;
text-align: center;
font-size: 1em;
font-family: "Poppins", sans-serif;
}   
.btn-close {
transform: translate(6px, -6px);
padding: 0.5rem 0.7rem;
background: #bf0615;
border-radius: 2rem;
border: 2px solid #170557;
color:white;
}
.overlay-splash {
display: flex;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
background: #15262E;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='100px' width='100px'><text transform='translate(20, 100) rotate(-45)' fill='rgb(66, 163, 212)' font-size='20'>Quiz Off</text></svg>");
z-index: 2;
}
.overlay {
display: none;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
z-index: 2;
}
.nojsoverlay {
display: block;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
background-color: #161891;
z-index: 20;
}
.hidden {
display: none;
}
.open {
display: flex;
}


.correct-flash{
padding: 0.8rem;
background-color: #162dc4;
border: 2px solid #fff;
border-radius: 1.5rem;
color: #fff;
cursor: pointer;
transition: all 0.25s;
width: 100%;
font-family: "Poppins", sans-serif;
font-size: 20px;
text-align: left; 
-webkit-tap-highlight-color: transparent;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
padding-left: 4.5rem;
animation: correct-blink 300ms infinite;
}
@keyframes correct-blink{
0%, 49.9% {
background-color: #162dc4;
}
50%, 99.9% {
background: green;
}
}






.correct-flash-timer{
padding: 0.8rem;
background-color: #162dc4;
border: 2px solid #fff;
border-radius: 1.5rem;
color: #fff;
cursor: pointer;
transition: all 0.25s;
width: 100%;
font-family: "Poppins", sans-serif;
font-size: 20px;
text-align: left; 
-webkit-tap-highlight-color: transparent;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
padding-left: 4rem;
animation: correct-blink-timer 300ms infinite;
}
@keyframes correct-blink-timer{
0%, 49.9% {
background-color: #062708;
}
50%, 99.9% {
background: green;
}
}



.incorrect-flash{
padding: 0.8rem;
background-color: #162dc4;
border: 2px solid #fff;
border-radius: 1.5rem;
color: #fff;
cursor: pointer;
transition: all 0.25s;
width: 100%;
font-family: "Poppins", sans-serif;
font-size: 20px;
text-align: left; 
-webkit-tap-highlight-color: transparent;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
padding-left: 4rem;
animation: incorrect-blink 300ms infinite;
}
@keyframes incorrect-blink{
0%, 49.9% {
background-color: red;
}
50%, 99.9% {
background: red;
}
}
.header-container { 
display: flex; 
justify-content: left; /* Adjusts spacing between headers */ 
align-items: center; /* Vertically centers headers */ 
gap: 6.6rem;
}
.avatarrotate {
transform: rotate(0deg);
animation: rotate 1s 1;
}
.avatarrotate-null {
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
div.scroll-container {
background-color: #333;
overflow: auto;
white-space: nowrap;
padding: 0.5rem;
border-radius: 1rem;
border: 3px solid #000;
}
#avatar-outer-container {
position: absolute;    
}
.avatar-preview {
transform: translate(0px, -10px);
background-color: transparent !important;
background: #6c8ce6;
}
#snackbar {
visibility: hidden;
min-width: 250px;
transform: translateX(-50%);
background-color: #d6c040;
color: #423902;
text-align: center;
border-radius: 1rem;
padding: 16px;
position: fixed;
z-index: 4;
left: 50%;
bottom: 30px;
font-size: 17px;
}
#snackbar.show {
visibility: visible;
-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
animation: fadein 0.5s, fadeout 0.5s 2.5s;
}
@-webkit-keyframes fadein {
from {bottom: 0; opacity: 0;} 
to {bottom: 30px; opacity: 1;}
}
@keyframes fadein {
from {bottom: 0; opacity: 0;}
to {bottom: 30px; opacity: 1;}
}
@-webkit-keyframes fadeout {
from {bottom: 30px; opacity: 1;} 
to {bottom: 0; opacity: 0;}
}
@keyframes fadeout {
from {bottom: 30px; opacity: 1;}
to {bottom: 0; opacity: 0;}
}
.pointsouter
{
background-color: #162dc4;
border-radius: 2rem;
border: 2px solid #fff;
padding-left: 0.8rem;      
padding-right: 0.8rem;     
margin: -0.1rem 0 .8rem; 
color: #05ff2f;
text-align: center;
font-size: 0.9em;
font-family: "Poppins", sans-serif;
font-weight: bold;
}
.confettie-land {
height: 100%;
overflow: hidden;
width: 100%;
position: absolute;
}
.confettie-land::before {
background-image: url('images/congratulations_land.webp');
background-size: 100% auto;
animation: move 100s;
animation-delay: 0s;
animation-duration: 180s;
animation-iteration-count:infinite;
animation-timing-function: linear;
content: '';
position: fixed;
width: 100%;
aspect-ratio: 516 / 88080;
z-index: 8;
background-color: transparent !important;
}
.confettie-port {
height: 100%;
overflow: hidden;
width: 100%;
position: absolute;
}
.confettie-port::before {
background-image: url('images/congratulations_port.webp');
background-size: 100% auto;
animation: move 100s;
animation-delay: 0s;
animation-duration: 180s;
animation-iteration-count:infinite;
animation-timing-function: linear;
content: '';
position: fixed;
width: 100%;
aspect-ratio: 516 / 88080;
z-index: 8;
background-color: transparent !important;
}
@keyframes move {
0% {
transform: translateY(-50%);
}
100% {
transform: translateY(0%);
}
}
.container-wrapper {
position: relative;
}
.btn 
{
padding: 0.8rem;
white-space: nowrap;
overflow: hidden;
background-color: #162dc4;
border: 2px solid #fff;
border-radius: 1.5rem;
color: transparent;
cursor: pointer;
transition: all 0.25s;
width: 100%;
font-family: "Poppins", sans-serif;
font-size: 20px;
text-align: left; 
padding-left: 4rem;
-webkit-tap-highlight-color: transparent;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.buttonaskA-overlay {
display: none;
height: 100%;
width: 0%;
opacity: 50%;
top: 0px;
left: 0px;
position: absolute;
background: #801b80;
border: 2px solid #fff;
border-radius: 1.5rem;
color: white;
align-items: center;
text-align: right;
padding: 0.8rem;
transition: all 0.25s;
padding-left: 5rem;
-webkit-tap-highlight-color: transparent;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.buttonaskB-overlay {
display: none;
height: 100%;
width: 0%;
opacity: 50%;
top: 0px;
left: 0px;
position: absolute;
background: #801b80;
border: 2px solid #fff;
border-radius: 1.5rem;
color: white;
align-items: center;
text-align: right;
padding: 0.8rem;
transition: all 0.25s;
padding-left: 5rem;
-webkit-tap-highlight-color: transparent;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.buttonaskC-overlay {
display: none;
height: 100%;
width: 0%;
opacity: 50%;
top: 0px;
left: 0px;
position: absolute;
background: #801b80;
border: 2px solid #fff;
border-radius: 1.5rem;
color: white;
align-items: center;
text-align: right;
padding: 0.8rem;
transition: all 0.25s;
padding-left: 5rem;
-webkit-tap-highlight-color: transparent;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.custom-br {
line-height: 5px;
opacity: 0;
}
.qnumclass {
opacity: 0;
max-width: 2rem;
min-width: 2rem;
overflow: hidden;
}
.textarea-class
{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;  
padding: 0.7rem 1rem;
margin: 2rem 0;
background-color: #162dc4;
color: #fff;
border: 2px solid #fff;
border-radius: 2rem;
display: block;
margin-left: auto;
margin-right: auto;
font-family: "Poppins", sans-serif;
font-size: 20px;
width: 100%;
text-align: left;
overflow:auto;
resize:none;
}
.button-dummy-class
{
opacity: 1;
overflow: hidden;
visibility: hidden;
width: 0px;
height: 0px;
max-height: 0px;
max-width: 0px;
z-index: -1;
font-family: "Poppins", sans-serif;
font-size: 20px;
text-align: left;
overflow:auto;
resize:none;
}
.padding-div{
height: 2.4rem;
}
.flags-class{
display: none;
box-sizing: border-box;
border: 2px solid #fff;
width: 56%;
height: auto;
margin-left: auto;
margin-right: auto;
margin-top: 2rem;
margin-bottom: 2rem;
}
.outeranswersABC {
position: relative;
}
.outeranswersLetter {
position: absolute;
margin-top: 0px;
background-color: white;
z-index: 1;
width: 48px;
font-family: "Poppins", sans-serif;
font-size: 40px;
text-align: center;
padding: 0.8rem;
border: 2px solid #fff;
border-top-left-radius:  1.5rem;
border-bottom-left-radius:  1.5rem;
cursor: pointer;
transition: all 0.25s;
font-family: "Poppins", sans-serif;
font-size: 20px;
-webkit-tap-highlight-color: transparent;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.row {
  display: flex;
}

/* Create three equal columns that sits next to each other */
.column {
  flex: 50%;
  padding: 5px;
}

.timerImage {
  display: none;
  position: absolute; 
  top: 0px; 
  right: 0px; 
  height: "auto";
  z-index: 1;
}