html { scrollbar-gutter: stable; }
body { width: 100vw; }

i1 { display: block; margin-left: 2em; margin-bottom: 1em; }
i2 { display: block; margin-left: 4em; margin-bottom: 1em; }

main img { max-width: 800px; width: auto; height: auto; }
main .table caption { caption-side: top; }

a { text-decoration: none; }

#header {}
#header .logo { margin-top: 12px; }
#header .mission { max-width: 700px; margin-bottom: 6px; font-size: .85em; line-height: sm; }
#header .menu { display: flex; gap: 2em; font-size: 1em; text-transform: uppercase; font-weight: bold; }
#header .menu a { border-left: 1px solid #ccc; border-bottom: 1px solid #ccc; padding: 0 6px; text-decoration: none; }

.topLinks { 
	background: gold; 
	/* border: 1px solid #ff8; */
	/* padding: 0 1em; */
}
.topLinks a { 
	display: inline-block; 
	padding: 0 .5em; 
	border: 1px solid #ff8;
	border-radius: 4px;
	text-decoration: none; 
}

.lnk_info { font-size: medium; color: blue; cursor: pointer; }

.hIndent-1 p { 
	margin-top: 0;
	margin-bottom: 0;
	padding-left: 2em;
	text-indent: -2em;
}

#opMenuDiv { border: 1px solid #ddd; }
#opMenuDiv a { text-decoration: none; }
#opMenuDiv ul { 
	/* list-style-type: none; */
	padding-left: 1em;
	margin-left: 0;
}
#opMenuDiv ul ul {
	/* margin-left: 1em; */
}

div#portal_1 { border: 1px solid #ddd; }
div#portal_1 a { text-decoration: none; }
div#portal_1 ul { 
	/* list-style-type: none; */
	padding-left: 1em;
	margin-left: 0;
}
div#portal_1 ul ul {
	/* margin-left: 1em; */
}

.docs_1 img { max-width: 100%; height: auto; }

.docs_1 #content { width: 100%; }
.docs_1 #content h4 { color: brown; }
.docs_1 #content h5 { font-family: serif; color: brown; }
.docs_1 #content h4:nth-child(1) { font-weight: normal; color: black; }

.front1 a { text-decoration: none; }
.front1 h4, div.front1 h6 { color: brown; }

.docs_1_print #content h5 { font-family: serif; color: brown; }

.docs1menu {
	width: 120px; 
	list-style-type: none; 
	padding: 0; 
	margin: 0;
	border-top: 3px solid #ccc;
}
.docs1menu>li {
	border-bottom: 3px solid #ccc;
}
.docs1menu a { text-decoration: none; }
.docs1menu a:active { color: black; }
.docs1menu ul {
	list-style-type: none; 
	padding: 0; 
	margin-left: 10px;
}
.docs1menu ul li {
	border-top: 1px solid #ccc;
}

.lnk1 { font-size: small; }
.lnk1 a { text-decoration: none; }
.lbl1 { font-size: small; font-family: serif; color: grey; }
.lbl2 { font-family: serif; color: grey; }

a.backLink { text-decoration: none; }

ol.i1 { margin-left: 2em; }

.no-bottom-margin { margin-bottom: 0; }

.col2flex { display: flex; flex-wrap: wrap; }
.col2flex div { 
    flex: 50%; /* or - flex: 0 50% - or - flex-basis: 50% - */
    /* flex: 1; border: 1px solid grey; padding: 4px; */
    border: 1px solid grey; padding: 10px;
}

.col2flex-1 { display: flex; flex-wrap: wrap; justify-content: space-between; }
.col2flex-1 div { 
    flex: 0 0 49%; /* or - flex: 0 50% - or - flex-basis: 50% - */
    /* flex: 1; border: 1px solid grey; padding: 4px; */
	margin-bottom: 10px;
	padding: 10px;
    border: 1px solid #ccc;
	border-radius: 12px;
}

.grid2b { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0px; }
.grid2b > div { border: 1px solid #aaa; padding: 0 6px 0 6px; }
.grid2b .cell11 { grid-row: 1; grid-column: 1; }
.grid2b .cell12 { grid-row: 1; grid-column: 2; }
.grid2b .cell21 { grid-row: 2; grid-column: 1; }
.grid2b .cell22 { grid-row: 2; grid-column: 2; }

a.bkLnk { font-size: normal; text-decoration: none; }

ul.ul01 p { display: inline; }

table.t01 { border: 1px solid grey; border-collapse: collapse; caption-side: top; }
table.t01 tbody tr { vertical-align: top; }
table.t01 thead tr { vertical-align: bottom; }
table.t01 th, table.t01 td { border: 1px solid grey; padding: 0 4px; }
table.t01 a { text-decoration: none; }

.tbl-small-1 { border: 1px solid grey; border-collapse: collapse; caption-side: top; font-size: small; }
.tbl-small-1 tbody tr { vertical-align: top; }
.tbl-small-1 thead tr { vertical-align: bottom; }
.tbl-small-1 th, .tbl-small-1 td { border: 1px solid grey; padding: 0 4px; }
.tbl-small-1 tr>td:nth-child(n+2) { text-align: center; }
.tbl-small-1 a { text-decoration: none; }

table.t02 { border: 1px solid #ccc; border-collapse: collapse; font-family: serif; }
table.t02 th { border: 1px solid #ccc; padding: 0 4px; vertical-align: bottom; font-family: sans-serif; font-size: small; color: grey; }
table.t02 td { border: 1px solid #ccc; padding: 0 4px; }

table.tbl01 { border: 1px solid grey; border-collapse: collapse; }
table.tbl01 th, table.tbl01 td { border: 1px solid grey; padding: 0 4px; }

table.tbl02 { border: 1px solid grey; border-collapse: collapse; font-size: small; }
table.tbl02 th, table.tbl02 td { border: 1px solid grey; padding: 0 4px; }
table.tbl02 tbody tr { vertical-align: top; }
table.tbl02 a { text-decoration: none; }

table.tbl03 { border: 1px solid grey; border-collapse: collapse; font-size: small; }
table.tbl03 th:nth-child(1) { width: 40%; }
table.tbl03 th, table.tbl03 td { border: 1px solid grey; padding: 0 4px; }
table.tbl03 tbody tr { vertical-align: top; }
table.tbl03 a { text-decoration: none; }

table.tbl04 { border: 1px solid grey; border-collapse: collapse; font-size: small; }
table.tbl04 th:nth-child(2) { text-align: right; }
table.tbl04 th:nth-child(3) { text-align: right; }
table.tbl04 th:nth-child(4) { text-align: right; }
table.tbl04 td:nth-child(2) { text-align: right; }
table.tbl04 td:nth-child(3) { text-align: right; }
table.tbl04 td:nth-child(4) { text-align: right; }
table.tbl04 th, table.tbl04 td { border: 1px solid grey; padding: 0 4px; }
table.tbl04 tbody tr { vertical-align: top; }
table.tbl04 a { text-decoration: none; }

table.toc1 { border-collapse: collapse; }
table.toc1 tr { border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; }

table.form-no-borders { border-collapse: collapse; }
table.form-no-borders tr { vertical-align: top; }
table.form-no-borders tr>td:nth-child(1) { 
	white-space: nowrap; font-family: serif; font-size: .8em; color: grey; 
	text-align: right; padding-right: 4px;
}

.content1 table tr { border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; }
.content1 table th { padding-right: 1em; }
.content1 table td { padding-right: 1em; }
.content1 img { width: 100%; height: auto; }

.content2 table tr { border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; }
.content2 table th { padding-right: 1em; }
.content2 table td { padding-right: 1em; }
.content2 img { max-width: 100%; height: auto; }

.content3 table tr { border-bottom: 1px solid #ccc; }
.content3 table td { vertical-align: text-top; padding-right: 6px; }
.content3 img { width: 100%; height: auto; }

.content4 table { font-size: small; }
.content4 table tr { border-bottom: 1px solid #ccc; }
.content4 table td { vertical-align: text-top; padding-right: 6px; }
.content4 img { width: 100%; height: auto; }

.content5 table { width: 100%; font-family: serif; }
.content5 table tr { border-bottom: 1px solid #ccc; }
.content5 table td { vertical-align: text-top; padding-right: 6px; }
.content5 table td:nth-child(1) { width: 50%; }
.content5 img { width: 100%; height: auto; }

.resp-img-50 img { width: 50%; min-width: 300px; height: auto; }

.cTbl1 table tr { border-bottom: 1px solid #ccc; }
.cTbl1 table td { vertical-align: text-top; }
.cTbl1 table td:nth-child(1) { width: 10em; }

.tbl-sml1 table { font-size: small; font-family: serif; }

.tbl-cust1 {border-collapse: collapse; border: 4px solid #ccc; width: 100%; }
.tbl-cust1 td, table.tbl-cust1 th { border: 1px solid #ccc; }
.tbl-cust1 thead { border-bottom: 4px solid #ccc; }
.tbl-cust1 th:nth-child(3) { border-right: 4px solid #ccc; }
.tbl-cust1 td:nth-child(3) { border-right: 4px solid #ccc; }
.tbl-cust1 td:nth-child(8), table.tbl-cust1 td:nth-child(11), table.tbl-cust1 td:nth-child(16), table.tbl-cust1 td:nth-child(19) { border-right: 4px solid #ccc; }
.tbl-cust1 th:nth-child(8), table.tbl-cust1 th:nth-child(11), table.tbl-cust1 th:nth-child(16), table.tbl-cust1 th:nth-child(19) { border-right: 4px solid #ccc; }
.tbl-cust1 tr:nth-child(1) th:nth-child(3), table.tbl-cust1 tr:nth-child(1) th:nth-child(4), table.tbl-cust1 tr:nth-child(1) th:nth-child(5) { border-right: 4px solid #ccc; }
.tbl-cust1 tr:nth-child(2) th:nth-child(3), table.tbl-cust1 tr:nth-child(2) th:nth-child(4), table.tbl-cust1 tr:nth-child(2) th:nth-child(5) { border-right: 4px solid #ccc; }
.tbl-cust1 tr:nth-child(2) th:nth-child(6), table.tbl-cust1 tr:nth-child(2) th:nth-child(7), table.tbl-cust1 tr:nth-child(2) th:nth-child(5) { border-right: 4px solid #ccc; }
.tbl-cust1 tbody tr:nth-child(8), table.tbl-cust1 tbody tr:nth-child(16), table.tbl-cust1 tbody tr:nth-child(24) { border-bottom: 4px solid #ccc; }
.tbl-cust1 tbody tr:nth-child(32), table.tbl-cust1 tbody tr:nth-child(40), table.tbl-cust1 tbody tr:nth-child(48) { border-bottom: 4px solid #ccc; }

.tbl-cust2 {border-collapse: collapse; border: 1px solid #ccc; width: 100%; font-size: small; font-family: serif; }
.tbl-cust2 td, table.tbl-cust2 th { border: 1px solid #ccc; }

#overlay {
  display: none; /* hide modal initially */
  position: absolute; /* position to allow modal to cover over it */
  background: rgba(0, 0, 0, 0.5); /* gray out the background when modal appears */
  top: 0; bottom: 0; left: 0; right: 0;
}

#modal {
	border-radius: 15%;
	border: 3px solid orange;
	background: #FFF;
	margin: 0 auto; /* center the modal */
	padding: 8px; width: 420px;
	text-align: center;
	position: relative; /* set relative to overlay position */
	top: 20%;
	box-shadow: 10px 5px 5px #000; /* give modal a hover effect */
}
#modal button { margin-top: 4px; margin-bottom: 4px; }

#close-modal, 
#open-modal {
	display: inline-block;
	cursor: pointer;
	padding: 25px 20px;
	background: greenyellow;
	text-decoration: none;
	border-radius: 50%;
}

#close-modal:hover, 
#open-modal:hover {
	background: gray;
	color: #FFF;
}

#close-modal:focus, 
#open-modal:focus {
	outline: none;
}

@media print {
    .pagebreak { page-break-before: always; } /* page-break-after works, as well */
}

fieldset legend { font-weight: bold; color: silver;}