* {
  box-sizing: border-box;
}

body {
  background-color: #D6D6D6;
  font-family: Arial;
  margin: 0;
}

.form-container {
  display: flex;
  justify-content: center;
}

.form-container button {
  justify-self: center;
}

/* Header */
header {
  display: flex; 
  text-align: center;
  background: #2563EB;
  color: black;
}

.hdrside {
  flex: 10%;
}

.hdr {
  flex: 80%;
  padding: 5px 20px;
}

/* Top navigation bar */
.navbar {
  display: flex;
  background-color: #073F80;
  text-align: center;
}

/* Navigation bar links */
.navbar a {
  color: #D6D6D6;
  padding: 14px 20px;
  text-decoration: none;
  text-align: center;
}

/* Change color on hover */
.navbar a:hover {
  background-color: #ddd;
  color: black;
}

/* Column container */
.container {  
  display: flex;
  /*flex-direction: row;*/
  /*flex-wrap: wrap;*/
}

/* Sidebar/left column */
.side {
  flex: 10%;
  background-color: #f1f1f1;
  padding: 20px;
}

.appsidesection a:hover {
  background-color: #ddd;
  color: #060E1A;
}

/* Main column */
.main {
  flex: 80%;
  width: 100%;
  background-color: #D6D6D6;
  padding: 5px 20px;
  /*flex-direction: column;*/
}

/* App bar */
.apphdrc {
  display: flex;
  flex-direction: column;
  background-color: #060E1A;
}

/* App bar links */
.apphdrc a {
  color: #D6D6D6;
  padding: 0px 20px 5px;
  text-decoration: none;
  text-align: center;
}

/* Change color on hover */
.apphdrc a:hover {
  background-color: #ddd;
  color: black;
}

.appcanvasc-c {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  padding:10;
}

.appcanvasc {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  padding:10;
}

/* Change color on hover */
.appcanvasc a:hover {
  background-color: #ddd;
  color: #060E1A;
}

/* default geometry
  flex box = 390 x 
  */
.appcanvas-flex-item-l {
  display: flex;
  flex-wrap: wrap;
  background-color: #f1f1f1;
  padding: 10px;
  font-size: 18px;
  text-align: left;
  height:390px;
  width:390px;
}

.appcanvas-flex-item-l div {
  padding: 10px;
}

.appcanvas-flex-item-m {
  display: flex;
  flex-wrap: wrap;
  /*background-color: #f1f1f1;*/
  padding: 15px;
  font-size: 12px;
  text-align: left;
  height:305px;
  width:200px;
}

.appcanvas-flex-item-s {
  display: flex;
  flex-wrap: wrap;
  /*background-color: #f1f1f1;*/
  padding: 10px;
  font-size: 18px;
  text-align: center;
  height:305px;
  width:305px;
}

.appcanvas-flex-item-xl {
  display: flex;
  flex-wrap: wrap;
  background-color: #f1f1f1;
  padding: 10px;
  font-size: 18px;
  text-align: left;
  height:440px;
  width:780px;
}

.appcanvas-flex-item-xl div {
  padding: 10px;
}

.appcanvas-flex-item {
  display: flex;
  flex-wrap: wrap;
  background-color: #f1f1f1;
  padding: 10px;
  font-size: 18px;
  text-align: left;
  height:390px;
  width:390px;
}
.appcanvas-flex-item div {
  padding: 10px;
  text-align: center;
}

.officials th {
  padding: 2px;
  background-color: #D6D6D6;
  color: #060E1A;
}

.officials td {
  padding: 2px
}

/* Main */
.main div {
  width: 100%;
}
.main h1 {
  padding: 2px 20px 0px;
	color: #D6D6D6;
}

.main h2 {
  padding: 2px 20px;
	color: #D6D6D6;
  background-color: #060E1A;
}

.main h3 {
  padding: 2px 20px;
  color: #060E1A;
}

.main h4 {
  padding: 2px 20px;
  color: black;
}

.main h5 {
  padding: 2px 20px;
  color: black;
}

/* Article */
.article div {
  width: 100%;
}
.article h1 {
  padding: 2px 20px 0px;
	color: #D6D6D6;
}

.article h2 {
  padding: 2px 20px;
	color: #D6D6D6;
  background-color: #060E1A;
}

.article h3 {
  padding: 2px 20px;
  color: #060E1A;
}

.article h4 {
  padding: 2px 20px;
  color: black;
}

.article h5 {
  padding: 2px 20px;
  color: black;
}

/* Section */
.section div {
  width: 100%;
}

.section h1 {
  padding: 2px 20px 2px 20px;
  margin: 5px;
	color: #D6D6D6;
}

.section h2 {
  padding: 2px 20px 2px 20px;
  margin: 5px;
	color: #D6D6D6;
  background-color: #060E1A;
}

.section h3 {
  padding: 2px 20px 2px 20px;
  margin: 5px;
  color: #060E1A;
}

.section h4 {
  padding: 2px 20px 2px 20px;
  margin: 5px;
  color: black;
}

.section h5 {
  padding: 2px 20px 2px 20px;
  margin: 5px;
  color: black;
}

.section table {
  width: 100%;
  table-layout:fixed;
  column-width: 33.3%;
  border: 1px solid black;
  border-collapse: collapse;
}

.section tbody {
  text-align: left;
}

.section tr td {
  padding: 2px 20px 2px 20px;
  border: 1px solid black;
  border-collapse: collapse;
}

.section li {
  padding: 2px 20px 2px 20px;
  margin: 5px;
  list-style-position: inside;
}

.section p {
  padding: 2px 20px 2px 20px;
  margin: 5px;
}
/*
.section p:hover {
  padding: 5px 20px;
  background-color: #76D6FF
}
*/
/*
.section a {
  color: black;
  padding: 5px 20px;
  text-decoration: none;
  text-align: center;
}*/
/*
.section a:hover {
  padding: 5px 20px;
  background-color: #c9a84c
}*/

.modal-content h1 {
  padding: 2px 20px;
	color: #073F80;
}

.modal-content h2 {
  padding: 2px 20px;
	color: #073F80;
}

.modal-content h1 {
  padding: 2px 20px;
	color: #073F80;
}

.modal-content h2 {
  padding: 2px 20px;
	color: #073F80;
}

.modal-content p {
  padding: 2px 20px;
}

.modal-content a {
  padding: 2px 20px;
}

.modal-content button {
  padding: 10px 20px;
  margin: 20px;
}

.modal-content label {
  padding: 40;
  text-align: right;
}

.modalnav {
  padding-top: 15px;
  padding-bottom: 15px;
  background-color: #073F80;
}

.modalnav a {
  color: #D6D6D6;
  padding: 14px 20px;
  text-decoration: none;
  text-align: center;
}

/* Change color on hover */
.modalnav a:hover {
  background-color: #ddd;
  color: black;
}


.sticky {
  position: sticky;
  bottom: 0;
  background-color:#073F80;
  padding: 20px;
  font-size: 14px;
}

/* Fake image, just for this example */
.fakeimg {
  border-radius: 10px;
  background-color: #aaa;
  width: 100%;
  padding: 20px;
}

.fakeimg-s {
  border-radius: 10px;
  background-color: #aaa;
  width: 100%;
  padding: 15px;
}

.fakeimg h3 {
  padding: 0px;
  margin: 2px;
  text-align: center;
}

.fakeimg h4 {
  padding: 0px;
  margin: 2px;
  text-align: center;
}

/* Footer */
footer {
  padding: 5px;
  text-align: center;
  background: #ddd;
  margin:2px;
}

.footer {
  margin-block-start: 0px;
  margin-block-end: 0px;
}

.footer hr {
  padding: 5px;
  margin:10px;
}

.footer h6 {
  padding: 5px;
  margin:5px;
}

.footer h5 {
  padding: 5px;
  margin:2px;
}

.footer h4 {
  padding: 5px;
  margin:2px;
}

.footer h2 {
  padding: 5px;
  margin:10px;
}

@media (max-width:640px) { /* hi-res laptops and desktops */
/*  .container{
    flex-direction: row;
  }*/
  .appcanvas {
    flex-direction: column;
  }
}

/***** MODAL DIALOG ****/
#modal {
	/* Underlay covers entire screen. */
	position: fixed;
	top:0px;
	bottom: 0px;
	left:0px;
	right:0px;
	background-color:#5b1393a9;
	z-index:1000;

	/* Flexbox centers the .modal-content vertically and horizontally */
	display:flex;
	flex-direction:column;
	align-items:center;

	/* Animate when opening */
	animation-name: fadeIn;
	animation-duration:150ms;
	animation-timing-function: ease;
}

#modal > .modal-underlay {
	/* underlay takes up the entire viewport. This is only
	required if you want to click to dismiss the popup */
	position: absolute;
	z-index: -1;
	top:0px;
	bottom:0px;
	left: 0px;
	right: 0px;
}

#modal > .modal-content {
	/* Position visible dialog near the top of the window */
	margin-top:10vh;

	/* Sizing for visible dialog */
	width:80%;
  height:80%;
	/*max-width:600px;*/

	/* Display properties for visible dialog*/
	border:solid 1px #999;
	border-radius:8px;
	box-shadow: 0px 0px 20px 0px #073F804d;
	background-color:white;
	padding:20px;

	/* Animate when opening */
	animation-name:zoomIn;
	animation-duration:150ms;
	animation-timing-function: ease;
}

#modal.closing {
	/* Animate when closing */
	animation-name: fadeOut;
	animation-duration:150ms;
	animation-timing-function: ease;
}

#modal.closing > .modal-content {
	/* Animate when closing */
	animation-name: zoomOut;
	animation-duration:150ms;
	animation-timing-function: ease;
}

@keyframes fadeIn {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

@keyframes fadeOut {
	0% {opacity: 1;}
	100% {opacity: 0;}
}

@keyframes zoomIn {
	0% {transform: scale(0.9);}
	100% {transform: scale(1);}
}

@keyframes zoomOut {
	0% {transform: scale(1);}
	100% {transform: scale(0.9);}
}