InterviewView.html

<style>
	.interview-view-header {
		margin-top: 30px;
		margin-bottom: 15px;
		font-family: "Tajawal";
		display: flex;
		flex-direction: row;
	}
	
	.interview-view-title {
		font-size: 30px;
		font-weight: bold;
		cursor:pointer;
	}

	.interviewee-disabled {
		background-color: transparent;
	}
	.time-container{
		font-size: 18px;
		margin-left: 80px;
		padding: 4px;
		border-radius: 5px;
	}
		.time-begins-message {
			background-color: #777;
		
			border-radius: 20px;
			padding:8px;
			text-align:center;
			font-size:1.2em;
		}
		.interviewee-disabled-message{
			/* animation: blinker 2s linear infinite; */
			background-color: rgb(250, 100, 100);
			
			border-radius: 20px;
			padding:8px;
			text-align:center;
			font-size:1.2em;
		}
		@keyframes blinker{
			20%{
				background-color:#ED1233;
			}
		}
	.container{
		display:flex;
		align-items:center;
		flex-direction:row;
		margin-bottom:15px;
		height:60vh;
		background-color:#4C3523;
	}
		.video-container{
			display:flex;
			align-items:center;
			height:100%;
			color:white;
			width:70%;
			position:relative;
		}
			.interviewee-portrait {
				height: 100%;
				max-width: 100%;
				object-fit: contain;
			}
			.video-error{
				color:white;
				text-align:center;
			}
				.icon{
					margin:auto;
					width:50%;
				}
			.interview-video{
				width:100%;
				max-height:100%;
			}
			
		.question-list {
			width:30%;
			height:100%;
			background-color:#BAAB68;
			text-align:left;
			font-family: "Tajawal";
			padding: 0;
			padding-left: 20px;
			padding-right: 20px;
			overflow-y: scroll;
		}
			.question-list ul {
				padding: 0;
			}
			.question-disabled {
				color: red;
			}
			.question{
				list-style-type:none;
				margin-left: 5px;
				margin-right: 5px;
				padding-top: 15px;
				padding-bottom: 15px;
				padding-left: 1px;
				padding-right: 1px;
			}
			.question:not(:last-child) {
				border-bottom: 1px solid black;
			}
				.question > a {
					cursor: pointer;
				}
				.question-disabled > a {
					cursor: default;
				}
	
	.help-dialog {
		font-family: Tajawal, sans-serif;
		border: 2px solid goldenrod !important;
	}
	.help-dialog .ui-dialog-titlebar-close {
		border: 1px solid goldenrod !important;
	}
	.help-dialog .ui-dialog-titlebar-close:hover {
		background-color: goldenrod !important;
	}
</style>

<div class="interview-view-header">
	<span class="interview-view-title sub-titles">Interviewing <span class="name">NAME</span> [<span class="title">TITLE</span>]</span>
	<span class="time-container"><span class="time">X:XX</span> Remaining</span>
</div>
	
<p class="time-begins-message sub-titles" hidden>The timer will begin when you choose your first question.</p>
<p class="interviewee-disabled-message sub-titles" hidden>The interview is over. Please choose another interviewee.</p>


<div class="container">
	<div class="video-container">
		<img class="interviewee-portrait center-horz-vert"/>
		<div class="video-error center-horz-vert" hidden>
			<img class="icon" style="width:90%" src="images/broken-video.png">
			<br />
			<p class="sub-titles">Video link is broken.</p>
		</div>	
		<video class="interview-video center-horz-vert" poster="images/video_loading.gif" autoplay hidden>
			<!-- <source class="interview-video-src" type="video/mp4"> -->
		</video>
	</div>
	<div class="question-list">
		<ul>
			<li class="question-prototype">
				<a class="question-prompt question-button"></a>
			</li>
		</ul>
	</div>
</div>
<div style="width:100%; text-align:center;">
	<input type="button" class="help-button gen-button center-button-full-width success sub-titles" value="help" />
	<input type="button" class="back gen-button center-button-full-width success sub-titles" value="Back" />
</div>
<div id="help-dialog" title="Help">HELP CONTENT HERE</div>