body
{
	display: flex;
	flex-direction: column;
	overflow: hidden;
	height: 100vh;
}

blockquote { margin: 15px; }

textarea.textarea { resize: vertical; }
label { display: inline-block; }
label.checkbox { cursor: pointer; }
.strong { font-weight: bold; }
input.file.add { visibility: hidden; }
input.number { width: 75px !important; }
input.loader_spinner_blue { background-position: 99% center; }
.clear_input { position: relative; display: flex; align-items: center; }
a { color: var(--darkblue);}
a.clear_input { display: block; position: absolute; right: 5px; width: 20px; text-align: center; cursor: pointer; }
a.fieldset_anchor { text-decoration: none; color: inherit; }
a.fieldset_anchor:hover { text-decoration: underline; }
.green { color: var(--green); }
.red { color: var(--red); }
strong.green,
strong.red { font-weight: 500; }
.ucfirst:first-letter { text-transform: capitalize; }

footer.footer
{
	background-color: var(--blue);
	padding: 10px;
	text-align: center;
}
	footer.footer a#feedback { color: #fff; text-decoration: none; }
	footer.footer a#feedback:hover { text-decoration: underline; }

select.select:disabled 
{
	padding-right: 0;
	padding-left: 0;
	text-align: center;
	min-width: auto;
}

fieldset.glow { animation-name: glow; animation-duration: 5s; }
fieldset.glow > header { animation-name: glow2; animation-duration: 5s; }
@keyframes glow { from { background-color: #fff3b3; } to { background-color: #ffffff; } }
@keyframes glow2 { from { background-color: #fff3b3; } to { background-color: #eeeeee; } }

.required:hover { border-color: var(--red); }

ol, ul { list-style-position: inside; margin: 10px 15px; }

main.main
{
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	overflow: hidden;
	position: relative;
}

	section.section
	{
		width: 100%;
		flex: 1 1 auto;
		max-width: 1200px;
		padding: 0 10px;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		height: 100%;
		position: relative;
		position: absolute;
		background-color: #fff;
	}

		section.section header.section_header
		{
			flex: 0 0 auto;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 15px 0;
			position: relative;
		}

			header.section_header div.section_title 
			{ 
				flex: 1 1 auto; 
				font-size: 20px; 
				color: var(--darkblue); 
			}
			
			header.section_header div.section_info
			{
				flex: 1 1 auto; 
				font-size: 20px;
			}
			
			header.section_header div.section_options 
			{ 
				flex: 0 0 auto; 
				display: flex; 
				align-items: center; 
				justify-content: center; 
				gap: 10px; 
			}
			
				div.section_options div.academic_years 
				{
					flex: 1 1 auto; 
					display: flex; 
					align-items: center; 
					justify-content: center; 
					gap: 10px; 
				}
				
		section.section div.section_content
		{
			flex: 1 1 auto;
			overflow: hidden;
			margin-bottom: 5px;		
			/*padding-right: 5px;*/	
			position: relative;			
		}

			div.section_content form.app
			{  
				display: flex;
				margin: 0;
				width: inherit;
				max-height: 100%;
				overflow: hidden;
				flex-direction: column;
				gap: 0;
				background-color: #fcfcfc;				
				position: relative;
				border: 1px solid #ccc;				
			}
				
				form.app header.form_header 
				{	
					flex: 0 0 auto;
					width: 100%; 
					padding: 0 10px;					
					display: flex;
					align-items: center;
					justify-content: space-between;
					background-color: #eee;
					border-bottom: 1px solid #ddd;
					min-height: 46px;
				}
				
					header.form_header div.header_title 
					{ 			
						flex: 1 1 auto;
						display: flex;
						gap: 10px;
						align-items: center;
					}	
					
						header.form_header span.title_text { font-weight: 500; font-size: 17px; }
						header.form_header label.title_label { font-weight: 500; font-size: 17px; }
					
					header.form_header div.header_info
					{
						flex: 1 1 auto;
					}
					
					header.form_header div.header_options 
					{ 
						flex: 1 1 auto;
						display: flex;
						align-items: center;
						justify-content: flex-end;
						gap: 10px; 
					}
					
						/*header.form_header div.buttons div.status { font-size: 16px; font-weight: normal; }
						header.form_header div.buttons button {}*/
				
				form.app div.form_content 
				{
					flex: 1 1 auto;
					position: relative;
					height: 100%;
					overflow-x: hidden;
					overflow-y: auto;
					scroll-behavior: smooth;					
				}
				
					div.form_content p { margin: 20px 15px; }
				
					fieldset.form_fieldset,
					fieldset.fieldset_content
					{
						margin: 15px;
						outline: 1px solid #ccc;
						position: relative;	
						scroll-margin-top: 15px;
						background-color: #fff;
					}

						header.fieldset_header
						{
							width: 100%; 
							padding: 0 10px;					
							display: flex;
							align-items: center;
							justify-content: space-between;
							background-color: #eee;
							outline: 1px solid #ccc;
							min-height: 46px;
							position: relative;
						}					

							header.fieldset_header div.header_title 
							{ 		
								flex: 0 1 auto;
								display: flex;
								gap: 10px;
								align-items: center;
							}	

								div.header_title span.title_number {  }
								div.header_title span.title_text { }
								div.header_title span.title_name {  }
							
							header.fieldset_header div.header_info 
							{ 						
								flex: 1 1 auto;
								/*text-align: center;*/
							}
							
								div.header_info div.info_text {}
							
							header.fieldset_header div.header_options 
							{ 
								flex: 0 0 auto;
								display: flex;
								align-items: center;
								justify-content: flex-end;
								gap: 10px;
							}

						fieldset div.fieldset_content 
						{ 
							position: relative;
						}			
							
						fieldset div.fieldset_content.row
						{
							display: flex;
							justify-content: space-between;
							align-items: center;
						}
							div.fieldset_content div.fieldset_response { position: relative; }
							
							div.fieldset_content div.field
							{
								display: flex;								
								flex-direction: column;
								margin: 15px;
							}
							
							div.fieldset_content li.field
							{
								display: block;
							}
							
							div.fieldset_content div.field.row 
							{ 
								flex-direction: row;
								align-items: center;
								gap:10px;
							}
							
								div.fieldset_content div.field div.label 
								{ 
									flex: 0 0 auto;
									margin: 5px 5px 10px 0;
								}
								div.fieldset_content div.field.row div.label { margin: 0; }
								
									div.field div.label span.label {}
								
								div.fieldset_content div.field div.input 
								{ 			
									margin-top: 5px;
									flex: 1 1 auto;
								}
								div.fieldset_content div.field.row div.input { margin: 0; }
								
								div.fieldset_content div.field div.input input[type="text"] { width: 100%; }
							
							
								div.fieldset_content ul.fields { list-style: none; margin: 0; }

									div.fieldset_content ul.fields li { margin: 15px 0; }
						
							div.fieldset_content fieldset.form
							{
								margin: 15px 0 !important;
								background-color: #fff;
							}
						
						
		p.dialog_field 
		{
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			gap: 5px;
			position: relative;
		}
		
			p.dialog_field label.label { font-size: 14px; text-indent: 4px; }
			p.dialog_field input.text { width: 100%;  }
	
		div.ineligible 
		{
			font-style: italic;
		}

section#intro { z-index: 100; }

	section#intro p.title { margin: 20px 0 10px 0; font-size: 20px; color: var(--darkblue); }
	
	#dialog_ece_login div.email_app_id_number 
	{
		margin: 20px 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}
		#dialog_ece_login div.email_app_id_number input.email_app_id_number { width: 80px; text-align: center; }
	
section#list { z-index: 200; }
	
	section#list div.section_content { overflow-x: hidden; overflow-y: auto; }
	
	section#list table.list {}
	table.list td { vertical-align: middle; padding: 10px 15px; }
	table.list td.id_number { white-space: nowrap; }
	table.list td.author { white-space: nowrap; }
	table.list td.created { white-space: nowrap; }
	table.list td.type { text-transform: capitalize; }
	table.list td.type.faculty { font-weight: 500; }
	table.list td.status { text-transform: capitalize; }
	table.list tr:nth-child(2n) td { background-color: #fafafa; }
	table.list tr.incomplete td { background-color: #ffe9e9; }
	table.list tr.complete td { background-color: #e9ffe4; }
	table.list tr.pending td { background-color: #e0f3ff; }
	/*table.list tr.approved td { background-color: #d9ffd9;}*/
	table.list tr:hover td { background-color: var(--highlight); cursor: pointer; }
	table.list tr.hidden { display: none; }
	table.list tbody tr.nomatches { display: none; }
	table.list tbody.nomatches tr.nomatches { display: table-row !important; }
	table.list td span.match { color: var(--red); font-weight: bold; }

	table.list thead { position: sticky; top: 1px; }

section#app { z-index: 300; }	

	section#app textarea.app_title { min-height: 22px; }
	section#app textarea.app_description { min-height: 100px; }
	
	section#app a.app_anchor { display: inline-block; margin: 0 5px; }
	section#app a.app_anchor.active { text-decoration: underline; cursor: pointer; text-decoration-color: #aaa; }
	section#app a.app_anchor.active:hover { text-decoration-color: #333; }
	section#app fieldset.app_sponsor div.field { display: block; }
	section#app ul.incomplete_list { list-style: none; }
	section#app ul.incomplete_list li { line-height: 2; }
	
	section#app div.fieldset_content.row.app_coauthors { justify-content: flex-start; }
		
	section#app form.app_documents div.link 
	{ 
		display: flex; 
		justify-content: space-between; 
		align-items: center; 
		padding: 15px;
	}
	
	section#app form.app_documents div.supportive_files_list div.link,	
	section#app form.app_documents div.supplemental_links_list div.link 
	{
		padding: 10px; 
		margin: 10px;
		outline: 1px solid #eee;
	}
	
	section#app form.app_documents span.title_name { font-weight: bold; }

section#review { z-index: 400; }
	
	section#review div.section_content 
	{
		overflow-x: hidden;
		overflow-y: auto;
		display: flex;
		flex-direction: column;
		gap: 15px;
		/*padding: 15px;*/
		border-top: 1px solid #ddd;
		border-bottom: 1px solid #ddd;
	}

		section#review fieldset.review
		{
			flex: 1 1 auto;
			background-color: #fcfcfc;				
			position: relative;
			border: 1px solid #ccc;
		}
	
			fieldset.review a#approve_letter
			{
				text-decoration: none;
				font-weight: 500;
				margin-left: 10px;
				color:var(--blue);
			}
			
			section#review div.fieldset_content
			{
				padding: 15px;
			}
				
				section#review span.app_status { font-weight: bold; }
				
				section#review table {}
				/*section#review table td { padding: 0; }*/						
				section#review table.status td.field_name { width: 20%; }
				
				section#review table td.field_name { font-size: 15px; }
				section#review table td.field_name div.field_name {  }
				section#review table td.field_value { font-weight: 500; padding: 10px 15px;  }
				section#review table td.field_value div.field_value {   }
				
				section#review table td.field_col { }
				section#review table td.field_col div.field_col { display: flex; flex-direction: column; gap:20px; }
				section#review table td.field_col div.field_col div.field_value { font-weight: 500; padding: 0 20px; }
				section#review table td.field_col div.field_col div.field_value.text { padding: 0 20px 20px 20px; }

				section#review table td.field_row { padding: 0; }
				section#review table td.field_row div.field_row {  }
				section#review table td.field_row div.field_row div.field_name { display: inline-block; border-right: 1px solid #ddd; padding: 10px; width:430px; }
				section#review table td.field_row div.field_row div.field_value { font-weight: 500; display: inline-block; padding: 10px; }

				section#review table.app_details td.field_name { width: 20%; }
				section#review table.app_details td.field_value { width: 80%; }

				section#review table.app_participants td.field_value { text-align: center; }	
				section#review table.app_classification td.field_value { text-align: center; }
				
				section#review div.app_coauthors span.coauthor { margin-right: 20px; }
				
			section#review fieldset.fieldset_content { margin: 0; }
			
			section#review div.app_sponsor_approved,
			section#review div.app_irb_approved
			{
				display: flex;
				gap:10px;
			}
			
			section#review div.app_irb_approved { flex-direction: column; }
			
				section#review div.app_irb_approved div.irb_approved_details
				{
					display: flex;
					justify-content: space-between;
					gap: 10px;
				}
					section#review div.app_irb_approved div.irb_approved_details div { display: flex; gap: 10px; }
				
					section#review div.app_irb_approved div.irb_approved_details span.label { font-weight: normal;  }
					section#review div.app_irb_approved div.irb_approved_details span.value { font-weight: 600; text-transform: capitalize; }
			
	section#review div.links 
	{
		display: flex;
		flex-direction: column;
		gap: 15px;
	}
	
	section#review fieldset.review_amendments div.link 
	{ 
		display: flex; 
		justify-content: space-between; 
		align-items: center; 
		padding: 20px; 
		outline: 1px solid #eee; 
	}

section#members { z-index: 500; }

	section#members td.options { text-align: center; }

div.data_list 
{ 
	margin-left: 2px;
	overflow-x: hidden;
	overflow-y: auto;
	max-height: 101px;
	position: absolute;
	width: 99%;
	/*top: 100%;*/
	color: #111;
	background-color: #fff;
	z-index: 999;
	font-size: 14px;
	border: 1px solid var(--blue);
	border-radius: 5px;
	
	text-align: left;
} 

	div.data_list:empty { border:none; } 
	
	div.data_list:hover { } 
	
	div.data_list div 
	{ 
		padding: 5px; 
		line-height: 1.3;
	} 
	
	div.data_list div:hover 
	{ 
		background-color: var(--blue);
		color: #fff;
		cursor: pointer;
	}
	
.loader_spinner_blue
{
	background-repeat: no-repeat;
	background-size: contain;
	background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwcHgiICBoZWlnaHQ9IjIwMHB4IiAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiIGNsYXNzPSJsZHMtZWNsaXBzZSIgc3R5bGU9ImJhY2tncm91bmQ6IG5vbmU7Ij4gICAgPHBhdGggbmctYXR0ci1kPSJ7e2NvbmZpZy5wYXRoQ21kfX0iIG5nLWF0dHItZmlsbD0ie3tjb25maWcuY29sb3J9fSIgc3Ryb2tlPSJub25lIiBkPSJNMzAgNTBBMjAgMjAgMCAwIDAgNzAgNTBBMjAgMjIgMCAwIDEgMzAgNTAiIGZpbGw9IiMwYjQ4NmQiIHRyYW5zZm9ybT0icm90YXRlKDE5MCA1MCA1MSkiPiAgICAgIDxhbmltYXRlVHJhbnNmb3JtIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSIgdHlwZT0icm90YXRlIiBjYWxjTW9kZT0ibGluZWFyIiB2YWx1ZXM9IjAgNTAgNTE7MzYwIDUwIDUxIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjAuNnMiIGJlZ2luPSIwcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiPjwvYW5pbWF0ZVRyYW5zZm9ybT4gICAgPC9wYXRoPiAgPC9zdmc+) !important;
}