/** Default style for listing answers for Multiple Choice one answer and multiple answers**/
.q-answer-options-container {
	display: flex;
	flex-direction: row;
	gap: 10px; /* Space between each option */
	padding: 10px;
	justify-content: flex-start;
	align-items: center;
	margin-bottom: 10px;
}

.q-answer-options-container input {
	margin-right: 10px; /* Space between radio button and label */
	transform: scale(1.2); /* Increase size of radio button */
}

.q-answer-options-container label {
	font-size: 16px;
	color: #333;
	cursor: pointer; /* Makes the label clickable */
	width: 100%;
	text-align: left;
}

.q-answer-options-container:hover {
	background-color: #f5f5f5;
}
/** Listing of naswers for Multiple choice answers One Answer and Multiple Answers as column, row, or smart self organizing in row, column, or stack answers in multiple rows **/
.listing {
	gap: 1rem; /* spacing between items */
}
.listing.column {
  display: flex;
  flex-direction: column;
  
}
.listing.row {
  display: flex;
  flex-direction: row; /* this is default, can be omitted */
  flex-wrap: nowrap; /* prevent wrapping to new line */
  overflow-x: auto; /* enables horizontal scrolling */
  width: 100%; /* take full width of parent */
  box-sizing: border-box;
  gap: 10px; /* optional spacing between items */
}

.listing.row > * {
  flex: 0 0 auto; /* don't grow, don't shrink, auto basis */
  width: auto; /* let content determine width */
  /* or set a fixed width if you prefer, like: width: 300px; */
}.listing.smart {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  
}
.button-style-input {
	margin-bottom: 10px;
	transition: background-color 0.2s, color 0.2s;
	border-radius: 5px;
}
/** Button style input for radio and checkbox **/
.button-style-input input {
  display: none;
  
}

.button-style-input label {
  display: inline-block;
  padding: 0.5em 1em;
  margin: 0.3em;
  border: none; /* No border */
  border-radius: 0.3em;
  background-color: #f0f0f0; /* Light grey background */
  color: #555; /* Darker grey text for contrast */
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
  width: 96%;
}


/* Selected state */
.button-style-input:has(input:checked) {
  background-color: #555 !important;
  color: #fff;
  

}
.button-style-input input:checked + label {
  background-color: #555 !important; /* Dark grey when selected */
  color: #fff; /* White text for contrast */
}