.multipleChoiceAnswer {
	background-color: transparent;
	display: inline;
}

.multipleChoiceDisclaimer {
	display: none;
	color: red;
	font-size: x-small;
	margin-top: 2em;
}

.question {
	color: darkblue;
	font-size: large;
}

.card {
	background-color: transparent;
	padding: 0px;
	display: block;
	margin-bottom: 1em;
}

.searchHilight {
	display: inline-block;
	background-color: yellow;
}


.card table th {
	padding: .5em;
	border: 1px solid grey;
}

.card table td {
	padding: .5em;
	border: 1px solid grey;
}

.quiz_card table th {
	padding: .2em;
	border: 1px solid grey;
}

.quiz_card table td {
	padding: .2em;
	border: 1px solid grey;
}


.hint {
	border: dashed grey;
	background-color: palegoldenrod;
	padding: .2em;
	/*float: right;*/
}

.audio_button {
	border-radius: 32px;
	width: 32px;
	height: 32px;
	background-image: url(/flashcards/images/play_button_min.svg);
	background-color: whitesmoke;
	background-size: contain;
}

/* this is a dark mode fix-
	when we have a background light hilight color, if we switch to darkmode, the text is very light
	and if we have a dark color text, on a dark background, same. It seems we only have 2 spans -
	the background color and color (bold and italics are not spans).

	So we set span colors for readability on light backgrounds, and then the colors that are
	set (either background or color) on the individual elements will override the defaults below.

	So the spans are always readable on any background */

.question span, .answer span {
	background-color: white;
	color: black;
}

.multiple_choice_button, .true_false_button {
	margin-bottom: 5px;
	white-space: normal;
	text-align: left;
	/* overriding jquery ui sizing */
	/*cant use important in amp*/
	/*font-size: 14px !important;*/
}