/* Glossary Title */

.glossary-title {
/*	-webkit-transition: text-shadow 0.3s ease-in-out;
	transition: text-shadow 0.3s ease-in-out;*/
	-webkit-transition: color 0.8s ease-in-out;
	transition: color 0.8s ease-in-out;
}
.glossary-title.active {
	/*text-shadow: 2px 0px 7px #FF8080; */
	color: #FF0004;
}
.glossary-wrapper {
	position: relative;
	width: 100%;
	height: 30px;
	z-index: 999;
	color: #FFF;
	text-align: center;
	font-size: 22px;
	font-weight: bold;
	padding-top: 10px;
	padding-bottom: 1px;
	text-shadow: -1px 1px 0 #000,
		      1px 1px 0 #000,
		      1px -1px 0 #000;
		     -1px -1px 0 #000;
}
.video-overlay {
    position: absolute;
    left: 50%;
    top: 15px;
    margin: 0;
    padding: 0px 0px;
    font-size: 20px;
    font-weight: bold;
    white-space: nowrap;
    font-family: Helvetica;
    color: #FFF;
    transform: translate(-50%, -50%);
    text-shadow: -1px 1px 0 #000,
		  1px 1px 0 #000,
		  1px -1px 0 #000;
		 -1px -1px 0 #000;
}

/* Glossary Title - Fade Effect */

.outline-glossary-title {
	opacity: 0;
	-webkit-transition: opacity .50s ease-in-out;
	transition: opacity .50s ease-in-out;
}
.outline-glossary-title.active {
	opacity: 1;
}

/* Glossary Fadeout Effect (specific to index page with ytimer JS) */

div.caption {
	opacity: 1;
	-webkit-transition: opacity .50s ease-in-out;
	transition: opacity .50s ease-in-out;
	transition-delay: 1s;
}
div.caption.fadeout {
	opacity: 0;
}
.source-look {
	font-size: 10px;
	margin-top: 10px;
	padding-bottom: 10px;
}

/* Hides commentary area from Homepage / Article Page */
.hidden-commentary {
	display:none;	
}

/* Responsive Player Support */

.video-wrapper {
	max-width: 479px;
	height: auto;
	margin: 0 auto;
	-webkit-transition: box-shadow 0.3s ease-in-out;
	transition: box-shadow 0.3s ease-in-out;
}
.video-wrapper2 {
	max-width: 479px;
	height: auto;
	padding-top: 15px;
	margin: 0 auto;
	-webkit-transition: box-shadow 0.3s ease-in-out;
	transition: box-shadow 0.3s ease-in-out;
}
.video-wrapper3 {
	max-width: 679px;
	height: auto;
	padding-top: 15px;
	margin: 0 auto;
	-webkit-transition: box-shadow 0.3s ease-in-out;
	transition: box-shadow 0.3s ease-in-out;
}

/* category / search resul */

.video-wrapper.small {
	width: 100%;
	height: 230px;
	margin: 0 auto;
	-webkit-transition: box-shadow 0.3s ease-in-out;
	transition: box-shadow 0.3s ease-in-out;
}
.video-wrapper.glossry {
	width: 100%;
	height: 245px;
	margin: 0 auto;
}
.video-wrapper.active {
	box-shadow: 4px 4px 36px #FF4242;
}
.video-wrapper.multiple.active {
	box-shadow: 4px 4px 36px #FF4242;
}
iframe.multiple {
	width: 100%;
	height: 220px;
}
.video-frame {
	position: relative;
	box-shadow: 4px 4px 5px #000;
	min-height: 210px;
}
.video-frame .ratio {
	display: block;
	width: 100%;
	height: auto;
}
.video-frame iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-width: 0px;
}
.inner-container iframe, iframe.multiple {
	width: 100%;
	height: 230px;
	box-shadow: 4px 4px 5px #000;
}


/* Comment Captions */

div.caption.outline {
	width: 91%;
	margin: 0 auto;
	margin-top: 0px;
	margin-bottom: 10px;
	padding-right: 10px;
	padding: 5px;
	border: thin solid #B1AAAA;
	border-radius: 7px;
	background-color: #FFF;
}
.controller {
	margin: 0 auto;
	margin-top: 15px;
	margin-bottom: 10px;
}
.prev-next {
	display: block;
    margin: 0 auto;
}
img.opacity {
	opacity: 0.75;
	filter: alpha(opacity=75);
}
img.opacity:hover {
	opacity: 1;
	filter: alpha(opacity=100);
}
.img-results {
  	display: block;
  	width: 100%;
  	height: auto;
}

div.cn {
    	position: relative;
    	padding-bottom: 100px;
 	margin-bottom: 20px;
}

div.inner {
    	position: absolute;
    	top: 50%; left: 50%;
    	transform: translate(-50%,-50%);
    	padding: 2rem;
}


/* Accordian */

.accordion-content {
	display: none;
	background-color: #FFFFCC;
}
.accordion-content.default {
	display: block;
}
.toggle-icon {
	cursor: pointer;
	margin: 0;
}
a.toggle-icon {
	font-weight: bold;
	color: #000;
}

/* Hard Data */

.duration-time {
	font-weight: bold;
	color: #4D5087;
}

#hard-data {
	background-color: #F0F0F0;
	padding-left: 10px;
	padding-right: 10px;	
	font-size: 12px;
}
.hard-data .category {
	margin-top: 13px;
	margin-bottom: 5px;
	font-size: 110%;
}
.hard-data .occurence {
	border-top: solid 2px #DBDBDB;
	border-bottom: solid 2px #DBDBDB;
	vertical-align: text-top;
}
.hard-data .occurence-number {
	font-size: 24px;
	font-weight: bold;
	color: #4D5087;
}
.hard-data .summary-time {
	font-weight: bold;
	color: #4D5087;
}
.hard-data .percentage {
  	display: inline;
  	padding: .2em .8em .2em;
  	margin-left: 5px;
  	font-size: 90%;
  	font-weight: bold;
  	line-height: 1;
  	color: #fff;
  	text-align: center;
  	white-space: nowrap;
  	vertical-align: middle;
  	border-radius: .25em;
  	background-color: #78ACDC;
}
hr.hr {
	border-top: solid 1px #DBDBDB;
	margin: 3px 0;
}
.hard-data-speaker-icon {
}

/* References Section */

.reference-row {
	margin-top: 10px;
}
.reference-box {
	background-color: #DFF7FC;
}
.vertical-align {
	display: flex;
	align-items: center;
}
.outline-look {
	width: 100%;
	margin-left: 0px;
	margin-right: 0%;
	padding-top: 5px;
	padding-bottom: 5px;
	margin-top: 15px;
	margin-bottom: 15px;
	text-align: center;
	font-weight: bold;
	font-size: 16px;
	border: thin solid #B1AAAA;
	border-radius: 7px;
	background-color: #FFF;
	height: auto;
}

.pub-time {
	font-family: Myriad Pro, helvetica, sans-serif;
    color: gray;
    font-size: small;
}


/* Pagination */

div.paging {
	padding: 3px;
	margin: 3px;
}
div.paging a {
	padding: 8px 12px;
	border-right: 1px solid #DDD;
	border-top: 1px solid #DDD;
	border-bottom: 1px solid #DDD;
	text-decoration: none; /* no underline */
}
div.paging a:hover, div.paging a:active {
	color: #000;
	background-color: #ddd;
}
div.paging span.current {
	padding: 8px 12px;
	border-right: 1px solid #337ab7;
	border-top: 1px solid #337ab7;
	border-bottom: 1px solid #337ab7;
	background-color: #337ab7;
	color: #FFF;
}
div.paging span.disabled {
	padding: 8px 12px;
	border-right: 1px solid #DDD;
	border-top: 1px solid #DDD;
	border-bottom: 1px solid #DDD;
	color: #777;
}
div.paging a:first-child {
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
	border-right: 1px solid #DDD;
	border-top: 1px solid #DDD;
	border-bottom: 1px solid #DDD;
	border-left: 1px solid #DDD;
}
div.paging a:last-child {
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
	border-right: 1px solid #DDD;
	border-top: 1px solid #DDD;
	border-bottom: 1px solid #DDD;
}
div.paging span:first-child {
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
	border-right: 1px solid #DDD;
	border-top: 1px solid #DDD;
	border-bottom: 1px solid #DDD;
	border-left: 1px solid #DDD;
}
div.paging span:last-child {
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
	border-right: 1px solid #DDD;
	border-top: 1px solid #DDD;
	border-bottom: 1px solid #DDD;
}
.caption-text {
	font-family: Georgia;
	font-size: 16px;
	width: 100%;
	font-style: italic;
	margin-top: 12px;
	margin-bottom: 0px;
	letter-spacing: normal;
	line-height: 140%;
	color: #60605b;
	display: inline-block;
}
p.blocktext {
    	margin-left: auto;
    	margin-right: auto;
    	width: 98%;
    	text-align: center; 
    	margin-top: 0px;
}
p.blocktext2 {
    	margin-left: auto;
    	margin-right: auto;
    	width: 98%;
    	text-align: center; 
    	margin-top: 25px;
}

/* Captchya */

.form-captchya {
	text-align: center;
	display: block;
	width: 107px;
	height: 34px;
	padding: 6px 12px;
	font-size: 14px;
	line-height: 1.42857143;
	color: #555;
	background-color: #fff;
	background-image: none;
	border: 1px solid #ccc;
	border-radius: 4px;
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
	-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
	-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
	transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

/* Submissions Form */

.load-video {
	width: 320px;
	height: 32px;
	padding: 6px 6px;
	margin-right: 3px;
	font-size: 14px;
	line-height: 1.42857143;
	color: #555;
	background-color: #fff;
	border: 1px solid #ccc;
	border-radius: 4px;
}

.videoform-look {
	border: thin solid #BABD9F;
	border-radius: 4px;
	background-color: #E4E4E4;
}

.used {
	white-space: nowrap;
        color: #fff;
}


/* Quiz Page */

.video-wrapper.quiz {
	width: 474px;
	height: 267px;
}
div#glossary0, blockquote#answer-list {
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* Internet Explorer */
	-khtml-user-select: none; /* KHTML browsers (e.g. Konqueror) */
	-webkit-user-select: none; /* Chrome, Safari, and Opera */
	-webkit-touch-callout: none; /* Disable Android and iOS callouts*/
}


/* Quiz Blur and Unblurr Text */

div#glossary {
	-webkit-filter: blur(3px);
	-moz-filter: blur(3px);
	-o-filter: blur(3px);
	-ms-filter: blur(3px);
	filter: blur(3px);
	background-color: #ccc;
}
div#glossary-clear {
	-webkit-filter : none;
	-moz-filter : none;
	-o-filter : none;
	-ms-filter : none;
	filter : none;
	background-color : #FFF;
}
#answer-list label {
	font-weight: normal;
	cursor: pointer;
}
.status {
	padding-top: 5px;
	padding-bottom: 5px;
	margin-bottom: 15px;
	font-weight: bold;
	font-size: 16px;
}
.quiz-buttons {
	text-align: center;
	padding: 10px;
	margin-top: 0px;
	margin-bottom: 10px;
}
.answer-box {
	height: 40px;
	margin-left: 20px;
}
.spacer {
	padding-top: 8px;
}


/* Miscellaneous */


.zoom-in {
   ...
   cursor: -webkit-zoom-in;
   cursor: zoom-in;
}

.pointer {
   cursor: pointer;
}


/* Search Bar */

#search-container {
	width: 100%;
	padding-top: 7px;
	padding-bottom: 10px;
}
#search-result {
	overflow-y: scroll;
	height: 100px;
	width: 108%;
	background-color: #FFFFFF;
	padding: 10px;
}


/* Bootstrap Tour */

.tour-ol {
	margin-left: -25px;
}
.tour-title {
	color: #146460;
}
.transcript {
	overflow-y: scroll;
	overflow-x: hidden;
	height: 785px;
}
.test-scroll {
	overflow-y: scroll;
	overflow-x: hidden;
	height: 500px;
}
.test-scroll2 {
	overflow-y: scroll;
	overflow-x: hidden;
	height: 200px;
}


/* Spinner styles */
.spinner-semi-circle {
        display: inline-block;
        position: relative;
        width: 1rem;
        height: 1rem;
}
.spinner-semi-circle div {
        box-sizing: border-box;
        display: block;
        position: absolute;
        width: 0.8rem;
        height: 0.8rem;
        margin: 0.1rem;
        border: 0.15rem solid currentColor;
        border-radius: 50%;
        animation: spinner-semi-circle 1.2s linear infinite;
        border-color: currentColor transparent transparent transparent;
}
.spinner-semi-circle div:nth-child(1) {
        animation-delay: -0.45s;
}
.spinner-semi-circle div:nth-child(2) {
        animation-delay: -0.3s;
}
.spinner-semi-circle div:nth-child(3) {
        animation-delay: -0.15s;
}
@keyframes spinner-semi-circle {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
}

/* Hide spinner by default */
.spinner-semi-circle {
        display: none;
}

.old-paper {
        border: 1px solid #d3c8b4;
        padding: 15px;
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 10px;
        margin-bottom: 15px;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
        font-size: 18px;
        line-height: 1.6;
	font-family: Georgia, "Times New Roman", serif;
}

.old-paper2 {
        border: 1px solid #d3c8b4;
        padding: 15px;
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 10px;
        margin-bottom: 15px;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
        font-size: 16px;
        line-height: 1.6;
	font-family: Georgia, "Times New Roman", serif;
}

.score-box {
        background-color: #fff8c6; 
        border-radius: 10px; 
        padding: 25px 65px; 
        margin: 20px auto; 
        font-size: 1.3em; 
        font-weight: bold; 
        display: table; 
        text-align: center;">
}

/* Speaker Tiles */
#table2 {
        width: 90%;
        border-collapse: collapse;
}
#table2 td {
        position: relative;
        width: 96px;
        height: 66px;
        text-align: center;
}
#table2 td img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 10px; /* Rounded corners for the image */
        transition: border 0.3s ease; /* Smooth transition for border */
        border: 5px solid transparent; /* Initial transparent border */

}
#table2 .number {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: white;
        font-size: 2em;
        font-family: Arial, sans-serif;
        opacity: 0;
        transition: opacity 0.3s ease; /* Smooth transition for opacity */
}
#table2 td:hover .number {
        opacity: 1; /* Show with transition */
}
#table2 td:hover img {
        border: 5px solid #E0E0E0; /* gray frame on hover */
}
#table2 a {
        color: inherit;
        text-decoration: none;
}