@charset "utf-8";
@font-face{
	font-family: 'Blinker';
  font-style: normal;
  src: local('Blinker'),
       url('../../../fonts/Blinker.woff');
}

.hyperaudio-transcript {
	position:relative; min-height:200px;
	overflow-y:scroll;
	border-style:dashed;
	border-width: 1px;
	border-color:#999;
	padding: 8px;
	font-family: 'Blinker'; font-size:15pt; line-height: 1.25;
	
	text-align: justify;
	
	overflow-wrap: break-word;
  word-wrap: break-word;
	
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
	
	-webkit-hyphenate-limit-before: 3; /* For Safari */
  -webkit-hyphenate-limit-after: 2; /* For Safari */
  -ms-hyphenate-limit-chars: 6 3 2;
	hyphenate-limit-chars: 6 3 2;
	
	-webkit-hyphenate-limit-lines: 2;
  -webkit-hyphenate-limit-last: always;   
  -webkit-hyphenate-limit-zone: 8%;
	hyphenate-limit-lines: 2;   
  hyphenate-limit-last: always;
  hyphenate-limit-zone: 8%;
	
	-ms-word-break: normal;
  word-break:normal;
	white-space: normal;
}
.hyperaudio-transcript p {
	padding:5px 20px; margin:0;
}
.hyperaudio-transcript p+p {
	margin:10px 0;
}
.hyperaudio-transcript .active{
  background-color: #efefef;
}

.hyperaudio-transcript .active > .active {
  background-color: #00bfff; color: black;
  /*text-decoration:  #00f underline;
 	text-decoration-thickness: 2px;*/
}

.media-containers {
	position:relative; display:flex; flex-direction: column; flex-wrap: nowrap;
	align-items: center; align-content: center; justify-content: center;
	margin: 0 auto 5px; padding:0;
	width:100%;
	/*background-color: TURQUOISE;*/
}
.mcContainer {
	display:block; position: relative;
	width:450px;
	/*border-top: solid 4px #00bfff;*/
}

.fragment {
	position:relative;	display:inline-block;
	font-size:21pt; color:white; background-color: #00bfff;
	text-align: center; font-weight: bold;
	margin: 0; padding:4px 16px;
	border-radius: 8px 8px 0 0;
	font-family: 'Blinker';
}



.v-vlite {
	display: block; position: relative;
	height:100%;
}
.v-controlBar {
	background-color:darkslategray!important; opacity:0.25!important;
}
.v-progressBar {
	background-color:crimson!important;
}



@media screen and (max-width: 980px) {
.hyperaudio-transcript {
	height:300px;
}
}


@media screen and (max-width: 690px) {
.hyperaudio-transcript {
	padding: 8px;
	font-size:16pt; line-height: 1.25;
	height:200px;
}
.hyperaudio-transcript p {
	padding:5px 10px; margin:0;
}
.hyperaudio-transcript p+p {
	margin:10px 0;
}

}