/**
* @stylesheet tts.css Text-to-speech
* @parent ux.features
* When the user activates text-to-speech (TTS), user interface elements are disabled, and a blue outline appears around content that can be read.
*
* Use the <img src="static/img/icon-tts.svg" style="max-height: 1.75em; max-width: 1.75em;"/>__Text-to-speech__ button at the top of the page to see how TTS affects demo content throughout the guide.
* @iframe ../../demos/response-type-mc/response-type-mc-ss.html 475
**/

.stimulus-paragraph p.tts-active,
.stem-paragraph-inner.tts-active,
.stem-paragraph p.tts-active,
.standalone-image.tts-active,
.standalone-image-title.tts-active,
.standalone-image-wrapper figcaption.tts-active,
.footnote-paragraph.tts-active,
.list-unordered li.tts-active,
table.mc tr.tts-active .mc-choice-content,
table.grid tr.tts-active .grid-content,
.alert p.tts-active,
.cta-wrapper p.tts-active,
.char-portrait figcaption p.tts-active,
.table-content.tts-active {
	border-color: #032855 !important;
	cursor: pointer;
	pointer-events: auto;
	user-select: none; }

table.mc tr.tts-active:hover td {
	border-bottom-color: #ccc;
	border-top-color: #ccc; }
table.mc tr.tts-active:hover td:first-of-type {
	border-left-color: #ccc; }
table.mc tr.tts-active:hover td:last-of-type {
	border-right-color: #ccc; }

table.mc tr.mc-choice-selected.tts-active:hover td {
	border-bottom-color: #198CFF;
	border-top-color: #198CFF; }
table.mc tr.mc-choice-selected.tts-active:hover td:first-of-type {
	border-left-color: #198CFF; }
table.mc tr.mc-choice-selected.tts-active:hover td:last-of-type {
	border-right-color: #198CFF; }

table.grid tbody tr.tts-active:hover th,
table.grid tbody tr.tts-active:hover td {
	border-color: #ccc;
	border-style: solid;
}

table.grid tbody tr.tts-active.grid-row-selected th,
table.grid tbody tr.tts-active.grid-row-selected td {
	border-color: #198CFF;
	border-style: double;
}

.standalone-image {
	border: 0.1em solid transparent;
}