/* CSS: Styling the competition interface */
body777 { font-family: 'Segoe UI', sans-serif; background: #f4f4f9; justify-content: center; padding-top: 50px; }
.quiz-container-opsti { background: #575791; padding: 2rem; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); width: 100%;  }
.quiz-container-braon { background: #5E2E29; padding: 2rem; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); width: 100%;  }
.quiz-container-sivo { background: #5A5D7C; padding: 2rem; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); width: 100%;  }
.quiz-container-zeleno { background: #005D00; padding: 2rem; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); width: 100%;  }
h2 { margin-top: 0; color: yellow; }
.options { list-style: none; padding: 0; }
.options li { background: #395272; border:1px inset white; color: white; margin: 10px 0; padding: 12px; border-radius: 5px; cursor: pointer; transition: 0.3s; }
.options li:hover { background: #A2BCC0; color. black;}
.options li.selected { background: #007bff; color: white; }

.options-braon { list-style: none; padding: 0; }
.options-braon li { background: #AF523E; border:1px inset white; color: white; margin: 10px 0; padding: 12px; border-radius: 5px; cursor: pointer; transition: 0.3s; }
.options-braon li:hover { background: #F07055; color. black;}
.options-braon li.selected { background: #2FBF00; color: white; }

.options-sivo { list-style: none; padding: 0; }
.options-sivo li { background: #395272; border:1px inset white; color: white; margin: 10px 0; padding: 12px; border-radius: 5px; cursor: pointer; transition: 0.3s; }
.options-sivo li:hover { background: #A2BCC0; color. black;}
.options-sivo li.selected { background: #007bff; color: white; }

.options-zeleno { list-style: none; padding: 0; }
.options-zeleno li { background: #7A7A00; border:1px inset white; color: white; margin: 10px 0; padding: 12px; border-radius: 5px; cursor: pointer; transition: 0.3s; }
.options-zeleno li:hover { background: #A2BCC0; color. black;}
.options-zeleno li.selected { background: #00CA00; color: white; }

button { width: 100%; padding: 12px; background: #C5710D; color: white; border:1px outset white; border-radius: 5px; cursor: pointer; font-size: 1rem; margin-top: 15px; }
button:disabled { background: #71849B; border:1px outset white; cursor: not-allowed; }
#result { text-align: center; display: none; }

.brojac-pitanja{ color: white; }
.rezultat { color: yellow; font-size: 15px;}
.koment-rezultat { color: #CCFFFF; font-size: 25px; margin-top: 20px; }
.num-vis-kviz {margin-top: 0px; margin-bottom: 10px; width: 100%; height: 87px; }
.w3-tekst-najava {color: yellow; text-align: center; font-size: 20px; margin-bottom: 7px;}
@media all and (max-width:600px) {.w3-tekst-najava {color: yellow; text-align: center; font-size: 17px; margin-bottom: 7px;}}

#progress-container {
  width: 100%;
  height: 10px;
  background-color: white;
  border-radius: 5px;
  margin-bottom: 20px;
}

#progress-bar {
  height: 100%;
  width: 0%; /* Initial progress */
  background-color: orange;
  border-radius: 5px;
  transition: width 0.3s ease; /* Smooth animation */
}