:root {
	--siteBlue: #336699;
	--checkboxGreen: #0c0;
	--checkboxMouseover: #ccc;
	--readonlyOrange: #ff9225;
	--selectedColor: lightgreen;
	--errorColor: rgb(248, 54, 54);
	--successColor: #06ac0e;
	--headBackground: #faa855;
	--boxBackground: #f2f2f2;
	--boxBorder: darkgray;
	--dropdownColor: #666;
	--dropdownBackground: #eee;
	--hrColor: #F5F5F5;
	--maxWidth: 1400px;
	--12_10: calc(10px + (12 - 10)*(100vw - 400px)/(800 - 400));
	--13_11: calc(11px + (13 - 11)*(100vw - 400px)/(800 - 400));
	--14_11: calc(11px + (14 - 11)*(100vw - 400px)/(800 - 400));
	--14_12: calc(12px + (14 - 12)*(100vw - 400px)/(800 - 400));
	--15_12: calc(12px + (15 - 12)*(100vw - 400px)/(800 - 400));
	--18_16: calc(16px + (18 - 16)*(100vw - 400px)/(800 - 400));
	--38_30: calc(30px + (38 - 30)*(100vw - 400px)/(800 - 400));
  }
  
  body {
	/* font-family: Apple System, Blink Mac SystemFont, Segoe UI, Roboto, Oxygen Sans, Ubuntu, Cantarell, Helvetica Neue, Sans Serif;*/	 
	font-family: Helvetica, Verdana, sans-serif;
	background-color: white;
	padding: 0;
	margin: 0;
}

p {
	font-size: 1em;
}

h1 {
	text-align: center;
	margin-top: 30px;
	margin-bottom: 20px;
	font-size: 4.5vw;
}

h2 {	
	width: 100%;
	text-align: center;
	margin: 0;
	padding: 0;
	font-size: calc(1em + 2vmin);
}

h3 {
	margin-top: 0.5em;
	width: 100%;
	text-align: center;
}

/* Container for header image and text */

.header-container {
	position: relative;
	text-align: center;
	background-color: white;
	margin: 0;
	padding: 0;
}

.title-text {
	position: absolute;
	top: 71%;
	-ms-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
	left: 2vw; /* 3.8em */
	font-size: 6vw; /* var(--38_30); */
	font-weight: bold;
	color: white;
}

/* Navigation  Bar: topnav for large screens; rtopnav for small screens*/

.topnav {
	display: flex;
	justify-items: flex-end;
	position: absolute;
	right: 0;
}
  
  .topnav a, .rtopnav a {
	float: left;
	color: var(--siteBlue);
	text-align: center;
	margin-right: 0.5em;
	margin-bottom: 0.5em;
	padding: 0.25em 0.7em;
	text-decoration: none;
	font-size: var(--18_16);
  }

  .topnav a:hover:not(.active) , .rtopnav a:hover:not(.active)  {
	background-color: var(--dropdownBackground);
	color: black;
  }
  
  .topnav a.active, .rtopnav a.active {
	background-color: lightgray;
	color: white;
  }

  .rtopnav {
	display: none;
  }

  @media screen and (max-width: 670px) {
	.topnav { display: none;}
	.rtopnav { 
		display: block;
		position: relative;
		background-color: var(--afParchment1);
	}

	/* Display only the selected reduced menu item */

	.rtopnav a:not(.active) {display: none;} 

	.rtopnav a.icon {
	  float: none;
	  display: block;
	  position: absolute;
	  right: 0;
	  top: 0;
	}
	.rtopnav.responsive a {
		float: none;
		display: block;
		text-align: left;
		color: black;
	  }
  }
  
  /* Hamburger icon */
  .fa-bars {
	  color: #666;
  }

  
  /* Project Dropdown menu: the container to position the dropdown content */
  .dropdown {
	position: relative;
	display: inline-block;
  }

  .dropdown a {
	float: left;
	color: var(--siteBlue);
	text-align: center;
	margin-right: 0.25em;
  }
  
  /* Dropdown Content (Hidden by Default) */
  .dropdown-content {
	display: none;
	position: absolute;
	margin-top: 3em;
  	left: 0;
	background-color: #f1f1f1;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1;
  }
  
  /* Links inside the dropdown */
  .dropdown-content a {
	color: black;
	display: block;
	padding: 0 0.25em;
	font-size: var(--15_12);
	white-space: nowrap;
	width: 100%;
	text-align: left;
  }
  
  /* Show the dropdown menu on hover */
  .dropdown:hover .dropdown-content {display: block;}
  
  /* Change the background color of the dropdown links on hover */
  .dropdown .dropdown-content a:hover {background-color: #bbb;} 

input[type=submit], 
.form-button {
	display: inline-block;
	padding: 0.3em 0.5em;
	margin: 0.5em 1em;
	font-size: var(--12_10);
	min-width: 70px;
}

.info-icon-select {
	display: inline-block;
	width: var(--14_12);
	max-width: 30px;
	height: auto;
	vertical-align: bottom;
	margin: 0;
	padding-top: 0.05em;
}

/* Selectable Table */

.selectable-table {
	margin: 1em auto;
	padding: 0.3em;
	width:95%;
	background-color: white;
	border: 1px black solid;
	border-collapse: collapse;
	border-color: black;
	font-size: var(--12_10);
}

.selectable-table th, 
.selectable-table td {
	/*overflow-x:auto;
	overflow-y:auto; */
	margin: 1em;
	padding: 0.2em 0.3em;
	background-color: white;
	border: 1px black solid;
	border-collapse: collapse;
	border-color: black;
	font-size: var(--12_10);
}

.selectable-table, 
.selectable-table th, 
.selectable-table thead {
	background-color: var(--headBackground);
}

.selected td, 
.selected1 td {
	background-color: var(--selectedColor);
}

.selectable-table th {
	font-size: var(--14_11);
}

.selectable-table tr {
	cursor:pointer;
}

.user-account {
	display: flex;
	flex-direction: column;
	border: 2px solid lightgray;
	background-color: var(--boxBackground);
	text-align: left;
	width: fit-content;
	min-width: 22em;
	justify-content: center;
	max-width: 100%;
	padding: 1em;
	font-size: var(--13_11);
}

.user-account form {
	text-align: center;
}

.user-account input {
	
	width: 100%;
	font-size: var(--14_12);
	padding: 0.25em 0.5em;
}

.user-account input[type=button] {
	display: inline-block;
	padding: 0.3em 0.5em;
	margin: 0.5em 1em;
	font-size: var(--12_10);
	width: 8em;
}

.user-account button {
	margin: 0 0.7em 0.5em 0.7em;
	width: 7em;
	padding: 0.4em;
	font-size: var(--14_12);
}

.user-account .input-container {

	display: flex;
	width: 100%;
	justify-content:flex-end;
	align-content: center;
	align-items: baseline;
	padding-right: 0.5em;
	margin-top: 1.5em;
	margin-bottom: 1.5em;
	white-space: nowrap;
}

.user-account p {
	/*margin-top: 10px;
	font-size: 15px; */
	margin: 0.5em 0;
	font-size: var(--12_10);
}

.user-account label {
	display: inline-block;
	padding-right: 0.2em;
	margin-right: 0.5em;
	text-align: right;
	font-size: var(--15_12);
	font-weight: 600;
}

.user-account select {
	margin: 0 1em 0 0 0.5em;
	padding: 6px;
	font-size: var(--14_12);
}

.user-account .operror {

	text-align: center;
}

.operror {
	font-size: var(--14_11);
	color: var(--errorColor);
	margin-top: 1em;
	margin-left: 1em;
}

.opsuccess {
	font-size: var(--14_11);
	color: var(--successColor);
	margin-top: 1em;
	margin-left: 1em;
	
}

.flex-container-center-aligned {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: auto;
	margin-right: auto;
}

.accounts-page {
	display: flex;
	flex-direction: column;
	margin-top: 2em;
	padding: 2em;
	justify-content: flex-start;
	width: 80%;
	max-width: 1000px;
}

.accounts-page p {
	font-family: 'Roboto', sans-serif;
	font-size: var(--15_12);
	font-weight: 500;
	text-align: left;
}

@media (max-width: 700px) {

	.accounts-page {
		margin: 1em auto 1em auto;
		padding: 0.5em;
		width: 100%;
		align-content: center;
		align-items: center;
		justify-content: center;
	}
}