@media screen and (max-width: 767px){
			#content-container .leaderboard_heading {
    padding: inherit;
}
			div#ex1 {
    max-width: 100% !important;
    width: 650px !important;
}
			.leaderboard_heading{
				width: auto !important;
			}
			
}

    @media screen and (max-width: 600px){
			div#ex1 {
    max-width: 100% !important;
    width: 300px !important;
}
			.leaderboard_heading{
				font-size:30px;
				width: auto !important;
			}
			
}

#content-container #ex1 {
		width: 596px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

#content-container .leaderboard_heading{
	width:588px;
  margin-left: auto;
  margin-right: auto;
	
}
#word-details-container {
    position: absolute !important;
    top: 0 !important;
    left: 0;
    width: 100%;
    padding: 30px 0; 
    box-sizing: border-box;
}
div#options-list {
    padding-top: 30px;
}

.answer_option {
    min-width: 100%;
    max-width: 100%;
    overflow-wrap: break-word;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 18px 5px;
    text-transform: capitalize;
    margin-top: 15px;
}

p.question .qs {
    text-align: left;
    letter-spacing: 0px;
  color: #2560B7;
    opacity: 1;
    font-size: 18px !important;
    font-weight: 600;
    font-family: Arial; 
    padding-top: 10px;
}
.container.qu-ans-page {
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: auto !important;
    margin-bottom: auto !important;
    max-width: 100% !important;
}
.col-md-6.image-ports img {
    border: 6px solid #FFFFFF;
    opacity: 1;
    width: 420px;
    height: 250px;
    object-fit: cover;
}
.leaderboard_heading{
    color: #2560B7; 
    font-size: 46px;
    font-weight: 700;
    margin-bottom:20px;
    margin-top:-13px;
  }
  a {
   color: #33446D; 
  }
  
  .photu{
     width: 92.92px !important;
     height: 79.91px !important;
     display: block;
     margin: 0 auto 5px;
   }
  
  .photu1{
     width: 83.92px !important;
     height: 82.91px !important;
     display: block;
     margin: 0 auto 5px;
   }
  
  .leaderboard_button{
   color: white; 
   margin-top:10px; 
   background-color: black; 
   border: 2px solid #2eafeb; 
   margin-right: 10px;
   border-radius: 10px;
  }
  #ex1.modal{
   top: 30%; 
   background-color: black;
   color: white;
   border: 1px solid #2eafeb;
   left: 10%;
   right: 10%;
   width: 80%;
   height: 200px; 
   padding-top: 16px;
   border-radius: 30px;
  }
  .modal-link{
   font-size: 24px;
   height: 48px;
  }
  #mobile-topleft-logo, #large-topleft-logo{
   display: none; 
  }
  .leaderboard-logo{
   display: none;  
  }
  #pop-logo-home{
   width: 715px; 
   display: none;
  }
  .click-play-link{
   font-size: 32px;
   color: #fff; 
   border: 6px solid #ffffff; 
   background-color: #2560B7; 
   font-weight: 600;
   padding: 5px 0px;
   -webkit-font-smoothing: antialiased;
   font-family: 'Poppins', sans-serif;
   display: none;
   max-width: 276px; 
   margin-left: auto; 
   margin-right: auto; 
   margin-bottom: 24px; 
  }
  #seconds{
   font-family: 'Poppins', sans-serif;
   font-size: 48px; 
   min-width: 140px;  
   display: block; 
   margin-left:auto; 
   margin-right: auto; 
   font-weight: 400; 
   margin-top: 10px; 
  }
  .click-category-link{
   color: #33446D; 
   font-size:28px; 
   text-transform:capitalize;
   text-decoration: none;
   font-weight: bold; 
   margin-bottom: 24px; 
   letter-spacing: 1px;
  }
  .click-link{
   font-size: 28px;
   color: #33446D; 
   font-weight: 500;
   padding: 5px 0px;
   -webkit-font-smoothing: antialiased;
   font-family: 'Poppins', sans-serif;
   display: none;
   text-decoration: none;
  }
  .click-signin-link{
   font-size: 28px;
   color: #33446D; 
   text-decoration: none;
   font-weight:300;
   padding: 5px 0px;
   -webkit-font-smoothing: antialiased;
   font-family: 'Poppins', sans-serif;
   display: none;
  }
  .click-play-link:hover,
  .click-link:hover,
  .click-signin-link:hover{
   text-decoration: underline;
  }
  
  #main-content{
   text-align: center;
   display: block;
   margin-left: auto;
   margin-right: auto;
   max-width: 680px; 
  }
  #sign_in_modal{
   background-color: black;
   height:50%;
   top: 25vh;
   padding: 20px;
   width: 40%; 
   margin-left: auto;
   margin-right: auto;
   border-radius: 30px;
   border: 1px solid #2eafeb;
  }
  
  html{
   -webkit-font-smoothing: antialiased;
   font-family: 'Poppins', sans-serif;
  }
  .wait{
   cursor: progress;
  }
  .home-logo:hover{
   cursor: pointer;
  }
  #home-logo{
   display: none; 
  }
  #sub-content{
   width: 94%;
   margin-left: auto;
   margin-right: auto;
   text-align: center;
   -webkit-font-smoothing: antialiased;
   font-family: 'Poppins', sans-serif;
  
  
  }
  #content-container{
   padding: 10px;
   font: 'Montserrat';
   font-size: 20px;
   color: white;
   min-height: 480px;
   -webkit-font-smoothing: antialiased;
   font-family: 'Poppins', sans-serif;
   display:none;
   max-width: 792px; 
   margin-left: auto; 
   margin-right: auto; 
   
  }
  
  
  .choice{
   padding: 10px;
   font: 'Montserrat';
   font-size: 20px;
   color: white; 
   text-transform: uppercase;
   -webkit-font-smoothing: antialiased;
   font-family: 'Poppins', sans-serif;
  }
  .options{
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   width: 100%; 
   margin-left: auto;
   margin-right: auto;
   font-family: 'Poppins', sans-serif;
   text-transform: uppercase;
  }
  .tiny-clock{
   width: 64px; 
   height: 64px; 
  }
  #seconds{
   font-family: 'Helvetica', sans-serif;
   width: 40px;
  }
  .answer_option{
  /*  min-width: 260px; 
   max-width: 260px;  */
   overflow-wrap: break-word;
   background: #2560B7;
   color: white;
   border: 6px solid #fff;
   margin: 5px 10px 0px 0px;
   font-size: 18px;
   font-weight: 300;
   font-family: 'Helvetica', sans-serif;
   display: flex; 
   justify-content: center;
   align-items: center;
   padding: 18px 5px; 
   text-transform: capitalize;
  }
  .answer_option:hover{
   background:white; 
   color: #2560B7;
   border: 6px solid #2560B7; 
  }
  p.question{
   font-size: 21px; /*was 48px before victor asked to reduce */ 
   margin: auto; 
   font-family: 'Arial';
   font-weight: 700; 
   color: #2560B7; 
   -webkit-font-smoothing:antialiased;
   text-align : left;
  }
  #img-right{
   /** width: 40vw; 
   position: fixed;
   top: 25%;
   left: 32.5%;
   margin-top: -50px;
   margin-left: -50px;
   z-index: 10; */ 
   display: none;
  }
  
  #img-wrong, #img-wrong-response {
   /** width: 40vw;
   position: fixed;
   top: 50%;  
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: 10; */ 
   display: none;
  }
  
  .error-message{
   /*text-transform: uppercase;*/ 
   /*font-weight: bold; */ 
   font-family: 'Poppins', sans-serif;
   color: white; 
   font-size: 24px;
   width: 50%; 
   margin-left: auto; 
   margin-right: auto;
   text-align: center;
   margin-bottom: 20px; 
  }
  .answer-container{
   z-index: 10;
   /*position: fixed; */ 
   position: relative; 
   top: -300px; 
   /*left: 50%;
   transform: translate(-50%, -50%); */ 
   max-width: 80%; 
   word-wrap: break-word;
   text-transform: uppercase;
   font-weight: bold;
   font-family: 'Poppins', sans-serif;
   color: white; 
   font-size: 20px; 
  }
  .message-container{
   background: #2BB7B7;
   opacity: 0.85; 
   width: 100vw;
   height: 100vh;
   z-index: 9;
   margin: 0px;
   padding: 0px; 
   position: fixed;
   top: 0;
   left: 0;
   display: none;
   font-family: 'Poppins', sans-serif;
  }
  
  .category-background-container{
   background: #2BB7B7;
   opacity: 1; 
   width: 100vw;
   min-height: 100vh;
   z-index: 9;
   margin: 0px;
   padding: 0px; 
   position: fixed;
   top: 0;
   left: 0;
   display: none;
   font-family: 'Poppins', sans-serif;
   overflow: hidden;
  }
  
  .answer-container{
   display: none;
   width: 100%; 
   max-width: 960px; 
  }
  
  .word-details-container{
   min-height: 400px; 
   width: 80%;
   margin-left: auto; 
   margin-right: auto;  
   position: relative; 
   z-index: 10; 
  }
  
  .next-question-button{
   opacity: 1; 
   background:#2560B7;
   padding: 10px 30px; 
   border: 6px solid white; 
   max-width: 300px; 
   margin-left: auto; 
   margin-right: auto; 
   margin-bottom: 20px; 
  }
  
  .next-question-button span img{
   width: 26px;
   margin-left: 10px; 
   margin-bottom: 6px; 
  }
  #nav-play span img{
    width: 28px;
    margin-left: 22px; 
    margin-bottom: 4px; 
   }
  
  div img.display-image{
   display: block !important; 
  }
  .display-image{
   width: 540px; 
   height: 206px; 
   margin-left: auto; 
   margin-right: auto; 
  }
  .next-question-text{
   font-size: 26px; 
    color: white; 
  }
  
  .full-word-details{
   background-color: #B5ECEC;
   width: 80%; 
   margin-left: auto; 
   margin-right: auto; 
   padding: 16px 20px 14px 10px; 
   min-height: 54px; 
  }
  
  .full-word-details-text 
  {
   color: #2560B7;
   font-size: 20px; 
   font-weight: 700;
   height: 48px; 
   width: 50%; 
   display: block; 
   float: left;  
  }
  .flip
  {
   -webkit-transform: scaleY(-1);
   -moz-transform: scaleY(-1);
   -o-transform: scaleY(-1);
   transform: scaleY(-1) 
  }
  .full-word-detail-arrow{
   height: 26px; 
   width: 50%; 
   display: block; 
   float: left;  
   text-align:right;   
  }
  .full-word-detail-arrow img{
   width: 26px; 
   height: 17px;
  }
  
  .full-word-detail-expanded{
   display: none; 
   background-color:#B5ECEC; 
   min-height: 300px; 
   width: 80%; 
   margin-left: auto; 
   margin-right: auto; 
   padding: 0 10px 10px 10px; 
  }
  
  .img-container{
   background-color: #000;
   opacity: 0.85; 
   width: 100vw;
   height: 100vh;
   z-index: 5;
   margin: 0px;
   padding: 0px; 
   position: fixed;
   top: 0;
   left: 0;
   display: none;
   font-family: 'Poppins', sans-serif;
  }
  
  .category-container1{
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   justify-content: space-around;
   flex-wrap: wrap;
   padding-left: 90px;
   padding-right: 90px;
   padding-bottom: 30px;
  }
  .cat-button{
   background: #2560B7 0% 0% no-repeat padding-box;
   border: 3px solid #ffffff;
   border-radius: 0px; 
   min-width: 100px;
   font-size: 1em;
   font-weight: 700;
   margin-bottom: 10px;
   color: white; 
   width: 240px;
  }
  .cat-button:hover {
   background-color: #2057a3;
   border: 3px solid #FFFFFF;
  }
  .single-category img {
   width: 78px; 
   height: 50px; 
   display: block;
   margin: 0 auto 5px;  
  }
  .single-category.uncommon-category img{
   width: 48px;  
  }
  .single-category.unusual-category img{
   width: 80px; 
  }
  .single-category.fun-category img{
   height: 50px; 
   width: 50px; 
  }
   
  .category-icon{
   clear:both; 
   display:flex; 
   align-items: center;
   width: 50px;
   height: 50px; 
   margin-left: auto; 
   margin-right: auto; 
  }
  .single-category{
   background: #01296485 0% 0% no-repeat padding-box;
   padding-top: 23px;
   border: 3px solid #FFFFFF;
   font: normal normal bold 18px/30px Arial;
   width: 20%;
   height: 124px; 
   max-height: 124px;
   -webkit-font-smoothing: antialiased;
  }
  
  .single-category1{
   background: #01296485 0% 0% no-repeat padding-box;
   padding: 6px 10px;
   border: 6px solid #FFFFFF;
   margin: 10px;
   font: normal normal bold 18px/30px Arial;
   min-width: 171px;
   min-height: 44px; 
   -webkit-font-smoothing: antialiased;
  }
  .single-category:hover{
   cursor:pointer;
  }
  
  .single-category.selected {
   background-color: #ffffff;
   border: 3px solid #2560B7;
   padding-top: 14px;
   height: 124px; 
  }
   /* padding for the category box */ 
   .single-category.fun-category.selected{
    padding-top: 18px; 
   }
   .single-category.unusual-category.selected{
        padding-top: 10px; 
    }
    .single-category.uncommon-category.selected{
        padding-top: 20px; 
    }
   /*padding for the category img */ 
   .single-category.uncommon-category.selected img{
    width: 78px;  
    height: 56px; 
    margin: 0px auto 0px; 
    padding-top: 0px; 
   }
   .single-category.fun-category.selected img{
    width: 70px; 
    margin: 0px auto 0px; 
   }
   div.selected img#word-thirst_icons_Educational{
    height: 74px;
    margin: 0px auto 0px;  
   }
   div.selected #word-thirst_icons_Educational p{
    margin-top: -10px; 
   }
   .selected #educational-category-text{
    margin-top: -10px; 
   }
    div.selected img#word-thirst_icons_Unique{
    margin: 0px auto 0px; 
    width: 100px; 
    height: 66px; 
   }
   div.selected img#word-thirst_icons_Slang{
    margin: 0px auto 0px; 
    width: 90px; 
    height: 62px; 
   }

   .single-category.unusual-category.selected img{
    width: 90px; 
    height: 72px; 
    margin: 0px auto 0px; 
   }
  .single-category.selected img{
    width: 88px; 
    height: 60px; 
   }

  .single-category.selected P {
   color: #2560B7;
  }
  .category-heading{
   text-align: center;
   font: normal normal bold 46px/30px Arial;
   letter-spacing: 0px;
   color: #FFFFFF;
   opacity: 1;
   margin-bottom:46px;
   line-height: 1.2em; 
  }
  .container-droplets{
   display: flex;
   flex-direction: row;
   justify-content: center;
   height: 33px; 
  }
  
  .progress-bar-background{
width: 100%;
   max-width: 600px; 
   height: 43px; 
   margin-left: auto;
   margin-right: auto;
   display: block;
   border-radius: 80px;
   border: 6px solid white;
   margin-bottom: 25px; /*was 54px before victor asked to reduce */ 
  }
  .question-count{
   position: relative; 
   top: -30px; 
   font-weight: 700;
       color: #2560B7;
  }
  
  .leaderboard-display{
   background-color: #B5ECEC;
   color: #000;
   border: 8px solid #FFFFFF;
   min-height: 600px; 
   padding-top: 16px;
   -webkit-font-smoothing: antialiased;
   font-family: 'Poppins', sans-serif;
  }
  #leaderboard-table{
   width: 100%;  
   /*height: 140px; */
   -webkit-font-smoothing: antialiased;
  font-family: 'Poppins', sans-serif;
  }
  #leaderboard-table tr{
   width: 30%;
   text-align: center;
   -webkit-font-smoothing: antialiased;
   font-family: 'Poppins', sans-serif;
  }
  #leaderboard-table tr,  #leaderboard-table td{
   font-size: .9em;
   font-weight: 700; 
   -webkit-font-smoothing: antialiased;
   font-family: 'Poppins', sans-serif;
  }
  #leaderboard-table th{
   width: 30%;
   text-align: center;
   -webkit-font-smoothing: antialiased;
   font-family: 'Poppins', sans-serif;
  }
  #leaderboard-table .title-row{
   font-size: 1.2em; 
   -webkit-font-smoothing: antialiased;
   font-family: 'Poppins', sans-serif;
   background-color: white; 
   color: #2560B7;
   width: 94%;
   display: block; 
   clear: both; 
   height: 55px; 
   margin-left: auto; 
   margin-right: auto; 
   padding: 10px; 
   margin-bottom: 10px; 
  }
  #leaderboard-table .title-row .player-name{
   text-align: left; 
  }
  #leaderboard-table span.title{
   width: 33%; 
   display: block; 
   float: left; 
   height: 55px; 
   font: normal normal bold 24px/52px Arial;
   margin-top: -6px;
  }
  #leaderboard-table .table-row{
   font-size: 1.2em; 
   -webkit-font-smoothing: antialiased;
   font-family: 'Poppins', sans-serif;
   background-color: #89D9D9; 
   color: #000;
   width: 94%;
   display: block; 
   clear: both; 
   margin-left: auto; 
   margin-right: auto; 
   margin-bottom: 10px; 
   padding:10px; 
   height: 55px; 
  }
  #leaderboard-table .table-data{
   width: 33%; 
   display: block; 
   float: left; 
   height: 55px;
   font: normal normal normal 22px / 63px Arial;
   letter-spacing: 0px;
   color: #000000;
   opacity: 1;
   margin-top: -13px;
  }
  #leaderboard-table .title.left-col{
   text-align: left; 
   padding-left: 20px; 
  }
  #leaderboard-table .table-data.left-rank{
   text-align: left; 
   padding-left: 40px; 
  }
  #leaderboard-table .title.right-col{
   text-align: right; 
   padding-right: 20px; 
  }
  #leaderboard-table .table-data.right-score{
   text-align: right; 
   padding-right: 40px; 
  }
  
  #leaderboard-table .table-data.player-score{
   text-align: left; 
  }
  .droplet{
   background-color: #A9E3E3; 
   margin: 0;
   width: 639px !important;
   height: 31px;
  }
  .current{
   background-color: #2560B7;
   animation: blinker 2s infinite;
   animation-direction: alternate;
  }
  #drop1{
   border-radius: 80px 0px 0px 80px;   
  }
  #drop10{
   border-radius: 0px 80px 80px 0px; 
  }
  @keyframes blinker {
   50% {
   opacity: 0;
   }
  }
  
  #ex1.modal{
   top: 30%; 
   background-color: black;
   color: white;
   border: 1px solid #2eafeb;
   left: 10%;
   right: 10%;
   width: 80%;
   height: 200px; 
   padding-top: 16px;
   border-radius: 30px;
  }
  .modal-link{
   font-size: 24px;
   height: 48px;
   color: #000000;
   background: #89D9D9 0% 0% no-repeat padding-box !important;
   padding-top: 6px;
  }
  .modal-dialog{
   width: 80% !important;
   margin-left: auto !important;
   margin-right: auto !important;
   height: auto;
   top: 30vh;
   padding-top: 0px; 
  }
  
  .modal-link:hover{
   color: white;
  }
  .modal-link{
   margin: 18px 0px; 
  
  }
  .modal-body{
   background: #B5ECEC 0% 0% no-repeat padding-box;
   color: #000000 !important;
   text-align:center;
   width: 100%;
   height: 100%;
   margin-left:auto;
   margin-right:auto;
   border:8px solid #FFFFFF !important;
   font-weight:700;
  }
  .modal-content{
   background: #2560B7;
   border-radius: 35px;
   width: 100%;
   margin-left: auto;
   margin-right: auto; 
  }
  #registration-form{
   width: 94%; 
   margin-left: auto; 
   margin-right: auto; 
  }
  .modal-title{
      color: #2560B7;
      font: normal normal bold 1.2em Arial;
  }
  .form-field-single-modal-signup{
   display: flex;
   justify-content: center;
   margin-bottom: 10px; 
   background: #89D9D9 0% 0% no-repeat padding-box;
   padding: 10px;
  }
  .form-field-single-modal-signup-label{
   font-size: .6em;
   width: 20%;
   margin-top: 7px;
   margin-right: 11px;
   text-align: left;
   letter-spacing: 0px;
   color: #000000;
   opacity: 1;
  }
  input.form-field-single-modal-signup-input{
   background-color: #FFFFFF 0% 0% no-repeat padding-box;
   color: black;
   font-size: .7em;
   width: 60%;
   height: 33px; 
   border-radius: 0px !important;
  }
  input.form-field-single-modal-signup-input:focus{
   background-color: white;
   color: black;
   border-radius: 0px !important;
  }
  .leaderboard_options{
     background-color: #2560B7;
     border: 2px solid #FFFFFF;
     border-radius: 0px;
     width: 33%;
     font-size: 15px;
     font-weight: 700;
     margin-bottom: 10px;
     border-color: 6px solid white;
     color: white;
     padding: 10px 0px;
  }
  
  .play-options{
     width: 94%;
     margin-left: auto;
     margin-right: auto;
     display: flex;
     gap: 10px;
  }
  
  .word-spelling
  {
   font-size:40px; 
   padding: 10px 10px 10px 0px; 
   min-width: 50px;
   max-width: 60%; 
   display: block; 
   float: left; 
   line-height: 1; 
  }
  
  .word-pronunciation
  {
   width: 30%; 
   display: block; 
   float: left; 
   padding: 24px 5px; 
  }
  .word-category
  {
   width: 138px; 
   display: block; 
   float: left; 
   padding: 24px 5px; 
  }
  
  .word-category,
  .word-part-of-speech-title,
  .word-origin-title,
  .word-synonyms-title,
  .word-antonyms-title,
  .word-definition-title,
  .word-example-title
  {
   font-weight: 900; 
   font-size: 14px; 
   font-family: "Arimo", sans-serif; 
  }
  .pos 
  {
   padding-left: 10px; 
   font-family: "Arimo", sans-serif;
   line-height: 1.6; 
  }
  .word-synonyms, 
  .word-antonyms, 
  .word-definition, 
  .word-example
  {
   padding-left: 22px; 
   font-family: "Arimo", sans-serif;
  }
  .background-section{
   background-color: #89D9D9;
   padding-bottom: 26px;  
   color: #000; 
  }
  .detail-header
  {
   border-bottom: 1px solid black;
   width: 96%;
   margin-left: 2%; 
   margin-right: 2%;  
   display: inline-block; 
   height: 60px;  
   font-family: "Arimo", sans-serif;
  }
  .word-section{
   padding-left: 20px; 
   margin-bottom: 20px; 
  }
  
  .word-section p
  {
   margin: 0px 0px 0px 2px; 
  }
  .word-section p.detail-header-element
  {
   margin-top: auto; 
   margin-bottom: auto;  
  }
  .word-category
  {
   text-align:right; 
  }
  .category-background-container div.category-background-wrapper
  {
   margin-left: auto; 
   margin-right: auto;   
  }
   
/* Akanksha's CSS */
div#firebase-signout {
    font-size: 16px;
	color:#0C51BA;
	font-family: 'Poppins', sans-serif;
    font-weight: 600;
}
div#nav-category {
    letter-spacing: normal;
}
div#nav-user-profile {
    font-size: 16px;
	color:#0C51BA;
	font-family: 'Poppins', sans-serif;
    font-weight: 600;
}
img#pop-logo-home {
    width: 500px !important;
}
div#oops-word {
    font-size: 75px;
    color: #0C52BA;
    font-weight: bold;
    -webkit-font-smoothing: antialiased;
    font-family: 'Poppins', sans-serif;
    text-decoration: none;
}
div#page-not-found {
    font-size: 25px;
    font-weight: bold;
    color: #20315D !important;
}
div#checking-pages {
    letter-spacing: 0px;
    color: #20315D;
    text-transform: uppercase;
}
div#checking-pages {
    font-size: 16px;
    font-weight: 550;
}
@media screen and (max-width: 767px) {
    .full-word-detail-expanded {
    width: 92% !important;
}
    div#full-word-details {
    width: 92%;
}
    div#word-details-container {
    position: relative;
  /*  top: -670px !important; */
}
    p.question .qs {
    font-size: 13px !important;
    font-family: Arial;
    }
    .answer-lists {
    margin-top: 20px;
}
    .answer_option {
    margin: 0px 0px 10px 0px;
}
    div#options-list {
    padding: inherit;
}
    div#options-list {
    padding-bottom: inherit;
}
    div#options-list .col-md-6 {
    width: 100%;
}
    .col-md-6.image-ports img {
    width: 100%;
    height: 100%;
}
    .progress-bar-background {
    width: 100% !important;
}
        .fl-node-e083jruod4wl.fl-module > .fl-module-content {
        margin-bottom: 65px;
    }
    div#content-container {
    max-width: 100% !important;
}
div#oops-word {
    font-size: 50px;
    color: #0C52BA;
    font-weight: bold;
    -webkit-font-smoothing: antialiased;
    font-family: 'Poppins', sans-serif;
    text-decoration: none;
}
}
/* Akanksha's CSS */
  
  @media screen and (min-width: 820px){
   .modal-dialog{
       width: 80% !important;
       height: auto;
       margin-left: auto;
       margin-right: auto;
   }
   .word-details-container{
       top: -400px; 
   }
   .category-background-container div.category-background-wrapper
   {
       /*max-width: 770px; 
       max-height: 600px;*/    
       margin-top: 100px; 
   }
   .category-background-wrapper{
     z-index: 10; 
     position: fixed; 
     top: 18vh; 
     left: 50%;
     transform: translate(-50%, 0);
   }
   .category-container{
        width: 760px; 
        display: flex; 
        flex-wrap: wrap; 
        justify-content: center;
        margin-bottom: 14px; 
   }
   .single-category{
        min-width: 146px; 
        max-width: 172px; 
        min-height: 44px; 
        margin: 10px; 
    }
    #hamburger-menu-desktop{
         position: relative;
         top: 20px;
         /*right: 68px;*/
        /* z-index: 11; */
     }
  
  }
  
  @media screen and (max-width: 820px){
   .detail-header
   {
       min-height: 116px; 
   }
   .word-details-container{
       top: -50vh; 
   }
   .word-section.detail-header
   {
       grid-template-columns: 1fr;
       gap: 8px; 
   }
   .word-category
   {
       text-align: left; 
       width: 100%; 
       display: block; 
       clear:both; 
       padding: 4px; 
   }
   .word-spelling
   {
       font-size: 30px; 
       padding: 0px; 
       min-width: 100%; 
       max-width: 100%; 
       display: block; 
       clear:both; 
   }
   .word-pronunciation{
       width: 100%; 
       display: block; 
       clear:both;
       padding: 4px;   
   }
   .word-section
   {
       margin-left: 10px; 
       margin-right: 10px;
       padding-left: 4px;  
   }
   .full-word-details, .full-word-detail-expanded
   {
       width: 100%; 
   }
   .full-word-details-text
   {
       font-size: 16px; 
       width: 65%; 
   }
   .full-word-detail-arrow
   {
       width: 35%; 
   }
   .modal-dialog{
       width: 80% !important;
       height: auto;
       margin-left: auto !important;
       margin-right: auto !important;
   }
   .progress-bar-background{
      width: 84vw; 
   }
   .droplet{
       width: 8.4vw; 
   }
   .form-field-single-modal-signup-label{
       font-size: .6em;
       width: 40%;
       padding:10px 0px;
       text-align: left; 
   }
   input.form-field-single-modal-signup-input{
       background-color: white;
       color: black;
       font-size: .8em;
       width: 50%;
   }
   input.form-field-single-modal-signup-input::placeholder{
       font-size: .63em; 
   }
   .regi-form-modal p{
       width: 80%; 
       margin-left: auto; 
       margin-right: auto; 
   }
   .regi-form-modal button{
       background-color: #113974 !important; 
       border: 1px solid white !important;
   }
   .next-question-button{
       padding: 8px 46px; 
       max-width: 300px; 
       height: 55px; 
   }
   .next-question-text{
       font-size: 20px;
   }
   .category-background-container
   {
       padding: 10%; 
   }
   .category-background-container div.category-background-wrapper
   {
       /* max-width: 845px; 
       max-height: 620px;  */  
       margin-top: 40px;  
   }
   .single-category.fun-category img{
       height: 23px; 
       width: 25px; 
   }
   .single-category.uncommon-category img{
       height: 27px; 
       width: 23px; 
   }
   .single-category.fun-category img{
        height: 23px; 
        width: 25px; 
    }   
   .category-heading{
       text-align: center;
       font: normal normal bold 30px Arial;
       letter-spacing: 0px;
       color: #FFFFFF;
       opacity: 1;
       margin-bottom: 10px;
       line-height: 1em; 
   }
   .single-category{
       margin: 0px 0px 10px 0px; 
   }
   /* second set of rules */ 
   .display-image
   {
       width: 300px; 
       height: 125px; 
   }
   .category-container 
   {
        display: flex;
        padding-left:0px;
        padding-right:0px;
        width: 94%; 
        margin-left: auto; 
        margin-right: auto; 
        flex-wrap: wrap; 
        margin-bottom: 14px; 
   }
  
   .single-category
   {
        display: flex;
        align-items: center;
        background: #01296485;
        border: 3px solid #FFFFFF;
        padding: 5px 15px;
        margin: 0px 0px 10px 0px; 
        font: normal normal bold 18px/30px Arial;
        width: 100%;
        height: 48px; 
        -webkit-font-smoothing: antialiased;
   }
   
   .single-category img {
       width: 25px;
       height: 25px;
       margin-right: 10px;
       margin-left: 5px;
       padding-top:5px;
   }

   .single-category.unusual-category img{
    width: 25px; 
   }   
   .photu {
       width: 29px !important;
       height: 29px  !important;
       margin-right: 10px;
       margin-left: 5px;
       padding-top:5px;
   }
   
   .photu1 {
       width: 29px !important;
       height: 29px  !important;
       margin-right: 10px;
       margin-left: 5px;
       padding-top:5px;
   }
  
   .single-category p {
       flex: 1;
       font-size: 16px;
       color: white;
       text-align: left;
       margin: 0; 
   }
  
   .cat-button {
       background: #2560B7;
       border: 3px solid #FFFFFF;
       border-radius: 0px;
       padding: 10px 20px;
       font-size: 16px;
       font-weight: 700;
       color: white;
       cursor: pointer;
       width: 94%;
   }
  
   .cat-button:hover {
       background-color: #2057a3;
       border: 4px solid #FFFFFF;
   }
   .play-options{
       padding-left: 0px;
       padding-right: 0px;
       display: grid;
       
   }
   .category-background-wrapper{
     z-index: 10; 
     position: fixed; 
     top: 16vh; 
     left: 50%;
     transform: translate(-50%, 0);
     width: 84%;
   }
   .selected #educational-category-text{
    margin-top: 0px; 
    }
   /*.single-category.unusual-category.selected{
    padding-top: 10px; 
  }*/ 
    /*padding for the category img */ 
    div.single-category.uncommon-category.selected img{
        width: 27px;  
        height: 23px; 
        padding-top: 0px; 
        margin-right: 10px;
        margin-left: 5px; 
    }
    div.single-category.unusual-category.selected img{
        width: 25px; 
        height: 23px;
        margin-right: 10px;
        margin-left: 5px; 
    }
    div.single-category.fun-category.selected img{
        height: 25px; 
        width: 30px; 
        margin-right: 10px; 
        margin-left: 5px; 
   }
   div.single-category.selected img{
        width: 25px; 
        height: 25px; 
        margin-right: 10px; 
        margin-left: 5px; 
   }
    /* padding for the category box */ 
    .single-category.fun-category.selected{
        padding-top:5px;
    }
    .single-category.unusual-category.selected{
        padding-top: 5px; 
    }
    .single-category.uncommon-category.selected{
        padding-top: 5px; 
    }
    div.selected img#word-thirst_icons_Educational{
        width: 25px; 
        height: 25px;
        margin: 0px 10px 0px 5px; 
    }
    div.selected img#word-thirst_icons_Unique{
        margin: 0px 10px 0px 5px; 
        width: 24px; 
        height: 20px; 
    }
    div.selected img#word-thirst_icons_Slang{
    margin: 0px 10px 0px 5px; 
    width: 24px; 
    height: 24px; 
    }

    .single-category.unusual-category.selected img{
    width: 30px; 
    height: 30px; 
    margin: 0px auto 0px; 
    }
    div.single-category.selected img{
    width: 24px; 
    height: 24px; 
    padding-top: 0px; 
    margin-top: -5px; 
    }
    .single-category.selected{
    height: 48px; 
    padding: 5px 15px; 
    }
  }
  
  @media screen and (max-width: 600px) {
   .form-field-single-modal-signup-label 
   {
       font-size: 10px;
       width: 36%;
       padding: 10px 0px;
       text-align: left;
       margin-top: 0px;
       margin-bottom: -10px;
   }
   .word-details-container{
       top: -65vh; 
   }
   p.question{
       font-size:22px;
       margin: 0px 5px 10px 5px;
   }
   .answer_option{
       width: 88px;
       font-size: 18px;
       text-transform: capitalize;
       padding: 12px 14px; 
       vertical-align: middle;
       }
   #img-right{
       display: none;
   }
   #img-wrong, #img-wrong-response{
       display: none;
   }
   .play-options {
     padding-left: 0px;
     padding-right: 0px;
     display: grid;   
     gap: 0;  
   }
   .leaderboard_options{
     margin-bottom: 4px; 
   }
   .error-message{ 
       font-weight: 300;
       text-align: center;
       color: white; 
       margin-left: auto; 
       margin-right: auto; 
       width: 80%; 
   }
   .message-container{
       opacity: .85;
   }
   .single-category{
       justify-content: space-around;
       font-size: .6em;
       margin: 0px 0px 10px 0px;
       width: 100%; 
       max-height: 40px; 
       background: #01296485 0% 0% no-repeat padding-box;
   }
   #leaderboard-table tr,  #leaderboard-table td{
       font-size: .8em;
       font-weight: 700; 
       -webkit-font-smoothing: antialiased;
       font-family: 'Poppins', sans-serif;
   }
   #leaderboard-table th{
       font-size: 1em; 
       -webkit-font-smoothing: antialiased;
       font-family: 'Poppins', sans-serif;
   }
   #leaderboard-table .table-data{
       width: 33%; 
       display: block; 
       float: left; 
       height: 44px;
       font-size: 15px; 
       font: normal normal normal 16px / 36px Arial;
       margin-top: -6px;
       padding-left: 2px;
       padding-right: 0px;
       padding-top: 3px;
   }
   #leaderboard-table span.title{
       width: 33%; 
       display: block; 
       float: left; 
       height: 44px;
       font-size: 11px; 
       margin-top: -6px;
   }
   #leaderboard-table .table-row, #leaderboard-table .title-row{
       height: 44px; 
       padding-left: 2px;
       padding-right: 0px;
       padding-top: 3px;
   }
   .next-question-button-expanded, .next-question-button{
       width: 92%; 
       margin-left: auto; 
       margin-right: auto;
       text-align:center; 
       padding:10px; 
   }
   .next-question-text{
       font-size: 14px; 
   }
   .next-question-button span img{
       width: 22px;
       margin-left: 4px; 
       margin-bottom: 0px; 
   }
   .category-background-container
   {
       padding: 5% 5%; 
   }
   .category-heading{
       text-align: center;
       font: normal normal bold 30px Arial;
       letter-spacing: 0px;
       color: #FFFFFF;
       opacity: 1;
       margin-bottom: 10px;
       line-height: 1em; 
   }
   .category-container{
    width: 94%; 
    margin-left: auto; 
    margin-right: auto; 
   }
   #leaderboard-table .table-data.left-rank{
     padding-left: 32px; 
   }
   #leaderboard-table .table-data.right-score{
     padding-right: 32px; 
   }
  }
  @media screen and (max-width: 768px){
   html body #large-topleft-logo div div div img, html body .large-topleft-logo{
     display: none; 
   }
  }
  @media screen and (max-width: 480px){
   html body #large-topleft-logo div div div img, html body .large-topleft-logo{
     display: none; 
   }
  }

    /* burger menu fix */
  @media screen and (max-width: 768px){
    .fl-node-qtpxbo0elnwd.fl-row-full-height > .fl-row-content-wrap, .fl-node-qtpxbo0elnwd.fl-row-custom-height > .fl-row-content-wrap{
        padding-bottom: 16vh !important;
        min-height: 0vh;
    }
  }
  
   @media screen and (max-width: 768px){
       .fl-node-hrs54v7c92zm .fl-photo-img, .fl-node-hrs54v7c92zm .fl-photo-content{
           
        margin-bottom:-50px;  
        margin-top: -15px;
       }
       
   }
  @media screen and (max-width: 768px){
        .fl-node-5cyi0q6ndp3k{
       margin-top:-8px;
   }
   }
    @media screen and (max-width: 768px){
         #mobile-topleft-logo, #large-topleft-logo{
       margin-top: -41px;
   }
   }
     
  @media only screen and (max-width: 434px) {
  .modal-title {
   font-size: 17px;
  
  }
  
  .leaderboard_heading{
     font-size: 22px;
  }
  }
  
  @media only screen and (max-width: 338px) {
  .modal-title {
   font-size: 16px;
  
  }
  }
  
  
  @media only screen and (max-width: 434px) {
   .play-options {
     padding-left: 0px;
     padding-right: 0px;
     display: grid;   
     gap: 0;  
   }
  .play-options .button{
     width: calc(100% - 20px);
  }
  
  }
  @media only screen and (max-width: 500px) {
   #leaderboard-table .table-data{
       width: 33%; 
       display: block; 
       float: left; 
       height: 44px;
       font-size:14px; 
       font-family: Arial;
       margin-top: -2px;
       padding-left: 2px;
       padding-right: 0px;
       padding-top: 3px;
       font-weight:300;
   }
 
   .error-message{
      font-size: 16px; 
   }
   .click-play-link, .click-category-link, .click-signin-link{
      font-size: 24px; 
   }
   .click-play-link{
  
   }
   .click-category-link{
  
   }
   .word-details-container{
     top: -65vh; 
  }
  }
  
  @media only screen and (max-width: 414px) {
   #leaderboard-table .table-data{
       font-size: 11px;
       font-weight:300;
  
   }
 
  }
  @media only screen and (max-width: 383px) {
   #leaderboard-table .table-data{
       font-size: 10px;
       font-weight:300;
  
   }
 
  }
  
  @media (max-width: 820px) {
     .fl-page button, .fl-page input[type=button], .fl-page input[type=submit] {
         font-size: 16px;
         line-height: 1.2;
         width: auto;
     }
     .button-container{
         display: grid;
         width: 94%;
         margin-left: auto;
         margin-right: auto;
     }
     #hamburger-menu-mobile{
         position: sticky; 
         top: 0px;
         right: 18px;
       /*  z-index: 11; */
     }
  }
  
@media only screen and (max-width: 768px) {

    /* New CSS for #hamburger-menu-mobile-cat */
    #hamburger-menu-mobile-cat {
        position: fixed;
        top: 10px;
        right: 10px;
        z-index: 11;
    }
}


@media only screen and (max-width: 500px) {
#hamburger-menu-mobile{
       position: sticky;
	     top: 20px;
		right: 20px;

	}
}
@media only screen and (max-width: 768px) {
    .options {
            padding-bottom: 143px;
    }
      .display-image{
        width: 300px;
        height: auto;
      }
}

@media (max-width: 768px) {
    .fl-node-79ze2vmjxc51.fl-col > .fl-col-content {
        margin-top: 0px;
    }
}


#image-gallery-container {
    display: flex;
    gap: 10px;
    justify-content: space-between;
    margin-top: 20px;
}

.image-gallery-item {
    width: 100%;
    height: 200px;
    background-color: #f0f0f0; /* Placeholder background */
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.image-gallery-item.image-loaded {
    transform: scale(1.05);
}

.image-gallery-item:hover {
    transform: scale(1.1);
}

.rt-loader-spinner {
    width: 200px; /* Adjust size as needed */
    height: 200px;
    background: url('/wp-content/uploads/sites/694/2025/02/Animation-1739374166722-1.gif') no-repeat center center;
    background-size: contain;
}


/* Issue for the leaderboard content */
span.table-data.player-score {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

span.table-data.player-score {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}