/*
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

 			All Initial CSS is for a mobile phone in portrait orientation
	
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 */




*
	{
	margin: 0;
	padding: 0;
	font-weight: normal;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    box-sizing: border-box;
	}
	
:root
	{
		
/* Set all of the color variables */

	--siteBlack: #444444;
	--siteWhite: #f0f0f0;
	--siteBackground: #f0f0f0;
	--siteShadow: rgba(68,68,68,0.5);
	--modulePrimary: #3662b7;
	--modulePrimaryHighlight: #1c2145;
	--modulePrimaryDark: #1c2145;
	--moduleSecondary: #b6c2d9;
	--moduleTertiary: #f1511c;
	--disabled: #aaaaaa;
	
/* Set other property variables */

	--siteWhiteSpace: 0.3em;	
	}

body, html
	{
	display: flex;
	flex-direction: column;
	width: 100vw;
	height: 100vh;
/*	--windowWidth: 100vw;
	font-size: calc(10 * (var(--windowWidth) / 490));*/
	font-size: calc(20px - (100vw / 550));
	letter-spacing: 0.04em;
	font-family: Tahoma, Geneva, sans-serif;
	background-image: url("images/3d_logo.png");
	background-position-y: 20vh;
	background-position-x: 50%;
	background-size: 50vh;
    background-repeat: no-repeat;
	background-color: var(--siteBackground);
    }

button
	{
	flex: 0 0 auto;
	min-width: 5em;
	padding: 2vw;
	font-size: 7em;
	color: var(--siteWhite);
	background-color: var(--modulePrimary);
	border: 1vw var(--siteShadow) solid;
	border-radius: 3vw;
	cursor: pointer;
	}

form
	{
	width: 100%;
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-self: center;
	background-color: var(--moduleSecondary);
	border: 1px var(--siteShadow) solid;
	border-radius: var(--siteWhiteSpace);
	padding: var(--siteWhiteSpace);
	}

form > :nth-child(1n+2)
	{
	margin-top: var(--siteWhiteSpace);
	}

h1
	{
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1.5em;
	color: var(--siteWhite);
	background-color: var(--modulePrimary);
	border: 1px var(--siteShadow) solid;
	border-radius: calc(0.5 * var(--siteWhiteSpace));
	padding: var(--siteWhiteSpace);
	}

h2
	{
	display: flex;
	align-items: center;
	font-size: 1.2em;
	}

header
	{
	flex: 0 0 auto;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	background-color: var(--siteWhite);
	}

img[src*="document"],[src*="trash"]
	{
	flex: 0 0 auto;
	height: 2em;
	margin: var(--siteWhiteSpace);
	}

input
	{
	font-size: 1em;
	padding: var(--siteWhiteSpace);
	border: 1px var(--siteShadow) solid;
	border-radius: var(--siteWhiteSpace);
	background-color: var(--siteWhite);
	color: var(--siteBlack);
	}

input:disabled
	{
	background-color: var(--disabled);
	}

input[type="button"],[type="submit"]
	{
	flex: 0 0 auto;
	min-width: 5em;
	padding: var(--siteWhiteSpace);
	font-size: 1.5em;
	color: var(--siteWhite);
	background-color: var(--modulePrimary);
	border: calc(var(--siteWhiteSpace) / 2) solid;
	border-color: var(--siteWhite);
	border-radius: var(--siteWhiteSpace);
	cursor: pointer;
	}

input[type="button"]:disabled
	{
	opacity: 0.8;
	color: var(--disabled);
	background-color: #888888;
	border-color: #AAAAAA;
	cursor: default;
	}

input[type="checkbox"]
	{
	height: 2em;
	width: 3em;
	padding: 0px;
	border: 0;
	background-color: transparent;
	cursor: pointer;
	}

input[type="checkbox"]::before
	{
	content: url(images/checkbox_unchecked.svg); 
	}


input[type="checkbox"]:checked::before
	{
	content: url(images/checkbox_checked.svg); 
	}

input[type="date"]
	{
	width: 11em;
	}

input[type="radio"]
	{
	height: 2em;
	width: 2em;
	border-radius: 1em;
	cursor: pointer;
	}

input[type="radio"]:checked
	{
	background: url(/images/dot.svg) no-repeat center center; 
	background-color: var(--siteWhite);
	}

label
	{
	flex: 0 1 auto;
	display: flex;
	flex-direction: column;
	align-content: center;
	}

label > label
	{
	margin-top: var(--siteWhiteSpace);
	}

main
	{
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	overflow-y: scroll;
	}

nav
	{
	flex: 0 0 auto;
	width: 100%;
	min-height: var(--siteWhiteSpace);
	background-color: var(--modulePrimary);	
	border-bottom: 1px var(--siteShadow) solid;
	}

nav ul
	{
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	list-style: none;
	}

nav ul li
	{
	flex: 0 1 auto;
	}
	
nav ul li a
	{
	display: block;
	text-decoration: none;
	text-align: center;
	font-size: 2em;
	letter-spacing: 0.2em;
	font-weight: 400;
	color: var(--siteWhite);
	padding: 4vw;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
	border-bottom: 1px solid rgba(20, 20, 20, 0.2);
	}

nav ul li a:nth-last-child
	{
	border-bottom: none;
	}

nav ul li ul
	{
	display: none;
	}

nav ul li ul li a
	{
	color: var(--siteBlack);
	background-color: var(--moduleSecondary);	
	border-top: 1px solid rgba(255, 255, 255, 0.2);
	border-bottom: 1px solid rgba(20, 20, 20, 0.2);
	}

object
	{
	flex: 1 1 auto;
	}

select
	{
	flex: 1 1 auto;
	font-size: 1em;
	overflow: hidden;
	max-width: 100%;
	padding: var(--siteWhiteSpace);
	padding-right: 1.7em;
	border: 1px var(--siteShadow) solid;
	border-radius: var(--siteWhiteSpace);
	color: var(--siteBlack);
	background: url(/engineering/images/select.svg) no-repeat right bottom;
	background-color: var(--siteWhite);
	background-size: auto 100%;
	}

select[multiple]
	{
	overflow-y: hidden;
	background: url();
	background-color: var(--siteWhite);
	background-size: auto 100%;
	}

select:disabled
	{
	background-color: var(--disabled);
	}

textarea
	{
	font-size: 1em;
	font-family: inherit;
	letter-spacing: 0.04em;
	font-family: Tahoma, Geneva, sans-serif;
	background-color: var(--siteBackground);
	padding: var(--siteWhiteSpace);
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;

	width: 100%;
	}

.checkboxLabel
	{
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	}

.documentLink
	{
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
	}

.documentLink > span
	{
	flex: 1 1 auto;
	}

.flexFieldset
	{
	display: flex;
	flex-direction: column;
	color: var(--siteWhite);
	background-color: var(--moduleTertiary);
	border: 1px var(--siteShadow) solid;
	border-radius: var(--siteWhiteSpace);
	padding: var(--siteWhiteSpace);
	}

.flexFieldset > h2 > span
	{
	flex: 1 1 auto;
	}

.flexFieldset > h2 > :nth-child(1n+2)
	{
	margin-left: var(--siteWhiteSpace);
	}

.flexFieldset > :nth-child(1n+2)
	{
	margin-top: var(--siteWhiteSpace);
	}

.flexFieldset > .formRow
	{
	padding: var(--siteWhiteSpace);
	}

.formRow
	{
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	color: var(--siteBlack);
	background-color: var(--moduleSecondary);
	border-radius: var(--siteWhiteSpace);
	}

.formRow > :nth-child(1n+2)
	{
	margin-left: 0;
	margin-top: var(--siteWhiteSpace);
	}

.formRow .plusMinus
	{
	align-self: flex-start;
	}

.headerCell
	{
	display: flex;
	justify-content: center;
	align-items: center;
	color: var(--siteWhite);
	padding: var(--siteWhiteSpace);
	}

.headerRow
	{
	display: flex;
	}

.headerTitle
	{
	flex: 1 1 auto;
	font-size: 1.3em;
	}
	
.hidden
	{
	display: none;
	}

.icon
	{
	height: 1.5em;
	cursor: pointer;
	}

.iconThemed
	{
	height: 1.5em;
	stroke: var(--siteBlack);
	cursor: pointer;
	}

.moduleIcon
	{
	flex: 0 1 auto;
	height: 4em;
	margin: var(--siteWhiteSpace);
	}

.responsiveMain
	{
	display: none;
	}

.responsiveMenu
	{
	display: none;
	}

.responsiveModules
	{
	display: none;
	}

.responsiveSubMenu
	{
	display: flex;
	background-color: var(--modulePrimaryHighlight);
	}

.rightLabel
	{
	flex-direction: row;
	align-items: center;
	}

.rightLabel > span
	{
	margin-left: var(--siteWhiteSpace);
	}

.statusDisabled
	{
	color: var(--siteBlack);
	background-color: var(--disabled);
	}

.statusEnabled
	{
	color: var(--siteBlack);
	background-color: #3abd3a;
	}

.statusSaved
	{
	color: var(--siteWhite);
	background-color: #db4949;
	}

.statusSubmitted
	{
	color: var(--siteBlack);
	background-color: #faf54d;
	}

.statusPrevalidated
	{
	color: var(--siteBlack);
	background-color: #3abd3a;
	}

.statusValidated
	{
	color: var(--siteWhite);
	background-color: #0a70c4;
	}

.tableRow
	{
	flex: 0 0 auto;
	display: flex;
	}

.tableCell
	{
	padding: calc(1.5 * var(--siteWhiteSpace));
	border-bottom: 1px var(--siteBlack) solid;
	word-break: break-word;
	cursor: pointer;
	}

#downloadIcon
	{
	margin: var(--siteWhiteSpace);
	stroke: var(--siteWhite);
	}

#filterIcon
	{
	margin: var(--siteWhiteSpace);
	stroke: var(--siteWhite);
	}

#moduleDiv
	{
	flex: 1 0 auto;
	display: flex;
	}

#hamburgerIcon
	{
	height: 3em;
	fill: var(--modulePrimary);
	margin: calc(2 * var(--siteWhiteSpace));
	cursor: pointer;
	}

#logo
	{
	height: 4em;
	margin: var(--siteWhiteSpace);
	}

#tableBody
	{
	flex: 0 1 auto;
	display: flex;
	flex-direction: column;
	overflow-y: scroll;
	}

#tableHeader
	{
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	background-color: var(--modulePrimary);
	border-bottom: 1px var(--siteBlack) solid;
	}




/*
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

 				First media query for all devices in landscape orientation
	
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 */




@media all and (min-width: 800px)




	{

	:root
		{
		--siteWhiteSpace: .3em;
		}
	
	body
		{
/*		font-size: 2vw;*/
		background-position-y: 20vh;
		background-position-x: 50%;
		background-size: 50vh;
		}
	
	form
		{
		width: auto;
		margin-top: var(--siteWhiteSpace);
		}
	
	nav
		{
		display: flex;
		width: auto;
		}

	nav ul
		{
		flex-direction: row;
		padding: 0;
		}
	
	nav ul li
		{
		position: relative;
		}
	
	nav ul li a
		{
		font-size: 1em;
		padding: 0.25vw 0.75vw;
		border: none;
		}

	nav ul li > ul
		{
		flex-direction: column;
		justify-content: flex-start;
		position: absolute;
		width: -webkit-max-content;
		width: max-content;
		}
		
	@media (hover)
		{	
		nav ul li:hover > ul
			{
			display: flex;
			}
	
		nav ul li a:hover
			{
			color: var(--siteWhite);
			background-color: var(--modulePrimaryHighlight);	
			border-bottom: none;
			}
	
		.responsiveSubMenu
			{
			display: none;
			}
	
		}

	nav ul li ul
		{
		box-shadow: 0.5vw 0.5vw 0.4vw var(--siteShadow);
		}

	nav ul li ul li a
		{
		color: var(--siteWhite);
		background-color: var(--modulePrimary);	
		border: none;
		}
	
	nav ul li ul li:hover > a
		{
		background-color: var(--modulePrimaryHighlight);	
		}

	nav ul li ul a
		{
		text-align: left;
		border-bottom: 0;
		}
	
	p
		{
		text-align: justify;
		max-width: 35em;
		}
	
	.checkboxLabel
		{
		flex: 1 1 auto;
		}
	
	.formRow
		{
		flex-direction: row;
		justify-content: flex-start;
		}
	
	.formRow > :nth-child(1n+2)
		{
		margin-left: var(--siteWhiteSpace);
		margin-top: 0;
		}
	
	.justifyCenter
		{
		justify-content: center;
		}
	
	.modal
		{
		margin-top: 25vh;
		}
	
	.responsiveMain
		{
		display: flex;
		}
		
	.responsiveMenu
		{
		display: flex;
		}
		
	.responsiveSubMenu li a
		{
		display: flex;
		background-color: var(--modulePrimary);
		}

	#hamburgerIcon
		{
		display: none;
		}
	
	}