@import url('https://fonts.googleapis.com/css?family=Montserrat:100,300,400,600,800|Lato:100,300,400,700|Libre+Franklin:300,900');

:root {
	/* Main color palette */
	--color-dark-one: #082f44;
	--color-dark-two: #1c1a17;
  --color-dark-two-trans: rgba(28, 26, 23, 0.6);
  --color-dark-three: #0F2434;
	--color-med-one: #007ba8;
	--color-light-one: #ffffff;
	--color-light-two: #ececec;
	--color-light-three: #f9f9f9;
	--color-light-four: #d4d6d7;

	/* Basic buttons, information callouts and accents */
	--color-info: #3699f7;
  --color-info-trans: rgba(54, 153, 247, 0.3);
	--color-info-shade: #287fc6; 
	--color-info-tint: #e4f0fe;

	/* Primary action buttons, progress callouts and accents */
	--color-progress: #2FC61E;
	--color-progress-shade: #25ae15;
	--color-progress-tint: #e4f8e1;

	/* Primary action buttons, progress callouts and accents */
	--color-warning: #EDB91C;
	--color-warning-shade: #daaa1c;
	--color-warning-tint: #fff1c9;

	/* Error highlighting, icons and backgrounds */
	--color-error: #ED1C24;
	--color-error-shade: #ce2430;
	--color-error-tint: #ffebeb;

  /* Gas-specific colors */
  --color-gas-phosphine: #a836e9;
  --color-gas-sulfuryl-fluoride: #78b502 ;
  --color-gas-methyl-bromide: #ed5f3e;
  --color-gas-carbon-dioxide: #0097ce; 

	--color-tint-one: rgba(255,255,255,0.2); /* add a white tint to a container that overlays a darker color for emphasis */
  --color-tint-two: rgba(45,42,39,.05); 	/* add a black shade to a container that overlays a lighter color to de-emphasize */

  --font-primary: 'Lato', Arial, sans-serif;
	--font-secondary: 'Montserrat', Helvetica, sans-serif;
  --font-tertiary: 'Libre Franklin', Arial, sans-serif;
}

/* Adjustments to the WYSWIG Editor for the Content Block */
div.tox { width:auto !important; } /* Hide empty <div> created by TinyMCE WYSIWYG Editor: modules/site/content_block.php, that breaks the grid layout */
div.tox-edit-area#content_ifr { background: #dfdfdf; }
div.tox-tinymce { height: 600px !important; }
textarea.tox-textarea { min-height: 100% !important; overflow: scroll; }
.btn_editContent { position: absolute; left: 0; top: 20px; background-color: var(--color-info); color: var(--color-light-one);
  padding: .3rem 1.8rem .3rem .8rem; background-image: url('../img/icons/icon_tools_edit_white.svg'); background-repeat: no-repeat; background-position: 45px center; background-size: 20px;
}
.tox .tox-menu { width: 200px; }
.btn_editContent:hover { background-color: var(--color-info-shade); color: var(--color-light-one); }
.g-recaptcha { padding: 1.3rem 0; }

/*--------------------------------------------------------------
Global Adjustments
--------------------------------------------------------------*/
/* Element modifiers */
.textAlignCenter { text-align: center; }
.textAlignRight { text-align: right; }
.textAlignLeft { text-align: left; }
.displayBlock { display: block; }

/* Custom Homepage Modules */
.modBoxRound { padding: 0; border-radius: 0; }
.modBoxSquare, .modStripe > .widescreenContents { background: var(--color-dark-one); padding: 4rem 2rem; color: var(--color-light-one); }

/*Gas-specific values */
.max200 { max-width: 200px; } /* fixed height for some homepage images in mod boxes */
.content_image { width: 100%; align-self: end; } 
.image_icon { max-width: 275px; } /* for multicolor icons */
.title_iconic { display: flex; align-items: center; padding-bottom: 1rem; border-style: solid; border-width: 0 0 2px 0; border-color: var(--color-info); }
.title_iconic img { padding-right: 1rem; width: 80px; } /* Special title preceded by an icon */
.category_iconic img { margin: 0 auto; display: block; width: 144px; }
.diagram_letters { background: var(--color-info); border-radius: 50%; color: white; padding: 4px 8px; font-weight: 600; }

/*--------------------------------------------------------------
Header and Footer
--------------------------------------------------------------*/
html {  height: 100%;  box-sizing: border-box; font-family: var(--font-primary); font-weight: 300; font-size: 16px; color: var(--color-dark-two) }
body,input,select, textarea { font-family: var(--font-primary); line-height: 1.5rem; }
body.site { position: relative; margin: 0 auto; background-color: var(--color-light-one); }

*, *:before, *:after {  box-sizing: inherit; }
header { z-index: 101; position: fixed; background: var(--color-light-one); margin: 0 auto; box-shadow: 0px 5px 5px rgba(0,0,0,0.2); display: flex; padding: 0 1rem;	justify-content: space-between;	align-items: center; width: 100%; height: 50px; top: 0; } /* height: 50px; */
header img.site-logo { max-width: 80%; margin: 0 auto; padding-left: 16px; width: 330px; display: flex; }
header h1 { display:none; padding: 1rem 0; color: rgba(255,255,255,0.9); text-transform: uppercase; font-weight: 600; font-size: 1.4rem; font-family: var(--font-secondary); }


/*--------------------------------------------------------------
Site Navigation
--------------------------------------------------------------*/
/* ==== Main Menu ==== */
nav#mainNav { z-index: 105; position: fixed; top: 50px; font-family: var(--font-secondary); font-weight: 400;  width: 100%; }
nav#mainNav ul { position: absolute; top: 0px; width: 100%; margin: 0 auto; padding: 0; background: var(--color-dark-one); list-style: none; line-height: 1.3rem; }
nav#mainNav ul, #acct-menu { background: var(--color-dark-one); }
nav#mainNav ul li { display: none; margin: 0; border-radius: 0; padding: 0; width: 100%; text-align: center; border-bottom: 1px solid rgba(255,255,255,0.1);}
nav#mainNav ul li a { position: relative; text-decoration: none; color: inherit; padding: 0 0 5px; }
nav#mainNav ul li:hover { background: var(--color-info); }
nav#mainNav ul li a, nav#mainNav ul li.current a { display: inline-block; width: 100%; padding: 20px 15px; color: var(--color-light-one); }
nav#mainNav ul li.current a { color: rgba(255,255,255,1); border-top: none;}
nav#mainNav ul li.current {  background: var(--color-info); }

nav#mainNav label { position: absolute; top: -47px; margin-bottom: 0; padding: 25px 0 0 15px; color: var(--color-light-one); cursor: pointer; font-size: 15px; }
nav#mainNav label:before { height: 2px;	width: 20px; display: inline-block; content: ""; background: var(--color-dark-one); box-shadow: 0px -5px 0px 0px var(--color-dark-one), 0px -10px 0px 0px var(--color-dark-one); margin-right: 10px; margin-bottom: 14px; }

nav#mainNav > ul > input[type=checkbox] { position: absolute; visibility: hidden; }
#collapse:checked ~ li { display: flex; } /* apparently does not like specificity, like ~ ul li { display: flex; } */
#collapse:checked + label:before { } /* change hamburger menu when menu is active 

/* ==== Account Menu ==== */
#myaccount { order: 3; color: var(--color-light-one); }

/* Sign in for unauthenticated users */
#acct-signin { position: absolute; top: 50px; display: flex; flex-wrap: wrap; flex-direction: row; background: var(--color-dark-one); padding: 0.3rem 0.8rem; left: 0px; }
#acct-signin > * { flex: 1 0 40%; margin: 0.4rem 0; }
#acct-signin > div:first-of-type { flex: 1 0 100%; }
#acct-signin > div:last-of-type { flex: 1 auto; }
#acct-signin input[type=button] {	padding: 4px 8px; margin: 0 7px 0px 0;	background-color: #0085ad;	border: none;	border-radius: 4px; }
#acct-signin input[type=text], #acct-signin input[type=password] { width: 100%;  }
#myAccntAuthLogin, #myAccntAuthPsswd { text-transform: lowercase; }
#acct-signin .btn_sm.secondary { background-color: #085c75; }
#acct-signin .forgot { display: inline-block; }

#acct-menu {display: none; position: absolute; right: 0; background: var(--color-dark-one); top: 50px; width: 100vw; height: 100vh; }
#acct-menu ul, ul.no-bullets {	list-style: none;	padding: 0;	margin: 0; }
#acct-menu ul li { margin: 0; border-top: 1px solid var(--color-tint-one); text-align: center; }
#acct-menu ul li:first-child {	margin-top: 0; }
#acct-menu ul li:hover { background: var(--color-dark-three); }
#acct-menu a { padding: 10px 15px; display: inline-block; width: 100%; } /*makes the whole button clickable */
#acct-menu a:hover { text-decoration: none; }
#myaccount .username { display: none; font-weight: 400; color: var(--color-dark-one); }
#myaccount a { color: var(--color-dark-one); }
#myAccntUL a, #myAcctUL a:visited { color: var(--color-light-one); }
#acct-title { z-index: 11; }
#acct-title img { width: 30px; vertical-align: middle; }
/* ==== END Account Pulldown ==== */

#info_bar { display: block; padding: .5rem 3rem; background-color: var(--color-info);  }
#info_bar h4, #info_bar p { margin: 0; line-height: 0.9rem; font-size: 0.9rem; }
#info_bar p { font-size: 0.8rem; }
#info_bar img { width: 25px; margin-right: 15px; }
#info_bar select, #info_bar input { border: 0; background: none; padding: 0; max-height: 3em }
#info_bar ul { list-style-type: none; padding: 0; margin: 0; justify-content: space-between; gap: 1.5em; flex-wrap: wrap; }
#info_bar ul li > * {display: inline-block; padding: .3rem 0; }

/* ==== Breadcrumb ==== */
nav#breadcrumb { font-size: 0.9rem; font-weight: 400; margin-bottom: .5rem; }
nav#breadcrumb ul { list-style: none; margin: 0 auto; line-height: 1.3rem; padding: 0; width: 100%; }
nav#breadcrumb ul li { display: inline-block; width: auto; }
nav#breadcrumb ul:nth-child(1) li { padding-left: 0; }
nav#breadcrumb a { padding: 0 4px; }
nav#breadcrumb a:first-of-type { padding-left: 0; }
nav#breadcrumb ul li::after { content: '\00A0\203A\00A0'}
nav#breadcrumb ul li:last-of-type::after { content: '';}
/* ==== END Breadcrumb ==== */


/* ==== START Pagination for Admin and Monitor Portal ==== */
.pageNav { display: flex; justify-content: center; padding: 0.8rem; margin: 1.3rem 0 2rem; width: 100%; background: var(--color-info); color: var(--color-light-one); font-weight: 500; text-align: center; min-height: 0; }
.pageNav > * { text-align: center; }
.pagerFirst, .pagerLast { padding: 0 15px; align-content: center; line-height: 1.2rem; }
.pageNav > a, .pageNav > a:hover { color: var(--color-light-one); }
.pagerPrevious, .pagerNext { width: 1.5rem;  height: 1.5rem; padding: 0 5px; margin: 0 1.3rem; border-radius: 50%; border: 1px solid var(--color-light-one); text-decoration: none;  }
.pagerPrevious:hover, .pagerNext:hover { background: var(--color-info-shade); text-decoration: none;  }
/* ==== END Pagination for Admin and Monitor Portal ==== */

footer#mainFooter { font-size: 1rem; padding: 0.5rem 2rem 2rem; background-color: var(--color-dark-two); color: var(--color-light-three); background-color: #1C1A17; padding-bottom: 6em; }
footer#mainFooter ul, footer#mainFooter ul li a { list-style-type: none; color: #bbb8b5; padding-left: 0; }
footer#mainFooter a { text-decoration: none; }
footer#mainFooter a:hover { color: #fff; }
footer#mainFooter > ul > li { line-height: 1.6rem; }
footer#mainFooter > ul > li > ul > li { line-height: 1.4rem; }
footer#mainFooter ul > li > ul { padding-left: 25px; }
footer#mainFooter h3 { font-weight: 400; color: #fff; padding-top: 20px; }

#totop { min-height: 20px; position: fixed; bottom: 75px; right: 15px; z-index: 5; width: 40px; }


/*--------------------------------------------------------------
Typography
--------------------------------------------------------------*/
h1,h2,h3,h4,h5,h6,p {	clear: both; margin: 0; padding: 0; }
h1, h2, h4 { font-family: var(--font-secondary); }
h3, h5, h6 { font-family: var(--font-tertiary); }
h1 { font-size: 1.7rem; line-height: 1.9rem; font-weight: 300; margin: 1.2rem 0 0; }
h2 { font-size: 1.1rem; line-height: 1.6rem; font-weight: 600; margin: 0.4rem 0 0.3rem; }
h3 { font-size: 1.2rem; line-height: 1.3rem; font-weight: 900; margin: 1rem 0 0;  }
h4 { font-size: 1.1rem; font-weight: 600; padding: .5rem 0; border-width: 1px 0 1px 0; border-style: solid; border-color: var(--color-dark-two); }
sup { font-size: 0.8em; padding-left: 0.4em; } /* relative to the parent font size */
p.largeText { font-size: 1.1rem; line-height: 1.6rem; }
p.image-caption { font-size: 1.2rem; margin: 0; }
/*These next two lines are questionable. Do we need such broad spacing on all UL? */
ul { padding-left: 1.3rem; margin-bottom: 1.5rem; } /* targetting #pageContainer adds padding to everything */
/* ul li { margin: 0.5rem auto; } */

ul.list-image-bullets { list-style-type: none; padding-left: 2rem; display: flex; }
ul.list-image-bullets { display: flex; align-items: center; margin: 0; }

/* for Public pages where green check replaces std bullet, currently Support */
ul.list-icon-bullets { list-style-type: none; } 
ul.list-icon-bullets img { width: 1rem; margin-right: .5rem; }

/* For the learning page and other links that need an icon and text to be linkable */
ul.list_icons { list-style-type: none; padding-left: 0; }
ul.list_icons li { margin: 0.5rem auto; flex: 1 0 100%; }
ul.list_icons a { display: flex; align-items: center; justify-content: flex-start; gap: 0.7rem; }
ul.list_icons img { width: 1.4rem; }

/*--------------------------------------------------------------
Forms
--------------------------------------------------------------*/
.avatar { background: red; color: var(--color-light-one); border-radius: 50%; font-size: 0.6rem; letter-spacing: -0.4px; padding: 0.3rem; font-weight: 600; margin-right: .3rem;}
pre { font-family: var(--font-primary); white-space: pre-wrap;	white-space: -moz-pre-wrap;	white-space: -o-pre-wrap; word-wrap: break-word; margin: 0; } /* for descriptions on forms */

form ul { padding: 0; width: 100%; list-style: none; }
form li > * { padding: 0.1rem .3rem; }
form.padded { padding: 1rem; background: var(--color-light-two); }
input[type=text], input[type=tel], input[type=url], input[type=password],
input[type=email], input[type=number], input[type=date], input[type=datetime-local], select, textarea {
	appearance: none; -moz-appearance: none; -webkit-appearance: none; box-sizing: border-box; font-family: var(--font-primary); background-color: var(--color-light-one); border: 1px solid var(--color-light-four); border-radius: none; overflow: hidden; text-overflow: ellipsis; text-decoration: none; line-height: normal; min-height: 1.5rem; width: 100%; min-width: 200px; flex: 1 0 200px; max-width: 100%; color: var(--color-dark-two); font-size: 1rem; padding: 0.2rem 0.3rem;  }
input[type=text], input[type=tel], input[type=url], input[type=password],
input[type=email], input[type=number], input[type=date], input[type=datetime-local] { white-space: nowrap;}
input.input-failed, input.input-required { border-color: var(--color-error); }
input.input-passed { border-color: var(--color-progress); }
textarea { white-space: normal; }
input[type=checkbox] { width: 1rem; }
select { background-image: url('../img/icons/icon_forms-select-arrow.png');	background-size: 0.7rem; background-repeat: no-repeat; background-position: calc(100% - 10px) 50%; box-shadow: 2px 2px 3px var(--color-light-four); }
textarea { height: 6em; }

label { color: var(--color-dark-two); font-weight: 500; font-size: 0.9rem; }

input[type=text]:focus, input[type=tel]:focus, input[type=password]:focus,
input[type=url]:focus, input[type=email]:focus,
input[type=number]:focus, input[type=date]:focus, input[type=datetime-local]:focus, select:focus, textarea:focus {
	color: #333; outline: 2px solid var(--color-info); background: var(--color-light-one);
}

/* Style form elements into a grid container */
.form-grid { list-style: none;	margin: 0; padding: 0; display: block; }
.form-grid li > * { display: block; }
.form-grid li > input[type=checkbox] { display: inline; }
.form-grid li.form-selectors { display: flex; align-items: start; }
.form-grid li.form-selectors > * { display: flex;  }
.form-grid li { padding: .3rem 0; margin: 0; }
.form-grid.four-col h4, .form-grid.four-col h3, .form-grid.four-col p { grid-column: 1/5; margin-top: .3rem; }
.form-grid.three-col h4, .form-grid.three-col h3, .form-grid.three-col p { grid-column: 1/4; margin-top: .3rem; }
.form-grid p { margin-bottom: 0.1rem; }

.contact-form li { padding: .3rem 0; }

#commentForm .tableBody { border: 2px solid var(--color-light-three); padding: 0.4rem;	background: var(--color-light-one); }
#pageContainer .tableBody .tableCell:first-of-type { font-weight: 600; }
#commentForm .tableRowHeader { background: transparent; }

/*--------------------------------------------------------------
Special Treatments for Portal Forms
--------------------------------------------------------------*/
.connectBorder { list-style: none; padding: 0.5rem 0.5rem 0.5rem 1.2rem; margin-bottom: 0; font-size: 0.8rem; 
  background-color: var(--color-light-three); background-repeat: no-repeat; background-position: 10px 50%; background-size: 1rem; min-height: 2rem;
  border-style: solid none solid none; border-width: 3px 0 3px 0; border-color: var(--color-info); }
.connectBorder.infoText { background-image: url('../img/icons/icon_status_info.svg'); background-color: var(--color-info-tint); border-color: var(--color-info);  }
.connectBorder.warningText { background-image: url('../img/icons/icon_status_warning.svg'); 
    background-color: var(--color-warning-tint); border-color: var(--color-warning); }
.connectBorder.errorText { background-image: url('../img/icons/icon_status_attention.svg'); 
	background-color: var(--color-error-tint); border-color: var(--color-error); }
.connectBorder.progressText { background-image: url('../img/icons/icon_status_progress.svg'); 
	background-color: var(--color-progress-tint); border-color: var(--color-progress); }


/*--------------------------------------------------------------
Tables
--------------------------------------------------------------*/
.tableBody { max-width: none; border: none; }
.tableRow { border-top: 1px solid var(--ltgray-bg-color); }
.tableRow { margin-top: 0.7rem; } .tableRow:first-of-type { margin-top: 0; }
.tableRow, .tableCell { display: inline-block;}
.tableRow, .secondaryHeader, form { margin-top: 0; width: 100%; }
.tableBody.bandedRows .tableRow { background: var(--color-light-one);	padding: 0.2rem 0.8rem; } /*set default banding to white*/
.tableBody.bandedRows .tableRow:nth-child(odd) {background: var(--color-light-two); }
.tableCell { display: block; line-height: 1.7rem; }
/* .tableCell:nth-child(1) * { font-size: 1.3rem; margin-top:1rem; font-weight: 400;} */
.tableCell span:nth-child(1) { font-weight: 500; }
.tableRowHeader { display: none; }
.table-group .tableBody { 
	border-top: 3px solid var(--color-info); border-bottom: 3px solid var(--color-light-four);
	background: var(--color-light-two);
}

/*--------------------------------------------------------------
Buttons & Links
--------------------------------------------------------------*/
a, a:hover { color: var(--color-info); text-decoration: none; }
a:hover { text-decoration: underline; }
/* For text links with an arrow following */
a.arrow-link::after { content: '\2002\25b6'; font-size: 0.7rem; }

button, a[class*=button], input[type=button], input[type=submit] { 
  appearance: none; -moz-appearance: none; -webkit-appearance: none; width: auto; color: var(--color-light-one); 
  padding: 0.4rem 1.2rem; margin: 1rem 0 1rem; border: none; border-radius: 4px; align-content: center;
  background-color: var(--color-progress); background-size: 20px; background-repeat: no-repeat;  
  font-family: var(--font-primary); font-size: 1rem; font-weight: 400; text-align: center; line-height: 1rem;
  cursor: pointer;
}
button:hover, a[class*=button]:hover, input[type=button]:hover, input[type=submit]:hover { 
  background-color: var(--color-progress-shade); text-decoration: none; }
button:disabled, a[class*=button]:disabled, input[type=submit]:disabled, input[type=button]:disabled  { 
  background-color: var(--color-light-four); color: var(--color-dark-two); cursor: not-allowed; }
button.btn-secondary, a[class*=button].btn-secondary, input[type=button].btn-secondary, input[type=submit].btn-secondary { background-color: var(--color-info); }
button.btn-secondary:hover, a[class*=button].btn-secondary:hover, input[type=button].btn-secondary:hover, input[type=submit].btn-secondary:hover { background: var(--color-info-shade);}

button.expanding::after { content: "\0020\25BE"; }
button.expanding { background-color: var(--color-light-two); color: var(--color-info-shade); }
button.expanding:hover { background-color: var(--color-light-four); }
/* button + button { margin-left: 1rem; } */
.button-group { display: flex; gap: 2rem; align-items: center; }

/* Icon Style Buttons */
.iconButton, 
input[type=submit].iconButton, input[type=button].iconButton { display: flex; background-color: transparent; border: none; width: 2.5rem; color: var(--color-dark-one); background-repeat: no-repeat;  margin-left: 1.5rem;	padding: 2px 0 5px 30px; }
.iconButton:hover { border: none; background-repeat: no-repeat; background-color: transparent; cursor: pointer; }
.iconButton.addIcon { background-image: url('/img/icons/icon_tools_add.svg'); background-color: transparent; border: none; }
.iconButton.closeIcon { background-image: url('/img/icons/icon_tools_close.svg'); background-color: transparent; }
.iconButton.openIcon { background-image: url('/img/icons/icon_tools_open.svg'); background-color: transparent; }
.iconDownload { background-image: url(/img/_global/icon_download.svg); color: inherit; text-align: left; background-position: center left; line-height: 40px;}

.iconStyleGuide { display: flex; }
.iconStyleGuide img { padding: 0; margin: 0; padding-right: 1rem; } /* for icons displayed in the style guide */

.hiddenMobile { display: none}


/*--------------------------------------------------------------
================================================================
LARGER SCREEN SETTINGS
================================================================
--------------------------------------------------------------*/
@media screen and (min-width: 800px) {
  .hiddenDesktop { display: none; }

/*--------------------------------------------------------------
Global Adjustments
--------------------------------------------------------------*/
/* Custom Modules */
.modBoxRound { border-radius: 3rem; background: var(--color-light-two); padding: 3rem; }
.modBoxSquare { padding: 5rem 3rem 7rem; } /* make these boxes taller so the background has room */
.modStripe { background-color: var(--color-dark-one); color: var(--color-light-one); padding: 3rem 0; }

h3.eyebrow {	font-size: 1.4rem;	margin-top: 2rem; background-color: transparent;	padding: 0.2rem 0.5rem;	}

#pageContainer h3, #pageContainer h4 { padding: .3rem 0; }
header { position: relative; box-shadow: none; padding: 20px 0 0; }
header img.site-logo { width: 400px; max-width: none; margin: 0; } /* removed order: 1; */
header h1 { display: inline-block; margin: 0 0 0 0.6rem; padding: 5px 0 4px; flex: 2 0 220px; } /* removed order: 2; */
nav#mainNav { position: relative; z-index: 100; top: inherit; box-shadow: 0px 4px 5px rgba(0,0,0,0.1); }
nav#mainNav input[type=checkbox]{ visibility: hidden; position: absolute; }
nav#mainNav label { display: none; } /* Hide label so the nav goes back to normal height */
nav#mainNav ul { position: relative; background: var(--color-light-one); } 
nav#mainNav ul li a.current { padding-top: 20px; color: var(--color-light-one); border-top: 3px solid var(--color-light-one); }
nav#mainNav > ul > li { display: inline-block; width: auto; border-bottom: 3px solid var(--color-light-one); margin-right: 2rem; }
nav#mainNav > ul > li:hover { background-color: var(--color-light-one); border-bottom: 3px solid var(--color-info); transition: border-color 0.3s; }
nav#mainNav ul li a, nav#mainNav ul li a.current { position: relative; width: auto; padding: 0.5rem 0 calc(0.5rem - 2px) 0; color: inherit; }
nav#mainNav ul li a.current { padding-top: 17px; }

/*	Show and style NAV LEVEL 2*/
nav#mainNav > ul > li > ul { display: none; width: auto; color: var(--color-light-four); }
nav#mainNav li:hover > ul { display: block; position: absolute; top: 37px; padding: 0; background: rgba(12, 39, 51, 0.95); }
nav#mainNav > ul > li > ul > li { margin-left: 0; padding: .2rem 0.8rem .2rem 0.4rem; display: block; border-left: 2px solid transparent; text-align: left; }
nav#mainNav > ul > li > ul > li:hover { background: var(--color-info-trans); border-left: 2px solid var(--color-info); transition: border-color 0.3s; }

#acct-menu { width: auto;	height: auto; top: 40px; min-width: 200px; background: transparent; }
#acct-menu ul { background: var(--color-dark-one); }
#acct-menu ul li:first-child { margin-top: 17px; }
#acct-title img { margin-right: 0.6rem; }/* space between icon and username */
#acct-signin { right: 0px; left: inherit; width: 220px;  border-radius: 0 0 6px 6px; padding: 2rem 0.7rem 1rem; }

#myaccount { display: flex; cursor: pointer; } /* makes the icon and name clickable */
#myaccount a, #rememberMeLabel { color: var(--color-light-one); }
#myaccount #myAccntReg a { color: var(--color-dark-one); } /* Register link */
#myaccount .username { display: inline-block; }

.footer-follow, .footer-list { padding: 0 2rem; max-width: 1400px;	margin: 0 auto;	width: 100%; }

/*--------------------------------------------------------------
Form fields, tables and page notifications
--------------------------------------------------------------*/
form button, form input[type=button], form input[type=submit] { margin: 1rem 0; }
.form-comments { background-color: transparent; padding: 0; }
input[type=text], input[type=tel], input[type=url], input[type=email], input[type=password], input[type=number], input[type=date], input[type=datetime-local], select, textarea {
  max-width: 260px; max-height: 2rem; margin-bottom: 0.6rem; } /* changed max-width from 260px to 90% on 12/5 */
textarea { width: 100%; max-width: none; min-height: 110px; }

.form-grid { display: grid; grid-gap: 1.5rem 3rem; }
.form-grid li.form-selectors > * { display: inline-block;	}
.form-grid.two-col { grid-template-columns: 1fr 1fr; }
.form-grid.three-col { grid-template-columns: 1fr 1fr 1fr; }
.form-grid.four-col { grid-template-columns: 1fr 1fr 1fr 1fr; }

.form-flex {display: flex; grid-gap: 1rem 2rem; flex-wrap: wrap; }
.form-flex li { flex: 1 0 250px; }
.form-flex li.medium { flex: 0 0 400px; } /* for text fields*/
.form-flex li.large { flex: 1 0 100%; }

.contact-form { display: grid; grid-template-columns: subgrid; list-style: none; margin: 0; padding: 0; }
.contact-form > li > * { display: block; }
.contact-form .span3 { grid-column: span 3; }
.contact-form .span2 { grid-column: span 2; }
.contact-form label { font-weight: 600; }

.tableRowHeader { display: table-header-group; background: var(--color-dark-one); color: var(--color-light-one); font-weight: 400; }
.tableRowHeader.secondary { background: var(--color-light-four); color: var(--color-dark-one); }
.tableBody { max-width: none; border: none; margin: 1rem 0; }
.tableRow { display: table-row; }
.tableRowHeader > *, .tableRow > * { display: table-cell; width: 5%; padding: 0.3rem 0.5rem; }
.tableRowHeader > *:nth-child(1) *, .tableRow > *:nth-child(1) *  { font-size: inherit; }
.tableCell span:nth-child(1) { font-weight: inherit; } /* remove bold headings used in mobile view */

.connectBorder { margin-bottom: 1rem;	padding: 1rem .2rem 1rem 2.6rem; border-style: none none none solid; border-width: 0 0 0 3px; }
.form-grid.connectBorder { margin-bottom: 2rem; }

/*--------------------------------------------------------------
Undefined
--------------------------------------------------------------*/
.accent-line { height: 15px;}
input.5char, select.5char { max-width: 10px;}
  
}