IntervieweeSelectionView.html

<style>
	.interviewee {
		background-color: lightblue;
		min-width: 300px;
		margin: 6px;
	}
	
	.interviewee:not(.interviewee-disabled) {
		cursor: pointer;
	}
	
	.interviewee-disabled {
		background-color: pink;
	}
	.tr {
		text-align: center;
		padding: 20px;
		padding-top: 40px;
		padding-bottom: 10px;
		width: 20vw;
		display: inline-block;
		margin: 25px;
		
		border: 2px solid black;
	}
	.td{
		/*height:60vh;*/
	}
	.image{
		max-width:100%;
		height:150px;
		border-radius: 4px;
		object-fit: cover;
	}
	.button{
		cursor:pointer;
	}
	.interviewee-title{
		width:100%;
		text-align:center;
	}
	.table{
		display:flex;
		justify-content:center;
		flex-flow:row wrap;
		justify-content: space-around;
		
		max-width: 1500px;
		margin: auto;
	}
	.title{color:#215c98;}
</style>


<h2 class="interviewee-title sub-titles">Select an Interviewee</h2>
<div class="table">
	<div class="interviewee-prototype tr">
		<div class="button td sub-titles">
			<img class="image" />
			<h3 class="name"></h3>
			<p class="title"></p>
			<p><span class="time">XX:XX</span> Remaining</p>
		</div>
	</div>
</div>