.image-container { display: flex; align-items: center; } 
.image-container img { width: 48%; /* Adjust width as needed */ height: auto; max-width: 100px; margin-right: 2%; /* Add space between images */ } 
.image-container img:last-child { margin-right: 0; /* Remove margin from last image */ } /* CSS for inactive buttons */ 
.btn.inactive { background-color: #dddddd; /* Gray background color */ color: #6c757d; /* Text color */ cursor: not-allowed; /* Change cursor to not-allowed */ } 
/* Default style for active buttons */ 
.btn.active { /* Add your desired styles for active buttons here */ background-color: #007bff; /* Blue background color */ color: #fff; /* White text color */ cursor: pointer; /* Change cursor to pointer */ } 
/* Apply default styles for active buttons within .image-container */
 .image-container .btn.active { /* Add your desired styles for active buttons within .image-container */ background-color: #007bff; /* Blue background color */ color: #fff; /* White text color */ cursor: pointer; /* Change cursor to pointer */ }
#gamesection {min-height: 300px;}
#question {}
#question h5 {}
.choicecontainer {display: inline-block;}
.btnchoice {border: 2px outset #e9e9e9;font-weight: bold;margin: 2px;min-width: 50%;}
.btnchoice:hover {background:#fff;}
img.gimg {box-shadow:#ccc 1px 1px 20px;width: 300px;}
button img.gimg {height: auto;}
#nextButton {background: green;color: white;font-weight: bold;}
.progress-bar {background: green !important;}
.progress {background: #c4dbc9 !important;}
/* hr {margin: 3px 0 !important;} */

.gamesinfo {align-items: center;}
.highlight {background-color: yellow;font-weight: bold;}
strong {font-weight: bold;font-size: 1.1em; /* Adjust as needed */}
.voice a.say, .voice a.say2 {    display: inline-block; margin: 25px;box-shadow: 2px 2px 9px gray;border-radius: 10px;padding: 10px;cursor: pointer;}

div.level ul { padding-inline-start: 10px; }
div.level ul li , div.level a{list-style: none;background: #f6f2ed;margin: 2px;display: inline-block;min-width: 31%;border-radius: 18px;text-align: center;font-size: large;}
.audiochoice {cursor: pointer;}
.questiontext {font-size: xx-large;color:#8f6700;font-weight: bold;}
#questionDescription {display: none;}
span.hint {display: none;}
.container { background-color: #fff; padding: 20px; border-radius: 8px; } 
.roadmap { display: flex; justify-content: space-between; margin-top: 20px; } 
.level { width: 100%; margin-top: 20px;  }
.stage { margin-top: 10px; display: flex; flex-direction: column; align-items: center; border: 1px solid #ccc; padding: 10px; border-radius: 8px; }
.description { margin-top: 10px; font-size: 14px; text-align: center; }
.wrong {background: #fcc0c0; padding: 5px;     display: block;}
.correct {background: #ccf1c3;padding: 5px;}
.btnchoice * {pointer-events: none;}
.difficulty-bar {width: 100px;margin: 0 auto;height: 13px;background: linear-gradient(to right, #fffae8, #ffddc1, #6d4929);position: relative;}

.difficulty-indicator { width: 7px; height: 24px; background-color: #cfdecb; position: absolute; top: -6px; border: 2px outset #ffffff; }
.scorei {font-size:xx-small;}
/* cheatsheet */
.lessons.newgames {}
.newgames .alpha_li {height:130px; width:auto;font-size: small;}

.difflevel {text-align: center;}
.difflevel a {
    padding: 4px;
    display: inline-block;
    margin: 2px;
    border-radius: 4px;
}
.gamelevel {}

button.hint {border: 1px solid #1d1d1d;background: #206bbb;border-radius: 50%;width: 30px;height: 30px;font-weight: bold;color: white;}

#checkAnswerButton {    border-color: #437f09; background: linear-gradient(70deg, #528c43, #93ea1e); font-size: large; color: white; padding: 10px 20px; cursor: pointer;}

progress[value] { --color: #0ab60a; /* the progress color */ --background: #e1dcd5; /* the background color */ -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; width: 130px; margin: 0 10px; border-radius: 10em; background: var(--background); }
  progress[value]::-webkit-progress-bar { border-radius: 10em; background: var(--background); }
  progress[value]::-webkit-progress-value { border-radius: 10em; background: var(--color); }
  progress[value]::-moz-progress-bar { border-radius: 10em; background: var(--color);
  }
.getpro {opacity: .57;}

@media only screen and (max-device-width: 800px) {
  h2 {font-size: medium;}
    img.gimg {width: 200px;}
    div.level a{ max-width: 49%; font-size: inherit;}
    .container {padding-top:5px;}
    .gamesinfo {  position: relative;  font-size: x-small;text-transform: uppercase;}
      .hintcol {position: absolute;top:0;        right: 0;
        width: 100px;}
      .btnchoice {width: 169px;}
}